jcicl 0.0.345 → 1.0.3

package/Table/Table.js

@@ -1,32 +1,33 @@
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
-import { useState as b, useMemo as N, useEffect as R } from "react";
-import o from "../theme.js";
-import { c as r } from "../.chunks/emotion-react.browser.esm.js";
-import { n as s } from "../.chunks/emotion-styled.browser.esm.js";
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { useState as m, useMemo as T, useEffect as q } from "react";
+import n from "../theme.js";
+import { c as s } from "../.chunks/emotion-react.browser.esm.js";
+import { n as a } from "../.chunks/emotion-styled.browser.esm.js";
 import { Button as ce } from "../Button/Button.js";
-import { Flex as ae } from "../Flex/Flex.js";
-import { c as v } from "../.chunks/createLucideIcon.js";
+import { Flex as le } from "../Flex/Flex.js";
+import { useThemeColors as de } from "../ThemeContext.js";
+import { c as S } from "../.chunks/createLucideIcon.js";
 /**
  * @license lucide-react v0.525.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const le = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], M = v("chevron-down", le);
+const he = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], _ = S("chevron-down", he);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const de = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]], U = v("chevron-up", de);
+const pe = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]], W = S("chevron-up", pe);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const pe = [
+const xe = [
   [
     "path",
     {
@@ -43,14 +44,14 @@ const pe = [
     }
   ],
   ["path", { d: "m2 2 20 20", key: "1ooewy" }]
-], he = v("eye-off", pe);
+], ge = S("eye-off", xe);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ge = [
+const ue = [
   [
     "path",
     {
@@ -59,24 +60,24 @@ const ge = [
     }
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
-], xe = v("eye", ge);
+], be = S("eye", ue);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ue = [
+const fe = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-], K = v("search", ue);
+], Q = S("search", fe);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const be = [
+const me = [
   [
     "path",
     {
@@ -85,29 +86,9 @@ const be = [
     }
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
-], fe = v("settings", be), f = {
-  thActive: {
-    backgroundColor: o.colors.green,
-    color: o.colors.white
-  },
-  paginationButtonActive: {
-    backgroundColor: o.colors.green,
-    color: o.colors.white,
-    borderColor: o.colors.green
-  },
-  paginationButtonDisabled: {
-    opacity: 0.5,
-    cursor: "not-allowed"
-  },
-  info: {
-    fontSize: "14px",
-    color: o.colors.gray3,
-    textAlign: "center",
-    marginTop: "10px"
-  }
-}, me = s("div")(() => ({
-  ...r`
-    background-color: ${o.colors.white};
+], ye = S("settings", me), we = a("div")(() => ({
+  ...s`
+    background-color: ${n.colors.white};
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     padding: 20px;
@@ -115,8 +96,8 @@ const be = [
     width: 100%;
     overflow: auto;
   `
-})), ye = s("div")(() => ({
-  ...r`
+})), Ce = a("div")(() => ({
+  ...s`
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -125,22 +106,22 @@ const be = [
     flex-wrap: wrap;
     gap: 9px;
   `
-})), we = s("div")(() => ({
-  ...r`
+})), ke = a("div")(() => ({
+  ...s`
     display: flex;
     justify-content: space-between;
     width: 100%;
     align-items: center;
   `
-})), ke = s("h2")(() => ({
-  ...r`
+})), ve = a("h2")(() => ({
+  ...s`
     font-size: 24px;
     font-weight: bold;
-    color: ${o.colors.black};
+    color: ${n.colors.black};
     margin: 0;
   `
-})), ve = s("div")(() => ({
-  ...r`
+})), Se = a("div")(() => ({
+  ...s`
     display: flex;
     justify-content: flex-end;
     width: 100%;
@@ -148,48 +129,55 @@ const be = [
     align-items: center;
     flex-wrap: wrap;
   `
-})), Ce = s("div")(() => ({
-  ...r`
+})), $e = a("div")(() => ({
+  ...s`
     position: relative;
     display: flex;
     align-items: center;
     flex-grow: 1;
   `
-})), Se = s(K)(() => ({
-  ...r`
+})), ze = a(Q)(({ customTheme: t }) => ({
+  ...s`
     position: absolute;
     left: 13px;
     top: 10px;
-    color: ${o.colors.gray3};
+    color: ${n.colors.gray3};
     width: 19px;
     height: 19px;
     transition: all 313ms ease;
+    :focus,
+    :hover,
+    :focus-within {
+      cursor: pointer;
+      color: ${t.themeColor};
+    }
   `
-})), $e = s("input")(() => ({
-  ...r`
+})), je = a("input")(({ customTheme: t }) => ({
+  ...s`
     padding: 10px 15px 10px 40px;
-    border: 2px solid ${o.colors.gray4};
+    border: 2px solid ${n.colors.gray4};
     border-radius: 25px;
     font-size: 14px;
     min-width: 270px;
     width: 100%;
     transition: all 313ms ease;
     outline: none;
-    background-color: ${o.colors.white};
+    background-color: ${n.colors.white};
     :focus,
     :hover,
     :focus-within {
-      border-color: ${o.colors.green};
-      box-shadow: 0 0 0 3px rgba(0, 146, 0, 0.1);
+      border-color: ${t.themeColor};
+      /* box-shadow: 0 0 0 3px rgba(0, 146, 0, 0.1); */
+      box-shadow: 0 0 0 3px ${t.themeColor}18;
     }
   `
-})), q = s("button")(() => ({
-  ...r`
+})), Y = a("button")(({ customTheme: t }) => ({
+  ...s`
     padding: 10px 15px;
-    border: 2px solid ${o.colors.green};
+    border: 2px solid ${t.themeColor};
     border-radius: 6px;
-    background-color: ${o.colors.white};
-    color: ${o.colors.green};
+    background-color: ${n.colors.white};
+    color: ${t.themeColor};
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -201,20 +189,21 @@ const be = [
     :focus,
     :hover,
     :focus-within {
-      background-color: ${o.colors.green};
-      color: ${o.colors.white};
+      background-color: ${t.themeColor};
+      color: ${n.colors.white};
       transform: translateY(-1px);
-      box-shadow: 0 4px 12px rgba(0, 146, 0, 0.3);
+      /* box-shadow: 0 4px 12px rgba(0, 146, 0, 0.3); */
+      box-shadow: 0 4px 12px ${t.themeColor}4c;
     }
   `
-})), W = s("div")(() => ({
-  ...r`
+})), G = a("div")(() => ({
+  ...s`
     position: absolute;
     top: 100%;
     right: 0;
     margin-top: 5px;
-    background-color: ${o.colors.white};
-    border: 1px solid ${o.colors.gray4};
+    background-color: ${n.colors.white};
+    border: 1px solid ${n.colors.gray4};
     border-radius: 6px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     z-index: 1000;
@@ -222,47 +211,47 @@ const be = [
     max-height: 300px;
     overflow-y: auto;
   `
-})), _ = s("div")(() => ({
-  ...r`
+})), L = a("div")(({ customTheme: t }) => ({
+  ...s`
     padding: 12px 16px;
     display: flex;
     align-items: center;
     gap: 10px;
     cursor: pointer;
     font-size: 14px;
-    color: ${o.colors.slate};
+    color: ${n.colors.slate};
     transition: all 0.2s ease;
     :focus,
     :hover,
     :focus-within {
-      background-color: ${o.colors.whiteGreenB};
-      color: ${o.colors.darkGreen};
+      background-color: ${t.themeLightB};
+      color: ${t.themeDark};
     }
   `
-})), E = s("input")(() => ({
-  ...r`
+})), E = a("input")(({ customTheme: t }) => ({
+  ...s`
     width: 16px;
     height: 16px;
-    accent-color: ${o.colors.green};
+    accent-color: ${t.themeColor};
   `
-})), ze = s("table")(() => ({
-  ...r`
+})), De = a("table")(() => ({
+  ...s`
     width: 100%;
     border-collapse: collapse;
-    background-color: ${o.colors.white};
+    background-color: ${n.colors.white};
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   `
-})), je = s("th")(() => ({
-  ...r`
-    background-color: ${o.colors.whiteBlue};
-    color: ${o.colors.slate};
+})), Ne = a("th")(({ customTheme: t }) => ({
+  ...s`
+    background-color: ${n.colors.whiteBlue};
+    color: ${n.colors.slate};
     padding: 16px 12px;
     text-align: left;
     font-size: 14px;
     font-weight: 600;
-    border-bottom: 2px solid ${o.colors.gray4};
+    border-bottom: 2px solid ${n.colors.gray4};
     cursor: pointer;
     user-select: none;
     transition: all 0.2s ease;
@@ -271,50 +260,50 @@ const be = [
     :focus,
     :hover,
     :focus-within {
-      background-color: ${o.colors.whiteGreenC};
-      color: ${o.colors.darkGreen};
+      background-color: ${t.themeLightC};
+      color: ${t.themeDark};
     }
   `
-})), Te = s("td")(() => ({
-  ...r`
+})), Te = a("td")(() => ({
+  ...s`
     padding: 14px 12px;
-    border-bottom: 1px solid ${o.colors.almostWhite};
+    border-bottom: 1px solid ${n.colors.almostWhite};
     font-size: 14px;
-    color: ${o.colors.slate};
+    color: ${n.colors.slate};
     transition: all 0.2s ease;
   `
-})), Ne = s("span")(() => ({
-  ...r`
+})), Ae = a("span")(() => ({
+  ...s`
     margin-left: 8px;
     opacity: 0.6;
   `
-})), Y = s("tr")(({ interactableRow: x }) => ({
-  ...r`
+})), J = a("tr")(({ interactableRow: t, customTheme: y }) => ({
+  ...s`
     transition: all 0.2s ease;
-    ${x && r`
+    ${t && s`
       :focus,
       :hover,
       :focus-within {
-        background-color: ${o.colors.whiteGreenD};
+        background-color: ${y.themeLightD};
         cursor: pointer;
       }
     `}
   `
-})), Ae = s("div")(() => ({
-  ...r`
+})), Be = a("div")(() => ({
+  ...s`
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 20px;
     gap: 10px;
   `
-})), k = s("button")(() => ({
-  ...r`
+})), v = a("button")(({ customTheme: t }) => ({
+  ...s`
     padding: 8px 12px;
-    border: 1px solid ${o.colors.gray4};
+    border: 1px solid ${n.colors.gray4};
     border-radius: 4px;
-    background-color: ${o.colors.white};
-    color: ${o.colors.slate};
+    background-color: ${n.colors.white};
+    color: ${n.colors.slate};
     cursor: pointer;
     font-size: 14px;
     transition: all 0.2s ease;
@@ -322,263 +311,335 @@ const be = [
     :focus,
     :hover,
     :focus-within {
-      background-color: ${o.colors.green};
-      color: ${o.colors.white};
-      border-color: ${o.colors.green};
+      background-color: ${t.themeColor};
+      color: ${n.colors.white};
+      border-color: ${t.themeColor};
     }
     :disabled {
       opacity: 0.5;
       cursor: not-allowed;
     }
   `
-})), De = s("div")(() => ({
-  ...r`
+})), Me = a("div")(() => ({
+  ...s`
     font-size: 14px;
-    color: ${o.colors.gray3};
+    color: ${n.colors.gray3};
     text-align: center;
     margin-top: 10px;
   `
-})), J = s("span")(() => ({
-  ...r`
+})), K = a("span")(() => ({
+  ...s`
     padding: 8px 4px;
-    color: ${o.colors.gray3};
+    color: ${n.colors.gray3};
     font-size: 14px;
   `
-})), Ge = ({
-  data: x = [],
-  columnTitles: $ = {},
-  rowsPerPage: m = 19,
-  title: Q = "Data Table",
+})), Ue = ({
+  data: t = [],
+  columnTitles: y = {},
+  rowsPerPage: w = 19,
+  title: X = "Data Table",
   onRowClick: A,
-  hiddenColumns: X = [],
+  hiddenColumns: Z = [],
   defaultSort: F = { key: "", direction: "asc" },
   extraActions: I
 }) => {
-  const [i, u] = b(1), [z, L] = b(""), [p, V] = b(F), [y, j] = b(/* @__PURE__ */ new Set()), [D, G] = b(/* @__PURE__ */ new Set()), [H, Z] = b(!1), [O, P] = b(!1), l = N(() => x.length === 0 ? [] : Object.keys(x[0]).filter((e) => !X.includes(e)), [x]);
-  R(() => {
-    l.length > 0 && (G(new Set(l)), j(new Set(l)));
-  }, [l]), R(() => {
-    L(""), V(F), u(1);
+  const [c, b] = m(1), [j, V] = m(""), [x, H] = m(F), [C, D] = m(/* @__PURE__ */ new Set()), [B, O] = m(/* @__PURE__ */ new Set()), [R, P] = m(!1), [U, ee] = m(!1), i = de(), f = {
+    thActive: {
+      backgroundColor: i.themeColor,
+      color: n.colors.white
+    },
+    paginationButtonActive: {
+      backgroundColor: i.themeColor,
+      color: n.colors.white,
+      borderColor: i.themeColor
+    },
+    paginationButtonDisabled: {
+      opacity: 0.5,
+      cursor: "not-allowed"
+    },
+    info: {
+      fontSize: "14px",
+      color: n.colors.gray3,
+      textAlign: "center",
+      marginTop: "10px"
+    }
+  }, h = T(() => t.length === 0 ? [] : Object.keys(t[0]).filter((e) => !Z.includes(e)), [t]);
+  q(() => {
+    h.length > 0 && (O(new Set(h)), D(new Set(h)));
+  }, [h]), q(() => {
+    V(""), H(F), b(1);
   }, []);
-  const B = N(() => {
-    if (!z) return x;
-    const e = y.size > 0 ? y : new Set(l);
-    return x.filter((n) => Array.from(e).some((a) => {
-      const h = n[a];
-      return h && h.toString().toLowerCase().includes(z.toLowerCase());
+  const M = T(() => {
+    if (!j) return t;
+    const e = C.size > 0 ? C : new Set(h);
+    return t.filter((r) => Array.from(e).some((d) => {
+      const g = r[d];
+      return g && g.toString().toLowerCase().includes(j.toLowerCase());
     }));
-  }, [x, z, y, l]), g = N(() => p.key ? [...B].sort((e, n) => e[p.key] < n[p.key] ? p.direction === "asc" ? -1 : 1 : e[p.key] > n[p.key] ? p.direction === "asc" ? 1 : -1 : 0) : B, [B, p]), T = l.filter((e) => D.has(e)), ee = () => {
-    if (!Array.isArray(g) || g.length === 0) return;
-    const e = T.map((w) => $[w] || w), n = (w) => {
-      const S = String(w ?? "");
-      return /[",\n]/.test(S) ? `"${S.replace(/"/g, '""')}"` : S;
-    }, h = [
+  }, [t, j, C, h]), u = T(() => x.key ? [...M].sort((e, r) => e[x.key] < r[x.key] ? x.direction === "asc" ? -1 : 1 : e[x.key] > r[x.key] ? x.direction === "asc" ? 1 : -1 : 0) : M, [M, x]), N = h.filter((e) => B.has(e)), oe = () => {
+    if (!Array.isArray(u) || u.length === 0) return;
+    const e = N.map((k) => y[k] || k), r = (k) => {
+      const z = String(k ?? "");
+      return /[",\n]/.test(z) ? `"${z.replace(/"/g, '""')}"` : z;
+    }, g = [
       e.join(","),
       // header row
-      ...g.map((w) => T.map((S) => n(w[S])).join(","))
+      ...u.map((k) => N.map((z) => r(k[z])).join(","))
     ].join(`
-`), ie = new Blob([h], { type: "text/csv;charset=utf-8;" }), C = document.createElement("a");
-    C.href = URL.createObjectURL(ie), C.download = "data.csv", document.body.appendChild(C), C.click(), document.body.removeChild(C);
-  }, oe = N(() => {
-    const e = (i - 1) * m;
-    return g.slice(e, e + m);
-  }, [g, i, m]), d = Math.ceil(g.length / m), te = (e) => {
-    V((n) => ({
+`), ae = new Blob([g], { type: "text/csv;charset=utf-8;" }), $ = document.createElement("a");
+    $.href = URL.createObjectURL(ae), $.download = "data.csv", document.body.appendChild($), $.click(), document.body.removeChild($);
+  }, te = T(() => {
+    const e = (c - 1) * w;
+    return u.slice(e, e + w);
+  }, [u, c, w]), p = Math.ceil(u.length / w), ne = (e) => {
+    H((r) => ({
       key: e,
-      direction: n.key === e && n.direction === "asc" ? "desc" : "asc"
+      direction: r.key === e && r.direction === "asc" ? "desc" : "asc"
     }));
-  }, ne = (e) => {
-    j((n) => {
-      const a = new Set(n);
-      return a.has(e) ? a.delete(e) : a.add(e), a;
+  }, re = (e) => {
+    D((r) => {
+      const d = new Set(r);
+      return d.has(e) ? d.delete(e) : d.add(e), d;
     });
-  }, re = () => {
-    y.size === l.length ? j(/* @__PURE__ */ new Set()) : j(new Set(l));
+  }, ie = () => {
+    C.size === h.length ? D(/* @__PURE__ */ new Set()) : D(new Set(h));
   }, se = (e) => {
-    G((n) => {
-      const a = new Set(n);
-      return a.has(e) ? a.delete(e) : a.add(e), a;
+    O((r) => {
+      const d = new Set(r);
+      return d.has(e) ? d.delete(e) : d.add(e), d;
     });
   };
-  return /* @__PURE__ */ c(me, { className: "jcTableContainer", children: [
-    /* @__PURE__ */ c(ye, { className: "jcTableHeader", children: [
-      /* @__PURE__ */ c(we, { className: "jcTableTitleAndActions", children: [
-        /* @__PURE__ */ t(ke, { children: Q }),
-        /* @__PURE__ */ c(ae, { className: "jcTableExtraComponentsBox", gap: "9px", children: [
+  return /* @__PURE__ */ l(we, { className: "jcTableContainer", children: [
+    /* @__PURE__ */ l(Ce, { className: "jcTableHeader", children: [
+      /* @__PURE__ */ l(ke, { className: "jcTableTitleAndActions", children: [
+        /* @__PURE__ */ o(ve, { children: X }),
+        /* @__PURE__ */ l(le, { className: "jcTableExtraComponentsBox", gap: "9px", children: [
           I && I,
-          /* @__PURE__ */ t(ce, { onClick: ee, children: "Export to CSV" })
+          /* @__PURE__ */ o(ce, { onClick: oe, children: "Export to CSV" })
         ] })
       ] }),
-      /* @__PURE__ */ c(ve, { className: "jcTableControls", children: [
-        /* @__PURE__ */ c(Ce, { className: "jcTableSearchContainer", children: [
-          /* @__PURE__ */ t(Se, {}),
-          /* @__PURE__ */ t(
-            $e,
+      /* @__PURE__ */ l(Se, { className: "jcTableControls", children: [
+        /* @__PURE__ */ l($e, { className: "jcTableSearchContainer", children: [
+          /* @__PURE__ */ o(ze, { customTheme: i }),
+          /* @__PURE__ */ o(
+            je,
             {
+              customTheme: i,
               type: "text",
               placeholder: "Search...",
-              value: z,
-              onChange: (e) => L(e.target.value)
+              value: j,
+              onChange: (e) => V(e.target.value)
             }
           )
         ] }),
-        /* @__PURE__ */ c("div", { style: { position: "relative" }, children: [
-          /* @__PURE__ */ c(
-            q,
+        /* @__PURE__ */ l("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ l(
+            Y,
             {
+              customTheme: i,
               className: "jcTableSearchFields",
-              onClick: () => P(!O),
+              onClick: () => ee(!U),
               children: [
-                /* @__PURE__ */ t(K, { size: 16 }),
+                /* @__PURE__ */ o(Q, { size: 16 }),
                 "Fields",
-                /* @__PURE__ */ t(M, { size: 16 })
+                /* @__PURE__ */ o(_, { size: 16 })
               ]
             }
           ),
-          O && /* @__PURE__ */ c(W, { className: "jcTableSearchFieldsDropdown", children: [
-            /* @__PURE__ */ c(_, { onClick: re, children: [
-              /* @__PURE__ */ t(
+          U && /* @__PURE__ */ l(G, { className: "jcTableSearchFieldsDropdown", children: [
+            /* @__PURE__ */ l(L, { customTheme: i, onClick: ie, children: [
+              /* @__PURE__ */ o(
                 E,
                 {
+                  customTheme: i,
                   type: "checkbox",
-                  checked: y.size === l.length,
+                  checked: C.size === h.length,
                   onChange: () => {
                   }
                 }
               ),
-              /* @__PURE__ */ t("span", { style: { fontWeight: "bold" }, children: "All" })
+              /* @__PURE__ */ o("span", { style: { fontWeight: "bold" }, children: "All" })
             ] }),
-            /* @__PURE__ */ t("div", { style: { height: "1px", backgroundColor: o.colors.gray4, margin: "4px 0" } }),
-            l.map((e) => /* @__PURE__ */ c(_, { onClick: () => ne(e), children: [
-              /* @__PURE__ */ t(E, { type: "checkbox", checked: y.has(e), onChange: () => {
-              } }),
-              /* @__PURE__ */ t("span", { children: $[e] || e })
-            ] }, e))
+            /* @__PURE__ */ o("div", { style: { height: "1px", backgroundColor: n.colors.gray4, margin: "4px 0" } }),
+            h.map((e) => /* @__PURE__ */ l(
+              L,
+              {
+                customTheme: i,
+                onClick: () => re(e),
+                children: [
+                  /* @__PURE__ */ o(
+                    E,
+                    {
+                      customTheme: i,
+                      type: "checkbox",
+                      checked: C.has(e),
+                      onChange: () => {
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ o("span", { children: y[e] || e })
+                ]
+              },
+              e
+            ))
           ] })
         ] }),
-        /* @__PURE__ */ c("div", { style: { position: "relative" }, children: [
-          /* @__PURE__ */ c(
-            q,
+        /* @__PURE__ */ l("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ l(
+            Y,
             {
+              customTheme: i,
               className: "jcTableColumnSettings",
-              onClick: () => Z(!H),
+              onClick: () => P(!R),
               children: [
-                /* @__PURE__ */ t(fe, { size: 16 }),
+                /* @__PURE__ */ o(ye, { size: 16 }),
                 "Columns",
-                /* @__PURE__ */ t(M, { size: 16 })
+                /* @__PURE__ */ o(_, { size: 16 })
               ]
             }
           ),
-          H && /* @__PURE__ */ t(W, { className: "jcTableColumnSettingsDropdown", children: l.map((e) => /* @__PURE__ */ c(_, { onClick: () => se(e), children: [
-            /* @__PURE__ */ t(E, { type: "checkbox", checked: D.has(e), onChange: () => {
-            } }),
-            D.has(e) ? /* @__PURE__ */ t(xe, { size: 16 }) : /* @__PURE__ */ t(he, { size: 16 }),
-            /* @__PURE__ */ t("span", { children: $[e] || e })
-          ] }, e)) })
+          R && /* @__PURE__ */ o(G, { className: "jcTableColumnSettingsDropdown", children: h.map((e) => /* @__PURE__ */ l(
+            L,
+            {
+              customTheme: i,
+              onClick: () => se(e),
+              children: [
+                /* @__PURE__ */ o(
+                  E,
+                  {
+                    customTheme: i,
+                    type: "checkbox",
+                    checked: B.has(e),
+                    onChange: () => {
+                    }
+                  }
+                ),
+                B.has(e) ? /* @__PURE__ */ o(be, { size: 16 }) : /* @__PURE__ */ o(ge, { size: 16 }),
+                /* @__PURE__ */ o("span", { children: y[e] || e })
+              ]
+            },
+            e
+          )) })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ c(ze, { className: "jcTableContent", children: [
-      /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ t(Y, { interactableRow: !1, children: T.map((e) => /* @__PURE__ */ c(
-        je,
+    /* @__PURE__ */ l(De, { className: "jcTableContent", children: [
+      /* @__PURE__ */ o("thead", { children: /* @__PURE__ */ o(J, { customTheme: i, interactableRow: !1, children: N.map((e) => /* @__PURE__ */ l(
+        Ne,
         {
-          style: p.key === e ? f.thActive : {},
-          onClick: () => te(e),
+          customTheme: i,
+          style: x.key === e ? f.thActive : {},
+          onClick: () => ne(e),
           children: [
-            $[e] || e,
-            /* @__PURE__ */ t(Ne, { children: p.key === e ? p.direction === "asc" ? /* @__PURE__ */ t(U, { size: 16 }) : /* @__PURE__ */ t(M, { size: 16 }) : /* @__PURE__ */ t(U, { size: 16, style: { opacity: 0.313 } }) })
+            y[e] || e,
+            /* @__PURE__ */ o(Ae, { children: x.key === e ? x.direction === "asc" ? /* @__PURE__ */ o(W, { size: 16 }) : /* @__PURE__ */ o(_, { size: 16 }) : /* @__PURE__ */ o(W, { size: 16, style: { opacity: 0.313 } }) })
           ]
         },
         e
       )) }) }),
-      /* @__PURE__ */ t("tbody", { children: oe.map((e, n) => /* @__PURE__ */ t(Y, { onClick: () => A && A(e), interactableRow: !!A, children: T.map((a) => /* @__PURE__ */ t(Te, { children: e[a] }, a)) }, n)) })
+      /* @__PURE__ */ o("tbody", { children: te.map((e, r) => /* @__PURE__ */ o(
+        J,
+        {
+          customTheme: i,
+          onClick: () => A && A(e),
+          interactableRow: !!A,
+          children: N.map((d) => /* @__PURE__ */ o(Te, { children: e[d] }, d))
+        },
+        r
+      )) })
     ] }),
-    /* @__PURE__ */ c(Ae, { children: [
-      /* @__PURE__ */ t(
-        k,
+    /* @__PURE__ */ l(Be, { children: [
+      /* @__PURE__ */ o(
+        v,
         {
-          style: i === 1 ? f.paginationButtonDisabled : {},
-          onClick: () => u(Math.max(1, i - 1)),
-          disabled: i === 1,
+          customTheme: i,
+          style: c === 1 ? f.paginationButtonDisabled : {},
+          onClick: () => b(Math.max(1, c - 1)),
+          disabled: c === 1,
           children: "Previous"
         }
       ),
       (() => {
         const e = [];
-        if (d <= 5)
-          for (let n = 1; n <= d; n++)
+        if (p <= 5)
+          for (let r = 1; r <= p; r++)
             e.push(
-              /* @__PURE__ */ t(
-                k,
+              /* @__PURE__ */ o(
+                v,
                 {
-                  style: i === n ? f.paginationButtonActive : {},
-                  onClick: () => u(n),
-                  children: n
+                  customTheme: i,
+                  style: c === r ? f.paginationButtonActive : {},
+                  onClick: () => b(r),
+                  children: r
                 },
-                n
+                r
               )
             );
         else {
           e.push(
-            /* @__PURE__ */ t(
-              k,
+            /* @__PURE__ */ o(
+              v,
               {
-                style: i === 1 ? f.paginationButtonActive : {},
-                onClick: () => u(1),
+                customTheme: i,
+                style: c === 1 ? f.paginationButtonActive : {},
+                onClick: () => b(1),
                 children: "1"
               },
               1
             )
-          ), i > 3 && e.push(/* @__PURE__ */ t(J, { children: "..." }, "ellipsis1"));
-          const n = Math.max(2, i - 1), a = Math.min(d - 1, i + 1);
-          for (let h = n; h <= a; h++)
+          ), c > 3 && e.push(/* @__PURE__ */ o(K, { children: "..." }, "ellipsis1"));
+          const r = Math.max(2, c - 1), d = Math.min(p - 1, c + 1);
+          for (let g = r; g <= d; g++)
             e.push(
-              /* @__PURE__ */ t(
-                k,
+              /* @__PURE__ */ o(
+                v,
                 {
-                  style: i === h ? f.paginationButtonActive : {},
-                  onClick: () => u(h),
-                  children: h
+                  customTheme: i,
+                  style: c === g ? f.paginationButtonActive : {},
+                  onClick: () => b(g),
+                  children: g
                 },
-                h
+                g
               )
             );
-          i < d - 2 && e.push(/* @__PURE__ */ t(J, { children: "..." }, "ellipsis2")), d > 1 && e.push(
-            /* @__PURE__ */ t(
-              k,
+          c < p - 2 && e.push(/* @__PURE__ */ o(K, { children: "..." }, "ellipsis2")), p > 1 && e.push(
+            /* @__PURE__ */ o(
+              v,
               {
-                style: i === d ? f.paginationButtonActive : {},
-                onClick: () => u(d),
-                children: d
+                customTheme: i,
+                style: c === p ? f.paginationButtonActive : {},
+                onClick: () => b(p),
+                children: p
               },
-              d
+              p
             )
           );
         }
         return e;
       })(),
-      /* @__PURE__ */ t(
-        k,
+      /* @__PURE__ */ o(
+        v,
         {
-          style: i === d ? f.paginationButtonDisabled : {},
-          onClick: () => u(Math.min(d, i + 1)),
-          disabled: i === d,
+          customTheme: i,
+          style: c === p ? f.paginationButtonDisabled : {},
+          onClick: () => b(Math.min(p, c + 1)),
+          disabled: c === p,
           children: "Next"
         }
       )
     ] }),
-    /* @__PURE__ */ c(De, { children: [
+    /* @__PURE__ */ l(Me, { children: [
       "Showing ",
-      Math.min((i - 1) * m + 1, g.length),
+      Math.min((c - 1) * w + 1, u.length),
       " to",
       " ",
-      Math.min(i * m, g.length),
+      Math.min(c * w, u.length),
       " of ",
-      g.length,
+      u.length,
       " entries"
     ] })
   ] });
 };
 export {
-  Ge as default
+  Ue as default
 };