@televet/kibble-ui 4.0.0-beta.41 → 4.0.0-beta.42

package/dist/chunks/{menu.component-B5OYYpa8.js → menu.component-CSpIl19i.js}

@@ -1,42 +1,42 @@
 import { j as e } from "./jsx-runtime-C5mzlN2N.js";
-import De, { forwardRef as x, useEffect as $, useId as B, useRef as Q, useCallback as j, useState as X, useMemo as y } from "react";
-import { B as F } from "./button.component-BWlRjD5a.js";
-import { I as te } from "./icon.component-BmcWaysM.js";
-import { W as L } from "./text.component-DZkwd4C0.js";
-import { F as w } from "./flex-C2d2LH-K.js";
+import De, { forwardRef as x, useEffect as B, useId as F, useRef as X, useCallback as j, useState as Y, useMemo as y } from "react";
+import { B as L } from "./button.component-BWlRjD5a.js";
+import { I as ne } from "./icon.component-BmcWaysM.js";
+import { W as V } from "./text.component-DZkwd4C0.js";
+import { F as T } from "./flex-C2d2LH-K.js";
 import { W as Ee } from "./textInput.component-c9ySCd-c.js";
 import { S as He } from "./spinner.component-DRQDBF8j.js";
 import { B as A } from "./box-y05hq0PT.js";
 import { W as Ke, u as Ue } from "./checkbox.component-BTG2oHN_.js";
-import { a as k, f as g, b as S, u as V, h as qe, i as Je, j as Qe, k as Xe, n as Ye, s as ne, l as oe, m as se, P as Ze } from "./use-locale-context-zakBNK5b.js";
+import { a as k, f as g, b as S, u as z, h as qe, i as Je, j as Qe, k as Xe, n as Ye, s as oe, l as se, m as re, P as Ze } from "./use-locale-context-zakBNK5b.js";
 import { c as et } from "./create-slot-recipe-context-DJkLYvCT.js";
 import { b as tt } from "./icons-grAfs3Oz.js";
 import { c as nt, m as ot } from "./index-sWaESJRS.js";
 import { U as d } from "./index-DLvqBeH6.js";
-const [re, m] = k({
+const [ae, m] = k({
   name: "MenuContext",
   hookName: "useMenuContext",
   providerName: "<MenuProvider />",
   strict: !1
-}), ae = x((o, n) => {
+}), ce = x((o, n) => {
   const t = m(), s = d(t.getArrowProps(), o);
   return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
 });
-ae.displayName = "MenuArrow";
-const ce = x((o, n) => {
+ce.displayName = "MenuArrow";
+const ue = x((o, n) => {
   const t = m(), s = d(t.getArrowTipProps(), o);
   return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
 });
-ce.displayName = "MenuArrowTip";
-const [z, Bt] = k({
+ue.displayName = "MenuArrowTip";
+const [W, Bt] = k({
   name: "MenuItemContext",
   hookName: "useMenuItemContext",
   providerName: "<MenuItemProvider />"
-}), [ue, ie] = k({
+}), [ie, le] = k({
   name: "MenuOptionItemPropsContext",
   hookName: "useMenuOptionItemPropsContext",
   providerName: "<MenuOptionItemPropsProvider />"
-}), le = x((o, n) => {
+}), de = x((o, n) => {
   const [t, s] = S()(o, [
     "checked",
     "closeOnSelect",
@@ -48,25 +48,25 @@ const [z, Bt] = k({
     ...t,
     type: "checkbox"
   }, u = m(), c = d(u.getOptionItemProps(r), s), l = u.getOptionItemState(r);
-  return /* @__PURE__ */ e.jsx(ue, { value: r, children: /* @__PURE__ */ e.jsx(z, { value: l, children: /* @__PURE__ */ e.jsx(g.div, { ...c, ref: n }) }) });
+  return /* @__PURE__ */ e.jsx(ie, { value: r, children: /* @__PURE__ */ e.jsx(W, { value: l, children: /* @__PURE__ */ e.jsx(g.div, { ...c, ref: n }) }) });
 });
-le.displayName = "MenuCheckboxItem";
-const de = x((o, n) => {
-  const t = m(), s = V(), r = d(t.getContentProps(), s.getPresenceProps(), o);
+de.displayName = "MenuCheckboxItem";
+const me = x((o, n) => {
+  const t = m(), s = z(), r = d(t.getContentProps(), s.getPresenceProps(), o);
   return s.unmounted ? null : /* @__PURE__ */ e.jsx(g.div, { ...r, ref: qe(s.ref, n) });
 });
-de.displayName = "MenuContent";
-const me = x((o, n) => {
+me.displayName = "MenuContent";
+const pe = x((o, n) => {
   const t = m(), s = d(t.getContextTriggerProps(), o);
   return /* @__PURE__ */ e.jsx(g.button, { ...s, ref: n });
 });
-me.displayName = "MenuContextTrigger";
-const pe = x((o, n) => {
+pe.displayName = "MenuContextTrigger";
+const he = x((o, n) => {
   const t = m(), s = d(t.getIndicatorProps(), o);
   return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
 });
-pe.displayName = "MenuIndicator";
-const he = x((o, n) => {
+he.displayName = "MenuIndicator";
+const xe = x((o, n) => {
   const [t, s] = S()(o, [
     "closeOnSelect",
     "disabled",
@@ -74,89 +74,89 @@ const he = x((o, n) => {
     "valueText",
     "onSelect"
   ]), r = m(), u = d(r.getItemProps(t), s), c = r.getItemState(t);
-  return $(() => r.addItemListener({ id: c.id, onSelect: t.onSelect }), [c.id, t.onSelect]), /* @__PURE__ */ e.jsx(z, { value: c, children: /* @__PURE__ */ e.jsx(g.div, { ...u, ref: n }) });
+  return B(() => r.addItemListener({ id: c.id, onSelect: t.onSelect }), [c.id, t.onSelect]), /* @__PURE__ */ e.jsx(W, { value: c, children: /* @__PURE__ */ e.jsx(g.div, { ...u, ref: n }) });
 });
-he.displayName = "MenuItem";
-const [xe, ge] = k({
+xe.displayName = "MenuItem";
+const [ge, Me] = k({
   name: "MenuItemGroupContext",
   hookName: "useMenuItemGroupContext",
   providerName: "<MenuItemGroupProvider />"
-}), Me = x((o, n) => {
-  const [t, s] = S()(o, ["id"]), r = m(), c = { id: B(), ...t }, l = d(r.getItemGroupProps(c), s);
-  return /* @__PURE__ */ e.jsx(xe, { value: c, children: /* @__PURE__ */ e.jsx(g.div, { ...l, ref: n }) });
+}), fe = x((o, n) => {
+  const [t, s] = S()(o, ["id"]), r = m(), c = { id: F(), ...t }, l = d(r.getItemGroupProps(c), s);
+  return /* @__PURE__ */ e.jsx(ge, { value: c, children: /* @__PURE__ */ e.jsx(g.div, { ...l, ref: n }) });
 });
-Me.displayName = "MenuItemGroup";
-const fe = x((o, n) => {
-  const t = m(), s = ge(), r = d(t.getItemGroupLabelProps({ htmlFor: s.id }), o);
-  return /* @__PURE__ */ e.jsx(g.div, { ...r, ref: n });
-});
-fe.displayName = "MenuItemGroupLabel";
+fe.displayName = "MenuItemGroup";
 const Pe = x((o, n) => {
-  const t = m(), s = ie(), r = d(t.getItemIndicatorProps(s), o);
+  const t = m(), s = Me(), r = d(t.getItemGroupLabelProps({ htmlFor: s.id }), o);
   return /* @__PURE__ */ e.jsx(g.div, { ...r, ref: n });
 });
-Pe.displayName = "MenuItemIndicator";
+Pe.displayName = "MenuItemGroupLabel";
 const Ie = x((o, n) => {
-  const t = m(), s = ie(), r = d(t.getItemTextProps(s), o);
+  const t = m(), s = le(), r = d(t.getItemIndicatorProps(s), o);
   return /* @__PURE__ */ e.jsx(g.div, { ...r, ref: n });
 });
-Ie.displayName = "MenuItemText";
+Ie.displayName = "MenuItemIndicator";
 const ve = x((o, n) => {
-  const t = m(), s = d(t.getPositionerProps(), o);
-  return V().unmounted ? null : /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
+  const t = m(), s = le(), r = d(t.getItemTextProps(s), o);
+  return /* @__PURE__ */ e.jsx(g.div, { ...r, ref: n });
 });
-ve.displayName = "MenuPositioner";
+ve.displayName = "MenuItemText";
 const Ce = x((o, n) => {
+  const t = m(), s = d(t.getPositionerProps(), o);
+  return z().unmounted ? null : /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
+});
+Ce.displayName = "MenuPositioner";
+const je = x((o, n) => {
   const [t, s] = S()(o, [
     "closeOnSelect",
     "disabled",
     "value",
     "valueText"
-  ]), r = m(), u = ge(), c = {
+  ]), r = m(), u = Me(), c = {
     ...t,
     checked: u.value === t.value,
     type: "radio",
     onCheckedChange: () => u.onValueChange?.({ value: t.value })
-  }, l = d(r.getOptionItemProps(c), s), f = r.getOptionItemState(c);
-  return /* @__PURE__ */ e.jsx(ue, { value: c, children: /* @__PURE__ */ e.jsx(z, { value: f, children: /* @__PURE__ */ e.jsx(g.div, { ...l, ref: n }) }) });
+  }, l = d(r.getOptionItemProps(c), s), M = r.getOptionItemState(c);
+  return /* @__PURE__ */ e.jsx(ie, { value: c, children: /* @__PURE__ */ e.jsx(W, { value: M, children: /* @__PURE__ */ e.jsx(g.div, { ...l, ref: n }) }) });
 });
-Ce.displayName = "MenuRadioItem";
-const je = x((o, n) => {
+je.displayName = "MenuRadioItem";
+const be = x((o, n) => {
   const [t, s] = S()(o, [
     "id",
     "onValueChange",
     "value"
-  ]), r = m(), c = { id: B(), ...t }, l = d(r.getItemGroupProps({ id: c.id }), s);
-  return /* @__PURE__ */ e.jsx(xe, { value: c, children: /* @__PURE__ */ e.jsx(g.div, { ...l, ref: n }) });
+  ]), r = m(), c = { id: F(), ...t }, l = d(r.getItemGroupProps({ id: c.id }), s);
+  return /* @__PURE__ */ e.jsx(ge, { value: c, children: /* @__PURE__ */ e.jsx(g.div, { ...l, ref: n }) });
 });
-je.displayName = "MenuRadioItemGroup";
-const be = (o) => {
-  const n = Q(o), t = Q(!1);
-  $(() => {
+be.displayName = "MenuRadioItemGroup";
+const ke = (o) => {
+  const n = X(o), t = X(!1);
+  B(() => {
     n.current = o;
-  }), $(() => {
+  }), B(() => {
     t.current !== !0 && (t.current = !0, n.current());
   }, []);
 }, st = (o) => {
-  const n = B(), { getRootNode: t } = Je(), { dir: s } = Qe(), r = {
+  const n = F(), { getRootNode: t } = Je(), { dir: s } = Qe(), r = {
     id: n,
     dir: s,
     getRootNode: t,
     ...o
   }, u = Xe(ot, r);
   return { api: nt(u, Ye), service: u };
-}, [ke, Se] = k({
+}, [Se, Ne] = k({
   name: "MenuMachineContext",
   hookName: "useMenuMachineContext",
   providerName: "<MenuMachineProvider />",
   strict: !1
-}), [Ne, rt] = k({
+}), [Te, rt] = k({
   name: "MenuMachineContext",
   hookName: "useMenuMachineContext",
   providerName: "<MenuMachineProvider />",
   strict: !1
 }), at = (o) => {
-  const [n, t] = ne(o), [s, r] = S()(t, [
+  const [n, t] = oe(o), [s, r] = S()(t, [
     "anchorPoint",
     "aria-label",
     "closeOnSelect",
@@ -178,26 +178,26 @@ const be = (o) => {
     "open",
     "positioning",
     "typeahead"
-  ]), u = m(), c = Se(), { api: l, service: f } = st(s), v = oe(d({ present: l.open }, n));
-  be(() => {
-    c && u && (u.setChild(f), l.setParent(c));
+  ]), u = m(), c = Ne(), { api: l, service: M } = st(s), I = se(d({ present: l.open }, n));
+  ke(() => {
+    c && u && (u.setChild(M), l.setParent(c));
   });
   const P = j(() => u?.getTriggerItemProps(l), [l, u]);
-  return /* @__PURE__ */ e.jsx(Ne, { value: P, children: /* @__PURE__ */ e.jsx(ke, { value: f, children: /* @__PURE__ */ e.jsx(re, { value: l, children: /* @__PURE__ */ e.jsx(se, { value: v, ...r }) }) }) });
+  return /* @__PURE__ */ e.jsx(Te, { value: P, children: /* @__PURE__ */ e.jsx(Se, { value: M, children: /* @__PURE__ */ e.jsx(ae, { value: l, children: /* @__PURE__ */ e.jsx(re, { value: I, ...r }) }) }) });
 }, ct = (o) => {
-  const n = m(), t = Se(), [s, { value: r, children: u }] = ne(o), { api: c, service: l } = r, f = oe(d({ present: c.open }, s));
-  be(() => {
+  const n = m(), t = Ne(), [s, { value: r, children: u }] = oe(o), { api: c, service: l } = r, M = se(d({ present: c.open }, s));
+  ke(() => {
     t && n && (n.setChild(l), c.setParent(t));
   });
-  const v = j(() => n?.getTriggerItemProps(c), [c, n]);
-  return /* @__PURE__ */ e.jsx(Ne, { value: v, children: /* @__PURE__ */ e.jsx(ke, { value: l, children: /* @__PURE__ */ e.jsx(re, { value: c, children: /* @__PURE__ */ e.jsx(se, { value: f, children: u }) }) }) });
+  const I = j(() => n?.getTriggerItemProps(c), [c, n]);
+  return /* @__PURE__ */ e.jsx(Te, { value: I, children: /* @__PURE__ */ e.jsx(Se, { value: l, children: /* @__PURE__ */ e.jsx(ae, { value: c, children: /* @__PURE__ */ e.jsx(re, { value: M, children: u }) }) }) });
 }, we = x((o, n) => {
   const t = m(), s = d(t.getSeparatorProps(), o);
   return /* @__PURE__ */ e.jsx(g.hr, { ...s, ref: n });
 });
 we.displayName = "MenuSeparator";
-const Te = x((o, n) => {
-  const t = m(), s = V(), r = d(
+const ye = x((o, n) => {
+  const t = m(), s = z(), r = d(
     {
       ...t.getTriggerProps(),
       "aria-controls": s.unmounted ? void 0 : t.getTriggerProps()["aria-controls"]
@@ -206,29 +206,29 @@ const Te = x((o, n) => {
   );
   return /* @__PURE__ */ e.jsx(g.button, { ...r, ref: n });
 });
-Te.displayName = "MenuTrigger";
-const ye = x((o, n) => {
+ye.displayName = "MenuTrigger";
+const Ae = x((o, n) => {
   const t = rt(), s = d(t?.() ?? {}, o);
   return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
 });
-ye.displayName = "MenuTriggerItem";
+Ae.displayName = "MenuTriggerItem";
 const {
-  withRootProvider: Ae,
+  withRootProvider: Ge,
   withContext: p
 } = et({ key: "menu" });
-Ae(
+Ge(
   ct
 );
-const ut = Ae(at, {
+const ut = Ge(at, {
   defaultProps: { lazyMount: !0, unmountOnExit: !0 }
 }), it = p(
-  Te,
+  ye,
   "trigger",
   { forwardAsChild: !0 }
 );
-p(me, "contextTrigger", { forwardAsChild: !0 });
+p(pe, "contextTrigger", { forwardAsChild: !0 });
 const lt = p(
-  ve,
+  Ce,
   "positioner",
   { forwardAsChild: !0 }
 );
@@ -238,35 +238,35 @@ p(
   { forwardAsChild: !0 }
 );
 const dt = p(
-  de,
+  me,
   "content",
   { forwardAsChild: !0 }
 ), mt = p(
-  ce,
+  ue,
   "arrowTip",
   { forwardAsChild: !0 }
 );
 p(
-  ae,
+  ce,
   "arrow",
   { forwardAsChild: !0, defaultProps: { children: /* @__PURE__ */ e.jsx(mt, {}) } }
 );
 p(
-  pe,
+  he,
   "indicator",
   { forwardAsChild: !0 }
 );
 const pt = p(
-  Me,
+  fe,
   "itemGroup",
   { forwardAsChild: !0 }
-), ht = p(fe, "itemGroupLabel", { forwardAsChild: !0 }), xt = p(
-  he,
+), ht = p(Pe, "itemGroupLabel", { forwardAsChild: !0 }), xt = p(
+  xe,
   "item",
   { forwardAsChild: !0 }
-), gt = p(ye, "item", { forwardAsChild: !0 });
+), gt = p(Ae, "item", { forwardAsChild: !0 });
 p(
-  Ie,
+  ve,
   "itemText",
   { forwardAsChild: !0 }
 );
@@ -274,14 +274,14 @@ p(
   "kbd",
   "itemCommand"
 );
-p(Pe, "itemIndicator", {
+p(Ie, "itemIndicator", {
   forwardAsChild: !0,
   defaultProps: { children: /* @__PURE__ */ e.jsx(tt, { boxSize: "4" }) }
 });
-const Mt = p(le, "item", { forwardAsChild: !0 });
-p(je, "itemGroup", { forwardAsChild: !0 });
+const Mt = p(de, "item", { forwardAsChild: !0 });
+p(be, "itemGroup", { forwardAsChild: !0 });
 p(
-  Ce,
+  je,
   "item",
   { forwardAsChild: !0 }
 );
@@ -293,7 +293,7 @@ const ft = ({
   variant: r,
   ...u
 }) => /* @__PURE__ */ e.jsxs(
-  F,
+  L,
   {
     className: "Menu__Button",
     "data-testid": "kibble-menu-button",
@@ -302,7 +302,7 @@ const ft = ({
     ...u,
     children: [
       t && /* @__PURE__ */ e.jsx(
-        L,
+        V,
         {
           className: "Menu__ButtonText",
           "data-testid": "kibble-menu-button-text",
@@ -315,11 +315,11 @@ const ft = ({
         }
       ),
       !o && /* @__PURE__ */ e.jsx(
-        w,
+        T,
         {
           className: "Menu__ButtonCaret",
           "data-testid": "kibble-menu-button-caret",
-          children: /* @__PURE__ */ e.jsx(te, { name: "chevronDown", size: n === "lg" ? "sm" : "xs" })
+          children: /* @__PURE__ */ e.jsx(ne, { name: "chevronDown", size: n === "lg" ? "sm" : "xs" })
         }
       )
     ]
@@ -336,7 +336,8 @@ const ft = ({
   const l = j(() => {
     t && t(c.value);
   }, [t, c.value]);
-  if (r === "submenu")
+  if (r === "submenu") {
+    const { valueText: M, listProps: I } = c;
     return /* @__PURE__ */ e.jsx(
       It,
       {
@@ -346,9 +347,10 @@ const ft = ({
             className: "Menu__Item--Submenu",
             "data-testid": "kibble-menu-item-submenu",
             justifyContent: "space-between",
+            "aria-valuetext": M,
             children: [
               /* @__PURE__ */ e.jsx(
-                R,
+                $,
                 {
                   label: o,
                   leftElement: n,
@@ -356,30 +358,32 @@ const ft = ({
                   variant: u
                 }
               ),
-              /* @__PURE__ */ e.jsx(te, { name: "chevronRight", size: "sm" })
+              /* @__PURE__ */ e.jsx(ne, { name: "chevronRight", size: "sm" })
             ]
           }
         ),
-        ...c
+        portalled: !0,
+        listProps: I
       }
     );
+  }
   if (r === "checkbox") {
-    const { checked: f, value: v, ...P } = c;
+    const { checked: M, value: I, closeOnSelect: P, ...G } = c;
     return /* @__PURE__ */ e.jsxs(
       Mt,
       {
         className: "Menu__Item--Checkbox",
         "data-testid": "kibble-menu-item-checkbox",
-        value: v,
-        checked: !!f,
+        value: I,
+        checked: !!M,
         onCheckedChange: l,
-        closeOnSelect: c.closeOnSelect || !1,
+        closeOnSelect: P || !1,
         gap: 3,
-        ...P,
+        ...G,
         children: [
-          /* @__PURE__ */ e.jsx(Ke, { checked: !!f, size: "md" }),
+          /* @__PURE__ */ e.jsx(Ke, { checked: !!M, size: "md" }),
           /* @__PURE__ */ e.jsx(
-            R,
+            $,
             {
               label: o,
               leftElement: n,
@@ -392,38 +396,42 @@ const ft = ({
     );
   }
   if (r === "default") {
-    const { selected: f, value: v, ...P } = c;
+    const {
+      selected: M = !1,
+      value: I,
+      ...P
+    } = c;
     return /* @__PURE__ */ e.jsx(
       xt,
       {
         className: "Menu__Item--Default",
         "data-testid": "kibble-menu-item-default",
-        value: v,
+        value: I,
         onSelect: l,
-        ...f && { bgColor: "background.secondaryAlpha.hover" },
+        ...M && { bgColor: "background.secondaryAlpha.hover" },
         ...P,
         children: /* @__PURE__ */ e.jsx(
-          R,
+          $,
           {
             label: o,
             leftElement: n,
             shouldTruncateText: s,
-            variant: f ? "info" : u
+            variant: M ? "info" : u
           }
         )
       }
     );
   }
   return /* @__PURE__ */ e.jsx(e.Fragment, {});
-}, R = ({
+}, $ = ({
   label: o,
   leftElement: n,
   shouldTruncateText: t,
   variant: s
-}) => /* @__PURE__ */ e.jsxs(w, { className: "Menu__ItemLabel", alignItems: "center", gap: 3, children: [
+}) => /* @__PURE__ */ e.jsxs(T, { className: "Menu__ItemLabel", alignItems: "center", gap: 3, children: [
   n,
-  typeof o == "string" ? /* @__PURE__ */ e.jsx(L, { size: "sm", truncated: t, variant: s, children: o }) : o
-] }), Y = ({
+  typeof o == "string" ? /* @__PURE__ */ e.jsx(V, { size: "sm", truncated: t, variant: s, children: o }) : o
+] }), Z = ({
   groupName: o,
   hasSelectedItems: n = !1,
   onToggle: t
@@ -436,16 +444,16 @@ const ft = ({
       "data-testid": "kibble-menu-toggle-buttons",
       ...s ? { textAlign: "right", w: "50%" } : { mt: 2 },
       children: s ? /* @__PURE__ */ e.jsx(e.Fragment, { children: n ? /* @__PURE__ */ e.jsx(
-        ee,
+        te,
         {
           hasSelectedItems: n,
           groupName: o,
           onToggle: t
         }
-      ) : /* @__PURE__ */ e.jsx(Z, { groupName: o, onToggle: t }) }) : /* @__PURE__ */ e.jsxs(w, { justifyContent: "space-between", children: [
-        /* @__PURE__ */ e.jsx(Z, { groupName: o, onToggle: t }),
+      ) : /* @__PURE__ */ e.jsx(ee, { groupName: o, onToggle: t }) }) : /* @__PURE__ */ e.jsxs(T, { justifyContent: "space-between", children: [
+        /* @__PURE__ */ e.jsx(ee, { groupName: o, onToggle: t }),
         /* @__PURE__ */ e.jsx(
-          ee,
+          te,
           {
             hasSelectedItems: n,
             groupName: o,
@@ -455,23 +463,23 @@ const ft = ({
       ] })
     }
   );
-}, Z = ({
+}, ee = ({
   groupName: o,
   onToggle: n
 }) => /* @__PURE__ */ e.jsx(
-  F,
+  L,
   {
     variant: "ghost",
     size: "xs",
     onClick: () => n({ groupName: o, clear: !1 }),
     children: "Select All"
   }
-), ee = ({
+), te = ({
   hasSelectedItems: o,
   groupName: n,
   onToggle: t
 }) => /* @__PURE__ */ e.jsx(
-  F,
+  L,
   {
     variant: "ghostNeutral",
     iconName: "arrowCircle",
@@ -491,65 +499,65 @@ const ft = ({
     canSelectAll: u,
     canSelectGroups: c,
     emptyStateText: l = "No results found",
-    loading: f,
-    maxH: v = "480px",
+    loading: M,
+    maxH: I = "480px",
     menuItems: P = [],
-    minW: Ge = "240px",
-    onSearch: G,
-    onSelect: W,
-    onSelectAll: D,
-    searchable: E,
+    minW: G = "240px",
+    onSearch: O,
+    onSelect: D,
+    onSelectAll: E,
+    searchable: H,
     searchPlaceholder: Oe = "Search...",
     shouldTruncateText: _e,
     ...Re
-  } = n || {}, [$e, O] = X(""), [H, _] = X(P), K = y(() => {
+  } = n || {}, [$e, _] = Y(""), [K, R] = Y(P), U = y(() => {
     const a = {};
-    return H?.forEach((i) => {
-      const h = i.groupLabel || "default", M = i.type === "checkbox" ? "checkbox" : "default";
-      a[h] || (a[h] = {}), a[h][M] || (a[h][M] = []), a[h][M].push(i);
+    return K?.forEach((i) => {
+      const h = i.groupLabel || "default", f = i.type === "checkbox" ? "checkbox" : "default";
+      a[h] || (a[h] = {}), a[h][f] || (a[h][f] = []), a[h][f].push(i);
     }), a;
-  }, [H]), U = y(() => Object.entries(K), [K]), b = y(
+  }, [K]), q = y(() => Object.entries(U), [U]), b = y(
     () => P?.filter((a) => a.type === "checkbox") || [],
     [P]
-  ), Be = y(() => (b?.filter((i) => i.checked) || []).map((i) => i.value), [b]), I = Ue({
+  ), Be = y(() => (b?.filter((i) => i.checked) || []).map((i) => i.value), [b]), v = Ue({
     defaultValue: Be
-  }), q = j(
+  }), J = j(
     (a) => {
       const i = a.target.value;
-      if (O(i), G)
-        G(a);
+      if (_(i), O)
+        O(a);
       else if (i === "" || !i)
-        _(P);
+        R(P);
       else {
-        const h = P.filter((M) => !!(typeof M.label == "string" ? M.label : M.valueText)?.toLowerCase().includes(i.toLowerCase()));
-        _(h);
+        const h = P.filter((f) => !!(typeof f.label == "string" ? f.label : f.valueText)?.toLowerCase().includes(i.toLowerCase()));
+        R(h);
       }
     },
-    [P, G]
-  ), J = j(
+    [P, O]
+  ), Q = j(
     ({ groupName: a, clear: i }) => {
       let h = [];
       if (a) {
-        const M = b.filter((C) => C.groupLabel === a).map((C) => C.value);
-        h = i ? I.value.filter((C) => !M.includes(C)) : [...I.value, ...M];
+        const f = b.filter((C) => C.groupLabel === a).map((C) => C.value);
+        h = i ? v.value.filter((C) => !f.includes(C)) : [...v.value, ...f];
       } else
-        h = i ? [] : b.map((M) => M.value);
-      D?.(h), I.setValue(h);
+        h = i ? [] : b.map((f) => f.value);
+      E?.(h), v.setValue(h);
     },
-    [b, D, I]
+    [b, E, v]
   ), Fe = j(
     (a) => {
       a.onSelect?.(a.value);
-      const i = I.value, h = I.isChecked(a.value);
-      W?.(
+      const i = v.value, h = v.isChecked(a.value);
+      D?.(
         a.value,
-        h ? i.filter((M) => M !== a.value) : [...i, a.value]
-      ), a.type === "checkbox" && I.toggleValue(a.value);
+        h ? i.filter((f) => f !== a.value) : [...i, a.value]
+      ), a.type === "checkbox" && v.toggleValue(a.value);
     },
-    [W, I]
+    [D, v]
   ), Le = j(
     (a) => {
-      a || (O(""), _(P));
+      a || (_(""), R(P));
     },
     [P]
   );
@@ -575,29 +583,29 @@ const ft = ({
           {
             className: "Menu__Content",
             "data-testid": "kibble-menu-content",
-            maxH: v,
-            minW: Ge,
+            maxH: I,
+            minW: G,
             ...Re,
             children: [
-              (E || u) && /* @__PURE__ */ e.jsxs(
+              (H || u) && /* @__PURE__ */ e.jsxs(
                 A,
                 {
                   className: "Menu__Header",
                   "data-testid": "kibble-menu-header",
                   m: "0 12px 8px",
                   children: [
-                    E && /* @__PURE__ */ e.jsx(
+                    H && /* @__PURE__ */ e.jsx(
                       Ee,
                       {
                         className: "Menu__SearchBar",
                         "data-testid": "kibble-menu-search-bar",
                         placeholder: Oe,
-                        onChange: q,
+                        onChange: J,
                         size: "sm",
                         value: $e,
                         clearable: !0,
                         onClear: () => {
-                          O(""), q({
+                          _(""), J({
                             target: { value: "" }
                           });
                         },
@@ -605,34 +613,34 @@ const ft = ({
                       }
                     ),
                     u && !!b.length && /* @__PURE__ */ e.jsx(
-                      Y,
+                      Z,
                       {
-                        onToggle: J,
-                        hasSelectedItems: !!I.value.length
+                        onToggle: Q,
+                        hasSelectedItems: !!v.value.length
                       }
                     )
                   ]
                 }
               ),
-              f ? /* @__PURE__ */ e.jsx(w, { justifyContent: "center", py: 5, children: /* @__PURE__ */ e.jsx(He, {}) }) : /* @__PURE__ */ e.jsx(A, { className: "Menu__List", "data-testid": "kibble-menu-list", children: U.length ? /* @__PURE__ */ e.jsx(e.Fragment, { children: U.map(([a, i]) => {
-                const h = a === "default", M = Object.keys(i), C = h ? De.Fragment : pt, Ve = i.checkbox?.map(
+              M ? /* @__PURE__ */ e.jsx(T, { justifyContent: "center", py: 5, children: /* @__PURE__ */ e.jsx(He, {}) }) : /* @__PURE__ */ e.jsx(A, { className: "Menu__List", "data-testid": "kibble-menu-list", children: q.length ? /* @__PURE__ */ e.jsx(e.Fragment, { children: q.map(([a, i]) => {
+                const h = a === "default", f = Object.keys(i), C = h ? De.Fragment : pt, Ve = i.checkbox?.map(
                   (N) => N.value
                 )?.some(
-                  (N) => I.value.includes(N)
+                  (N) => v.value.includes(N)
                 );
                 return /* @__PURE__ */ e.jsxs(C, { children: [
                   !h && /* @__PURE__ */ e.jsx(ht, { children: /* @__PURE__ */ e.jsxs(
-                    w,
+                    T,
                     {
                       alignItems: "center",
                       justifyContent: "space-between",
                       children: [
                         a,
-                        c && M.includes("checkbox") && /* @__PURE__ */ e.jsx(
-                          Y,
+                        c && f.includes("checkbox") && /* @__PURE__ */ e.jsx(
+                          Z,
                           {
                             groupName: a,
-                            onToggle: J,
+                            onToggle: Q,
                             hasSelectedItems: Ve
                           }
                         )
@@ -640,21 +648,21 @@ const ft = ({
                     }
                   ) }),
                   Object.entries(i).map(
-                    ([N, ze]) => ze.map((T, We) => /* @__PURE__ */ e.jsx(
+                    ([N, ze]) => ze.map((w, We) => /* @__PURE__ */ e.jsx(
                       Pt,
                       {
-                        ...T,
+                        ...w,
                         shouldTruncateText: _e,
-                        ...T.type === "checkbox" && {
-                          checked: I.isChecked(T.value)
+                        ...w.type === "checkbox" && {
+                          checked: v.isChecked(w.value)
                         },
-                        onSelect: () => Fe(T)
+                        onSelect: () => Fe(w)
                       },
                       `menu-item-${a}-${N}-${We}`
                     ))
                   )
                 ] }, a);
-              }) }) : /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsx(A, { textAlign: "center", p: 3, children: /* @__PURE__ */ e.jsx(L, { size: "sm", variant: "subtle", children: l }) }) }) })
+              }) }) : /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsx(A, { textAlign: "center", p: 3, children: /* @__PURE__ */ e.jsx(V, { size: "sm", variant: "subtle", children: l }) }) }) })
             ]
           }
         ) }) })
@@ -665,4 +673,4 @@ const ft = ({
 export {
   It as M
 };
-//# sourceMappingURL=menu.component-B5OYYpa8.js.map
+//# sourceMappingURL=menu.component-CSpIl19i.js.map