@sito/dashboard 0.0.44 → 0.0.45

package/dist/dashboard.js

@@ -1,12 +1,12 @@
 import "./main.css";
-import { jsx as t, jsxs as N, Fragment as M } from "react/jsx-runtime";
-import { forwardRef as j, useState as P, useRef as B, useEffect as R, useCallback as k, createContext as I, useContext as W, useReducer as ne, useMemo as S } from "react";
+import { jsx as t, jsxs as b, Fragment as j } from "react/jsx-runtime";
+import { forwardRef as H, useState as F, useRef as A, useEffect as R, useCallback as x, createContext as q, useContext as J, useMemo as w, useReducer as se } from "react";
 function ae(e) {
-  const { className: a = "" } = e;
+  const { className: s = "" } = e;
   return /* @__PURE__ */ t(
     "svg",
     {
-      className: a,
+      className: s,
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 512 512",
       fill: "currentColor",
@@ -14,12 +14,12 @@ function ae(e) {
     }
   );
 }
-function se(e) {
-  const { className: a = "" } = e;
+function re(e) {
+  const { className: s = "" } = e;
   return /* @__PURE__ */ t(
     "svg",
     {
-      className: a,
+      className: s,
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 512 512",
       fill: "currentColor",
@@ -27,12 +27,12 @@ function se(e) {
     }
   );
 }
-function re(e) {
-  const { className: a = "" } = e;
+function le(e) {
+  const { className: s = "" } = e;
   return /* @__PURE__ */ t(
     "svg",
     {
-      className: a,
+      className: s,
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 320 512",
       fill: "currentColor",
@@ -40,12 +40,12 @@ function re(e) {
     }
   );
 }
-function le(e) {
-  const { className: a = "" } = e;
+function oe(e) {
+  const { className: s = "" } = e;
   return /* @__PURE__ */ t(
     "svg",
     {
-      className: a,
+      className: s,
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 320 512",
       fill: "currentColor",
@@ -53,16 +53,16 @@ function le(e) {
     }
   );
 }
-const oe = (e) => {
-  const { className: a = "" } = e;
-  return /* @__PURE__ */ t("svg", { className: a, viewBox: "0 0 16 16", children: /* @__PURE__ */ t("path", { d: "M9 15H7a1 1 0 010-2h2a1 1 0 010 2zM11 11H5a1 1 0 010-2h6a1 1 0 010 2zM13 7H3a1 1 0 010-2h10a1 1 0 010 2zM15 3H1a1 1 0 010-2h14a1 1 0 010 2z" }) });
+const ce = (e) => {
+  const { className: s = "" } = e;
+  return /* @__PURE__ */ t("svg", { className: s, viewBox: "0 0 16 16", children: /* @__PURE__ */ t("path", { d: "M9 15H7a1 1 0 010-2h2a1 1 0 010 2zM11 11H5a1 1 0 010-2h6a1 1 0 010 2zM13 7H3a1 1 0 010-2h10a1 1 0 010 2zM15 3H1a1 1 0 010-2h14a1 1 0 010 2z" }) });
 };
-function G(e) {
-  const { className: a = "" } = e;
+function Q(e) {
+  const { className: s = "" } = e;
   return /* @__PURE__ */ t(
     "svg",
     {
-      className: a,
+      className: s,
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 384 512",
       fill: "currentColor",
@@ -70,8 +70,8 @@ function G(e) {
     }
   );
 }
-var U = /* @__PURE__ */ ((e) => (e.error = "error", e.good = "good", e.default = "default", e))(U || {});
-const K = (e) => {
+var I = /* @__PURE__ */ ((e) => (e.error = "error", e.good = "good", e.default = "default", e))(I || {});
+const X = (e) => {
   switch (e) {
     case "error":
       return "input-error";
@@ -80,7 +80,7 @@ const K = (e) => {
     default:
       return "input-normal";
   }
-}, Q = (e) => {
+}, Y = (e) => {
   switch (e) {
     case "error":
       return "input-label-error";
@@ -89,7 +89,7 @@ const K = (e) => {
     default:
       return "input-label-normal";
   }
-}, X = (e) => {
+}, Z = (e) => {
   switch (e) {
     case "error":
       return "input-helper-text-error";
@@ -99,246 +99,246 @@ const K = (e) => {
       return "input-helper-text-normal";
   }
 };
-const q = j(function(e, a) {
+const V = H(function(e, s) {
   const {
-    value: s,
+    value: l,
     onChange: n,
     options: r,
-    containerClassName: o = "",
-    inputClassName: c = "",
+    containerClassName: a = "",
+    inputClassName: o = "",
     labelClassName: i = "",
-    helperText: l = "",
-    helperTextClassName: h = "",
+    helperText: c = "",
+    helperTextClassName: m = "",
     placeholder: u = "",
-    label: p = "",
-    name: C = "",
+    label: d = "",
+    name: N = "",
     id: g = "",
-    state: v = U.default,
+    state: C = I.default,
     children: f,
-    ...d
+    ...p
   } = e;
-  return /* @__PURE__ */ N("div", { className: `select-input-container ${o}`, children: [
+  return /* @__PURE__ */ b("div", { className: `select-input-container ${a}`, children: [
     /* @__PURE__ */ t(
       "select",
       {
-        ...d,
+        ...p,
         id: g,
-        ref: a,
-        name: C,
-        value: s,
+        ref: s,
+        name: N,
+        value: l,
         onChange: n,
-        className: `select-input ${K(v)} peer ${c}`,
-        children: r == null ? void 0 : r.map((m) => /* @__PURE__ */ t("option", { value: m.id, children: m.value ?? m.name ?? m.id }, m.id))
+        className: `select-input ${X(C)} peer ${o}`,
+        children: r == null ? void 0 : r.map((v) => /* @__PURE__ */ t("option", { value: v.id, children: v.value ?? v.name ?? v.id }, v.id))
       }
     ),
     /* @__PURE__ */ t(
       "label",
       {
-        htmlFor: C,
-        className: `select-input-label ${Q(v)} ${i}`,
-        children: p
+        htmlFor: N,
+        className: `select-input-label ${Y(C)} ${i}`,
+        children: d
       }
     ),
     f,
     /* @__PURE__ */ t(
       "p",
       {
-        className: `select-input-helper-text ${X(v)} ${h}`,
-        children: v !== "error" && v !== "good" ? u : l
+        className: `select-input-helper-text ${Z(C)} ${m}`,
+        children: C !== "error" && C !== "good" ? u : c
       }
     )
   ] });
 });
-const D = j(function(e, a) {
+const U = H(function(e, s) {
   const {
-    children: s,
-    state: n = U.default,
+    children: l,
+    state: n = I.default,
     label: r = "",
-    containerClassName: o = "",
-    inputClassName: c = "",
+    containerClassName: a = "",
+    inputClassName: o = "",
     labelClassName: i = "",
-    helperText: l = "",
-    helperTextClassName: h = "",
+    helperText: c = "",
+    helperTextClassName: m = "",
     value: u = "",
-    ...p
+    ...d
   } = e;
-  return /* @__PURE__ */ N("div", { className: `text-input-container ${o}`, children: [
+  return /* @__PURE__ */ b("div", { className: `text-input-container ${a}`, children: [
     /* @__PURE__ */ t(
       "input",
       {
-        ref: a,
+        ref: s,
         value: u,
-        className: `text-input ${K(n)} peer ${c} ${u ? "has-value" : ""} ${p.placeholder ? "has-placeholder" : ""}`,
-        ...p
+        className: `text-input ${X(n)} peer ${o} ${u ? "has-value" : ""} ${d.placeholder ? "has-placeholder" : ""}`,
+        ...d
       }
     ),
-    !!r && /* @__PURE__ */ N(
+    !!r && /* @__PURE__ */ b(
       "label",
       {
-        htmlFor: p.name,
-        className: `text-input-label ${Q(n)} ${i}`,
+        htmlFor: d.name,
+        className: `text-input-label ${Y(n)} ${i}`,
         children: [
           r,
-          p.required ? " *" : ""
+          d.required ? " *" : ""
         ]
       }
     ),
-    s,
-    !!l && /* @__PURE__ */ t(
+    l,
+    !!c && /* @__PURE__ */ t(
       "p",
       {
-        className: `text-input-helper-text ${X(n)} ${h}`,
-        children: l
+        className: `text-input-helper-text ${Z(n)} ${m}`,
+        children: c
       }
     )
   ] });
 });
-const ce = j(function(e, a) {
+const ie = H(function(e, s) {
   const {
-    checked: s,
+    checked: l,
     onChange: n,
-    state: r = U.default,
-    name: o = "",
-    id: c = "",
+    state: r = I.default,
+    name: a = "",
+    id: o = "",
     type: i = "text",
-    label: l = "",
-    containerClassName: h = "",
+    label: c = "",
+    containerClassName: m = "",
     inputClassName: u = "",
-    labelClassName: p = "",
-    helperText: C = "",
+    labelClassName: d = "",
+    helperText: N = "",
     helperTextClassName: g = "",
-    ...v
+    ...C
   } = e;
-  return /* @__PURE__ */ N("label", { className: `input-check-container ${h}`, children: [
+  return /* @__PURE__ */ b("label", { className: `input-check-container ${m}`, children: [
     /* @__PURE__ */ t(
       "input",
       {
-        id: c,
-        ref: a,
-        name: o,
+        id: o,
+        ref: s,
+        name: a,
         type: "checkbox",
-        checked: s,
+        checked: l,
         onChange: n,
         className: `input-check ${u}`,
-        ...v
+        ...C
       }
     ),
-    /* @__PURE__ */ t("span", { className: `input-check-label ${p}`, children: l })
+    /* @__PURE__ */ t("span", { className: `input-check-label ${d}`, children: c })
   ] });
 });
-const ie = j(function(e, a) {
+const de = H(function(e, s) {
   const {
-    state: s,
+    state: l,
     value: n,
     onChange: r,
-    options: o = [],
-    name: c = "",
+    options: a = [],
+    name: o = "",
     id: i = "",
-    label: l = "",
-    containerClassName: h = "",
+    label: c = "",
+    containerClassName: m = "",
     inputContainerClassName: u = "",
-    helperText: p = "",
-    placeholder: C = "",
+    helperText: d = "",
+    placeholder: N = "",
     multiple: g = !1,
-    ...v
-  } = e, [f, d] = P(""), [m, w] = P(!1), y = o.filter((b) => {
-    const x = String(b.value).toLowerCase().includes(f == null ? void 0 : f.toLowerCase());
-    return n && n.length ? n != null && n.some ? !(n != null && n.some((H) => H.id === b.id)) : (n == null ? void 0 : n.id) !== b.id : x;
-  }), _ = B(null);
+    ...C
+  } = e, [f, p] = F(""), [v, y] = F(!1), k = a.filter((h) => {
+    const $ = String(h.value).toLowerCase().includes(f == null ? void 0 : f.toLowerCase());
+    return n && n.length ? n != null && n.some ? !(n != null && n.some((W) => W.id === h.id)) : (n == null ? void 0 : n.id) !== h.id : $;
+  }), L = A(null);
   R(() => {
-    const b = (z) => {
-      _.current && !_.current.contains(z.target) && w(!1);
-    }, x = (z) => {
-      z.key === "Escape" && w(!1);
+    const h = (T) => {
+      L.current && !L.current.contains(T.target) && y(!1);
+    }, $ = (T) => {
+      T.key === "Escape" && y(!1);
     };
-    return document.addEventListener("mousedown", b), document.addEventListener("keydown", x), () => {
-      document.removeEventListener("mousedown", b), document.removeEventListener("keydown", x);
+    return document.addEventListener("mousedown", h), document.addEventListener("keydown", $), () => {
+      document.removeEventListener("mousedown", h), document.removeEventListener("keydown", $);
     };
   }, []);
-  const A = (b) => {
-    d(b.target.value);
-  }, J = k(
-    (b) => {
-      d(""), b ? g ? Array.isArray(n) && n.length ? r([...n, b]) : r([b]) : r(b) : r(null), w(!1);
+  const P = (h) => {
+    p(h.target.value);
+  }, M = x(
+    (h) => {
+      p(""), h ? g ? Array.isArray(n) && n.length ? r([...n, h]) : r([h]) : r(h) : r(null), y(!1);
     },
     [g, r, n]
-  ), te = k(
-    (b) => {
-      const x = n.filter((z, H) => H !== b);
-      x.length ? r(x) : r(null);
+  ), B = x(
+    (h) => {
+      const $ = n.filter((T, W) => W !== h);
+      $.length ? r($) : r(null);
     },
     [r, n]
   );
-  return /* @__PURE__ */ N(
+  return /* @__PURE__ */ b(
     "div",
     {
-      className: `autocomplete-input-container ${h}`,
-      ref: _,
+      className: `autocomplete-input-container ${m}`,
+      ref: L,
       children: [
         /* @__PURE__ */ t(
-          D,
+          U,
           {
-            state: s,
-            name: c,
+            state: l,
+            name: o,
             id: i,
             value: !g && n ? n.value ?? n.name : f,
-            onChange: A,
-            placeholder: C,
-            helperText: p,
-            onFocus: () => w(!0),
-            label: l,
+            onChange: P,
+            placeholder: N,
+            helperText: d,
+            onFocus: () => y(!0),
+            label: c,
             containerClassName: `autocomplete-text-input ${u}`,
-            ref: a,
-            ...v,
+            ref: s,
+            ...C,
             children: !g && n && /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
                 className: "autocomplete-delete-button",
-                onClick: (b) => {
-                  J(), b.stopPropagation();
+                onClick: (h) => {
+                  M(), h.stopPropagation();
                 },
-                children: /* @__PURE__ */ t(G, {})
+                children: /* @__PURE__ */ t(Q, {})
               }
             )
           }
         ),
-        m && /* @__PURE__ */ t("ul", { className: "autocomplete-suggestions-container", children: y.map((b) => /* @__PURE__ */ t(
+        v && /* @__PURE__ */ t("ul", { className: "autocomplete-suggestions-container", children: k.map((h) => /* @__PURE__ */ t(
           "li",
           {
             className: "autocomplete-suggestion-item",
-            onClick: (x) => {
-              J(b), x.stopPropagation();
+            onClick: ($) => {
+              M(h), $.stopPropagation();
             },
-            children: b.value ?? b.name
+            children: h.value ?? h.name
           },
-          b.id ?? b.value ?? b.name
+          h.id ?? h.value ?? h.name
         )) }),
-        g && Array.isArray(n) && n.length ? /* @__PURE__ */ t("ul", { className: "autocomplete-value-container", children: n.map((b, x) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
-          Te,
+        g && Array.isArray(n) && n.length ? /* @__PURE__ */ t("ul", { className: "autocomplete-value-container", children: n.map((h, $) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
+          G,
           {
-            label: String(b.value ?? b.name),
-            onDelete: (z) => {
-              te(x), z.stopPropagation();
+            label: String(h.value ?? h.name),
+            onDelete: (T) => {
+              B($), T.stopPropagation();
             }
           }
-        ) }, b.id ?? b.value ?? b.name)) }) : null
+        ) }, h.id ?? h.value ?? h.name)) }) : null
       ]
     }
   );
 });
-function de(e) {
+function ue(e) {
   const {
-    color: a = "stroke-blue-800",
-    className: s = "",
+    color: s = "stroke-blue-800",
+    className: l = "",
     loaderClass: n = "",
     strokeWidth: r = "4",
-    ...o
+    ...a
   } = e;
-  return /* @__PURE__ */ t("div", { ...o, className: `loading ${s}`, children: /* @__PURE__ */ t("div", { className: "loader-container", children: /* @__PURE__ */ t("div", { className: `loader ${n}`, children: /* @__PURE__ */ t("svg", { className: "circular", viewBox: "25 25 50 50", children: /* @__PURE__ */ t(
+  return /* @__PURE__ */ t("div", { ...a, className: `loading ${l}`, children: /* @__PURE__ */ t("div", { className: "loader-container", children: /* @__PURE__ */ t("div", { className: `loader ${n}`, children: /* @__PURE__ */ t("svg", { className: "circular", viewBox: "25 25 50 50", children: /* @__PURE__ */ t(
     "circle",
     {
-      className: `path ${a}`,
+      className: `path ${s}`,
       cx: "50",
       cy: "50",
       r: "20",
@@ -348,145 +348,145 @@ function de(e) {
     }
   ) }) }) }) });
 }
-const Y = I({});
-function Be(e) {
-  const { children: a, t: s } = e;
-  return /* @__PURE__ */ t(Y.Provider, { value: { t: s }, children: a });
+const ee = q({});
+function je(e) {
+  const { children: s, t: l } = e;
+  return /* @__PURE__ */ t(ee.Provider, { value: { t: l }, children: s });
 }
-const O = () => {
-  const e = W(Y);
+const z = () => {
+  const e = J(ee);
   if (e === void 0)
     throw new Error("translationContext must be used within a Provider");
   return e;
 };
-var E = /* @__PURE__ */ ((e) => (e[e.text = 0] = "text", e[e.number = 1] = "number", e[e.select = 2] = "select", e[e.autocomplete = 3] = "autocomplete", e[e.date = 4] = "date", e[e.check = 5] = "check", e))(E || {}), T = /* @__PURE__ */ ((e) => (e.ASC = "ASC", e.DESC = "DESC", e))(T || {});
-const ue = [20, 50, 100], Z = I({}), Me = (e) => {
-  const { children: a } = e, [s, n] = P(0), [r, o] = P(20), [c, i] = P(0), [l, h] = P("id"), [u, p] = P(T.DESC), [C, g] = P({}), v = k(
-    (m, w) => {
-      let y = u;
-      if (l === m)
+var D = /* @__PURE__ */ ((e) => (e[e.text = 0] = "text", e[e.number = 1] = "number", e[e.select = 2] = "select", e[e.autocomplete = 3] = "autocomplete", e[e.date = 4] = "date", e[e.check = 5] = "check", e))(D || {}), O = /* @__PURE__ */ ((e) => (e.ASC = "ASC", e.DESC = "DESC", e))(O || {});
+const pe = [20, 50, 100], te = q({}), Re = (e) => {
+  const { children: s } = e, [l, n] = F(0), [r, a] = F(20), [o, i] = F(0), [c, m] = F("id"), [u, d] = F(O.DESC), [N, g] = F({}), C = x(
+    (k, L) => {
+      let P = u;
+      if (c === k)
         switch (u) {
-          case T.ASC:
-            y = T.DESC;
+          case O.ASC:
+            P = O.DESC;
             break;
           default:
-            y = T.ASC;
+            P = O.ASC;
             break;
         }
-      h(m), p(y), w && w(m, y);
+      m(k), d(P), L && L(k, P);
     },
-    [l, u]
-  ), f = k((m) => {
-    const w = Object.entries(m).reduce(
-      (y, [_, A]) => (A && typeof A.value < "u" && (y[_] = A.value), y),
+    [c, u]
+  ), f = x((k) => {
+    const L = Object.entries(k).reduce(
+      (P, [M, B]) => (B && typeof B.value < "u" && (P[M] = B.value), P),
       {}
     );
-    g(w);
-  }, []), d = {
-    onSort: v,
-    total: s,
+    g(L);
+  }, []), p = x((k) => {
+    console.log(k), g({});
+  }, []), v = w(() => Object.keys(N).length, [N]), y = {
+    onSort: C,
+    total: l,
     setTotal: n,
-    sortingBy: l,
-    setSortingBy: h,
+    sortingBy: c,
+    setSortingBy: m,
     sortingOrder: u,
-    setSortingOrder: p,
+    setSortingOrder: d,
     pageSize: r,
-    pageSizes: ue,
-    setPageSize: o,
-    currentPage: c,
+    pageSizes: pe,
+    setPageSize: a,
+    currentPage: o,
     setCurrentPage: i,
-    filters: C,
-    onFilterApply: f
+    filters: N,
+    onFilterApply: f,
+    clearFilters: p,
+    countOfFilters: v
   };
-  return /* @__PURE__ */ t(Z.Provider, { value: d, children: a });
-}, L = () => {
-  const e = W(Z);
+  return /* @__PURE__ */ t(te.Provider, { value: y, children: s });
+}, E = () => {
+  const e = J(te);
   if (e === void 0)
     throw new Error("tableOptionsContext must be used within a Provider");
   return e;
 };
-var $ = /* @__PURE__ */ ((e) => (e[e.update = 0] = "update", e[e.reset = 1] = "reset", e))($ || {});
-const pe = (e) => {
+var S = /* @__PURE__ */ ((e) => (e[e.update = 0] = "update", e[e.reset = 1] = "reset", e))(S || {});
+const he = (e) => {
   if (e) {
-    const a = {}, s = Object.keys(e);
-    return s == null || s.forEach((n) => {
-      a[n] = { value: e[n] };
-    }), a;
+    const s = {}, l = Object.keys(e);
+    return l == null || l.forEach((n) => {
+      s[n] = { value: e[n] };
+    }), s;
   }
   return {};
 };
-function he(e, a) {
-  const { type: s } = a;
-  switch (s) {
-    case $.reset: {
-      const { filters: n } = a, r = {};
-      return n == null || n.forEach(({ propertyName: o, defaultValue: c }) => {
-        r[o] = { value: c };
-      }), { ...e, ...r };
-    }
-    case $.update: {
-      const { toUpdate: n } = a;
+function me(e, s) {
+  const { type: l } = s;
+  switch (l) {
+    case S.reset:
+      return {};
+    case S.update: {
+      const { toUpdate: n } = s;
       return { ...e, ...n };
     }
     default:
       return e;
   }
 }
-const ee = I({}), me = (e) => {
-  const { children: a } = e, { filters: s } = L(), [n, r] = ne(
-    he,
-    pe(s)
-  ), o = {
+const ne = q({}), be = (e) => {
+  const { children: s } = e, { filters: l } = E(), [n, r] = se(
+    me,
+    he(l)
+  ), a = {
     currentFilters: n,
     setCurrentFilters: r
   };
-  return /* @__PURE__ */ t(ee.Provider, { value: o, children: a });
-}, F = () => {
-  const e = W(ee);
+  return /* @__PURE__ */ t(ne.Provider, { value: a, children: s });
+}, _ = () => {
+  const e = J(ne);
   if (e === void 0)
     throw new Error("tableOptionsContext must be used within a Provider");
   return e;
 };
-function be(e) {
-  const { t: a } = O(), { entity: s = "", columns: n = [], hasAction: r = !0, onSortCallback: o } = e, { onSort: c, sortingOrder: i, sortingBy: l } = L(), h = S(() => {
+function Ne(e) {
+  const { t: s } = z(), { entity: l = "", columns: n = [], hasAction: r = !0, onSortCallback: a } = e, { onSort: o, sortingOrder: i, sortingBy: c } = E(), m = w(() => {
     var u;
-    return (u = n.sort((p, C) => (C.pos ?? 0) - (p.pos ?? 0)).filter((p) => p.display !== "none")) == null ? void 0 : u.map((p) => ({
-      id: p.key,
-      label: p.label,
-      className: p.className ?? "",
-      sortable: p.sortable ?? !0,
-      sortOptions: p.sortOptions
+    return (u = n.sort((d, N) => (N.pos ?? 0) - (d.pos ?? 0)).filter((d) => d.display !== "none")) == null ? void 0 : u.map((d) => ({
+      id: d.key,
+      label: d.label,
+      className: d.className ?? "",
+      sortable: d.sortable ?? !0,
+      sortOptions: d.sortOptions
     }));
-  }, [n, s, a]);
-  return /* @__PURE__ */ t("thead", { className: "table-headers-row", children: /* @__PURE__ */ N("tr", { children: [
-    h.map((u) => {
-      var p, C, g, v, f, d, m, w;
+  }, [n, l, s]);
+  return /* @__PURE__ */ t("thead", { className: "table-headers-row", children: /* @__PURE__ */ b("tr", { children: [
+    m.map((u) => {
+      var d, N, g, C, f, p, v, y;
       return /* @__PURE__ */ t(
         "th",
         {
           scope: "col",
           className: `table-headers-column ${u.className}`,
-          children: /* @__PURE__ */ N(
+          children: /* @__PURE__ */ b(
             "button",
             {
               disabled: !u.sortable,
-              onClick: () => c(u.id, o),
+              onClick: () => o(u.id, a),
               className: "table-headers-cell",
               children: [
                 /* @__PURE__ */ t("span", { className: "table-headers-label", children: u.label }),
                 u.sortable && /* @__PURE__ */ t(
                   "span",
                   {
-                    className: `${l === u.id ? "table-headers-sort-on" : "table-headers-sort"}`,
-                    children: i === T.ASC ? ((C = (p = u.sortOptions) == null ? void 0 : p.icons) == null ? void 0 : C.asc) ?? /* @__PURE__ */ t(
-                      se,
+                    className: `${c === u.id ? "table-headers-sort-on" : "table-headers-sort"}`,
+                    children: i === O.ASC ? ((N = (d = u.sortOptions) == null ? void 0 : d.icons) == null ? void 0 : N.asc) ?? /* @__PURE__ */ t(
+                      re,
                       {
-                        className: ((v = (g = u.sortOptions) == null ? void 0 : g.icons) == null ? void 0 : v.className) ?? "table-headers-sort-indicator"
+                        className: ((C = (g = u.sortOptions) == null ? void 0 : g.icons) == null ? void 0 : C.className) ?? "table-headers-sort-indicator"
                       }
-                    ) : ((d = (f = u.sortOptions) == null ? void 0 : f.icons) == null ? void 0 : d.desc) ?? /* @__PURE__ */ t(
+                    ) : ((p = (f = u.sortOptions) == null ? void 0 : f.icons) == null ? void 0 : p.desc) ?? /* @__PURE__ */ t(
                       ae,
                       {
-                        className: ((w = (m = u.sortOptions) == null ? void 0 : m.icons) == null ? void 0 : w.className) ?? "table-headers-sort-indicator"
+                        className: ((y = (v = u.sortOptions) == null ? void 0 : v.icons) == null ? void 0 : y.className) ?? "table-headers-sort-indicator"
                       }
                     )
                   }
@@ -498,16 +498,16 @@ function be(e) {
         u.id
       );
     }),
-    r && /* @__PURE__ */ t("th", { scope: "col", className: "table-headers-action", children: a("_accessibility:labels.actions") })
+    r && /* @__PURE__ */ t("th", { scope: "col", className: "table-headers-action", children: s("_accessibility:labels.actions") })
   ] }) });
 }
-function Ne() {
-  const { t: e } = O();
+function ge() {
+  const { t: e } = z();
   return /* @__PURE__ */ t("div", { className: "table-empty", children: /* @__PURE__ */ t("p", { children: e("_accessibility:components.table.empty") }) });
 }
 const ve = () => {
-  const { t: e } = O(), { total: a, pageSize: s, currentPage: n, setCurrentPage: r } = L();
-  return /* @__PURE__ */ N("div", { className: "table-navigation-pages", children: [
+  const { t: e } = z(), { total: s, pageSize: l, currentPage: n, setCurrentPage: r } = E();
+  return /* @__PURE__ */ b("div", { className: "table-navigation-pages", children: [
     /* @__PURE__ */ t(
       "button",
       {
@@ -516,147 +516,147 @@ const ve = () => {
         "aria-label": e("_accessibility:buttons.previous"),
         name: e("_accessibility:buttons.previous"),
         onClick: () => r(n - 1),
-        children: /* @__PURE__ */ t(le, { className: "w-2.5" })
+        children: /* @__PURE__ */ t(oe, { className: "w-2.5" })
       }
     ),
     /* @__PURE__ */ t(
       "button",
       {
-        disabled: Math.floor(a / ((n + 1) * s)) === 0,
+        disabled: Math.floor(s / ((n + 1) * l)) === 0,
         className: "table-navigation-buttons",
         name: e("_accessibility:buttons.next"),
         "aria-label": e("_accessibility:buttons.next"),
         onClick: () => r(n + 1),
-        children: /* @__PURE__ */ t(re, { className: "w-2.5" })
+        children: /* @__PURE__ */ t(le, { className: "w-2.5" })
       }
     )
   ] });
-}, ge = () => {
-  const { t: e } = O(), { total: a, pageSize: s, pageSizes: n, currentPage: r } = L(), o = (r + 1) * s > a ? a : (r + 1) * s;
-  return /* @__PURE__ */ N("div", { className: "table-navigation-sizes", children: [
-    n[0] < a && /* @__PURE__ */ t(M, { children: /* @__PURE__ */ N("p", { children: [
-      r * s + 1,
+}, Ce = () => {
+  const { t: e } = z(), { total: s, pageSize: l, pageSizes: n, currentPage: r } = E(), a = (r + 1) * l > s ? s : (r + 1) * l;
+  return /* @__PURE__ */ b("div", { className: "table-navigation-sizes", children: [
+    n[0] < s && /* @__PURE__ */ t(j, { children: /* @__PURE__ */ b("p", { children: [
+      r * l + 1,
       " - ",
-      o,
+      a,
       " ",
       e("_accessibility:components.table.of")
     ] }) }),
-    /* @__PURE__ */ t("p", { children: a })
+    /* @__PURE__ */ t("p", { children: s })
   ] });
 };
-function Ce() {
-  const { t: e } = O(), { pageSizes: a, pageSize: s, setPageSize: n } = L(), r = S(
-    () => a == null ? void 0 : a.map((o) => ({ id: o, value: o })),
-    [a]
+function fe() {
+  const { t: e } = z(), { pageSizes: s, pageSize: l, setPageSize: n } = E(), r = w(
+    () => s == null ? void 0 : s.map((a) => ({ id: a, value: a })),
+    [s]
   );
-  return /* @__PURE__ */ N("div", { className: "page-size", children: [
+  return /* @__PURE__ */ b("div", { className: "page-size", children: [
     /* @__PURE__ */ t("p", { children: e("_accessibility:components.table.pageSizes") }),
     /* @__PURE__ */ t(
-      q,
+      V,
       {
-        value: s,
+        value: l,
         options: r,
         inputClassName: "page-size-input",
         containerClassName: "page-size-input-container",
         helperTextClassName: "hidden",
-        onChange: (o) => n(Number(o.target.value))
+        onChange: (a) => n(Number(a.target.value))
       }
     )
   ] });
 }
-function fe() {
-  const { t: e } = O(), { total: a, pageSize: s, currentPage: n, setCurrentPage: r } = L(), o = S(() => {
-    const c = Math.ceil(a / s);
-    return Array.from({ length: c }, (i, l) => ({
-      id: l,
-      value: l + 1
+function we() {
+  const { t: e } = z(), { total: s, pageSize: l, currentPage: n, setCurrentPage: r } = E(), a = w(() => {
+    const o = Math.ceil(s / l);
+    return Array.from({ length: o }, (i, c) => ({
+      id: c,
+      value: c + 1
     }));
-  }, [a, s]);
-  return /* @__PURE__ */ N("div", { className: "jump-to-page", children: [
+  }, [s, l]);
+  return /* @__PURE__ */ b("div", { className: "jump-to-page", children: [
     /* @__PURE__ */ t("p", { children: e("_accessibility:components.table.jumpToPage") }),
     /* @__PURE__ */ t(
-      q,
+      V,
       {
         value: n,
-        options: o,
+        options: a,
         inputClassName: "jump-to-page-input",
         containerClassName: "jump-to-page-input-container",
         helperTextClassName: "hidden",
-        onChange: (c) => r(Number(c.target.value))
+        onChange: (o) => r(Number(o.target.value))
       }
     )
   ] });
 }
-function we() {
-  return /* @__PURE__ */ N("div", { className: "table-footer", children: [
+function ye() {
+  return /* @__PURE__ */ b("div", { className: "table-footer", children: [
+    /* @__PURE__ */ t(we, {}),
     /* @__PURE__ */ t(fe, {}),
     /* @__PURE__ */ t(Ce, {}),
-    /* @__PURE__ */ t(ge, {}),
     /* @__PURE__ */ t(ve, {})
   ] });
 }
-function ye(e) {
-  const { propertyName: a, options: s, label: n } = e, { currentFilters: r, setCurrentFilters: o } = F(), c = S(() => {
-    var l;
-    return ((l = r[a]) == null ? void 0 : l.value) ?? s[0];
-  }, [r]), i = k((l) => {
-    o({
-      type: $.update,
-      toUpdate: { [a]: { value: l.target.value } }
+function xe(e) {
+  const { propertyName: s, options: l, label: n } = e, { currentFilters: r, setCurrentFilters: a } = _(), o = w(() => {
+    var c;
+    return ((c = r[s]) == null ? void 0 : c.value) ?? l[0];
+  }, [r]), i = x((c) => {
+    a({
+      type: S.update,
+      toUpdate: { [s]: { value: c.target.value } }
     });
   }, []);
   return /* @__PURE__ */ t(
-    q,
+    V,
     {
-      value: c,
+      value: o,
       label: n,
-      options: s,
+      options: l,
       helperTextClassName: "hidden",
       containerClassName: "options-widget-container",
       onChange: i
     }
   );
 }
-const xe = (e) => {
-  const { propertyName: a, label: s } = e, { currentFilters: n, setCurrentFilters: r } = F(), o = S(() => {
+const $e = (e) => {
+  const { propertyName: s, label: l } = e, { currentFilters: n, setCurrentFilters: r } = _(), a = w(() => {
     var i;
-    return ((i = n[a]) == null ? void 0 : i.value) ?? "";
-  }, [n]), c = k((i) => {
+    return ((i = n[s]) == null ? void 0 : i.value) ?? "";
+  }, [n]), o = x((i) => {
     r({
-      type: $.update,
-      toUpdate: { [a]: { value: i.target.value } }
+      type: S.update,
+      toUpdate: { [s]: { value: i.target.value } }
     });
   }, []);
   return /* @__PURE__ */ t(
-    D,
+    U,
     {
-      value: o ?? "",
-      label: s,
-      onChange: c,
+      value: a ?? "",
+      label: l,
+      onChange: o,
       containerClassName: "input-widget-container",
       helperTextClassName: ""
     }
   );
-}, ke = (e) => {
-  const { propertyName: a, label: s } = e, { currentFilters: n, setCurrentFilters: r } = F(), o = S(() => {
+}, Se = (e) => {
+  const { propertyName: s, label: l } = e, { currentFilters: n, setCurrentFilters: r } = _(), a = w(() => {
     var i;
-    return ((i = n[a]) == null ? void 0 : i.value) ?? "";
-  }, [n]), c = k((i) => {
+    return ((i = n[s]) == null ? void 0 : i.value) ?? "";
+  }, [n]), o = x((i) => {
     r({
-      type: $.update,
-      toUpdate: { [a]: { value: i.target.checked } }
+      type: S.update,
+      toUpdate: { [s]: { value: i.target.checked } }
     });
   }, []);
-  return /* @__PURE__ */ t(ce, { label: s, checked: o ?? !1, onChange: c });
+  return /* @__PURE__ */ t(ie, { label: l, checked: a ?? !1, onChange: o });
 };
-function $e(e) {
-  const { propertyName: a, label: s, options: n, multiple: r = !0 } = e, { currentFilters: o, setCurrentFilters: c } = F(), i = S(() => o[a] ?? n[0], [o]), l = k(
-    (h) => {
-      c({
-        type: $.update,
+function ke(e) {
+  const { propertyName: s, label: l, options: n, multiple: r = !0 } = e, { currentFilters: a, setCurrentFilters: o } = _(), i = w(() => a[s] ?? n[0], [a]), c = x(
+    (m) => {
+      o({
+        type: S.update,
         toUpdate: {
-          [a]: {
-            value: h
+          [s]: {
+            value: m
           }
         }
       });
@@ -664,66 +664,66 @@ function $e(e) {
     [r]
   );
   return /* @__PURE__ */ t(
-    ie,
+    de,
     {
       value: i == null ? void 0 : i.value,
-      label: s,
+      label: l,
       options: n,
       multiple: r,
       helperTextClassName: "hidden",
       containerClassName: "options-widget-container",
-      onChange: l
+      onChange: c
     }
   );
 }
-const V = (e) => {
-  var p, C, g, v;
-  const { propertyName: a, label: s, inputType: n } = e, { t: r } = O(), { currentFilters: o, setCurrentFilters: c } = F(), i = B(null), l = B(null), h = k((f) => {
-    var d;
-    c({
-      type: $.update,
+const K = (e) => {
+  var d, N, g, C;
+  const { propertyName: s, label: l, inputType: n } = e, { t: r } = z(), { currentFilters: a, setCurrentFilters: o } = _(), i = A(null), c = A(null), m = x((f) => {
+    var p;
+    o({
+      type: S.update,
       toUpdate: {
-        [a]: {
-          value: { end: ((d = l == null ? void 0 : l.current) == null ? void 0 : d.value) ?? null, start: f.target.value }
+        [s]: {
+          value: { end: ((p = c == null ? void 0 : c.current) == null ? void 0 : p.value) ?? null, start: f.target.value }
         }
       }
     });
-  }, []), u = k((f) => {
-    var d;
-    c({
-      type: $.update,
+  }, []), u = x((f) => {
+    var p;
+    o({
+      type: S.update,
       toUpdate: {
-        [a]: {
+        [s]: {
           value: {
-            start: ((d = i == null ? void 0 : i.current) == null ? void 0 : d.value) ?? null,
+            start: ((p = i == null ? void 0 : i.current) == null ? void 0 : p.value) ?? null,
             end: f.target.value
           }
         }
       }
     });
   }, []);
-  return /* @__PURE__ */ N("div", { className: "range-widget-container", children: [
-    /* @__PURE__ */ t("p", { className: "text-input-label input-widget-label input-label-normal", children: s }),
-    /* @__PURE__ */ N("div", { className: "range-widget-row", children: [
+  return /* @__PURE__ */ b("div", { className: "range-widget-container", children: [
+    /* @__PURE__ */ t("p", { className: "text-input-label input-widget-label input-label-normal", children: l }),
+    /* @__PURE__ */ b("div", { className: "range-widget-row", children: [
       /* @__PURE__ */ t(
-        D,
+        U,
         {
-          value: ((C = (p = o[a]) == null ? void 0 : p.value) == null ? void 0 : C.start) ?? "",
+          value: ((N = (d = a[s]) == null ? void 0 : d.value) == null ? void 0 : N.start) ?? "",
           placeholder: r("_accessibility:components.table.filters.range.start"),
           type: n,
           ref: i,
-          onChange: h,
+          onChange: m,
           containerClassName: "input-widget-container",
           helperTextClassName: ""
         }
       ),
       /* @__PURE__ */ t(
-        D,
+        U,
         {
-          value: ((v = (g = o[a]) == null ? void 0 : g.value) == null ? void 0 : v.end) ?? "",
+          value: ((C = (g = a[s]) == null ? void 0 : g.value) == null ? void 0 : C.end) ?? "",
           placeholder: r("_accessibility:components.table.filters.range.end"),
           type: n,
-          ref: l,
+          ref: c,
           onChange: u,
           containerClassName: "input-widget-container",
           helperTextClassName: ""
@@ -731,255 +731,310 @@ const V = (e) => {
       )
     ] })
   ] });
-}, Se = (e) => {
+}, Pe = (e) => {
   switch (e.type) {
-    case E.text:
-      return /* @__PURE__ */ t(xe, { ...e });
-    case E.number:
+    case D.text:
+      return /* @__PURE__ */ t($e, { ...e });
+    case D.number:
       return /* @__PURE__ */ t(
-        V,
+        K,
         {
           ...e,
           inputType: "number"
         }
       );
-    case E.date:
+    case D.date:
       return /* @__PURE__ */ t(
-        V,
+        K,
         {
           ...e,
           inputType: "date"
         }
       );
-    case E.select:
-      return /* @__PURE__ */ t(ye, { ...e });
-    case E.autocomplete:
-      return /* @__PURE__ */ t($e, { ...e });
-    case E.check:
+    case D.select:
+      return /* @__PURE__ */ t(xe, { ...e });
+    case D.autocomplete:
       return /* @__PURE__ */ t(ke, { ...e });
+    case D.check:
+      return /* @__PURE__ */ t(Se, { ...e });
   }
-  return /* @__PURE__ */ t(M, {});
+  return /* @__PURE__ */ t(j, {});
 };
-const Pe = (e) => {
-  var C, g, v, f;
-  const { filters: a = [], options: s } = e, [n, r] = P(!1), { onFilterApply: o, filters: c } = L(), { currentFilters: i, setCurrentFilters: l } = F(), { t: h } = O(), u = B(null), p = B(null);
+const Fe = (e) => {
+  const { filters: s = [], options: l, show: n, handleShow: r } = e, { onFilterApply: a, filters: o } = E(), { currentFilters: i, setCurrentFilters: c } = _(), { t: m } = z(), u = A(null);
   return R(() => {
-    const d = ({ target: m }) => {
-      var w, y;
-      p.current && (!n || (w = p.current) != null && w.contains(m) || (y = u == null ? void 0 : u.current) != null && y.contains(m) || r(!1));
+    const d = ({ target: N }) => {
+      var g;
+      u.current && (!n || (g = u.current) != null && g.contains(N) || r(!1));
     };
     return document.addEventListener("click", d), () => document.removeEventListener("click", d);
   }), R(() => {
-    const d = (m) => {
-      !n || m.code !== "Escape" || r(!1);
+    const d = (N) => {
+      !n || N.code !== "Escape" || r(!1);
     };
     return document.addEventListener("keydown", d), () => document.removeEventListener("keydown", d);
-  }), /* @__PURE__ */ N("div", { className: "filter-dropdown-main", children: [
-    ((C = s == null ? void 0 : s.button) == null ? void 0 : C.hide) !== !0 && /* @__PURE__ */ N(
-      "button",
+  }), /* @__PURE__ */ t("div", { className: `filter-dropdown-backdrop ${n ? "opened" : "closed"}`, children: /* @__PURE__ */ b("div", { className: "filter-popup", children: [
+    /* @__PURE__ */ t("div", { className: "filter-title", children: m("_accessibility:buttons.filters") }),
+    /* @__PURE__ */ t("ul", { className: "filter-container", children: s.map((d) => /* @__PURE__ */ t("li", { className: "filter-container-item", children: Pe(d) }, d.propertyName)) }),
+    /* @__PURE__ */ t("div", { className: "filter-footer", children: /* @__PURE__ */ b("ul", { className: "filter-buttons-row", children: [
+      /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
+        "button",
+        {
+          onClick: () => c({
+            type: S.reset,
+            filters: s
+          }),
+          className: "filter-dropdown-button small filter-dropdown-cancel",
+          children: m("_accessibility:buttons.clear")
+        }
+      ) }),
+      /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
+        "button",
+        {
+          className: "filter-dropdown-button small filter-dropdown-submit",
+          onClick: () => {
+            r(!1), a(i);
+          },
+          onBlur: () => r(!1),
+          children: m("_accessibility:buttons.applyFilters")
+        }
+      ) })
+    ] }) })
+  ] }) });
+}, ze = (e) => {
+  const { end: s, start: l, label: n, onClearFilter: r } = e;
+  return /* @__PURE__ */ t(
+    G,
+    {
+      label: `${n}: ${l || "♾️"} - ${s || "♾️"}`,
+      onDelete: () => r(n)
+    }
+  );
+};
+const Ee = (e) => {
+  const { filtersDefinition: s } = e, l = w(() => {
+    const o = {};
+    return s.forEach((i) => {
+      o[i.propertyName] = i.label ?? i.propertyName;
+    }), o;
+  }, [s]), { filters: n, clearFilters: r } = E(), a = w(() => (Object.keys(n).map((o) => console.log(n[o])), Object.keys(n)), [n]);
+  return /* @__PURE__ */ t("ul", { className: "active-filters-main", children: a == null ? void 0 : a.map((o) => {
+    var i;
+    return /* @__PURE__ */ t("li", { children: n[o].end || n[o].start ? /* @__PURE__ */ t(
+      ze,
       {
-        ref: u,
-        className: "filter-dropdown-button normal filter-dropdown-trigger",
-        "aria-haspopup": "true",
-        onClick: () => {
-          var d, m, w;
-          return ((w = (d = s == null ? void 0 : s.dropdown) == null ? void 0 : d.setOpened) == null ? void 0 : w.call(d, !((m = s == null ? void 0 : s.dropdown) != null && m.opened))) ?? r(!n);
-        },
-        "aria-expanded": ((g = s == null ? void 0 : s.dropdown) == null ? void 0 : g.opened) ?? n,
-        children: [
-          /* @__PURE__ */ t("span", { className: "sr-only", children: h("_accessibility:buttons.filters") }),
-          /* @__PURE__ */ t("wbr", {}),
-          ((v = s == null ? void 0 : s.button) == null ? void 0 : v.icon) ?? /* @__PURE__ */ t(oe, { className: "filter-dropdown-trigger-icon" })
-        ]
+        label: l[o],
+        start: n[o].start,
+        end: n[o].end,
+        onClearFilter: r
       }
-    ),
-    /* @__PURE__ */ t(
-      "div",
+    ) : /* @__PURE__ */ t(
+      G,
       {
-        className: `filter-dropdown-backdrop ${(f = s == null ? void 0 : s.dropdown) != null && f.opened || n ? "opened" : "closed"}`,
-        children: /* @__PURE__ */ N("div", { className: "filter-popup", children: [
-          /* @__PURE__ */ t("div", { className: "filter-title", children: h("_accessibility:buttons.filters") }),
-          /* @__PURE__ */ t("ul", { className: "filter-container", children: a.map((d) => /* @__PURE__ */ t("li", { className: "filter-container-item", children: Se(d) }, d.propertyName)) }),
-          /* @__PURE__ */ t("div", { className: "filter-footer", children: /* @__PURE__ */ N("ul", { className: "filter-buttons-row", children: [
-            /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
-              "button",
-              {
-                onClick: () => l({
-                  type: $.reset,
-                  filters: a
-                }),
-                className: "filter-dropdown-button small filter-dropdown-cancel",
-                children: h("_accessibility:buttons.clear")
-              }
-            ) }),
-            /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
-              "button",
-              {
-                className: "filter-dropdown-button small filter-dropdown-submit",
-                onClick: () => {
-                  var d, m;
-                  ((m = (d = s == null ? void 0 : s.dropdown) == null ? void 0 : d.setOpened) == null ? void 0 : m.call(d, !1)) ?? r(!1), o(i);
-                },
-                onBlur: () => {
-                  var d, m;
-                  return ((m = (d = s == null ? void 0 : s.dropdown) == null ? void 0 : d.setOpened) == null ? void 0 : m.call(d, !1)) ?? r(!1);
-                },
-                children: h("_accessibility:buttons.applyFilters")
-              }
-            ) })
-          ] }) })
-        ] })
+        label: `${l[o]}: ${((i = n[o]) == null ? void 0 : i.value) ?? n[o]}`,
+        onDelete: () => r(o)
       }
-    )
-  ] });
-}, Oe = (e) => {
-  var i;
-  const { columns: a, title: s, isLoading: n, toolbar: r, filterOptions: o } = e, c = S(() => a ? a.sort((l, h) => (h.pos ?? 0) - (l.pos ?? 0)).filter((l) => !!l.filterOptions).map((l) => {
-    var h;
+    ) }, o);
+  }) });
+}, Le = (e) => {
+  var g, C, f;
+  const { columns: s, title: l, isLoading: n, toolbar: r, filterOptions: a } = e, { countOfFilters: o } = E(), { t: i } = z(), c = w(() => s ? s.sort((p, v) => (v.pos ?? 0) - (p.pos ?? 0)).filter((p) => !!p.filterOptions).map((p) => {
+    var v;
     return {
-      ...l.filterOptions,
-      label: ((h = l.filterOptions) == null ? void 0 : h.label) ?? l.label,
-      propertyName: l.key
+      ...p.filterOptions,
+      label: ((v = p.filterOptions) == null ? void 0 : v.label) ?? p.label,
+      propertyName: p.key
     };
-  }) : [], [a]);
-  return /* @__PURE__ */ N(
+  }) : [], [s]), [m, u] = F(!1), d = x(
+    (p) => {
+      var v, y;
+      ((y = (v = a == null ? void 0 : a.dropdown) == null ? void 0 : v.setOpened) == null ? void 0 : y.call(v, p ?? !1)) ?? u(p ?? !1);
+    },
+    [a, m]
+  ), N = w(
+    () => {
+      var p;
+      return ((p = a == null ? void 0 : a.dropdown) == null ? void 0 : p.opened) ?? m;
+    },
+    [a, m]
+  );
+  return /* @__PURE__ */ b(
     "div",
     {
-      className: `table-header ${s && (r || !((i = o == null ? void 0 : o.button) != null && i.hide)) ? "two" : "one"}`,
+      className: `table-header ${l && (r || !((g = a == null ? void 0 : a.button) != null && g.hide)) ? "two" : "one"}`,
       children: [
-        s && /* @__PURE__ */ t("h1", { className: "table-header-title", children: s }),
-        n ? null : /* @__PURE__ */ N("div", { className: "table-header-right", children: [
-          r,
-          !!c && !!c.length && /* @__PURE__ */ t(
-            Pe,
-            {
-              filters: c,
-              options: o
-            }
-          )
-        ] })
+        /* @__PURE__ */ b("div", { children: [
+          l && /* @__PURE__ */ t("h1", { className: "table-header-title", children: l }),
+          n ? null : /* @__PURE__ */ b("div", { className: "table-header-right", children: [
+            r,
+            ((C = a == null ? void 0 : a.button) == null ? void 0 : C.hide) !== !0 && /* @__PURE__ */ b(
+              "button",
+              {
+                className: "filter-dropdown-button normal filter-dropdown-trigger",
+                "aria-haspopup": "true",
+                onClick: () => {
+                  var p;
+                  return d(
+                    ((p = a == null ? void 0 : a.dropdown) == null ? void 0 : p.opened) ?? !m
+                  );
+                },
+                "aria-expanded": N,
+                children: [
+                  /* @__PURE__ */ t(
+                    _e,
+                    {
+                      count: o,
+                      className: `${o > 0 ? "show" : "hide"} `
+                    }
+                  ),
+                  /* @__PURE__ */ t("span", { className: "sr-only", children: i("_accessibility:buttons.filters") }),
+                  /* @__PURE__ */ t("wbr", {}),
+                  ((f = a == null ? void 0 : a.button) == null ? void 0 : f.icon) ?? /* @__PURE__ */ t(ce, { className: "filter-dropdown-trigger-icon" })
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ t(Ee, { filtersDefinition: c }),
+        !!c && !!c.length && /* @__PURE__ */ t(
+          Fe,
+          {
+            filters: c,
+            show: N,
+            handleShow: d,
+            options: a
+          }
+        )
       ]
     }
   );
-}, ze = (e) => e, Ee = (e) => {
-  const { columns: a, softDeleteProperty: s = "deleted", data: n, actions: r } = e, o = S(
-    () => a.sort((c, i) => (i.pos ?? 0) - (c.pos ?? 0)).filter((c) => c.display !== "none"),
-    [a]
+}, Te = (e) => e, De = (e) => {
+  const { columns: s, softDeleteProperty: l = "deleted", data: n, actions: r } = e, a = w(
+    () => s.sort((o, i) => (i.pos ?? 0) - (o.pos ?? 0)).filter((o) => o.display !== "none"),
+    [s]
   );
-  return n == null ? void 0 : n.map((c) => {
+  return n == null ? void 0 : n.map((o) => {
     var i;
-    return /* @__PURE__ */ N(
+    return /* @__PURE__ */ b(
       "tr",
       {
-        className: `table-row ${c[s] ? "deleted-class" : ""}`,
+        className: `table-row ${o[l] ? "deleted-class" : ""}`,
         children: [
-          o == null ? void 0 : o.map((l, h) => /* @__PURE__ */ t(
+          a == null ? void 0 : a.map((c, m) => /* @__PURE__ */ t(
             "td",
             {
-              className: `table-row-cell ${h === 0 ? "basic" : ""} ${l.className ?? ""}`,
-              children: l.renderBody ? l.renderBody(c[l.key], c) : ze(c[l.key])
+              className: `table-row-cell ${m === 0 ? "basic" : ""} ${c.className ?? ""}`,
+              children: c.renderBody ? c.renderBody(o[c.key], o) : Te(o[c.key])
             },
-            l.key
+            c.key
           )),
-          r ? /* @__PURE__ */ t("td", { children: /* @__PURE__ */ t("div", { className: "table-row-cell-action", children: (i = r(c).filter((l) => !l.hidden)) == null ? void 0 : i.map((l) => /* @__PURE__ */ t(Le, { content: l.tooltip, children: /* @__PURE__ */ t("button", { onClick: () => l.onClick(c), children: l.icon }) }, l.id)) }) }) : null
+          r ? /* @__PURE__ */ t("td", { children: /* @__PURE__ */ t("div", { className: "table-row-cell-action", children: (i = r(o).filter((c) => !c.hidden)) == null ? void 0 : i.map((c) => /* @__PURE__ */ t(Oe, { content: c.tooltip, children: /* @__PURE__ */ t("button", { onClick: () => c.onClick(o), children: c.icon }) }, c.id)) }) }) : null
         ]
       },
-      c.id
+      o.id
     );
   });
 };
-function De(e) {
+function Ue(e) {
   const {
-    data: a,
-    onSort: s,
+    data: s,
+    onSort: l,
     entity: n = "",
     isLoading: r = !1,
-    actions: o,
-    columns: c = [],
+    actions: a,
+    columns: o = [],
     contentClassName: i = "",
-    className: l = "",
-    softDeleteProperty: h = "deleted",
+    className: c = "",
+    softDeleteProperty: m = "deleted",
     ...u
-  } = e, p = S(() => !(a != null && a.length), [a]);
-  return /* @__PURE__ */ t(me, { children: /* @__PURE__ */ N("div", { className: `${l} table-main`, children: [
-    /* @__PURE__ */ t(Oe, { columns: c, isLoading: r, ...u }),
-    r ? /* @__PURE__ */ t(de, { className: "table-loading" }) : /* @__PURE__ */ t(M, { children: p ? /* @__PURE__ */ t(Ne, {}) : /* @__PURE__ */ N(M, { children: [
-      /* @__PURE__ */ t("div", { className: `${i} table-body`, children: /* @__PURE__ */ N("table", { className: "table-content", children: [
+  } = e, d = w(() => !(s != null && s.length), [s]);
+  return /* @__PURE__ */ t(be, { children: /* @__PURE__ */ b("div", { className: `${c} table-main`, children: [
+    /* @__PURE__ */ t(Le, { columns: o, isLoading: r, ...u }),
+    r ? /* @__PURE__ */ t(ue, { className: "table-loading" }) : /* @__PURE__ */ t(j, { children: d ? /* @__PURE__ */ t(ge, {}) : /* @__PURE__ */ b(j, { children: [
+      /* @__PURE__ */ t("div", { className: `${i} table-body`, children: /* @__PURE__ */ b("table", { className: "table-content", children: [
         /* @__PURE__ */ t(
-          be,
+          Ne,
           {
             entity: n,
-            columns: c,
-            onSortCallback: s,
-            hasAction: !!o
+            columns: o,
+            onSortCallback: l,
+            hasAction: !!a
           }
         ),
         /* @__PURE__ */ t("tbody", { children: /* @__PURE__ */ t(
-          Ee,
+          De,
           {
-            data: a,
-            actions: o,
-            columns: c,
-            softDeleteProperty: h
+            data: s,
+            actions: a,
+            columns: o,
+            softDeleteProperty: m
           }
         ) })
       ] }) }),
-      /* @__PURE__ */ t(we, {})
+      /* @__PURE__ */ t(ye, {})
     ] }) })
   ] }) });
 }
-function Le(e) {
-  const { content: a, children: s } = e;
-  return /* @__PURE__ */ N("div", { className: "tooltip-container", children: [
-    s,
-    /* @__PURE__ */ t("div", { className: "tooltip-text", children: a })
+function Oe(e) {
+  const { content: s, children: l } = e;
+  return /* @__PURE__ */ b("div", { className: "tooltip-container", children: [
+    l,
+    /* @__PURE__ */ t("div", { className: "tooltip-text", children: s })
   ] });
 }
-function Te(e) {
-  const { label: a, onDelete: s, className: n = "", spanClassName: r = "" } = e;
-  return /* @__PURE__ */ N("div", { className: `chip-main ${n}`, children: [
-    /* @__PURE__ */ t("span", { className: r, children: a }),
-    s ? /* @__PURE__ */ t("button", { type: "button", className: "chip-delete-button", onClick: s, children: /* @__PURE__ */ t(G, {}) }) : null
+function G(e) {
+  const { label: s, onDelete: l, className: n = "", spanClassName: r = "" } = e;
+  return /* @__PURE__ */ b("div", { className: `chip-main ${n}`, children: [
+    /* @__PURE__ */ t("span", { className: r, children: s }),
+    l ? /* @__PURE__ */ t("button", { type: "button", className: "chip-delete-button", onClick: l, children: /* @__PURE__ */ t(Q, {}) }) : null
   ] });
 }
+const _e = (e) => {
+  const { count: s, className: l = "" } = e, n = A(null);
+  return R(() => {
+    var r, a;
+    (r = n.current) != null && r.parentNode && (((a = n.current) == null ? void 0 : a.parentNode).style.position = "relative");
+  }, [n]), /* @__PURE__ */ t("span", { ref: n, className: `${l} badge-main`, children: s });
+};
 export {
-  ie as AutocompleteInput,
-  ce as CheckInput,
+  de as AutocompleteInput,
+  _e as Badge,
+  ie as CheckInput,
   ae as ChevronDown,
-  le as ChevronLeft,
-  re as ChevronRight,
-  se as ChevronUp,
-  Te as Chip,
-  G as Close,
-  be as Columns,
-  ge as CountOfTotal,
-  Ne as Empty,
-  Pe as FilterPopup,
-  E as FilterTypes,
-  oe as Filters,
-  $ as FiltersActions,
-  me as FiltersProvider,
-  we as Footer,
-  de as Loading,
+  oe as ChevronLeft,
+  le as ChevronRight,
+  re as ChevronUp,
+  G as Chip,
+  Q as Close,
+  Ne as Columns,
+  Ce as CountOfTotal,
+  ge as Empty,
+  Fe as FilterDropdown,
+  D as FilterTypes,
+  ce as Filters,
+  S as FiltersActions,
+  be as FiltersProvider,
+  ye as Footer,
+  ue as Loading,
   ve as Navigation,
-  Ce as PageSize,
-  Ee as Rows,
-  q as SelectInput,
-  T as SortOrder,
-  U as State,
-  De as Table,
-  Oe as TableHeader,
-  Me as TableOptionsProvider,
-  D as TextInput,
-  Le as Tooltip,
-  Be as TranslationProvider,
-  he as filtersReducer,
-  X as helperTextStateClassName,
-  pe as initializer,
-  K as inputStateClassName,
-  Q as labelStateClassName,
-  Se as renderFilterComponent,
-  F as useFilters,
-  L as useTableOptions,
-  O as useTranslation
+  fe as PageSize,
+  De as Rows,
+  V as SelectInput,
+  O as SortOrder,
+  I as State,
+  Ue as Table,
+  Le as TableHeader,
+  Re as TableOptionsProvider,
+  U as TextInput,
+  Oe as Tooltip,
+  je as TranslationProvider,
+  me as filtersReducer,
+  Z as helperTextStateClassName,
+  he as initializer,
+  X as inputStateClassName,
+  Y as labelStateClassName,
+  Pe as renderFilterComponent,
+  _ as useFilters,
+  E as useTableOptions,
+  z as useTranslation
 };