jcicl 0.0.343 → 1.0.1

package/Table/Table.js

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