@televet/kibble-ui 4.0.0-beta.55 → 4.0.0-beta.57

package/dist/chunks/{menu.component-ElWVN9lO.js → menu.component-C8c5BRFL.js}

@@ -1,14 +1,14 @@
 import { j as e } from "./jsx-runtime-C5mzlN2N.js";
-import Ke, { forwardRef as x, useEffect as _, useId as F, useRef as X, useCallback as I, useState as Z, useMemo as G } from "react";
+import Ke, { forwardRef as x, useEffect as _, useId as F, useRef as X, useCallback as C, useState as Z, useMemo as G } from "react";
 import { B as V } from "./button.component-BpF3MzbZ.js";
 import { I as oe } from "./icon.component-DGNCL1Yc.js";
-import { W as z } from "./text.component-jWLhtW1b.js";
+import { W as z } from "./text.component-BkYord5h.js";
 import { F as y } from "./flex-smlF8uQG.js";
-import { W as Ye } from "./textInput.component-Bvz0qu0P.js";
-import { S as qe } from "./spinner.component-DDmJQo-4.js";
+import { W as Ye } from "./textInput.component-vAoqRc9n.js";
+import { S as qe } from "./spinner.component-BAUK5XQp.js";
 import { B as O } from "./box-Ck9I7FYv.js";
-import { u as Je } from "./tooltip.component-CKJuZ0Rn.js";
-import { W as Qe, u as Ue } from "./checkbox.component-DdLHk4d4.js";
+import { u as Je } from "./tooltip.component-DX7RPrw8.js";
+import { W as Qe, u as Ue } from "./checkbox.component-C5SGTamU.js";
 import { a as N, f as g, b as w, u as W, h as Xe, i as Ze, j as et, k as tt, n as nt, s as re, l as se, m as ae, P as ot } from "./use-locale-context-BnlMA8su.js";
 import { c as rt } from "./create-slot-recipe-context-BJmsuxih.js";
 import { b as st } from "./icons-BXxdrBrf.js";
@@ -19,14 +19,14 @@ const [ce, p] = N({
   hookName: "useMenuContext",
   providerName: "<MenuProvider />",
   strict: !1
-}), ue = x((o, n) => {
-  const t = p(), r = m(t.getArrowProps(), o);
-  return /* @__PURE__ */ e.jsx(g.div, { ...r, ref: n });
+}), ue = x((n, o) => {
+  const t = p(), r = m(t.getArrowProps(), n);
+  return /* @__PURE__ */ e.jsx(g.div, { ...r, ref: o });
 });
 ue.displayName = "MenuArrow";
-const ie = x((o, n) => {
-  const t = p(), r = m(t.getArrowTipProps(), o);
-  return /* @__PURE__ */ e.jsx(g.div, { ...r, ref: n });
+const ie = x((n, o) => {
+  const t = p(), r = m(t.getArrowTipProps(), n);
+  return /* @__PURE__ */ e.jsx(g.div, { ...r, ref: o });
 });
 ie.displayName = "MenuArrowTip";
 const [D, Wt] = N({
@@ -37,8 +37,8 @@ const [D, Wt] = N({
   name: "MenuOptionItemPropsContext",
   hookName: "useMenuOptionItemPropsContext",
   providerName: "<MenuOptionItemPropsProvider />"
-}), me = x((o, n) => {
-  const [t, r] = w()(o, [
+}), me = x((n, o) => {
+  const [t, r] = w()(n, [
     "checked",
     "closeOnSelect",
     "disabled",
@@ -49,66 +49,66 @@ const [D, Wt] = N({
     ...t,
     type: "checkbox"
   }, u = p(), c = m(u.getOptionItemProps(s), r), l = u.getOptionItemState(s);
-  return /* @__PURE__ */ e.jsx(le, { value: s, children: /* @__PURE__ */ e.jsx(D, { value: l, children: /* @__PURE__ */ e.jsx(g.div, { ...c, ref: n }) }) });
+  return /* @__PURE__ */ e.jsx(le, { value: s, children: /* @__PURE__ */ e.jsx(D, { value: l, children: /* @__PURE__ */ e.jsx(g.div, { ...c, ref: o }) }) });
 });
 me.displayName = "MenuCheckboxItem";
-const pe = x((o, n) => {
-  const t = p(), r = W(), s = m(t.getContentProps(), r.getPresenceProps(), o);
-  return r.unmounted ? null : /* @__PURE__ */ e.jsx(g.div, { ...s, ref: Xe(r.ref, n) });
+const pe = x((n, o) => {
+  const t = p(), r = W(), s = m(t.getContentProps(), r.getPresenceProps(), n);
+  return r.unmounted ? null : /* @__PURE__ */ e.jsx(g.div, { ...s, ref: Xe(r.ref, o) });
 });
 pe.displayName = "MenuContent";
-const he = x((o, n) => {
-  const t = p(), r = m(t.getContextTriggerProps(), o);
-  return /* @__PURE__ */ e.jsx(g.button, { ...r, ref: n });
+const he = x((n, o) => {
+  const t = p(), r = m(t.getContextTriggerProps(), n);
+  return /* @__PURE__ */ e.jsx(g.button, { ...r, ref: o });
 });
 he.displayName = "MenuContextTrigger";
-const xe = x((o, n) => {
-  const t = p(), r = m(t.getIndicatorProps(), o);
-  return /* @__PURE__ */ e.jsx(g.div, { ...r, ref: n });
+const xe = x((n, o) => {
+  const t = p(), r = m(t.getIndicatorProps(), n);
+  return /* @__PURE__ */ e.jsx(g.div, { ...r, ref: o });
 });
 xe.displayName = "MenuIndicator";
-const ge = x((o, n) => {
-  const [t, r] = w()(o, [
+const ge = x((n, o) => {
+  const [t, r] = w()(n, [
     "closeOnSelect",
     "disabled",
     "value",
     "valueText",
     "onSelect"
   ]), s = p(), u = m(s.getItemProps(t), r), c = s.getItemState(t);
-  return _(() => s.addItemListener({ id: c.id, onSelect: t.onSelect }), [c.id, t.onSelect]), /* @__PURE__ */ e.jsx(D, { value: c, children: /* @__PURE__ */ e.jsx(g.div, { ...u, ref: n }) });
+  return _(() => s.addItemListener({ id: c.id, onSelect: t.onSelect }), [c.id, t.onSelect]), /* @__PURE__ */ e.jsx(D, { value: c, children: /* @__PURE__ */ e.jsx(g.div, { ...u, ref: o }) });
 });
 ge.displayName = "MenuItem";
 const [Me, fe] = N({
   name: "MenuItemGroupContext",
   hookName: "useMenuItemGroupContext",
   providerName: "<MenuItemGroupProvider />"
-}), Pe = x((o, n) => {
-  const [t, r] = w()(o, ["id"]), s = p(), c = { id: F(), ...t }, l = m(s.getItemGroupProps(c), r);
-  return /* @__PURE__ */ e.jsx(Me, { value: c, children: /* @__PURE__ */ e.jsx(g.div, { ...l, ref: n }) });
+}), Pe = x((n, o) => {
+  const [t, r] = w()(n, ["id"]), s = p(), c = { id: F(), ...t }, l = m(s.getItemGroupProps(c), r);
+  return /* @__PURE__ */ e.jsx(Me, { value: c, children: /* @__PURE__ */ e.jsx(g.div, { ...l, ref: o }) });
 });
 Pe.displayName = "MenuItemGroup";
-const ve = x((o, n) => {
-  const t = p(), r = fe(), s = m(t.getItemGroupLabelProps({ htmlFor: r.id }), o);
-  return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
+const ve = x((n, o) => {
+  const t = p(), r = fe(), s = m(t.getItemGroupLabelProps({ htmlFor: r.id }), n);
+  return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: o });
 });
 ve.displayName = "MenuItemGroupLabel";
-const Ce = x((o, n) => {
-  const t = p(), r = de(), s = m(t.getItemIndicatorProps(r), o);
-  return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
+const Ie = x((n, o) => {
+  const t = p(), r = de(), s = m(t.getItemIndicatorProps(r), n);
+  return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: o });
 });
-Ce.displayName = "MenuItemIndicator";
-const Ie = x((o, n) => {
-  const t = p(), r = de(), s = m(t.getItemTextProps(r), o);
-  return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
+Ie.displayName = "MenuItemIndicator";
+const Ce = x((n, o) => {
+  const t = p(), r = de(), s = m(t.getItemTextProps(r), n);
+  return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: o });
 });
-Ie.displayName = "MenuItemText";
-const je = x((o, n) => {
-  const t = p(), r = m(t.getPositionerProps(), o);
-  return W().unmounted ? null : /* @__PURE__ */ e.jsx(g.div, { ...r, ref: n });
+Ce.displayName = "MenuItemText";
+const je = x((n, o) => {
+  const t = p(), r = m(t.getPositionerProps(), n);
+  return W().unmounted ? null : /* @__PURE__ */ e.jsx(g.div, { ...r, ref: o });
 });
 je.displayName = "MenuPositioner";
-const be = x((o, n) => {
-  const [t, r] = w()(o, [
+const be = x((n, o) => {
+  const [t, r] = w()(n, [
     "closeOnSelect",
     "disabled",
     "value",
@@ -119,31 +119,31 @@ const be = x((o, n) => {
     type: "radio",
     onCheckedChange: () => u.onValueChange?.({ value: t.value })
   }, l = m(s.getOptionItemProps(c), r), M = s.getOptionItemState(c);
-  return /* @__PURE__ */ e.jsx(le, { value: c, children: /* @__PURE__ */ e.jsx(D, { value: M, children: /* @__PURE__ */ e.jsx(g.div, { ...l, ref: n }) }) });
+  return /* @__PURE__ */ e.jsx(le, { value: c, children: /* @__PURE__ */ e.jsx(D, { value: M, children: /* @__PURE__ */ e.jsx(g.div, { ...l, ref: o }) }) });
 });
 be.displayName = "MenuRadioItem";
-const ke = x((o, n) => {
-  const [t, r] = w()(o, [
+const ke = x((n, o) => {
+  const [t, r] = w()(n, [
     "id",
     "onValueChange",
     "value"
   ]), s = p(), c = { id: F(), ...t }, l = m(s.getItemGroupProps({ id: c.id }), r);
-  return /* @__PURE__ */ e.jsx(Me, { value: c, children: /* @__PURE__ */ e.jsx(g.div, { ...l, ref: n }) });
+  return /* @__PURE__ */ e.jsx(Me, { value: c, children: /* @__PURE__ */ e.jsx(g.div, { ...l, ref: o }) });
 });
 ke.displayName = "MenuRadioItemGroup";
-const Se = (o) => {
-  const n = X(o), t = X(!1);
+const Se = (n) => {
+  const o = X(n), t = X(!1);
   _(() => {
-    n.current = o;
+    o.current = n;
   }), _(() => {
-    t.current !== !0 && (t.current = !0, n.current());
+    t.current !== !0 && (t.current = !0, o.current());
   }, []);
-}, ut = (o) => {
-  const n = F(), { getRootNode: t } = Ze(), { dir: r } = et(), s = {
-    id: n,
+}, ut = (n) => {
+  const o = F(), { getRootNode: t } = Ze(), { dir: r } = et(), s = {
+    id: o,
     dir: r,
     getRootNode: t,
-    ...o
+    ...n
   }, u = tt(at, s);
   return { api: ct(u, nt), service: u };
 }, [Ne, we] = N({
@@ -156,8 +156,8 @@ const Se = (o) => {
   hookName: "useMenuMachineContext",
   providerName: "<MenuMachineProvider />",
   strict: !1
-}), lt = (o) => {
-  const [n, t] = re(o), [r, s] = w()(t, [
+}), lt = (n) => {
+  const [o, t] = re(n), [r, s] = w()(t, [
     "anchorPoint",
     "aria-label",
     "closeOnSelect",
@@ -179,38 +179,38 @@ const Se = (o) => {
     "open",
     "positioning",
     "typeahead"
-  ]), u = p(), c = we(), { api: l, service: M } = ut(r), P = se(m({ present: l.open }, n));
+  ]), u = p(), c = we(), { api: l, service: M } = ut(r), P = se(m({ present: l.open }, o));
   Se(() => {
     c && u && (u.setChild(M), l.setParent(c));
   });
-  const b = I(() => u?.getTriggerItemProps(l), [l, u]);
+  const b = C(() => u?.getTriggerItemProps(l), [l, u]);
   return /* @__PURE__ */ e.jsx(Te, { value: b, children: /* @__PURE__ */ e.jsx(Ne, { value: M, children: /* @__PURE__ */ e.jsx(ce, { value: l, children: /* @__PURE__ */ e.jsx(ae, { value: P, ...s }) }) }) });
-}, dt = (o) => {
-  const n = p(), t = we(), [r, { value: s, children: u }] = re(o), { api: c, service: l } = s, M = se(m({ present: c.open }, r));
+}, dt = (n) => {
+  const o = p(), t = we(), [r, { value: s, children: u }] = re(n), { api: c, service: l } = s, M = se(m({ present: c.open }, r));
   Se(() => {
-    t && n && (n.setChild(l), c.setParent(t));
+    t && o && (o.setChild(l), c.setParent(t));
   });
-  const P = I(() => n?.getTriggerItemProps(c), [c, n]);
+  const P = C(() => o?.getTriggerItemProps(c), [c, o]);
   return /* @__PURE__ */ e.jsx(Te, { value: P, children: /* @__PURE__ */ e.jsx(Ne, { value: l, children: /* @__PURE__ */ e.jsx(ce, { value: c, children: /* @__PURE__ */ e.jsx(ae, { value: M, children: u }) }) }) });
-}, ye = x((o, n) => {
-  const t = p(), r = m(t.getSeparatorProps(), o);
-  return /* @__PURE__ */ e.jsx(g.hr, { ...r, ref: n });
+}, ye = x((n, o) => {
+  const t = p(), r = m(t.getSeparatorProps(), n);
+  return /* @__PURE__ */ e.jsx(g.hr, { ...r, ref: o });
 });
 ye.displayName = "MenuSeparator";
-const Ae = x((o, n) => {
+const Ae = x((n, o) => {
   const t = p(), r = W(), s = m(
     {
       ...t.getTriggerProps(),
       "aria-controls": r.unmounted ? void 0 : t.getTriggerProps()["aria-controls"]
     },
-    o
+    n
   );
-  return /* @__PURE__ */ e.jsx(g.button, { ...s, ref: n });
+  return /* @__PURE__ */ e.jsx(g.button, { ...s, ref: o });
 });
 Ae.displayName = "MenuTrigger";
-const Ge = x((o, n) => {
-  const t = it(), r = m(t?.() ?? {}, o);
-  return /* @__PURE__ */ e.jsx(g.div, { ...r, ref: n });
+const Ge = x((n, o) => {
+  const t = it(), r = m(t?.() ?? {}, n);
+  return /* @__PURE__ */ e.jsx(g.div, { ...r, ref: o });
 });
 Ge.displayName = "MenuTriggerItem";
 const {
@@ -267,7 +267,7 @@ const Mt = h(
   { forwardAsChild: !0 }
 ), vt = h(Ge, "item", { forwardAsChild: !0 });
 h(
-  Ie,
+  Ce,
   "itemText",
   { forwardAsChild: !0 }
 );
@@ -275,20 +275,20 @@ h(
   "kbd",
   "itemCommand"
 );
-h(Ce, "itemIndicator", {
+h(Ie, "itemIndicator", {
   forwardAsChild: !0,
   defaultProps: { children: /* @__PURE__ */ e.jsx(st, { boxSize: "4" }) }
 });
-const Ct = h(me, "item", { forwardAsChild: !0 });
+const It = h(me, "item", { forwardAsChild: !0 });
 h(ke, "itemGroup", { forwardAsChild: !0 });
 h(
   be,
   "item",
   { forwardAsChild: !0 }
 );
-const It = ({
-  hideCaret: o = !1,
-  size: n = "md",
+const Ct = ({
+  hideCaret: n = !1,
+  size: o = "md",
   text: t,
   textProps: r,
   variant: s,
@@ -298,9 +298,10 @@ const It = ({
   {
     className: "Menu__Button",
     "data-testid": "kibble-menu-button",
-    size: n,
+    size: o,
     variant: s,
     ...u,
+    ...!t && n && { paddingInline: 0, paddingBlock: 0 },
     children: [
       t && /* @__PURE__ */ e.jsx(
         z,
@@ -308,33 +309,33 @@ const It = ({
           className: "Menu__ButtonText",
           "data-testid": "kibble-menu-button-text",
           fontWeight: "semibold",
-          size: n,
+          size: o,
           color: s ? "inherit" : r?.color || "text.contrast",
           truncate: !0,
           ...r,
           children: t
         }
       ),
-      !o && /* @__PURE__ */ e.jsx(
+      !n && /* @__PURE__ */ e.jsx(
         y,
         {
           className: "Menu__ButtonCaret",
           "data-testid": "kibble-menu-button-caret",
-          children: /* @__PURE__ */ e.jsx(oe, { name: "chevronDown", size: n === "lg" ? "sm" : "xs" })
+          children: /* @__PURE__ */ e.jsx(oe, { name: "chevronDown", size: o === "lg" ? "sm" : "xs" })
         }
       )
     ]
   }
 ), jt = ({
-  label: o,
-  leftElement: n,
+  label: n,
+  leftElement: o,
   onSelect: t,
   shouldTruncateText: r,
   type: s = "default",
   variant: u,
   ...c
 }) => {
-  const l = I(() => {
+  const l = C(() => {
     t && t(c.value);
   }, [t, c.value]);
   if (s === "submenu") {
@@ -353,8 +354,8 @@ const It = ({
               /* @__PURE__ */ e.jsx(
                 L,
                 {
-                  label: o,
-                  leftElement: n,
+                  label: n,
+                  leftElement: o,
                   shouldTruncateText: r,
                   variant: u
                 }
@@ -369,9 +370,9 @@ const It = ({
     );
   }
   if (s === "checkbox") {
-    const { checked: M, value: P, closeOnSelect: b, ...C } = c;
+    const { checked: M, value: P, closeOnSelect: b, ...I } = c;
     return /* @__PURE__ */ e.jsxs(
-      Ct,
+      It,
       {
         className: "Menu__Item--Checkbox",
         "data-testid": "kibble-menu-item-checkbox",
@@ -380,14 +381,14 @@ const It = ({
         onCheckedChange: l,
         closeOnSelect: b || !1,
         gap: 3,
-        ...C,
+        ...I,
         children: [
           /* @__PURE__ */ e.jsx(Qe, { checked: !!M, size: "md", fullWidth: !1 }),
           /* @__PURE__ */ e.jsx(
             L,
             {
-              label: o,
-              leftElement: n,
+              label: n,
+              leftElement: o,
               shouldTruncateText: r,
               variant: u
             }
@@ -414,8 +415,8 @@ const It = ({
         children: /* @__PURE__ */ e.jsx(
           L,
           {
-            label: o,
-            leftElement: n,
+            label: n,
+            leftElement: o,
             shouldTruncateText: r,
             variant: M ? "info" : u
           }
@@ -425,39 +426,39 @@ const It = ({
   }
   return /* @__PURE__ */ e.jsx(e.Fragment, {});
 }, L = ({
-  label: o,
-  leftElement: n,
+  label: n,
+  leftElement: o,
   shouldTruncateText: t,
   variant: r
 }) => /* @__PURE__ */ e.jsxs(y, { className: "Menu__ItemLabel", alignItems: "center", gap: 3, children: [
-  n,
-  typeof o == "string" ? /* @__PURE__ */ e.jsx(z, { size: "sm", truncated: t, variant: r, children: o }) : o
+  o,
+  typeof n == "string" ? /* @__PURE__ */ e.jsx(z, { size: "sm", truncated: t, variant: r, children: n }) : n
 ] }), ee = ({
-  groupName: o,
-  hasSelectedItems: n = !1,
+  groupName: n,
+  hasSelectedItems: o = !1,
   onToggle: t
 }) => {
-  const r = !!o;
+  const r = !!n;
   return /* @__PURE__ */ e.jsx(
     O,
     {
       className: "Menu__ToggleButtons",
       "data-testid": "kibble-menu-toggle-buttons",
       ...r ? { textAlign: "right", w: "50%" } : { mt: 2 },
-      children: r ? /* @__PURE__ */ e.jsx(e.Fragment, { children: n ? /* @__PURE__ */ e.jsx(
+      children: r ? /* @__PURE__ */ e.jsx(e.Fragment, { children: o ? /* @__PURE__ */ e.jsx(
         ne,
         {
-          hasSelectedItems: n,
-          groupName: o,
+          hasSelectedItems: o,
+          groupName: n,
           onToggle: t
         }
-      ) : /* @__PURE__ */ e.jsx(te, { groupName: o, onToggle: t }) }) : /* @__PURE__ */ e.jsxs(y, { justifyContent: "space-between", children: [
-        /* @__PURE__ */ e.jsx(te, { groupName: o, onToggle: t }),
+      ) : /* @__PURE__ */ e.jsx(te, { groupName: n, onToggle: t }) }) : /* @__PURE__ */ e.jsxs(y, { justifyContent: "space-between", children: [
+        /* @__PURE__ */ e.jsx(te, { groupName: n, onToggle: t }),
         /* @__PURE__ */ e.jsx(
           ne,
           {
-            hasSelectedItems: n,
-            groupName: o,
+            hasSelectedItems: o,
+            groupName: n,
             onToggle: t
           }
         )
@@ -465,19 +466,19 @@ const It = ({
     }
   );
 }, te = ({
-  groupName: o,
-  onToggle: n
+  groupName: n,
+  onToggle: o
 }) => /* @__PURE__ */ e.jsx(
   V,
   {
     variant: "ghost",
     size: "xs",
-    onClick: () => n({ groupName: o, clear: !1 }),
+    onClick: () => o({ groupName: n, clear: !1 }),
     children: "Select All"
   }
 ), ne = ({
-  hasSelectedItems: o,
-  groupName: n,
+  hasSelectedItems: n,
+  groupName: o,
   onToggle: t
 }) => /* @__PURE__ */ e.jsx(
   V,
@@ -485,13 +486,13 @@ const It = ({
     variant: "ghostNeutral",
     iconName: "arrowCircle",
     size: "xs",
-    disabled: !o,
-    onClick: () => t({ groupName: n, clear: !0 }),
+    disabled: !n,
+    onClick: () => t({ groupName: o, clear: !0 }),
     children: "Clear All"
   }
 ), bt = ({
-  buttonProps: o,
-  listProps: n,
+  buttonProps: n,
+  listProps: o,
   portalled: t = !1,
   submenuTrigger: r,
   ...s
@@ -502,44 +503,44 @@ const It = ({
     emptyStateText: M = "No results found",
     loading: P,
     maxH: b = "480px",
-    menuItems: C = [],
+    menuItems: I = [],
     minW: _e = "240px",
     onSearch: j,
     onSelect: E,
     onSelectAll: H,
     searchable: K,
     searchPlaceholder: Re = "Search...",
-    shouldTruncateText: $e,
-    ...Be
-  } = n || {}, [R, $] = Z(""), [Y, B] = Z(C), q = G(() => {
+    shouldTruncateText: Be,
+    ...$e
+  } = o || {}, [R, B] = Z(""), [Y, $] = Z(I), q = G(() => {
     const a = {};
     return Y?.forEach((i) => {
       const d = i.groupLabel || "default", f = i.type === "checkbox" ? "checkbox" : "default";
       a[d] || (a[d] = {}), a[d][f] || (a[d][f] = []), a[d][f].push(i);
     }), a;
   }, [Y]), J = G(() => Object.entries(q), [q]), S = G(
-    () => C?.filter((a) => a.type === "checkbox") || [],
-    [C]
+    () => I?.filter((a) => a.type === "checkbox") || [],
+    [I]
   ), Le = G(() => (S?.filter((i) => i.checked) || []).map((i) => i.value), [S]), v = Ue({
     defaultValue: Le
-  }), Q = I(
+  }), Q = C(
     (a, i) => a === "" || !a ? i : i.filter((d) => !!(typeof d.label == "string" ? d.label : d.valueText)?.toLowerCase().includes(a.toLowerCase())),
     []
   );
   _(() => {
-    B(j ? C : Q(R, C));
-  }, [R, j, Q, C]);
-  const Fe = I(
+    $(j ? I : Q(R, I));
+  }, [R, j, Q, I]);
+  const Fe = C(
     (a) => {
       const i = a.target.value;
-      $(i), j && j(a);
+      B(i), j && j(a);
     },
     [j]
-  ), Ve = I(() => {
-    $(""), j && j({
+  ), Ve = C(() => {
+    B(""), j && j({
       target: { value: "" }
     });
-  }, [j]), U = I(
+  }, [j]), U = C(
     ({ groupName: a, clear: i }) => {
       let d = [];
       if (a) {
@@ -550,7 +551,7 @@ const It = ({
       H?.(d), v.setValue(d);
     },
     [S, H, v]
-  ), ze = I(
+  ), ze = C(
     (a) => {
       a.onSelect?.(a.value);
       const i = v.value, d = v.isChecked(a.value);
@@ -560,11 +561,11 @@ const It = ({
       ), a.type === "checkbox" && v.toggleValue(a.value);
     },
     [E, v]
-  ), We = I(
+  ), We = C(
     (a) => {
-      a || ($(""), B(C));
+      a || (B(""), $(I));
     },
-    [C]
+    [I]
   );
   return /* @__PURE__ */ e.jsxs(
     mt,
@@ -580,7 +581,7 @@ const It = ({
             asChild: !0,
             className: "Menu__Trigger",
             "data-testid": "kibble-menu-trigger",
-            children: /* @__PURE__ */ e.jsx(It, { ...o })
+            children: /* @__PURE__ */ e.jsx(Ct, { ...n })
           }
         ),
         /* @__PURE__ */ e.jsx(ot, { disabled: !t, container: u || void 0, children: /* @__PURE__ */ e.jsx(ht, { className: "Menu", "data-testid": "kibble-menu", children: /* @__PURE__ */ e.jsxs(
@@ -590,7 +591,7 @@ const It = ({
             "data-testid": "kibble-menu-content",
             maxH: b,
             minW: _e,
-            ...Be,
+            ...$e,
             children: [
               (K || c) && /* @__PURE__ */ e.jsxs(
                 O,
@@ -653,7 +654,7 @@ const It = ({
                       jt,
                       {
                         ...A,
-                        shouldTruncateText: $e,
+                        shouldTruncateText: Be,
                         ...A.type === "checkbox" && {
                           checked: v.isChecked(A.value)
                         },
@@ -674,4 +675,4 @@ const It = ({
 export {
   bt as M
 };
-//# sourceMappingURL=menu.component-ElWVN9lO.js.map
+//# sourceMappingURL=menu.component-C8c5BRFL.js.map