jcicl 0.0.341 → 0.0.345

package/Table/Table.js

@@ -1,121 +1,32 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import je, { forwardRef as P, createElement as R, useState as C, useMemo as _ } from "react";
+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 i } from "../.chunks/emotion-react.browser.esm.js";
-import { n as c } from "../.chunks/emotion-styled.browser.esm.js";
-import { Button as ze } from "../Button/Button.js";
-import { Flex as Ae } from "../Flex/Flex.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 ae } from "../Flex/Flex.js";
+import { c as v } 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 Te = (r) => r.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), Ne = (r) => r.replace(
-  /^([A-Z])|[\s-_]+(\w)/g,
-  (s, p, f) => f ? f.toUpperCase() : p.toLowerCase()
-), J = (r) => {
-  const s = Ne(r);
-  return s.charAt(0).toUpperCase() + s.slice(1);
-}, ee = (...r) => r.filter((s, p, f) => !!s && s.trim() !== "" && f.indexOf(s) === p).join(" ").trim(), Be = (r) => {
-  for (const s in r)
-    if (s.startsWith("aria-") || s === "role" || s === "title")
-      return !0;
-};
-/**
- * @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.
- */
-var De = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: 2,
-  strokeLinecap: "round",
-  strokeLinejoin: "round"
-};
-/**
- * @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 = P(
-  ({
-    color: r = "currentColor",
-    size: s = 24,
-    strokeWidth: p = 2,
-    absoluteStrokeWidth: f,
-    className: y = "",
-    children: w,
-    iconNode: M,
-    ...A
-  }, a) => R(
-    "svg",
-    {
-      ref: a,
-      ...De,
-      width: s,
-      height: s,
-      stroke: r,
-      strokeWidth: f ? Number(p) * 24 / Number(s) : p,
-      className: ee("lucide", y),
-      ...!w && !Be(A) && { "aria-hidden": "true" },
-      ...A
-    },
-    [
-      ...M.map(([m, E]) => R(m, E)),
-      ...Array.isArray(w) ? w : [w]
-    ]
-  )
-);
-/**
- * @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 z = (r, s) => {
-  const p = P(
-    ({ className: f, ...y }, w) => R(_e, {
-      ref: w,
-      iconNode: s,
-      className: ee(
-        `lucide-${Te(J(r))}`,
-        `lucide-${r}`,
-        f
-      ),
-      ...y
-    })
-  );
-  return p.displayName = J(r), p;
-};
+const le = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], M = v("chevron-down", le);
 /**
  * @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 Me = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], G = z("chevron-down", Me);
+const de = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]], U = v("chevron-up", de);
 /**
  * @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 Ee = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]], Q = z("chevron-up", Ee);
-/**
- * @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 = [
+const pe = [
   [
     "path",
     {
@@ -132,14 +43,14 @@ const Le = [
     }
   ],
   ["path", { d: "m2 2 20 20", key: "1ooewy" }]
-], Fe = z("eye-off", Le);
+], he = v("eye-off", 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 Ie = [
+const ge = [
   [
     "path",
     {
@@ -148,24 +59,24 @@ const Ie = [
     }
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
-], Ve = z("eye", Ie);
+], xe = v("eye", ge);
 /**
  * @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", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-], X = z("search", Ge);
+], K = v("search", 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 Re = [
+const be = [
   [
     "path",
     {
@@ -174,376 +85,363 @@ const Re = [
     }
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
-], Ue = z("settings", Re);
-let j = "";
-const Je = ({
-  data: r = [],
-  columnTitles: s = {},
-  rowsPerPage: p = 19,
-  title: f = "Data Table",
-  onRowClick: y,
-  hiddenColumns: w = [],
-  defaultSort: M = { key: "", direction: "asc" },
-  extraActions: A
+], 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};
+    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;
+  `
+})), ye = s("div")(() => ({
+  ...r`
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+    gap: 9px;
+  `
+})), we = s("div")(() => ({
+  ...r`
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    align-items: center;
+  `
+})), ke = s("h2")(() => ({
+  ...r`
+    font-size: 24px;
+    font-weight: bold;
+    color: ${o.colors.black};
+    margin: 0;
+  `
+})), ve = s("div")(() => ({
+  ...r`
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+    gap: 15px;
+    align-items: center;
+    flex-wrap: wrap;
+  `
+})), Ce = s("div")(() => ({
+  ...r`
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+  `
+})), Se = s(K)(() => ({
+  ...r`
+    position: absolute;
+    left: 13px;
+    top: 10px;
+    color: ${o.colors.gray3};
+    width: 19px;
+    height: 19px;
+    transition: all 313ms ease;
+  `
+})), $e = 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);
+    }
+  `
+})), q = 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);
+    }
+  `
+})), W = 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};
+    }
+  `
+})), E = s("input")(() => ({
+  ...r`
+    width: 16px;
+    height: 16px;
+    accent-color: ${o.colors.green};
+  `
+})), ze = 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);
+  `
+})), je = 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};
+    }
+  `
+})), Te = 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;
+  `
+})), Ne = s("span")(() => ({
+  ...r`
+    margin-left: 8px;
+    opacity: 0.6;
+  `
+})), Y = s("tr")(({ interactableRow: x }) => ({
+  ...r`
+    transition: all 0.2s ease;
+    ${x && r`
+      :focus,
+      :hover,
+      :focus-within {
+        background-color: ${o.colors.whiteGreenD};
+        cursor: pointer;
+      }
+    `}
+  `
+})), Ae = s("div")(() => ({
+  ...r`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 20px;
+    gap: 10px;
+  `
+})), k = 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;
+    }
+  `
+})), De = s("div")(() => ({
+  ...r`
+    font-size: 14px;
+    color: ${o.colors.gray3};
+    text-align: center;
+    margin-top: 10px;
+  `
+})), J = s("span")(() => ({
+  ...r`
+    padding: 8px 4px;
+    color: ${o.colors.gray3};
+    font-size: 14px;
+  `
+})), Ge = ({
+  data: x = [],
+  columnTitles: $ = {},
+  rowsPerPage: m = 19,
+  title: Q = "Data Table",
+  onRowClick: A,
+  hiddenColumns: X = [],
+  defaultSort: F = { key: "", direction: "asc" },
+  extraActions: I
 }) => {
-  const [a, m] = C(1), [, E] = C(""), [u, oe] = C(M), [v, B] = C(/* @__PURE__ */ new Set()), [L, U] = C(/* @__PURE__ */ new Set()), [O, te] = C(!1), [W, ne] = C(!1), h = _(() => r.length === 0 ? [] : Object.keys(r[0]).filter((e) => !w.includes(e)), [r]);
-  je.useEffect(() => {
-    h.length > 0 && (U(new Set(h)), B(new Set(h)));
-  }, [h]);
-  const F = _(() => {
-    if (!j) return r;
-    const e = v.size > 0 ? v : new Set(h);
-    return r.filter((n) => Array.from(e).some((d) => {
-      const x = n[d];
-      return x && x.toString().toLowerCase().includes(j.toLowerCase());
+  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 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());
     }));
-  }, [r, j, v, h]), b = _(() => u.key ? [...F].sort((e, n) => e[u.key] < n[u.key] ? u.direction === "asc" ? -1 : 1 : e[u.key] > n[u.key] ? u.direction === "asc" ? 1 : -1 : 0) : F, [F, u]), D = h.filter((e) => L.has(e)), re = () => {
-    if (!Array.isArray(b) || b.length === 0) return;
-    const e = D.map(($) => s[$] || $), n = ($) => {
-      const N = String($ ?? "");
-      return /[",\n]/.test(N) ? `"${N.replace(/"/g, '""')}"` : N;
-    }, x = [
+  }, [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 = [
       e.join(","),
       // header row
-      ...b.map(($) => D.map((N) => n($[N])).join(","))
+      ...g.map((w) => T.map((S) => n(w[S])).join(","))
     ].join(`
-`), $e = new Blob([x], { type: "text/csv;charset=utf-8;" }), T = document.createElement("a");
-    T.href = URL.createObjectURL($e), T.download = "data.csv", document.body.appendChild(T), T.click(), document.body.removeChild(T);
-  }, se = _(() => {
-    const e = (a - 1) * p;
-    return b.slice(e, e + p);
-  }, [b, a, p]), g = Math.ceil(b.length / p), ie = (e) => {
-    oe((n) => ({
+`), 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) => ({
       key: e,
       direction: n.key === e && n.direction === "asc" ? "desc" : "asc"
     }));
-  }, ce = (e) => {
-    B((n) => {
-      const d = new Set(n);
-      return d.has(e) ? d.delete(e) : d.add(e), d;
+  }, ne = (e) => {
+    j((n) => {
+      const a = new Set(n);
+      return a.has(e) ? a.delete(e) : a.add(e), a;
     });
-  }, ae = () => {
-    v.size === h.length ? B(/* @__PURE__ */ new Set()) : B(new Set(h));
-  }, le = (e) => {
-    U((n) => {
-      const d = new Set(n);
-      return d.has(e) ? d.delete(e) : d.add(e), d;
+  }, re = () => {
+    y.size === l.length ? j(/* @__PURE__ */ new Set()) : j(new Set(l));
+  }, se = (e) => {
+    G((n) => {
+      const a = new Set(n);
+      return a.has(e) ? a.delete(e) : a.add(e), a;
     });
-  }, de = (e) => {
-    j = e;
-  }, H = () => {
-    E(j);
-  }, k = {
-    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"
-    }
-  }, pe = c("div")(() => ({
-    ...i`
-      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;
-    `
-  })), he = c("div")(() => ({
-    ...i`
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 20px;
-      flex-wrap: wrap;
-      gap: 9px;
-    `
-  })), ge = c("div")(() => ({
-    ...i`
-      display: flex;
-      justify-content: space-between;
-      width: 100%;
-      align-items: center;
-    `
-  })), ue = c("h2")(() => ({
-    ...i`
-      font-size: 24px;
-      font-weight: bold;
-      color: ${o.colors.black};
-      margin: 0;
-    `
-  })), xe = c("div")(() => ({
-    ...i`
-      display: flex;
-      justify-content: flex-end;
-      width: 100%;
-      gap: 15px;
-      align-items: center;
-      flex-wrap: wrap;
-    `
-  })), fe = c("div")(() => ({
-    ...i`
-      position: relative;
-      display: flex;
-      align-items: center;
-      flex-grow: 1;
-    `
-  })), be = c(X)(() => ({
-    ...i`
-      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};
-      }
-    `
-  })), we = c("input")(() => ({
-    ...i`
-      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);
-      }
-    `
-  })), q = c("button")(() => ({
-    ...i`
-      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);
-      }
-    `
-  })), K = c("div")(() => ({
-    ...i`
-      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;
-    `
-  })), I = c("div")(() => ({
-    ...i`
-      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};
-      }
-    `
-  })), V = c("input")(() => ({
-    ...i`
-      width: 16px;
-      height: 16px;
-      accent-color: ${o.colors.green};
-    `
-  })), me = c("table")(() => ({
-    ...i`
-      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);
-    `
-  })), ye = c("th")(() => ({
-    ...i`
-      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};
-      }
-    `
-  })), ke = c("td")(() => ({
-    ...i`
-      padding: 14px 12px;
-      border-bottom: 1px solid ${o.colors.almostWhite};
-      font-size: 14px;
-      color: ${o.colors.slate};
-      transition: all 0.2s ease;
-    `
-  })), Ce = c("span")(() => ({
-    ...i`
-      margin-left: 8px;
-      opacity: 0.6;
-    `
-  })), Z = c("tr")(({ interactableRow: e }) => ({
-    ...i`
-      transition: all 0.2s ease;
-      ${e && i`
-        :focus,
-        :hover,
-        :focus-within {
-          background-color: ${o.colors.whiteGreenD};
-          cursor: pointer;
-        }
-      `}
-    `
-  })), ve = c("div")(() => ({
-    ...i`
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin-top: 20px;
-      gap: 10px;
-    `
-  })), S = c("button")(() => ({
-    ...i`
-      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;
-      }
-    `
-  })), Se = c("div")(() => ({
-    ...i`
-      font-size: 14px;
-      color: ${o.colors.gray3};
-      text-align: center;
-      margin-top: 10px;
-    `
-  })), Y = c("span")(() => ({
-    ...i`
-      padding: 8px 4px;
-      color: ${o.colors.gray3};
-      font-size: 14px;
-    `
-  }));
-  return /* @__PURE__ */ l(pe, { className: "jcTableContainer", children: [
-    /* @__PURE__ */ l(he, { className: "jcTableHeader", children: [
-      /* @__PURE__ */ l(ge, { className: "jcTableTitleAndActions", children: [
-        /* @__PURE__ */ t(ue, { children: f }),
-        /* @__PURE__ */ l(Ae, { className: "jcTableExtraComponentsBox", gap: "9px", children: [
-          A && A,
-          /* @__PURE__ */ t(ze, { onClick: re, children: "Export to CSV" })
+  };
+  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: [
+          I && I,
+          /* @__PURE__ */ t(ce, { onClick: ee, children: "Export to CSV" })
         ] })
       ] }),
-      /* @__PURE__ */ l(xe, { className: "jcTableControls", children: [
-        /* @__PURE__ */ l(fe, { className: "jcTableSearchContainer", children: [
-          /* @__PURE__ */ t(be, { onClick: H }),
+      /* @__PURE__ */ c(ve, { className: "jcTableControls", children: [
+        /* @__PURE__ */ c(Ce, { className: "jcTableSearchContainer", children: [
+          /* @__PURE__ */ t(Se, {}),
           /* @__PURE__ */ t(
-            we,
+            $e,
             {
               type: "text",
               placeholder: "Search...",
-              defaultValue: j,
-              onChange: (e) => de(e.target.value),
-              onKeyDown: (e) => {
-                e.key === "Enter" && H();
-              }
+              value: z,
+              onChange: (e) => L(e.target.value)
             }
           )
         ] }),
-        /* @__PURE__ */ l("div", { style: { position: "relative" }, children: [
-          /* @__PURE__ */ l(
+        /* @__PURE__ */ c("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ c(
             q,
             {
               className: "jcTableSearchFields",
-              onClick: () => ne(!W),
+              onClick: () => P(!O),
               children: [
-                /* @__PURE__ */ t(X, { size: 16 }),
+                /* @__PURE__ */ t(K, { size: 16 }),
                 "Fields",
-                /* @__PURE__ */ t(G, { size: 16 })
+                /* @__PURE__ */ t(M, { size: 16 })
               ]
             }
           ),
-          W && /* @__PURE__ */ l(K, { className: "jcTableSearchFieldsDropdown", children: [
-            /* @__PURE__ */ l(I, { onClick: ae, children: [
+          O && /* @__PURE__ */ c(W, { className: "jcTableSearchFieldsDropdown", children: [
+            /* @__PURE__ */ c(_, { onClick: re, children: [
               /* @__PURE__ */ t(
-                V,
+                E,
                 {
                   type: "checkbox",
-                  checked: v.size === h.length,
+                  checked: y.size === l.length,
                   onChange: () => {
                   }
                 }
@@ -551,70 +449,70 @@ const Je = ({
               /* @__PURE__ */ t("span", { style: { fontWeight: "bold" }, children: "All" })
             ] }),
             /* @__PURE__ */ t("div", { style: { height: "1px", backgroundColor: o.colors.gray4, margin: "4px 0" } }),
-            h.map((e) => /* @__PURE__ */ l(I, { onClick: () => ce(e), children: [
-              /* @__PURE__ */ t(V, { type: "checkbox", checked: v.has(e), onChange: () => {
+            l.map((e) => /* @__PURE__ */ c(_, { onClick: () => ne(e), children: [
+              /* @__PURE__ */ t(E, { type: "checkbox", checked: y.has(e), onChange: () => {
               } }),
-              /* @__PURE__ */ t("span", { children: s[e] || e })
+              /* @__PURE__ */ t("span", { children: $[e] || e })
             ] }, e))
           ] })
         ] }),
-        /* @__PURE__ */ l("div", { style: { position: "relative" }, children: [
-          /* @__PURE__ */ l(
+        /* @__PURE__ */ c("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ c(
             q,
             {
               className: "jcTableColumnSettings",
-              onClick: () => te(!O),
+              onClick: () => Z(!H),
               children: [
-                /* @__PURE__ */ t(Ue, { size: 16 }),
+                /* @__PURE__ */ t(fe, { size: 16 }),
                 "Columns",
-                /* @__PURE__ */ t(G, { size: 16 })
+                /* @__PURE__ */ t(M, { size: 16 })
               ]
             }
           ),
-          O && /* @__PURE__ */ t(K, { className: "jcTableColumnSettingsDropdown", children: h.map((e) => /* @__PURE__ */ l(I, { onClick: () => le(e), children: [
-            /* @__PURE__ */ t(V, { type: "checkbox", checked: L.has(e), onChange: () => {
+          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: () => {
             } }),
-            L.has(e) ? /* @__PURE__ */ t(Ve, { size: 16 }) : /* @__PURE__ */ t(Fe, { size: 16 }),
-            /* @__PURE__ */ t("span", { children: s[e] || e })
+            D.has(e) ? /* @__PURE__ */ t(xe, { size: 16 }) : /* @__PURE__ */ t(he, { size: 16 }),
+            /* @__PURE__ */ t("span", { children: $[e] || e })
           ] }, e)) })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ l(me, { className: "jcTableContent", children: [
-      /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ t(Z, { interactableRow: !1, children: D.map((e) => /* @__PURE__ */ l(
-        ye,
+    /* @__PURE__ */ c(ze, { className: "jcTableContent", children: [
+      /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ t(Y, { interactableRow: !1, children: T.map((e) => /* @__PURE__ */ c(
+        je,
         {
-          style: u.key === e ? k.thActive : {},
-          onClick: () => ie(e),
+          style: p.key === e ? f.thActive : {},
+          onClick: () => te(e),
           children: [
-            s[e] || e,
-            /* @__PURE__ */ t(Ce, { children: u.key === e ? u.direction === "asc" ? /* @__PURE__ */ t(Q, { size: 16 }) : /* @__PURE__ */ t(G, { size: 16 }) : /* @__PURE__ */ t(Q, { size: 16, style: { opacity: 0.313 } }) })
+            $[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 } }) })
           ]
         },
         e
       )) }) }),
-      /* @__PURE__ */ t("tbody", { children: se.map((e, n) => /* @__PURE__ */ t(Z, { onClick: () => y && y(e), interactableRow: !!y, children: D.map((d) => /* @__PURE__ */ t(ke, { children: e[d] }, d)) }, n)) })
+      /* @__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__ */ l(ve, { children: [
+    /* @__PURE__ */ c(Ae, { children: [
       /* @__PURE__ */ t(
-        S,
+        k,
         {
-          style: a === 1 ? k.paginationButtonDisabled : {},
-          onClick: () => m(Math.max(1, a - 1)),
-          disabled: a === 1,
+          style: i === 1 ? f.paginationButtonDisabled : {},
+          onClick: () => u(Math.max(1, i - 1)),
+          disabled: i === 1,
           children: "Previous"
         }
       ),
       (() => {
         const e = [];
-        if (g <= 5)
-          for (let n = 1; n <= g; n++)
+        if (d <= 5)
+          for (let n = 1; n <= d; n++)
             e.push(
               /* @__PURE__ */ t(
-                S,
+                k,
                 {
-                  style: a === n ? k.paginationButtonActive : {},
-                  onClick: () => m(n),
+                  style: i === n ? f.paginationButtonActive : {},
+                  onClick: () => u(n),
                   children: n
                 },
                 n
@@ -623,64 +521,64 @@ const Je = ({
         else {
           e.push(
             /* @__PURE__ */ t(
-              S,
+              k,
               {
-                style: a === 1 ? k.paginationButtonActive : {},
-                onClick: () => m(1),
+                style: i === 1 ? f.paginationButtonActive : {},
+                onClick: () => u(1),
                 children: "1"
               },
               1
             )
-          ), a > 3 && e.push(/* @__PURE__ */ t(Y, { children: "..." }, "ellipsis1"));
-          const n = Math.max(2, a - 1), d = Math.min(g - 1, a + 1);
-          for (let x = n; x <= d; x++)
+          ), 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++)
             e.push(
               /* @__PURE__ */ t(
-                S,
+                k,
                 {
-                  style: a === x ? k.paginationButtonActive : {},
-                  onClick: () => m(x),
-                  children: x
+                  style: i === h ? f.paginationButtonActive : {},
+                  onClick: () => u(h),
+                  children: h
                 },
-                x
+                h
               )
             );
-          a < g - 2 && e.push(/* @__PURE__ */ t(Y, { children: "..." }, "ellipsis2")), g > 1 && e.push(
+          i < d - 2 && e.push(/* @__PURE__ */ t(J, { children: "..." }, "ellipsis2")), d > 1 && e.push(
             /* @__PURE__ */ t(
-              S,
+              k,
               {
-                style: a === g ? k.paginationButtonActive : {},
-                onClick: () => m(g),
-                children: g
+                style: i === d ? f.paginationButtonActive : {},
+                onClick: () => u(d),
+                children: d
               },
-              g
+              d
             )
           );
         }
         return e;
       })(),
       /* @__PURE__ */ t(
-        S,
+        k,
         {
-          style: a === g ? k.paginationButtonDisabled : {},
-          onClick: () => m(Math.min(g, a + 1)),
-          disabled: a === g,
+          style: i === d ? f.paginationButtonDisabled : {},
+          onClick: () => u(Math.min(d, i + 1)),
+          disabled: i === d,
           children: "Next"
         }
       )
     ] }),
-    /* @__PURE__ */ l(Se, { children: [
+    /* @__PURE__ */ c(De, { children: [
       "Showing ",
-      Math.min((a - 1) * p + 1, b.length),
+      Math.min((i - 1) * m + 1, g.length),
       " to",
       " ",
-      Math.min(a * p, b.length),
+      Math.min(i * m, g.length),
       " of ",
-      b.length,
+      g.length,
       " entries"
     ] })
   ] });
 };
 export {
-  Je as default
+  Ge as default
 };