@yamada-ui/autocomplete 1.5.1 → 1.5.2-dev-20240917033401

package/dist/index.js

@@ -31,1422 +31,1614 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/autocomplete.tsx
-var import_core4 = require("@yamada-ui/core");
+var import_core9 = require("@yamada-ui/core");
 var import_popover2 = require("@yamada-ui/popover");
 var import_portal = require("@yamada-ui/portal");
+var import_utils12 = require("@yamada-ui/utils");
+
+// src/autocomplete-context.ts
+var import_use_descendant = require("@yamada-ui/use-descendant");
+var import_utils = require("@yamada-ui/utils");
+var {
+  DescendantsContextProvider: AutocompleteDescendantsContextProvider,
+  useDescendantsContext: useAutocompleteDescendantsContext,
+  useDescendants: useAutocompleteDescendants,
+  useDescendant: useAutocompleteDescendant
+} = (0, import_use_descendant.createDescendant)();
+var [AutocompleteProvider, useAutocompleteContext] = (0, import_utils.createContext)({
+  name: "AutocompleteContext",
+  errorMessage: `useAutocompleteContext returned is 'undefined'. Seems you forgot to wrap the components in "<Autocomplete />" or "<MultiAutocomplete />"`
+});
+
+// src/autocomplete-create.tsx
+var import_core2 = require("@yamada-ui/core");
 var import_utils4 = require("@yamada-ui/utils");
 
 // src/autocomplete-icon.tsx
-var import_core2 = require("@yamada-ui/core");
+var import_core = require("@yamada-ui/core");
 var import_icon = require("@yamada-ui/icon");
 var import_use_clickable = require("@yamada-ui/use-clickable");
 var import_utils2 = require("@yamada-ui/utils");
-var import_react2 = require("react");
-
-// src/use-autocomplete.tsx
-var import_core = require("@yamada-ui/core");
-var import_form_control = require("@yamada-ui/form-control");
-var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
-var import_use_descendant = require("@yamada-ui/use-descendant");
-var import_use_disclosure = require("@yamada-ui/use-disclosure");
-var import_use_outside_click = require("@yamada-ui/use-outside-click");
-var import_utils = require("@yamada-ui/utils");
 var import_react = require("react");
 var import_jsx_runtime = 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",
-  \uFF66\uFF9E: "\u30FA",
-  \uFF71: "\u30A2",
-  \uFF72: "\u30A4",
-  \uFF73: "\u30A6",
-  \uFF74: "\u30A8",
-  \uFF75: "\u30AA",
-  \uFF76: "\u30AB",
-  \uFF77: "\u30AD",
-  \uFF78: "\u30AF",
-  \uFF79: "\u30B1",
-  \uFF7A: "\u30B3",
-  \uFF7B: "\u30B5",
-  \uFF7C: "\u30B7",
-  \uFF7D: "\u30B9",
-  \uFF7E: "\u30BB",
-  \uFF7F: "\u30BD",
-  \uFF80: "\u30BF",
-  \uFF81: "\u30C1",
-  \uFF82: "\u30C4",
-  \uFF83: "\u30C6",
-  \uFF84: "\u30C8",
-  \uFF85: "\u30CA",
-  \uFF86: "\u30CB",
-  \uFF87: "\u30CC",
-  \uFF88: "\u30CD",
-  \uFF89: "\u30CE",
-  \uFF8A: "\u30CF",
-  \uFF8B: "\u30D2",
-  \uFF8C: "\u30D5",
-  \uFF8D: "\u30D8",
-  \uFF8E: "\u30DB",
-  \uFF8F: "\u30DE",
-  \uFF90: "\u30DF",
-  \uFF91: "\u30E0",
-  \uFF92: "\u30E1",
-  \uFF93: "\u30E2",
-  \uFF94: "\u30E4",
-  \uFF95: "\u30E6",
-  \uFF96: "\u30E8",
-  \uFF97: "\u30E9",
-  \uFF98: "\u30EA",
-  \uFF99: "\u30EB",
-  \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"
-};
-var defaultFormat = (value) => {
-  value = value.replace(
-    /[！-～]/g,
-    (v) => String.fromCharCode(v.charCodeAt(0) - 65248)
+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",
+      justifyContent: "center",
+      pointerEvents: "none",
+      cursor: "pointer",
+      ...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",
+          maxHeight: "1em",
+          color: "currentColor"
+        }
+      })
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core.ui.div,
+      {
+        ref,
+        className: (0, import_utils2.cx)("ui-autocomplete__icon", className),
+        __css: css,
+        ...rest,
+        children: (0, import_utils2.isValidElement)(children) ? cloneChildren : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.ChevronIcon, {})
+      }
+    );
+  }
+);
+var AutocompleteClearIcon = ({
+  className,
+  children,
+  ...props
+}) => {
+  const ref = (0, import_react.useRef)(null);
+  const { styles } = useAutocompleteContext();
+  const isDisabled = props.disabled;
+  const rest = (0, import_use_clickable.useClickable)({
+    ref,
+    isDisabled,
+    ...props
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    AutocompleteIcon,
+    {
+      "aria-label": "Clear value",
+      className: (0, import_utils2.cx)("ui-autocomplete__icon--clear", className),
+      __css: styles.clearIcon,
+      ...rest,
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.CloseIcon, { w: "0.5em", h: "0.5em" })
+    }
   );
-  const reg = new RegExp("(" + Object.keys(kanaMap).join("|") + ")", "g");
-  value = value.replace(reg, (v) => kanaMap[v]).replace(/ﾞ/g, "\u309B").replace(/ﾟ/g, "\u309C");
-  value = value.toUpperCase();
-  return value;
 };
-var flattenItems = (items) => {
-  const filterItems = (items2) => items2.map((item) => {
-    var _a;
-    const { isDisabled, isFocusable } = item;
-    const trulyDisabled = !!isDisabled && !isFocusable;
-    if (trulyDisabled) return;
-    if ("items" in item) {
-      return filterItems((_a = item.items) != null ? _a : []);
-    } else {
-      return item;
+var AutocompleteItemIcon = (0, import_core.forwardRef)(({ className, ...rest }, ref) => {
+  const { styles } = useAutocompleteContext();
+  const css = {
+    flexShrink: 0,
+    display: "inline-flex",
+    justifyContent: "center",
+    alignItems: "center",
+    fontSize: "0.85em",
+    ...styles.itemIcon
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_core.ui.span,
+    {
+      ref,
+      className: (0, import_utils2.cx)("ui-autocomplete__item__icon", className),
+      __css: css,
+      ...rest
     }
-  }).filter(Boolean);
-  return filterItems(items).flat(Infinity);
-};
+  );
+});
+
+// src/use-autocomplete-option.ts
+var import_utils3 = require("@yamada-ui/utils");
+var import_react2 = require("react");
 var isTargetOption = (target) => {
   var _a;
-  return (0, import_utils.isHTMLElement)(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("option"));
+  return (0, import_utils3.isHTMLElement)(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("option"));
 };
-var {
-  DescendantsContextProvider: AutocompleteDescendantsContextProvider,
-  useDescendantsContext: useAutocompleteDescendantsContext,
-  useDescendants: useAutocompleteDescendants,
-  useDescendant: useAutocompleteDescendant
-} = (0, import_use_descendant.createDescendant)();
-var [AutocompleteProvider, useAutocompleteContext] = (0, import_utils.createContext)({
-  name: "AutocompleteContext",
-  errorMessage: `useAutocompleteContext returned is 'undefined'. Seems you forgot to wrap the components in "<Autocomplete />" or "<MultiAutocomplete />"`
-});
-var useAutocomplete = (props) => {
+var useAutocompleteOption = (props) => {
+  var _a, _b;
   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,
+    value,
+    omitSelectedValues,
+    onChange,
+    onChangeLabel,
+    focusedIndex,
+    setFocusedIndex,
+    onClose,
+    closeOnSelect: generalCloseOnSelect,
     optionProps,
-    placeholder,
-    onKeyDown: onKeyDownProp,
-    isOpen: isOpenProp,
-    defaultIsOpen,
-    onOpen: onOpenProp,
-    onClose: onCloseProp,
-    closeOnBlur = true,
-    closeOnEsc = true,
-    openDelay,
-    closeDelay,
-    isLazy,
-    lazyBehavior,
-    animation,
-    duration = 0.2,
-    offset,
-    gutter,
-    preventOverflow,
-    flip,
-    matchWidth = true,
-    boundary,
-    eventListeners,
-    strategy,
-    placement = "bottom-start",
-    modifiers,
-    items,
+    inputRef,
+    onFocusNext
+  } = useAutocompleteContext();
+  let {
+    icon: customIcon,
+    isDisabled,
+    isFocusable,
+    closeOnSelect: customCloseOnSelect,
     children,
-    ...rest
-  } = (0, import_form_control.useFormControlProps)(props);
-  const {
-    "aria-readonly": _ariaReadonly,
-    onFocus: onFocusProp,
-    ...formControlProps
-  } = (0, import_utils.pickObject)(rest, import_form_control.formControlProperties);
-  const [containerProps, inputProps] = (0, import_utils.splitObject)(rest, import_core.layoutStyleProperties);
-  const { id } = rest;
-  const descendants = useAutocompleteDescendants();
-  const containerRef = (0, import_react.useRef)(null);
-  const listRef = (0, import_react.useRef)(null);
-  const inputRef = (0, import_react.useRef)(null);
-  const timeoutIds = (0, import_react.useRef)(/* @__PURE__ */ new Set([]));
-  const isComposition = (0, import_react.useRef)(false);
-  const prevValue = (0, import_react.useRef)(void 0);
-  const [resolvedItems, setResolvedItems] = (0, import_react.useState)(items ? JSON.parse(JSON.stringify(items)) : void 0);
-  const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
-    value: valueProp,
-    defaultValue,
-    onChange: onChangeProp
-  });
-  const [label, setLabel] = (0, import_react.useState)(void 0);
-  const [inputValue, setInputValue] = (0, import_react.useState)("");
-  const [focusedIndex, setFocusedIndex] = (0, import_react.useState)(-1);
-  const [isAllSelected, setIsAllSelected] = (0, import_react.useState)(false);
-  const [isHit, setIsHit] = (0, import_react.useState)(true);
-  const {
-    isOpen,
-    onOpen: onInternalOpen,
-    onClose
-  } = (0, import_use_disclosure.useDisclosure)({
-    isOpen: isOpenProp,
-    defaultIsOpen,
-    onOpen: onOpenProp,
-    onClose: onCloseProp
+    value: optionValue,
+    ...computedProps
+  } = { ...optionProps, ...props };
+  const trulyDisabled = !!isDisabled && !isFocusable;
+  const itemRef = (0, import_react2.useRef)(null);
+  const { index, register, descendants } = useAutocompleteDescendant({
+    disabled: trulyDisabled
   });
-  const isFocused = focusedIndex > -1;
-  const isCreate = focusedIndex === -2 && allowCreate;
-  const isMulti = (0, import_utils.isArray)(value);
-  const isEmptyValue = !isMulti ? !value : !value.length;
-  const [firstInsertPositionItem, secondInsertPositionItem] = (0, import_react.useMemo)(() => {
-    if ((0, import_utils.isArray)(insertPositionItem)) {
-      return insertPositionItem;
-    } else {
-      return [insertPositionItem, "first"];
-    }
-  }, [insertPositionItem]);
-  if (allowCreate && !(0, import_utils.isUndefined)(children)) {
-    console.warn(
-      `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: ${!isMulti ? "Autocomplete" : "MultiAutocomplete"} internally prefers 'children'. If 'allowCreate' is true, it will not be reflected correctly. If want to reflect, please set 'items' in props.`
-    );
-  }
-  const selectedValues = descendants.enabledValues(
-    ({ node }) => {
-      var _a;
-      return isMulti && value.includes((_a = node.dataset.value) != null ? _a : "");
-    }
-  );
-  const selectedIndexes = selectedValues.map(({ index }) => index);
-  const enabledValues = descendants.enabledValues(
-    ({ node, index }) => "target" in node.dataset && !selectedIndexes.includes(index)
-  );
-  const validChildren = (0, import_utils.getValidChildren)(children);
-  const computedChildren = (0, import_react.useMemo)(
-    () => resolvedItems == null ? void 0 : resolvedItems.map((item, i) => {
-      if ("value" in item) {
-        const { label: label2, value: value2, ...props2 } = item;
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AutocompleteOption, { value: value2, ...props2, children: label2 }, i);
-      } else if ("items" in item) {
-        const { label: label2, items: items2 = [], ...props2 } = item;
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          AutocompleteOptionGroup,
-          {
-            label: label2,
-            ...props2,
-            children: items2.map(({ label: label3, value: value2, ...props3 }, i2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AutocompleteOption, { value: value2, ...props3, children: label3 }, i2))
-          },
-          i
-        );
-      }
-    }),
-    [resolvedItems]
-  );
-  const isEmpty = !validChildren.length && !(computedChildren == null ? void 0 : computedChildren.length);
-  const onOpen = (0, import_react.useCallback)(() => {
-    if (formControlProps.disabled || formControlProps.readOnly) return;
-    if (!allowCreate && (isEmpty || isAllSelected)) return;
-    onInternalOpen();
-    if (inputRef.current) inputRef.current.focus();
-  }, [allowCreate, formControlProps, isAllSelected, isEmpty, onInternalOpen]);
-  const onFocusFirst = (0, import_react.useCallback)(() => {
-    const id2 = setTimeout(() => {
-      if (isEmpty || isAllSelected) return;
-      const first = descendants.enabledFirstValue(
-        ({ node }) => "target" in node.dataset
-      );
-      if (!first) return;
-      if (!isMulti || !omitSelectedValues) {
-        setFocusedIndex(first.index);
-      } else {
-        if (selectedIndexes.includes(first.index)) {
-          const enabledFirst = enabledValues[0];
-          setFocusedIndex(enabledFirst.index);
-        } else {
-          setFocusedIndex(first.index);
-        }
+  const values = descendants.values();
+  const frontValues = values.slice(0, index);
+  const isMulti = (0, import_utils3.isArray)(value);
+  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 : {});
+  const isFocused = index === focusedIndex;
+  const onClick = (0, import_react2.useCallback)(
+    (ev) => {
+      ev.stopPropagation();
+      if (isDisabled) {
+        if (inputRef.current) inputRef.current.focus();
+        return;
       }
-    });
-    timeoutIds.current.add(id2);
-  }, [
-    descendants,
-    enabledValues,
-    isAllSelected,
-    isEmpty,
-    isMulti,
-    omitSelectedValues,
-    selectedIndexes
-  ]);
-  const onFocusLast = (0, import_react.useCallback)(() => {
-    const id2 = setTimeout(() => {
-      if (isEmpty || isAllSelected) return;
-      const last = descendants.enabledLastValue(
-        ({ node }) => "target" in node.dataset
-      );
-      if (!last) return;
-      if (!isMulti || !omitSelectedValues) {
-        setFocusedIndex(last.index);
-      } else {
-        if (selectedIndexes.includes(last.index)) {
-          const enabledLast = enabledValues.reverse()[0];
-          setFocusedIndex(enabledLast.index);
-        } else {
-          setFocusedIndex(last.index);
-        }
+      if (!isTargetOption(ev.currentTarget)) {
+        if (inputRef.current) inputRef.current.focus();
+        return;
       }
-    });
-    timeoutIds.current.add(id2);
-  }, [
-    descendants,
-    enabledValues,
-    isAllSelected,
-    isEmpty,
-    isMulti,
-    omitSelectedValues,
-    selectedIndexes
-  ]);
-  const onFocusSelected = (0, import_react.useCallback)(() => {
-    const id2 = setTimeout(() => {
-      const values = descendants.enabledValues();
-      const selected = values.find(
-        ({ node }) => {
-          var _a;
-          return !isMulti ? node.dataset.value === value : value.includes((_a = node.dataset.value) != null ? _a : "");
-        }
-      );
-      if (selected) setFocusedIndex(selected.index);
-    });
-    timeoutIds.current.add(id2);
-  }, [descendants, isMulti, value]);
-  const onFocusNext = (0, import_react.useCallback)(
-    (index = focusedIndex) => {
-      const id2 = setTimeout(() => {
-        var _a;
-        const next = descendants.enabledNextValue(
-          index,
-          ({ node }) => "target" in node.dataset
-        );
-        if (!next) return;
-        if (!isMulti || !omitSelectedValues) {
-          setFocusedIndex(next.index);
-        } else {
-          if (selectedIndexes.includes(next.index)) {
-            const enabledNext = (_a = enabledValues.find(({ index: index2 }) => next.index < index2)) != null ? _a : enabledValues[0];
-            setFocusedIndex(enabledNext.index);
-          } else {
-            setFocusedIndex(next.index);
-          }
-        }
-      });
-      timeoutIds.current.add(id2);
+      setFocusedIndex(index);
+      onChange(optionValue != null ? optionValue : "");
+      if (inputRef.current) inputRef.current.focus();
+      if (customCloseOnSelect != null ? customCloseOnSelect : generalCloseOnSelect) onClose();
+      if (omitSelectedValues) onFocusNext(index);
     },
     [
-      descendants,
-      enabledValues,
-      focusedIndex,
-      isMulti,
+      onFocusNext,
       omitSelectedValues,
-      selectedIndexes
+      isDisabled,
+      optionValue,
+      setFocusedIndex,
+      index,
+      onChange,
+      customCloseOnSelect,
+      generalCloseOnSelect,
+      onClose,
+      inputRef
     ]
   );
-  const onFocusPrev = (0, import_react.useCallback)(
-    (index = focusedIndex) => {
-      const id2 = setTimeout(() => {
-        var _a;
-        const prev = descendants.enabledPrevValue(
-          index,
-          ({ node }) => "target" in node.dataset
-        );
-        if (!prev) return;
-        if (!isMulti || !omitSelectedValues) {
-          setFocusedIndex(prev.index);
-        } else {
-          if (selectedIndexes.includes(prev.index)) {
-            const enabledPrev = (_a = enabledValues.reverse().find(({ index: index2 }) => index2 < prev.index)) != null ? _a : enabledValues[0];
-            setFocusedIndex(enabledPrev.index);
-          } else {
-            setFocusedIndex(prev.index);
-          }
-        }
-      });
-      timeoutIds.current.add(id2);
+  (0, import_utils3.useUpdateEffect)(() => {
+    if (isSelected) onChangeLabel(optionValue != null ? optionValue : "", { runOmit: false });
+  }, [optionValue]);
+  const getOptionProps = (0, import_react2.useCallback)(
+    (props2 = {}, ref = null) => {
+      const style = {
+        border: "0px",
+        clip: "rect(0px, 0px, 0px, 0px)",
+        height: "1px",
+        width: "1px",
+        margin: "-1px",
+        padding: "0px",
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        position: "absolute"
+      };
+      return {
+        ref: (0, import_utils3.mergeRefs)(itemRef, ref, register),
+        id: (0, import_react2.useId)(),
+        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),
+        onClick: (0, import_utils3.handlerAll)(computedProps.onClick, props2.onClick, onClick)
+      };
     },
     [
-      descendants,
-      enabledValues,
-      focusedIndex,
-      isMulti,
+      optionValue,
+      computedProps,
+      isDisabled,
+      isFocused,
+      isSelected,
+      isTarget,
       omitSelectedValues,
-      selectedIndexes
+      onClick,
+      register
     ]
   );
-  const onFocusFirstOrSelected = isEmptyValue || omitSelectedValues ? onFocusFirst : onFocusSelected;
-  const onFocusLastOrSelected = isEmptyValue || omitSelectedValues ? onFocusLast : onFocusSelected;
-  const pickOptions = (0, import_react.useCallback)(
-    (value2) => {
-      const values = descendants.values();
-      let isHit2 = false;
-      let isFocused2 = false;
-      values.forEach(({ node, index }) => {
-        var _a;
-        if (format((_a = node.textContent) != null ? _a : "").includes(value2)) {
-          isHit2 = true;
-          const isDisabled = "disabled" in node.dataset;
-          node.dataset.target = "";
-          if (!isFocused2 && !isDisabled) {
-            isFocused2 = true;
-            setFocusedIndex(index);
-          }
-        } else {
-          delete node.dataset.target;
-        }
-      });
-      setIsHit(isHit2);
-    },
-    [descendants, format]
-  );
-  const rebirthOptions = (0, import_react.useCallback)(
-    (runFocus = true) => {
-      const values = descendants.values();
-      values.forEach(({ node }) => {
-        node.dataset.target = "";
-      });
-      if (runFocus) onFocusFirst();
-      setIsHit(true);
+  return {
+    isSelected,
+    isFocused,
+    customIcon,
+    children,
+    getOptionProps
+  };
+};
+var useAutocompleteCreate = () => {
+  const { isHit, onCreate } = useAutocompleteContext();
+  const getCreateProps = (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",
+        whiteSpace: "nowrap",
+        position: "absolute"
+      };
+      return {
+        ref,
+        ...props,
+        tabIndex: -1,
+        style: isHit ? style : void 0,
+        "data-focus": (0, import_utils3.dataAttr)(!isHit),
+        onClick: (0, import_utils3.handlerAll)(props.onClick, onCreate)
+      };
     },
-    [descendants, onFocusFirst]
+    [isHit, onCreate]
   );
-  const getSelectedValues = (0, import_react.useCallback)(
-    (newValues) => {
-      const enabledValues2 = descendants.enabledValues();
-      const resolvedValues = (0, import_utils.isArray)(newValues) ? newValues : [newValues];
-      const selectedValues2 = resolvedValues.map((value2) => {
-        var _a, _b;
-        const { node } = (_a = enabledValues2.find(({ node: node2 }) => node2.dataset.value === value2)) != null ? _a : {};
-        if (node) {
-          const el = Array.from(node.children).find(
-            (child) => child.getAttribute("data-label") !== null
-          );
-          return (_b = el == null ? void 0 : el.textContent) != null ? _b : void 0;
-        } else {
-          return allowFree ? value2 : void 0;
-        }
-      }).filter(Boolean);
-      return selectedValues2;
+  return { getCreateProps };
+};
+var useAutocompleteEmpty = () => {
+  const { isHit, isEmpty } = 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",
+        whiteSpace: "nowrap",
+        position: "absolute"
+      };
+      return {
+        ref,
+        ...props,
+        tabIndex: -1,
+        style: isHit && !isEmpty ? style : void 0
+      };
     },
-    [allowFree, descendants]
+    [isHit, isEmpty]
   );
-  const onChangeLabel = (0, import_react.useCallback)(
-    (newValue, { forceUpdate, runOmit = true } = {}) => {
-      const selectedValues2 = getSelectedValues(newValue);
-      if (!forceUpdate && !selectedValues2.length) return;
-      setLabel((prev) => {
-        if (!isMulti) {
-          return selectedValues2[0];
+  return { getEmptyProps };
+};
+
+// src/autocomplete-create.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var AutocompleteCreate = (0, import_core2.forwardRef)(
+  ({ className, icon, children, ...rest }, ref) => {
+    const { inputValue, styles } = useAutocompleteContext();
+    const { getCreateProps } = useAutocompleteCreate();
+    children != null ? children : children = inputValue;
+    const css = {
+      textDecoration: "none",
+      color: "inherit",
+      userSelect: "none",
+      display: "flex",
+      width: "100%",
+      alignItems: "center",
+      textAlign: "start",
+      flex: "0 0 auto",
+      outline: 0,
+      gap: "0.75rem",
+      ...styles.item
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      import_core2.ui.li,
+      {
+        className: (0, import_utils4.cx)("ui-autocomplete__item--create", className),
+        __css: css,
+        ...getCreateProps(rest, ref),
+        children: [
+          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AutocompleteItemIcon, { children: icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PlusIcon, {}) }) : 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)
+        ]
+      }
+    );
+  }
+);
+var PlusIcon = () => /* @__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)(
+  "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"
+  }
+) });
+
+// src/autocomplete-empty.tsx
+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) => {
+    const { emptyMessage, styles } = useAutocompleteContext();
+    const { getEmptyProps } = useAutocompleteEmpty();
+    children != null ? children : children = emptyMessage;
+    const css = {
+      textDecoration: "none",
+      color: "inherit",
+      userSelect: "none",
+      display: "flex",
+      width: "100%",
+      alignItems: "center",
+      textAlign: "start",
+      flex: "0 0 auto",
+      outline: 0,
+      gap: "0.75rem",
+      pointerEvents: "none",
+      ...styles.item
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      import_core3.ui.li,
+      {
+        className: (0, import_utils5.cx)("ui-autocomplete__item--empty", className),
+        __css: css,
+        ...getEmptyProps(rest, ref),
+        children: [
+          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AutocompleteItemIcon, { children: icon || /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MinusIcon, {}) }) : null,
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.span, { style: { pointerEvents: "none", flex: 1 }, lineClamp: 1, children }) : children
+        ]
+      }
+    );
+  }
+);
+var MinusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { viewBox: "0 0 448 512", width: "1em", height: "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"
+  }
+) });
+
+// src/autocomplete-list.tsx
+var import_core4 = require("@yamada-ui/core");
+var import_popover = require("@yamada-ui/popover");
+var import_utils7 = require("@yamada-ui/utils");
+
+// src/use-autocomplete-list.ts
+var import_utils6 = require("@yamada-ui/utils");
+var import_react3 = require("react");
+var useAutocompleteList = () => {
+  const { focusedIndex, isOpen, listRef, rebirthOptions } = useAutocompleteContext();
+  const descendants = useAutocompleteDescendantsContext();
+  const beforeFocusedIndex = (0, import_react3.useRef)(-1);
+  const selectedValue = descendants.value(focusedIndex);
+  const onAnimationComplete = (0, import_react3.useCallback)(() => {
+    if (!isOpen) rebirthOptions(false);
+  }, [isOpen, rebirthOptions]);
+  (0, import_react3.useEffect)(() => {
+    if (!listRef.current || !selectedValue) return;
+    if (beforeFocusedIndex.current === selectedValue.index) return;
+    const parent = listRef.current;
+    const child = selectedValue.node;
+    const parentHeight = parent.clientHeight;
+    const viewTop = parent.scrollTop;
+    const viewBottom = viewTop + parentHeight;
+    const childHeight = child.clientHeight;
+    const childTop = child.offsetTop;
+    const childBottom = childTop + childHeight;
+    const isInView = viewTop <= childTop && childBottom <= viewBottom;
+    const isScrollBottom = beforeFocusedIndex.current < selectedValue.index;
+    if (!isInView) {
+      if (childBottom <= parentHeight) {
+        listRef.current.scrollTo({ top: 0 });
+      } else {
+        if (!isScrollBottom) {
+          listRef.current.scrollTo({ top: childTop + 1 });
         } else {
-          selectedValues2.forEach((selectedValue) => {
-            const isSelected = (0, import_utils.isArray)(prev) && prev.includes(selectedValue != null ? selectedValue : "");
-            if (!isSelected) {
-              prev = [...(0, import_utils.isArray)(prev) ? prev : [], selectedValue];
-            } else if (runOmit) {
-              prev = (0, import_utils.isArray)(prev) ? prev.filter((value2) => value2 !== selectedValue) : void 0;
-            }
-          });
-          return prev;
+          listRef.current.scrollTo({ top: childBottom - parentHeight });
         }
-      });
-    },
-    [getSelectedValues, isMulti]
+      }
+    }
+    beforeFocusedIndex.current = selectedValue.index;
+  }, [listRef, selectedValue]);
+  (0, import_utils6.useUpdateEffect)(() => {
+    if (!isOpen) beforeFocusedIndex.current = -1;
+  }, [isOpen]);
+  const getListProps = (0, import_react3.useCallback)(
+    (props = {}, ref = null) => ({
+      as: "ul",
+      ref: (0, import_utils6.mergeRefs)(listRef, ref),
+      role: "listbox",
+      tabIndex: -1,
+      position: "relative",
+      id: props.id || (0, import_react3.useId)(),
+      ...props
+    }),
+    [listRef]
   );
-  const onChange = (0, import_react.useCallback)(
-    (newValue, { forceUpdate, runRebirth = true } = {}) => {
-      setValue((prev) => {
-        let next;
-        if (!(0, import_utils.isArray)(prev)) {
-          next = newValue;
-        } else {
-          const isSelected = prev.includes(newValue);
-          if (!isSelected) {
-            next = [...prev, newValue];
-          } else {
-            next = prev.filter((value2) => value2 !== newValue);
-          }
-        }
-        prevValue.current = next;
-        return next;
-      });
-      const isHit2 = descendants.values().filter(
-        ({ node }) => {
-          var _a;
-          return format((_a = node.textContent) != null ? _a : "").includes(newValue);
-        }
-      ).length > 0;
-      onChangeLabel(newValue, { forceUpdate });
-      if (allowFree || isHit2) setInputValue("");
-      if (isMulti && runRebirth) rebirthOptions(false);
+  return {
+    onAnimationComplete,
+    getListProps
+  };
+};
+
+// src/autocomplete-list.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var AutocompleteList = (0, import_core4.forwardRef)(
+  ({
+    className,
+    w,
+    width,
+    minW,
+    minWidth,
+    maxW,
+    maxWidth,
+    contentProps,
+    header,
+    footer,
+    children,
+    ...rest
+  }, ref) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    const { styles } = useAutocompleteContext();
+    const { onAnimationComplete, getListProps } = 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;
+    minWidth != null ? minWidth : minWidth = (_f = (_d = styles.list) == null ? void 0 : _d.minWidth) != null ? _f : (_e = styles.list) == null ? void 0 : _e.minW;
+    maxWidth != null ? maxWidth : maxWidth = maxW;
+    maxWidth != null ? maxWidth : maxWidth = (_i = (_g = styles.list) == null ? void 0 : _g.maxWidth) != null ? _i : (_h = styles.list) == null ? void 0 : _h.maxW;
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      import_popover.PopoverContent,
+      {
+        as: "div",
+        className: "ui-autocomplete__popover",
+        width,
+        minWidth,
+        maxWidth,
+        __css: { ...styles.content, width, minWidth, maxWidth },
+        ...contentProps,
+        onAnimationComplete: (0, import_utils7.handlerAll)(
+          contentProps == null ? void 0 : contentProps.onAnimationComplete,
+          onAnimationComplete
+        ),
+        children: [
+          header ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_core4.ui.div,
+            {
+              className: "ui-autocomplete__header",
+              __css: { ...styles.header },
+              children: header
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_core4.ui.ul,
+            {
+              className: (0, import_utils7.cx)("ui-autocomplete__list", className),
+              __css: { ...styles.list },
+              ...getListProps(rest, ref),
+              children
+            }
+          ),
+          footer ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_core4.ui.div,
+            {
+              className: "ui-autocomplete__footer",
+              __css: { ...styles.footer },
+              children: footer
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+
+// src/use-autocomplete.tsx
+var import_core8 = require("@yamada-ui/core");
+var import_form_control = require("@yamada-ui/form-control");
+var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
+var import_use_disclosure = require("@yamada-ui/use-disclosure");
+var import_use_outside_click = require("@yamada-ui/use-outside-click");
+var import_utils11 = require("@yamada-ui/utils");
+var import_react5 = require("react");
+
+// src/autocomplete-option.tsx
+var import_core5 = require("@yamada-ui/core");
+var import_utils8 = require("@yamada-ui/utils");
+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);
+    icon != null ? icon : icon = customIcon;
+    const css = {
+      textDecoration: "none",
+      color: "inherit",
+      userSelect: "none",
+      display: "flex",
+      width: "100%",
+      alignItems: "center",
+      textAlign: "start",
+      flex: "0 0 auto",
+      outline: 0,
+      gap: "0.75rem",
+      ...styles.item
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      import_core5.ui.li,
+      {
+        className: (0, import_utils8.cx)("ui-autocomplete__item", className),
+        __css: css,
+        ...getOptionProps({}, ref),
+        children: [
+          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AutocompleteItemIcon, { opacity: isSelected ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckIcon, {}) }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.ui.span, { style: { flex: 1 }, "data-label": true, children })
+        ]
+      }
+    );
+  }
+);
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  "polygon",
+  {
+    fill: "currentColor",
+    points: "5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"
+  }
+) });
+
+// src/autocomplete-option-group.tsx
+var import_core7 = require("@yamada-ui/core");
+var import_utils10 = require("@yamada-ui/utils");
+
+// src/use-autocomplete-option-group.ts
+var import_core6 = require("@yamada-ui/core");
+var import_utils9 = require("@yamada-ui/utils");
+var import_react4 = require("react");
+var useAutocompleteOptionGroup = ({
+  label,
+  ...rest
+}) => {
+  const { value, omitSelectedValues } = useAutocompleteContext();
+  const isMulti = (0, import_utils9.isArray)(value);
+  const descendants = useAutocompleteDescendantsContext();
+  const values = descendants.values();
+  const selectedValues = isMulti && omitSelectedValues ? descendants.values(
+    ({ node }) => {
+      var _a;
+      return value.includes((_a = node.dataset.value) != null ? _a : "");
+    }
+  ) : [];
+  const selectedIndexes = selectedValues.map(({ index }) => index);
+  const childValues = values.filter(
+    ({ node, index }) => {
+      var _a;
+      return ((_a = node.parentElement) == null ? void 0 : _a.dataset.label) === label && !selectedIndexes.includes(index) && "target" in node.dataset;
+    }
+  );
+  const isEmpty = !childValues.length;
+  const [containerProps, groupProps] = (0, import_utils9.splitObject)(rest, import_core6.layoutStyleProperties);
+  const getContainerProps = (0, import_react4.useCallback)(
+    (props = {}, ref = null) => {
+      const style = {
+        border: "0px",
+        clip: "rect(0px, 0px, 0px, 0px)",
+        height: "1px",
+        width: "1px",
+        margin: "-1px",
+        padding: "0px",
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        position: "absolute"
+      };
+      return {
+        ref,
+        ...props,
+        ...containerProps,
+        style: isEmpty ? style : void 0,
+        "data-label": label,
+        role: "autocomplete-group-container"
+      };
     },
-    [
-      allowFree,
-      isMulti,
-      onChangeLabel,
-      rebirthOptions,
-      setValue,
-      descendants,
-      format
-    ]
+    [containerProps, isEmpty, label]
+  );
+  const getGroupProps = (0, import_react4.useCallback)(
+    (props = {}, ref = null) => ({
+      ref,
+      ...props,
+      ...groupProps,
+      "data-label": label,
+      role: "autocomplete-group"
+    }),
+    [groupProps, label]
+  );
+  return {
+    label,
+    getContainerProps,
+    getGroupProps
+  };
+};
+
+// src/autocomplete-option-group.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var AutocompleteOptionGroup = (0, import_core7.forwardRef)(
+  ({ className, color, h, height, minH, minHeight, children, ...rest }, ref) => {
+    const { styles } = useAutocompleteContext();
+    const { label, getContainerProps, getGroupProps } = useAutocompleteOptionGroup(rest);
+    h != null ? h : h = height;
+    minH != null ? minH : minH = minHeight;
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      import_core7.ui.li,
+      {
+        className: (0, import_utils10.cx)(
+          "ui-autocomplete__item",
+          "ui-autocomplete__item--group",
+          className
+        ),
+        __css: { w: "100%", h: "fit-content", color },
+        ...getContainerProps(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            import_core7.ui.span,
+            {
+              className: "ui-autocomplete__item__group-label",
+              __css: styles.groupLabel,
+              lineClamp: 1,
+              children: label
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            import_core7.ui.ul,
+            {
+              ...getGroupProps({}, ref),
+              className: "ui-autocomplete__item__group",
+              __css: { h, minH, ...styles.group },
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+// 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",
+  \uFF66\uFF9E: "\u30FA",
+  \uFF71: "\u30A2",
+  \uFF72: "\u30A4",
+  \uFF73: "\u30A6",
+  \uFF74: "\u30A8",
+  \uFF75: "\u30AA",
+  \uFF76: "\u30AB",
+  \uFF77: "\u30AD",
+  \uFF78: "\u30AF",
+  \uFF79: "\u30B1",
+  \uFF7A: "\u30B3",
+  \uFF7B: "\u30B5",
+  \uFF7C: "\u30B7",
+  \uFF7D: "\u30B9",
+  \uFF7E: "\u30BB",
+  \uFF7F: "\u30BD",
+  \uFF80: "\u30BF",
+  \uFF81: "\u30C1",
+  \uFF82: "\u30C4",
+  \uFF83: "\u30C6",
+  \uFF84: "\u30C8",
+  \uFF85: "\u30CA",
+  \uFF86: "\u30CB",
+  \uFF87: "\u30CC",
+  \uFF88: "\u30CD",
+  \uFF89: "\u30CE",
+  \uFF8A: "\u30CF",
+  \uFF8B: "\u30D2",
+  \uFF8C: "\u30D5",
+  \uFF8D: "\u30D8",
+  \uFF8E: "\u30DB",
+  \uFF8F: "\u30DE",
+  \uFF90: "\u30DF",
+  \uFF91: "\u30E0",
+  \uFF92: "\u30E1",
+  \uFF93: "\u30E2",
+  \uFF94: "\u30E4",
+  \uFF95: "\u30E6",
+  \uFF96: "\u30E8",
+  \uFF97: "\u30E9",
+  \uFF98: "\u30EA",
+  \uFF99: "\u30EB",
+  \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"
+};
+var defaultFormat = (value) => {
+  value = value.replace(
+    /[！-～]/g,
+    (v) => String.fromCharCode(v.charCodeAt(0) - 65248)
+  );
+  const reg = new RegExp("(" + Object.keys(kanaMap).join("|") + ")", "g");
+  value = value.replace(reg, (v) => kanaMap[v]).replace(/ﾞ/g, "\u309B").replace(/ﾟ/g, "\u309C");
+  value = value.toUpperCase();
+  return value;
+};
+var flattenItems = (items) => {
+  const filterItems = (items2) => items2.map((item) => {
+    var _a;
+    const { isDisabled, isFocusable } = item;
+    const trulyDisabled = !!isDisabled && !isFocusable;
+    if (trulyDisabled) return;
+    if ("items" in item) {
+      return filterItems((_a = item.items) != null ? _a : []);
+    } else {
+      return item;
+    }
+  }).filter(Boolean);
+  return filterItems(items).flat(Infinity);
+};
+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,
+    closeOnBlur = true,
+    closeOnEsc = true,
+    openDelay,
+    closeDelay,
+    isLazy,
+    lazyBehavior,
+    animation,
+    duration = 0.2,
+    offset,
+    gutter,
+    preventOverflow,
+    flip,
+    matchWidth = true,
+    boundary,
+    eventListeners,
+    strategy,
+    placement = "bottom-start",
+    modifiers,
+    items,
+    children,
+    ...rest
+  } = (0, import_form_control.useFormControlProps)(props);
+  const {
+    "aria-readonly": _ariaReadonly,
+    onFocus: onFocusProp,
+    ...formControlProps
+  } = (0, import_utils11.pickObject)(rest, import_form_control.formControlProperties);
+  const [containerProps, inputProps] = (0, import_utils11.splitObject)(rest, import_core8.layoutStyleProperties);
+  const { id } = rest;
+  const descendants = useAutocompleteDescendants();
+  const containerRef = (0, import_react5.useRef)(null);
+  const listRef = (0, import_react5.useRef)(null);
+  const inputRef = (0, import_react5.useRef)(null);
+  const timeoutIds = (0, import_react5.useRef)(/* @__PURE__ */ new Set([]));
+  const isComposition = (0, import_react5.useRef)(false);
+  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,
+    onChange: onChangeProp
+  });
+  const [label, setLabel] = (0, import_react5.useState)(void 0);
+  const [inputValue, setInputValue] = (0, import_react5.useState)("");
+  const [focusedIndex, setFocusedIndex] = (0, import_react5.useState)(-1);
+  const [isAllSelected, setIsAllSelected] = (0, import_react5.useState)(false);
+  const [isHit, setIsHit] = (0, import_react5.useState)(true);
+  const {
+    isOpen,
+    onOpen: onInternalOpen,
+    onClose
+  } = (0, import_use_disclosure.useDisclosure)({
+    isOpen: isOpenProp,
+    defaultIsOpen,
+    onOpen: onOpenProp,
+    onClose: onCloseProp
+  });
+  const isFocused = focusedIndex > -1;
+  const isCreate = focusedIndex === -2 && allowCreate;
+  const isMulti = (0, import_utils11.isArray)(value);
+  const isEmptyValue = !isMulti ? !value : !value.length;
+  const [firstInsertPositionItem, secondInsertPositionItem] = (0, import_react5.useMemo)(() => {
+    if ((0, import_utils11.isArray)(insertPositionItem)) {
+      return insertPositionItem;
+    } else {
+      return [insertPositionItem, "first"];
+    }
+  }, [insertPositionItem]);
+  if (allowCreate && !(0, import_utils11.isUndefined)(children)) {
+    console.warn(
+      `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: ${!isMulti ? "Autocomplete" : "MultiAutocomplete"} internally prefers 'children'. If 'allowCreate' is true, it will not be reflected correctly. If want to reflect, please set 'items' in props.`
+    );
+  }
+  const selectedValues = descendants.enabledValues(
+    ({ node }) => {
+      var _a;
+      return isMulti && value.includes((_a = node.dataset.value) != null ? _a : "");
+    }
   );
-  const onSelect = (0, import_react.useCallback)(() => {
-    var _a, _b;
-    let enabledValue = descendants.value(focusedIndex);
-    if ("disabled" in ((_a = enabledValue == null ? void 0 : enabledValue.node.dataset) != null ? _a : {}))
-      enabledValue = void 0;
-    if (!enabledValue) return;
-    const value2 = (_b = enabledValue.node.dataset.value) != null ? _b : "";
-    onChange(value2);
-    if (closeOnSelect) onClose();
-    if (omitSelectedValues) onFocusNext();
+  const selectedIndexes = selectedValues.map(({ index }) => index);
+  const enabledValues = descendants.enabledValues(
+    ({ node, index }) => "target" in node.dataset && !selectedIndexes.includes(index)
+  );
+  const validChildren = (0, import_utils11.getValidChildren)(children);
+  const computedChildren = (0, import_react5.useMemo)(
+    () => resolvedItems == null ? void 0 : resolvedItems.map((item, i) => {
+      if ("value" in item) {
+        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;
+        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);
+      }
+    }),
+    [resolvedItems]
+  );
+  const isEmpty = !validChildren.length && !(computedChildren == null ? void 0 : computedChildren.length);
+  const onOpen = (0, import_react5.useCallback)(() => {
+    if (formControlProps.disabled || formControlProps.readOnly) return;
+    if (!allowCreate && (isEmpty || isAllSelected)) return;
+    onInternalOpen();
+    if (inputRef.current) inputRef.current.focus();
+  }, [allowCreate, formControlProps, isAllSelected, isEmpty, onInternalOpen]);
+  const onFocusFirst = (0, import_react5.useCallback)(() => {
+    const id2 = setTimeout(() => {
+      if (isEmpty || isAllSelected) return;
+      const first = descendants.enabledFirstValue(
+        ({ node }) => "target" in node.dataset
+      );
+      if (!first) return;
+      if (!isMulti || !omitSelectedValues) {
+        setFocusedIndex(first.index);
+      } else {
+        if (selectedIndexes.includes(first.index)) {
+          const enabledFirst = enabledValues[0];
+          setFocusedIndex(enabledFirst.index);
+        } else {
+          setFocusedIndex(first.index);
+        }
+      }
+    });
+    timeoutIds.current.add(id2);
   }, [
-    closeOnSelect,
     descendants,
-    focusedIndex,
+    enabledValues,
+    isAllSelected,
+    isEmpty,
+    isMulti,
     omitSelectedValues,
-    onChange,
-    onClose,
-    onFocusNext
+    selectedIndexes
   ]);
-  const onSearch = (0, import_react.useCallback)(
-    (ev) => {
-      if (!isOpen) onOpen();
-      onSearchProp == null ? void 0 : onSearchProp(ev);
-      const value2 = ev.target.value;
-      const computedValue = format(value2);
-      if (computedValue) {
-        pickOptions(computedValue);
-      } else {
-        rebirthOptions();
-      }
-      setInputValue(value2);
-    },
-    [isOpen, onOpen, format, onSearchProp, pickOptions, rebirthOptions]
-  );
-  const onCompositionStart = (0, import_react.useCallback)(() => {
-    isComposition.current = true;
-  }, []);
-  const onCompositionEnd = (0, import_react.useCallback)(() => {
-    isComposition.current = false;
-  }, []);
-  const onCreate = (0, import_react.useCallback)(() => {
-    var _a, _b;
-    if (!listRef.current) return;
-    const newItem = { label: inputValue, value: inputValue };
-    let newItems = [];
-    if (resolvedItems) newItems = [...resolvedItems];
-    if (firstInsertPositionItem === "first") {
-      newItems = [newItem, ...newItems];
-    } else if (firstInsertPositionItem === "last") {
-      newItems = [...newItems, newItem];
-    } else {
-      const i = newItems.findIndex(
-        ({ label: label2 }) => label2 === firstInsertPositionItem
+  const onFocusLast = (0, import_react5.useCallback)(() => {
+    const id2 = setTimeout(() => {
+      if (isEmpty || isAllSelected) return;
+      const last = descendants.enabledLastValue(
+        ({ node }) => "target" in node.dataset
       );
-      const targetItem = newItems[i];
-      if (i !== -1 && "items" in targetItem) {
-        if (secondInsertPositionItem === "first") {
-          targetItem.items = [newItem, ...(_a = targetItem.items) != null ? _a : []];
+      if (!last) return;
+      if (!isMulti || !omitSelectedValues) {
+        setFocusedIndex(last.index);
+      } else {
+        if (selectedIndexes.includes(last.index)) {
+          const enabledLast = enabledValues.reverse()[0];
+          setFocusedIndex(enabledLast.index);
         } else {
-          targetItem.items = [...(_b = targetItem.items) != null ? _b : [], newItem];
+          setFocusedIndex(last.index);
         }
-        newItems[i] = targetItem;
-      } else {
-        console.warn(
-          `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: '${firstInsertPositionItem}' specified in insertPositionItem does not exist in the option group.`
-        );
       }
-    }
-    setResolvedItems(newItems);
-    onChange(inputValue);
-    rebirthOptions(false);
-    const index = flattenItems(newItems).findIndex(
-      ({ value: value2 }) => value2 === inputValue
-    );
-    setFocusedIndex(index);
-    onCreateProp == null ? void 0 : onCreateProp(newItem, newItems);
+    });
+    timeoutIds.current.add(id2);
   }, [
-    inputValue,
-    resolvedItems,
-    firstInsertPositionItem,
-    onChange,
-    rebirthOptions,
-    onCreateProp,
-    secondInsertPositionItem,
-    isMulti
+    descendants,
+    enabledValues,
+    isAllSelected,
+    isEmpty,
+    isMulti,
+    omitSelectedValues,
+    selectedIndexes
   ]);
-  const onClick = (0, import_react.useCallback)(() => {
-    if (isOpen) {
-      if (inputRef.current) inputRef.current.focus();
-    } else {
-      onOpen();
-      onFocusFirstOrSelected();
-    }
-  }, [isOpen, onFocusFirstOrSelected, onOpen]);
-  const onFocus = (0, import_react.useCallback)(() => {
-    if (isOpen) return;
-    onOpen();
-    onFocusFirstOrSelected();
-  }, [isOpen, onFocusFirstOrSelected, onOpen]);
-  const onBlur = (0, import_react.useCallback)(
-    (ev) => {
-      const relatedTarget = (0, import_utils.getEventRelatedTarget)(ev);
-      if ((0, import_utils.isContains)(containerRef.current, relatedTarget)) return;
-      if (!closeOnBlur && isHit) return;
-      if (allowFree && !!inputValue) onChange(inputValue, { runRebirth: false });
-      setInputValue("");
-      if (isOpen) onClose();
-    },
-    [closeOnBlur, isHit, isOpen, inputValue, allowFree, onClose, onChange]
-  );
-  const onDelete = (0, import_react.useCallback)(() => {
-    if (!isMulti) {
-      onChange("", { forceUpdate: true });
-    } else {
-      onChange(value[value.length - 1]);
-    }
-    if (!isOpen) onFocus();
-  }, [isMulti, isOpen, onChange, onFocus, value]);
-  const onClear = (0, import_react.useCallback)(
-    (ev) => {
-      ev.stopPropagation();
-      prevValue.current = [];
-      setValue([]);
-      setLabel(void 0);
-      setInputValue("");
-      rebirthOptions();
-      if (isOpen && inputRef.current) inputRef.current.focus();
-    },
-    [isOpen, setLabel, setInputValue, setValue, rebirthOptions]
-  );
-  const onKeyDown = (0, import_react.useCallback)(
-    (ev) => {
-      if (ev.key === " ") ev.key = ev.code;
-      if (formControlProps.disabled || formControlProps.readOnly) return;
-      if (isComposition.current) return;
-      const enabledDelete = label === inputValue || !inputValue.length;
-      const actions = {
-        ArrowDown: isFocused ? () => onFocusNext() : !isOpen ? (0, import_utils.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
-        ArrowUp: isFocused ? () => onFocusPrev() : !isOpen ? (0, import_utils.funcAll)(onOpen, onFocusLastOrSelected) : void 0,
-        Space: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? (0, import_utils.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
-        Enter: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? (0, import_utils.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
-      };
-      const action = actions[ev.key];
-      if (!action) return;
-      ev.preventDefault();
-      ev.stopPropagation();
-      action(ev);
+  const onFocusSelected = (0, import_react5.useCallback)(() => {
+    const id2 = setTimeout(() => {
+      const values = descendants.enabledValues();
+      const selected = values.find(
+        ({ node }) => {
+          var _a;
+          return !isMulti ? node.dataset.value === value : value.includes((_a = node.dataset.value) != null ? _a : "");
+        }
+      );
+      if (selected) setFocusedIndex(selected.index);
+    });
+    timeoutIds.current.add(id2);
+  }, [descendants, isMulti, value]);
+  const onFocusNext = (0, import_react5.useCallback)(
+    (index = focusedIndex) => {
+      const id2 = setTimeout(() => {
+        var _a;
+        const next = descendants.enabledNextValue(
+          index,
+          ({ node }) => "target" in node.dataset
+        );
+        if (!next) return;
+        if (!isMulti || !omitSelectedValues) {
+          setFocusedIndex(next.index);
+        } else {
+          if (selectedIndexes.includes(next.index)) {
+            const enabledNext = (_a = enabledValues.find(({ index: index2 }) => next.index < index2)) != null ? _a : enabledValues[0];
+            setFocusedIndex(enabledNext.index);
+          } else {
+            setFocusedIndex(next.index);
+          }
+        }
+      });
+      timeoutIds.current.add(id2);
     },
     [
-      allowFree,
-      formControlProps,
-      label,
-      inputValue,
-      onOpen,
-      isFocused,
+      descendants,
+      enabledValues,
+      focusedIndex,
       isMulti,
-      onFocusFirstOrSelected,
-      onFocusNext,
-      onFocusLastOrSelected,
-      onFocusPrev,
-      isCreate,
-      onCreate,
-      onSelect,
-      isOpen,
-      onFocusFirst,
-      onFocusLast,
-      closeOnEsc,
-      onClose,
-      isEmptyValue,
-      onDelete,
-      onChange
+      omitSelectedValues,
+      selectedIndexes
     ]
   );
-  (0, import_react.useEffect)(() => {
-    if (!isMulti) return;
-    if (!omitSelectedValues && (0, import_utils.isUndefined)(maxSelectValues)) return;
-    const isAll = value.length > 0 && value.length === descendants.count();
-    const isMax = value.length === maxSelectValues;
-    if (isAll || isMax) {
-      onClose();
-      setIsAllSelected(true);
-    } else {
-      setIsAllSelected(false);
-    }
-  }, [
-    omitSelectedValues,
-    value,
-    descendants,
-    isMulti,
-    onClose,
-    maxSelectValues
-  ]);
-  (0, import_react.useEffect)(() => {
-    var _a;
-    if (isMulti) {
-      if (JSON.stringify((_a = prevValue.current) != null ? _a : []) === JSON.stringify(value != null ? value : []))
-        return;
-      const label2 = getSelectedValues(value);
-      setLabel(label2);
-    } else {
-      if (prevValue.current === value) return;
-      onChangeLabel(value, { runOmit: false });
-    }
-  }, [isMulti, value, onChangeLabel, getSelectedValues]);
-  (0, import_utils.useUpdateEffect)(() => {
-    if (isOpen || allowFree) return;
-    setFocusedIndex(-1);
-    setInputValue("");
-  }, [isOpen]);
-  (0, import_utils.useUpdateEffect)(() => {
-    if (!isHit) setFocusedIndex(-2);
-  }, [isHit]);
-  (0, import_utils.useUpdateEffect)(() => {
-    setResolvedItems(items ? JSON.parse(JSON.stringify(items)) : void 0);
-  }, [items]);
-  (0, import_utils.useUnmountEffect)(() => {
-    timeoutIds.current.forEach((id2) => clearTimeout(id2));
-    timeoutIds.current.clear();
-  });
-  (0, import_use_outside_click.useOutsideClick)({
-    ref: containerRef,
-    handler: onClose,
-    enabled: isOpen && (closeOnBlur || !isHit)
-  });
-  const getPopoverProps = (0, import_react.useCallback)(
-    (props2) => ({
-      closeOnBlur,
-      openDelay,
-      closeDelay,
-      isLazy,
-      lazyBehavior,
-      animation,
-      duration,
-      offset,
-      gutter,
-      preventOverflow,
-      flip,
-      matchWidth,
-      boundary,
-      eventListeners,
-      strategy,
-      placement,
-      modifiers,
-      ...props2,
-      trigger: "never",
-      closeOnButton: false,
-      isOpen,
-      onOpen,
-      onClose
-    }),
+  const onFocusPrev = (0, import_react5.useCallback)(
+    (index = focusedIndex) => {
+      const id2 = setTimeout(() => {
+        var _a;
+        const prev = descendants.enabledPrevValue(
+          index,
+          ({ node }) => "target" in node.dataset
+        );
+        if (!prev) return;
+        if (!isMulti || !omitSelectedValues) {
+          setFocusedIndex(prev.index);
+        } else {
+          if (selectedIndexes.includes(prev.index)) {
+            const enabledPrev = (_a = enabledValues.reverse().find(({ index: index2 }) => index2 < prev.index)) != null ? _a : enabledValues[0];
+            setFocusedIndex(enabledPrev.index);
+          } else {
+            setFocusedIndex(prev.index);
+          }
+        }
+      });
+      timeoutIds.current.add(id2);
+    },
     [
-      closeOnBlur,
-      openDelay,
-      closeDelay,
-      isLazy,
-      lazyBehavior,
-      animation,
-      duration,
-      offset,
-      gutter,
-      preventOverflow,
-      flip,
-      matchWidth,
-      boundary,
-      eventListeners,
-      strategy,
-      placement,
-      modifiers,
-      isOpen,
-      onOpen,
-      onClose
+      descendants,
+      enabledValues,
+      focusedIndex,
+      isMulti,
+      omitSelectedValues,
+      selectedIndexes
     ]
   );
-  const getContainerProps = (0, import_react.useCallback)(
-    (props2 = {}, ref = null) => ({
-      ref: (0, import_utils.mergeRefs)(containerRef, ref),
-      ...containerProps,
-      ...props2,
-      ...formControlProps,
-      onClick: (0, import_utils.handlerAll)(props2.onClick, rest.onClick, onClick),
-      onBlur: (0, import_utils.handlerAll)(props2.onBlur, rest.onBlur, onBlur)
-    }),
-    [containerProps, formControlProps, onBlur, onClick, rest]
+  const onFocusFirstOrSelected = isEmptyValue || omitSelectedValues ? onFocusFirst : onFocusSelected;
+  const onFocusLastOrSelected = isEmptyValue || omitSelectedValues ? onFocusLast : onFocusSelected;
+  const pickOptions = (0, import_react5.useCallback)(
+    (value2) => {
+      const values = descendants.values();
+      let isHit2 = false;
+      let isFocused2 = false;
+      values.forEach(({ node, index }) => {
+        var _a;
+        if (format((_a = node.textContent) != null ? _a : "").includes(value2)) {
+          isHit2 = true;
+          const isDisabled = "disabled" in node.dataset;
+          node.dataset.target = "";
+          if (!isFocused2 && !isDisabled) {
+            isFocused2 = true;
+            setFocusedIndex(index);
+          }
+        } else {
+          delete node.dataset.target;
+        }
+      });
+      setIsHit(isHit2);
+    },
+    [descendants, format]
   );
-  const getFieldProps = (0, import_react.useCallback)(
-    (props2 = {}, ref = null) => ({
-      ref,
-      tabIndex: -1,
-      ...props2,
-      ...formControlProps,
-      placeholder,
-      "data-active": (0, import_utils.dataAttr)(isOpen),
-      "aria-expanded": (0, import_utils.dataAttr)(isOpen),
-      onFocus: (0, import_utils.handlerAll)(props2.onFocus, onFocusProp, onFocus),
-      onKeyDown: (0, import_utils.handlerAll)(props2.onKeyDown, onKeyDownProp, onKeyDown)
-    }),
+  const rebirthOptions = (0, import_react5.useCallback)(
+    (runFocus = true) => {
+      const values = descendants.values();
+      values.forEach(({ node }) => {
+        node.dataset.target = "";
+      });
+      if (runFocus) onFocusFirst();
+      setIsHit(true);
+    },
+    [descendants, onFocusFirst]
+  );
+  const getSelectedValues = (0, import_react5.useCallback)(
+    (newValues) => {
+      const enabledValues2 = descendants.enabledValues();
+      const resolvedValues = (0, import_utils11.isArray)(newValues) ? newValues : [newValues];
+      const selectedValues2 = resolvedValues.map((value2) => {
+        var _a, _b;
+        const { node } = (_a = enabledValues2.find(({ node: node2 }) => node2.dataset.value === value2)) != null ? _a : {};
+        if (node) {
+          const el = Array.from(node.children).find(
+            (child) => child.getAttribute("data-label") !== null
+          );
+          return (_b = el == null ? void 0 : el.textContent) != null ? _b : void 0;
+        } else {
+          return allowFree ? value2 : void 0;
+        }
+      }).filter(Boolean);
+      return selectedValues2;
+    },
+    [allowFree, descendants]
+  );
+  const onChangeLabel = (0, import_react5.useCallback)(
+    (newValue, { forceUpdate, runOmit = true } = {}) => {
+      const selectedValues2 = getSelectedValues(newValue);
+      if (!forceUpdate && !selectedValues2.length) return;
+      setLabel((prev) => {
+        if (!isMulti) {
+          return selectedValues2[0];
+        } else {
+          selectedValues2.forEach((selectedValue) => {
+            const isSelected = (0, import_utils11.isArray)(prev) && prev.includes(selectedValue != null ? selectedValue : "");
+            if (!isSelected) {
+              prev = [...(0, import_utils11.isArray)(prev) ? prev : [], selectedValue];
+            } else if (runOmit) {
+              prev = (0, import_utils11.isArray)(prev) ? prev.filter((value2) => value2 !== selectedValue) : void 0;
+            }
+          });
+          return prev;
+        }
+      });
+    },
+    [getSelectedValues, isMulti]
+  );
+  const onChange = (0, import_react5.useCallback)(
+    (newValue, { forceUpdate, runRebirth = true } = {}) => {
+      setValue((prev) => {
+        let next;
+        if (!(0, import_utils11.isArray)(prev)) {
+          next = newValue;
+        } else {
+          const isSelected = prev.includes(newValue);
+          if (!isSelected) {
+            next = [...prev, newValue];
+          } else {
+            next = prev.filter((value2) => value2 !== newValue);
+          }
+        }
+        prevValue.current = next;
+        return next;
+      });
+      const isHit2 = descendants.values().filter(
+        ({ node }) => {
+          var _a;
+          return format((_a = node.textContent) != null ? _a : "").includes(newValue);
+        }
+      ).length > 0;
+      onChangeLabel(newValue, { forceUpdate });
+      if (allowFree || isHit2) setInputValue("");
+      if (isMulti && runRebirth) rebirthOptions(false);
+    },
     [
-      formControlProps,
-      placeholder,
-      isOpen,
-      onFocusProp,
-      onFocus,
-      onKeyDownProp,
-      onKeyDown
+      allowFree,
+      isMulti,
+      onChangeLabel,
+      rebirthOptions,
+      setValue,
+      descendants,
+      format
     ]
   );
-  return {
-    id,
+  const onSelect = (0, import_react5.useCallback)(() => {
+    var _a, _b;
+    let enabledValue = descendants.value(focusedIndex);
+    if ("disabled" in ((_a = enabledValue == null ? void 0 : enabledValue.node.dataset) != null ? _a : {}))
+      enabledValue = void 0;
+    if (!enabledValue) return;
+    const value2 = (_b = enabledValue.node.dataset.value) != null ? _b : "";
+    onChange(value2);
+    if (closeOnSelect) onClose();
+    if (omitSelectedValues) onFocusNext();
+  }, [
+    closeOnSelect,
     descendants,
-    value,
-    label,
-    inputValue,
-    isHit,
-    isEmpty,
-    computedChildren,
     focusedIndex,
     omitSelectedValues,
-    closeOnSelect,
-    allowCreate,
-    allowFree,
-    emptyMessage,
-    isOpen,
-    isAllSelected,
-    listRef,
-    inputRef,
-    optionProps,
-    formControlProps,
-    setFocusedIndex,
-    onChangeLabel,
     onChange,
-    onSearch,
-    onCreate,
-    onClear,
-    onCompositionStart,
-    onCompositionEnd,
-    pickOptions,
-    rebirthOptions,
-    onOpen,
     onClose,
-    onFocusFirst,
-    onFocusLast,
-    onFocusSelected,
-    onFocusNext,
-    onFocusPrev,
-    getPopoverProps,
-    getContainerProps,
-    getFieldProps,
-    inputProps
-  };
-};
-var useAutocompleteInput = () => {
-  const {
-    id,
-    inputRef,
-    onSearch,
-    onCompositionStart,
-    onCompositionEnd,
-    isAllSelected,
-    formControlProps,
-    inputProps,
-    isOpen,
-    focusedIndex,
-    listRef
-  } = useAutocompleteContext();
-  const { value } = useAutocompleteDescendantsContext();
-  (0, import_utils.useUpdateEffect)(() => {
-    if (isAllSelected && inputRef.current) inputRef.current.blur();
-  }, [isAllSelected]);
-  const getInputProps = (0, import_react.useCallback)(
-    (props = {}, ref = null) => {
-      var _a, _b;
-      return {
-        ref: (0, import_utils.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-controls": (_b = listRef.current) == null ? void 0 : _b.id,
-        autoCapitalize: "none",
-        autoComplete: "off",
-        spellCheck: "false",
-        ...inputProps,
-        ...props,
-        id,
-        cursor: formControlProps.readOnly ? "default" : "text",
-        pointerEvents: formControlProps.disabled || isAllSelected ? "none" : "auto",
-        tabIndex: isAllSelected ? -1 : 0,
-        onChange: (0, import_utils.handlerAll)(props.onChange, onSearch),
-        onCompositionStart: (0, import_utils.handlerAll)(
-          props.onCompositionStart,
-          inputProps.onCompositionStart,
-          onCompositionStart
-        ),
-        onCompositionEnd: (0, import_utils.handlerAll)(
-          props.onCompositionEnd,
-          inputProps.onCompositionEnd,
-          onCompositionEnd
-        )
-      };
+    onFocusNext
+  ]);
+  const onSearch = (0, import_react5.useCallback)(
+    (ev) => {
+      if (!isOpen) onOpen();
+      onSearchProp == null ? void 0 : onSearchProp(ev);
+      const value2 = ev.target.value;
+      const computedValue = format(value2);
+      if (computedValue) {
+        pickOptions(computedValue);
+      } else {
+        rebirthOptions();
+      }
+      setInputValue(value2);
     },
-    [
-      listRef,
-      focusedIndex,
-      isOpen,
-      inputProps,
-      inputRef,
-      formControlProps,
-      id,
-      isAllSelected,
-      value,
-      onSearch,
-      onCompositionStart,
-      onCompositionEnd
-    ]
+    [isOpen, onOpen, format, onSearchProp, pickOptions, rebirthOptions]
   );
-  return {
-    getInputProps
-  };
-};
-var useAutocompleteList = () => {
-  const { focusedIndex, isOpen, listRef, rebirthOptions } = useAutocompleteContext();
-  const descendants = useAutocompleteDescendantsContext();
-  const beforeFocusedIndex = (0, import_react.useRef)(-1);
-  const selectedValue = descendants.value(focusedIndex);
-  const onAnimationComplete = (0, import_react.useCallback)(() => {
-    if (!isOpen) rebirthOptions(false);
-  }, [isOpen, rebirthOptions]);
-  (0, import_react.useEffect)(() => {
-    if (!listRef.current || !selectedValue) return;
-    if (beforeFocusedIndex.current === selectedValue.index) return;
-    const parent = listRef.current;
-    const child = selectedValue.node;
-    const parentHeight = parent.clientHeight;
-    const viewTop = parent.scrollTop;
-    const viewBottom = viewTop + parentHeight;
-    const childHeight = child.clientHeight;
-    const childTop = child.offsetTop;
-    const childBottom = childTop + childHeight;
-    const isInView = viewTop <= childTop && childBottom <= viewBottom;
-    const isScrollBottom = beforeFocusedIndex.current < selectedValue.index;
-    if (!isInView) {
-      if (childBottom <= parentHeight) {
-        listRef.current.scrollTo({ top: 0 });
-      } else {
-        if (!isScrollBottom) {
-          listRef.current.scrollTo({ top: childTop + 1 });
+  const onCompositionStart = (0, import_react5.useCallback)(() => {
+    isComposition.current = true;
+  }, []);
+  const onCompositionEnd = (0, import_react5.useCallback)(() => {
+    isComposition.current = false;
+  }, []);
+  const onCreate = (0, import_react5.useCallback)(() => {
+    var _a, _b;
+    if (!listRef.current) return;
+    const newItem = { label: inputValue, value: inputValue };
+    let newItems = [];
+    if (resolvedItems) newItems = [...resolvedItems];
+    if (firstInsertPositionItem === "first") {
+      newItems = [newItem, ...newItems];
+    } else if (firstInsertPositionItem === "last") {
+      newItems = [...newItems, newItem];
+    } else {
+      const i = newItems.findIndex(
+        ({ label: label2 }) => label2 === firstInsertPositionItem
+      );
+      const targetItem = newItems[i];
+      if (i !== -1 && "items" in targetItem) {
+        if (secondInsertPositionItem === "first") {
+          targetItem.items = [newItem, ...(_a = targetItem.items) != null ? _a : []];
         } else {
-          listRef.current.scrollTo({ top: childBottom - parentHeight });
+          targetItem.items = [...(_b = targetItem.items) != null ? _b : [], newItem];
         }
+        newItems[i] = targetItem;
+      } else {
+        console.warn(
+          `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: '${firstInsertPositionItem}' specified in insertPositionItem does not exist in the option group.`
+        );
       }
     }
-    beforeFocusedIndex.current = selectedValue.index;
-  }, [listRef, selectedValue]);
-  (0, import_utils.useUpdateEffect)(() => {
-    if (!isOpen) beforeFocusedIndex.current = -1;
-  }, [isOpen]);
-  const getListProps = (0, import_react.useCallback)(
-    (props = {}, ref = null) => ({
-      as: "ul",
-      ref: (0, import_utils.mergeRefs)(listRef, ref),
-      role: "listbox",
-      tabIndex: -1,
-      position: "relative",
-      id: props.id || (0, import_react.useId)(),
-      ...props
-    }),
-    [listRef]
-  );
-  return {
-    onAnimationComplete,
-    getListProps
-  };
-};
-var useAutocompleteOptionGroup = ({
-  label,
-  ...rest
-}) => {
-  const { value, omitSelectedValues } = useAutocompleteContext();
-  const isMulti = (0, import_utils.isArray)(value);
-  const descendants = useAutocompleteDescendantsContext();
-  const values = descendants.values();
-  const selectedValues = isMulti && omitSelectedValues ? descendants.values(
-    ({ node }) => {
-      var _a;
-      return value.includes((_a = node.dataset.value) != null ? _a : "");
-    }
-  ) : [];
-  const selectedIndexes = selectedValues.map(({ index }) => index);
-  const childValues = values.filter(
-    ({ node, index }) => {
-      var _a;
-      return ((_a = node.parentElement) == null ? void 0 : _a.dataset.label) === label && !selectedIndexes.includes(index) && "target" in node.dataset;
+    setResolvedItems(newItems);
+    onChange(inputValue);
+    rebirthOptions(false);
+    const index = flattenItems(newItems).findIndex(
+      ({ value: value2 }) => value2 === inputValue
+    );
+    setFocusedIndex(index);
+    onCreateProp == null ? void 0 : onCreateProp(newItem, newItems);
+  }, [
+    inputValue,
+    resolvedItems,
+    firstInsertPositionItem,
+    onChange,
+    rebirthOptions,
+    onCreateProp,
+    secondInsertPositionItem,
+    isMulti
+  ]);
+  const onClick = (0, import_react5.useCallback)(() => {
+    if (isOpen) {
+      if (inputRef.current) inputRef.current.focus();
+    } else {
+      onOpen();
+      onFocusFirstOrSelected();
     }
-  );
-  const isEmpty = !childValues.length;
-  const [containerProps, groupProps] = (0, import_utils.splitObject)(rest, import_core.layoutStyleProperties);
-  const getContainerProps = (0, import_react.useCallback)(
-    (props = {}, ref = null) => {
-      const style = {
-        border: "0px",
-        clip: "rect(0px, 0px, 0px, 0px)",
-        height: "1px",
-        width: "1px",
-        margin: "-1px",
-        padding: "0px",
-        overflow: "hidden",
-        whiteSpace: "nowrap",
-        position: "absolute"
-      };
-      return {
-        ref,
-        ...props,
-        ...containerProps,
-        style: isEmpty ? style : void 0,
-        "data-label": label,
-        role: "autocomplete-group-container"
-      };
+  }, [isOpen, onFocusFirstOrSelected, onOpen]);
+  const onFocus = (0, import_react5.useCallback)(() => {
+    if (isOpen) return;
+    onOpen();
+    onFocusFirstOrSelected();
+  }, [isOpen, onFocusFirstOrSelected, onOpen]);
+  const onBlur = (0, import_react5.useCallback)(
+    (ev) => {
+      const relatedTarget = (0, import_utils11.getEventRelatedTarget)(ev);
+      if ((0, import_utils11.isContains)(containerRef.current, relatedTarget)) return;
+      if (!closeOnBlur && isHit) return;
+      if (allowFree && !!inputValue) onChange(inputValue, { runRebirth: false });
+      setInputValue("");
+      if (isOpen) onClose();
     },
-    [containerProps, isEmpty, label]
+    [closeOnBlur, isHit, isOpen, inputValue, allowFree, onClose, onChange]
   );
-  const getGroupProps = (0, import_react.useCallback)(
-    (props = {}, ref = null) => ({
-      ref,
-      ...props,
-      ...groupProps,
-      "data-label": label,
-      role: "autocomplete-group"
-    }),
-    [groupProps, label]
+  const onDelete = (0, import_react5.useCallback)(() => {
+    if (!isMulti) {
+      onChange("", { forceUpdate: true });
+    } else {
+      onChange(value[value.length - 1]);
+    }
+    if (!isOpen) onFocus();
+  }, [isMulti, isOpen, onChange, onFocus, value]);
+  const onClear = (0, import_react5.useCallback)(
+    (ev) => {
+      ev.stopPropagation();
+      prevValue.current = [];
+      setValue([]);
+      setLabel(void 0);
+      setInputValue("");
+      rebirthOptions();
+      if (isOpen && inputRef.current) inputRef.current.focus();
+    },
+    [isOpen, setLabel, setInputValue, setValue, rebirthOptions]
   );
-  return {
-    label,
-    getContainerProps,
-    getGroupProps
-  };
-};
-var useAutocompleteOption = (props) => {
-  var _a, _b;
-  const {
-    value,
-    omitSelectedValues,
-    onChange,
-    onChangeLabel,
-    focusedIndex,
-    setFocusedIndex,
-    onClose,
-    closeOnSelect: generalCloseOnSelect,
-    optionProps,
-    inputRef,
-    onFocusNext
-  } = useAutocompleteContext();
-  let {
-    icon: customIcon,
-    isDisabled,
-    isFocusable,
-    closeOnSelect: customCloseOnSelect,
-    children,
-    value: optionValue,
-    ...computedProps
-  } = { ...optionProps, ...props };
-  const trulyDisabled = !!isDisabled && !isFocusable;
-  const itemRef = (0, import_react.useRef)(null);
-  const { index, register, descendants } = useAutocompleteDescendant({
-    disabled: trulyDisabled
-  });
-  const values = descendants.values();
-  const frontValues = values.slice(0, index);
-  const isMulti = (0, import_utils.isArray)(value);
-  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 : {});
-  const isFocused = index === focusedIndex;
-  const onClick = (0, import_react.useCallback)(
+  const onKeyDown = (0, import_react5.useCallback)(
     (ev) => {
+      if (ev.key === " ") ev.key = ev.code;
+      if (formControlProps.disabled || formControlProps.readOnly) return;
+      if (isComposition.current) return;
+      const enabledDelete = label === inputValue || !inputValue.length;
+      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,
+        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
+      };
+      const action = actions[ev.key];
+      if (!action) return;
+      ev.preventDefault();
       ev.stopPropagation();
-      if (isDisabled) {
-        if (inputRef.current) inputRef.current.focus();
-        return;
-      }
-      if (!isTargetOption(ev.currentTarget)) {
-        if (inputRef.current) inputRef.current.focus();
-        return;
-      }
-      setFocusedIndex(index);
-      onChange(optionValue != null ? optionValue : "");
-      if (inputRef.current) inputRef.current.focus();
-      if (customCloseOnSelect != null ? customCloseOnSelect : generalCloseOnSelect) onClose();
-      if (omitSelectedValues) onFocusNext(index);
+      action(ev);
     },
     [
+      allowFree,
+      formControlProps,
+      label,
+      inputValue,
+      onOpen,
+      isFocused,
+      isMulti,
+      onFocusFirstOrSelected,
       onFocusNext,
-      omitSelectedValues,
-      isDisabled,
-      optionValue,
-      setFocusedIndex,
-      index,
-      onChange,
-      customCloseOnSelect,
-      generalCloseOnSelect,
+      onFocusLastOrSelected,
+      onFocusPrev,
+      isCreate,
+      onCreate,
+      onSelect,
+      isOpen,
+      onFocusFirst,
+      onFocusLast,
+      closeOnEsc,
       onClose,
-      inputRef
+      isEmptyValue,
+      onDelete,
+      onChange
+    ]
+  );
+  (0, import_react5.useEffect)(() => {
+    if (!isMulti) return;
+    if (!omitSelectedValues && (0, import_utils11.isUndefined)(maxSelectValues)) return;
+    const isAll = value.length > 0 && value.length === descendants.count();
+    const isMax = value.length === maxSelectValues;
+    if (isAll || isMax) {
+      onClose();
+      setIsAllSelected(true);
+    } else {
+      setIsAllSelected(false);
+    }
+  }, [
+    omitSelectedValues,
+    value,
+    descendants,
+    isMulti,
+    onClose,
+    maxSelectValues
+  ]);
+  (0, import_react5.useEffect)(() => {
+    var _a;
+    if (isMulti) {
+      if (JSON.stringify((_a = prevValue.current) != null ? _a : []) === JSON.stringify(value != null ? value : []))
+        return;
+      const label2 = getSelectedValues(value);
+      setLabel(label2);
+    } else {
+      if (prevValue.current === value) return;
+      onChangeLabel(value, { runOmit: false });
+    }
+  }, [isMulti, value, onChangeLabel, getSelectedValues]);
+  (0, import_utils11.useUpdateEffect)(() => {
+    if (isOpen || allowFree) return;
+    setFocusedIndex(-1);
+    setInputValue("");
+  }, [isOpen]);
+  (0, import_utils11.useUpdateEffect)(() => {
+    if (!isHit) setFocusedIndex(-2);
+  }, [isHit]);
+  (0, import_utils11.useUpdateEffect)(() => {
+    setResolvedItems(items ? JSON.parse(JSON.stringify(items)) : void 0);
+  }, [items]);
+  (0, import_utils11.useUnmountEffect)(() => {
+    timeoutIds.current.forEach((id2) => clearTimeout(id2));
+    timeoutIds.current.clear();
+  });
+  (0, import_use_outside_click.useOutsideClick)({
+    ref: containerRef,
+    handler: onClose,
+    enabled: isOpen && (closeOnBlur || !isHit)
+  });
+  const getPopoverProps = (0, import_react5.useCallback)(
+    (props2) => ({
+      closeOnBlur,
+      openDelay,
+      closeDelay,
+      isLazy,
+      lazyBehavior,
+      animation,
+      duration,
+      offset,
+      gutter,
+      preventOverflow,
+      flip,
+      matchWidth,
+      boundary,
+      eventListeners,
+      strategy,
+      placement,
+      modifiers,
+      ...props2,
+      trigger: "never",
+      closeOnButton: false,
+      isOpen,
+      onOpen,
+      onClose
+    }),
+    [
+      closeOnBlur,
+      openDelay,
+      closeDelay,
+      isLazy,
+      lazyBehavior,
+      animation,
+      duration,
+      offset,
+      gutter,
+      preventOverflow,
+      flip,
+      matchWidth,
+      boundary,
+      eventListeners,
+      strategy,
+      placement,
+      modifiers,
+      isOpen,
+      onOpen,
+      onClose
     ]
   );
-  (0, import_utils.useUpdateEffect)(() => {
-    if (isSelected) onChangeLabel(optionValue != null ? optionValue : "", { runOmit: false });
-  }, [optionValue]);
-  const getOptionProps = (0, import_react.useCallback)(
-    (props2 = {}, ref = null) => {
-      const style = {
-        border: "0px",
-        clip: "rect(0px, 0px, 0px, 0px)",
-        height: "1px",
-        width: "1px",
-        margin: "-1px",
-        padding: "0px",
-        overflow: "hidden",
-        whiteSpace: "nowrap",
-        position: "absolute"
-      };
-      return {
-        ref: (0, import_utils.mergeRefs)(itemRef, ref, register),
-        id: (0, import_react.useId)(),
-        role: "option",
-        ...computedProps,
-        ...props2,
-        tabIndex: -1,
-        style: !isTarget || omitSelectedValues && isSelected ? style : void 0,
-        "data-target": (0, import_utils.dataAttr)(true),
-        "data-value": optionValue != null ? optionValue : "",
-        "data-focus": (0, import_utils.dataAttr)(isFocused),
-        "data-disabled": (0, import_utils.dataAttr)(isDisabled),
-        "aria-checked": isSelected,
-        "aria-disabled": (0, import_utils.ariaAttr)(isDisabled),
-        onClick: (0, import_utils.handlerAll)(computedProps.onClick, props2.onClick, onClick)
-      };
-    },
+  const getContainerProps = (0, import_react5.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ref: (0, import_utils11.mergeRefs)(containerRef, ref),
+      ...containerProps,
+      ...props2,
+      ...formControlProps,
+      onClick: (0, import_utils11.handlerAll)(props2.onClick, rest.onClick, onClick),
+      onBlur: (0, import_utils11.handlerAll)(props2.onBlur, rest.onBlur, onBlur)
+    }),
+    [containerProps, formControlProps, onBlur, onClick, rest]
+  );
+  const getFieldProps = (0, import_react5.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ref,
+      tabIndex: -1,
+      ...props2,
+      ...formControlProps,
+      placeholder,
+      "data-active": (0, import_utils11.dataAttr)(isOpen),
+      "aria-expanded": (0, import_utils11.dataAttr)(isOpen),
+      onFocus: (0, import_utils11.handlerAll)(props2.onFocus, onFocusProp, onFocus),
+      onKeyDown: (0, import_utils11.handlerAll)(props2.onKeyDown, onKeyDownProp, onKeyDown)
+    }),
     [
-      optionValue,
-      computedProps,
-      isDisabled,
-      isFocused,
-      isSelected,
-      isTarget,
-      omitSelectedValues,
-      onClick,
-      register
+      formControlProps,
+      placeholder,
+      isOpen,
+      onFocusProp,
+      onFocus,
+      onKeyDownProp,
+      onKeyDown
     ]
   );
   return {
-    isSelected,
-    isFocused,
-    customIcon,
-    children,
-    getOptionProps
+    id,
+    descendants,
+    value,
+    label,
+    inputValue,
+    isHit,
+    isEmpty,
+    computedChildren,
+    focusedIndex,
+    omitSelectedValues,
+    closeOnSelect,
+    allowCreate,
+    allowFree,
+    emptyMessage,
+    isOpen,
+    isAllSelected,
+    listRef,
+    inputRef,
+    optionProps,
+    formControlProps,
+    setFocusedIndex,
+    onChangeLabel,
+    onChange,
+    onSearch,
+    onCreate,
+    onClear,
+    onCompositionStart,
+    onCompositionEnd,
+    pickOptions,
+    rebirthOptions,
+    onOpen,
+    onClose,
+    onFocusFirst,
+    onFocusLast,
+    onFocusSelected,
+    onFocusNext,
+    onFocusPrev,
+    getPopoverProps,
+    getContainerProps,
+    getFieldProps,
+    inputProps
   };
 };
-var useAutocompleteCreate = () => {
-  const { isHit, onCreate } = useAutocompleteContext();
-  const getCreateProps = (0, import_react.useCallback)(
-    (props = {}, ref = null) => {
-      const style = {
-        border: "0px",
-        clip: "rect(0px, 0px, 0px, 0px)",
-        height: "1px",
-        width: "1px",
-        margin: "-1px",
-        padding: "0px",
-        overflow: "hidden",
-        whiteSpace: "nowrap",
-        position: "absolute"
-      };
-      return {
-        ref,
-        ...props,
-        tabIndex: -1,
-        style: isHit ? style : void 0,
-        "data-focus": (0, import_utils.dataAttr)(!isHit),
-        onClick: (0, import_utils.handlerAll)(props.onClick, onCreate)
-      };
-    },
-    [isHit, onCreate]
-  );
-  return { getCreateProps };
-};
-var useAutocompleteEmpty = () => {
-  const { isHit, isEmpty } = useAutocompleteContext();
-  const getEmptyProps = (0, import_react.useCallback)(
+var useAutocompleteInput = () => {
+  const {
+    id,
+    inputRef,
+    onSearch,
+    onCompositionStart,
+    onCompositionEnd,
+    isAllSelected,
+    formControlProps,
+    inputProps,
+    isOpen,
+    focusedIndex,
+    listRef
+  } = useAutocompleteContext();
+  const { value } = useAutocompleteDescendantsContext();
+  (0, import_utils11.useUpdateEffect)(() => {
+    if (isAllSelected && inputRef.current) inputRef.current.blur();
+  }, [isAllSelected]);
+  const getInputProps = (0, import_react5.useCallback)(
     (props = {}, ref = null) => {
-      const style = {
-        border: "0px",
-        clip: "rect(0px, 0px, 0px, 0px)",
-        height: "1px",
-        width: "1px",
-        margin: "-1px",
-        padding: "0px",
-        overflow: "hidden",
-        whiteSpace: "nowrap",
-        position: "absolute"
-      };
+      var _a, _b;
       return {
-        ref,
+        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-controls": (_b = listRef.current) == null ? void 0 : _b.id,
+        autoCapitalize: "none",
+        autoComplete: "off",
+        spellCheck: "false",
+        ...inputProps,
         ...props,
-        tabIndex: -1,
-        style: isHit && !isEmpty ? style : void 0
+        id,
+        cursor: formControlProps.readOnly ? "default" : "text",
+        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
+        )
       };
     },
-    [isHit, isEmpty]
-  );
-  return { getEmptyProps };
-};
-
-// src/autocomplete-icon.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var AutocompleteIcon = (0, import_core2.forwardRef)(
-  ({ className, children, __css, ...rest }, ref) => {
-    const { styles } = useAutocompleteContext();
-    const css = {
-      position: "absolute",
-      top: "50%",
-      transform: "translateY(-50%)",
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      pointerEvents: "none",
-      cursor: "pointer",
-      ...styles.icon,
-      ...__css
-    };
-    const validChildren = (0, import_utils2.getValidChildren)(children);
-    const cloneChildren = validChildren.map(
-      (child) => (0, import_react2.cloneElement)(child, {
-        focusable: false,
-        "aria-hidden": true,
-        style: {
-          maxWidth: "1em",
-          maxHeight: "1em",
-          color: "currentColor"
-        }
-      })
-    );
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_core2.ui.div,
-      {
-        ref,
-        className: (0, import_utils2.cx)("ui-autocomplete__icon", className),
-        __css: css,
-        ...rest,
-        children: (0, import_utils2.isValidElement)(children) ? cloneChildren : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icon.ChevronIcon, {})
-      }
-    );
-  }
-);
-var AutocompleteClearIcon = ({
-  className,
-  children,
-  ...props
-}) => {
-  const ref = (0, import_react2.useRef)(null);
-  const { styles } = useAutocompleteContext();
-  const isDisabled = props.disabled;
-  const rest = (0, import_use_clickable.useClickable)({
-    ref,
-    isDisabled,
-    ...props
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    AutocompleteIcon,
-    {
-      "aria-label": "Clear value",
-      className: (0, import_utils2.cx)("ui-autocomplete__icon--clear", className),
-      __css: styles.clearIcon,
-      ...rest,
-      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icon.CloseIcon, { w: "0.5em", h: "0.5em" })
-    }
+    [
+      listRef,
+      focusedIndex,
+      isOpen,
+      inputProps,
+      inputRef,
+      formControlProps,
+      id,
+      isAllSelected,
+      value,
+      onSearch,
+      onCompositionStart,
+      onCompositionEnd
+    ]
   );
-};
-var AutocompleteItemIcon = (0, import_core2.forwardRef)(({ className, ...rest }, ref) => {
-  const { styles } = useAutocompleteContext();
-  const css = {
-    flexShrink: 0,
-    display: "inline-flex",
-    justifyContent: "center",
-    alignItems: "center",
-    fontSize: "0.85em",
-    ...styles.itemIcon
+  return {
+    getInputProps
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_core2.ui.span,
-    {
-      ref,
-      className: (0, import_utils2.cx)("ui-autocomplete__item__icon", className),
-      __css: css,
-      ...rest
-    }
-  );
-});
-
-// src/autocomplete-list.tsx
-var import_core3 = require("@yamada-ui/core");
-var import_popover = require("@yamada-ui/popover");
-var import_utils3 = require("@yamada-ui/utils");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var AutocompleteList = (0, import_core3.forwardRef)(
-  ({
-    className,
-    w,
-    width,
-    minW,
-    minWidth,
-    maxW,
-    maxWidth,
-    contentProps,
-    header,
-    footer,
-    children,
-    ...rest
-  }, ref) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-    const { styles } = useAutocompleteContext();
-    const { onAnimationComplete, getListProps } = 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;
-    minWidth != null ? minWidth : minWidth = (_f = (_d = styles.list) == null ? void 0 : _d.minWidth) != null ? _f : (_e = styles.list) == null ? void 0 : _e.minW;
-    maxWidth != null ? maxWidth : maxWidth = maxW;
-    maxWidth != null ? maxWidth : maxWidth = (_i = (_g = styles.list) == null ? void 0 : _g.maxWidth) != null ? _i : (_h = styles.list) == null ? void 0 : _h.maxW;
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      import_popover.PopoverContent,
-      {
-        as: "div",
-        className: "ui-autocomplete__popover",
-        width,
-        minWidth,
-        maxWidth,
-        __css: { ...styles.content, width, minWidth, maxWidth },
-        ...contentProps,
-        onAnimationComplete: (0, import_utils3.handlerAll)(
-          contentProps == null ? void 0 : contentProps.onAnimationComplete,
-          onAnimationComplete
-        ),
-        children: [
-          header ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            import_core3.ui.div,
-            {
-              className: "ui-autocomplete__header",
-              __css: { ...styles.header },
-              children: header
-            }
-          ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            import_core3.ui.ul,
-            {
-              className: (0, import_utils3.cx)("ui-autocomplete__list", className),
-              __css: { ...styles.list },
-              ...getListProps(rest, ref),
-              children
-            }
-          ),
-          footer ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            import_core3.ui.div,
-            {
-              className: "ui-autocomplete__footer",
-              __css: { ...styles.footer },
-              children: footer
-            }
-          ) : null
-        ]
-      }
-    );
-  }
-);
+};
 
 // src/autocomplete.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Autocomplete = (0, import_core4.forwardRef)(
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Autocomplete = (0, import_core9.forwardRef)(
   (props, ref) => {
-    const [styles, mergedProps] = (0, import_core4.useMultiComponentStyle)("Autocomplete", props);
+    const [styles, mergedProps] = (0, import_core9.useComponentMultiStyle)("Autocomplete", props);
     let {
       className,
       defaultValue = "",
@@ -1468,7 +1660,7 @@ var Autocomplete = (0, import_core4.forwardRef)(
       footer,
       children,
       ...computedProps
-    } = (0, import_core4.omitThemeProps)(mergedProps);
+    } = (0, import_core9.omitThemeProps)(mergedProps);
     const {
       value,
       onClose,
@@ -1491,7 +1683,7 @@ var Autocomplete = (0, import_core4.forwardRef)(
       color,
       ...styles.container
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AutocompleteDescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteDescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       AutocompleteProvider,
       {
         value: {
@@ -1504,20 +1696,20 @@ var Autocomplete = (0, import_core4.forwardRef)(
           isEmpty,
           styles
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_popover2.Popover, { ...getPopoverProps(), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-          import_core4.ui.div,
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_popover2.Popover, { ...getPopoverProps(), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          import_core9.ui.div,
           {
-            className: (0, import_utils4.cx)("ui-autocomplete", className),
+            className: (0, import_utils12.cx)("ui-autocomplete", className),
             __css: css,
             ...getContainerProps(containerProps),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-                import_core4.ui.div,
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                import_core9.ui.div,
                 {
                   className: "ui-autocomplete__inner",
                   __css: { position: "relative", ...styles.inner },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                       AutocompleteField,
                       {
                         h,
@@ -1526,30 +1718,30 @@ var Autocomplete = (0, import_core4.forwardRef)(
                         ...getFieldProps(fieldProps, ref)
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AutocompleteIcon, { ...iconProps, ...formControlProps })
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteIcon, { ...iconProps, ...formControlProps })
                   ]
                 }
               ),
-              !isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              !isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                 AutocompleteList,
                 {
-                  header: (0, import_utils4.runIfFunc)(header, { value, onClose }),
-                  footer: (0, import_utils4.runIfFunc)(footer, { value, onClose }),
+                  header: (0, import_utils12.runIfFunc)(header, { value, onClose }),
+                  footer: (0, import_utils12.runIfFunc)(footer, { value, onClose }),
                   contentProps,
                   ...listProps,
                   children: [
-                    allowCreate ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AutocompleteEmpty, { ...emptyProps }),
+                    allowCreate ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteEmpty, { ...emptyProps }),
                     children != null ? children : computedChildren
                   ]
                 }
-              ) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              ) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 AutocompleteList,
                 {
-                  header: (0, import_utils4.runIfFunc)(header, { value, onClose }),
-                  footer: (0, import_utils4.runIfFunc)(footer, { value, onClose }),
+                  header: (0, import_utils12.runIfFunc)(header, { value, onClose }),
+                  footer: (0, import_utils12.runIfFunc)(footer, { value, onClose }),
                   contentProps,
                   ...listProps,
-                  children: allowCreate && inputValue ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AutocompleteEmpty, { ...emptyProps })
+                  children: allowCreate && inputValue ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteEmpty, { ...emptyProps })
                 }
               ) })
             ]
@@ -1559,7 +1751,7 @@ var Autocomplete = (0, import_core4.forwardRef)(
     ) });
   }
 );
-var AutocompleteField = (0, import_core4.forwardRef)(
+var AutocompleteField = (0, import_core9.forwardRef)(
   ({ className, h, minH, placeholder, inputProps, ...rest }, ref) => {
     const { label, inputValue, styles } = useAutocompleteContext();
     const { getInputProps } = useAutocompleteInput();
@@ -1572,14 +1764,14 @@ var AutocompleteField = (0, import_core4.forwardRef)(
       ...styles.field,
       cursor: "text"
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_popover2.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      import_core4.ui.div,
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_popover2.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_core9.ui.div,
       {
-        className: (0, import_utils4.cx)("ui-autocomplete__field", className),
+        className: (0, import_utils12.cx)("ui-autocomplete__field", className),
         __css: css,
         ...rest,
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          import_core4.ui.input,
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          import_core9.ui.input,
           {
             className: "ui-autocomplete__field__input",
             display: "inline-block",
@@ -1596,194 +1788,16 @@ var AutocompleteField = (0, import_core4.forwardRef)(
   }
 );
 
-// src/autocomplete-option-group.tsx
-var import_core5 = require("@yamada-ui/core");
-var import_utils5 = require("@yamada-ui/utils");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var AutocompleteOptionGroup = (0, import_core5.forwardRef)(
-  ({ className, color, h, height, minH, minHeight, children, ...rest }, ref) => {
-    const { styles } = useAutocompleteContext();
-    const { label, getContainerProps, getGroupProps } = useAutocompleteOptionGroup(rest);
-    h != null ? h : h = height;
-    minH != null ? minH : minH = minHeight;
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      import_core5.ui.li,
-      {
-        className: (0, import_utils5.cx)(
-          "ui-autocomplete__item",
-          "ui-autocomplete__item--group",
-          className
-        ),
-        __css: { w: "100%", h: "fit-content", color },
-        ...getContainerProps(),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            import_core5.ui.span,
-            {
-              className: "ui-autocomplete__item__group-label",
-              __css: styles.groupLabel,
-              lineClamp: 1,
-              children: label
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            import_core5.ui.ul,
-            {
-              ...getGroupProps({}, ref),
-              className: "ui-autocomplete__item__group",
-              __css: { h, minH, ...styles.group },
-              children
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-
-// src/autocomplete-option.tsx
-var import_core6 = require("@yamada-ui/core");
-var import_utils6 = require("@yamada-ui/utils");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var AutocompleteOption = (0, import_core6.forwardRef)(
-  ({ className, icon, ...rest }, ref) => {
-    const { styles } = useAutocompleteContext();
-    const { isSelected, customIcon, children, getOptionProps } = useAutocompleteOption(rest);
-    icon != null ? icon : icon = customIcon;
-    const css = {
-      textDecoration: "none",
-      color: "inherit",
-      userSelect: "none",
-      display: "flex",
-      width: "100%",
-      alignItems: "center",
-      textAlign: "start",
-      flex: "0 0 auto",
-      outline: 0,
-      gap: "0.75rem",
-      ...styles.item
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-      import_core6.ui.li,
-      {
-        className: (0, import_utils6.cx)("ui-autocomplete__item", className),
-        __css: css,
-        ...getOptionProps({}, ref),
-        children: [
-          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AutocompleteItemIcon, { opacity: isSelected ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckIcon, {}) }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.ui.span, { style: { flex: 1 }, "data-label": true, children })
-        ]
-      }
-    );
-  }
-);
-var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-  "polygon",
-  {
-    fill: "currentColor",
-    points: "5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"
-  }
-) });
-
-// src/autocomplete-create.tsx
-var import_core7 = require("@yamada-ui/core");
-var import_utils7 = require("@yamada-ui/utils");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var AutocompleteCreate = (0, import_core7.forwardRef)(
-  ({ className, icon, children, ...rest }, ref) => {
-    const { inputValue, styles } = useAutocompleteContext();
-    const { getCreateProps } = useAutocompleteCreate();
-    children != null ? children : children = inputValue;
-    const css = {
-      textDecoration: "none",
-      color: "inherit",
-      userSelect: "none",
-      display: "flex",
-      width: "100%",
-      alignItems: "center",
-      textAlign: "start",
-      flex: "0 0 auto",
-      outline: 0,
-      gap: "0.75rem",
-      ...styles.item
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-      import_core7.ui.li,
-      {
-        className: (0, import_utils7.cx)("ui-autocomplete__item--create", className),
-        __css: css,
-        ...getCreateProps(rest, ref),
-        children: [
-          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AutocompleteItemIcon, { children: icon || /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PlusIcon, {}) }) : null,
-          icon ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.ui.span, { style: { pointerEvents: "none", flex: 1 }, lineClamp: 1, children: (0, import_utils7.runIfFunc)(children, inputValue) }) : (0, import_utils7.runIfFunc)(children, inputValue)
-        ]
-      }
-    );
-  }
-);
-var PlusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { viewBox: "0 0 45.402 45.402", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime7.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"
-  }
-) });
-
-// src/autocomplete-empty.tsx
-var import_core8 = require("@yamada-ui/core");
-var import_utils8 = require("@yamada-ui/utils");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var AutocompleteEmpty = (0, import_core8.forwardRef)(
-  ({ className, icon, children, ...rest }, ref) => {
-    const { emptyMessage, styles } = useAutocompleteContext();
-    const { getEmptyProps } = useAutocompleteEmpty();
-    children != null ? children : children = emptyMessage;
-    const css = {
-      textDecoration: "none",
-      color: "inherit",
-      userSelect: "none",
-      display: "flex",
-      width: "100%",
-      alignItems: "center",
-      textAlign: "start",
-      flex: "0 0 auto",
-      outline: 0,
-      gap: "0.75rem",
-      pointerEvents: "none",
-      ...styles.item
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-      import_core8.ui.li,
-      {
-        className: (0, import_utils8.cx)("ui-autocomplete__item--empty", className),
-        __css: css,
-        ...getEmptyProps(rest, ref),
-        children: [
-          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteItemIcon, { children: icon || /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MinusIcon, {}) }) : null,
-          icon ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core8.ui.span, { style: { pointerEvents: "none", flex: 1 }, lineClamp: 1, children }) : children
-        ]
-      }
-    );
-  }
-);
-var MinusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { viewBox: "0 0 448 512", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime8.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"
-  }
-) });
-
 // src/multi-autocomplete.tsx
-var import_core9 = require("@yamada-ui/core");
+var import_core10 = require("@yamada-ui/core");
 var import_popover3 = require("@yamada-ui/popover");
 var import_portal2 = require("@yamada-ui/portal");
-var import_utils9 = require("@yamada-ui/utils");
-var import_react3 = require("react");
+var import_utils13 = require("@yamada-ui/utils");
+var import_react6 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var MultiAutocomplete = (0, import_core9.forwardRef)(
+var MultiAutocomplete = (0, import_core10.forwardRef)(
   (props, ref) => {
-    const [styles, mergedProps] = (0, import_core9.useMultiComponentStyle)(
+    const [styles, mergedProps] = (0, import_core10.useComponentMultiStyle)(
       "MultiAutocomplete",
       props
     );
@@ -1814,7 +1828,7 @@ var MultiAutocomplete = (0, import_core9.forwardRef)(
       footer,
       children,
       ...computedProps
-    } = (0, import_core9.omitThemeProps)(mergedProps);
+    } = (0, import_core10.omitThemeProps)(mergedProps);
     const {
       value,
       onClose,
@@ -1857,14 +1871,14 @@ var MultiAutocomplete = (0, import_core9.forwardRef)(
           styles
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_popover3.Popover, { ...getPopoverProps(), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-          import_core9.ui.div,
+          import_core10.ui.div,
           {
-            className: (0, import_utils9.cx)("ui-multi-autocomplete", className),
+            className: (0, import_utils13.cx)("ui-multi-autocomplete", className),
             __css: css,
             ...getContainerProps(containerProps),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                import_core9.ui.div,
+                import_core10.ui.div,
                 {
                   className: "ui-multi-autocomplete__inner",
                   __css: { position: "relative", ...styles.inner },
@@ -1885,7 +1899,7 @@ var MultiAutocomplete = (0, import_core9.forwardRef)(
                       AutocompleteClearIcon,
                       {
                         ...clearIconProps,
-                        onClick: (0, import_utils9.handlerAll)(clearIconProps == null ? void 0 : clearIconProps.onClick, onClear),
+                        onClick: (0, import_utils13.handlerAll)(clearIconProps == null ? void 0 : clearIconProps.onClick, onClear),
                         ...formControlProps
                       }
                     ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AutocompleteIcon, { ...iconProps, ...formControlProps })
@@ -1895,8 +1909,8 @@ var MultiAutocomplete = (0, import_core9.forwardRef)(
               !isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_portal2.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                 AutocompleteList,
                 {
-                  header: (0, import_utils9.runIfFunc)(header, { value, onClose }),
-                  footer: (0, import_utils9.runIfFunc)(footer, { value, onClose }),
+                  header: (0, import_utils13.runIfFunc)(header, { value, onClose }),
+                  footer: (0, import_utils13.runIfFunc)(footer, { value, onClose }),
                   contentProps,
                   ...listProps,
                   children: [
@@ -1907,8 +1921,8 @@ var MultiAutocomplete = (0, import_core9.forwardRef)(
               ) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_portal2.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 AutocompleteList,
                 {
-                  header: (0, import_utils9.runIfFunc)(header, { value, onClose }),
-                  footer: (0, import_utils9.runIfFunc)(footer, { value, onClose }),
+                  header: (0, import_utils13.runIfFunc)(header, { value, onClose }),
+                  footer: (0, import_utils13.runIfFunc)(footer, { value, onClose }),
                   contentProps,
                   ...listProps,
                   children: allowCreate && inputValue ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AutocompleteEmpty, { ...emptyProps })
@@ -1921,7 +1935,7 @@ var MultiAutocomplete = (0, import_core9.forwardRef)(
     ) });
   }
 );
-var MultiAutocompleteField = (0, import_core9.forwardRef)(
+var MultiAutocompleteField = (0, import_core10.forwardRef)(
   ({
     className,
     component,
@@ -1935,7 +1949,7 @@ var MultiAutocompleteField = (0, import_core9.forwardRef)(
   }, ref) => {
     const { value, label, inputValue, onChange, isOpen, inputRef, styles } = useAutocompleteContext();
     const { getInputProps } = useAutocompleteInput();
-    const cloneChildren = (0, import_react3.useMemo)(() => {
+    const cloneChildren = (0, import_react6.useMemo)(() => {
       if (!(label == null ? void 0 : label.length)) return null;
       if (component) {
         return label.map((label2, index) => {
@@ -1955,12 +1969,12 @@ var MultiAutocompleteField = (0, import_core9.forwardRef)(
             marginBlockEnd: "0.125rem",
             marginInlineEnd: "0.25rem"
           };
-          return el ? (0, import_react3.cloneElement)(el, { key: index, style }) : null;
+          return el ? (0, import_react6.cloneElement)(el, { key: index, style }) : null;
         });
       } else {
         return label.map((value2, index) => {
           const isLast = label.length === index + 1;
-          return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core9.ui.span, { display: "inline-block", me: "0.25rem", children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core10.ui.span, { display: "inline-block", me: "0.25rem", children: [
             value2,
             !isLast || isOpen ? separator : null
           ] }, index);
@@ -1978,16 +1992,16 @@ var MultiAutocompleteField = (0, import_core9.forwardRef)(
       cursor: "text"
     };
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_popover3.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-      import_core9.ui.div,
+      import_core10.ui.div,
       {
-        className: (0, import_utils9.cx)("ui-multi-autocomplete__field", className),
+        className: (0, import_utils13.cx)("ui-multi-autocomplete__field", className),
         __css: css,
         py: (label == null ? void 0 : label.length) && component ? "0.125rem" : void 0,
         ...rest,
         children: [
           cloneChildren,
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-            import_core9.ui.input,
+            import_core10.ui.input,
             {
               "aria-label": "Input value",
               className: "ui-multi-autocomplete__field__input",