@yamada-ui/autocomplete 0.4.10 → 0.4.12

package/dist/autocomplete-create.js

@@ -115,7 +115,7 @@ var AutocompleteIcon = (0, import_core2.forwardRef)(
       import_core2.ui.div,
       {
         ref,
-        className: (0, import_utils2.cx)("ui-autocomplete-icon", className),
+        className: (0, import_utils2.cx)("ui-autocomplete__icon", className),
         __css: css,
         ...rest,
         children: (0, import_utils2.isValidElement)(children) ? cloneChildren : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icon.ChevronIcon, {})
@@ -137,7 +137,7 @@ var AutocompleteItemIcon = (0, import_core2.forwardRef)(({ className, ...rest },
     import_core2.ui.span,
     {
       ref,
-      className: (0, import_utils2.cx)("ui-autocomplete-item-icon", className),
+      className: (0, import_utils2.cx)("ui-autocomplete__item__icon", className),
       __css: css,
       ...rest
     }
@@ -167,7 +167,7 @@ var AutocompleteCreate = (0, import_core3.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       import_core3.ui.li,
       {
-        className: (0, import_utils3.cx)("ui-autocomplete-create", className),
+        className: (0, import_utils3.cx)("ui-autocomplete__item--create", className),
         __css: css,
         ...getCreateProps(rest, ref),
         children: [

package/dist/autocomplete-create.mjs

@@ -1,7 +1,7 @@
 "use client"
 import {
   AutocompleteCreate
-} from "./chunk-2GZO4Q4I.mjs";
+} from "./chunk-EFOFI4S7.mjs";
 export {
   AutocompleteCreate
 };

package/dist/autocomplete-empty.js

@@ -113,7 +113,7 @@ var AutocompleteIcon = (0, import_core2.forwardRef)(
       import_core2.ui.div,
       {
         ref,
-        className: (0, import_utils2.cx)("ui-autocomplete-icon", className),
+        className: (0, import_utils2.cx)("ui-autocomplete__icon", className),
         __css: css,
         ...rest,
         children: (0, import_utils2.isValidElement)(children) ? cloneChildren : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icon.ChevronIcon, {})
@@ -135,7 +135,7 @@ var AutocompleteItemIcon = (0, import_core2.forwardRef)(({ className, ...rest },
     import_core2.ui.span,
     {
       ref,
-      className: (0, import_utils2.cx)("ui-autocomplete-item-icon", className),
+      className: (0, import_utils2.cx)("ui-autocomplete__item__icon", className),
       __css: css,
       ...rest
     }
@@ -166,7 +166,7 @@ var AutocompleteEmpty = (0, import_core3.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       import_core3.ui.li,
       {
-        className: (0, import_utils3.cx)("ui-autocomplete-empty", className),
+        className: (0, import_utils3.cx)("ui-autocomplete__item--empty", className),
         __css: css,
         ...getEmptyProps(rest, ref),
         children: [

package/dist/autocomplete-empty.mjs

@@ -1,7 +1,7 @@
 "use client"
 import {
   AutocompleteEmpty
-} from "./chunk-2GZO4Q4I.mjs";
+} from "./chunk-EFOFI4S7.mjs";
 export {
   AutocompleteEmpty
 };

package/dist/autocomplete-icon.js

@@ -85,7 +85,7 @@ var AutocompleteIcon = (0, import_core2.forwardRef)(
       import_core2.ui.div,
       {
         ref,
-        className: (0, import_utils2.cx)("ui-autocomplete-icon", className),
+        className: (0, import_utils2.cx)("ui-autocomplete__icon", className),
         __css: css,
         ...rest,
         children: (0, import_utils2.isValidElement)(children) ? cloneChildren : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icon.ChevronIcon, {})
@@ -109,7 +109,7 @@ var AutocompleteClearIcon = ({
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     AutocompleteIcon,
     {
-      className: (0, import_utils2.cx)("ui-autocomplete-clear-icon", className),
+      className: (0, import_utils2.cx)("ui-autocomplete__icon--clear", className),
       __css: styles.clearIcon,
       ...rest,
       children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icon.CloseIcon, { w: "0.5em", h: "0.5em" })
@@ -130,7 +130,7 @@ var AutocompleteItemIcon = (0, import_core2.forwardRef)(({ className, ...rest },
     import_core2.ui.span,
     {
       ref,
-      className: (0, import_utils2.cx)("ui-autocomplete-item-icon", className),
+      className: (0, import_utils2.cx)("ui-autocomplete__item__icon", className),
       __css: css,
       ...rest
     }

package/dist/autocomplete-icon.mjs

@@ -3,7 +3,7 @@ import {
   AutocompleteClearIcon,
   AutocompleteIcon,
   AutocompleteItemIcon
-} from "./chunk-2GZO4Q4I.mjs";
+} from "./chunk-EFOFI4S7.mjs";
 export {
   AutocompleteClearIcon,
   AutocompleteIcon,

package/dist/autocomplete-list.js

@@ -120,7 +120,7 @@ var AutocompleteList = (0, import_core2.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       import_popover.PopoverContent,
       {
-        className: (0, import_utils2.cx)("ui-autocomplete-list", className),
+        className: (0, import_utils2.cx)("ui-autocomplete__list", className),
         w,
         minW,
         __css: css,

package/dist/autocomplete-list.mjs

@@ -1,7 +1,7 @@
 "use client"
 import {
   AutocompleteList
-} from "./chunk-2GZO4Q4I.mjs";
+} from "./chunk-EFOFI4S7.mjs";
 export {
   AutocompleteList
 };

package/dist/autocomplete-option-group.js

@@ -121,14 +121,18 @@ var AutocompleteOptionGroup = (0, import_core2.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       import_core2.ui.li,
       {
-        className: "ui-autocomplete-group-container",
+        className: (0, import_utils2.cx)(
+          "ui-autocomplete__item",
+          "ui-autocomplete__item--group",
+          className
+        ),
         __css: { w: "100%", h: "fit-content", color },
         ...getContainerProps(),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             import_core2.ui.span,
             {
-              className: (0, import_utils2.cx)("ui-autocomplete-group-label"),
+              className: (0, import_utils2.cx)("ui-autocomplete__item__group-label"),
               __css: styles.groupLabel,
               noOfLines: 1,
               children: label
@@ -138,7 +142,7 @@ var AutocompleteOptionGroup = (0, import_core2.forwardRef)(
             import_core2.ui.ul,
             {
               ...getGroupProps({}, ref),
-              className: (0, import_utils2.cx)("ui-autocomplete-group", className),
+              className: (0, import_utils2.cx)("ui-autocomplete__item__group", className),
               __css: { h, minH, ...styles.group },
               children
             }

package/dist/autocomplete-option-group.mjs

@@ -1,7 +1,7 @@
 "use client"
 import {
   AutocompleteOptionGroup
-} from "./chunk-2GZO4Q4I.mjs";
+} from "./chunk-EFOFI4S7.mjs";
 export {
   AutocompleteOptionGroup
 };

package/dist/autocomplete-option.js

@@ -222,7 +222,7 @@ var AutocompleteIcon = (0, import_core2.forwardRef)(
       import_core2.ui.div,
       {
         ref,
-        className: (0, import_utils2.cx)("ui-autocomplete-icon", className),
+        className: (0, import_utils2.cx)("ui-autocomplete__icon", className),
         __css: css,
         ...rest,
         children: (0, import_utils2.isValidElement)(children) ? cloneChildren : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icon.ChevronIcon, {})
@@ -244,7 +244,7 @@ var AutocompleteItemIcon = (0, import_core2.forwardRef)(({ className, ...rest },
     import_core2.ui.span,
     {
       ref,
-      className: (0, import_utils2.cx)("ui-autocomplete-item-icon", className),
+      className: (0, import_utils2.cx)("ui-autocomplete__item__icon", className),
       __css: css,
       ...rest
     }
@@ -274,7 +274,7 @@ var AutocompleteOption = (0, import_core3.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       import_core3.ui.li,
       {
-        className: (0, import_utils3.cx)("ui-autocomplete-item", className),
+        className: (0, import_utils3.cx)("ui-autocomplete__item", className),
         __css: css,
         ...getOptionProps({}, ref),
         children: [

package/dist/autocomplete-option.mjs

@@ -1,7 +1,7 @@
 "use client"
 import {
   AutocompleteOption
-} from "./chunk-2GZO4Q4I.mjs";
+} from "./chunk-EFOFI4S7.mjs";
 export {
   AutocompleteOption
 };

package/dist/autocomplete.js

@@ -57,14 +57,18 @@ var AutocompleteOptionGroup = (0, import_core.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_core.ui.li,
       {
-        className: "ui-autocomplete-group-container",
+        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: (0, import_utils.cx)("ui-autocomplete-group-label"),
+              className: (0, import_utils.cx)("ui-autocomplete__item__group-label"),
               __css: styles.groupLabel,
               noOfLines: 1,
               children: label
@@ -74,7 +78,7 @@ var AutocompleteOptionGroup = (0, import_core.forwardRef)(
             import_core.ui.ul,
             {
               ...getGroupProps({}, ref),
-              className: (0, import_utils.cx)("ui-autocomplete-group", className),
+              className: (0, import_utils.cx)("ui-autocomplete__item__group", className),
               __css: { h, minH, ...styles.group },
               children
             }
@@ -110,7 +114,7 @@ var AutocompleteOption = (0, import_core2.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       import_core2.ui.li,
       {
-        className: (0, import_utils2.cx)("ui-autocomplete-item", className),
+        className: (0, import_utils2.cx)("ui-autocomplete__item", className),
         __css: css,
         ...getOptionProps({}, ref),
         children: [
@@ -154,7 +158,7 @@ var AutocompleteCreate = (0, import_core3.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       import_core3.ui.li,
       {
-        className: (0, import_utils3.cx)("ui-autocomplete-create", className),
+        className: (0, import_utils3.cx)("ui-autocomplete__item--create", className),
         __css: css,
         ...getCreateProps(rest, ref),
         children: [
@@ -199,7 +203,7 @@ var AutocompleteEmpty = (0, import_core4.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       import_core4.ui.li,
       {
-        className: (0, import_utils4.cx)("ui-autocomplete-empty", className),
+        className: (0, import_utils4.cx)("ui-autocomplete__item--empty", className),
         __css: css,
         ...getEmptyProps(rest, ref),
         children: [
@@ -234,7 +238,7 @@ var AutocompleteList = (0, import_core5.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       import_popover.PopoverContent,
       {
-        className: (0, import_utils5.cx)("ui-autocomplete-list", className),
+        className: (0, import_utils5.cx)("ui-autocomplete__list", className),
         w,
         minW,
         __css: css,
@@ -1412,7 +1416,7 @@ var AutocompleteIcon = (0, import_core7.forwardRef)(
       import_core7.ui.div,
       {
         ref,
-        className: (0, import_utils7.cx)("ui-autocomplete-icon", className),
+        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, {})
@@ -1434,7 +1438,7 @@ var AutocompleteItemIcon = (0, import_core7.forwardRef)(({ className, ...rest },
     import_core7.ui.span,
     {
       ref,
-      className: (0, import_utils7.cx)("ui-autocomplete-item-icon", className),
+      className: (0, import_utils7.cx)("ui-autocomplete__item__icon", className),
       __css: css,
       ...rest
     }
@@ -1537,13 +1541,13 @@ var AutocompleteField = (0, import_core8.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_popover2.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       import_core8.ui.div,
       {
-        className: (0, import_utils8.cx)("ui-autocomplete-field", className),
+        className: (0, import_utils8.cx)("ui-autocomplete__field", className),
         __css: css,
         ...rest,
         children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           import_core8.ui.input,
           {
-            className: "ui-autocomplete-input",
+            className: "ui-autocomplete__field__input",
             display: "inline-block",
             w: "full",
             placeholder,

package/dist/autocomplete.mjs

@@ -1,7 +1,7 @@
 "use client"
 import {
   Autocomplete
-} from "./chunk-2GZO4Q4I.mjs";
+} from "./chunk-EFOFI4S7.mjs";
 export {
   Autocomplete
 };

package/dist/{chunk-2GZO4Q4I.mjs → chunk-EFOFI4S7.mjs}

@@ -93,7 +93,7 @@ var AutocompleteIcon = forwardRef(
       ui.div,
       {
         ref,
-        className: cx("ui-autocomplete-icon", className),
+        className: cx("ui-autocomplete__icon", className),
         __css: css,
         ...rest,
         children: isValidElement(children) ? cloneChildren : /* @__PURE__ */ jsx(ChevronIcon, {})
@@ -117,7 +117,7 @@ var AutocompleteClearIcon = ({
   return /* @__PURE__ */ jsx(
     AutocompleteIcon,
     {
-      className: cx("ui-autocomplete-clear-icon", className),
+      className: cx("ui-autocomplete__icon--clear", className),
       __css: styles.clearIcon,
       ...rest,
       children: children != null ? children : /* @__PURE__ */ jsx(CloseIcon, { w: "0.5em", h: "0.5em" })
@@ -138,7 +138,7 @@ var AutocompleteItemIcon = forwardRef(({ className, ...rest }, ref) => {
     ui.span,
     {
       ref,
-      className: cx("ui-autocomplete-item-icon", className),
+      className: cx("ui-autocomplete__item__icon", className),
       __css: css,
       ...rest
     }
@@ -241,13 +241,13 @@ var AutocompleteField = forwardRef2(
     return /* @__PURE__ */ jsx2(PopoverTrigger, { children: /* @__PURE__ */ jsx2(
       ui2.div,
       {
-        className: cx2("ui-autocomplete-field", className),
+        className: cx2("ui-autocomplete__field", className),
         __css: css,
         ...rest,
         children: /* @__PURE__ */ jsx2(
           ui2.input,
           {
-            className: "ui-autocomplete-input",
+            className: "ui-autocomplete__field__input",
             display: "inline-block",
             w: "full",
             placeholder,
@@ -275,14 +275,18 @@ var AutocompleteOptionGroup = forwardRef3(
     return /* @__PURE__ */ jsxs2(
       ui3.li,
       {
-        className: "ui-autocomplete-group-container",
+        className: cx3(
+          "ui-autocomplete__item",
+          "ui-autocomplete__item--group",
+          className
+        ),
         __css: { w: "100%", h: "fit-content", color },
         ...getContainerProps(),
         children: [
           /* @__PURE__ */ jsx3(
             ui3.span,
             {
-              className: cx3("ui-autocomplete-group-label"),
+              className: cx3("ui-autocomplete__item__group-label"),
               __css: styles.groupLabel,
               noOfLines: 1,
               children: label
@@ -292,7 +296,7 @@ var AutocompleteOptionGroup = forwardRef3(
             ui3.ul,
             {
               ...getGroupProps({}, ref),
-              className: cx3("ui-autocomplete-group", className),
+              className: cx3("ui-autocomplete__item__group", className),
               __css: { h, minH, ...styles.group },
               children
             }
@@ -328,7 +332,7 @@ var AutocompleteOption = forwardRef4(
     return /* @__PURE__ */ jsxs3(
       ui4.li,
       {
-        className: cx4("ui-autocomplete-item", className),
+        className: cx4("ui-autocomplete__item", className),
         __css: css,
         ...getOptionProps({}, ref),
         children: [
@@ -372,7 +376,7 @@ var AutocompleteCreate = forwardRef5(
     return /* @__PURE__ */ jsxs4(
       ui5.li,
       {
-        className: cx5("ui-autocomplete-create", className),
+        className: cx5("ui-autocomplete__item--create", className),
         __css: css,
         ...getCreateProps(rest, ref),
         children: [
@@ -417,7 +421,7 @@ var AutocompleteEmpty = forwardRef6(
     return /* @__PURE__ */ jsxs5(
       ui6.li,
       {
-        className: cx6("ui-autocomplete-empty", className),
+        className: cx6("ui-autocomplete__item--empty", className),
         __css: css,
         ...getEmptyProps(rest, ref),
         children: [
@@ -625,7 +629,7 @@ var MultiAutocompleteField = forwardRef7(
     return /* @__PURE__ */ jsx7(PopoverTrigger2, { children: /* @__PURE__ */ jsxs6(
       ui7.div,
       {
-        className: cx7("ui-autocomplete-field", className),
+        className: cx7("ui-autocomplete__field", className),
         __css: css,
         py: (displayValue == null ? void 0 : displayValue.length) && component ? "0.125rem" : void 0,
         ...rest,
@@ -634,7 +638,7 @@ var MultiAutocompleteField = forwardRef7(
           /* @__PURE__ */ jsx7(
             ui7.input,
             {
-              className: "ui-autocomplete-input",
+              className: cx7("ui-autocomplete__field__input", className),
               display: "inline-block",
               flex: "1",
               overflow: "hidden",
@@ -1798,7 +1802,7 @@ var AutocompleteList = forwardRef8(
     return /* @__PURE__ */ jsx9(
       PopoverContent,
       {
-        className: cx8("ui-autocomplete-list", className),
+        className: cx8("ui-autocomplete__list", className),
         w,
         minW,
         __css: css,

package/dist/index.js

@@ -1217,7 +1217,7 @@ var AutocompleteIcon = (0, import_core2.forwardRef)(
       import_core2.ui.div,
       {
         ref,
-        className: (0, import_utils2.cx)("ui-autocomplete-icon", className),
+        className: (0, import_utils2.cx)("ui-autocomplete__icon", className),
         __css: css,
         ...rest,
         children: (0, import_utils2.isValidElement)(children) ? cloneChildren : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icon.ChevronIcon, {})
@@ -1241,7 +1241,7 @@ var AutocompleteClearIcon = ({
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     AutocompleteIcon,
     {
-      className: (0, import_utils2.cx)("ui-autocomplete-clear-icon", className),
+      className: (0, import_utils2.cx)("ui-autocomplete__icon--clear", className),
       __css: styles.clearIcon,
       ...rest,
       children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icon.CloseIcon, { w: "0.5em", h: "0.5em" })
@@ -1262,7 +1262,7 @@ var AutocompleteItemIcon = (0, import_core2.forwardRef)(({ className, ...rest },
     import_core2.ui.span,
     {
       ref,
-      className: (0, import_utils2.cx)("ui-autocomplete-item-icon", className),
+      className: (0, import_utils2.cx)("ui-autocomplete__item__icon", className),
       __css: css,
       ...rest
     }
@@ -1285,7 +1285,7 @@ var AutocompleteList = (0, import_core3.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_popover.PopoverContent,
       {
-        className: (0, import_utils3.cx)("ui-autocomplete-list", className),
+        className: (0, import_utils3.cx)("ui-autocomplete__list", className),
         w,
         minW,
         __css: css,
@@ -1391,13 +1391,13 @@ var AutocompleteField = (0, import_core4.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_popover2.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       import_core4.ui.div,
       {
-        className: (0, import_utils4.cx)("ui-autocomplete-field", className),
+        className: (0, import_utils4.cx)("ui-autocomplete__field", className),
         __css: css,
         ...rest,
         children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           import_core4.ui.input,
           {
-            className: "ui-autocomplete-input",
+            className: "ui-autocomplete__field__input",
             display: "inline-block",
             w: "full",
             placeholder,
@@ -1425,14 +1425,18 @@ var AutocompleteOptionGroup = (0, import_core5.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       import_core5.ui.li,
       {
-        className: "ui-autocomplete-group-container",
+        className: (0, import_utils5.cx)(
+          "ui-autocomplete__item",
+          "ui-autocomplete__item--group",
+          className
+        ),
         __css: { w: "100%", h: "fit-content", color },
         ...getContainerProps(),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             import_core5.ui.span,
             {
-              className: (0, import_utils5.cx)("ui-autocomplete-group-label"),
+              className: (0, import_utils5.cx)("ui-autocomplete__item__group-label"),
               __css: styles.groupLabel,
               noOfLines: 1,
               children: label
@@ -1442,7 +1446,7 @@ var AutocompleteOptionGroup = (0, import_core5.forwardRef)(
             import_core5.ui.ul,
             {
               ...getGroupProps({}, ref),
-              className: (0, import_utils5.cx)("ui-autocomplete-group", className),
+              className: (0, import_utils5.cx)("ui-autocomplete__item__group", className),
               __css: { h, minH, ...styles.group },
               children
             }
@@ -1478,7 +1482,7 @@ var AutocompleteOption = (0, import_core6.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       import_core6.ui.li,
       {
-        className: (0, import_utils6.cx)("ui-autocomplete-item", className),
+        className: (0, import_utils6.cx)("ui-autocomplete__item", className),
         __css: css,
         ...getOptionProps({}, ref),
         children: [
@@ -1522,7 +1526,7 @@ var AutocompleteCreate = (0, import_core7.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       import_core7.ui.li,
       {
-        className: (0, import_utils7.cx)("ui-autocomplete-create", className),
+        className: (0, import_utils7.cx)("ui-autocomplete__item--create", className),
         __css: css,
         ...getCreateProps(rest, ref),
         children: [
@@ -1567,7 +1571,7 @@ var AutocompleteEmpty = (0, import_core8.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       import_core8.ui.li,
       {
-        className: (0, import_utils8.cx)("ui-autocomplete-empty", className),
+        className: (0, import_utils8.cx)("ui-autocomplete__item--empty", className),
         __css: css,
         ...getEmptyProps(rest, ref),
         children: [
@@ -1767,7 +1771,7 @@ var MultiAutocompleteField = (0, import_core9.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_popover3.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       import_core9.ui.div,
       {
-        className: (0, import_utils9.cx)("ui-autocomplete-field", className),
+        className: (0, import_utils9.cx)("ui-autocomplete__field", className),
         __css: css,
         py: (displayValue == null ? void 0 : displayValue.length) && component ? "0.125rem" : void 0,
         ...rest,
@@ -1776,7 +1780,7 @@ var MultiAutocompleteField = (0, import_core9.forwardRef)(
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             import_core9.ui.input,
             {
-              className: "ui-autocomplete-input",
+              className: (0, import_utils9.cx)("ui-autocomplete__field__input", className),
               display: "inline-block",
               flex: "1",
               overflow: "hidden",

package/dist/index.mjs

@@ -6,7 +6,7 @@ import {
   AutocompleteOption,
   AutocompleteOptionGroup,
   MultiAutocomplete
-} from "./chunk-2GZO4Q4I.mjs";
+} from "./chunk-EFOFI4S7.mjs";
 export {
   Autocomplete,
   AutocompleteCreate,

package/dist/multi-autocomplete.js

@@ -61,7 +61,7 @@ var AutocompleteList = (0, import_core.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_popover.PopoverContent,
       {
-        className: (0, import_utils.cx)("ui-autocomplete-list", className),
+        className: (0, import_utils.cx)("ui-autocomplete__list", className),
         w,
         minW,
         __css: css,
@@ -84,14 +84,18 @@ var AutocompleteOptionGroup = (0, import_core2.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       import_core2.ui.li,
       {
-        className: "ui-autocomplete-group-container",
+        className: (0, import_utils2.cx)(
+          "ui-autocomplete__item",
+          "ui-autocomplete__item--group",
+          className
+        ),
         __css: { w: "100%", h: "fit-content", color },
         ...getContainerProps(),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             import_core2.ui.span,
             {
-              className: (0, import_utils2.cx)("ui-autocomplete-group-label"),
+              className: (0, import_utils2.cx)("ui-autocomplete__item__group-label"),
               __css: styles.groupLabel,
               noOfLines: 1,
               children: label
@@ -101,7 +105,7 @@ var AutocompleteOptionGroup = (0, import_core2.forwardRef)(
             import_core2.ui.ul,
             {
               ...getGroupProps({}, ref),
-              className: (0, import_utils2.cx)("ui-autocomplete-group", className),
+              className: (0, import_utils2.cx)("ui-autocomplete__item__group", className),
               __css: { h, minH, ...styles.group },
               children
             }
@@ -137,7 +141,7 @@ var AutocompleteOption = (0, import_core3.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       import_core3.ui.li,
       {
-        className: (0, import_utils3.cx)("ui-autocomplete-item", className),
+        className: (0, import_utils3.cx)("ui-autocomplete__item", className),
         __css: css,
         ...getOptionProps({}, ref),
         children: [
@@ -181,7 +185,7 @@ var AutocompleteCreate = (0, import_core4.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       import_core4.ui.li,
       {
-        className: (0, import_utils4.cx)("ui-autocomplete-create", className),
+        className: (0, import_utils4.cx)("ui-autocomplete__item--create", className),
         __css: css,
         ...getCreateProps(rest, ref),
         children: [
@@ -226,7 +230,7 @@ var AutocompleteEmpty = (0, import_core5.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       import_core5.ui.li,
       {
-        className: (0, import_utils5.cx)("ui-autocomplete-empty", className),
+        className: (0, import_utils5.cx)("ui-autocomplete__item--empty", className),
         __css: css,
         ...getEmptyProps(rest, ref),
         children: [
@@ -1413,7 +1417,7 @@ var AutocompleteIcon = (0, import_core7.forwardRef)(
       import_core7.ui.div,
       {
         ref,
-        className: (0, import_utils7.cx)("ui-autocomplete-icon", className),
+        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, {})
@@ -1437,7 +1441,7 @@ var AutocompleteClearIcon = ({
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     AutocompleteIcon,
     {
-      className: (0, import_utils7.cx)("ui-autocomplete-clear-icon", className),
+      className: (0, import_utils7.cx)("ui-autocomplete__icon--clear", className),
       __css: styles.clearIcon,
       ...rest,
       children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icon.CloseIcon, { w: "0.5em", h: "0.5em" })
@@ -1458,7 +1462,7 @@ var AutocompleteItemIcon = (0, import_core7.forwardRef)(({ className, ...rest },
     import_core7.ui.span,
     {
       ref,
-      className: (0, import_utils7.cx)("ui-autocomplete-item-icon", className),
+      className: (0, import_utils7.cx)("ui-autocomplete__item__icon", className),
       __css: css,
       ...rest
     }
@@ -1642,7 +1646,7 @@ var MultiAutocompleteField = (0, import_core8.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_popover2.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       import_core8.ui.div,
       {
-        className: (0, import_utils8.cx)("ui-autocomplete-field", className),
+        className: (0, import_utils8.cx)("ui-autocomplete__field", className),
         __css: css,
         py: (displayValue == null ? void 0 : displayValue.length) && component ? "0.125rem" : void 0,
         ...rest,
@@ -1651,7 +1655,7 @@ var MultiAutocompleteField = (0, import_core8.forwardRef)(
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             import_core8.ui.input,
             {
-              className: "ui-autocomplete-input",
+              className: (0, import_utils8.cx)("ui-autocomplete__field__input", className),
               display: "inline-block",
               flex: "1",
               overflow: "hidden",

package/dist/multi-autocomplete.mjs

@@ -1,7 +1,7 @@
 "use client"
 import {
   MultiAutocomplete
-} from "./chunk-2GZO4Q4I.mjs";
+} from "./chunk-EFOFI4S7.mjs";
 export {
   MultiAutocomplete
 };

package/dist/use-autocomplete.js

@@ -82,7 +82,7 @@ var AutocompleteIcon = (0, import_core.forwardRef)(
       import_core.ui.div,
       {
         ref,
-        className: (0, import_utils.cx)("ui-autocomplete-icon", className),
+        className: (0, import_utils.cx)("ui-autocomplete__icon", className),
         __css: css,
         ...rest,
         children: (0, import_utils.isValidElement)(children) ? cloneChildren : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.ChevronIcon, {})
@@ -104,7 +104,7 @@ var AutocompleteItemIcon = (0, import_core.forwardRef)(({ className, ...rest },
     import_core.ui.span,
     {
       ref,
-      className: (0, import_utils.cx)("ui-autocomplete-item-icon", className),
+      className: (0, import_utils.cx)("ui-autocomplete__item__icon", className),
       __css: css,
       ...rest
     }
@@ -124,14 +124,18 @@ var AutocompleteOptionGroup = (0, import_core2.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       import_core2.ui.li,
       {
-        className: "ui-autocomplete-group-container",
+        className: (0, import_utils2.cx)(
+          "ui-autocomplete__item",
+          "ui-autocomplete__item--group",
+          className
+        ),
         __css: { w: "100%", h: "fit-content", color },
         ...getContainerProps(),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             import_core2.ui.span,
             {
-              className: (0, import_utils2.cx)("ui-autocomplete-group-label"),
+              className: (0, import_utils2.cx)("ui-autocomplete__item__group-label"),
               __css: styles.groupLabel,
               noOfLines: 1,
               children: label
@@ -141,7 +145,7 @@ var AutocompleteOptionGroup = (0, import_core2.forwardRef)(
             import_core2.ui.ul,
             {
               ...getGroupProps({}, ref),
-              className: (0, import_utils2.cx)("ui-autocomplete-group", className),
+              className: (0, import_utils2.cx)("ui-autocomplete__item__group", className),
               __css: { h, minH, ...styles.group },
               children
             }
@@ -177,7 +181,7 @@ var AutocompleteOption = (0, import_core3.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       import_core3.ui.li,
       {
-        className: (0, import_utils3.cx)("ui-autocomplete-item", className),
+        className: (0, import_utils3.cx)("ui-autocomplete__item", className),
         __css: css,
         ...getOptionProps({}, ref),
         children: [

package/dist/use-autocomplete.mjs

@@ -13,7 +13,7 @@ import {
   useAutocompleteList,
   useAutocompleteOption,
   useAutocompleteOptionGroup
-} from "./chunk-2GZO4Q4I.mjs";
+} from "./chunk-EFOFI4S7.mjs";
 export {
   AutocompleteDescendantsContextProvider,
   AutocompleteProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/autocomplete",
-  "version": "0.4.10",
+  "version": "0.4.12",
   "description": "Yamada UI autocomplete component",
   "keywords": [
     "yamada",
@@ -36,16 +36,16 @@
     "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
   },
   "dependencies": {
-    "@yamada-ui/core": "0.12.4",
-    "@yamada-ui/utils": "0.3.2",
-    "@yamada-ui/icon": "0.3.14",
-    "@yamada-ui/select": "0.4.10",
-    "@yamada-ui/form-control": "0.3.16",
-    "@yamada-ui/popover": "0.3.17",
-    "@yamada-ui/use-descendant": "0.2.4",
-    "@yamada-ui/use-clickable": "0.3.4",
-    "@yamada-ui/use-outside-click": "0.2.4",
-    "@yamada-ui/use-controllable-state": "0.2.4"
+    "@yamada-ui/core": "0.12.5",
+    "@yamada-ui/utils": "0.3.3",
+    "@yamada-ui/icon": "0.3.15",
+    "@yamada-ui/select": "0.4.12",
+    "@yamada-ui/form-control": "0.3.18",
+    "@yamada-ui/popover": "0.3.18",
+    "@yamada-ui/use-descendant": "0.2.5",
+    "@yamada-ui/use-clickable": "0.3.5",
+    "@yamada-ui/use-outside-click": "0.2.5",
+    "@yamada-ui/use-controllable-state": "0.2.5"
   },
   "devDependencies": {
     "react": "^18.0.0",