@qodo/design-system 0.20.17 → 0.20.18

package/dist/index.d.ts

@@ -79,12 +79,17 @@ export declare interface ActionItemType extends BaseMenuItemType, TypeGuard<"Act
     isHidden?: boolean;
 }
 
-export declare const ActionsCell: ({ menuItems, triggerElement: TriggerElement, triggerProps, className, size, asChild, side, modal, }: ActionsCellProps) => JSX_2.Element;
+export declare const ActionsCell: ({ menuItems, triggerElement: TriggerElement, triggerProps, className, size, asChild, side, modal, showOnHover, }: ActionsCellProps) => JSX_2.Element;
 
 export declare type ActionsCellProps = OmittedDropdownProps & {
     triggerElement?: FunctionComponent<TriggerProps>;
     className?: string;
     triggerProps?: TriggerProps;
+    /**
+     * Whether to show the actions cell only on row hover
+     * @default true
+     */
+    showOnHover?: boolean;
 };
 
 export declare function Badge({ className, variant, size, disabled, active, ...props }: BadgeProps): JSX_2.Element;
@@ -365,7 +370,7 @@ export declare function DialogTitle({ className, ...props }: React_2.ComponentPr
 
 export declare function DialogTrigger({ ...props }: React_2.ComponentProps<typeof DialogPrimitive.Trigger>): JSX_2.Element;
 
-export declare const Dropdown: ({ menuItems, header, footer, triggerElement, size, asChild, side, modal, disabled, className, }: DropdownProps) => JSX_2.Element;
+export declare const Dropdown: ({ menuItems, header, footer, triggerElement, size, asChild, side, modal, disabled, className, open, onOpenChange, }: DropdownProps) => JSX_2.Element;
 
 declare type DropdownMenuItem = (RadioGroupType | ActionItemType | CheckboxGroupType | SubMenuItemType | MenuLabelType | SeparatorType) & {
     isHidden?: boolean;
@@ -384,6 +389,8 @@ declare interface DropdownProps {
     modal?: boolean;
     disabled?: boolean;
     className?: string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
 }
 
 export declare interface EmailChipProps {

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import * as d from "react";
-import B, { forwardRef as Ve, createElement as Bn, useLayoutEffect as Gl, useState as je, useRef as xe, useCallback as Ne, useEffect as ze, createContext as Ha, useContext as Ua, useMemo as Wn, memo as xg, isValidElement as bg, Children as yg, cloneElement as wg, useId as Cg } from "react";
+import B, { forwardRef as Ve, createElement as Bn, useLayoutEffect as Gl, useState as Se, useRef as xe, useCallback as je, useEffect as ze, createContext as Ha, useContext as Ua, useMemo as Wn, memo as xg, isValidElement as bg, Children as yg, cloneElement as wg, useId as Cg } from "react";
 import * as io from "react-dom";
 import Sg, { flushSync as Ka } from "react-dom";
 const kk = {
@@ -995,7 +995,7 @@ const bi = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, yi = ql, q
     return o(c, f), f;
   };
   return a = s, (...c) => a(Hg(...c));
-}, Kg = [], Ee = (e) => {
+}, Kg = [], Ne = (e) => {
   const t = (r) => r[e] || Kg;
   return t.isThemeGetter = !0, t;
 }, Xl = /^\[(?:(\w[\w-]*):)?(.+)\]$/i, Zl = /^\((?:(\w[\w-]*):)?(.+)\)$/i, Yg = /^\d+\/\d+$/, Xg = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, Zg = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, Jg = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/, Qg = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, ev = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, rr = (e) => Yg.test(e), ue = (e) => !!e && !Number.isNaN(Number(e)), ht = (e) => !!e && Number.isInteger(Number(e)), Qo = (e) => e.endsWith("%") && ue(e.slice(0, -1)), dt = (e) => Xg.test(e), tv = () => !0, rv = (e) => (
@@ -1010,7 +1010,7 @@ const bi = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, yi = ql, q
   const n = Zl.exec(e);
   return n ? n[1] ? t(n[1]) : r : !1;
 }, Ql = (e) => e === "position" || e === "percentage", ec = (e) => e === "image" || e === "url", tc = (e) => e === "length" || e === "size" || e === "bg-size", rc = (e) => e === "length", dv = (e) => e === "number", fv = (e) => e === "family-name", nc = (e) => e === "shadow", pv = () => {
-  const e = Ee("color"), t = Ee("font"), r = Ee("text"), n = Ee("font-weight"), o = Ee("tracking"), a = Ee("leading"), s = Ee("breakpoint"), i = Ee("container"), c = Ee("spacing"), u = Ee("radius"), f = Ee("shadow"), p = Ee("inset-shadow"), m = Ee("text-shadow"), g = Ee("drop-shadow"), h = Ee("blur"), v = Ee("perspective"), x = Ee("aspect"), b = Ee("ease"), y = Ee("animate"), w = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], C = () => [
+  const e = Ne("color"), t = Ne("font"), r = Ne("text"), n = Ne("font-weight"), o = Ne("tracking"), a = Ne("leading"), s = Ne("breakpoint"), i = Ne("container"), c = Ne("spacing"), u = Ne("radius"), f = Ne("shadow"), p = Ne("inset-shadow"), m = Ne("text-shadow"), g = Ne("drop-shadow"), h = Ne("blur"), v = Ne("perspective"), x = Ne("aspect"), b = Ne("ease"), y = Ne("animate"), w = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], C = () => [
     "center",
     "top",
     "bottom",
@@ -3564,7 +3564,7 @@ const yv = Ve(
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Se = (e, t) => {
+const Ee = (e, t) => {
   const r = Ve(
     ({ className: n, ...o }, a) => Bn(yv, {
       ref: a,
@@ -3590,42 +3590,42 @@ const wv = [
   ["path", { d: "M17 20V4", key: "1ejh1v" }],
   ["path", { d: "m3 8 4-4 4 4", key: "11wl7u" }],
   ["path", { d: "M7 4v16", key: "1glfcx" }]
-], Cv = Se("arrow-up-down", wv);
+], Cv = Ee("arrow-up-down", wv);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Sv = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]], br = Se("check", Sv);
+const Sv = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]], br = Ee("check", Sv);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ev = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], lo = Se("chevron-down", Ev);
+const Ev = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], lo = Ee("chevron-down", Ev);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Nv = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]], ac = Se("chevron-left", Nv);
+const Nv = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]], ac = Ee("chevron-left", Nv);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const jv = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]], Xa = Se("chevron-right", jv);
+const jv = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]], Xa = Ee("chevron-right", jv);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Rv = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]], kv = Se("chevron-up", Rv);
+const Rv = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]], kv = Ee("chevron-up", Rv);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
@@ -3635,14 +3635,14 @@ const Rv = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]], kv = Se("chevron-
 const Pv = [
   ["path", { d: "m7 15 5 5 5-5", key: "1hf1tw" }],
   ["path", { d: "m7 9 5-5 5 5", key: "sgt6xg" }]
-], Tv = Se("chevrons-up-down", Pv);
+], Tv = Ee("chevrons-up-down", Pv);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Av = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]], Iv = Se("circle", Av);
+const Av = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]], Iv = Ee("circle", Av);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
@@ -3653,7 +3653,7 @@ const _v = [
   ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
   ["circle", { cx: "19", cy: "12", r: "1", key: "1wjl8i" }],
   ["circle", { cx: "5", cy: "12", r: "1", key: "1pcz8c" }]
-], sc = Se("ellipsis", _v);
+], sc = Ee("ellipsis", _v);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
@@ -3664,7 +3664,7 @@ const Ov = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M12 16v-4", key: "1dtifu" }],
   ["path", { d: "M12 8h.01", key: "e9boi3" }]
-], Mv = Se("info", Ov);
+], Mv = Ee("info", Ov);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
@@ -3675,14 +3675,14 @@ const Dv = [
   ["path", { d: "M3 6h18", key: "d0wm0j" }],
   ["path", { d: "M7 12h10", key: "b7w52i" }],
   ["path", { d: "M10 18h4", key: "1ulq68" }]
-], $v = Se("list-filter", Dv);
+], $v = Ee("list-filter", Dv);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Lv = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]], ic = Se("loader-circle", Lv);
+const Lv = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]], ic = Ee("loader-circle", Lv);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
@@ -3692,14 +3692,14 @@ const Lv = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]], ic =
 const Fv = [
   ["path", { d: "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7", key: "132q7q" }],
   ["rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", key: "izxlao" }]
-], Vv = Se("mail", Fv);
+], Vv = Ee("mail", Fv);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Bv = [["path", { d: "M5 12h14", key: "1ays0h" }]], Wv = Se("minus", Bv);
+const Bv = [["path", { d: "M5 12h14", key: "1ays0h" }]], Wv = Ee("minus", Bv);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
@@ -3709,7 +3709,7 @@ const Bv = [["path", { d: "M5 12h14", key: "1ays0h" }]], Wv = Se("minus", Bv);
 const Gv = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-], lc = Se("search", Gv);
+], lc = Ee("search", Gv);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
@@ -3725,7 +3725,7 @@ const zv = [
     }
   ],
   ["circle", { cx: "7.5", cy: "7.5", r: ".5", fill: "currentColor", key: "kqv944" }]
-], qv = Se("tag", zv);
+], qv = Ee("tag", zv);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
@@ -3738,7 +3738,7 @@ const Hv = [
   ["path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2", key: "v07s0e" }],
   ["line", { x1: "10", x2: "10", y1: "11", y2: "17", key: "1uufr5" }],
   ["line", { x1: "14", x2: "14", y1: "11", y2: "17", key: "xtxkd" }]
-], Uv = Se("trash-2", Hv);
+], Uv = Ee("trash-2", Hv);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
@@ -3749,7 +3749,7 @@ const Kv = [
   ["path", { d: "M3 6h18", key: "d0wm0j" }],
   ["path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6", key: "4alrt4" }],
   ["path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2", key: "v07s0e" }]
-], Yv = Se("trash", Kv);
+], Yv = Ee("trash", Kv);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
@@ -3766,7 +3766,7 @@ const Xv = [
   ],
   ["path", { d: "M12 9v4", key: "juzpu7" }],
   ["path", { d: "M12 17h.01", key: "p32p05" }]
-], Zv = Se("triangle-alert", Xv);
+], Zv = Ee("triangle-alert", Xv);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
@@ -3776,7 +3776,7 @@ const Xv = [
 const Jv = [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-], co = Se("x", Jv);
+], co = Ee("x", Jv);
 function K(e, t, { checkForDefaultPrevented: r = !0 } = {}) {
   return function(o) {
     if (e == null || e(o), r === !1 || !o.defaultPrevented)
@@ -6615,7 +6615,7 @@ function ia(e, t) {
   return typeof e == "function" ? e(t) : e && (e.current = t), e;
 }
 function Vb(e, t) {
-  var r = je(function() {
+  var r = Se(function() {
     return {
       // value
       value: e,
@@ -12131,7 +12131,7 @@ function eo(e, t, r) {
 }
 eo.globalOptions = void 0;
 function Ds(e = {}, t = []) {
-  const r = xe(e), n = xe(t), [o, a] = je(), [s, i] = je(), c = Ne(() => {
+  const r = xe(e), n = xe(t), [o, a] = Se(), [s, i] = Se(), c = je(() => {
     o && o.reInit(r.current, n.current);
   }, [o]);
   return ze(() => {
@@ -13538,7 +13538,7 @@ const v1 = B.forwardRef(
   onResetTags: w = () => {
   }
 }) => {
-  const [C, E] = je(""), [R, N] = je(!1), j = xe(null), D = xe(null), V = xe(null), [W, Q] = je();
+  const [C, E] = Se(""), [R, N] = Se(!1), j = xe(null), D = xe(null), V = xe(null), [W, Q] = Se();
   ze(() => {
     D.current && Q(D.current.offsetWidth);
   }, []);
@@ -14295,7 +14295,7 @@ function aN({
   contentMaxWidth: R,
   ...N
 }) {
-  const [j, D] = je(0), [V, W] = je(!1), [Q, ee] = je(""), G = xe(null), O = a === vl.MULTIPLE, [I, M] = je(
+  const [j, D] = Se(0), [V, W] = Se(!1), [Q, ee] = Se(""), G = xe(null), O = a === vl.MULTIPLE, [I, M] = Se(
     e !== void 0 ? e : O ? [] : ""
   ), P = YE(I), _ = new Set(P);
   ze(() => {
@@ -14759,7 +14759,7 @@ function ON(e) {
 }
 var MN = () => (e) => Array.from(new Set(e)), $p = typeof globalThis.document < "u" ? Gl : ze;
 function oo(e) {
-  const t = e().value ?? e().defaultValue, r = e().isEqual ?? Object.is, [n] = je(t), [o, a] = je(n), s = e().value !== void 0, i = xe(o);
+  const t = e().value ?? e().defaultValue, r = e().isEqual ?? Object.is, [n] = Se(t), [o, a] = Se(n), s = e().value !== void 0, i = xe(o);
   i.current = s ? e().value : o;
   const c = xe(i.current);
   $p(() => {
@@ -16044,7 +16044,7 @@ const kj = ({
   table: e,
   isLoading: t = !1
 }) => {
-  const r = e.getPageCount(), n = e.getState().pagination.pageIndex + 1, [o, a] = je(r);
+  const r = e.getPageCount(), n = e.getState().pagination.pageIndex + 1, [o, a] = Se(r);
   ze(() => {
     r >= 1 && a(r);
   }, [r]);
@@ -16072,7 +16072,7 @@ const kj = ({
         t && b
       )
     };
-  }, [n, r, t]), i = Ne(
+  }, [n, r, t]), i = je(
     (g) => {
       if (t) return;
       const h = g - 1;
@@ -16082,11 +16082,11 @@ const kj = ({
       }));
     },
     [e, t]
-  ), c = Ne(() => {
+  ), c = je(() => {
     t || n <= 1 || i(n - 1);
-  }, [n, i, t]), u = Ne(() => {
+  }, [n, i, t]), u = je(() => {
     t || r <= 1 || n >= r || i(n + 1);
-  }, [r, n, i, t]), f = Ne(
+  }, [r, n, i, t]), f = je(
     (g) => {
       if (g <= 1)
         return [];
@@ -16118,7 +16118,7 @@ const kj = ({
       return f(g);
     }
     return f(r);
-  }, [r, o, f]), m = Ne(
+  }, [r, o, f]), m = je(
     (g, h) => g === "ellipsis" ? /* @__PURE__ */ l.jsx(Gr, { children: /* @__PURE__ */ l.jsx(om, {}) }, `ellipsis-${h}`) : /* @__PURE__ */ l.jsx(
       Gr,
       {
@@ -16180,7 +16180,7 @@ function Tj({
   threshold: o,
   findScrollableContainer: a
 }) {
-  const s = xe(null), [i, c] = je(!1), [u, f] = je(!0), p = xe(null), m = xe(!1), g = r !== void 0 ? r : u, h = Ne(async () => {
+  const s = xe(null), [i, c] = Se(!1), [u, f] = Se(!0), p = xe(null), m = xe(!1), g = r !== void 0 ? r : u, h = je(async () => {
     if (!(!t || m.current || !g)) {
       m.current = !0, c(!0);
       try {
@@ -16259,7 +16259,7 @@ const Aj = 150, On = {
   className: y,
   ...w
 }) => {
-  const C = e.getVisibleFlatColumns().length, E = g === On.PAGINATION && e.options.manualPagination && e.options.onPaginationChange, R = e.getRowModel().rows.length === 0, N = e.getCoreRowModel().rows.length === 0 && !o, j = !o && (a || N || R), D = "hover:bg-transparent cursor-default", V = xe(null), W = Ne(() => V.current ? V.current.querySelector(
+  const C = e.getVisibleFlatColumns().length, E = g === On.PAGINATION && e.options.manualPagination && e.options.onPaginationChange, R = e.getRowModel().rows.length === 0, N = e.getCoreRowModel().rows.length === 0 && !o, j = !o && (a || N || R), D = "hover:bg-transparent cursor-default", V = xe(null), W = je(() => V.current ? V.current.querySelector(
     "[data-table-scroll-container]"
   ) || V.current : null, []), { loadMoreRef: Q, hasMore: ee } = Tj({
     enabled: g === On.INFINITE_SCROLL,
@@ -16384,7 +16384,7 @@ const Aj = 150, On = {
   children: t,
   tooltipContent: r
 }) => {
-  const [n, o] = je(!1), a = e.getCanSort();
+  const [n, o] = Se(!1), a = e.getCanSort();
   let s = t;
   return r && (s = /* @__PURE__ */ l.jsxs("div", { className: "flex items-center gap-1", children: [
     /* @__PURE__ */ l.jsx("span", { children: t }),
@@ -17512,9 +17512,11 @@ const tk = ({ radioItem: e }) => /* @__PURE__ */ l.jsxs(
   side: s = "bottom",
   modal: i = !1,
   disabled: c = !1,
-  className: u = ""
+  className: u = "",
+  open: f,
+  onOpenChange: p
 }) => {
-  const f = gv(
+  const m = gv(
     ck,
     {
       [o]: o,
@@ -17522,7 +17524,7 @@ const tk = ({ radioItem: e }) => /* @__PURE__ */ l.jsxs(
     },
     !1
   );
-  return /* @__PURE__ */ l.jsx("div", { className: k("qodo qodo-dropdown"), children: /* @__PURE__ */ l.jsxs(YR, { modal: i, children: [
+  return /* @__PURE__ */ l.jsx("div", { className: k("qodo qodo-dropdown"), children: /* @__PURE__ */ l.jsxs(YR, { modal: i, open: f, onOpenChange: p, children: [
     /* @__PURE__ */ l.jsx(
       XR,
       {
@@ -17537,10 +17539,10 @@ const tk = ({ radioItem: e }) => /* @__PURE__ */ l.jsxs(
       {
         side: s,
         align: "end",
-        className: f,
+        className: m,
         children: [
           /* @__PURE__ */ l.jsx(dk, { header: t }),
-          e.filter((p) => !p.isHidden).map((p, m) => cg(p, m)),
+          e.filter((g) => !g.isHidden).map((g, h) => cg(g, h)),
           /* @__PURE__ */ l.jsx(fk, { footer: r })
         ]
       }
@@ -17554,9 +17556,9 @@ const tk = ({ radioItem: e }) => /* @__PURE__ */ l.jsxs(
   Ze,
   {
     variant: "ghost",
-    size: "icon",
+    size: "icon-sm",
     "aria-label": e,
-    className: k("flex items-center justify-center h-4 w-4", t),
+    className: k("flex items-center justify-center", t),
     ...r,
     children: /* @__PURE__ */ l.jsx(sc, { className: "h-4 w-4" })
   }
@@ -17568,28 +17570,47 @@ const tk = ({ radioItem: e }) => /* @__PURE__ */ l.jsxs(
   size: o = "s",
   asChild: a = !1,
   side: s = "bottom",
-  modal: i = !1
-}) => /* @__PURE__ */ l.jsx("div", { className: n, onClick: (c) => c.stopPropagation(), children: /* @__PURE__ */ l.jsx(
-  pk,
-  {
-    triggerElement: /* @__PURE__ */ l.jsx(
-      t,
-      {
-        className: k(
-          "flex items-center justify-center",
-          r == null ? void 0 : r.className
-        ),
-        ...r
-      }
-    ),
-    menuItems: e,
-    size: o,
-    asChild: a,
-    side: s,
-    modal: i,
-    disabled: r == null ? void 0 : r.disabled
-  }
-) }), gk = {
+  modal: i = !1,
+  showOnHover: c = !0
+}) => {
+  const [u, f] = Se(!1);
+  return /* @__PURE__ */ l.jsx(
+    "div",
+    {
+      className: k(
+        "flex justify-end",
+        {
+          "opacity-0 group-hover:opacity-100 transition-opacity": c && !u,
+          "opacity-100": c && u
+        },
+        n
+      ),
+      onClick: (p) => p.stopPropagation(),
+      children: /* @__PURE__ */ l.jsx(
+        pk,
+        {
+          triggerElement: /* @__PURE__ */ l.jsx(
+            t,
+            {
+              className: k(
+                "flex items-center justify-center",
+                r == null ? void 0 : r.className
+              ),
+              ...r
+            }
+          ),
+          menuItems: e,
+          size: o,
+          asChild: a,
+          side: s,
+          modal: i,
+          disabled: r == null ? void 0 : r.disabled,
+          onOpenChange: f
+        }
+      )
+    }
+  );
+}, gk = {
   // Password Manager Blocking (all valid data attributes)
   "data-lpignore": "true",
   "data-1p-ignore": "true",
@@ -17668,17 +17689,17 @@ const tk = ({ radioItem: e }) => /* @__PURE__ */ l.jsxs(
   },
   organization: t
 }) => {
-  const [r, n] = je([]), o = Ne(
+  const [r, n] = Se([]), o = je(
     (u) => {
       e(u);
     },
     [e]
-  ), a = Ne(
+  ), a = je(
     (u) => {
       n(u), o(u);
     },
     [o]
-  ), s = Ne(
+  ), s = je(
     (u) => {
       const f = xk(u);
       if (f.length === 0)
@@ -17687,9 +17708,9 @@ const tk = ({ radioItem: e }) => /* @__PURE__ */ l.jsxs(
       a(p);
     },
     [r, a, t]
-  ), i = Ne(() => {
+  ), i = je(() => {
     a([]);
-  }, [a]), c = Ne(
+  }, [a]), c = je(
     (u) => {
       const f = r.filter(
         (p) => p.email !== u
@@ -17857,7 +17878,7 @@ const tk = ({ radioItem: e }) => /* @__PURE__ */ l.jsxs(
   invalidEmailError: c = "Invalid email",
   invalidDomainError: u = "Email domain is not allowed"
 }) => {
-  const f = xe(null), p = xe(null), [m, g] = je(""), [h, v] = je(!1), { emails: x, setEmails: b, addTokens: y, removeToken: w, clearAll: C, notify: E } = Ck({ onChange: e, organization: o }), R = Sk({
+  const f = xe(null), p = xe(null), [m, g] = Se(""), [h, v] = Se(!1), { emails: x, setEmails: b, addTokens: y, removeToken: w, clearAll: C, notify: E } = Ck({ onChange: e, organization: o }), R = Sk({
     draft: m,
     setDraft: g,
     addTokens: y,
@@ -17871,25 +17892,25 @@ const tk = ({ radioItem: e }) => /* @__PURE__ */ l.jsxs(
     var J;
     const U = ((J = o == null ? void 0 : o.domains) == null ? void 0 : J[0]) || "example.com";
     return r({ domain: U });
-  }, j = Ne(
+  }, j = je(
     (U) => {
       g(U.target.value);
     },
     []
-  ), D = Ne(() => {
+  ), D = je(() => {
     m.trim() && (y(m), g("")), v(!1);
-  }, [m, y]), V = Ne(
+  }, [m, y]), V = je(
     (U) => {
       const J = U.clipboardData.getData("text");
       J && (U.preventDefault(), y(J), g(""));
     },
     [y]
-  ), W = Ne(() => {
+  ), W = je(() => {
     var U;
     (U = p.current) == null || U.focus();
-  }, [p]), Q = Ne(() => {
+  }, [p]), Q = je(() => {
     v(!1);
-  }, []), ee = Ne(
+  }, []), ee = je(
     (U) => {
       var T;
       const J = U.relatedTarget;