jcicl 1.0.9 → 1.0.11

package/Table/Table.js

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