@sito/dashboard 0.0.28 → 0.0.29

package/dist/dashboard.js

@@ -1,383 +1,968 @@
 import "./main.css";
-import { jsx as t, jsxs as d, Fragment as S } from "react/jsx-runtime";
-import { createContext as z, useState as x, useCallback as B, useContext as P, useMemo as $, forwardRef as D, useEffect as M } from "react";
-var f = /* @__PURE__ */ ((e) => (e.ASC = "ASC", e.DESC = "DESC", e))(f || {});
-const L = [20, 50, 100], T = z({}), O = (e) => {
-  const { children: a } = e, [l, n] = x(0), [s, r] = x(20), [m, p] = x(0), [b, v] = x("id"), [i, o] = x(f.DESC), g = {
-    onSort: B(
-      (c) => {
-        let C = i;
-        if (b === c)
-          switch (i) {
-            case f.ASC:
-              C = f.DESC;
-              break;
-            default:
-              C = f.ASC;
-              break;
-          }
-        v(c), o(C);
-      },
-      [b, i]
-    ),
-    total: l,
-    setTotal: n,
-    sortingBy: b,
-    setSortingBy: v,
-    sortingOrder: i,
-    setSortingOrder: o,
-    pageSize: s,
-    pageSizes: L,
-    setPageSize: r,
-    currentPage: m,
-    setCurrentPage: p
-  };
-  return /* @__PURE__ */ t(T.Provider, { value: g, children: a });
-}, k = () => {
-  const e = P(T);
-  if (e === void 0)
-    throw new Error("tableOptionsContext must be used within a Provider");
-  return e;
-}, _ = z({});
-function ee(e) {
-  const { children: a, t: l } = e;
-  return /* @__PURE__ */ t(_.Provider, { value: { t: l }, children: a });
-}
-const y = () => {
-  const e = P(_);
-  if (e === void 0)
-    throw new Error("translationContext must be used within a Provider");
-  return e;
-};
-function j(e) {
-  const { content: a, children: l } = e;
-  return /* @__PURE__ */ d("div", { className: "tooltip-container", children: [
-    l,
-    /* @__PURE__ */ t("div", { className: "tooltip-text", children: a })
-  ] });
-}
-function F(e) {
-  const {
-    color: a = "stroke-blue-800",
-    loaderClass: l,
-    strokeWidth: n = "4",
-    ...s
-  } = e;
-  return /* @__PURE__ */ t("div", { ...s, className: `loading ${s.className}`, children: /* @__PURE__ */ t("div", { className: "loader-container", children: /* @__PURE__ */ t("div", { className: `loader ${l}`, children: /* @__PURE__ */ t("svg", { className: "circular", viewBox: "25 25 50 50", children: /* @__PURE__ */ t(
-    "circle",
+import { jsx as t, jsxs as b, Fragment as M } from "react/jsx-runtime";
+import { forwardRef as j, useEffect as A, useState as P, useRef as H, useCallback as x, createContext as I, useContext as q, useReducer as ne, useMemo as C } from "react";
+function se(e) {
+  const { className: s = "" } = e;
+  return /* @__PURE__ */ t(
+    "svg",
     {
-      className: `path ${a}`,
-      cx: "50",
-      cy: "50",
-      r: "20",
-      fill: "none",
-      strokeWidth: n,
-      strokeMiterlimit: "10"
+      className: s,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 512 512",
+      fill: "currentColor",
+      children: /* @__PURE__ */ t("path", { d: "M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" })
     }
-  ) }) }) }) });
-}
-function I() {
-  const { t: e } = y();
-  return /* @__PURE__ */ t("div", { className: "table-empty", children: /* @__PURE__ */ t("p", { children: e("_accessibility:components.table.empty") }) });
+  );
 }
-function R(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",
       children: /* @__PURE__ */ t("path", { d: "M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z" })
     }
   );
 }
-function U(e) {
-  const { className: a } = e;
+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",
-      children: /* @__PURE__ */ t("path", { d: "M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" })
+      viewBox: "0 0 320 512",
+      fill: "currentColor",
+      children: /* @__PURE__ */ t("path", { d: "M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" })
     }
   );
 }
-function W(e) {
-  const { t: a } = y(), { entity: l = "", columns: n = [], hasAction: s = !0, columnsOptions: r } = e, { onSort: m, sortingOrder: p, sortingBy: b } = k(), v = $(() => {
-    const { noSortableColumns: i = {}, columnClassNames: o = {} } = r ?? {};
-    return n == null ? void 0 : n.map((h) => ({
-      id: h.key,
-      label: h.label,
-      className: o[h.key] ?? "",
-      sortable: !i[h.key]
-    }));
-  }, [n, r, l, a]);
-  return /* @__PURE__ */ t("thead", { className: "table-headers-row", children: /* @__PURE__ */ d("tr", { children: [
-    v.map((i) => {
-      var o, h, g, c;
-      return /* @__PURE__ */ t(
-        "th",
-        {
-          scope: "col",
-          className: `table-headers-column ${i.className}`,
-          children: /* @__PURE__ */ d(
-            "button",
-            {
-              disabled: !i.sortable,
-              onClick: () => m(i.id),
-              className: "table-headers-cell",
-              children: [
-                /* @__PURE__ */ t("span", { className: "table-headers-label", children: i.label }),
-                i.sortable && /* @__PURE__ */ t(
-                  "span",
-                  {
-                    className: `${b === i.id ? "table-headers-sort-on" : "table-headers-sort"}`,
-                    children: p === f.ASC ? ((o = r == null ? void 0 : r.icons) == null ? void 0 : o.asc) ?? /* @__PURE__ */ t(
-                      R,
-                      {
-                        className: ((h = r == null ? void 0 : r.icons) == null ? void 0 : h.className) ?? "table-headers-sort-indicator"
-                      }
-                    ) : ((g = r == null ? void 0 : r.icons) == null ? void 0 : g.desc) ?? /* @__PURE__ */ t(
-                      U,
-                      {
-                        className: ((c = r == null ? void 0 : r.icons) == null ? void 0 : c.className) ?? "table-headers-sort-indicator"
-                      }
-                    )
-                  }
-                )
-              ]
-            }
-          )
-        },
-        i.id
-      );
-    }),
-    s && /* @__PURE__ */ t("th", { scope: "col", className: "table-headers-action", children: a("_accessibility:labels.actions") })
-  ] }) });
+function le(e) {
+  const { className: s = "" } = e;
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      className: s,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 320 512",
+      fill: "currentColor",
+      children: /* @__PURE__ */ t("path", { d: "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z" })
+    }
+  );
 }
-var E = /* @__PURE__ */ ((e) => (e.error = "error", e.good = "good", e.default = "default", e))(E || {});
-const q = (e) => {
+const oe = (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 K(e) {
+  const { className: s = "" } = e;
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      className: s,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 384 512",
+      fill: "currentColor",
+      children: /* @__PURE__ */ t("path", { d: "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" })
+    }
+  );
+}
+var R = /* @__PURE__ */ ((e) => (e.error = "error", e.good = "good", e.default = "default", e))(R || {});
+const Q = (e) => {
   switch (e) {
     case "error":
-      return "border-red-500 text-red-900 placeholder-red-700 focus:ring-red-500 focus:border-red-500";
+      return "input-error";
     case "good":
-      return "border-green-500 text-green-900 placeholder-green-700 focus:ring-green-500 focus:border-green-500";
+      return "input-good";
     default:
-      return "text-gray-900 border-gray-300 focus:border-blue-600";
+      return "input-normal";
   }
-}, G = (e) => {
+}, V = (e) => {
   switch (e) {
     case "error":
-      return "peer-focus:text-red-700 text-red-700";
+      return "input-label-error";
     case "good":
-      return "peer-focus:text-green-700 text-green-700";
+      return "input-label-good";
     default:
-      return "peer-focus:text-blue-600 text-gray-500";
+      return "input-label-normal";
   }
-}, H = (e) => {
+}, X = (e) => {
   switch (e) {
     case "error":
-      return "text-red-600";
+      return "input-helper-text-error";
     case "good":
-      return "text-green-600";
+      return "input-helper-text-good";
     default:
-      return "text-gray-500";
+      return "input-helper-text-normal";
   }
 };
-const J = D(function(e, a) {
+const J = j(function(e, s) {
   const {
-    value: l,
+    value: a,
     onChange: n,
-    options: s,
-    containerClassName: r = "",
-    inputClassName: m = "",
-    labelClassName: p = "",
-    helperText: b = "",
-    helperTextClassName: v = "",
-    placeholder: i = "",
-    label: o = "",
-    name: h = "",
-    id: g = "",
-    state: c = E.default,
-    ...C
+    options: r,
+    containerClassName: l = "",
+    inputClassName: c = "",
+    labelClassName: o = "",
+    helperText: i = "",
+    helperTextClassName: m = "",
+    placeholder: d = "",
+    label: u = "",
+    name: N = "",
+    id: h = "",
+    state: p = R.default,
+    ...v
   } = e;
-  return M(() => {
-    var N;
-    (!l || l === "") && (s != null && s.length) && n({ target: { value: (N = s[0]) == null ? void 0 : N.id } });
-  }, [n, s, l]), /* @__PURE__ */ d("div", { className: `select-input-container ${r}`, children: [
+  return A(() => {
+    var f;
+    (!a || a === "") && (r != null && r.length) && n({ target: { value: (f = r[0]) == null ? void 0 : f.id } });
+  }, [n, r, a]), /* @__PURE__ */ b("div", { className: `select-input-container ${l}`, children: [
     /* @__PURE__ */ t(
       "select",
       {
-        ...C,
-        id: g,
-        ref: a,
-        name: h,
-        value: l,
+        ...v,
+        id: h,
+        ref: s,
+        name: N,
+        value: a,
         onChange: n,
-        className: `select-input ${q(c)} peer ${m}`,
-        children: s == null ? void 0 : s.map((N) => /* @__PURE__ */ t("option", { value: N.id, children: N.value }, N.id))
+        className: `select-input ${Q(p)} peer ${c}`,
+        children: r == null ? void 0 : r.map((f) => /* @__PURE__ */ t("option", { value: f.id, children: f.value }, f.id))
       }
     ),
     /* @__PURE__ */ t(
       "label",
       {
-        htmlFor: h,
-        className: `select-input-label ${G(c)} ${p}`,
-        children: o
+        htmlFor: N,
+        className: `select-input-label ${V(p)} ${o}`,
+        children: u
+      }
+    ),
+    /* @__PURE__ */ t(
+      "p",
+      {
+        className: `select-input-helper-text ${X(p)} ${m}`,
+        children: p !== "error" && p !== "good" ? d : i
+      }
+    )
+  ] });
+});
+const U = j(function(e, s) {
+  const {
+    children: a,
+    value: n,
+    onChange: r,
+    state: l = R.default,
+    name: c = "",
+    id: o = "",
+    type: i = "text",
+    label: m = "",
+    required: d = !1,
+    placeholder: u = "",
+    containerClassName: N = "",
+    inputClassName: h = "",
+    labelClassName: p = "",
+    helperText: v = "",
+    helperTextClassName: f = "",
+    ...y
+  } = e;
+  return /* @__PURE__ */ b("div", { className: `text-input-container ${N}`, children: [
+    /* @__PURE__ */ t(
+      "input",
+      {
+        ref: s,
+        type: i,
+        name: c,
+        id: o,
+        className: `text-input ${Q(l)} peer ${h}`,
+        placeholder: "",
+        required: d,
+        value: n,
+        onChange: r,
+        ...y
+      }
+    ),
+    /* @__PURE__ */ b(
+      "label",
+      {
+        htmlFor: c,
+        className: `text-input-label ${V(l)} ${p}`,
+        children: [
+          m,
+          d ? " *" : ""
+        ]
       }
     ),
+    a,
     /* @__PURE__ */ t(
       "p",
       {
-        className: `select-input-helper-text ${H(c)} ${v}`,
-        children: c !== "error" && c !== "good" ? i : b
+        className: `text-input-helper-text ${X(l)} ${f}`,
+        children: l !== "error" && l !== "good" ? u : v
       }
     )
   ] });
-}), K = J;
-function Q() {
-  const { t: e } = y(), { pageSizes: a, pageSize: l, setPageSize: n } = k(), s = $(
-    () => a == null ? void 0 : a.map((r) => ({ id: r, value: r })),
-    [a]
+});
+const ce = j(function(e, s) {
+  const {
+    checked: a,
+    onChange: n,
+    state: r = R.default,
+    name: l = "",
+    id: c = "",
+    type: o = "text",
+    label: i = "",
+    containerClassName: m = "",
+    inputClassName: d = "",
+    labelClassName: u = "",
+    helperText: N = "",
+    helperTextClassName: h = "",
+    ...p
+  } = e;
+  return /* @__PURE__ */ b("label", { className: `input-check-container ${m}`, children: [
+    /* @__PURE__ */ t(
+      "input",
+      {
+        id: c,
+        ref: s,
+        name: l,
+        type: "checkbox",
+        checked: a,
+        onChange: n,
+        className: `input-check ${d}`,
+        ...p
+      }
+    ),
+    /* @__PURE__ */ t("span", { className: `input-check-label ${u}`, children: i })
+  ] });
+});
+const ie = j(function(e, s) {
+  const {
+    state: a,
+    value: n,
+    onChange: r,
+    options: l = [],
+    name: c = "",
+    id: o = "",
+    label: i = "",
+    containerClassName: m = "",
+    inputContainerClassName: d = "",
+    helperText: u = "",
+    placeholder: N = "",
+    multiple: h = !1,
+    ...p
+  } = e, [v, f] = P(""), [y, w] = P(!1), $ = l.filter((g) => {
+    const S = String(g.value).toLowerCase().includes(v == null ? void 0 : v.toLowerCase());
+    return n && n.length ? n != null && n.some ? !(n != null && n.some((W) => W.id === g.id)) : (n == null ? void 0 : n.id) !== g.id : S;
+  }), _ = H(null);
+  A(() => {
+    const g = (D) => {
+      _.current && !_.current.contains(D.target) && w(!1);
+    }, S = (D) => {
+      D.key === "Escape" && w(!1);
+    };
+    return document.addEventListener("click", g), document.addEventListener("keydown", S), () => {
+      document.removeEventListener("click", g), document.removeEventListener("keydown", S);
+    };
+  }, []);
+  const B = (g) => {
+    f(g.target.value);
+  }, G = x(
+    (g) => {
+      f(""), r(g ? h ? n ? [...n, g] : [g] : g : null), w(!1);
+    },
+    [h, r, n]
+  ), te = x(
+    (g) => {
+      const S = n.filter((D, W) => W !== g);
+      S.length ? r(S) : r(null);
+    },
+    [r, n]
   );
-  return /* @__PURE__ */ d("div", { className: "page-size", children: [
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      className: `autocomplete-input-container ${m}`,
+      ref: _,
+      children: [
+        /* @__PURE__ */ t(
+          U,
+          {
+            state: a,
+            name: c,
+            id: o,
+            value: !h && n ? n.value : v,
+            onChange: B,
+            placeholder: N,
+            helperText: u,
+            onFocus: () => w(!0),
+            label: i,
+            containerClassName: `autocomplete-text-input ${d}`,
+            ref: s,
+            ...p,
+            children: !h && n && /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                className: "autocomplete-delete-button",
+                onClick: () => G(),
+                children: /* @__PURE__ */ t(K, {})
+              }
+            )
+          }
+        ),
+        y && /* @__PURE__ */ t("ul", { className: "autocomplete-suggestions-container", children: $.map((g) => /* @__PURE__ */ t(
+          "li",
+          {
+            className: "autocomplete-suggestion-item hover:bg-primary/20",
+            onClick: () => G(g),
+            children: g.value
+          },
+          g.id
+        )) }),
+        h && Array.isArray(n) && n.length ? /* @__PURE__ */ t("ul", { className: "autocomplete-value-container", children: n.map((g, S) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
+          Te,
+          {
+            label: String(g.value),
+            onDelete: () => te(S)
+          }
+        ) }, g.value)) }) : null
+      ]
+    }
+  );
+});
+function de(e) {
+  const {
+    color: s = "stroke-blue-800",
+    loaderClass: a,
+    strokeWidth: n = "4",
+    ...r
+  } = e;
+  return /* @__PURE__ */ t("div", { ...r, className: `loading ${r.className}`, children: /* @__PURE__ */ t("div", { className: "loader-container", children: /* @__PURE__ */ t("div", { className: `loader ${a}`, children: /* @__PURE__ */ t("svg", { className: "circular", viewBox: "25 25 50 50", children: /* @__PURE__ */ t(
+    "circle",
+    {
+      className: `path ${s}`,
+      cx: "50",
+      cy: "50",
+      r: "20",
+      fill: "none",
+      strokeWidth: n,
+      strokeMiterlimit: "10"
+    }
+  ) }) }) }) });
+}
+const Y = I({});
+function Me(e) {
+  const { children: s, t: a } = e;
+  return /* @__PURE__ */ t(Y.Provider, { value: { t: a }, children: s });
+}
+const E = () => {
+  const e = q(Y);
+  if (e === void 0)
+    throw new Error("translationContext must be used within a Provider");
+  return e;
+};
+var O = /* @__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))(O || {}), T = /* @__PURE__ */ ((e) => (e.ASC = "ASC", e.DESC = "DESC", e))(T || {});
+const ue = [20, 50, 100], Z = I({}), Ae = (e) => {
+  const { children: s } = e, [a, n] = P(0), [r, l] = P(20), [c, o] = P(0), [i, m] = P("id"), [d, u] = P(T.DESC), [N, h] = P({}), p = x(
+    (y, w) => {
+      let $ = d;
+      if (i === y)
+        switch (d) {
+          case T.ASC:
+            $ = T.DESC;
+            break;
+          default:
+            $ = T.ASC;
+            break;
+        }
+      m(y), u($), w && w(y, $);
+    },
+    [i, d]
+  ), v = x((y) => {
+    const w = Object.entries(y).reduce(
+      ($, [_, B]) => (B && typeof B.value < "u" && ($[_] = B.value), $),
+      {}
+    );
+    h(w);
+  }, []), f = {
+    onSort: p,
+    total: a,
+    setTotal: n,
+    sortingBy: i,
+    setSortingBy: m,
+    sortingOrder: d,
+    setSortingOrder: u,
+    pageSize: r,
+    pageSizes: ue,
+    setPageSize: l,
+    currentPage: c,
+    setCurrentPage: o,
+    filters: N,
+    onFilterApply: v
+  };
+  return /* @__PURE__ */ t(Z.Provider, { value: f, children: s });
+}, L = () => {
+  const e = q(Z);
+  if (e === void 0)
+    throw new Error("tableOptionsContext must be used within a Provider");
+  return e;
+};
+var k = /* @__PURE__ */ ((e) => (e[e.update = 0] = "update", e[e.reset = 1] = "reset", e))(k || {});
+const pe = (e) => {
+  const s = {}, a = Object.keys(e);
+  return a == null || a.forEach((n) => {
+    s[n] = { value: e[n] };
+  }), s;
+};
+function he(e, s) {
+  const { type: a } = s;
+  switch (a) {
+    case k.reset: {
+      const { filters: n } = s, r = {};
+      return n == null || n.forEach(({ propertyName: l, defaultValue: c }) => {
+        r[l] = { value: c };
+      }), { ...e, ...r };
+    }
+    case k.update: {
+      const { toUpdate: n } = s;
+      return { ...e, ...n };
+    }
+    default:
+      return e;
+  }
+}
+const ee = I({}), me = (e) => {
+  const { children: s } = e, { filters: a } = L(), [n, r] = ne(
+    he,
+    pe(a)
+  ), l = {
+    currentFilters: n,
+    setCurrentFilters: r
+  };
+  return /* @__PURE__ */ t(ee.Provider, { value: l, children: s });
+}, F = () => {
+  const e = q(ee);
+  if (e === void 0)
+    throw new Error("tableOptionsContext must be used within a Provider");
+  return e;
+};
+function be(e) {
+  const { t: s } = E(), { entity: a = "", columns: n = [], hasAction: r = !0, onSortCallback: l } = e, { onSort: c, sortingOrder: o, sortingBy: i } = L(), m = C(() => {
+    var d;
+    return (d = n.sort((u, N) => (N.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
+    }));
+  }, [n, a, s]);
+  return /* @__PURE__ */ t("thead", { className: "table-headers-row", children: /* @__PURE__ */ b("tr", { children: [
+    m.map((d) => {
+      var u, N, h, p, v, f, y, w;
+      return /* @__PURE__ */ t(
+        "th",
+        {
+          scope: "col",
+          className: `table-headers-column ${d.className}`,
+          children: /* @__PURE__ */ b(
+            "button",
+            {
+              disabled: !d.sortable,
+              onClick: () => c(d.id, l),
+              className: "table-headers-cell",
+              children: [
+                /* @__PURE__ */ t("span", { className: "table-headers-label", children: d.label }),
+                d.sortable && /* @__PURE__ */ t(
+                  "span",
+                  {
+                    className: `${i === d.id ? "table-headers-sort-on" : "table-headers-sort"}`,
+                    children: o === T.ASC ? ((N = (u = d.sortOptions) == null ? void 0 : u.icons) == null ? void 0 : N.asc) ?? /* @__PURE__ */ t(
+                      re,
+                      {
+                        className: ((p = (h = d.sortOptions) == null ? void 0 : h.icons) == null ? void 0 : p.className) ?? "table-headers-sort-indicator"
+                      }
+                    ) : ((f = (v = d.sortOptions) == null ? void 0 : v.icons) == null ? void 0 : f.desc) ?? /* @__PURE__ */ t(
+                      se,
+                      {
+                        className: ((w = (y = d.sortOptions) == null ? void 0 : y.icons) == null ? void 0 : w.className) ?? "table-headers-sort-indicator"
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          )
+        },
+        d.id
+      );
+    }),
+    r && /* @__PURE__ */ t("th", { scope: "col", className: "table-headers-action", children: s("_accessibility:labels.actions") })
+  ] }) });
+}
+function ge() {
+  const { t: e } = E();
+  return /* @__PURE__ */ t("div", { className: "table-empty", children: /* @__PURE__ */ t("p", { children: e("_accessibility:components.table.empty") }) });
+}
+const ve = () => {
+  const { t: e } = E(), { total: s, pageSize: a, currentPage: n, setCurrentPage: r } = L();
+  return /* @__PURE__ */ b("div", { className: "table-navigation-pages", children: [
+    /* @__PURE__ */ t(
+      "button",
+      {
+        className: "table-navigation-buttons",
+        disabled: n === 0,
+        "aria-label": e("_accessibility:buttons.previous"),
+        name: e("_accessibility:buttons.previous"),
+        onClick: () => r(n - 1),
+        children: /* @__PURE__ */ t(le, { className: "w-2.5" })
+      }
+    ),
+    /* @__PURE__ */ t(
+      "button",
+      {
+        disabled: Math.floor(s / ((n + 1) * a)) === 0,
+        className: "table-navigation-buttons",
+        name: e("_accessibility:buttons.next"),
+        "aria-label": e("_accessibility:buttons.next"),
+        onClick: () => r(n + 1),
+        children: /* @__PURE__ */ t(ae, { className: "w-2.5" })
+      }
+    )
+  ] });
+}, Ne = () => {
+  const { t: e } = E(), { total: s, pageSize: a, pageSizes: n, currentPage: r } = L(), l = (r + 1) * a > s ? s : (r + 1) * a;
+  return /* @__PURE__ */ b("div", { className: "table-navigation-sizes", children: [
+    n[0] < s && /* @__PURE__ */ t(M, { children: /* @__PURE__ */ b("p", { children: [
+      r * a + 1,
+      " - ",
+      l,
+      " ",
+      e("_accessibility:components.table.of")
+    ] }) }),
+    /* @__PURE__ */ t("p", { children: s })
+  ] });
+};
+function fe() {
+  const { t: e } = E(), { pageSizes: s, pageSize: a, setPageSize: n } = L(), r = C(
+    () => s == null ? void 0 : s.map((l) => ({ id: l, value: l })),
+    [s]
+  );
+  return /* @__PURE__ */ b("div", { className: "page-size", children: [
     /* @__PURE__ */ t("p", { children: e("_accessibility:components.table.pageSizes") }),
     /* @__PURE__ */ t(
-      K,
+      J,
       {
-        value: l,
-        options: s,
+        value: a,
+        options: r,
         inputClassName: "page-size-input",
         containerClassName: "page-size-input-container",
         helperTextClassName: "hidden",
-        onChange: (r) => n(r.target.value)
+        onChange: (l) => n(l.target.value)
       }
     )
   ] });
 }
-function V() {
-  const { t: e } = y(), { total: a, pageSize: l, pageSizes: n, currentPage: s, setCurrentPage: r } = k(), m = (s + 1) * l > a ? a : (s + 1) * l;
-  return /* @__PURE__ */ d("div", { className: "table-navigation", children: [
-    /* @__PURE__ */ d("div", { className: "table-navigation-sizes", children: [
-      /* @__PURE__ */ t("p", { children: e("_accessibility:components.table.pageSizes") }),
-      n[0] < a && /* @__PURE__ */ t(S, { children: /* @__PURE__ */ d("p", { children: [
-        e("_accessibility:components.table.from"),
-        " ",
-        s * l + 1,
-        " ",
-        e("_accessibility:components.table.to"),
-        " ",
-        m,
-        " ",
-        e("_accessibility:components.table.of")
-      ] }) }),
-      /* @__PURE__ */ d("p", { children: [
-        a,
-        " ",
-        e("_accessibility:components.table.results")
-      ] })
-    ] }),
-    /* @__PURE__ */ d("div", { className: "table-navigation-pages", children: [
-      /* @__PURE__ */ t(
-        "button",
-        {
-          className: "table-navigation-buttons",
-          disabled: s === 0,
-          onClick: () => r(s - 1),
-          children: e("_accessibility:buttons.previous")
+function Ce() {
+  const { t: e } = E(), { total: s, pageSize: a, currentPage: n, setCurrentPage: r } = L(), l = C(() => {
+    const c = Math.ceil(s / a);
+    return Array.from({ length: c }, (o, i) => ({
+      id: i,
+      value: i + 1
+    }));
+  }, [s, a]);
+  return /* @__PURE__ */ b("div", { className: "jump-to-page", children: [
+    /* @__PURE__ */ t("p", { children: e("_accessibility:components.table.jumpToPage") }),
+    /* @__PURE__ */ t(
+      J,
+      {
+        value: n,
+        options: l,
+        inputClassName: "jump-to-page-input",
+        containerClassName: "jump-to-page-input-container",
+        helperTextClassName: "hidden",
+        onChange: (c) => r(Number(c.target.value))
+      }
+    )
+  ] });
+}
+function ye() {
+  return /* @__PURE__ */ b("div", { className: "table-footer", children: [
+    /* @__PURE__ */ t(Ce, {}),
+    /* @__PURE__ */ t(fe, {}),
+    /* @__PURE__ */ t(Ne, {}),
+    /* @__PURE__ */ t(ve, {})
+  ] });
+}
+function we(e) {
+  const { propertyName: s, options: a, label: n } = e, { currentFilters: r, setCurrentFilters: l } = F(), c = C(() => {
+    var i;
+    return ((i = r[s]) == null ? void 0 : i.value) ?? a[0];
+  }, [r]), o = x((i) => {
+    l({
+      type: k.update,
+      toUpdate: { [s]: { value: i.target.value } }
+    });
+  }, []);
+  return /* @__PURE__ */ t(
+    J,
+    {
+      value: c,
+      label: n,
+      options: a,
+      helperTextClassName: "hidden",
+      containerClassName: "options-widget-container",
+      onChange: o
+    }
+  );
+}
+const xe = (e) => {
+  const { propertyName: s, label: a } = e, { currentFilters: n, setCurrentFilters: r } = F(), l = C(() => {
+    var o;
+    return ((o = n[s]) == null ? void 0 : o.value) ?? "";
+  }, [n]), c = x((o) => {
+    r({
+      type: k.update,
+      toUpdate: { [s]: { value: o.target.value } }
+    });
+  }, []);
+  return /* @__PURE__ */ t(
+    U,
+    {
+      value: l ?? "",
+      label: a,
+      onChange: c,
+      containerClassName: "input-widget-container",
+      helperTextClassName: ""
+    }
+  );
+}, ke = (e) => {
+  const { propertyName: s, label: a, min: n, max: r } = e, { currentFilters: l, setCurrentFilters: c } = F(), o = C(() => {
+    var m;
+    return ((m = l[s]) == null ? void 0 : m.value) ?? "";
+  }, [l]), i = x(
+    (m) => {
+      c({
+        type: k.update,
+        toUpdate: {
+          [s]: { value: m.target.value }
         }
-      ),
-      /* @__PURE__ */ t(
-        "button",
-        {
-          disabled: Math.floor(a / ((s + 1) * l)) === 0,
-          className: "table-navigation-buttons",
-          onClick: () => r(s + 1),
-          children: e("_accessibility:buttons.next")
+      });
+    },
+    [o]
+  );
+  return /* @__PURE__ */ t(
+    U,
+    {
+      value: o ?? "",
+      min: n,
+      max: r,
+      type: "number",
+      label: a,
+      containerClassName: "input-widget-container",
+      onChange: i,
+      helperTextClassName: ""
+    }
+  );
+}, $e = (e) => {
+  const { propertyName: s, label: a } = e, { currentFilters: n, setCurrentFilters: r } = F(), l = C(() => {
+    var o;
+    return ((o = n[s]) == null ? void 0 : o.value) ?? "";
+  }, [n]), c = x((o) => {
+    r({
+      type: k.update,
+      toUpdate: { [s]: { value: o.target.checked } }
+    });
+  }, []);
+  return /* @__PURE__ */ t(ce, { label: a, checked: l ?? !1, onChange: c });
+};
+function Se(e) {
+  const { propertyName: s, label: a, options: n, multiple: r = !0 } = e, { currentFilters: l, setCurrentFilters: c } = F(), o = C(() => l[s] ?? n[0], [l]), i = x(
+    (m) => {
+      c({
+        type: k.update,
+        toUpdate: {
+          [s]: {
+            value: m
+          }
         }
-      )
-    ] })
-  ] });
+      });
+    },
+    [r]
+  );
+  return /* @__PURE__ */ t(
+    ie,
+    {
+      value: o == null ? void 0 : o.value,
+      label: a,
+      options: n,
+      multiple: r,
+      helperTextClassName: "hidden",
+      containerClassName: "options-widget-container",
+      onChange: i
+    }
+  );
 }
-function te(e) {
-  const { t: a } = y(), {
-    title: l = "",
-    rows: n,
-    parseRows: s,
-    entity: r = "",
-    isLoading: m = !1,
-    actions: p,
-    columns: b = [],
-    contentClassName: v = "",
-    className: i = "",
-    columnsOptions: o,
-    softDeleteProperty: h = "deleted"
-  } = e, g = $(
-    () => (n == null ? void 0 : n.map((c) => s(c))) ?? [],
-    [s, n, a]
+const Pe = (e) => {
+  const { propertyName: s, label: a } = e, { currentFilters: n, setCurrentFilters: r } = F(), l = C(() => {
+    var o, i;
+    return (o = n[s]) != null && o.value ? new Date(String((i = n[s]) == null ? void 0 : i.value)).toISOString().slice(0, 10) : "";
+  }, [n]), c = x((o) => {
+    r({
+      type: k.update,
+      toUpdate: { [s]: { value: o.target.value } }
+    });
+  }, []);
+  return /* @__PURE__ */ t(
+    U,
+    {
+      value: l ?? "",
+      label: a,
+      type: "date",
+      onChange: c,
+      containerClassName: "input-widget-container",
+      helperTextClassName: ""
+    }
   );
-  return /* @__PURE__ */ d("div", { className: `${i} table-main`, children: [
-    /* @__PURE__ */ t("div", { className: "table-header", children: /* @__PURE__ */ d("div", { children: [
-      /* @__PURE__ */ t("h1", { className: "table-header-title", children: l }),
-      n != null && n.length && !m ? /* @__PURE__ */ t(Q, {}) : null
-    ] }) }),
-    m ? /* @__PURE__ */ t(F, { className: "table-loading" }) : /* @__PURE__ */ t(S, { children: n != null && n.length ? /* @__PURE__ */ d(S, { children: [
-      /* @__PURE__ */ t("div", { className: `${v} table-body`, children: /* @__PURE__ */ d("table", { className: "table-content", children: [
+}, ze = (e) => {
+  switch (e.type) {
+    case O.text:
+      return /* @__PURE__ */ t(xe, { ...e });
+    case O.number:
+      return /* @__PURE__ */ t(ke, { ...e });
+    case O.select:
+      return /* @__PURE__ */ t(we, { ...e });
+    case O.autocomplete:
+      return /* @__PURE__ */ t(Se, { ...e });
+    case O.date:
+      return /* @__PURE__ */ t(Pe, { ...e });
+    case O.check:
+      return /* @__PURE__ */ t($e, { ...e });
+  }
+  return /* @__PURE__ */ t(M, {});
+};
+const Oe = (e) => {
+  const { align: s = "right", filters: a = [], icon: n } = e, [r, l] = P(!1), { onFilterApply: c, filters: o } = L(), { currentFilters: i, setCurrentFilters: m } = F(), { t: d } = E(), u = H(null), N = H(null);
+  return A(() => {
+    const h = ({ target: p }) => {
+      var v, f;
+      N.current && (!r || (v = N.current) != null && v.contains(p) || (f = u == null ? void 0 : u.current) != null && f.contains(p) || l(!1));
+    };
+    return document.addEventListener("click", h), () => document.removeEventListener("click", h);
+  }), A(() => {
+    const h = (p) => {
+      !r || p.code !== "Escape" || l(!1);
+    };
+    return document.addEventListener("keydown", h), () => document.removeEventListener("keydown", h);
+  }), /* @__PURE__ */ b("div", { className: "filter-dropdown-main", children: [
+    /* @__PURE__ */ b(
+      "button",
+      {
+        ref: u,
+        className: "filter-dropdown-button normal filter-dropdown-trigger",
+        "aria-haspopup": "true",
+        onClick: () => l(!r),
+        "aria-expanded": r,
+        children: [
+          /* @__PURE__ */ t("span", { className: "sr-only", children: d("_accessibility:buttons.filters") }),
+          /* @__PURE__ */ t("wbr", {}),
+          n ?? /* @__PURE__ */ t(oe, { className: "filter-dropdown-trigger-icon" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: `filter-dropdown-transition ${r ? "opened" : "closed"} ${s === "right" ? "right" : "left"}`,
+        children: /* @__PURE__ */ b("div", { ref: N, children: [
+          /* @__PURE__ */ t("div", { className: "filter-title", children: d("_accessibility:buttons.filters") }),
+          /* @__PURE__ */ t("ul", { className: "filter-container", children: a.map((h) => /* @__PURE__ */ t("li", { className: "filter-container-item", children: ze(h) }, h.propertyName)) }),
+          /* @__PURE__ */ t("div", { className: "filter-footer", children: /* @__PURE__ */ b("ul", { className: "filter-buttons-row", children: [
+            /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
+              "button",
+              {
+                onClick: () => m({ type: k.reset }),
+                className: "filter-dropdown-button small filter-dropdown-cancel",
+                children: d("_accessibility:buttons.clear")
+              }
+            ) }),
+            /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
+              "button",
+              {
+                className: "filter-dropdown-button small filter-dropdown-submit bg-primary hover:bg-light-primary",
+                onClick: () => {
+                  l(!1), c(i);
+                },
+                onBlur: () => l(!1),
+                children: d("_accessibility:buttons.applyFilters")
+              }
+            ) })
+          ] }) })
+        ] })
+      }
+    )
+  ] });
+}, Ee = (e) => e, Le = (e) => {
+  const { columns: s, softDeleteProperty: a = "deleted", data: n, actions: r } = e, l = C(
+    () => s.sort((c, o) => (o.pos ?? 0) - (c.pos ?? 0)).filter((c) => c.display !== "none"),
+    [s]
+  );
+  return n == null ? void 0 : n.map((c) => {
+    var o;
+    return /* @__PURE__ */ b(
+      "tr",
+      {
+        className: `table-row ${c[a] ? "deleted-class" : ""}`,
+        children: [
+          l == null ? void 0 : l.map((i, m) => /* @__PURE__ */ t(
+            "td",
+            {
+              className: `table-row-cell ${m === 0 ? "basic" : ""} ${i.className ?? ""}`,
+              children: i.renderBody ? i.renderBody(c[i.key], c) : Ee(c[i.key])
+            },
+            i.key
+          )),
+          r ? /* @__PURE__ */ t("td", { children: /* @__PURE__ */ t("div", { className: "table-row-cell-action", children: (o = r(c).filter((i) => !i.hidden)) == null ? void 0 : o.map((i) => /* @__PURE__ */ t(Fe, { content: i.tooltip, children: /* @__PURE__ */ t("button", { onClick: i.onClick, children: i.icon }) }, i.id)) }) }) : null
+        ]
+      },
+      c.id
+    );
+  });
+};
+function je(e) {
+  const {
+    title: s = "",
+    data: a,
+    onSort: n,
+    entity: r = "",
+    isLoading: l = !1,
+    actions: c,
+    columns: o = [],
+    contentClassName: i = "",
+    className: m = "",
+    toolbar: d = /* @__PURE__ */ t(M, {}),
+    softDeleteProperty: u = "deleted"
+  } = e, N = C(() => o ? o.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
+    };
+  }) : [], [o]), h = C(() => !(a != null && a.length), [a]);
+  return /* @__PURE__ */ t(me, { children: /* @__PURE__ */ b("div", { className: `${m} table-main`, children: [
+    /* @__PURE__ */ b("div", { className: "table-header", children: [
+      /* @__PURE__ */ t("h1", { className: "table-header-title", children: s }),
+      l ? null : /* @__PURE__ */ b("div", { className: "table-header-right", children: [
+        d,
+        /* @__PURE__ */ t(Oe, { filters: N })
+      ] })
+    ] }),
+    l ? /* @__PURE__ */ t(de, { className: "table-loading" }) : /* @__PURE__ */ t(M, { children: h ? /* @__PURE__ */ t(ge, {}) : /* @__PURE__ */ b(M, { children: [
+      /* @__PURE__ */ t("div", { className: `${i} table-body`, children: /* @__PURE__ */ b("table", { className: "table-content", children: [
         /* @__PURE__ */ t(
-          W,
+          be,
           {
             entity: r,
-            columns: b,
-            columnsOptions: o,
-            hasAction: !!p
+            columns: o,
+            onSortCallback: n,
+            hasAction: !!c
           }
         ),
-        /* @__PURE__ */ t("tbody", { children: g == null ? void 0 : g.map((c) => {
-          var C, N;
-          return /* @__PURE__ */ d(
-            "tr",
-            {
-              className: `table-row ${(C = c[h]) != null && C.value ? "deleted-class" : ""}`,
-              children: [
-                b == null ? void 0 : b.map((u, A) => {
-                  var w;
-                  return /* @__PURE__ */ t(
-                    "td",
-                    {
-                      className: `table-row-cell ${A === 0 ? "basic" : ""} ${o != null && o.columnClassNames ? o == null ? void 0 : o.columnClassNames[u.key] : ""}`,
-                      children: ((w = c[u.key]) == null ? void 0 : w.render) ?? c[u.key]
-                    },
-                    u.key
-                  );
-                }),
-                p ? /* @__PURE__ */ t("td", { children: /* @__PURE__ */ t("div", { className: "table-row-cell-action", children: (N = p(c).filter((u) => !u.hidden)) == null ? void 0 : N.map((u) => /* @__PURE__ */ t(
-                  j,
-                  {
-                    content: u.tooltip,
-                    children: /* @__PURE__ */ t("button", { onClick: u.onClick, children: u.icon })
-                  },
-                  u.id
-                )) }) }) : null
-              ]
-            },
-            c.id
-          );
-        }) })
+        /* @__PURE__ */ t("tbody", { children: /* @__PURE__ */ t(
+          Le,
+          {
+            data: a,
+            actions: c,
+            columns: o,
+            softDeleteProperty: u
+          }
+        ) })
       ] }) }),
-      /* @__PURE__ */ t(V, {})
-    ] }) : /* @__PURE__ */ t(I, {}) })
+      /* @__PURE__ */ t(ye, {})
+    ] }) })
+  ] }) });
+}
+function Fe(e) {
+  const { content: s, children: a } = e;
+  return /* @__PURE__ */ b("div", { className: "tooltip-container", children: [
+    a,
+    /* @__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: s,
+    onDelete: a,
+    className: n = "",
+    spanClassName: r = "",
+    variant: l = z.default
+  } = e, c = C(() => {
+    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]), o = C(() => {
+    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 ${c} ${n}`, children: [
+    /* @__PURE__ */ t("span", { className: r, children: s }),
+    a ? /* @__PURE__ */ t("button", { type: "button", className: "chip-delete-button", onClick: a, children: /* @__PURE__ */ t(K, { className: o }) }) : null
   ] });
 }
 export {
-  U as ChevronDown,
-  R as ChevronUp,
-  F as Loading,
-  te as Table,
-  O as TableOptionsProvider,
-  j as Tooltip,
-  ee as TranslationProvider,
-  k as useTableOptions,
-  y as useTranslation
+  ie as AutocompleteInput,
+  ce as CheckInput,
+  se as ChevronDown,
+  le as ChevronLeft,
+  ae as ChevronRight,
+  re as ChevronUp,
+  Te as Chip,
+  z as ChipVariant,
+  K as Close,
+  be as Columns,
+  Ne as CountOfTotal,
+  ge as Empty,
+  Oe as FilterPopup,
+  oe as Filters,
+  k as FiltersActions,
+  me as FiltersProvider,
+  ye as Footer,
+  de as Loading,
+  ve as Navigation,
+  fe as PageSize,
+  Le as Rows,
+  J as SelectInput,
+  R as State,
+  je as Table,
+  Ae as TableOptionsProvider,
+  U as TextInput,
+  Fe as Tooltip,
+  Me as TranslationProvider,
+  he as filtersReducer,
+  X as helperTextStateClassName,
+  pe as initializer,
+  Q as inputStateClassName,
+  V as labelStateClassName,
+  ze as renderFilterComponent,
+  F as useFilters,
+  L as useTableOptions,
+  E as useTranslation
 };