@layers-app/shared 0.3.5 → 0.3.6

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -3,6 +3,7 @@ import { ColorPickerList } from './ColorPickerList';
 import type { ColorItem } from './types';
 interface ColorCircleProps extends Omit<ColorSwatchProps, 'color'>, Omit<React.ComponentPropsWithoutRef<'div'>, keyof Omit<ColorSwatchProps, 'color'>> {
     value?: string | null;
+    label?: string;
     isActive?: boolean;
     swatchShape?: 'circle' | 'square';
     swatchVariant?: 'filled' | 'outline';

package/dist/components/ColorPicker/ColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,EAIL,gBAAgB,EAEhB,SAAS,EAKV,MAAM,eAAe,CAAC;AAMvB,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAgHzC,UAAU,gBACR,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,EACrC,IAAI,CACF,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EACrC,MAAM,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,CACtC;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAClC,aAAa,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,WAAW,6GAmDvB,CAAC;AASF,eAAO,MAAM,WAAW;YAvLd,MAAM,GAAG,IAAI;eACV,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;uBACX,OAAO;aACjB,SAAS,EAAE;kBACN,QAAQ,GAAG,QAAQ;oBACjB,QAAQ,GAAG,SAAS;eACzB,OAAO;gBACN,OAAO;iBACN,MAAM;;;;;CAmLnB,CAAC"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,EAIL,gBAAgB,EAEhB,SAAS,EAKV,MAAM,eAAe,CAAC;AAMvB,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAiHzC,UAAU,gBACR,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,EACrC,IAAI,CACF,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EACrC,MAAM,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,CACtC;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAClC,aAAa,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,WAAW,6GAmDvB,CAAC;AASF,eAAO,MAAM,WAAW;YAzLd,MAAM,GAAG,IAAI;eACV,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;uBACX,OAAO;aACjB,SAAS,EAAE;kBACN,QAAQ,GAAG,QAAQ;oBACjB,QAAQ,GAAG,SAAS;eACzB,OAAO;gBACN,OAAO;iBACN,MAAM;;;;;CAqLnB,CAAC"}

package/dist/components/ColorPicker/ColorPicker.js

@@ -1,34 +1,34 @@
-import { jsx as e, jsxs as f } from "react/jsx-runtime";
-import { forwardRef as g, useState as b } from "react";
-import { Tick02Icon as $ } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon as j } from "@hugeicons/react";
-import { useMantineTheme as y, getThemeColor as A, Flex as h, Tooltip as E, ColorSwatch as R, parseThemeColor as D, ColorInput as F, ActionIcon as x } from "@mantine/core";
-import { IconPalette as H, IconPencil as M } from "@tabler/icons-react";
-import U from "styled-components";
-import { DEFAULT_VALUES as v } from "../../constants.js";
-import { ColorPickerToolbar as V } from "./ColorPickerToolbar.js";
-import { ColorPickerList as q } from "./ColorPickerList.js";
-import { normalizeColorItem as _ } from "./types.js";
-const B = g(
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import { forwardRef as y, useState as x } from "react";
+import { Tick02Icon as j } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as A } from "@hugeicons/react";
+import { useMantineTheme as w, getThemeColor as E, Flex as C, Tooltip as R, ColorSwatch as D, parseThemeColor as F, ColorInput as H, ActionIcon as v } from "@mantine/core";
+import { IconPalette as M, IconPencil as U } from "@tabler/icons-react";
+import V from "styled-components";
+import { DEFAULT_VALUES as g } from "../../constants.js";
+import { ColorPickerToolbar as q } from "./ColorPickerToolbar.js";
+import { ColorPickerList as _ } from "./ColorPickerList.js";
+import { normalizeColorItem as B } from "./types.js";
+const G = y(
   ({
     value: o,
-    onChange: i,
+    onChange: l,
     allowCustomColor: n,
-    colors: c,
+    colors: s,
     swatchShape: a = "circle",
     swatchVariant: m = "filled",
     withTick: d = !1,
-    fullWidth: l = !1,
-    swatchSize: p = 30,
+    fullWidth: p = !1,
+    swatchSize: i = 30,
     ...u
-  }, r) => {
-    const t = y(), k = D({
-      color: o || v.COLORS[0],
-      theme: t
-    }), [z, I] = b(k.value), [O, C] = b(!1);
-    return O ? /* @__PURE__ */ f(h, { align: "center", mih: 30, children: [
+  }, f) => {
+    const r = w(), t = F({
+      color: o || g.COLORS[0],
+      theme: r
+    }), [z, I] = x(t.value), [O, b] = x(!1);
+    return O ? /* @__PURE__ */ h(C, { align: "center", mih: 30, children: [
       /* @__PURE__ */ e(
-        F,
+        H,
         {
           w: "100%",
           popoverProps: {
@@ -40,54 +40,55 @@ const B = g(
           size: "xs",
           value: z,
           onChange: I,
-          onChangeEnd: i,
+          onChangeEnd: l,
           placeholder: "Select custom color"
         }
       ),
       /* @__PURE__ */ e(
-        x,
+        v,
         {
           radius: "xl",
           variant: "default",
           color: "gray",
-          onClick: () => C(!1),
-          children: /* @__PURE__ */ e(H, { size: 16 })
+          onClick: () => b(!1),
+          children: /* @__PURE__ */ e(M, { size: 16 })
         }
       )
-    ] }, 1) : /* @__PURE__ */ f(
-      h,
+    ] }, 1) : /* @__PURE__ */ h(
+      C,
       {
-        ref: r,
+        ref: f,
         ...u,
-        justify: l ? "space-between" : "flex-start",
+        justify: p ? "space-between" : "flex-start",
         align: "center",
         children: [
-          (c || v.COLORS).map((P, S) => {
-            const { value: s, border: T, bg: L } = _(P);
+          (s || g.COLORS).map((P, S) => {
+            const { value: c, border: T, bg: L, label: $ } = B(P);
             return /* @__PURE__ */ e(
-              G,
+              J,
               {
-                value: s,
-                isActive: s === o,
-                size: p - 4,
+                value: c,
+                label: $,
+                isActive: c === o,
+                size: i - 4,
                 swatchShape: a,
                 swatchVariant: m,
                 withTick: d,
                 borderColor: T,
                 bgColor: L,
-                onClick: () => i?.(s)
+                onClick: () => l?.(c)
               },
-              s || S
+              c || S
             );
           }),
           n && /* @__PURE__ */ e(
-            x,
+            v,
             {
               radius: "xl",
               variant: "default",
               color: "gray",
-              onClick: () => C(!0),
-              children: /* @__PURE__ */ e(M, { size: 16 })
+              onClick: () => b(!0),
+              children: /* @__PURE__ */ e(U, { size: 16 })
             }
           )
         ]
@@ -95,15 +96,15 @@ const B = g(
       2
     );
   }
-), w = g(
-  ({ value: o, isActive: i, swatchShape: n, swatchVariant: c = "filled", withTick: a, borderColor: m, bgColor: d, ...l }, p) => {
-    const u = y(), r = o ? A(o, u) : "", t = c === "outline";
-    return /* @__PURE__ */ e(h, { w: l.size || 24, h: l.size || 24, justify: "center", align: "center", style: { position: "relative" }, children: /* @__PURE__ */ e(E, { label: o || "", withArrow: !0, children: /* @__PURE__ */ f(
-      R,
+), k = y(
+  ({ value: o, label: l, isActive: n, swatchShape: s, swatchVariant: a = "filled", withTick: m, borderColor: d, bgColor: p, ...i }, u) => {
+    const f = w(), r = o ? E(o, f) : "", t = a === "outline";
+    return /* @__PURE__ */ e(C, { w: i.size || 24, h: i.size || 24, justify: "center", align: "center", style: { position: "relative" }, children: /* @__PURE__ */ e(R, { label: l || o || "", withArrow: !0, children: /* @__PURE__ */ h(
+      D,
       {
-        ref: p,
+        ref: u,
         color: t ? "transparent" : r,
-        radius: n === "circle" ? "xl" : "sm",
+        radius: s === "circle" ? "xl" : "sm",
         styles: t ? {
           alphaOverlay: { display: "none" },
           shadowOverlay: { display: "none" }
@@ -111,12 +112,12 @@ const B = g(
         style: {
           cursor: "pointer",
           color: "var(--mantine-color-white)",
-          background: t ? d || `var(--mantine-color-${o}-light, ${r}20)` : void 0,
-          border: t ? `2px solid ${m || `var(--mantine-color-${o}-outline, ${r})`}` : void 0
+          background: t ? p || `var(--mantine-color-${o}-light, ${r}20)` : void 0,
+          border: t ? `2px solid ${d || `var(--mantine-color-${o}-outline, ${r})`}` : void 0
         },
-        ...l,
+        ...i,
         children: [
-          i && /* @__PURE__ */ e(
+          n && /* @__PURE__ */ e(
             "span",
             {
               style: {
@@ -126,27 +127,27 @@ const B = g(
                 right: -4,
                 bottom: -4,
                 border: `2px solid ${r}`,
-                borderRadius: n === "circle" ? "var(--mantine-radius-xl)" : "var(--mantine-radius-sm)",
+                borderRadius: s === "circle" ? "var(--mantine-radius-xl)" : "var(--mantine-radius-sm)",
                 pointerEvents: "none",
                 boxSizing: "border-box"
               }
             }
           ),
-          a && i && /* @__PURE__ */ e(j, { size: 20, icon: $ })
+          m && n && /* @__PURE__ */ e(A, { size: 20, icon: j })
         ]
       }
     ) }) });
   }
-), G = U(w)`
+), J = V(k)`
   .mantine-ColorSwatch-colorOverlay {
     border-radius: ${({ swatchShape: o }) => o === "square" ? "3px" : "50%"};
   }
-`, io = Object.assign(B, {
-  ColorCircle: w,
-  List: q,
-  Toolbar: V
+`, lo = Object.assign(G, {
+  ColorCircle: k,
+  List: _,
+  Toolbar: q
 });
 export {
-  w as ColorCircle,
-  io as ColorPicker
+  k as ColorCircle,
+  lo as ColorPicker
 };

package/dist/components/ColorPicker/ColorPickerToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPickerToolbar.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAMjE;6DAC6D;AAC7D,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AA4BD,eAAO,MAAM,kBAAkB,oHAuJ7B,CAAC"}
+{"version":3,"file":"ColorPickerToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPickerToolbar.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAMjE;6DAC6D;AAC7D,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAsCD,eAAO,MAAM,kBAAkB,oHA2K7B,CAAC"}

package/dist/components/ColorPicker/ColorPickerToolbar.js

@@ -1,121 +1,138 @@
-import { jsxs as C, jsx as o } from "react/jsx-runtime";
-import { forwardRef as D, useState as M, useCallback as w, useMemo as T } from "react";
-import { useMantineColorScheme as z, Box as u, Flex as x, UnstyledButton as H } from "@mantine/core";
-import { TextColorIcon as F, HighlightSwatch as N } from "./icons.js";
-import { isDefaultColor as I, normalizeColorItem as L } from "./types.js";
-import { useRecentColors as j } from "./useRecentColors.js";
-import t from "./ColorPicker.module.css.js";
+import { jsxs as S, jsx as r } from "react/jsx-runtime";
+import { forwardRef as z, useState as H, useCallback as w, useMemo as I } from "react";
+import { useMantineColorScheme as j, Box as h, Flex as B, Tooltip as P, UnstyledButton as U } from "@mantine/core";
+import { TextColorIcon as K, HighlightSwatch as D } from "./icons.js";
+import { normalizeColorItem as $, isDefaultColor as q } from "./types.js";
+import { useRecentColors as E } from "./useRecentColors.js";
+import c from "./ColorPicker.module.css.js";
 function k({
-  isActive: i,
+  isActive: s,
   round: m,
-  disabled: a,
-  onClick: h,
-  children: c
+  disabled: u,
+  onClick: d,
+  children: i,
+  tooltipLabel: f
 }) {
-  return /* @__PURE__ */ o(
-    H,
+  const v = /* @__PURE__ */ r(
+    U,
     {
       type: "button",
-      className: `${t.inlineSwatch}${m ? ` ${t.inlineSwatchRound}` : ""}${i ? ` ${t.inlineSwatchActive}` : ""}`,
-      onMouseDown: (p) => p.preventDefault(),
-      onClick: h,
-      disabled: a,
-      children: c
+      className: `${c.inlineSwatch}${m ? ` ${c.inlineSwatchRound}` : ""}${s ? ` ${c.inlineSwatchActive}` : ""}`,
+      onMouseDown: (C) => C.preventDefault(),
+      onClick: d,
+      disabled: u,
+      children: i
     }
   );
+  return f ? /* @__PURE__ */ r(P, { label: f, withArrow: !0, children: v }) : v;
 }
-const Q = D(({ sections: i, onChange: m, withRecentColors: a, maxRecentColors: h = 9, disabled: c, recentColorsLabel: p = "Recently used" }, R) => {
-  const { colorScheme: y } = z(), S = y === "dark", { recentColors: B, addRecent: g } = j({ maxItems: h }), [v, K] = M(B), d = w(
-    (e, r, n) => {
-      a && (g(e, r, n), K((l) => {
-        const f = l.filter(
-          (s) => !(s.value === e && s.sectionKey === r)
+const Y = z(({ sections: s, onChange: m, withRecentColors: u, maxRecentColors: d = 9, disabled: i, recentColorsLabel: f = "Recently used" }, v) => {
+  const { colorScheme: C } = j(), x = C === "dark", { recentColors: M, addRecent: F } = E({ maxItems: d }), [L, T] = H(M), p = w(
+    (e, o, t) => {
+      u && (F(e, o, t), T((l) => {
+        const n = l.filter(
+          (a) => !(a.value === e && a.sectionKey === o)
         );
-        return [{ value: e, sectionKey: r, border: n }, ...f].slice(0, h);
-      })), m(e, r);
+        return [{ value: e, sectionKey: o, border: t }, ...n].slice(0, d);
+      })), m(e, o);
     },
-    [m, a, g]
-  ), A = T(() => {
+    [m, u, F]
+  ), g = I(() => {
     const e = {};
-    for (const r of i) e[r.key] = r;
+    for (const o of s) e[o.key] = o;
     return e;
-  }, [i]), b = w(
-    (e) => I(e) ? S ? "#FFFFFF" : "#000000" : e,
-    [S]
+  }, [s]), y = w(
+    (e, o) => {
+      if (!o) return;
+      const t = g[o];
+      if (!t) return;
+      const l = t.colors.find((b) => $(b).value === e);
+      if (!l) return;
+      const { label: n, value: a } = $(l);
+      return n || a;
+    },
+    [g]
+  ), N = w(
+    (e) => q(e) ? x ? "#FFFFFF" : "#000000" : e,
+    [x]
   );
-  return /* @__PURE__ */ C(u, { ref: R, children: [
-    a && v.length > 0 && /* @__PURE__ */ C(u, { className: t.inlineSection, children: [
-      /* @__PURE__ */ o(u, { className: t.inlineSectionLabel, children: p }),
-      /* @__PURE__ */ o(x, { className: t.inlineRow, gap: 2, children: v.map((e, r) => {
-        const n = e.sectionKey ? A[e.sectionKey] : void 0;
-        return n?.key === "textColor" || n?.key === "color" || e.sectionKey === "color" ? /* @__PURE__ */ o(
+  return /* @__PURE__ */ S(h, { ref: v, children: [
+    u && L.length > 0 && /* @__PURE__ */ S(h, { className: c.inlineSection, children: [
+      /* @__PURE__ */ r(h, { className: c.inlineSectionLabel, children: f }),
+      /* @__PURE__ */ r(B, { className: c.inlineRow, gap: 2, children: L.map((e, o) => {
+        const t = e.sectionKey ? g[e.sectionKey] : void 0, l = t?.key === "textColor" || t?.key === "color" || e.sectionKey === "color", n = y(e.value, e.sectionKey);
+        return l ? /* @__PURE__ */ r(
           k,
           {
             isActive: !1,
-            disabled: c,
-            onClick: () => d(e.value, e.sectionKey ?? ""),
-            children: /* @__PURE__ */ o(
-              F,
+            disabled: i,
+            tooltipLabel: n,
+            onClick: () => p(e.value, e.sectionKey ?? ""),
+            children: /* @__PURE__ */ r(
+              K,
               {
                 size: 20,
-                color: b(e.value),
+                color: N(e.value),
                 showBorder: !0
               }
             )
           },
-          `${e.sectionKey}-${e.value}-${r}`
-        ) : /* @__PURE__ */ o(
+          `${e.sectionKey}-${e.value}-${o}`
+        ) : /* @__PURE__ */ r(
           k,
           {
             isActive: !1,
             round: !0,
-            disabled: c,
-            onClick: () => d(e.value, e.sectionKey ?? ""),
-            children: /* @__PURE__ */ o(
-              N,
+            disabled: i,
+            tooltipLabel: n,
+            onClick: () => p(e.value, e.sectionKey ?? ""),
+            children: /* @__PURE__ */ r(
+              D,
               {
                 bgColor: e.value,
                 borderColor: e.border || "var(--mantine-color-default-border)"
               }
             )
           },
-          `${e.sectionKey}-${e.value}-${r}`
+          `${e.sectionKey}-${e.value}-${o}`
         );
       }) })
     ] }),
-    i.map((e) => {
-      const r = e.key === "highlight" || e.key === "background" || e.key === "textHighlight";
-      return /* @__PURE__ */ C(u, { className: t.inlineSection, children: [
-        e.label && /* @__PURE__ */ o(u, { className: t.inlineSectionLabel, children: e.label }),
-        /* @__PURE__ */ o(x, { className: t.inlineRow, gap: 2, children: e.colors.map((n) => {
-          const { value: l, border: f } = L(n), s = l === e.value, $ = b(l);
-          return r ? /* @__PURE__ */ o(
+    s.map((e) => {
+      const o = e.key === "highlight" || e.key === "background" || e.key === "textHighlight";
+      return /* @__PURE__ */ S(h, { className: c.inlineSection, children: [
+        e.label && /* @__PURE__ */ r(h, { className: c.inlineSectionLabel, children: e.label }),
+        /* @__PURE__ */ r(B, { className: c.inlineRow, gap: 2, children: e.colors.map((t) => {
+          const { value: l, border: n, label: a } = $(t), b = l === e.value, R = N(l), A = a || l;
+          return o ? /* @__PURE__ */ r(
             k,
             {
-              isActive: s,
+              isActive: b,
               round: !0,
-              disabled: c,
-              onClick: () => d(l, e.key, f),
-              children: /* @__PURE__ */ o(
-                N,
+              disabled: i,
+              tooltipLabel: A,
+              onClick: () => p(l, e.key, n),
+              children: /* @__PURE__ */ r(
+                D,
                 {
                   bgColor: l,
-                  borderColor: f || $
+                  borderColor: n || R
                 }
               )
             },
             l
-          ) : /* @__PURE__ */ o(
+          ) : /* @__PURE__ */ r(
             k,
             {
-              isActive: s,
-              disabled: c,
-              onClick: () => d(l, e.key),
-              children: /* @__PURE__ */ o(
-                F,
+              isActive: b,
+              disabled: i,
+              tooltipLabel: A,
+              onClick: () => p(l, e.key),
+              children: /* @__PURE__ */ r(
+                K,
                 {
                   size: 20,
-                  color: $,
+                  color: R,
                   showBorder: !0
                 }
               )
@@ -128,5 +145,5 @@ const Q = D(({ sections: i, onChange: m, withRecentColors: a, maxRecentColors: h
   ] });
 });
 export {
-  Q as ColorPickerToolbar
+  Y as ColorPickerToolbar
 };

package/dist/components/EmojiPicker/EmojiPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiPanel.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPanel.tsx"],"names":[],"mappings":"AAyCA,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAsBjD,eAAO,MAAM,UAAU,GAAI,6DAMxB,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG;IAC5E,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,4CAmTA,CAAC"}
+{"version":3,"file":"EmojiPanel.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPanel.tsx"],"names":[],"mappings":"AAyCA,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAsBjD,eAAO,MAAM,UAAU,GAAI,6DAMxB,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG;IAC5E,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,4CAgTA,CAAC"}

package/dist/components/EmojiPicker/EmojiPanel.js

@@ -1,5 +1,5 @@
 import { jsxs as y, jsx as t } from "react/jsx-runtime";
-import { useState as u, useRef as d, useEffect as R, useCallback as K } from "react";
+import { useState as d, useRef as m, useEffect as R, useCallback as K } from "react";
 import { useTranslation as L } from "react-i18next";
 import { Search01Icon as U, ShuffleIcon as V, Clock01Icon as W, SmileIcon as X, Pizza01Icon as Z, FootballIcon as _, Airplane01Icon as ee, BulbIcon as te, Asterisk02Icon as oe, Flag02Icon as re } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon as c } from "@hugeicons/react";
@@ -27,17 +27,17 @@ const he = [
   { i: "symbols", icon: /* @__PURE__ */ t(c, { size: 20, icon: oe }) },
   { i: "flags", icon: /* @__PURE__ */ t(c, { size: 20, icon: re }) }
 ], Re = ({
-  locales: m,
+  locales: u,
   onChange: C,
   onClose: M,
   setRandomIcon: P,
   querySearch: p
 }) => {
-  const [b, k] = u("frequent"), x = d("frequent"), h = d({}), I = d(null), [w, S] = u(""), [Q, O] = u([]), [a, B] = u(null), [E, j] = u([]), { t: G } = L(), g = d(!1), l = d(null);
+  const [b, k] = d("frequent"), x = m("frequent"), h = m({}), I = m(null), [S, w] = d(""), [Q, O] = d([]), [a, B] = d(null), [E, j] = d([]), { t: G } = L(), g = m(!1), l = m(null);
   R(() => {
     if (typeof p == "string") {
       const e = p.slice(1);
-      if (S(e), a) {
+      if (w(e), a) {
         const o = a.search(e);
         j(o.map((r) => r.item.e));
       }
@@ -74,7 +74,7 @@ const he = [
   const H = K(
     (e) => {
       const o = e.currentTarget.value;
-      if (S(o), a) {
+      if (w(o), a) {
         const r = a.search(o);
         j(r.map((s) => s.item.e));
       }
@@ -128,8 +128,8 @@ const he = [
             ie,
             {
               leftSection: /* @__PURE__ */ t(c, { size: 16, icon: U }),
-              value: w,
-              placeholder: `${m?.search}...`,
+              value: S,
+              placeholder: `${u?.search}...`,
               "data-autofocus": !0,
               styles: {
                 input: {
@@ -142,7 +142,7 @@ const he = [
               radius: "var(--mantine-radius-default)"
             }
           ),
-          /* @__PURE__ */ t(ce, { withArrow: !0, label: G("random"), children: /* @__PURE__ */ t(
+          /* @__PURE__ */ t(ce, { withArrow: !0, label: u?.random || G("random"), children: /* @__PURE__ */ t(
             A,
             {
               h: 36,
@@ -175,7 +175,7 @@ const he = [
         },
         ref: I,
         onScroll: $,
-        children: w ? /* @__PURE__ */ y(v, { flex: 1, align: "stretch", children: [
+        children: S ? /* @__PURE__ */ y(v, { flex: 1, align: "stretch", children: [
           !J && /* @__PURE__ */ t(
             F,
             {
@@ -185,7 +185,7 @@ const he = [
               top: -1,
               style: { zIndex: 1 },
               bg: "light-dark(var(--mantine-color-white), var(--mantine-color-dark-6))",
-              children: /* @__PURE__ */ t(q, { fz: "sm", c: "dimmed", children: m?.searchResults })
+              children: /* @__PURE__ */ t(q, { fz: "sm", c: "dimmed", children: u?.searchResults })
             }
           ),
           E.length ? /* @__PURE__ */ t(N, { cols: 10, spacing: 0, children: E.map((e) => /* @__PURE__ */ t(
@@ -201,7 +201,7 @@ const he = [
             ue,
             {
               size: 100,
-              description: m?.searchNoResults,
+              description: u?.searchNoResults,
               descriptionProps: {
                 fz: "sm"
               }
@@ -217,14 +217,13 @@ const he = [
               /* @__PURE__ */ t(
                 F,
                 {
-                  bg: "light-dark(var(--mantine-color-white), var(--mantine-color-dark-6))",
                   py: 2,
                   px: 6,
                   pos: "sticky",
                   top: -1,
                   h: 23,
                   style: { zIndex: 1 },
-                  children: /* @__PURE__ */ t(q, { fz: "xs", c: "dimmed", children: m?.emojiCategory?.[e.i] })
+                  children: /* @__PURE__ */ t(q, { fz: "xs", c: "dimmed", children: u?.emojiCategory?.[e.i] })
                 }
               ),
               /* @__PURE__ */ t(N, { cols: 10, spacing: 0, children: e.e.map((o) => /* @__PURE__ */ t(

package/dist/components/EmojiPicker/EmojiPicker.d.ts

@@ -31,6 +31,7 @@ export type EmojiPickerLocales = {
     searchNoResults?: string;
     remove?: string;
     icons?: string;
+    random?: string;
     emojiCategory?: Record<string, string>;
 };
 export declare const EmojiPicker: ({ project, value, querySearch, children, onChange, position, popoverProps, showIcons, showColors, defaultActiveTab, showEmojis, withinPortal, locales: _locales, openWhen, triggerRegex, typingSeq, showRemoveButton, keepOpenOnRandom, }: PropsWithChildren<EmojiPickerProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/EmojiPicker/EmojiPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AAGxE,OAAO,EAIL,gBAAgB,EAEhB,YAAY,EAEb,MAAM,eAAe,CAAC;AAQvB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,kIAAkI;IAClI,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAChC,2GAA2G;IAC3G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gHAAgH;IAChH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0FAA0F;IAC1F,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,2OAmBzB,iBAAiB,CAAC,gBAAgB,CAAC,4CAgNrC,CAAC"}
+{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AAGxE,OAAO,EAIL,gBAAgB,EAEhB,YAAY,EAEb,MAAM,eAAe,CAAC;AAQvB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,kIAAkI;IAClI,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAChC,2GAA2G;IAC3G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gHAAgH;IAChH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0FAA0F;IAC1F,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,2OAmBzB,iBAAiB,CAAC,gBAAgB,CAAC,4CAiNrC,CAAC"}

package/dist/components/EmojiPicker/EmojiPicker.js

@@ -30,6 +30,7 @@ const ee = ({
     emojis: e("emojis"),
     remove: e("remove"),
     search: e("search"),
+    random: e("random"),
     searchResults: e("emojiPicker.searchResults"),
     icons: e("emojiPicker.icons"),
     searchNoResults: e("emojiPicker.searchNoResults"),