@companix/uikit 0.1.42 → 0.1.44

package/dist/bundle.es42.js

@@ -1,164 +1,59 @@
-import { escape as u, unescape as f, isElementNode as g } from "@companix/utils-browser";
-import { onElementKeyDownFactory as v } from "./bundle.es79.js";
-import { getEditorSelection as l, normalizeEditorText as a, getNodeTextContent as h, scrollSelectionIntoView as d, getTextSelectionOffsets as E } from "./bundle.es80.js";
-class k {
-  element;
-  prevText = "";
-  prevTextSelection = { from: 0, to: 0 };
-  handlers = {
-    contentChange: /* @__PURE__ */ new Set()
-  };
-  constructor(e) {
-    if (e.contentEditable !== "true")
-      throw new Error("Элемент эдитора должен быть contentEditable");
-    e.tagName !== "SPAN" && console.warn("Используйте элемент span"), this.element = e, this.element.translate = !1;
-  }
-  getElement() {
-    return this.element;
-  }
-  onPaste(e) {
-    return this.handlers.paste || this.element.addEventListener("paste", this.handlePaste), this.handlers.paste = e, () => {
-      this.handlers.paste = void 0, this.element.removeEventListener("paste", this.handlePaste);
-    };
-  }
-  onKeyCombo(e) {
-    const t = v(e);
-    return this.element.addEventListener("keydown", t), this.handlers.keyCombo = e, () => {
-      this.handlers.keyCombo = void 0, this.element.removeEventListener("keydown", t);
-    };
-  }
-  onFocusChange(e) {
-    return this.handlers.focusChange || (this.element.addEventListener("focus", this.handleFocus), this.element.addEventListener("blur", this.handleBlur)), this.handlers.focusChange = e, () => {
-      this.handlers.focusChange = void 0, this.element.removeEventListener("focus", this.handleFocus), this.element.removeEventListener("blur", this.handleBlur);
-    };
-  }
-  onContentChange(e) {
-    return this.handlers.contentChange.size === 0 && (this.element.addEventListener("keyup", this.checkContentChanged), document.addEventListener("selectionchange", this.checkContentChanged)), this.handlers.contentChange.add(e), () => {
-      this.handlers.contentChange.delete(e), this.handlers.contentChange.size === 0 && (this.element.removeEventListener("keyup", this.checkContentChanged), document.removeEventListener("selectionchange", this.checkContentChanged));
-    };
-  }
-  onMouseDown() {
-    return this.element.addEventListener("mousedown", this.handleMouseDown), () => {
-      this.element.removeEventListener("mousedown", this.handleMouseDown);
-    };
-  }
-  setSelection(e) {
-    const t = l(this.element);
-    if (!("selection" in t)) return;
-    const n = document.createRange(), s = this.resolveDomPosition(e.from), o = this.resolveDomPosition(e.to);
-    n.setStart(s.container, s.offset), n.setEnd(o.container, o.offset), t.selection.removeAllRanges(), t.selection.addRange(n);
-  }
-  // вставить переданный текст в текущую выделенную область/позицию курсора внутри contenteditable
-  insertAtSelection(e, t) {
-    t && this.setSelection(t);
-    const n = C(u(e));
-    for (const s of n)
-      s.kind === "Text" && document.execCommand("insertText", !1, f(s.text));
-    this.checkContentChanged();
-  }
-  removeFormat() {
-    document.execCommand("removeFormat");
-  }
-  resetText(e = "", t = !1, n = !0) {
-    const s = !this.isFocused() && !n;
-    this.element.innerText = "";
-    const o = document.activeElement, i = this.element.inputMode;
-    s && (this.element.inputMode = "none"), this.element.focus(), document.execCommand("removeFormat"), t ? document.execCommand("inserthtml", !1, e) : this.insertAtSelection(a(e)), s && (this.element.blur(), this.element.inputMode = i, o?.focus?.()), this.checkContentChanged();
-  }
-  getText() {
-    let e = "";
-    const t = document.createTreeWalker(
-      this.element,
-      NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT
-    );
-    for (; t.nextNode(); )
-      e += h(t.currentNode);
-    return a(e);
-  }
-  getHtml() {
-    return this.element.innerHTML;
-  }
-  getHtmlWithEmojisAsText() {
-    const e = this.element.innerHTML, t = /<img class="Emoji .+?" src=".+?" alt=".+?">/, n = /alt=".+?"/, s = (o) => {
-      const i = o.match(t);
-      if (!i?.[0]) return o;
-      const c = i[0].match(n);
-      if (!c?.[0]) return o;
-      const m = c[0].replace("alt=", "").replaceAll('"', "");
-      return s(o.replace(i[0], m));
-    };
-    return s(e);
-  }
-  focus(e = !1) {
-    if (this.isFocused()) return;
-    this.element.focus();
-    const t = l(this.element);
-    "selection" in t && (t.selection.selectAllChildren(this.element), e ? t.selection.collapseToStart() : t.selection.collapseToEnd(), d());
-  }
-  isFocused() {
-    return document.activeElement === this.element;
-  }
-  setDisabled(e) {
-    this.element.contentEditable = e ? "false" : "true";
-  }
-  handlePaste = async (e) => {
-    e.preventDefault();
-    const { clipboardData: t } = e;
-    if (!t) return;
-    const n = t.getData("text");
-    if (n) {
-      this.insertAtSelection(n), d();
-      return;
-    }
-  };
-  handleFocus = () => {
-    this.handlers.focusChange?.(!0);
-  };
-  handleBlur = () => {
-    this.handlers.focusChange?.(!1);
-  };
-  handleMouseDown = (e) => {
-    if (!(e.target instanceof HTMLImageElement)) return;
-    const t = new Range(), n = window.getSelection();
-    n && (t.selectNode(e.target), t.collapse(e.offsetX <= 8), n.removeAllRanges(), n.addRange(t));
-  };
-  checkContentChanged = () => {
-    const e = a(this.getText()), t = l(this.element);
-    if (!("range" in t)) return;
-    const n = E(this.element, t.range);
-    if (e === this.prevText && n.from === this.prevTextSelection.from && n.to === this.prevTextSelection.to)
-      return;
-    const s = e === `
-` && this.prevText.length > 0;
-    if (this.prevText = e, this.prevTextSelection = n, s) {
-      this.resetText("");
-      return;
-    }
-    this.handlers.contentChange.forEach((o) => o(e, n));
-  };
-  resolveDomPosition(e) {
-    const t = document.createTreeWalker(
-      this.element,
-      NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT
-    );
-    let n = e;
-    for (; t.nextNode(); ) {
-      const s = t.currentNode, o = h(s).length;
-      if (o >= n)
-        return g(s) && s.nodeName === "BR" && (n -= 1), {
-          container: s,
-          offset: Math.max(n, 0)
-        };
-      n -= o;
-    }
-    return {
-      container: this.element,
-      offset: this.element.childNodes.length
-    };
-  }
-}
-const C = (r) => r ? [{ kind: "Text", text: r }] : [];
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import c from "classnames";
+import { Spinner as b } from "./bundle.es7.js";
+import { Icon as h } from "./bundle.es37.js";
+import { attr as N } from "@companix/utils-browser";
+import { WriteBarInput as u } from "./bundle.es79.js";
+const w = (a) => {
+  const {
+    before: e,
+    after: t,
+    containerRef: i,
+    header: o,
+    contentClassName: n,
+    placeholder: m,
+    id: l,
+    onCreate: d,
+    className: p,
+    ...f
+  } = a;
+  return /* @__PURE__ */ s("div", { ref: i, ...f, className: c("write-bar", p), children: [
+    o,
+    /* @__PURE__ */ s("div", { className: c("write-bar-content", n), children: [
+      e && /* @__PURE__ */ r("div", { className: "write-bar-before", children: e }),
+      /* @__PURE__ */ r(
+        u,
+        {
+          className: "write-bar-input-wrapper",
+          placeholder: m,
+          placeholderClassName: "write-bar-placeholder",
+          inputClassName: "write-bar-input",
+          inputMode: "text",
+          id: l,
+          onCreate: d
+        }
+      ),
+      t && /* @__PURE__ */ r("div", { className: "write-bar-after", children: t })
+    ] })
+  ] });
+};
+w.IconButton = ({
+  Component: a = "button",
+  icon: e,
+  mode: t,
+  onClick: i,
+  isLoading: o,
+  isHidden: n
+}) => /* @__PURE__ */ r(
+  a,
+  {
+    onClick: i,
+    className: "write-bar-icon",
+    "data-mode": t,
+    "data-hidden": N(n),
+    children: o ? /* @__PURE__ */ r(b, { size: 18 }) : /* @__PURE__ */ r(h, { icon: e, size: "xxs" })
+  }
+);
 export {
-  k as Editor,
-  C as toTextChunksLite
+  w as WriteBar
 };

package/dist/bundle.es43.js

@@ -1,83 +1,164 @@
-import { jsx as r, jsxs as p } from "react/jsx-runtime";
-import f from "classnames";
-import { useContext as m, createContext as u, useState as h, useCallback as c, useMemo as w } from "react";
-const E = ({ title: t, icon: i, text: e, onDrop: s }) => {
-  const [l, n] = h(!1);
-  return /* @__PURE__ */ p(
-    "div",
-    {
-      onDrop: s,
-      onDragEnter: () => n(!0),
-      onDragLeave: () => n(!1),
-      className: f("drop-target", {
-        "drop-target-hovered": l
-      }),
-      children: [
-        /* @__PURE__ */ r("div", { className: "drop-target-border", children: /* @__PURE__ */ r("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "none", children: /* @__PURE__ */ r("rect", { x: "0", y: "0", rx: "8px", ry: "8px", width: "100%", height: "100%" }) }) }),
-        /* @__PURE__ */ p("div", { className: "drop-target-area", children: [
-          /* @__PURE__ */ r("i", { className: "drop-target-icon", children: i }),
-          /* @__PURE__ */ p("div", { className: "drop-target-info", children: [
-            /* @__PURE__ */ r("span", { className: "drop-target-title", children: t }),
-            /* @__PURE__ */ r("span", { className: "drop-target-text", children: e })
-          ] })
-        ] })
-      ]
+import { escape as u, unescape as f, isElementNode as g } from "@companix/utils-browser";
+import { onElementKeyDownFactory as v } from "./bundle.es80.js";
+import { getEditorSelection as l, normalizeEditorText as a, getNodeTextContent as h, scrollSelectionIntoView as d, getTextSelectionOffsets as E } from "./bundle.es81.js";
+class k {
+  element;
+  prevText = "";
+  prevTextSelection = { from: 0, to: 0 };
+  handlers = {
+    contentChange: /* @__PURE__ */ new Set()
+  };
+  constructor(e) {
+    if (e.contentEditable !== "true")
+      throw new Error("Элемент эдитора должен быть contentEditable");
+    e.tagName !== "SPAN" && console.warn("Используйте элемент span"), this.element = e, this.element.translate = !1;
+  }
+  getElement() {
+    return this.element;
+  }
+  onPaste(e) {
+    return this.handlers.paste || this.element.addEventListener("paste", this.handlePaste), this.handlers.paste = e, () => {
+      this.handlers.paste = void 0, this.element.removeEventListener("paste", this.handlePaste);
+    };
+  }
+  onKeyCombo(e) {
+    const t = v(e);
+    return this.element.addEventListener("keydown", t), this.handlers.keyCombo = e, () => {
+      this.handlers.keyCombo = void 0, this.element.removeEventListener("keydown", t);
+    };
+  }
+  onFocusChange(e) {
+    return this.handlers.focusChange || (this.element.addEventListener("focus", this.handleFocus), this.element.addEventListener("blur", this.handleBlur)), this.handlers.focusChange = e, () => {
+      this.handlers.focusChange = void 0, this.element.removeEventListener("focus", this.handleFocus), this.element.removeEventListener("blur", this.handleBlur);
+    };
+  }
+  onContentChange(e) {
+    return this.handlers.contentChange.size === 0 && (this.element.addEventListener("keyup", this.checkContentChanged), document.addEventListener("selectionchange", this.checkContentChanged)), this.handlers.contentChange.add(e), () => {
+      this.handlers.contentChange.delete(e), this.handlers.contentChange.size === 0 && (this.element.removeEventListener("keyup", this.checkContentChanged), document.removeEventListener("selectionchange", this.checkContentChanged));
+    };
+  }
+  onMouseDown() {
+    return this.element.addEventListener("mousedown", this.handleMouseDown), () => {
+      this.element.removeEventListener("mousedown", this.handleMouseDown);
+    };
+  }
+  setSelection(e) {
+    const t = l(this.element);
+    if (!("selection" in t)) return;
+    const n = document.createRange(), s = this.resolveDomPosition(e.from), o = this.resolveDomPosition(e.to);
+    n.setStart(s.container, s.offset), n.setEnd(o.container, o.offset), t.selection.removeAllRanges(), t.selection.addRange(n);
+  }
+  // вставить переданный текст в текущую выделенную область/позицию курсора внутри contenteditable
+  insertAtSelection(e, t) {
+    t && this.setSelection(t);
+    const n = C(u(e));
+    for (const s of n)
+      s.kind === "Text" && document.execCommand("insertText", !1, f(s.text));
+    this.checkContentChanged();
+  }
+  removeFormat() {
+    document.execCommand("removeFormat");
+  }
+  resetText(e = "", t = !1, n = !0) {
+    const s = !this.isFocused() && !n;
+    this.element.innerText = "";
+    const o = document.activeElement, i = this.element.inputMode;
+    s && (this.element.inputMode = "none"), this.element.focus(), document.execCommand("removeFormat"), t ? document.execCommand("inserthtml", !1, e) : this.insertAtSelection(a(e)), s && (this.element.blur(), this.element.inputMode = i, o?.focus?.()), this.checkContentChanged();
+  }
+  getText() {
+    let e = "";
+    const t = document.createTreeWalker(
+      this.element,
+      NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT
+    );
+    for (; t.nextNode(); )
+      e += h(t.currentNode);
+    return a(e);
+  }
+  getHtml() {
+    return this.element.innerHTML;
+  }
+  getHtmlWithEmojisAsText() {
+    const e = this.element.innerHTML, t = /<img class="Emoji .+?" src=".+?" alt=".+?">/, n = /alt=".+?"/, s = (o) => {
+      const i = o.match(t);
+      if (!i?.[0]) return o;
+      const c = i[0].match(n);
+      if (!c?.[0]) return o;
+      const m = c[0].replace("alt=", "").replaceAll('"', "");
+      return s(o.replace(i[0], m));
+    };
+    return s(e);
+  }
+  focus(e = !1) {
+    if (this.isFocused()) return;
+    this.element.focus();
+    const t = l(this.element);
+    "selection" in t && (t.selection.selectAllChildren(this.element), e ? t.selection.collapseToStart() : t.selection.collapseToEnd(), d());
+  }
+  isFocused() {
+    return document.activeElement === this.element;
+  }
+  setDisabled(e) {
+    this.element.contentEditable = e ? "false" : "true";
+  }
+  handlePaste = async (e) => {
+    e.preventDefault();
+    const { clipboardData: t } = e;
+    if (!t) return;
+    const n = t.getData("text");
+    if (n) {
+      this.insertAtSelection(n), d();
+      return;
     }
-  );
-}, v = u({}), x = u({}), C = ({ onFilesAdd: t, ...i }) => {
-  const { onHide: e, isVisable: s } = m(v), [l, n] = h(!1), d = c((a) => {
-    a.preventDefault();
-  }, []), g = c(
-    (a) => {
-      a.stopPropagation();
-      const { relatedTarget: o } = a;
-      o instanceof HTMLElement && o?.matches(".drop-target, .drop-area") || e();
-    },
-    [l, e]
-  ), D = c(
-    (a) => {
-      a.preventDefault();
-      const o = [...Array.from(a.dataTransfer.files)];
-      o.length && t(o), e();
-    },
-    [t, e]
-  );
-  return /* @__PURE__ */ r(
-    "div",
-    {
-      onDragStart: () => n(!0),
-      onDragEnter: () => n(!0),
-      onDragOver: d,
-      onDragLeave: g,
-      className: f("drop-area", {
-        "drop-area-hidden": !s
-      }),
-      onDrop: () => {
-        e(), n(!1);
-      },
-      children: s && /* @__PURE__ */ r(E, { ...i, onDrop: D })
+  };
+  handleFocus = () => {
+    this.handlers.focusChange?.(!0);
+  };
+  handleBlur = () => {
+    this.handlers.focusChange?.(!1);
+  };
+  handleMouseDown = (e) => {
+    if (!(e.target instanceof HTMLImageElement)) return;
+    const t = new Range(), n = window.getSelection();
+    n && (t.selectNode(e.target), t.collapse(e.offsetX <= 8), n.removeAllRanges(), n.addRange(t));
+  };
+  checkContentChanged = () => {
+    const e = a(this.getText()), t = l(this.element);
+    if (!("range" in t)) return;
+    const n = E(this.element, t.range);
+    if (e === this.prevText && n.from === this.prevTextSelection.from && n.to === this.prevTextSelection.to)
+      return;
+    const s = e === `
+` && this.prevText.length > 0;
+    if (this.prevText = e, this.prevTextSelection = n, s) {
+      this.resetText("");
+      return;
     }
-  );
-}, H = ({ children: t }) => {
-  const [i, e] = h(!1), s = c(() => {
-    e(!1);
-  }, []), l = c((d) => {
-    const { items: g } = d.dataTransfer;
-    Array.from(g).filter(
-      ({ type: a, kind: o }) => a !== "text/uri-list" && o !== "string"
-    ).length && e(!0);
-  }, []), n = w(() => ({
-    onDragEnter: l
-  }), []);
-  return /* @__PURE__ */ r(v.Provider, { value: { isVisable: i, onHide: s }, children: /* @__PURE__ */ r(x.Provider, { value: n, children: t }) });
-}, T = () => {
-  const { onDragEnter: t } = m(x);
-  if (!t)
-    throw new Error("useDragContext should be within context");
-  return t;
-};
+    this.handlers.contentChange.forEach((o) => o(e, n));
+  };
+  resolveDomPosition(e) {
+    const t = document.createTreeWalker(
+      this.element,
+      NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT
+    );
+    let n = e;
+    for (; t.nextNode(); ) {
+      const s = t.currentNode, o = h(s).length;
+      if (o >= n)
+        return g(s) && s.nodeName === "BR" && (n -= 1), {
+          container: s,
+          offset: Math.max(n, 0)
+        };
+      n -= o;
+    }
+    return {
+      container: this.element,
+      offset: this.element.childNodes.length
+    };
+  }
+}
+const C = (r) => r ? [{ kind: "Text", text: r }] : [];
 export {
-  C as DropArea,
-  H as DropAreaProvider,
-  T as useDragEnter
+  k as Editor,
+  C as toTextChunksLite
 };

package/dist/bundle.es44.js

@@ -1,9 +1,83 @@
-import { jsxs as p, jsx as r } from "react/jsx-runtime";
-const b = ({ header: c, items: e, getItemLayout: d, className: o, onRowClick: h }) => /* @__PURE__ */ p("table", { className: o, children: [
-  /* @__PURE__ */ r("colgroup", { children: c.map(({ style: t }, l) => /* @__PURE__ */ r("col", { style: t }, `colgroup-col-${l}`)) }),
-  /* @__PURE__ */ r("thead", { children: /* @__PURE__ */ r("tr", { children: c.map(({ content: t }, l) => /* @__PURE__ */ r("th", { children: t }, `header-th-${l}`)) }) }),
-  /* @__PURE__ */ r("tbody", { children: e.map((t, l) => /* @__PURE__ */ r("tr", { onClick: () => h?.(t), children: d(t, l).map((n, a) => /* @__PURE__ */ r("td", { children: n }, `table-td-${l}-${a}`)) }, `table-tr-${l}`)) })
-] });
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import f from "classnames";
+import { useContext as m, createContext as u, useState as h, useCallback as c, useMemo as w } from "react";
+const E = ({ title: t, icon: i, text: e, onDrop: s }) => {
+  const [l, n] = h(!1);
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      onDrop: s,
+      onDragEnter: () => n(!0),
+      onDragLeave: () => n(!1),
+      className: f("drop-target", {
+        "drop-target-hovered": l
+      }),
+      children: [
+        /* @__PURE__ */ r("div", { className: "drop-target-border", children: /* @__PURE__ */ r("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "none", children: /* @__PURE__ */ r("rect", { x: "0", y: "0", rx: "8px", ry: "8px", width: "100%", height: "100%" }) }) }),
+        /* @__PURE__ */ p("div", { className: "drop-target-area", children: [
+          /* @__PURE__ */ r("i", { className: "drop-target-icon", children: i }),
+          /* @__PURE__ */ p("div", { className: "drop-target-info", children: [
+            /* @__PURE__ */ r("span", { className: "drop-target-title", children: t }),
+            /* @__PURE__ */ r("span", { className: "drop-target-text", children: e })
+          ] })
+        ] })
+      ]
+    }
+  );
+}, v = u({}), x = u({}), C = ({ onFilesAdd: t, ...i }) => {
+  const { onHide: e, isVisable: s } = m(v), [l, n] = h(!1), d = c((a) => {
+    a.preventDefault();
+  }, []), g = c(
+    (a) => {
+      a.stopPropagation();
+      const { relatedTarget: o } = a;
+      o instanceof HTMLElement && o?.matches(".drop-target, .drop-area") || e();
+    },
+    [l, e]
+  ), D = c(
+    (a) => {
+      a.preventDefault();
+      const o = [...Array.from(a.dataTransfer.files)];
+      o.length && t(o), e();
+    },
+    [t, e]
+  );
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      onDragStart: () => n(!0),
+      onDragEnter: () => n(!0),
+      onDragOver: d,
+      onDragLeave: g,
+      className: f("drop-area", {
+        "drop-area-hidden": !s
+      }),
+      onDrop: () => {
+        e(), n(!1);
+      },
+      children: s && /* @__PURE__ */ r(E, { ...i, onDrop: D })
+    }
+  );
+}, H = ({ children: t }) => {
+  const [i, e] = h(!1), s = c(() => {
+    e(!1);
+  }, []), l = c((d) => {
+    const { items: g } = d.dataTransfer;
+    Array.from(g).filter(
+      ({ type: a, kind: o }) => a !== "text/uri-list" && o !== "string"
+    ).length && e(!0);
+  }, []), n = w(() => ({
+    onDragEnter: l
+  }), []);
+  return /* @__PURE__ */ r(v.Provider, { value: { isVisable: i, onHide: s }, children: /* @__PURE__ */ r(x.Provider, { value: n, children: t }) });
+}, T = () => {
+  const { onDragEnter: t } = m(x);
+  if (!t)
+    throw new Error("useDragContext should be within context");
+  return t;
+};
 export {
-  b as Table
+  C as DropArea,
+  H as DropAreaProvider,
+  T as useDragEnter
 };

package/dist/bundle.es45.js

@@ -1,61 +1,9 @@
-import { jsxs as b, jsx as i } from "react/jsx-runtime";
-import y from "classnames";
-import { useRef as F, useMemo as I, useState as o } from "react";
-const C = (a) => {
-  const {
-    previewSrc: e,
-    maskHeight: s,
-    maskWidth: t,
-    className: m,
-    src: l,
-    children: d,
-    enableAspectRatio: g,
-    imgAttrs: p,
-    ...f
-  } = a, h = F(null), u = I(() => N(t, s), [t, s]), [r, v] = o(!1), [x, n] = o(!1), [w, c] = o(!1), $ = () => {
-    x && (n(!1), c(!1));
-  };
-  return /* @__PURE__ */ b(
-    "div",
-    {
-      className: y("image-base", { "image-base-loading": !r }, m),
-      style: g ? { aspectRatio: t / s } : {},
-      onClickCapture: $,
-      ...f,
-      children: [
-        !r && /* @__PURE__ */ i("img", { className: "image-base-placeholder", src: u, alt: "" }),
-        e && e !== l && !r && !w && /* @__PURE__ */ i(
-          "img",
-          {
-            className: "image-base-preview",
-            src: e,
-            style: { maxWidth: `${t}px`, maxHeight: `${s}px` },
-            loading: "lazy",
-            decoding: "async",
-            onError: () => c(!0),
-            alt: ""
-          }
-        ),
-        /* @__PURE__ */ i(
-          "img",
-          {
-            ref: h,
-            className: "image-base-img",
-            src: l,
-            decoding: "async",
-            onLoad: () => v(!0),
-            onError: () => n(!0),
-            ...p
-          }
-        ),
-        d
-      ]
-    }
-  );
-}, N = (a, e) => {
-  const s = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${a} ${e}" width="${a}" height="${e}" />`;
-  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(s)}`;
-};
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+const b = ({ header: c, items: e, getItemLayout: d, className: o, onRowClick: h }) => /* @__PURE__ */ p("table", { className: o, children: [
+  /* @__PURE__ */ r("colgroup", { children: c.map(({ style: t }, l) => /* @__PURE__ */ r("col", { style: t }, `colgroup-col-${l}`)) }),
+  /* @__PURE__ */ r("thead", { children: /* @__PURE__ */ r("tr", { children: c.map(({ content: t }, l) => /* @__PURE__ */ r("th", { children: t }, `header-th-${l}`)) }) }),
+  /* @__PURE__ */ r("tbody", { children: e.map((t, l) => /* @__PURE__ */ r("tr", { onClick: () => h?.(t), children: d(t, l).map((n, a) => /* @__PURE__ */ r("td", { children: n }, `table-td-${l}-${a}`)) }, `table-tr-${l}`)) })
+] });
 export {
-  C as ImageBase
+  b as Table
 };