qaema-ui 0.0.59 → 0.0.61

package/dist/components/PriceCard.js

@@ -1,149 +1,149 @@
-import { j as r } from "../_virtual/jsx-runtime.js";
+import { j as i } from "../_virtual/jsx-runtime.js";
 import "react";
-import { FiCheck as j, FiX as v } from "../node_modules/react-icons/fi/index.js";
-import i, { css as a } from "styled-components";
-import z from "../assets/icons/RiyalIcon.js";
-import { CurrencyContainer as k } from "../styles/Currency.styles.js";
-import C from "../assets/svg/Riyal.svg.js";
-import R from "./Badge.js";
+import { FiCheck as B, FiX as T } from "../node_modules/react-icons/fi/index.js";
+import o, { css as p } from "styled-components";
+import m from "../assets/icons/RiyalIcon.js";
+import { CurrencyContainer as H } from "../styles/Currency.styles.js";
+import I from "../assets/svg/Riyal.svg.js";
+import P from "./Badge.js";
 import d from "./Button.js";
-import n from "./Typography.js";
-const F = {
-  transparent: a`
+import a from "./Typography.js";
+const W = {
+  transparent: p`
     background: rgba(255, 255, 255, 0.72);
     border: 1px solid ${({ theme: e }) => e.colors.grey.n200};
     box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
   `,
-  purple: a`
+  purple: p`
     background: linear-gradient(360deg, #ffffff 63.12%, #f1eeff 100%);
     border: 1px solid #e3deff;
     box-shadow:
       0px 4px 6px -2px #10182808,
       0px 12px 16px -4px #10182814;
   `
-}, S = i.div`
+}, E = o.div`
   width: 100%;
   max-width: 28.458rem;
   border-radius: ${({ theme: e }) => e.borderRadius.xl};
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  ${({ $variant: e }) => F[e]};
-`, B = i.div`
+  ${({ $variant: e }) => W[e]};
+`, L = o.div`
   padding: 2rem;
   display: flex;
   flex-direction: column;
   gap: ${({ theme: e }) => e.spacing.sm};
   border-bottom: 1px solid ${({ theme: e }) => e.colors.grey.n200};
-`, T = i.div`
+`, D = o.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: ${({ theme: e }) => e.spacing.m};
   flex-wrap: wrap;
-`, H = i(n)`
+`, V = o(a)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: 600;
   font-size: ${({ theme: e }) => {
-  var o;
-  return (o = e.typography.sizes) == null ? void 0 : o.s5;
+  var r;
+  return (r = e.typography.sizes) == null ? void 0 : r.s5;
 }};
   line-height: 1.75rem;
   color: ${({ theme: e }) => e.colors.grey.n400};
-`, P = i.div`
+`, M = o.div`
   display: flex;
   flex-direction: column;
   gap: 0.85rem;
-`, E = i.div`
+`, N = o.div`
   display: flex;
   align-items: center;
   gap: ${({ theme: e }) => e.spacing.xs};
   flex-wrap: wrap;
-`, I = i.div`
+`, U = o.div`
   display: flex;
   align-items: baseline;
   gap: ${({ theme: e }) => e.spacing.xxs};
-`, D = i(z).attrs(({ theme: e }) => ({
+`, X = o(m).attrs(({ theme: e }) => ({
   color: e.colors.grey.n350,
   width: "18",
   height: "20"
-}))``, L = i.span`
+}))``, q = o.span`
   font-family: ${({ theme: e }) => e.fonts.english};
   font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
   font-size: 2.706rem;
   line-height: 3.158rem;
-  color: ${({ $color: e, theme: o }) => e ?? o.colors.grey.n800};
-`, V = i.span`
+  color: ${({ $color: e, theme: r }) => e ?? r.colors.grey.n800};
+`, G = o.span`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: ${({ theme: e }) => e.typography.weights.regular};
   font-size: ${({ theme: e }) => {
-  var o;
-  return (o = e.typography.sizes) == null ? void 0 : o.s5;
+  var r;
+  return (r = e.typography.sizes) == null ? void 0 : r.s5;
 }};
   line-height: 1.804rem;
-  color: ${({ $color: e, theme: o }) => e ?? o.colors.grey.n800};
-`, W = i(n)`
+  color: ${({ $color: e, theme: r }) => e ?? r.colors.grey.n800};
+`, J = o(a)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: ${({ theme: e }) => e.typography.weights.regular};
   font-size: ${({ theme: e }) => {
-  var o;
-  return (o = e.typography.sizes) == null ? void 0 : o.s4;
+  var r;
+  return (r = e.typography.sizes) == null ? void 0 : r.s4;
 }};
   line-height: ${({ theme: e }) => e.typography.lineHeights.m};
   color: ${({ theme: e }) => e.colors.grey.n400};
-`, M = i.div`
+`, K = o.div`
   padding: 2rem 2rem 2.5rem 2rem;
   display: flex;
   flex-direction: column;
   gap: ${({ theme: e }) => e.spacing.m};
-`, N = i(n)`
+`, Q = o(a)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
   font-size: ${({ theme: e }) => {
-  var o;
-  return (o = e.typography.sizes) == null ? void 0 : o.s4;
+  var r;
+  return (r = e.typography.sizes) == null ? void 0 : r.s4;
 }};
   line-height: 0.7rem;
   color: ${({ theme: e }) => e.colors.grey.n650};
   text-transform: uppercase;
-`, U = i(n)`
+`, Y = o(a)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: 500;
   font-size: ${({ theme: e }) => {
-  var o;
-  return (o = e.typography.sizes) == null ? void 0 : o.s4;
+  var r;
+  return (r = e.typography.sizes) == null ? void 0 : r.s4;
 }};
   line-height: ${({ theme: e }) => e.typography.lineHeights.m};
   color: ${({ theme: e }) => e.colors.grey.n400};
-`, X = i.div`
+`, Z = o.div`
   display: flex;
   align-items: center;
   gap: ${({ theme: e }) => e.spacing.xs};
-`, q = i.span`
+`, _ = o.span`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: ${({ theme: e }) => e.typography.weights.bold};
   font-size: ${({ theme: e }) => e.typography.sizes.s9};
   line-height: ${({ theme: e }) => e.typography.lineHeights.xl};
   letter-spacing: ${({ theme: e }) => e.typography.letterSpacings.balancedNarrow};
   color: ${({ theme: e }) => e.colors.grey.n350};
-`, G = i.span`
+`, O = o.span`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: ${({ theme: e }) => e.typography.weights.regular};
   font-size: ${({ theme: e }) => e.typography.sizes.s4};
   line-height: ${({ theme: e }) => e.typography.lineHeights.m};
   color: ${({ theme: e }) => e.colors.grey.n350};
-`, J = i.ul`
+`, A = o.ul`
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: ${({ theme: e }) => e.spacing.s};
-`, K = i.li`
+`, ee = o.li`
   display: flex;
   align-items: center;
   gap: ${({ theme: e }) => e.spacing.xs};
-`, O = i.span`
+`, ie = o.span`
   width: 1rem;
   height: 1rem;
   border-radius: 50%;
@@ -157,23 +157,23 @@ const F = {
     height: 0.7rem;
   }
 
-  ${({ theme: e, $variant: o }) => o === "included" ? a`
+  ${({ theme: e, $variant: r }) => r === "included" ? p`
           border: 1px solid ${e.colors.secondary.green.n450};
           color: ${e.colors.secondary.green.n450};
-        ` : a`
+        ` : p`
           border: 1px solid ${e.colors.secondary.pink.n450};
           color: ${e.colors.secondary.pink.n450};
         `}
-`, Q = i(n)`
+`, re = o(a)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: 400;
   font-size: ${({ theme: e }) => {
-  var o;
-  return (o = e.typography.sizes) == null ? void 0 : o.s3;
+  var r;
+  return (r = e.typography.sizes) == null ? void 0 : r.s3;
 }};
   line-height: ${({ theme: e }) => e.typography.lineHeights.m};
   color: ${({ theme: e }) => e.colors.grey.n400};
-`, Y = i.div`
+`, oe = o.div`
   width: 100%;
   margin-top: 1rem;
   display: flex;
@@ -183,57 +183,136 @@ const F = {
   button {
     width: 100%;
   }
-`, ne = ({
+`, xe = ({
   title: e,
-  price: o,
-  description: f,
-  secondaryPrice: p,
-  features: x,
-  variant: y = "transparent",
-  badges: c = [],
-  showPrimaryAction: m = !1,
+  price: r,
+  description: y,
+  secondaryPrice: c,
+  features: $,
+  variant: u = "transparent",
+  badges: h = [],
+  showPrimaryAction: b = !1,
   primaryAction: s,
-  showSecondaryAction: $ = !1,
-  secondaryAction: t,
-  showFeatures: u = !0,
-  featuresTitle: b = "FEATURES",
-  featuresDescription: w = "Everything in our free plan plus....."
-}) => /* @__PURE__ */ r.jsxs(S, { $variant: y, children: [
-  /* @__PURE__ */ r.jsxs(B, { children: [
-    /* @__PURE__ */ r.jsxs(T, { children: [
-      /* @__PURE__ */ r.jsx(H, { children: e }),
-      c.length > 0 && /* @__PURE__ */ r.jsx(E, { children: c.map((l, g) => /* @__PURE__ */ r.jsx(R, { label: l.label, bgColor: l.bgColor, color: l.color }, `${l.label}-${g}`)) })
+  showSecondaryAction: j = !1,
+  secondaryAction: l,
+  showFeatures: w = !0,
+  featuresTitle: v = "FEATURES",
+  featuresDescription: z = "Everything in our free plan plus.....",
+  showAddons: C = !1,
+  selectedAddon: k = "Without",
+  setSelectedAddon: g,
+  addOnsData: f = [],
+  addonsTitle: F = "Personal Accountant",
+  addonsOptionalLabel: R = "optional",
+  addonsMonthlyLabel: S = "monthly"
+}) => /* @__PURE__ */ i.jsxs(E, { $variant: u, children: [
+  /* @__PURE__ */ i.jsxs(L, { children: [
+    /* @__PURE__ */ i.jsxs(D, { children: [
+      /* @__PURE__ */ i.jsx(V, { children: e }),
+      h.length > 0 && /* @__PURE__ */ i.jsx(N, { children: h.map((t, n) => /* @__PURE__ */ i.jsx(P, { label: t.label, bgColor: t.bgColor, color: t.color }, `${t.label}-${n}`)) })
     ] }),
-    /* @__PURE__ */ r.jsxs(I, { children: [
-      /* @__PURE__ */ r.jsx(k, { src: C, alt: "Riyal" }),
-      /* @__PURE__ */ r.jsx(L, { $color: o.color, children: o.amount }),
-      /* @__PURE__ */ r.jsx(V, { $color: o.periodColor, children: o.period ?? "/ Month" })
+    /* @__PURE__ */ i.jsxs(U, { children: [
+      /* @__PURE__ */ i.jsx(H, { src: I, alt: "Riyal" }),
+      /* @__PURE__ */ i.jsx(q, { $color: r.color, children: r.amount }),
+      /* @__PURE__ */ i.jsx(G, { $color: r.periodColor, children: r.period ?? "/ Month" })
     ] }),
-    p && /* @__PURE__ */ r.jsxs(X, { children: [
-      /* @__PURE__ */ r.jsx(D, {}),
-      /* @__PURE__ */ r.jsx(q, { children: p.amount }),
-      /* @__PURE__ */ r.jsx(G, { children: p.label })
+    c && /* @__PURE__ */ i.jsxs(Z, { children: [
+      /* @__PURE__ */ i.jsx(X, {}),
+      /* @__PURE__ */ i.jsx(_, { children: c.amount }),
+      /* @__PURE__ */ i.jsx(O, { children: c.label })
     ] }),
-    /* @__PURE__ */ r.jsx(W, { children: f }),
-    /* @__PURE__ */ r.jsxs(Y, { children: [
-      m && /* @__PURE__ */ r.jsx(d, { variant: (s == null ? void 0 : s.variant) ?? "primary", onClick: s == null ? void 0 : s.onPrimaryActionClick, children: s == null ? void 0 : s.label }),
-      $ && /* @__PURE__ */ r.jsx(d, { variant: (t == null ? void 0 : t.variant) ?? "light-primary", onClick: t == null ? void 0 : t.onSecondaryActionClick, children: t == null ? void 0 : t.label })
+    /* @__PURE__ */ i.jsx(J, { children: y }),
+    /* @__PURE__ */ i.jsxs(oe, { children: [
+      b && /* @__PURE__ */ i.jsx(d, { variant: (s == null ? void 0 : s.variant) ?? "primary", onClick: s == null ? void 0 : s.onPrimaryActionClick, children: s == null ? void 0 : s.label }),
+      j && /* @__PURE__ */ i.jsx(d, { variant: (l == null ? void 0 : l.variant) ?? "light-primary", onClick: l == null ? void 0 : l.onSecondaryActionClick, children: l == null ? void 0 : l.label })
+    ] }),
+    C && f.length > 0 && /* @__PURE__ */ i.jsxs("div", { children: [
+      /* @__PURE__ */ i.jsx("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "10px" }, children: /* @__PURE__ */ i.jsxs("div", { children: [
+        /* @__PURE__ */ i.jsx("span", { style: { fontSize: "13px", fontWeight: 600, color: "#111827" }, children: F }),
+        /* @__PURE__ */ i.jsx("span", { style: { fontSize: "11px", color: "#9ca3af", marginLeft: "6px" }, children: R })
+      ] }) }),
+      /* @__PURE__ */ i.jsx(
+        "div",
+        {
+          style: {
+            backgroundColor: "#f2f4f7",
+            borderRadius: "9px",
+            padding: "4px",
+            display: "grid",
+            gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
+            gap: "4px"
+          },
+          children: f.map((t) => {
+            const n = k === t.id;
+            return /* @__PURE__ */ i.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => g == null ? void 0 : g(t.id),
+                style: {
+                  padding: "8px 6px 7px",
+                  border: n ? "1px solid #d0d5dd" : "1px solid transparent",
+                  backgroundColor: n ? "#ffffff" : "transparent",
+                  color: n ? "#1d2939" : "#98a2b3",
+                  borderRadius: "6px",
+                  cursor: "pointer",
+                  fontWeight: n ? 700 : 600,
+                  fontSize: "12px",
+                  lineHeight: 1.1,
+                  transition: "all 0.18s ease",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: t.baseFare > 0 ? "2px" : "0",
+                  minHeight: "42px",
+                  boxShadow: n ? "0 1px 2px rgba(16, 24, 40, 0.08)" : "none"
+                },
+                children: [
+                  /* @__PURE__ */ i.jsx("span", { children: t.titleEn }),
+                  t.baseFare > 0 && /* @__PURE__ */ i.jsxs(
+                    "span",
+                    {
+                      style: {
+                        fontSize: "10px",
+                        marginTop: "2px",
+                        color: n ? "#101828" : "#667085",
+                        fontWeight: 700,
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: "2px"
+                      },
+                      children: [
+                        /* @__PURE__ */ i.jsx(m, { width: "9", height: "9", color: n ? "#101828" : "#667085" }),
+                        t.baseFare,
+                        " ",
+                        S
+                      ]
+                    }
+                  )
+                ]
+              },
+              t.id
+            );
+          })
+        }
+      )
     ] })
   ] }),
-  u && /* @__PURE__ */ r.jsxs(M, { children: [
-    /* @__PURE__ */ r.jsxs(P, { children: [
-      /* @__PURE__ */ r.jsx(N, { children: b }),
-      /* @__PURE__ */ r.jsx(U, { children: w })
+  w && /* @__PURE__ */ i.jsxs(K, { children: [
+    /* @__PURE__ */ i.jsxs(M, { children: [
+      /* @__PURE__ */ i.jsx(Q, { children: v }),
+      /* @__PURE__ */ i.jsx(Y, { children: z })
     ] }),
-    /* @__PURE__ */ r.jsx(J, { children: x.map((l, g) => {
-      const h = l.variant ?? "included";
-      return /* @__PURE__ */ r.jsxs(K, { children: [
-        /* @__PURE__ */ r.jsx(O, { $variant: h, children: h === "included" ? /* @__PURE__ */ r.jsx(j, {}) : /* @__PURE__ */ r.jsx(v, {}) }),
-        /* @__PURE__ */ r.jsx(Q, { children: l.label })
-      ] }, `${l.label}-${g}`);
+    /* @__PURE__ */ i.jsx(A, { children: $.map((t, n) => {
+      const x = t.variant ?? "included";
+      return /* @__PURE__ */ i.jsxs(ee, { children: [
+        /* @__PURE__ */ i.jsx(ie, { $variant: x, children: x === "included" ? /* @__PURE__ */ i.jsx(B, {}) : /* @__PURE__ */ i.jsx(T, {}) }),
+        /* @__PURE__ */ i.jsx(re, { children: t.label })
+      ] }, `${t.label}-${n}`);
     }) })
   ] })
 ] });
 export {
-  ne as default
+  xe 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};
@@ -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,7 +1,7 @@
 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 { useState as v, useEffect as E, useMemo as q } from "react";
+import { useTranslation as G } from "react-i18next";
+import J from "../Spinner.js";
 import Q from "../Pagination.js";
 import U from "../Typography.js";
 import L, { CheckboxCell as X } from "./components/CellComponents.js";
@@ -9,22 +9,22 @@ 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,
+  data: c,
   keyField: r,
-  selectable: u = !1,
-  onRowSelect: x,
-  rowActions: m,
+  selectable: j = !1,
+  onRowSelect: m,
+  rowActions: x,
   stickyHeader: $ = !1,
   loading: a = !1,
   emptyStateMessage: y,
   pagination: n,
   onRowClick: f,
-  rowClassName: j,
+  rowClassName: u,
   isRowDisabled: d,
   breakpoint: I = "md",
   alignHeader: C = "start"
 }) {
-  const [h, p] = v([]), [S, g] = v(I), [_, B] = v(null), { t: K } = J();
+  const [h, p] = v([]), [S, g] = v(I), [N, B] = v(null), { t: _ } = G();
   E(() => {
     const e = () => {
       B(null);
@@ -39,36 +39,36 @@ function de({
     };
     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 P = q(() => T.filter((e) => typeof e.hidden == "function" ? !e.hidden(S) : !e.hidden), [T, S]), K = () => {
+    h.length === c.length ? p([]) : p([...c]), m && m(h.length === c.length ? [] : [...c]);
+  }, M = (e) => {
     const l = h.filter((s) => e[r] === s[r]);
     return l && l.length > 0;
-  }, q = (e) => {
+  }, V = (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);
+    l ? s = h.filter((o) => o[r] !== e[r]) : s = [...h, e], p(s), m && m(s);
   };
   return /* @__PURE__ */ t.jsxs(Y, { children: [
-    a && /* @__PURE__ */ t.jsx(Z, { children: /* @__PURE__ */ t.jsx(N, { size: "3rem" }) }),
+    a && /* @__PURE__ */ t.jsx(Z, { children: /* @__PURE__ */ t.jsx(J, { size: "3rem" }) }),
     /* @__PURE__ */ t.jsxs(H, { children: [
       /* @__PURE__ */ t.jsx(D, { children: /* @__PURE__ */ t.jsxs(k, { children: [
         /* @__PURE__ */ t.jsx(
           O,
           {
-            data: i,
-            handleSelectAll: M,
+            data: c,
+            handleSelectAll: K,
             selectedRows: h,
             visibleColumns: P,
             alignHeader: C,
             rowActions: void 0,
             stickyHeader: $,
-            selectable: u,
+            selectable: j,
             loading: a
           }
         ),
-        /* @__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(z, { children: c.length === 0 ? /* @__PURE__ */ t.jsx("tr", { children: /* @__PURE__ */ t.jsx("td", { colSpan: (j ? 1 : 0) + P.length, children: /* @__PURE__ */ t.jsx(F, { children: /* @__PURE__ */ t.jsx(U, { variant: "mdText", children: y ?? _("NO_DATA_AVAILABLE") }) }) }) }) : c.map((e, l) => {
+          const s = (d == null ? void 0 : d(e)) ?? !1, o = h.some((i) => i[r] === e[r]), A = e[r];
           return /* @__PURE__ */ t.jsxs(
             W,
             {
@@ -76,55 +76,56 @@ function de({
               $disabled: s,
               $clickable: !!f && !s,
               onClick: () => !s && (f == null ? void 0 : f(e)),
-              className: (j == null ? void 0 : j(e, l)) ?? "",
+              className: (u == null ? void 0 : u(e, l)) ?? "",
               children: [
-                u && /* @__PURE__ */ t.jsx(b, { $align: "center", $isFirstColumn: !0, children: /* @__PURE__ */ t.jsx(
+                j && /* @__PURE__ */ t.jsx(b, { $align: "center", $isFirstColumn: !0, children: /* @__PURE__ */ t.jsx(
                   X,
                   {
                     checkBoxOptions: {
-                      checked: V(e),
+                      checked: M(e),
                       $variant: "primary",
                       $disabled: s,
                       $size: "sm",
-                      onChange: () => !s && q(e)
+                      onChange: () => !s && V(e)
                     }
                   }
                 ) }),
-                P.map((c) => /* @__PURE__ */ t.jsx(b, { $align: c.align, children: /* @__PURE__ */ t.jsx(
+                P.map((i) => /* @__PURE__ */ t.jsx(b, { $align: i.align, children: /* @__PURE__ */ t.jsx(
                   L,
                   {
-                    column: c,
+                    column: i,
                     row: e,
-                    type: c.cellType ?? "text",
-                    align: c.align,
-                    width: c.width ?? "",
-                    minWidth: c.minWidth ?? "",
-                    maxWidth: c.maxWidth ?? ""
+                    type: i.cellType ?? "text",
+                    align: i.align,
+                    className: i.className,
+                    width: i.width ?? "",
+                    minWidth: i.minWidth ?? "",
+                    maxWidth: i.maxWidth ?? ""
                   }
-                ) }, `${A}-${c.id}`))
+                ) }, `${A}-${i.id}`))
               ]
             },
             A
           );
         }) })
       ] }) }),
-      m && m.length > 0 && /* @__PURE__ */ t.jsxs(R, { children: [
+      x && x.length > 0 && /* @__PURE__ */ t.jsxs(R, { children: [
         /* @__PURE__ */ t.jsx(
           O,
           {
-            data: i,
+            data: c,
             handleSelectAll: () => {
             },
             selectedRows: h,
             visibleColumns: [],
             alignHeader: C,
-            rowActions: m,
+            rowActions: x,
             stickyHeader: $,
             selectable: !1,
             loading: a
           }
         ),
-        /* @__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) => {
+        /* @__PURE__ */ t.jsx(z, { children: c.length === 0 ? /* @__PURE__ */ t.jsx("tr", { children: /* @__PURE__ */ t.jsx("td", { children: /* @__PURE__ */ t.jsx("div", { style: { height: "3.5rem" } }) }) }) : c.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,
@@ -133,8 +134,8 @@ function de({
               type: "icon",
               iconOptions: {
                 keyField: r,
-                rowActions: m,
-                activeDropdown: _,
+                rowActions: x,
+                activeDropdown: N,
                 setActiveDropdown: B
               }
             }

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;

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-bootstrap/esm/Alert.js

@@ -1,4 +1,4 @@
-import k from "../../../_virtual/index.js";
+import k from "../../../_virtual/index3.js";
 import * as v from "react";
 import N from "../../uncontrollable/lib/esm/hook.js";
 import "../../../_virtual/browser.js";