@foi/design-system 0.0.17 → 0.0.19

package/dist/index.mjs

@@ -1,14 +1,15 @@
-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 { n as o, o as s, r as c, s as l } from "./RadioGroup.context-Bu218uUX.js";
-import { a as u, c as d, i as f, n as p, o as m, r as h, s as g, t as _ } from "./Switch-oAVuMb0V.js";
-import { i as v, n as y, r as b, t as x } from "./RadioGroup-DzEJw4WJ.js";
-import { t as S } from "./ThemeProvider-C47pyWG6.js";
-import { useCallback as C, useEffect as w, useLayoutEffect as ee, useMemo as T, useRef as E, useState as D } from "react";
-import { css as O, keyframes as te } from "@emotion/react";
-import k from "react-dom";
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./IconButton-C3x-E-ot.js";
+import { n as s, r as c } from "./theme-BjrtNRDQ.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-6eNmT34-.js";
+import { n as _ } from "./RadioGroup.context-v_CCYB7_.js";
+import { i as v, n as y, r as b, t as x } from "./RadioGroup-Cvt9MtvM.js";
+import { n as S } from "./Toast-_9W7YGxS.js";
+import { t as C } from "./ThemeProvider-C_PzAJz3.js";
+import { useCallback as ee, useEffect as w, useLayoutEffect as T, useMemo as E, useRef as D, useState as O } from "react";
+import { css as k, keyframes as A } from "@emotion/react";
+import te from "react-dom";
 //#region src/components/atoms/Skeleton/Skeleton.emotion.ts
-var A = O`
+var j = k`
   &.--SKELETON {
     display: block;
     background: linear-gradient(
@@ -18,7 +19,7 @@ var A = O`
       rgba(255, 255, 255, 0.05) 100%
     );
     background-size: 200% 100%;
-    animation: ${te`
+    animation: ${A`
   0% { background-position: 200% center; }
   100% { background-position: -200% center; }
 `} 1.4s ease infinite;
@@ -31,28 +32,28 @@ var A = O`
       border-radius: 4px;
     }
   }
-`, j = ({ variant: e = "rectangular", width: n, height: r, className: i }) => /* @__PURE__ */ t("span", {
+`, M = ({ variant: e = "rectangular", width: n, height: r, className: i }) => /* @__PURE__ */ t("span", {
 	className: [
 		"--SKELETON",
 		`--SKELETON--${e}`,
 		i || ""
 	].filter(Boolean).join(" "),
-	css: A,
+	css: j,
 	style: {
 		width: n,
 		height: r
 	},
 	"aria-hidden": "true"
-}), ne = (e) => O`
+}), ne = (e) => k`
   &.--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")};
+    ${c(e, "background-color", "--DATAGRID-ROOT-BACKGROUND-COLOR")};
+    ${c(e, "border-color", "--DATAGRID-ROOT-BORDER-COLOR")};
+    ${c(e, "border-width", "--DATAGRID-ROOT-BORDER-WIDTH")};
+    ${c(e, "border-radius", "--DATAGRID-ROOT-BORDER-RADIUS")};
+    ${c(e, "border-style", "--DATAGRID-ROOT-BORDER-STYLE")};
 
     .--DATAGRID-tableContainer {
       width: 100%;
@@ -87,15 +88,15 @@ var A = O`
           height: 48px;
 
           .--DATAGRID-th {
-            ${a(e, "background-color", "--DATAGRID-ROOT-BACKGROUND-COLOR")};
+            ${c(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")};
+            ${c(e, "border-bottom-color", "--DATAGRID-ROOT-BORDER-COLOR")};
+            ${c(e, "border-bottom-width", "--DATAGRID-ROOT-BORDER-WIDTH")};
+            ${c(e, "border-bottom-style", "--DATAGRID-ROOT-BORDER-STYLE")};
 
             &.--DATAGRID-thOptions {
               width: 80px;
@@ -115,11 +116,11 @@ var A = O`
               }
 
               .--DATAGRID-filterActive {
-                ${a(e, "color", "--DATAGRID-EVENTS-ENABLED-ICON-COLOR")};
+                ${c(e, "color", "--DATAGRID-EVENTS-ENABLED-ICON-COLOR")};
               }
 
               .--DATAGRID-thLabel {
-                ${a(e, "color", "--DATAGRID-EVENTS-ENABLED-COLOR-SECONDARY")};
+                ${c(e, "color", "--DATAGRID-EVENTS-ENABLED-COLOR-SECONDARY")};
 
                 font-family: ${e["--FONTFAMILY-PRIMARY"]};
                 font-size: 0.875rem;
@@ -135,7 +136,7 @@ var A = O`
                 gap: 4px;
 
                 .--DATAGRID-filterLabel {
-                  ${a(e, "color", "--DATAGRID-EVENTS-ENABLED-COLOR-SECONDARY")};
+                  ${c(e, "color", "--DATAGRID-EVENTS-ENABLED-COLOR-SECONDARY")};
 
                   font-family: ${e["--FONTFAMILY-PRIMARY"]};
                   font-size: 0.75rem;
@@ -153,12 +154,12 @@ var A = O`
           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")};
+          ${c(e, "border-bottom-color", "--DATAGRID-ROOT-BORDER-COLOR")};
+          ${c(e, "border-bottom-width", "--DATAGRID-ROOT-BORDER-WIDTH")};
+          ${c(e, "border-bottom-style", "--DATAGRID-ROOT-BORDER-STYLE")};
 
           &:hover {
-            ${a(e, "background-color", "--DATAGRID-EVENTS-HOVER-BACKGROUND-COLOR")};
+            ${c(e, "background-color", "--DATAGRID-EVENTS-HOVER-BACKGROUND-COLOR")};
           }
 
           &:last-child {
@@ -167,7 +168,7 @@ var A = O`
         }
 
         .--DATAGRID-td {
-          ${a(e, "color", "--DATAGRID-EVENTS-ENABLED-COLOR-PRIMARY")};
+          ${c(e, "color", "--DATAGRID-EVENTS-ENABLED-COLOR-PRIMARY")};
 
           padding: 8px 16px;
           vertical-align: middle;
@@ -183,7 +184,7 @@ var A = O`
           text-align: center;
           vertical-align: middle;
 
-          ${a(e, "color", "--DATAGRID-EVENTS-ENABLED-COLOR-SECONDARY")};
+          ${c(e, "color", "--DATAGRID-EVENTS-ENABLED-COLOR-SECONDARY")};
 
           font-family: ${e["--FONTFAMILY-PRIMARY"]};
           font-size: 0.875rem;
@@ -196,7 +197,7 @@ var A = O`
           height: 48px;
           vertical-align: middle;
 
-          ${a(e, "color", "--DATAGRID-EVENTS-ENABLED-COLOR-SECONDARY")};
+          ${c(e, "color", "--DATAGRID-EVENTS-ENABLED-COLOR-SECONDARY")};
 
           font-family: ${e["--FONTFAMILY-PRIMARY"]};
           font-size: 0.875rem;
@@ -213,16 +214,16 @@ var A = O`
       padding: 12px 16px !important;
     }
   }
-`, M = (e, t) => `
+`, re = (e, t) => `
     // BACKGROUNDS
-    ${a(e, "background-color", `--DATAGRIDMENU-${t}-BACKGROUND-COLOR`)}
+    ${c(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`)}
-`, N = (e) => O`
+    ${c(e, "border-color", `--DATAGRIDMENU-${t}-BORDER-COLOR`)}
+    ${c(e, "border-width", `--DATAGRIDMENU-${t}-BORDER-WIDTH`)}
+    ${c(e, "border-style", `--DATAGRIDMENU-${t}-BORDER-STYLE`)}
+    ${c(e, "border-radius", `--DATAGRIDMENU-${t}-BORDER-RADIUS`)}
+`, N = (e) => k`
   &.--DATAGRIDMENU {
     position: fixed;
     z-index: 200;
@@ -236,7 +237,7 @@ var A = O`
       rgba(0, 0, 0, 0.14) 0px 8px 10px 1px,
       rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
 
-    ${M(e, "ROOT")}
+    ${re(e, "ROOT")}
 
     .--DATAGRIDMENU-header {
       display: flex;
@@ -244,7 +245,7 @@ var A = O`
       justify-content: space-between;
 
       .--DATAGRIDMENU-headerTitle {
-        ${a(e, "color", "--DATAGRIDMENU-EVENTS-ENABLED-COLOR-PRIMARY")};
+        ${c(e, "color", "--DATAGRIDMENU-EVENTS-ENABLED-COLOR-PRIMARY")};
         font-family: ${e["--FONTFAMILY-PRIMARY"]};
         font-size: 0.875rem;
         font-weight: 600;
@@ -300,57 +301,57 @@ var A = O`
       justify-content: flex-end;
     }
   }
-`, P = "--DATAGRIDMENU", F = ({ columnKey: e, pendingSearch: n, onSearchChange: r, searchLabel: i = "Search" }) => /* @__PURE__ */ t("div", {
+`, P = "--DATAGRIDMENU", F = ({ columnKey: e, pendingSearch: r, onSearchChange: i, searchLabel: a = "Search" }) => /* @__PURE__ */ t("div", {
 	className: `${P}-searchInput`,
-	children: /* @__PURE__ */ t(m, {
+	children: /* @__PURE__ */ t(p, {
 		name: `search-${e}`,
-		label: i,
-		value: n,
-		onValueChange: r,
+		label: a,
+		value: r,
+		onValueChange: i,
 		showErrorText: !1,
 		width: "full",
 		autoFocus: !0,
 		"data-testid": `${P}-searchInput-${e}`,
-		startAdornment: /* @__PURE__ */ t(s, {
+		startAdornment: /* @__PURE__ */ t(n, {
 			name: "search",
 			style: { color: "white" }
 		})
 	})
-}), I = "--DATAGRIDMENU", L = ({ filterType: e, columnKey: i, options: a, pendingMulti: o, onMultiChange: s, 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", {
+}), I = "--DATAGRIDMENU", L = ({ filterType: n, columnKey: r, options: a, pendingMulti: o, onMultiChange: s, multiSearch: c, onMultiSearchChange: l }) => {
+	let u = n === "multiselect-search", d = a.filter((e) => !c || e.label.toLowerCase().includes(c.toLowerCase()));
+	return /* @__PURE__ */ e(i, { children: [u && /* @__PURE__ */ t("div", {
 		className: `${I}-searchInput`,
-		children: /* @__PURE__ */ t(m, {
-			name: `multiSearch-${i}`,
+		children: /* @__PURE__ */ t(p, {
+			name: `multiSearch-${r}`,
 			label: "Search options",
-			value: l,
-			onValueChange: u,
+			value: c,
+			onValueChange: l,
 			showErrorText: !1,
 			width: "full",
 			autoFocus: !0,
-			"data-testid": `${I}-multiSearch-${i}`
+			"data-testid": `${I}-multiSearch-${r}`
 		})
 	}), /* @__PURE__ */ t("div", {
 		className: `${I}-optionsList`,
-		"data-testid": `${I}-optionsList-${i}`,
-		children: f.map((e) => /* @__PURE__ */ n("div", {
+		"data-testid": `${I}-optionsList-${r}`,
+		children: d.map((n) => /* @__PURE__ */ e("div", {
 			className: `${I}-optionRow`,
-			children: [e.color && /* @__PURE__ */ t("span", {
+			children: [n.color && /* @__PURE__ */ t("span", {
 				className: `${I}-optionDot`,
-				style: { backgroundColor: e.color },
+				style: { backgroundColor: n.color },
 				"aria-hidden": "true"
-			}), /* @__PURE__ */ t(c, {
-				checked: o.includes(e.value),
-				onChecked: (t) => s(t ? [...o, e.value] : o.filter((t) => t !== e.value)),
-				label: e.label,
+			}), /* @__PURE__ */ t(_, {
+				checked: o.includes(n.value),
+				onChecked: (e) => s(e ? [...o, n.value] : o.filter((e) => e !== n.value)),
+				label: n.label,
 				showErrorText: !1,
-				"data-testid": `${I}-option-${i}-${e.value}`
+				"data-testid": `${I}-option-${r}-${n.value}`
 			})]
-		}, e.value))
+		}, n.value))
 	})] });
-}, R = "--DATAGRIDMENU", z = ({ filterType: e, options: r, columnKey: i, filterTitle: a, searchLabel: c, cancelLabel: l = "Cancel", applyLabel: u = "Apply", pendingSearch: f, onSearchChange: p, pendingMulti: m, onMultiChange: h, multiSearch: g, onMultiSearchChange: _, onCancel: v, onApply: y, onClear: b, anchorEl: x, style: S }) => {
-	let C = E(null);
-	return ee(() => {
+}, R = "--DATAGRIDMENU", z = ({ filterType: r, options: i, columnKey: a, filterTitle: s, searchLabel: c, cancelLabel: l = "Cancel", applyLabel: d = "Apply", pendingSearch: f, onSearchChange: p, pendingMulti: m, onMultiChange: h, multiSearch: g, onMultiSearchChange: _, onCancel: v, onApply: y, onClear: b, anchorEl: x, style: S }) => {
+	let C = D(null);
+	return T(() => {
 		if (!x) return;
 		let e = () => {
 			if (!C.current) return;
@@ -360,83 +361,83 @@ var A = O`
 		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", {
+	}, [x]), te.createPortal(/* @__PURE__ */ e("div", {
 		ref: C,
 		className: R,
 		css: N(S),
-		"data-popover-key": i,
-		"data-testid": `${R}-${i}`,
+		"data-popover-key": a,
+		"data-testid": `${R}-${a}`,
 		children: [
-			/* @__PURE__ */ n("div", {
+			/* @__PURE__ */ e("div", {
 				className: `${R}-header`,
 				children: [/* @__PURE__ */ t("span", {
 					className: `${R}-headerTitle`,
-					children: a
+					children: s
 				}), /* @__PURE__ */ t(o, {
-					icon: /* @__PURE__ */ t(s, {
+					icon: /* @__PURE__ */ t(n, {
 						name: "delete_outline",
 						size: "sm"
 					}),
 					onClick: b,
 					"aria-label": "Clear filter",
-					"data-testid": `${R}-clearBtn-${i}`
+					"data-testid": `${R}-clearBtn-${a}`
 				})]
 			}),
-			/* @__PURE__ */ n("div", {
+			/* @__PURE__ */ e("div", {
 				className: `${R}-content`,
-				children: [e === "search" && /* @__PURE__ */ t(F, {
-					columnKey: i,
+				children: [r === "search" && /* @__PURE__ */ t(F, {
+					columnKey: a,
 					pendingSearch: f,
 					onSearchChange: p,
 					searchLabel: c
-				}), (e === "multiselect" || e === "multiselect-search") && /* @__PURE__ */ t(L, {
-					filterType: e,
-					columnKey: i,
-					options: r ?? [],
+				}), (r === "multiselect" || r === "multiselect-search") && /* @__PURE__ */ t(L, {
+					filterType: r,
+					columnKey: a,
+					options: i ?? [],
 					pendingMulti: m,
 					onMultiChange: h,
 					multiSearch: g,
 					onMultiSearchChange: _
 				})]
 			}),
-			/* @__PURE__ */ n("div", {
+			/* @__PURE__ */ e("div", {
 				className: `${R}-actions`,
-				children: [/* @__PURE__ */ t(d, {
+				children: [/* @__PURE__ */ t(u, {
 					onClick: v,
-					"data-testid": `${R}-cancelBtn-${i}`,
+					"data-testid": `${R}-cancelBtn-${a}`,
 					variant: "ghost",
 					children: l
-				}), /* @__PURE__ */ t(d, {
+				}), /* @__PURE__ */ t(u, {
 					onClick: y,
-					"data-testid": `${R}-applyBtn-${i}`,
-					children: u
+					"data-testid": `${R}-applyBtn-${a}`,
+					children: d
 				})]
 			})
 		]
 	}), document.body);
-}, re = ({ theme: n, variant: r = "default", ...i }) => {
-	let { componentStyles: a } = e([l.DATAGRIDMENU], n, r.toUpperCase());
+}, ie = ({ theme: e, variant: n = "default", ...i }) => {
+	let { componentStyles: o } = a([r.DATAGRIDMENU], e, n.toUpperCase());
 	return /* @__PURE__ */ t(z, {
 		...i,
-		style: a
+		style: o
 	});
-}, B = "--DATAGRID", ie = ({ columns: e, pageSize: n }) => {
-	let i = T(() => 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", {
+}, B = "--DATAGRID", ae = ({ columns: e, pageSize: n }) => {
+	let r = E(() => Array.from({ length: n }, () => e.map((e) => e.type === "options" ? null : `${Math.floor(Math.random() * 51) + 40}%`)), [n, e.length]);
+	return /* @__PURE__ */ t(i, { children: Array.from({ length: n }).map((n, i) => /* @__PURE__ */ t("tr", {
 		className: `${B}-row`,
 		children: e.map((e, n) => /* @__PURE__ */ t("td", {
 			className: [`${B}-td`, e.type === "options" ? `${B}-tdOptions` : ""].filter(Boolean).join(" "),
-			children: e.type === "options" ? /* @__PURE__ */ t(j, {
+			children: e.type === "options" ? /* @__PURE__ */ t(M, {
 				variant: "circular",
 				width: 24,
 				height: 24
-			}) : /* @__PURE__ */ t(j, {
+			}) : /* @__PURE__ */ t(M, {
 				height: 16,
-				width: i[r][n] ?? void 0
+				width: r[i][n] ?? void 0
 			})
 		}, e.key))
-	}, r)) });
-}, V = (e) => O`
+	}, i)) });
+}, V = (e) => k`
   &.--PAGINATION {
     display: flex;
     align-items: center;
@@ -451,7 +452,7 @@ var A = O`
       gap: 8px;
 
       .--PAGINATION-rowsSize {
-        ${a(e, "color", "--PAGINATION-EVENTS-ENABLED-COLOR-SECONDARY")};
+        ${c(e, "color", "--PAGINATION-EVENTS-ENABLED-COLOR-SECONDARY")};
         font-family: ${e["--FONTFAMILY-PRIMARY"]};
         font-size: 0.8125rem;
         user-select: none;
@@ -466,7 +467,7 @@ var A = O`
       gap: 8px;
 
       .--PAGINATION-info {
-        ${a(e, "color", "--PAGINATION-EVENTS-ENABLED-COLOR-SECONDARY")};
+        ${c(e, "color", "--PAGINATION-EVENTS-ENABLED-COLOR-SECONDARY")};
         font-family: ${e["--FONTFAMILY-PRIMARY"]};
         font-size: 0.8125rem;
         user-select: none;
@@ -475,27 +476,27 @@ var A = O`
   }
 `, H = (e, t) => `
     // BACKGROUNDS
-    ${a(e, "background-color", `--PAGINATIONMENU-EVENTS-${t}-BACKGROUND-COLOR`)}
+    ${c(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`)}
+    ${c(e, "border-color", `--PAGINATIONMENU-EVENTS-${t}-BORDER-COLOR`)}
+    ${c(e, "border-width", `--PAGINATIONMENU-EVENTS-${t}-BORDER-WIDTH`)}
+    ${c(e, "border-style", `--PAGINATIONMENU-EVENTS-${t}-BORDER-STYLE`)}
+    ${c(e, "border-radius", `--PAGINATIONMENU-EVENTS-${t}-BORDER-RADIUS`)}
 `, U = (e, t) => `
     // TYPOGRAPHY
-    ${a(e, "color", `--PAGINATIONMENU-EVENTS-${t}-COLOR-PRIMARY`)};
-    ${a(e, "caret-color", `--PAGINATIONMENU-EVENTS-${t}-COLOR-PRIMARY`)};
+    ${c(e, "color", `--PAGINATIONMENU-EVENTS-${t}-COLOR-PRIMARY`)};
+    ${c(e, "caret-color", `--PAGINATIONMENU-EVENTS-${t}-COLOR-PRIMARY`)};
 `, W = (e, t) => `
     // BACKGROUNDS
-    ${a(e, "background-color", `--PAGINATIONMENU-${t}-BACKGROUND-COLOR`)}
+    ${c(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`)}
-`, G = (e) => O`
+    ${c(e, "border-color", `--PAGINATIONMENU-${t}-BORDER-COLOR`)}
+    ${c(e, "border-width", `--PAGINATIONMENU-${t}-BORDER-WIDTH`)}
+    ${c(e, "border-style", `--PAGINATIONMENU-${t}-BORDER-STYLE`)}
+    ${c(e, "border-radius", `--PAGINATIONMENU-${t}-BORDER-RADIUS`)}
+`, G = (e) => k`
   &.--PAGINATIONMENU {
     position: absolute;
     bottom: calc(100% + ${e["--PAGINATIONMENU-ROOT-BOTTOM"] || ""});
@@ -569,14 +570,14 @@ var A = O`
 			children: e
 		}, e);
 	})
-}), J = ({ theme: n, variant: r = "default", ...i }) => {
-	let { componentStyles: a } = e([l.PAGINATIONMENU], n, r.toUpperCase());
+}), J = ({ theme: e, variant: n = "default", ...i }) => {
+	let { componentStyles: o } = a([r.PAGINATIONMENU], e, n.toUpperCase());
 	return /* @__PURE__ */ t(q, {
 		...i,
-		style: a
+		style: o
 	});
-}, Y = "--PAGINATION", X = ({ page: e, total: r, pageSize: i, onPageChange: a, pageSizeOptions: c, onPageSizeChange: l, loading: u, className: d, style: f }) => {
-	let [p, m] = D(!1), [h, g] = D(-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 = () => {
+}, Y = "--PAGINATION", X = ({ page: r, total: i, pageSize: a, onPageChange: s, pageSizeOptions: c, onPageSizeChange: l, loading: u, className: d, style: f }) => {
+	let [p, m] = O(!1), [h, g] = O(-1), _ = Math.max(1, Math.ceil(i / a)), v = r * a + 1, y = Math.min((r + 1) * a, i), b = r === 0, x = r >= _ - 1, S = () => {
 		m(!1), g(-1);
 	};
 	return w(() => {
@@ -585,15 +586,15 @@ var A = O`
 			e.target.closest(`.${Y}-rowsControl`) || (m(!1), g(-1));
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [p]), /* @__PURE__ */ n("div", {
+	}, [p]), /* @__PURE__ */ e("div", {
 		className: [Y, d || ""].filter(Boolean).join(" "),
 		css: V(f ?? {}),
-		children: [c && c.length > 0 && /* @__PURE__ */ n("div", {
+		children: [c && c.length > 0 && /* @__PURE__ */ e("div", {
 			className: `${Y}-rowsControl`,
 			children: [
 				p && /* @__PURE__ */ t(J, {
 					options: c,
-					activeOption: i,
+					activeOption: a,
 					onSelect: (e) => {
 						l?.(e), S();
 					},
@@ -601,10 +602,10 @@ var A = O`
 				}),
 				/* @__PURE__ */ t("span", {
 					className: `${Y}-rowsSize`,
-					children: i
+					children: a
 				}),
 				/* @__PURE__ */ t(o, {
-					icon: /* @__PURE__ */ t(s, {
+					icon: /* @__PURE__ */ t(n, {
 						name: "arrow_drop_up",
 						size: "sm"
 					}),
@@ -623,55 +624,55 @@ var A = O`
 					"data-testid": `${Y}-rowsBtn`
 				})
 			]
-		}), /* @__PURE__ */ n("div", {
+		}), /* @__PURE__ */ e("div", {
 			className: `${Y}-controls`,
 			children: [
-				/* @__PURE__ */ n("span", {
+				/* @__PURE__ */ e("span", {
 					className: `${Y}-info`,
 					children: [
 						v,
 						"-",
 						y,
 						" of ",
-						r
+						i
 					]
 				}),
 				/* @__PURE__ */ t(o, {
-					icon: /* @__PURE__ */ t(s, {
+					icon: /* @__PURE__ */ t(n, {
 						name: "first_page",
 						size: "sm"
 					}),
-					onClick: () => a(0),
+					onClick: () => s(0),
 					disabled: u || b,
 					"aria-label": "First page",
 					"data-testid": `${Y}-first`
 				}),
 				/* @__PURE__ */ t(o, {
-					icon: /* @__PURE__ */ t(s, {
+					icon: /* @__PURE__ */ t(n, {
 						name: "chevron_left",
 						size: "sm"
 					}),
-					onClick: () => a(e - 1),
+					onClick: () => s(r - 1),
 					disabled: u || b,
 					"aria-label": "Previous page",
 					"data-testid": `${Y}-prev`
 				}),
 				/* @__PURE__ */ t(o, {
-					icon: /* @__PURE__ */ t(s, {
+					icon: /* @__PURE__ */ t(n, {
 						name: "chevron_right",
 						size: "sm"
 					}),
-					onClick: () => a(e + 1),
+					onClick: () => s(r + 1),
 					disabled: u || x,
 					"aria-label": "Next page",
 					"data-testid": `${Y}-next`
 				}),
 				/* @__PURE__ */ t(o, {
-					icon: /* @__PURE__ */ t(s, {
+					icon: /* @__PURE__ */ t(n, {
 						name: "last_page",
 						size: "sm"
 					}),
-					onClick: () => a(_ - 1),
+					onClick: () => s(_ - 1),
 					disabled: u || x,
 					"aria-label": "Last page",
 					"data-testid": `${Y}-last`
@@ -679,38 +680,44 @@ var A = O`
 			]
 		})]
 	});
-}, ae = ({ theme: n, variant: r = "default", ...i }) => {
-	let { componentStyles: a } = e([l.PAGINATION], n, r.toUpperCase());
+}, oe = ({ theme: e, variant: n = "default", ...i }) => {
+	let { componentStyles: o } = a([r.PAGINATION], e, n.toUpperCase());
 	return /* @__PURE__ */ t(X, {
 		...i,
-		style: a
+		style: o
 	});
-}, Z = "--DATAGRID", oe = 10, se = ({ columns: e, onFetch: i, paginationType: a = "pagination", pageSize: c = oe, pageSizeOptions: l, emptyContent: u = /* @__PURE__ */ t("span", { children: "No se han encontrado resultados" }), loadingMoreContent: d = /* @__PURE__ */ t("span", { children: "Cargando..." }), className: f, style: p }) => {
-	let [m, h] = D([]), [g, _] = D(0), [v, y] = D(0), [b, x] = D(c), [S, T] = D(!0), [O, te] = D(null), [k, A] = D({}), [j, M] = D(null), [N, P] = D(null), [F, I] = D(""), [L, R] = D([]), [z, B] = D(""), [V, H] = D([]), [U, W] = D(0), G = E({}), K = E(null), q = E(null);
+}, Z = "--DATAGRID", se = 10, Q = ({ columns: r, onFetch: a, paginationType: s = "pagination", pageSize: c = se, pageSizeOptions: l, emptyContent: u = /* @__PURE__ */ t("span", { children: "No se han encontrado resultados" }), loadingMoreContent: d = /* @__PURE__ */ t("span", { children: "Cargando..." }), className: f, style: p }) => {
+	let [m, h] = O([]), [g, _] = O(0), [v, y] = O(0), [b, x] = O(c), [S, C] = O(!0), [E, k] = O(null), [A, te] = O({}), [j, M] = O(null), [re, N] = O(null), [P, F] = O(""), [I, L] = O([]), [R, z] = O(""), [B, V] = O([]), [H, U] = O(0), W = D({}), G = D(null), K = D(null), q = D(null);
 	w(() => {
 		let e = !1;
-		return i({
+		return a({
 			page: v,
 			pageSize: b,
-			filters: k,
-			sort: O ?? void 0
+			filters: A,
+			sort: E ?? void 0
 		}).then((t) => {
-			e || (h((e) => a === "scroll" && v > 0 ? [...e, ...t.data] : t.data), _(t.total), T(!1));
+			e || (h((e) => s === "scroll" && v > 0 ? [...e, ...t.data] : t.data), _(t.total), C(!1));
 		}), () => {
 			e = !0;
 		};
 	}, [
 		v,
 		b,
-		k,
-		O,
-		a,
-		i
-	]), ee(() => {
-		a !== "scroll" || !K.current || !q.current || (H(Array.from(K.current.querySelectorAll(`th:not(.${Z}-thScrollbarSpacer)`)).map((e) => e.offsetWidth)), W(q.current.offsetWidth - q.current.clientWidth));
+		A,
+		E,
+		s,
+		a
+	]), T(() => {
+		if (s !== "scroll" || !G.current || !q.current || !K.current) return;
+		let e = () => {
+			!G.current || !q.current || (V(Array.from(G.current.querySelectorAll(`th:not(.${Z}-thScrollbarSpacer)`)).map((e) => e.getBoundingClientRect().width)), U(q.current.offsetWidth - q.current.clientWidth));
+		};
+		e();
+		let t = new ResizeObserver(e);
+		return t.observe(K.current), () => t.disconnect();
 	}, [
-		a,
-		e.length,
+		s,
+		r.length,
 		S
 	]), w(() => {
 		if (!j) return;
@@ -722,122 +729,123 @@ var A = O`
 	let J = (e) => {
 		if (!e.filter) return;
 		if (j === e.key) {
-			M(null), P(null);
+			M(null), N(null);
 			return;
 		}
-		let t = k[e.key];
-		e.filter.type === "search" ? I(typeof t == "string" ? t : "") : (R(Array.isArray(t) ? t : []), B("")), P(G.current[e.key] ?? null), M(e.key);
+		let t = A[e.key];
+		e.filter.type === "search" ? F(typeof t == "string" ? t : "") : (L(Array.isArray(t) ? t : []), z("")), N(W.current[e.key] ?? null), M(e.key);
 	}, Y = (e) => {
 		if (!e.filter) return;
-		let t = e.filter.type === "search" ? F : L;
-		T(!0), A((n) => ({
+		let t = e.filter.type === "search" ? P : I;
+		C(!0), te((n) => ({
 			...n,
 			[e.key]: t
 		})), y(0), M(null);
 	}, X = (e) => {
-		let t = k[e];
+		let t = A[e];
 		return t == null ? !1 : Array.isArray(t) ? t.length > 0 : t !== "";
-	}, se = (e) => {
-		T(!0), te((t) => t?.key === e ? {
+	}, Q = (e) => {
+		C(!0), k((t) => t?.key === e ? {
 			key: e,
 			direction: t.direction === "asc" ? "desc" : "asc"
 		} : {
 			key: e,
 			direction: "asc"
 		}), y(0);
-	}, Q = (e) => {
-		T(!0), y(e);
 	}, ce = (e) => {
-		T(!0), x(e), y(0);
-	}, le = C((e) => {
-		if (a !== "scroll" || S || m.length >= g) return;
+		C(!0), y(e);
+	}, le = (e) => {
+		C(!0), x(e), y(0);
+	}, ue = ee((e) => {
+		if (s !== "scroll" || S || m.length >= g) return;
 		let { scrollTop: t, scrollHeight: n, clientHeight: r } = e.currentTarget;
-		n - t - r < 48 && (T(!0), y((e) => e + 1));
+		n - t - r < 48 && (C(!0), y((e) => e + 1));
 	}, [
-		a,
+		s,
 		S,
 		m.length,
 		g
-	]), ue = e.length, $ = j ? e.find((e) => e.key === j) : void 0, de = b * 48, fe = !S && 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", {
+	]), de = r.length, $ = j ? r.find((e) => e.key === j) : void 0, fe = b * 48, pe = !S && m.length === 0, me = r.map((r) => /* @__PURE__ */ t("th", {
+		className: [`${Z}-th`, r.type === "options" ? `${Z}-thOptions` : ""].join(" "),
+		style: r.width ? { width: r.width } : void 0,
+		children: /* @__PURE__ */ e("div", {
 			className: `${Z}-thInner`,
-			"data-testid": `${Z}-th-${e.key}`,
-			children: [typeof e.label == "string" ? /* @__PURE__ */ t("span", {
+			"data-testid": `${Z}-th-${r.key}`,
+			children: [typeof r.label == "string" ? /* @__PURE__ */ t("span", {
 				className: `${Z}-thLabel`,
-				children: e.label
-			}) : e.label, e.type !== "options" && /* @__PURE__ */ n("div", {
+				children: r.label
+			}) : r.label, r.type !== "options" && /* @__PURE__ */ e("div", {
 				className: `${Z}-thActions`,
-				children: [e.filter && /* @__PURE__ */ t("div", {
+				children: [r.filter && /* @__PURE__ */ t("div", {
 					className: `${Z}-filterContainer`,
-					"data-popover-key": e.key,
+					"data-popover-key": r.key,
 					children: /* @__PURE__ */ t("span", {
-						ref: (t) => {
-							G.current[e.key] = t;
+						ref: (e) => {
+							W.current[r.key] = e;
 						},
 						children: /* @__PURE__ */ t(o, {
-							icon: /* @__PURE__ */ t(s, {
-								name: X(e.key) ? "filter_alt" : "filter_list",
+							icon: /* @__PURE__ */ t(n, {
+								name: X(r.key) ? "filter_alt" : "filter_list",
 								size: "sm",
-								style: { color: X(e.key) ? "white" : "" }
+								style: { color: X(r.key) ? "white" : "" }
 							}),
-							onClick: () => J(e),
-							"data-testid": `${Z}-filterBtn-${e.key}`,
-							"aria-label": `Filter ${e.label}`
+							onClick: () => J(r),
+							"data-testid": `${Z}-filterBtn-${r.key}`,
+							"aria-label": `Filter ${r.label}`
 						})
 					})
-				}), e.sortable !== !1 && /* @__PURE__ */ t(o, {
-					icon: /* @__PURE__ */ t(s, {
-						name: O?.key === e.key ? O.direction === "asc" ? "arrow_upward" : "arrow_downward" : "unfold_more",
+				}), r.sortable !== !1 && /* @__PURE__ */ t(o, {
+					icon: /* @__PURE__ */ t(n, {
+						name: E?.key === r.key ? E.direction === "asc" ? "arrow_upward" : "arrow_downward" : "unfold_more",
 						size: "sm",
-						style: { color: O?.key === e.key ? "white" : "" }
+						style: { color: E?.key === r.key ? "white" : "" }
 					}),
-					onClick: () => se(e.key),
-					"data-testid": `${Z}-sortBtn-${e.key}`,
-					"aria-label": `Sort ${e.label}`
+					onClick: () => Q(r.key),
+					"data-testid": `${Z}-sortBtn-${r.key}`,
+					"aria-label": `Sort ${r.label}`
 				})]
 			})]
 		})
-	}, e.key)), me = S && (a !== "scroll" || m.length === 0) ? /* @__PURE__ */ t(ie, {
-		columns: e,
+	}, r.key)), he = S && (s !== "scroll" || m.length === 0) ? /* @__PURE__ */ t(ae, {
+		columns: r,
 		pageSize: b
-	}) : fe ? /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t("td", {
-		colSpan: ue,
+	}) : pe ? /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t("td", {
+		colSpan: de,
 		className: `${Z}-emptyCell`,
-		style: { height: `${de}px` },
+		style: { height: `${fe}px` },
 		children: u
-	}) }) : /* @__PURE__ */ n(r, { children: [m.map((n, r) => /* @__PURE__ */ t("tr", {
+	}) }) : /* @__PURE__ */ e(i, { children: [m.map((e, n) => /* @__PURE__ */ t("tr", {
 		className: `${Z}-row`,
-		"data-testid": `${Z}-row-${r}`,
-		children: e.map((e) => {
-			let i = n[e.key];
+		"data-testid": `${Z}-row-${n}`,
+		children: r.map((r) => {
+			let i = e[r.key];
 			return /* @__PURE__ */ t("td", {
-				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);
+				className: [`${Z}-td`, r.type === "options" ? `${Z}-tdOptions` : ""].filter(Boolean).join(" "),
+				"data-testid": `${Z}-cell-${r.key}-${n}`,
+				children: r.render ? r.render(i, e) : String(i ?? "")
+			}, r.key);
 		})
-	}, r)), a === "scroll" && S && /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t("td", {
-		colSpan: ue,
+	}, n)), s === "scroll" && S && /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t("td", {
+		colSpan: de,
 		className: `${Z}-loadingMore`,
 		children: d
 	}) })] });
-	return /* @__PURE__ */ n("div", {
+	return /* @__PURE__ */ e("div", {
 		className: [Z, f || ""].join(" "),
 		css: ne(p),
 		"data-testid": Z,
 		children: [
 			/* @__PURE__ */ t("div", {
 				className: `${Z}-tableContainer`,
-				children: a === "scroll" ? /* @__PURE__ */ n(r, { children: [/* @__PURE__ */ n("table", {
+				children: s === "scroll" ? /* @__PURE__ */ e(i, { children: [/* @__PURE__ */ e("table", {
+					ref: K,
 					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: U || 0 } })] }), /* @__PURE__ */ t("thead", {
-						ref: K,
+					children: [/* @__PURE__ */ e("colgroup", { children: [r.map((e) => /* @__PURE__ */ t("col", { style: e.width ? { width: e.width } : void 0 }, e.key)), /* @__PURE__ */ t("col", { style: { width: H || 0 } })] }), /* @__PURE__ */ t("thead", {
+						ref: G,
 						className: `${Z}-thead`,
-						children: /* @__PURE__ */ n("tr", {
+						children: /* @__PURE__ */ e("tr", {
 							className: `${Z}-headerRow`,
-							children: [pe, /* @__PURE__ */ t("th", {
+							children: [me, /* @__PURE__ */ t("th", {
 								"aria-hidden": "true",
 								className: `${Z}-thScrollbarSpacer`,
 								style: { padding: 0 }
@@ -849,44 +857,44 @@ var A = O`
 					className: `${Z}-bodyContainer`,
 					style: {
 						overflowY: "auto",
-						maxHeight: `${de}px`
+						maxHeight: `${fe}px`
 					},
-					onScroll: le,
-					children: /* @__PURE__ */ n("table", {
+					onScroll: ue,
+					children: /* @__PURE__ */ e("table", {
 						className: `${Z}-table`,
 						style: {
 							tableLayout: "fixed",
 							width: "100%"
 						},
-						children: [/* @__PURE__ */ t("colgroup", { children: e.map((e, n) => /* @__PURE__ */ t("col", { style: { width: V[n] === void 0 ? e.width ?? "auto" : V[n] } }, e.key)) }), /* @__PURE__ */ t("tbody", {
+						children: [/* @__PURE__ */ t("colgroup", { children: r.map((e, n) => /* @__PURE__ */ t("col", { style: { width: B[n] === void 0 ? e.width ?? "auto" : B[n] } }, e.key)) }), /* @__PURE__ */ t("tbody", {
 							className: `${Z}-tbody`,
-							children: me
+							children: he
 						})]
 					})
-				})] }) : /* @__PURE__ */ n("table", {
+				})] }) : /* @__PURE__ */ e("table", {
 					className: `${Z}-table`,
 					children: [/* @__PURE__ */ t("thead", {
 						className: `${Z}-thead`,
 						children: /* @__PURE__ */ t("tr", {
 							className: `${Z}-headerRow`,
-							children: pe
+							children: me
 						})
 					}), /* @__PURE__ */ t("tbody", {
 						className: `${Z}-tbody`,
-						children: me
+						children: he
 					})]
 				})
 			}),
-			a === "pagination" && /* @__PURE__ */ t(ae, {
+			s === "pagination" && /* @__PURE__ */ t(oe, {
 				page: v,
 				total: g,
 				pageSize: b,
-				onPageChange: Q,
+				onPageChange: ce,
 				pageSizeOptions: l,
-				onPageSizeChange: ce,
+				onPageSizeChange: le,
 				loading: S
 			}),
-			$?.filter && /* @__PURE__ */ t(re, {
+			$?.filter && /* @__PURE__ */ t(ie, {
 				filterType: $.filter.type,
 				options: $.filter.options,
 				columnKey: $.key,
@@ -894,29 +902,29 @@ var A = O`
 				searchLabel: $.filter.label,
 				cancelLabel: $.filter.cancelLabel,
 				applyLabel: $.filter.applyLabel,
-				pendingSearch: F,
-				onSearchChange: I,
-				pendingMulti: L,
-				onMultiChange: R,
-				multiSearch: z,
-				onMultiSearchChange: B,
+				pendingSearch: P,
+				onSearchChange: F,
+				pendingMulti: I,
+				onMultiChange: L,
+				multiSearch: R,
+				onMultiSearchChange: z,
 				onCancel: () => M(null),
 				onApply: () => Y($),
 				onClear: () => {
-					$.filter?.type === "search" ? I("") : (R([]), B(""));
+					$.filter?.type === "search" ? F("") : (L([]), z(""));
 				},
-				anchorEl: N
+				anchorEl: re
 			})
 		]
 	});
-}, Q = ({ theme: n, variant: r = "default", ...i }) => {
-	let { componentStyles: a } = e([l.DATAGRID], n, r.toUpperCase());
-	return /* @__PURE__ */ t(se, {
+}, ce = ({ theme: e, variant: n = "default", ...i }) => {
+	let { componentStyles: o } = a([r.DATAGRID], e, n.toUpperCase());
+	return /* @__PURE__ */ t(Q, {
 		...i,
-		style: a
+		style: o
 	});
 };
 //#endregion
-export { d as Button, c as Checkbox, v as CheckboxGroup, b as CheckboxTree, Q as DataGrid, g as DatePicker, s as Icon, o as IconButton, y as Modal, u as NumberField, ae as Pagination, f as Radio, x as RadioGroup, h as Select, j as Skeleton, p as Slider, _ as Switch, m as TextField, S as ThemeProvider, i as darkTheme };
+export { u as Button, _ as Checkbox, v as CheckboxGroup, b as CheckboxTree, ce as DataGrid, h as DatePicker, n as Icon, o as IconButton, y as Modal, l as NumberField, oe as Pagination, d as Radio, x as RadioGroup, m as Select, M as Skeleton, f as Slider, g as Switch, p as TextField, C as ThemeProvider, S as ToastProvider, s as darkTheme };
 
 //# sourceMappingURL=index.mjs.map