@embeddable.com/remarkable-ui 1.0.5 → 2.0.1

package/dist/index.js

@@ -1,247 +1,2756 @@
-import { C as N, S as M } from "./ChartCard-BzLW_64B.js";
-import { j as a, a2 as n } from "./component.constants-B5vygi6l.js";
-import { a7 as G, B as H, a3 as K, a4 as $, a6 as E, a5 as q, al as W, a8 as z, aa as J, ab as V, N as X, ag as Y, am as Q, ad as U, ae as Z, ac as aa, a9 as sa, U as ea, W as ta, ar as ra, af as oa, D as ia, E as na, aw as ca, ax as la, as as ua, av as pa, d as ha, c as ma, z as da, aL as xa, $ as ga, G as ba, b as Ca, aK as ya, Y as _a, aM as wa, I as Sa, J as fa, R as Ta, H as ka, ah as Ia, ai as Pa, au as Aa, ay as ja, L as La, at as Da, M as va, ap as Oa, aj as Fa, ak as Ba, an as Na, ao as Ma, aq as Ra, K as Ga, X as Ha, F as Ka, i as $a, S as Ea, Q as qa, A as Wa, w as za, a as Ja, a1 as Va, r as Xa, p as Ya, h as Qa, s as Ua, g as Za, e as as, aN as ss, C as es, f as ts, aG as rs, _ as os, O as is, aF as ns, aH as cs, aE as ls, aB as us, T as ps, aC as hs, aI as ms, aD as ds, az as xs, aA as gs, Z as bs, aJ as Cs, t as ys, x as _s, v as ws, l as Ss, k as fs, y as Ts, n as ks, u as Is, q as Ps } from "./component.constants-B5vygi6l.js";
-import { B as js, b as Ls, i as Ds } from "./index-Jm7acUco.js";
-import { S as Os } from "./SingleSelectField-CX2hEN0u.js";
-import { E as Bs, S as Ns } from "./EditorCard-BLudeyiZ.js";
-import { K as Rs } from "./KpiChart-DWnEF3iA.js";
-import { P as Hs } from "./PivotTable-Diy2xzoH.js";
-import { H as $s } from "./HeatMap-HTlj76CN.js";
-import { a as qs, u as Ws } from "./useDebounce.hook-DxiPFcz9.js";
-import { r as Js, s as Vs } from "./charts.utils-Cw4SeX2m.js";
-import { g as Ys } from "./object.utils-D_Zzon-H.js";
-import { g as Us } from "./formatter.utils-N2gk49ys.js";
-import { i as ae } from "./index-BKkfcfXT.js";
-import { i as ee } from "./index-DhfbSAKi.js";
-import { i as re } from "./index-BOcQ7e6Q.js";
-import { g as ie, a as ne } from "./pies.utils-E8f3Hj1h.js";
-import { i as le } from "./index-Dwe8JLUr.js";
-import { i as pe } from "./index-_mthkdMa.js";
-import { C as me } from "./ComparisonPeriod.type.emb-D0_AP_PM.js";
-import { i as xe, s as ge } from "./color.utils-CVyp-fGP.js";
-const h = "_typography_g1one_1", m = {
-  typography: h
-};
-function j({
-  children: s,
-  as: e = "p",
-  className: t,
-  style: o,
-  title: r
+import "./chunk-TBNFMVQR.js";
+
+// src/components/shared/Skeleton/Skeleton.tsx
+import styles from "./Skeleton.module-ZN5S5VRF.module.css";
+import { jsx } from "react/jsx-runtime";
+var Skeleton = () => {
+  return /* @__PURE__ */ jsx("div", { className: styles.skeleton });
+};
+
+// src/components/shared/Card/Card.tsx
+import React from "react";
+import styles2 from "./Card.module-DHO64CIG.module.css";
+import clsx from "clsx";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Card = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx2("div", { className: clsx(styles2.card, className), ref, ...props, children });
+  }
+);
+Card.displayName = "Card";
+var CardHeader = ({ title, subtitle, rightContent }) => {
+  if (!title && !subtitle && !rightContent) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: styles2.cardHeader, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles2.leftContent, children: [
+      title && /* @__PURE__ */ jsx2("h1", { children: title }),
+      subtitle && /* @__PURE__ */ jsx2("p", { children: subtitle })
+    ] }),
+    rightContent
+  ] });
+};
+var CardContent = React.forwardRef(
+  ({ children }, ref) => {
+    return /* @__PURE__ */ jsx2("div", { className: styles2.cardContent, ref, children });
+  }
+);
+CardContent.displayName = "CardContent";
+
+// src/components/shared/Card/CardFeedback/CardFeedback.tsx
+import clsx2 from "clsx";
+import styles3 from "./CardFeedback.module-WCSHLBSM.module.css";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var CardFeedback = ({
+  icon: Icon,
+  title,
+  message,
+  className,
+  variant = "info"
+}) => {
+  return /* @__PURE__ */ jsxs2("div", { className: clsx2(styles3.feedback, styles3[variant], className), children: [
+    Icon && /* @__PURE__ */ jsx3(Icon, {}),
+    /* @__PURE__ */ jsx3("h2", { children: title }),
+    /* @__PURE__ */ jsx3("p", { children: message })
+  ] });
+};
+
+// src/components/shared/Typography/Typography.tsx
+import styles4 from "./Typography.module-SW6CT55P.module.css";
+import clsx3 from "clsx";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Typography({
+  children,
+  as: Component = "p",
+  className,
+  style,
+  title
 }) {
-  return /* @__PURE__ */ a.jsx(e, { title: r, className: n(m.typography, t), style: o, children: s });
+  return /* @__PURE__ */ jsx4(Component, { title, className: clsx3(styles4.typography, className), style, children });
 }
-const d = "_buttonIcon_17kgb_1", x = "_small_17kgb_11", g = "_medium_17kgb_18", b = "_primary_17kgb_25", C = "_secondary_17kgb_42", c = {
-  buttonIcon: d,
-  small: x,
-  medium: g,
-  primary: b,
-  secondary: C
-}, L = ({
-  icon: s,
-  size: e = "medium",
-  variant: t = "primary",
-  className: o,
-  ...r
-}) => /* @__PURE__ */ a.jsx(
-  "button",
-  {
-    className: n(c.buttonIcon, c[t], c[e], o),
-    ...r,
-    children: /* @__PURE__ */ a.jsx(s, {})
-  }
-), y = "_ghostButton_118d3_1", _ = {
-  ghostButton: y
-}, D = ({
-  startIcon: s,
-  endIcon: e,
-  children: t,
-  className: o,
-  ...r
-}) => /* @__PURE__ */ a.jsxs("button", { className: n(_.ghostButton, o), ...r, children: [
-  s && /* @__PURE__ */ a.jsx(s, {}),
-  /* @__PURE__ */ a.jsx("span", { children: t }),
-  e && /* @__PURE__ */ a.jsx(e, {})
-] }), w = "_overlay_1t3tm_1", S = {
-  overlay: w
-}, v = ({ className: s, children: e }) => /* @__PURE__ */ a.jsx("div", { className: n(S.overlay, s), children: e }), f = "_disabled_vkmwe_8", T = "_switchTrack_vkmwe_19", k = "_switchThumb_vkmwe_30", I = "_checked_vkmwe_41", P = "_switchLabel_vkmwe_60", i = {
-  switch: "_switch_vkmwe_1",
-  disabled: f,
-  switchTrack: T,
-  switchThumb: k,
-  checked: I,
-  switchLabel: P
-}, O = ({
-  checked: s,
-  onChange: e,
-  disabled: t = !1,
-  className: o,
-  label: r,
-  ...l
-}) => {
-  const u = (p) => {
-    !t && e && e(p.target.checked);
-  };
-  return l["aria-label"] || console.warn(
-    "Switch component requires either a label prop or aria-label prop for accessibility"
-  ), /* @__PURE__ */ a.jsxs(
+
+// src/components/shared/ActionIcon/ActionIcon.tsx
+import clsx4 from "clsx";
+import styles5 from "./ActionIcon.module-WZFHG44L.module.css";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var ActionIcon = ({ icon: Icon, className, ...props }) => {
+  return /* @__PURE__ */ jsx5("button", { className: clsx4(styles5.actionIcon, className), ...props, children: /* @__PURE__ */ jsx5(Icon, { className: styles5.icon }) });
+};
+
+// src/components/shared/ButtonIcon/ButtonIcon.tsx
+import clsx5 from "clsx";
+import styles6 from "./ButtonIcon.module-JHFZQSMJ.module.css";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var ButtonIcon = ({
+  icon: Icon,
+  size = "medium",
+  variant = "primary",
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx6(
+    "button",
+    {
+      className: clsx5(styles6.buttonIcon, styles6[variant], styles6[size], className),
+      ...props,
+      children: /* @__PURE__ */ jsx6(Icon, {})
+    }
+  );
+};
+
+// src/components/shared/Dropdown/Dropdown.tsx
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var Dropdown = ({
+  triggerComponent,
+  children,
+  disabled,
+  open,
+  side = "bottom",
+  align = "start",
+  onOpenChange
+}) => {
+  return /* @__PURE__ */ jsxs3(DropdownMenu.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx7(DropdownMenu.Trigger, { asChild: true, disabled, children: triggerComponent }),
+    /* @__PURE__ */ jsx7(DropdownMenu.Content, { side, align, style: { zIndex: 5 }, children })
+  ] });
+};
+
+// src/components/editors/selects/shared/SelectFieldContent/SelectFieldOptions/SelectFieldOption/SelectFieldOption.tsx
+import * as DropdownMenu2 from "@radix-ui/react-dropdown-menu";
+import styles7 from "./SelectFieldOption.module-SH3TOVNB.module.css";
+import clsx6 from "clsx";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var SelectListOption = ({
+  value,
+  isSelected,
+  label,
+  rightLabel,
+  startIcon,
+  endIcon,
+  disabled,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs4(
+    DropdownMenu2.Item,
+    {
+      className: clsx6(
+        styles7.selectFieldOption,
+        disabled && styles7.disabled,
+        isSelected && styles7.selected
+      ),
+      "data-value": value,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs4("span", { className: styles7.leftContent, children: [
+          startIcon,
+          /* @__PURE__ */ jsx8("span", { title: label, children: label })
+        ] }),
+        /* @__PURE__ */ jsxs4("span", { className: styles7.rightContent, children: [
+          /* @__PURE__ */ jsx8("span", { title: rightLabel, children: rightLabel }),
+          endIcon
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/shared/Button/Button.tsx
+import styles8 from "./Button.module-UAYCVFGG.module.css";
+import clsx7 from "clsx";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var Button = ({
+  children,
+  variant = "primary",
+  size = "medium",
+  startIcon: StartIcon,
+  endIcon: EndIcon,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs5("button", { className: clsx7(styles8.button, styles8[variant], styles8[size], className), ...props, children: [
+    StartIcon && /* @__PURE__ */ jsx9(StartIcon, {}),
+    /* @__PURE__ */ jsx9("span", { children }),
+    EndIcon && /* @__PURE__ */ jsx9(EndIcon, {})
+  ] });
+};
+
+// src/components/shared/GhostButton/GhostButton.tsx
+import clsx8 from "clsx";
+import styles9 from "./GhostButton.module-43KOFC6W.module.css";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var GhostButton = ({
+  startIcon: StartIcon,
+  endIcon: EndIcon,
+  children,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs6("button", { className: clsx8(styles9.ghostButton, className), ...props, children: [
+    StartIcon && /* @__PURE__ */ jsx10(StartIcon, {}),
+    /* @__PURE__ */ jsx10("span", { children }),
+    EndIcon && /* @__PURE__ */ jsx10(EndIcon, {})
+  ] });
+};
+
+// src/components/shared/Overlay/Overlay.tsx
+import clsx9 from "clsx";
+import styles10 from "./Overlay.module-FCW64VWM.module.css";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var Overlay = ({ className, children }) => {
+  return /* @__PURE__ */ jsx11("div", { className: clsx9(styles10.overlay, className), children });
+};
+
+// src/components/editors/selects/MultiSelectField/MultiSelectField.tsx
+import { Fragment as Fragment2, useEffect as useEffect3, useMemo, useRef as useRef2, useState } from "react";
+
+// src/components/editors/selects/shared/SelectFieldTrigger/SelectFieldTrigger.tsx
+import styles11 from "./SelectFieldTrigger.module-M6BRE7IY.module.css";
+import { IconCaretDownFilled, IconLoader2, IconX } from "@tabler/icons-react";
+import clsx10 from "clsx";
+import { forwardRef } from "react";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+var SelectFieldTrigger = forwardRef(
+  ({
+    startIcon: StartIcon,
+    valueLabel,
+    placeholder = "Select",
+    isClearable,
+    isLoading,
+    onClear,
+    error = false,
+    ...props
+  }, ref) => {
+    const displayValue = valueLabel || placeholder;
+    const showClearButton = valueLabel && isClearable;
+    const handleClear = (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      onClear?.();
+    };
+    return /* @__PURE__ */ jsxs7(
+      "button",
+      {
+        ref,
+        className: clsx10(
+          styles11.selectFieldTrigger,
+          valueLabel && styles11.filled,
+          error && styles11.error
+        ),
+        ...props,
+        children: [
+          StartIcon && /* @__PURE__ */ jsx12(StartIcon, {}),
+          /* @__PURE__ */ jsx12("span", { children: displayValue }),
+          showClearButton && /* @__PURE__ */ jsx12(IconX, { onPointerDown: handleClear }),
+          isLoading ? /* @__PURE__ */ jsx12(IconLoader2, { className: styles11.loading }) : /* @__PURE__ */ jsx12(IconCaretDownFilled, {})
+        ]
+      }
+    );
+  }
+);
+SelectFieldTrigger.displayName = "SelectFieldTrigger";
+
+// src/components/editors/selects/shared/SelectFieldContent/SelectFieldContent.tsx
+import { useEffect, useRef } from "react";
+import styles12 from "./SelectFieldContent.module-6FORUMWR.module.css";
+import clsx11 from "clsx";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var SelectFieldContent = ({
+  children,
+  autoFocus,
+  className
+}) => {
+  const containerRef = useRef(null);
+  const currentIndex = useRef(0);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const items = Array.from(
+      container.querySelectorAll('[role="menuitem"], [role="searchbox"], button')
+    );
+    const focusItem = (index) => {
+      if (index >= 0 && index < items.length) {
+        items[index]?.focus();
+        currentIndex.current = index;
+      }
+    };
+    const onKeyDown = (e) => {
+      if (items.length === 0) return;
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          focusItem((currentIndex.current + 1) % items.length);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          focusItem((currentIndex.current - 1 + items.length) % items.length);
+          break;
+        case "Home":
+          e.preventDefault();
+          focusItem(0);
+          break;
+        case "End":
+          e.preventDefault();
+          focusItem(items.length - 1);
+          break;
+      }
+    };
+    container.addEventListener("keydown", onKeyDown);
+    if (autoFocus) {
+      setTimeout(() => {
+        currentIndex.current = 0;
+        focusItem(0);
+      }, 0);
+    }
+    return () => {
+      container.removeEventListener("keydown", onKeyDown);
+    };
+  }, [autoFocus, children]);
+  return /* @__PURE__ */ jsx13("div", { ref: containerRef, tabIndex: -1, className: clsx11(styles12.selectFieldContent, className), children });
+};
+var SelectFieldContentList = ({ children, disabled }) => {
+  return /* @__PURE__ */ jsx13("div", { className: clsx11(styles12.selectFieldContentList, disabled && styles12.disabled), children });
+};
+
+// src/components/editors/selects/shared/SelectFieldContent/SelectFieldContent.utils.ts
+var groupOptionsByCategory = (options) => {
+  const result = options.reduce((acc, option) => {
+    if ("category" in option && option.category) {
+      const category = option.category;
+      if (!acc[category]) {
+        acc[category] = [];
+      }
+      acc[category].push(option);
+    }
+    return acc;
+  }, {});
+  return Object.keys(result).length === 0 ? null : result;
+};
+
+// src/components/editors/selects/MultiSelectField/MultiSelectField.tsx
+import { IconSearch, IconSquare, IconSquareCheckFilled } from "@tabler/icons-react";
+import styles17 from "./selects.module-MRJADSDF.module.css";
+
+// src/components/editors/selects/shared/useSelectSearchFocus.hook.ts
+import { useEffect as useEffect2 } from "react";
+var useSelectSearchFocus = (isOpen, searchFieldRef) => {
+  useEffect2(() => {
+    if (isOpen) {
+      setTimeout(() => {
+        searchFieldRef.current?.focus();
+      }, 100);
+    }
+  }, [isOpen, searchFieldRef]);
+};
+
+// src/components/editors/selects/shared/SelectFieldContent/SelectFieldOptions/SelectFieldCategory/SelectFieldCategory.tsx
+import styles13 from "./SelectFieldCategory.module-FMZMX5V2.module.css";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var SelectFieldCategory = ({ label }) => {
+  return /* @__PURE__ */ jsx14("span", { className: styles13.selectFieldCategory, children: label });
+};
+
+// src/components/shared/Field/FieldFeedback.tsx
+import clsx12 from "clsx";
+import styles14 from "./FieldFeedback.module-F7Z33KCS.module.css";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var FieldFeedback = ({ message, variant, className }) => {
+  return /* @__PURE__ */ jsx15("p", { className: clsx12(styles14.fieldFeedback, variant && styles14[variant], className), children: message });
+};
+
+// src/components/shared/Field/FieldHeader.tsx
+import clsx13 from "clsx";
+import styles15 from "./FieldHeader.module-QOLBH472.module.css";
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+var FieldHeader = ({
+  label,
+  required,
+  requiredLabel = "Required",
+  className
+}) => {
+  if (!label && !required) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs8("label", { className: clsx13(styles15.fieldHeader, className), children: [
+    label,
+    required && /* @__PURE__ */ jsx16("span", { children: requiredLabel })
+  ] });
+};
+
+// src/components/editors/inputs/TextField/TextField.tsx
+import { forwardRef as forwardRef3 } from "react";
+
+// src/components/editors/inputs/shared/InputField/InputField.tsx
+import { IconX as IconX2 } from "@tabler/icons-react";
+import styles16 from "./InputField.module-LDLOMDBK.module.css";
+import clsx14 from "clsx";
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+var InputField = forwardRef2(
+  ({
+    label,
+    required,
+    value = "",
+    disabled,
+    placeholder = "Enter text",
+    role,
+    startIcon: StartIcon,
+    endIcon: EndIcon,
+    onChange,
+    className,
+    clearable = false,
+    type = "text",
+    error = false,
+    errorMessage,
+    requiredLabel,
+    ...props
+  }, ref) => {
+    const showClearButton = value && clearable;
+    const hasError = error || errorMessage;
+    return /* @__PURE__ */ jsxs9("div", { className, children: [
+      /* @__PURE__ */ jsx17(FieldHeader, { label, required, requiredLabel }),
+      /* @__PURE__ */ jsxs9("div", { className: clsx14(styles16.input, hasError && styles16.error), children: [
+        StartIcon && /* @__PURE__ */ jsx17(StartIcon, {}),
+        /* @__PURE__ */ jsx17(
+          "input",
+          {
+            ref,
+            type,
+            role,
+            value,
+            disabled,
+            placeholder,
+            onChange: (e) => onChange(e.target.value),
+            required,
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsx17(
+          IconX2,
+          {
+            className: clsx14(styles16.clearIcon, showClearButton && styles16.clearIconVisible),
+            onClick: () => onChange("")
+          }
+        ),
+        EndIcon && /* @__PURE__ */ jsx17(EndIcon, {})
+      ] }),
+      errorMessage && /* @__PURE__ */ jsx17(FieldFeedback, { variant: "error", message: errorMessage })
+    ] });
+  }
+);
+InputField.displayName = "InputField";
+
+// src/components/editors/inputs/TextField/TextField.tsx
+import { Fragment, jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+var TextField = forwardRef3(
+  ({ value = "", placeholder = "Enter text", maxLength, error, errorMessage, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs10(Fragment, { children: [
+      /* @__PURE__ */ jsx18(
+        InputField,
+        {
+          value,
+          placeholder,
+          ref,
+          maxLength,
+          clearable: true,
+          error,
+          errorMessage,
+          ...props
+        }
+      ),
+      maxLength && /* @__PURE__ */ jsx18(FieldFeedback, { message: `${value?.length}/${maxLength} Characters` })
+    ] });
+  }
+);
+TextField.displayName = "TextField";
+
+// src/utils/debounce.utils.ts
+function debounce(fn, delay = 300) {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn(...args);
+    }, delay);
+  };
+}
+
+// src/components/editors/selects/MultiSelectField/MultiSelectField.tsx
+import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+var MultiSelectField = ({
+  startIcon,
+  label,
+  required,
+  disabled,
+  isClearable,
+  isLoading,
+  isSearchable,
+  noOptionsMessage,
+  options,
+  placeholder,
+  submitLabel = "Apply",
+  values = [],
+  onChange,
+  onSearch,
+  error = false,
+  errorMessage
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchValue, setSearchValue] = useState("");
+  const [preValues, setPreValues] = useState(values);
+  const [selectedLabel, setSelectedLabel] = useState("");
+  const searchFieldRef = useRef2(null);
+  useSelectSearchFocus(isOpen, searchFieldRef);
+  useEffect3(() => {
+    setPreValues(values);
+  }, [JSON.stringify(values)]);
+  useEffect3(() => {
+    if (isLoading) {
+      return;
+    }
+    if (!values || values.length === 0) {
+      setSelectedLabel("");
+      return;
+    }
+    const selectedOptions = values.map(
+      (value) => options.find((o) => o.value === value)?.label ?? value
+    );
+    if (selectedOptions.length > 0) {
+      const newLabel = selectedOptions.join(", ");
+      setSelectedLabel(`(${selectedOptions.length}) ${newLabel}`);
+    }
+  }, [values, options, isLoading]);
+  const debouncedSearch = useMemo(() => onSearch ? debounce(onSearch) : void 0, [onSearch]);
+  const displayOptions = isSearchable && !onSearch ? options.filter((option) => option.label.toLowerCase().includes(searchValue.toLowerCase())) : options;
+  const groupedOptions = useMemo(() => groupOptionsByCategory(displayOptions), [displayOptions]);
+  const isSubmitDisabled = preValues.every((preValue) => values.includes(preValue)) && values.every((value) => preValues.includes(value));
+  const handleSelectOption = (e, newValue) => {
+    e.preventDefault();
+    if (!newValue) return;
+    if (preValues.includes(newValue)) {
+      setPreValues(preValues.filter((v) => v !== newValue));
+    } else {
+      setPreValues([...preValues, newValue]);
+    }
+  };
+  const handleSearch = (newSearch) => {
+    setSearchValue(newSearch);
+    debouncedSearch?.(newSearch);
+  };
+  const handleSave = (newValues) => {
+    onChange(newValues);
+    setIsOpen(false);
+    setSearchValue("");
+    onSearch?.("");
+  };
+  const handleClearAll = () => {
+    setSearchValue("");
+    onSearch?.("");
+    onChange([]);
+  };
+  const hasError = error || !!errorMessage;
+  return /* @__PURE__ */ jsxs11("div", { children: [
+    /* @__PURE__ */ jsx19(FieldHeader, { label, required }),
+    /* @__PURE__ */ jsx19(
+      Dropdown,
+      {
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        disabled,
+        triggerComponent: /* @__PURE__ */ jsx19(
+          SelectFieldTrigger,
+          {
+            startIcon,
+            "aria-label": "Select options",
+            placeholder,
+            disabled,
+            valueLabel: selectedLabel,
+            onClear: handleClearAll,
+            isClearable,
+            isLoading,
+            error: hasError
+          }
+        ),
+        children: /* @__PURE__ */ jsxs11(SelectFieldContent, { children: [
+          isSearchable && /* @__PURE__ */ jsx19(
+            TextField,
+            {
+              ref: searchFieldRef,
+              startIcon: IconSearch,
+              "aria-label": "Search options",
+              placeholder: "Search\u2026",
+              role: "searchbox",
+              value: searchValue,
+              onKeyDown: (e) => e.stopPropagation(),
+              onChange: handleSearch,
+              className: styles17.searchField
+            }
+          ),
+          /* @__PURE__ */ jsxs11(SelectFieldContentList, { disabled: isLoading, children: [
+            groupedOptions ? Object.entries(groupedOptions).map(([category, categoryOptions]) => /* @__PURE__ */ jsxs11(Fragment2, { children: [
+              /* @__PURE__ */ jsx19(SelectFieldCategory, { label: category }),
+              categoryOptions.map((option) => /* @__PURE__ */ jsx19(
+                SelectListOption,
+                {
+                  onClick: (e) => handleSelectOption(e, option.value),
+                  startIcon: preValues.includes(option.value) ? /* @__PURE__ */ jsx19(IconSquareCheckFilled, {}) : /* @__PURE__ */ jsx19(IconSquare, {}),
+                  ...option
+                },
+                option?.value ?? option.label
+              ))
+            ] }, category)) : displayOptions.map((option) => /* @__PURE__ */ jsx19(
+              SelectListOption,
+              {
+                onClick: (e) => handleSelectOption(e, option.value),
+                startIcon: preValues.includes(option.value) ? /* @__PURE__ */ jsx19(IconSquareCheckFilled, {}) : /* @__PURE__ */ jsx19(IconSquare, {}),
+                ...option
+              },
+              option?.value ?? option.label
+            )),
+            noOptionsMessage && displayOptions.length === 0 && /* @__PURE__ */ jsx19(SelectListOption, { disabled: true, value: "empty", label: noOptionsMessage })
+          ] }),
+          /* @__PURE__ */ jsx19(
+            Button,
+            {
+              className: styles17.submitButton,
+              disabled: isSubmitDisabled || isLoading,
+              variant: "primary",
+              size: "medium",
+              onClick: () => handleSave(preValues),
+              role: "button",
+              children: submitLabel
+            }
+          )
+        ] })
+      }
+    ),
+    errorMessage && /* @__PURE__ */ jsx19(FieldFeedback, { message: errorMessage, variant: "error" })
+  ] });
+};
+
+// src/components/editors/Switch/Switch.tsx
+import clsx15 from "clsx";
+import styles18 from "./Switch.module-MXKS66UI.module.css";
+import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+var Switch = ({
+  checked,
+  onChange,
+  disabled = false,
+  className,
+  label,
+  ...props
+}) => {
+  const handleChange = (event) => {
+    if (!disabled && onChange) {
+      onChange(event.target.checked);
+    }
+  };
+  if (!props["aria-label"]) {
+    console.warn(
+      "Switch component requires either a label prop or aria-label prop for accessibility"
+    );
+  }
+  return /* @__PURE__ */ jsxs12(
     "label",
     {
-      className: n(
-        o,
-        i.switch,
-        s && i.checked,
-        t && i.disabled
+      className: clsx15(
+        className,
+        styles18.switch,
+        checked && styles18.checked,
+        disabled && styles18.disabled
       ),
       children: [
-        /* @__PURE__ */ a.jsx(
+        /* @__PURE__ */ jsx20(
           "input",
           {
             type: "checkbox",
-            checked: s,
-            onChange: u,
-            disabled: t,
+            checked,
+            onChange: handleChange,
+            disabled,
             role: "switch",
-            "aria-checked": s,
-            "aria-disabled": t,
-            ...l
+            "aria-checked": checked,
+            "aria-disabled": disabled,
+            ...props
           }
         ),
-        /* @__PURE__ */ a.jsx("span", { className: i.switchTrack, "aria-hidden": "true", children: /* @__PURE__ */ a.jsx("span", { className: i.switchThumb, "aria-hidden": "true" }) }),
-        r && /* @__PURE__ */ a.jsx("span", { className: n(i.switchLabel), children: r })
+        /* @__PURE__ */ jsx20("span", { className: styles18.switchTrack, "aria-hidden": "true", children: /* @__PURE__ */ jsx20("span", { className: styles18.switchThumb, "aria-hidden": "true" }) }),
+        label && /* @__PURE__ */ jsx20("span", { className: clsx15(styles18.switchLabel), children: label })
       ]
     }
   );
 };
+
+// src/components/editors/selects/SingleSelectField/SingleSelectField.tsx
+import { Fragment as Fragment3, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef3, useState as useState2 } from "react";
+import { IconSearch as IconSearch2 } from "@tabler/icons-react";
+import styles19 from "./selects.module-MRJADSDF.module.css";
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+var SingleSelectField = ({
+  label,
+  required,
+  value = "",
+  startIcon,
+  options,
+  disabled,
+  placeholder,
+  searchable,
+  clearable,
+  isLoading,
+  noOptionsMessage = "No options available",
+  onChange,
+  onSearch,
+  error = false,
+  errorMessage
+}) => {
+  const [isOpen, setIsOpen] = useState2(false);
+  const [searchValue, setSearchValue] = useState2("");
+  const [selectedLabel, setSelectedLabel] = useState2(value);
+  const searchFieldRef = useRef3(null);
+  useSelectSearchFocus(isOpen, searchFieldRef);
+  useEffect4(() => {
+    if (!value) {
+      setSelectedLabel("");
+      return;
+    }
+    const option = options.find((opt) => opt.value === value);
+    if (option) {
+      setSelectedLabel(option.label);
+    }
+  }, [value, options]);
+  const debouncedSearch = useMemo2(() => onSearch ? debounce(onSearch) : void 0, [onSearch]);
+  const displayOptions = searchable && !onSearch ? options.filter((option) => option.label.toLowerCase().includes(searchValue.toLowerCase())) : options;
+  const groupedOptions = useMemo2(() => groupOptionsByCategory(displayOptions), [displayOptions]);
+  const handleChange = (newValue) => {
+    setSearchValue("");
+    onChange(newValue ?? "");
+    onSearch?.("");
+    if (newValue === "") {
+      setSelectedLabel("");
+    } else {
+      const option = options.find((opt) => opt.value === newValue);
+      if (option) setSelectedLabel(option.label);
+    }
+  };
+  const handleSearch = (newSearch) => {
+    setSearchValue(newSearch);
+    debouncedSearch?.(newSearch);
+  };
+  const hasError = error || !!errorMessage;
+  return /* @__PURE__ */ jsxs13("div", { children: [
+    /* @__PURE__ */ jsx21(FieldHeader, { label, required }),
+    /* @__PURE__ */ jsx21(
+      Dropdown,
+      {
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        disabled,
+        triggerComponent: /* @__PURE__ */ jsx21(
+          SelectFieldTrigger,
+          {
+            startIcon,
+            "aria-label": "Select option",
+            placeholder,
+            disabled,
+            valueLabel: selectedLabel,
+            onClear: () => handleChange(""),
+            isClearable: clearable,
+            isLoading,
+            error: hasError
+          }
+        ),
+        children: /* @__PURE__ */ jsxs13(SelectFieldContent, { children: [
+          searchable && /* @__PURE__ */ jsx21(
+            TextField,
+            {
+              ref: searchFieldRef,
+              startIcon: IconSearch2,
+              "aria-label": "Search options",
+              placeholder: "Search\u2026",
+              role: "searchbox",
+              value: searchValue,
+              onKeyDown: (e) => e.stopPropagation(),
+              onChange: handleSearch,
+              className: styles19.searchField
+            }
+          ),
+          /* @__PURE__ */ jsxs13(SelectFieldContentList, { disabled: isLoading, children: [
+            groupedOptions ? Object.entries(groupedOptions).map(([category, categoryOptions]) => /* @__PURE__ */ jsxs13(Fragment3, { children: [
+              /* @__PURE__ */ jsx21(SelectFieldCategory, { label: category }),
+              categoryOptions.map((option) => /* @__PURE__ */ jsx21(
+                SelectListOption,
+                {
+                  onClick: () => handleChange(option?.value),
+                  isSelected: option.value === value,
+                  ...option
+                },
+                option?.value ?? option.label
+              ))
+            ] }, category)) : displayOptions.map((option) => /* @__PURE__ */ jsx21(
+              SelectListOption,
+              {
+                onClick: () => handleChange(option?.value),
+                isSelected: option.value === value,
+                ...option
+              },
+              option?.value ?? option.label
+            )),
+            options.length === 0 && /* @__PURE__ */ jsx21(SelectListOption, { disabled: true, value: "empty", label: noOptionsMessage })
+          ] })
+        ] })
+      }
+    ),
+    errorMessage && /* @__PURE__ */ jsx21(FieldFeedback, { message: errorMessage, variant: "error" })
+  ] });
+};
+
+// src/components/editors/inputs/NumberField/NumberField.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var NumberField = forwardRef4(
+  ({
+    value = null,
+    placeholder = "Enter number",
+    onChange,
+    error,
+    errorMessage,
+    clearable,
+    ...props
+  }, ref) => {
+    const handleChange = (value2) => {
+      if (value2 === "") {
+        onChange?.(null);
+        return;
+      }
+      const numericValue = Number(value2);
+      if (!isNaN(numericValue) && isFinite(numericValue)) {
+        onChange?.(numericValue);
+      }
+    };
+    return /* @__PURE__ */ jsx22(
+      InputField,
+      {
+        ...props,
+        value: value?.toString() || "",
+        placeholder,
+        onChange: handleChange,
+        type: "number",
+        clearable,
+        error,
+        errorMessage,
+        ref
+      }
+    );
+  }
+);
+NumberField.displayName = "NumberField";
+
+// src/components/charts/bars/BarChart.tsx
+import { useRef as useRef4 } from "react";
+import { Bar } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+  LogarithmicScale
+} from "chart.js";
+
+// src/components/charts/chartjs.utils.ts
+var getSegmentIndexClicked = (event, chartRef) => {
+  const chart = chartRef.current;
+  if (!chart) return void 0;
+  const points = chart.getElementsAtEventForMode(
+    event.nativeEvent,
+    "nearest",
+    { intersect: true },
+    false
+  );
+  return points[0]?.index;
+};
+
+// src/styles/styles.utils.ts
+var numericRegex = /^-?\d+(\.\d+)?$/;
+var getStyleValue = (variableName) => {
+  if (typeof window === "undefined" || typeof document === "undefined") return "";
+  const computedStyle = getComputedStyle(document.documentElement);
+  return computedStyle.getPropertyValue(variableName).trim();
+};
+var getStyle = (variableName, fallbackValue) => {
+  const rawValue = getStyleValue(variableName);
+  if (!rawValue) return fallbackValue ?? rawValue;
+  const firstChar = rawValue.charAt(0);
+  if (firstChar === "#" || rawValue.startsWith("rgb(") || rawValue.startsWith("rgba(")) {
+    return rawValue;
+  }
+  return rawValue;
+};
+var getStyleNumber = (variableName, fallbackValue) => {
+  const rawValue = getStyleValue(variableName) || fallbackValue;
+  if (!rawValue) return void 0;
+  const numericValue = parseFloat(rawValue);
+  const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+  if (rawValue.slice(-2) === "px") {
+    return numericValue;
+  }
+  const unit3 = rawValue.slice(-3);
+  if (unit3 === "rem") {
+    return numericValue * rootFontSize;
+  }
+  if (numericRegex.test(rawValue)) {
+    return numericValue;
+  }
+  return void 0;
+};
+
+// src/components/charts/charts.constants.ts
+var getChartColors = () => [
+  getStyle("--em-sem-chart-color--1"),
+  getStyle("--em-sem-chart-color--2"),
+  getStyle("--em-sem-chart-color--3"),
+  getStyle("--em-sem-chart-color--4"),
+  getStyle("--em-sem-chart-color--5"),
+  getStyle("--em-sem-chart-color--6"),
+  getStyle("--em-sem-chart-color--7"),
+  getStyle("--em-sem-chart-color--8"),
+  getStyle("--em-sem-chart-color--9"),
+  getStyle("--em-sem-chart-color--10")
+];
+var getChartContrastColors = () => [
+  getStyle("--em-sem-chart-color--1"),
+  getStyle("--em-sem-chart-color--4"),
+  getStyle("--em-sem-chart-color--7"),
+  getStyle("--em-sem-chart-color--10")
+];
+
+// src/components/charts/bars/bars.utils.ts
+import { mergician as mergician2 } from "mergician";
+
+// src/components/charts/chartjs.cartesian.constants.ts
+import { mergician } from "mergician";
+
+// src/components/charts/chartjs.constants.ts
+var getChartjsOptionsPlugins = () => ({
+  datalabels: {
+    backgroundColor: getStyle("--em-chart-label-background", "#FFF"),
+    borderRadius: getStyleNumber("--em-chart-label-border-radius", "624.9375rem"),
+    padding: {
+      top: getStyleNumber("--em-chart-label-padding-top-bottom", "0.125rem"),
+      bottom: getStyleNumber("--em-chart-label-padding-top-bottom", "0.125rem"),
+      right: getStyleNumber("--em-chart-label-padding-left-right", "0.25rem"),
+      left: getStyleNumber("--em-chart-label-padding-left-right", "0.25rem")
+    },
+    color: getStyle("--em-chart-label-color", "#212129"),
+    font: {
+      size: getStyleNumber("--em-chart-label-font-size", "0.75rem"),
+      weight: getStyleNumber("--em-chart-label-font-weight", "500"),
+      family: getStyle("--em-chart-label-font-family", "sans-serif")
+    }
+  },
+  legend: {
+    position: "bottom",
+    labels: {
+      boxWidth: getStyleNumber("--em-chart-category-size", "0.75rem") / 2,
+      boxHeight: getStyleNumber("--em-chart-category-size", "0.75rem") / 2,
+      usePointStyle: true,
+      color: getStyle("--em-chart-category-color", "#5C5C66"),
+      padding: getStyleNumber("--em-chart-category-list-gap", "1rem"),
+      font: {
+        family: getStyle("--em-chart-category-font-family", "sans-serif"),
+        size: getStyleNumber("--em-chart-category-font-size", "0.75rem"),
+        weight: getStyleNumber("--em-chart-category-font-weight", "500")
+      }
+    }
+  },
+  tooltip: {
+    usePointStyle: true,
+    caretSize: 0,
+    enabled: true,
+    backgroundColor: getStyle("--em-chart-tooltip-background", "#212129"),
+    cornerRadius: getStyleNumber("--em-chart-tooltip-border-radius", "0.75rem"),
+    padding: getStyleNumber("--em-chart-tooltip-padding", "1rem"),
+    displayColors: true,
+    bodyColor: getStyle("--em-chart-tooltip-title-color", "#FFF"),
+    bodyAlign: "left",
+    boxPadding: getStyleNumber("--em-chart-category-gap", "0.25rem"),
+    bodyFont: {
+      size: getStyleNumber("--em-chart-category-font-size", "0.75rem"),
+      weight: getStyleNumber("--em-chart-category-font-weight", "500"),
+      family: getStyle("--em-chart-tooltip-family", "sans-serif")
+    },
+    titleAlign: "left",
+    titleColor: getStyle("--em-chart-tooltip-title-color", "#FFF"),
+    titleFont: {
+      size: getStyleNumber("--em-chart-tooltip-title-font-size", "0.875rem"),
+      weight: getStyleNumber("--em-chart-tooltip-title-font-weight", "700"),
+      family: getStyle("--em-chart-tooltip-family", "sans-serif")
+    }
+  }
+});
+var getChartjsOptions = () => ({
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: getChartjsOptionsPlugins()
+});
+
+// src/components/charts/chartjs.cartesian.constants.ts
+var getChartjsAxisOptionsPlugins = () => ({
+  datalabels: {
+    labels: {
+      total: {
+        anchor: (context) => {
+          const value = context.dataset.data[context.dataIndex];
+          return value >= 0 ? "end" : "start";
+        },
+        align: (context) => {
+          const value = context.dataset.data[context.dataIndex];
+          return value >= 0 ? "top" : "bottom";
+        }
+      },
+      value: {
+        anchor: (context) => {
+          const value = context.dataset.data[context.dataIndex];
+          return value >= 0 ? "end" : "start";
+        },
+        align: (context) => {
+          const value = context.dataset.data[context.dataIndex];
+          return value >= 0 ? "top" : "bottom";
+        }
+      }
+    }
+  }
+});
+var getChartjsAxisOptionsScalesTicksDefault = () => ({
+  display: true,
+  color: getStyle("--em-chart-grid-label-color", "#212129"),
+  font: {
+    size: getStyleNumber("--em-chart-grid-label-font-size", "0.75rem"),
+    family: getStyle("--em-chart-grid-font-family", "sans-serif"),
+    weight: getStyleNumber("--em-chart-grid-label-font-weight", "400")
+  }
+});
+var getChartjsAxisOptionsScalesTicksMuted = () => ({
+  display: true,
+  color: getStyle("--em-chart-grid-label-color--muted", "#5C5C66"),
+  font: {
+    size: getStyleNumber("--em-chart-grid-label-font-size", "0.75rem"),
+    family: getStyle("--em-chart-grid-font-family", "sans-serif"),
+    weight: getStyleNumber("--em-chart-grid-label-font-weight", "400")
+  }
+});
+var getChartjsAxisOptionsScalesTitle = () => ({
+  color: getStyle("--em-chart-grid-label-color", "#212129"),
+  font: {
+    size: getStyleNumber("--em-chart-grid-title-font-size", "0.875rem"),
+    weight: getStyleNumber("--em-chart-grid-title-font-weight", "700"),
+    family: getStyle("--em-chart-grid-font-family", "sans-serif")
+  }
+});
+var getChartjsAxisOptionsScalesGrid = () => ({
+  color: getStyle("--em-chart-grid-line-color--light", "#EDEDF1"),
+  lineWidth: getStyleNumber("--em-chart-grid-line-width--thin", "0.0625rem")
+});
+var getChartjsAxisOptionsScales = () => ({
+  x: {
+    grid: getChartjsAxisOptionsScalesGrid(),
+    title: getChartjsAxisOptionsScalesTitle(),
+    ticks: getChartjsAxisOptionsScalesTicksDefault()
+  },
+  y: {
+    grid: getChartjsAxisOptionsScalesGrid(),
+    title: getChartjsAxisOptionsScalesTitle(),
+    ticks: getChartjsAxisOptionsScalesTicksMuted()
+  }
+});
+var getChartjsAxisOptions = () => mergician(getChartjsOptions(), {
+  plugins: getChartjsAxisOptionsPlugins(),
+  scales: getChartjsAxisOptionsScales()
+});
+var chartjsAxisOptionsLayoutPadding = 30;
+function isMixedValues(values) {
+  const hasPos = values.some((v) => v > 0);
+  const hasNeg = values.some((v) => v < 0);
+  return hasPos && hasNeg;
+}
+var getChartjsAxisOptionsScalesGridColor = (ctx) => {
+  if (ctx.tick.value === 0) {
+    const values = ctx.chart.data.datasets[0].data;
+    if (isMixedValues(values)) {
+      return getStyle("--em-chart-grid-line-color", "#212129");
+    }
+    return getStyle("--em-chart-grid-line-color--subtle", "#B8B8BD");
+  }
+  return getStyle("--em-chart-grid-line-color--light", "#EDEDF1");
+};
+
+// src/components/charts/bars/bars.utils.ts
+var getBarChartData = (data) => {
+  const chartContrastColors = getChartContrastColors();
+  return {
+    ...data,
+    datasets: data.datasets?.map((dataset, index) => {
+      const colors = chartContrastColors[index % chartContrastColors.length];
+      const defaultDataset = {
+        ...dataset,
+        backgroundColor: colors,
+        borderColor: colors
+      };
+      return mergician2(defaultDataset, dataset);
+    })
+  };
+};
+var getDatalabelTotalDisplay = (context, showTotalLabels) => showTotalLabels && context.datasetIndex === context.chart.data.datasets.length - 1 ? "auto" : false;
+var getDatalabelTotalFormatter = (_value, context) => {
+  const { datasets } = context.chart.data;
+  const i = context.dataIndex;
+  const total = datasets.reduce((sum, ds) => {
+    const val = ds.data[i];
+    return sum + (val || 0);
+  }, 0);
+  return total > 0 ? total : "";
+};
+var getBarVerticalChartOptions = (config) => {
+  return {
+    indexAxis: "x",
+    layout: {
+      padding: {
+        top: (config.stacked ? config.showTotalLabels : config.showValueLabels) ? chartjsAxisOptionsLayoutPadding : 0
+      }
+    },
+    plugins: {
+      datalabels: {
+        labels: {
+          total: {
+            align: (context) => {
+              const value = context.dataset.data[context.dataIndex];
+              return value >= 0 ? "top" : "left";
+            }
+          },
+          value: {
+            align: (context) => {
+              if (config.stacked) {
+                return "center";
+              }
+              const value = context.dataset.data[context.dataIndex];
+              return value >= 0 ? "top" : "bottom";
+            }
+          }
+        }
+      }
+    },
+    scales: {
+      x: {
+        grid: { display: false },
+        border: {
+          display: false
+        },
+        ticks: getChartjsAxisOptionsScalesTicksDefault(),
+        reverse: config.reverseXAxis
+      },
+      y: {
+        beginAtZero: true,
+        grid: {
+          display: true,
+          color: getChartjsAxisOptionsScalesGridColor
+        },
+        border: {
+          display: false
+        },
+        ticks: getChartjsAxisOptionsScalesTicksMuted(),
+        min: config.yAxisRangeMin,
+        max: config.yAxisRangeMax,
+        type: config.showLogarithmicScale ? "logarithmic" : "linear"
+      }
+    }
+  };
+};
+var getBarHorizontalChartOptions = (config) => {
+  return {
+    indexAxis: "y",
+    layout: {
+      padding: {
+        right: (config.stacked ? config.showTotalLabels : config.showValueLabels) ? chartjsAxisOptionsLayoutPadding : 0
+      }
+    },
+    plugins: {
+      datalabels: {
+        labels: {
+          total: {
+            align: (context) => {
+              const value = context.dataset.data[context.dataIndex];
+              return value >= 0 ? "right" : "left";
+            }
+          },
+          value: {
+            align: (context) => {
+              if (config.stacked) {
+                return "center";
+              }
+              const value = context.dataset.data[context.dataIndex];
+              return value >= 0 ? "right" : "left";
+            }
+          }
+        }
+      }
+    },
+    scales: {
+      x: {
+        grid: { display: true, color: getChartjsAxisOptionsScalesGridColor },
+        border: { display: false },
+        ticks: getChartjsAxisOptionsScalesTicksMuted(),
+        min: config.xAxisRangeMin,
+        max: config.xAxisRangeMax,
+        type: config.showLogarithmicScale ? "logarithmic" : "linear"
+      },
+      y: {
+        grid: { display: false },
+        border: {
+          display: false
+        },
+        ticks: getChartjsAxisOptionsScalesTicksDefault(),
+        reverse: config.reverseYAxis
+      }
+    }
+  };
+};
+var getBarChartOptions = (options) => {
+  const baseBarChartOptions = {
+    elements: {
+      bar: {
+        borderRadius: getStyleNumber("--em-barchart-border-radius", "0.375rem")
+      }
+    },
+    plugins: {
+      legend: { display: options.showLegend },
+      tooltip: {
+        enabled: options.showTooltips
+      },
+      datalabels: {
+        display: (context) => {
+          return options.showValueLabels && context.dataset.data[context.dataIndex] !== 0 ? "auto" : false;
+        },
+        labels: {
+          total: {
+            display: (context) => getDatalabelTotalDisplay(context, options.showTotalLabels),
+            formatter: getDatalabelTotalFormatter,
+            anchor: (context) => {
+              const value = context.dataset.data[context.dataIndex];
+              return value >= 0 ? "end" : "start";
+            }
+          },
+          value: {
+            anchor: (context) => {
+              if (options.stacked) {
+                return "center";
+              }
+              const value = context.dataset.data[context.dataIndex];
+              return value >= 0 ? "end" : "start";
+            }
+          }
+        }
+      }
+    },
+    scales: {
+      x: {
+        stacked: Boolean(options.stacked),
+        title: {
+          display: Boolean(options.xAxisLabel),
+          text: options.xAxisLabel ?? ""
+        },
+        ticks: { display: true }
+      },
+      y: {
+        stacked: Boolean(options.stacked),
+        title: {
+          display: Boolean(options.yAxisLabel),
+          text: options.yAxisLabel ?? ""
+        },
+        ticks: { display: true }
+      }
+    }
+  };
+  const getVerticalHorizontalOptions = options.horizontal ? getBarHorizontalChartOptions : getBarVerticalChartOptions;
+  const verticalHorizontalOptions = getVerticalHorizontalOptions(options);
+  return mergician2(getChartjsAxisOptions(), baseBarChartOptions, verticalHorizontalOptions);
+};
+
+// src/components/charts/bars/BarChart.tsx
+import styles20 from "./charts.module-YNKCWRLU.module.css";
+import { mergician as mergician3 } from "mergician";
+import ChartDataLabels from "chartjs-plugin-datalabels";
+import { jsx as jsx23 } from "react/jsx-runtime";
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  LogarithmicScale,
+  Title,
+  Tooltip,
+  Legend,
+  ChartDataLabels
+);
+var BarChart = ({ data, onSegmentClick, options = {}, ...props }) => {
+  const chartRef = useRef4(null);
+  const barChartOptions = mergician3(getBarChartOptions(props), options);
+  const handleSegmentClick = (event) => {
+    const indexClicked = getSegmentIndexClicked(event, chartRef);
+    onSegmentClick?.(indexClicked);
+  };
+  return /* @__PURE__ */ jsx23("div", { className: styles20.chartContainer, children: /* @__PURE__ */ jsx23(
+    Bar,
+    {
+      ref: chartRef,
+      data: getBarChartData(data),
+      options: barChartOptions,
+      onClick: handleSegmentClick
+    }
+  ) });
+};
+
+// src/components/charts/lines/LineChart.tsx
+import {
+  Chart as ChartJS2,
+  CategoryScale as CategoryScale2,
+  LinearScale as LinearScale2,
+  PointElement,
+  LineElement,
+  Title as Title2,
+  Tooltip as Tooltip2,
+  Legend as Legend2,
+  LogarithmicScale as LogarithmicScale2,
+  Filler
+} from "chart.js";
+import { Line } from "react-chartjs-2";
+import styles21 from "./charts.module-YNKCWRLU.module.css";
+import { useRef as useRef5 } from "react";
+import { mergician as mergician5 } from "mergician";
+
+// src/components/charts/lines/lines.utils.ts
+import { mergician as mergician4 } from "mergician";
+var getLineChartData = (data) => {
+  const chartContrastColors = getChartContrastColors();
+  const mergedData = {
+    ...data,
+    datasets: data.datasets?.map((dataset, index) => {
+      const colors = chartContrastColors[index % chartContrastColors.length];
+      const defaultDataset = {
+        backgroundColor: colors,
+        borderColor: colors
+      };
+      const merged = mergician4(defaultDataset, dataset);
+      return merged;
+    }) || []
+  };
+  return mergedData;
+};
+var getLineChartOptions = (options) => {
+  const newOptions = {
+    interaction: {
+      mode: "x",
+      intersect: false
+    },
+    elements: {
+      point: {
+        radius: getStyleNumber("--em-linechart-point-size", "0.5rem") / 2,
+        hoverRadius: getStyleNumber("--em-linechart-point-size--hover", "0.75rem") / 2
+      },
+      line: {
+        tension: 0.2,
+        borderWidth: getStyleNumber("--em-linechart-line-width", "0.125rem")
+      }
+    },
+    layout: {
+      padding: {
+        top: options.showValueLabels ? chartjsAxisOptionsLayoutPadding : 0
+      }
+    },
+    plugins: {
+      datalabels: {
+        display: (context) => {
+          if (!options.showValueLabels) return false;
+          const value = context.dataset.data[context.dataIndex];
+          const yScale = context.chart.scales.y;
+          return value !== void 0 && yScale && value >= yScale.min && value <= yScale.max ? "auto" : false;
+        }
+      },
+      legend: {
+        display: options.showLegend
+      },
+      tooltip: {
+        enabled: options.showTooltips
+      }
+    },
+    scales: {
+      x: {
+        grid: { display: false },
+        border: {
+          display: false
+        },
+        ticks: getChartjsAxisOptionsScalesTicksDefault(),
+        title: {
+          display: Boolean(options.xAxisLabel),
+          text: options.xAxisLabel
+        },
+        reverse: options.reverseXAxis
+      },
+      y: {
+        beginAtZero: true,
+        ticks: getChartjsAxisOptionsScalesTicksMuted(),
+        grid: { display: true, color: getChartjsAxisOptionsScalesGridColor },
+        border: {
+          display: false
+        },
+        type: options.showLogarithmicScale ? "logarithmic" : "linear",
+        title: {
+          display: Boolean(options.yAxisLabel),
+          text: options.yAxisLabel
+        },
+        min: options.yAxisRangeMin,
+        max: options.yAxisRangeMax
+      }
+    }
+  };
+  return mergician4(getChartjsAxisOptions(), newOptions);
+};
+
+// src/components/charts/lines/LineChart.tsx
+import ChartDataLabels2 from "chartjs-plugin-datalabels";
+import AnnotationPlugin from "chartjs-plugin-annotation";
+import { jsx as jsx24 } from "react/jsx-runtime";
+ChartJS2.register(
+  CategoryScale2,
+  LinearScale2,
+  PointElement,
+  LineElement,
+  LogarithmicScale2,
+  Filler,
+  Title2,
+  Tooltip2,
+  Legend2,
+  ChartDataLabels2,
+  AnnotationPlugin
+);
+var LineChart = ({ options = {}, data, onSegmentClick, ...props }) => {
+  const chartRef = useRef5(null);
+  const pieOptions = mergician5(getLineChartOptions(props), options);
+  const handleSegmentClick = (event) => {
+    const indexClicked = getSegmentIndexClicked(event, chartRef);
+    onSegmentClick?.(indexClicked);
+  };
+  return /* @__PURE__ */ jsx24("div", { className: styles21.chartContainer, children: /* @__PURE__ */ jsx24(
+    Line,
+    {
+      ref: chartRef,
+      data: getLineChartData(data),
+      options: pieOptions,
+      onClick: handleSegmentClick
+    }
+  ) });
+};
+
+// src/components/charts/kpis/KpiChart.tsx
+import { useEffect as useEffect5, useRef as useRef6, useState as useState3 } from "react";
+import styles23 from "./KpiChart.module-KRTSMOWN.module.css";
+
+// src/components/charts/kpis/components/KpiChartChange.tsx
+import styles22 from "./KpiChartChange.module-M7E4IU7A.module.css";
+import clsx16 from "clsx";
+import { IconTrendingDown, IconTrendingUp } from "@tabler/icons-react";
+import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+var getChangeClass = (isPositive, invertChangeColors) => {
+  if (isPositive) return invertChangeColors ? styles22.negative : styles22.positive;
+  return invertChangeColors ? styles22.positive : styles22.negative;
+};
+var KpiChartChange = ({
+  value,
+  comparisonValue = 0,
+  showChangeAsPercentage,
+  invertChangeColors = false,
+  comparisonLabel,
+  valueFormatter,
+  percentageDecimalPlaces = 1,
+  equalComparisonLabel,
+  className
+}) => {
+  const equalComparison = comparisonValue === value;
+  const difference = value - comparisonValue;
+  const isPositive = difference > 0;
+  let differenceLabel;
+  if (showChangeAsPercentage) {
+    const percentage = comparisonValue === 0 ? 0 : difference / comparisonValue * 100;
+    differenceLabel = `${percentage.toFixed(percentageDecimalPlaces)}%`;
+  } else {
+    differenceLabel = valueFormatter ? valueFormatter(difference) : difference.toString();
+  }
+  const displayValue = `${isPositive ? "+" : ""}${differenceLabel}`;
+  const Icon = isPositive ? IconTrendingUp : IconTrendingDown;
+  return /* @__PURE__ */ jsxs14("div", { className: clsx16(className, styles22.kpiChartChangeContainer), children: [
+    !equalComparison && /* @__PURE__ */ jsxs14(
+      "span",
+      {
+        className: clsx16(styles22.kpiChangeBadge, getChangeClass(isPositive, invertChangeColors)),
+        children: [
+          /* @__PURE__ */ jsx25(Icon, {}),
+          /* @__PURE__ */ jsx25("span", { children: displayValue })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx25("span", { className: styles22.kpiComparisonLabel, children: equalComparison ? equalComparisonLabel ?? comparisonLabel : comparisonLabel })
+  ] });
+};
+
+// src/components/charts/kpis/KpiChart.tsx
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+var KpiChart = ({
+  value,
+  valueFontSize,
+  changeFontSize,
+  comparisonValue,
+  comparisonLabel,
+  invertChangeColors,
+  showChangeAsPercentage,
+  percentageDecimalPlaces = 1,
+  equalComparisonLabel = "No change",
+  valueFormatter
+}) => {
+  const containerRef = useRef6(null);
+  const [fontSize, setFontSize] = useState3(20);
+  useEffect5(() => {
+    const container = containerRef.current;
+    const updateFont = () => {
+      const w = container.offsetWidth;
+      const h = container.offsetHeight;
+      const newSize = Math.min(w, h) * 0.3;
+      setFontSize(newSize);
+    };
+    const observer = new ResizeObserver(updateFont);
+    observer.observe(container);
+    updateFont();
+    return () => observer.disconnect();
+  }, []);
+  const hasComparisonValue = comparisonValue !== void 0;
+  const displayValue = value === void 0 ? "" : valueFormatter ? valueFormatter(value) : value;
+  return /* @__PURE__ */ jsx26("div", { className: styles23.kpiChartContainer, ref: containerRef, children: /* @__PURE__ */ jsxs15("div", { className: styles23.kpiChartCenter, children: [
+    /* @__PURE__ */ jsx26(
+      "h2",
+      {
+        title: displayValue.toString(),
+        style: {
+          fontSize: valueFontSize ?? fontSize
+        },
+        children: displayValue
+      }
+    ),
+    /* @__PURE__ */ jsx26("div", { className: styles23.kpiComparisonContainer, style: { fontSize: changeFontSize }, children: hasComparisonValue && /* @__PURE__ */ jsx26(
+      KpiChartChange,
+      {
+        equalComparisonLabel,
+        changeFontSize,
+        comparisonLabel,
+        comparisonValue,
+        invertChangeColors,
+        percentageDecimalPlaces,
+        showChangeAsPercentage,
+        value,
+        valueFormatter
+      }
+    ) })
+  ] }) });
+};
+
+// src/components/charts/pies/DonutChart/DonutChart.tsx
+import { useRef as useRef7 } from "react";
+import { Pie } from "react-chartjs-2";
+import { ArcElement, Chart as ChartJS3, Legend as Legend3, Tooltip as Tooltip3 } from "chart.js";
+import ChartDataLabels3 from "chartjs-plugin-datalabels";
+import AnnotationPlugin2 from "chartjs-plugin-annotation";
+
+// src/components/charts/pies/pies.utils.ts
+import { mergician as mergician6 } from "mergician";
+var getPieChartData = (data) => {
+  const chartColors = getChartColors();
+  const mergedData = {
+    ...data,
+    datasets: data.datasets?.map((dataset) => {
+      const colors = dataset.data.map((_value, index) => chartColors[index % chartColors.length]);
+      const defaultDataset = {
+        backgroundColor: colors,
+        borderColor: colors
+      };
+      const merged = mergician6(defaultDataset, dataset);
+      return merged;
+    }) || []
+  };
+  return mergedData;
+};
+var getPieChartOptions = (options) => {
+  const pieChartOptions = {
+    plugins: {
+      legend: { display: options.showLegend },
+      datalabels: {
+        display: options.showValueLabels ? "auto" : false
+      },
+      tooltip: {
+        enabled: options.showTooltips
+      }
+    }
+  };
+  return mergician6(getChartjsOptions(), pieChartOptions);
+};
+var getDonutChartOptions = (options) => {
+  const donutChartOptions = {
+    cutout: "60%",
+    plugins: {
+      annotation: {
+        annotations: {
+          innerlabel: {
+            content: [options.label ?? "", options.subLabel ?? ""],
+            type: "doughnutLabel",
+            font: [
+              {
+                size: getStyleNumber("--em-piechart-donut-number-line-height", "2.375rem"),
+                weight: getStyleNumber("--em-piechart-donut-number-font-weight", "700"),
+                height: getStyleNumber("--em-piechart-donut-number-line-height", "2.375rem"),
+                family: getStyle("--em-piechart-font-family", "sans-serif")
+              },
+              {
+                size: getStyleNumber("--em-piechart-donut-label-font-size", "1rem"),
+                weight: getStyleNumber("--em-piechart-donut-label-font-weight", "500"),
+                height: getStyleNumber("--em-piechart-donut-label-line-height", "1rem"),
+                family: getStyle("--em-piechart-font-family", "sans-serif")
+              }
+            ],
+            color: [getStyle("--em-piechart-donut-color", "#212129")]
+          }
+          // According to the last comment, a fix should be coming in the next release:
+          // https://github.com/chartjs/chartjs-plugin-annotation/commit/1e95744fb98e6fe9426f8b6a7bd17b1fcdee2f42
+        }
+      }
+    }
+  };
+  return mergician6(getPieChartOptions(options), donutChartOptions);
+};
+
+// src/components/charts/pies/DonutChart/DonutChart.tsx
+import { mergician as mergician7 } from "mergician";
+import styles24 from "./charts.module-YNKCWRLU.module.css";
+import { jsx as jsx27 } from "react/jsx-runtime";
+ChartJS3.register(ArcElement, Tooltip3, Legend3, ChartDataLabels3, AnnotationPlugin2);
+var DonutChart = ({
+  label,
+  subLabel,
+  options = {},
+  data,
+  onSegmentClick,
+  showLegend = true,
+  showTooltips = true,
+  showValueLabels = true
+}) => {
+  const chartRef = useRef7(null);
+  const donutLabelOptions = mergician7(
+    getDonutChartOptions({ showLegend, showTooltips, showValueLabels, label, subLabel }),
+    options
+  );
+  const handleSegmentClick = (event) => {
+    const indexClicked = getSegmentIndexClicked(event, chartRef);
+    onSegmentClick?.(indexClicked);
+  };
+  return /* @__PURE__ */ jsx27("div", { className: styles24.chartContainer, children: /* @__PURE__ */ jsx27(
+    Pie,
+    {
+      ref: chartRef,
+      data: getPieChartData(data),
+      options: donutLabelOptions,
+      onClick: handleSegmentClick
+    }
+  ) });
+};
+
+// src/components/charts/pies/PieChart/PieChart.tsx
+import { useRef as useRef8 } from "react";
+import { Pie as Pie2 } from "react-chartjs-2";
+import { ArcElement as ArcElement2, Chart as ChartJS4, Legend as Legend4, Tooltip as Tooltip4 } from "chart.js";
+import ChartDataLabels4 from "chartjs-plugin-datalabels";
+import { mergician as mergician8 } from "mergician";
+import styles25 from "./charts.module-YNKCWRLU.module.css";
+import { jsx as jsx28 } from "react/jsx-runtime";
+ChartJS4.register(ArcElement2, Tooltip4, Legend4, ChartDataLabels4);
+var PieChart = ({
+  data,
+  options = {},
+  onSegmentClick,
+  showLegend = true,
+  showTooltips = true,
+  showValueLabels = true
+}) => {
+  const chartRef = useRef8(null);
+  const pieOptions = mergician8(
+    getPieChartOptions({
+      showLegend,
+      showTooltips,
+      showValueLabels
+    }),
+    options
+  );
+  const handleSegmentClick = (event) => {
+    const indexClicked = getSegmentIndexClicked(event, chartRef);
+    onSegmentClick?.(indexClicked);
+  };
+  return /* @__PURE__ */ jsx28("div", { className: styles25.chartContainer, children: /* @__PURE__ */ jsx28(
+    Pie2,
+    {
+      ref: chartRef,
+      data: getPieChartData(data),
+      options: pieOptions,
+      onClick: handleSegmentClick
+    }
+  ) });
+};
+
+// src/components/charts/tables/Table/TablePaginated.tsx
+import * as React2 from "react";
+import styles29 from "./tables.module-WFOONEPQ.module.css";
+import clsx19 from "clsx";
+
+// src/components/charts/tables/Table/components/TablePagination/TablePagination.tsx
+import {
+  IconChevronLeft,
+  IconChevronRight,
+  IconChevronsLeft,
+  IconChevronsRight
+} from "@tabler/icons-react";
+import styles26 from "./TablePagination.module-VGIQ7VN7.module.css";
+import { useEffect as useEffect6 } from "react";
+import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+var getTableTotalPages = (total, pageSize) => {
+  return total ? Math.ceil(total / pageSize) : void 0;
+};
+var TablePagination = ({
+  page,
+  pageSize,
+  paginationLabel,
+  total,
+  onPageChange
+}) => {
+  const totalPages = getTableTotalPages(total, pageSize);
+  const disabledPrev = page <= 0;
+  const disabledNext = !totalPages || page >= totalPages - 1;
+  useEffect6(() => {
+    if (totalPages && page >= totalPages) {
+      onPageChange(0);
+    }
+  }, [totalPages, page]);
+  return /* @__PURE__ */ jsx29("div", { className: styles26.tablePagination, "aria-label": "Table pagination controls", children: /* @__PURE__ */ jsxs16("div", { className: styles26.tablePaginationCentral, children: [
+    /* @__PURE__ */ jsxs16("div", { className: styles26.tablePaginationCentralButtons, children: [
+      /* @__PURE__ */ jsx29(
+        ActionIcon,
+        {
+          icon: IconChevronsLeft,
+          onClick: () => {
+            onPageChange(0);
+          },
+          disabled: disabledPrev,
+          "aria-label": "First page"
+        }
+      ),
+      /* @__PURE__ */ jsx29(
+        ActionIcon,
+        {
+          icon: IconChevronLeft,
+          onClick: () => {
+            onPageChange(page - 1);
+          },
+          disabled: disabledPrev,
+          "aria-label": "Previous page"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx29("span", { children: paginationLabel ?? `Page ${page + 1} of ${totalPages ?? "?"}` }),
+    /* @__PURE__ */ jsxs16("div", { className: styles26.tablePaginationCentralButtons, children: [
+      /* @__PURE__ */ jsx29(
+        ActionIcon,
+        {
+          icon: IconChevronRight,
+          onClick: () => {
+            onPageChange(page + 1);
+          },
+          disabled: disabledNext,
+          "aria-label": "Next page"
+        }
+      ),
+      /* @__PURE__ */ jsx29(
+        ActionIcon,
+        {
+          icon: IconChevronsRight,
+          onClick: () => totalPages && onPageChange(totalPages - 1),
+          disabled: disabledNext,
+          "aria-label": "Last page"
+        }
+      )
+    ] })
+  ] }) });
+};
+
+// src/components/charts/tables/Table/components/TableHeader/TableHeader.tsx
+import { IconCaretDownFilled as IconCaretDownFilled2, IconCaretUpDownFilled, IconCaretUpFilled } from "@tabler/icons-react";
+import styles27 from "./TableHeader.module-XXXLQWHC.module.css";
+
+// src/components/charts/tables/Table/table.types.ts
+var TableSortDirection = {
+  ASC: "asc",
+  DESC: "desc"
+};
+var TableHeaderAlign = {
+  LEFT: "left",
+  CENTER: "center",
+  RIGHT: "right"
+};
+
+// src/components/charts/tables/Table/components/TableHeader/TableHeader.tsx
+import tableStyles from "./tables.module-WFOONEPQ.module.css";
+import clsx17 from "clsx";
+import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
+var getHeaderAriaSort = (sort, header) => {
+  return sort?.id === header.id ? sort.direction === "asc" ? "ascending" : "descending" : "none";
+};
+var getHeaderAriaLabel = (sort, header) => {
+  return sort?.id === header.id ? sort.direction === "asc" ? `Sort by ${header.title}, currently ascending. Activate to sort descending.` : `Sort by ${header.title}, currently descending. Activate to sort ascending.` : `Sort by ${header.title}. Activate to sort ascending.`;
+};
+var TableHeader = ({
+  headers,
+  sort,
+  showIndex,
+  onSortChange
+}) => {
+  const getSortIcon = (header) => {
+    if (!sort) return /* @__PURE__ */ jsx30(IconCaretUpDownFilled, {});
+    if (sort.id === header.id) {
+      if (sort.direction === TableSortDirection.ASC) {
+        return /* @__PURE__ */ jsx30(IconCaretUpFilled, {});
+      } else if (sort.direction === TableSortDirection.DESC) {
+        return /* @__PURE__ */ jsx30(IconCaretDownFilled2, {});
+      }
+    }
+    return /* @__PURE__ */ jsx30(IconCaretUpDownFilled, {});
+  };
+  const handleSort = (id) => {
+    if (!onSortChange) return;
+    if (!sort) {
+      return onSortChange({ id, direction: TableSortDirection.ASC });
+    }
+    if (sort) {
+      if (sort.id !== id) {
+        return onSortChange({ id, direction: TableSortDirection.ASC });
+      }
+      if (sort.direction === TableSortDirection.ASC) {
+        return onSortChange({ id, direction: TableSortDirection.DESC });
+      } else if (sort.direction === TableSortDirection.DESC) {
+        return onSortChange(void 0);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx30("thead", { className: styles27.tableHeader, children: /* @__PURE__ */ jsxs17("tr", { children: [
+    showIndex && /* @__PURE__ */ jsx30("th", { className: clsx17(tableStyles.mutedCell, tableStyles.stickyFirstColumn), children: "#" }),
+    headers.map((header) => /* @__PURE__ */ jsx30(
+      "th",
+      {
+        className: styles27.tableHeaderCell,
+        style: { minWidth: header.minWidth },
+        scope: "col",
+        "aria-sort": getHeaderAriaSort(sort, header),
+        children: /* @__PURE__ */ jsxs17(
+          "button",
+          {
+            onClick: () => handleSort(header.id),
+            "aria-label": getHeaderAriaLabel(sort, header),
+            children: [
+              header.title,
+              getSortIcon(header)
+            ]
+          }
+        )
+      },
+      header.id
+    ))
+  ] }) });
+};
+
+// src/components/charts/tables/Table/components/TableBody/TableBody.tsx
+import styles28 from "./TableBody.module-ARNVVKDL.module.css";
+import clsx18 from "clsx";
+import { IconCopy, IconCopyCheckFilled } from "@tabler/icons-react";
+import { useState as useState4 } from "react";
+import tableStyles2 from "./tables.module-WFOONEPQ.module.css";
+import { jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
+var TableBody = ({
+  headers,
+  rows,
+  pageSize,
+  page,
+  showIndex,
+  onRowIndexClick
+}) => {
+  return /* @__PURE__ */ jsx31("tbody", { className: styles28.tableBody, children: rows.map((row, rowIndex) => /* @__PURE__ */ jsxs18(
+    "tr",
+    {
+      onClick: () => onRowIndexClick?.(rowIndex),
+      className: clsx18(rowIndex === rows.length - 1 && tableStyles2.tableLastRow),
+      children: [
+        showIndex && /* @__PURE__ */ jsx31("td", { className: clsx18(tableStyles2.mutedCell, tableStyles2.stickyFirstColumn), children: pageSize * page + rowIndex + 1 }),
+        headers.map((header, cellIndex) => /* @__PURE__ */ jsx31(
+          TableBodyCell,
+          {
+            header,
+            row,
+            rowIndex,
+            cellIndex
+          },
+          cellIndex
+        ))
+      ]
+    },
+    rowIndex
+  )) });
+};
+var TableBodyCell = ({ header, row, rowIndex, cellIndex }) => {
+  const [isPressedCopy, setIsPressedCopy] = useState4(false);
+  const value = header.accessor !== void 0 ? header.accessor(row) : header.id !== void 0 ? (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    row[header.id]
+  ) : void 0;
+  if (header.cell) {
+    return header.cell({ value, className: styles28.tableBodyCell });
+  }
+  const handleCopy = () => {
+    setIsPressedCopy(true);
+    if (value !== void 0) {
+      navigator.clipboard.writeText(String(value));
+    }
+  };
+  return /* @__PURE__ */ jsxs18(
+    "td",
+    {
+      title: value,
+      style: { textAlign: header.align },
+      onMouseLeave: () => setIsPressedCopy(false),
+      children: [
+        /* @__PURE__ */ jsx31(
+          ActionIcon,
+          {
+            title: `Copy: ${String(value)}`,
+            onMouseDown: handleCopy,
+            icon: isPressedCopy ? IconCopyCheckFilled : IconCopy,
+            className: clsx18(
+              styles28.copyButton,
+              header.align === TableHeaderAlign.RIGHT && styles28.leftAlign
+            ),
+            onClick: handleCopy
+          }
+        ),
+        value
+      ]
+    },
+    `${rowIndex}-${cellIndex}`
+  );
+};
+
+// src/components/charts/tables/Table/TablePaginated.tsx
+import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
+var TablePaginated = React2.forwardRef(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (props, ref) => {
+    const {
+      headers,
+      rows,
+      className,
+      total,
+      page,
+      pageSize,
+      paginationLabel,
+      sort,
+      showIndex = false,
+      onRowIndexClick,
+      onPageChange,
+      onSortChange
+    } = props;
+    return /* @__PURE__ */ jsxs19("div", { ref, className: clsx19(styles29.tableContainer, className), children: [
+      /* @__PURE__ */ jsx32("div", { className: styles29.tableContainerScroll, children: /* @__PURE__ */ jsxs19("table", { className: styles29.table, children: [
+        /* @__PURE__ */ jsx32(
+          TableHeader,
+          {
+            showIndex,
+            headers,
+            sort,
+            onSortChange
+          }
+        ),
+        /* @__PURE__ */ jsx32(
+          TableBody,
+          {
+            onRowIndexClick,
+            showIndex,
+            headers,
+            rows,
+            page,
+            pageSize
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx32(
+        TablePagination,
+        {
+          page,
+          pageSize,
+          paginationLabel,
+          total,
+          onPageChange
+        }
+      )
+    ] });
+  }
+);
+TablePaginated.displayName = "TablePaginated";
+
+// src/components/charts/tables/PivotTable/PivotTable.tsx
+import { useEffect as useEffect7, useMemo as useMemo3, useState as useState5 } from "react";
+import tableStyles3 from "./tables.module-WFOONEPQ.module.css";
+import clsx20 from "clsx";
+
+// src/components/charts/tables/tables.utils.ts
+var getTableCellWidthStyle = (width) => {
+  return {
+    minWidth: width ? `${width}px` : "unset",
+    maxWidth: width ? `${width}px` : "unset",
+    width: width ? `${width}px` : "unset"
+  };
+};
+
+// src/components/charts/tables/PivotTable/PivotTable.tsx
+import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
+var isNumber = (v) => typeof v === "number" && !Number.isNaN(v);
+var getPercentageDisplay = (percentage, percentageDecimalPlaces) => {
+  return `${percentage.toFixed(percentageDecimalPlaces)}%`;
+};
+var PivotTable = ({
+  columnWidth,
+  firstColumnWidth,
+  data,
+  measures,
+  rowDimension,
+  columnDimension,
+  progressive = true,
+  batchSize = 100,
+  batchDelayMs = 0,
+  rowTotalsFor = [],
+  columnTotalsFor = [],
+  totalLabel = "Total",
+  className
+}) => {
+  const rowValues = useMemo3(() => {
+    const s = /* @__PURE__ */ new Set();
+    for (const d of data) {
+      const rowValue = d[rowDimension.key];
+      if (rowValue) s.add(rowValue);
+    }
+    return Array.from(s);
+  }, [data, rowDimension.key]);
+  const columnValues = useMemo3(() => {
+    const s = /* @__PURE__ */ new Set();
+    for (const d of data) {
+      const columnValue = d[columnDimension.key];
+      if (columnValue) s.add(columnValue);
+    }
+    return Array.from(s);
+  }, [data, columnDimension.key]);
+  const cellMap = useMemo3(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const d of data) {
+      const r = String(d[rowDimension.key]);
+      const c = String(d[columnDimension.key]);
+      if (!map.has(r)) map.set(r, /* @__PURE__ */ new Map());
+      map.get(r).set(c, d);
+    }
+    return map;
+  }, [data, rowDimension.key, columnDimension.key]);
+  const rowTotalsSet = useMemo3(() => new Set(rowTotalsFor), [rowTotalsFor]);
+  const columnTotalsSet = useMemo3(() => new Set(columnTotalsFor), [columnTotalsFor]);
+  const hasRowTotals = rowTotalsSet.size > 0;
+  const hasColumnTotals = columnTotalsSet.size > 0;
+  const measureIndexByKey = useMemo3(() => {
+    const map = /* @__PURE__ */ new Map();
+    measures.forEach((m, i) => map.set(String(m.key), i));
+    return map;
+  }, [measures]);
+  const { colTotals, rowTotals, grandTotals } = useMemo3(() => {
+    const cTotals = /* @__PURE__ */ new Map();
+    const rTotals = /* @__PURE__ */ new Map();
+    const gTotals = measures.map(() => 0);
+    for (const d of data) {
+      const r = String(d[rowDimension.key]);
+      const c = String(d[columnDimension.key]);
+      const cArr = cTotals.get(c) ?? measures.map(() => 0);
+      const rArr = rTotals.get(r) ?? measures.map(() => 0);
+      measures.forEach((m, i) => {
+        const raw = d?.[m.key];
+        const v = Number(raw);
+        if (!Number.isNaN(v)) {
+          cArr[i] += v;
+          rArr[i] += v;
+          gTotals[i] += v;
+        }
+      });
+      cTotals.set(c, cArr);
+      rTotals.set(r, rArr);
+    }
+    for (const c of columnValues) {
+      if (!cTotals.has(String(c)))
+        cTotals.set(
+          String(c),
+          measures.map(() => 0)
+        );
+    }
+    for (const r of rowValues) {
+      if (!rTotals.has(String(r)))
+        rTotals.set(
+          String(r),
+          measures.map(() => 0)
+        );
+    }
+    return { colTotals: cTotals, rowTotals: rTotals, grandTotals: gTotals };
+  }, [data, measures, rowDimension.key, columnDimension.key, columnValues, rowValues]);
+  const [visibleCount, setVisibleCount] = useState5(
+    () => progressive ? Math.min(batchSize, rowValues.length) : rowValues.length
+  );
+  useEffect7(() => {
+    if (!progressive) {
+      setVisibleCount(rowValues.length);
+      return;
+    }
+    let cancelled = false;
+    let t = null;
+    setVisibleCount(0);
+    const tick = () => {
+      setVisibleCount((prev) => {
+        const next = Math.min(prev + batchSize, rowValues.length);
+        if (next < rowValues.length && !cancelled) {
+          t = window.setTimeout(tick, batchDelayMs);
+        }
+        return next;
+      });
+    };
+    t = window.setTimeout(tick, batchDelayMs);
+    return () => {
+      cancelled = true;
+      if (t !== null) window.clearTimeout(t);
+    };
+  }, [progressive, batchSize, batchDelayMs, rowValues.length, data]);
+  const visibleRows = progressive ? rowValues.slice(0, visibleCount) : rowValues;
+  return /* @__PURE__ */ jsx33("div", { className: clsx20(tableStyles3.tableFullContainer, className), children: /* @__PURE__ */ jsx33(
+    "div",
+    {
+      className: clsx20(
+        tableStyles3.tableAdjustedContainer,
+        (!columnWidth || !firstColumnWidth) && tableStyles3.fullWidth
+      ),
+      children: /* @__PURE__ */ jsxs20(
+        "table",
+        {
+          className: tableStyles3.table,
+          "aria-label": `${rowDimension.label} by ${columnDimension.label}`,
+          children: [
+            /* @__PURE__ */ jsxs20("thead", { children: [
+              /* @__PURE__ */ jsxs20("tr", { children: [
+                /* @__PURE__ */ jsx33(
+                  "th",
+                  {
+                    scope: "col",
+                    rowSpan: 1,
+                    title: columnDimension.label,
+                    className: tableStyles3.stickyFirstColumn,
+                    children: columnDimension.label
+                  }
+                ),
+                columnValues.map((columnValue) => {
+                  const columnValueDisplay = columnDimension.formatValue ? columnDimension.formatValue(columnValue) : columnValue;
+                  return /* @__PURE__ */ jsx33(
+                    "th",
+                    {
+                      scope: "colgroup",
+                      colSpan: measures.length,
+                      title: columnValueDisplay,
+                      children: columnValueDisplay
+                    },
+                    `col-${columnValue}`
+                  );
+                }),
+                hasRowTotals && /* @__PURE__ */ jsx33(
+                  "th",
+                  {
+                    scope: "colgroup",
+                    colSpan: Array.from(rowTotalsSet).length,
+                    className: tableStyles3.boltCell,
+                    title: totalLabel,
+                    children: totalLabel
+                  },
+                  "col-total-group"
+                )
+              ] }),
+              /* @__PURE__ */ jsxs20("tr", { children: [
+                /* @__PURE__ */ jsx33(
+                  "th",
+                  {
+                    scope: "col",
+                    rowSpan: 1,
+                    title: rowDimension.label,
+                    className: tableStyles3.stickyFirstColumn,
+                    style: getTableCellWidthStyle(firstColumnWidth),
+                    children: rowDimension.label
+                  }
+                ),
+                columnValues.flatMap(
+                  (col) => measures.map((measure, idx) => /* @__PURE__ */ jsx33(
+                    "th",
+                    {
+                      scope: "col",
+                      title: measure.label,
+                      style: getTableCellWidthStyle(columnWidth),
+                      children: measure.label
+                    },
+                    `sub-${String(col)}-${measure.key}-${idx}`
+                  ))
+                ),
+                hasRowTotals && measures.filter((measure) => rowTotalsSet.has(measure.key)).map((measure, idx) => /* @__PURE__ */ jsx33(
+                  "th",
+                  {
+                    scope: "col",
+                    className: tableStyles3.boltCell,
+                    title: measure.label,
+                    style: getTableCellWidthStyle(columnWidth),
+                    children: measure.label
+                  },
+                  `sub-total-${measure.key}-${idx}`
+                ))
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs20("tbody", { children: [
+              visibleRows.map((row) => {
+                const rowDimensionValue = rowDimension.formatValue ? rowDimension.formatValue(row) : row;
+                return /* @__PURE__ */ jsxs20("tr", { children: [
+                  /* @__PURE__ */ jsx33(
+                    "th",
+                    {
+                      scope: "row",
+                      title: rowDimensionValue,
+                      className: tableStyles3.stickyFirstColumn,
+                      children: rowDimensionValue
+                    }
+                  ),
+                  columnValues.flatMap(
+                    (columnValue) => measures.map((measure, idx) => {
+                      const object = cellMap.get(row)?.get(columnValue) ?? {};
+                      const value = object?.[measure.key];
+                      const key = `cell-${row}-${columnValue}-${measure.key}-${idx}`;
+                      const getDisplayValue = () => {
+                        if (measure.showAsPercentage) {
+                          const mi = measureIndexByKey.get(String(measure.key)) ?? -1;
+                          const totalsForCol = colTotals.get(String(columnValue)) ?? measures.map(() => 0);
+                          const colTotal = mi >= 0 ? totalsForCol[mi] ?? 0 : 0;
+                          const shouldShowPct = measure.showAsPercentage && isNumber(Number(value)) && isNumber(colTotal) && colTotal > 0;
+                          if (shouldShowPct) {
+                            const percentage = value / colTotal * 100;
+                            return `${percentage.toFixed(measure.percentageDecimalPlaces ?? 0)}%`;
+                          }
+                        }
+                        return measure.accessor ? measure.accessor(object) : value;
+                      };
+                      const columnValueDisplay = getDisplayValue();
+                      return /* @__PURE__ */ jsx33("td", { title: columnValueDisplay, children: columnValueDisplay }, key);
+                    })
+                  ),
+                  hasRowTotals && measures.filter((measure) => rowTotalsSet.has(measure.key)).map((measure, idx) => {
+                    const totalsForRow = rowTotals.get(row) ?? measures.map(() => 0);
+                    const measureIndex = measureIndexByKey.get(measure.key) ?? -1;
+                    const key = `row-total-${String(row)}-${measure.key}-${idx}`;
+                    const value = measureIndex >= 0 ? totalsForRow[measureIndex] ?? 0 : 0;
+                    let displayValue = value;
+                    if (measure.showAsPercentage) {
+                      displayValue = getPercentageDisplay(
+                        value / (grandTotals[measureIndex] || 1) * 100,
+                        measure.percentageDecimalPlaces ?? 0
+                      );
+                    } else if (measure.accessor) {
+                      displayValue = measure.accessor({ [measure.key]: value });
+                    }
+                    return /* @__PURE__ */ jsx33("td", { className: tableStyles3.boltCell, title: displayValue, children: displayValue }, key);
+                  })
+                ] }, `row-${row}`);
+              }),
+              hasColumnTotals && /* @__PURE__ */ jsxs20("tr", { className: tableStyles3.stickyLastRow, children: [
+                /* @__PURE__ */ jsx33(
+                  "th",
+                  {
+                    scope: "row",
+                    className: clsx20(tableStyles3.stickyFirstColumn, tableStyles3.boltCell),
+                    title: totalLabel,
+                    children: totalLabel
+                  }
+                ),
+                columnValues.flatMap(
+                  (columnValue) => measures.map((measure, idx) => {
+                    const show = columnTotalsSet.has(String(measure.key));
+                    const totalsForCol = colTotals.get(String(columnValue)) ?? measures.map(() => 0);
+                    const mi = measures.findIndex((mm) => String(mm.key) === String(measure.key));
+                    const key = `col-total-${String(columnValue)}-${measure.key}-${idx}`;
+                    const value = totalsForCol[mi] ?? 0;
+                    let displayValue = value;
+                    if (measure.showAsPercentage) {
+                      displayValue = getPercentageDisplay(
+                        100,
+                        measure.percentageDecimalPlaces ?? 0
+                      );
+                    } else if (measure.accessor) {
+                      displayValue = measure.accessor({ [measure.key]: value });
+                    }
+                    const columnValueDisplay = show ? displayValue : "";
+                    return /* @__PURE__ */ jsx33("td", { className: tableStyles3.boltCell, title: columnValueDisplay, children: columnValueDisplay }, key);
+                  })
+                ),
+                hasRowTotals && measures.filter((measure) => rowTotalsSet.has(measure.key)).map((measure, idx) => {
+                  const measureIndex = measures.findIndex((m) => String(m.key) === measure.key);
+                  const key = `grand-total-${measure.key}-${idx}`;
+                  const value = grandTotals[measureIndex] ?? 0;
+                  let displayValue = value;
+                  if (measure.showAsPercentage) {
+                    displayValue = getPercentageDisplay(
+                      100,
+                      measure.percentageDecimalPlaces ?? 0
+                    );
+                  } else if (measure.accessor) {
+                    displayValue = measure.accessor({ [measure.key]: value });
+                  }
+                  return /* @__PURE__ */ jsx33("td", { className: tableStyles3.boltCell, title: displayValue, children: displayValue }, key);
+                })
+              ] }, "totals-row")
+            ] })
+          ]
+        }
+      )
+    }
+  ) });
+};
+
+// src/components/charts/tables/HeatMap/HeatMap.tsx
+import { useMemo as useMemo4, useCallback } from "react";
+import tableStyles4 from "./tables.module-WFOONEPQ.module.css";
+import clsx21 from "clsx";
+
+// src/components/charts/tables/HeatMap/HeatMap.utils.ts
+var clamp01 = (x) => x < 0 ? 0 : x > 1 ? 1 : x;
+var easeOutQuad = (x) => 1 - (1 - x) * (1 - x);
+var lerp = (a, b, t) => a + (b - a) * t;
+var OUTSIDE_DARKEN_MAX = 0.35;
+var LERP_DARKEST_COLOR = "#000000";
+var LERP_LIGHTEST_COLOR = "#FFFFFF";
+var idOf = (v) => String(v ?? "");
+var CSS_RGB_REGEX = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i;
+var COLOR_CACHE = /* @__PURE__ */ new Map();
+var normalizeHex = (hex) => {
+  if (!hex || hex[0] !== "#") return hex;
+  const v = hex.slice(1).toLowerCase();
+  if (v.length === 3) return `#${v[0]}${v[0]}${v[1]}${v[1]}${v[2]}${v[2]}`;
+  if (v.length === 6) return `#${v}`;
+  return hex.toLowerCase();
+};
+var resolveCssColorToHex = (input) => {
+  if (!input) return input;
+  const cached = COLOR_CACHE.get(input);
+  if (cached) return cached;
+  if (input.startsWith("#")) {
+    const hex2 = normalizeHex(input);
+    COLOR_CACHE.set(input, hex2);
+    return hex2;
+  }
+  if (typeof document === "undefined") {
+    return input;
+  }
+  const el = document.createElement("span");
+  el.style.color = input;
+  document.body.appendChild(el);
+  const computed = getComputedStyle(el).color || "";
+  el.remove();
+  const m = computed.match(CSS_RGB_REGEX);
+  if (!m) return input;
+  const [, r = "0", g = "0", b = "0"] = m;
+  const toHex = (n) => Number(n).toString(16).padStart(2, "0");
+  const hex = `#${toHex(r)}${toHex(g)}${toHex(b)}`.toLowerCase();
+  COLOR_CACHE.set(input, hex);
+  return hex;
+};
+var hexToRgb = (color) => {
+  const hex = normalizeHex(resolveCssColorToHex(color)).slice(1);
+  if (hex.length !== 6) return { r: 0, g: 0, b: 0 };
+  const i = parseInt(hex, 16);
+  return { r: i >> 16 & 255, g: i >> 8 & 255, b: i & 255 };
+};
+var rgbToHex = (r, g, b) => {
+  const to = (x) => Math.round(x).toString(16).padStart(2, "0");
+  return `#${to(r)}${to(g)}${to(b)}`;
+};
+var lerpColor = (a, b, t) => {
+  const A = hexToRgb(a);
+  const B = hexToRgb(b);
+  return rgbToHex(lerp(A.r, B.r, t), lerp(A.g, B.g, t), lerp(A.b, B.b, t));
+};
+var getBrightness = (color) => {
+  const { r, g, b } = hexToRgb(color);
+  return (r * 299 + g * 587 + b * 114) / 1e3;
+};
+var getCellColor = (backgroundColor) => {
+  return getBrightness(backgroundColor) < 150 ? "#FFFFFF" : "#212129";
+};
+var makeDiverging = (minC, midC, maxC, midpoint = 0.5) => {
+  const m = clamp01(midpoint);
+  return (t) => {
+    const x = clamp01(t);
+    return x <= m ? lerpColor(minC, midC, m === 0 ? 1 : x / m) : lerpColor(midC, maxC, (x - m) / (1 - m));
+  };
+};
+var parsePercentString = (s) => {
+  const t = s.trim();
+  if (!t.endsWith("%")) return null;
+  const n = Number.parseFloat(t.slice(0, -1));
+  return Number.isFinite(n) ? clamp01(n / 100) : null;
+};
+var thresholdToRaw = (t, rawMin, rawMax, fallback) => {
+  if (t == null) return fallback;
+  if (typeof t === "number" && Number.isFinite(t)) return t;
+  const asPct = typeof t === "string" ? parsePercentString(t) : null;
+  if (asPct != null) return rawMin + asPct * (rawMax - rawMin);
+  const maybe = Number(t);
+  return Number.isFinite(maybe) ? maybe : fallback;
+};
+var toFiniteOrSelf = (v) => {
+  if (v == null) return v;
+  const n = Number(v);
+  return Number.isFinite(n) ? n : v;
+};
+var getCellValue = (value, displayNullAs) => {
+  const fallback = displayNullAs && Number.isFinite(Number(displayNullAs)) ? Number(displayNullAs) : displayNullAs;
+  return toFiniteOrSelf(value ?? fallback);
+};
+var getCellBackground = (value, colorForValue) => {
+  if (typeof value !== "number" || !Number.isFinite(value))
+    return getStyle("--em-tablechart-cell-background", "#fff");
+  return colorForValue(value);
+};
+var getCellDisplayValue = (value, showValues, measure) => {
+  if (!showValues) return null;
+  if (typeof value === "string" || value == null || Number.isNaN(value)) return value;
+  return measure?.format ? measure.format(Number(value)) : value;
+};
+var getMidPoint = (domainMin, domainMax) => {
+  const range = domainMax - domainMin;
+  if (range === 0) return 0.5;
+  return ((domainMin + domainMax) / 2 - domainMin) / range;
+};
+var createColorForValue = ({
+  domainMin,
+  domainMax,
+  rawMin,
+  rawMax,
+  minColor,
+  midColor,
+  maxColor
+}) => {
+  const midPoint = getMidPoint(domainMin, domainMax);
+  const scale = makeDiverging(minColor, midColor, maxColor, midPoint);
+  const leftTailLen = Math.max(1e-6, domainMin - rawMin);
+  const rightTailLen = Math.max(1e-6, rawMax - domainMax);
+  const domRange = domainMax - domainMin;
+  if (domRange === 0) {
+    const mid = scale(0.5);
+    return (_v) => mid;
+  }
+  return (v) => {
+    if (!Number.isFinite(v)) return scale(0.5);
+    const t = (v - domainMin) / domRange;
+    if (t <= 0) {
+      const dist = Math.max(0, domainMin - v) / leftTailLen;
+      const strength = easeOutQuad(clamp01(dist)) * OUTSIDE_DARKEN_MAX;
+      return strength > 0 ? lerpColor(minColor, LERP_LIGHTEST_COLOR, strength) : minColor;
+    }
+    if (t >= 1) {
+      const dist = Math.max(0, v - domainMax) / rightTailLen;
+      const strength = easeOutQuad(clamp01(dist)) * OUTSIDE_DARKEN_MAX;
+      return strength > 0 ? lerpColor(maxColor, LERP_DARKEST_COLOR, strength) : maxColor;
+    }
+    return scale(t);
+  };
+};
+
+// src/components/charts/tables/HeatMap/HeatMap.tsx
+import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
+var HeatMap = ({
+  data,
+  showValues = false,
+  className,
+  columnDimension,
+  rowDimension,
+  measure,
+  minThreshold,
+  maxThreshold,
+  minColor,
+  midColor = getStyle("--em-tablechart-heatmap-color", "#FF5400"),
+  maxColor,
+  columnWidth,
+  firstColumnWidth,
+  displayNullAs
+}) => {
+  const { rawMin, rawMax } = useMemo4(() => {
+    let min = Infinity;
+    let max = -Infinity;
+    for (const d of data) {
+      const value = getCellValue(d[measure.key], displayNullAs);
+      if (value != null && typeof value === "number" && Number.isFinite(value)) {
+        if (value < min) min = value;
+        if (value > max) max = value;
+      }
+    }
+    if (!Number.isFinite(min) || !Number.isFinite(max)) return { rawMin: 0, rawMax: 0 };
+    return { rawMin: min, rawMax: max };
+  }, [data, measure.key, displayNullAs]);
+  const { domainMin, domainMax } = useMemo4(() => {
+    const domMin = thresholdToRaw(minThreshold, rawMin, rawMax, rawMin);
+    const domMax = thresholdToRaw(maxThreshold, rawMin, rawMax, rawMax);
+    return domMin <= domMax ? { domainMin: domMin, domainMax: domMax } : { domainMin: domMax, domainMax: domMin };
+  }, [minThreshold, maxThreshold, rawMin, rawMax]);
+  const columnValues = useMemo4(
+    () => Array.from(
+      new Set(
+        data.map((d) => d[columnDimension.key]).filter((v) => v != null).map(idOf)
+      )
+    ),
+    [data, columnDimension.key]
+  );
+  const rowValues = useMemo4(
+    () => Array.from(
+      new Set(
+        data.map((d) => d[rowDimension.key]).filter((v) => v != null).map(idOf)
+      )
+    ),
+    [data, rowDimension.key]
+  );
+  const cellMap = useMemo4(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const d of data) {
+      const r = idOf(d[rowDimension.key]);
+      const c = idOf(d[columnDimension.key]);
+      if (!map.has(r)) map.set(r, /* @__PURE__ */ new Map());
+      map.get(r).set(c, d);
+    }
+    return map;
+  }, [data, rowDimension.key, columnDimension.key]);
+  const colorForValue = useCallback(
+    (v) => {
+      return createColorForValue({
+        domainMin,
+        domainMax,
+        rawMin,
+        rawMax,
+        minColor,
+        midColor,
+        maxColor
+      })(v);
+    },
+    [domainMin, domainMax, rawMin, rawMax, minColor, midColor, maxColor]
+  );
+  return /* @__PURE__ */ jsx34("div", { className: clsx21(tableStyles4.tableFullContainer, className), children: /* @__PURE__ */ jsx34(
+    "div",
+    {
+      className: clsx21(
+        tableStyles4.tableAdjustedContainer,
+        (!columnWidth || !firstColumnWidth) && tableStyles4.fullWidth
+      ),
+      children: /* @__PURE__ */ jsxs21("table", { className: tableStyles4.table, "aria-label": "Heat map", children: [
+        /* @__PURE__ */ jsx34("thead", { children: /* @__PURE__ */ jsxs21("tr", { children: [
+          /* @__PURE__ */ jsx34(
+            "th",
+            {
+              className: tableStyles4.stickyFirstColumn,
+              style: getTableCellWidthStyle(firstColumnWidth),
+              children: measure.label
+            }
+          ),
+          columnValues.map((cv, index) => /* @__PURE__ */ jsx34("th", { style: getTableCellWidthStyle(columnWidth), children: columnDimension.format ? columnDimension.format(cv) : cv }, `col-${cv}-${index}`))
+        ] }) }),
+        /* @__PURE__ */ jsx34("tbody", { children: rowValues.map((rv) => /* @__PURE__ */ jsxs21("tr", { children: [
+          /* @__PURE__ */ jsx34(
+            "th",
+            {
+              scope: "row",
+              className: tableStyles4.stickyFirstColumn,
+              style: getTableCellWidthStyle(firstColumnWidth),
+              children: rowDimension.format ? rowDimension.format(rv) : rv
+            }
+          ),
+          columnValues.map((cv) => {
+            const obj = cellMap.get(rv)?.get(cv);
+            const value = getCellValue(obj?.[measure.key], displayNullAs);
+            const background = getCellBackground(value, colorForValue);
+            const color = getCellColor(background);
+            return /* @__PURE__ */ jsx34(
+              "td",
+              {
+                style: {
+                  background,
+                  color,
+                  textAlign: "center",
+                  ...getTableCellWidthStyle(columnWidth)
+                },
+                children: getCellDisplayValue(value, showValues, measure)
+              },
+              `cell-${rv}-${cv}`
+            );
+          })
+        ] }, `row-${rv}`)) })
+      ] })
+    }
+  ) });
+};
+
+// src/components/charts/tables/Table/Table.hooks.ts
+import { useMemo as useMemo5 } from "react";
+var useTableGetRowsPerPage = ({
+  availableHeight,
+  headerHeight,
+  rowHeight,
+  footerHeight = 0
+}) => useMemo5(() => {
+  const h = availableHeight;
+  if (!h) return 0;
+  let available = h - headerHeight - footerHeight;
+  if (available < 0) available = 0;
+  const rows = Math.floor(available / rowHeight);
+  return Math.max(0, rows);
+}, [availableHeight, headerHeight, rowHeight, footerHeight]);
+
+// src/hooks/useDebounce.hook.ts
+import { useRef as useRef9, useEffect as useEffect8, useCallback as useCallback2 } from "react";
+function useDebounce(fn, delay = 300) {
+  const timerRef = useRef9(null);
+  const fnRef = useRef9(fn);
+  useEffect8(() => {
+    fnRef.current = fn;
+  }, [fn]);
+  const debouncedFn = useCallback2(
+    (...args) => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+      timerRef.current = setTimeout(() => {
+        fnRef.current(...args);
+      }, delay);
+    },
+    [delay]
+  );
+  useEffect8(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+  return debouncedFn;
+}
+
+// src/hooks/useObserverHeight.hook.ts
+import { useLayoutEffect, useRef as useRef10, useState as useState6 } from "react";
+var useObserverHeight = (elRef) => {
+  const [height, setHeight] = useState6(0);
+  const timeoutRef = useRef10(void 0);
+  useLayoutEffect(() => {
+    const el = elRef.current;
+    if (!el) return;
+    const updateHeight = (newHeight) => {
+      setHeight(Math.max(0, newHeight));
+    };
+    const ro = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = window.setTimeout(() => {
+        updateHeight(entry.contentRect.height);
+      }, 100);
+    });
+    ro.observe(el);
+    updateHeight(el.getBoundingClientRect().height || 0);
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      ro.disconnect();
+    };
+  }, [elRef]);
+  return height;
+};
 export {
-  G as ActionIcon,
-  H as BarChart,
-  js as Button,
-  L as ButtonIcon,
-  K as Card,
-  $ as CardContent,
-  E as CardFeedback,
-  q as CardHeader,
-  N as ChartCard,
-  me as ComparisonPeriodType,
-  pe as DateRangeSelectFieldPro,
-  W as DonutChart,
-  ee as DonutChartPro,
-  re as DonutLabelChartPro,
-  z as Dropdown,
-  Bs as EditorCard,
-  J as FieldFeedback,
-  V as FieldHeader,
-  D as GhostButton,
-  $s as HeatMap,
-  Rs as KpiChart,
-  X as LineChart,
-  Ls as MultiSelectField,
-  Ds as MultiSelectFieldPro,
-  Y as NumberField,
-  v as PageOverlay,
-  Q as PieChart,
-  ae as PieChartPro,
-  Hs as PivotTable,
-  Ns as SelectFieldCategory,
-  U as SelectFieldContent,
-  Z as SelectFieldContentList,
-  aa as SelectFieldTrigger,
-  sa as SelectListOption,
-  Os as SingleSelectField,
-  le as SingleSelectFieldPro,
-  M as Skeleton,
-  O as Switch,
-  ea as TableHeaderAlign,
-  ta as TablePaginated,
-  ra as TableSortDirection,
-  oa as TextField,
-  j as Typography,
-  ia as chartColors,
-  na as chartContrastColors,
-  ca as chartjsAxisOptions,
-  la as chartjsAxisOptionsLayoutPadding,
-  ua as chartjsAxisOptionsPlugins,
-  pa as chartjsAxisOptionsScales,
-  ha as dataset,
-  ma as description,
-  da as dimension,
-  xa as dimensionOrMeasure,
-  ga as dimensionSimple,
-  ba as dimensionTime,
-  Ca as dimensionWithDateBounds,
-  ya as dimensions,
-  _a as dimensionsAndMeasures,
-  wa as displayPercentages,
-  Sa as genericBoolean,
-  fa as genericNumber,
-  Ta as genericString,
-  ka as genericTimeRange,
-  Ia as getBarChartData,
-  Pa as getBarChartOptions,
-  Aa as getChartjsAxisOptionsScalesGrid,
-  ja as getChartjsAxisOptionsScalesGridColor,
-  La as getChartjsAxisOptionsScalesTicksDefault,
-  Da as getChartjsAxisOptionsScalesTicksMuted,
-  va as getChartjsAxisOptionsScalesTitle,
-  Oa as getDonutChartOptions,
-  Fa as getLineChartData,
-  Ba as getLineChartOptions,
-  Ys as getObjectStableKey,
-  Na as getPieChartData,
-  Ma as getPieChartOptions,
-  ie as getPieChartProData,
-  ne as getPieChartProOptions,
-  Ra as getStyle,
-  Ga as getStyleNumber,
-  Ha as getTableTotalPages,
-  Us as getThemeFormatter,
-  Ka as i18n,
-  $a as i18nSetup,
-  Ea as inputColor,
-  xe as isColorValid,
-  qa as maxLegendItems,
-  Wa as maxResults,
-  za as measure,
-  Ja as measures,
-  Va as placeholder,
-  Js as remarkableTheme,
-  Xa as resolveI18nProps,
-  Ya as reverseXAxis,
-  Qa as reverseYAxis,
-  ge as setColorAlpha,
-  Ua as showLegend,
-  Za as showLogarithmicScale,
-  as as showTooltips,
-  ss as showTopItems,
-  es as showTotalLabels,
-  ts as showValueLabels,
-  Vs as styles,
-  rs as subInputAbbreviateLargeNumber,
-  os as subInputAlign,
-  is as subInputColor,
-  ns as subInputCurrency,
-  cs as subInputDateBounds,
-  ls as subInputDecimalPlaces,
-  us as subInputDisplayName,
-  ps as subInputGenericBoolean,
-  hs as subInputGenericNumber,
-  ms as subInputGranularity,
-  ds as subInputMaxCharacters,
-  xs as subInputPrefix,
-  gs as subInputSuffix,
-  bs as subInputWidth,
-  Cs as timeDimensionSubInputs,
-  ys as title,
-  qs as useDebounce,
-  Ws as useTableGetRowsPerPage,
-  _s as xAxisLabel,
-  ws as xAxisMaxItems,
-  Ss as xAxisRangeMax,
-  fs as xAxisRangeMin,
-  Ts as yAxisLabel,
-  ks as yAxisMaxItems,
-  Is as yAxisRangeMax,
-  Ps as yAxisRangeMin
-};
-//# sourceMappingURL=index.js.map
+  ActionIcon,
+  BarChart,
+  Button,
+  ButtonIcon,
+  Card,
+  CardContent,
+  CardFeedback,
+  CardHeader,
+  DonutChart,
+  Dropdown,
+  FieldFeedback,
+  FieldHeader,
+  GhostButton,
+  HeatMap,
+  KpiChart,
+  LineChart,
+  MultiSelectField,
+  NumberField,
+  Overlay,
+  PieChart,
+  PivotTable,
+  SelectFieldCategory,
+  SelectFieldContent,
+  SelectFieldContentList,
+  SelectFieldTrigger,
+  SelectListOption,
+  SingleSelectField,
+  Skeleton,
+  Switch,
+  TableHeaderAlign,
+  TablePaginated,
+  TableSortDirection,
+  TextField,
+  Typography,
+  chartjsAxisOptionsLayoutPadding,
+  getBarChartData,
+  getBarChartOptions,
+  getChartColors,
+  getChartContrastColors,
+  getChartjsAxisOptions,
+  getChartjsAxisOptionsPlugins,
+  getChartjsAxisOptionsScales,
+  getChartjsAxisOptionsScalesGrid,
+  getChartjsAxisOptionsScalesGridColor,
+  getChartjsAxisOptionsScalesTicksDefault,
+  getChartjsAxisOptionsScalesTicksMuted,
+  getChartjsAxisOptionsScalesTitle,
+  getDonutChartOptions,
+  getLineChartData,
+  getLineChartOptions,
+  getPieChartData,
+  getPieChartOptions,
+  getStyle,
+  getStyleNumber,
+  getTableTotalPages,
+  useDebounce,
+  useObserverHeight,
+  useTableGetRowsPerPage
+};
+//# sourceMappingURL=index.js.map