@televet/kibble-ui 5.0.2-beta.1 → 5.0.2-beta.menu.1

package/dist/chunks/{menu.component-TeC2F3rT.js → menu.component-Dd4ePEAs.js}

@@ -1,45 +1,45 @@
 import { j as e } from "./jsx-runtime-C5mzlN2N.js";
-import st, { forwardRef as x, useEffect as B, useId as X, useRef as ue, useCallback as j, useState as L, useMemo as D } from "react";
+import st, { forwardRef as x, useEffect as B, useId as Y, useRef as le, useCallback as j, useState as L, useMemo as D } from "react";
 import { B as T } from "./index-9BerxEcw.js";
-import { B as Y } from "./button.component-BO6oee_V.js";
-import { I as he } from "./icon.component-PV_nHBId.js";
-import { W as Z } from "./text.component-IjomJyJY.js";
-import { T as xe } from "./tooltip.component-DFsQNG1q.js";
+import { B as Z } from "./button.component-BO6oee_V.js";
+import { I as xe } from "./icon.component-PV_nHBId.js";
+import { W as ee } from "./text.component-CdTyTFds.js";
+import { T as ge } from "./tooltip.component-C_NS-AoH.js";
 import { F as z } from "./flex-CX-8gE9T.js";
-import { W as ct } from "./textInput.component-DAOVnBI-.js";
-import { S as at } from "./spinner.component-D3s81AJH.js";
+import { W as ct } from "./textInput.component-BC0Hi8R_.js";
+import { S as at } from "./spinner.component-B3dkvoO9.js";
 import { u as it } from "./usePortalContentRef-DO_jc4W9.js";
-import { u as ee, s as ge, c as fe, d as Me, P as ut } from "./index-C9UYIjEB.js";
+import { u as te, s as fe, c as Me, d as Pe, P as ut } from "./index-C9UYIjEB.js";
 import { c as lt } from "./create-slot-recipe-context-D_FXDJGp.js";
 import { d as dt } from "./icons-CoSqruIn.js";
 import { a as G, d as g, b as _, e as pt, u as mt, f as ht, g as xt, n as gt } from "./use-locale-context-Bw4Gg9Z0.js";
 import { m as ft, c as Mt } from "./index-CbVKVxMW.js";
 import { a6 as p } from "./index-fHSGm2nC.js";
-import { W as Pt } from "./checkbox.component-Be_DWrS9.js";
-const [Pe, m] = G({
+import { W as Pt } from "./checkbox.component-DE35wBj-.js";
+const [ve, m] = G({
   name: "MenuContext",
   hookName: "useMenuContext",
   providerName: "<MenuProvider />",
   strict: !1
-}), ve = x((o, n) => {
+}), je = x((o, n) => {
   const t = m(), s = p(t.getArrowProps(), o);
   return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
 });
-ve.displayName = "MenuArrow";
-const je = x((o, n) => {
+je.displayName = "MenuArrow";
+const Ce = x((o, n) => {
   const t = m(), s = p(t.getArrowTipProps(), o);
   return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
 });
-je.displayName = "MenuArrowTip";
-const [te, Zt] = G({
+Ce.displayName = "MenuArrowTip";
+const [ne, Zt] = G({
   name: "MenuItemContext",
   hookName: "useMenuItemContext",
   providerName: "<MenuItemProvider />"
-}), [ne, Ce] = G({
+}), [oe, Ie] = G({
   name: "MenuItemPropsContext",
   hookName: "useMenuItemPropsContext",
   providerName: "<MenuItemPropsProvider />"
-}), Ie = x((o, n) => {
+}), be = x((o, n) => {
   const [t, s] = _()(o, [
     "checked",
     "closeOnSelect",
@@ -51,25 +51,25 @@ const [te, Zt] = G({
     ...t,
     type: "checkbox"
   }, u = m(), a = p(u.getOptionItemProps(c), s), i = u.getOptionItemState(c);
-  return /* @__PURE__ */ e.jsx(ne, { value: c, children: /* @__PURE__ */ e.jsx(te, { value: i, children: /* @__PURE__ */ e.jsx(g.div, { ...a, ref: n }) }) });
+  return /* @__PURE__ */ e.jsx(oe, { value: c, children: /* @__PURE__ */ e.jsx(ne, { value: i, children: /* @__PURE__ */ e.jsx(g.div, { ...a, ref: n }) }) });
 });
-Ie.displayName = "MenuCheckboxItem";
-const be = x((o, n) => {
-  const t = m(), s = ee(), c = p(t.getContentProps(), s.getPresenceProps(), o);
+be.displayName = "MenuCheckboxItem";
+const ke = x((o, n) => {
+  const t = m(), s = te(), c = p(t.getContentProps(), s.getPresenceProps(), o);
   return s.unmounted ? null : /* @__PURE__ */ e.jsx(g.div, { ...c, ref: pt(s.ref, n) });
 });
-be.displayName = "MenuContent";
-const ke = x((o, n) => {
+ke.displayName = "MenuContent";
+const Se = x((o, n) => {
   const t = m(), s = p(t.getContextTriggerProps(), o);
   return /* @__PURE__ */ e.jsx(g.button, { ...s, ref: n });
 });
-ke.displayName = "MenuContextTrigger";
-const Se = x((o, n) => {
+Se.displayName = "MenuContextTrigger";
+const we = x((o, n) => {
   const t = m(), s = p(t.getIndicatorProps(), o);
   return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
 });
-Se.displayName = "MenuIndicator";
-const we = x((o, n) => {
+we.displayName = "MenuIndicator";
+const Ne = x((o, n) => {
   const [t, s] = _()(o, [
     "closeOnSelect",
     "disabled",
@@ -77,89 +77,89 @@ const we = x((o, n) => {
     "valueText",
     "onSelect"
   ]), c = m(), u = p(c.getItemProps(t), s), a = c.getItemState(t);
-  return B(() => c.addItemListener({ id: a.id, onSelect: t.onSelect }), [a.id, t.onSelect]), /* @__PURE__ */ e.jsx(ne, { value: t, children: /* @__PURE__ */ e.jsx(te, { value: a, children: /* @__PURE__ */ e.jsx(g.div, { ...u, ref: n }) }) });
+  return B(() => c.addItemListener({ id: a.id, onSelect: t.onSelect }), [a.id, t.onSelect]), /* @__PURE__ */ e.jsx(oe, { value: t, children: /* @__PURE__ */ e.jsx(ne, { value: a, children: /* @__PURE__ */ e.jsx(g.div, { ...u, ref: n }) }) });
 });
-we.displayName = "MenuItem";
-const [Ne, ye] = G({
+Ne.displayName = "MenuItem";
+const [ye, Ae] = G({
   name: "MenuItemGroupContext",
   hookName: "useMenuItemGroupContext",
   providerName: "<MenuItemGroupProvider />"
-}), Ae = x((o, n) => {
-  const [t, s] = _()(o, ["id"]), c = m(), a = { id: X(), ...t }, i = p(c.getItemGroupProps(a), s);
-  return /* @__PURE__ */ e.jsx(Ne, { value: a, children: /* @__PURE__ */ e.jsx(g.div, { ...i, ref: n }) });
+}), Te = x((o, n) => {
+  const [t, s] = _()(o, ["id"]), c = m(), a = { id: Y(), ...t }, i = p(c.getItemGroupProps(a), s);
+  return /* @__PURE__ */ e.jsx(ye, { value: a, children: /* @__PURE__ */ e.jsx(g.div, { ...i, ref: n }) });
 });
-Ae.displayName = "MenuItemGroup";
-const Te = x((o, n) => {
-  const t = m(), s = ye(), c = p(t.getItemGroupLabelProps({ htmlFor: s.id }), o);
-  return /* @__PURE__ */ e.jsx(g.div, { ...c, ref: n });
-});
-Te.displayName = "MenuItemGroupLabel";
+Te.displayName = "MenuItemGroup";
 const Ge = x((o, n) => {
-  const t = m(), s = Ce(), c = p(t.getItemIndicatorProps(s), o);
+  const t = m(), s = Ae(), c = p(t.getItemGroupLabelProps({ htmlFor: s.id }), o);
   return /* @__PURE__ */ e.jsx(g.div, { ...c, ref: n });
 });
-Ge.displayName = "MenuItemIndicator";
+Ge.displayName = "MenuItemGroupLabel";
 const _e = x((o, n) => {
-  const t = m(), s = Ce(), c = p(t.getItemTextProps(s), o);
+  const t = m(), s = Ie(), c = p(t.getItemIndicatorProps(s), o);
   return /* @__PURE__ */ e.jsx(g.div, { ...c, ref: n });
 });
-_e.displayName = "MenuItemText";
+_e.displayName = "MenuItemIndicator";
 const Oe = x((o, n) => {
-  const t = m(), s = p(t.getPositionerProps(), o);
-  return ee().unmounted ? null : /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
+  const t = m(), s = Ie(), c = p(t.getItemTextProps(s), o);
+  return /* @__PURE__ */ e.jsx(g.div, { ...c, ref: n });
 });
-Oe.displayName = "MenuPositioner";
+Oe.displayName = "MenuItemText";
 const $e = x((o, n) => {
+  const t = m(), s = p(t.getPositionerProps(), o);
+  return te().unmounted ? null : /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
+});
+$e.displayName = "MenuPositioner";
+const Re = x((o, n) => {
   const [t, s] = _()(o, [
     "closeOnSelect",
     "disabled",
     "value",
     "valueText"
-  ]), c = m(), u = ye(), a = {
+  ]), c = m(), u = Ae(), a = {
     ...t,
     checked: u.value === t.value,
     type: "radio",
     onCheckedChange: () => u.onValueChange?.({ value: t.value })
   }, i = p(c.getOptionItemProps(a), s), f = c.getOptionItemState(a);
-  return /* @__PURE__ */ e.jsx(ne, { value: a, children: /* @__PURE__ */ e.jsx(te, { value: f, children: /* @__PURE__ */ e.jsx(g.div, { ...i, ref: n }) }) });
+  return /* @__PURE__ */ e.jsx(oe, { value: a, children: /* @__PURE__ */ e.jsx(ne, { value: f, children: /* @__PURE__ */ e.jsx(g.div, { ...i, ref: n }) }) });
 });
-$e.displayName = "MenuRadioItem";
-const Re = x((o, n) => {
+Re.displayName = "MenuRadioItem";
+const Le = x((o, n) => {
   const [t, s] = _()(o, [
     "id",
     "onValueChange",
     "value"
-  ]), c = m(), a = { id: X(), ...t }, i = p(c.getItemGroupProps({ id: a.id }), s);
-  return /* @__PURE__ */ e.jsx(Ne, { value: a, children: /* @__PURE__ */ e.jsx(g.div, { ...i, ref: n }) });
+  ]), c = m(), a = { id: Y(), ...t }, i = p(c.getItemGroupProps({ id: a.id }), s);
+  return /* @__PURE__ */ e.jsx(ye, { value: a, children: /* @__PURE__ */ e.jsx(g.div, { ...i, ref: n }) });
 });
-Re.displayName = "MenuRadioItemGroup";
-const Le = (o) => {
-  const n = ue(o), t = ue(!1);
+Le.displayName = "MenuRadioItemGroup";
+const Be = (o) => {
+  const n = le(o), t = le(!1);
   B(() => {
     n.current = o;
   }), B(() => {
     t.current !== !0 && (t.current = !0, n.current());
   }, []);
 }, vt = (o) => {
-  const n = X(), { getRootNode: t } = mt(), { dir: s } = ht(), c = {
+  const n = Y(), { getRootNode: t } = mt(), { dir: s } = ht(), c = {
     id: n,
     dir: s,
     getRootNode: t,
     ...o
   }, u = xt(ft, c);
   return { api: Mt(u, gt), service: u };
-}, [Be, ze] = G({
+}, [ze, Fe] = G({
   name: "MenuMachineContext",
   hookName: "useMenuMachineContext",
   providerName: "<MenuMachineProvider />",
   strict: !1
-}), [Fe, jt] = G({
+}), [We, jt] = G({
   name: "MenuMachineContext",
   hookName: "useMenuMachineContext",
   providerName: "<MenuMachineProvider />",
   strict: !1
 }), Ct = (o) => {
-  const [n, t] = ge(o), [s, c] = _()(t, [
+  const [n, t] = fe(o), [s, c] = _()(t, [
     "anchorPoint",
     "aria-label",
     "closeOnSelect",
@@ -181,26 +181,26 @@ const Le = (o) => {
     "open",
     "positioning",
     "typeahead"
-  ]), u = m(), a = ze(), { api: i, service: f } = vt(s), N = fe(p({ present: i.open }, n));
-  Le(() => {
+  ]), u = m(), a = Fe(), { api: i, service: f } = vt(s), N = Me(p({ present: i.open }, n));
+  Be(() => {
     a && u && (u.setChild(f), i.setParent(a));
   });
   const y = j(() => u?.getTriggerItemProps(i), [i, u]);
-  return /* @__PURE__ */ e.jsx(Fe, { value: y, children: /* @__PURE__ */ e.jsx(Be, { value: f, children: /* @__PURE__ */ e.jsx(Pe, { value: i, children: /* @__PURE__ */ e.jsx(Me, { value: N, ...c }) }) }) });
+  return /* @__PURE__ */ e.jsx(We, { value: y, children: /* @__PURE__ */ e.jsx(ze, { value: f, children: /* @__PURE__ */ e.jsx(ve, { value: i, children: /* @__PURE__ */ e.jsx(Pe, { value: N, ...c }) }) }) });
 }, It = (o) => {
-  const n = m(), t = ze(), [s, { value: c, children: u }] = ge(o), { api: a, service: i } = c, f = fe(p({ present: a.open }, s));
-  Le(() => {
+  const n = m(), t = Fe(), [s, { value: c, children: u }] = fe(o), { api: a, service: i } = c, f = Me(p({ present: a.open }, s));
+  Be(() => {
     t && n && (n.setChild(i), a.setParent(t));
   });
   const N = j(() => n?.getTriggerItemProps(a), [a, n]);
-  return /* @__PURE__ */ e.jsx(Fe, { value: N, children: /* @__PURE__ */ e.jsx(Be, { value: i, children: /* @__PURE__ */ e.jsx(Pe, { value: a, children: /* @__PURE__ */ e.jsx(Me, { value: f, children: u }) }) }) });
-}, We = x((o, n) => {
+  return /* @__PURE__ */ e.jsx(We, { value: N, children: /* @__PURE__ */ e.jsx(ze, { value: i, children: /* @__PURE__ */ e.jsx(ve, { value: a, children: /* @__PURE__ */ e.jsx(Pe, { value: f, children: u }) }) }) });
+}, Ee = x((o, n) => {
   const t = m(), s = p(t.getSeparatorProps(), o);
   return /* @__PURE__ */ e.jsx(g.hr, { ...s, ref: n });
 });
-We.displayName = "MenuSeparator";
-const Ee = x((o, n) => {
-  const t = m(), s = ee(), c = p(
+Ee.displayName = "MenuSeparator";
+const De = x((o, n) => {
+  const t = m(), s = te(), c = p(
     {
       ...t.getTriggerProps(),
       "aria-controls": s.unmounted ? void 0 : t.getTriggerProps()["aria-controls"]
@@ -209,67 +209,67 @@ const Ee = x((o, n) => {
   );
   return /* @__PURE__ */ e.jsx(g.button, { ...c, ref: n });
 });
-Ee.displayName = "MenuTrigger";
-const De = x((o, n) => {
+De.displayName = "MenuTrigger";
+const Ve = x((o, n) => {
   const t = jt(), s = p(t?.() ?? {}, o);
   return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
 });
-De.displayName = "MenuTriggerItem";
+Ve.displayName = "MenuTriggerItem";
 const {
-  withRootProvider: Ve,
+  withRootProvider: He,
   withContext: h
 } = lt({ key: "menu" });
-Ve(
+He(
   It
 );
-const bt = Ve(Ct, {
+const bt = He(Ct, {
   defaultProps: { lazyMount: !0, unmountOnExit: !0 }
 }), kt = h(
-  Ee,
+  De,
   "trigger",
   { forwardAsChild: !0 }
 );
-h(ke, "contextTrigger", { forwardAsChild: !0 });
+h(Se, "contextTrigger", { forwardAsChild: !0 });
 const St = h(
-  Oe,
+  $e,
   "positioner",
   { forwardAsChild: !0 }
 );
 h(
-  We,
+  Ee,
   "separator",
   { forwardAsChild: !0 }
 );
 const wt = h(
-  be,
+  ke,
   "content",
   { forwardAsChild: !0 }
 ), Nt = h(
-  je,
+  Ce,
   "arrowTip",
   { forwardAsChild: !0 }
 );
 h(
-  ve,
+  je,
   "arrow",
   { forwardAsChild: !0, defaultProps: { children: /* @__PURE__ */ e.jsx(Nt, {}) } }
 );
 h(
-  Se,
+  we,
   "indicator",
   { forwardAsChild: !0 }
 );
 const yt = h(
-  Ae,
+  Te,
   "itemGroup",
   { forwardAsChild: !0 }
-), At = h(Te, "itemGroupLabel", { forwardAsChild: !0 }), le = h(
-  we,
+), At = h(Ge, "itemGroupLabel", { forwardAsChild: !0 }), de = h(
+  Ne,
   "item",
   { forwardAsChild: !0 }
-), Tt = h(De, "item", { forwardAsChild: !0 });
+), Tt = h(Ve, "item", { forwardAsChild: !0 });
 h(
-  _e,
+  Oe,
   "itemText",
   { forwardAsChild: !0 }
 );
@@ -277,18 +277,18 @@ h(
   "kbd",
   "itemCommand"
 );
-h(Ge, "itemIndicator", {
+h(_e, "itemIndicator", {
   forwardAsChild: !0,
   defaultProps: { children: /* @__PURE__ */ e.jsx(dt, { boxSize: "4" }) }
 });
-h(Ie, "item", { forwardAsChild: !0 });
-h(Re, "itemGroup", { forwardAsChild: !0 });
+h(be, "item", { forwardAsChild: !0 });
+h(Le, "itemGroup", { forwardAsChild: !0 });
 h(
-  $e,
+  Re,
   "item",
   { forwardAsChild: !0 }
 );
-const He = ({
+const Ke = ({
   hideCaret: o = !1,
   size: n = "md",
   text: t,
@@ -298,7 +298,7 @@ const He = ({
   ["data-testid"]: a = "kibble-menu-button",
   ...i
 }) => /* @__PURE__ */ e.jsxs(
-  Y,
+  Z,
   {
     className: "Menu__Button",
     "data-testid": a,
@@ -311,7 +311,7 @@ const He = ({
     },
     children: [
       t && /* @__PURE__ */ e.jsx(
-        Z,
+        ee,
         {
           className: "Menu__ButtonText",
           "data-testid": `${a}-text`,
@@ -323,7 +323,7 @@ const He = ({
           children: t
         }
       ),
-      !o && /* @__PURE__ */ e.jsx(z, { className: "Menu__ButtonCaret", "data-testid": `${a}-caret`, children: /* @__PURE__ */ e.jsx(he, { name: "chevronDown", size: n === "lg" ? "sm" : "xs" }) })
+      !o && /* @__PURE__ */ e.jsx(z, { className: "Menu__ButtonCaret", "data-testid": `${a}-caret`, children: /* @__PURE__ */ e.jsx(xe, { name: "chevronDown", size: n === "lg" ? "sm" : "xs" }) })
     ]
   }
 ), Gt = ({ tooltipProps: o, isMenuOpen: n, ...t }) => {
@@ -334,7 +334,7 @@ const He = ({
   }, [n]);
   return B(() => {
     n && c(!1);
-  }, [n]), /* @__PURE__ */ e.jsx(xe, { label: t.text || "", open: s && !n, ...o, children: /* @__PURE__ */ e.jsx(
+  }, [n]), /* @__PURE__ */ e.jsx(ge, { label: t.text || "", open: s && !n, ...o, children: /* @__PURE__ */ e.jsx(
     T,
     {
       onClick: (i) => {
@@ -342,7 +342,7 @@ const He = ({
       },
       onMouseEnter: u,
       onMouseLeave: a,
-      children: /* @__PURE__ */ e.jsx(He, { ...t })
+      children: /* @__PURE__ */ e.jsx(Ke, { ...t })
     }
   ) });
 }, _t = ({
@@ -362,16 +362,17 @@ const He = ({
     const {
       valueText: S,
       listProps: C,
-      portalled: M = !0,
+      positionerProps: M,
+      portalled: A = !0,
       open: k,
-      lazyMount: A = !0,
-      unmountOnExit: I = !0
+      lazyMount: I = !0,
+      unmountOnExit: V = !0
     } = i;
     return /* @__PURE__ */ e.jsx(
       Ot,
       {
-        lazyMount: A,
-        unmountOnExit: I,
+        lazyMount: I,
+        unmountOnExit: V,
         submenuTrigger: /* @__PURE__ */ e.jsxs(
           Tt,
           {
@@ -385,7 +386,7 @@ const He = ({
             },
             children: [
               /* @__PURE__ */ e.jsx(
-                U,
+                X,
                 {
                   label: o,
                   leftElement: n,
@@ -393,20 +394,21 @@ const He = ({
                   variant: u
                 }
               ),
-              /* @__PURE__ */ e.jsx(he, { name: "chevronRight", size: "sm" })
+              /* @__PURE__ */ e.jsx(xe, { name: "chevronRight", size: "sm" })
             ]
           }
         ),
-        portalled: M,
+        portalled: A,
         open: k !== void 0 ? k : f,
-        listProps: C
+        listProps: C,
+        positionerProps: M
       }
     );
   }
   if (c === "checkbox") {
-    const { checked: S, value: C, disabled: M, tooltipLabel: k, ...A } = i;
+    const { checked: S, value: C, disabled: M, tooltipLabel: A, ...k } = i;
     return /* @__PURE__ */ e.jsxs(
-      le,
+      de,
       {
         className: "Menu__Item--Checkbox",
         "data-testid": `${a}-checkbox`,
@@ -415,17 +417,17 @@ const He = ({
         onSelect: M ? void 0 : y,
         gap: 3,
         disabled: M,
-        ...A,
+        ...k,
         children: [
           /* @__PURE__ */ e.jsx(Pt, { checked: !!S, disabled: M, size: "md", fullWidth: !1 }),
           /* @__PURE__ */ e.jsx(
-            U,
+            X,
             {
               label: o,
               leftElement: n,
               shouldTruncateText: s,
               variant: u,
-              tooltipLabel: k
+              tooltipLabel: A
             }
           )
         ]
@@ -433,9 +435,9 @@ const He = ({
     );
   }
   if (c === "default") {
-    const { selected: S = !1, disabled: C, value: M, tooltipLabel: k, ...A } = i;
+    const { selected: S = !1, disabled: C, value: M, tooltipLabel: A, ...k } = i;
     return /* @__PURE__ */ e.jsx(
-      le,
+      de,
       {
         className: "Menu__Item--Default",
         "data-testid": `${a}-default`,
@@ -443,22 +445,22 @@ const He = ({
         onSelect: C ? void 0 : y,
         disabled: C,
         ...S && { bgColor: "background.secondaryAlpha.hover" },
-        ...A,
+        ...k,
         children: /* @__PURE__ */ e.jsx(
-          U,
+          X,
           {
             label: o,
             leftElement: n,
             shouldTruncateText: s,
             variant: S ? "info" : u,
-            tooltipLabel: k
+            tooltipLabel: A
           }
         )
       }
     );
   }
   return /* @__PURE__ */ e.jsx(e.Fragment, {});
-}, U = ({
+}, X = ({
   label: o,
   leftElement: n,
   shouldTruncateText: t,
@@ -467,22 +469,22 @@ const He = ({
 }) => {
   const u = /* @__PURE__ */ e.jsxs(z, { className: "Menu__ItemLabel", alignItems: "center", gap: 3, children: [
     n,
-    typeof o == "string" ? /* @__PURE__ */ e.jsx(Z, { size: "sm", truncated: t, variant: s, children: o }) : o
+    typeof o == "string" ? /* @__PURE__ */ e.jsx(ee, { size: "sm", truncated: t, variant: s, children: o }) : o
   ] });
-  return c ? /* @__PURE__ */ e.jsx(xe, { label: c, children: u }) : u;
-}, de = ({
+  return c ? /* @__PURE__ */ e.jsx(ge, { label: c, children: u }) : u;
+}, pe = ({
   groupName: o,
   hasSelectedItems: n = !1,
   onToggle: t,
   ["data-testid"]: s = "kibble-menu-toggle-buttons"
 }) => {
   const c = !!o;
-  return /* @__PURE__ */ e.jsx(T, { className: "Menu__ToggleButtons", "data-testid": s, ...c && { textAlign: "right", w: "50%" }, children: c ? /* @__PURE__ */ e.jsx(e.Fragment, { children: n ? /* @__PURE__ */ e.jsx(me, { hasSelectedItems: n, groupName: o, onToggle: t }) : /* @__PURE__ */ e.jsx(pe, { groupName: o, onToggle: t }) }) : /* @__PURE__ */ e.jsxs(z, { justifyContent: "space-between", children: [
-    /* @__PURE__ */ e.jsx(pe, { groupName: o, onToggle: t }),
-    /* @__PURE__ */ e.jsx(me, { hasSelectedItems: n, groupName: o, onToggle: t })
+  return /* @__PURE__ */ e.jsx(T, { className: "Menu__ToggleButtons", "data-testid": s, ...c && { textAlign: "right", w: "50%" }, children: c ? /* @__PURE__ */ e.jsx(e.Fragment, { children: n ? /* @__PURE__ */ e.jsx(he, { hasSelectedItems: n, groupName: o, onToggle: t }) : /* @__PURE__ */ e.jsx(me, { groupName: o, onToggle: t }) }) : /* @__PURE__ */ e.jsxs(z, { justifyContent: "space-between", children: [
+    /* @__PURE__ */ e.jsx(me, { groupName: o, onToggle: t }),
+    /* @__PURE__ */ e.jsx(he, { hasSelectedItems: n, groupName: o, onToggle: t })
   ] }) });
-}, pe = ({ groupName: o, onToggle: n }) => /* @__PURE__ */ e.jsx(Y, { variant: "ghost", size: "xs", onClick: () => n({ groupName: o, clear: !1 }), children: "Select All" }), me = ({ hasSelectedItems: o, groupName: n, onToggle: t }) => /* @__PURE__ */ e.jsx(
-  Y,
+}, me = ({ groupName: o, onToggle: n }) => /* @__PURE__ */ e.jsx(Z, { variant: "ghost", size: "xs", onClick: () => n({ groupName: o, clear: !1 }), children: "Select All" }), he = ({ hasSelectedItems: o, groupName: n, onToggle: t }) => /* @__PURE__ */ e.jsx(
+  Z,
   {
     variant: "ghostNeutral",
     iconName: "arrowCircle",
@@ -507,33 +509,33 @@ const He = ({
     canSelectGroups: S,
     emptyState: C = "No results found",
     groupSortOrder: M,
-    loading: k,
-    maxH: A = "480px",
+    loading: A,
+    maxH: k = "480px",
     menuItems: I = [],
-    minW: Ke = "240px",
+    minW: V = "240px",
     onSearch: w,
-    onSelect: V,
-    onSelectAll: oe,
-    searchable: H,
+    onSelect: H,
+    onSelectAll: re,
+    searchable: K,
     searchPlaceholder: qe = "Search...",
     shouldTruncateText: Je,
-    ...re
-  } = n || {}, [Qe, Ue] = L(!1), [K, q] = L(""), [F, J] = L(I), se = D(() => {
+    ...se
+  } = n || {}, [Qe, Ue] = L(!1), [q, J] = L(""), [F, Q] = L(I), ce = D(() => {
     const r = {};
     return F?.forEach((l) => {
       const d = l.groupLabel || "default", P = l.type === "checkbox" ? "checkbox" : "default";
       r[d] || (r[d] = {}), r[d][P] || (r[d][P] = []), r[d][P].push(l);
     }), r;
-  }, [F]), ce = D(() => {
-    const r = Object.entries(se);
+  }, [F]), ae = D(() => {
+    const r = Object.entries(ce);
     return !M || M.length === 0 ? r : r.sort(([l], [d]) => {
       const P = M.indexOf(l), v = M.indexOf(d);
       return P !== -1 && v !== -1 ? P - v : P !== -1 ? -1 : v !== -1 ? 1 : 0;
     });
-  }, [se, M]), O = D(() => I?.filter((r) => r.type === "checkbox") || [], [I]), Q = j(
+  }, [ce, M]), O = D(() => I?.filter((r) => r.type === "checkbox") || [], [I]), U = j(
     (r) => O.some((l) => l.value === r && l.checked),
     [O]
-  ), b = D(() => O.filter((r) => r.checked), [O]), ae = j(
+  ), b = D(() => O.filter((r) => r.checked), [O]), ie = j(
     ({ groupName: r, clear: l }) => {
       let d;
       const P = F.filter((v) => v.type === "checkbox" && !v.disabled);
@@ -545,47 +547,47 @@ const He = ({
         );
       } else
         d = l ? [] : P.map((v) => ({ ...v, checked: !0 }));
-      console.log("newSelectedItems", d), oe?.({ allSelectedItems: d });
+      console.log("newSelectedItems", d), re?.({ allSelectedItems: d });
     },
-    [oe, F, b]
+    [re, F, b]
   ), Xe = j(
     (r) => {
       if (r.type === "checkbox") {
-        const l = Q(r.value) ? b.filter((d) => d.value !== r.value) : [...b, r];
+        const l = U(r.value) ? b.filter((d) => d.value !== r.value) : [...b, r];
         if (r.onSelect) {
           r.onSelect(r.value);
           return;
         }
-        V?.({ item: r, allSelectedItems: l });
+        H?.({ item: r, allSelectedItems: l });
         return;
       }
       if (r.onSelect) {
         r.onSelect(r.value);
         return;
       }
-      V?.({ item: r, allSelectedItems: [r] });
+      H?.({ item: r, allSelectedItems: [r] });
     },
-    [V, Q, b]
-  ), ie = j((r, l) => r === "" || !r ? l : l.filter((d) => !!(typeof d.label == "string" ? d.label : d.valueText)?.toLowerCase().includes(r.toLowerCase())), []), Ye = j(
+    [H, U, b]
+  ), ue = j((r, l) => r === "" || !r ? l : l.filter((d) => !!(typeof d.label == "string" ? d.label : d.valueText)?.toLowerCase().includes(r.toLowerCase())), []), Ye = j(
     (r) => {
       console.log("e.target.value", r.target.value);
       const l = r.target.value;
-      console.log("searchInput", l), q(l), w && w(r);
+      console.log("searchInput", l), J(l), w && w(r);
     },
     [w]
   ), Ze = j(() => {
-    q(""), w && w({
+    J(""), w && w({
       target: { value: "" }
     });
   }, [w]), et = j(
     (r) => {
-      Ue(r), r || (q(""), J(I)), a && a({ open: r, allSelectedItems: b });
+      Ue(r), r || (J(""), Q(I)), a && a({ open: r, allSelectedItems: b });
     },
     [I, a, b]
   );
   return B(() => {
-    J(w ? I : ie(K, I));
-  }, [K, w, ie, I]), /* @__PURE__ */ e.jsxs(
+    Q(w ? I : ue(q, I));
+  }, [q, w, ue, I]), /* @__PURE__ */ e.jsxs(
     bt,
     {
       lazyMount: u,
@@ -595,21 +597,21 @@ const He = ({
       },
       ...f,
       children: [
-        c || /* @__PURE__ */ e.jsx(kt, { asChild: !0, className: "Menu__Trigger", "data-testid": `${i}-trigger`, children: o?.showTooltip ? /* @__PURE__ */ e.jsx(Gt, { isMenuOpen: Qe, ...o }) : /* @__PURE__ */ e.jsx(He, { ...o }) }),
+        c || /* @__PURE__ */ e.jsx(kt, { asChild: !0, className: "Menu__Trigger", "data-testid": `${i}-trigger`, children: o?.showTooltip ? /* @__PURE__ */ e.jsx(Gt, { isMenuOpen: Qe, ...o }) : /* @__PURE__ */ e.jsx(Ke, { ...o }) }),
         /* @__PURE__ */ e.jsx(ut, { disabled: !s, container: N || void 0, children: /* @__PURE__ */ e.jsx(St, { className: "Menu", "data-testid": i, ...t, children: /* @__PURE__ */ e.jsxs(
           wt,
           {
             className: "Menu__Content",
             "data-testid": `${i}-content`,
-            maxH: A,
-            minW: Ke,
-            ...re,
-            ...H && { pt: "0" },
+            maxH: k,
+            minW: V,
+            ...se,
+            ...K && { pt: "0" },
             onClick: (r) => {
-              r.stopPropagation(), re?.onClick?.(r);
+              r.stopPropagation(), se?.onClick?.(r);
             },
             children: [
-              H && /* @__PURE__ */ e.jsx(
+              K && /* @__PURE__ */ e.jsx(
                 T,
                 {
                   className: "Menu__SearchBarContainer",
@@ -628,7 +630,7 @@ const He = ({
                       placeholder: qe,
                       onChange: Ye,
                       size: "sm",
-                      value: K,
+                      value: q,
                       clearable: !0,
                       onClear: Ze,
                       onKeyDown: (r) => {
@@ -644,18 +646,18 @@ const He = ({
                   className: "Menu__CheckboxGroupHeader",
                   "data-testid": `${i}-checkbox-group-header`,
                   px: 3,
-                  mt: H ? 1 : 2,
+                  mt: K ? 1 : 2,
                   children: y && !!O.length && /* @__PURE__ */ e.jsx(
-                    de,
+                    pe,
                     {
-                      onToggle: ae,
+                      onToggle: ie,
                       hasSelectedItems: !!b.length
                     }
                   )
                 }
               ),
-              k && /* @__PURE__ */ e.jsx(z, { justifyContent: "center", py: 5, children: /* @__PURE__ */ e.jsx(at, { fullScreen: !0 }) }),
-              /* @__PURE__ */ e.jsx(T, { className: "Menu__List", "data-testid": `${i}-list`, children: ce.length ? /* @__PURE__ */ e.jsx(e.Fragment, { children: ce.map(([r, l]) => {
+              A && /* @__PURE__ */ e.jsx(z, { justifyContent: "center", py: 5, children: /* @__PURE__ */ e.jsx(at, { fullScreen: !0 }) }),
+              /* @__PURE__ */ e.jsx(T, { className: "Menu__List", "data-testid": `${i}-list`, children: ae.length ? /* @__PURE__ */ e.jsx(e.Fragment, { children: ae.map(([r, l]) => {
                 const d = r === "default", P = Object.keys(l), v = d ? st.Fragment : yt, tt = l.checkbox?.map(($) => $.value)?.some(
                   ($) => b.some((E) => E.value === $ && E.checked)
                 );
@@ -663,10 +665,10 @@ const He = ({
                   !d && /* @__PURE__ */ e.jsx(At, { children: /* @__PURE__ */ e.jsxs(z, { alignItems: "center", justifyContent: "space-between", children: [
                     r,
                     S && P.includes("checkbox") && /* @__PURE__ */ e.jsx(
-                      de,
+                      pe,
                       {
                         groupName: r,
-                        onToggle: ae,
+                        onToggle: ie,
                         hasSelectedItems: tt
                       }
                     )
@@ -680,7 +682,7 @@ const He = ({
                           ...rt,
                           shouldTruncateText: Je,
                           ...R.type === "checkbox" && {
-                            checked: Q(R.value)
+                            checked: U(R.value)
                           },
                           "data-testid": `${i}-item-${R.label}`,
                           onSelect: () => Xe(R)
@@ -690,7 +692,7 @@ const He = ({
                     })
                   )
                 ] }, r);
-              }) }) : /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsx(T, { p: 3, children: typeof C == "string" ? /* @__PURE__ */ e.jsx(T, { textAlign: "center", children: /* @__PURE__ */ e.jsx(Z, { size: "sm", variant: "subtle", "data-testid": `${i}-empty-state`, children: C }) }) : C }) }) })
+              }) }) : /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsx(T, { p: 3, children: typeof C == "string" ? /* @__PURE__ */ e.jsx(T, { textAlign: "center", children: /* @__PURE__ */ e.jsx(ee, { size: "sm", variant: "subtle", "data-testid": `${i}-empty-state`, children: C }) }) : C }) }) })
             ]
           }
         ) }) })
@@ -701,4 +703,4 @@ const He = ({
 export {
   Ot as M
 };
-//# sourceMappingURL=menu.component-TeC2F3rT.js.map
+//# sourceMappingURL=menu.component-Dd4ePEAs.js.map