@foi/design-system 0.0.13 → 0.0.15

package/dist/index.mjs

@@ -1,14 +1,14 @@
-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 { i as e, n as t, r as n, t as r } from "./emotion-react-jsx-runtime.browser.esm-Ch-DwUYg.js";
+import { n as i, r as a } from "./theme-D01EcUA9.js";
+import { a as o, n as s, o as c } from "./RadioGroup.context-BBa8PDLt.js";
+import { a as l, c as u, i as d, l as f, n as p, o as m, r as h, s as g, t as _ } from "./Switch-BNFdKefE.js";
+import { n as v, r as y, t as b } from "./RadioGroup-BdWsLUz-.js";
+import { t as x } from "./ThemeProvider-C47pyWG6.js";
+import { useCallback as S, useEffect as C, useLayoutEffect as ee, 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`
+var A = D`
   &.--SKELETON {
     display: block;
     background: linear-gradient(
@@ -31,13 +31,13 @@ var ee = D`
       border-radius: 4px;
     }
   }
-`, A = ({ variant: e = "rectangular", width: n, height: r, className: i }) => /* @__PURE__ */ t("span", {
+`, j = ({ variant: e = "rectangular", width: n, height: r, className: i }) => /* @__PURE__ */ t("span", {
 	className: [
 		"--SKELETON",
 		`--SKELETON--${e}`,
 		i || ""
 	].filter(Boolean).join(" "),
-	css: ee,
+	css: A,
 	style: {
 		width: n,
 		height: r
@@ -213,7 +213,7 @@ var ee = D`
       padding: 12px 16px !important;
     }
   }
-`, j = (e, t) => `
+`, M = (e, t) => `
     // BACKGROUNDS
     ${a(e, "background-color", `--DATAGRIDMENU-${t}-BACKGROUND-COLOR`)}
         
@@ -222,7 +222,7 @@ var ee = D`
     ${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`
+`, N = (e) => D`
   &.--DATAGRIDMENU {
     position: fixed;
     z-index: 200;
@@ -230,13 +230,13 @@ var ee = D`
     width: calc(240px - 32px);
     display: flex;
     flex-direction: column;
-    gap: 16px;
+    gap: 12px;
     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")}
+    ${M(e, "ROOT")}
 
     .--DATAGRIDMENU-header {
       display: flex;
@@ -261,19 +261,23 @@ var ee = D`
 
     .--DATAGRIDMENU-optionsList {
       max-height: 180px;
+      overflow-y: auto;
+      // padding + negative margin let the Checkbox ::before shadow render without being clipped
+      padding: 4px 8px;
+      margin: 0 -8px;
       display: flex;
       flex-direction: column;
       gap: 12px;
 
       &::-webkit-scrollbar {
-        width: 4px;
-      }
-      &::-webkit-scrollbar-track {
-        background: transparent;
+        width: 12px;
+        height: 4px;
       }
       &::-webkit-scrollbar-thumb {
-        background-color: rgba(255, 255, 255, 0.2);
-        border-radius: 2px;
+        background-color: rgba(0, 0, 0, 0.5);
+        border-radius: 9999px;
+        border: 3px solid transparent;
+        background-clip: padding-box;
       }
     }
 
@@ -296,9 +300,9 @@ var ee = D`
       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, {
+`, P = "--DATAGRIDMENU", F = ({ columnKey: e, pendingSearch: n, onSearchChange: r, searchLabel: i = "Search" }) => /* @__PURE__ */ t("div", {
+	className: `${P}-searchInput`,
+	children: /* @__PURE__ */ t(m, {
 		name: `search-${e}`,
 		label: i,
 		value: n,
@@ -306,33 +310,33 @@ var ee = D`
 		showErrorText: !1,
 		width: "full",
 		autoFocus: !0,
-		"data-testid": `${N}-searchInput-${e}`,
+		"data-testid": `${P}-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, {
+}), I = "--DATAGRIDMENU", L = ({ filterType: e, columnKey: i, options: a, pendingMulti: o, onMultiChange: c, multiSearch: l, onMultiSearchChange: u }) => {
+	let d = e === "multiselect-search", f = a.filter((e) => !l || e.label.toLowerCase().includes(l.toLowerCase()));
+	return /* @__PURE__ */ n(r, { children: [d && /* @__PURE__ */ t("div", {
+		className: `${I}-searchInput`,
+		children: /* @__PURE__ */ t(m, {
 			name: `multiSearch-${i}`,
 			label: "Search options",
-			value: u,
-			onValueChange: d,
+			value: l,
+			onValueChange: u,
 			showErrorText: !1,
 			width: "full",
 			autoFocus: !0,
-			"data-testid": `${F}-multiSearch-${i}`
+			"data-testid": `${I}-multiSearch-${i}`
 		})
 	}), /* @__PURE__ */ t("div", {
-		className: `${F}-optionsList`,
-		"data-testid": `${F}-optionsList-${i}`,
-		children: p.map((e) => /* @__PURE__ */ n("div", {
-			className: `${F}-optionRow`,
+		className: `${I}-optionsList`,
+		"data-testid": `${I}-optionsList-${i}`,
+		children: f.map((e) => /* @__PURE__ */ n("div", {
+			className: `${I}-optionRow`,
 			children: [e.color && /* @__PURE__ */ t("span", {
-				className: `${F}-optionDot`,
+				className: `${I}-optionDot`,
 				style: { backgroundColor: e.color },
 				"aria-hidden": "true"
 			}), /* @__PURE__ */ t(s, {
@@ -340,71 +344,71 @@ var ee = D`
 				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}`
+				"data-testid": `${I}-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(() => {
+}, R = "--DATAGRIDMENU", z = ({ filterType: e, options: r, columnKey: i, filterTitle: a, searchLabel: s, cancelLabel: c = "Cancel", applyLabel: l = "Apply", pendingSearch: d, onSearchChange: p, pendingMulti: m, onMultiChange: h, multiSearch: g, onMultiSearchChange: _, onCancel: v, onApply: y, onClear: b, anchorEl: x, style: S }) => {
+	let C = T(null);
+	return ee(() => {
 		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`;
+			if (!C.current) return;
+			let e = x.getBoundingClientRect(), t = C.current.offsetWidth, n = e.left + e.width / 2 - t / 2;
+			C.current.style.top = `${e.bottom + 8}px`, C.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),
+		ref: C,
+		className: R,
+		css: N(S),
 		"data-popover-key": i,
-		"data-testid": `${L}-${i}`,
+		"data-testid": `${R}-${i}`,
 		children: [
 			/* @__PURE__ */ n("div", {
-				className: `${L}-header`,
+				className: `${R}-header`,
 				children: [/* @__PURE__ */ t("span", {
-					className: `${L}-headerTitle`,
+					className: `${R}-headerTitle`,
 					children: a
-				}), /* @__PURE__ */ t(h, {
+				}), /* @__PURE__ */ t(u, {
 					icon: /* @__PURE__ */ t(o, {
 						name: "delete_outline",
 						size: "sm"
 					}),
 					onClick: b,
 					"aria-label": "Clear filter",
-					"data-testid": `${L}-clearBtn-${i}`
+					"data-testid": `${R}-clearBtn-${i}`
 				})]
 			}),
 			/* @__PURE__ */ n("div", {
-				className: `${L}-content`,
-				children: [e === "search" && /* @__PURE__ */ t(P, {
+				className: `${R}-content`,
+				children: [e === "search" && /* @__PURE__ */ t(F, {
 					columnKey: i,
 					pendingSearch: d,
-					onSearchChange: f,
+					onSearchChange: p,
 					searchLabel: s
-				}), (e === "multiselect" || e === "multiselect-search") && /* @__PURE__ */ t(I, {
+				}), (e === "multiselect" || e === "multiselect-search") && /* @__PURE__ */ t(L, {
 					filterType: e,
 					columnKey: i,
 					options: r ?? [],
-					pendingMulti: p,
-					onMultiChange: m,
+					pendingMulti: m,
+					onMultiChange: h,
 					multiSearch: g,
 					onMultiSearchChange: _
 				})]
 			}),
 			/* @__PURE__ */ n("div", {
-				className: `${L}-actions`,
-				children: [/* @__PURE__ */ t(u, {
+				className: `${R}-actions`,
+				children: [/* @__PURE__ */ t(f, {
 					onClick: v,
-					"data-testid": `${L}-cancelBtn-${i}`,
+					"data-testid": `${R}-cancelBtn-${i}`,
 					variant: "ghost",
 					children: c
-				}), /* @__PURE__ */ t(u, {
+				}), /* @__PURE__ */ t(f, {
 					onClick: y,
-					"data-testid": `${L}-applyBtn-${i}`,
+					"data-testid": `${R}-applyBtn-${i}`,
 					children: l
 				})]
 			})
@@ -412,27 +416,27 @@ var ee = D`
 	}), document.body);
 }, ne = ({ theme: n, variant: r = "default", ...i }) => {
 	let { componentStyles: a } = e([c.DATAGRIDMENU], n, r.toUpperCase());
-	return /* @__PURE__ */ t(R, {
+	return /* @__PURE__ */ t(z, {
 		...i,
 		style: a
 	});
-}, z = "--DATAGRID", re = ({ columns: e, pageSize: n }) => {
+}, B = "--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`,
+		className: `${B}-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, {
+			className: [`${B}-td`, e.type === "options" ? `${B}-tdOptions` : ""].filter(Boolean).join(" "),
+			children: e.type === "options" ? /* @__PURE__ */ t(j, {
 				variant: "circular",
 				width: 24,
 				height: 24
-			}) : /* @__PURE__ */ t(A, {
+			}) : /* @__PURE__ */ t(j, {
 				height: 16,
 				width: i[r][n] ?? void 0
 			})
 		}, e.key))
 	}, r)) });
-}, B = (e) => D`
+}, V = (e) => D`
   &.--PAGINATION {
     display: flex;
     align-items: center;
@@ -469,7 +473,7 @@ var ee = D`
       }
     }
   }
-`, V = (e, t) => `
+`, H = (e, t) => `
     // BACKGROUNDS
     ${a(e, "background-color", `--PAGINATIONMENU-EVENTS-${t}-BACKGROUND-COLOR`)}
     
@@ -478,11 +482,11 @@ var ee = D`
     ${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) => `
+`, U = (e, t) => `
     // TYPOGRAPHY
     ${a(e, "color", `--PAGINATIONMENU-EVENTS-${t}-COLOR-PRIMARY`)};
     ${a(e, "caret-color", `--PAGINATIONMENU-EVENTS-${t}-COLOR-PRIMARY`)};
-`, ie = (e, t) => `
+`, W = (e, t) => `
     // BACKGROUNDS
     ${a(e, "background-color", `--PAGINATIONMENU-${t}-BACKGROUND-COLOR`)}
         
@@ -491,7 +495,7 @@ var ee = D`
     ${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`
+`, G = (e) => D`
   &.--PAGINATIONMENU {
     position: absolute;
     bottom: calc(100% + ${e["--PAGINATIONMENU-ROOT-BOTTOM"] || ""});
@@ -506,7 +510,7 @@ var ee = D`
       rgba(0, 0, 0, 0.14) 0px 8px 10px 1px,
       rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
 
-    ${ie(e, "ROOT")}
+    ${W(e, "ROOT")}
 
     .--PAGINATIONMENU-option {
       all: unset;
@@ -519,111 +523,111 @@ var ee = D`
       font-size: 0.8125rem;
 
       // ENABLED
-      ${V(e, "ENABLED")}
       ${H(e, "ENABLED")}
+      ${U(e, "ENABLED")}
 
       // VALUE
       &.--PAGINATIONMENU-selected {
-        ${V(e, "VALUE")}
         ${H(e, "VALUE")}
+        ${U(e, "VALUE")}
       }
 
       // HOVER
       &:hover {
-        ${V(e, "HOVER")}
         ${H(e, "HOVER")}
+        ${U(e, "HOVER")}
       }
 
       // - ACTIVE
       &:active,
       &.--PAGINATIONMENU-active {
-        ${V(e, "ACTIVE")}
         ${H(e, "ACTIVE")}
+        ${U(e, "ACTIVE")}
       }
 
       // FOCUS
       &:focus-visible {
         outline-offset: 0px;
         outline: 0;
-        ${V(e, "FOCUS")}
         ${H(e, "FOCUS")}
+        ${U(e, "FOCUS")}
       }
     }
   }
-`, W = "--PAGINATIONMENU", G = ({ options: e, activeOption: n, onSelect: r, focusedElement: i = -1, style: a }) => /* @__PURE__ */ t("div", {
-	className: W,
-	css: U(a),
+`, K = "--PAGINATIONMENU", q = ({ options: e, activeOption: n, onSelect: r, focusedElement: i = -1, style: a }) => /* @__PURE__ */ t("div", {
+	className: K,
+	css: G(a),
 	children: e.map((e, a) => {
-		let o = e === n ? `${W}-selected` : "", s = i === a;
+		let o = e === n ? `${K}-selected` : "", s = i === a;
 		return /* @__PURE__ */ t("button", {
 			className: [
-				`${W}-option`,
+				`${K}-option`,
 				o,
-				s ? `${W}-active` : ""
+				s ? `${K}-active` : ""
 			].filter(Boolean).join(" "),
 			onClick: () => r(e),
 			children: e
 		}, e);
 	})
-}), K = ({ theme: n, variant: r = "default", ...i }) => {
+}), J = ({ theme: n, variant: r = "default", ...i }) => {
 	let { componentStyles: a } = e([c.PAGINATIONMENU], n, r.toUpperCase());
-	return /* @__PURE__ */ t(G, {
+	return /* @__PURE__ */ t(q, {
 		...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);
+}, Y = "--PAGINATION", X = ({ page: e, total: r, pageSize: i, onPageChange: a, pageSizeOptions: s, onPageSizeChange: c, loading: l, className: d, style: f }) => {
+	let [p, m] = E(!1), [h, 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, S = () => {
+		m(!1), g(-1);
 	};
-	return S(() => {
-		if (!f) return;
+	return C(() => {
+		if (!p) return;
 		let e = (e) => {
-			e.target.closest(`.${q}-rowsControl`) || (p(!1), g(-1));
+			e.target.closest(`.${Y}-rowsControl`) || (m(!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 ?? {}),
+	}, [p]), /* @__PURE__ */ n("div", {
+		className: [Y, d || ""].filter(Boolean).join(" "),
+		css: V(f ?? {}),
 		children: [s && s.length > 0 && /* @__PURE__ */ n("div", {
-			className: `${q}-rowsControl`,
+			className: `${Y}-rowsControl`,
 			children: [
-				f && /* @__PURE__ */ t(K, {
+				p && /* @__PURE__ */ t(J, {
 					options: s,
 					activeOption: i,
 					onSelect: (e) => {
-						c?.(e), C();
+						c?.(e), S();
 					},
-					focusedElement: m
+					focusedElement: h
 				}),
 				/* @__PURE__ */ t("span", {
-					className: `${q}-rowsSize`,
+					className: `${Y}-rowsSize`,
 					children: i
 				}),
-				/* @__PURE__ */ t(h, {
+				/* @__PURE__ */ t(u, {
 					icon: /* @__PURE__ */ t(o, {
 						name: "arrow_drop_up",
 						size: "sm"
 					}),
-					onClick: () => f ? C() : p(!0),
+					onClick: () => p ? S() : m(!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) {
+						if (e.key === "Tab" || e.key === "Escape") m(!1), g(-1);
+						else if (["ArrowDown", "ArrowUp"].includes(e.key) && p) 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" && p && h >= 0 && s) {
 							e.preventDefault();
-							let t = s[m];
-							t !== void 0 && (c?.(t), p(!1), g(-1));
+							let t = s[h];
+							t !== void 0 && (c?.(t), m(!1), g(-1));
 						}
 					},
-					isFlipped: f,
+					isFlipped: p,
 					"aria-label": "Rows per page",
-					"data-testid": `${q}-rowsBtn`
+					"data-testid": `${Y}-rowsBtn`
 				})
 			]
 		}), /* @__PURE__ */ n("div", {
-			className: `${q}-controls`,
+			className: `${Y}-controls`,
 			children: [
 				/* @__PURE__ */ n("span", {
-					className: `${q}-info`,
+					className: `${Y}-info`,
 					children: [
 						v,
 						"-",
@@ -632,7 +636,7 @@ var ee = D`
 						r
 					]
 				}),
-				/* @__PURE__ */ t(h, {
+				/* @__PURE__ */ t(u, {
 					icon: /* @__PURE__ */ t(o, {
 						name: "first_page",
 						size: "sm"
@@ -640,9 +644,9 @@ var ee = D`
 					onClick: () => a(0),
 					disabled: l || b,
 					"aria-label": "First page",
-					"data-testid": `${q}-first`
+					"data-testid": `${Y}-first`
 				}),
-				/* @__PURE__ */ t(h, {
+				/* @__PURE__ */ t(u, {
 					icon: /* @__PURE__ */ t(o, {
 						name: "chevron_left",
 						size: "sm"
@@ -650,9 +654,9 @@ var ee = D`
 					onClick: () => a(e - 1),
 					disabled: l || b,
 					"aria-label": "Previous page",
-					"data-testid": `${q}-prev`
+					"data-testid": `${Y}-prev`
 				}),
-				/* @__PURE__ */ t(h, {
+				/* @__PURE__ */ t(u, {
 					icon: /* @__PURE__ */ t(o, {
 						name: "chevron_right",
 						size: "sm"
@@ -660,9 +664,9 @@ var ee = D`
 					onClick: () => a(e + 1),
 					disabled: l || x,
 					"aria-label": "Next page",
-					"data-testid": `${q}-next`
+					"data-testid": `${Y}-next`
 				}),
-				/* @__PURE__ */ t(h, {
+				/* @__PURE__ */ t(u, {
 					icon: /* @__PURE__ */ t(o, {
 						name: "last_page",
 						size: "sm"
@@ -670,28 +674,28 @@ var ee = D`
 					onClick: () => a(_ - 1),
 					disabled: l || x,
 					"aria-label": "Last page",
-					"data-testid": `${q}-last`
+					"data-testid": `${Y}-last`
 				})
 			]
 		})]
 	});
-}, Y = ({ theme: n, variant: r = "default", ...i }) => {
+}, ie = ({ theme: n, variant: r = "default", ...i }) => {
 	let { componentStyles: a } = e([c.PAGINATION], n, r.toUpperCase());
-	return /* @__PURE__ */ t(J, {
+	return /* @__PURE__ */ t(X, {
 		...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(() => {
+}, Z = "--DATAGRID", ae = 10, Q = ({ columns: e, onFetch: i, paginationType: a = "pagination", pageSize: s = ae, pageSizeOptions: c, emptyContent: l = /* @__PURE__ */ t("span", { children: "No se han encontrado resultados" }), loadingMoreContent: d = /* @__PURE__ */ t("span", { children: "Cargando..." }), className: f, style: p }) => {
+	let [m, h] = E([]), [g, _] = E(0), [v, y] = E(0), [b, x] = E(s), [w, D] = E(!0), [O, k] = E(null), [A, j] = E({}), [M, N] = E(null), [P, F] = E(null), [I, L] = E(""), [R, z] = E([]), [B, V] = E(""), [H, U] = E([]), [W, G] = E(0), K = T({}), q = T(null), J = T(null);
+	C(() => {
 		let e = !1;
 		return i({
 			page: v,
 			pageSize: b,
 			filters: A,
-			sort: k ?? void 0
+			sort: O ?? void 0
 		}).then((t) => {
-			e || (m((e) => a === "scroll" && v > 0 ? [...e, ...t.data] : t.data), _(t.total), O(!1));
+			e || (h((e) => a === "scroll" && v > 0 ? [...e, ...t.data] : t.data), _(t.total), D(!1));
 		}), () => {
 			e = !0;
 		};
@@ -699,34 +703,34 @@ var ee = D`
 		v,
 		b,
 		A,
-		k,
+		O,
 		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));
+	]), ee(() => {
+		a !== "scroll" || !q.current || !J.current || (U(Array.from(q.current.querySelectorAll(`th:not(.${Z}-thScrollbarSpacer)`)).map((e) => e.offsetWidth)), G(J.current.offsetWidth - J.current.clientWidth));
 	}, [
 		a,
 		e.length,
-		D
-	]), S(() => {
+		w
+	]), C(() => {
 		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) => {
+	let Y = (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) => {
+		e.filter.type === "search" ? L(typeof t == "string" ? t : "") : (z(Array.isArray(t) ? t : []), V("")), F(K.current[e.key] ?? null), N(e.key);
+	}, X = (e) => {
 		if (!e.filter) return;
 		let t = e.filter.type === "search" ? I : R;
-		O(!0), j((n) => ({
+		D(!0), j((n) => ({
 			...n,
 			[e.key]: t
 		})), y(0), N(null);
@@ -734,7 +738,7 @@ var ee = D`
 		let t = A[e];
 		return t == null ? !1 : Array.isArray(t) ? t.length > 0 : t !== "";
 	}, oe = (e) => {
-		O(!0), ee((t) => t?.key === e ? {
+		D(!0), k((t) => t?.key === e ? {
 			key: e,
 			direction: t.direction === "asc" ? "desc" : "asc"
 		} : {
@@ -742,145 +746,145 @@ var ee = D`
 			direction: "asc"
 		}), y(0);
 	}, se = (e) => {
-		O(!0), y(e);
+		D(!0), y(e);
 	}, ce = (e) => {
-		O(!0), w(e), y(0);
-	}, le = x((e) => {
-		if (a !== "scroll" || D || p.length >= g) return;
+		D(!0), x(e), y(0);
+	}, le = S((e) => {
+		if (a !== "scroll" || w || m.length >= g) return;
 		let { scrollTop: t, scrollHeight: n, clientHeight: r } = e.currentTarget;
-		n - t - r < 48 && (O(!0), y((e) => e + 1));
+		n - t - r < 48 && (D(!0), y((e) => e + 1));
 	}, [
 		a,
-		D,
-		p.length,
+		w,
+		m.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(" "),
+	]), ue = e.length, $ = M ? e.find((e) => e.key === M) : void 0, de = b * 48, fe = !w && m.length === 0, pe = e.map((e) => /* @__PURE__ */ t("th", {
+		className: [`${Z}-th`, e.type === "options" ? `${Z}-thOptions` : ""].join(" "),
 		style: e.width ? { width: e.width } : void 0,
 		children: /* @__PURE__ */ n("div", {
-			className: `${X}-thInner`,
-			"data-testid": `${X}-th-${e.key}`,
+			className: `${Z}-thInner`,
+			"data-testid": `${Z}-th-${e.key}`,
 			children: [/* @__PURE__ */ t("span", {
-				className: `${X}-thLabel`,
+				className: `${Z}-thLabel`,
 				children: e.label
 			}), e.type !== "options" && /* @__PURE__ */ n("div", {
-				className: `${X}-thActions`,
+				className: `${Z}-thActions`,
 				children: [e.filter && /* @__PURE__ */ t("div", {
-					className: `${X}-filterContainer`,
+					className: `${Z}-filterContainer`,
 					"data-popover-key": e.key,
 					children: /* @__PURE__ */ t("span", {
 						ref: (t) => {
-							G.current[e.key] = t;
+							K.current[e.key] = t;
 						},
-						children: /* @__PURE__ */ t(h, {
+						children: /* @__PURE__ */ t(u, {
 							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}`,
+							onClick: () => Y(e),
+							"data-testid": `${Z}-filterBtn-${e.key}`,
 							"aria-label": `Filter ${e.label}`
 						})
 					})
-				}), e.sortable !== !1 && /* @__PURE__ */ t(h, {
+				}), e.sortable !== !1 && /* @__PURE__ */ t(u, {
 					icon: /* @__PURE__ */ t(o, {
-						name: k?.key === e.key ? k.direction === "asc" ? "arrow_upward" : "arrow_downward" : "unfold_more",
+						name: O?.key === e.key ? O.direction === "asc" ? "arrow_upward" : "arrow_downward" : "unfold_more",
 						size: "sm",
-						style: { color: k?.key === e.key ? "white" : "" }
+						style: { color: O?.key === e.key ? "white" : "" }
 					}),
 					onClick: () => oe(e.key),
-					"data-testid": `${X}-sortBtn-${e.key}`,
+					"data-testid": `${Z}-sortBtn-${e.key}`,
 					"aria-label": `Sort ${e.label}`
 				})]
 			})]
 		})
-	}, e.key)), me = D && (a !== "scroll" || p.length === 0) ? /* @__PURE__ */ t(re, {
+	}, e.key)), me = w && (a !== "scroll" || m.length === 0) ? /* @__PURE__ */ t(re, {
 		columns: e,
 		pageSize: b
 	}) : fe ? /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t("td", {
 		colSpan: ue,
-		className: `${X}-emptyCell`,
+		className: `${Z}-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}`,
+	}) }) : /* @__PURE__ */ n(r, { children: [m.map((n, r) => /* @__PURE__ */ t("tr", {
+		className: `${Z}-row`,
+		"data-testid": `${Z}-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}`,
+				className: [`${Z}-td`, e.type === "options" ? `${Z}-tdOptions` : ""].filter(Boolean).join(" "),
+				"data-testid": `${Z}-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", {
+	}, r)), a === "scroll" && w && /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t("td", {
 		colSpan: ue,
-		className: `${X}-loadingMore`,
-		children: u
+		className: `${Z}-loadingMore`,
+		children: d
 	}) })] });
 	return /* @__PURE__ */ n("div", {
-		className: [X, d || ""].join(" "),
-		css: te(f),
-		"data-testid": X,
+		className: [Z, f || ""].join(" "),
+		css: te(p),
+		"data-testid": Z,
 		children: [
 			/* @__PURE__ */ t("div", {
-				className: `${X}-tableContainer`,
+				className: `${Z}-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`,
+					className: `${Z}-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: W || 0 } })] }), /* @__PURE__ */ t("thead", {
+						ref: q,
+						className: `${Z}-thead`,
 						children: /* @__PURE__ */ n("tr", {
-							className: `${X}-headerRow`,
+							className: `${Z}-headerRow`,
 							children: [pe, /* @__PURE__ */ t("th", {
 								"aria-hidden": "true",
-								className: `${X}-thScrollbarSpacer`,
+								className: `${Z}-thScrollbarSpacer`,
 								style: { padding: 0 }
 							})]
 						})
 					})]
 				}), /* @__PURE__ */ t("div", {
-					ref: q,
-					className: `${X}-bodyContainer`,
+					ref: J,
+					className: `${Z}-bodyContainer`,
 					style: {
 						overflowY: "auto",
 						maxHeight: `${de}px`
 					},
 					onScroll: le,
 					children: /* @__PURE__ */ n("table", {
-						className: `${X}-table`,
+						className: `${Z}-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`,
+							className: `${Z}-tbody`,
 							children: me
 						})]
 					})
 				})] }) : /* @__PURE__ */ n("table", {
-					className: `${X}-table`,
+					className: `${Z}-table`,
 					children: [/* @__PURE__ */ t("thead", {
-						className: `${X}-thead`,
+						className: `${Z}-thead`,
 						children: /* @__PURE__ */ t("tr", {
-							className: `${X}-headerRow`,
+							className: `${Z}-headerRow`,
 							children: pe
 						})
 					}), /* @__PURE__ */ t("tbody", {
-						className: `${X}-tbody`,
+						className: `${Z}-tbody`,
 						children: me
 					})]
 				})
 			}),
-			a === "pagination" && /* @__PURE__ */ t(Y, {
+			a === "pagination" && /* @__PURE__ */ t(ie, {
 				page: v,
 				total: g,
 				pageSize: b,
 				onPageChange: se,
 				pageSizeOptions: c,
 				onPageSizeChange: ce,
-				loading: D
+				loading: w
 			}),
 			$?.filter && /* @__PURE__ */ t(ne, {
 				filterType: $.filter.type,
@@ -897,7 +901,7 @@ var ee = D`
 				multiSearch: B,
 				onMultiSearchChange: V,
 				onCancel: () => N(null),
-				onApply: () => Z($),
+				onApply: () => X($),
 				onClear: () => {
 					$.filter?.type === "search" ? L("") : (z([]), V(""));
 				},
@@ -905,14 +909,14 @@ var ee = D`
 			})
 		]
 	});
-}, Q = ({ theme: n, variant: r = "default", ...i }) => {
+}, oe = ({ theme: n, variant: r = "default", ...i }) => {
 	let { componentStyles: a } = e([c.DATAGRID], n, r.toUpperCase());
-	return /* @__PURE__ */ t(Z, {
+	return /* @__PURE__ */ t(Q, {
 		...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 };
+export { f as Button, s as Checkbox, y as CheckboxGroup, v as CheckboxTree, oe as DataGrid, g as DatePicker, o as Icon, u as IconButton, l as NumberField, ie as Pagination, d as Radio, b as RadioGroup, h as Select, j as Skeleton, p as Slider, _ as Switch, m as TextField, x as ThemeProvider, i as darkTheme };
 
 //# sourceMappingURL=index.mjs.map