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

package/dist/chunk-ZD25NCFE.mjs

@@ -1,2038 +0,0 @@
-"use client"
-
-// src/autocomplete-list.tsx
-import { ui as ui8, forwardRef as forwardRef8 } from "@yamada-ui/core";
-import { PopoverContent } from "@yamada-ui/popover";
-import { cx as cx8, handlerAll as handlerAll3 } from "@yamada-ui/utils";
-
-// src/use-autocomplete.tsx
-import { layoutStyleProperties } from "@yamada-ui/core";
-import {
-  formControlProperties,
-  useFormControlProps
-} from "@yamada-ui/form-control";
-import { useControllableState } from "@yamada-ui/use-controllable-state";
-import { createDescendant } from "@yamada-ui/use-descendant";
-import { useDisclosure } from "@yamada-ui/use-disclosure";
-import { useOutsideClick } from "@yamada-ui/use-outside-click";
-import {
-  ariaAttr,
-  createContext,
-  dataAttr,
-  funcAll,
-  getEventRelatedTarget,
-  handlerAll as handlerAll2,
-  isArray,
-  isContains,
-  isHTMLElement,
-  mergeRefs,
-  pickObject,
-  splitObject,
-  useUnmountEffect,
-  useUpdateEffect,
-  getValidChildren as getValidChildren2,
-  isUndefined
-} from "@yamada-ui/utils";
-import { useCallback, useEffect, useId, useMemo as useMemo2, useRef as useRef2, useState } from "react";
-
-// src/autocomplete.tsx
-import {
-  ui as ui2,
-  forwardRef as forwardRef2,
-  useMultiComponentStyle,
-  omitThemeProps
-} from "@yamada-ui/core";
-import { Popover, PopoverTrigger } from "@yamada-ui/popover";
-import { Portal } from "@yamada-ui/portal";
-import { cx as cx2, runIfFunc } from "@yamada-ui/utils";
-
-// src/autocomplete-icon.tsx
-import { ui, forwardRef } from "@yamada-ui/core";
-import { ChevronIcon, CloseIcon } from "@yamada-ui/icon";
-import { useClickable } from "@yamada-ui/use-clickable";
-import { cx, getValidChildren, isValidElement } from "@yamada-ui/utils";
-import { cloneElement, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
-var AutocompleteIcon = 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 = getValidChildren(children);
-    const cloneChildren = validChildren.map(
-      (child) => cloneElement(child, {
-        focusable: false,
-        "aria-hidden": true,
-        style: {
-          maxWidth: "1em",
-          maxHeight: "1em",
-          color: "currentColor"
-        }
-      })
-    );
-    return /* @__PURE__ */ jsx(
-      ui.div,
-      {
-        ref,
-        className: cx("ui-autocomplete__icon", className),
-        __css: css,
-        ...rest,
-        children: isValidElement(children) ? cloneChildren : /* @__PURE__ */ jsx(ChevronIcon, {})
-      }
-    );
-  }
-);
-var AutocompleteClearIcon = ({
-  className,
-  children,
-  ...props
-}) => {
-  const ref = useRef(null);
-  const { styles } = useAutocompleteContext();
-  const isDisabled = props.disabled;
-  const rest = useClickable({
-    ref,
-    isDisabled,
-    ...props
-  });
-  return /* @__PURE__ */ jsx(
-    AutocompleteIcon,
-    {
-      "aria-label": "Clear value",
-      className: cx("ui-autocomplete__icon--clear", className),
-      __css: styles.clearIcon,
-      ...rest,
-      children: children != null ? children : /* @__PURE__ */ jsx(CloseIcon, { w: "0.5em", h: "0.5em" })
-    }
-  );
-};
-var AutocompleteItemIcon = 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__ */ jsx(
-    ui.span,
-    {
-      ref,
-      className: cx("ui-autocomplete__item__icon", className),
-      __css: css,
-      ...rest
-    }
-  );
-});
-
-// src/autocomplete.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var Autocomplete = forwardRef2(
-  (props, ref) => {
-    const [styles, mergedProps] = useMultiComponentStyle("Autocomplete", props);
-    let {
-      className,
-      defaultValue = "",
-      color,
-      h,
-      height,
-      minH,
-      minHeight,
-      containerProps,
-      contentProps,
-      listProps,
-      fieldProps,
-      inputProps,
-      iconProps,
-      portalProps = { isDisabled: true },
-      createProps,
-      emptyProps,
-      header,
-      footer,
-      children,
-      ...computedProps
-    } = omitThemeProps(mergedProps);
-    const {
-      value,
-      onClose,
-      descendants,
-      formControlProps,
-      getPopoverProps,
-      getContainerProps,
-      getFieldProps,
-      allowCreate,
-      isEmpty,
-      inputValue,
-      computedChildren,
-      ...rest
-    } = useAutocomplete({ ...computedProps, defaultValue, children });
-    h != null ? h : h = height;
-    minH != null ? minH : minH = minHeight;
-    const css = {
-      w: "100%",
-      h: "fit-content",
-      color,
-      ...styles.container
-    };
-    return /* @__PURE__ */ jsx2(AutocompleteDescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ jsx2(
-      AutocompleteProvider,
-      {
-        value: {
-          ...rest,
-          value,
-          onClose,
-          formControlProps,
-          inputValue,
-          allowCreate,
-          isEmpty,
-          styles
-        },
-        children: /* @__PURE__ */ jsx2(Popover, { ...getPopoverProps(), children: /* @__PURE__ */ jsxs(
-          ui2.div,
-          {
-            className: cx2("ui-autocomplete", className),
-            __css: css,
-            ...getContainerProps(containerProps),
-            children: [
-              /* @__PURE__ */ jsxs(
-                ui2.div,
-                {
-                  className: "ui-autocomplete__inner",
-                  __css: { position: "relative", ...styles.inner },
-                  children: [
-                    /* @__PURE__ */ jsx2(
-                      AutocompleteField,
-                      {
-                        h,
-                        minH,
-                        inputProps,
-                        ...getFieldProps(fieldProps, ref)
-                      }
-                    ),
-                    /* @__PURE__ */ jsx2(AutocompleteIcon, { ...iconProps, ...formControlProps })
-                  ]
-                }
-              ),
-              !isEmpty ? /* @__PURE__ */ jsx2(Portal, { ...portalProps, children: /* @__PURE__ */ jsxs(
-                AutocompleteList,
-                {
-                  header: runIfFunc(header, { value, onClose }),
-                  footer: runIfFunc(footer, { value, onClose }),
-                  contentProps,
-                  ...listProps,
-                  children: [
-                    allowCreate ? /* @__PURE__ */ jsx2(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ jsx2(AutocompleteEmpty, { ...emptyProps }),
-                    children != null ? children : computedChildren
-                  ]
-                }
-              ) }) : /* @__PURE__ */ jsx2(Portal, { ...portalProps, children: /* @__PURE__ */ jsx2(
-                AutocompleteList,
-                {
-                  header: runIfFunc(header, { value, onClose }),
-                  footer: runIfFunc(footer, { value, onClose }),
-                  contentProps,
-                  ...listProps,
-                  children: allowCreate && inputValue ? /* @__PURE__ */ jsx2(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ jsx2(AutocompleteEmpty, { ...emptyProps })
-                }
-              ) })
-            ]
-          }
-        ) })
-      }
-    ) });
-  }
-);
-var AutocompleteField = forwardRef2(
-  ({ className, h, minH, placeholder, inputProps, ...rest }, ref) => {
-    const { label, inputValue, styles } = useAutocompleteContext();
-    const { getInputProps } = useAutocompleteInput();
-    const css = {
-      pe: "2rem",
-      h,
-      minH,
-      display: "flex",
-      alignItems: "center",
-      ...styles.field,
-      cursor: "text"
-    };
-    return /* @__PURE__ */ jsx2(PopoverTrigger, { children: /* @__PURE__ */ jsx2(
-      ui2.div,
-      {
-        className: cx2("ui-autocomplete__field", className),
-        __css: css,
-        ...rest,
-        children: /* @__PURE__ */ jsx2(
-          ui2.input,
-          {
-            className: "ui-autocomplete__field__input",
-            display: "inline-block",
-            w: "100%",
-            placeholder,
-            ...getInputProps(
-              { ...inputProps, value: inputValue || label || "" },
-              ref
-            )
-          }
-        )
-      }
-    ) });
-  }
-);
-
-// src/autocomplete-option-group.tsx
-import { ui as ui3, forwardRef as forwardRef3 } from "@yamada-ui/core";
-import { cx as cx3 } from "@yamada-ui/utils";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var AutocompleteOptionGroup = forwardRef3(
-  ({ 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__ */ jsxs2(
-      ui3.li,
-      {
-        className: cx3(
-          "ui-autocomplete__item",
-          "ui-autocomplete__item--group",
-          className
-        ),
-        __css: { w: "100%", h: "fit-content", color },
-        ...getContainerProps(),
-        children: [
-          /* @__PURE__ */ jsx3(
-            ui3.span,
-            {
-              className: "ui-autocomplete__item__group-label",
-              __css: styles.groupLabel,
-              lineClamp: 1,
-              children: label
-            }
-          ),
-          /* @__PURE__ */ jsx3(
-            ui3.ul,
-            {
-              ...getGroupProps({}, ref),
-              className: "ui-autocomplete__item__group",
-              __css: { h, minH, ...styles.group },
-              children
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-
-// src/autocomplete-option.tsx
-import { ui as ui4, forwardRef as forwardRef4 } from "@yamada-ui/core";
-import { cx as cx4 } from "@yamada-ui/utils";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var AutocompleteOption = forwardRef4(
-  ({ 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__ */ jsxs3(
-      ui4.li,
-      {
-        className: cx4("ui-autocomplete__item", className),
-        __css: css,
-        ...getOptionProps({}, ref),
-        children: [
-          icon !== null ? /* @__PURE__ */ jsx4(AutocompleteItemIcon, { opacity: isSelected ? 1 : 0, children: icon || /* @__PURE__ */ jsx4(CheckIcon, {}) }) : null,
-          /* @__PURE__ */ jsx4(ui4.span, { style: { flex: 1 }, "data-label": true, children })
-        ]
-      }
-    );
-  }
-);
-var CheckIcon = () => /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ jsx4(
-  "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
-import { ui as ui5, forwardRef as forwardRef5 } from "@yamada-ui/core";
-import { cx as cx5, runIfFunc as runIfFunc2 } from "@yamada-ui/utils";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var AutocompleteCreate = forwardRef5(
-  ({ 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__ */ jsxs4(
-      ui5.li,
-      {
-        className: cx5("ui-autocomplete__item--create", className),
-        __css: css,
-        ...getCreateProps(rest, ref),
-        children: [
-          icon !== null ? /* @__PURE__ */ jsx5(AutocompleteItemIcon, { children: icon || /* @__PURE__ */ jsx5(PlusIcon, {}) }) : null,
-          icon ? /* @__PURE__ */ jsx5(ui5.span, { style: { pointerEvents: "none", flex: 1 }, lineClamp: 1, children: runIfFunc2(children, inputValue) }) : runIfFunc2(children, inputValue)
-        ]
-      }
-    );
-  }
-);
-var PlusIcon = () => /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 45.402 45.402", width: "1em", height: "1em", children: /* @__PURE__ */ jsx5(
-  "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
-import { ui as ui6, forwardRef as forwardRef6 } from "@yamada-ui/core";
-import { cx as cx6 } from "@yamada-ui/utils";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-var AutocompleteEmpty = forwardRef6(
-  ({ 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__ */ jsxs5(
-      ui6.li,
-      {
-        className: cx6("ui-autocomplete__item--empty", className),
-        __css: css,
-        ...getEmptyProps(rest, ref),
-        children: [
-          icon !== null ? /* @__PURE__ */ jsx6(AutocompleteItemIcon, { children: icon || /* @__PURE__ */ jsx6(MinusIcon, {}) }) : null,
-          icon ? /* @__PURE__ */ jsx6(ui6.span, { style: { pointerEvents: "none", flex: 1 }, lineClamp: 1, children }) : children
-        ]
-      }
-    );
-  }
-);
-var MinusIcon = () => /* @__PURE__ */ jsx6("svg", { viewBox: "0 0 448 512", width: "1em", height: "1em", children: /* @__PURE__ */ jsx6(
-  "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
-import {
-  ui as ui7,
-  forwardRef as forwardRef7,
-  useMultiComponentStyle as useMultiComponentStyle2,
-  omitThemeProps as omitThemeProps2
-} from "@yamada-ui/core";
-import { Popover as Popover2, PopoverTrigger as PopoverTrigger2 } from "@yamada-ui/popover";
-import { Portal as Portal2 } from "@yamada-ui/portal";
-import { cx as cx7, handlerAll, runIfFunc as runIfFunc3 } from "@yamada-ui/utils";
-import { cloneElement as cloneElement2, useMemo } from "react";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
-var MultiAutocomplete = forwardRef7(
-  (props, ref) => {
-    const [styles, mergedProps] = useMultiComponentStyle2(
-      "MultiAutocomplete",
-      props
-    );
-    let {
-      className,
-      defaultValue = [],
-      component,
-      separator,
-      isClearable = true,
-      color,
-      h,
-      height,
-      minH,
-      minHeight,
-      closeOnSelect = false,
-      keepPlaceholder = false,
-      containerProps,
-      contentProps,
-      listProps,
-      fieldProps,
-      inputProps,
-      iconProps,
-      clearIconProps,
-      portalProps = { isDisabled: true },
-      createProps,
-      emptyProps,
-      header,
-      footer,
-      children,
-      ...computedProps
-    } = omitThemeProps2(mergedProps);
-    const {
-      value,
-      onClose,
-      descendants,
-      formControlProps,
-      getPopoverProps,
-      getContainerProps,
-      getFieldProps,
-      allowCreate,
-      isEmpty,
-      inputValue,
-      computedChildren,
-      onClear,
-      ...rest
-    } = useAutocomplete({
-      ...computedProps,
-      defaultValue,
-      closeOnSelect,
-      children
-    });
-    h != null ? h : h = height;
-    minH != null ? minH : minH = minHeight;
-    const css = {
-      w: "100%",
-      h: "fit-content",
-      color,
-      ...styles.container
-    };
-    return /* @__PURE__ */ jsx7(AutocompleteDescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ jsx7(
-      AutocompleteProvider,
-      {
-        value: {
-          ...rest,
-          value,
-          onClose,
-          formControlProps,
-          inputValue,
-          allowCreate,
-          isEmpty,
-          styles
-        },
-        children: /* @__PURE__ */ jsx7(Popover2, { ...getPopoverProps(), children: /* @__PURE__ */ jsxs6(
-          ui7.div,
-          {
-            className: cx7("ui-multi-autocomplete", className),
-            __css: css,
-            ...getContainerProps(containerProps),
-            children: [
-              /* @__PURE__ */ jsxs6(
-                ui7.div,
-                {
-                  className: "ui-multi-autocomplete__inner",
-                  __css: { position: "relative", ...styles.inner },
-                  children: [
-                    /* @__PURE__ */ jsx7(
-                      MultiAutocompleteField,
-                      {
-                        component,
-                        separator,
-                        keepPlaceholder,
-                        h,
-                        minH,
-                        inputProps,
-                        ...getFieldProps(fieldProps, ref)
-                      }
-                    ),
-                    isClearable && value.length ? /* @__PURE__ */ jsx7(
-                      AutocompleteClearIcon,
-                      {
-                        ...clearIconProps,
-                        onClick: handlerAll(clearIconProps == null ? void 0 : clearIconProps.onClick, onClear),
-                        ...formControlProps
-                      }
-                    ) : /* @__PURE__ */ jsx7(AutocompleteIcon, { ...iconProps, ...formControlProps })
-                  ]
-                }
-              ),
-              !isEmpty ? /* @__PURE__ */ jsx7(Portal2, { ...portalProps, children: /* @__PURE__ */ jsxs6(
-                AutocompleteList,
-                {
-                  header: runIfFunc3(header, { value, onClose }),
-                  footer: runIfFunc3(footer, { value, onClose }),
-                  contentProps,
-                  ...listProps,
-                  children: [
-                    allowCreate ? /* @__PURE__ */ jsx7(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ jsx7(AutocompleteEmpty, { ...emptyProps }),
-                    children != null ? children : computedChildren
-                  ]
-                }
-              ) }) : /* @__PURE__ */ jsx7(Portal2, { ...portalProps, children: /* @__PURE__ */ jsx7(
-                AutocompleteList,
-                {
-                  header: runIfFunc3(header, { value, onClose }),
-                  footer: runIfFunc3(footer, { value, onClose }),
-                  contentProps,
-                  ...listProps,
-                  children: allowCreate && inputValue ? /* @__PURE__ */ jsx7(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ jsx7(AutocompleteEmpty, { ...emptyProps })
-                }
-              ) })
-            ]
-          }
-        ) })
-      }
-    ) });
-  }
-);
-var MultiAutocompleteField = forwardRef7(
-  ({
-    className,
-    component,
-    separator = ",",
-    keepPlaceholder,
-    h,
-    minH,
-    placeholder,
-    inputProps,
-    ...rest
-  }, ref) => {
-    const { value, label, inputValue, onChange, isOpen, inputRef, styles } = useAutocompleteContext();
-    const { getInputProps } = useAutocompleteInput();
-    const cloneChildren = useMemo(() => {
-      if (!(label == null ? void 0 : label.length)) return null;
-      if (component) {
-        return label.map((label2, index) => {
-          const onRemove = (ev) => {
-            ev.stopPropagation();
-            onChange(value[index]);
-            if (inputRef.current) inputRef.current.focus();
-          };
-          const el = component({
-            value: value[index],
-            label: label2,
-            index,
-            onRemove
-          });
-          const style = {
-            marginBlockStart: "0.125rem",
-            marginBlockEnd: "0.125rem",
-            marginInlineEnd: "0.25rem"
-          };
-          return el ? cloneElement2(el, { key: index, style }) : null;
-        });
-      } else {
-        return label.map((value2, index) => {
-          const isLast = label.length === index + 1;
-          return /* @__PURE__ */ jsxs6(ui7.span, { display: "inline-block", me: "0.25rem", children: [
-            value2,
-            !isLast || isOpen ? separator : null
-          ] }, index);
-        });
-      }
-    }, [label, component, value, onChange, isOpen, inputRef, separator]);
-    const css = {
-      pe: "2rem",
-      h,
-      minH,
-      display: "flex",
-      flexWrap: "wrap",
-      alignItems: "center",
-      ...styles.field,
-      cursor: "text"
-    };
-    return /* @__PURE__ */ jsx7(PopoverTrigger2, { children: /* @__PURE__ */ jsxs6(
-      ui7.div,
-      {
-        className: cx7("ui-multi-autocomplete__field", className),
-        __css: css,
-        py: (label == null ? void 0 : label.length) && component ? "0.125rem" : void 0,
-        ...rest,
-        children: [
-          cloneChildren,
-          /* @__PURE__ */ jsx7(
-            ui7.input,
-            {
-              "aria-label": "Input value",
-              className: "ui-multi-autocomplete__field__input",
-              display: "inline-block",
-              flex: "1",
-              minW: "0px",
-              overflow: "hidden",
-              marginBlockStart: "0.125rem",
-              marginBlockEnd: "0.125rem",
-              "aria-multiselectable": "true",
-              placeholder: !label || !(label == null ? void 0 : label.length) || keepPlaceholder && isOpen ? placeholder : void 0,
-              ...getInputProps({ ...inputProps, value: inputValue != null ? inputValue : "" }, ref)
-            }
-          )
-        ]
-      }
-    ) });
-  }
-);
-
-// src/use-autocomplete.tsx
-import { jsx as jsx8 } from "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 isTargetOption = (target) => {
-  var _a;
-  return 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
-} = createDescendant();
-var [AutocompleteProvider, useAutocompleteContext] = 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,
-    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
-  } = useFormControlProps(props);
-  const {
-    "aria-readonly": _ariaReadonly,
-    onFocus: onFocusProp,
-    ...formControlProps
-  } = pickObject(rest, formControlProperties);
-  const [containerProps, inputProps] = splitObject(rest, layoutStyleProperties);
-  const { id } = rest;
-  const descendants = useAutocompleteDescendants();
-  const containerRef = useRef2(null);
-  const listRef = useRef2(null);
-  const inputRef = useRef2(null);
-  const timeoutIds = useRef2(/* @__PURE__ */ new Set([]));
-  const isComposition = useRef2(false);
-  const prevValue = useRef2(void 0);
-  const [resolvedItems, setResolvedItems] = useState(items ? JSON.parse(JSON.stringify(items)) : void 0);
-  const [value, setValue] = useControllableState({
-    value: valueProp,
-    defaultValue,
-    onChange: onChangeProp
-  });
-  const [label, setLabel] = useState(void 0);
-  const [inputValue, setInputValue] = useState("");
-  const [focusedIndex, setFocusedIndex] = useState(-1);
-  const [isAllSelected, setIsAllSelected] = useState(false);
-  const [isHit, setIsHit] = useState(true);
-  const {
-    isOpen,
-    onOpen: onInternalOpen,
-    onClose
-  } = useDisclosure({
-    isOpen: isOpenProp,
-    defaultIsOpen,
-    onOpen: onOpenProp,
-    onClose: onCloseProp
-  });
-  const isFocused = focusedIndex > -1;
-  const isCreate = focusedIndex === -2 && allowCreate;
-  const isMulti = isArray(value);
-  const isEmptyValue = !isMulti ? !value : !value.length;
-  const [firstInsertPositionItem, secondInsertPositionItem] = useMemo2(() => {
-    if (isArray(insertPositionItem)) {
-      return insertPositionItem;
-    } else {
-      return [insertPositionItem, "first"];
-    }
-  }, [insertPositionItem]);
-  if (allowCreate && !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 = getValidChildren2(children);
-  const computedChildren = useMemo2(
-    () => resolvedItems == null ? void 0 : resolvedItems.map((item, i) => {
-      if ("value" in item) {
-        const { label: label2, value: value2, ...props2 } = item;
-        return /* @__PURE__ */ jsx8(AutocompleteOption, { value: value2, ...props2, children: label2 }, i);
-      } else if ("items" in item) {
-        const { label: label2, items: items2 = [], ...props2 } = item;
-        return /* @__PURE__ */ jsx8(
-          AutocompleteOptionGroup,
-          {
-            label: label2,
-            ...props2,
-            children: items2.map(({ label: label3, value: value2, ...props3 }, i2) => /* @__PURE__ */ jsx8(AutocompleteOption, { value: value2, ...props3, children: label3 }, i2))
-          },
-          i
-        );
-      }
-    }),
-    [resolvedItems]
-  );
-  const isEmpty = !validChildren.length && !(computedChildren == null ? void 0 : computedChildren.length);
-  const onOpen = 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 = 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);
-  }, [
-    descendants,
-    enabledValues,
-    isAllSelected,
-    isEmpty,
-    isMulti,
-    omitSelectedValues,
-    selectedIndexes
-  ]);
-  const onFocusLast = 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);
-        }
-      }
-    });
-    timeoutIds.current.add(id2);
-  }, [
-    descendants,
-    enabledValues,
-    isAllSelected,
-    isEmpty,
-    isMulti,
-    omitSelectedValues,
-    selectedIndexes
-  ]);
-  const onFocusSelected = 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 = 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);
-    },
-    [
-      descendants,
-      enabledValues,
-      focusedIndex,
-      isMulti,
-      omitSelectedValues,
-      selectedIndexes
-    ]
-  );
-  const onFocusPrev = 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);
-    },
-    [
-      descendants,
-      enabledValues,
-      focusedIndex,
-      isMulti,
-      omitSelectedValues,
-      selectedIndexes
-    ]
-  );
-  const onFocusFirstOrSelected = isEmptyValue || omitSelectedValues ? onFocusFirst : onFocusSelected;
-  const onFocusLastOrSelected = isEmptyValue || omitSelectedValues ? onFocusLast : onFocusSelected;
-  const pickOptions = 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 = useCallback(
-    (runFocus = true) => {
-      const values = descendants.values();
-      values.forEach(({ node }) => {
-        node.dataset.target = "";
-      });
-      if (runFocus) onFocusFirst();
-      setIsHit(true);
-    },
-    [descendants, onFocusFirst]
-  );
-  const getSelectedValues = useCallback(
-    (newValues) => {
-      const enabledValues2 = descendants.enabledValues();
-      const resolvedValues = 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 = 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 = isArray(prev) && prev.includes(selectedValue != null ? selectedValue : "");
-            if (!isSelected) {
-              prev = [...isArray(prev) ? prev : [], selectedValue];
-            } else if (runOmit) {
-              prev = isArray(prev) ? prev.filter((value2) => value2 !== selectedValue) : void 0;
-            }
-          });
-          return prev;
-        }
-      });
-    },
-    [getSelectedValues, isMulti]
-  );
-  const onChange = useCallback(
-    (newValue, { forceUpdate, runRebirth = true } = {}) => {
-      setValue((prev) => {
-        let next;
-        if (!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);
-    },
-    [
-      allowFree,
-      isMulti,
-      onChangeLabel,
-      rebirthOptions,
-      setValue,
-      descendants,
-      format
-    ]
-  );
-  const onSelect = 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,
-    focusedIndex,
-    omitSelectedValues,
-    onChange,
-    onClose,
-    onFocusNext
-  ]);
-  const onSearch = 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 = useCallback(() => {
-    isComposition.current = true;
-  }, []);
-  const onCompositionEnd = useCallback(() => {
-    isComposition.current = false;
-  }, []);
-  const onCreate = 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 {
-          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.`
-        );
-      }
-    }
-    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 = useCallback(() => {
-    if (isOpen) {
-      if (inputRef.current) inputRef.current.focus();
-    } else {
-      onOpen();
-      onFocusFirstOrSelected();
-    }
-  }, [isOpen, onFocusFirstOrSelected, onOpen]);
-  const onFocus = useCallback(() => {
-    if (isOpen) return;
-    onOpen();
-    onFocusFirstOrSelected();
-  }, [isOpen, onFocusFirstOrSelected, onOpen]);
-  const onBlur = useCallback(
-    (ev) => {
-      const relatedTarget = getEventRelatedTarget(ev);
-      if (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 = useCallback(() => {
-    if (!isMulti) {
-      onChange("", { forceUpdate: true });
-    } else {
-      onChange(value[value.length - 1]);
-    }
-    if (!isOpen) onFocus();
-  }, [isMulti, isOpen, onChange, onFocus, value]);
-  const onClear = 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 = 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 ? funcAll(onOpen, onFocusFirstOrSelected) : void 0,
-        ArrowUp: isFocused ? () => onFocusPrev() : !isOpen ? funcAll(onOpen, onFocusLastOrSelected) : void 0,
-        Space: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? funcAll(onOpen, onFocusFirstOrSelected) : void 0,
-        Enter: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? 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);
-    },
-    [
-      allowFree,
-      formControlProps,
-      label,
-      inputValue,
-      onOpen,
-      isFocused,
-      isMulti,
-      onFocusFirstOrSelected,
-      onFocusNext,
-      onFocusLastOrSelected,
-      onFocusPrev,
-      isCreate,
-      onCreate,
-      onSelect,
-      isOpen,
-      onFocusFirst,
-      onFocusLast,
-      closeOnEsc,
-      onClose,
-      isEmptyValue,
-      onDelete,
-      onChange
-    ]
-  );
-  useEffect(() => {
-    if (!isMulti) return;
-    if (!omitSelectedValues && 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
-  ]);
-  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]);
-  useUpdateEffect(() => {
-    if (isOpen || allowFree) return;
-    setFocusedIndex(-1);
-    setInputValue("");
-  }, [isOpen]);
-  useUpdateEffect(() => {
-    if (!isHit) setFocusedIndex(-2);
-  }, [isHit]);
-  useUpdateEffect(() => {
-    setResolvedItems(items ? JSON.parse(JSON.stringify(items)) : void 0);
-  }, [items]);
-  useUnmountEffect(() => {
-    timeoutIds.current.forEach((id2) => clearTimeout(id2));
-    timeoutIds.current.clear();
-  });
-  useOutsideClick({
-    ref: containerRef,
-    handler: onClose,
-    enabled: isOpen && (closeOnBlur || !isHit)
-  });
-  const getPopoverProps = 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
-    ]
-  );
-  const getContainerProps = useCallback(
-    (props2 = {}, ref = null) => ({
-      ref: mergeRefs(containerRef, ref),
-      ...containerProps,
-      ...props2,
-      ...formControlProps,
-      onClick: handlerAll2(props2.onClick, rest.onClick, onClick),
-      onBlur: handlerAll2(props2.onBlur, rest.onBlur, onBlur)
-    }),
-    [containerProps, formControlProps, onBlur, onClick, rest]
-  );
-  const getFieldProps = useCallback(
-    (props2 = {}, ref = null) => ({
-      ref,
-      tabIndex: -1,
-      ...props2,
-      ...formControlProps,
-      placeholder,
-      "data-active": dataAttr(isOpen),
-      "aria-expanded": dataAttr(isOpen),
-      onFocus: handlerAll2(props2.onFocus, onFocusProp, onFocus),
-      onKeyDown: handlerAll2(props2.onKeyDown, onKeyDownProp, onKeyDown)
-    }),
-    [
-      formControlProps,
-      placeholder,
-      isOpen,
-      onFocusProp,
-      onFocus,
-      onKeyDownProp,
-      onKeyDown
-    ]
-  );
-  return {
-    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 useAutocompleteInput = () => {
-  const {
-    id,
-    inputRef,
-    onSearch,
-    onCompositionStart,
-    onCompositionEnd,
-    isAllSelected,
-    formControlProps,
-    inputProps,
-    isOpen,
-    focusedIndex,
-    listRef
-  } = useAutocompleteContext();
-  const { value } = useAutocompleteDescendantsContext();
-  useUpdateEffect(() => {
-    if (isAllSelected && inputRef.current) inputRef.current.blur();
-  }, [isAllSelected]);
-  const getInputProps = useCallback(
-    (props = {}, ref = null) => {
-      var _a, _b;
-      return {
-        ref: 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: handlerAll2(props.onChange, onSearch),
-        onCompositionStart: handlerAll2(
-          props.onCompositionStart,
-          inputProps.onCompositionStart,
-          onCompositionStart
-        ),
-        onCompositionEnd: handlerAll2(
-          props.onCompositionEnd,
-          inputProps.onCompositionEnd,
-          onCompositionEnd
-        )
-      };
-    },
-    [
-      listRef,
-      focusedIndex,
-      isOpen,
-      inputProps,
-      inputRef,
-      formControlProps,
-      id,
-      isAllSelected,
-      value,
-      onSearch,
-      onCompositionStart,
-      onCompositionEnd
-    ]
-  );
-  return {
-    getInputProps
-  };
-};
-var useAutocompleteList = () => {
-  const { focusedIndex, isOpen, listRef, rebirthOptions } = useAutocompleteContext();
-  const descendants = useAutocompleteDescendantsContext();
-  const beforeFocusedIndex = useRef2(-1);
-  const selectedValue = descendants.value(focusedIndex);
-  const onAnimationComplete = useCallback(() => {
-    if (!isOpen) rebirthOptions(false);
-  }, [isOpen, rebirthOptions]);
-  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]);
-  useUpdateEffect(() => {
-    if (!isOpen) beforeFocusedIndex.current = -1;
-  }, [isOpen]);
-  const getListProps = useCallback(
-    (props = {}, ref = null) => ({
-      as: "ul",
-      ref: mergeRefs(listRef, ref),
-      role: "listbox",
-      tabIndex: -1,
-      position: "relative",
-      id: props.id || useId(),
-      ...props
-    }),
-    [listRef]
-  );
-  return {
-    onAnimationComplete,
-    getListProps
-  };
-};
-var useAutocompleteOptionGroup = ({
-  label,
-  ...rest
-}) => {
-  const { value, omitSelectedValues } = useAutocompleteContext();
-  const isMulti = 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] = splitObject(rest, layoutStyleProperties);
-  const getContainerProps = 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 = 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 = useRef2(null);
-  const { index, register, descendants } = useAutocompleteDescendant({
-    disabled: trulyDisabled
-  });
-  const values = descendants.values();
-  const frontValues = values.slice(0, index);
-  const isMulti = 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 = 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
-    ]
-  );
-  useUpdateEffect(() => {
-    if (isSelected) onChangeLabel(optionValue != null ? optionValue : "", { runOmit: false });
-  }, [optionValue]);
-  const getOptionProps = 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: mergeRefs(itemRef, ref, register),
-        id: useId(),
-        role: "option",
-        ...computedProps,
-        ...props2,
-        tabIndex: -1,
-        style: !isTarget || omitSelectedValues && isSelected ? style : void 0,
-        "data-target": dataAttr(true),
-        "data-value": optionValue != null ? optionValue : "",
-        "data-focus": dataAttr(isFocused),
-        "data-disabled": dataAttr(isDisabled),
-        "aria-checked": isSelected,
-        "aria-disabled": ariaAttr(isDisabled),
-        onClick: handlerAll2(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 = 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": dataAttr(!isHit),
-        onClick: handlerAll2(props.onClick, onCreate)
-      };
-    },
-    [isHit, onCreate]
-  );
-  return { getCreateProps };
-};
-var useAutocompleteEmpty = () => {
-  const { isHit, isEmpty } = useAutocompleteContext();
-  const getEmptyProps = 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-list.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
-var AutocompleteList = forwardRef8(
-  ({
-    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__ */ jsxs7(
-      PopoverContent,
-      {
-        as: "div",
-        className: "ui-autocomplete__popover",
-        width,
-        minWidth,
-        maxWidth,
-        __css: { ...styles.content, width, minWidth, maxWidth },
-        ...contentProps,
-        onAnimationComplete: handlerAll3(
-          contentProps == null ? void 0 : contentProps.onAnimationComplete,
-          onAnimationComplete
-        ),
-        children: [
-          header ? /* @__PURE__ */ jsx9(
-            ui8.div,
-            {
-              className: "ui-autocomplete__header",
-              __css: { ...styles.header },
-              children: header
-            }
-          ) : null,
-          /* @__PURE__ */ jsx9(
-            ui8.ul,
-            {
-              className: cx8("ui-autocomplete__list", className),
-              __css: { ...styles.list },
-              ...getListProps(rest, ref),
-              children
-            }
-          ),
-          footer ? /* @__PURE__ */ jsx9(
-            ui8.div,
-            {
-              className: "ui-autocomplete__footer",
-              __css: { ...styles.footer },
-              children: footer
-            }
-          ) : null
-        ]
-      }
-    );
-  }
-);
-
-export {
-  AutocompleteList,
-  Autocomplete,
-  AutocompleteOptionGroup,
-  AutocompleteOption,
-  AutocompleteEmpty,
-  MultiAutocomplete,
-  AutocompleteDescendantsContextProvider,
-  useAutocompleteDescendantsContext,
-  useAutocompleteDescendants,
-  useAutocompleteDescendant,
-  AutocompleteProvider,
-  useAutocompleteContext,
-  useAutocomplete,
-  useAutocompleteInput,
-  useAutocompleteList,
-  useAutocompleteOptionGroup,
-  useAutocompleteOption,
-  useAutocompleteCreate,
-  useAutocompleteEmpty,
-  AutocompleteIcon,
-  AutocompleteClearIcon,
-  AutocompleteItemIcon,
-  AutocompleteCreate
-};
-//# sourceMappingURL=chunk-ZD25NCFE.mjs.map