@base-framework/ui 1.0.76 → 1.0.79

package/dist/index.es.js

@@ -5,7 +5,7 @@ import { V as w, a as U } from "./veil-D4dRxILB.js";
 import { Icons as R } from "./icons.es.js";
 import { A as G, B as V, C as j, z as q, u as z, v as J, w as _, D as K, j as Q, k as X, G as Y, E as Z, s as $, c as aa, a as sa, b as ea, i as oa, g as ta, e as ra, h as na, F as ia, d as la, f as pa, t as ua, M as ma, l as da, N as ga, P as Ta, p as ca, q as Ca, S as ba, n as Da, o as Sa, T as Ia, x as Ba, y as Pa, m as Fa, r as Ma } from "./confirmation-DgARq0AK.js";
 import { A as Na, b as va, C as fa, D as xa, a as ha, F as ya, M as Wa, P as La, c as Aa, g as Ha, p as wa } from "./calendar-BDqm833e.js";
-import { B as Oa, n as Ra, C as Ea, j as Ga, D as Va, l as ja, H as qa, I as za, N as Ja, O as _a, P as Ka, S as Qa, m as Xa, r as Ya, q as Za, o as $a, p as as, T as ss, k as es, U as os, W as ts, f as rs, h as ns, i as is, c as ls, d as ps, b as us, e as ms, a as ds, g as gs } from "./signature-panel-DkDboZSd.js";
+import { B as Oa, n as Ra, C as Ea, j as Ga, D as Va, l as ja, H as qa, I as za, N as Ja, O as _a, P as Ka, S as Qa, m as Xa, r as Ya, q as Za, o as $a, p as as, T as ss, k as es, U as os, W as ts, f as rs, h as ns, i as is, c as ls, d as ps, b as us, e as ms, a as ds, g as gs } from "./signature-panel-DjT5AthY.js";
 import { B as cs, I as Cs, M as bs, d as Ds, e as Ss, g as Is, N as Bs, b as Ps, a as Fs, f as Ms, P as ks, c as Ns, S as vs, T as fs } from "./mobile-nav-wrapper-BE_hr65B.js";
 import { B as hs, a as ys, C as Ws, F as Ls, b as As, c as Hs, M as ws, P as Us, S as Os } from "./sidebar-menu-page-nCAVFk3R.js";
 import { A as Es, F as Gs, M as Vs, a as js, T as qs } from "./aside-template-McEj_Gxc.js";

package/dist/organisms.es.js

@@ -1,4 +1,4 @@
-import { B as s, n as o, C as t, j as r, D as l, l as n, H as i, I as b, N as d, O as v, P as g, S as p, m as u, r as N, q as k, o as D, p as C, T, k as c, U as M, W as B, f as m, h as y, i as W, c as h, d as H, b as P, e as S, a as f, g as x } from "./signature-panel-DkDboZSd.js";
+import { B as s, n as o, C as t, j as r, D as l, l as n, H as i, I as b, N as d, O as v, P as g, S as p, m as u, r as N, q as k, o as D, p as C, T, k as c, U as M, W as B, f as m, h as y, i as W, c as h, d as H, b as P, e as S, a as f, g as x } from "./signature-panel-DjT5AthY.js";
 import { b as L, C as O, D as F, a as U, F as G, M as j, c as q, p as w } from "./calendar-BDqm833e.js";
 import { B as A, I as E, M as J, d as K, e as Q, g as R, N as V, b as X, a as Y, f as Z, P as _, c as $, S as aa, T as ea } from "./mobile-nav-wrapper-BE_hr65B.js";
 export {

package/dist/{signature-panel-DkDboZSd.js → signature-panel-DjT5AthY.js}

@@ -1,10 +1,10 @@
-import { Button as y, Div as o, On as E, Span as v, Th as P, UseParent as H, I as Q, Thead as X, Tr as q, Table as R, P as m, Li as D, Time as K, Nav as S, Ul as b, Section as M, Canvas as G } from "@base-framework/atoms";
-import { Atom as d, Component as u, Data as C, DateTime as V, Jot as O, router as x, NavLink as z, DataTracker as N, base as I, Dom as B } from "@base-framework/base";
-import { B as L, I as $ } from "./buttons-CVEwmPAi.js";
+import { Button as y, Div as o, On as F, Span as v, Th as R, UseParent as E, I as H, Thead as Q, Tr as X, Table as W, P as p, Li as D, Time as q, Nav as S, Ul as b, Section as P, Canvas as K } from "@base-framework/atoms";
+import { Atom as d, Component as h, Data as L, DateTime as G, router as x, NavLink as O, DataTracker as z, Jot as V, base as I, Dom as B } from "@base-framework/base";
+import { B as C, I as N } from "./buttons-CVEwmPAi.js";
 import { Icons as w } from "./icons.es.js";
 import { TableBody as _, ScrollableTableBody as J, List as Z, IntervalTimer as ee } from "@base-framework/organisms";
 import { C as te, I as se, H as ae } from "./inputs-DmJuUwS9.js";
-import { A as ne, P as ie } from "./calendar-BDqm833e.js";
+import { A as ie, P as ne } from "./calendar-BDqm833e.js";
 d((t, e) => ({
   class: "flex items-center px-4 py-2",
   ...t,
@@ -16,7 +16,7 @@ d(({ value: t, label: e }) => y({
   dataSet: ["performance", ["state", t, "active"]],
   click: (s, { state: a }) => a.performance = t
 }, e));
-class Ze extends u {
+class et extends h {
   /**
    * This will declare the props for the compiler.
    *
@@ -41,14 +41,14 @@ const oe = (t) => {
 }, le = (t) => {
   const e = new Date(t.valueOf()), s = (e.getDay() + 6) % 7;
   e.setDate(e.getDate() - s + 3);
-  const a = e.getFullYear(), n = new Date(a, 0, 4);
-  n.setDate(n.getDate() - (n.getDay() + 6) % 7);
-  const i = Math.ceil((e - n) / 6048e5) + 1;
-  return i > 52 && !oe(a) ? {
+  const a = e.getFullYear(), i = new Date(a, 0, 4);
+  i.setDate(i.getDate() - (i.getDay() + 6) % 7);
+  const n = Math.ceil((e - i) / 6048e5) + 1;
+  return n > 52 && !oe(a) ? {
     weekNumber: 1,
     year: a + 1
   } : {
-    weekNumber: i,
+    weekNumber: n,
     year: a
   };
 }, re = (t, e, s) => {
@@ -56,55 +56,55 @@ const oe = (t) => {
   const a = new Date(t, e, 0).getDate();
   return Array.from(
     { length: s },
-    (n, i) => new Date(t, e - 1, a - s + i + 1)
+    (i, n) => new Date(t, e - 1, a - s + n + 1)
   );
-}, ce = (t, e, s) => Array.from({ length: s }, (a, n) => new Date(t, e + 1, n + 1)), T = (t, e) => {
-  const s = new Date(e, 0, 4), a = (s.getDay() + 6) % 7, n = new Date(s);
-  n.setDate(s.getDate() - a);
-  const i = new Date(n);
-  return i.setDate(n.getDate() + (t - 1) * 7), i;
-}, et = (t, e) => {
-  const s = new Date(t, e, 1).getDay(), a = new Date(t, e + 1, 0).getDate(), n = [];
-  let i = [];
+}, ce = (t, e, s) => Array.from({ length: s }, (a, i) => new Date(t, e + 1, i + 1)), T = (t, e) => {
+  const s = new Date(e, 0, 4), a = (s.getDay() + 6) % 7, i = new Date(s);
+  i.setDate(s.getDate() - a);
+  const n = new Date(i);
+  return n.setDate(i.getDate() + (t - 1) * 7), n;
+}, tt = (t, e) => {
+  const s = new Date(t, e, 1).getDay(), a = new Date(t, e + 1, 0).getDate(), i = [];
+  let n = [];
   for (let l = 1 - s; l <= a; l++) {
-    const h = new Date(t, e, l);
-    i.push(l > 0 ? h : null), (i.length === 7 || l === a) && (n.push([...i]), i = []);
+    const u = new Date(t, e, l);
+    n.push(l > 0 ? u : null), (n.length === 7 || l === a) && (i.push([...n]), n = []);
   }
-  return n;
-}, tt = (t, e) => {
+  return i;
+}, st = (t, e) => {
   const s = new Date(t, e + 1, 0).getDate(), a = [];
-  let n = [];
-  for (let i = 1; i <= s; i++)
-    n.push(new Date(t, e, i)), n.length === 7 && (a.push(n), n = []);
-  return n.length > 0 && a.push(n), a;
+  let i = [];
+  for (let n = 1; n <= s; n++)
+    i.push(new Date(t, e, n)), i.length === 7 && (a.push(i), i = []);
+  return i.length > 0 && a.push(i), a;
 }, de = (t, e, s) => {
   const a = /* @__PURE__ */ new Date();
   return a.getDate() === t && a.getMonth() === e && a.getFullYear() === s;
-}, he = ({ day: t, month: e, year: s, weekNumber: a, selectWeek: n }) => {
-  const i = de(t, e, s);
+}, he = ({ day: t, month: e, year: s, weekNumber: a, selectWeek: i }) => {
+  const n = de(t, e, s);
   return y({
     text: t || "",
     disabled: !t,
     class: `
 			px-2 py-1 text-center rounded-md
-			${i ? "bg-accent text-accent-foreground" : ""}
+			${n ? "bg-accent text-accent-foreground" : ""}
 			hover:bg-primary hover:text-primary-foreground
 		`,
-    click: () => n(a, s)
+    click: () => i(a, s)
   });
 }, ue = (t, e) => {
-  const s = new Date(t, e, 1).getDay(), a = new Date(t, e + 1, 0).getDate(), n = re(t, e, s), i = Array.from({ length: a }, (r, p) => new Date(t, e, p + 1)), l = (n.length + i.length) % 7, h = l === 0 ? 0 : 7 - l, c = ce(t, e, h), f = [...n, ...i, ...c], g = [];
+  const s = new Date(t, e, 1).getDay(), a = new Date(t, e + 1, 0).getDate(), i = re(t, e, s), n = Array.from({ length: a }, (r, m) => new Date(t, e, m + 1)), l = (i.length + n.length) % 7, u = l === 0 ? 0 : 7 - l, c = ce(t, e, u), f = [...i, ...n, ...c], g = [];
   for (let r = 0; r < f.length; r += 7) {
-    const p = f.slice(r, r + 7), k = p.find((F) => F) || new Date(t, e, 1), { weekNumber: U, year: Y } = le(k);
+    const m = f.slice(r, r + 7), k = m.find((Y) => Y) || new Date(t, e, 1), { weekNumber: A, year: U } = le(k);
     g.push({
-      weekNumber: U,
-      year: Y,
-      days: p
+      weekNumber: A,
+      year: U,
+      days: m
     });
   }
   return g;
-}, fe = ({ selectWeek: t }) => E("month", (e, s, { data: a }) => {
-  const { year: n, month: i, currentDate: l } = a, h = ue(n, i);
+}, fe = ({ selectWeek: t }) => F("month", (e, s, { data: a }) => {
+  const { year: i, month: n, currentDate: l } = a, u = ue(i, n);
   return o(
     { class: "grid grid-cols-8 gap-1 text-sm px-4 py-2" },
     [
@@ -119,7 +119,7 @@ const oe = (t) => {
         )
       ),
       // Render each "week" row
-      ...h.map(
+      ...u.map(
         ({ weekNumber: c, days: f, year: g }) => o({
           class: "grid grid-cols-8 col-span-8 items-center ring-primary rounded-sm px-1",
           onSet: ["currentWeek", {
@@ -154,7 +154,7 @@ const oe = (t) => {
       )
     ]
   );
-}), W = ({ label: t, click: e }) => L(
+}), M = ({ label: t, click: e }) => C(
   {
     class: `
 			inline-flex items-center justify-center h-7 w-7 bg-transparent p-0
@@ -169,16 +169,16 @@ const oe = (t) => {
   }
 ), ge = ({ next: t, previous: e }) => o({ class: "flex flex-auto min-h-12 text-sm font-medium relative justify-center items-center" }, [
   v("[[monthName]] [[year]]"),
-  W({
+  M({
     label: "Previous",
     click: e
   }),
-  W({
+  M({
     label: "Next",
     click: t
   })
 ]);
-class st extends u {
+class at extends h {
   /**
    * This will declare the props for the compiler.
    *
@@ -194,7 +194,7 @@ class st extends u {
    */
   setData() {
     const e = /* @__PURE__ */ new Date(), s = this.selectedWeek || this.calculateCurrentWeek(e), a = T(s, e.getFullYear());
-    return new C({
+    return new L({
       monthName: this.getMonthName(a.getMonth()),
       year: a.getFullYear(),
       month: a.getMonth(),
@@ -221,8 +221,8 @@ class st extends u {
   calculateCurrentWeek(e) {
     const s = new Date(e.valueOf()), a = (e.getDay() + 6) % 7;
     s.setDate(s.getDate() - a + 3);
-    const n = s.valueOf();
-    return s.setMonth(0, 1), s.getDay() !== 4 && s.setMonth(0, 1 + (4 - s.getDay() + 7) % 7), 1 + Math.ceil((n - s) / 6048e5);
+    const i = s.valueOf();
+    return s.setMonth(0, 1), s.getDay() !== 4 && s.setMonth(0, 1 + (4 - s.getDay() + 7) % 7), 1 + Math.ceil((i - s) / 6048e5);
   }
   /**
    * Gets the name of the month.
@@ -231,7 +231,7 @@ class st extends u {
    * @returns {string}
    */
   getMonthName(e) {
-    return V.monthNames[e];
+    return G.monthNames[e];
   }
   /**
    * Updates the calendar to show the previous month.
@@ -296,26 +296,26 @@ class st extends u {
     ]);
   }
 }
-const pe = (t, e) => {
+const me = (t, e) => {
   const s = t.toggleAllSelectedRows();
   e.state.checked = !s;
-}, me = (t) => P({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class || ""}` }, [
-  H((e) => new te({ class: "mr-2", onChange: (s, a) => pe(e, a) }))
-]), we = ({ align: t, sortable: e, key: s, label: a, sort: n, class: i }) => {
+}, pe = (t) => R({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class || ""}` }, [
+  E((e) => new te({ class: "mr-2", onChange: (s, a) => me(e, a) }))
+]), we = ({ align: t, sortable: e, key: s, label: a, sort: i, class: n }) => {
   const l = t || "justify-start";
-  return P({
-    class: `cursor-pointer py-3 px-4 text-base ${i || ""}`,
-    click: e && (() => n(s))
+  return R({
+    class: `cursor-pointer py-3 px-4 text-base ${n || ""}`,
+    click: e && (() => i(s))
   }, [
     o({ class: `flex flex-auto w-full items-center ${l}` }, [
       v(a),
-      e && Q({ class: "ml-2", html: w.arrows.upDown })
+      e && H({ class: "ml-2", html: w.arrows.upDown })
     ])
   ]);
-}, j = (t) => X([
-  q({
+}, $ = (t) => Q([
+  X({
     class: "text-muted-foreground border-b",
-    map: [t.headers, (e) => e.label === "checkbox" ? me({ toggle: t.toggle }) : we({
+    map: [t.headers, (e) => e.label === "checkbox" ? pe({ toggle: t.toggle }) : we({
       align: e.align,
       sortable: e.sortable,
       key: e.key,
@@ -327,158 +327,169 @@ const pe = (t, e) => {
   cache: "list",
   key: t,
   items: e,
-  rowItem: (n) => a(n, s),
+  rowItem: (i) => a(i, s),
   class: "divide-y divide-border"
-}), ke = O(
-  {
-    /**
-     * Initializes component data.
-     *
-     * @returns {Data}
-     */
-    setData() {
-      return new C({
-        selectedRows: [],
-        selected: !1
-      });
-    },
-    /**
-     * This will toggle all selected rows.
-     *
-     * @returns {boolean}
-     */
-    toggleAllSelectedRows() {
-      const t = this.list.getRows(), e = this.data.selectedRows.length === t.length, s = e ? [] : t;
-      return this.data.selectedRows = s, this.updateSelected(), this.updateTable(!e), e;
-    },
-    /**
-     * This will update the selected state.
-     *
-     * @returns {void}
-     */
-    updateSelected() {
-      const t = this.data.get("selectedRows");
-      this.data.selected = t.length > 0;
-    },
-    /**
-     * This will get the selected rows.
-     *
-     * @returns {Array<object>}
-     */
-    getSelectedRows() {
-      return this.data.get("selectedRows");
-    },
-    /**
-     * This will update the table rows.
-     *
-     * @protected
-     * @param {boolean} selected
-     * @returns {void}
-     */
-    updateTable(t) {
-      const e = this.list.getRows();
-      e.forEach((s) => s.selected = t), this.list.setRows(e);
-    },
-    /**
-     * Handles row selection.
-     *
-     * @param {object} row
-     */
-    selectRow(t) {
-      const e = t.selected ?? !1;
-      t.selected = !e;
-      const s = this.data.get("selectedRows"), a = t.selected ? [...s, t] : s.filter((n) => n !== t);
-      this.data.selectedRows = a, this.updateSelected();
-    },
-    /**
-     * Renders the DataTable component.
-     *
-     * @returns {object}
-     */
-    render() {
-      const t = this.rows, e = this.border !== !1 ? "border" : "";
-      return o({ class: "w-full" }, [
-        o({ class: `w-full rounded-md ${e} overflow-x-auto` }, [
-          R({ class: "w-full" }, [
+});
+class ke extends h {
+  /**
+   * Initializes component data.
+   *
+   * @returns {Data}
+   */
+  setData() {
+    return new L({
+      selectedRows: [],
+      selected: !1
+    });
+  }
+  /**
+   * This will toggle all selected rows.
+   *
+   * @returns {boolean}
+   */
+  toggleAllSelectedRows() {
+    const e = this.list.getRows(), s = this.data.selectedRows.length === e.length, a = s ? [] : e;
+    return this.data.selectedRows = a, this.updateSelected(), this.updateTable(!s), s;
+  }
+  /**
+   * This will update the selected state.
+   *
+   * @returns {void}
+   */
+  updateSelected() {
+    const e = this.data.get("selectedRows");
+    this.data.selected = e.length > 0;
+  }
+  /**
+   * This will get the selected rows.
+   *
+   * @returns {Array<object>}
+   */
+  getSelectedRows() {
+    return this.data.get("selectedRows");
+  }
+  /**
+   * This will update the table rows.
+   *
+   * @protected
+   * @param {boolean} selected
+   * @returns {void}
+   */
+  updateTable(e) {
+    const s = this.list.getRows();
+    s.forEach((a) => a.selected = e), this.list.setRows(s);
+  }
+  /**
+   * Handles row selection.
+   *
+   * @param {object} row
+   */
+  selectRow(e) {
+    const s = e.selected ?? !1;
+    e.selected = !s;
+    const a = this.data.get("selectedRows"), i = e.selected ? [...a, e] : a.filter((n) => n !== e);
+    this.data.selectedRows = i, this.updateSelected();
+  }
+  /**
+   * Renders the DataTable component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const e = this.rows, s = this.border !== !1 ? "border" : "";
+    return o({ class: "w-full" }, [
+      o({ class: `w-full rounded-md ${s} overflow-x-auto` }, [
+        W({ class: "w-full" }, [
+          // @ts-ignore
+          this.headers && $({ headers: this.headers, sort: (a) => this.sortRows(a) }),
+          // @ts-ignore
+          this.customHeader ?? null,
+          be({
+            // @ts-ignore
+            key: this.key,
+            rows: e,
             // @ts-ignore
-            this.headers && j({ headers: this.headers, sort: (s) => this.sortRows(s) }),
+            selectRow: this.selectRow.bind(this),
             // @ts-ignore
-            this.customHeader ?? null,
-            be({
-              // @ts-ignore
-              key: this.key,
-              rows: t,
-              // @ts-ignore
-              selectRow: this.selectRow.bind(this),
-              // @ts-ignore
-              rowItem: this.rowItem
-            })
-          ])
+            rowItem: this.rowItem
+          })
         ])
-      ]);
-    },
-    /**
-     * This will remove items from the list.
-     *
-     * @public
-     * @param {array} items
-     * @returns {void}
-     */
-    remove(t) {
-      this.list.remove(t);
-    },
-    /**
-     * This will set the items in the list.
-     *
-     * @public
-     * @param {array} rows
-     * @returns {void}
-     */
-    setRows(t) {
-      this.list.setRows(t);
-    },
-    /**
-     * This will append items to the list.
-     *
-     * @public
-     * @param {array|object} items
-     * @returns {void}
-     */
-    append(t) {
-      this.list.append(t);
-    },
-    /**
-     * This will mingle the new items with the old items.
-     *
-     * @public
-     * @param {Array<Object>} newItems
-     * @param {boolean} withDelete
-     * @returns {void}
-     */
-    mingle(t, e = !1) {
-      this.list.mingle(t, e);
-    },
-    /**
-     * This will prepend items to the list.
-     *
-     * @public
-     * @param {array|object} items
-     * @returns {void}
-     */
-    prepend(t) {
-      this.list.prepend(t);
-    },
-    /**
-     * This will remove the selected rows.
-     *
-     * @returns {void}
-     */
-    beforeDestroy() {
-      this.data.selectedRows = [];
-    }
+      ])
+    ]);
+  }
+  /**
+   * This will remove items from the list.
+   *
+   * @public
+   * @param {array} items
+   * @returns {void}
+   */
+  remove(e) {
+    this.list.remove(e);
+  }
+  /**
+   * This will set the items in the list.
+   *
+   * @public
+   * @param {array} rows
+   * @returns {void}
+   */
+  setRows(e) {
+    this.list.setRows(e);
+  }
+  /**
+   * This will append items to the list.
+   *
+   * @public
+   * @param {array|object} items
+   * @returns {void}
+   */
+  append(e) {
+    this.list.append(e);
+  }
+  /**
+   * This will mingle the new items with the old items.
+   *
+   * @public
+   * @param {Array<Object>} newItems
+   * @param {boolean} withDelete
+   * @returns {void}
+   */
+  mingle(e, s = !1) {
+    this.list.mingle(e, s);
+  }
+  /**
+   * This will prepend items to the list.
+   *
+   * @public
+   * @param {array|object} items
+   * @returns {void}
+   */
+  prepend(e) {
+    this.list.prepend(e);
   }
-);
-class xe extends ke {
+  /**
+   * This will remove the selected rows.
+   *
+   * @returns {void}
+   */
+  beforeDestroy() {
+    this.data.selectedRows = [];
+  }
+}
+const xe = (t) => new J({
+  cache: "list",
+  scrollContainer: t.scrollContainer,
+  loadMoreItems: t.loadMoreItems,
+  offset: t.offset,
+  limit: t.limit,
+  key: t.key,
+  data: t.data,
+  items: t.items,
+  rowItem: (e) => t.rowItem(e, t.selectRow),
+  class: "divide-y divide-border"
+});
+class ye extends ke {
   /**
    * Renders the DataTable component.
    *
@@ -488,12 +499,12 @@ class xe extends ke {
     const e = this.rows, s = this.border !== !1 ? "border" : "";
     return o({ class: "w-full" }, [
       o({ class: `w-full rounded-md ${s} overflow-x-auto` }, [
-        R({ class: "w-full" }, [
+        W({ class: "w-full" }, [
           // @ts-ignore
-          this.headers && j({ headers: this.headers, sort: (a) => this.sortRows(a) }),
+          this.headers && $({ headers: this.headers, sort: (a) => this.sortRows(a) }),
           // @ts-ignore
           this.customHeader ?? null,
-          new J({
+          xe({
             // @ts-ignore
             scrollContainer: this.scrollContainer,
             // @ts-ignore
@@ -505,8 +516,6 @@ class xe extends ke {
             // @ts-ignore
             class: this.class,
             // @ts-ignore
-            containerClass: this.containerClass ?? "",
-            // @ts-ignore
             data: this.tableData,
             // @ts-ignore
             key: this.key,
@@ -521,7 +530,7 @@ class xe extends ke {
     ]);
   }
 }
-const at = d((t) => new xe(
+const it = d((t) => new ye(
   {
     tableData: t.data,
     scrollContainer: t.scrollContainer,
@@ -532,29 +541,28 @@ const at = d((t) => new xe(
     key: t.key,
     rows: t.rows,
     rowItem: t.rowItem,
-    containerClass: t.containerClass ?? "",
     headers: t.headers,
     customHeader: t.customHeader,
     border: t.border
   }
-)), ye = d(({ name: t, email: e }) => o({ class: "min-w-0 flex-auto" }, [
-  m({ class: "text-base font-semibold leading-6 m-0" }, t),
-  m({ class: "truncate text-sm leading-5 text-muted-foreground m-0" }, e)
-])), ve = () => o({ class: "flex items-center gap-x-1.5" }, [
+)), ve = d(({ name: t, email: e }) => o({ class: "min-w-0 flex-auto" }, [
+  p({ class: "text-base font-semibold leading-6 m-0" }, t),
+  p({ class: "truncate text-sm leading-5 text-muted-foreground m-0" }, e)
+])), De = () => o({ class: "flex items-center gap-x-1.5" }, [
   o({ class: "flex-none rounded-full bg-emerald-500/20 p-1" }, [
     o({ class: "h-1.5 w-1.5 rounded-full bg-emerald-500" })
   ]),
-  m({ class: "text-xs leading-5 text-gray-500" }, "Online")
-]), De = (t) => m({ class: "text-xs leading-5 text-muted-foreground" }, [
+  p({ class: "text-xs leading-5 text-gray-500" }, "Online")
+]), Se = (t) => p({ class: "text-xs leading-5 text-muted-foreground" }, [
   v("Last seen "),
-  K({ datetime: t }, "3h ago")
-]), Se = (t, e) => t === "online" ? ve() : De(e), Ce = d(({ role: t, lastSeen: e, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
-  m({ class: "text-sm leading-6 m-0" }, t),
-  Se(s, e)
-])), Le = (t) => t.split(" ").map((s) => s[0]).join(""), Ie = d((t) => D({ class: "fadeIn flex justify-between gap-x-6 py-4 px-4 rounded-md hover:bg-muted/50" }, [
+  q({ datetime: t }, "3h ago")
+]), Le = (t, e) => t === "online" ? De() : Se(e), Ce = d(({ role: t, lastSeen: e, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
+  p({ class: "text-sm leading-6 m-0" }, t),
+  Le(s, e)
+])), Ie = (t) => t.split(" ").map((s) => s[0]).join(""), Be = d((t) => D({ class: "fadeIn flex justify-between gap-x-6 py-4 px-4 rounded-md hover:bg-muted/50" }, [
   o({ class: "flex min-w-0 gap-x-4" }, [
-    ne({ src: t.image, alt: t.name, fallbackText: Le(t.name) }),
-    ye({ name: t.name, email: t.email })
+    ie({ src: t.image, alt: t.name, fallbackText: Ie(t.name) }),
+    ve({ name: t.name, email: t.email })
   ]),
   Ce({
     role: t.role,
@@ -567,15 +575,15 @@ const at = d((t) => new xe(
   items: t.users,
   role: "list",
   class: "divide-y divide-border",
-  rowItem: Ie
-})), Be = (t, e) => e.includes(t), Te = (t, e, s) => t.exact ? s === e : Be(e, s), We = ({ text: t, href: e, exact: s, hidden: a }) => new z({
+  rowItem: Be
+})), Te = (t, e) => e.includes(t), Me = (t, e, s) => t.exact ? s === e : Te(e, s), Re = ({ text: t, href: e, exact: s, hidden: a }) => new O({
   text: t,
   href: e,
   exact: s,
   dataSet: ["selected", ["state", !0, "active"]],
   class: `${a ? "hidden" : "inline-flex"} items-center justify-center whitespace-nowrap px-3 py-1.5 text-sm font-medium transition-all rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring focus-visible:ring-offset-background hover:bg-primary hover:text-primary-foreground disabled:opacity-50 disabled:pointer-events-none data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm`
 });
-class it extends u {
+class ot extends h {
   /**
    * This will declare the props for the compiler.
    *
@@ -631,7 +639,7 @@ class it extends u {
     for (const a of this.links) {
       if (!a.rendered)
         continue;
-      Te(a, a.getLinkPath(), e) ? (this.updateLink(a, !0), s = !0) : this.updateLink(a, !1);
+      Me(a, a.getLinkPath(), e) ? (this.updateLink(a, !0), s = !0) : this.updateLink(a, !1);
     }
     !s && this.links[0] && this.updateLink(this.links[0], !0);
   }
@@ -660,9 +668,9 @@ class it extends u {
    * @param {object} option
    * @returns {object}
    */
-  addLink({ label: e, href: s, exact: a, hidden: n }) {
-    const i = We({ text: e, href: s, exact: a, hidden: n });
-    return this.links.push(i), i;
+  addLink({ label: e, href: s, exact: a, hidden: i }) {
+    const n = Re({ text: e, href: s, exact: a, hidden: i });
+    return this.links.push(n), n;
   }
   /**
    * This will clear the links.
@@ -673,10 +681,10 @@ class it extends u {
     this.links = [];
   }
 }
-const ot = d((t) => {
+const lt = d((t) => {
   const e = t.margin || "m-4 ml-0";
   return o({ class: `flex-none ${e}` }, [
-    L({
+    C({
       variant: "icon",
       class: "back-button",
       click: () => {
@@ -687,11 +695,11 @@ const ot = d((t) => {
         t.backUrl && app.navigate(t.backUrl);
       }
     }, [
-      $(w.arrows.left)
+      N(w.arrows.left)
     ])
   ]);
 });
-class A extends u {
+class j extends h {
   /**
    * This will declare the props for the compiler.
    *
@@ -778,13 +786,13 @@ class A extends u {
     return this.children;
   }
 }
-N.addType("dockableOverlay", (t) => {
+z.addType("dockableOverlay", (t) => {
   if (!t)
     return;
   const e = t.component;
   e && e.rendered === !0 && e.state.docked === !1 && e.destroy();
 });
-class lt extends A {
+class rt extends j {
   /**
    * This will stop presistence.
    *
@@ -850,7 +858,7 @@ class lt extends A {
    * @returns {void}
    */
   afterSetup() {
-    N.add(
+    z.add(
       this.container,
       "dockableOverlay",
       {
@@ -893,7 +901,7 @@ class lt extends A {
     document.documentElement.style.overflowY = "auto";
   }
 }
-class rt extends A {
+class ct extends j {
   /**
    * This will get the overlay type.
    *
@@ -912,7 +920,7 @@ class rt extends A {
     this.container = e, this.initialize();
   }
 }
-const Pe = d(({ index: t, click: e, state: s }, a) => D({
+const We = d(({ index: t, click: e, state: s }, a) => D({
   class: "p-2 cursor-pointer hover:bg-muted/50",
   onState: [
     [s, "selectedIndex", {
@@ -921,10 +929,10 @@ const Pe = d(({ index: t, click: e, state: s }, a) => D({
     }]
   ],
   click: () => e(t)
-}, a)), Re = d(({ selectOption: t, state: e }) => b({
+}, a)), Pe = d(({ selectOption: t, state: e }) => b({
   class: "border rounded-md list-none m-0 p-0 max-h-[400px] overflow-y-auto",
-  for: ["filteredOptions", (s, a) => Pe({ index: a, click: t, state: e }, s.label)]
-})), Me = d((t) => o({ class: "relative flex items-center" }, [
+  for: ["filteredOptions", (s, a) => We({ index: a, click: t, state: e }, s.label)]
+})), Oe = d((t) => o({ class: "relative flex items-center" }, [
   se({
     cache: "input",
     placeholder: t.placeholder ?? "Search...",
@@ -936,22 +944,22 @@ const Pe = d(({ index: t, click: e, state: s }, a) => D({
     keydown: (e) => typeof t.handleKeyDown == "function" && t.handleKeyDown(e)
   }),
   t.icon && o({ class: "absolute right-0 mr-2" }, [
-    $(t.icon)
+    N(t.icon)
   ])
-])), Oe = (t) => o({
+])), ze = (t) => o({
   class: "relative flex fle-auto flex-col",
   onState: ["open", (e, s, a) => {
     if (e)
-      return new ie({
+      return new ne({
         cache: "dropdown",
         parent: a,
         button: a.input,
         size: "xl"
       }, [
-        Re(t)
+        Pe(t)
       ]);
   }]
-}), ct = O(
+}), dt = V(
   {
     /**
      * This will set up the data object.
@@ -960,7 +968,7 @@ const Pe = d(({ index: t, click: e, state: s }, a) => D({
      */
     setData() {
       const t = this.options || [];
-      return new C({
+      return new L({
         options: t,
         filteredOptions: t
       });
@@ -1048,7 +1056,7 @@ const Pe = d(({ index: t, click: e, state: s }, a) => D({
      */
     render() {
       return o({ class: "relative w-full max-w-md" }, [
-        Me({
+        Oe({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -1060,7 +1068,7 @@ const Pe = d(({ index: t, click: e, state: s }, a) => D({
           // @ts-ignore
           handleKeyDown: this.handleKeyDown.bind(this)
         }),
-        Oe({
+        ze({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -1071,7 +1079,7 @@ const Pe = d(({ index: t, click: e, state: s }, a) => D({
       ]);
     }
   }
-), ze = (t) => D(
+), Ne = (t) => D(
   {
     class: "inline-flex flex-auto items-center justify-center whitespace-nowrap rounded-sm text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm",
     dataSet: ["selected", ["state", t.value, "active"]]
@@ -1083,10 +1091,10 @@ const Pe = d(({ index: t, click: e, state: s }, a) => D({
       click: (e) => t.callBack(t.value)
     }, t.label)
   ]
-), Ne = (t, e) => (t.callBack = e, ze(t)), $e = (t) => S({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
-  b({ class: "flex flex-auto flex-row", map: [t.options, (e) => Ne(e, t.callBack)] })
+), $e = (t, e) => (t.callBack = e, Ne(t)), je = (t) => S({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
+  b({ class: "flex flex-auto flex-row", map: [t.options, (e) => $e(e, t.callBack)] })
 ]);
-class dt extends u {
+class ht extends h {
   /**
    * This will declare the props for the compiler.
    *
@@ -1103,12 +1111,12 @@ class dt extends u {
   render() {
     const e = this.select.bind(this);
     return o({ class: "" }, [
-      $e({
+      je({
         class: this.class,
         options: this.options,
         callBack: e
       }),
-      M({
+      P({
         class: "tab-content",
         onState: ["selected", this.updateContent.bind(this)]
       })
@@ -1152,9 +1160,9 @@ class dt extends u {
     if (!s || s.length < 1)
       return;
     const a = s[0];
-    for (const n of s)
-      if (n.value === e)
-        return n.layout;
+    for (const i of s)
+      if (i.value === e)
+        return i.layout;
     return a.layout;
   }
   /**
@@ -1174,7 +1182,7 @@ class dt extends u {
     };
   }
 }
-const je = (t) => D(
+const Ae = (t) => D(
   {
     class: "inline-flex flex-auto items-center justify-center whitespace-nowrap rounded-sm text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm",
     dataSet: ["selected", ["state", t.value, "active"]]
@@ -1187,10 +1195,10 @@ const je = (t) => D(
       disabled: t.disabled
     }, t.label)
   ]
-), Ae = (t, e) => (t.callBack = e, je(t)), Ue = (t) => S({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
-  b({ class: "flex flex-auto flex-row", map: [t.options, (e) => Ae(e, t.callBack)] })
+), Ue = (t, e) => (t.callBack = e, Ae(t)), Ye = (t) => S({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
+  b({ class: "flex flex-auto flex-row", map: [t.options, (e) => Ue(e, t.callBack)] })
 ]);
-class ht extends u {
+class ut extends h {
   /**
    * This will declare the props for the compiler.
    *
@@ -1206,7 +1214,7 @@ class ht extends u {
    */
   render() {
     const e = this.select.bind(this);
-    return Ue({
+    return Ye({
       class: this.class,
       options: this.options,
       callBack: e
@@ -1233,17 +1241,17 @@ class ht extends u {
     };
   }
 }
-const Ye = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), Fe = (t, e) => {
+const Fe = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), Ee = (t, e) => {
   const s = t.getLinkPath();
-  return t.exact ? e === s : Ye(s, e);
-}, Ee = ({ text: t, href: e, exact: s }) => new z({
+  return t.exact ? e === s : Fe(s, e);
+}, He = ({ text: t, href: e, exact: s }) => new O({
   text: t,
   href: e,
   exact: s,
   dataSet: ["selected", ["state", !0, "active"]],
   class: "inline-flex flex-auto items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm"
 });
-class He extends u {
+class Qe extends h {
   /**
    * This will declare the props for the compiler.
    *
@@ -1293,9 +1301,9 @@ class He extends u {
   updateLinks(e) {
     let s = !1, a = this.links[0];
     this.deactivateAllLinks();
-    for (const n of this.links)
-      if (n.rendered !== !1 && (s = Fe(n, e), s === !0)) {
-        this.updateLink(n, !0);
+    for (const i of this.links)
+      if (i.rendered !== !1 && (s = Ee(i, e), s === !0)) {
+        this.updateLink(i, !0);
         break;
       }
     s !== !0 && a && this.updateLink(a, !0);
@@ -1326,8 +1334,8 @@ class He extends u {
    * @returns {object}
    */
   addLink({ label: e, href: s, exact: a }) {
-    const n = Ee({ text: e, href: s, exact: a });
-    return this.links.push(n), n;
+    const i = He({ text: e, href: s, exact: a });
+    return this.links.push(i), i;
   }
   /**
    * This will remove all the links.
@@ -1338,7 +1346,7 @@ class He extends u {
     this.links = [];
   }
 }
-class ut extends u {
+class ft extends h {
   /**
    * This will declare the props for the compiler.
    *
@@ -1354,11 +1362,11 @@ class ut extends u {
    */
   render() {
     return o({ class: "tab-panel" }, [
-      new He({
+      new Qe({
         class: this.class,
         options: this.options
       }),
-      M({
+      P({
         class: "tab-content",
         switch: this.addGroup()
       })
@@ -1372,8 +1380,8 @@ class ut extends u {
   addGroup() {
     let e;
     const s = [], a = this.options;
-    for (let n = 0, i = a.length; n < i; n++)
-      e = a[n], s.push(
+    for (let i = 0, n = a.length; i < n; i++)
+      e = a[i], s.push(
         {
           uri: e.uri || e.href,
           component: e.component,
@@ -1384,7 +1392,7 @@ class ut extends u {
     return s;
   }
 }
-class Qe extends u {
+class Xe extends h {
   /**
    * Runs before rendering, sets up defaults, a timer for drawing,
    * and basic canvas properties.
@@ -1402,7 +1410,7 @@ class Qe extends u {
    * @returns {object} Layout definition for the canvas.
    */
   render() {
-    return G({
+    return K({
       style: "touch-action: none; -webkit-user-select: none; -webkit-touch-callout: none;"
     });
   }
@@ -1432,13 +1440,13 @@ class Qe extends u {
    * @returns {Array} An array of [eventName, element, callback] definitions.
    */
   setupEvents() {
-    const e = this.panel, s = this.pointerPosition.bind(this), a = this.pointerUp.bind(this), n = this.pointerDown.bind(this), i = this.resize.bind(this), l = { passive: !1 };
+    const e = this.panel, s = this.pointerPosition.bind(this), a = this.pointerUp.bind(this), i = this.pointerDown.bind(this), n = this.resize.bind(this), l = { passive: !1 };
     return [
       ["pointermove", e, s, l],
       ["pointerup", e, a],
-      ["pointerdown", e, n, l],
+      ["pointerdown", e, i, l],
       ["pointerout", e, a],
-      ["resize", window, i]
+      ["resize", window, n]
     ];
   }
   /**
@@ -1449,14 +1457,14 @@ class Qe extends u {
    */
   getEventPosition(e) {
     let s, a;
-    const n = this.canvas, i = n.width / parseInt(n.style.width), l = n.getBoundingClientRect();
+    const i = this.canvas, n = i.width / parseInt(i.style.width), l = i.getBoundingClientRect();
     if (e.touches && e.touches.length) {
       const f = e.touches[0];
       s = f.clientX, a = f.clientY;
     } else
       s = e.x || e.clientX, a = e.y || e.clientY;
-    const h = parseInt((s - l.left) * i), c = parseInt((a - l.top) * i);
-    this.mouse.x = h, this.mouse.y = c;
+    const u = parseInt((s - l.left) * n), c = parseInt((a - l.top) * n);
+    this.mouse.x = u, this.mouse.y = c;
   }
   /**
    * Called when the pointer goes down on the canvas.
@@ -1498,10 +1506,10 @@ class Qe extends u {
   resize() {
     const { canvas: e, ctx: s } = this, a = e.toDataURL();
     if (this.scale(), this.setupBackground(s), a !== "data:,") {
-      const n = new window.Image();
-      I.on("load", n, function i() {
-        s.drawImage(n, 0, 0), I.off("load", n, i);
-      }), n.src = a;
+      const i = new window.Image();
+      I.on("load", i, function n() {
+        s.drawImage(i, 0, 0), I.off("load", i, n);
+      }), i.src = a;
     }
     this.draw();
   }
@@ -1530,13 +1538,13 @@ class Qe extends u {
    * @returns {void}
    */
   scale() {
-    const e = this.canvas, s = this.container, a = B.getSize(s), n = this.targetSize, i = n.width, l = n.height;
-    let h = i + "px", c = l + "px";
-    if (this.width = e.width = i, this.height = e.height = l, a.width !== 0 && a.height !== 0) {
-      const f = a.width, g = a.height, r = f / i, p = g / l, k = Math.min(r, p);
-      h = i * k + "px", c = l * k + "px";
+    const e = this.canvas, s = this.container, a = B.getSize(s), i = this.targetSize, n = i.width, l = i.height;
+    let u = n + "px", c = l + "px";
+    if (this.width = e.width = n, this.height = e.height = l, a.width !== 0 && a.height !== 0) {
+      const f = a.width, g = a.height, r = f / n, m = g / l, k = Math.min(r, m);
+      u = n * k + "px", c = l * k + "px";
     }
-    e.style.width = h, e.style.height = c;
+    e.style.width = u, e.style.height = c;
   }
   /**
    * Main drawing loop. If the mouse is down, adds a line
@@ -1556,8 +1564,8 @@ class Qe extends u {
   drawBottomLine(e) {
     const s = this.canvas;
     e.globalAlpha = 1, e.shadowBlur = 0;
-    const a = this.margin.x, n = this.height - this.margin.y;
-    e.beginPath(), e.moveTo(a, n), e.lineTo(s.width - this.margin.x, n), e.lineWidth = this.baseLineWidth, e.strokeStyle = this.baseStrokeColor, e.stroke(), e.closePath();
+    const a = this.margin.x, i = this.height - this.margin.y;
+    e.beginPath(), e.moveTo(a, i), e.lineTo(s.width - this.margin.x, i), e.lineWidth = this.baseLineWidth, e.strokeStyle = this.baseStrokeColor, e.stroke(), e.closePath();
   }
   /**
    * Adds a line to the current path, updating the 'signed' status.
@@ -1568,10 +1576,10 @@ class Qe extends u {
    * @param {string} color The stroke color.
    * @returns {void}
    */
-  addLine(e, s, a, n) {
+  addLine(e, s, a, i) {
     this.signed || (this.signed = !0);
-    const i = Math.round(s), l = Math.round(a);
-    e.lineWidth = this.lineWidth, e.strokeStyle = n, e.lineTo(i, l), e.stroke();
+    const n = Math.round(s), l = Math.round(a);
+    e.lineWidth = this.lineWidth, e.strokeStyle = i, e.lineTo(n, l), e.stroke();
   }
   /**
    * Clears the canvas, sets signed to false, and re-initializes
@@ -1610,7 +1618,7 @@ class Qe extends u {
     this.timer.stop(), this.status = "stopped";
   }
 }
-class ft extends u {
+class gt extends h {
   /**
    * Sets up default properties for the signature panel.
    *
@@ -1633,13 +1641,13 @@ class ft extends u {
         bind: this.path + ".data"
       }),
       o({ class: "absolute top-2 right-2" }, [
-        L({
+        C({
           variant: "icon",
           icon: w.circleX,
           click: this.reset.bind(this)
         })
       ]),
-      new Qe({
+      new Xe({
         cache: "canvasLayer",
         margin: this.margin,
         targetSize: this.targetSize,
@@ -1689,34 +1697,34 @@ class ft extends u {
   }
 }
 export {
-  ot as B,
-  me as C,
+  lt as B,
+  pe as C,
   be as D,
   we as H,
-  rt as I,
-  it as N,
-  A as O,
-  Ze as P,
-  at as S,
-  j as T,
-  Ie as U,
-  st as W,
+  ct as I,
+  ot as N,
+  j as O,
+  et as P,
+  it as S,
+  $ as T,
+  Be as U,
+  at as W,
   ce as a,
   T as b,
   le as c,
-  et as d,
-  tt as e,
+  tt as d,
+  st as e,
   he as f,
   re as g,
   fe as h,
   ge as i,
   ke as j,
   nt as k,
-  lt as l,
-  ct as m,
-  dt as n,
-  ht as o,
-  He as p,
-  ut as q,
-  ft as r
+  rt as l,
+  dt as m,
+  ht as n,
+  ut as o,
+  Qe as p,
+  ft as q,
+  gt as r
 };

package/dist/types/components/molecules/delay-component.d.ts

@@ -14,5 +14,11 @@ export class DelayComponent extends Component {
      * @default ''
      */
     removingClass: string;
+    /**
+     * This will remove the component from the DOM after a delay.
+     *
+     * @returns {void}
+     */
+    remove(): void;
 }
 import { Component } from "@base-framework/base";

package/dist/types/components/organisms/lists/data-table.d.ts

@@ -6,8 +6,96 @@
  * @param {object} props
  * @returns {object}
  */
-export const DataTable: typeof import("@base-framework/base").Component;
+export class DataTable extends Component {
+    /**
+     * Initializes component data.
+     *
+     * @returns {Data}
+     */
+    setData(): Data;
+    /**
+     * This will toggle all selected rows.
+     *
+     * @returns {boolean}
+     */
+    toggleAllSelectedRows(): boolean;
+    /**
+     * This will update the selected state.
+     *
+     * @returns {void}
+     */
+    updateSelected(): void;
+    /**
+     * This will get the selected rows.
+     *
+     * @returns {Array<object>}
+     */
+    getSelectedRows(): Array<object>;
+    /**
+     * This will update the table rows.
+     *
+     * @protected
+     * @param {boolean} selected
+     * @returns {void}
+     */
+    protected updateTable(selected: boolean): void;
+    /**
+     * Handles row selection.
+     *
+     * @param {object} row
+     */
+    selectRow(row: object): void;
+    /**
+     * Renders the DataTable component.
+     *
+     * @returns {object}
+     */
+    render(): object;
+    /**
+     * This will remove items from the list.
+     *
+     * @public
+     * @param {array} items
+     * @returns {void}
+     */
+    public remove(items: any[]): void;
+    /**
+     * This will set the items in the list.
+     *
+     * @public
+     * @param {array} rows
+     * @returns {void}
+     */
+    public setRows(rows: any[]): void;
+    /**
+     * This will append items to the list.
+     *
+     * @public
+     * @param {array|object} items
+     * @returns {void}
+     */
+    public append(items: any[] | object): void;
+    /**
+     * This will mingle the new items with the old items.
+     *
+     * @public
+     * @param {Array<Object>} newItems
+     * @param {boolean} withDelete
+     * @returns {void}
+     */
+    public mingle(newItems: Array<any>, withDelete?: boolean): void;
+    /**
+     * This will prepend items to the list.
+     *
+     * @public
+     * @param {array|object} items
+     * @returns {void}
+     */
+    public prepend(items: any[] | object): void;
+}
 import { CheckboxCol } from './table-header.js';
 import { HeaderCol } from './table-header.js';
 import { TableHeader } from './table-header.js';
+import { Component } from '@base-framework/base';
+import { Data } from '@base-framework/base';
 export { CheckboxCol, HeaderCol, TableHeader };

package/dist/types/components/organisms/lists/scrollable-data-table.d.ts

@@ -17,7 +17,6 @@
  * @property {function} [props.selectRow] - The function to select a row.
  * @property {string} [props.border] - The border to add to the table.
  * @property {object} [props.data] - The table data.
- * @property {string} [props.containerClass] - The class to add to the scroll container.
  * @returns {object}
  */
 export const ScrollableDataTable: Function;

package/dist/types/components/organisms/lists/scrollable-table.d.ts

@@ -1,4 +1,4 @@
-declare const ScrollableTable_base: typeof import("@base-framework/base").Component;
+export function ScrollableDataTableBody(props: object): object;
 /**
  * ScrollableDataTable Component
  *
@@ -16,16 +16,11 @@ declare const ScrollableTable_base: typeof import("@base-framework/base").Compon
  * @property {string} [props.containerClass] - The class to add to the scroll container.
  * @returns {object}
  */
-export class ScrollableTable extends ScrollableTable_base {
-    /**
-     * Renders the DataTable component.
-     *
-     * @returns {object}
-     */
-    render(): object;
+export class ScrollableTable extends DataTable {
 }
 export default ScrollableTable;
 import { CheckboxCol } from './table-header.js';
 import { HeaderCol } from './table-header.js';
 import { TableHeader } from './table-header.js';
+import { DataTable } from './data-table.js';
 export { CheckboxCol, HeaderCol, TableHeader };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@base-framework/ui",
-	"version": "1.0.76",
+	"version": "1.0.79",
 	"description": "This is a UI package that adds components and atoms that use Tailwind CSS and a theme based on Shadcn.",
 	"main": "./dist/index.es.js",
 	"scripts": {