@memobit/libs 3.1.3 → 3.1.5

package/dist/components/ControlPanel/ControlPanelFilter.js

@@ -1,20 +1,21 @@
-import { Icon as g } from "../Icon/Icon2.js";
+import { Icon as b } from "../Icon/Icon2.js";
 import { Button as C } from "../Button/Button2.js";
-import { Chip as A } from "../Chip/Chip2.js";
-import { InputNumber as b } from "../InputNumber/InputNumber2.js";
-import { InputText as k } from "../InputText/InputText2.js";
-import { DatePicker as w } from "../DatePicker/DatePicker2.js";
-import { Dropdown as R } from "../Dropdown/Dropdown2.js";
-import { InputDate as E } from "../InputDate/InputDate2.js";
-import { InputSearch as I } from "../InputSearch/InputSearch2.js";
-import { Rating as L } from "../Rating/Rating2.js";
-import { DEFAULT_DATE_RANGE_PRESETS as M } from "./ControlPanel.types.js";
-import { useEffect as P, useRef as T, useState as N } from "react";
+import { Tooltip as k } from "../Tooltip/Tooltip2.js";
+import { Chip as S } from "../Chip/Chip2.js";
+import { InputNumber as x } from "../InputNumber/InputNumber2.js";
+import { InputText as w } from "../InputText/InputText2.js";
+import { DatePicker as R } from "../DatePicker/DatePicker2.js";
+import { Dropdown as E } from "../Dropdown/Dropdown2.js";
+import { InputDate as L } from "../InputDate/InputDate2.js";
+import { InputSearch as D } from "../InputSearch/InputSearch2.js";
+import { Rating as M } from "../Rating/Rating2.js";
+import { DEFAULT_DATE_RANGE_PRESETS as T } from "./ControlPanel.types.js";
+import { Fragment as P, useEffect as V, useRef as j, useState as A } from "react";
 import { jsx as n, jsxs as _ } from "react/jsx-runtime";
-var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean" ? [] : [e], S = (e) => e.every((r) => typeof r == "number") ? e : e.map(String), x = 2, j = (e) => {
+var H = 3, f = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean" ? [] : [e], I = (e) => e.every((r) => typeof r == "number") ? e : e.map(String), N = 2, U = (e) => {
   const r = e.options ?? [];
-  return D(e.value).map((o) => r.find((t) => t.value === o)?.label ?? String(o));
-}, H = (e) => {
+  return f(e.value).map((o) => r.find((t) => t.value === o)?.label ?? String(o));
+}, B = (e) => {
   const { type: r, value: o } = e;
   if (o == null || o === "") return;
   if (r === "checkbox") return o === !0 ? "On" : void 0;
@@ -28,15 +29,15 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
   }
   if (r === "rating") return typeof o == "number" && o > 0 ? String(o) : void 0;
   if (r === "text" || r === "search" || r === "date" || r === "number") return String(o);
-  const t = j(e);
+  const t = U(e);
   if (t.length !== 0)
-    return t.length <= x ? t.join(", ") : `${t.slice(0, x).join(", ")} +${t.length - x}`;
-}, ne = ({ filter: e, collapsible: r = !1, onChange: o }) => {
-  const t = r && e.type !== "checkbox", [s, d] = N(e.defaultExpanded ?? !1), a = e.summary ?? H(e), i = /* @__PURE__ */ _("span", {
+    return t.length <= N ? t.join(", ") : `${t.slice(0, N).join(", ")} +${t.length - N}`;
+}, te = ({ filter: e, collapsible: r = !1, onChange: o }) => {
+  const t = r && e.type !== "checkbox", [s, d] = A(e.defaultExpanded ?? !1), a = e.summary ?? B(e), i = /* @__PURE__ */ _("span", {
     className: `control-panel__filter-title${e.isActive ? " control-panel__filter-title--active" : ""}`,
     children: [
       e.isActive && /* @__PURE__ */ n("span", { className: "control-panel__filter-active-dot" }),
-      e.icon && /* @__PURE__ */ n(g, { name: e.icon }),
+      e.icon && /* @__PURE__ */ n(b, { name: e.icon }),
       e.label
     ]
   });
@@ -59,19 +60,19 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
         }),
         /* @__PURE__ */ n("span", {
           className: "control-panel__filter-caret",
-          children: /* @__PURE__ */ n(g, { name: s ? "caret-up" : "caret-down" })
+          children: /* @__PURE__ */ n(b, { name: s ? "caret-up" : "caret-down" })
         })
       ]
-    }) : e.type !== "checkbox" && i, (!t || s) && /* @__PURE__ */ n(B, {
+    }) : e.type !== "checkbox" && i, (!t || s) && /* @__PURE__ */ n(z, {
       filter: e,
       onChange: o
     })]
   });
-}, U = ({ placeholder: e, value: r, onChange: o }) => {
-  const [t, s] = N(r), d = T(r);
-  return P(() => {
+}, Y = ({ placeholder: e, value: r, onChange: o }) => {
+  const [t, s] = A(r), d = j(r);
+  return V(() => {
     r !== d.current && (d.current = r, s(r));
-  }, [r]), /* @__PURE__ */ n(I, {
+  }, [r]), /* @__PURE__ */ n(D, {
     className: "control-panel__filter-search",
     onChange: (a) => {
       d.current = a, s(a), o(a);
@@ -79,9 +80,9 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
     placeholder: e,
     value: t
   });
-}, B = ({ filter: e, onChange: r }) => {
-  const o = D(e.value), t = e.options ?? [], [s, d] = N("");
-  if (e.type === "checkbox") return /* @__PURE__ */ n(A, {
+}, z = ({ filter: e, onChange: r }) => {
+  const o = f(e.value), t = e.options ?? [], [s, d] = A("");
+  if (e.type === "checkbox") return /* @__PURE__ */ n(S, {
     count: e.count,
     selected: e.value === !0,
     onClick: () => r({
@@ -91,7 +92,7 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
     }),
     children: e.label
   });
-  if (e.type === "date") return /* @__PURE__ */ n(E, {
+  if (e.type === "date") return /* @__PURE__ */ n(L, {
     min: e.minDate,
     max: e.maxDate,
     value: typeof e.value == "string" ? e.value : "",
@@ -103,7 +104,7 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
   });
   if (e.type === "text") return /* @__PURE__ */ n("div", {
     className: "control-panel__filter-text",
-    children: /* @__PURE__ */ n(k, {
+    children: /* @__PURE__ */ n(w, {
       onChange: (a) => r({
         filterId: e.id,
         type: e.type,
@@ -113,7 +114,7 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
       value: typeof e.value == "string" ? e.value : ""
     })
   });
-  if (e.type === "search") return /* @__PURE__ */ n(U, {
+  if (e.type === "search") return /* @__PURE__ */ n(Y, {
     placeholder: e.placeholder,
     value: typeof e.value == "string" ? e.value : "",
     onChange: (a) => r({
@@ -124,7 +125,7 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
   });
   if (e.type === "number") return /* @__PURE__ */ n("div", {
     className: "control-panel__filter-number",
-    children: /* @__PURE__ */ n(b, {
+    children: /* @__PURE__ */ n(x, {
       min: e.min,
       max: e.max,
       step: e.step,
@@ -137,7 +138,7 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
       })
     })
   });
-  if (e.type === "rating") return /* @__PURE__ */ n(L, {
+  if (e.type === "rating") return /* @__PURE__ */ n(M, {
     selectable: !0,
     icon: e.ratingIcon ?? "star",
     maxRate: e.maxRate ?? 10,
@@ -158,7 +159,7 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
     return /* @__PURE__ */ _("div", {
       className: "control-panel__filter-range",
       children: [
-        /* @__PURE__ */ n(b, {
+        /* @__PURE__ */ n(x, {
           min: e.min,
           max: e.max,
           step: e.step,
@@ -171,7 +172,7 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
           className: "control-panel__filter-range-sep",
           children: "—"
         }),
-        /* @__PURE__ */ n(b, {
+        /* @__PURE__ */ n(x, {
           min: e.min,
           max: e.max,
           step: e.step,
@@ -184,19 +185,19 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
     });
   }
   if (e.type === "date-range") {
-    const a = Array.isArray(e.value) ? e.value : [], i = a[0] || void 0, l = a[1] || void 0, m = e.presets ?? M, p = (c) => {
+    const a = Array.isArray(e.value) ? e.value : [], i = a[0] || void 0, l = a[1] || void 0, m = e.presets ?? T, p = (c) => {
       if (!c) return;
-      const [h, y, $] = c.split("-").map(Number);
-      return new Date(h, y - 1, $);
+      const [h, g, $] = c.split("-").map(Number);
+      return new Date(h, g - 1, $);
     }, u = (c) => `${c.getFullYear()}-${String(c.getMonth() + 1).padStart(2, "0")}-${String(c.getDate()).padStart(2, "0")}`, v = (c, h) => r({
       filterId: e.id,
       type: e.type,
       value: [c ?? "", h ?? ""]
-    }), f = (c) => {
+    }), y = (c) => {
       const h = e.maxDate ? p(e.maxDate) : /* @__PURE__ */ new Date();
       if (!h) return;
-      const y = new Date(h);
-      y.setDate(y.getDate() - c), v(u(y), u(h));
+      const g = new Date(h);
+      g.setDate(g.getDate() - c), v(u(g), u(h));
     };
     return /* @__PURE__ */ _("div", {
       className: "control-panel__filter-date-range",
@@ -205,10 +206,10 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
         children: m.map((c) => /* @__PURE__ */ n(C, {
           size: "small",
           variant: "default",
-          onClick: () => f(c.days),
+          onClick: () => y(c.days),
           children: c.label
         }, c.days))
-      }), /* @__PURE__ */ n(w, {
+      }), /* @__PURE__ */ n(R, {
         mode: "range",
         minDate: p(e.minDate),
         maxDate: p(e.maxDate),
@@ -228,7 +229,7 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
     });
   }
   if (e.type === "dropdown")
-    return !e.multiple && t.length > 0 && t.length <= V ? /* @__PURE__ */ n("div", {
+    return !e.multiple && t.length > 0 && t.length <= H ? /* @__PURE__ */ n("div", {
       className: `control-panel__filter-list ${e.inline ? "control-panel__filter-list--inline" : ""}`,
       children: t.map((a) => {
         const i = e.value === a.value;
@@ -255,7 +256,7 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
                 className: "control-panel__filter-swatch",
                 style: { backgroundColor: a.color }
               }),
-              a.icon && /* @__PURE__ */ n(g, { name: a.icon }),
+              a.icon && /* @__PURE__ */ n(b, { name: a.icon }),
               /* @__PURE__ */ n("span", {
                 className: "control-panel__filter-label",
                 children: a.label
@@ -268,7 +269,7 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
           })
         }, a.value);
       })
-    }) : /* @__PURE__ */ n(R, {
+    }) : /* @__PURE__ */ n(E, {
       className: "control-panel__filter-dropdown",
       multiple: e.multiple,
       name: e.id,
@@ -277,7 +278,7 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
         r({
           filterId: e.id,
           type: e.type,
-          value: Array.isArray(a) ? S(a.map((l) => l.value)) : a?.value ?? null,
+          value: Array.isArray(a) ? I(a.map((l) => l.value)) : a?.value ?? null,
           option: Array.isArray(a) ? null : a,
           options: i
         });
@@ -293,7 +294,7 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
     const a = s.trim().toLowerCase(), i = e.searchable && a ? t.filter((l) => l.label.toLowerCase().includes(a)) : t;
     return /* @__PURE__ */ _("div", {
       className: "control-panel__filter-chips-wrap",
-      children: [e.searchable && t.length > 0 && /* @__PURE__ */ n(I, {
+      children: [e.searchable && t.length > 0 && /* @__PURE__ */ n(D, {
         className: "control-panel__filter-chip-search",
         value: s,
         onChange: d,
@@ -305,23 +306,21 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
           overflowY: "auto"
         } : void 0,
         children: i.map((l) => {
-          const m = o.includes(l.value);
-          return /* @__PURE__ */ _(A, {
+          const m = o.includes(l.value), p = /* @__PURE__ */ _(S, {
             color: l.color,
             count: l.count,
             disabled: l.disabled,
             icon: l.icon,
-            title: l.tooltip,
             selected: m,
             onClick: () => {
               if (l.disabled) return;
-              const p = e.multiple === !1, u = p ? m ? [] : [l.value] : m ? o.filter((v) => v !== l.value) : [...o, l.value];
+              const u = e.multiple === !1, v = u ? m ? [] : [l.value] : m ? o.filter((y) => y !== l.value) : [...o, l.value];
               r({
                 filterId: e.id,
                 type: e.type,
-                value: p ? u[0] ?? null : S(u),
+                value: u ? v[0] ?? null : I(v),
                 option: l,
-                options: t.filter((v) => u.includes(v.value))
+                options: t.filter((y) => v.includes(y.value))
               });
             },
             children: [l.imageUrl && /* @__PURE__ */ n("img", {
@@ -329,7 +328,11 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
               src: l.imageUrl,
               alt: ""
             }), l.label]
-          }, l.value);
+          });
+          return l.tooltip ? /* @__PURE__ */ n(k, {
+            title: l.tooltip,
+            children: p
+          }, l.value) : /* @__PURE__ */ n(P, { children: p }, l.value);
         })
       })]
     });
@@ -363,7 +366,7 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
               className: "control-panel__filter-swatch",
               style: { backgroundColor: a.color }
             }),
-            a.icon && /* @__PURE__ */ n(g, {
+            a.icon && /* @__PURE__ */ n(b, {
               className: "control-panel__filter-icon",
               name: a.icon
             }),
@@ -382,5 +385,5 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
   });
 };
 export {
-  ne as ControlPanelFilterItem
+  te as ControlPanelFilterItem
 };

package/dist/components/Drawer/Drawer2.js

@@ -1,63 +1,74 @@
 import './Drawer.css';
-import { Icon as A } from "../Icon/Icon2.js";
-import { useBodyScrollLock as T } from "../../hooks/useBodyScrollLock.js";
-import { Button as i } from "../Button/Button2.js";
-import { Tooltip as w } from "../Tooltip/Tooltip2.js";
+import { Icon as T } from "../Icon/Icon2.js";
+import { useBodyScrollLock as Z } from "../../hooks/useBodyScrollLock.js";
+import { Button as l } from "../Button/Button2.js";
+import { Tooltip as v } from "../Tooltip/Tooltip2.js";
 /* empty css       */
-import Z, { useEffect as k, useState as V } from "react";
-import { Fragment as W, jsx as r, jsxs as l } from "react/jsx-runtime";
-var X = 1e3, x = 0, Q = ({ isOpen: d, onClose: n, position: b = "left", width: N = "320px", maxWidth: C = "none", margin: I = 0, borderRadius: g = 0, shadow: E = "none", children: p, title: s, icon: c, className: z = "", showOverlay: S = !0, lockScroll: j = !0, hideClose: F = !1, actions: _ = [], onBack: v, backLabel: $ = "Back", primary: t, secondary: a, footer: m }) => {
-  T(d && j);
-  const [B, D] = V(0);
-  if (k(() => {
-    d && (x += 1, D(x));
-  }, [d]), k(() => {
-    const e = (o) => {
-      o.key === "Escape" && d && n();
+import V, { useEffect as b, useState as W } from "react";
+import { Fragment as X, jsx as r, jsxs as i } from "react/jsx-runtime";
+var q = 1e3, N = 0, o = [], U = ({ isOpen: n, onClose: s, position: p = "left", width: g = "320px", maxWidth: C = "none", margin: I = 0, borderRadius: E = 0, shadow: z = "none", children: S, title: c, icon: m, className: j = "", showOverlay: D = !0, lockScroll: F = !0, hideClose: $ = !1, actions: _ = [], onBack: f, backLabel: B = "Back", primary: t, secondary: a, footer: h }) => {
+  Z(n && F);
+  const [w, L] = W(0);
+  if (b(() => {
+    if (!n) return;
+    N += 1;
+    const e = N;
+    return L(e), o.push(e), () => {
+      const d = o.indexOf(e);
+      d !== -1 && o.splice(d, 1);
+    };
+  }, [n]), b(() => {
+    if (!n) return;
+    const e = (d) => {
+      d.key !== "Escape" || o[o.length - 1] !== w || s();
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-  }, [d, n]), !d) return null;
-  const h = (e) => typeof e == "number" ? `${e}px` : e, f = X + B * 2, L = {
-    "--drawer-width": N,
-    "--drawer-max-width": h(C),
-    "--drawer-margin": h(I),
-    "--drawer-border-radius": h(g),
-    "--drawer-shadow": E,
-    zIndex: f + 1
-  }, R = m || t || a;
-  return /* @__PURE__ */ l(W, { children: [S && /* @__PURE__ */ r("div", {
+  }, [
+    n,
+    s,
+    w
+  ]), !n) return null;
+  const u = (e) => typeof e == "number" ? `${e}px` : e, k = q + w * 2, R = {
+    "--drawer-width": g,
+    "--drawer-max-width": u(C),
+    "--drawer-margin": u(I),
+    "--drawer-border-radius": u(E),
+    "--drawer-shadow": z,
+    zIndex: k + 1
+  }, A = h || t || a;
+  return /* @__PURE__ */ i(X, { children: [D && /* @__PURE__ */ r("div", {
     className: "drawer-overlay",
-    onClick: n,
-    style: { zIndex: f }
-  }), /* @__PURE__ */ l("div", {
-    className: `drawer drawer--${b} ${z}`,
-    style: L,
+    onClick: s,
+    style: { zIndex: k }
+  }), /* @__PURE__ */ i("div", {
+    className: `drawer drawer--${p} ${j}`,
+    style: R,
     children: [
-      /* @__PURE__ */ l("div", {
+      /* @__PURE__ */ i("div", {
         className: "drawer__header",
         children: [
-          v && /* @__PURE__ */ r(w, {
-            title: $,
+          f && /* @__PURE__ */ r(v, {
+            title: B,
             position: "bottom",
-            children: /* @__PURE__ */ r(i, {
+            children: /* @__PURE__ */ r(l, {
               className: "drawer__back",
-              onClick: v,
+              onClick: f,
               size: "small",
               variant: "ghost",
               icon: "arrow-left"
             })
           }),
-          (s || c) && /* @__PURE__ */ l("h2", {
+          (c || m) && /* @__PURE__ */ i("h2", {
             className: "drawer__title",
-            children: [c && /* @__PURE__ */ r(A, { name: c }), s && /* @__PURE__ */ r("span", {
+            children: [m && /* @__PURE__ */ r(T, { name: m }), c && /* @__PURE__ */ r("span", {
               className: "drawer__title-text",
-              children: s
+              children: c
             })]
           }),
           _.length > 0 && /* @__PURE__ */ r("div", {
             className: "drawer__header-actions",
             children: _.map((e) => {
-              const o = /* @__PURE__ */ r(i, {
+              const d = /* @__PURE__ */ r(l, {
                 disabled: e.disabled,
                 onClick: e.onClick,
                 icon: e.icon,
@@ -65,20 +76,20 @@ var X = 1e3, x = 0, Q = ({ isOpen: d, onClose: n, position: b = "left", width: N
                 size: e.size ?? "small",
                 variant: e.variant ?? "ghost",
                 children: e.label
-              }), u = e.title ?? e.label;
-              return u ? /* @__PURE__ */ r(w, {
-                title: u,
+              }), x = e.title ?? e.label;
+              return x ? /* @__PURE__ */ r(v, {
+                title: x,
                 position: "bottom",
-                children: o
-              }, e.id) : /* @__PURE__ */ r(Z.Fragment, { children: o }, e.id);
+                children: d
+              }, e.id) : /* @__PURE__ */ r(V.Fragment, { children: d }, e.id);
             })
           }),
-          !F && /* @__PURE__ */ r(w, {
+          !$ && /* @__PURE__ */ r(v, {
             title: "Close drawer",
-            children: /* @__PURE__ */ r(i, {
+            children: /* @__PURE__ */ r(l, {
               className: "drawer__close",
               icon: "clear",
-              onClick: n,
+              onClick: s,
               size: "medium",
               variant: "ghost"
             })
@@ -87,22 +98,22 @@ var X = 1e3, x = 0, Q = ({ isOpen: d, onClose: n, position: b = "left", width: N
       }),
       /* @__PURE__ */ r("div", {
         className: "drawer__content",
-        children: p
+        children: S
       }),
-      R && /* @__PURE__ */ l("div", {
+      A && /* @__PURE__ */ i("div", {
         className: "drawer__footer",
-        children: [m && /* @__PURE__ */ r("div", {
+        children: [h && /* @__PURE__ */ r("div", {
           className: "drawer__footer-content",
-          children: m
-        }), (t || a) && /* @__PURE__ */ l("div", {
+          children: h
+        }), (t || a) && /* @__PURE__ */ i("div", {
           className: "drawer__footer-actions",
-          children: [a && /* @__PURE__ */ r(i, {
+          children: [a && /* @__PURE__ */ r(l, {
             variant: a.variant || "default",
             icon: a.icon,
             disabled: a.disabled,
             onClick: a.onClick,
             children: a.text
-          }), t && /* @__PURE__ */ r(i, {
+          }), t && /* @__PURE__ */ r(l, {
             variant: t.variant || "info",
             icon: t.icon,
             disabled: t.disabled,
@@ -115,5 +126,5 @@ var X = 1e3, x = 0, Q = ({ isOpen: d, onClose: n, position: b = "left", width: N
   })] });
 };
 export {
-  Q as Drawer
+  U as Drawer
 };

package/dist/components/EmojiPicker/EmojiPicker2.js

@@ -1,9 +1,10 @@
 import './EmojiPicker.css';
-import { InputSearch as h } from "../InputSearch/InputSearch2.js";
-import { EMOJI_KEYWORDS as v } from "./emojiKeywords/index.js";
+import { Tooltip as h } from "../Tooltip/Tooltip2.js";
+import { InputSearch as v } from "../InputSearch/InputSearch2.js";
+import { EMOJI_KEYWORDS as _ } from "./emojiKeywords/index.js";
 /* empty css            */
-import { useMemo as _, useState as n } from "react";
-import { jsx as i, jsxs as f } from "react/jsx-runtime";
+import { useMemo as f, useState as a } from "react";
+import { jsx as i, jsxs as k } from "react/jsx-runtime";
 var m = [
   {
     id: "smileys",
@@ -743,18 +744,18 @@ var m = [
       "🈲"
     ]
   }
-], E = ({ value: t, onChange: l }) => {
-  const [o, d] = n(""), [r, j] = n(m[0].id), c = _(() => {
+], A = ({ value: n, onChange: l }) => {
+  const [o, d] = a(""), [r, p] = a(m[0].id), c = f(() => {
     if (!o.trim()) return null;
     const e = o.toLowerCase();
-    return m.flatMap((s) => s.emojis.filter((p) => v[p]?.some((u) => u.includes(e)) || s.name.toLowerCase().includes(e)));
-  }, [o]), a = c ?? m.find((e) => e.id === r)?.emojis ?? [];
-  return /* @__PURE__ */ f("div", {
+    return m.flatMap((s) => s.emojis.filter((j) => _[j]?.some((u) => u.includes(e)) || s.name.toLowerCase().includes(e)));
+  }, [o]), t = c ?? m.find((e) => e.id === r)?.emojis ?? [];
+  return /* @__PURE__ */ k("div", {
     className: "emoji-picker",
     children: [
       /* @__PURE__ */ i("div", {
         className: "emoji-picker__search",
-        children: /* @__PURE__ */ i(h, {
+        children: /* @__PURE__ */ i(v, {
           placeholder: "Search emoji...",
           value: o,
           onChange: d,
@@ -763,20 +764,22 @@ var m = [
       }),
       !c && /* @__PURE__ */ i("div", {
         className: "emoji-picker__categories",
-        children: m.map((e) => /* @__PURE__ */ i("button", {
-          className: `emoji-picker__cat-btn${r === e.id ? " is-active" : ""}`,
+        children: m.map((e) => /* @__PURE__ */ i(h, {
           title: e.name,
-          onClick: () => j(e.id),
-          children: e.icon
+          children: /* @__PURE__ */ i("button", {
+            className: `emoji-picker__cat-btn${r === e.id ? " is-active" : ""}`,
+            onClick: () => p(e.id),
+            children: e.icon
+          })
         }, e.id))
       }),
       /* @__PURE__ */ i("div", {
         className: "emoji-picker__grid",
-        children: a.length === 0 ? /* @__PURE__ */ i("p", {
+        children: t.length === 0 ? /* @__PURE__ */ i("p", {
           className: "emoji-picker__empty",
           children: "No results"
-        }) : a.map((e, s) => /* @__PURE__ */ i("button", {
-          className: `emoji-picker__emoji${t === e ? " is-selected" : ""}`,
+        }) : t.map((e, s) => /* @__PURE__ */ i("button", {
+          className: `emoji-picker__emoji${n === e ? " is-selected" : ""}`,
           onClick: () => l?.(e),
           children: e
         }, s))
@@ -785,5 +788,5 @@ var m = [
   });
 };
 export {
-  E as EmojiPicker
+  A as EmojiPicker
 };