jcicl 0.0.331 → 0.0.335

package/Table/Table.js

@@ -1,7 +1,8 @@
-import { jsxs as s, jsx as o } from "react/jsx-runtime";
-import je, { forwardRef as X, createElement as F, useState as y, useMemo as I } from "react";
-import N from "../theme.js";
-import { n as i } from "../.chunks/emotion-styled.browser.esm.js";
+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 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";
 /**
@@ -10,15 +11,15 @@ import { Flex as Ae } from "../Flex/Flex.js";
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Te = (n) => n.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), Ne = (n) => n.replace(
+const Te = (r) => r.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), Ne = (r) => r.replace(
   /^([A-Z])|[\s-_]+(\w)/g,
-  (r, l, u) => u ? u.toUpperCase() : l.toLowerCase()
-), G = (n) => {
-  const r = Ne(n);
-  return r.charAt(0).toUpperCase() + r.slice(1);
-}, P = (...n) => n.filter((r, l, u) => !!r && r.trim() !== "" && u.indexOf(r) === l).join(" ").trim(), Be = (n) => {
-  for (const r in n)
-    if (r.startsWith("aria-") || r === "role" || r === "title")
+  (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;
 };
 /**
@@ -44,32 +45,32 @@ var De = {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ie = X(
+const _e = P(
   ({
-    color: n = "currentColor",
-    size: r = 24,
-    strokeWidth: l = 2,
-    absoluteStrokeWidth: u,
-    className: m = "",
-    children: g,
-    iconNode: _,
-    ...z
-  }, a) => F(
+    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: r,
-      height: r,
-      stroke: n,
-      strokeWidth: u ? Number(l) * 24 / Number(r) : l,
-      className: P("lucide", m),
-      ...!g && !Be(z) && { "aria-hidden": "true" },
-      ...z
+      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
     },
     [
-      ..._.map(([b, M]) => F(b, M)),
-      ...Array.isArray(g) ? g : [g]
+      ...M.map(([m, E]) => R(m, E)),
+      ...Array.isArray(w) ? w : [w]
     ]
   )
 );
@@ -79,20 +80,20 @@ const Ie = X(
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const j = (n, r) => {
-  const l = X(
-    ({ className: u, ...m }, g) => F(Ie, {
-      ref: g,
-      iconNode: r,
-      className: P(
-        `lucide-${Te(G(n))}`,
-        `lucide-${n}`,
-        u
+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
       ),
-      ...m
+      ...y
     })
   );
-  return l.displayName = G(n), l;
+  return p.displayName = J(r), p;
 };
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -100,14 +101,14 @@ const j = (n, r) => {
  * 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" }]], $ = j("chevron-down", _e);
+const Me = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], G = z("chevron-down", 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 Me = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]], J = j("chevron-up", Me);
+const Ee = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]], Q = z("chevron-up", Ee);
 /**
  * @license lucide-react v0.525.0 - ISC
  *
@@ -131,14 +132,14 @@ const Le = [
     }
   ],
   ["path", { d: "m2 2 20 20", key: "1ooewy" }]
-], Re = j("eye-off", Le);
+], Fe = z("eye-off", 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 Ee = [
+const Ie = [
   [
     "path",
     {
@@ -147,24 +148,24 @@ const Ee = [
     }
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
-], We = j("eye", Ee);
+], Ve = z("eye", Ie);
 /**
  * @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 = [
+const Ge = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-], Q = j("search", $e);
+], X = z("search", 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 Fe = [
+const Re = [
   [
     "path",
     {
@@ -173,74 +174,74 @@ const Fe = [
     }
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
-], Ve = j("settings", Fe);
-let v = "";
-const Ze = ({
-  data: n = [],
-  columnTitles: r = {},
-  rowsPerPage: l = 19,
-  title: u = "Data Table",
-  onRowClick: m,
-  hiddenColumns: g = [],
-  defaultSort: _ = { key: "", direction: "asc" },
-  extraActions: z
+], 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
 }) => {
-  const [a, b] = y(1), [, M] = y(""), [h, ee] = y(_), [w, B] = y(/* @__PURE__ */ new Set()), [L, V] = y(/* @__PURE__ */ new Set()), [U, oe] = y(!1), [H, te] = y(!1), d = I(() => n.length === 0 ? [] : Object.keys(n[0]).filter((e) => !g.includes(e)), [n]);
+  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(() => {
-    d.length > 0 && (V(new Set(d)), B(new Set(d)));
-  }, [d]);
-  const R = I(() => {
-    if (!v) return n;
-    const e = w.size > 0 ? w : new Set(d);
-    return n.filter((t) => Array.from(e).some((c) => {
-      const f = t[c];
-      return f && f.toString().toLowerCase().includes(v.toLowerCase());
+    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());
     }));
-  }, [n, v, w, d]), x = I(() => h.key ? [...R].sort((e, t) => e[h.key] < t[h.key] ? h.direction === "asc" ? -1 : 1 : e[h.key] > t[h.key] ? h.direction === "asc" ? 1 : -1 : 0) : R, [R, h]), D = d.filter((e) => L.has(e)), ne = () => {
-    if (!Array.isArray(x) || x.length === 0) return;
-    const e = D.map((k) => r[k] || k), t = (k) => {
-      const T = String(k ?? "");
-      return /[",\n]/.test(T) ? `"${T.replace(/"/g, '""')}"` : T;
-    }, f = [
+  }, [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 = [
       e.join(","),
       // header row
-      ...x.map((k) => D.map((T) => t(k[T])).join(","))
+      ...b.map(($) => D.map((N) => n($[N])).join(","))
     ].join(`
-`), ve = new Blob([f], { type: "text/csv;charset=utf-8;" }), A = document.createElement("a");
-    A.href = URL.createObjectURL(ve), A.download = "data.csv", document.body.appendChild(A), A.click(), document.body.removeChild(A);
-  }, re = I(() => {
-    const e = (a - 1) * l;
-    return x.slice(e, e + l);
-  }, [x, a, l]), p = Math.ceil(x.length / l), ie = (e) => {
-    ee((t) => ({
+`), $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) => ({
       key: e,
-      direction: t.key === e && t.direction === "asc" ? "desc" : "asc"
+      direction: n.key === e && n.direction === "asc" ? "desc" : "asc"
     }));
-  }, ae = (e) => {
-    B((t) => {
-      const c = new Set(t);
-      return c.has(e) ? c.delete(e) : c.add(e), c;
-    });
-  }, se = () => {
-    w.size === d.length ? B(/* @__PURE__ */ new Set()) : B(new Set(d));
   }, ce = (e) => {
-    V((t) => {
-      const c = new Set(t);
-      return c.has(e) ? c.delete(e) : c.add(e), c;
+    B((n) => {
+      const d = new Set(n);
+      return d.has(e) ? d.delete(e) : d.add(e), d;
     });
+  }, ae = () => {
+    v.size === h.length ? B(/* @__PURE__ */ new Set()) : B(new Set(h));
   }, le = (e) => {
-    v = e;
-  }, O = () => {
-    M(v);
-  }, C = {
+    U((n) => {
+      const d = new Set(n);
+      return d.has(e) ? d.delete(e) : d.add(e), d;
+    });
+  }, de = (e) => {
+    j = e;
+  }, H = () => {
+    E(j);
+  }, k = {
     thActive: {
-      backgroundColor: N.colors.green,
-      color: N.colors.white
+      backgroundColor: o.colors.green,
+      color: o.colors.white
     },
     paginationButtonActive: {
-      backgroundColor: N.colors.green,
-      color: N.colors.white,
-      borderColor: N.colors.green
+      backgroundColor: o.colors.green,
+      color: o.colors.white,
+      borderColor: o.colors.green
     },
     paginationButtonDisabled: {
       opacity: 0.5,
@@ -248,382 +249,438 @@ const Ze = ({
     },
     info: {
       fontSize: "14px",
-      color: "#666666",
+      color: o.colors.gray3,
       textAlign: "center",
       marginTop: "10px"
     }
-  }, de = i("div")({
-    backgroundColor: "#ffffff",
-    borderRadius: "8px",
-    boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
-    padding: "20px",
-    fontFamily: "Arial, sans-serif",
-    width: "100%",
-    overflow: "auto"
-  }), pe = i("div")({
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "space-between",
-    alignItems: "center",
-    marginBottom: "20px",
-    flexWrap: "wrap",
-    gap: "9px"
-  }), he = i("div")({
-    display: "flex",
-    justifyContent: "space-between",
-    width: "100%",
-    alignItems: "center"
-  }), fe = i("h2")({
-    fontSize: "24px",
-    fontWeight: "bold",
-    color: "#000000",
-    margin: 0
-  }), ue = i("div")({
-    display: "flex",
-    justifyContent: "flex-end",
-    width: "100%",
-    gap: "15px",
-    alignItems: "center",
-    flexWrap: "wrap"
-  }), xe = i("div")({
-    position: "relative",
-    display: "flex",
-    alignItems: "center",
-    flexGrow: 1
-  }), ge = i(Q)({
-    position: "absolute",
-    left: "13px",
-    top: "10px",
-    color: "#666666",
-    width: "19px",
-    height: "19px",
-    transition: "all 313ms ease",
-    "&:focus, &:hover, &:focus-within": {
-      cursor: "pointer",
-      color: "#009200"
-    }
-  }), be = i("input")({
-    padding: "10px 15px 10px 40px",
-    border: "2px solid #e0e0e0",
-    borderRadius: "25px",
-    fontSize: "14px",
-    minWidth: "270px",
-    width: "100%",
-    transition: "all 313ms ease",
-    outline: "none",
-    backgroundColor: "#ffffff",
-    "&:focus, &:hover, &:focus-within": {
-      borderColor: "#009200",
-      boxShadow: "0 0 0 3px rgba(0, 146, 0, 0.1)"
-    }
-  }), q = i("button")({
-    padding: "10px 15px",
-    border: "2px solid #009200",
-    borderRadius: "6px",
-    backgroundColor: "#ffffff",
-    color: "#009200",
-    cursor: "pointer",
-    display: "flex",
-    alignItems: "center",
-    gap: "8px",
-    fontSize: "14px",
-    fontWeight: "500",
-    transition: "all 0.3s ease",
-    outline: "none",
-    "&:focus, &:hover, &:focus-within": {
-      backgroundColor: "#009200",
-      color: "#ffffff",
-      transform: "translateY(-1px)",
-      boxShadow: "0 4px 12px rgba(0, 146, 0, 0.3)"
-    }
-  }), K = i("div")({
-    position: "absolute",
-    top: "100%",
-    right: 0,
-    marginTop: "5px",
-    backgroundColor: "#ffffff",
-    border: "1px solid #e0e0e0",
-    borderRadius: "6px",
-    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-    zIndex: 1e3,
-    minWidth: "200px",
-    maxHeight: "300px",
-    overflowY: "auto"
-  }), E = i("div")({
-    padding: "12px 16px",
-    display: "flex",
-    alignItems: "center",
-    gap: "10px",
-    cursor: "pointer",
-    fontSize: "14px",
-    color: "#333333",
-    transition: "all 0.2s ease",
-    "&:focus, &:hover, &:focus-within": {
-      backgroundColor: "#f0f8f0",
-      color: "#005c00"
-    }
-  }), W = i("input")({
-    width: "16px",
-    height: "16px",
-    accentColor: "#009200"
-  }), me = i("table")({
-    width: "100%",
-    borderCollapse: "collapse",
-    backgroundColor: "#ffffff",
-    borderRadius: "8px",
-    overflow: "hidden",
-    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)"
-  }), Ce = i("th")({
-    backgroundColor: "#f8f9fa",
-    color: "#333333",
-    padding: "16px 12px",
-    textAlign: "left",
-    fontSize: "14px",
-    fontWeight: "600",
-    borderBottom: "2px solid #e0e0e0",
-    cursor: "pointer",
-    userSelect: "none",
-    transition: "all 0.2s ease",
-    position: "relative",
-    whiteSpace: "nowrap",
-    "&:focus, &:hover, &:focus-within": {
-      backgroundColor: "#e8f5e8",
-      color: "#005c00"
-    }
-  }), ye = i("td")({
-    padding: "14px 12px",
-    borderBottom: "1px solid #f0f0f0",
-    fontSize: "14px",
-    color: "#333333",
-    transition: "all 0.2s ease"
-  }), we = i("span")({
-    marginLeft: "8px",
-    opacity: 0.6
-  }), Y = i("tr")(({ interactableRow: e }) => ({
-    transition: "all 0.2s ease",
-    ...e && {
-      "&:focus, &:hover, &:focus-within": {
-        backgroundColor: "#f8fff8",
-        cursor: "pointer"
+  }, 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};
       }
-    }
-  })), Se = i("div")({
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    marginTop: "20px",
-    gap: "10px"
-  }), S = i("button")({
-    padding: "8px 12px",
-    border: "1px solid #e0e0e0",
-    borderRadius: "4px",
-    backgroundColor: "#ffffff",
-    color: "#333333",
-    cursor: "pointer",
-    fontSize: "14px",
-    transition: "all 0.2s ease",
-    outline: "none",
-    "&:focus, &:hover, &:focus-within": {
-      backgroundColor: "#009200",
-      color: "#ffffff",
-      borderColor: "#009200"
-    },
-    "&:disabled": {
-      opacity: 0.5,
-      cursor: "not-allowed"
-    }
-  }), ke = i("div")({
-    fontSize: "14px",
-    color: "#666666",
-    textAlign: "center",
-    marginTop: "10px"
-  }), Z = i("span")({
-    padding: "8px 4px",
-    color: "#666666",
-    fontSize: "14px"
-  });
-  return /* @__PURE__ */ s(de, { className: "jcTableContainer", children: [
-    /* @__PURE__ */ s(pe, { className: "jcTableHeader", children: [
-      /* @__PURE__ */ s(he, { className: "jcTableTitleAndActions", children: [
-        /* @__PURE__ */ o(fe, { children: u }),
-        /* @__PURE__ */ s(Ae, { className: "jcTableExtraComponentsBox", gap: "9px", children: [
-          z && z,
-          /* @__PURE__ */ o(ze, { onClick: ne, children: "Export to CSV" })
+    `
+  })), 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" })
         ] })
       ] }),
-      /* @__PURE__ */ s(ue, { className: "jcTableControls", children: [
-        /* @__PURE__ */ s(xe, { className: "jcTableSearchContainer", children: [
-          /* @__PURE__ */ o(ge, { onClick: O }),
-          /* @__PURE__ */ o(
-            be,
+      /* @__PURE__ */ l(xe, { className: "jcTableControls", children: [
+        /* @__PURE__ */ l(fe, { className: "jcTableSearchContainer", children: [
+          /* @__PURE__ */ t(be, { onClick: H }),
+          /* @__PURE__ */ t(
+            we,
             {
               type: "text",
               placeholder: "Search...",
-              defaultValue: v,
-              onChange: (e) => le(e.target.value),
+              defaultValue: j,
+              onChange: (e) => de(e.target.value),
               onKeyDown: (e) => {
-                e.key === "Enter" && O();
+                e.key === "Enter" && H();
               }
             }
           )
         ] }),
-        /* @__PURE__ */ s("div", { style: { position: "relative" }, children: [
-          /* @__PURE__ */ s(
+        /* @__PURE__ */ l("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ l(
             q,
             {
               className: "jcTableSearchFields",
-              onClick: () => te(!H),
+              onClick: () => ne(!W),
               children: [
-                /* @__PURE__ */ o(Q, { size: 16 }),
+                /* @__PURE__ */ t(X, { size: 16 }),
                 "Fields",
-                /* @__PURE__ */ o($, { size: 16 })
+                /* @__PURE__ */ t(G, { size: 16 })
               ]
             }
           ),
-          H && /* @__PURE__ */ s(K, { className: "jcTableSearchFieldsDropdown", children: [
-            /* @__PURE__ */ s(E, { onClick: se, children: [
-              /* @__PURE__ */ o(
-                W,
+          W && /* @__PURE__ */ l(K, { className: "jcTableSearchFieldsDropdown", children: [
+            /* @__PURE__ */ l(I, { onClick: ae, children: [
+              /* @__PURE__ */ t(
+                V,
                 {
                   type: "checkbox",
-                  checked: w.size === d.length,
+                  checked: v.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: "#e0e0e0", margin: "4px 0" } }),
-            d.map((e) => /* @__PURE__ */ s(E, { onClick: () => ae(e), children: [
-              /* @__PURE__ */ o(W, { type: "checkbox", checked: w.has(e), onChange: () => {
+            /* @__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: () => {
               } }),
-              /* @__PURE__ */ o("span", { children: r[e] || e })
+              /* @__PURE__ */ t("span", { children: s[e] || e })
             ] }, e))
           ] })
         ] }),
-        /* @__PURE__ */ s("div", { style: { position: "relative" }, children: [
-          /* @__PURE__ */ s(
+        /* @__PURE__ */ l("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ l(
             q,
             {
               className: "jcTableColumnSettings",
-              onClick: () => oe(!U),
+              onClick: () => te(!O),
               children: [
-                /* @__PURE__ */ o(Ve, { size: 16 }),
+                /* @__PURE__ */ t(Ue, { size: 16 }),
                 "Columns",
-                /* @__PURE__ */ o($, { size: 16 })
+                /* @__PURE__ */ t(G, { size: 16 })
               ]
             }
           ),
-          U && /* @__PURE__ */ o(K, { className: "jcTableColumnSettingsDropdown", children: d.map((e) => /* @__PURE__ */ s(E, { onClick: () => ce(e), children: [
-            /* @__PURE__ */ o(W, { type: "checkbox", checked: L.has(e), onChange: () => {
+          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: () => {
             } }),
-            L.has(e) ? /* @__PURE__ */ o(We, { size: 16 }) : /* @__PURE__ */ o(Re, { size: 16 }),
-            /* @__PURE__ */ o("span", { children: r[e] || e })
+            L.has(e) ? /* @__PURE__ */ t(Ve, { size: 16 }) : /* @__PURE__ */ t(Fe, { size: 16 }),
+            /* @__PURE__ */ t("span", { children: s[e] || e })
           ] }, e)) })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ s(me, { className: "jcTableContent", children: [
-      /* @__PURE__ */ o("thead", { children: /* @__PURE__ */ o(Y, { interactableRow: !1, children: D.map((e) => /* @__PURE__ */ s(
-        Ce,
+    /* @__PURE__ */ l(me, { className: "jcTableContent", children: [
+      /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ t(Z, { interactableRow: !1, children: D.map((e) => /* @__PURE__ */ l(
+        ye,
         {
-          style: h.key === e ? C.thActive : {},
+          style: u.key === e ? k.thActive : {},
           onClick: () => ie(e),
           children: [
-            r[e] || e,
-            /* @__PURE__ */ o(we, { children: h.key === e ? h.direction === "asc" ? /* @__PURE__ */ o(J, { size: 16 }) : /* @__PURE__ */ o($, { size: 16 }) : /* @__PURE__ */ o(J, { size: 16, style: { opacity: 0.313 } }) })
+            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
       )) }) }),
-      /* @__PURE__ */ o("tbody", { children: re.map((e, t) => /* @__PURE__ */ o(Y, { onClick: () => m && m(e), interactableRow: !!m, children: D.map((c) => /* @__PURE__ */ o(ye, { children: e[c] }, c)) }, t)) })
+      /* @__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__ */ s(Se, { children: [
-      /* @__PURE__ */ o(
+    /* @__PURE__ */ l(ve, { children: [
+      /* @__PURE__ */ t(
         S,
         {
-          style: a === 1 ? C.paginationButtonDisabled : {},
-          onClick: () => b(Math.max(1, a - 1)),
+          style: a === 1 ? k.paginationButtonDisabled : {},
+          onClick: () => m(Math.max(1, a - 1)),
           disabled: a === 1,
           children: "Previous"
         }
       ),
       (() => {
         const e = [];
-        if (p <= 5)
-          for (let t = 1; t <= p; t++)
+        if (g <= 5)
+          for (let n = 1; n <= g; n++)
             e.push(
-              /* @__PURE__ */ o(
+              /* @__PURE__ */ t(
                 S,
                 {
-                  style: a === t ? C.paginationButtonActive : {},
-                  onClick: () => b(t),
-                  children: t
+                  style: a === n ? k.paginationButtonActive : {},
+                  onClick: () => m(n),
+                  children: n
                 },
-                t
+                n
               )
             );
         else {
           e.push(
-            /* @__PURE__ */ o(
+            /* @__PURE__ */ t(
               S,
               {
-                style: a === 1 ? C.paginationButtonActive : {},
-                onClick: () => b(1),
+                style: a === 1 ? k.paginationButtonActive : {},
+                onClick: () => m(1),
                 children: "1"
               },
               1
             )
-          ), a > 3 && e.push(/* @__PURE__ */ o(Z, { children: "..." }, "ellipsis1"));
-          const t = Math.max(2, a - 1), c = Math.min(p - 1, a + 1);
-          for (let f = t; f <= c; f++)
+          ), 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++)
             e.push(
-              /* @__PURE__ */ o(
+              /* @__PURE__ */ t(
                 S,
                 {
-                  style: a === f ? C.paginationButtonActive : {},
-                  onClick: () => b(f),
-                  children: f
+                  style: a === x ? k.paginationButtonActive : {},
+                  onClick: () => m(x),
+                  children: x
                 },
-                f
+                x
               )
             );
-          a < p - 2 && e.push(/* @__PURE__ */ o(Z, { children: "..." }, "ellipsis2")), p > 1 && e.push(
-            /* @__PURE__ */ o(
+          a < g - 2 && e.push(/* @__PURE__ */ t(Y, { children: "..." }, "ellipsis2")), g > 1 && e.push(
+            /* @__PURE__ */ t(
               S,
               {
-                style: a === p ? C.paginationButtonActive : {},
-                onClick: () => b(p),
-                children: p
+                style: a === g ? k.paginationButtonActive : {},
+                onClick: () => m(g),
+                children: g
               },
-              p
+              g
             )
           );
         }
         return e;
       })(),
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ t(
         S,
         {
-          style: a === p ? C.paginationButtonDisabled : {},
-          onClick: () => b(Math.min(p, a + 1)),
-          disabled: a === p,
+          style: a === g ? k.paginationButtonDisabled : {},
+          onClick: () => m(Math.min(g, a + 1)),
+          disabled: a === g,
           children: "Next"
         }
       )
     ] }),
-    /* @__PURE__ */ s(ke, { children: [
+    /* @__PURE__ */ l(Se, { children: [
       "Showing ",
-      Math.min((a - 1) * l + 1, x.length),
+      Math.min((a - 1) * p + 1, b.length),
       " to",
       " ",
-      Math.min(a * l, x.length),
+      Math.min(a * p, b.length),
       " of ",
-      x.length,
+      b.length,
       " entries"
     ] })
   ] });
 };
 export {
-  Ze as default
+  Je as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jcicl",
   "private": false,
-  "version": "0.0.331",
+  "version": "0.0.335",
   "description": "Component library for the websites of Johnson County Iowa",
   "license": "MIT",
   "homepage": "https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_git/JCComponentLibrary?path=%2FREADME.md&version=GBmaster",

package/theme.d.ts

@@ -1,4 +1,5 @@
 export interface ThemeColors {
+    almostWhite: string;
     bibiBlue: string;
     bibiBlueHover: string;
     black: string;
@@ -18,11 +19,13 @@ export interface ThemeColors {
     emerald: string;
     formBorder: string;
     gold: string;
+    goldBrown: string;
     goldHover: string;
     gold2: string;
     gray: string;
     gray2: string;
     gray3: string;
+    gray4: string;
     grayO44: string;
     green: string;
     indigo: string;
@@ -41,6 +44,7 @@ export interface ThemeColors {
     qalb: string;
     sage: string;
     sky: string;
+    slate: string;
     sunlight: string;
     veryLightGray: string;
     veryLightGrayO33: string;
@@ -48,6 +52,10 @@ export interface ThemeColors {
     white: string;
     whiteGreen: string;
     whiteGreenA: string;
+    whiteGreenB: string;
+    whiteGreenC: string;
+    whiteGreenD: string;
+    whiteBlue: string;
 }
 export interface ThemeBoxShadows extends Partial<ThemeColors> {
     black63?: string;

package/theme.js

@@ -4,6 +4,7 @@ const a = {
   },
   boxShadows: {},
   colors: {
+    almostWhite: "#f0f0f0",
     bibiBlue: "#009dde",
     bibiBlueHover: "#0088c0",
     black: "black",
@@ -23,11 +24,13 @@ const a = {
     emerald: "#004d24",
     formBorder: "rgb(114,114,114)",
     gold: "#fab62d",
+    goldBrown: "#85611b",
     goldHover: "#e0a022",
     gold2: "#fcba03",
     gray: "#727272",
     gray2: "#dddddd",
     gray3: "#666666",
+    gray4: "#e0e0e0",
     grayO44: "#72727244",
     green: "#009200",
     indigo: "#4105c1",
@@ -46,13 +49,18 @@ const a = {
     qalb: "#c90909",
     sage: "#bdd5c1",
     sky: "#b3e0f2",
+    slate: "#333333",
     sunlight: "#faf9e8",
     veryLightGray: "#fafafa",
     veryLightGrayO33: "#fafafa33",
     violet: "#c1a7e2",
     white: "white",
     whiteGreen: "#f2fcf5",
-    whiteGreenA: "#dae8de"
+    whiteGreenA: "#dae8de",
+    whiteGreenB: "#f0f8f0",
+    whiteGreenC: "#e8f5e8",
+    whiteGreenD: "#f8fff8",
+    whiteBlue: "#f8f9fa"
   },
   constants: {
     appHeaderHeight: 58,