@deviceinsight/ng-ui-components 6.30.0 → 7.1.0

package/dist/index.js

@@ -0,0 +1,3027 @@
+import { jsx as a, jsxs as m, Fragment as Ve } from "react/jsx-runtime";
+import { toast as Q, ToastContainer as ct, Slide as dt } from "react-toastify";
+import { customAlphabet as ht } from "nanoid";
+import * as $ from "react";
+import { useState as N, useEffect as R, forwardRef as Fe, useMemo as ut, useCallback as q, useRef as D, createElement as Be, Component as V, createRef as je } from "react";
+import P from "classnames";
+import { Popup as te, Button as F, Icon as pe, Modal as He, Checkbox as Se, SpinnerContainer as pt } from "@deviceinsight/ng-ui-basic-components";
+import { convert as Ge, parse as ft } from "pure-color";
+import { HexColorPicker as gt, RgbaStringColorPicker as mt, RgbStringColorPicker as vt } from "react-colorful";
+import Ye from "dayjs/plugin/timezone";
+import Ze from "dayjs/plugin/utc";
+import ie, { registerLocale as yt } from "react-datepicker";
+import { debounce as Ue, isEqual as z, orderBy as bt, uniqWith as St, difference as wt } from "lodash";
+import b from "dayjs";
+import Ct from "dayjs/plugin/localeData";
+import At from "dayjs/plugin/localizedFormat";
+import Nt from "dayjs/plugin/customParseFormat";
+import J from "i18next";
+import * as se from "date-fns/locale";
+import "dayjs/locale/en";
+import "dayjs/locale/en-gb";
+import "dayjs/locale/en-ca";
+import "dayjs/locale/de";
+import "dayjs/locale/de-at";
+import "dayjs/locale/de-ch";
+import "dayjs/locale/it";
+import "dayjs/locale/ja";
+import { useHistory as fe, useLocation as ge, Switch as xt, Route as we, Redirect as It, Link as We } from "react-router-dom";
+import { DndContext as Rt, closestCenter as kt } from "@dnd-kit/core";
+import { SortableContext as Mt, horizontalListSortingStrategy as ze, useSortable as Tt } from "@dnd-kit/sortable";
+import { restrictToHorizontalAxis as Ot } from "@dnd-kit/modifiers";
+import { readAccountObject as Et, writeAccountObject as Dt } from "@deviceinsight/ng-ui-api-client";
+import Lt from "react-select";
+import Pt from "react-dropzone";
+import { AsyncPaginate as Vt } from "react-select-async-paginate";
+import { SVG as Qe } from "@svgdotjs/svg.js";
+import Ft from "highcharts";
+import Bt from "highcharts-react-official";
+import $e from "@rc-component/slider";
+import jt from "@rc-component/tooltip";
+let G = {}, Je = {
+  autoClose: !1
+};
+const $i = (t) => {
+  Je = t;
+}, ne = (t, e) => {
+  t && (G[t] ? G[t] = [...G[t], e] : G[t] = [e]);
+}, Ji = (t, e, n) => {
+  const i = Q.success(t, e);
+  n && ne(n, i);
+}, Ki = (t, e, n) => {
+  const i = Q.info(t, e);
+  n && ne(n, i);
+}, Xi = (t, e, n) => {
+  const i = Q.warn(t, e);
+  n && ne(n, i);
+}, qi = (t, e, n) => {
+  const i = Q.error(t, { ...Je, ...e });
+  n && ne(n, i);
+}, _i = (t) => {
+  Q.dismiss(t);
+}, es = (t) => {
+  G[t] && (G[t].forEach((e) => Q.dismiss(e)), delete G[t]);
+}, ts = () => {
+  G = {}, Q.dismiss();
+}, ns = () => /* @__PURE__ */ a(ct, { position: "top-center", theme: "colored", autoClose: 3e4, hideProgressBar: !0, transition: dt }), Ht = (t = 32) => {
+  let e = "";
+  for (let n = 0; n < t; n++) {
+    const i = Math.random() * 16 | 0;
+    (n === 8 || n === 12 || n === 16 || n === 20) && (e += "-"), e += (n === 12 ? 4 : n === 16 ? i & 3 | 8 : i).toString(16);
+  }
+  return e;
+}, Gt = "0123456789abcdefghijklmnopqrstuvwxyz", is = ht(Gt, 10);
+let A, B;
+function ss(t, e) {
+  A = t, B = e;
+}
+function Yt(t) {
+  return t.filter((e, n, i) => i.indexOf(e) === n);
+}
+function Zt(t, e) {
+  return t.filter((n) => !e.includes(n));
+}
+function Ut(t, e) {
+  return Yt([...t, ...e]);
+}
+function Wt(t, e) {
+  return t.filter((n) => e.includes(n));
+}
+function le(t) {
+  return t.children ? t.children.length + t.children.reduce((n, i) => n + le(i), 0) : 0;
+}
+function _(t) {
+  return t.children ? t.children.reduce((e, n) => [...e, ..._(n)], []) : [t];
+}
+function zt(t) {
+  return _(t).map((e) => e.id);
+}
+function Qt({
+  childNodeKey: t,
+  idKey: e,
+  displayNameKey: n,
+  typeKey: i,
+  lazyLoadableKey: s,
+  nodeMetaData: r,
+  leafMetaData: o
+}) {
+  const { typeValue: l, image: c, resolver: h } = o, { typeValue: d, expandedImage: u, closedImage: f, resolver: p } = r;
+  return function g(v, w = "") {
+    return v.map((y) => {
+      const C = y[e], x = y[n], k = y[t], I = y[s], M = p ? p(y) : y[i] === d, E = h ? h(y) : y[i] === l, S = `${w}/${x}`, T = y;
+      if (M)
+        return {
+          id: C,
+          name: x,
+          children: g(k || [], S),
+          lazyLoadable: I,
+          expandedImage: u,
+          closedImage: f,
+          path: S,
+          originalNode: T
+        };
+      if (E)
+        return {
+          id: C,
+          name: x,
+          image: c,
+          path: S,
+          originalNode: T
+        };
+      throw new Error("unknown node or leaf type provided");
+    });
+  };
+}
+function $t(t, e) {
+  let n;
+  return e.children !== void 0 && (t.children !== void 0 ? n = [...t.children, ...e.children] : n = [...e.children]), { ...t, ...e, children: n || void 0 };
+}
+function Ke(t, e, n) {
+  return t.children === void 0 ? t : t.id === e ? $t(t, n) : { ...t, children: t.children.map((i) => Ke(i, e, n)) };
+}
+function Xe(t, e, n, i, s) {
+  if (t[n] === e)
+    return [t[s]];
+  if (t[i])
+    for (let r = 0; r < t[i].length; r++) {
+      const o = Xe(
+        t[i][r],
+        e,
+        n,
+        i,
+        s
+      );
+      if (o)
+        return o.unshift(t[s]), o;
+    }
+  return null;
+}
+function rs(t, e, n, i, s) {
+  const r = Xe(t, e, n, i, s);
+  return r ? r.join(".") : null;
+}
+function qe({
+  isOpen: t,
+  onOpenChange: e,
+  className: n,
+  style: i,
+  value: s,
+  placement: r,
+  children: o
+}) {
+  return /* @__PURE__ */ a(
+    te,
+    {
+      handler: /* @__PURE__ */ a("div", { className: `di color-picker-popper ${n || ""}`, style: i, children: /* @__PURE__ */ a("div", { className: "trigger", style: { ...i, backgroundColor: s } }) }),
+      open: t,
+      onOpenChange: e,
+      placement: r,
+      children: /* @__PURE__ */ a("div", { className: "color-picker-box", children: /* @__PURE__ */ a("div", { className: "content", children: o }) })
+    }
+  );
+}
+function as({
+  value: t,
+  isOpen: e,
+  onOpenStateChange: n,
+  direction: i,
+  colors: s,
+  onPick: r,
+  pickerStyle: o,
+  pickerClassName: l,
+  inline: c = !0,
+  className: h,
+  style: d
+}) {
+  const [u, f] = N(!1), p = /* @__PURE__ */ a("div", { className: P("di color-picker grid-color-picker clearfix", l), style: o, children: s.map((g) => /* @__PURE__ */ a(
+    "div",
+    {
+      onClick: () => {
+        r(g);
+      },
+      className: `color ${g === t ? "selected" : ""}`,
+      style: {
+        background: g
+      }
+    },
+    g
+  )) });
+  return c ? p : /* @__PURE__ */ a(
+    qe,
+    {
+      className: h,
+      style: d,
+      value: t,
+      isOpen: e ?? u,
+      onOpenChange: n ?? f,
+      placement: i,
+      children: p
+    }
+  );
+}
+const Ce = (t, e, n) => t.length ? e.test(t) : !n, be = class be extends $.Component {
+  constructor() {
+    super(...arguments), this.handleChange = (e) => {
+      const { value: n } = e.target, { pattern: i, required: s, onChange: r } = this.props, o = Ce(n, i, s);
+      r(n, o);
+    };
+  }
+  render() {
+    const { style: e, invalidStyle: n, value: i, ...s } = this.props, { pattern: r, required: o, ...l } = s;
+    return /* @__PURE__ */ a(
+      "input",
+      {
+        ...l,
+        value: i,
+        onChange: this.handleChange,
+        style: Ce(i, r, o) ? e : { ...e, ...n },
+        type: "text"
+      }
+    );
+  }
+};
+be.defaultProps = {
+  required: !1
+};
+let ee = be;
+function Ae({ value: t, pattern: e, onChange: n, placeholder: i, style: s }) {
+  const [r, o] = N(t);
+  function l(c, h) {
+    o(c), h && n(c);
+  }
+  return R(() => {
+    o(t);
+  }, [t]), /* @__PURE__ */ a(
+    ee,
+    {
+      value: r,
+      onChange: l,
+      pattern: e,
+      invalidStyle: {
+        borderColor: "red"
+      },
+      placeholder: i,
+      required: !0,
+      style: s
+    }
+  );
+}
+const Jt = /^#([A-Fa-f0-9]{6})$/, Kt = /^rgb\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/, _e = (t) => ft(t).splice(0, 3), Xt = (t) => t && t.length > 6 ? Ge.rgb.hex(_e(t)) : "", qt = (t) => t ? Ge.rgb.string(_e(t)) : "";
+function os({
+  onOpenStateChange: t,
+  onPick: e,
+  allowTextInput: n,
+  className: i,
+  direction: s,
+  inline: r = !0,
+  isOpen: o,
+  opacitySlider: l,
+  pickerClassName: c,
+  pickerStyle: h,
+  style: d,
+  value: u
+}) {
+  const [f, p] = N(!1), g = Xt(u), v = qt(u), w = u === g ? gt : l && !n ? mt : vt, y = /* @__PURE__ */ m(
+    "div",
+    {
+      className: P(
+        "di gradient-color-picker",
+        {
+          "with-textfield": n
+        },
+        c
+      ),
+      style: h,
+      children: [
+        /* @__PURE__ */ a(w, { color: u, onChange: e }),
+        n && /* @__PURE__ */ m("div", { className: "inputs", children: [
+          /* @__PURE__ */ a(
+            Ae,
+            {
+              value: g,
+              onChange: e,
+              pattern: Jt,
+              placeholder: "#FF00FF",
+              style: { width: 60 }
+            }
+          ),
+          /* @__PURE__ */ a(
+            Ae,
+            {
+              value: v,
+              onChange: e,
+              pattern: Kt,
+              placeholder: "rgb(255,0,255)",
+              style: { width: 115 }
+            }
+          )
+        ] })
+      ]
+    }
+  );
+  return r ? y : /* @__PURE__ */ a(
+    qe,
+    {
+      className: i,
+      style: d,
+      value: u,
+      isOpen: o ?? f,
+      onOpenChange: t ?? p,
+      placement: s,
+      children: y
+    }
+  );
+}
+const _t = ["en", "en-gb", "en-ca", "de", "de-at", "de-ch", "it", "ja"];
+function Ne(t) {
+  return _t.includes(t);
+}
+b.extend(Ze);
+b.extend(Ye);
+b.extend(Ct);
+b.extend(At);
+b.extend(Nt);
+function en(t) {
+  const [e, n] = t.split("-");
+  let i;
+  e && n ? i = se[`${e}${n}`] ?? se[e] : e ? i = se[e] : i = null, i && yt(t, i);
+}
+async function tn(t) {
+  let e = null;
+  const [n] = t.split("-");
+  Ne(t.toLowerCase()) ? e = t.toLowerCase() : Ne(n.toLowerCase()) && (e = n.toLowerCase()), e && b.locale(e);
+}
+function xe(t, e) {
+  return t == null || t === "" ? !0 : typeof t == "number" ? !isNaN(t) : typeof t == "string" ? b(t, e, !0).isValid() : !1;
+}
+function re(t, e, n) {
+  return typeof t == "number" && !Number.isNaN(t) ? new Date(t) : typeof t == "string" && b(t, e, !0).isValid() ? b.tz(t, e, n).toDate() : null;
+}
+function nn(t, e, n) {
+  return typeof t == "number" ? b.tz(t, n) : typeof t == "string" && b(t, e, !0).isValid() ? b.tz(t, e, n) : null;
+}
+const et = Fe(
+  ({ value: t, clearable: e, inline: n, readOnly: i, wrapperClassName: s, onChange: r, locale: o, timezone: l, ...c }, h) => {
+    const [d, u] = N(b.localeData().longDateFormat("L")), { t: f } = B(), [p, g] = N(!1), [v, w] = N(!1), [y, C] = N(""), x = ut(() => Ue(w, 30), []);
+    R(() => {
+      const S = o ?? J.language;
+      S && (en(S), tn(S).then(() => u(b.localeData().longDateFormat("L"))));
+    }, [o]);
+    const k = q(
+      (S) => S == null || S == "" ? "" : xe(S, d) ? typeof S == "number" ? b.tz(S, l).format(d) : S : f("dateInput.invalidDate", {
+        defaultValue: "invalid date"
+      }),
+      [d, f, l]
+    );
+    R(() => {
+      t == null ? C("") : C(k(t));
+    }, [k, t]), R(() => {
+      g(xe(t, d));
+    }, [d, t]), R(() => {
+      b.locale(o ?? J.language), u(b.localeData().longDateFormat("L"));
+    }, [o]);
+    const I = (S) => {
+      if (C(S), S) {
+        const T = b(S, d, !0).isValid();
+        if (T) {
+          const Y = nn(t, d, l), Z = b.tz(S, d, l ?? b.tz.guess());
+          Y && (Z.set("hour", Y.hour()), Z.set("minute", Y.minute()), Z.set("second", Y.second()), Z.set("millisecond", Y.millisecond())), r(Z.valueOf(), !0);
+        }
+        g(T);
+      } else
+        r(null, !0), g(!0);
+    }, M = (S) => {
+      r(S ? S.valueOf() : null), C(k(S ? S.getTime() : null)), w(!1);
+    }, E = () => I("");
+    return n ? /* @__PURE__ */ a(
+      ie,
+      {
+        ...c,
+        onChange: M,
+        selected: re(t, d, l),
+        locale: o ?? J.language,
+        isClearable: e,
+        placeholderText: d,
+        className: P("date", { invalid: !p }),
+        inline: !0
+      }
+    ) : i ? /* @__PURE__ */ a(
+      ie,
+      {
+        ...c,
+        onChange: () => {
+        },
+        selected: re(t, d, l),
+        locale: o ?? J.language,
+        customInput: /* @__PURE__ */ a("span", { children: /* @__PURE__ */ a("input", { type: "text", value: k(t), readOnly: !0 }) }),
+        placeholderText: d,
+        readOnly: !0
+      }
+    ) : /* @__PURE__ */ a(
+      te,
+      {
+        handler: /* @__PURE__ */ m("span", { className: "di date-input-wrapper", children: [
+          /* @__PURE__ */ a(
+            "input",
+            {
+              ref: h,
+              "data-testid": "date-input",
+              className: P("date", { invalid: !p }),
+              onChange: (S) => I(S.target.value),
+              value: y,
+              placeholder: d,
+              onBlur: () => {
+                I(k(t)), x(!1);
+              }
+            }
+          ),
+          e && /* @__PURE__ */ a(F, { naked: !0, small: !0, onClick: E, children: /* @__PURE__ */ a(pe, { del: !0 }) })
+        ] }),
+        mode: ["click", "focus"],
+        className: "date-input",
+        handlerWrapperClassName: s,
+        open: v,
+        onOpenChange: w,
+        children: /* @__PURE__ */ a(
+          "div",
+          {
+            className: "di date-picker-popup-wrapper",
+            tabIndex: 0,
+            onFocus: () => {
+              x(!0);
+            },
+            children: /* @__PURE__ */ a(
+              ie,
+              {
+                ...c,
+                selected: re(t, d, l),
+                onChange: M,
+                locale: o ?? J.language,
+                isClearable: e,
+                placeholderText: d,
+                className: P("date", { invalid: !p }),
+                inline: !0
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+class ls extends $.Component {
+  constructor() {
+    super(...arguments), this.state = {
+      editMode: !1
+    }, this.handleEdit = () => this.setState({
+      editMode: !0
+    }), this.handleChangeValue = (e) => this.props.onChange(e.target.value);
+  }
+  render() {
+    const { editMode: e } = this.state, { value: n } = this.props;
+    return e ? /* @__PURE__ */ a(
+      "input",
+      {
+        value: n,
+        onChange: this.handleChangeValue,
+        autoCorrect: "off",
+        spellCheck: "false",
+        autoComplete: "off"
+      }
+    ) : /* @__PURE__ */ m("span", { children: [
+      /* @__PURE__ */ a(
+        "span",
+        {
+          style: {
+            marginRight: 10
+          },
+          children: n
+        }
+      ),
+      /* @__PURE__ */ a(F, { small: !0, onClick: this.handleEdit, children: /* @__PURE__ */ a(pe, { edit: !0 }) })
+    ] });
+  }
+}
+function sn({
+  title: t,
+  message: e,
+  onAccept: n,
+  onCancel: i,
+  inputPlaceholder: s,
+  cancelButtonLabel: r,
+  acceptButtonLabel: o
+}) {
+  const { t: l } = B(), c = D(null), [h, d] = N("");
+  return R(() => {
+    c.current?.focus();
+  }), /* @__PURE__ */ a(
+    He,
+    {
+      header: l(t.id, {
+        defaultValue: t.defaultValue
+      }),
+      content: /* @__PURE__ */ a("div", { className: "di form", children: /* @__PURE__ */ m("div", { className: "field", children: [
+        /* @__PURE__ */ a("label", { children: /* @__PURE__ */ a(A, { i18nKey: e.id, children: e.defaultValue }) }),
+        /* @__PURE__ */ a(
+          "input",
+          {
+            type: "text",
+            style: {
+              width: 250
+            },
+            ref: c,
+            placeholder: s ? l(s.id, {
+              defaultValue: s.defaultValue
+            }) : void 0,
+            onChange: (u) => d(u.target.value)
+          }
+        )
+      ] }) }),
+      footer: /* @__PURE__ */ m("div", { children: [
+        /* @__PURE__ */ a(
+          F,
+          {
+            primary: !0,
+            onClick: () => {
+              n(h);
+            },
+            disabled: !h.length,
+            children: o ? /* @__PURE__ */ a(A, { i18nKey: o.id, children: o.defaultValue }) : /* @__PURE__ */ a(A, { i18nKey: "form.accept", children: "Accept" })
+          }
+        ),
+        /* @__PURE__ */ a(F, { onClick: i, children: r ? /* @__PURE__ */ a(A, { i18nKey: r.id, children: r.defaultValue }) : /* @__PURE__ */ a(A, { i18nKey: "form.cancel", children: "Cancel" }) })
+      ] }),
+      width: 600
+    }
+  );
+}
+function ds(t) {
+  return class extends $.Component {
+    constructor() {
+      super(...arguments), this.state = {
+        show: !1
+      }, this.prompt = (n, i, s, r, o) => new Promise((l) => {
+        this.setState({
+          show: !0,
+          promptElement: /* @__PURE__ */ a(
+            sn,
+            {
+              title: n,
+              message: i,
+              onAccept: (c) => {
+                this.setState({
+                  show: !1
+                }), l(c);
+              },
+              onCancel: () => {
+                this.setState({
+                  show: !1
+                });
+              },
+              inputPlaceholder: s,
+              acceptButtonLabel: r,
+              cancelButtonLabel: o
+            },
+            "1"
+          )
+        });
+      });
+    }
+    render() {
+      return [
+        /* @__PURE__ */ Be(t, { ...this.props, prompt: this.prompt, key: "0" }),
+        this.state.show ? this.state.promptElement : null
+      ];
+    }
+  };
+}
+const Ie = (t) => !!(t.metaKey || t.altKey || t.ctrlKey || t.shiftKey);
+function hs({ to: t, confirm: e, className: n, title: i, children: s, keyboardShortcut: r, ...o }) {
+  const l = fe(), { t: c } = B(), h = q(() => {
+    e ? e().then((p) => l.push(p || t)).catch(() => {
+    }) : l.push(t);
+  }, [e, l, t]), d = q(
+    (p) => {
+      r && p.key === r && !Ie(p) && // @ts-ignore EventTarget is a Node and has a tagName
+      p.target.tagName && // @ts-ignore EventTarget is a Node and has a tagName
+      !["INPUT", "SELECT", "TEXTAREA"].includes(p.target.tagName) && (p.preventDefault(), h());
+    },
+    [r, h]
+  );
+  R(() => {
+    if (r)
+      return window.addEventListener("keydown", d), () => {
+        window.removeEventListener("keydown", d);
+      };
+  }, [r, d]);
+  const u = (p) => {
+    p.button === 0 && !Ie(p) && (p.preventDefault(), h());
+  }, f = l.createHref(typeof t == "string" ? { pathname: t } : t);
+  return /* @__PURE__ */ a(
+    "a",
+    {
+      href: f,
+      onClick: u,
+      className: `di route-link ${n || ""}`,
+      title: i ? c(i.id, {
+        defaultValue: i.defaultValue
+      }) : void 0,
+      ...o,
+      children: s
+    }
+  );
+}
+const rn = {
+  info: "#ffffff",
+  success: "#cce0cc",
+  warning: "#fed254",
+  error: "#d66961"
+};
+function us({ type: t = "info", hideable: e = !1, className: n, icon: i, message: s, children: r }) {
+  const [o, l] = N(!0), { t: c } = B();
+  function h() {
+    if (typeof s != "string") {
+      const { id: u, defaultValue: f, ...p } = s;
+      return c(u, { ...p, defaultValue: f });
+    }
+    return s;
+  }
+  const d = h();
+  return o ? /* @__PURE__ */ m("div", { className: `infobox ${n || ""}`, children: [
+    /* @__PURE__ */ m(
+      "div",
+      {
+        className: "infobox-header",
+        style: {
+          backgroundColor: rn[t]
+        },
+        children: [
+          /* @__PURE__ */ m("div", { className: "infobox-header-content", children: [
+            i && /* @__PURE__ */ a("div", { className: "infobox-iconcontainer", children: /* @__PURE__ */ a("img", { src: i, alt: "info-icon", style: { width: 16, height: 16 } }) }),
+            /* @__PURE__ */ a("div", { className: "infobox-message", children: d })
+          ] }),
+          e && /* @__PURE__ */ a("button", { className: "infobox-closebutton", onClick: () => l(!1), children: /* @__PURE__ */ a(pe, { del: !0, large: !0 }) })
+        ]
+      }
+    ),
+    r
+  ] }) : null;
+}
+const ce = /* @__PURE__ */ Object.freeze({
+  Translate: {
+    toString(t) {
+      if (!t)
+        return;
+      const {
+        x: e,
+        y: n
+      } = t;
+      return "translate3d(" + (e ? Math.round(e) : 0) + "px, " + (n ? Math.round(n) : 0) + "px, 0)";
+    }
+  },
+  Scale: {
+    toString(t) {
+      if (!t)
+        return;
+      const {
+        scaleX: e,
+        scaleY: n
+      } = t;
+      return "scaleX(" + e + ") scaleY(" + n + ")";
+    }
+  },
+  Transform: {
+    toString(t) {
+      if (t)
+        return [ce.Translate.toString(t), ce.Scale.toString(t)].join(" ");
+    }
+  },
+  Transition: {
+    toString(t) {
+      let {
+        property: e,
+        duration: n,
+        easing: i
+      } = t;
+      return e + " " + n + "ms " + i;
+    }
+  }
+});
+function ae(t, e) {
+  const n = t.endsWith("/") ? "" : "/";
+  return `${t}${n}${e}`;
+}
+const an = ({
+  id: t,
+  to: e,
+  className: n,
+  title: i,
+  children: s,
+  draggingDisabled: r
+}) => {
+  const { attributes: o, listeners: l, setNodeRef: c, transform: h, transition: d } = Tt({
+    id: t,
+    disabled: r,
+    strategy: ze
+  }), u = {
+    transform: h ? ce.Transform.toString({ ...h, scaleX: 1 }) : void 0,
+    transition: d
+  }, { pathname: f } = ge();
+  return f.endsWith(e.toString()) ? /* @__PURE__ */ a(
+    "button",
+    {
+      "data-testid": "tab-button",
+      className: P("tab-header item active", n),
+      title: i,
+      ref: c,
+      style: u,
+      type: "button",
+      ...o,
+      ...l,
+      children: s
+    }
+  ) : /* @__PURE__ */ a(
+    We,
+    {
+      "data-testid": "tab-button",
+      to: e,
+      title: i,
+      className: P("tab-header item", n),
+      ref: c,
+      style: u,
+      ...o,
+      ...l,
+      children: s
+    }
+  );
+};
+function ps({ pages: t, onOrderChange: e, basePath: n, ...i }) {
+  const [s, r] = N(!1), { pathname: o, state: l } = ge();
+  function c() {
+    const d = o.split("/").reverse()[0];
+    return t.some((u) => u.path === d) ? o.substring(0, o.lastIndexOf("/")) : o;
+  }
+  function h(d) {
+    r(!1);
+    const { active: u, over: f } = d;
+    if (u.id !== f?.id && e) {
+      const p = t.findIndex((v) => v.path === u.id), g = t.findIndex((v) => v.path === f?.id);
+      e(p, g);
+    }
+  }
+  return /* @__PURE__ */ m("div", { className: s ? "draggable-area" : "", children: [
+    /* @__PURE__ */ a(
+      Rt,
+      {
+        collisionDetection: kt,
+        onDragEnd: h,
+        onDragStart: () => r(!0),
+        modifiers: [Ot],
+        children: /* @__PURE__ */ a("div", { className: "di tabs", children: /* @__PURE__ */ a(
+          Mt,
+          {
+            items: t.map((d) => ({ ...d, id: d.path })),
+            strategy: ze,
+            children: t.map(({ path: d, renderHeading: u, headingTitle: f, draggingDisabled: p, disabled: g }) => /* @__PURE__ */ a(
+              an,
+              {
+                id: d,
+                to: ae(n || c(), d),
+                title: f,
+                draggingDisabled: g || p || !e || !s && !o.endsWith(d),
+                children: u(i)
+              },
+              d
+            ))
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ m(xt, { children: [
+      t.map(({ renderBody: d, path: u }) => /* @__PURE__ */ a(
+        we,
+        {
+          path: ae(n || c(), u),
+          render: () => d(i)
+        },
+        u
+      )),
+      /* @__PURE__ */ a(we, { children: /* @__PURE__ */ a(
+        It,
+        {
+          to: {
+            pathname: ae(n || c(), t[0].path),
+            state: l
+          }
+        }
+      ) })
+    ] })
+  ] });
+}
+const on = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMZJREFUeNpi/P//PwMtARMDjcHQt4ABGgchQPwKxMWBzwKxKFlmQy14g8dwGL5MqiXIFvynEgb5VJmWFoDwImQLWNB8pQ/EjyiM1j/IHHQLPgHxB3ok00dUCKpnuCzQAmJZKjh+Jy4L3KkUOjgtcKNG/gXi3cg5GRZuGkD8jQrhfwpmNroPbIGYkwo+2IErFXlQKfx3oRd2MK99oELwfIDlL+Qgegul+ang+u0ouRnqg0ACxTWx+CIQKyGbzThaJw+4BQABBgBH38BkTQm7ZwAAAABJRU5ErkJggg==", ln = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGpJREFUeNpi/P//PwMtARMDjcHQt4ABFAfQeAgH4jcgIRy4gyxzkSzAZzjJlmCz4D+VMMih4TBzGWHJlJGRkZrp9S3QXBGwuTSyAOR6xtF8MGrBqAUDYMFbahYV5BTXlBV2o5E8YBYABBgAxQJ9mxTaZMQAAAAASUVORK5CYII=", cn = "data:image/svg+xml,%3csvg%20version='1.1'%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20x='0px'%20y='0px'%20width='24px'%20height='24px'%20viewBox='0%200%2024%2024'%20style='enable-background:new%200%200%2050%2050;'%20xml:space='preserve'%3e%3crect%20x='0'%20y='0'%20width='5'%20height='10'%20fill='%23000'%3e%3canimateTransform%20attributeType='xml'%20attributeName='transform'%20type='translate'%20values='0%200;%200%2014;%200%200'%20begin='0'%20dur='0.6s'%20repeatCount='indefinite'%20/%3e%3c/rect%3e%3crect%20x='9'%20y='0'%20width='5'%20height='10'%20fill='%23000'%3e%3canimateTransform%20attributeType='xml'%20attributeName='transform'%20type='translate'%20values='0%200;%200%2014;%200%200'%20begin='0.2s'%20dur='0.6s'%20repeatCount='indefinite'%20/%3e%3c/rect%3e%3crect%20x='19'%20y='0'%20width='5'%20height='10'%20fill='%23000'%3e%3canimateTransform%20attributeType='xml'%20attributeName='transform'%20type='translate'%20values='0%200;%200%2014;%200%200'%20begin='0.4s'%20dur='0.6s'%20repeatCount='indefinite'%20/%3e%3c/rect%3e%3c/svg%3e", dn = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjIwNDI3RTg2NEQxQjExRTc4OEM3RTkwQjYwNjA2OTk5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjIwNDI3RTg3NEQxQjExRTc4OEM3RTkwQjYwNjA2OTk5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjA0MjdFODQ0RDFCMTFFNzg4QzdFOTBCNjA2MDY5OTkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjA0MjdFODU0RDFCMTFFNzg4QzdFOTBCNjA2MDY5OTkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5FrZPxAAAA5UlEQVR42qzTvQ7BUBTA8UpEYraJWAwSNVgMHsDIZvUEngWDisTiBTyA4A3EJEiMYrBJGBBf/yO3UlVNq07y63Cbc3rvuaea9hkZ1LHAUZmrtYzmEhG0cMX9C3nXQdQpeeiSaDdSOa8wfCSbWmayjssPBSRHD/EoqzMtscEeN8SQQwVVhB361pRHDX1VYGf5whZjlJDHymEXclPaycN2e4hjYFs/eS0gJkiibVmT4z634bVxaxRQxBQzKdDw2X0Zpi7SSEiBbIBrTAUZJOOvoxz4Z7KGriZMBuuMg+p2U/XrLR4CDACHu7RW+98pzwAAAABJRU5ErkJggg==";
+var L = /* @__PURE__ */ ((t) => (t.ALL = "all", t.SOME = "some", t.NONE = "none", t))(L || {});
+const hn = ({ lastChild: t }) => /* @__PURE__ */ m("div", { className: "skeleton", children: [
+  /* @__PURE__ */ a("div", { className: "skeleton-cell top" }),
+  /* @__PURE__ */ a(
+    "div",
+    {
+      className: "skeleton-cell bottom",
+      style: {
+        visibility: t ? "hidden" : "initial"
+      }
+    }
+  )
+] }), un = ({ node: t, leafNode: e, expanded: n, isLoading: i, onExpand: s }) => {
+  let r;
+  return e ? r = t.image || dn : i ? r = cn : n ? r = t.expandedImage || on : r = t.closedImage || ln, /* @__PURE__ */ a("div", { className: "icon-container", children: /* @__PURE__ */ a("img", { src: r, alt: "node", onClick: s }) });
+};
+class pn extends $.PureComponent {
+  constructor() {
+    super(...arguments), this.onSelect = (e) => {
+      const { onSelect: n, selectionState: i } = this.props;
+      n(i === L.SOME ? !1 : e.currentTarget.checked);
+    }, this.onLabelClick = () => {
+      const { onSelect: e, selectionState: n } = this.props;
+      e(n === L.SOME ? !1 : this.inputRef ? !this.inputRef.checked : !1);
+    };
+  }
+  componentDidMount() {
+    this.updateSelectionState();
+  }
+  componentDidUpdate() {
+    this.updateSelectionState();
+  }
+  updateSelectionState() {
+    const { selectionState: e } = this.props;
+    this.inputRef && (this.inputRef.indeterminate = e === L.SOME);
+  }
+  render() {
+    const {
+      node: e,
+      node: { name: n },
+      leafNode: i,
+      expanded: s,
+      isLastChild: r,
+      onExpand: o,
+      selectionState: l,
+      isLoading: c
+    } = this.props, h = l === L.ALL;
+    return /* @__PURE__ */ m("div", { className: `node-info ${h ? "selected" : ""}`, children: [
+      r !== void 0 && /* @__PURE__ */ a(hn, { lastChild: r }),
+      /* @__PURE__ */ a(
+        un,
+        {
+          node: e,
+          leafNode: i,
+          expanded: s,
+          isLoading: c,
+          onExpand: o
+        }
+      ),
+      /* @__PURE__ */ a(
+        "input",
+        {
+          ref: (d) => {
+            this.inputRef = d;
+          },
+          type: "checkbox",
+          checked: l === L.ALL,
+          onChange: this.onSelect
+        }
+      ),
+      /* @__PURE__ */ a("div", { className: "name", onClick: this.onLabelClick, children: n })
+    ] });
+  }
+}
+class me extends V {
+  constructor() {
+    super(...arguments), this.state = {
+      expanded: !1,
+      selectionState: this.getSelectionState(),
+      isLoading: !1
+    }, this.toggleExpand = () => {
+      const { node: e, lazyLoadingFunction: n } = this.props;
+      e.lazyLoadable ? this.setState(
+        {
+          isLoading: !0
+        },
+        () => {
+          n(e).then(
+            () => this.setState({
+              expanded: !0,
+              isLoading: !1
+            })
+          );
+        }
+      ) : this.setState({
+        expanded: !this.state.expanded
+      });
+    }, this.onSelect = (e) => {
+      const { node: n, selectNodes: i, deselectNodes: s, selectedNodes: r } = this.props;
+      if (e) {
+        const o = _(n).filter((l) => !r.includes(l.id));
+        i(o);
+      } else {
+        const o = _(n).filter((l) => r.includes(l.id));
+        s(o);
+      }
+    };
+  }
+  /**
+   * Update folder nodes only if the selection changed, or expanded changed
+   * Update leaf nodes only if the previously selected nodes include this leaf and the currently
+   * selected nodes do not include this leaf, and vice versa.
+   * @param {Props} prevProps
+   * @param {State} prevState
+   */
+  shouldComponentUpdate(e, n) {
+    const { selectedNodes: i, treeSize: s } = e, { expanded: r, selectionState: o, isLoading: l } = n, { selectedNodes: c, node: h, treeSize: d } = this.props, { expanded: u, selectionState: f, isLoading: p } = this.state;
+    return l !== p || s !== d ? !0 : this.isLeaf() ? i.includes(h.id) && !c.includes(h.id) || !i.includes(h.id) && c.includes(h.id) || o !== f : i.length !== c.length || r !== u || o !== f;
+  }
+  componentDidMount() {
+    this.setState({
+      selectionState: this.getSelectionState()
+    });
+  }
+  componentDidUpdate() {
+    this.setState({
+      selectionState: this.getSelectionState()
+    });
+  }
+  isLeaf() {
+    const { node: e } = this.props;
+    return e.children === void 0;
+  }
+  getSelectionState() {
+    const { node: e, selectedNodes: n } = this.props;
+    if (this.isLeaf())
+      return n.includes(e.id) ? L.ALL : L.NONE;
+    {
+      const i = zt(e), s = Wt(i, n);
+      return s.length === i.length && i.length !== 0 ? L.ALL : s.length === 0 ? L.NONE : L.SOME;
+    }
+  }
+  render() {
+    const { node: e, isLastChild: n, ...i } = this.props, { expanded: s, selectionState: r, isLoading: o } = this.state;
+    return /* @__PURE__ */ m("div", { className: "node", children: [
+      /* @__PURE__ */ a(
+        pn,
+        {
+          node: e,
+          displayName: e.name,
+          leafNode: this.isLeaf(),
+          expanded: s,
+          isLastChild: n,
+          onExpand: this.toggleExpand,
+          onSelect: this.onSelect,
+          isLoading: o,
+          selectionState: r
+        }
+      ),
+      s && e.children && e.children.map((l, c) => /* @__PURE__ */ Be(
+        me,
+        {
+          ...i,
+          key: c,
+          node: l,
+          isLastChild: c === (e.children || []).length - 1
+        }
+      ))
+    ] });
+  }
+}
+class fs extends V {
+  constructor() {
+    super(...arguments), this.state = {
+      treeData: this.props.treeData,
+      tree: {
+        id: "virtualRootNode",
+        name: "",
+        children: [],
+        path: "/",
+        originalNode: {}
+      },
+      treeSize: 0,
+      selectedNodes: this.props.selectedNodes || []
+    }, this.convert = Qt(this.props.dataSetConfig), this.selectNodes = (e) => {
+      const { onSelect: n } = this.props, { selectedNodes: i } = this.state;
+      this.setState({
+        selectedNodes: Ut(
+          i,
+          e.map(({ id: s }) => s)
+        )
+      }), n(e.map(({ originalNode: s, path: r }) => ({ ...s, $$path: r })));
+    }, this.deselectNodes = (e) => {
+      const { onDeselect: n } = this.props, { selectedNodes: i } = this.state;
+      this.setState({
+        selectedNodes: Zt(
+          i,
+          e.map(({ id: s }) => s)
+        )
+      }), n(e.map(({ originalNode: s, path: r }) => ({ ...s, $$path: r })));
+    }, this.addTreeData = (e, n) => {
+      const { tree: i } = this.state, s = this.convert(e, n.path), r = {
+        id: "virtualRootNode",
+        name: "",
+        children: (i.children || []).map(
+          (l) => Ke(l, n.id, {
+            lazyLoadable: !1,
+            children: s
+          })
+        ),
+        path: "/",
+        originalNode: {}
+      }, o = le(r);
+      this.setState({
+        tree: r,
+        treeSize: o
+      });
+    }, this.lazyLoadingFunction = (e) => {
+      const { lazyLoadingFunction: n } = this.props;
+      return n ? n(e.originalNode).then((i) => {
+        this.addTreeData(i, e);
+      }).catch(() => Promise.resolve()) : Promise.resolve();
+    };
+  }
+  componentDidMount() {
+    const { treeData: e } = this.props, n = this.initTree(e), i = le(n);
+    this.setState({
+      tree: n,
+      treeSize: i
+    });
+  }
+  componentDidUpdate(e) {
+    const { selectedNodes: n } = e, { selectedNodes: i } = this.props;
+    i && n && n.length !== i.length && this.setState({
+      selectedNodes: i
+    });
+  }
+  initTree(e) {
+    return {
+      id: "virtualRootNode",
+      name: "",
+      children: this.convert(e),
+      path: "/",
+      originalNode: {}
+    };
+  }
+  render() {
+    const { tree: e, selectedNodes: n, treeSize: i } = this.state;
+    return /* @__PURE__ */ a("div", { className: "treeview", children: e.children && e.children.map((s, r) => /* @__PURE__ */ a(
+      me,
+      {
+        node: s,
+        selectedNodes: n,
+        selectNodes: this.selectNodes,
+        deselectNodes: this.deselectNodes,
+        treeSize: i,
+        lazyLoadingFunction: this.lazyLoadingFunction
+      },
+      r
+    )) });
+  }
+}
+const fn = "data:image/svg+xml,%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3ccircle%20cx='7.5'%20cy='3.5'%20r='1.5'/%3e%3ccircle%20cx='7.5'%20cy='7.5'%20r='1.5'/%3e%3ccircle%20cx='7.5'%20cy='11.5'%20r='1.5'/%3e%3c/svg%3e", tt = $.createContext({
+  toggleMenu: () => {
+  }
+});
+function gn({ menuButton: t, children: e, direction: n, className: i, open: s, onOpenChange: r }) {
+  const [o, l] = N(!1), c = () => {
+    l(!o);
+  };
+  return /* @__PURE__ */ a("span", { children: /* @__PURE__ */ a(
+    te,
+    {
+      open: s ?? o,
+      onOpenChange: r ?? l,
+      handler: t,
+      placement: n,
+      className: i,
+      children: /* @__PURE__ */ a("div", { className: "di multimenu", children: /* @__PURE__ */ a("div", { className: `drop ${n || "bottom"} ${o ? "show" : ""}`, children: /* @__PURE__ */ a(tt.Provider, { value: { toggleMenu: c }, children: e }) }) })
+    }
+  ) });
+}
+const mn = [5, 10, 15, 20, 50];
+function vn({ onChangePage: t, page: e, totalPages: n, onChangeSize: i, size: s }) {
+  const r = D(null), { current: o } = r, [l, c] = N(`${e + 1}`), [h, d] = N(!1);
+  R(() => {
+    r.current = Ue(t, 500);
+  }, [t]), R(() => {
+    c(`${e + 1}`);
+  }, [e]);
+  function u() {
+    t(0);
+  }
+  function f() {
+    e > 0 && t(e - 1);
+  }
+  function p() {
+    e < n - 1 && t(e + 1);
+  }
+  function g() {
+    t(n - 1);
+  }
+  function v(x) {
+    if (i) {
+      const k = parseInt(x.target.value, 10);
+      i(k), d(!1);
+    }
+  }
+  function w(x) {
+    const k = x.target.value;
+    if (k.trim() === "") {
+      c(k);
+      return;
+    }
+    const I = Number(x.target.value);
+    !Number.isNaN(I) && I >= 1 && I <= n && (o?.(I - 1), c(k));
+  }
+  function y() {
+    c(`${e + 1}`);
+  }
+  const C = e >= n - 1;
+  return /* @__PURE__ */ a("div", { className: "di pagination-holder", children: /* @__PURE__ */ m("div", { className: "di pagination", children: [
+    /* @__PURE__ */ a("span", { className: `prev ${e === 0 ? "disabled" : ""}`, onClick: u, children: "«" }),
+    /* @__PURE__ */ a("span", { className: `prev ${e === 0 ? "disabled" : ""}`, onClick: f, children: "‹" }),
+    /* @__PURE__ */ m("span", { className: "info", children: [
+      /* @__PURE__ */ a(A, { i18nKey: "reactable.pagination.page", children: "Page" }),
+      /* @__PURE__ */ a("input", { value: l, onChange: w, onBlur: y }),
+      typeof process < "u" && process?.env?.STORYBOOK_MODE ? /* @__PURE__ */ m(Ve, { children: [
+        "of   ",
+        n
+      ] }) : /* @__PURE__ */ m(A, { i18nKey: "reactable.pagination.ofTotal", children: [
+        " of   ",
+        { totalPages: n }
+      ] })
+    ] }),
+    /* @__PURE__ */ a("span", { className: `next ${C ? "disabled" : ""}`, onClick: p, children: "›" }),
+    /* @__PURE__ */ a("span", { className: `next ${C ? "disabled" : ""}`, onClick: g, children: "»" }),
+    i && /* @__PURE__ */ a("div", { className: "options", children: /* @__PURE__ */ a(
+      gn,
+      {
+        direction: "left",
+        open: h,
+        onOpenChange: d,
+        menuButton: /* @__PURE__ */ a(
+          F,
+          {
+            naked: !0,
+            title: {
+              id: "trend.settings.buttonTitle",
+              defaultValue: "Settings"
+            },
+            children: /* @__PURE__ */ a("img", { src: fn, alt: "settings icon", style: { width: 16, height: 16 } })
+          }
+        ),
+        children: /* @__PURE__ */ m(
+          "div",
+          {
+            className: "di form",
+            style: {
+              width: 200,
+              padding: 10
+            },
+            children: [
+              /* @__PURE__ */ m("div", { className: "field", children: [
+                /* @__PURE__ */ a("label", { children: /* @__PURE__ */ a(A, { i18nKey: "reactable.pagination.entriesPerPage", children: "Entries per page" }) }),
+                /* @__PURE__ */ a("select", { onChange: v, value: s, children: mn.map((x) => /* @__PURE__ */ a("option", { value: x, children: x }, x)) })
+              ] }),
+              /* @__PURE__ */ a("p", { children: /* @__PURE__ */ a(A, { i18nKey: "reactable.pagination.changePageWillBeStored", children: "Your changes will be stored for view." }) })
+            ]
+          }
+        )
+      }
+    ) })
+  ] }) });
+}
+const yn = (t) => t.filterable?.initialValue ?? "", bn = ({ columnDef: t, changeFilter: e }) => {
+  const { t: n } = B(), [i, s] = N(yn(t)), r = (o) => {
+    const l = o.target.value;
+    s(l), e(t.name, l);
+  };
+  return /* @__PURE__ */ a(
+    "input",
+    {
+      type: "text",
+      placeholder: n(`${t.filterable?.placeholder ?? "reactable.filter.placeholder"}`, {
+        defaultValue: "Filter..."
+      }),
+      onChange: r,
+      value: i
+    }
+  );
+};
+function Sn(t, e, n) {
+  if (!t)
+    return null;
+  const { page: i, size: s, sort: r } = e;
+  return {
+    content: (n ? n(t, r, ke) : ke(t, r)).slice(i * s, (i + 1) * s),
+    totalElements: t.length,
+    totalPages: Math.ceil(t.length / s),
+    number: i,
+    size: s,
+    sort: [r]
+  };
+}
+const wn = (t, e) => t === "text" ? (n, i) => n[e] && n[e].toString().toLowerCase().includes(i.toLowerCase()) : (n, i) => n[e] === i;
+function Re(t, e, n) {
+  return t ? t.filter((i) => Object.keys(n).every((s) => {
+    const r = n[s];
+    if (r && r.length > 0) {
+      const o = Cn(s, e);
+      return o.filterable ? (o.filterable.filterFn || wn(o.filterable.filterType, o.name))(i, r) : !1;
+    }
+    return !0;
+  })) : null;
+}
+function Cn(t, e) {
+  const n = e.find((i) => i.name === t);
+  if (!n)
+    throw Error(`column definition not found for ${t}`);
+  return n;
+}
+function ke(t, e) {
+  return t.sort((n, i) => {
+    const s = typeof n == "object" && n?.[e.property] || 0, r = typeof i == "object" && i?.[e.property] || 0, o = e.direction === "ASC" ? 1 : -1;
+    return s === r ? 0 : typeof s == "string" && typeof r == "string" ? s.localeCompare(r) * o : typeof s == "number" && typeof r == "number" ? (s - r) * o : s.toString().localeCompare(r.toString()) * o;
+  });
+}
+function An(t, e, n, i, s, r) {
+  return [
+    {
+      name: "checkbox",
+      label: /* @__PURE__ */ a(
+        Se,
+        {
+          value: i,
+          onChange: n,
+          title: {
+            id: "components.filtertable.selectAllItems",
+            defaultValue: "Select/deselect all items in search result"
+          }
+        }
+      ),
+      sortable: !1,
+      render: (o) => /* @__PURE__ */ a(
+        Se,
+        {
+          value: s.includes(r(o)),
+          onChange: (l) => e(l, o)
+        }
+      ),
+      width: "1%"
+    },
+    ...t
+  ];
+}
+function ve(t, e) {
+  return `${t || "unnamedTable"}-${e}`;
+}
+function Nn(t, e) {
+  if (!e)
+    return bt(t, "label", "asc");
+  if (t.every((n) => !n.options))
+    return [...t].sort(e);
+  if (t.every((n) => n.options))
+    return t.map((i) => ({ ...i, options: [...i.options].sort(e) }));
+  throw new Error("Mixing groups with single options not allowed");
+}
+class xn extends V {
+  constructor() {
+    super(...arguments), this.state = {
+      options: [],
+      inputValue: null
+    }, this.selectRef = je(), this.portalRoot = null, this.updateOptions = () => {
+      const { options: e, specialOptions: n, compareOptions: i } = this.props, s = Nn(e, i);
+      n ? this.setState({
+        // @ts-ignore
+        options: [...s, ...n]
+      }) : this.setState({
+        options: s
+      });
+    }, this.filterOption = (e, n) => e.label.toString().toLowerCase().startsWith(n.toLowerCase()), this.getContainerClasses = () => {
+      const { specialOptions: e } = this.props;
+      return e ? ["select-search-container", "special"] : ["select-search-container"];
+    };
+  }
+  componentDidMount() {
+    if (this.updateOptions(), this.props["data-testid"] && this.selectRef && this.selectRef.current && this.selectRef.current.controlRef.setAttribute("data-testid", this.props["data-testid"]), this.props.menuPortalTarget) {
+      this.portalRoot = document.createElement("div");
+      const e = this.getContainerClasses();
+      this.portalRoot.classList.add(...e), this.props.menuPortalTarget.appendChild(this.portalRoot);
+    }
+  }
+  componentDidUpdate(e) {
+    (!z(e.options, this.props.options) || e.freeForm !== this.props.freeForm) && this.updateOptions();
+  }
+  componentWillUnmount() {
+    this.props.menuPortalTarget && this.portalRoot && this.props.menuPortalTarget.removeChild(this.portalRoot);
+  }
+  render() {
+    const { noResultsMessage: e, placeholder: n, value: i, onChange: s, clearable: r, loading: o, disabled: l } = this.props, { options: c } = this.state;
+    return /* @__PURE__ */ a(
+      Lt,
+      {
+        ref: this.selectRef,
+        joinValues: !0,
+        name: "form-field-name",
+        className: this.getContainerClasses().join(" "),
+        classNamePrefix: "select-search",
+        isClearable: r,
+        noOptionsMessage: e ? () => e : void 0,
+        options: c,
+        value: i || null,
+        onChange: s,
+        onInputChange: (h) => {
+          this.props.freeForm && h && this.setState({ inputValue: h });
+        },
+        placeholder: n,
+        filterOption: this.filterOption,
+        isLoading: o,
+        menuPortalTarget: this.portalRoot,
+        isDisabled: l,
+        onBlur: () => {
+          this.props.freeForm && this.state.inputValue !== null && (this.setState({ options: this.props.options }), this.setState({ inputValue: this.state.inputValue }, () => {
+            const h = {
+              type: "item",
+              value: this.state.inputValue,
+              label: this.state.inputValue
+            };
+            this.setState(
+              (d) => ({
+                options: [h, ...d.options]
+              })
+            ), this.state.inputValue = null, s(h);
+          }));
+        }
+      }
+    );
+  }
+}
+const In = ({ columnDefs: t, onFilter: e, tableName: n }) => {
+  const { t: i } = B(), [s, r] = N({}), o = D(e);
+  R(() => {
+    o.current = e;
+  }, [e]), R(() => {
+    r((u) => {
+      const f = {};
+      for (const y of t)
+        f[y.name] = u[y.name] !== void 0 ? u[y.name] : y.filterable?.initialValue ?? "";
+      const p = Object.keys(u), g = Object.keys(f), v = g.length === p.length && g.every((y) => p.includes(y)), w = v && g.every((y) => f[y] === u[y]);
+      return v && w ? u : (Object.values(f).some((y) => y) && o.current(f), f);
+    });
+  }, [t]);
+  const l = (u, f) => {
+    const p = { ...s, [u]: f };
+    r(p), e(p);
+  }, c = (u) => {
+    if (u.filterable)
+      switch (u.filterable.filterType) {
+        case "text":
+          return h(u);
+        case "options":
+          return d(u);
+        default:
+          throw new Error(`Filter type ${u.filterable.filterType} not supported`);
+      }
+    return null;
+  }, h = (u) => /* @__PURE__ */ a(bn, { columnDef: u, changeFilter: l }), d = (u) => {
+    if (!u.filterable?.filterOptions)
+      throw new Error(`No filterOptions found for column type: options on columnDef: ${u.name}`);
+    const f = u.filterable.filterOptions;
+    if (u.filterable.searchableOptions) {
+      const p = f.map((v) => ({
+        type: "item",
+        label: typeof v.label == "string" ? v.label : i(v.label.id, { defaultValue: v.label.defaultValue }),
+        value: v.value
+      })), g = s[u.name];
+      return /* @__PURE__ */ a(
+        xn,
+        {
+          options: p,
+          onChange: (v) => {
+            l(u.name, v?.value);
+          },
+          value: g ? p.find((v) => v.value === g.toString()) : null,
+          clearable: !0
+        }
+      );
+    } else
+      return /* @__PURE__ */ m(
+        "select",
+        {
+          onChange: (p) => {
+            l(u.name, p.target.value);
+          },
+          value: s[u.name],
+          children: [
+            /* @__PURE__ */ a("option", { value: "", children: i("reactable.filter.all", {
+              defaultValue: "- All -"
+            }) }, ""),
+            f.map((p) => /* @__PURE__ */ a(
+              "option",
+              {
+                className: ve(n, u.name),
+                value: p.value,
+                children: typeof p.label == "string" ? p.label : i(p.label.id, { defaultValue: p.label.defaultValue })
+              },
+              p.value
+            ))
+          ]
+        }
+      );
+  };
+  return /* @__PURE__ */ a("tr", { className: "di filterrow form", children: t.map((u) => /* @__PURE__ */ a("td", { style: { textAlign: u.align || "left" }, children: c(u) }, u.name)) });
+}, Rn = (t) => t === "ASC" ? "DESC" : "ASC";
+class kn extends V {
+  constructor() {
+    super(...arguments), this.handleSort = (e) => {
+      const { paginationSettings: n, onSort: i } = this.props, s = e.name === n.sort.property ? Rn(n.sort.direction) : e.defaultSortDirection || "ASC";
+      i(e.name, s);
+    }, this.getClassName = (e) => {
+      const { paginationSettings: n, tableName: i } = this.props, s = ve(i, e.name);
+      return e.sortable ? e.name === n.sort.property ? n.sort.direction === "ASC" ? `${s} sortable sortAsc` : `${s} sortable sortDes` : `${s} sortable` : `${s}`;
+    }, this.printLabel = (e) => Mn(e) ? /* @__PURE__ */ a(A, { i18nKey: e.id, children: e.defaultValue }) : e;
+  }
+  render() {
+    return /* @__PURE__ */ a("tr", { children: this.props.columnDefs.map((e) => /* @__PURE__ */ a(
+      "th",
+      {
+        style: {
+          width: e.width || "auto",
+          textAlign: e.align || "left"
+        },
+        className: this.getClassName(e),
+        onClick: () => {
+          e.sortable && this.handleSort(e);
+        },
+        children: this.printLabel(e.label)
+      },
+      e.name
+    )) });
+  }
+}
+function Mn(t) {
+  return typeof t == "object" && t != null && "id" in t && t.id !== void 0;
+}
+class Tn extends V {
+  constructor() {
+    super(...arguments), this.getRowClass = () => {
+      const { rowDef: e, item: n } = this.props;
+      return e && typeof e.getRowClass == "function" ? e.getRowClass(n) : "";
+    }, this.handleClick = () => {
+      const { rowDef: e, item: n } = this.props;
+      e && typeof e.onClick == "function" && e.onClick(n);
+    }, this.getTooltip = () => {
+      const { rowDef: e, item: n } = this.props;
+      return e && typeof e.getTooltip == "function" ? e.getTooltip(n) : "";
+    }, this.getRowStyle = () => {
+      const { rowDef: e, item: n } = this.props;
+      if (e && e.getRowStyle)
+        return e.getRowStyle(n);
+    };
+  }
+  render() {
+    const { columnDefs: e, item: n, tableName: i } = this.props;
+    return /* @__PURE__ */ a(
+      "tr",
+      {
+        className: this.getRowClass(),
+        onClick: this.handleClick,
+        title: this.getTooltip(),
+        style: this.getRowStyle(),
+        children: e.map((s) => {
+          const r = s.align || "left", o = s.onClick ? "pointer" : "inherit", l = s.whiteSpace || void 0, c = s.onClick ? () => s.onClick ? s.onClick(n) : void 0 : void 0;
+          return /* @__PURE__ */ a(
+            "td",
+            {
+              style: {
+                textAlign: r,
+                cursor: o,
+                // @ts-ignore
+                whiteSpace: l
+              },
+              onClick: c,
+              className: ve(i, s.name),
+              children: s.render(n)
+            },
+            `${n.id}_${s.name}`
+          );
+        })
+      }
+    );
+  }
+}
+function On({
+  columnDefs: t,
+  uniqueItemKey: e,
+  paginationSettings: n,
+  onSort: i,
+  onFilter: s,
+  tableName: r,
+  pageable: o,
+  isLoading: l,
+  rowDef: c,
+  clickable: h,
+  messageWhenEmpty: d,
+  "data-testid": u
+}) {
+  const f = D(null), p = D(null), [g, v] = N(!1), [w, y] = N(!0), [C, x] = N(!1), k = "uiConfigurations/nevershowscrollingadvice", I = "reactable.neverShowScrollingAdvice", M = D(w);
+  R(() => {
+    M.current = w;
+  }, [w]);
+  const E = () => {
+    f.current && p.current && v(
+      !M.current && p.current.scrollWidth > f.current.offsetWidth
+    );
+  };
+  R(() => {
+    setTimeout(() => {
+      (async () => {
+        const T = localStorage.getItem(I), Y = T !== null;
+        try {
+          const j = await Et(k) === !0;
+          y(j), M.current = j, localStorage.setItem(I, String(j)), j || E();
+        } catch {
+          if (Y) {
+            const j = T === "true";
+            y(j), M.current = j, j || E();
+          } else
+            y(!1), M.current = !1, E();
+        }
+        x(!0);
+      })();
+    }, 0);
+  }, []), R(() => (E(), window.addEventListener("resize", E), () => window.removeEventListener("resize", E)), [o, t]);
+  const S = t.some((T) => T.filterable);
+  return /* @__PURE__ */ a(pt, { show: l, children: /* @__PURE__ */ m("div", { ref: f, className: "di reactable scroll-x", children: [
+    C && g && !l && /* @__PURE__ */ a(
+      He,
+      {
+        className: "scroll-horizontally-advice",
+        content: /* @__PURE__ */ m("div", { children: [
+          /* @__PURE__ */ a(A, { i18nKey: "reactable.scrollHorizontally.advice", children: "SHIFT + mouse wheel to scroll horizontally" }),
+          /* @__PURE__ */ m("div", { className: "scroll-horizontally-advice-buttons", children: [
+            /* @__PURE__ */ a(
+              F,
+              {
+                primary: !0,
+                onClick: async () => {
+                  await Dt(k, !0), localStorage.setItem(I, "true"), y(!0), M.current = !0, v(!1);
+                },
+                children: /* @__PURE__ */ a(A, { i18nKey: "reactable.scrollHorizontally.neverShowAgain", children: "Never show again" })
+              }
+            ),
+            /* @__PURE__ */ a(F, { onClick: () => v(!1), children: /* @__PURE__ */ a(A, { i18nKey: "reactable.scrollHorizontally.ok", children: "OK" }) })
+          ] })
+        ] }),
+        width: "40%"
+      }
+    ),
+    /* @__PURE__ */ m(
+      "table",
+      {
+        ref: p,
+        className: P("di reactable sortable hoverable", { selectable: h }),
+        "data-testid": u,
+        children: [
+          /* @__PURE__ */ a("thead", { children: /* @__PURE__ */ a(
+            kn,
+            {
+              columnDefs: t,
+              paginationSettings: n,
+              onSort: i,
+              tableName: r
+            }
+          ) }),
+          /* @__PURE__ */ m("tbody", { children: [
+            s && S && /* @__PURE__ */ a(
+              In,
+              {
+                columnDefs: t,
+                onFilter: s,
+                tableName: r
+              }
+            ),
+            o?.content.length ? o.content.slice(0, n.size).map((T) => /* @__PURE__ */ a(
+              Tn,
+              {
+                columnDefs: t,
+                item: T,
+                rowDef: c,
+                tableName: r
+              },
+              e(T)
+            )) : !l && /* @__PURE__ */ a("tr", { children: /* @__PURE__ */ a("td", { colSpan: t.length, children: /* @__PURE__ */ a(A, { i18nKey: d ?? "reactable.noEntriesFound", children: "No entries found" }) }) })
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}
+class En extends V {
+  componentDidUpdate() {
+    const { pageable: e, paginationSettings: n, onChangePage: i } = this.props;
+    if (!e)
+      return;
+    const s = e.totalPages || 0, r = n.page, o = s > 0 ? Math.min(r, s - 1) : 0;
+    r !== o && i(o);
+  }
+  render() {
+    const { paginationSettings: e, pageable: n, onChangePage: i, onChangeSize: s } = this.props, r = s ? n && n.totalElements > 0 : n && n.totalPages > 1;
+    return /* @__PURE__ */ m("div", { children: [
+      /* @__PURE__ */ a(On, { ...this.props }),
+      n && r && /* @__PURE__ */ a(
+        vn,
+        {
+          page: e.page,
+          totalPages: n.totalPages,
+          onChangePage: i,
+          onChangeSize: s,
+          size: e.size
+        }
+      )
+    ] });
+  }
+}
+const Me = {
+  page: 0,
+  size: 15,
+  sort: {
+    property: "name",
+    direction: "DESC"
+  }
+};
+class gs extends V {
+  constructor(e) {
+    super(e), this.content = [], this.calculatePageNumber = (i, s) => {
+      const { forceResetPaginationOnItemsChange: r } = this.props;
+      if (r)
+        this.handleChangePage(0);
+      else {
+        const o = Math.floor((i.length - 1) / s.size);
+        o <= 0 ? this.handleChangePage(0) : o < s.page && this.handleChangePage(o);
+      }
+    }, this.handleChangePage = (i) => {
+      this.setState({
+        paginationSettings: { ...this.state.paginationSettings, page: i }
+      });
+    }, this.handleSort = (i, s) => {
+      this.setState({
+        paginationSettings: {
+          ...this.state.paginationSettings,
+          sort: {
+            property: i,
+            direction: s
+          }
+        }
+      });
+    }, this.handleFilter = (i) => {
+      const { items: s, onFilter: r, columnDefs: o, onFilteredItemsChanged: l } = this.props;
+      this.setState(
+        {
+          paginationSettings: { ...this.state.paginationSettings, page: 0 },
+          filterSettings: i
+        },
+        () => {
+          r && r(i);
+          const c = Re(s, o, i);
+          this.setState({
+            filteredItems: c
+          }), c && l?.(c);
+        }
+      );
+    }, this.getPageable = () => {
+      const { customSortFunction: i, items: s, columnDefs: r, onContentChange: o } = this.props, { filterSettings: l, paginationSettings: c } = this.state, h = Re(s, r, l), d = Sn(h, c, i);
+      return d && d.content && !z(d.content, this.content) && (this.content = d.content, o && o(this.content)), d;
+    }, this.handleSelectChange = (i, s) => {
+      const { onSelectedItemsChange: r, selectedItems: o = [], uniqueItemKey: l } = this.props;
+      if (r)
+        if (i) {
+          const c = o.concat(l(s));
+          r(c);
+        } else
+          r(o.filter((c) => c !== l(s)));
+      else
+        console.warn("ReactableWithClientSidePagination: onSelectedItemsChange property is missing");
+    }, this.handleSelectAllChange = (i) => {
+      const { onSelectedItemsChange: s, items: r, selectedItems: o = [], uniqueItemKey: l } = this.props, { filteredItems: c } = this.state, h = (c || r || []).map(l);
+      s ? s(i ? St([...o, ...h], z).sort() : wt(o, h)) : console.warn("ReactableWithClientSidePagination: onSelectedItemsChange property is missing");
+    }, this.areSelectedAll = () => {
+      const { items: i, selectedItems: s, uniqueItemKey: r } = this.props, { filteredItems: o } = this.state;
+      return !!s && (o || i || []).every((c) => s.some((h) => h === r(c)));
+    };
+    let n = Me;
+    e.paginationSettings ? n = e.paginationSettings : e.initialPaginationSettings ? (console.warn('initialPaginationSettings is deprecated! Please use "paginationSettings" instead'), n = e.initialPaginationSettings) : console.error("Missing pagination settings!"), this.state = {
+      paginationSettings: n || Me,
+      filterSettings: {},
+      filteredItems: null
+    };
+  }
+  componentDidUpdate(e) {
+    const { items: n } = this.props, { items: i } = e, s = this.props.paginationSettings || this.props.initialPaginationSettings, r = e.paginationSettings || e.initialPaginationSettings;
+    n && i && n.length !== i.length && this.calculatePageNumber(n, this.state.paginationSettings), s && !z(s, r) && this.setState(
+      {
+        paginationSettings: s
+      },
+      () => this.handleChangePage(0)
+    );
+  }
+  render() {
+    const {
+      uniqueItemKey: e,
+      isLoading: n,
+      columnDefs: i,
+      rowDef: s,
+      tableName: r,
+      clickable: o,
+      selectable: l,
+      selectedItems: c,
+      onChangeSize: h
+    } = this.props, d = l ? An(
+      i,
+      this.handleSelectChange,
+      this.handleSelectAllChange,
+      this.areSelectedAll(),
+      c || [],
+      e
+    ) : i;
+    return /* @__PURE__ */ a(
+      En,
+      {
+        columnDefs: d,
+        rowDef: s,
+        uniqueItemKey: e,
+        paginationSettings: this.state.paginationSettings,
+        onChangePage: this.handleChangePage,
+        onChangeSize: h,
+        onSort: this.handleSort,
+        onFilter: this.handleFilter,
+        tableName: r,
+        pageable: this.getPageable(),
+        isLoading: n,
+        clickable: o,
+        "data-testid": this.props["data-testid"]
+      }
+    );
+  }
+}
+const W = class W extends $.Component {
+  constructor() {
+    super(...arguments), this.state = {
+      files: []
+    }, this.handleDrop = (e, n) => {
+      !this.props.multiple && e.length > 1 || n.length > 0 || setTimeout(() => this.selectFile(e), 100);
+    }, this.selectFile = (e) => {
+      const { onSelectFile: n, onChange: i } = this.props;
+      e.forEach((r) => {
+        r.preview = URL.createObjectURL(r);
+      });
+      const s = [...this.state.files, ...e];
+      this.setState({ files: s }), i?.(s), n && e.forEach((r) => {
+        n(r);
+      });
+    }, this.handleRemoveFile = (e) => {
+      const { files: n } = this.state;
+      if (e) {
+        e.preview && window.URL.revokeObjectURL(e.preview);
+        const i = n.filter((s) => s !== e);
+        this.setState({ files: i }), this.props.onChange?.(i), this.props.onRemoveFile?.(e);
+      }
+    };
+  }
+  render() {
+    const { files: e } = this.state, {
+      accept: n,
+      previewComponent: i,
+      dropHint: s,
+      hoverHint: r,
+      acceptHint: o,
+      rejectHint: l,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onChange: c,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onRemoveFile: h,
+      onDownloadFile: d,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onSelectFile: u,
+      onDropRejected: f,
+      onDropAccepted: p,
+      maxSize: g,
+      multiple: v,
+      ...w
+    } = this.props, y = s || W.defaultProps.dropHint, C = r || W.defaultProps.hoverHint, x = o || W.defaultProps.acceptHint, k = l || W.defaultProps.rejectHint;
+    return /* @__PURE__ */ m(
+      "div",
+      {
+        ...w,
+        className: P("di upload", {
+          clickable: !e.length,
+          hasContent: !!e.length
+        }),
+        children: [
+          !!i && e.map((I, M) => /* @__PURE__ */ a(
+            i,
+            {
+              file: I,
+              onRemoveFile: () => this.handleRemoveFile(I),
+              onDownloadFile: d ? () => d(I) : void 0
+            },
+            M
+          )),
+          (v || !e.length) && /* @__PURE__ */ a(
+            Pt,
+            {
+              accept: n,
+              multiple: v ?? !1,
+              onDrop: this.handleDrop,
+              onDropRejected: f,
+              onDropAccepted: p,
+              maxSize: g || 1 / 0,
+              children: ({ getRootProps: I, getInputProps: M, isDragAccept: E, isDragReject: S, isDragActive: T }) => /* @__PURE__ */ m(
+                "div",
+                {
+                  className: P("drag-drop-text-container", {
+                    active: T,
+                    accept: E,
+                    reject: S
+                  }),
+                  ...I(),
+                  children: [
+                    /* @__PURE__ */ a("input", { ...M() }),
+                    /* @__PURE__ */ a("p", { className: "drag-drop-hint", children: /* @__PURE__ */ a(A, { i18nKey: y.id, children: y.defaultValue }) }),
+                    /* @__PURE__ */ a("p", { className: "drag-drop-hover-hint", children: /* @__PURE__ */ a(A, { i18nKey: C.id, children: C.defaultValue }) }),
+                    /* @__PURE__ */ a("p", { className: "drag-drop-accept", children: /* @__PURE__ */ a(A, { i18nKey: x.id, children: x.defaultValue }) }),
+                    /* @__PURE__ */ a("p", { className: "drag-drop-reject", children: /* @__PURE__ */ a(A, { i18nKey: k.id, children: k.defaultValue }) })
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+};
+W.defaultProps = {
+  dropHint: {
+    id: "fileUpload.dropHint",
+    defaultValue: "Drop file here, or click to browse ..."
+  },
+  hoverHint: {
+    id: "fileUpload.hoverHint",
+    defaultValue: "Drop file here, or click to browse ..."
+  },
+  acceptHint: {
+    id: "fileUpload.acceptHint",
+    defaultValue: "This file type can be uploaded"
+  },
+  rejectHint: {
+    id: "fileUpload.rejectHint",
+    defaultValue: "This file type cannot be uploaded"
+  }
+};
+let de = W;
+const Dn = ({ url: t, imageSize: e, onRemoveFile: n, onDragOver: i, onDownloadFile: s }) => /* @__PURE__ */ a("div", { className: "di upload preview-container", onDragOver: i, children: /* @__PURE__ */ m(
+  "div",
+  {
+    className: "preview",
+    style: {
+      backgroundImage: `url(${t})`,
+      ...e && { backgroundSize: e }
+    },
+    children: [
+      /* @__PURE__ */ a("button", { className: "action-button", onClick: n, "data-testid": "delete-button", children: /* @__PURE__ */ a(A, { i18nKey: "imageUpload.remove", children: "Remove" }) }),
+      s && /* @__PURE__ */ a("button", { className: "action-button", onClick: s, "data-testid": "download-button", children: /* @__PURE__ */ a(A, { i18nKey: "imageUpload.download", children: "Download" }) })
+    ]
+  }
+) });
+class ms extends V {
+  constructor() {
+    super(...arguments), this.state = {
+      dragOverPreview: !1,
+      file: null
+    }, this.handleDragOver = () => {
+      this.setState({
+        dragOverPreview: !0
+      });
+    };
+  }
+  componentDidUpdate(e) {
+    e.imageUrl !== this.props.imageUrl && this.setState({
+      dragOverPreview: !1
+    });
+  }
+  render() {
+    const { accept: e, imageUrl: n, imageSize: i, onSelectFile: s, onRemoveFile: r, onDownloadFile: o, ...l } = this.props, { dragOverPreview: c, file: h } = this.state;
+    return n && !c && h ? /* @__PURE__ */ a(
+      Dn,
+      {
+        url: n,
+        imageSize: i,
+        onRemoveFile: () => r?.(h),
+        onDownloadFile: o ? () => o(h) : void 0,
+        onDragOver: this.handleDragOver
+      }
+    ) : /* @__PURE__ */ a(
+      de,
+      {
+        ...l,
+        onRemoveFile: (d) => {
+          this.setState({ file: null }), r?.(d);
+        },
+        onSelectFile: (d) => {
+          this.setState({ file: d }), s?.(d);
+        },
+        accept: e || {
+          "image/*": [".jpeg", ".jpg", ".png", ".webp"]
+        }
+      }
+    );
+  }
+}
+const Ln = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ2MCwgMjAyMC8wNS8xMi0xNjowNDoxNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplMjI2NGVmOC0xY2Q1LTgyNDQtOWQ5NS0yZDBjNGMxMmZkM2UiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDhENjczMThERTNEMTFFQUIwNjJCODBDQ0RGM0I4QkEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDhENjczMTdERTNEMTFFQUIwNjJCODBDQ0RGM0I4QkEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjIgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTcyODQ4NjktNjA0NC0xZjQ2LTg2OWMtMjBlYzMwMTA0MWE2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmUyMjY0ZWY4LTFjZDUtODI0NC05ZDk1LTJkMGM0YzEyZmQzZSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnOjy94AAABySURBVHjapFMJDsAgCFvJ/v/lbkvYEQ4naGIiShtaASS3lSWjRwA8d4/gAutxSLJrsr3/6kKUc0uPKnDgioQS2BKUwY8HBhzFoc+/31ipAF0JkoDY7cQyiWTmzJLADZN2HIwn2dD5Ct5EzBiK1XE+BBgAvZQfJzDjL2UAAAAASUVORK5CYII=", vs = ({
+  parentPageLink: t,
+  title: e,
+  subPagePathPrefixArray: n,
+  subPagePathPrefix: i,
+  subtitle: s,
+  children: r
+}) => {
+  const { push: o } = fe(), { pathname: l } = ge(), { t: c } = B(), h = () => {
+    i ? o(l.substring(0, l.lastIndexOf(i))) : n ? n.forEach((u) => {
+      l.includes(u) && o(l.substring(0, l.lastIndexOf(u)));
+    }) : o(l.substring(0, l.lastIndexOf("/")));
+  }, d = (u) => {
+    if (typeof u == "string")
+      return u;
+    {
+      const { id: f, defaultValue: p } = u;
+      return c(f, {
+        defaultValue: p
+      });
+    }
+  };
+  return /* @__PURE__ */ m("h1", { className: "di header", children: [
+    t && /* @__PURE__ */ a(
+      F,
+      {
+        onClick: h,
+        style: {
+          marginRight: "15px"
+        },
+        children: /* @__PURE__ */ a(
+          "img",
+          {
+            src: Ln,
+            alt: c("general.navigation.goBack", {
+              defaultValue: "Go Back"
+            })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ a("span", { children: d(e) }),
+    s && /* @__PURE__ */ a("span", { className: "search-result-count", children: d(s) }),
+    r
+  ] });
+}, oe = (t, e) => {
+  try {
+    return b.tz(e, t).format("HH:mm");
+  } catch (n) {
+    return console.error("DateTimeInput: Error while extracting time from date", n), "00:00";
+  }
+}, Te = Fe(
+  ({ timestamp: t, timezone: e, warning: n, readOnly: i = !1, onChange: s, ...r }, o) => {
+    const [l, c] = N(oe(e, t)), h = l ?? oe(e, t);
+    R(() => {
+      c(oe(e, t));
+    }, [e, t]);
+    function d(p, g) {
+      const v = b.tz(t, e), w = b.tz(p, e).set("hour", v.hour()).set("minute", v.minute()).set("second", v.second()).set("millisecond", v.millisecond());
+      s(w.valueOf(), g);
+    }
+    function u(p, g) {
+      if (g) {
+        const [v, w] = p.split(":").map(Number), y = b.tz(t, e).set("hours", v).set("minutes", w);
+        s(y.valueOf(), !0);
+      }
+      c(p);
+    }
+    function f() {
+      l && /^[0-9]:[0-5][0-9]$/.test(l) && u(l.padStart(5, "0"), !0);
+    }
+    return /* @__PURE__ */ m("span", { className: `di date-time-input ${n ? "with-warning" : ""}`, children: [
+      /* @__PURE__ */ a(
+        et,
+        {
+          ...r,
+          ref: o,
+          value: t,
+          timezone: e,
+          onChange: d,
+          readOnly: i
+        }
+      ),
+      /* @__PURE__ */ a(
+        ee,
+        {
+          "data-testid": "time-input",
+          value: h,
+          onChange: u,
+          pattern: /^(([01][0-9])|2[0-3]):[0-5][0-9]$/,
+          required: !0,
+          invalidStyle: {
+            borderColor: "red"
+          },
+          placeholder: "00:00",
+          className: "time",
+          onBlur: f,
+          disabled: i
+        }
+      )
+    ] });
+  }
+);
+class ys extends V {
+  constructor() {
+    super(...arguments), this.state = {
+      cache: {},
+      currentItem: null
+    }, this.selectRef = je(), this.transformBackendItemToSelectItem = (e) => {
+      const { labelKey: n, valueKey: i } = this.props;
+      return {
+        value: e[i],
+        label: e[n]
+      };
+    }, this.reloadItemFromCache = () => {
+      const { value: e } = this.props, { currentItem: n, cache: i } = this.state;
+      return e && (!n || n.value !== e) && i[e] ? (this.setState({
+        currentItem: i[e]
+      }), !0) : !1;
+    }, this.addBackendItemToCache = (e) => {
+      if (e) {
+        const n = this.transformBackendItemToSelectItem(e), i = n.value;
+        this.setState(({ cache: s }) => ({
+          cache: { ...s, [i]: n }
+        }));
+      }
+    }, this.fetchOptions = async (e, n) => {
+      const { searchByQuery: i } = this.props;
+      try {
+        const { content: s, number: r, totalPages: o } = await i(e, n.length);
+        return {
+          options: s.map(this.transformBackendItemToSelectItem),
+          hasMore: r < o - 1
+        };
+      } catch (s) {
+        return console.error("Error fetching options:", s), { hasMore: !1, options: [] };
+      }
+    }, this.handleChange = (e) => {
+      const { onChange: n } = this.props;
+      if (e) {
+        const i = e.value;
+        this.setState(
+          ({ cache: s }) => ({
+            cache: { ...s, [i]: e }
+          }),
+          () => {
+            n(i);
+          }
+        );
+      } else
+        n(null);
+    };
+  }
+  componentDidMount() {
+    const { value: e, searchById: n } = this.props;
+    e && n(e).then(this.addBackendItemToCache), this.props["data-testid"] && setTimeout(() => {
+      this.selectRef?.current?.controlRef && this.selectRef.current.controlRef.setAttribute("data-testid", this.props["data-testid"]);
+    }, 0);
+  }
+  componentDidUpdate() {
+    const { value: e, searchById: n } = this.props, { currentItem: i } = this.state;
+    e && (!i || i.value !== e) ? this.reloadItemFromCache() || n(e).then(this.addBackendItemToCache) : !e && i && this.setState({
+      currentItem: null
+    });
+  }
+  render() {
+    const { clearable: e, noResultsMessage: n, disabled: i, menuPortalTarget: s } = this.props, { currentItem: r } = this.state;
+    return /* @__PURE__ */ a(
+      Vt,
+      {
+        selectRef: this.selectRef,
+        className: "select-search-container",
+        classNamePrefix: "select-search",
+        isClearable: e,
+        noResultsText: n,
+        value: r,
+        onChange: this.handleChange,
+        loadOptions: this.fetchOptions,
+        isDisabled: i,
+        menuPortalTarget: s,
+        placeholder: this.props.placeholder
+      }
+    );
+  }
+}
+class bs extends $.PureComponent {
+  constructor() {
+    super(...arguments), this.createClickHandler = (e) => () => {
+      const { onClick: n } = this.props;
+      n && n(), e();
+    };
+  }
+  render() {
+    const { disabled: e, icon: n, children: i, linkTo: s } = this.props, r = this.props["data-testid"];
+    return /* @__PURE__ */ a(tt.Consumer, { children: ({ toggleMenu: o }) => s ? /* @__PURE__ */ m(
+      We,
+      {
+        "data-testid": r,
+        to: s,
+        className: `item ${e ? "disabled" : ""}`,
+        onClick: this.createClickHandler(o),
+        children: [
+          n && /* @__PURE__ */ a("span", { className: "item-icon", children: n }),
+          /* @__PURE__ */ a("span", { className: "item-text", children: i })
+        ]
+      }
+    ) : /* @__PURE__ */ m(
+      "div",
+      {
+        "data-testid": r,
+        className: `item ${e ? "disabled" : ""}`,
+        onClick: this.createClickHandler(o),
+        children: [
+          n && /* @__PURE__ */ a("span", { className: "item-icon", children: n }),
+          /* @__PURE__ */ a("span", { className: "item-text", children: i })
+        ]
+      }
+    ) });
+  }
+}
+const Oe = 3600 * 1e3;
+function Pn({ period: t, onChange: e, readOnly: n, locale: i, timezone: s }) {
+  const [r, o] = N(""), l = D(void 0), c = D(null), h = new Date(t.tsStart), d = new Date(t.tsEnd);
+  function u(g) {
+    l.current && clearTimeout(l.current), o(g), l.current = setTimeout(() => o(""), 1e3);
+  }
+  function f(g, v) {
+    if (g) {
+      const w = t.tsEnd && g > t.tsEnd, y = w ? g + Oe : t.tsEnd, C = {
+        tsStart: g,
+        tsEnd: y
+      };
+      z(C, t) || e(C), !v && c.current && c.current.focus(), w && u("date-to");
+    }
+  }
+  function p(g) {
+    if (g) {
+      const v = t.tsStart && g < t.tsStart, y = {
+        tsStart: v ? g - Oe : t.tsStart,
+        tsEnd: g
+      };
+      z(y, t) || e(y), v && u("date-from");
+    }
+  }
+  return /* @__PURE__ */ m("span", { className: "inputs", children: [
+    /* @__PURE__ */ a("span", { "data-testid": "from-wrapper", children: /* @__PURE__ */ a(
+      Te,
+      {
+        timestamp: t.tsStart,
+        onChange: f,
+        warning: r === "date-from",
+        selectsStart: !0,
+        startDate: h,
+        endDate: d,
+        readOnly: n,
+        locale: i,
+        timezone: s
+      }
+    ) }),
+    "  -  ",
+    /* @__PURE__ */ a("span", { "data-testid": "to-wrapper", children: /* @__PURE__ */ a(
+      Te,
+      {
+        ref: c,
+        timestamp: t.tsEnd,
+        onChange: p,
+        warning: r === "date-to",
+        selectsEnd: !0,
+        startDate: h,
+        endDate: d,
+        readOnly: n,
+        locale: i,
+        timezone: s
+      }
+    ) })
+  ] });
+}
+class Vn extends V {
+  constructor(e) {
+    super(e), this.tdMonth = (s) => {
+      const { selectedMonth: r, selectedYear: o, displayedYear: l } = this.state;
+      return /* @__PURE__ */ a(
+        "td",
+        {
+          "data-testid": `month-${s}-button`,
+          onClick: () => {
+            this.props.onChange(s, l), this.setState({
+              selectedMonth: s,
+              selectedYear: l
+            });
+          },
+          className: P({ selected: s === r && l === o }),
+          children: b(`${o}/${s.toString().padStart(2, "0")}/01`, "YYYY/MM/DD").format("MMM")
+        }
+      );
+    };
+    const n = e.month !== null && e.month !== void 0 ? e.month : b().month() + 1, i = e.year !== null && e.year !== void 0 ? e.year : b().year();
+    this.state = {
+      selectedMonth: n,
+      selectedYear: i,
+      displayedYear: i
+    };
+  }
+  render() {
+    const { displayedYear: e } = this.state;
+    return /* @__PURE__ */ m("div", { className: "di monthpicker", children: [
+      /* @__PURE__ */ m("div", { className: "pager", children: [
+        /* @__PURE__ */ a(
+          "span",
+          {
+            className: "page-nav prev",
+            onClick: () => {
+              this.setState({
+                displayedYear: e - 1
+              });
+            }
+          }
+        ),
+        /* @__PURE__ */ a("span", { className: "page-nav info", children: e }),
+        /* @__PURE__ */ a(
+          "span",
+          {
+            className: "page-nav next",
+            onClick: () => {
+              this.setState({
+                displayedYear: e + 1
+              });
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a("div", { className: "months", children: /* @__PURE__ */ a(
+        "table",
+        {
+          style: {
+            margin: "auto"
+          },
+          children: /* @__PURE__ */ m("tbody", { children: [
+            /* @__PURE__ */ m("tr", { children: [
+              this.tdMonth(1),
+              this.tdMonth(2),
+              this.tdMonth(3)
+            ] }),
+            /* @__PURE__ */ m("tr", { children: [
+              this.tdMonth(4),
+              this.tdMonth(5),
+              this.tdMonth(6)
+            ] }),
+            /* @__PURE__ */ m("tr", { children: [
+              this.tdMonth(7),
+              this.tdMonth(8),
+              this.tdMonth(9)
+            ] }),
+            /* @__PURE__ */ m("tr", { children: [
+              this.tdMonth(10),
+              this.tdMonth(11),
+              this.tdMonth(12)
+            ] })
+          ] })
+        }
+      ) })
+    ] });
+  }
+}
+const Fn = "data:image/svg+xml,%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3cdefs%3e%3cstyle%3e%20.cls-1%20{%20fill:%20%23fff;%20}%20%3c/style%3e%3c/defs%3e%3cg%3e%3cg%3e%3crect%20class='cls-1'%20x='3.5'%20y='7.5'%20width='2'%20height='2'/%3e%3cpath%20d='M5,8V9H4V8H5M6,7H3v3H6V7Z'/%3e%3c/g%3e%3cg%3e%3crect%20class='cls-1'%20x='8'%20y='7'%20width='1'%20height='1'/%3e%3cpolygon%20points='9%207%208%207%208%208%209%208%209%207%209%207'/%3e%3c/g%3e%3cg%3e%3crect%20class='cls-1'%20x='10'%20y='7'%20width='1'%20height='1'/%3e%3cpolygon%20points='11%207%2010%207%2010%208%2011%208%2011%207%2011%207'/%3e%3c/g%3e%3cg%3e%3crect%20class='cls-1'%20x='12'%20y='7'%20width='1'%20height='1'/%3e%3cpolygon%20points='13%207%2012%207%2012%208%2013%208%2013%207%2013%207'/%3e%3c/g%3e%3cg%3e%3crect%20class='cls-1'%20x='8'%20y='9'%20width='1'%20height='1'/%3e%3cpolygon%20points='9%209%208%209%208%2010%209%2010%209%209%209%209'/%3e%3c/g%3e%3cg%3e%3crect%20class='cls-1'%20x='8'%20y='11'%20width='1'%20height='1'/%3e%3cpolygon%20points='9%2011%208%2011%208%2012%209%2012%209%2011%209%2011'/%3e%3c/g%3e%3cg%3e%3crect%20class='cls-1'%20x='6'%20y='11'%20width='1'%20height='1'/%3e%3cpolygon%20points='7%2011%206%2011%206%2012%207%2012%207%2011%207%2011'/%3e%3c/g%3e%3cg%3e%3crect%20class='cls-1'%20x='4'%20y='11'%20width='1'%20height='1'/%3e%3cpolygon%20points='5%2011%204%2011%204%2012%205%2012%205%2011%205%2011'/%3e%3c/g%3e%3cg%3e%3crect%20class='cls-1'%20x='10.5'%20y='9.5'%20width='2'%20height='2'/%3e%3cpath%20d='M12,10v1H11V10h1m1-1H10v3h3V9Z'/%3e%3c/g%3e%3cpath%20d='M15.31,2H.69A.69.69,0,0,0,0,2.69V14.31A.69.69,0,0,0,.69,15H15.31a.69.69,0,0,0,.69-.69V2.69A.69.69,0,0,0,15.31,2ZM14,13H2V6H14Z'/%3e%3c/g%3e%3crect%20x='3'%20width='3'%20height='2'/%3e%3crect%20x='10'%20width='3'%20height='2'/%3e%3c/svg%3e", Bn = "data:image/svg+xml,%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3cpolygon%20points='7.5%2010%204%206%2011%206%207.5%2010'/%3e%3c/svg%3e";
+b.extend(Ye);
+b.extend(Ze);
+function O(t, e) {
+  return t ? b.tz(e, t) : b(e);
+}
+function nt(t) {
+  return {
+    tsStart: O(t).startOf("day").valueOf(),
+    tsEnd: O(t).endOf("day").valueOf()
+  };
+}
+function it(t) {
+  return {
+    tsStart: O(t).subtract(1, "day").startOf("day").valueOf(),
+    tsEnd: O(t).subtract(1, "day").endOf("day").valueOf()
+  };
+}
+function st(t) {
+  return {
+    tsStart: O(t).startOf("week").valueOf(),
+    tsEnd: O(t).endOf("week").valueOf()
+  };
+}
+function rt(t) {
+  return {
+    tsStart: O(t).startOf("month").valueOf(),
+    tsEnd: O(t).endOf("month").valueOf()
+  };
+}
+function at(t, e) {
+  return {
+    tsStart: O(e, t).startOf("day").valueOf(),
+    tsEnd: O(e, t).endOf("day").valueOf()
+  };
+}
+function ot(t, e) {
+  return {
+    tsStart: O(e, t).startOf("month").valueOf(),
+    tsEnd: O(e, t).endOf("month").valueOf()
+  };
+}
+function he(t, e) {
+  const n = O(e).subtract(t - 1, "days").startOf("day").valueOf(), i = b().endOf("day").valueOf();
+  return { tsStart: n, tsEnd: i };
+}
+const jn = 1e3 * 60 * 60 * 24;
+function Hn({ tsStart: t, tsEnd: e }) {
+  return Math.round((e - t + 1) / jn);
+}
+function Gn({ onChange: t, onShowCustomPeriod: e, periodName: n, timezone: i }) {
+  const [s, r] = N(!1), [o, l] = N(!1), [c, h] = N(!1), [d, u] = N(Date.now());
+  function f(C) {
+    t(C), r(!1), e && e(!1);
+  }
+  function p(C) {
+    f(at(C ?? Date.now(), i)), l(!1), u(C ?? void 0);
+  }
+  function g(C, x) {
+    f(
+      ot(
+        b().year(x).month(C - 1).valueOf(),
+        i
+      )
+    ), h(!1);
+  }
+  function v() {
+    l(!o), h(!1);
+  }
+  function w() {
+    h(!c), l(!1);
+  }
+  function y() {
+    r(!1), e && e(!0);
+  }
+  return /* @__PURE__ */ a("div", { children: /* @__PURE__ */ a(
+    te,
+    {
+      open: s,
+      onOpenChange: r,
+      handler: /* @__PURE__ */ a(
+        F,
+        {
+          "data-testid": "time-period-menu-button",
+          title: {
+            id: "trend.calendarMenu.calendar.timePeriod",
+            defaultValue: "Time Period"
+          },
+          children: /* @__PURE__ */ m(Ve, { children: [
+            /* @__PURE__ */ a("img", { src: Fn, alt: "calendar icon", style: { width: 16, height: 16 } }),
+            " ",
+            !!n && /* @__PURE__ */ m("span", { children: [
+              " ",
+              n,
+              " "
+            ] }),
+            /* @__PURE__ */ a("img", { src: Bn, alt: "triangle down", style: { width: 16, height: 16 } })
+          ] })
+        }
+      ),
+      children: /* @__PURE__ */ a("div", { className: "di multimenu period-picker-multimenu", children: /* @__PURE__ */ m("div", { className: `drop bottom ${s ? "show" : ""}`, children: [
+        /* @__PURE__ */ a("div", { className: `left-box ${o ? "show" : ""}`, children: /* @__PURE__ */ a(et, { inline: !0, value: d, onChange: p }) }),
+        /* @__PURE__ */ a("div", { className: `left-box ${c ? "show" : ""}`, children: /* @__PURE__ */ a(Vn, { onChange: g }) }),
+        /* @__PURE__ */ m("div", { className: "right-box", children: [
+          /* @__PURE__ */ a(
+            "div",
+            {
+              className: "item",
+              "data-testid": "today-button",
+              onClick: () => f(nt(i)),
+              children: /* @__PURE__ */ a("div", { className: "item-text", children: /* @__PURE__ */ a(A, { i18nKey: "trend.calendarMenu.timePeriod.today", children: "Today" }) })
+            }
+          ),
+          /* @__PURE__ */ a(
+            "div",
+            {
+              className: "item",
+              "data-testid": "yesterday-button",
+              onClick: () => f(it(i)),
+              children: /* @__PURE__ */ a("div", { className: "item-text", children: /* @__PURE__ */ a(A, { i18nKey: "trend.calendarMenu.timePeriod.yesterday", children: "Yesterday" }) })
+            }
+          ),
+          /* @__PURE__ */ m("div", { className: "item", children: [
+            /* @__PURE__ */ a(
+              "div",
+              {
+                "data-testid": "last-7-days-button",
+                className: "item-text",
+                onClick: () => f(he(7, i)),
+                children: /* @__PURE__ */ a(A, { i18nKey: "trend.calendarMenu.timePeriod.lastSevenDays", children: "Last 7 days" })
+              }
+            ),
+            /* @__PURE__ */ a("div", { className: "item-more icon triangle", children: /* @__PURE__ */ a("div", { className: "item-more-submenu", children: [2, 3, 5, 10, 14, 30].map((C) => /* @__PURE__ */ a(
+              "div",
+              {
+                className: "subitem",
+                onClick: () => f(he(C, i)),
+                children: C
+              },
+              C
+            )) }) })
+          ] }),
+          /* @__PURE__ */ a(
+            "div",
+            {
+              className: "item",
+              "data-testid": "current-week-button",
+              onClick: () => f(st(i)),
+              children: /* @__PURE__ */ a("div", { className: "item-text", children: /* @__PURE__ */ a(A, { i18nKey: "trend.calendarMenu.timePeriod.currentWeek", children: "Curr. Week" }) })
+            }
+          ),
+          /* @__PURE__ */ a(
+            "div",
+            {
+              className: "item",
+              "data-testid": "current-month-button",
+              onClick: () => f(rt(i)),
+              children: /* @__PURE__ */ a("div", { className: "item-text", children: /* @__PURE__ */ a(A, { i18nKey: "trend.calendarMenu.timePeriod.currentMonth", children: "Curr. Month" }) })
+            }
+          ),
+          /* @__PURE__ */ a("div", { className: "item", "data-testid": "day-button", onClick: v, children: /* @__PURE__ */ m("div", { className: "item-text", children: [
+            /* @__PURE__ */ a(A, { i18nKey: "trend.calendarMenu.timePeriod.day", children: "Day" }),
+            /* @__PURE__ */ a("div", { className: "item-more icon dots" })
+          ] }) }),
+          /* @__PURE__ */ a("div", { className: "item", "data-testid": "month-button", onClick: w, children: /* @__PURE__ */ m("div", { className: "item-text", children: [
+            /* @__PURE__ */ a(A, { i18nKey: "trend.calendarMenu.timePeriod.month", children: "Month" }),
+            /* @__PURE__ */ a("div", { className: "item-more icon dots" })
+          ] }) }),
+          e !== void 0 && /* @__PURE__ */ a("div", { className: "item", "data-testid": "from-to-button", onClick: y, children: /* @__PURE__ */ a("div", { className: "item-text", children: /* @__PURE__ */ a(A, { i18nKey: "trend.calendarMenu.timePeriod.fromto", children: "From/to" }) }) })
+        ] })
+      ] }) })
+    }
+  ) });
+}
+function U(t, e) {
+  return t.tsStart === e.tsStart && t.tsEnd === e.tsEnd;
+}
+function Yn(t, e) {
+  const { t: n } = B();
+  if (U(t, nt(e)))
+    return n("trend.calendarMenu.timePeriod.today", { defaultValue: "Today" });
+  if (U(t, it(e)))
+    return n("trend.calendarMenu.timePeriod.yesterday", { defaultValue: "Yesterday" });
+  if (U(t, st(e)))
+    return n("trend.calendarMenu.timePeriod.currentWeek", { defaultValue: "Curr. Week" });
+  if (U(t, rt(e)))
+    return n("trend.calendarMenu.timePeriod.currentMonth", { defaultValue: "Curr. Month" });
+  if (U(t, at((t.tsStart + t.tsEnd) / 2, e)))
+    return n("trend.calendarMenu.timePeriod.day", { defaultValue: "Day" });
+  if (U(t, ot((t.tsStart + t.tsEnd) / 2, e)))
+    return n("trend.calendarMenu.timePeriod.month", { defaultValue: "Month" });
+  const i = Hn(t);
+  if (U(t, he(i, e)))
+    return n("trend.calendarMenu.timePeriod.lastDays", {
+      defaultValue: `Last ${i} days`,
+      days: i
+    });
+}
+function Ss({
+  period: t,
+  onChange: e,
+  inputsHiddenByDefault: n,
+  menuHidden: i,
+  readOnly: s,
+  locale: r,
+  defaultPeriodName: o,
+  timezone: l,
+  ...c
+}) {
+  const [h, d] = N(!n), u = Yn(t, l) ?? o;
+  return /* @__PURE__ */ m("div", { className: "di period-picker", "data-testid": c["data-testid"], children: [
+    (!n || h) && /* @__PURE__ */ a(Pn, { period: t, onChange: e, locale: r, readOnly: s, timezone: l }),
+    i || s || /* @__PURE__ */ a(
+      Gn,
+      {
+        periodName: u,
+        onShowCustomPeriod: n ? d : void 0,
+        onChange: e,
+        timezone: l
+      }
+    )
+  ] });
+}
+const Zn = 500, Ee = (t) => Array.from(t.querySelectorAll("[id]")).map((e) => e.getAttribute("id")).reduce((e, n) => (n && (e[n] = e[n] + 1 || 1), e), {}), Un = (t) => {
+  const e = Ee(document), n = Ee(t);
+  return Object.keys(n).filter((i) => n[i] < e[i]);
+};
+function Wn(t, e) {
+  const n = setTimeout(() => {
+    e && e(Un(t));
+  }, Zn);
+  return () => clearTimeout(n);
+}
+const lt = "http://www.w3.org/2000/svg";
+function zn(t, { hoverColor: e, internalLink: n, link: i }, s, r) {
+  const o = Qn(t);
+  if (!o) return;
+  const l = `a${Ht(8)}`;
+  t.classList.add("anchor", l), e && s?.sheet && s.sheet.insertRule(
+    `.di.svg-image .anchor.${l}:hover, .di.svg-image .anchor.${l}:hover * { stroke: ${e} !important; }`
+  ), o.setAttributeNS(lt, "xlink:href", "#"), o.addEventListener(
+    "click",
+    () => n && r ? r(i) : window.open(i, "_newtab")
+  );
+}
+function Qn(t) {
+  const e = t.parentNode;
+  if (!e)
+    return null;
+  const n = e.childNodes;
+  if (!n)
+    return null;
+  const i = Array.from(n).findIndex((o) => o === t), s = document.createElementNS(lt, "a");
+  s.appendChild(t);
+  const r = n[i] || null;
+  return r ? e.insertBefore(s, r) : e.appendChild(s), s;
+}
+const $n = (t) => t.replace(/<svg:svg/g, "<svg").replace(/<\/svg:svg/g, "</svg"), ye = (t) => {
+  const e = new DOMParser(), n = $n(atob(t.replace("data:image/svg+xml;base64,", "")));
+  return e.parseFromString(n, "image/svg+xml");
+};
+function ws(t, e) {
+  return ye(t).querySelectorAll(`[id^="${e}"]`);
+}
+const Jn = (t) => {
+  const e = t.filter(({ type: s }) => s === "positionX" || s === "positionY"), n = t.filter(({ type: s }) => s !== "positionX" && s !== "positionY"), i = e.reduce(
+    (s, r) => r.type === "positionX" ? { ...s, x: r } : r.type === "positionY" ? { ...s, y: r } : s,
+    {
+      x: null,
+      y: null
+    }
+  );
+  return i.x && i.y ? n.concat([
+    {
+      type: "positionXY",
+      target: i.x.target,
+      positionX: i.x.position,
+      positionY: i.y.position
+    }
+  ]) : i.x ? n.concat([i.x]) : i.y ? n.concat([i.y]) : n;
+}, Kn = (t) => {
+  const e = t.reduce(
+    (n, i) => ({
+      ...n,
+      [i.target]: [...n[i.target] || [], i]
+    }),
+    {}
+  );
+  return Object.keys(e).reduce(
+    (n, i) => n.concat(Jn(e[i])),
+    []
+  );
+}, X = (t) => Math.max(0, Math.min(100, t));
+function Xn(t, e, n) {
+  const i = Qe(n), s = t.getAttribute("id") || "", r = i.findOne(`#${s}`), o = i.findOne(`#${s}-boundaries`), l = o ? o.bbox() : i.viewbox();
+  e.type === "positionX" ? r.x(l.x + X(e.position) * l.width / 100) : e.type === "positionY" ? r.y(l.y + X(e.position) * l.height / 100) : (r.x(l.x + X(e.positionX) * l.width / 100), r.y(l.y + X(e.positionY) * l.height / 100));
+}
+function qn(t, e, n, i, s) {
+  const o = ye(e).querySelector("svg");
+  return o ? (t.style.height = "100%", t.innerHTML = "", o.style.height = "100%", o.style.width = "100%", o.classList.add("di", "svg-image"), o.getAttribute("viewBox") || o.setAttribute("viewBox", ""), o.getAttribute("preserveAspectRatio") || o.setAttribute("preserveAspectRatio", "xMidYMid"), t.appendChild(o), _n(o, n, i, s), o) : null;
+}
+function _n(t, e, n, i) {
+  if (!(!e || !e.length))
+    for (const s of ti(Kn(e))) {
+      const r = t.querySelector(`[id=${s.target}]`);
+      r && ei(r, s, t, n, i);
+    }
+}
+function ei(t, e, n, i, s) {
+  switch (e.type) {
+    case "visibility":
+      t.setAttribute("visibility", e.visible ? "visible" : "hidden");
+      break;
+    case "text": {
+      const r = t.querySelector("tspan");
+      r ? r.textContent = e.text : t.textContent = e.text;
+      break;
+    }
+    case "color": {
+      const { color: r } = e, o = (l) => {
+        l.setAttribute("fill", r), l.style.fill = r;
+      };
+      o(t), t.querySelectorAll("g, path").forEach(o);
+      break;
+    }
+    case "hyperlink":
+      zn(t, e, i, s);
+      break;
+    case "eventListener":
+      t.addEventListener(e.eventType, e.listener, e.options);
+      break;
+    case "classNames":
+      t.classList.add(...e.classNames);
+      break;
+    case "positionX":
+    case "positionY":
+    case "positionXY":
+      Xn(t, e, n);
+      break;
+    case "rotation": {
+      Qe(t).rotate(e.degrees);
+      break;
+    }
+    default:
+      throw new Error("Unknown modification");
+  }
+}
+function ti(t) {
+  return t.sort(({ type: e }, { type: n }) => e !== n && n === "rotation" ? -1 : 1);
+}
+function ni() {
+  const t = D(null);
+  return R(() => {
+    const e = document.createElement("style");
+    return e.appendChild(document.createTextNode("")), document && document.head && document.head.appendChild(e), t.current = e, () => {
+      document && document.head && e && document.head.removeChild(e);
+    };
+  }, []), t.current;
+}
+function Cs({ imageData: t, modifications: e, onConflict: n }) {
+  const i = D(null), s = ni(), { push: r } = fe();
+  return R(() => {
+    const { current: o } = i;
+    if (o && t) {
+      const l = qn(o, t, e, s, r);
+      if (l && n)
+        return Wn(l, n);
+    }
+  }, [t, e, n, r, s]), /* @__PURE__ */ a("div", { ref: i });
+}
+const ii = (t) => {
+  try {
+    return ye(t).querySelector("svg");
+  } catch {
+    return null;
+  }
+}, As = (t) => {
+  const e = ii(t);
+  return !!e && !!e.style;
+};
+function ue(t, e, n) {
+  return `<div>${t}</div><div>${e}: <strong>${n}</strong></div>`;
+}
+const H = {
+  global: {
+    useUTC: !1
+  },
+  chart: {
+    style: {
+      fontFamily: "arial"
+    },
+    plotBackgroundColor: null,
+    plotBorderWidth: 0,
+    plotShadow: !1
+  },
+  credits: {
+    enabled: !1
+  },
+  legend: {
+    align: "right",
+    verticalAlign: "center",
+    layout: "vertical"
+  },
+  title: {
+    useHTML: !0
+  },
+  plotOptions: {
+    pie: {
+      dataLabels: {
+        enabled: !1
+      },
+      showInLegend: !0,
+      startAngle: -90,
+      endAngle: 270
+    }
+  },
+  tooltip: {
+    useHTML: !0,
+    formatter() {
+      return ue("", this.point.name, this.point.y);
+    }
+  },
+  xAxis: {
+    type: "category"
+  },
+  yAxis: {
+    min: 0,
+    title: {
+      text: ""
+    }
+  },
+  options: {
+    lgo: 123
+  }
+}, De = (t) => t ? {
+  series: {
+    cursor: "pointer",
+    point: {
+      events: {
+        click: function() {
+          t(this.index);
+        }
+      }
+    }
+  }
+} : {};
+class Ns extends V {
+  constructor() {
+    super(...arguments), this.state = {}, this.chart = null, this.ro = null, this.handleChart = (e) => {
+      this.chart = e, this.ro = new ResizeObserver(() => {
+        this.chart?.reflow();
+      }), this.ro.observe(this.chart.renderTo);
+    };
+  }
+  componentDidMount() {
+    const { type: e, title: n, items: i, tooltipTitle: s, valueFormatter: r, onClick: o } = this.props;
+    this.setState({
+      ...H,
+      plotOptions: { ...H.plotOptions, ...De(o) },
+      tooltip: {
+        ...H.tooltip,
+        formatter() {
+          const l = r || ((c) => c);
+          return ue(s || "", this.point.name, l(this.point.y));
+        }
+      },
+      legend: { ...H.legend, enabled: e === "pie" },
+      yAxis: {
+        ...H.yAxis,
+        enabled: e === "column",
+        title: {
+          text: n || ""
+        }
+      },
+      series: [
+        {
+          type: e,
+          innerSize: "50%",
+          data: i.map(({ label: l, value: c }) => [l, c])
+        }
+      ]
+    }), setTimeout(() => {
+      this.setState({
+        title: { ...H.title, text: e === "column" ? "" : n || "" }
+      });
+    }, 0);
+  }
+  componentDidUpdate(e) {
+    const { type: n, title: i, items: s, tooltipTitle: r, valueFormatter: o, onClick: l } = this.props;
+    i !== e.title && this.setState({
+      title: { ...this.state.title, text: n === "column" ? "" : i || "" },
+      yAxis: {
+        ...this.state.yAxis,
+        title: {
+          text: i || ""
+        }
+      }
+    }), n !== e.type && this.setState({
+      legend: { ...this.state.legend, enabled: n === "pie" },
+      title: {
+        text: n === "column" ? "" : i || ""
+      },
+      yAxis: {
+        ...this.state.yAxis,
+        enabled: n === "column",
+        title: {
+          text: n === "column" && i || ""
+        }
+      },
+      series: [
+        {
+          type: n,
+          innerSize: "50%",
+          data: s.map(({ label: c, value: h }) => [c, h])
+        }
+      ]
+    }), z(s, e.items) || this.setState({
+      series: [
+        {
+          type: n,
+          innerSize: "50%",
+          data: s.map(({ label: c, value: h }) => [c, h])
+        }
+      ]
+    }), (r !== e.tooltipTitle || o !== e.valueFormatter || l !== e.onClick) && this.setState({
+      tooltip: {
+        ...H.tooltip,
+        formatter() {
+          const c = o || ((h) => h);
+          return ue(r || "", this.point.name, c(this.point.y));
+        }
+      },
+      plotOptions: { ...H.plotOptions, ...De(l) }
+    });
+  }
+  componentWillUnmount() {
+    this.ro && this.chart?.renderTo && this.ro.unobserve(this.chart.renderTo), this.chart = null, this.ro = null;
+  }
+  render() {
+    const e = this.props.updateOptions ? this.props.updateOptions(this.state) : this.state;
+    return /* @__PURE__ */ a(
+      Bt,
+      {
+        highcharts: Ft,
+        options: e,
+        containerProps: {
+          className: this.props.className
+        },
+        callback: this.handleChart
+      }
+    );
+  }
+}
+function si(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+}
+var K = {}, Le;
+function ri() {
+  if (Le) return K;
+  Le = 1, Object.defineProperty(K, "__esModule", {
+    value: !0
+  }), K.default = void 0;
+  let t = (o) => +setTimeout(o, 16), e = (o) => clearTimeout(o);
+  typeof window < "u" && "requestAnimationFrame" in window && (t = (o) => window.requestAnimationFrame(o), e = (o) => window.cancelAnimationFrame(o));
+  let n = 0;
+  const i = /* @__PURE__ */ new Map();
+  function s(o) {
+    i.delete(o);
+  }
+  const r = (o, l = 1) => {
+    n += 1;
+    const c = n;
+    function h(d) {
+      if (d === 0)
+        s(c), o();
+      else {
+        const u = t(() => {
+          h(d - 1);
+        });
+        i.set(c, u);
+      }
+    }
+    return h(l), c;
+  };
+  return r.cancel = (o) => {
+    const l = i.get(o);
+    return s(o), e(l);
+  }, process.env.NODE_ENV !== "production" && (r.ids = () => i), K.default = r, K;
+}
+var ai = ri();
+const Pe = /* @__PURE__ */ si(ai), oi = (t) => {
+  const { value: e, children: n, visible: i, tipFormatter: s = (d) => `${d}`, ...r } = t, o = D(null), l = D(null);
+  function c() {
+    l.current && Pe.cancel(l.current);
+  }
+  function h() {
+    l.current = Pe(() => {
+      o.current?.forceAlign();
+    });
+  }
+  return R(() => (i ? h() : c(), c), [e, i]), /* @__PURE__ */ a(
+    jt,
+    {
+      placement: "top",
+      overlay: s(e),
+      ref: o,
+      align: { offset: [0, -10] },
+      visible: i,
+      ...r,
+      children: n
+    }
+  );
+}, li = ({ tipFormatter: t, tipProps: e, ...n }) => /* @__PURE__ */ a($e, { ...n, handleRender: (s, r) => /* @__PURE__ */ a(
+  oi,
+  {
+    value: r.value,
+    visible: r.dragging,
+    tipFormatter: t,
+    ...e,
+    children: s
+  }
+) });
+function ci(t, e, n) {
+  const [i, s] = N(null);
+  R(() => {
+    if (i) {
+      const o = i.querySelector(".rc-slider-rail");
+      if (!o) throw new Error(".rc-slider-rail element missing");
+      const l = o?.querySelector(".disabled-area-element"), c = o.getBoundingClientRect().width;
+      if (l)
+        if (t == null)
+          l.remove();
+        else {
+          const h = Math.round((n - t) / (n - e) * c);
+          l.style.width = `${h}px`;
+        }
+      else if (t != null) {
+        const h = Math.round((n - t) / (n - e) * c), d = document.createElement("div");
+        d.classList.add("disabled-area-element"), d.style.width = `${h}px`, o.appendChild(d);
+      }
+    }
+  }, [t, i, e, n]);
+  const r = q(() => {
+    if (i && t != null) {
+      const o = i.querySelector(".rc-slider-rail");
+      if (!o) throw new Error(".rc-slider-rail element missing");
+      const l = o?.querySelector(".disabled-area-element"), c = o.getBoundingClientRect().width;
+      if (l) {
+        const h = Math.round((n - t) / (n - e) * c);
+        l.style.width = `${h}px`;
+      }
+    }
+  }, [t, n, e, i]);
+  return R(() => {
+    i && new ResizeObserver(() => r()).observe(i);
+  }, [i, r]), s;
+}
+const xs = ({ min: t, max: e, step: n, value: i, tooltip: s = !0, labels: r, format: o, onChange: l, onChangeComplete: c, limit: h }) => {
+  const d = ci(h, t, e), p = {
+    min: t,
+    max: e,
+    step: n,
+    value: i,
+    onChange: (g) => {
+      if (!l) return;
+      const v = typeof g == "number" ? g : g[0], w = h != null ? Math.min(v, h) : v;
+      l(w);
+    },
+    onChangeComplete: () => {
+      c && c(i);
+    },
+    marks: r
+  };
+  return /* @__PURE__ */ a("div", { className: "di slider", ref: d, children: s ? /* @__PURE__ */ a(li, { ...p, className: "di slider with-tooltip", tipFormatter: o }) : /* @__PURE__ */ a($e, { ...p, className: "di slider" }) });
+};
+export {
+  Ns as Chart,
+  as as ColorPicker,
+  vs as ContentHeader,
+  et as DateInput,
+  Te as DateTimeInput,
+  de as FileUpload,
+  os as GradientColorPicker,
+  as as GridColorPicker,
+  ms as ImageUpload,
+  us as InfoBox,
+  ns as MessageBoxContainer,
+  gn as MultiMenu,
+  bs as MultiMenuItem,
+  vn as Pagination,
+  Ss as PeriodPicker,
+  En as Reactable,
+  gs as ReactableWithClientSidePagination,
+  hs as RouteLink,
+  ps as RouteTabs,
+  xn as SelectWithSearch,
+  ys as SelectWithSearchAsync,
+  xs as Slider,
+  Cs as SvgImage,
+  fs as TreeView,
+  ls as UrnInput,
+  ee as ValidatedTextInput,
+  ws as getMutableNodeList,
+  ii as getSvgElement,
+  rs as getTreeNodePathById,
+  ss as initializeTranslation,
+  ts as messageBoxDismissAll,
+  es as messageBoxDismissGroup,
+  _i as messageBoxDismissSingle,
+  qi as messageBoxError,
+  Ki as messageBoxInfo,
+  Ji as messageBoxSuccess,
+  Xi as messageBoxWarn,
+  is as nanoid10,
+  $i as setGlobalErrorMessageBoxOptions,
+  Ht as uuidV4,
+  As as validateSvg,
+  ds as withPrompt
+};
+//# sourceMappingURL=index.js.map