@sito/dashboard 0.0.43 → 0.0.45

package/dist/dashboard.js

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