@lanaco/lnc-react-ui 3.11.35 → 4.0.2

package/dist/Table.js

@@ -0,0 +1,1408 @@
+import { jsx as i, jsxs as z, Fragment as R } from "react/jsx-runtime";
+import Me, { useLayoutEffect as Xe, useEffect as V, useState as de, useMemo as qe, createElement as O, forwardRef as Je, useImperativeHandle as Ke } from "react";
+import { n as w } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { c as D, g as J, P as r } from "./index-Ds9PUTwb.js";
+import { k as be, n as Qe, b as f, a as M, s as ce, u as Ze, l as B, r as S, e as A } from "./utils-DEke8iwo.js";
+import { c as ue } from "./index-B_da1uvD.js";
+import { u as v } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+import { i as er } from "./index-Cdkz-XH-.js";
+import fe from "./CheckBoxInput.js";
+import rr from "./Icon.js";
+import tr from "./Spinner.js";
+var or = be ? Xe : V, he = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0
+};
+function nr() {
+  var e = de(null), s = e[0], t = e[1], o = de(he), d = o[0], c = o[1], h = qe(function() {
+    return new window.ResizeObserver(function(g) {
+      if (g[0]) {
+        var T = g[0].contentRect, y = T.x, E = T.y, L = T.width, _ = T.height, C = T.top, P = T.left, $ = T.bottom, m = T.right;
+        c({ x: y, y: E, width: L, height: _, top: C, left: P, bottom: $, right: m });
+      }
+    });
+  }, []);
+  return or(function() {
+    if (s)
+      return h.observe(s), function() {
+        h.disconnect();
+      };
+  }, [s]), [t, d];
+}
+const lr = be && typeof window.ResizeObserver < "u" ? nr : function() {
+  return [Qe, he];
+};
+var ar = typeof D == "object" && D && D.Object === Object && D, ir = typeof self == "object" && self && self.Object === Object && self, sr = ar || ir || Function("return this")(), dr = sr.isFinite;
+function cr(e) {
+  return typeof e == "number" && dr(e);
+}
+var ur = cr;
+const mr = /* @__PURE__ */ J(ur);
+function br(e) {
+  var s = typeof e;
+  return !!e && (s == "object" || s == "function");
+}
+var fr = br;
+const hr = /* @__PURE__ */ J(fr), gr = w.tbody``, K = (e) => {
+  const {
+    __TYPE__: s = "TABLE_BODY",
+    className: t = "",
+    size: o = "small",
+    color: d = "primary"
+  } = e, c = v();
+  return /* @__PURE__ */ i(gr, { "data-tbody": !0, ...{
+    className: t,
+    size: o,
+    color: d,
+    theme: c
+  }, children: e.children });
+};
+K.propTypes = {
+  __TYPE__: r.string,
+  //----------------------------------------
+  className: r.string,
+  size: r.oneOf(["small", "medium", "large"]),
+  color: r.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "danger",
+    "warning",
+    "information",
+    "neutral",
+    "gray"
+  ])
+};
+K.displayName = "TABLE_BODY";
+const Tr = w.thead`
+  border-radius: 0.5rem 0.5rem 0 0;
+`, Q = (e) => {
+  const {
+    __TYPE__: s = "TABLE_HEAD",
+    className: t = "",
+    size: o = "small",
+    color: d = "primary"
+  } = e, c = v();
+  return /* @__PURE__ */ i(Tr, { ...{
+    className: t,
+    size: o,
+    color: d,
+    theme: c
+  }, children: e.children });
+};
+Q.propTypes = {
+  __TYPE__: r.string,
+  //----------------------------------------
+  className: r.string,
+  size: r.oneOf(["small", "medium", "large"]),
+  color: r.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "information",
+    "neutral",
+    "gray"
+  ])
+};
+Q.displayName = "TABLE_HEAD";
+const _r = w.tr`
+  ${(e) => e.noBorder == !1 && `border-bottom: 1px solid ${f(
+  e.theme,
+  "TableRow",
+  null,
+  "enabled",
+  "border"
+)};`}
+  ${(e) => e.noBorder == !1 && `border-left: 1px solid ${f(
+  e.theme,
+  "TableRow",
+  null,
+  "enabled",
+  "border"
+)};`}
+${(e) => e.noBorder == !1 && `border-right: 1px solid ${f(
+  e.theme,
+  "TableRow",
+  null,
+  "enabled",
+  "border"
+)};`}
+  &:last-of-type > td:first-of-type {
+    border-radius: 0 0 0 0.5rem;
+  }
+  &:last-of-type > td:last-of-type {
+    border-radius: 0 0 0.5rem 0;
+  }
+  ${(e) => e.IsSelected !== !0 ? `
+       &:hover {
+          & > td {
+            background-color: ${f(
+  e.theme,
+  "TableRow",
+  null,
+  "hover",
+  "background"
+)};
+          }
+      }` : ""}
+  ${(e) => e.IsSelected === !0 ? `
+        & > td {
+          background-color: ${f(
+  e.theme,
+  "TableRow",
+  e.color,
+  "active",
+  "background"
+)};
+        }
+      ` : ""}
+`, Z = (e) => {
+  const {
+    __TYPE__: s = "TABLE_ROW",
+    onRowClick: t = () => {
+    },
+    RowData: o = {},
+    Index: d,
+    IsSelected: c = null,
+    noBorder: h = !1,
+    //----------------
+    className: g = "",
+    size: T = "small",
+    color: y = "primary"
+  } = e, E = v();
+  return /* @__PURE__ */ O(
+    _r,
+    {
+      ...{
+        className: g,
+        size: T,
+        color: y,
+        theme: E
+      },
+      IsSelected: c,
+      key: d,
+      onClick: (C) => {
+        C.stopPropagation(), C.nativeEvent.stopImmediatePropagation(), t && t(C, o);
+      },
+      noBorder: h
+    },
+    e.children
+  );
+};
+Z.propTypes = {
+  __TYPE__: r.string,
+  //----------------------------------------
+  onRowClick: r.func,
+  RowData: r.object,
+  //----------------------------------------
+  IsSelected: r.bool,
+  noBorder: r.bool,
+  //----------------------------------------
+  className: r.string,
+  size: r.oneOf(["small", "medium", "large"]),
+  color: r.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "information",
+    "neutral",
+    "gray"
+  ])
+};
+Z.displayName = "TABLE_ROW";
+var Er = "[object AsyncFunction]", yr = "[object Function]", pr = "[object GeneratorFunction]", wr = "[object Null]", Cr = "[object Proxy]", Lr = "[object Undefined]", Rr = typeof D == "object" && D && D.Object === Object && D, Sr = typeof self == "object" && self && self.Object === Object && self, Ar = Rr || Sr || Function("return this")(), ge = Object.prototype, Or = ge.hasOwnProperty, Te = ge.toString, me = Ar.Symbol, j = me ? me.toStringTag : void 0;
+function Ir(e) {
+  return e == null ? e === void 0 ? Lr : wr : j && j in Object(e) ? Hr(e) : vr(e);
+}
+function Hr(e) {
+  var s = Or.call(e, j), t = e[j];
+  try {
+    e[j] = void 0;
+    var o = !0;
+  } catch {
+  }
+  var d = Te.call(e);
+  return o && (s ? e[j] = t : delete e[j]), d;
+}
+function vr(e) {
+  return Te.call(e);
+}
+function Br(e) {
+  if (!Pr(e))
+    return !1;
+  var s = Ir(e);
+  return s == yr || s == pr || s == Er || s == Cr;
+}
+function Pr(e) {
+  var s = typeof e;
+  return e != null && (s == "object" || s == "function");
+}
+var $r = Br;
+const Nr = /* @__PURE__ */ J($r), xr = w.td`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: ${(e) => e.width};
+  padding: 0.875rem 1.5rem;
+
+  background-color: ${(e) => f(e.theme, "TableRow", null, "enabled", "background")};
+
+  ${(e) => e.bgColor}
+
+  ${(e) => M(e.theme, "TableCell", e.size, "enabled")};
+`, ee = (e) => {
+  const {
+    __TYPE__: s = "TABLE_CELL",
+    Column: t = {},
+    RowData: o = {},
+    Index: d = 0,
+    EnableSelection: c = !1,
+    EnableRowHighlight: h = !1,
+    GetRowHighlightColor: g = () => "",
+    //----------------
+    className: T = "",
+    size: y = "small",
+    color: E = "primary"
+  } = e, L = v(), _ = {
+    className: T,
+    size: y,
+    color: E,
+    theme: L
+  }, C = (a) => {
+    const I = new Option().style;
+    return I.color = a, I.color !== "";
+  }, P = () => t && t.width ? t.width + "%" : "auto", $ = () => {
+    var a = g(o);
+    return h === !0 && C(a) ? `
+        background-color: ${a};
+      ` : "";
+  }, m = () => {
+    if (t.render && Nr(t.render)) {
+      var a = t.render(o);
+      if (Me.isValidElement(a)) return a;
+      console.error(
+        `${t.id}/${t.accessor}: invalid render function.`
+      );
+    }
+    return er(t.accessor) && console.error(
+      `${t.index}: accessor property is required when the render function is not suplied`
+    ), o[t.accessor];
+  };
+  return /* @__PURE__ */ O(
+    xr,
+    {
+      ..._,
+      bgColor: $(),
+      selection: c,
+      width: P(),
+      key: d,
+      title: o[t.accessor]
+    },
+    m()
+  );
+};
+ee.propTypes = {
+  __TYPE__: r.string,
+  //----------------------------------------
+  Column: r.object,
+  RowData: r.object,
+  Index: r.number,
+  EnableSelection: r.bool,
+  EnableRowHighlight: r.bool,
+  GetRowHighlightColor: r.func,
+  //----------------------------------------
+  className: r.string,
+  size: r.oneOf(["small", "medium", "large"]),
+  color: r.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "information",
+    "neutral",
+    "gray"
+  ])
+};
+ee.displayName = "TABLE_CELL";
+const Dr = w.td`
+  padding: 0 0 0 1.25rem;
+  background-color: ${(e) => f(e.theme, "TableRow", null, "enabled", "background")};
+
+  width: ${(e) => e.width}%;
+  ${(e) => e.bgColor}
+`, re = (e) => {
+  const {
+    __TYPE__: s = "TABLE_SELECTION_CELL",
+    RowData: t = {},
+    onSelectRow: o = () => {
+    },
+    IsSelected: d = null,
+    Index: c = 0,
+    EnableRowHighlight: h = !1,
+    GetRowHighlightColor: g = () => "",
+    //----------------
+    className: T = "",
+    size: y = "small",
+    color: E = "primary"
+  } = e, L = v(), _ = {
+    className: T,
+    size: y,
+    color: E,
+    theme: L
+  }, C = (m, a) => {
+    o(m, t, d);
+  }, P = (m) => {
+    const a = new Option().style;
+    return a.color = m, a.color !== "";
+  };
+  return /* @__PURE__ */ O(
+    Dr,
+    {
+      bgColor: (() => {
+        var m = g(t);
+        return h === !0 && P(m) ? `
+        background-color: ${m};
+      ` : "";
+      })(),
+      ..._,
+      key: c,
+      width: e.width
+    },
+    /* @__PURE__ */ i(fe, { id: c, checked: d, onChange: C })
+  );
+};
+re.propTypes = {
+  __TYPE__: r.string,
+  //----------------------------------------
+  Column: r.object,
+  RowData: r.object,
+  onSelectRow: r.func,
+  Index: r.number,
+  SelectedData: r.array,
+  IsSelected: r.bool,
+  EnableRowHighlight: r.bool,
+  GetRowHighlightColor: r.func,
+  //----------------------------------------
+  className: r.string,
+  size: r.oneOf(["small", "medium", "large"]),
+  color: r.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "danger",
+    "warning",
+    "information",
+    "neutral",
+    "gray"
+  ])
+};
+re.displayName = "TABLE_SELECTION_CELL";
+const kr = w.tr`
+  border-radius: 0.5rem 0.5rem 0 0;
+`, te = (e) => {
+  const {
+    __TYPE__: s = "TABLE_HEAD_ROW",
+    Index: t = 0,
+    //-------------
+    className: o = "",
+    size: d = "small",
+    color: c = "primary"
+  } = e, h = v();
+  return /* @__PURE__ */ O(kr, { ...{
+    className: o,
+    size: d,
+    color: c,
+    theme: h
+  }, key: t }, e.children);
+};
+te.propTypes = {
+  __TYPE__: r.string,
+  //----------------------------------------
+  Index: r.any,
+  //----------------------------------------
+  className: r.string,
+  size: r.oneOf(["small", "medium", "large"]),
+  color: r.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "danger",
+    "warning",
+    "information",
+    "neutral",
+    "gray"
+  ])
+};
+te.displayName = "TABLE_HEAD_ROW";
+const jr = w.th`
+white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+  transition: all 250ms ease;
+  padding: 0.875rem 1.5rem;
+  cursor: ${(e) => e.ordering ? "pointer" : "default"};
+  width: ${(e) => e.width};
+
+  &:hover {
+    ${(e) => e.ordering ? `background-color: ${f(
+  e.theme,
+  "TableHeadCell",
+  null,
+  "hover",
+  "background"
+)};` : ""}
+  }
+
+  ${(e) => M(
+  e.theme,
+  "TableHeadCell",
+  e.size,
+  "enabled"
+)};
+
+  color: ${(e) => f(e.theme, "TableHeadCell", null, "enabled", "text")}};
+
+  background-color: ${(e) => f(
+  e.theme,
+  "TableHeadCell",
+  null,
+  "enabled",
+  "background"
+)}};
+
+  border-top: ${(e) => "1px solid " + f(
+  e.theme,
+  "TableHeadCell",
+  null,
+  "enabled",
+  "border"
+)}};
+
+  border-bottom: ${(e) => "1px solid " + f(
+  e.theme,
+  "TableHeadCell",
+  null,
+  "enabled",
+  "border"
+)}};
+
+
+  &:first-of-type {
+    border-radius: 0.5rem 0 0 0;
+    border-left: ${(e) => "1px solid " + f(
+  e.theme,
+  "TableHeadCell",
+  null,
+  "enabled",
+  "border"
+)}};
+  }
+
+  &:last-of-type {
+    border-radius: 0 0.5rem 0 0;
+    border-right: ${(e) => "1px solid " + f(
+  e.theme,
+  "TableHeadCell",
+  null,
+  "enabled",
+  "border"
+)}};
+  }
+`, zr = w.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`, Wr = w.span`
+  padding-right: 0.25rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  color: ${(e) => f(
+  e.theme,
+  "TableHeadCell",
+  e.color,
+  "enabled",
+  "text"
+)};
+
+  font-weight: ${(e) => f(
+  e.theme,
+  "TableHeadCell",
+  e.color,
+  "enabled",
+  "fontWeight"
+)};
+`, Yr = w.span`
+  & i {
+    color: ${(e) => e.sort ? "transparent" : f(
+  e.theme,
+  "TableHeadCell",
+  e.color,
+  "enabled",
+  "text"
+)};
+
+    font-weight: ${(e) => f(
+  e.theme,
+  "TableHeadCell",
+  e.color,
+  "enabled",
+  "fontWeight"
+)};
+  }
+`, oe = (e) => {
+  const {
+    __TYPE__: s = "TABLE_HEAD_CELL",
+    Column: t = {},
+    Ordering: o = {},
+    Index: d = 0,
+    onColumnClick: c = () => {
+    },
+    EnableSelectAll: h = !1,
+    EnableOrdering: g = !1,
+    //-----------
+    className: T = "",
+    size: y = "small",
+    color: E = "primary"
+  } = e, L = v(), _ = {
+    className: T,
+    size: y,
+    color: E,
+    theme: L
+  }, C = () => {
+    if (t.sortable === !0 && g === !0) {
+      let m;
+      return o && o.columnId === t.id ? (o.ascending === !0 && (m = "angle-up"), o.descending === !0 && (m = "angle-down"), o.ascending && o.descending && (m = "sort")) : m = "sort", /* @__PURE__ */ i(Yr, { ..._, sort: m === "sort", children: /* @__PURE__ */ i(rr, { ..._, sizeInUnits: "14px", icon: m }) });
+    }
+    return /* @__PURE__ */ i(R, {});
+  }, P = (m) => {
+    var a = { columnId: t.id, ascending: !1, descending: !0 };
+    g === !0 && t.sortable === !0 && o && o.columnId === t.id && (o.ascending === !0 && (a.ascending = !1, a.descending = !1), o.descending === !0 && (a.ascending = !0, a.descending = !1), o.descending === !1 && o.ascending === !1 && (a.ascending = !1, a.descending = !0), c(m, t, a)), g === !0 && t.sortable === !0 && o && o.columnId !== t.id && c(m, t, a), (t.sortable !== !0 || g !== !0) && c(m, t);
+  }, $ = () => t && t.width ? t.width + "%" : "auto";
+  return /* @__PURE__ */ O(
+    jr,
+    {
+      onClick: P,
+      ..._,
+      selection: h,
+      ordering: g === !0 && t.sortable === !0,
+      key: d,
+      width: $(),
+      title: t.displayName
+    },
+    /* @__PURE__ */ z(zr, { ..._, children: [
+      /* @__PURE__ */ i(Wr, { ..._, children: t.displayName }),
+      C()
+    ] })
+  );
+};
+oe.propTypes = {
+  __TYPE__: r.string,
+  //----------------------------------------
+  Columns: r.object,
+  Ordering: r.object,
+  Index: r.any,
+  EnableSelectAll: r.bool,
+  EnableOrdering: r.bool,
+  onColumnClick: r.func,
+  //----------------------------------------
+  className: r.string,
+  size: r.oneOf(["small", "medium", "large"]),
+  color: r.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "danger",
+    "warning",
+    "information",
+    "neutral",
+    "gray"
+  ])
+};
+oe.displayName = "TABLE_HEAD_CELL";
+const Fr = w.th`
+  text-align: left;
+  width: ${(e) => e.width};
+  padding-left: 1.25rem;
+  background-color: ${(e) => f(
+  e.theme,
+  "TableHeadCell",
+  null,
+  "enabled",
+  "background"
+)}};
+  border-top: ${(e) => "1px solid " + f(
+  e.theme,
+  "TableHeadCell",
+  null,
+  "enabled",
+  "border"
+)}};
+  
+  border-bottom: ${(e) => "1px solid " + f(
+  e.theme,
+  "TableHeadCell",
+  null,
+  "enabled",
+  "border"
+)}};
+  
+  border-radius: 0.5rem 0 0 0;
+`, ne = (e) => {
+  const {
+    __TYPE__: s = "TABLE_HEAD_SELECTION_CELL",
+    EnableSelectAll: t,
+    IsSelected: o = null,
+    Index: d = 0,
+    onSelectAll: c,
+    //----------------
+    className: h = "",
+    size: g = "small",
+    color: T = "primary"
+  } = e, y = v();
+  return /* @__PURE__ */ O(
+    Fr,
+    {
+      ...{
+        className: h,
+        size: g,
+        color: T,
+        theme: y
+      },
+      selection: t,
+      key: d,
+      width: e.width
+    },
+    t && /* @__PURE__ */ i(
+      fe,
+      {
+        id: d,
+        checked: o || !1,
+        onChange: (L) => c(L, o)
+      }
+    )
+  );
+};
+ne.propTypes = {
+  __TYPE__: r.string,
+  //----------------------------------------
+  Index: r.number,
+  IsSelected: r.bool,
+  EnableSelectAll: r.bool,
+  //----------------------------------------
+  className: r.string,
+  size: r.oneOf(["small", "medium", "large"]),
+  color: r.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "danger",
+    "warning",
+    "information",
+    "neutral",
+    "gray"
+  ])
+};
+ne.displayName = "TABLE_HEAD_SELECTION_CELL";
+const Gr = w.td`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0.25rem 0.125rem;
+`, Ur = w.div`
+  width: ${(e) => e.width};
+  height: 100%;
+  border-radius: 100px;
+  background-color: ${(e) => e.bgColor} !important;
+`, le = (e) => {
+  const {
+    __TYPE__: s = "TABLE_ROW_STATUS_INDICATOR_CELL",
+    RowData: t = {},
+    Index: o,
+    GetRowStatusIndicatorColor: d,
+    //----------------
+    className: c = "",
+    size: h = "small",
+    color: g = "Primary"
+  } = e, T = v(), y = {
+    className: c,
+    size: h,
+    color: g,
+    theme: T
+  }, E = () => "4px", L = (_) => {
+    const C = new Option().style;
+    return C.color = _, C.color !== "";
+  };
+  return /* @__PURE__ */ O(
+    Gr,
+    {
+      ...y,
+      width: E(),
+      key: o,
+      bgColor: () => {
+        var _ = d(t);
+        return L(_) ? _ : ce.NONE;
+      }
+    },
+    /* @__PURE__ */ i(
+      Ur,
+      {
+        ...y,
+        width: E(),
+        bgColor: () => {
+          var _ = d(t);
+          return L(_) ? _ : ce.NONE;
+        }
+      }
+    )
+  );
+};
+le.propTypes = {
+  __TYPE__: r.string,
+  //----------------------------------------
+  Column: r.object,
+  RowData: r.object,
+  //----------------------------------------
+  className: r.string,
+  size: r.oneOf(["small", "medium", "large"]),
+  color: r.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "danger",
+    "warning",
+    "information",
+    "neutral",
+    "gray"
+  ])
+};
+le.displayName = "TABLE_ROW_STATUS_INDICATOR_CELL";
+const Vr = w.th`
+  padding: 0.125rem;
+  width: 8px;
+
+  background-color: ${(e) => f(
+  e.theme,
+  "TableHeadCell",
+  null,
+  "enabled",
+  "background"
+)}};
+
+  border-bottom: ${(e) => "1px solid " + f(
+  e.theme,
+  "TableHeadCell",
+  null,
+  "enabled",
+  "border"
+)}};
+  
+  border-radius: 0.5rem 0 0 0;
+`, ae = (e) => {
+  const {
+    __TYPE__: s = "TABLE_HEAD_ROW_STATUS_INDICATOR_CELL",
+    Index: t,
+    //-----------
+    className: o = "",
+    size: d = "small",
+    color: c = "primary"
+  } = e, h = v();
+  return /* @__PURE__ */ O(Vr, { ...{
+    className: o,
+    size: d,
+    color: c,
+    theme: h
+  }, key: t });
+};
+ae.propTypes = {
+  __TYPE__: r.string,
+  //----------------------------------------
+  className: r.string,
+  size: r.oneOf(["small", "medium", "large"]),
+  color: r.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "information",
+    "neutral",
+    "gray"
+  ])
+};
+ae.displayName = "TABLE_HEAD_ROW_STATUS_INDICATOR_CELL";
+const Mr = w.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0.625rem;
+  margin: 0.125rem;
+  border-radius: 0.125rem;
+  overflow-x: ${(e) => e.isLoading ? "hidden" : "auto"};
+  white-space: nowrap;
+  position: relative;
+
+  ${(e) => M(e.theme, "Table", e.size, "enabled")};
+`, Xr = w.div`
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  z-index: 1000;
+  opacity: 0.7;
+  background-color: ${(e) => f(
+  e.theme,
+  "Background",
+  "primary",
+  "enabled",
+  "background"
+)};
+  filter: alpha(opacity=10);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`, qr = w.table`
+  height: 1px;
+  width: ${(e) => e.tableWidth};
+  white-space: nowrap;
+  border-collapse: collapse;
+  border-radius: 0.5rem;
+  border-style: hidden;
+  table-layout: fixed;
+  ${(e) => e.noBorder == !1 && `box-shadow: 0 0 0 0.0625rem ${f(
+  e.theme,
+  "Table",
+  null,
+  "enabled",
+  "border"
+)};`}
+`, Jr = w.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  ${(e) => M(e.theme, "Table", e.size, "enabled")};
+  padding: 0.5rem;
+`, ct = {
+  TableContainer: "TABLE_CONTAINER",
+  TableRow: "TABLE_ROW",
+  TableCell: "TABLE_CELL",
+  TableSelectionCell: "TABLE_SELLECTION_CELL",
+  TableHeadRow: "TABLE_HEAD_ROW",
+  TableHeadCell: "TABLE_HEAD_CELL",
+  TableHeadSelectionCell: "TABLE_HEAD_SELECTION_CELL",
+  TableHeader: "TABLE_HEADER",
+  TableFooter: "TABLE_FOOTER",
+  TableSpecialLastRow: "TABLE_SPECIAL_LAST_ROW",
+  TableRowStatusIndicatorCell: "TABLE_ROW_STATUS_INDICATOR_CELL",
+  TableHeadRowStatusIndicatorCell: "TABLE_HEAD_ROW_STATUS_INDICATOR_CELL",
+  TableLoader: "TABLE_LOADER",
+  TableBody: "TABLE_BODY",
+  TableHead: "TABLE_HEAD"
+}, _e = Je((e, s) => {
+  var {
+    __TYPE__: t = "TABLE",
+    EnableSelection: o = !1,
+    EnableOrdering: d = !1,
+    EnableSelectAll: c = !1,
+    EnableLoader: h = !1,
+    PreRenderedTableBody: g = !1,
+    PreRenderedTableHead: T = !1,
+    noBorder: y = !1,
+    //--------------------
+    EnableRowStatusIndicator: E = !1,
+    EnableRowHighlight: L = !1,
+    GetRowStatusIndicatorColor: _ = () => {
+    },
+    GetRowHighlightColor: C = () => {
+    },
+    //--------------------
+    NoDataText: P = "No data to show",
+    NoDataComponent: $ = null,
+    //--------------------
+    Loading: m = !1,
+    // TODO: add alignText prop to Column object
+    Columns: a = [],
+    Data: I = [],
+    SelectedData: X = [],
+    SelectedEntirePage: Ee = !1,
+    RowIdentifier: W = "id",
+    VisibilityPattern: N = null,
+    Ordering: ye = {},
+    //--------------------
+    onColumnClick: pe = () => {
+    },
+    onRowClick: we = () => {
+    },
+    onSelectRow: ie = () => {
+    },
+    onSelectAll: Ce = () => {
+    },
+    //--------------------
+    tableWidth: Le = "100%",
+    className: Re = "",
+    style: Kr = {},
+    color: Se = "primary",
+    size: G = "small"
+  } = e;
+  const se = v(), p = {
+    theme: se,
+    color: Se,
+    size: G
+  };
+  Ke(
+    s,
+    () => ({
+      getTableData: () => I
+    }),
+    [
+      I
+      // Update functions when certain state changes
+    ]
+  );
+  const [Ae, { width: k }] = lr();
+  var Oe = Ze();
+  V(() => {
+    o === !0 && (W === null || W === "") && console.error(
+      "Error: Selection is enabled but the 'RowIdentifier' is empty"
+    );
+  }, []), V(() => {
+    (a == null || a.length === 0) && console.error("Error: Columns array must have at least one item.");
+  }, [a]), V(() => {
+    N && (N.hasOwnProperty(B.XS.type) || console.error(Y(B.XS.type)), N.hasOwnProperty(B.S.type) || console.error(Y(B.S.type)), N.hasOwnProperty(B.M.type) || console.error(Y(B.M.type)), N.hasOwnProperty(B.L.type) || console.error(Y(B.L.type)), N.hasOwnProperty(B.XL.type) || console.error(Y(B.XL.type)));
+  }, [N]);
+  const Y = (n) => `Error: 'VisibilityPattern' missing property ${n}.`, U = () => {
+    let n = [];
+    if (hr(N)) {
+      var l = 0;
+      if (n = N[Oe].map((u) => ({
+        ...a.find((H) => String(H.id) === String(u.id)),
+        ...u
+      })), o === !0) {
+        var l = F() / k * 100 / n.length;
+        E === !0 && (l += 3 / k * 100), n = n.map((b) => ({
+          ...b,
+          width: b.width - l
+        }));
+      }
+    } else if (n = a.map((u) => ({ ...u })), o === !0) {
+      var l = F() / k * 100 / n.length;
+      E === !0 && (l += 3 / k * 100), n = n.map((b) => ({
+        ...b,
+        width: b.width - l
+      }));
+    }
+    return n;
+  }, Ie = (n, l) => {
+    if (n && n.length > 0) {
+      var u = 0, b = n.map((x) => x.width).reduce((x, q) => x + q);
+      o === !0 && (u = F() / k * 100);
+      var H = b + u;
+      mr(H) && (H > 101 || H < 98) && console.error(`Error: Row ${l} - sum of column widths is ${H}.`);
+    }
+  }, He = (n) => {
+    let l = {}, u = X.find(
+      (b) => String(b[W]) === String(n[W])
+    );
+    return u != null ? l.IsSelected = !0 : l.IsSelected = !1, l;
+  }, F = () => G === "small" ? 37 : G === "medium" ? 43 : G === "large" ? 49 : 37, ve = (n = {}, l) => {
+    let u = {};
+    var b = U();
+    Ie(b, l), o === !0 && (u = He(n));
+    var H = {
+      onRowClick: we,
+      onSelectRow: ie,
+      RowData: n,
+      SelectedData: X,
+      EnableSelection: o,
+      Columns: a,
+      ColumnsToRender: b,
+      Index: l,
+      key: l,
+      ...p,
+      ...u
+    }, x = /* @__PURE__ */ z(R, { children: [
+      E === !0 && We(n),
+      o === !0 && Pe(u.IsSelected, n),
+      b.map((q, Ve) => Be(n, q, Ve, l, b))
+    ] });
+    return S(
+      A("TABLE_ROW", e.children),
+      H,
+      x
+    ) || /* @__PURE__ */ O(Z, { ...H, key: l, noBorder: y }, x);
+  }, Be = (n, l, u, b, H) => {
+    var x = {
+      RowData: n,
+      Column: l,
+      ColumnsToRender: H,
+      Index: u,
+      RowIndex: b,
+      key: u,
+      EnableSelection: o,
+      RowIdentifier: W,
+      EnableRowHighlight: L,
+      GetRowHighlightColor: C,
+      ...p
+    };
+    return S(
+      A("TABLE_CELL", e.children),
+      x
+    ) || /* @__PURE__ */ O(ee, { ...x, key: u });
+  }, Pe = (n, l, u = -1) => {
+    var b = {
+      SelectedData: X,
+      RowData: l,
+      onSelectRow: ie,
+      Index: u,
+      key: u,
+      IsSelected: n,
+      EnableRowHighlight: L,
+      GetRowHighlightColor: C,
+      ...p
+    };
+    return S(
+      A("TABLE_SELLECTION_CELL", e.children),
+      b
+    ) || /* @__PURE__ */ O(
+      re,
+      {
+        ...b,
+        key: u,
+        width: F() / k * 100
+      }
+    );
+  }, $e = () => {
+    var n = {
+      Columns: a,
+      ...p
+    }, l = /* @__PURE__ */ z(R, { children: [
+      E === !0 && Ye(),
+      o === !0 && xe(),
+      U().map((u, b) => Ne(u, b))
+    ] });
+    return S(
+      A("TABLE_HEAD_ROW", e.children),
+      n,
+      l
+    ) || /* @__PURE__ */ O(te, { ...n, key: 0 }, l);
+  }, Ne = (n, l, u) => {
+    var b = {
+      Index: l,
+      Column: n,
+      Ordering: ye,
+      EnableOrdering: d,
+      EnableSelectAll: c,
+      onColumnClick: pe,
+      ColumnsToRender: u,
+      ...p
+    };
+    return S(
+      A("TABLE_HEAD_CELL", e.children),
+      b
+    ) || /* @__PURE__ */ O(oe, { ...b, key: l });
+  }, xe = () => {
+    var n = {
+      Index: -1,
+      IsSelected: Ee,
+      onSelectAll: Ce,
+      EnableSelectAll: c,
+      ...p
+    };
+    return S(
+      A("TABLE_HEAD_SELECTION_CELL", e.children),
+      n
+    ) || /* @__PURE__ */ O(
+      ne,
+      {
+        ...n,
+        key: -1,
+        width: F() / k * 100
+      }
+    );
+  }, De = () => S(A("TABLE_HEADER", e.children), {
+    Data: I,
+    Columns: a,
+    ...p
+  }) || /* @__PURE__ */ i(R, {}), ke = () => S(A("TABLE_FOOTER", e.children), {
+    Data: I,
+    Columns: a,
+    ...p
+  }) || /* @__PURE__ */ i(R, {}), je = () => S(
+    A("TABLE_SPECIAL_LAST_ROW", e.children),
+    {
+      Data: I,
+      Columns: a,
+      ColumnsToRender: U(),
+      Disabled: m,
+      ...p
+    }
+  ) || /* @__PURE__ */ i(R, {}), ze = () => {
+    if (I == null || I && I.length === 0) {
+      var n = U().length;
+      return o === !0 && n++, E === !0 && n++, /* @__PURE__ */ i("tr", { children: /* @__PURE__ */ i("td", { colSpan: n, children: $ ? /* @__PURE__ */ i($, {}) : /* @__PURE__ */ i(Jr, { ...p, children: P }) }) });
+    }
+    return /* @__PURE__ */ i(R, {});
+  }, We = (n) => {
+    var l = {
+      ...p,
+      key: -1,
+      RowData: n,
+      GetRowStatusIndicatorColor: _
+    };
+    return E === !0 ? /* @__PURE__ */ i(R, { children: S(
+      A("TABLE_ROW_STATUS_INDICATOR_CELL", e.children),
+      l
+    ) || /* @__PURE__ */ i(le, { ...l, noBorder: y }) }) : /* @__PURE__ */ i(R, {});
+  }, Ye = () => {
+    var n = {
+      ...p,
+      key: -1
+    };
+    return E === !0 ? /* @__PURE__ */ i(R, { children: S(
+      A(
+        "TABLE_HEAD_ROW_STATUS_INDICATOR_CELL",
+        e.children
+      ),
+      n
+    ) || /* @__PURE__ */ i(ae, { ...n }) }) : /* @__PURE__ */ i(R, {});
+  }, Fe = () => h === !0 && m === !0 ? /* @__PURE__ */ i(R, { children: /* @__PURE__ */ i(Xr, { theme: se, children: S(
+    A("TABLE_LOADER", e.children),
+    {
+      ...p,
+      Loading: m
+    }
+  ) || /* @__PURE__ */ i(tr, { ...p }) }) }) : /* @__PURE__ */ i(R, {}), Ge = () => {
+    var n = ue(e);
+    delete n.__TYPE__;
+    var l = /* @__PURE__ */ z(R, { children: [
+      I.map((u, b) => ve(u, b)),
+      ze()
+    ] });
+    return S(
+      A("TABLE_BODY", e.children),
+      n,
+      g ? l : void 0
+    ) || /* @__PURE__ */ i(K, { ...p, children: l });
+  }, Ue = () => {
+    var n = ue(e);
+    delete n.__TYPE__;
+    var l = /* @__PURE__ */ i(R, { children: $e() });
+    return S(
+      A("TABLE_HEAD", e.children),
+      n,
+      T ? l : null
+    ) || /* @__PURE__ */ i(Q, { ...p, children: l });
+  };
+  return (() => {
+    var n = {
+      className: Re,
+      Loading: m,
+      ...p
+    }, l = /* @__PURE__ */ z(R, { children: [
+      Fe(),
+      De(),
+      /* @__PURE__ */ z(
+        qr,
+        {
+          ...p,
+          width: Le || "100%",
+          "data-table": !0,
+          ref: Ae,
+          noBorder: y,
+          children: [
+            Ue(),
+            Ge()
+          ]
+        }
+      ),
+      je(),
+      ke()
+    ] });
+    return S(
+      A("TABLE_CONTAINER", e.children),
+      n,
+      l
+    ) || /* @__PURE__ */ i(
+      Mr,
+      {
+        ...n,
+        isLoading: h ? m : !1,
+        children: l
+      }
+    );
+  })();
+});
+_e.propTypes = {
+  /**
+   * This property determines where the component is rendered.
+   * Should not be overridden!
+   */
+  __TYPE__: r.string,
+  /**
+   *
+   */
+  ID: r.string,
+  //----------------------------------------
+  noBorder: r.bool,
+  /**
+   * Show a selection checkbox in the first cell of every row.
+   * Value of the checkbox is determined by the `SelectedData` property.
+   */
+  EnableSelection: r.bool,
+  /**
+   * Show ordering arrows in header cells.
+   */
+  EnableOrdering: r.bool,
+  /**
+   * Show a spinner with backdrop on top of the table when `Loading` is set to `true`.
+   */
+  EnableLoader: r.bool,
+  /**
+   * Show a selection checkbox in the first cell of the table header.
+   * Value of the checkbox is determined by the `SelectedEntirePage` property.
+   */
+  EnableSelectAll: r.bool,
+  /**
+   * Show a special status indicator cell on the left edge of the row
+   */
+  EnableRowStatusIndicator: r.bool,
+  /**
+   *
+   */
+  EnableRowHighlight: r.bool,
+  /**
+   *
+   */
+  GetRowStatusIndicatorColor: r.func,
+  /**
+   *
+   */
+  GetRowHighlightColor: r.func,
+  //----------------------------------------
+  /**
+   * Specify the text that is shown when there are 0 rows in the `Data`.
+   */
+  NoDataText: r.string,
+  /**
+   * React component to show instead of the `NoDataText`
+   */
+  NoDataComponet: r.node,
+  //--------------------
+  /**
+   *  Disables some events and actions when set to `true`. Also triggers the spinner if `EnableLoader` is set to `true`.
+   */
+  Loading: r.bool,
+  /**
+   * Defines the table columns.
+   * @param id - Column identifier
+   * @param displayName - Text displayed in the header
+   * @param accessor - Access the property in `Data`
+   * @param width - Default column width (overridden by the VisibilityPattern)
+   * @param sortable - Can be sorted
+   *
+   */
+  Columns: r.arrayOf(r.object),
+  /**
+   * Defines the data displayed in each row.
+   */
+  Data: r.arrayOf(r.object),
+  /**
+   * Define the selected data.
+   * @param id - Column identifier (mandatory field)
+   */
+  SelectedData: r.arrayOf(r.object),
+  /**
+   *  Value of the `SelectAll` checkbox.
+   */
+  SelectedEntirePage: r.bool,
+  /**
+   *  Defines which field in a data object is the row identifier.
+   */
+  RowIdentifier: r.string,
+  /**
+   * An object that defines the width and order of columns for different screen sizes.
+   * (`XS`,`S`,`M`,`L`,`XL`)
+   */
+  VisibilityPattern: r.object,
+  /**
+   * Describe how the data is ordered.
+   * @param columnId - Column identifier, maps to the id on the Column object
+   */
+  Ordering: r.shape({
+    columnId: r.number,
+    ascending: r.bool,
+    descending: r.bool
+  }),
+  //----------------------------------------
+  /**
+   * Triggered on header cell click.
+   * @param event - event object
+   * @param column - column definition
+   * @param ordering - updated ordering object, or undefined if ordering is not enabled or the column is not sortable
+   */
+  onColumnClick: r.func,
+  /**
+   * Triggered on table row click.
+   * @param event - event object
+   * @param rowData - row data
+   */
+  onRowClick: r.func,
+  /**
+   * Triggered on selection checkbox click.
+   * @param event - event object
+   * @param rowData - row data
+   * @param isSelected - the value of selection checkbox
+   */
+  onSelectRow: r.func,
+  /**
+   * Triggered on select all checkbox click.
+   * @param event - event object
+   * @param isSelected - the value of select all checkbox
+   */
+  onSelectAll: r.func,
+  //----------------------------------------
+  /**
+   * `width` applied to html table.
+   */
+  tableWidth: r.string,
+  /**
+   * `className` applied to the component container.
+   */
+  className: r.string,
+  /**
+   * Defines size of the component (padding, margin, font etc.).
+   */
+  size: r.oneOf(["small", "medium", "large"]),
+  /**
+   *  Defines the palette color for the component.
+   */
+  color: r.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "information",
+    "neutral",
+    "gray"
+  ])
+};
+_e.displayName = "TABLE";
+export {
+  ct as TableComponentOverrides,
+  _e as default
+};