@blocklet/labels 1.4.12 → 1.4.13

package/dist/index.es.js

@@ -1,132 +1,136 @@
-import { createContext as V, useRef as N, useState as I, useCallback as B, useEffect as P, useMemo as z, useContext as W } from "react";
-import E from "@mui/icons-material/ExpandMore";
-import m from "@mui/material/Box";
-import { styled as j } from "@mui/material/styles";
-import { Tree as Z } from "react-arborist";
-import { Icon as $ } from "@iconify/react";
-import { jsx as t, jsxs as y, Fragment as T } from "react/jsx-runtime";
-import G from "lodash/omit";
-import U, { components as q } from "react-select";
-import Y from "@mui/material/Typography";
-import A from "@mui/material/Button";
-import O from "@mui/material/IconButton";
-import X from "@mui/icons-material/DeleteOutlineOutlined";
-import _ from "@mui/icons-material/EditOutlined";
-import ee from "@mui/icons-material/Add";
-import te from "react-use/lib/useSetState";
-import L from "@mui/material/TextField";
-import ne from "@mui/base/ClickAwayListener";
-import { GithubPicker as re } from "react-color";
-import F from "@arcblock/ux/lib/Dialog";
-import oe from "@mui/material/Alert";
-import ie from "@mui/icons-material/Edit";
-import le from "@mui/icons-material/LabelOutlined";
-import se from "@mui/material/ClickAwayListener";
-import ae from "@mui/material/Chip";
-const de = (e) => /* @__PURE__ */ t("svg", {
+import { createContext as V, useRef as D, useState as S, useCallback as O, useEffect as E, useMemo as z, useContext as q } from "react";
+import j from "@mui/icons-material/ExpandMore";
+import p from "@mui/material/Box";
+import { styled as F } from "@mui/material/styles";
+import { Tree as U } from "react-arborist";
+import { Icon as X } from "@iconify/react";
+import { jsx as e, jsxs as C, Fragment as P } from "react/jsx-runtime";
+import _ from "lodash/omit";
+import ee, { components as H } from "react-select";
+import te from "@mui/material/Typography";
+import T from "@mui/material/Button";
+import N from "@mui/material/IconButton";
+import ne from "@mui/icons-material/DeleteOutlineOutlined";
+import re from "@mui/icons-material/EditOutlined";
+import oe from "@mui/icons-material/Add";
+import le from "react-use/lib/useSetState";
+import M from "@mui/material/TextField";
+import ie from "@mui/base/ClickAwayListener";
+import { GithubPicker as se } from "react-color";
+import J from "@arcblock/ux/lib/Dialog";
+import { TextField as R, InputAdornment as ae, IconButton as ce, Box as B } from "@mui/material";
+import de from "@mui/icons-material/Translate";
+import ue from "@mui/material/Popover";
+import { useLocaleContext as $ } from "@arcblock/ux/lib/Locale/context";
+import he from "@mui/material/Alert";
+import pe from "@mui/icons-material/Edit";
+import me from "@mui/icons-material/LabelOutlined";
+import fe from "@mui/material/ClickAwayListener";
+import ge from "@mui/material/Chip";
+const xe = (t) => /* @__PURE__ */ e("svg", {
   viewBox: "0 0 24 24",
   width: "1.2em",
   height: "1.2em",
-  ...e,
-  children: /* @__PURE__ */ t("path", {
+  ...t,
+  children: /* @__PURE__ */ e("path", {
     fill: "currentColor",
     d: "M5 19q-.825 0-1.413-.587Q3 17.825 3 17V7q0-.825.587-1.412Q4.175 5 5 5h10q.5 0 .938.225q.437.225.712.625l3.525 5q.375.525.375 1.15q0 .625-.375 1.15l-3.525 5q-.275.4-.712.625Q15.5 19 15 19Z"
   })
-}), ce = (e) => /* @__PURE__ */ t("svg", {
+}), ye = (t) => /* @__PURE__ */ e("svg", {
   viewBox: "0 0 24 24",
   width: "1.2em",
   height: "1.2em",
-  ...e,
-  children: /* @__PURE__ */ t("path", {
+  ...t,
+  children: /* @__PURE__ */ e("path", {
     fill: "currentColor",
     d: "m10 16.4l-4-4L7.4 11l2.6 2.6L16.6 7L18 8.4Z"
   })
-}), R = V({});
-function ue({
-  selectable: e = !1,
+}), K = V({});
+function Ce({
+  selectable: t = !1,
   selected: n = [],
-  onSelect: i,
+  onSelect: c,
   renderItem: l,
   children: o
 }) {
-  const r = (h) => n.indexOf(h) !== -1, s = (h) => {
-    Array.from(new Set(n).add(h)), i == null || i(h);
-  }, a = z(
+  const r = (h) => n.indexOf(h) !== -1, i = (h) => {
+    Array.from(new Set(n).add(h)), c == null || c(h);
+  }, d = z(
     () => ({
-      selectable: e,
+      selectable: t,
       selected: n,
       isSelected: r,
-      select: s,
+      select: i,
       renderItem: l
     }),
     [n]
   );
-  return /* @__PURE__ */ t(R.Provider, {
-    value: a,
+  return /* @__PURE__ */ e(K.Provider, {
+    value: d,
     children: o
   });
 }
-const he = (e) => {
+const ve = (t) => {
   var n;
-  return e.isLeaf || !((n = e.data.children) != null && n.length);
+  return t.isLeaf || !((n = t.data.children) != null && n.length);
 };
-function pe({
-  node: e
+function be({
+  node: t
 }) {
-  return he(e) ? /* @__PURE__ */ t("span", {}) : e.isOpen ? /* @__PURE__ */ t(E, {
+  return ve(t) ? /* @__PURE__ */ e("span", {}) : t.isOpen ? /* @__PURE__ */ e(j, {
     style: {
       fontSize: 20
     }
-  }) : /* @__PURE__ */ t(E, {
+  }) : /* @__PURE__ */ e(j, {
     style: {
       fontSize: 20,
       transform: "rotate(-90deg)"
     }
   });
 }
-function me({
-  node: e,
+function Ie({
+  node: t,
   style: n,
-  dragHandle: i
+  dragHandle: c
 }) {
   const {
     selectable: l,
     select: o,
     isSelected: r,
-    renderItem: s
-  } = W(R), {
-    data: a
-  } = e, h = a.icon ? /* @__PURE__ */ t($, {
-    icon: a.icon,
+    renderItem: i
+  } = q(K), {
+    data: d
+  } = t, h = d.icon ? /* @__PURE__ */ e(X, {
+    icon: d.icon,
     style: {
       fontSize: 18
     }
-  }) : /* @__PURE__ */ t(de, {
+  }) : /* @__PURE__ */ e(xe, {
     style: {
       fontSize: 18,
-      color: a.color || "#ddd"
+      color: d.color || "#ddd"
     }
-  }), u = (p) => {
-    p.stopPropagation(), e.isInternal && e.toggle();
-  }, g = (p) => {
-    p.stopPropagation(), l && o(e.id);
-  }, f = /* @__PURE__ */ y(T, {
-    children: [/* @__PURE__ */ y(m, {
+  }), g = (s) => {
+    s.stopPropagation(), t.isInternal && t.toggle();
+  }, f = (s) => {
+    s.stopPropagation(), l && o(t.id);
+  }, x = /* @__PURE__ */ C(P, {
+    children: [/* @__PURE__ */ C(p, {
       sx: {
         display: "flex",
         alignItems: "center",
         flex: 1
       },
-      children: [/* @__PURE__ */ t(m, {
+      children: [/* @__PURE__ */ e(p, {
         sx: {
           display: "flex",
           cursor: "pointer"
         },
-        onClick: u,
-        children: /* @__PURE__ */ t(pe, {
-          node: e
+        onClick: g,
+        children: /* @__PURE__ */ e(be, {
+          node: t
         })
-      }), /* @__PURE__ */ t(m, {
+      }), /* @__PURE__ */ e(p, {
         sx: {
           display: "flex",
           alignItems: "center",
@@ -134,16 +138,16 @@ function me({
           height: 22
         },
         children: h
-      }), /* @__PURE__ */ t(m, {
+      }), /* @__PURE__ */ e(p, {
         component: "span",
         sx: {
           color: "grey.700"
         },
-        children: e.data.name
+        children: t.data.name
       })]
-    }), l && r(e.id) && /* @__PURE__ */ t(ce, {})]
+    }), l && r(t.id) && /* @__PURE__ */ e(ye, {})]
   });
-  return /* @__PURE__ */ y(m, {
+  return /* @__PURE__ */ C(p, {
     className: "label-tree-item",
     style: n,
     sx: {
@@ -151,12 +155,12 @@ function me({
       alignItems: "center",
       justifyContent: "space-between"
     },
-    ref: i,
-    onClick: g,
-    children: [!s && f, !!s && s(f, e.data)]
+    ref: c,
+    onClick: f,
+    children: [!i && x, !!i && i(x, t.data)]
   });
 }
-const fe = j(m)`
+const we = F(p)`
   > div,
   > div > div,
   > div > div > div {
@@ -170,98 +174,108 @@ const fe = j(m)`
     width: 100%;
   }
 `;
-function D({
-  data: e,
+function W({
+  data: t,
   selectable: n,
-  selected: i = [],
+  selected: c = [],
   onSelect: l,
   rowHeight: o = 28,
   renderItem: r,
-  sx: s,
-  ...a
+  sx: i,
+  ...d
 }) {
-  const h = N(), u = [...Array.isArray(s) ? s : [s]], [g, f] = I(0), p = B(() => {
-    var S, d;
-    f((((d = (S = h.current) == null ? void 0 : S.visibleNodes) == null ? void 0 : d.length) || 0) * o);
+  const h = D(), g = [...Array.isArray(i) ? i : [i]], [f, x] = S(0), s = O(() => {
+    var b, a;
+    x((((a = (b = h.current) == null ? void 0 : b.visibleNodes) == null ? void 0 : a.length) || 0) * o);
   }, [o]);
-  return P(() => {
-    p();
-  }, [e, p]), /* @__PURE__ */ t(ue, {
+  return E(() => {
+    s();
+  }, [t, s]), /* @__PURE__ */ e(Ce, {
     selectable: n,
-    selected: i,
+    selected: c,
     onSelect: l,
     renderItem: r,
-    children: /* @__PURE__ */ t(fe, {
-      ...a,
-      sx: u,
-      children: /* @__PURE__ */ t(Z, {
-        data: e,
+    children: /* @__PURE__ */ e(we, {
+      ...d,
+      sx: g,
+      children: /* @__PURE__ */ e(U, {
+        data: t,
         rowHeight: o,
-        height: g,
+        height: f,
         indent: 32,
         ref: h,
         onToggle: () => {
-          setTimeout(p);
+          setTimeout(s);
         },
-        children: me
+        children: Ie
       })
     })
   });
 }
-const M = (e) => e.reduce((n, i) => {
+const L = (t) => t.reduce((n, c) => {
   var l;
-  return n.push(i), (l = i.children) != null && l.length && n.push(...M(i.children)), n;
-}, []), H = (e) => e.map((n) => {
-  var i;
-  return (i = n.children) != null && i.length && (n.children = H(n.children)), n;
-}), ge = (e) => {
-  const n = e.reduce((o, r) => (o[r.id] = o[r.id] || {}, r.parentId && (o[r.id].parent = r.parentId, o[r.parentId] = o[r.parentId] || {}, o[r.parentId].children = o[r.parentId].children || [], o[r.parentId].children.push(r.id)), o), {}), i = e.map(({ parentId: o, ...r }) => ({ ...r, children: [] })), l = i.reduce((o, r) => ({ ...o, [r.id]: r }), {});
-  return i.forEach((o) => {
+  return n.push(c), (l = c.children) != null && l.length && n.push(...L(c.children)), n;
+}, []), Q = (t) => t.map((n) => {
+  var c;
+  return (c = n.children) != null && c.length && (n.children = Q(n.children)), n;
+}), Se = (t, n = null) => {
+  try {
+    return JSON.parse(t);
+  } catch {
+    return n;
+  }
+}, ze = (t) => {
+  const n = t.reduce((o, r) => (o[r.id] = o[r.id] || {}, r.parentId && (o[r.id].parent = r.parentId, o[r.parentId] = o[r.parentId] || {}, o[r.parentId].children = o[r.parentId].children || [], o[r.parentId].children.push(r.id)), o), {}), c = t.map(({ parentId: o, translation: r, ...i }) => ({
+    ...i,
+    translation: Se(r),
+    children: []
+  })), l = c.reduce((o, r) => ({ ...o, [r.id]: r }), {});
+  return c.forEach((o) => {
     const r = n[o.id];
-    r.parent && l[r.parent] && (o.parent = l[r.parent]), r.children && (o.children = r.children.map((s) => l[s]));
-  }), i.filter((o) => !o.parent);
-}, xe = (e) => {
+    r.parent && l[r.parent] && (o.parent = l[r.parent]), r.children && (o.children = r.children.map((i) => l[i]));
+  }), c.filter((o) => !o.parent);
+}, ke = (t) => {
   const {
     options: n,
-    getValue: i,
+    getValue: c,
     selectProps: l,
     selectOption: o
-  } = e, r = i(), s = (a) => {
-    const h = n.find((u) => u.data.id === a);
+  } = t, r = c(), i = (d) => {
+    const h = n.find((g) => g.data.id === d);
     h && o(h);
   };
-  return /* @__PURE__ */ y(T, {
-    children: [/* @__PURE__ */ t(q.MenuList, {
-      ...G(e, ["addon"]),
-      children: /* @__PURE__ */ t(m, {
+  return /* @__PURE__ */ C(P, {
+    children: [/* @__PURE__ */ e(H.MenuList, {
+      ..._(t, ["addon"]),
+      children: /* @__PURE__ */ e(p, {
         sx: {
           px: 2,
           py: 1
         },
-        children: /* @__PURE__ */ t(D, {
+        children: /* @__PURE__ */ e(W, {
           data: l.data,
           selectable: !0,
-          onSelect: s,
-          selected: r.map((a) => a.data.id)
+          onSelect: i,
+          selected: r.map((d) => d.data.id)
         })
       })
-    }), e.addon]
+    }), t.addon]
   });
-}, ye = ({
-  children: e,
+}, Te = ({
+  children: t,
   ...n
 }) => {
-  const [i, l] = e, o = Array.isArray(i) ? i.length : 0;
-  return /* @__PURE__ */ y(q.ValueContainer, {
+  const [c, l] = t, o = Array.isArray(c) ? c.length : 0;
+  return /* @__PURE__ */ C(H.ValueContainer, {
     ...n,
-    children: [/* @__PURE__ */ t(m, {
+    children: [/* @__PURE__ */ e(p, {
       component: "span",
       sx: {
         fontSize: 13,
         fontWeight: "bold"
       },
       children: o ? "Labels" : "Filter by labels"
-    }), !!o && /* @__PURE__ */ t(m, {
+    }), !!o && /* @__PURE__ */ e(p, {
       sx: {
         display: "inline-flex",
         justifyContent: "center",
@@ -276,86 +290,86 @@ const M = (e) => e.reduce((n, i) => {
       children: o
     }), l]
   });
-}, Ce = {
-  control: (e) => ({
-    ...e,
+}, Ae = {
+  control: (t) => ({
+    ...t,
     minHeight: 31
   }),
-  valueContainer: (e) => ({
-    ...e,
+  valueContainer: (t) => ({
+    ...t,
     display: "flex"
   }),
-  dropdownIndicator: (e) => ({
-    ...e,
+  dropdownIndicator: (t) => ({
+    ...t,
     padding: "0 4px"
   }),
-  clearIndicator: (e) => ({
-    ...e,
+  clearIndicator: (t) => ({
+    ...t,
     padding: "4px"
   })
 };
-function ve({
-  data: e,
+function Oe({
+  data: t,
   value: n = [],
-  editable: i = !1,
+  editable: c = !1,
   addon: l,
   onChange: o,
   compact: r,
-  ...s
+  ...i
 }) {
-  const a = N(null), h = z(() => M(e).map((d) => ({
-    data: d,
-    label: d.name,
-    value: d.id
-  })), [e]), u = h.reduce((d, b) => ({
-    ...d,
-    [b.data.id]: b
-  }), {}), g = Array.isArray(n) ? n : [n], f = g.map((d) => u[d]), p = N({
-    prev: g.map((d) => u[d].data)
-  }), v = (d, b) => {
-    p.current.current = d.map((k) => k.data), ["clear", "remove-value"].includes(b.action) && a.current && setTimeout(() => {
+  const d = D(null), h = z(() => L(t).map((a) => ({
+    data: a,
+    label: a.name,
+    value: a.id
+  })), [t]), g = h.reduce((a, w) => ({
+    ...a,
+    [w.data.id]: w
+  }), {}), f = Array.isArray(n) ? n : [n], x = f.map((a) => g[a]), s = D({
+    prev: f.map((a) => g[a].data)
+  }), m = (a, w) => {
+    s.current.current = a.map((k) => k.data), ["clear", "remove-value"].includes(w.action) && d.current && setTimeout(() => {
       var k;
-      return (k = a == null ? void 0 : a.current) == null ? void 0 : k.blur();
+      return (k = d == null ? void 0 : d.current) == null ? void 0 : k.blur();
     }, 1);
-  }, S = () => {
-    p.current.current && JSON.stringify(p.current.prev.map((b) => b.id)) !== JSON.stringify(p.current.current.map((b) => b.id)) && (o(p.current.current), p.current.prev = p.current.current);
+  }, b = () => {
+    s.current.current && JSON.stringify(s.current.prev.map((w) => w.id)) !== JSON.stringify(s.current.current.map((w) => w.id)) && (o(s.current.current), s.current.prev = s.current.current);
   };
-  return /* @__PURE__ */ t(m, {
-    ...s,
-    children: /* @__PURE__ */ t(U, {
-      ref: a,
-      defaultValue: f,
+  return /* @__PURE__ */ e(p, {
+    ...i,
+    children: /* @__PURE__ */ e(ee, {
+      ref: d,
+      defaultValue: x,
       options: h,
-      onChange: v,
+      onChange: m,
       components: {
-        MenuList: (d) => /* @__PURE__ */ t(xe, {
-          ...d,
+        MenuList: (a) => /* @__PURE__ */ e(ke, {
+          ...a,
           addon: l
         }),
         ...r && {
-          ValueContainer: ye
+          ValueContainer: Te
         }
       },
       placeholder: "Select labels",
       styles: {
-        ...r && Ce,
-        menu: (d) => ({
-          ...d,
-          ...i && {
+        ...r && Ae,
+        menu: (a) => ({
+          ...a,
+          ...c && {
             paddingBottom: "36px"
           },
           zIndex: 99
         }),
-        menuList: (d) => ({
-          ...d,
+        menuList: (a) => ({
+          ...a,
           overflowY: "auto",
           maxHeight: "264px"
         })
       },
-      theme: (d) => ({
-        ...d,
+      theme: (a) => ({
+        ...a,
         colors: {
-          ...d.colors,
+          ...a.colors,
           primary25: "#ddd",
           primary50: "#ddd",
           primary: "#ddd"
@@ -364,92 +378,186 @@ function ve({
       isSearchable: !1,
       isMulti: !0,
       closeMenuOnSelect: !1,
-      onMenuClose: S,
-      data: e
+      onMenuClose: b,
+      data: t
     })
   });
 }
-function be({
-  open: e,
+function Pe({
+  I18NProps: t,
+  ...n
+}) {
+  const {
+    languages: c
+  } = $(), {
+    translation: l,
+    onChange: o
+  } = t, [r, i] = S(null), d = (f) => {
+    const x = f.currentTarget.closest(".MuiInputBase-root");
+    x && i(x);
+  }, h = () => {
+    i(null);
+  }, g = c.filter((f) => f.code !== "en");
+  return /* @__PURE__ */ e(R, {
+    ...n,
+    InputProps: {
+      endAdornment: /* @__PURE__ */ C(ae, {
+        position: "end",
+        children: [/* @__PURE__ */ e(ce, {
+          edge: "end",
+          onClick: d,
+          children: /* @__PURE__ */ e(de, {})
+        }), /* @__PURE__ */ e(ue, {
+          open: !!r,
+          anchorEl: r,
+          onClose: h,
+          transformOrigin: {
+            vertical: "top",
+            horizontal: "right"
+          },
+          anchorOrigin: {
+            vertical: "bottom",
+            horizontal: "right"
+          },
+          PaperProps: {
+            sx: {
+              width: r == null ? void 0 : r.clientWidth,
+              maxHeight: 200,
+              overflowY: "auto",
+              bgcolor: "grey.50"
+            }
+          },
+          elevation: 1,
+          sx: {
+            mt: 2
+          },
+          children: /* @__PURE__ */ e(B, {
+            sx: {
+              p: 2
+            },
+            children: g.map(({
+              code: f,
+              name: x
+            }) => /* @__PURE__ */ C(B, {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                "& + &": {
+                  mt: 1
+                }
+              },
+              children: [/* @__PURE__ */ e(B, {
+                sx: {
+                  flex: "0 0 120px"
+                },
+                children: x
+              }), /* @__PURE__ */ e(B, {
+                sx: {
+                  flex: 1
+                },
+                children: /* @__PURE__ */ e(R, {
+                  value: l[f] || "",
+                  size: "small",
+                  sx: {
+                    width: 1
+                  },
+                  onChange: (s) => o({
+                    ...l,
+                    [f]: s.target.value
+                  })
+                })
+              })]
+            }, f))
+          })
+        })]
+      })
+    }
+  });
+}
+function Be({
+  open: t,
   initialLabel: n,
-  onSubmit: i,
+  onSubmit: c,
   onClose: l,
   ...o
 }) {
-  const r = !(n != null && n.id), [s, a] = te({
+  const r = !(n != null && n.id), [i, d] = le({
     name: (n == null ? void 0 : n.name) || "",
     color: (n == null ? void 0 : n.color) || "#ddd",
-    slug: (n == null ? void 0 : n.id) || ""
-  }), h = (d) => /^#([0-9A-F]{3}){1,2}$/i.test(d), u = z(() => r ? s.name && s.color && s.slug && h(s.color) : s.name && s.color && h(s.color), [s, r]), [g, f] = I(!1), p = () => {
-    i({
+    slug: (n == null ? void 0 : n.id) || "",
+    translation: (n == null ? void 0 : n.translation) || {}
+  }), h = (a) => /^#([0-9A-F]{3}){1,2}$/i.test(a), g = z(() => r ? i.name && i.color && i.slug && h(i.color) : i.name && i.color && h(i.color), [i, r]), [f, x] = S(!1), s = () => {
+    c({
       ...n,
-      name: s.name,
-      color: s.color,
-      id: s.slug
+      name: i.name,
+      color: i.color,
+      id: i.slug,
+      translation: i.translation
     });
-  }, v = (d) => {
-    a({
-      color: d.hex
-    }), setTimeout(() => f(!1));
-  }, S = (d) => {
-    a({
-      color: d.target.value
+  }, m = (a) => {
+    d({
+      color: a.hex
+    }), setTimeout(() => x(!1));
+  }, b = (a) => {
+    d({
+      color: a.target.value
     });
   };
-  return /* @__PURE__ */ t(F, {
-    open: e,
+  return /* @__PURE__ */ e(J, {
+    open: t,
     showCloseButton: !0,
     maxWidth: "lg",
     title: r ? "Create label" : "Edit label",
-    actions: /* @__PURE__ */ y(T, {
-      children: [/* @__PURE__ */ t(A, {
+    actions: /* @__PURE__ */ C(P, {
+      children: [/* @__PURE__ */ e(T, {
         color: "inherit",
         variant: "contained",
         size: "small",
         onClick: l,
         children: "Cancel"
-      }), /* @__PURE__ */ t(A, {
+      }), /* @__PURE__ */ e(T, {
         color: "primary",
         variant: "contained",
         size: "small",
-        onClick: p,
-        disabled: !u,
+        onClick: s,
+        disabled: !g,
         children: r ? "Create" : "Save Changes"
       })]
     }),
     onClose: l,
     ...o,
-    children: /* @__PURE__ */ y(m, {
+    children: /* @__PURE__ */ C(p, {
       width: 600,
       minHeight: 280,
-      children: [/* @__PURE__ */ t(m, {
-        sx: {
-          position: "relative",
-          zIndex: 9999
-        },
-        children: /* @__PURE__ */ t(L, {
-          label: "Name",
-          value: s.name,
-          placeholder: "New label",
-          size: "small",
-          fullWidth: !0,
-          onChange: (d) => a({
-            name: d.target.value
+      children: [/* @__PURE__ */ e(Pe, {
+        label: "Name",
+        value: i.name,
+        placeholder: "New label",
+        size: "small",
+        fullWidth: !0,
+        onChange: (a) => d({
+          name: a.target.value
+        }),
+        I18NProps: {
+          translation: i.translation,
+          onChange: (a) => d({
+            translation: a
           })
-        })
-      }), /* @__PURE__ */ t(L, {
+        }
+      }), /* @__PURE__ */ e(M, {
         label: "Slug",
-        value: s.slug,
+        value: i.slug,
         size: "small",
         fullWidth: !0,
         disabled: !r,
-        onChange: (d) => a({
-          slug: d.target.value
+        onChange: (a) => d({
+          slug: a.target.value
         }),
         sx: {
           mt: 2
         }
-      }), (n == null ? void 0 : n.parent) && /* @__PURE__ */ t(L, {
+      }), (n == null ? void 0 : n.parent) && /* @__PURE__ */ e(M, {
         label: "Parent",
         value: n.parent.name,
         size: "small",
@@ -458,32 +566,32 @@ function be({
         sx: {
           mt: 2
         }
-      }), /* @__PURE__ */ t(ne, {
-        onClickAway: () => f(!1),
-        children: /* @__PURE__ */ y(m, {
+      }), /* @__PURE__ */ e(ie, {
+        onClickAway: () => x(!1),
+        children: /* @__PURE__ */ C(p, {
           sx: {
             position: "relative",
             mt: 2
           },
-          children: [/* @__PURE__ */ y(m, {
+          children: [/* @__PURE__ */ C(p, {
             sx: {
               display: "flex",
               alignItems: "center",
               gap: 1
             },
-            children: [/* @__PURE__ */ t(m, {
+            children: [/* @__PURE__ */ e(p, {
               sx: {
                 width: 30,
                 height: 30,
-                bgcolor: s.color,
+                bgcolor: i.color,
                 borderRadius: 1
               },
-              onClick: () => f(!0)
-            }), /* @__PURE__ */ t(L, {
+              onClick: () => x(!0)
+            }), /* @__PURE__ */ e(M, {
               label: "",
-              value: s.color,
+              value: i.color,
               size: "small",
-              onChange: S,
+              onChange: b,
               inputProps: {
                 maxLength: 7
               },
@@ -494,15 +602,15 @@ function be({
                 }
               }
             })]
-          }), g && /* @__PURE__ */ t(m, {
+          }), f && /* @__PURE__ */ e(p, {
             sx: {
               position: "absolute",
               top: 48,
               zIndex: 1
             },
-            children: /* @__PURE__ */ t(re, {
-              color: s.color,
-              onChangeComplete: v
+            children: /* @__PURE__ */ e(se, {
+              color: i.color,
+              onChangeComplete: m
             })
           })]
         })
@@ -510,51 +618,51 @@ function be({
     })
   });
 }
-function we({
-  open: e,
+function Ne({
+  open: t,
   label: n,
-  onSubmit: i,
+  onSubmit: c,
   onClose: l,
   ...o
 }) {
-  return /* @__PURE__ */ t(F, {
-    open: e,
+  return /* @__PURE__ */ e(J, {
+    open: t,
     showCloseButton: !0,
     maxWidth: "md",
     title: "Delete",
-    actions: /* @__PURE__ */ y(T, {
-      children: [/* @__PURE__ */ t(A, {
+    actions: /* @__PURE__ */ C(P, {
+      children: [/* @__PURE__ */ e(T, {
         color: "inherit",
         variant: "contained",
         size: "small",
         onClick: l,
         children: "Cancel"
-      }), /* @__PURE__ */ t(A, {
+      }), /* @__PURE__ */ e(T, {
         color: "primary",
         variant: "contained",
         size: "small",
-        onClick: i,
+        onClick: c,
         children: "Delete"
       })]
     }),
     onClose: l,
     ...o,
-    children: /* @__PURE__ */ y(m, {
+    children: /* @__PURE__ */ C(p, {
       width: 600,
       minHeight: 280,
-      children: [/* @__PURE__ */ t(oe, {
+      children: [/* @__PURE__ */ e(he, {
         severity: "info",
         sx: {
           mb: 2
         },
         children: "Are you sure you want to delete these labels ?"
-      }), /* @__PURE__ */ t(D, {
+      }), /* @__PURE__ */ e(W, {
         data: [n]
       })]
     })
   });
 }
-const Se = j(D)`
+const Le = F(W)`
   .label-tree-item {
     &:before {
       content: '';
@@ -575,93 +683,150 @@ const Se = j(D)`
     padding: 0 16px;
   }
 `;
-function Ge({
-  data: e,
+function Me({
+  locale: t,
+  value: n
+}) {
+  return /* @__PURE__ */ C(p, {
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      flex: "0 0 auto",
+      px: 1,
+      py: 0.25,
+      fontSize: 12,
+      bgcolor: "grey.300",
+      borderRadius: 2
+    },
+    children: [/* @__PURE__ */ e(p, {
+      sx: {
+        pr: 0.5,
+        borderRight: 1,
+        borderColor: "grey.400"
+      },
+      children: t
+    }), /* @__PURE__ */ e(p, {
+      sx: {
+        pl: 0.5
+      },
+      children: n
+    })]
+  });
+}
+function dt({
+  data: t,
   api: n,
-  ...i
+  ...c
 }) {
-  const [l, o] = I(null), [r, s] = I(null), [a, h] = I(H(e)), u = z(() => M(a), [a]), g = z(() => {
-    const c = (x, w) => x.map((C) => (w && (C.parent = w), C.children && (C.children = c(C.children, C)), C));
-    return c(a);
-  }, [a]), f = (c) => {
-    var x, w;
-    c.parent ? (c.parent.children = (w = (x = c.parent) == null ? void 0 : x.children) == null ? void 0 : w.map((C) => C.id === c.id ? {
-      ...c
-    } : C), f(c.parent)) : h(a.map((C) => C.id === c.id ? {
-      ...c
-    } : C));
-  }, p = (c) => {
-    c.parent ? (c.parent.children = c.parent.children || [], c.parent.children.push(c), h([...a])) : h([...a, c]);
-  }, v = (c) => {
-    var x;
-    c.parent ? c.parent.children = (x = c.parent.children) == null ? void 0 : x.filter((w) => w.id !== c.id) : h(a.filter((w) => w.id !== c.id));
-  }, S = (c) => {
+  const [l, o] = S(null), [r, i] = S(null), [d, h] = S(Q(t)), g = z(() => L(d), [d]), f = z(() => {
+    const u = (y, I) => y.map((v) => (I && (v.parent = I), v.children && (v.children = u(v.children, v)), v));
+    return u(d);
+  }, [d]), x = (u) => {
+    var y, I;
+    u.parent ? (u.parent.children = (I = (y = u.parent) == null ? void 0 : y.children) == null ? void 0 : I.map((v) => v.id === u.id ? {
+      ...u
+    } : v), x(u.parent)) : h(d.map((v) => v.id === u.id ? {
+      ...u
+    } : v));
+  }, s = (u) => {
+    u.parent ? (u.parent.children = u.parent.children || [], u.parent.children.push(u), h([...d])) : h([...d, u]);
+  }, m = (u) => {
+    var y;
+    u.parent ? u.parent.children = (y = u.parent.children) == null ? void 0 : y.filter((I) => I.id !== u.id) : h(d.filter((I) => I.id !== u.id));
+  }, b = (u) => {
     if (l)
       return;
     o({
       id: "",
       name: "New label",
-      parent: c,
+      parent: u,
       color: "#dddddd"
     });
-  }, d = (c) => {
-    l || o(c);
-  }, b = async (c) => {
+  }, a = (u) => {
+    l || o(u);
+  }, w = async (u) => {
     if (!l)
       return;
     const {
-      parent: x,
-      children: w,
-      ...C
-    } = c;
+      parent: y,
+      children: I,
+      translation: v,
+      ...A
+    } = u;
     l.id ? (await n.updateLabel({
-      ...C,
-      parentId: x == null ? void 0 : x.id
-    }), f(c)) : (await n.createLabel({
-      ...C,
-      parentId: x == null ? void 0 : x.id
-    }), p(c)), o(null);
+      ...A,
+      translation: JSON.stringify(v),
+      parentId: y == null ? void 0 : y.id
+    }), x(u)) : (await n.createLabel({
+      ...A,
+      translation: JSON.stringify(v),
+      parentId: y == null ? void 0 : y.id
+    }), s(u)), o(null);
   }, k = async () => {
-    !r || (await n.deleteLabel(r.id), v(r), s(null));
-  }, J = (c, x) => /* @__PURE__ */ y(T, {
-    children: [c, /* @__PURE__ */ y(m, {
+    !r || (await n.deleteLabel(r.id), m(r), i(null));
+  }, G = (u, y) => /* @__PURE__ */ C(P, {
+    children: [/* @__PURE__ */ C(p, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        flexWrap: "wrap"
+      },
+      children: [/* @__PURE__ */ e(p, {
+        children: u
+      }), y.translation && /* @__PURE__ */ e(p, {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 0.5,
+          ml: 2
+        },
+        children: Object.keys(y.translation).map((I) => {
+          var A;
+          const v = (A = y.translation) == null ? void 0 : A[I];
+          return v ? /* @__PURE__ */ e(Me, {
+            locale: I,
+            value: v
+          }, I) : null;
+        })
+      })]
+    }), /* @__PURE__ */ C(p, {
       sx: {
         display: "flex",
         gap: 1,
         flex: "0 0 auto"
       },
-      children: [/* @__PURE__ */ t(O, {
+      children: [/* @__PURE__ */ e(N, {
         color: "inherit",
         size: "small",
         sx: {
           color: "grey.500"
         },
-        onClick: () => S(x),
-        children: /* @__PURE__ */ t(ee, {
+        onClick: () => b(y),
+        children: /* @__PURE__ */ e(oe, {
           sx: {
             fontSize: 20
           }
         })
-      }), /* @__PURE__ */ t(O, {
+      }), /* @__PURE__ */ e(N, {
         color: "inherit",
         size: "small",
         sx: {
           color: "grey.500"
         },
-        onClick: () => d(x),
-        children: /* @__PURE__ */ t(_, {
+        onClick: () => a(y),
+        children: /* @__PURE__ */ e(re, {
           sx: {
             fontSize: 18
           }
         })
-      }), /* @__PURE__ */ t(O, {
+      }), /* @__PURE__ */ e(N, {
         color: "inherit",
         size: "small",
         sx: {
           color: "grey.500"
         },
-        onClick: () => s(x),
-        children: /* @__PURE__ */ t(X, {
+        onClick: () => i(y),
+        children: /* @__PURE__ */ e(ne, {
           sx: {
             fontSize: 20
           }
@@ -669,29 +834,29 @@ function Ge({
       })]
     })]
   });
-  return /* @__PURE__ */ y(m, {
-    ...i,
-    children: [/* @__PURE__ */ y(m, {
+  return /* @__PURE__ */ C(p, {
+    ...c,
+    children: [/* @__PURE__ */ C(p, {
       sx: {
         display: "flex",
         alignItems: "center",
         justifyContent: "space-between"
       },
-      children: [/* @__PURE__ */ t(Y, {
+      children: [/* @__PURE__ */ e(te, {
         component: "h2",
         variant: "h6",
         children: "Manage labels"
-      }), /* @__PURE__ */ t(A, {
+      }), /* @__PURE__ */ e(T, {
         color: "primary",
         variant: "contained",
         size: "small",
         sx: {
           textTransform: "none"
         },
-        onClick: () => S(),
+        onClick: () => b(),
         children: "New label"
       })]
-    }), /* @__PURE__ */ y(m, {
+    }), /* @__PURE__ */ C(p, {
       sx: {
         mt: 2,
         border: 1,
@@ -699,174 +864,183 @@ function Ge({
         borderRadius: 1,
         overflow: "hidden"
       },
-      children: [/* @__PURE__ */ y(m, {
+      children: [/* @__PURE__ */ C(p, {
         sx: {
           p: 2,
           fontSize: 14,
           fontWeight: "bold",
           bgcolor: "grey.200"
         },
-        children: [u.length, " labels"]
-      }), /* @__PURE__ */ t(m, {
+        children: [g.length, " labels"]
+      }), /* @__PURE__ */ e(p, {
         sx: {
           pt: 0.5
         },
-        children: /* @__PURE__ */ t(Se, {
-          data: g,
+        children: /* @__PURE__ */ e(Le, {
+          data: f,
           selected: [],
-          renderItem: J,
+          renderItem: G,
           rowHeight: 64
         })
       })]
-    }), /* @__PURE__ */ t(be, {
+    }), /* @__PURE__ */ e(Be, {
       open: !!l,
       onClose: () => o(null),
       initialLabel: l,
-      onSubmit: b
-    }, l == null ? void 0 : l.id), /* @__PURE__ */ t(we, {
+      onSubmit: w
+    }, l == null ? void 0 : l.id), /* @__PURE__ */ e(Ne, {
       open: !!r,
-      onClose: () => s(null),
+      onClose: () => i(null),
       label: r,
       onSubmit: k
     }, r == null ? void 0 : r.id)]
   });
 }
-const K = V({}), Q = () => W(K), Ue = () => {
+const Y = V({}), Z = () => q(Y), ut = () => {
   const {
-    updateLabels: e
-  } = Q();
-  P(() => () => {
-    e();
+    updateLabels: t
+  } = Z();
+  E(() => () => {
+    t();
   }, []);
 };
-function Ye({
-  fetchLabels: e,
+function ht({
+  fetchLabels: t,
   children: n
 }) {
-  const [i, l] = I({
+  const {
+    locale: c
+  } = $(), [l, o] = S({
     loading: !0,
     labels: [],
     updateCounter: 1
   });
-  P(() => {
+  E(() => {
     (async () => {
       try {
-        l((f) => ({
-          ...f,
+        o((b) => ({
+          ...b,
           loading: !0
         }));
-        const g = await e();
-        l((f) => ({
-          ...f,
+        const m = await t();
+        o((b) => ({
+          ...b,
           loading: !1,
-          labels: ge(g)
+          labels: ze(m)
         }));
-      } catch (g) {
-        console.error(g), l((f) => ({
-          ...f,
+      } catch (m) {
+        console.error(m), o((b) => ({
+          ...b,
           loading: !1,
           labels: []
         }));
       }
     })();
-  }, [i.updateCounter]);
-  const o = z(() => {
-    var g;
-    return (g = i.labels) != null && g.length ? M(i.labels).reduce((f, p) => ({
-      ...f,
-      [p.id]: p
+  }, [l.updateCounter]);
+  const r = z(() => {
+    var m;
+    return (m = l.labels) != null && m.length ? L(l.labels).reduce((b, a) => ({
+      ...b,
+      [a.id]: a
     }), {}) : {};
-  }, [i.labels]), r = B((u) => u.map((g) => o[g]), [o]), s = B((u) => (u == null ? void 0 : u.split(",")) || [], []), a = B((u = []) => {
-    if (!!(u != null && u.length))
-      return u.join(",");
-  }, []), h = z(() => ({
-    loading: i.loading,
-    labels: i.labels || [],
-    updateLabels: () => l((u) => ({
-      ...u,
-      updateCounter: ++i.updateCounter
+  }, [l.labels]), i = O((s) => {
+    var m;
+    return {
+      ...s,
+      name: ((m = s.translation) == null ? void 0 : m[c]) || s.name
+    };
+  }, [c]), d = O((s) => s.map((m) => r[m]).map(i), [r, i]), h = O((s) => (s == null ? void 0 : s.split(",")) || [], []), g = O((s = []) => {
+    if (!!(s != null && s.length))
+      return s.join(",");
+  }, []), f = z(() => l.labels.map(i), [l.labels, i]), x = z(() => ({
+    loading: l.loading,
+    labels: l.labels || [],
+    updateLabels: () => o((s) => ({
+      ...s,
+      updateCounter: ++l.updateCounter
     })),
-    getLabelsById: r,
-    parseLabelIds: s,
-    stringifyLabelIds: a
-  }), [i, r, s, a]);
-  return /* @__PURE__ */ t(K.Provider, {
-    value: h,
+    getLabelsById: d,
+    parseLabelIds: h,
+    stringifyLabelIds: g,
+    localizedLabels: f
+  }), [l, d, h, g, f]);
+  return /* @__PURE__ */ e(Y.Provider, {
+    value: x,
     children: n
   });
 }
-function Xe({
-  labels: e,
+function pt({
+  labels: t,
   editable: n,
-  onChange: i,
+  onChange: c,
   sx: l
 }) {
-  const o = !(e != null && e.length), {
+  const o = !(t != null && t.length), {
     labels: r,
-    loading: s,
-    getLabelsById: a
-  } = Q(), [h, u] = I(!1);
-  if (s || !n && o)
+    loading: i,
+    getLabelsById: d
+  } = Z(), [h, g] = S(!1);
+  if (i || !n && o)
     return null;
-  const g = (v) => {
-    i == null || i(v), setTimeout(() => {
-      u(!1);
+  const f = (m) => {
+    c == null || c(m), setTimeout(() => {
+      g(!1);
     }, 300);
   };
   if (h)
-    return /* @__PURE__ */ t(se, {
-      onClickAway: () => h && u(!1),
-      children: /* @__PURE__ */ t("div", {
-        children: /* @__PURE__ */ t(ve, {
+    return /* @__PURE__ */ e(fe, {
+      onClickAway: () => h && g(!1),
+      children: /* @__PURE__ */ e("div", {
+        children: /* @__PURE__ */ e(Oe, {
           data: r,
-          value: e || [],
-          onChange: g
+          value: t || [],
+          onChange: f
         })
       })
     });
-  const f = a(e || []), p = [{
+  const x = d(t || []), s = [{
     display: "flex",
     gap: 1,
     alignItems: "center",
     flexWrap: "wrap"
   }, ...Array.isArray(l) ? l : [l]];
-  return /* @__PURE__ */ y(m, {
-    sx: p,
-    children: [f.map((v) => v ? /* @__PURE__ */ t(ae, {
-      label: v.name,
+  return /* @__PURE__ */ C(p, {
+    sx: s,
+    children: [x.map((m) => m ? /* @__PURE__ */ e(ge, {
+      label: m.name,
       variant: "filled",
       size: "small",
       sx: {
         borderRadius: 1
       }
-    }, v.id) : null), n && !o && /* @__PURE__ */ t(O, {
+    }, m.id) : null), n && !o && /* @__PURE__ */ e(N, {
       color: "inherit",
       size: "small",
-      onClick: () => u(!0),
+      onClick: () => g(!0),
       sx: {
         color: "grey.400"
       },
-      children: /* @__PURE__ */ t(ie, {
+      children: /* @__PURE__ */ e(pe, {
         sx: {
           fontSize: 20
         }
       })
-    }), n && o && /* @__PURE__ */ t(A, {
+    }), n && o && /* @__PURE__ */ e(T, {
       color: "inherit",
       variant: "outlined",
-      startIcon: /* @__PURE__ */ t(le, {}),
-      onClick: () => u(!0),
+      startIcon: /* @__PURE__ */ e(me, {}),
+      onClick: () => g(!0),
       children: "Edit labels"
     })]
   });
 }
 export {
-  Ge as LabelManager,
-  ve as LabelPicker,
-  D as LabelTree,
-  Xe as Labels,
-  Ye as LabelsProvider,
-  ge as transformLabels,
-  Q as useLabelsContext,
-  Ue as useLabelsUpdateOnDestroy
+  dt as LabelManager,
+  Oe as LabelPicker,
+  W as LabelTree,
+  pt as Labels,
+  ht as LabelsProvider,
+  ze as transformLabels,
+  Z as useLabelsContext,
+  ut as useLabelsUpdateOnDestroy
 };