@cfx-dev/ui-components 4.2.24 → 4.3.0

package/dist/components/Checkbox/Checkbox.js

@@ -1,10 +1,9 @@
-import { jsx as _, jsxs as D } from "react/jsx-runtime";
+import { jsxs as z, jsx as p } from "react/jsx-runtime";
 import * as c from "react";
-import $ from "react";
-import { b as y, u as z, a as L } from "../../index-Cf5Yu9oD.js";
-import { u as j } from "../../index-BZPx6jYI.js";
-import { r as B } from "../../index-2hJuj4UN.js";
-import { P as E } from "../../index-BlbvKsmN.js";
+import A from "react";
+import { u as w, d as L, c as O, P as E, e as S, f as j } from "../../index-BHuChyf5.js";
+import { u as H } from "../../index-BZPx6jYI.js";
+import { P as K } from "../../index-HDl8nGsm.js";
 import "../Icons/cfx-icons/Close.js";
 import "../Icons/cfx-icons/Controller.js";
 import "../Icons/cfx-icons/Copy.js";
@@ -26,15 +25,16 @@ import "../Icons/cfx-icons/MoreInfo.js";
 import "../Icons/cfx-icons/Pencil.js";
 import "../Icons/cfx-icons/Play.js";
 import "../Icons/cfx-icons/Plus.js";
+import g from "../Icons/cfx-icons/Radio.js";
 import "../Icons/cfx-icons/Refresh.js";
 import "../Icons/cfx-icons/RightArrow.js";
 import "../Icons/cfx-icons/RightChevron.js";
 import "../Icons/cfx-icons/Search.js";
 import "../Icons/cfx-icons/Sort.js";
-import "../Icons/cfx-icons/Square.js";
+import $ from "../Icons/cfx-icons/Square.js";
 import "../Icons/cfx-icons/SquareCheck.js";
 import "../Icons/cfx-icons/Stop.js";
-import W from "../Icons/cfx-icons/Tick.js";
+import X from "../Icons/cfx-icons/Tick.js";
 import "../Icons/cfx-icons/Transfer.js";
 import "../Icons/cfx-icons/Trash.js";
 import "../Icons/cfx-icons/Undo.js";
@@ -55,279 +55,191 @@ import "../Icons/cfx-icons-big/Subscriptions.js";
 import "../Icons/cfx-icons-big/Upload.js";
 import "../Icons/cfx-icons-big/Warning.js";
 import "../Icons/cfx-icons-big/Confirm.js";
-import { clsx as g } from "../../utils/clsx.js";
-import { getColor as K } from "../../utils/color.js";
-function q(e, t) {
-  typeof e == "function" ? e(t) : e != null && (e.current = t);
-}
-function X(...e) {
-  return (t) => e.forEach((o) => q(o, t));
-}
-function F(...e) {
-  return c.useCallback(X(...e), e);
-}
-function G(e, t = []) {
-  let o = [];
-  function n(u, p) {
-    const m = c.createContext(p), s = o.length;
-    o = [...o, p];
-    function i(a) {
-      const { scope: f, children: h, ...C } = a, N = (f == null ? void 0 : f[e][s]) || m, x = c.useMemo(() => C, Object.values(C));
-      return /* @__PURE__ */ _(N.Provider, { value: x, children: h });
-    }
-    function d(a, f) {
-      const h = (f == null ? void 0 : f[e][s]) || m, C = c.useContext(h);
-      if (C) return C;
-      if (p !== void 0) return p;
-      throw new Error(`\`${a}\` must be used within \`${u}\``);
-    }
-    return i.displayName = u + "Provider", [i, d];
-  }
-  const r = () => {
-    const u = o.map((p) => c.createContext(p));
-    return function(m) {
-      const s = (m == null ? void 0 : m[e]) || u;
-      return c.useMemo(
-        () => ({ [`__scope${e}`]: { ...m, [e]: s } }),
-        [m, s]
-      );
-    };
-  };
-  return r.scopeName = e, [n, J(r, ...t)];
-}
-function J(...e) {
-  const t = e[0];
-  if (e.length === 1) return t;
-  const o = () => {
-    const n = e.map((r) => ({
-      useScope: r(),
-      scopeName: r.scopeName
-    }));
-    return function(u) {
-      const p = n.reduce((m, { useScope: s, scopeName: i }) => {
-        const a = s(u)[`__scope${i}`];
-        return { ...m, ...a };
-      }, {});
-      return c.useMemo(() => ({ [`__scope${t.scopeName}`]: p }), [p]);
-    };
-  };
-  return o.scopeName = t.scopeName, o;
-}
-function A(e, t, { checkForDefaultPrevented: o = !0 } = {}) {
-  return function(r) {
-    if (e == null || e(r), o === !1 || !r.defaultPrevented)
-      return t == null ? void 0 : t(r);
-  };
-}
-function Q(e, t) {
-  typeof e == "function" ? e(t) : e != null && (e.current = t);
-}
-function V(...e) {
-  return (t) => e.forEach((o) => Q(o, t));
-}
-function Y(...e) {
-  return c.useCallback(V(...e), e);
-}
-function Z(e, t) {
-  return c.useReducer((o, n) => t[o][n] ?? o, e);
-}
-var O = (e) => {
-  const { present: t, children: o } = e, n = H(t), r = typeof o == "function" ? o({ present: n.isPresent }) : c.Children.only(o), u = Y(n.ref, ee(r));
-  return typeof o == "function" || n.isPresent ? c.cloneElement(r, { ref: u }) : null;
-};
-O.displayName = "Presence";
-function H(e) {
-  const [t, o] = c.useState(), n = c.useRef({}), r = c.useRef(e), u = c.useRef("none"), p = e ? "mounted" : "unmounted", [m, s] = Z(p, {
-    mounted: {
-      UNMOUNT: "unmounted",
-      ANIMATION_OUT: "unmountSuspended"
-    },
-    unmountSuspended: {
-      MOUNT: "mounted",
-      ANIMATION_END: "unmounted"
-    },
-    unmounted: {
-      MOUNT: "mounted"
-    }
-  });
-  return c.useEffect(() => {
-    const i = v(n.current);
-    u.current = m === "mounted" ? i : "none";
-  }, [m]), y(() => {
-    const i = n.current, d = r.current;
-    if (d !== e) {
-      const f = u.current, h = v(i);
-      e ? s("MOUNT") : h === "none" || (i == null ? void 0 : i.display) === "none" ? s("UNMOUNT") : s(d && f !== h ? "ANIMATION_OUT" : "UNMOUNT"), r.current = e;
-    }
-  }, [e, s]), y(() => {
-    if (t) {
-      const i = (a) => {
-        const h = v(n.current).includes(a.animationName);
-        a.target === t && h && B.flushSync(() => s("ANIMATION_END"));
-      }, d = (a) => {
-        a.target === t && (u.current = v(n.current));
-      };
-      return t.addEventListener("animationstart", d), t.addEventListener("animationcancel", i), t.addEventListener("animationend", i), () => {
-        t.removeEventListener("animationstart", d), t.removeEventListener("animationcancel", i), t.removeEventListener("animationend", i);
-      };
-    } else
-      s("ANIMATION_END");
-  }, [t, s]), {
-    isPresent: ["mounted", "unmountSuspended"].includes(m),
-    ref: c.useCallback((i) => {
-      i && (n.current = getComputedStyle(i)), o(i);
-    }, [])
-  };
-}
-function v(e) {
-  return (e == null ? void 0 : e.animationName) || "none";
-}
-function ee(e) {
-  var n, r;
-  let t = (n = Object.getOwnPropertyDescriptor(e.props, "ref")) == null ? void 0 : n.get, o = t && "isReactWarning" in t && t.isReactWarning;
-  return o ? e.ref : (t = (r = Object.getOwnPropertyDescriptor(e, "ref")) == null ? void 0 : r.get, o = t && "isReactWarning" in t && t.isReactWarning, o ? e.props.ref : e.props.ref || e.ref);
-}
-var S = "Checkbox", [te, ht] = G(S), [oe, ne] = te(S), M = c.forwardRef(
-  (e, t) => {
+import { clsx as P } from "../../utils/clsx.js";
+import { getColor as F } from "../../utils/color.js";
+var y = "Checkbox", [G, lo] = O(y), [J, Q] = G(y), q = c.forwardRef(
+  (e, l) => {
     const {
       __scopeCheckbox: o,
       name: n,
-      checked: r,
-      defaultChecked: u,
-      required: p,
-      disabled: m,
-      value: s = "on",
-      onCheckedChange: i,
-      ...d
-    } = e, [a, f] = c.useState(null), h = F(t, (l) => f(l)), C = c.useRef(!1), N = a ? !!a.closest("form") : !0, [x = !1, R] = z({
-      prop: r,
-      defaultProp: u,
-      onChange: i
-    }), w = c.useRef(x);
+      checked: u,
+      defaultChecked: r,
+      required: k,
+      disabled: s,
+      value: h = "on",
+      onCheckedChange: a,
+      form: f,
+      ...x
+    } = e, [t, b] = c.useState(null), N = w(l, (i) => b(i)), _ = c.useRef(!1), I = t ? f || !!t.closest("form") : !0, [C, R] = L({
+      prop: u,
+      defaultProp: r ?? !1,
+      onChange: a,
+      caller: y
+    }), T = c.useRef(C);
     return c.useEffect(() => {
-      const l = a == null ? void 0 : a.form;
-      if (l) {
-        const k = () => R(w.current);
-        return l.addEventListener("reset", k), () => l.removeEventListener("reset", k);
+      const i = t == null ? void 0 : t.form;
+      if (i) {
+        const v = () => R(T.current);
+        return i.addEventListener("reset", v), () => i.removeEventListener("reset", v);
       }
-    }, [a, R]), /* @__PURE__ */ D(oe, { scope: o, state: x, disabled: m, children: [
-      /* @__PURE__ */ _(
+    }, [t, R]), /* @__PURE__ */ z(J, { scope: o, state: C, disabled: s, children: [
+      /* @__PURE__ */ p(
         E.button,
         {
           type: "button",
           role: "checkbox",
-          "aria-checked": b(x) ? "mixed" : x,
-          "aria-required": p,
-          "data-state": U(x),
-          "data-disabled": m ? "" : void 0,
-          disabled: m,
-          value: s,
-          ...d,
-          ref: h,
-          onKeyDown: A(e.onKeyDown, (l) => {
-            l.key === "Enter" && l.preventDefault();
+          "aria-checked": d(C) ? "mixed" : C,
+          "aria-required": k,
+          "data-state": M(C),
+          "data-disabled": s ? "" : void 0,
+          disabled: s,
+          value: h,
+          ...x,
+          ref: N,
+          onKeyDown: S(e.onKeyDown, (i) => {
+            i.key === "Enter" && i.preventDefault();
           }),
-          onClick: A(e.onClick, (l) => {
-            R((k) => b(k) ? !0 : !k), N && (C.current = l.isPropagationStopped(), C.current || l.stopPropagation());
+          onClick: S(e.onClick, (i) => {
+            R((v) => d(v) ? !0 : !v), I && (_.current = i.isPropagationStopped(), _.current || i.stopPropagation());
           })
         }
       ),
-      N && /* @__PURE__ */ _(
-        re,
+      I && /* @__PURE__ */ p(
+        D,
         {
-          control: a,
-          bubbles: !C.current,
+          control: t,
+          bubbles: !_.current,
           name: n,
-          value: s,
-          checked: x,
-          required: p,
-          disabled: m,
-          style: { transform: "translateX(-100%)" }
+          value: h,
+          checked: C,
+          required: k,
+          disabled: s,
+          form: f,
+          style: { transform: "translateX(-100%)" },
+          defaultChecked: d(r) ? !1 : r
         }
       )
     ] });
   }
 );
-M.displayName = S;
-var I = "CheckboxIndicator", T = c.forwardRef(
-  (e, t) => {
-    const { __scopeCheckbox: o, forceMount: n, ...r } = e, u = ne(I, o);
-    return /* @__PURE__ */ _(O, { present: n || b(u.state) || u.state === !0, children: /* @__PURE__ */ _(
+q.displayName = y;
+var B = "CheckboxIndicator", U = c.forwardRef(
+  (e, l) => {
+    const { __scopeCheckbox: o, forceMount: n, ...u } = e, r = Q(B, o);
+    return /* @__PURE__ */ p(K, { present: n || d(r.state) || r.state === !0, children: /* @__PURE__ */ p(
       E.span,
       {
-        "data-state": U(u.state),
-        "data-disabled": u.disabled ? "" : void 0,
-        ...r,
-        ref: t,
+        "data-state": M(r.state),
+        "data-disabled": r.disabled ? "" : void 0,
+        ...u,
+        ref: l,
         style: { pointerEvents: "none", ...e.style }
       }
     ) });
   }
 );
-T.displayName = I;
-var re = (e) => {
-  const { control: t, checked: o, bubbles: n = !0, ...r } = e, u = c.useRef(null), p = j(o), m = L(t);
-  return c.useEffect(() => {
-    const s = u.current, i = window.HTMLInputElement.prototype, a = Object.getOwnPropertyDescriptor(i, "checked").set;
-    if (p !== o && a) {
-      const f = new Event("click", { bubbles: n });
-      s.indeterminate = b(o), a.call(s, b(o) ? !1 : o), s.dispatchEvent(f);
-    }
-  }, [p, o, n]), /* @__PURE__ */ _(
-    "input",
-    {
-      type: "checkbox",
-      "aria-hidden": !0,
-      defaultChecked: b(o) ? !1 : o,
-      ...r,
-      tabIndex: -1,
-      ref: u,
-      style: {
-        ...e.style,
-        ...m,
-        position: "absolute",
-        pointerEvents: "none",
-        opacity: 0,
-        margin: 0
+U.displayName = B;
+var V = "CheckboxBubbleInput", D = c.forwardRef(
+  ({
+    __scopeCheckbox: e,
+    control: l,
+    checked: o,
+    bubbles: n = !0,
+    defaultChecked: u,
+    ...r
+  }, k) => {
+    const s = c.useRef(null), h = w(s, k), a = H(o), f = j(l);
+    c.useEffect(() => {
+      const t = s.current;
+      if (!t) return;
+      const b = window.HTMLInputElement.prototype, _ = Object.getOwnPropertyDescriptor(
+        b,
+        "checked"
+      ).set;
+      if (a !== o && _) {
+        const I = new Event("click", { bubbles: n });
+        t.indeterminate = d(o), _.call(t, d(o) ? !1 : o), t.dispatchEvent(I);
       }
-    }
-  );
-};
-function b(e) {
+    }, [a, o, n]);
+    const x = c.useRef(d(o) ? !1 : o);
+    return /* @__PURE__ */ p(
+      E.input,
+      {
+        type: "checkbox",
+        "aria-hidden": !0,
+        defaultChecked: u ?? x.current,
+        ...r,
+        tabIndex: -1,
+        ref: h,
+        style: {
+          ...r.style,
+          ...f,
+          position: "absolute",
+          pointerEvents: "none",
+          opacity: 0,
+          margin: 0
+        }
+      }
+    );
+  }
+);
+D.displayName = V;
+function d(e) {
   return e === "indeterminate";
 }
-function U(e) {
-  return b(e) ? "indeterminate" : e ? "checked" : "unchecked";
+function M(e) {
+  return d(e) ? "indeterminate" : e ? "checked" : "unchecked";
 }
-var ie = M, ce = T;
-const se = "cfxui__Checkbox__rootUnset__cbb57", ae = "cfxui__Checkbox__root__865aa", ue = "cfxui__Checkbox__indicator__2afc0", P = {
-  rootUnset: se,
-  root: ae,
-  indicator: ue,
+var W = q, Y = U;
+const Z = "cfxui__Checkbox__rootUnset__cbb57", ee = "cfxui__Checkbox__root__865aa", oe = "cfxui__Checkbox__square__029aa", te = "cfxui__Checkbox__indicator__2afc0", re = "cfxui__Checkbox__checked__b4081", ie = "cfxui__Checkbox__radioIcon__719e7", ce = "cfxui__Checkbox__tickIcon__a7f19", m = {
+  rootUnset: Z,
+  root: ee,
+  square: oe,
+  indicator: te,
+  checked: re,
   "size-small": "cfxui__Checkbox__size-small__02440",
+  radioIcon: ie,
+  tickIcon: ce,
   "size-normal": "cfxui__Checkbox__size-normal__700f4",
   "size-large": "cfxui__Checkbox__size-large__28529"
 };
-function me(e) {
+function ne(e) {
   const {
-    id: t,
+    id: l,
     size: o = "normal",
     rootClassName: n,
-    indicatorClassName: r,
-    colorToken: u,
-    color: p,
-    opacity: m,
-    luminance: s,
-    ...i
-  } = e, d = g(
-    P.root,
-    P.rootUnset,
-    P[`size-${o}`],
+    indicatorClassName: u,
+    colorToken: r,
+    color: k,
+    opacity: s,
+    luminance: h,
+    iconIndicator: a = g,
+    ...f
+  } = e, x = P(
+    m.root,
+    m.rootUnset,
+    m[`size-${o}`],
     n
-  ), a = K(e);
-  return /* @__PURE__ */ _(ie, { ...i, id: t, style: { color: a }, className: d, children: /* @__PURE__ */ _(ce, { className: g(P.indicator, r), children: /* @__PURE__ */ _(W, {}) }) });
+  ), t = F(e), b = P(
+    m.checked,
+    a === X && m.tickIcon,
+    a === g && m.radioIcon
+  );
+  return /* @__PURE__ */ z(
+    W,
+    {
+      ...f,
+      id: l,
+      style: { color: t },
+      className: x,
+      children: [
+        /* @__PURE__ */ p($, { className: m.square }),
+        /* @__PURE__ */ p(Y, { className: P(m.indicator, u), children: /* @__PURE__ */ p(a, { className: b }) })
+      ]
+    }
+  );
 }
-const Ct = $.memo(me);
+const uo = A.memo(ne);
 export {
-  Ct as default
+  uo as default
 };

package/dist/components/ClipboardButton/ClipboardButton.js

@@ -1,13 +1,13 @@
 import { jsx as r } from "react/jsx-runtime";
 import c from "react";
-import { Button as C } from "../Button/Button.js";
+import C from "../Button/Button.js";
 import { clsx as _ } from "../../utils/clsx.js";
-import "../Button/LinkButton.js";
-import { Title as f } from "../Title/Title.js";
-import { noop as u } from "../../utils/functional.js";
+import { noop as f } from "../../utils/functional.js";
+import "../../utils/links.js";
+import { Title as u } from "../Title/Title.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import "../../utils/hooks/useKeyboardClose.js";
-import "../../index-2hJuj4UN.js";
+import "../../index-Cl_RnsqN.js";
 import { useClipboardComponent as b } from "../../utils/hooks/useClipboardComponent.js";
 const x = "cfxui__ClipboardButton__root__e8251", k = "cfxui__ClipboardButton__copied__6e0b9", e = {
   root: x,
@@ -19,7 +19,7 @@ function h(o) {
     copiedTitle: T,
     textToCopy: j,
     fixedOn: n,
-    onClick: t = u,
+    onClick: t = f,
     ...p
   } = o, {
     copied: l,
@@ -29,7 +29,7 @@ function h(o) {
     t(s), i();
   }, [i, t]), a = _(e.root, { [e.copied]: l });
   return /* @__PURE__ */ r(
-    f,
+    u,
     {
       title: m,
       fixedOn: n,

package/dist/components/ControlBox/ControlBox.d.ts

@@ -5,7 +5,8 @@ export interface ControlBoxProps {
     size?: ControlBoxSize;
     className?: string;
     children: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
 }
-export declare const ControlBox: React.ForwardRefExoticComponent<ControlBoxProps & React.RefAttributes<HTMLDivElement>>;
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ControlBoxProps & React.RefAttributes<HTMLDivElement>>>;
+export declare function ControlBox(props: ControlBoxProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ControlBox>;
 export default _default;

package/dist/components/ControlBox/ControlBox.js

@@ -1,20 +1,23 @@
-import { jsx as c } from "react/jsx-runtime";
-import r from "react";
+import { jsx as s } from "react/jsx-runtime";
+import c from "react";
 import { clsx as m } from "../../utils/clsx.js";
 const e = "cfxui__ControlBox__root__6a08c", x = "cfxui__ControlBox__small__8beb2", f = "cfxui__ControlBox__normal__e3aa5", i = "cfxui__ControlBox__large__1039d", o = {
   root: e,
   small: x,
   normal: f,
   large: i
-}, u = r.forwardRef(function(t, l) {
+};
+function u(r) {
   const {
-    size: _ = "normal",
-    className: a,
-    children: n
-  } = t, s = m(o.root, a, o[_]);
-  return /* @__PURE__ */ c("div", { ref: l, className: s, children: n });
-}), g = r.memo(u);
+    size: t = "normal",
+    className: l,
+    children: _,
+    ref: a
+  } = r, n = m(o.root, l, o[t]);
+  return /* @__PURE__ */ s("div", { ref: a, className: n, children: _ });
+}
+const p = c.memo(u);
 export {
   u as ControlBox,
-  g as default
+  p as default
 };

package/dist/components/CountryFlag/CountryFlag.d.ts

@@ -5,7 +5,8 @@ export interface CountryFlagProps {
     title: string;
     className?: string;
     forceShow?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
 }
-export declare const CountryFlag: React.ForwardRefExoticComponent<CountryFlagProps & React.RefAttributes<HTMLDivElement>>;
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<CountryFlagProps & React.RefAttributes<HTMLDivElement>>>;
+export declare function CountryFlag(props: CountryFlagProps): import("react/jsx-runtime").JSX.Element | null;
+declare const _default: React.MemoExoticComponent<typeof CountryFlag>;
 export default _default;

package/dist/components/CountryFlag/CountryFlag.js

@@ -1,22 +1,25 @@
 import { jsx as t } from "react/jsx-runtime";
-import r from "react";
+import c from "react";
 import { Title as f } from "../Title/Title.js";
 import { clsx as m } from "../../utils/clsx.js";
 const i = "cfxui__CountryFlag__root__95489", u = {
   root: i
-}, _ = r.forwardRef(function(a, e) {
+};
+function _(r) {
   const {
     country: o,
-    className: s,
-    title: n,
-    forceShow: l = !1
-  } = a;
-  if (!l && (o === "001" || o === "AQ" || o === "aq"))
+    className: e,
+    title: s,
+    forceShow: a = !1,
+    ref: l
+  } = r;
+  if (!a && (o === "001" || o === "AQ" || o === "aq"))
     return null;
-  const c = m(u.root, s, `fi-${o.toLowerCase()}`);
-  return /* @__PURE__ */ t(f, { title: n, children: /* @__PURE__ */ t("div", { ref: e, className: c }) });
-}), x = r.memo(_);
+  const n = m(u.root, e, `fi-${o.toLowerCase()}`);
+  return /* @__PURE__ */ t(f, { title: s, children: /* @__PURE__ */ t("div", { ref: l, className: n }) });
+}
+const y = c.memo(_);
 export {
   _ as CountryFlag,
-  x as default
+  y as default
 };

package/dist/components/DataTable/DataTable.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+
+export interface DataTableHeaderType {
+    text: string;
+    sortable?: boolean;
+    sortKey?: string;
+}
+export type DataTableRowType = Array<string | number | Date | React.ReactNode>;
+export type DataTableContainerType = React.FC<{
+    item: string | number | Date | React.ReactNode;
+}>;
+export interface DataTableHeaderItemProps {
+    item: DataTableHeaderType;
+    onSortClick?: (sortKey: string) => void;
+}
+export declare function DataTableHeaderItem(props: DataTableHeaderItemProps): import("react/jsx-runtime").JSX.Element;
+export interface DataTableRowProps {
+    index: number;
+    item: DataTableRowType;
+    onSelectChange: (rowIndex: number | null) => void;
+    includeRadio?: boolean;
+    loading?: boolean;
+    selectedRow?: number | null;
+    dataContainer?: DataTableContainerType;
+}
+export declare function DataTableRow(props: DataTableRowProps): import("react/jsx-runtime").JSX.Element;
+export interface DataTableProps {
+    headers: DataTableHeaderType[];
+    data: DataTableRowType[];
+    includeRadio?: boolean;
+    loading?: boolean;
+    onSelectChange?: (rowIndex: number | null) => void;
+    dataContainer?: DataTableContainerType;
+    selectedRow?: number | null;
+    sortBy?: string;
+    sortOrder?: 'asc' | 'desc';
+    onSortChange?: (sortBy: string, sortOrder: 'asc' | 'desc') => void;
+    className?: string;
+}
+export declare function DataTable({ headers, data, includeRadio, loading, onSelectChange, dataContainer, selectedRow: outerSelectedRow, sortBy: outerSortBy, sortOrder: outerSortOrder, onSortChange, className, }: DataTableProps): import("react/jsx-runtime").JSX.Element;