@foi/design-system 0.0.12 → 0.0.13

package/dist/index.mjs

@@ -1,6 +1,918 @@
-import { n as e } from "./theme-D18AZjTt.js";
-import { a as t, n } from "./RadioGroup.context-BdRgENJJ.js";
-import { a as r, c as i, i as a, n as o, o as s, r as c, s as l, t as u } from "./Switch-C7wjcrjU.js";
-import { n as d, r as f, t as p } from "./RadioGroup-CdW6yS38.js";
-import { t as m } from "./ThemeProvider-JlN3U_r2.js";
-export { i as Button, n as Checkbox, f as CheckboxGroup, d as CheckboxTree, s as DatePicker, t as Icon, l as IconButton, r as Input, a as Radio, p as RadioGroup, c as Select, o as Slider, u as Switch, m as ThemeProvider, e as darkTheme };
+import { i as e, n as t, r as n, t as r } from "./emotion-react-jsx-runtime.browser.esm-C4rLUMui.js";
+import { n as i, r as a } from "./theme-Cxg9jdmX.js";
+import { a as o, n as s, o as c } from "./RadioGroup.context-QNk2hW_4.js";
+import { a as l, c as u, i as d, n as f, o as p, r as m, s as h, t as g } from "./Switch-JF9P9VJf.js";
+import { n as _, r as v, t as y } from "./RadioGroup-DCJBoZc-.js";
+import { t as b } from "./ThemeProvider-Q2Hjezbt.js";
+import { useCallback as x, useEffect as S, useLayoutEffect as C, useMemo as w, useRef as T, useState as E } from "react";
+import { css as D, keyframes as O } from "@emotion/react";
+import k from "react-dom";
+//#region src/components/atoms/Skeleton/Skeleton.emotion.ts
+var ee = D`
+  &.--SKELETON {
+    display: block;
+    background: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0.05) 0%,
+      rgba(255, 255, 255, 0.13) 50%,
+      rgba(255, 255, 255, 0.05) 100%
+    );
+    background-size: 200% 100%;
+    animation: ${O`
+  0% { background-position: 200% center; }
+  100% { background-position: -200% center; }
+`} 1.4s ease infinite;
+
+    &.--SKELETON--circular {
+      border-radius: 50%;
+    }
+
+    &.--SKELETON--rectangular {
+      border-radius: 4px;
+    }
+  }
+`, A = ({ variant: e = "rectangular", width: n, height: r, className: i }) => /* @__PURE__ */ t("span", {
+	className: [
+		"--SKELETON",
+		`--SKELETON--${e}`,
+		i || ""
+	].filter(Boolean).join(" "),
+	css: ee,
+	style: {
+		width: n,
+		height: r
+	},
+	"aria-hidden": "true"
+}), te = (e) => D`
+  &.--DATAGRID {
+    width: 100%;
+    box-sizing: border-box;
+
+    ${a(e, "background-color", "--DATAGRID-ROOT-BACKGROUND-COLOR")};
+    ${a(e, "border-color", "--DATAGRID-ROOT-BORDER-COLOR")};
+    ${a(e, "border-width", "--DATAGRID-ROOT-BORDER-WIDTH")};
+    ${a(e, "border-radius", "--DATAGRID-ROOT-BORDER-RADIUS")};
+    ${a(e, "border-style", "--DATAGRID-ROOT-BORDER-STYLE")};
+
+    .--DATAGRID-tableContainer {
+      width: 100%;
+      overflow-x: auto;
+    }
+
+    .--DATAGRID-bodyContainer {
+      &::-webkit-scrollbar {
+        width: 12px;
+        height: 4px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: rgba(0, 0, 0, 0.5);
+        border-radius: 9999px;
+        border: 3px solid transparent;
+        background-clip: padding-box;
+      }
+    }
+
+    .--DATAGRID-table {
+      width: 100%;
+      border-collapse: collapse;
+
+      .--DATAGRID-thead {
+        .--DATAGRID-thScrollbarSpacer {
+          border: none;
+          background: transparent;
+        }
+
+        .--DATAGRID-headerRow {
+          height: 48px;
+
+          .--DATAGRID-th {
+            ${a(e, "background-color", "--DATAGRID-ROOT-BACKGROUND-COLOR")};
+
+            padding: 8px 16px;
+            text-align: left;
+            white-space: nowrap;
+
+            ${a(e, "border-bottom-color", "--DATAGRID-ROOT-BORDER-COLOR")};
+            ${a(e, "border-bottom-width", "--DATAGRID-ROOT-BORDER-WIDTH")};
+            ${a(e, "border-bottom-style", "--DATAGRID-ROOT-BORDER-STYLE")};
+
+            &.--DATAGRID-thOptions {
+              width: 80px;
+              text-align: right;
+            }
+
+            .--DATAGRID-thInner {
+              display: flex;
+              align-items: center;
+              gap: 6px;
+
+              .--DATAGRID-thActions {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                margin-left: auto;
+              }
+
+              .--DATAGRID-filterActive {
+                ${a(e, "color", "--DATAGRID-EVENTS-ENABLED-ICON-COLOR")};
+              }
+
+              .--DATAGRID-thLabel {
+                ${a(e, "color", "--DATAGRID-EVENTS-ENABLED-COLOR-SECONDARY")};
+
+                font-family: ${e["--FONTFAMILY-PRIMARY"]};
+                font-size: 0.875rem;
+                font-weight: 500;
+                letter-spacing: 0.01em;
+                line-height: 1;
+                white-space: nowrap;
+              }
+
+              .--DATAGRID-filterContainer {
+                display: flex;
+                align-items: center;
+                gap: 4px;
+
+                .--DATAGRID-filterLabel {
+                  ${a(e, "color", "--DATAGRID-EVENTS-ENABLED-COLOR-SECONDARY")};
+
+                  font-family: ${e["--FONTFAMILY-PRIMARY"]};
+                  font-size: 0.75rem;
+                  font-weight: 500;
+                  cursor: pointer;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .--DATAGRID-tbody {
+        .--DATAGRID-row {
+          height: 48px;
+          transition: background-color 150ms;
+
+          ${a(e, "border-bottom-color", "--DATAGRID-ROOT-BORDER-COLOR")};
+          ${a(e, "border-bottom-width", "--DATAGRID-ROOT-BORDER-WIDTH")};
+          ${a(e, "border-bottom-style", "--DATAGRID-ROOT-BORDER-STYLE")};
+
+          &:hover {
+            ${a(e, "background-color", "--DATAGRID-EVENTS-HOVER-BACKGROUND-COLOR")};
+          }
+
+          &:last-child {
+            border-bottom: none;
+          }
+        }
+
+        .--DATAGRID-td {
+          ${a(e, "color", "--DATAGRID-EVENTS-ENABLED-COLOR-PRIMARY")};
+
+          padding: 8px 16px;
+          vertical-align: middle;
+
+          font-family: ${e["--FONTFAMILY-PRIMARY"]};
+          font-size: 0.875rem;
+          font-weight: 500;
+          letter-spacing: 0.01em;
+          line-height: 1;
+        }
+
+        .--DATAGRID-emptyCell {
+          text-align: center;
+          vertical-align: middle;
+
+          ${a(e, "color", "--DATAGRID-EVENTS-ENABLED-COLOR-SECONDARY")};
+
+          font-family: ${e["--FONTFAMILY-PRIMARY"]};
+          font-size: 0.875rem;
+          font-weight: 400;
+        }
+
+        .--DATAGRID-loadingMore {
+          text-align: center;
+          padding: 12px 16px;
+          height: 48px;
+          vertical-align: middle;
+
+          ${a(e, "color", "--DATAGRID-EVENTS-ENABLED-COLOR-SECONDARY")};
+
+          font-family: ${e["--FONTFAMILY-PRIMARY"]};
+          font-size: 0.875rem;
+        }
+      }
+    }
+
+    .--DATAGRID-tdOptions {
+      text-align: right;
+      display: flex;
+      gap: 8px;
+      justify-content: flex-end;
+      align-items: center;
+      padding: 12px 16px !important;
+    }
+  }
+`, j = (e, t) => `
+    // BACKGROUNDS
+    ${a(e, "background-color", `--DATAGRIDMENU-${t}-BACKGROUND-COLOR`)}
+        
+    // BORDERS
+    ${a(e, "border-color", `--DATAGRIDMENU-${t}-BORDER-COLOR`)}
+    ${a(e, "border-width", `--DATAGRIDMENU-${t}-BORDER-WIDTH`)}
+    ${a(e, "border-style", `--DATAGRIDMENU-${t}-BORDER-STYLE`)}
+    ${a(e, "border-radius", `--DATAGRIDMENU-${t}-BORDER-RADIUS`)}
+`, M = (e) => D`
+  &.--DATAGRIDMENU {
+    position: fixed;
+    z-index: 200;
+    padding: 16px;
+    width: calc(240px - 32px);
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    box-shadow:
+      rgba(0, 0, 0, 0.2) 0px 5px 5px -3px,
+      rgba(0, 0, 0, 0.14) 0px 8px 10px 1px,
+      rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
+
+    ${j(e, "ROOT")}
+
+    .--DATAGRIDMENU-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .--DATAGRIDMENU-headerTitle {
+        ${a(e, "color", "--DATAGRIDMENU-EVENTS-ENABLED-COLOR-PRIMARY")};
+        font-family: ${e["--FONTFAMILY-PRIMARY"]};
+        font-size: 0.875rem;
+        font-weight: 600;
+      }
+    }
+
+    .--DATAGRIDMENU-content {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    // ─── Options list ─────────────────────────────────────────────────────────
+
+    .--DATAGRIDMENU-optionsList {
+      max-height: 180px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+
+      &::-webkit-scrollbar {
+        width: 4px;
+      }
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: rgba(255, 255, 255, 0.2);
+        border-radius: 2px;
+      }
+    }
+
+    .--DATAGRIDMENU-optionRow {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .--DATAGRIDMENU-optionDot {
+      width: 6px;
+      height: 24px;
+      border-radius: 2px;
+      flex-shrink: 0;
+    }
+
+    .--DATAGRIDMENU-actions {
+      display: flex;
+      gap: 8px;
+      justify-content: flex-end;
+    }
+  }
+`, N = "--DATAGRIDMENU", P = ({ columnKey: e, pendingSearch: n, onSearchChange: r, searchLabel: i = "Search" }) => /* @__PURE__ */ t("div", {
+	className: `${N}-searchInput`,
+	children: /* @__PURE__ */ t(l, {
+		name: `search-${e}`,
+		label: i,
+		value: n,
+		onValueChange: r,
+		showErrorText: !1,
+		width: "full",
+		autoFocus: !0,
+		"data-testid": `${N}-searchInput-${e}`,
+		startAdornment: /* @__PURE__ */ t(o, {
+			name: "search",
+			style: { color: "white" }
+		})
+	})
+}), F = "--DATAGRIDMENU", I = ({ filterType: e, columnKey: i, options: a, pendingMulti: o, onMultiChange: c, multiSearch: u, onMultiSearchChange: d }) => {
+	let f = e === "multiselect-search", p = a.filter((e) => !u || e.label.toLowerCase().includes(u.toLowerCase()));
+	return /* @__PURE__ */ n(r, { children: [f && /* @__PURE__ */ t("div", {
+		className: `${F}-searchInput`,
+		children: /* @__PURE__ */ t(l, {
+			name: `multiSearch-${i}`,
+			label: "Search options",
+			value: u,
+			onValueChange: d,
+			showErrorText: !1,
+			width: "full",
+			autoFocus: !0,
+			"data-testid": `${F}-multiSearch-${i}`
+		})
+	}), /* @__PURE__ */ t("div", {
+		className: `${F}-optionsList`,
+		"data-testid": `${F}-optionsList-${i}`,
+		children: p.map((e) => /* @__PURE__ */ n("div", {
+			className: `${F}-optionRow`,
+			children: [e.color && /* @__PURE__ */ t("span", {
+				className: `${F}-optionDot`,
+				style: { backgroundColor: e.color },
+				"aria-hidden": "true"
+			}), /* @__PURE__ */ t(s, {
+				checked: o.includes(e.value),
+				onChecked: (t) => c(t ? [...o, e.value] : o.filter((t) => t !== e.value)),
+				label: e.label,
+				showErrorText: !1,
+				"data-testid": `${F}-option-${i}-${e.value}`
+			})]
+		}, e.value))
+	})] });
+}, L = "--DATAGRIDMENU", R = ({ filterType: e, options: r, columnKey: i, filterTitle: a, searchLabel: s, cancelLabel: c = "Cancel", applyLabel: l = "Apply", pendingSearch: d, onSearchChange: f, pendingMulti: p, onMultiChange: m, multiSearch: g, onMultiSearchChange: _, onCancel: v, onApply: y, onClear: b, anchorEl: x, style: S }) => {
+	let w = T(null);
+	return C(() => {
+		if (!x) return;
+		let e = () => {
+			if (!w.current) return;
+			let e = x.getBoundingClientRect(), t = w.current.offsetWidth, n = e.left + e.width / 2 - t / 2;
+			w.current.style.top = `${e.bottom + 8}px`, w.current.style.left = `${Math.max(8, Math.min(n, window.innerWidth - t - 8))}px`;
+		};
+		return e(), window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
+			window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
+		};
+	}, [x]), k.createPortal(/* @__PURE__ */ n("div", {
+		ref: w,
+		className: L,
+		css: M(S),
+		"data-popover-key": i,
+		"data-testid": `${L}-${i}`,
+		children: [
+			/* @__PURE__ */ n("div", {
+				className: `${L}-header`,
+				children: [/* @__PURE__ */ t("span", {
+					className: `${L}-headerTitle`,
+					children: a
+				}), /* @__PURE__ */ t(h, {
+					icon: /* @__PURE__ */ t(o, {
+						name: "delete_outline",
+						size: "sm"
+					}),
+					onClick: b,
+					"aria-label": "Clear filter",
+					"data-testid": `${L}-clearBtn-${i}`
+				})]
+			}),
+			/* @__PURE__ */ n("div", {
+				className: `${L}-content`,
+				children: [e === "search" && /* @__PURE__ */ t(P, {
+					columnKey: i,
+					pendingSearch: d,
+					onSearchChange: f,
+					searchLabel: s
+				}), (e === "multiselect" || e === "multiselect-search") && /* @__PURE__ */ t(I, {
+					filterType: e,
+					columnKey: i,
+					options: r ?? [],
+					pendingMulti: p,
+					onMultiChange: m,
+					multiSearch: g,
+					onMultiSearchChange: _
+				})]
+			}),
+			/* @__PURE__ */ n("div", {
+				className: `${L}-actions`,
+				children: [/* @__PURE__ */ t(u, {
+					onClick: v,
+					"data-testid": `${L}-cancelBtn-${i}`,
+					variant: "ghost",
+					children: c
+				}), /* @__PURE__ */ t(u, {
+					onClick: y,
+					"data-testid": `${L}-applyBtn-${i}`,
+					children: l
+				})]
+			})
+		]
+	}), document.body);
+}, ne = ({ theme: n, variant: r = "default", ...i }) => {
+	let { componentStyles: a } = e([c.DATAGRIDMENU], n, r.toUpperCase());
+	return /* @__PURE__ */ t(R, {
+		...i,
+		style: a
+	});
+}, z = "--DATAGRID", re = ({ columns: e, pageSize: n }) => {
+	let i = w(() => Array.from({ length: n }, () => e.map((e) => e.type === "options" ? null : `${Math.floor(Math.random() * 51) + 40}%`)), [n, e.length]);
+	return /* @__PURE__ */ t(r, { children: Array.from({ length: n }).map((n, r) => /* @__PURE__ */ t("tr", {
+		className: `${z}-row`,
+		children: e.map((e, n) => /* @__PURE__ */ t("td", {
+			className: [`${z}-td`, e.type === "options" ? `${z}-tdOptions` : ""].filter(Boolean).join(" "),
+			children: e.type === "options" ? /* @__PURE__ */ t(A, {
+				variant: "circular",
+				width: 24,
+				height: 24
+			}) : /* @__PURE__ */ t(A, {
+				height: 16,
+				width: i[r][n] ?? void 0
+			})
+		}, e.key))
+	}, r)) });
+}, B = (e) => D`
+  &.--PAGINATION {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 16px;
+    padding: 8px 16px;
+
+    .--PAGINATION-rowsControl {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .--PAGINATION-rowsSize {
+        ${a(e, "color", "--PAGINATION-EVENTS-ENABLED-COLOR-SECONDARY")};
+        font-family: ${e["--FONTFAMILY-PRIMARY"]};
+        font-size: 0.8125rem;
+        user-select: none;
+        min-width: 20px;
+        text-align: center;
+      }
+    }
+
+    .--PAGINATION-controls {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .--PAGINATION-info {
+        ${a(e, "color", "--PAGINATION-EVENTS-ENABLED-COLOR-SECONDARY")};
+        font-family: ${e["--FONTFAMILY-PRIMARY"]};
+        font-size: 0.8125rem;
+        user-select: none;
+      }
+    }
+  }
+`, V = (e, t) => `
+    // BACKGROUNDS
+    ${a(e, "background-color", `--PAGINATIONMENU-EVENTS-${t}-BACKGROUND-COLOR`)}
+    
+    // BORDERS
+    ${a(e, "border-color", `--PAGINATIONMENU-EVENTS-${t}-BORDER-COLOR`)}
+    ${a(e, "border-width", `--PAGINATIONMENU-EVENTS-${t}-BORDER-WIDTH`)}
+    ${a(e, "border-style", `--PAGINATIONMENU-EVENTS-${t}-BORDER-STYLE`)}
+    ${a(e, "border-radius", `--PAGINATIONMENU-EVENTS-${t}-BORDER-RADIUS`)}
+`, H = (e, t) => `
+    // TYPOGRAPHY
+    ${a(e, "color", `--PAGINATIONMENU-EVENTS-${t}-COLOR-PRIMARY`)};
+    ${a(e, "caret-color", `--PAGINATIONMENU-EVENTS-${t}-COLOR-PRIMARY`)};
+`, ie = (e, t) => `
+    // BACKGROUNDS
+    ${a(e, "background-color", `--PAGINATIONMENU-${t}-BACKGROUND-COLOR`)}
+        
+    // BORDERS
+    ${a(e, "border-color", `--PAGINATIONMENU-${t}-BORDER-COLOR`)}
+    ${a(e, "border-width", `--PAGINATIONMENU-${t}-BORDER-WIDTH`)}
+    ${a(e, "border-style", `--PAGINATIONMENU-${t}-BORDER-STYLE`)}
+    ${a(e, "border-radius", `--PAGINATIONMENU-${t}-BORDER-RADIUS`)}
+`, U = (e) => D`
+  &.--PAGINATIONMENU {
+    position: absolute;
+    bottom: calc(100% + ${e["--PAGINATIONMENU-ROOT-BOTTOM"] || ""});
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    z-index: 10;
+    box-shadow:
+      rgba(0, 0, 0, 0.2) 0px 5px 5px -3px,
+      rgba(0, 0, 0, 0.14) 0px 8px 10px 1px,
+      rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
+
+    ${ie(e, "ROOT")}
+
+    .--PAGINATIONMENU-option {
+      all: unset;
+      cursor: pointer;
+      text-align: center;
+      padding: 6px 20px;
+      white-space: nowrap;
+      transition: background-color 120ms;
+      font-family: ${e["--FONTFAMILY-PRIMARY"]};
+      font-size: 0.8125rem;
+
+      // ENABLED
+      ${V(e, "ENABLED")}
+      ${H(e, "ENABLED")}
+
+      // VALUE
+      &.--PAGINATIONMENU-selected {
+        ${V(e, "VALUE")}
+        ${H(e, "VALUE")}
+      }
+
+      // HOVER
+      &:hover {
+        ${V(e, "HOVER")}
+        ${H(e, "HOVER")}
+      }
+
+      // - ACTIVE
+      &:active,
+      &.--PAGINATIONMENU-active {
+        ${V(e, "ACTIVE")}
+        ${H(e, "ACTIVE")}
+      }
+
+      // FOCUS
+      &:focus-visible {
+        outline-offset: 0px;
+        outline: 0;
+        ${V(e, "FOCUS")}
+        ${H(e, "FOCUS")}
+      }
+    }
+  }
+`, W = "--PAGINATIONMENU", G = ({ options: e, activeOption: n, onSelect: r, focusedElement: i = -1, style: a }) => /* @__PURE__ */ t("div", {
+	className: W,
+	css: U(a),
+	children: e.map((e, a) => {
+		let o = e === n ? `${W}-selected` : "", s = i === a;
+		return /* @__PURE__ */ t("button", {
+			className: [
+				`${W}-option`,
+				o,
+				s ? `${W}-active` : ""
+			].filter(Boolean).join(" "),
+			onClick: () => r(e),
+			children: e
+		}, e);
+	})
+}), K = ({ theme: n, variant: r = "default", ...i }) => {
+	let { componentStyles: a } = e([c.PAGINATIONMENU], n, r.toUpperCase());
+	return /* @__PURE__ */ t(G, {
+		...i,
+		style: a
+	});
+}, q = "--PAGINATION", J = ({ page: e, total: r, pageSize: i, onPageChange: a, pageSizeOptions: s, onPageSizeChange: c, loading: l, className: u, style: d }) => {
+	let [f, p] = E(!1), [m, g] = E(-1), _ = Math.max(1, Math.ceil(r / i)), v = e * i + 1, y = Math.min((e + 1) * i, r), b = e === 0, x = e >= _ - 1, C = () => {
+		p(!1), g(-1);
+	};
+	return S(() => {
+		if (!f) return;
+		let e = (e) => {
+			e.target.closest(`.${q}-rowsControl`) || (p(!1), g(-1));
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [f]), /* @__PURE__ */ n("div", {
+		className: [q, u || ""].filter(Boolean).join(" "),
+		css: B(d ?? {}),
+		children: [s && s.length > 0 && /* @__PURE__ */ n("div", {
+			className: `${q}-rowsControl`,
+			children: [
+				f && /* @__PURE__ */ t(K, {
+					options: s,
+					activeOption: i,
+					onSelect: (e) => {
+						c?.(e), C();
+					},
+					focusedElement: m
+				}),
+				/* @__PURE__ */ t("span", {
+					className: `${q}-rowsSize`,
+					children: i
+				}),
+				/* @__PURE__ */ t(h, {
+					icon: /* @__PURE__ */ t(o, {
+						name: "arrow_drop_up",
+						size: "sm"
+					}),
+					onClick: () => f ? C() : p(!0),
+					onKeyDown: (e) => {
+						if (e.key === "Tab" || e.key === "Escape") p(!1), g(-1);
+						else if (["ArrowDown", "ArrowUp"].includes(e.key) && f) e.preventDefault(), e.key === "ArrowDown" ? g((e) => e + 1 >= (s?.length ?? 0) ? 0 : e + 1) : g((e) => e - 1 < 0 ? (s?.length ?? 1) - 1 : e - 1);
+						else if (e.key === "Enter" && f && m >= 0 && s) {
+							e.preventDefault();
+							let t = s[m];
+							t !== void 0 && (c?.(t), p(!1), g(-1));
+						}
+					},
+					isFlipped: f,
+					"aria-label": "Rows per page",
+					"data-testid": `${q}-rowsBtn`
+				})
+			]
+		}), /* @__PURE__ */ n("div", {
+			className: `${q}-controls`,
+			children: [
+				/* @__PURE__ */ n("span", {
+					className: `${q}-info`,
+					children: [
+						v,
+						"-",
+						y,
+						" of ",
+						r
+					]
+				}),
+				/* @__PURE__ */ t(h, {
+					icon: /* @__PURE__ */ t(o, {
+						name: "first_page",
+						size: "sm"
+					}),
+					onClick: () => a(0),
+					disabled: l || b,
+					"aria-label": "First page",
+					"data-testid": `${q}-first`
+				}),
+				/* @__PURE__ */ t(h, {
+					icon: /* @__PURE__ */ t(o, {
+						name: "chevron_left",
+						size: "sm"
+					}),
+					onClick: () => a(e - 1),
+					disabled: l || b,
+					"aria-label": "Previous page",
+					"data-testid": `${q}-prev`
+				}),
+				/* @__PURE__ */ t(h, {
+					icon: /* @__PURE__ */ t(o, {
+						name: "chevron_right",
+						size: "sm"
+					}),
+					onClick: () => a(e + 1),
+					disabled: l || x,
+					"aria-label": "Next page",
+					"data-testid": `${q}-next`
+				}),
+				/* @__PURE__ */ t(h, {
+					icon: /* @__PURE__ */ t(o, {
+						name: "last_page",
+						size: "sm"
+					}),
+					onClick: () => a(_ - 1),
+					disabled: l || x,
+					"aria-label": "Last page",
+					"data-testid": `${q}-last`
+				})
+			]
+		})]
+	});
+}, Y = ({ theme: n, variant: r = "default", ...i }) => {
+	let { componentStyles: a } = e([c.PAGINATION], n, r.toUpperCase());
+	return /* @__PURE__ */ t(J, {
+		...i,
+		style: a
+	});
+}, X = "--DATAGRID", ae = 10, Z = ({ columns: e, onFetch: i, paginationType: a = "pagination", pageSize: s = ae, pageSizeOptions: c, emptyContent: l = /* @__PURE__ */ t("span", { children: "No se han encontrado resultados" }), loadingMoreContent: u = /* @__PURE__ */ t("span", { children: "Cargando..." }), className: d, style: f }) => {
+	let [p, m] = E([]), [g, _] = E(0), [v, y] = E(0), [b, w] = E(s), [D, O] = E(!0), [k, ee] = E(null), [A, j] = E({}), [M, N] = E(null), [P, F] = E(null), [I, L] = E(""), [R, z] = E([]), [B, V] = E(""), [H, ie] = E([]), [U, W] = E(0), G = T({}), K = T(null), q = T(null);
+	S(() => {
+		let e = !1;
+		return i({
+			page: v,
+			pageSize: b,
+			filters: A,
+			sort: k ?? void 0
+		}).then((t) => {
+			e || (m((e) => a === "scroll" && v > 0 ? [...e, ...t.data] : t.data), _(t.total), O(!1));
+		}), () => {
+			e = !0;
+		};
+	}, [
+		v,
+		b,
+		A,
+		k,
+		a,
+		i
+	]), C(() => {
+		a !== "scroll" || !K.current || !q.current || (ie(Array.from(K.current.querySelectorAll(`th:not(.${X}-thScrollbarSpacer)`)).map((e) => e.offsetWidth)), W(q.current.offsetWidth - q.current.clientWidth));
+	}, [
+		a,
+		e.length,
+		D
+	]), S(() => {
+		if (!M) return;
+		let e = (e) => {
+			e.target.closest(`[data-popover-key="${M}"]`) || N(null);
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [M]);
+	let J = (e) => {
+		if (!e.filter) return;
+		if (M === e.key) {
+			N(null), F(null);
+			return;
+		}
+		let t = A[e.key];
+		e.filter.type === "search" ? L(typeof t == "string" ? t : "") : (z(Array.isArray(t) ? t : []), V("")), F(G.current[e.key] ?? null), N(e.key);
+	}, Z = (e) => {
+		if (!e.filter) return;
+		let t = e.filter.type === "search" ? I : R;
+		O(!0), j((n) => ({
+			...n,
+			[e.key]: t
+		})), y(0), N(null);
+	}, Q = (e) => {
+		let t = A[e];
+		return t == null ? !1 : Array.isArray(t) ? t.length > 0 : t !== "";
+	}, oe = (e) => {
+		O(!0), ee((t) => t?.key === e ? {
+			key: e,
+			direction: t.direction === "asc" ? "desc" : "asc"
+		} : {
+			key: e,
+			direction: "asc"
+		}), y(0);
+	}, se = (e) => {
+		O(!0), y(e);
+	}, ce = (e) => {
+		O(!0), w(e), y(0);
+	}, le = x((e) => {
+		if (a !== "scroll" || D || p.length >= g) return;
+		let { scrollTop: t, scrollHeight: n, clientHeight: r } = e.currentTarget;
+		n - t - r < 48 && (O(!0), y((e) => e + 1));
+	}, [
+		a,
+		D,
+		p.length,
+		g
+	]), ue = e.length, $ = M ? e.find((e) => e.key === M) : void 0, de = b * 48, fe = !D && p.length === 0, pe = e.map((e) => /* @__PURE__ */ t("th", {
+		className: [`${X}-th`, e.type === "options" ? `${X}-thOptions` : ""].join(" "),
+		style: e.width ? { width: e.width } : void 0,
+		children: /* @__PURE__ */ n("div", {
+			className: `${X}-thInner`,
+			"data-testid": `${X}-th-${e.key}`,
+			children: [/* @__PURE__ */ t("span", {
+				className: `${X}-thLabel`,
+				children: e.label
+			}), e.type !== "options" && /* @__PURE__ */ n("div", {
+				className: `${X}-thActions`,
+				children: [e.filter && /* @__PURE__ */ t("div", {
+					className: `${X}-filterContainer`,
+					"data-popover-key": e.key,
+					children: /* @__PURE__ */ t("span", {
+						ref: (t) => {
+							G.current[e.key] = t;
+						},
+						children: /* @__PURE__ */ t(h, {
+							icon: /* @__PURE__ */ t(o, {
+								name: Q(e.key) ? "filter_alt" : "filter_list",
+								size: "sm",
+								style: { color: Q(e.key) ? "white" : "" }
+							}),
+							onClick: () => J(e),
+							"data-testid": `${X}-filterBtn-${e.key}`,
+							"aria-label": `Filter ${e.label}`
+						})
+					})
+				}), e.sortable !== !1 && /* @__PURE__ */ t(h, {
+					icon: /* @__PURE__ */ t(o, {
+						name: k?.key === e.key ? k.direction === "asc" ? "arrow_upward" : "arrow_downward" : "unfold_more",
+						size: "sm",
+						style: { color: k?.key === e.key ? "white" : "" }
+					}),
+					onClick: () => oe(e.key),
+					"data-testid": `${X}-sortBtn-${e.key}`,
+					"aria-label": `Sort ${e.label}`
+				})]
+			})]
+		})
+	}, e.key)), me = D && (a !== "scroll" || p.length === 0) ? /* @__PURE__ */ t(re, {
+		columns: e,
+		pageSize: b
+	}) : fe ? /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t("td", {
+		colSpan: ue,
+		className: `${X}-emptyCell`,
+		style: { height: `${de}px` },
+		children: l
+	}) }) : /* @__PURE__ */ n(r, { children: [p.map((n, r) => /* @__PURE__ */ t("tr", {
+		className: `${X}-row`,
+		"data-testid": `${X}-row-${r}`,
+		children: e.map((e) => {
+			let i = n[e.key];
+			return /* @__PURE__ */ t("td", {
+				className: [`${X}-td`, e.type === "options" ? `${X}-tdOptions` : ""].filter(Boolean).join(" "),
+				"data-testid": `${X}-cell-${e.key}-${r}`,
+				children: e.render ? e.render(i, n) : String(i ?? "")
+			}, e.key);
+		})
+	}, r)), a === "scroll" && D && /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t("td", {
+		colSpan: ue,
+		className: `${X}-loadingMore`,
+		children: u
+	}) })] });
+	return /* @__PURE__ */ n("div", {
+		className: [X, d || ""].join(" "),
+		css: te(f),
+		"data-testid": X,
+		children: [
+			/* @__PURE__ */ t("div", {
+				className: `${X}-tableContainer`,
+				children: a === "scroll" ? /* @__PURE__ */ n(r, { children: [/* @__PURE__ */ n("table", {
+					className: `${X}-table`,
+					children: [/* @__PURE__ */ n("colgroup", { children: [e.map((e) => /* @__PURE__ */ t("col", { style: e.width ? { width: e.width } : void 0 }, e.key)), /* @__PURE__ */ t("col", { style: { width: U || 0 } })] }), /* @__PURE__ */ t("thead", {
+						ref: K,
+						className: `${X}-thead`,
+						children: /* @__PURE__ */ n("tr", {
+							className: `${X}-headerRow`,
+							children: [pe, /* @__PURE__ */ t("th", {
+								"aria-hidden": "true",
+								className: `${X}-thScrollbarSpacer`,
+								style: { padding: 0 }
+							})]
+						})
+					})]
+				}), /* @__PURE__ */ t("div", {
+					ref: q,
+					className: `${X}-bodyContainer`,
+					style: {
+						overflowY: "auto",
+						maxHeight: `${de}px`
+					},
+					onScroll: le,
+					children: /* @__PURE__ */ n("table", {
+						className: `${X}-table`,
+						style: {
+							tableLayout: "fixed",
+							width: "100%"
+						},
+						children: [/* @__PURE__ */ t("colgroup", { children: e.map((e, n) => /* @__PURE__ */ t("col", { style: { width: H[n] === void 0 ? e.width ?? "auto" : H[n] } }, e.key)) }), /* @__PURE__ */ t("tbody", {
+							className: `${X}-tbody`,
+							children: me
+						})]
+					})
+				})] }) : /* @__PURE__ */ n("table", {
+					className: `${X}-table`,
+					children: [/* @__PURE__ */ t("thead", {
+						className: `${X}-thead`,
+						children: /* @__PURE__ */ t("tr", {
+							className: `${X}-headerRow`,
+							children: pe
+						})
+					}), /* @__PURE__ */ t("tbody", {
+						className: `${X}-tbody`,
+						children: me
+					})]
+				})
+			}),
+			a === "pagination" && /* @__PURE__ */ t(Y, {
+				page: v,
+				total: g,
+				pageSize: b,
+				onPageChange: se,
+				pageSizeOptions: c,
+				onPageSizeChange: ce,
+				loading: D
+			}),
+			$?.filter && /* @__PURE__ */ t(ne, {
+				filterType: $.filter.type,
+				options: $.filter.options,
+				columnKey: $.key,
+				filterTitle: $.filter.title,
+				searchLabel: $.filter.label,
+				cancelLabel: $.filter.cancelLabel,
+				applyLabel: $.filter.applyLabel,
+				pendingSearch: I,
+				onSearchChange: L,
+				pendingMulti: R,
+				onMultiChange: z,
+				multiSearch: B,
+				onMultiSearchChange: V,
+				onCancel: () => N(null),
+				onApply: () => Z($),
+				onClear: () => {
+					$.filter?.type === "search" ? L("") : (z([]), V(""));
+				},
+				anchorEl: P
+			})
+		]
+	});
+}, Q = ({ theme: n, variant: r = "default", ...i }) => {
+	let { componentStyles: a } = e([c.DATAGRID], n, r.toUpperCase());
+	return /* @__PURE__ */ t(Z, {
+		...i,
+		style: a
+	});
+};
+//#endregion
+export { u as Button, s as Checkbox, v as CheckboxGroup, _ as CheckboxTree, Q as DataGrid, p as DatePicker, o as Icon, h as IconButton, l as Input, Y as Pagination, d as Radio, y as RadioGroup, m as Select, A as Skeleton, f as Slider, g as Switch, b as ThemeProvider, i as darkTheme };
+
+//# sourceMappingURL=index.mjs.map