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

package/dist/autocomplete.js

@@ -24,212 +24,431 @@ __export(autocomplete_exports, {
   Autocomplete: () => Autocomplete
 });
 module.exports = __toCommonJS(autocomplete_exports);
-var import_core8 = 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_utils8 = require("@yamada-ui/utils");
-
-// src/autocomplete-icon.tsx
-var import_core7 = require("@yamada-ui/core");
-var import_icon = require("@yamada-ui/icon");
-var import_use_clickable = require("@yamada-ui/use-clickable");
-var import_utils7 = require("@yamada-ui/utils");
-var import_react2 = require("react");
+var import_utils12 = require("@yamada-ui/utils");
 
-// src/use-autocomplete.tsx
-var import_core6 = require("@yamada-ui/core");
-var import_form_control = require("@yamada-ui/form-control");
-var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
+// src/autocomplete-context.ts
 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_utils6 = require("@yamada-ui/utils");
-var import_react = require("react");
-
-// src/autocomplete-option-group.tsx
-var import_core = require("@yamada-ui/core");
 var import_utils = require("@yamada-ui/utils");
-var import_jsx_runtime = require("react/jsx-runtime");
-var AutocompleteOptionGroup = (0, import_core.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_runtime.jsxs)(
-      import_core.ui.li,
-      {
-        className: (0, import_utils.cx)(
-          "ui-autocomplete__item",
-          "ui-autocomplete__item--group",
-          className
-        ),
-        __css: { w: "100%", h: "fit-content", color },
-        ...getContainerProps(),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_core.ui.span,
-            {
-              className: "ui-autocomplete__item__group-label",
-              __css: styles.groupLabel,
-              lineClamp: 1,
-              children: label
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_core.ui.ul,
-            {
-              ...getGroupProps({}, ref),
-              className: "ui-autocomplete__item__group",
-              __css: { h, minH, ...styles.group },
-              children
-            }
-          )
-        ]
-      }
-    );
-  }
-);
+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-option.tsx
+// src/autocomplete-create.tsx
 var import_core2 = require("@yamada-ui/core");
+var import_utils4 = require("@yamada-ui/utils");
+
+// src/autocomplete-icon.tsx
+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_jsx_runtime2 = require("react/jsx-runtime");
-var AutocompleteOption = (0, import_core2.forwardRef)(
-  ({ className, icon, ...rest }, ref) => {
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var AutocompleteIcon = (0, import_core.forwardRef)(
+  ({ className, children, __css, ...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%",
+      position: "absolute",
+      top: "50%",
+      transform: "translateY(-50%)",
+      display: "inline-flex",
       alignItems: "center",
-      textAlign: "start",
-      flex: "0 0 auto",
-      outline: 0,
-      gap: "0.75rem",
-      ...styles.item
+      justifyContent: "center",
+      pointerEvents: "none",
+      cursor: "pointer",
+      ...styles.icon,
+      ...__css
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-      import_core2.ui.li,
+    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,
       {
-        className: (0, import_utils2.cx)("ui-autocomplete__item", className),
+        ref,
+        className: (0, import_utils2.cx)("ui-autocomplete__icon", className),
         __css: css,
-        ...getOptionProps({}, ref),
-        children: [
-          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AutocompleteItemIcon, { opacity: isSelected ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckIcon, {}) }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { style: { flex: 1 }, "data-label": true, children })
-        ]
+        ...rest,
+        children: (0, import_utils2.isValidElement)(children) ? cloneChildren : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.ChevronIcon, {})
       }
     );
   }
 );
-var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime2.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"
-  }
-) });
+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
+    }
+  );
+});
 
-// src/autocomplete-create.tsx
-var import_core3 = require("@yamada-ui/core");
+// src/use-autocomplete-option.ts
 var import_utils3 = require("@yamada-ui/utils");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var AutocompleteCreate = (0, import_core3.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_runtime3.jsxs)(
-      import_core3.ui.li,
-      {
-        className: (0, import_utils3.cx)("ui-autocomplete__item--create", className),
-        __css: css,
-        ...getCreateProps(rest, ref),
-        children: [
-          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AutocompleteItemIcon, { children: icon || /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PlusIcon, {}) }) : null,
-          icon ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.span, { style: { pointerEvents: "none", flex: 1 }, lineClamp: 1, children: (0, import_utils3.runIfFunc)(children, inputValue) }) : (0, import_utils3.runIfFunc)(children, inputValue)
-        ]
+var import_react2 = require("react");
+var isTargetOption = (target) => {
+  var _a;
+  return (0, import_utils3.isHTMLElement)(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("option"));
+};
+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_react2.useRef)(null);
+  const { index, register, descendants } = useAutocompleteDescendant({
+    disabled: trulyDisabled
+  });
+  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;
       }
-    );
-  }
-);
-var PlusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { viewBox: "0 0 45.402 45.402", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime3.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_core4 = require("@yamada-ui/core");
-var import_utils4 = require("@yamada-ui/utils");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var AutocompleteEmpty = (0, import_core4.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_runtime4.jsxs)(
-      import_core4.ui.li,
-      {
-        className: (0, import_utils4.cx)("ui-autocomplete__item--empty", className),
-        __css: css,
-        ...getEmptyProps(rest, ref),
-        children: [
-          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AutocompleteItemIcon, { children: icon || /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MinusIcon, {}) }) : null,
-          icon ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ui.span, { style: { pointerEvents: "none", flex: 1 }, lineClamp: 1, children }) : children
-        ]
+      if (!isTargetOption(ev.currentTarget)) {
+        if (inputRef.current) inputRef.current.focus();
+        return;
       }
-    );
-  }
-);
-var MinusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 448 512", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime4.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"
-  }
-) });
-
+      setFocusedIndex(index);
+      onChange(optionValue != null ? optionValue : "");
+      if (inputRef.current) inputRef.current.focus();
+      if (customCloseOnSelect != null ? customCloseOnSelect : generalCloseOnSelect) onClose();
+      if (omitSelectedValues) onFocusNext(index);
+    },
+    [
+      onFocusNext,
+      omitSelectedValues,
+      isDisabled,
+      optionValue,
+      setFocusedIndex,
+      index,
+      onChange,
+      customCloseOnSelect,
+      generalCloseOnSelect,
+      onClose,
+      inputRef
+    ]
+  );
+  (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)
+      };
+    },
+    [
+      optionValue,
+      computedProps,
+      isDisabled,
+      isFocused,
+      isSelected,
+      isTarget,
+      omitSelectedValues,
+      onClick,
+      register
+    ]
+  );
+  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)
+      };
+    },
+    [isHit, onCreate]
+  );
+  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
+      };
+    },
+    [isHit, isEmpty]
+  );
+  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_core5 = require("@yamada-ui/core");
+var import_core4 = require("@yamada-ui/core");
 var import_popover = require("@yamada-ui/popover");
-var import_utils5 = require("@yamada-ui/utils");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var AutocompleteList = (0, import_core5.forwardRef)(
+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 {
+          listRef.current.scrollTo({ top: childBottom - parentHeight });
+        }
+      }
+    }
+    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]
+  );
+  return {
+    onAnimationComplete,
+    getListProps
+  };
+};
+
+// src/autocomplete-list.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var AutocompleteList = (0, import_core4.forwardRef)(
   ({
     className,
     w,
@@ -253,7 +472,7 @@ var AutocompleteList = (0, import_core5.forwardRef)(
     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_runtime5.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       import_popover.PopoverContent,
       {
         as: "div",
@@ -263,30 +482,30 @@ var AutocompleteList = (0, import_core5.forwardRef)(
         maxWidth,
         __css: { ...styles.content, width, minWidth, maxWidth },
         ...contentProps,
-        onAnimationComplete: (0, import_utils5.handlerAll)(
+        onAnimationComplete: (0, import_utils7.handlerAll)(
           contentProps == null ? void 0 : contentProps.onAnimationComplete,
           onAnimationComplete
         ),
         children: [
-          header ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            import_core5.ui.div,
+          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_runtime5.jsx)(
-            import_core5.ui.ul,
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_core4.ui.ul,
             {
-              className: (0, import_utils5.cx)("ui-autocomplete__list", className),
+              className: (0, import_utils7.cx)("ui-autocomplete__list", className),
               __css: { ...styles.list },
               ...getListProps(rest, ref),
               children
             }
           ),
-          footer ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            import_core5.ui.div,
+          footer ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_core4.ui.div,
             {
               className: "ui-autocomplete__footer",
               __css: { ...styles.footer },
@@ -300,9 +519,177 @@ var AutocompleteList = (0, import_core5.forwardRef)(
 );
 
 // src/use-autocomplete.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var kanaMap = {
-  \uFF76\uFF9E: "\u30AC",
+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"
+      };
+    },
+    [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",
@@ -416,20 +803,6 @@ var flattenItems = (items) => {
   }).filter(Boolean);
   return filterItems(items).flat(Infinity);
 };
-var isTargetOption = (target) => {
-  var _a;
-  return (0, import_utils6.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_utils6.createContext)({
-  name: "AutocompleteContext",
-  errorMessage: `useAutocompleteContext returned is 'undefined'. Seems you forgot to wrap the components in "<Autocomplete />" or "<MultiAutocomplete />"`
-});
 var useAutocomplete = (props) => {
   const {
     value: valueProp,
@@ -478,27 +851,27 @@ var useAutocomplete = (props) => {
     "aria-readonly": _ariaReadonly,
     onFocus: onFocusProp,
     ...formControlProps
-  } = (0, import_utils6.pickObject)(rest, import_form_control.formControlProperties);
-  const [containerProps, inputProps] = (0, import_utils6.splitObject)(rest, import_core6.layoutStyleProperties);
+  } = (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_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 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_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 [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,
@@ -511,16 +884,16 @@ var useAutocomplete = (props) => {
   });
   const isFocused = focusedIndex > -1;
   const isCreate = focusedIndex === -2 && allowCreate;
-  const isMulti = (0, import_utils6.isArray)(value);
+  const isMulti = (0, import_utils11.isArray)(value);
   const isEmptyValue = !isMulti ? !value : !value.length;
-  const [firstInsertPositionItem, secondInsertPositionItem] = (0, import_react.useMemo)(() => {
-    if ((0, import_utils6.isArray)(insertPositionItem)) {
+  const [firstInsertPositionItem, secondInsertPositionItem] = (0, import_react5.useMemo)(() => {
+    if ((0, import_utils11.isArray)(insertPositionItem)) {
       return insertPositionItem;
     } else {
       return [insertPositionItem, "first"];
     }
   }, [insertPositionItem]);
-  if (allowCreate && !(0, import_utils6.isUndefined)(children)) {
+  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.`
     );
@@ -535,35 +908,27 @@ var useAutocomplete = (props) => {
   const enabledValues = descendants.enabledValues(
     ({ node, index }) => "target" in node.dataset && !selectedIndexes.includes(index)
   );
-  const validChildren = (0, import_utils6.getValidChildren)(children);
-  const computedChildren = (0, import_react.useMemo)(
+  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_runtime6.jsx)(AutocompleteOption, { value: value2, ...props2, children: label2 }, i);
+        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_runtime6.jsx)(
-          AutocompleteOptionGroup,
-          {
-            label: label2,
-            ...props2,
-            children: items2.map(({ label: label3, value: value2, ...props3 }, i2) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AutocompleteOption, { value: value2, ...props3, children: label3 }, i2))
-          },
-          i
-        );
+        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_react.useCallback)(() => {
+  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_react.useCallback)(() => {
+  const onFocusFirst = (0, import_react5.useCallback)(() => {
     const id2 = setTimeout(() => {
       if (isEmpty || isAllSelected) return;
       const first = descendants.enabledFirstValue(
@@ -591,7 +956,7 @@ var useAutocomplete = (props) => {
     omitSelectedValues,
     selectedIndexes
   ]);
-  const onFocusLast = (0, import_react.useCallback)(() => {
+  const onFocusLast = (0, import_react5.useCallback)(() => {
     const id2 = setTimeout(() => {
       if (isEmpty || isAllSelected) return;
       const last = descendants.enabledLastValue(
@@ -619,7 +984,7 @@ var useAutocomplete = (props) => {
     omitSelectedValues,
     selectedIndexes
   ]);
-  const onFocusSelected = (0, import_react.useCallback)(() => {
+  const onFocusSelected = (0, import_react5.useCallback)(() => {
     const id2 = setTimeout(() => {
       const values = descendants.enabledValues();
       const selected = values.find(
@@ -632,7 +997,7 @@ var useAutocomplete = (props) => {
     });
     timeoutIds.current.add(id2);
   }, [descendants, isMulti, value]);
-  const onFocusNext = (0, import_react.useCallback)(
+  const onFocusNext = (0, import_react5.useCallback)(
     (index = focusedIndex) => {
       const id2 = setTimeout(() => {
         var _a;
@@ -663,7 +1028,7 @@ var useAutocomplete = (props) => {
       selectedIndexes
     ]
   );
-  const onFocusPrev = (0, import_react.useCallback)(
+  const onFocusPrev = (0, import_react5.useCallback)(
     (index = focusedIndex) => {
       const id2 = setTimeout(() => {
         var _a;
@@ -696,7 +1061,7 @@ var useAutocomplete = (props) => {
   );
   const onFocusFirstOrSelected = isEmptyValue || omitSelectedValues ? onFocusFirst : onFocusSelected;
   const onFocusLastOrSelected = isEmptyValue || omitSelectedValues ? onFocusLast : onFocusSelected;
-  const pickOptions = (0, import_react.useCallback)(
+  const pickOptions = (0, import_react5.useCallback)(
     (value2) => {
       const values = descendants.values();
       let isHit2 = false;
@@ -719,7 +1084,7 @@ var useAutocomplete = (props) => {
     },
     [descendants, format]
   );
-  const rebirthOptions = (0, import_react.useCallback)(
+  const rebirthOptions = (0, import_react5.useCallback)(
     (runFocus = true) => {
       const values = descendants.values();
       values.forEach(({ node }) => {
@@ -730,10 +1095,10 @@ var useAutocomplete = (props) => {
     },
     [descendants, onFocusFirst]
   );
-  const getSelectedValues = (0, import_react.useCallback)(
+  const getSelectedValues = (0, import_react5.useCallback)(
     (newValues) => {
       const enabledValues2 = descendants.enabledValues();
-      const resolvedValues = (0, import_utils6.isArray)(newValues) ? newValues : [newValues];
+      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 : {};
@@ -750,7 +1115,7 @@ var useAutocomplete = (props) => {
     },
     [allowFree, descendants]
   );
-  const onChangeLabel = (0, import_react.useCallback)(
+  const onChangeLabel = (0, import_react5.useCallback)(
     (newValue, { forceUpdate, runOmit = true } = {}) => {
       const selectedValues2 = getSelectedValues(newValue);
       if (!forceUpdate && !selectedValues2.length) return;
@@ -759,11 +1124,11 @@ var useAutocomplete = (props) => {
           return selectedValues2[0];
         } else {
           selectedValues2.forEach((selectedValue) => {
-            const isSelected = (0, import_utils6.isArray)(prev) && prev.includes(selectedValue != null ? selectedValue : "");
+            const isSelected = (0, import_utils11.isArray)(prev) && prev.includes(selectedValue != null ? selectedValue : "");
             if (!isSelected) {
-              prev = [...(0, import_utils6.isArray)(prev) ? prev : [], selectedValue];
+              prev = [...(0, import_utils11.isArray)(prev) ? prev : [], selectedValue];
             } else if (runOmit) {
-              prev = (0, import_utils6.isArray)(prev) ? prev.filter((value2) => value2 !== selectedValue) : void 0;
+              prev = (0, import_utils11.isArray)(prev) ? prev.filter((value2) => value2 !== selectedValue) : void 0;
             }
           });
           return prev;
@@ -772,11 +1137,11 @@ var useAutocomplete = (props) => {
     },
     [getSelectedValues, isMulti]
   );
-  const onChange = (0, import_react.useCallback)(
+  const onChange = (0, import_react5.useCallback)(
     (newValue, { forceUpdate, runRebirth = true } = {}) => {
       setValue((prev) => {
         let next;
-        if (!(0, import_utils6.isArray)(prev)) {
+        if (!(0, import_utils11.isArray)(prev)) {
           next = newValue;
         } else {
           const isSelected = prev.includes(newValue);
@@ -809,7 +1174,7 @@ var useAutocomplete = (props) => {
       format
     ]
   );
-  const onSelect = (0, import_react.useCallback)(() => {
+  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 : {}))
@@ -828,7 +1193,7 @@ var useAutocomplete = (props) => {
     onClose,
     onFocusNext
   ]);
-  const onSearch = (0, import_react.useCallback)(
+  const onSearch = (0, import_react5.useCallback)(
     (ev) => {
       if (!isOpen) onOpen();
       onSearchProp == null ? void 0 : onSearchProp(ev);
@@ -843,13 +1208,13 @@ var useAutocomplete = (props) => {
     },
     [isOpen, onOpen, format, onSearchProp, pickOptions, rebirthOptions]
   );
-  const onCompositionStart = (0, import_react.useCallback)(() => {
+  const onCompositionStart = (0, import_react5.useCallback)(() => {
     isComposition.current = true;
   }, []);
-  const onCompositionEnd = (0, import_react.useCallback)(() => {
+  const onCompositionEnd = (0, import_react5.useCallback)(() => {
     isComposition.current = false;
   }, []);
-  const onCreate = (0, import_react.useCallback)(() => {
+  const onCreate = (0, import_react5.useCallback)(() => {
     var _a, _b;
     if (!listRef.current) return;
     const newItem = { label: inputValue, value: inputValue };
@@ -895,7 +1260,7 @@ var useAutocomplete = (props) => {
     secondInsertPositionItem,
     isMulti
   ]);
-  const onClick = (0, import_react.useCallback)(() => {
+  const onClick = (0, import_react5.useCallback)(() => {
     if (isOpen) {
       if (inputRef.current) inputRef.current.focus();
     } else {
@@ -903,15 +1268,15 @@ var useAutocomplete = (props) => {
       onFocusFirstOrSelected();
     }
   }, [isOpen, onFocusFirstOrSelected, onOpen]);
-  const onFocus = (0, import_react.useCallback)(() => {
+  const onFocus = (0, import_react5.useCallback)(() => {
     if (isOpen) return;
     onOpen();
     onFocusFirstOrSelected();
   }, [isOpen, onFocusFirstOrSelected, onOpen]);
-  const onBlur = (0, import_react.useCallback)(
+  const onBlur = (0, import_react5.useCallback)(
     (ev) => {
-      const relatedTarget = (0, import_utils6.getEventRelatedTarget)(ev);
-      if ((0, import_utils6.isContains)(containerRef.current, relatedTarget)) return;
+      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("");
@@ -919,7 +1284,7 @@ var useAutocomplete = (props) => {
     },
     [closeOnBlur, isHit, isOpen, inputValue, allowFree, onClose, onChange]
   );
-  const onDelete = (0, import_react.useCallback)(() => {
+  const onDelete = (0, import_react5.useCallback)(() => {
     if (!isMulti) {
       onChange("", { forceUpdate: true });
     } else {
@@ -927,7 +1292,7 @@ var useAutocomplete = (props) => {
     }
     if (!isOpen) onFocus();
   }, [isMulti, isOpen, onChange, onFocus, value]);
-  const onClear = (0, import_react.useCallback)(
+  const onClear = (0, import_react5.useCallback)(
     (ev) => {
       ev.stopPropagation();
       prevValue.current = [];
@@ -939,17 +1304,17 @@ var useAutocomplete = (props) => {
     },
     [isOpen, setLabel, setInputValue, setValue, rebirthOptions]
   );
-  const onKeyDown = (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_utils6.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
-        ArrowUp: isFocused ? () => onFocusPrev() : !isOpen ? (0, import_utils6.funcAll)(onOpen, onFocusLastOrSelected) : void 0,
-        Space: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? (0, import_utils6.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
-        Enter: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? (0, import_utils6.funcAll)(onOpen, onFocusFirstOrSelected) : allowFree && isMulti ? () => {
+        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,
@@ -989,9 +1354,9 @@ var useAutocomplete = (props) => {
       onChange
     ]
   );
-  (0, import_react.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!isMulti) return;
-    if (!omitSelectedValues && (0, import_utils6.isUndefined)(maxSelectValues)) 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) {
@@ -1008,7 +1373,7 @@ var useAutocomplete = (props) => {
     onClose,
     maxSelectValues
   ]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     var _a;
     if (isMulti) {
       if (JSON.stringify((_a = prevValue.current) != null ? _a : []) === JSON.stringify(value != null ? value : []))
@@ -1020,18 +1385,18 @@ var useAutocomplete = (props) => {
       onChangeLabel(value, { runOmit: false });
     }
   }, [isMulti, value, onChangeLabel, getSelectedValues]);
-  (0, import_utils6.useUpdateEffect)(() => {
+  (0, import_utils11.useUpdateEffect)(() => {
     if (isOpen || allowFree) return;
     setFocusedIndex(-1);
     setInputValue("");
   }, [isOpen]);
-  (0, import_utils6.useUpdateEffect)(() => {
+  (0, import_utils11.useUpdateEffect)(() => {
     if (!isHit) setFocusedIndex(-2);
   }, [isHit]);
-  (0, import_utils6.useUpdateEffect)(() => {
+  (0, import_utils11.useUpdateEffect)(() => {
     setResolvedItems(items ? JSON.parse(JSON.stringify(items)) : void 0);
   }, [items]);
-  (0, import_utils6.useUnmountEffect)(() => {
+  (0, import_utils11.useUnmountEffect)(() => {
     timeoutIds.current.forEach((id2) => clearTimeout(id2));
     timeoutIds.current.clear();
   });
@@ -1040,7 +1405,7 @@ var useAutocomplete = (props) => {
     handler: onClose,
     enabled: isOpen && (closeOnBlur || !isHit)
   });
-  const getPopoverProps = (0, import_react.useCallback)(
+  const getPopoverProps = (0, import_react5.useCallback)(
     (props2) => ({
       closeOnBlur,
       openDelay,
@@ -1089,28 +1454,28 @@ var useAutocomplete = (props) => {
       onClose
     ]
   );
-  const getContainerProps = (0, import_react.useCallback)(
+  const getContainerProps = (0, import_react5.useCallback)(
     (props2 = {}, ref = null) => ({
-      ref: (0, import_utils6.mergeRefs)(containerRef, ref),
+      ref: (0, import_utils11.mergeRefs)(containerRef, ref),
       ...containerProps,
       ...props2,
       ...formControlProps,
-      onClick: (0, import_utils6.handlerAll)(props2.onClick, rest.onClick, onClick),
-      onBlur: (0, import_utils6.handlerAll)(props2.onBlur, rest.onBlur, onBlur)
+      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_react.useCallback)(
+  const getFieldProps = (0, import_react5.useCallback)(
     (props2 = {}, ref = null) => ({
       ref,
       tabIndex: -1,
       ...props2,
       ...formControlProps,
       placeholder,
-      "data-active": (0, import_utils6.dataAttr)(isOpen),
-      "aria-expanded": (0, import_utils6.dataAttr)(isOpen),
-      onFocus: (0, import_utils6.handlerAll)(props2.onFocus, onFocusProp, onFocus),
-      onKeyDown: (0, import_utils6.handlerAll)(props2.onKeyDown, onKeyDownProp, onKeyDown)
+      "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)
     }),
     [
       formControlProps,
@@ -1181,14 +1546,14 @@ var useAutocompleteInput = () => {
     listRef
   } = useAutocompleteContext();
   const { value } = useAutocompleteDescendantsContext();
-  (0, import_utils6.useUpdateEffect)(() => {
+  (0, import_utils11.useUpdateEffect)(() => {
     if (isAllSelected && inputRef.current) inputRef.current.blur();
   }, [isAllSelected]);
-  const getInputProps = (0, import_react.useCallback)(
+  const getInputProps = (0, import_react5.useCallback)(
     (props = {}, ref = null) => {
       var _a, _b;
       return {
-        ref: (0, import_utils6.mergeRefs)(inputRef, ref),
+        ref: (0, import_utils11.mergeRefs)(inputRef, ref),
         ...formControlProps,
         role: "combobox",
         "aria-haspopup": "listbox",
@@ -1205,13 +1570,13 @@ var useAutocompleteInput = () => {
         cursor: formControlProps.readOnly ? "default" : "text",
         pointerEvents: formControlProps.disabled || isAllSelected ? "none" : "auto",
         tabIndex: isAllSelected ? -1 : 0,
-        onChange: (0, import_utils6.handlerAll)(props.onChange, onSearch),
-        onCompositionStart: (0, import_utils6.handlerAll)(
+        onChange: (0, import_utils11.handlerAll)(props.onChange, onSearch),
+        onCompositionStart: (0, import_utils11.handlerAll)(
           props.onCompositionStart,
           inputProps.onCompositionStart,
           onCompositionStart
         ),
-        onCompositionEnd: (0, import_utils6.handlerAll)(
+        onCompositionEnd: (0, import_utils11.handlerAll)(
           props.onCompositionEnd,
           inputProps.onCompositionEnd,
           onCompositionEnd
@@ -1237,365 +1602,12 @@ var useAutocompleteInput = () => {
     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 });
-        } else {
-          listRef.current.scrollTo({ top: childBottom - parentHeight });
-        }
-      }
-    }
-    beforeFocusedIndex.current = selectedValue.index;
-  }, [listRef, selectedValue]);
-  (0, import_utils6.useUpdateEffect)(() => {
-    if (!isOpen) beforeFocusedIndex.current = -1;
-  }, [isOpen]);
-  const getListProps = (0, import_react.useCallback)(
-    (props = {}, ref = null) => ({
-      as: "ul",
-      ref: (0, import_utils6.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_utils6.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_utils6.splitObject)(rest, import_core6.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"
-      };
-    },
-    [containerProps, isEmpty, label]
-  );
-  const getGroupProps = (0, import_react.useCallback)(
-    (props = {}, ref = null) => ({
-      ref,
-      ...props,
-      ...groupProps,
-      "data-label": label,
-      role: "autocomplete-group"
-    }),
-    [groupProps, label]
-  );
-  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_utils6.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)(
-    (ev) => {
-      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);
-    },
-    [
-      onFocusNext,
-      omitSelectedValues,
-      isDisabled,
-      optionValue,
-      setFocusedIndex,
-      index,
-      onChange,
-      customCloseOnSelect,
-      generalCloseOnSelect,
-      onClose,
-      inputRef
-    ]
-  );
-  (0, import_utils6.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_utils6.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_utils6.dataAttr)(true),
-        "data-value": optionValue != null ? optionValue : "",
-        "data-focus": (0, import_utils6.dataAttr)(isFocused),
-        "data-disabled": (0, import_utils6.dataAttr)(isDisabled),
-        "aria-checked": isSelected,
-        "aria-disabled": (0, import_utils6.ariaAttr)(isDisabled),
-        onClick: (0, import_utils6.handlerAll)(computedProps.onClick, props2.onClick, onClick)
-      };
-    },
-    [
-      optionValue,
-      computedProps,
-      isDisabled,
-      isFocused,
-      isSelected,
-      isTarget,
-      omitSelectedValues,
-      onClick,
-      register
-    ]
-  );
-  return {
-    isSelected,
-    isFocused,
-    customIcon,
-    children,
-    getOptionProps
-  };
-};
-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_utils6.dataAttr)(!isHit),
-        onClick: (0, import_utils6.handlerAll)(props.onClick, onCreate)
-      };
-    },
-    [isHit, onCreate]
-  );
-  return { getCreateProps };
-};
-var useAutocompleteEmpty = () => {
-  const { isHit, isEmpty } = useAutocompleteContext();
-  const getEmptyProps = (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 && !isEmpty ? style : void 0
-      };
-    },
-    [isHit, isEmpty]
-  );
-  return { getEmptyProps };
-};
-
-// src/autocomplete-icon.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var AutocompleteIcon = (0, import_core7.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_utils7.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_runtime7.jsx)(
-      import_core7.ui.div,
-      {
-        ref,
-        className: (0, import_utils7.cx)("ui-autocomplete__icon", className),
-        __css: css,
-        ...rest,
-        children: (0, import_utils7.isValidElement)(children) ? cloneChildren : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icon.ChevronIcon, {})
-      }
-    );
-  }
-);
-var AutocompleteItemIcon = (0, import_core7.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_runtime7.jsx)(
-    import_core7.ui.span,
-    {
-      ref,
-      className: (0, import_utils7.cx)("ui-autocomplete__item__icon", className),
-      __css: css,
-      ...rest
-    }
-  );
-});
 
 // src/autocomplete.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var Autocomplete = (0, import_core8.forwardRef)(
+var Autocomplete = (0, import_core9.forwardRef)(
   (props, ref) => {
-    const [styles, mergedProps] = (0, import_core8.useMultiComponentStyle)("Autocomplete", props);
+    const [styles, mergedProps] = (0, import_core9.useComponentMultiStyle)("Autocomplete", props);
     let {
       className,
       defaultValue = "",
@@ -1617,7 +1629,7 @@ var Autocomplete = (0, import_core8.forwardRef)(
       footer,
       children,
       ...computedProps
-    } = (0, import_core8.omitThemeProps)(mergedProps);
+    } = (0, import_core9.omitThemeProps)(mergedProps);
     const {
       value,
       onClose,
@@ -1654,14 +1666,14 @@ var Autocomplete = (0, import_core8.forwardRef)(
           styles
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_popover2.Popover, { ...getPopoverProps(), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-          import_core8.ui.div,
+          import_core9.ui.div,
           {
-            className: (0, import_utils8.cx)("ui-autocomplete", className),
+            className: (0, import_utils12.cx)("ui-autocomplete", className),
             __css: css,
             ...getContainerProps(containerProps),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                import_core8.ui.div,
+                import_core9.ui.div,
                 {
                   className: "ui-autocomplete__inner",
                   __css: { position: "relative", ...styles.inner },
@@ -1682,8 +1694,8 @@ var Autocomplete = (0, import_core8.forwardRef)(
               !isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                 AutocompleteList,
                 {
-                  header: (0, import_utils8.runIfFunc)(header, { value, onClose }),
-                  footer: (0, import_utils8.runIfFunc)(footer, { value, onClose }),
+                  header: (0, import_utils12.runIfFunc)(header, { value, onClose }),
+                  footer: (0, import_utils12.runIfFunc)(footer, { value, onClose }),
                   contentProps,
                   ...listProps,
                   children: [
@@ -1694,8 +1706,8 @@ var Autocomplete = (0, import_core8.forwardRef)(
               ) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 AutocompleteList,
                 {
-                  header: (0, import_utils8.runIfFunc)(header, { value, onClose }),
-                  footer: (0, import_utils8.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_runtime8.jsx)(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteEmpty, { ...emptyProps })
@@ -1708,7 +1720,7 @@ var Autocomplete = (0, import_core8.forwardRef)(
     ) });
   }
 );
-var AutocompleteField = (0, import_core8.forwardRef)(
+var AutocompleteField = (0, import_core9.forwardRef)(
   ({ className, h, minH, placeholder, inputProps, ...rest }, ref) => {
     const { label, inputValue, styles } = useAutocompleteContext();
     const { getInputProps } = useAutocompleteInput();
@@ -1722,13 +1734,13 @@ var AutocompleteField = (0, import_core8.forwardRef)(
       cursor: "text"
     };
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_popover2.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      import_core8.ui.div,
+      import_core9.ui.div,
       {
-        className: (0, import_utils8.cx)("ui-autocomplete__field", className),
+        className: (0, import_utils12.cx)("ui-autocomplete__field", className),
         __css: css,
         ...rest,
         children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          import_core8.ui.input,
+          import_core9.ui.input,
           {
             className: "ui-autocomplete__field__input",
             display: "inline-block",