qaema-ui 0.0.60 → 0.0.62

package/dist/components/Badge.js

@@ -38,7 +38,7 @@ const u = i.div`
   const t = g(d ?? "default");
   return /* @__PURE__ */ e.jsxs(u, { bgColor: r, $variantStyles: t, children: [
     n && /* @__PURE__ */ e.jsx(f, { src: n, alt: "badge-image" }),
-    s && /* @__PURE__ */ e.jsx(m, { variant: "span", color: o ?? t.color, weight: c, children: s }),
+    s && /* @__PURE__ */ e.jsx(m, { variant: "span", color: o ?? t.color, weight: c ?? "semiBold", children: s }),
     l,
     a && /* @__PURE__ */ e.jsx(h, { onClick: a, $variantStyles: t, children: /* @__PURE__ */ e.jsx(p, { color: o ?? t.color, size: "0.75rem" }) })
   ] });

package/dist/components/DropDownWithTable/Table/Table.js

@@ -6,28 +6,28 @@ import Y from "../../Pagination.js";
 import Z from "../../Typography.js";
 import O, { CheckboxCell as H } from "./components/CellComponents.js";
 import z from "./components/TableHead.js";
-import { TableContainer as D, LoadingOverlay as k, TablesWrapper as F, DataScrollBox as R, StyledTable as w, TableBody as W, EmptyState as ee, TableRow as y, TableCellContainer as b, ActionsTable as te, TableFooter as ne } from "./Table.styles.js";
+import { TableContainer as D, LoadingOverlay as k, TablesWrapper as F, DataScrollBox as R, StyledTable as w, TableBody as W, EmptyState as ee, TableRow as y, TableCellContainer as b, ActionsTable as te, TableFooter as se } from "./Table.styles.js";
 function xe({
   columns: T,
-  data: n,
+  data: s,
   keyField: l,
   selectable: j = !1,
-  onRowSelect: m,
+  onRowSelect: o,
   rowActions: x,
   stickyHeader: $ = !1,
   loading: f = !1,
   emptyStateMessage: I,
-  pagination: s,
+  pagination: n,
   onRowClick: u,
   rowClassName: p,
   isRowDisabled: d,
-  breakpoint: _ = "md",
+  breakpoint: N = "md",
   alignHeader: C = "start",
   // Dropdown related props
-  isTableHeadVisible: K = !1,
+  isTableHeadVisible: _ = !1,
   isRowSelected: S
 }) {
-  const [h, g] = v([]), [B, P] = v(_), [M, A] = v(null), { t: N } = U();
+  const [h, g] = v([]), [B, a] = v(N), [K, A] = v(null), { t: M } = U();
   L(() => {
     const e = () => {
       A(null);
@@ -38,31 +38,31 @@ function xe({
   }, []), L(() => {
     const e = () => {
       const i = window.innerWidth;
-      i < 576 ? P("sm") : i < 992 ? P("md") : P("lg");
+      i < 576 ? a("sm") : i < 992 ? a("md") : a("lg");
     };
     return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
   }, []);
-  const a = Q(() => T.filter((e) => typeof e.hidden == "function" ? !e.hidden(B) : !e.hidden), [T, B]), V = () => {
-    h.length === n.length ? g([]) : g([...n]), m && m(h.length === n.length ? [] : [...n]);
+  const P = Q(() => T.filter((e) => typeof e.hidden == "function" ? !e.hidden(B) : !e.hidden), [T, B]), V = () => {
+    h.length === s.length ? g([]) : g([...s]), o && o(h.length === s.length ? [] : [...s]);
   }, q = (e) => {
     const i = h.filter((r) => e[l] === r[l]);
     return i && i.length > 0;
   }, G = (e) => {
-    const i = h.some((o) => o[l] === e[l]);
+    const i = h.some((m) => m[l] === e[l]);
     let r;
-    i ? r = h.filter((o) => o[l] !== e[l]) : r = [...h, e], g(r), m && m(r);
+    i ? r = h.filter((m) => m[l] !== e[l]) : r = [...h, e], g(r), o && o(r);
   };
   return /* @__PURE__ */ t.jsxs(D, { children: [
     f && /* @__PURE__ */ t.jsx(k, { children: /* @__PURE__ */ t.jsx(X, { size: "3rem" }) }),
     /* @__PURE__ */ t.jsxs(F, { children: [
       /* @__PURE__ */ t.jsx(R, { children: /* @__PURE__ */ t.jsxs(w, { children: [
-        K && /* @__PURE__ */ t.jsx(
+        _ && /* @__PURE__ */ t.jsx(
           z,
           {
-            data: n,
+            data: s,
             handleSelectAll: V,
             selectedRows: h,
-            visibleColumns: a,
+            visibleColumns: P,
             alignHeader: C,
             rowActions: void 0,
             stickyHeader: $,
@@ -70,12 +70,12 @@ function xe({
             loading: f
           }
         ),
-        /* @__PURE__ */ t.jsx(W, { children: n.length === 0 ? /* @__PURE__ */ t.jsx("tr", { children: /* @__PURE__ */ t.jsx("td", { colSpan: (j ? 1 : 0) + a.length, children: /* @__PURE__ */ t.jsx(ee, { children: /* @__PURE__ */ t.jsx(Z, { variant: "mdText", children: I ?? N("NO_DATA_AVAILABLE") }) }) }) }) : n == null ? void 0 : n.map((e, i) => {
-          const r = (d == null ? void 0 : d(e)) ?? !1, o = S ? S(e) : h.some((c) => c[l] === e[l]), E = e[l], J = (p == null ? void 0 : p(e, i)) ?? "";
+        /* @__PURE__ */ t.jsx(W, { children: s.length === 0 ? /* @__PURE__ */ t.jsx("tr", { children: /* @__PURE__ */ t.jsx("td", { colSpan: (j ? 1 : 0) + P.length, children: /* @__PURE__ */ t.jsx(ee, { children: /* @__PURE__ */ t.jsx(Z, { variant: "mdText", children: I ?? M("NO_DATA_AVAILABLE") }) }) }) }) : s == null ? void 0 : s.map((e, i) => {
+          const r = (d == null ? void 0 : d(e)) ?? !1, m = S ? S(e) : h.some((c) => c[l] === e[l]), E = e[l], J = (p == null ? void 0 : p(e, i)) ?? "";
           return /* @__PURE__ */ t.jsxs(
             y,
             {
-              $selected: o,
+              $selected: m,
               $disabled: r,
               $clickable: !!u && !r,
               onClick: () => !r && (u == null ? void 0 : u(e)),
@@ -93,13 +93,14 @@ function xe({
                     }
                   }
                 ) }),
-                a.map((c) => /* @__PURE__ */ t.jsx(b, { $align: c.align, children: /* @__PURE__ */ t.jsx(
+                P.map((c) => /* @__PURE__ */ t.jsx(b, { $align: c.align, children: /* @__PURE__ */ t.jsx(
                   O,
                   {
                     column: c,
                     row: e,
                     type: c.cellType ?? "text",
                     align: c.align,
+                    className: c.className,
                     width: c.width ?? "",
                     minWidth: c.minWidth ?? "",
                     maxWidth: c.maxWidth ?? ""
@@ -115,7 +116,7 @@ function xe({
         /* @__PURE__ */ t.jsx(
           z,
           {
-            data: n,
+            data: s,
             handleSelectAll: () => {
             },
             selectedRows: h,
@@ -127,7 +128,7 @@ function xe({
             loading: f
           }
         ),
-        /* @__PURE__ */ t.jsx(W, { children: n.length === 0 ? /* @__PURE__ */ t.jsx("tr", { children: /* @__PURE__ */ t.jsx("td", { children: /* @__PURE__ */ t.jsx("div", { style: { height: "3.5rem" } }) }) }) : n == null ? void 0 : n.map((e) => {
+        /* @__PURE__ */ t.jsx(W, { children: s.length === 0 ? /* @__PURE__ */ t.jsx("tr", { children: /* @__PURE__ */ t.jsx("td", { children: /* @__PURE__ */ t.jsx("div", { style: { height: "3.5rem" } }) }) }) : s == null ? void 0 : s.map((e) => {
           const i = (d == null ? void 0 : d(e)) ?? !1;
           return /* @__PURE__ */ t.jsx(y, { $disabled: i, children: /* @__PURE__ */ t.jsx(b, { $align: "center", $isActionCell: !0, children: /* @__PURE__ */ t.jsx(
             O,
@@ -137,7 +138,7 @@ function xe({
               iconOptions: {
                 keyField: l,
                 rowActions: x,
-                activeDropdown: M,
+                activeDropdown: K,
                 setActiveDropdown: A
               }
             }
@@ -145,21 +146,21 @@ function xe({
         }) })
       ] })
     ] }),
-    s && s.enabled && /* @__PURE__ */ t.jsx(ne, { children: /* @__PURE__ */ t.jsx(
+    n && n.enabled && /* @__PURE__ */ t.jsx(se, { children: /* @__PURE__ */ t.jsx(
       Y,
       {
-        currentPage: s.currentPage,
-        totalPages: s.totalPages,
-        onChange: s.onPageChange,
+        currentPage: n.currentPage,
+        totalPages: n.totalPages,
+        onChange: n.onPageChange,
         disabled: f,
-        hidePrevButton: s.hidePrevButton,
-        hideNextButton: s.hideNextButton,
-        siblingCount: s.siblingCount,
-        boundaryCount: s.boundaryCount,
-        itemsPerPage: s.pageSize,
-        totalItems: s.totalItems,
-        itemsPerPageOptions: s.itemsPerPageOptions,
-        onItemsPerPageChange: s.onItemsPerPageChange
+        hidePrevButton: n.hidePrevButton,
+        hideNextButton: n.hideNextButton,
+        siblingCount: n.siblingCount,
+        boundaryCount: n.boundaryCount,
+        itemsPerPage: n.pageSize,
+        totalItems: n.totalItems,
+        itemsPerPageOptions: n.itemsPerPageOptions,
+        onItemsPerPageChange: n.onItemsPerPageChange
       }
     ) })
   ] });

package/dist/components/DropDownWithTable/Table/Table.types.d.ts

@@ -4,6 +4,7 @@ export type TableColumn<T> = {
     id: string;
     header: string | React.ReactNode;
     accessor: keyof T | ((row: T) => React.ReactNode);
+    className?: string;
     width?: string;
     minWidth?: string;
     maxWidth?: string;

package/dist/components/PageHeader.js

@@ -18,21 +18,21 @@ const p = r.div`
 `, d = r.div`
   display: flex;
   align-items: center;
-`, u = ({ onHeaderBack: e, headerTitle: o, withRightIcon: s }) => {
-  const a = c().dir === "rtl", i = s;
+`, u = ({ onHeaderBack: e, headerTitle: s, withRightIcon: o }) => {
+  const a = c().dir === "rtl", i = o;
   return /* @__PURE__ */ t.jsxs(p, { children: [
     /* @__PURE__ */ t.jsxs(d, { children: [
       e && /* @__PURE__ */ t.jsx(
         n,
         {
-          icon: /* @__PURE__ */ t.jsx(m, { style: a ? { transform: "rotate(180deg)" } : {} }),
+          icon: /* @__PURE__ */ t.jsx(m, { style: a ? { transform: "rotate(180deg)" } : {}, size: 20 }),
           onClick: e,
           onlyIcon: !0,
           size: "md",
           variant: "outline-primary"
         }
       ),
-      /* @__PURE__ */ t.jsx(l, { variant: "h3", children: o })
+      /* @__PURE__ */ t.jsx(l, { variant: "h3", children: s })
     ] }),
     i && /* @__PURE__ */ t.jsx(n, { icon: /* @__PURE__ */ t.jsx(i, {}), onClick: e, onlyIcon: !0, size: "md", variant: "outline-primary" })
   ] });

package/dist/components/SearchBar.js

@@ -1,12 +1,12 @@
 import { j as n } from "../_virtual/jsx-runtime.js";
 import { useState as c } from "react";
-import { FaSearch as f } from "../node_modules/react-icons/fa/index.js";
+import { FaSearch as u } from "../node_modules/react-icons/fa/index.js";
 import a, { useTheme as y } from "styled-components";
 import { useQaemaCoreTranslation as x } from "../i18n/i18n.js";
 import { a as h } from "../node_modules/@react-spring/web/dist/react-spring_web.modern.js";
 import { useSpring as b } from "../node_modules/@react-spring/core/dist/react-spring_core.modern.js";
-import w from "../node_modules/react-bootstrap/esm/Button.js";
-import $ from "../node_modules/react-bootstrap/esm/Form.js";
+import $ from "../node_modules/react-bootstrap/esm/Button.js";
+import w from "../node_modules/react-bootstrap/esm/Form.js";
 const j = a(h.div)`
   display: flex;
   flex-direction: row;
@@ -17,14 +17,14 @@ const j = a(h.div)`
   background-color: ${({ theme: e }) => e.colors.grey.n50};
   overflow: hidden;
   height: 2rem;
-`, v = a(w)`
+`, v = a($)`
   border: none;
   padding: 0 0.5rem;
   background-color: transparent;
   display: flex;
   align-items: center;
   justify-content: center;
-`, E = a($.Control)`
+`, E = a(w.Control)`
   border: none;
   background-color: transparent;
   height: 2rem;
@@ -38,7 +38,8 @@ const j = a(h.div)`
   }
 
   &::placeholder {
-    color: ${({ theme: e }) => e.colors.grey.n300};
+    color: ${({ theme: e }) => e.colors.grey.n350};
+    font-size: ${({ theme: e }) => e.typography.sizes.s3};
   }
 `, I = ({ placeholder: e, onSearch: r }) => {
   const i = y(), { t: p } = x(), [m, l] = c(!1), [o, d] = c(""), t = m || !!o, g = b({
@@ -46,7 +47,7 @@ const j = a(h.div)`
     paddingLeft: t ? i.spacing.s : "0rem",
     paddingRight: t ? i.spacing.s : "0rem",
     config: { tension: 250, friction: 20 }
-  }), u = (s) => {
+  }), f = (s) => {
     s.key === "Enter" && r && r(o);
   };
   return /* @__PURE__ */ n.jsxs(j, { style: g, onMouseEnter: () => l(!0), onMouseLeave: () => l(!1), children: [
@@ -56,7 +57,7 @@ const j = a(h.div)`
         onClick: () => {
           (o == null ? void 0 : o.length) > 0 && r && r(o);
         },
-        children: /* @__PURE__ */ n.jsx(f, { color: i.colors.grey.n400, size: "1rem" })
+        children: /* @__PURE__ */ n.jsx(u, { color: i.colors.grey.n400, size: "1rem" })
       }
     ),
     t && /* @__PURE__ */ n.jsx(
@@ -67,7 +68,7 @@ const j = a(h.div)`
         onChange: (s) => {
           s.target.value == "" && o ? (r == null || r(""), d("")) : d(s.target.value);
         },
-        onKeyDown: u,
+        onKeyDown: f,
         autoFocus: !0
       }
     )

package/dist/components/Sidemenu.js

@@ -1,7 +1,8 @@
-import { j as i } from "../_virtual/jsx-runtime.js";
+import { j as o } from "../_virtual/jsx-runtime.js";
 import { useState as m, useEffect as H } from "react";
-import { FaTimesCircle as O, FaSearch as R } from "../node_modules/react-icons/fa/index.js";
-import o, { useTheme as X } from "styled-components";
+import { FaTimesCircle as O } from "../node_modules/react-icons/fa/index.js";
+import { FiSearch as R } from "../node_modules/react-icons/fi/index.js";
+import n, { useTheme as X } from "styled-components";
 import { device as S } from "../constants/breakPoints.constant.js";
 import K from "../hooks/useZIndex.js";
 import { useQaemaCoreTranslation as M } from "../i18n/i18n.js";
@@ -12,7 +13,7 @@ import b from "./NavItem.js";
 import w from "./Typography.js";
 import Z from "../node_modules/react-bootstrap/esm/Button.js";
 import _ from "../node_modules/react-bootstrap/esm/Form.js";
-const v = o.div`
+const v = n.div`
   direction: ${({ theme: r }) => r == null ? void 0 : r.dir};
   position: fixed;
   top: 0;
@@ -43,16 +44,16 @@ const v = o.div`
   ${({ theme: r }) => {
   if ((r == null ? void 0 : r.dir) === "rtl") return `padding-left: 0 !important;padding-right: ${r.spacing.xs};`;
 }}
-`, A = o.div`
+`, A = n.div`
   display: flex;
   flex-direction: row;
   width: 100%;
   justify-content: space-between;
-`, J = o.div`
+`, J = n.div`
   padding-right: ${({ theme: r }) => r.spacing.sm};
   padding-left: ${({ theme: r }) => r.spacing.sm};
   cursor: pointer;
-`, Q = o.div`
+`, Q = n.div`
   display: none;
 
   @media ${S.tablet} {
@@ -64,15 +65,15 @@ const v = o.div`
       height: 1.5rem;
     }
   }
-`, q = o.div`
+`, q = n.div`
   padding-right: ${({ theme: r }) => r.spacing.s};
   padding-left: ${({ theme: r }) => r.spacing.s};
-`, G = o.div`
+`, G = n.div`
   justify-content: space-between;
   display: flex;
   flex-direction: column;
   height: 100%;
-`, Y = o.div`
+`, Y = n.div`
   display: flex;
   flex-direction: row;
   gap: ${({ theme: r }) => r.spacing.xxs};
@@ -80,7 +81,7 @@ const v = o.div`
   background-color: ${({ theme: r }) => r.colors.grey.n150};
   border: 1px solid transparent;
   border-radius: ${({ theme: r }) => r.borderRadius.lg};
-`, P = o(Z)`
+`, P = n(Z)`
   border: none;
   padding: 0;
   margin-top: ${({ theme: r }) => r.spacing.xxs};
@@ -90,16 +91,22 @@ const v = o.div`
   svg {
     background-color: ${({ theme: r }) => r.colors.grey.n150};
   }
-`, I = o(_.Control)`
+`, I = n(_.Control)`
   padding: ${({ theme: r }) => r.spacing.xxs};
   border: none;
   background-color: ${({ theme: r }) => r.colors.grey.n150};
   color: ${({ theme: r }) => r.colors.grey.n350};
+  font-size: ${({ theme: r }) => r.typography.sizes.s4};
 
   &:focus-visible {
     outline: none;
   }
-`, rr = o.div`
+
+  &::placeholder {
+    font-size: ${({ theme: r }) => r.typography.sizes.s4} !important;
+    color: ${({ theme: r }) => r.colors.grey.n350} !important;
+  }
+`, rr = n.div`
   padding-right: ${({ theme: r }) => r.spacing.s};
   button {
     width: 100%;
@@ -108,89 +115,89 @@ const v = o.div`
   ${({ theme: r }) => {
   if ((r == null ? void 0 : r.dir) === "rtl") return `padding-right: 0 !important;padding-left: ${r.spacing.s};`;
 }}
-`, nr = o(w)`
+`, ir = n(w)`
   padding-right: ${({ theme: r }) => r.spacing.s};
   padding-left: ${({ theme: r }) => r.spacing.s};
   margin-top: 0;
   margin-bottom: ${({ theme: r }) => r.spacing.xs};
-`, ir = o.div`
+`, or = n.div`
   padding: ${({ theme: r }) => r.spacing.m};
   text-align: center;
-`, or = o.div`
+`, nr = n.div`
   button {
     width: 100%;
     border-radius: ${({ theme: r }) => r.spacing.xxs};
   }
-`, sr = o(U)`
+`, sr = n(U)`
   margin-left: -${({ theme: r }) => r.spacing.xs};
   width: calc(100% + ${({ theme: r }) => r.spacing.xs});
   ${({ theme: r }) => {
   if ((r == null ? void 0 : r.dir) === "rtl") return `margin-left: 0; margin-right: -${r.spacing.xs}; width: calc(100% + ${r.spacing.xs});`;
 }}
   margin-bottom: ${({ theme: r }) => r.spacing.sm};
-`, mr = (r) => {
-  const { logoSrc: C, searchPlaceHolder: k, categories: a, linkComponent: f, open: T, setOpen: E, currentPath: u, extraSideMenuItems: l, onLogoClick: D } = r, p = X(), { t: L } = M(), B = K("sidemenu"), [c, F] = m(""), [d, N] = m(a), g = (n) => {
+`, jr = (r) => {
+  const { logoSrc: C, searchPlaceHolder: k, categories: p, linkComponent: f, open: z, setOpen: T, currentPath: u, extraSideMenuItems: l, onLogoClick: E } = r, a = X(), { t: D } = M(), L = K("sidemenu"), [c, B] = m(""), [t, F] = m(p), g = (i) => {
     const e = [];
-    a == null || a.forEach((t) => {
+    p == null || p.forEach((d) => {
       var h;
-      const s = (h = t == null ? void 0 : t.navItems) == null ? void 0 : h.filter((x) => {
+      const s = (h = d == null ? void 0 : d.navItems) == null ? void 0 : h.filter((x) => {
         var $, y;
-        return (y = ($ = x == null ? void 0 : x.title) == null ? void 0 : $.toLowerCase()) == null ? void 0 : y.includes(n == null ? void 0 : n.toLowerCase());
+        return (y = ($ = x == null ? void 0 : x.title) == null ? void 0 : $.toLowerCase()) == null ? void 0 : y.includes(i == null ? void 0 : i.toLowerCase());
       });
-      (s == null ? void 0 : s.length) > 0 && e.push({ ...t, navItems: s });
-    }), N(e);
-  }, W = (n) => {
-    n.key === "Enter" && g(c);
+      (s == null ? void 0 : s.length) > 0 && e.push({ ...d, navItems: s });
+    }), F(e);
+  }, N = (i) => {
+    i.key === "Enter" && g(c);
   };
   H(() => {
     c === "" && g(c);
   }, [c]);
-  const z = (n, e) => n ? e === n || (e == null ? void 0 : e.startsWith(n + "/")) : !1;
-  return /* @__PURE__ */ i.jsxs(v, { className: T ? "active" : "", $zIndex: B, children: [
-    /* @__PURE__ */ i.jsxs(A, { children: [
-      /* @__PURE__ */ i.jsx(J, { onClick: D, children: /* @__PURE__ */ i.jsx(V, { src: C, width: "6.336rem", height: "2rem" }) }),
-      /* @__PURE__ */ i.jsx(Q, { onClick: () => E(!1), children: /* @__PURE__ */ i.jsx(O, { color: p.colors.primary.purple.n450 }) })
+  const W = (i, e) => i ? e === i || (e == null ? void 0 : e.startsWith(i + "/")) : !1;
+  return /* @__PURE__ */ o.jsxs(v, { className: z ? "active" : "", $zIndex: L, children: [
+    /* @__PURE__ */ o.jsxs(A, { children: [
+      /* @__PURE__ */ o.jsx(J, { onClick: E, children: /* @__PURE__ */ o.jsx(V, { src: C, width: "6.336rem", height: "2rem" }) }),
+      /* @__PURE__ */ o.jsx(Q, { onClick: () => T(!1), children: /* @__PURE__ */ o.jsx(O, { color: a.colors.primary.purple.n450 }) })
     ] }),
-    /* @__PURE__ */ i.jsx(q, { children: /* @__PURE__ */ i.jsxs(Y, { children: [
-      /* @__PURE__ */ i.jsx(
+    /* @__PURE__ */ o.jsx(q, { children: /* @__PURE__ */ o.jsxs(Y, { children: [
+      /* @__PURE__ */ o.jsx(
         P,
         {
           onClick: () => {
             g(c);
           },
-          children: /* @__PURE__ */ i.jsx(R, { color: p.colors.grey.n350 })
+          children: /* @__PURE__ */ o.jsx(R, { color: a.colors.grey.n350, size: 20 })
         }
       ),
-      /* @__PURE__ */ i.jsx(
+      /* @__PURE__ */ o.jsx(
         I,
         {
           placeholder: k ?? "Search",
           value: c,
-          onChange: (n) => {
-            F(n.target.value);
+          onChange: (i) => {
+            B(i.target.value);
           },
-          onKeyDown: W
+          onKeyDown: N
         }
       )
     ] }) }),
-    /* @__PURE__ */ i.jsxs(G, { children: [
-      /* @__PURE__ */ i.jsxs("div", { children: [
-        (d == null ? void 0 : d.length) === 0 && /* @__PURE__ */ i.jsx(ir, { children: /* @__PURE__ */ i.jsx(w, { variant: "smText", children: L("NO_RESULTS_FOUND") }) }),
-        (d == null ? void 0 : d.length) > 0 && (d == null ? void 0 : d.map((n) => {
-          var e, t;
-          return ((e = n == null ? void 0 : n.navItems) == null ? void 0 : e.length) === 0 ? null : /* @__PURE__ */ i.jsxs(rr, { className: n == null ? void 0 : n.code, children: [
-            /* @__PURE__ */ i.jsx(nr, { variant: "xsText", color: p.colors.grey.n300, children: n == null ? void 0 : n.title }),
-            (t = n == null ? void 0 : n.navItems) == null ? void 0 : t.map((s) => /* @__PURE__ */ i.jsx(j, { to: (s == null ? void 0 : s.path) ?? "/", component: f, wrapper: !0, children: /* @__PURE__ */ i.jsx(b, { item: { variant: "normal", active: z(s.path, u), ...s } }) }, s == null ? void 0 : s.path))
-          ] }, n == null ? void 0 : n.title);
+    /* @__PURE__ */ o.jsxs(G, { children: [
+      /* @__PURE__ */ o.jsxs("div", { children: [
+        (t == null ? void 0 : t.length) === 0 && /* @__PURE__ */ o.jsx(or, { children: /* @__PURE__ */ o.jsx(w, { variant: "smText", children: D("NO_RESULTS_FOUND") }) }),
+        (t == null ? void 0 : t.length) > 0 && (t == null ? void 0 : t.map((i) => {
+          var e, d;
+          return ((e = i == null ? void 0 : i.navItems) == null ? void 0 : e.length) === 0 ? null : /* @__PURE__ */ o.jsxs(rr, { className: i == null ? void 0 : i.code, children: [
+            /* @__PURE__ */ o.jsx(ir, { variant: "xsText", color: a.colors.grey.n300, children: i == null ? void 0 : i.title }),
+            (d = i == null ? void 0 : i.navItems) == null ? void 0 : d.map((s) => /* @__PURE__ */ o.jsx(j, { to: (s == null ? void 0 : s.path) ?? "/", component: f, wrapper: !0, children: /* @__PURE__ */ o.jsx(b, { item: { variant: "normal", active: W(s.path, u), ...s } }) }, s == null ? void 0 : s.path))
+          ] }, i == null ? void 0 : i.title);
         }))
       ] }),
-      /* @__PURE__ */ i.jsxs(or, { children: [
-        (l == null ? void 0 : l.length) > 0 && /* @__PURE__ */ i.jsx(sr, { color: p.colors.grey.n150 }),
-        l == null ? void 0 : l.map((n) => /* @__PURE__ */ i.jsx(j, { to: (n == null ? void 0 : n.path) ?? "/", component: f, wrapper: !0, children: /* @__PURE__ */ i.jsx(b, { item: { variant: "normal", active: u === n.path, ...n } }) }, n == null ? void 0 : n.path))
+      /* @__PURE__ */ o.jsxs(nr, { children: [
+        (l == null ? void 0 : l.length) > 0 && /* @__PURE__ */ o.jsx(sr, { color: a.colors.grey.n150 }),
+        l == null ? void 0 : l.map((i) => /* @__PURE__ */ o.jsx(j, { to: (i == null ? void 0 : i.path) ?? "/", component: f, wrapper: !0, children: /* @__PURE__ */ o.jsx(b, { item: { variant: "normal", active: u === i.path, ...i } }) }, i == null ? void 0 : i.path))
       ] })
     ] })
   ] });
 };
 export {
-  mr as default
+  jr as default
 };

package/dist/components/StatCard.js

@@ -7,10 +7,11 @@ import j from "../assets/svg/Riyal.svg.js";
 const w = s.div`
   display: flex;
   width: 100%;
-  height: 4rem;
+  height: 5rem;
   border-radius: ${({ theme: r }) => r.borderRadius.md};
   border: 1px solid ${({ theme: r }) => r.colors.grey.n100};
-  overflow: hidden;
+  overflow-x: auto;
+  overflow-y: hidden;
   background-color: ${({ theme: r }) => r.colors.grey.n50};
 `, b = s.div`
   /* border: 1px solid ${({ theme: r }) => r.colors.grey.n150}; */
@@ -19,7 +20,7 @@ const w = s.div`
   flex-direction: column;
   justify-content: center;
   padding: 0.625rem ${({ theme: r }) => r.spacing.s};
-  gap: ${({ theme: r }) => r.spacing.xxs};
+
   background-color: ${({ theme: r }) => r.colors.grey.n50};
   @media ${t.tablet} {
     padding: ${({ theme: r }) => r.spacing.xxs} ${({ theme: r }) => r.spacing.xs};
@@ -48,7 +49,7 @@ const w = s.div`
   justify-content: start;
   font-family: 'Noto Sans Display', sans-serif;
   font-weight: 600;
-  font-size: ${({ theme: r }) => r.typography.sizes.s1};
+  font-size: ${({ theme: r }) => r.typography.sizes.s2};
   line-height: 0.8125rem;
   color: ${({ theme: r, state: e }) => e === "negative" ? r.colors.state.error.n450 : r.colors.grey.n650};
   svg {
@@ -108,11 +109,11 @@ const w = s.div`
   state: n,
   indicators: h,
   variant: g = "currency",
-  icon: x,
-  $isLast: y
+  icon: y,
+  $isLast: x
 }) => {
   const { arrow: c = !0, sign: l = !0, percentage: d = !0 } = h || {};
-  return /* @__PURE__ */ o.jsxs(b, { $isLast: y, children: [
+  return /* @__PURE__ */ o.jsxs(b, { $isLast: x, children: [
     /* @__PURE__ */ o.jsxs(v, { children: [
       /* @__PURE__ */ o.jsx("span", { children: r }),
       (c || l || d) && /* @__PURE__ */ o.jsx(z, { state: n, children: n === "positive" ? /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
@@ -126,7 +127,7 @@ const w = s.div`
       ] }) })
     ] }),
     /* @__PURE__ */ o.jsxs(I, { children: [
-      g === "icon" ? /* @__PURE__ */ o.jsx(C, { children: x }) : /* @__PURE__ */ o.jsx(k, { src: j, alt: "Riyal" }),
+      g === "icon" ? /* @__PURE__ */ o.jsx(C, { children: y }) : /* @__PURE__ */ o.jsx(k, { src: j, alt: "Riyal" }),
       /* @__PURE__ */ o.jsxs(A, { children: [
         e,
         g !== "icon" && i && /* @__PURE__ */ o.jsxs(R, { children: [

package/dist/components/Table/Table.js

@@ -1,102 +1,107 @@
 import { j as t } from "../../_virtual/jsx-runtime.js";
-import { useState as v, useEffect as E, useMemo as G } from "react";
-import { useTranslation as J } from "react-i18next";
-import N from "../Spinner.js";
-import Q from "../Pagination.js";
-import U from "../Typography.js";
-import L, { CheckboxCell as X } from "./components/CellComponents.js";
+import { useState as p, useRef as Q, useCallback as U, useEffect as T, useMemo as X } from "react";
+import { useTranslation as Y } from "react-i18next";
+import Z from "../Spinner.js";
+import D from "../Pagination.js";
+import k from "../Typography.js";
+import W, { CheckboxCell as F } from "./components/CellComponents.js";
 import O from "./components/TableHead.js";
-import { TableContainer as Y, LoadingOverlay as Z, TablesWrapper as H, DataScrollBox as D, StyledTable as k, TableBody as z, EmptyState as F, TableRow as W, TableCellContainer as b, ActionsTable as R, TableFooter as w } from "./Table.styles.js";
-function de({
-  columns: T,
-  data: i,
-  keyField: r,
-  selectable: u = !1,
-  onRowSelect: x,
+import { TableContainer as R, LoadingOverlay as w, TablesWrapper as ee, DataScrollBox as te, StyledTable as re, TableBody as y, EmptyState as ne, TableRow as I, TableCellContainer as $, ActionsTable as se, TableFooter as le } from "./Table.styles.js";
+function fe({
+  columns: C,
+  data: s,
+  keyField: l,
+  selectable: g = !1,
+  onRowSelect: a,
   rowActions: m,
-  stickyHeader: $ = !1,
-  loading: a = !1,
-  emptyStateMessage: y,
-  pagination: n,
-  onRowClick: f,
-  rowClassName: j,
+  stickyHeader: B = !1,
+  loading: x = !1,
+  emptyStateMessage: N,
+  pagination: r,
+  onRowClick: u,
+  rowClassName: b,
   isRowDisabled: d,
-  breakpoint: I = "md",
-  alignHeader: C = "start"
+  breakpoint: _ = "md",
+  alignHeader: E = "start"
 }) {
-  const [h, p] = v([]), [S, g] = v(I), [_, B] = v(null), { t: K } = J();
-  E(() => {
+  const [h, v] = p([]), [L, P] = p(_), [K, z] = p(null), [M, V] = p(!1), f = Q(null), { t: q } = Y(), j = U(() => {
+    f.current && V(f.current.scrollWidth > f.current.clientWidth);
+  }, []);
+  T(() => (j(), window.addEventListener("resize", j), () => window.removeEventListener("resize", j)), [j, s]), T(() => {
     const e = () => {
-      B(null);
+      z(null);
     };
     return document.addEventListener("click", e), () => {
       document.removeEventListener("click", e);
     };
-  }, []), E(() => {
+  }, []), T(() => {
     const e = () => {
-      const l = window.innerWidth;
-      l < 576 ? g("sm") : l < 992 ? g("md") : g("lg");
+      const i = window.innerWidth;
+      i < 576 ? P("sm") : i < 992 ? P("md") : P("lg");
     };
     return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
   }, []);
-  const P = G(() => T.filter((e) => typeof e.hidden == "function" ? !e.hidden(S) : !e.hidden), [T, S]), M = () => {
-    h.length === i.length ? p([]) : p([...i]), x && x(h.length === i.length ? [] : [...i]);
-  }, V = (e) => {
-    const l = h.filter((s) => e[r] === s[r]);
-    return l && l.length > 0;
-  }, q = (e) => {
-    const l = h.some((o) => o[r] === e[r]);
-    let s;
-    l ? s = h.filter((o) => o[r] !== e[r]) : s = [...h, e], p(s), x && x(s);
+  const S = X(() => C.filter((e) => typeof e.hidden == "function" ? !e.hidden(L) : !e.hidden), [C, L]), G = () => {
+    h.length === s.length ? v([]) : v([...s]), a && a(h.length === s.length ? [] : [...s]);
+  }, H = (e) => {
+    const i = h.filter((n) => e[l] === n[l]);
+    return i && i.length > 0;
+  }, J = (e) => {
+    const i = h.some((o) => o[l] === e[l]);
+    let n;
+    i ? n = h.filter((o) => o[l] !== e[l]) : n = [...h, e], v(n), a && a(n);
   };
-  return /* @__PURE__ */ t.jsxs(Y, { children: [
-    a && /* @__PURE__ */ t.jsx(Z, { children: /* @__PURE__ */ t.jsx(N, { size: "3rem" }) }),
-    /* @__PURE__ */ t.jsxs(H, { children: [
-      /* @__PURE__ */ t.jsx(D, { children: /* @__PURE__ */ t.jsxs(k, { children: [
+  return /* @__PURE__ */ t.jsxs(R, { children: [
+    x && /* @__PURE__ */ t.jsx(w, { children: /* @__PURE__ */ t.jsx(Z, { size: "3rem" }) }),
+    /* @__PURE__ */ t.jsxs(ee, { children: [
+      /* @__PURE__ */ t.jsx(te, { ref: f, children: /* @__PURE__ */ t.jsxs(re, { children: [
         /* @__PURE__ */ t.jsx(
           O,
           {
-            data: i,
-            handleSelectAll: M,
+            data: s,
+            handleSelectAll: G,
             selectedRows: h,
-            visibleColumns: P,
-            alignHeader: C,
+            visibleColumns: S,
+            alignHeader: E,
             rowActions: void 0,
-            stickyHeader: $,
-            selectable: u,
-            loading: a
+            stickyHeader: B,
+            selectable: g,
+            loading: x
           }
         ),
-        /* @__PURE__ */ t.jsx(z, { children: i.length === 0 ? /* @__PURE__ */ t.jsx("tr", { children: /* @__PURE__ */ t.jsx("td", { colSpan: (u ? 1 : 0) + P.length, children: /* @__PURE__ */ t.jsx(F, { children: /* @__PURE__ */ t.jsx(U, { variant: "mdText", children: y ?? K("NO_DATA_AVAILABLE") }) }) }) }) : i.map((e, l) => {
-          const s = (d == null ? void 0 : d(e)) ?? !1, o = h.some((c) => c[r] === e[r]), A = e[r];
+        /* @__PURE__ */ t.jsx(y, { children: s.length === 0 ? /* @__PURE__ */ t.jsx("tr", { children: /* @__PURE__ */ t.jsx("td", { colSpan: (g ? 1 : 0) + S.length, children: /* @__PURE__ */ t.jsx(ne, { children: /* @__PURE__ */ t.jsx(k, { variant: "mdText", children: N ?? q("NO_DATA_AVAILABLE") }) }) }) }) : s.map((e, i) => {
+          const n = (d == null ? void 0 : d(e)) ?? !1, o = h.some((c) => c[l] === e[l]), A = e[l];
           return /* @__PURE__ */ t.jsxs(
-            W,
+            I,
             {
               $selected: o,
-              $disabled: s,
-              $clickable: !!f && !s,
-              onClick: () => !s && (f == null ? void 0 : f(e)),
-              className: (j == null ? void 0 : j(e, l)) ?? "",
+              $disabled: n,
+              $clickable: !!u && !n,
+              onClick: () => {
+                n || u == null || u(e);
+              },
+              className: (b == null ? void 0 : b(e, i)) ?? "",
               children: [
-                u && /* @__PURE__ */ t.jsx(b, { $align: "center", $isFirstColumn: !0, children: /* @__PURE__ */ t.jsx(
-                  X,
+                g && /* @__PURE__ */ t.jsx($, { $align: "center", $isFirstColumn: !0, children: /* @__PURE__ */ t.jsx(
+                  F,
                   {
                     checkBoxOptions: {
-                      checked: V(e),
+                      checked: H(e),
                       $variant: "primary",
-                      $disabled: s,
+                      $disabled: n,
                       $size: "sm",
-                      onChange: () => !s && q(e)
+                      onChange: () => !n && J(e)
                     }
                   }
                 ) }),
-                P.map((c) => /* @__PURE__ */ t.jsx(b, { $align: c.align, children: /* @__PURE__ */ t.jsx(
-                  L,
+                S.map((c) => /* @__PURE__ */ t.jsx($, { $align: c.align, children: /* @__PURE__ */ t.jsx(
+                  W,
                   {
                     column: c,
                     row: e,
                     type: c.cellType ?? "text",
                     align: c.align,
+                    className: c.className,
                     width: c.width ?? "",
                     minWidth: c.minWidth ?? "",
                     maxWidth: c.maxWidth ?? ""
@@ -108,59 +113,59 @@ function de({
           );
         }) })
       ] }) }),
-      m && m.length > 0 && /* @__PURE__ */ t.jsxs(R, { children: [
+      m && m.length > 0 && /* @__PURE__ */ t.jsxs(se, { $hasScrollbar: M, children: [
         /* @__PURE__ */ t.jsx(
           O,
           {
-            data: i,
+            data: s,
             handleSelectAll: () => {
             },
             selectedRows: h,
             visibleColumns: [],
-            alignHeader: C,
+            alignHeader: E,
             rowActions: m,
-            stickyHeader: $,
+            stickyHeader: B,
             selectable: !1,
-            loading: a
+            loading: x
           }
         ),
-        /* @__PURE__ */ t.jsx(z, { children: i.length === 0 ? /* @__PURE__ */ t.jsx("tr", { children: /* @__PURE__ */ t.jsx("td", { children: /* @__PURE__ */ t.jsx("div", { style: { height: "3.5rem" } }) }) }) : i.map((e) => {
-          const l = (d == null ? void 0 : d(e)) ?? !1;
-          return /* @__PURE__ */ t.jsx(W, { $disabled: l, children: /* @__PURE__ */ t.jsx(b, { $align: "center", $isActionCell: !0, children: /* @__PURE__ */ t.jsx(
-            L,
+        /* @__PURE__ */ t.jsx(y, { children: s.length === 0 ? /* @__PURE__ */ t.jsx("tr", { children: /* @__PURE__ */ t.jsx("td", { children: /* @__PURE__ */ t.jsx("div", { style: { height: "3.5rem" } }) }) }) : s.map((e) => {
+          const i = (d == null ? void 0 : d(e)) ?? !1;
+          return /* @__PURE__ */ t.jsx(I, { $disabled: i, children: /* @__PURE__ */ t.jsx($, { $align: "center", $isActionCell: !0, children: /* @__PURE__ */ t.jsx(
+            W,
             {
               row: e,
               type: "icon",
               iconOptions: {
-                keyField: r,
+                keyField: l,
                 rowActions: m,
-                activeDropdown: _,
-                setActiveDropdown: B
+                activeDropdown: K,
+                setActiveDropdown: z
               }
             }
-          ) }) }, `action-${e[r]}`);
+          ) }) }, `action-${e[l]}`);
         }) })
       ] })
     ] }),
-    n && n.enabled && /* @__PURE__ */ t.jsx(w, { children: /* @__PURE__ */ t.jsx(
-      Q,
+    r && r.enabled && /* @__PURE__ */ t.jsx(le, { children: /* @__PURE__ */ t.jsx(
+      D,
       {
-        currentPage: n.currentPage,
-        totalPages: n.totalPages,
-        onChange: n.onPageChange,
-        disabled: a,
-        hidePrevButton: n.hidePrevButton,
-        hideNextButton: n.hideNextButton,
-        siblingCount: n.siblingCount,
-        boundaryCount: n.boundaryCount,
-        itemsPerPage: n.pageSize,
-        totalItems: n.totalItems,
-        itemsPerPageOptions: n.itemsPerPageOptions,
-        onItemsPerPageChange: n.onItemsPerPageChange
+        currentPage: r.currentPage,
+        totalPages: r.totalPages,
+        onChange: r.onPageChange,
+        disabled: x,
+        hidePrevButton: r.hidePrevButton,
+        hideNextButton: r.hideNextButton,
+        siblingCount: r.siblingCount,
+        boundaryCount: r.boundaryCount,
+        itemsPerPage: r.pageSize,
+        totalItems: r.totalItems,
+        itemsPerPageOptions: r.itemsPerPageOptions,
+        onItemsPerPageChange: r.onItemsPerPageChange
       }
     ) })
   ] });
 }
 export {
-  de as default
+  fe as default
 };

package/dist/components/Table/Table.styles.d.ts

@@ -53,6 +53,8 @@ export declare const TablesWrapper: import("styled-components/dist/types").IStyl
 export declare const DataScrollBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, never>> & string;
-export declare const ActionsTable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>, "ref"> & {
+export declare const ActionsTable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>, "ref"> & {
     ref?: ((instance: HTMLTableElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLTableElement> | null | undefined;
-}, never>> & string;
+}, {
+    $hasScrollbar?: boolean;
+}>> & string;

package/dist/components/Table/Table.styles.js

@@ -1,4 +1,4 @@
-import r, { css as n } from "styled-components";
+import r, { css as e } from "styled-components";
 import { Scrollbar as s } from "../../styles/Scrollbar.styles.js";
 r.button`
   background: none;
@@ -52,7 +52,7 @@ const a = r.div`
   color: ${({ theme: o }) => o.colors.grey.n600};
 
   &:hover {
-    background-color: ${({ theme: o, $disabled: e }) => e ? "transparent" : o.colors.primary.purple.n100};
+    background-color: ${({ theme: o, $disabled: n }) => n ? "transparent" : o.colors.primary.purple.n100};
   }
 
   svg {
@@ -62,7 +62,7 @@ const a = r.div`
   width: 100%;
   position: relative;
   border-radius: ${({ theme: o }) => o.borderRadius.md};
-  box-shadow: ${({ theme: o }) => o.boxShadow.s2};
+  /* box-shadow: ${({ theme: o }) => o.boxShadow.s2}; */
   background-color: ${({ theme: o }) => o.colors.grey.n50};
   overflow-x: hidden;
   overflow-y: auto;
@@ -79,7 +79,7 @@ r(s)`
   -webkit-overflow-scrolling: touch;
 `;
 const u = r.thead`
-  ${({ $sticky: o }) => o && n`
+  ${({ $sticky: o }) => o && e`
       top: 0;
     `}
 `, $ = r.tr`
@@ -99,61 +99,73 @@ const u = r.thead`
   height: 3.5rem;
 
   /* Apply sticky positioning for first and last columns */
-  ${({ $isFirstColumn: o }) => o && n`
+  ${({ $isFirstColumn: o }) => o && e`
       left: 0;
       /* z-index: 2; */
     `}
 
-  ${({ $isLastColumn: o }) => o && n`
+  ${({ $isLastColumn: o }) => o && e`
       right: 0;
       /* z-index: 2; */
       text-align: end;
     `}
-        ${({ $isActionCell: o }) => o && n`
-      padding: ${({ theme: e }) => e.spacing.sm} 0;
+        ${({ $isActionCell: o }) => o && e`
+      padding: ${({ theme: n }) => n.spacing.sm} 0;
       text-align: center;
     `}
  
   &:hover {
-    ${({ $sortable: o }) => o && n`
-        background-color: ${({ theme: e }) => e.colors.grey.n150};
+    ${({ $sortable: o }) => o && e`
+        background-color: ${({ theme: n }) => n.colors.grey.n150};
       `}
   }
-`, y = r.tbody``, x = r.tr`
-  background-color: ${({ theme: o, $selected: e }) => e ? o.colors.primary.purple.n100 : o.colors.grey.n50};
+`, y = r.tbody``, m = r.tr`
+  background-color: ${({ theme: o, $selected: n }) => n ? o.colors.primary.purple.n100 : o.colors.grey.n50};
   height: 3.5rem;
-  ${({ $disabled: o }) => o && n`
+  transition: background-color 0.2s;
+
+  ${({ $disabled: o }) => o && e`
       opacity: 0.6;
       pointer-events: none;
     `}
 
-  ${({ $clickable: o }) => o && n`
+  ${({ $clickable: o }) => o && e`
       cursor: pointer;
     `}
-`, h = r.td`
+
+  &:hover {
+    ${({ $disabled: o }) => !o && e`
+        background-color: ${({ theme: n }) => n.colors.grey.n100};
+
+        td {
+          background-color: ${({ theme: n }) => n.colors.grey.n100};
+        }
+      `}
+  }
+`, x = r.td`
   padding: ${({ theme: o }) => o.spacing.s} ${({ theme: o }) => o.spacing.sm};
   text-align: ${({ $align: o }) => o ?? "left"};
-  /* border-bottom: 1px solid ${({ theme: o }) => o.colors.grey.n150}; */
+  border-bottom: 1px solid ${({ theme: o }) => o.colors.grey.n150};
   color: ${({ theme: o }) => o.colors.grey.n700};
   /* min-height: 3.5rem;
   max-height: 3.5rem; */
   background-color: ${({ theme: o }) => o.colors.grey.n50};
   /* height: 3.5rem; */
   /* Apply sticky positioning for first and last columns */
-  ${({ $isFirstColumn: o }) => o && n`
+  ${({ $isFirstColumn: o }) => o && e`
       z-index: 1;
       left: 0;
     `}
 
-  ${({ $isLastColumn: o }) => o && n`
+  ${({ $isLastColumn: o }) => o && e`
       right: 0;
       width: 0px;
       z-index: 1;
       background-color: transparent;
     `}
 
-      ${({ $isActionCell: o }) => o && n`
-      padding: 0 ${({ theme: e }) => e.spacing.sm};
+      ${({ $isActionCell: o }) => o && e`
+      padding: 0 ${({ theme: n }) => n.spacing.sm};
     `}
 `;
 r.span`
@@ -161,7 +173,7 @@ r.span`
   align-items: center;
   margin-left: ${({ theme: o }) => o.spacing.xxs};
 `;
-const m = r.div`
+const h = r.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -192,30 +204,30 @@ r.span`
   font-size: ${({ theme: o }) => o.typography.sizes.s2};
   font-weight: ${({ theme: o }) => o.typography.weights.semiBold};
 
-  ${({ theme: o, $variant: e }) => {
-  switch (e) {
+  ${({ theme: o, $variant: n }) => {
+  switch (n) {
     case "primary":
-      return n`
+      return e`
           background-color: ${o.colors.primary.purple.n100};
           color: ${o.colors.primary.purple.n500};
         `;
     case "success":
-      return n`
+      return e`
           background-color: ${o.colors.state.success.n100};
           color: ${o.colors.state.success.n500};
         `;
     case "warning":
-      return n`
+      return e`
           background-color: ${o.colors.secondary.yellow.n200};
           color: ${o.colors.secondary.yellow.n600};
         `;
     case "error":
-      return n`
+      return e`
           background-color: ${o.colors.state.error.n100};
           color: ${o.colors.state.error.n500};
         `;
     default:
-      return n`
+      return e`
           background-color: ${o.colors.grey.n200};
           color: ${o.colors.grey.n600};
         `;
@@ -228,8 +240,8 @@ r.span`
   height: 0.5rem;
   border-radius: 50%;
   margin-right: ${({ theme: o }) => o.spacing.xxs};
-  background-color: ${({ theme: o, $status: e }) => {
-  switch (e) {
+  background-color: ${({ theme: o, $status: n }) => {
+  switch (n) {
     case "success":
       return o.colors.state.success.n500;
     case "warning":
@@ -245,9 +257,11 @@ const k = r.div`
   display: flex;
   position: relative;
   width: 100%;
+  gap: 0;
 `, v = r(s)`
   flex: 1 1 auto;
   overflow-x: auto;
+  overflow-y: hidden;
   min-width: 0;
   &::-webkit-scrollbar {
     height: ${({ theme: o }) => o.spacing.s};
@@ -256,12 +270,11 @@ const k = r.div`
     height: ${({ theme: o }) => o.spacing.s};
   }
 `, T = r(t)`
-  /* position: sticky;
-  right: 0; */
   flex: 0 0 auto;
-  width: 6rem; /* adjust to your icon width */
+  width: auto;
   table-layout: fixed;
   background-color: ${({ theme: o }) => o.colors.grey.n50};
+  margin-bottom: ${({ theme: o, $hasScrollbar: n }) => n ? o.spacing.s : "0"};
 `;
 export {
   T as ActionsTable,
@@ -275,11 +288,11 @@ export {
   t as StyledTable,
   u as StyledTableHead,
   y as TableBody,
-  h as TableCellContainer,
+  x as TableCellContainer,
   g as TableContainer,
-  m as TableFooter,
+  h as TableFooter,
   b as TableHeaderCell,
   $ as TableHeaderRow,
-  x as TableRow,
+  m as TableRow,
   k as TablesWrapper
 };

package/dist/components/Table/Table.types.d.ts

@@ -4,6 +4,7 @@ export type TableColumn<T> = {
     id: string;
     header: string | React.ReactNode;
     accessor: keyof T | ((row: T) => React.ReactNode);
+    className?: string;
     width?: string;
     minWidth?: string;
     maxWidth?: string;
@@ -49,6 +50,7 @@ export type TableProps<T> = {
         onItemsPerPageChange?: (itemsPerPage: number) => void;
     };
     onRowClick?: (row: T) => void;
+    onClickView?: (row: T) => void;
     rowClassName?: (row: T, index: number) => string;
     isRowDisabled?: (row: T) => boolean;
     breakpoint?: string;

package/dist/components/Table/components/CellComponents.js

@@ -25,7 +25,7 @@ const i = g.div`
   duplicate: /* @__PURE__ */ r.jsx(j, {}),
   approve: /* @__PURE__ */ r.jsx(u, {}),
   print: /* @__PURE__ */ r.jsx(u, {})
-}, R = (e) => E[e.toLowerCase()] ?? null, D = ({ data: e, type: t, width: s, maxWidth: n, minWidth: o }) => /* @__PURE__ */ r.jsx(i, { width: s, maxWidth: n, minWidth: o, children: e && /* @__PURE__ */ r.jsx(d, { data: e, type: t, width: s }) }), L = ({ data: e, type: t, width: s, maxWidth: n, minWidth: o }) => /* @__PURE__ */ r.jsx(i, { width: s, maxWidth: n, minWidth: o, children: e && /* @__PURE__ */ r.jsx(d, { data: e, type: t, width: s }) }), M = ({ data: e, type: t, width: s, maxWidth: n, minWidth: o }) => /* @__PURE__ */ r.jsx(i, { width: s, maxWidth: n, minWidth: o, children: e && /* @__PURE__ */ r.jsx(d, { data: e, type: t, width: s }) }), S = ({ data: e, type: t, width: s, maxWidth: n, minWidth: o }) => /* @__PURE__ */ r.jsx(i, { width: s, maxWidth: n, minWidth: o, children: e && /* @__PURE__ */ r.jsx(d, { data: e, type: t, width: s }) }), V = ({ data: e, type: t, width: s, maxWidth: n, minWidth: o }) => /* @__PURE__ */ r.jsx(i, { width: s, maxWidth: n, minWidth: o, children: e && /* @__PURE__ */ r.jsx(b, { data: e, type: t, width: s }) }), H = ({ data: e, width: t, maxWidth: s, minWidth: n }) => /* @__PURE__ */ r.jsx(i, { width: t, maxWidth: s, minWidth: n, children: /* @__PURE__ */ r.jsx($, { value: e.value, direction: e.transactionType }) }), K = ({ checkBoxOptions: e, width: t, maxWidth: s, minWidth: n }) => {
+}, R = (e) => E[e.toLowerCase()] ?? null, D = ({ data: e, type: t, width: s, maxWidth: n, minWidth: o }) => /* @__PURE__ */ r.jsx(i, { width: s, maxWidth: n, minWidth: o, children: e && /* @__PURE__ */ r.jsx(d, { data: e, type: t, width: s }) }), L = ({ data: e, type: t, width: s, maxWidth: n, minWidth: o }) => /* @__PURE__ */ r.jsx(i, { width: s, maxWidth: n, minWidth: o, children: e && /* @__PURE__ */ r.jsx(d, { data: e, type: t, width: s }) }), M = ({ data: e, type: t, width: s, maxWidth: n, minWidth: o }) => /* @__PURE__ */ r.jsx(i, { width: s, maxWidth: n, minWidth: o, children: e && /* @__PURE__ */ r.jsx(d, { data: e, type: t, width: s }) }), S = ({ data: e, type: t, width: s, maxWidth: n, minWidth: o, className: c }) => /* @__PURE__ */ r.jsx(i, { className: c, width: s, maxWidth: n, minWidth: o, children: e && /* @__PURE__ */ r.jsx(d, { data: e, type: t, width: s }) }), V = ({ data: e, type: t, width: s, maxWidth: n, minWidth: o }) => /* @__PURE__ */ r.jsx(i, { width: s, maxWidth: n, minWidth: o, children: e && /* @__PURE__ */ r.jsx(b, { data: e, type: t, width: s }) }), H = ({ data: e, width: t, maxWidth: s, minWidth: n }) => /* @__PURE__ */ r.jsx(i, { width: t, maxWidth: s, minWidth: n, children: /* @__PURE__ */ r.jsx($, { value: e.value, direction: e.transactionType }) }), K = ({ checkBoxOptions: e, width: t, maxWidth: s, minWidth: n }) => {
   const o = e ? { ...e, name: e.name ?? "" } : void 0;
   return /* @__PURE__ */ r.jsx(i, { width: t, maxWidth: s, minWidth: n, children: /* @__PURE__ */ r.jsx(F, { ...o }) });
 }, P = ({ radioButtonOptions: e, width: t, maxWidth: s, minWidth: n }) => {

package/dist/node_modules/react-icons/fi/index.js

@@ -22,6 +22,9 @@ function u(t) {
   return r({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "line", attr: { x1: "12", y1: "5", x2: "12", y2: "19" }, child: [] }, { tag: "line", attr: { x1: "5", y1: "12", x2: "19", y2: "12" }, child: [] }] })(t);
 }
 function s(t) {
+  return r({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "circle", attr: { cx: "11", cy: "11", r: "8" }, child: [] }, { tag: "line", attr: { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }, child: [] }] })(t);
+}
+function h(t) {
   return r({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "line", attr: { x1: "18", y1: "6", x2: "6", y2: "18" }, child: [] }, { tag: "line", attr: { x1: "6", y1: "6", x2: "18", y2: "18" }, child: [] }] })(t);
 }
 export {
@@ -32,5 +35,6 @@ export {
   a as FiMinus,
   d as FiMoreHorizontal,
   u as FiPlus,
-  s as FiX
+  s as FiSearch,
+  h as FiX
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "qaema-ui",
   "private": false,
-  "version": "0.0.60",
+  "version": "0.0.62",
   "type": "module",
   "publishConfig": {
     "access": "public"