jcicl 1.0.5 → 1.0.7

package/Table/Table.js

@@ -1,10 +1,10 @@
-import { jsxs as l, jsx as o } from "react/jsx-runtime";
-import { useState as m, useMemo as T, useEffect as q } from "react";
+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 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 { 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 { c as S } from "../.chunks/createLucideIcon.js";
 /**
@@ -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" }]], _ = S("chevron-down", he);
+const he = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], M = 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 pe = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]], W = S("chevron-up", pe);
+const pe = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]], q = 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 xe = [
+const ue = [
   [
     "path",
     {
@@ -44,14 +44,14 @@ const xe = [
     }
   ],
   ["path", { d: "m2 2 20 20", key: "1ooewy" }]
-], ge = S("eye-off", xe);
+], ge = S("eye-off", ue);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ue = [
+const xe = [
   [
     "path",
     {
@@ -60,7 +60,7 @@ const ue = [
     }
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
-], be = S("eye", ue);
+], me = S("eye", xe);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
@@ -70,14 +70,14 @@ const ue = [
 const fe = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-], Q = S("search", fe);
+], K = 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 me = [
+const be = [
   [
     "path",
     {
@@ -86,8 +86,8 @@ const me = [
     }
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
-], ye = S("settings", me), we = a("div")(() => ({
-  ...s`
+], we = S("settings", be), ye = c("div")(() => ({
+  ...i`
     background-color: ${n.colors.white};
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
@@ -96,8 +96,8 @@ const me = [
     width: 100%;
     overflow: auto;
   `
-})), Ce = a("div")(() => ({
-  ...s`
+})), Ce = c("div")(() => ({
+  ...i`
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -106,22 +106,22 @@ const me = [
     flex-wrap: wrap;
     gap: 9px;
   `
-})), ke = a("div")(() => ({
-  ...s`
+})), ke = c("div")(() => ({
+  ...i`
     display: flex;
     justify-content: space-between;
     width: 100%;
     align-items: center;
   `
-})), ve = a("h2")(() => ({
-  ...s`
+})), ve = c("h2")(() => ({
+  ...i`
     font-size: 24px;
     font-weight: bold;
     color: ${n.colors.black};
     margin: 0;
   `
-})), Se = a("div")(() => ({
-  ...s`
+})), Se = c("div")(() => ({
+  ...i`
     display: flex;
     justify-content: flex-end;
     width: 100%;
@@ -129,15 +129,17 @@ const me = [
     align-items: center;
     flex-wrap: wrap;
   `
-})), $e = a("div")(() => ({
-  ...s`
+})), $e = c("div")(() => ({
+  ...i`
     position: relative;
     display: flex;
     align-items: center;
     flex-grow: 1;
   `
-})), ze = a(Q)(({ customTheme: t }) => ({
-  ...s`
+})), ze = c(K, {
+  shouldForwardProp: (o) => !["customTheme"].includes(o)
+})(({ customTheme: o }) => ({
+  ...i`
     position: absolute;
     left: 13px;
     top: 10px;
@@ -149,11 +151,13 @@ const me = [
     :hover,
     :focus-within {
       cursor: pointer;
-      color: ${t.themeColor};
+      color: ${o.themeColor};
     }
   `
-})), je = a("input")(({ customTheme: t }) => ({
-  ...s`
+})), je = c("input", {
+  shouldForwardProp: (o) => !["customTheme"].includes(o)
+})(({ customTheme: o }) => ({
+  ...i`
     padding: 10px 15px 10px 40px;
     border: 2px solid ${n.colors.gray4};
     border-radius: 25px;
@@ -166,18 +170,19 @@ const me = [
     :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;
+      border-color: ${o.themeColor};
+      box-shadow: 0 0 0 3px ${o.themeColor}18; // 18 = alpha 0.1
     }
   `
-})), Y = a("button")(({ customTheme: t }) => ({
-  ...s`
+})), W = c("button", {
+  shouldForwardProp: (o) => !["customTheme"].includes(o)
+})(({ customTheme: o }) => ({
+  ...i`
     padding: 10px 15px;
-    border: 2px solid ${t.themeColor};
+    border: 2px solid ${o.themeColor};
     border-radius: 6px;
     background-color: ${n.colors.white};
-    color: ${t.themeColor};
+    color: ${o.themeColor};
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -189,15 +194,14 @@ const me = [
     :focus,
     :hover,
     :focus-within {
-      background-color: ${t.themeColor};
+      background-color: ${o.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;
+      box-shadow: 0 4px 12px ${o.themeColor}4c; // 4c = alpha 0.3
     }
   `
-})), G = a("div")(() => ({
-  ...s`
+})), Y = c("div")(() => ({
+  ...i`
     position: absolute;
     top: 100%;
     right: 0;
@@ -211,8 +215,10 @@ const me = [
     max-height: 300px;
     overflow-y: auto;
   `
-})), L = a("div")(({ customTheme: t }) => ({
-  ...s`
+})), _ = c("div", {
+  shouldForwardProp: (o) => !["customTheme"].includes(o)
+})(({ customTheme: o }) => ({
+  ...i`
     padding: 12px 16px;
     display: flex;
     align-items: center;
@@ -224,18 +230,20 @@ const me = [
     :focus,
     :hover,
     :focus-within {
-      background-color: ${t.themeLightB};
-      color: ${t.themeDark};
+      background-color: ${o.themeLightB};
+      color: ${o.themeDark};
     }
   `
-})), E = a("input")(({ customTheme: t }) => ({
-  ...s`
+})), L = c("input", {
+  shouldForwardProp: (o) => !["customTheme"].includes(o)
+})(({ customTheme: o }) => ({
+  ...i`
     width: 16px;
     height: 16px;
-    accent-color: ${t.themeColor};
+    accent-color: ${o.themeColor};
   `
-})), De = a("table")(() => ({
-  ...s`
+})), Te = c("table")(() => ({
+  ...i`
     width: 100%;
     border-collapse: collapse;
     background-color: ${n.colors.white};
@@ -243,62 +251,66 @@ const me = [
     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`
+})), De = c("th", { shouldForwardProp: (o) => !["customTheme"].includes(o) })(
+  ({ customTheme: o }) => ({
+    ...i`
+      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: ${o.themeLightC};
+        color: ${o.themeDark};
+      }
+    `
+  })
+), Ne = c("td")(() => ({
+  ...i`
     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`
+})), Ae = c("span")(() => ({
+  ...i`
     margin-left: 8px;
     opacity: 0.6;
   `
-})), J = a("tr")(({ interactableRow: t, customTheme: y }) => ({
-  ...s`
+})), G = c("tr", { shouldForwardProp: (o) => !["customTheme"].includes(o) })(({ interactableRow: o, customTheme: w }) => ({
+  ...i`
     transition: all 0.2s ease;
-    ${t && s`
+    ${o && i`
       :focus,
       :hover,
       :focus-within {
-        background-color: ${y.themeLightD};
+        background-color: ${w.themeLightD};
         cursor: pointer;
       }
     `}
   `
-})), Be = a("div")(() => ({
-  ...s`
+})), Fe = c("div")(() => ({
+  ...i`
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 20px;
     gap: 10px;
   `
-})), v = a("button")(({ customTheme: t }) => ({
-  ...s`
+})), v = c("button", {
+  shouldForwardProp: (o) => !["customTheme"].includes(o)
+})(({ customTheme: o }) => ({
+  ...i`
     padding: 8px 12px;
     border: 1px solid ${n.colors.gray4};
     border-radius: 4px;
@@ -311,47 +323,47 @@ const me = [
     :focus,
     :hover,
     :focus-within {
-      background-color: ${t.themeColor};
+      background-color: ${o.themeColor};
       color: ${n.colors.white};
-      border-color: ${t.themeColor};
+      border-color: ${o.themeColor};
     }
     :disabled {
       opacity: 0.5;
       cursor: not-allowed;
     }
   `
-})), Me = a("div")(() => ({
-  ...s`
+})), Be = c("div")(() => ({
+  ...i`
     font-size: 14px;
     color: ${n.colors.gray3};
     text-align: center;
     margin-top: 10px;
   `
-})), K = a("span")(() => ({
-  ...s`
+})), J = c("span")(() => ({
+  ...i`
     padding: 8px 4px;
     color: ${n.colors.gray3};
     font-size: 14px;
   `
-})), Ue = ({
-  data: t = [],
-  columnTitles: y = {},
-  rowsPerPage: w = 19,
-  title: X = "Data Table",
+})), Re = ({
+  data: o = [],
+  columnTitles: w = {},
+  rowsPerPage: y = 19,
+  title: Q = "Data Table",
   onRowClick: A,
-  hiddenColumns: Z = [],
-  defaultSort: F = { key: "", direction: "asc" },
+  hiddenColumns: X = [],
+  defaultSort: E = { key: "", direction: "asc" },
   extraActions: I
 }) => {
-  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 = {
+  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 = {
     thActive: {
-      backgroundColor: i.themeColor,
+      backgroundColor: s.themeColor,
       color: n.colors.white
     },
     paginationButtonActive: {
-      backgroundColor: i.themeColor,
+      backgroundColor: s.themeColor,
       color: n.colors.white,
-      borderColor: i.themeColor
+      borderColor: s.themeColor
     },
     paginationButtonDisabled: {
       opacity: 0.5,
@@ -363,68 +375,68 @@ const me = [
       textAlign: "center",
       marginTop: "10px"
     }
-  }, h = T(() => t.length === 0 ? [] : Object.keys(t[0]).filter((e) => !Z.includes(e)), [t]);
-  q(() => {
-    h.length > 0 && (O(new Set(h)), D(new Set(h)));
-  }, [h]), q(() => {
-    V(""), H(F), b(1);
+  }, 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);
   }, []);
-  const M = T(() => {
-    if (!j) return t;
+  const B = N(() => {
+    if (!j) return o;
     const e = C.size > 0 ? C : new Set(h);
-    return t.filter((r) => Array.from(e).some((d) => {
+    return o.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) => {
+  }, [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) => {
       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(","))
+      ...x.map((k) => D.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) => ({
+`), 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) => ({
       key: e,
       direction: r.key === e && r.direction === "asc" ? "desc" : "asc"
     }));
   }, re = (e) => {
-    D((r) => {
+    T((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) => {
+  }, 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;
     });
   };
-  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: [
+  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__ */ o(ce, { onClick: oe, children: "Export to CSV" })
+          /* @__PURE__ */ t(le, { onClick: oe, children: "Export to CSV" })
         ] })
       ] }),
-      /* @__PURE__ */ l(Se, { className: "jcTableControls", children: [
-        /* @__PURE__ */ l($e, { className: "jcTableSearchContainer", children: [
-          /* @__PURE__ */ o(ze, { customTheme: i }),
-          /* @__PURE__ */ o(
+      /* @__PURE__ */ a(Se, { className: "jcTableControls", children: [
+        /* @__PURE__ */ a($e, { className: "jcTableSearchContainer", children: [
+          /* @__PURE__ */ t(ze, { customTheme: s }),
+          /* @__PURE__ */ t(
             je,
             {
-              customTheme: i,
+              customTheme: s,
               type: "text",
               placeholder: "Search...",
               value: j,
@@ -432,90 +444,90 @@ const me = [
             }
           )
         ] }),
-        /* @__PURE__ */ l("div", { style: { position: "relative" }, children: [
-          /* @__PURE__ */ l(
-            Y,
+        /* @__PURE__ */ a("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ a(
+            W,
             {
-              customTheme: i,
+              customTheme: s,
               className: "jcTableSearchFields",
-              onClick: () => ee(!U),
+              onClick: () => ee(!R),
               children: [
-                /* @__PURE__ */ o(Q, { size: 16 }),
+                /* @__PURE__ */ t(K, { size: 16 }),
                 "Fields",
-                /* @__PURE__ */ o(_, { size: 16 })
+                /* @__PURE__ */ t(M, { size: 16 })
               ]
             }
           ),
-          U && /* @__PURE__ */ l(G, { className: "jcTableSearchFieldsDropdown", children: [
-            /* @__PURE__ */ l(L, { customTheme: i, onClick: ie, children: [
-              /* @__PURE__ */ o(
-                E,
+          R && /* @__PURE__ */ a(Y, { className: "jcTableSearchFieldsDropdown", children: [
+            /* @__PURE__ */ a(_, { customTheme: s, onClick: se, children: [
+              /* @__PURE__ */ t(
+                L,
                 {
-                  customTheme: i,
+                  customTheme: s,
                   type: "checkbox",
                   checked: C.size === h.length,
                   onChange: () => {
                   }
                 }
               ),
-              /* @__PURE__ */ o("span", { style: { fontWeight: "bold" }, children: "All" })
+              /* @__PURE__ */ t("span", { style: { fontWeight: "bold" }, children: "All" })
             ] }),
-            /* @__PURE__ */ o("div", { style: { height: "1px", backgroundColor: n.colors.gray4, margin: "4px 0" } }),
-            h.map((e) => /* @__PURE__ */ l(
-              L,
+            /* @__PURE__ */ t("div", { style: { height: "1px", backgroundColor: n.colors.gray4, margin: "4px 0" } }),
+            h.map((e) => /* @__PURE__ */ a(
+              _,
               {
-                customTheme: i,
+                customTheme: s,
                 onClick: () => re(e),
                 children: [
-                  /* @__PURE__ */ o(
-                    E,
+                  /* @__PURE__ */ t(
+                    L,
                     {
-                      customTheme: i,
+                      customTheme: s,
                       type: "checkbox",
                       checked: C.has(e),
                       onChange: () => {
                       }
                     }
                   ),
-                  /* @__PURE__ */ o("span", { children: y[e] || e })
+                  /* @__PURE__ */ t("span", { children: w[e] || e })
                 ]
               },
               e
             ))
           ] })
         ] }),
-        /* @__PURE__ */ l("div", { style: { position: "relative" }, children: [
-          /* @__PURE__ */ l(
-            Y,
+        /* @__PURE__ */ a("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ a(
+            W,
             {
-              customTheme: i,
+              customTheme: s,
               className: "jcTableColumnSettings",
-              onClick: () => P(!R),
+              onClick: () => Z(!O),
               children: [
-                /* @__PURE__ */ o(ye, { size: 16 }),
+                /* @__PURE__ */ t(we, { size: 16 }),
                 "Columns",
-                /* @__PURE__ */ o(_, { size: 16 })
+                /* @__PURE__ */ t(M, { size: 16 })
               ]
             }
           ),
-          R && /* @__PURE__ */ o(G, { className: "jcTableColumnSettingsDropdown", children: h.map((e) => /* @__PURE__ */ l(
-            L,
+          O && /* @__PURE__ */ t(Y, { className: "jcTableColumnSettingsDropdown", children: h.map((e) => /* @__PURE__ */ a(
+            _,
             {
-              customTheme: i,
-              onClick: () => se(e),
+              customTheme: s,
+              onClick: () => ie(e),
               children: [
-                /* @__PURE__ */ o(
-                  E,
+                /* @__PURE__ */ t(
+                  L,
                   {
-                    customTheme: i,
+                    customTheme: s,
                     type: "checkbox",
-                    checked: B.has(e),
+                    checked: F.has(e),
                     onChange: () => {
                     }
                   }
                 ),
-                B.has(e) ? /* @__PURE__ */ o(be, { size: 16 }) : /* @__PURE__ */ o(ge, { size: 16 }),
-                /* @__PURE__ */ o("span", { children: y[e] || e })
+                F.has(e) ? /* @__PURE__ */ t(me, { size: 16 }) : /* @__PURE__ */ t(ge, { size: 16 }),
+                /* @__PURE__ */ t("span", { children: w[e] || e })
               ]
             },
             e
@@ -523,39 +535,39 @@ const me = [
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ l(De, { className: "jcTableContent", children: [
-      /* @__PURE__ */ o("thead", { children: /* @__PURE__ */ o(J, { customTheme: i, interactableRow: !1, children: N.map((e) => /* @__PURE__ */ l(
-        Ne,
+    /* @__PURE__ */ a(Te, { className: "jcTableContent", children: [
+      /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ t(G, { customTheme: s, interactableRow: !1, children: D.map((e) => /* @__PURE__ */ a(
+        De,
         {
-          customTheme: i,
-          style: x.key === e ? f.thActive : {},
+          customTheme: s,
+          style: u.key === e ? f.thActive : {},
           onClick: () => ne(e),
           children: [
-            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 } }) })
+            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 } }) })
           ]
         },
         e
       )) }) }),
-      /* @__PURE__ */ o("tbody", { children: te.map((e, r) => /* @__PURE__ */ o(
-        J,
+      /* @__PURE__ */ t("tbody", { children: te.map((e, r) => /* @__PURE__ */ t(
+        G,
         {
-          customTheme: i,
+          customTheme: s,
           onClick: () => A && A(e),
           interactableRow: !!A,
-          children: N.map((d) => /* @__PURE__ */ o(Te, { children: e[d] }, d))
+          children: D.map((d) => /* @__PURE__ */ t(Ne, { children: e[d] }, d))
         },
         r
       )) })
     ] }),
-    /* @__PURE__ */ l(Be, { children: [
-      /* @__PURE__ */ o(
+    /* @__PURE__ */ a(Fe, { children: [
+      /* @__PURE__ */ t(
         v,
         {
-          customTheme: i,
-          style: c === 1 ? f.paginationButtonDisabled : {},
-          onClick: () => b(Math.max(1, c - 1)),
-          disabled: c === 1,
+          customTheme: s,
+          style: l === 1 ? f.paginationButtonDisabled : {},
+          onClick: () => m(Math.max(1, l - 1)),
+          disabled: l === 1,
           children: "Previous"
         }
       ),
@@ -564,12 +576,12 @@ const me = [
         if (p <= 5)
           for (let r = 1; r <= p; r++)
             e.push(
-              /* @__PURE__ */ o(
+              /* @__PURE__ */ t(
                 v,
                 {
-                  customTheme: i,
-                  style: c === r ? f.paginationButtonActive : {},
-                  onClick: () => b(r),
+                  customTheme: s,
+                  style: l === r ? f.paginationButtonActive : {},
+                  onClick: () => m(r),
                   children: r
                 },
                 r
@@ -577,38 +589,38 @@ const me = [
             );
         else {
           e.push(
-            /* @__PURE__ */ o(
+            /* @__PURE__ */ t(
               v,
               {
-                customTheme: i,
-                style: c === 1 ? f.paginationButtonActive : {},
-                onClick: () => b(1),
+                customTheme: s,
+                style: l === 1 ? f.paginationButtonActive : {},
+                onClick: () => m(1),
                 children: "1"
               },
               1
             )
-          ), c > 3 && e.push(/* @__PURE__ */ o(K, { children: "..." }, "ellipsis1"));
-          const r = Math.max(2, c - 1), d = Math.min(p - 1, c + 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++)
             e.push(
-              /* @__PURE__ */ o(
+              /* @__PURE__ */ t(
                 v,
                 {
-                  customTheme: i,
-                  style: c === g ? f.paginationButtonActive : {},
-                  onClick: () => b(g),
+                  customTheme: s,
+                  style: l === g ? f.paginationButtonActive : {},
+                  onClick: () => m(g),
                   children: g
                 },
                 g
               )
             );
-          c < p - 2 && e.push(/* @__PURE__ */ o(K, { children: "..." }, "ellipsis2")), p > 1 && e.push(
-            /* @__PURE__ */ o(
+          l < p - 2 && e.push(/* @__PURE__ */ t(J, { children: "..." }, "ellipsis2")), p > 1 && e.push(
+            /* @__PURE__ */ t(
               v,
               {
-                customTheme: i,
-                style: c === p ? f.paginationButtonActive : {},
-                onClick: () => b(p),
+                customTheme: s,
+                style: l === p ? f.paginationButtonActive : {},
+                onClick: () => m(p),
                 children: p
               },
               p
@@ -617,29 +629,29 @@ const me = [
         }
         return e;
       })(),
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ t(
         v,
         {
-          customTheme: i,
-          style: c === p ? f.paginationButtonDisabled : {},
-          onClick: () => b(Math.min(p, c + 1)),
-          disabled: c === p,
+          customTheme: s,
+          style: l === p ? f.paginationButtonDisabled : {},
+          onClick: () => m(Math.min(p, l + 1)),
+          disabled: l === p,
           children: "Next"
         }
       )
     ] }),
-    /* @__PURE__ */ l(Me, { children: [
+    /* @__PURE__ */ a(Be, { children: [
       "Showing ",
-      Math.min((c - 1) * w + 1, u.length),
+      Math.min((l - 1) * y + 1, x.length),
       " to",
       " ",
-      Math.min(c * w, u.length),
+      Math.min(l * y, x.length),
       " of ",
-      u.length,
+      x.length,
       " entries"
     ] })
   ] });
 };
 export {
-  Ue as default
+  Re as default
 };