@foi/design-system 0.0.16 → 0.0.17

package/dist/index.d.ts

@@ -14,9 +14,10 @@ export { default as Switch } from './components/atoms/Switch';
 export { default as DataGrid } from './components/organisms/DataGrid';
 export type { DataGridProps, DataGridColumn, DataGridColumnType, DataGridFilterType, DataGridFilterOption, DataGridFilter, DataGridFetchParams, DataGridFetchResult, DataGridPaginationType, } from './components/organisms/DataGrid';
 export { default as CheckboxGroup } from './components/molecules/CheckboxGroup';
+export { default as CheckboxTree } from './components/molecules/CheckboxTree';
+export { default as Modal } from './components/molecules/Modal';
 export { default as Pagination } from './components/atoms/Pagination';
 export type { PaginationProps } from './components/atoms/Pagination';
-export { default as CheckboxTree } from './components/molecules/CheckboxTree';
 export { default as RadioGroup } from './components/molecules/RadioGroup';
 export { default as ThemeProvider } from './hocs/ThemeProvider';
 export type { Theme } from './hocs/ThemeProvider/ThemeProvider.interface';
@@ -33,4 +34,5 @@ export type { SliderStyleProps } from './components/atoms/Slider/Slider.interfac
 export type { SwitchStyleProps } from './components/atoms/Switch/Switch.interface';
 export type { CheckboxGroupStyleProps } from './components/molecules/CheckboxGroup/CheckboxGroup.interface';
 export type { CheckboxTreeStyleProps } from './components/molecules/CheckboxTree/CheckboxTree.interface';
+export type { ModalStyleProps } from './components/molecules/Modal/Modal.interface';
 export type { RadioGroupStyleProps } from './components/molecules/RadioGroup/RadioGroup.interface';

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-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 { 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";
 //#region src/components/atoms/Skeleton/Skeleton.emotion.ts
-var A = D`
+var A = O`
   &.--SKELETON {
     display: block;
     background: linear-gradient(
@@ -18,7 +18,7 @@ var A = D`
       rgba(255, 255, 255, 0.05) 100%
     );
     background-size: 200% 100%;
-    animation: ${O`
+    animation: ${te`
   0% { background-position: 200% center; }
   100% { background-position: -200% center; }
 `} 1.4s ease infinite;
@@ -43,7 +43,7 @@ var A = D`
 		height: r
 	},
 	"aria-hidden": "true"
-}), te = (e) => D`
+}), ne = (e) => O`
   &.--DATAGRID {
     width: 100%;
     box-sizing: border-box;
@@ -222,7 +222,7 @@ var A = 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`)}
-`, N = (e) => D`
+`, N = (e) => O`
   &.--DATAGRIDMENU {
     position: fixed;
     z-index: 200;
@@ -311,12 +311,12 @@ var A = D`
 		width: "full",
 		autoFocus: !0,
 		"data-testid": `${P}-searchInput-${e}`,
-		startAdornment: /* @__PURE__ */ t(o, {
+		startAdornment: /* @__PURE__ */ t(s, {
 			name: "search",
 			style: { color: "white" }
 		})
 	})
-}), I = "--DATAGRIDMENU", L = ({ filterType: e, columnKey: i, options: a, pendingMulti: o, onMultiChange: c, multiSearch: l, onMultiSearchChange: u }) => {
+}), 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", {
 		className: `${I}-searchInput`,
@@ -339,17 +339,17 @@ var A = D`
 				className: `${I}-optionDot`,
 				style: { backgroundColor: e.color },
 				"aria-hidden": "true"
-			}), /* @__PURE__ */ t(s, {
+			}), /* @__PURE__ */ t(c, {
 				checked: o.includes(e.value),
-				onChecked: (t) => c(t ? [...o, e.value] : o.filter((t) => t !== e.value)),
+				onChecked: (t) => s(t ? [...o, e.value] : o.filter((t) => t !== e.value)),
 				label: e.label,
 				showErrorText: !1,
 				"data-testid": `${I}-option-${i}-${e.value}`
 			})]
 		}, e.value))
 	})] });
-}, 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);
+}, 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(() => {
 		if (!x) return;
 		let e = () => {
@@ -372,8 +372,8 @@ var A = D`
 				children: [/* @__PURE__ */ t("span", {
 					className: `${R}-headerTitle`,
 					children: a
-				}), /* @__PURE__ */ t(u, {
-					icon: /* @__PURE__ */ t(o, {
+				}), /* @__PURE__ */ t(o, {
+					icon: /* @__PURE__ */ t(s, {
 						name: "delete_outline",
 						size: "sm"
 					}),
@@ -386,9 +386,9 @@ var A = D`
 				className: `${R}-content`,
 				children: [e === "search" && /* @__PURE__ */ t(F, {
 					columnKey: i,
-					pendingSearch: d,
+					pendingSearch: f,
 					onSearchChange: p,
-					searchLabel: s
+					searchLabel: c
 				}), (e === "multiselect" || e === "multiselect-search") && /* @__PURE__ */ t(L, {
 					filterType: e,
 					columnKey: i,
@@ -401,27 +401,27 @@ var A = D`
 			}),
 			/* @__PURE__ */ n("div", {
 				className: `${R}-actions`,
-				children: [/* @__PURE__ */ t(f, {
+				children: [/* @__PURE__ */ t(d, {
 					onClick: v,
 					"data-testid": `${R}-cancelBtn-${i}`,
 					variant: "ghost",
-					children: c
-				}), /* @__PURE__ */ t(f, {
+					children: l
+				}), /* @__PURE__ */ t(d, {
 					onClick: y,
 					"data-testid": `${R}-applyBtn-${i}`,
-					children: l
+					children: u
 				})]
 			})
 		]
 	}), document.body);
-}, ne = ({ theme: n, variant: r = "default", ...i }) => {
-	let { componentStyles: a } = e([c.DATAGRIDMENU], n, r.toUpperCase());
+}, re = ({ theme: n, variant: r = "default", ...i }) => {
+	let { componentStyles: a } = e([l.DATAGRIDMENU], n, r.toUpperCase());
 	return /* @__PURE__ */ t(z, {
 		...i,
 		style: a
 	});
-}, 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]);
+}, 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", {
 		className: `${B}-row`,
 		children: e.map((e, n) => /* @__PURE__ */ t("td", {
@@ -436,7 +436,7 @@ var A = D`
 			})
 		}, e.key))
 	}, r)) });
-}, V = (e) => D`
+}, V = (e) => O`
   &.--PAGINATION {
     display: flex;
     align-items: center;
@@ -495,7 +495,7 @@ var A = 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`)}
-`, G = (e) => D`
+`, G = (e) => O`
   &.--PAGINATIONMENU {
     position: absolute;
     bottom: calc(100% + ${e["--PAGINATIONMENU-ROOT-BOTTOM"] || ""});
@@ -570,16 +570,16 @@ var A = D`
 		}, e);
 	})
 }), J = ({ theme: n, variant: r = "default", ...i }) => {
-	let { componentStyles: a } = e([c.PAGINATIONMENU], n, r.toUpperCase());
+	let { componentStyles: a } = e([l.PAGINATIONMENU], n, r.toUpperCase());
 	return /* @__PURE__ */ t(q, {
 		...i,
 		style: a
 	});
-}, 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 = () => {
+}, 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 = () => {
 		m(!1), g(-1);
 	};
-	return C(() => {
+	return w(() => {
 		if (!p) return;
 		let e = (e) => {
 			e.target.closest(`.${Y}-rowsControl`) || (m(!1), g(-1));
@@ -588,14 +588,14 @@ var A = D`
 	}, [p]), /* @__PURE__ */ n("div", {
 		className: [Y, d || ""].filter(Boolean).join(" "),
 		css: V(f ?? {}),
-		children: [s && s.length > 0 && /* @__PURE__ */ n("div", {
+		children: [c && c.length > 0 && /* @__PURE__ */ n("div", {
 			className: `${Y}-rowsControl`,
 			children: [
 				p && /* @__PURE__ */ t(J, {
-					options: s,
+					options: c,
 					activeOption: i,
 					onSelect: (e) => {
-						c?.(e), S();
+						l?.(e), S();
 					},
 					focusedElement: h
 				}),
@@ -603,19 +603,19 @@ var A = D`
 					className: `${Y}-rowsSize`,
 					children: i
 				}),
-				/* @__PURE__ */ t(u, {
-					icon: /* @__PURE__ */ t(o, {
+				/* @__PURE__ */ t(o, {
+					icon: /* @__PURE__ */ t(s, {
 						name: "arrow_drop_up",
 						size: "sm"
 					}),
 					onClick: () => p ? S() : m(!0),
 					onKeyDown: (e) => {
 						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) {
+						else if (["ArrowDown", "ArrowUp"].includes(e.key) && p) e.preventDefault(), e.key === "ArrowDown" ? g((e) => e + 1 >= (c?.length ?? 0) ? 0 : e + 1) : g((e) => e - 1 < 0 ? (c?.length ?? 1) - 1 : e - 1);
+						else if (e.key === "Enter" && p && h >= 0 && c) {
 							e.preventDefault();
-							let t = s[h];
-							t !== void 0 && (c?.(t), m(!1), g(-1));
+							let t = c[h];
+							t !== void 0 && (l?.(t), m(!1), g(-1));
 						}
 					},
 					isFlipped: p,
@@ -636,177 +636,177 @@ var A = D`
 						r
 					]
 				}),
-				/* @__PURE__ */ t(u, {
-					icon: /* @__PURE__ */ t(o, {
+				/* @__PURE__ */ t(o, {
+					icon: /* @__PURE__ */ t(s, {
 						name: "first_page",
 						size: "sm"
 					}),
 					onClick: () => a(0),
-					disabled: l || b,
+					disabled: u || b,
 					"aria-label": "First page",
 					"data-testid": `${Y}-first`
 				}),
-				/* @__PURE__ */ t(u, {
-					icon: /* @__PURE__ */ t(o, {
+				/* @__PURE__ */ t(o, {
+					icon: /* @__PURE__ */ t(s, {
 						name: "chevron_left",
 						size: "sm"
 					}),
 					onClick: () => a(e - 1),
-					disabled: l || b,
+					disabled: u || b,
 					"aria-label": "Previous page",
 					"data-testid": `${Y}-prev`
 				}),
-				/* @__PURE__ */ t(u, {
-					icon: /* @__PURE__ */ t(o, {
+				/* @__PURE__ */ t(o, {
+					icon: /* @__PURE__ */ t(s, {
 						name: "chevron_right",
 						size: "sm"
 					}),
 					onClick: () => a(e + 1),
-					disabled: l || x,
+					disabled: u || x,
 					"aria-label": "Next page",
 					"data-testid": `${Y}-next`
 				}),
-				/* @__PURE__ */ t(u, {
-					icon: /* @__PURE__ */ t(o, {
+				/* @__PURE__ */ t(o, {
+					icon: /* @__PURE__ */ t(s, {
 						name: "last_page",
 						size: "sm"
 					}),
 					onClick: () => a(_ - 1),
-					disabled: l || x,
+					disabled: u || x,
 					"aria-label": "Last page",
 					"data-testid": `${Y}-last`
 				})
 			]
 		})]
 	});
-}, ie = ({ theme: n, variant: r = "default", ...i }) => {
-	let { componentStyles: a } = e([c.PAGINATION], n, r.toUpperCase());
+}, ae = ({ theme: n, variant: r = "default", ...i }) => {
+	let { componentStyles: a } = e([l.PAGINATION], n, r.toUpperCase());
 	return /* @__PURE__ */ t(X, {
 		...i,
 		style: a
 	});
-}, 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(() => {
+}, 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);
+	w(() => {
 		let e = !1;
 		return i({
 			page: v,
 			pageSize: b,
-			filters: A,
+			filters: k,
 			sort: O ?? void 0
 		}).then((t) => {
-			e || (h((e) => a === "scroll" && v > 0 ? [...e, ...t.data] : t.data), _(t.total), D(!1));
+			e || (h((e) => a === "scroll" && v > 0 ? [...e, ...t.data] : t.data), _(t.total), T(!1));
 		}), () => {
 			e = !0;
 		};
 	}, [
 		v,
 		b,
-		A,
+		k,
 		O,
 		a,
 		i
 	]), 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 !== "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.length,
-		w
-	]), C(() => {
-		if (!M) return;
+		S
+	]), w(() => {
+		if (!j) return;
 		let e = (e) => {
-			e.target.closest(`[data-popover-key="${M}"]`) || N(null);
+			e.target.closest(`[data-popover-key="${j}"]`) || M(null);
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [M]);
-	let Y = (e) => {
+	}, [j]);
+	let J = (e) => {
 		if (!e.filter) return;
-		if (M === e.key) {
-			N(null), F(null);
+		if (j === e.key) {
+			M(null), P(null);
 			return;
 		}
-		let t = A[e.key];
-		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) => {
+		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);
+	}, Y = (e) => {
 		if (!e.filter) return;
-		let t = e.filter.type === "search" ? I : R;
-		D(!0), j((n) => ({
+		let t = e.filter.type === "search" ? F : L;
+		T(!0), A((n) => ({
 			...n,
 			[e.key]: t
-		})), y(0), N(null);
-	}, Q = (e) => {
-		let t = A[e];
+		})), y(0), M(null);
+	}, X = (e) => {
+		let t = k[e];
 		return t == null ? !1 : Array.isArray(t) ? t.length > 0 : t !== "";
-	}, oe = (e) => {
-		D(!0), k((t) => t?.key === e ? {
+	}, se = (e) => {
+		T(!0), te((t) => t?.key === e ? {
 			key: e,
 			direction: t.direction === "asc" ? "desc" : "asc"
 		} : {
 			key: e,
 			direction: "asc"
 		}), y(0);
-	}, se = (e) => {
-		D(!0), y(e);
+	}, Q = (e) => {
+		T(!0), y(e);
 	}, ce = (e) => {
-		D(!0), x(e), y(0);
-	}, le = S((e) => {
-		if (a !== "scroll" || w || m.length >= g) return;
+		T(!0), x(e), y(0);
+	}, le = C((e) => {
+		if (a !== "scroll" || S || m.length >= g) return;
 		let { scrollTop: t, scrollHeight: n, clientHeight: r } = e.currentTarget;
-		n - t - r < 48 && (D(!0), y((e) => e + 1));
+		n - t - r < 48 && (T(!0), y((e) => e + 1));
 	}, [
 		a,
-		w,
+		S,
 		m.length,
 		g
-	]), 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", {
+	]), 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", {
 			className: `${Z}-thInner`,
 			"data-testid": `${Z}-th-${e.key}`,
-			children: [/* @__PURE__ */ t("span", {
+			children: [typeof e.label == "string" ? /* @__PURE__ */ t("span", {
 				className: `${Z}-thLabel`,
 				children: e.label
-			}), e.type !== "options" && /* @__PURE__ */ n("div", {
+			}) : e.label, e.type !== "options" && /* @__PURE__ */ n("div", {
 				className: `${Z}-thActions`,
 				children: [e.filter && /* @__PURE__ */ t("div", {
 					className: `${Z}-filterContainer`,
 					"data-popover-key": e.key,
 					children: /* @__PURE__ */ t("span", {
 						ref: (t) => {
-							K.current[e.key] = t;
+							G.current[e.key] = t;
 						},
-						children: /* @__PURE__ */ t(u, {
-							icon: /* @__PURE__ */ t(o, {
-								name: Q(e.key) ? "filter_alt" : "filter_list",
+						children: /* @__PURE__ */ t(o, {
+							icon: /* @__PURE__ */ t(s, {
+								name: X(e.key) ? "filter_alt" : "filter_list",
 								size: "sm",
-								style: { color: Q(e.key) ? "white" : "" }
+								style: { color: X(e.key) ? "white" : "" }
 							}),
-							onClick: () => Y(e),
+							onClick: () => J(e),
 							"data-testid": `${Z}-filterBtn-${e.key}`,
 							"aria-label": `Filter ${e.label}`
 						})
 					})
-				}), e.sortable !== !1 && /* @__PURE__ */ t(u, {
-					icon: /* @__PURE__ */ t(o, {
+				}), e.sortable !== !1 && /* @__PURE__ */ t(o, {
+					icon: /* @__PURE__ */ t(s, {
 						name: O?.key === e.key ? O.direction === "asc" ? "arrow_upward" : "arrow_downward" : "unfold_more",
 						size: "sm",
 						style: { color: O?.key === e.key ? "white" : "" }
 					}),
-					onClick: () => oe(e.key),
+					onClick: () => se(e.key),
 					"data-testid": `${Z}-sortBtn-${e.key}`,
 					"aria-label": `Sort ${e.label}`
 				})]
 			})]
 		})
-	}, e.key)), me = w && (a !== "scroll" || m.length === 0) ? /* @__PURE__ */ t(re, {
+	}, e.key)), me = S && (a !== "scroll" || m.length === 0) ? /* @__PURE__ */ t(ie, {
 		columns: e,
 		pageSize: b
 	}) : fe ? /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t("td", {
 		colSpan: ue,
 		className: `${Z}-emptyCell`,
 		style: { height: `${de}px` },
-		children: l
+		children: u
 	}) }) : /* @__PURE__ */ n(r, { children: [m.map((n, r) => /* @__PURE__ */ t("tr", {
 		className: `${Z}-row`,
 		"data-testid": `${Z}-row-${r}`,
@@ -818,22 +818,22 @@ var A = D`
 				children: e.render ? e.render(i, n) : String(i ?? "")
 			}, e.key);
 		})
-	}, r)), a === "scroll" && w && /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t("td", {
+	}, r)), a === "scroll" && S && /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t("td", {
 		colSpan: ue,
 		className: `${Z}-loadingMore`,
 		children: d
 	}) })] });
 	return /* @__PURE__ */ n("div", {
 		className: [Z, f || ""].join(" "),
-		css: te(p),
+		css: ne(p),
 		"data-testid": Z,
 		children: [
 			/* @__PURE__ */ t("div", {
 				className: `${Z}-tableContainer`,
 				children: a === "scroll" ? /* @__PURE__ */ n(r, { children: [/* @__PURE__ */ n("table", {
 					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,
+					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: `${Z}-thead`,
 						children: /* @__PURE__ */ n("tr", {
 							className: `${Z}-headerRow`,
@@ -845,7 +845,7 @@ var A = D`
 						})
 					})]
 				}), /* @__PURE__ */ t("div", {
-					ref: J,
+					ref: q,
 					className: `${Z}-bodyContainer`,
 					style: {
 						overflowY: "auto",
@@ -858,7 +858,7 @@ var A = D`
 							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", {
+						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", {
 							className: `${Z}-tbody`,
 							children: me
 						})]
@@ -877,16 +877,16 @@ var A = D`
 					})]
 				})
 			}),
-			a === "pagination" && /* @__PURE__ */ t(ie, {
+			a === "pagination" && /* @__PURE__ */ t(ae, {
 				page: v,
 				total: g,
 				pageSize: b,
-				onPageChange: se,
-				pageSizeOptions: c,
+				onPageChange: Q,
+				pageSizeOptions: l,
 				onPageSizeChange: ce,
-				loading: w
+				loading: S
 			}),
-			$?.filter && /* @__PURE__ */ t(ne, {
+			$?.filter && /* @__PURE__ */ t(re, {
 				filterType: $.filter.type,
 				options: $.filter.options,
 				columnKey: $.key,
@@ -894,29 +894,29 @@ var A = D`
 				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: () => X($),
+				pendingSearch: F,
+				onSearchChange: I,
+				pendingMulti: L,
+				onMultiChange: R,
+				multiSearch: z,
+				onMultiSearchChange: B,
+				onCancel: () => M(null),
+				onApply: () => Y($),
 				onClear: () => {
-					$.filter?.type === "search" ? L("") : (z([]), V(""));
+					$.filter?.type === "search" ? I("") : (R([]), B(""));
 				},
-				anchorEl: P
+				anchorEl: N
 			})
 		]
 	});
-}, oe = ({ theme: n, variant: r = "default", ...i }) => {
-	let { componentStyles: a } = e([c.DATAGRID], n, r.toUpperCase());
-	return /* @__PURE__ */ t(Q, {
+}, Q = ({ theme: n, variant: r = "default", ...i }) => {
+	let { componentStyles: a } = e([l.DATAGRID], n, r.toUpperCase());
+	return /* @__PURE__ */ t(se, {
 		...i,
 		style: a
 	});
 };
 //#endregion
-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 };
+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 };
 
 //# sourceMappingURL=index.mjs.map