qaema-ui 0.0.24 → 0.0.26

package/dist/assets/icons/RiyalIcon.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+type SaudiRiyalIconProps = React.SVGProps<SVGSVGElement> & {
+    color?: string;
+};
+export default function SaudiRiyalIcon({ color, ...props }: SaudiRiyalIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/assets/icons/RiyalIcon.js

@@ -0,0 +1,26 @@
+import { j as i } from "../../_virtual/jsx-runtime.js";
+import "react";
+function e({ color: t = "#6D798A", ...l }) {
+  return /* @__PURE__ */ i.jsxs("svg", { width: "18", height: "20", viewBox: "0 0 18 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l, children: [
+    /* @__PURE__ */ i.jsxs("g", { clipPath: "url(#clip0_7331_7983)", children: [
+      /* @__PURE__ */ i.jsx(
+        "path",
+        {
+          d: "M11.2024 17.7177C10.8812 18.4258 10.6689 19.1942 10.5875 20L17.3849 18.5635C17.7061 17.8556 17.9182 17.0871 17.9998 16.2812L11.2024 17.7177Z",
+          fill: t
+        }
+      ),
+      /* @__PURE__ */ i.jsx(
+        "path",
+        {
+          d: "M17.385 14.2599C17.7062 13.552 17.9185 12.7835 17.9999 11.9777L12.705 13.0972V10.945L17.3848 9.9563C17.7061 9.2484 17.9184 8.47985 17.9997 7.67405L12.7048 8.79265V1.0527C11.8934 1.50558 11.1729 2.10842 10.5872 2.81951V9.24028L8.46955 9.68776V0C7.65821 0.452726 6.93766 1.05572 6.35193 1.76681V10.1351L1.61375 11.136C1.29255 11.8439 1.08006 12.6125 0.998561 13.4183L6.35193 12.2873V14.9976L0.614748 16.2096C0.293542 16.9175 0.0812201 17.6861 -0.00012207 18.4919L6.00511 17.2232C6.49396 17.1221 6.91412 16.8347 7.18729 16.4393L8.28861 14.8161V14.8158C8.40294 14.6478 8.46955 14.4454 8.46955 14.2273V11.8398L10.5872 11.3923V15.6967L17.3848 14.2596L17.385 14.2599Z",
+          fill: t
+        }
+      )
+    ] }),
+    /* @__PURE__ */ i.jsx("defs", { children: /* @__PURE__ */ i.jsx("clipPath", { id: "clip0_7331_7983", children: /* @__PURE__ */ i.jsx("rect", { width: "18", height: "20", fill: "white" }) }) })
+  ] });
+}
+export {
+  e as default
+};

package/dist/assets/icons/index.d.ts

@@ -0,0 +1 @@
+export { default as SaudiRiyalIcon } from './RiyalIcon';

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

@@ -0,0 +1,3 @@
+import { DropDownWithTableProps } from './DropDownWithTable.types';
+declare const DropDownWithTable: <T extends Record<string, unknown>>(props: DropDownWithTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default DropDownWithTable;

package/dist/components/DropDownWithTable/DropDownWithTable.js

@@ -0,0 +1,184 @@
+import { j as t } from "../../_virtual/jsx-runtime.js";
+import { useRef as g, useState as v, useCallback as ne, useEffect as D } from "react";
+import { createPortal as re } from "react-dom";
+import { FaTimes as k, FaAngleDown as oe } from "../../node_modules/react-icons/fa/index.js";
+import { useTheme as le } from "styled-components";
+import { HelperTextWrapper as ie } from "../PhoneInputField.js";
+import se from "../SearchBar.js";
+import ae from "../Typography.js";
+import ce from "../../hooks/useZIndex.js";
+import { useQaemaCoreTranslation as de } from "../../i18n/i18n.js";
+import { StyledDropDownContainer as ue, StyledlabelContainer as fe, StyledDropDown as me, StyledDropDownToggle as he, StyledDropDownTitle as pe, IconsContainer as xe, StyledDropDownMenu as Se, SearchContainer as je, StyledOptionsContainer as we, StyledDropItem as ye, SelectedTagsContainer as ge, SelectedTag as ve } from "../../styles/Dropdown.styles.js";
+import Ce from "./Table/Table.js";
+import be from "../../node_modules/react-bootstrap/esm/Spinner.js";
+const He = (d) => {
+  const {
+    label: T,
+    options: P,
+    placeholder: R = "Select Something",
+    optional: W = !1,
+    error: s = "",
+    disabled: S = !1,
+    selectIdentifier: j,
+    keyIdentifier: r = "id",
+    selectCallBack: w,
+    showLeadIcon: z,
+    icon: F,
+    allowSearch: H,
+    searchHandler: M,
+    searchPlaceholder: B,
+    onToggle: i,
+    multiSelect: f = !1,
+    isLoading: N = !1,
+    currentSelectedOptions: h = [],
+    isInteractive: I = !1,
+    //Table related props
+    columns: A,
+    isTableHeadVisible: V = !1,
+    getDisplayValue: y,
+    isRowDisabled: Q
+  } = d, p = le(), { t: E } = de(), C = g(null), a = g(null), X = g(null), Y = g(d.currentSelectedOptions !== void 0), [u, b] = v(!1), [Z, q] = v(0), [L, G] = v({ top: 0, left: 0 }), [l, x] = v(h), $ = F ?? /* @__PURE__ */ t.jsx(t.Fragment, {}), J = ce("dropdown"), m = ne(() => {
+    if (a != null && a.current) {
+      const e = a.current.getBoundingClientRect();
+      q(a.current.offsetWidth / 16), G({
+        top: e.bottom + window.scrollY,
+        left: e.left + window.scrollX
+      });
+    }
+  }, []);
+  D(() => (u && (m(), window.addEventListener("resize", m), window.addEventListener("scroll", m, !0)), () => {
+    window.removeEventListener("resize", m), window.removeEventListener("scroll", m, !0);
+  }), [u, m]), D(() => {
+    if (!Y.current) return;
+    (h.length !== l.length || h.some((n, o) => {
+      var c;
+      return n[r] !== ((c = l[o]) == null ? void 0 : c[r]);
+    })) && x(h);
+  }, [h]);
+  const K = (e, n, o, c = "default") => o ? p.colors.grey.n400 : e ? p.colors.state.error.n450 : n ? p.colors.primary.dark.n600 : c === "light-primary" ? p.colors.primary.purple.n450 : p.colors.grey.n300, O = (e) => l.some((n) => typeof n == "object" && typeof e == "object" ? n[r] === e[r] : n.value === e.value), U = (e) => {
+    if (f) {
+      const n = O(e);
+      let o;
+      n ? o = l.filter((c) => typeof c == "object" && typeof e == "object" ? c[r] !== e[r] : c.value !== e.value) : o = [...l, e], x(o), w(o);
+    } else
+      x([e]), w(e), b(!1), i == null || i(!1);
+  }, _ = (e) => {
+    const n = l.filter((o) => typeof o == "object" && typeof e == "object" ? o[r] !== e[r] : o.value !== e.value);
+    x(n), w(n);
+  }, ee = (e) => {
+    if (e.length === 0) return R;
+    if (!f) {
+      const n = e[0];
+      if (y)
+        return y(n);
+      if (j)
+        return String(n == null ? void 0 : n[j]);
+      if (r)
+        return String(n == null ? void 0 : n[r]);
+    }
+    return `${e.length} ${E("SELECTED")}`;
+  };
+  D(() => {
+    const e = (n) => {
+      C.current && a.current && !C.current.contains(n.target) && !a.current.contains(n.target) && (b(!1), i == null || i(!1));
+    };
+    return u && document.addEventListener("mousedown", e), () => {
+      document.removeEventListener("mousedown", e);
+    };
+  }, [u, i]);
+  const te = () => I || (s == null ? void 0 : s.length) === 0 ? null : /* @__PURE__ */ t.jsx(ie, { error: s, children: s });
+  return /* @__PURE__ */ t.jsxs(ue, { children: [
+    T && /* @__PURE__ */ t.jsxs(fe, { children: [
+      /* @__PURE__ */ t.jsx("label", { children: T }),
+      W && /* @__PURE__ */ t.jsx("span", { children: E("OPTIONAL") })
+    ] }),
+    /* @__PURE__ */ t.jsxs(
+      me,
+      {
+        show: u,
+        onToggle: () => {
+          i == null || i(!u), b((e) => !e);
+        },
+        placement: "bottom-start",
+        autoClose: f ? "outside" : !0,
+        children: [
+          /* @__PURE__ */ t.jsx(he, { disabled: S, ref: a, $valid: !s, $variant: d.variant || "default", children: /* @__PURE__ */ t.jsx(pe, { $valid: !s, $isInteractive: I, children: /* @__PURE__ */ t.jsxs("div", { className: "title-container", children: [
+            /* @__PURE__ */ t.jsxs("div", { className: "heading-container", children: [
+              z && typeof $ == "function" && /* @__PURE__ */ t.jsx($, {}),
+              /* @__PURE__ */ t.jsx(
+                ae,
+                {
+                  component: "span",
+                  variant: "mdText",
+                  color: K(s, l.length > 0, S, d.variant || "default"),
+                  children: ee(l)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ t.jsxs(xe, { children: [
+              !f && l.length > 0 && !S && /* @__PURE__ */ t.jsx(
+                k,
+                {
+                  style: { cursor: "pointer", marginLeft: "0.5rem" },
+                  onClick: (e) => {
+                    e.stopPropagation(), x([]), w(f ? [] : null);
+                  }
+                }
+              ),
+              !S && /* @__PURE__ */ t.jsx(oe, {})
+            ] })
+          ] }) }) }),
+          u && re(
+            /* @__PURE__ */ t.jsxs(
+              Se,
+              {
+                ref: C,
+                $menuWidth: Z,
+                $zIndex: J,
+                style: {
+                  position: "fixed",
+                  top: `${L.top}px`,
+                  left: `${L.left}px`
+                },
+                children: [
+                  H && /* @__PURE__ */ t.jsx(je, { children: /* @__PURE__ */ t.jsx(se, { placeholder: B, onSearch: M }) }),
+                  /* @__PURE__ */ t.jsx(
+                    we,
+                    {
+                      ref: X,
+                      onScroll: (e) => {
+                        var n;
+                        (n = d.onScroll) == null || n.call(d, e);
+                      },
+                      children: N ? /* @__PURE__ */ t.jsx(ye, { $selected: !1, children: /* @__PURE__ */ t.jsx(be, {}) }) : /* @__PURE__ */ t.jsx(
+                        Ce,
+                        {
+                          keyField: r,
+                          data: P,
+                          columns: A,
+                          onRowClick: (e) => U(e),
+                          isRowSelected: (e) => O(e),
+                          isTableHeadVisible: V,
+                          isRowDisabled: Q
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            document.body
+          )
+        ]
+      }
+    ),
+    f && l.length > 0 && /* @__PURE__ */ t.jsx(ge, { children: l.map((e) => /* @__PURE__ */ t.jsxs(ve, { children: [
+      y ? y(e) : String(j ? e[j] : e[r]),
+      /* @__PURE__ */ t.jsx(k, { onClick: () => _(e) })
+    ] }, String(e[r]))) }),
+    te()
+  ] });
+};
+export {
+  He as default
+};

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

@@ -0,0 +1,28 @@
+import { TableColumn } from './Table/Table.types';
+export interface DropDownWithTableProps<T extends Record<string, unknown>> {
+    label?: string;
+    options: T[];
+    placeholder: string;
+    optional?: boolean;
+    disabled?: boolean;
+    error?: string;
+    selectIdentifier?: string;
+    keyIdentifier?: string;
+    showLeadIcon: boolean;
+    icon?: React.FC;
+    selectCallBack: (value: T | T[] | null) => void;
+    allowSearch: boolean;
+    searchPlaceholder?: string;
+    searchHandler?: (value: string) => void;
+    onToggle?: (show: boolean) => void;
+    multiSelect?: boolean;
+    isLoading?: boolean;
+    currentSelectedOptions?: Array<T>;
+    isInteractive?: boolean;
+    onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
+    variant?: 'light-primary' | 'default';
+    columns: TableColumn<T>[];
+    isTableHeadVisible?: boolean;
+    getDisplayValue?: (option: T) => string;
+    isRowDisabled?: (row: T) => boolean;
+}

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

@@ -0,0 +1,3 @@
+import { TableProps } from './Table.types';
+declare function Table<T extends Record<string, unknown>>({ columns, data, keyField, selectable, onRowSelect, rowActions, stickyHeader, loading, emptyStateMessage, pagination, onRowClick, rowClassName, isRowDisabled, breakpoint, alignHeader, isTableHeadVisible, isRowSelected: externalIsRowSelected, }: Readonly<TableProps<T>>): import("react/jsx-runtime").JSX.Element;
+export default Table;

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

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

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

@@ -0,0 +1,58 @@
+import { ColumnAlignment } from './Table.types';
+export declare const ActionButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const DropdownContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DropdownButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const DropdownMenu: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isOpen: boolean;
+}>> & string;
+export declare const DropdownItem: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $disabled?: boolean;
+}>> & string;
+export declare const TableContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledTable: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>> & string;
+export declare const TableScrollContainer: 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 StyledTableHead: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, {
+    $sticky?: boolean;
+}>> & string;
+export declare const TableHeaderRow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, never>> & string;
+export declare const TableHeaderCell: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, {
+    $align?: ColumnAlignment;
+    $sortable?: boolean;
+    $width?: string;
+    $minWidth?: string;
+    $maxWidth?: string;
+    $isFirstColumn?: boolean;
+    $isLastColumn?: boolean;
+    $isActionCell?: boolean;
+}>> & string;
+export declare const TableBody: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, never>> & string;
+export declare const TableRow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {
+    $selected?: boolean;
+    $disabled?: boolean;
+    $clickable?: boolean;
+}>> & string;
+export declare const TableCellContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {
+    $align?: ColumnAlignment;
+    $isFirstColumn?: boolean;
+    $isLastColumn?: boolean;
+    $isActionCell?: boolean;
+}>> & string;
+export declare const SortIcon: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const TableFooter: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const EmptyState: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const LoadingOverlay: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Badge: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $variant: "primary" | "success" | "warning" | "error" | "neutral";
+}>> & string;
+export declare const StatusIndicator: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $status: "success" | "warning" | "error" | "neutral";
+}>> & string;
+export declare const TablesWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+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"> & {
+    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;