@solostylist/ui-kit 1.0.230 → 2.0.0

package/dist/s-data-table-B1TGVupB.js

@@ -0,0 +1,805 @@
+import { n as e } from "./chunk-C_CI6nMA.js";
+import { t } from "./prop-types-BzYPyWN7.js";
+import { r as n, t as r } from "./DefaultPropsProvider-ebWx4_5E.js";
+import { t as i } from "./generateUtilityClass-PAIOm1jC.js";
+import { t as a } from "./clsx-DGZSe4Nt.js";
+import { t as o } from "./Box-9oeZgA1U.js";
+import { t as s } from "./generateUtilityClasses-DvX505Gy.js";
+import { t as c } from "./styled-Bog8QCl3.js";
+import { t as l } from "./memoTheme-qFyKAk7y.js";
+import { t as u } from "./useThemeProps-Cr28OQu3.js";
+import { toSxArray as d } from "./utils/sx.js";
+import { t as f } from "./ButtonBase-DxKtpFYs.js";
+import { t as p } from "./buttonBaseClasses-BvBqFLb_.js";
+import { t as m } from "./useSlot-iIu8ek6E.js";
+import { t as h } from "./capitalize-CccCFNpQ.js";
+import { t as g } from "./createSvgIcon-B0SZlJF1.js";
+import { t as _ } from "./Checkbox-BoZu9z2l.js";
+import { SEmpty as v } from "./s-empty/s-empty.js";
+import * as y from "react";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+//#region ../../node_modules/@mui/icons-material/ArrowDownward.mjs
+var S = /* @__PURE__ */ e(t(), 1), C = g(/* @__PURE__ */ b("path", { d: "m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z" }), "ArrowDownward"), w = g(/* @__PURE__ */ b("path", { d: "M16 17.01V10h-2v7.01h-3L15 21l4-3.99zM9 3 5 6.99h3V14h2V6.99h3z" }), "SwapVert"), T = /* @__PURE__ */ y.createContext();
+process.env.NODE_ENV !== "production" && (T.displayName = "TableContext");
+//#endregion
+//#region ../../node_modules/@mui/material/Table/tableClasses.mjs
+function E(e) {
+	return i("MuiTable", e);
+}
+s("MuiTable", ["root", "stickyHeader"]);
+//#endregion
+//#region ../../node_modules/@mui/material/Table/Table.mjs
+var D = (e) => {
+	let { classes: t, stickyHeader: r } = e;
+	return n({ root: ["root", r && "stickyHeader"] }, E, t);
+}, O = c("table", {
+	name: "MuiTable",
+	slot: "Root",
+	overridesResolver: (e, t) => {
+		let { ownerState: n } = e;
+		return [t.root, n.stickyHeader && t.stickyHeader];
+	}
+})(l(({ theme: e }) => ({
+	display: "table",
+	width: "100%",
+	borderCollapse: "collapse",
+	borderSpacing: 0,
+	"& caption": {
+		...e.typography.body2,
+		padding: e.spacing(2),
+		color: (e.vars || e).palette.text.secondary,
+		textAlign: "left",
+		captionSide: "bottom"
+	},
+	variants: [{
+		props: ({ ownerState: e }) => e.stickyHeader,
+		style: { borderCollapse: "separate" }
+	}]
+}))), k = "table", A = /* @__PURE__ */ y.forwardRef(function(e, t) {
+	let n = r({
+		props: e,
+		name: "MuiTable"
+	}), { className: i, component: o = k, padding: s = "normal", size: c = "medium", stickyHeader: l = !1, ...u } = n, d = {
+		...n,
+		component: o,
+		padding: s,
+		size: c,
+		stickyHeader: l
+	}, f = D(d), p = y.useMemo(() => ({
+		padding: s,
+		size: c,
+		stickyHeader: l
+	}), [
+		s,
+		c,
+		l
+	]);
+	return /* @__PURE__ */ b(T.Provider, {
+		value: p,
+		children: /* @__PURE__ */ b(O, {
+			as: o,
+			role: o === k ? null : "table",
+			ref: t,
+			className: a(f.root, i),
+			ownerState: d,
+			...u
+		})
+	});
+});
+process.env.NODE_ENV !== "production" && (A.propTypes = {
+	children: S.default.node,
+	classes: S.default.object,
+	className: S.default.string,
+	component: S.default.elementType,
+	padding: S.default.oneOf([
+		"checkbox",
+		"none",
+		"normal"
+	]),
+	size: S.default.oneOfType([S.default.oneOf(["medium", "small"]), S.default.string]),
+	stickyHeader: S.default.bool,
+	sx: S.default.oneOfType([
+		S.default.arrayOf(S.default.oneOfType([
+			S.default.func,
+			S.default.object,
+			S.default.bool
+		])),
+		S.default.func,
+		S.default.object
+	])
+});
+//#endregion
+//#region ../../node_modules/@mui/material/Table/Tablelvl2Context.mjs
+var j = /* @__PURE__ */ y.createContext();
+process.env.NODE_ENV !== "production" && (j.displayName = "Tablelvl2Context");
+//#endregion
+//#region ../../node_modules/@mui/material/TableBody/tableBodyClasses.mjs
+function M(e) {
+	return i("MuiTableBody", e);
+}
+var N = s("MuiTableBody", ["root"]), P = (e) => {
+	let { classes: t } = e;
+	return n({ root: ["root"] }, M, t);
+}, F = c("tbody", {
+	name: "MuiTableBody",
+	slot: "Root"
+})({ display: "table-row-group" }), I = { variant: "body" }, L = "tbody", R = /* @__PURE__ */ y.forwardRef(function(e, t) {
+	let n = r({
+		props: e,
+		name: "MuiTableBody"
+	}), { className: i, component: o = L, ...s } = n, c = {
+		...n,
+		component: o
+	}, l = P(c);
+	return /* @__PURE__ */ b(j.Provider, {
+		value: I,
+		children: /* @__PURE__ */ b(F, {
+			className: a(l.root, i),
+			as: o,
+			ref: t,
+			role: o === L ? null : "rowgroup",
+			ownerState: c,
+			...s
+		})
+	});
+});
+process.env.NODE_ENV !== "production" && (R.propTypes = {
+	children: S.default.node,
+	classes: S.default.object,
+	className: S.default.string,
+	component: S.default.elementType,
+	sx: S.default.oneOfType([
+		S.default.arrayOf(S.default.oneOfType([
+			S.default.func,
+			S.default.object,
+			S.default.bool
+		])),
+		S.default.func,
+		S.default.object
+	])
+});
+//#endregion
+//#region ../../node_modules/@mui/material/TableCell/tableCellClasses.mjs
+function ee(e) {
+	return i("MuiTableCell", e);
+}
+var z = s("MuiTableCell", [
+	"root",
+	"head",
+	"body",
+	"footer",
+	"sizeSmall",
+	"sizeMedium",
+	"paddingCheckbox",
+	"paddingNone",
+	"alignLeft",
+	"alignCenter",
+	"alignRight",
+	"alignJustify",
+	"stickyHeader"
+]), te = (e) => {
+	let { classes: t, variant: r, align: i, padding: a, size: o, stickyHeader: s } = e;
+	return n({ root: [
+		"root",
+		r,
+		s && "stickyHeader",
+		i !== "inherit" && `align${h(i)}`,
+		a !== "normal" && `padding${h(a)}`,
+		`size${h(o)}`
+	] }, ee, t);
+}, ne = c("td", {
+	name: "MuiTableCell",
+	slot: "Root",
+	overridesResolver: (e, t) => {
+		let { ownerState: n } = e;
+		return [
+			t.root,
+			t[n.variant],
+			t[`size${h(n.size)}`],
+			n.padding !== "normal" && t[`padding${h(n.padding)}`],
+			n.align !== "inherit" && t[`align${h(n.align)}`],
+			n.stickyHeader && t.stickyHeader
+		];
+	}
+})(l(({ theme: e }) => ({
+	...e.typography.body2,
+	display: "table-cell",
+	verticalAlign: "inherit",
+	borderBottom: e.vars ? `1px solid ${e.vars.palette.TableCell.border}` : `1px solid
+    ${e.palette.mode === "light" ? e.lighten(e.alpha(e.palette.divider, 1), .88) : e.darken(e.alpha(e.palette.divider, 1), .68)}`,
+	textAlign: "left",
+	padding: 16,
+	variants: [
+		{
+			props: { variant: "head" },
+			style: {
+				color: (e.vars || e).palette.text.primary,
+				lineHeight: e.typography.pxToRem(24),
+				fontWeight: e.typography.fontWeightMedium
+			}
+		},
+		{
+			props: { variant: "body" },
+			style: { color: (e.vars || e).palette.text.primary }
+		},
+		{
+			props: { variant: "footer" },
+			style: {
+				color: (e.vars || e).palette.text.secondary,
+				lineHeight: e.typography.pxToRem(21),
+				fontSize: e.typography.pxToRem(12)
+			}
+		},
+		{
+			props: { size: "small" },
+			style: {
+				padding: "6px 16px",
+				[`&.${z.paddingCheckbox}`]: {
+					width: 24,
+					padding: "0 12px 0 16px",
+					"& > *": { padding: 0 }
+				}
+			}
+		},
+		{
+			props: { padding: "checkbox" },
+			style: {
+				width: 48,
+				padding: "0 0 0 4px"
+			}
+		},
+		{
+			props: { padding: "none" },
+			style: { padding: 0 }
+		},
+		{
+			props: { align: "left" },
+			style: { textAlign: "left" }
+		},
+		{
+			props: { align: "center" },
+			style: { textAlign: "center" }
+		},
+		{
+			props: { align: "right" },
+			style: {
+				textAlign: "right",
+				flexDirection: "row-reverse"
+			}
+		},
+		{
+			props: { align: "justify" },
+			style: { textAlign: "justify" }
+		},
+		{
+			props: ({ ownerState: e }) => e.stickyHeader,
+			style: {
+				position: "sticky",
+				top: 0,
+				zIndex: 2,
+				backgroundColor: (e.vars || e).palette.background.default
+			}
+		}
+	]
+}))), B = /* @__PURE__ */ y.forwardRef(function(e, t) {
+	let n = r({
+		props: e,
+		name: "MuiTableCell"
+	}), { align: i = "inherit", className: o, component: s, padding: c, scope: l, size: u, sortDirection: d, variant: f, ...p } = n, m = y.useContext(T), h = y.useContext(j), g = h && h.variant === "head", _;
+	_ = s || (g ? "th" : "td");
+	let v = l;
+	_ === "td" ? v = void 0 : !v && g && (v = "col");
+	let x = f || h && h.variant, S = {
+		...n,
+		align: i,
+		component: _,
+		padding: c || (m && m.padding ? m.padding : "normal"),
+		size: u || (m && m.size ? m.size : "medium"),
+		sortDirection: d,
+		stickyHeader: x === "head" && m && m.stickyHeader,
+		variant: x
+	}, C = te(S), w = null;
+	return d && (w = d === "asc" ? "ascending" : "descending"), /* @__PURE__ */ b(ne, {
+		as: _,
+		ref: t,
+		className: a(C.root, o),
+		"aria-sort": w,
+		scope: v,
+		ownerState: S,
+		...p
+	});
+});
+process.env.NODE_ENV !== "production" && (B.propTypes = {
+	align: S.default.oneOf([
+		"center",
+		"inherit",
+		"justify",
+		"left",
+		"right"
+	]),
+	children: S.default.node,
+	classes: S.default.object,
+	className: S.default.string,
+	component: S.default.elementType,
+	padding: S.default.oneOf([
+		"checkbox",
+		"none",
+		"normal"
+	]),
+	scope: S.default.string,
+	size: S.default.oneOfType([S.default.oneOf(["medium", "small"]), S.default.string]),
+	sortDirection: S.default.oneOf([
+		"asc",
+		"desc",
+		!1
+	]),
+	sx: S.default.oneOfType([
+		S.default.arrayOf(S.default.oneOfType([
+			S.default.func,
+			S.default.object,
+			S.default.bool
+		])),
+		S.default.func,
+		S.default.object
+	]),
+	variant: S.default.oneOfType([S.default.oneOf([
+		"body",
+		"footer",
+		"head"
+	]), S.default.string])
+});
+//#endregion
+//#region ../../node_modules/@mui/material/TableHead/tableHeadClasses.mjs
+function re(e) {
+	return i("MuiTableHead", e);
+}
+s("MuiTableHead", ["root"]);
+//#endregion
+//#region ../../node_modules/@mui/material/TableHead/TableHead.mjs
+var ie = (e) => {
+	let { classes: t } = e;
+	return n({ root: ["root"] }, re, t);
+}, ae = c("thead", {
+	name: "MuiTableHead",
+	slot: "Root"
+})({ display: "table-header-group" }), oe = { variant: "head" }, V = "thead", H = /* @__PURE__ */ y.forwardRef(function(e, t) {
+	let n = r({
+		props: e,
+		name: "MuiTableHead"
+	}), { className: i, component: o = V, ...s } = n, c = {
+		...n,
+		component: o
+	}, l = ie(c);
+	return /* @__PURE__ */ b(j.Provider, {
+		value: oe,
+		children: /* @__PURE__ */ b(ae, {
+			as: o,
+			className: a(l.root, i),
+			ref: t,
+			role: o === V ? null : "rowgroup",
+			ownerState: c,
+			...s
+		})
+	});
+});
+process.env.NODE_ENV !== "production" && (H.propTypes = {
+	children: S.default.node,
+	classes: S.default.object,
+	className: S.default.string,
+	component: S.default.elementType,
+	sx: S.default.oneOfType([
+		S.default.arrayOf(S.default.oneOfType([
+			S.default.func,
+			S.default.object,
+			S.default.bool
+		])),
+		S.default.func,
+		S.default.object
+	])
+});
+//#endregion
+//#region ../../node_modules/@mui/material/TableRow/tableRowClasses.mjs
+function se(e) {
+	return i("MuiTableRow", e);
+}
+var U = s("MuiTableRow", [
+	"root",
+	"selected",
+	"hover",
+	"head",
+	"footer"
+]), ce = (e) => {
+	let { classes: t, selected: r, hover: i, head: a, footer: o } = e;
+	return n({ root: [
+		"root",
+		r && "selected",
+		i && "hover",
+		a && "head",
+		o && "footer"
+	] }, se, t);
+}, le = c("tr", {
+	name: "MuiTableRow",
+	slot: "Root",
+	overridesResolver: (e, t) => {
+		let { ownerState: n } = e;
+		return [
+			t.root,
+			n.head && t.head,
+			n.footer && t.footer
+		];
+	}
+})(l(({ theme: e }) => ({
+	color: "inherit",
+	display: "table-row",
+	verticalAlign: "middle",
+	outline: 0,
+	[`&.${U.hover}:hover`]: { backgroundColor: (e.vars || e).palette.action.hover },
+	[`&.${U.selected}`]: {
+		backgroundColor: e.alpha((e.vars || e).palette.primary.main, (e.vars || e).palette.action.selectedOpacity),
+		"&:hover": { backgroundColor: e.alpha((e.vars || e).palette.primary.main, `${(e.vars || e).palette.action.selectedOpacity} + ${(e.vars || e).palette.action.hoverOpacity}`) }
+	}
+}))), W = "tr", G = /* @__PURE__ */ y.forwardRef(function(e, t) {
+	let n = r({
+		props: e,
+		name: "MuiTableRow"
+	}), { className: i, component: o = W, hover: s = !1, selected: c = !1, ...l } = n, u = y.useContext(j), d = {
+		...n,
+		component: o,
+		hover: s,
+		selected: c,
+		head: u && u.variant === "head",
+		footer: u && u.variant === "footer"
+	};
+	return /* @__PURE__ */ b(le, {
+		as: o,
+		ref: t,
+		className: a(ce(d).root, i),
+		role: o === W ? null : "row",
+		ownerState: d,
+		...l
+	});
+});
+process.env.NODE_ENV !== "production" && (G.propTypes = {
+	children: S.default.node,
+	classes: S.default.object,
+	className: S.default.string,
+	component: S.default.elementType,
+	hover: S.default.bool,
+	selected: S.default.bool,
+	sx: S.default.oneOfType([
+		S.default.arrayOf(S.default.oneOfType([
+			S.default.func,
+			S.default.object,
+			S.default.bool
+		])),
+		S.default.func,
+		S.default.object
+	])
+});
+//#endregion
+//#region ../../node_modules/@mui/material/internal/svg-icons/ArrowDownward.mjs
+var ue = g(/* @__PURE__ */ b("path", { d: "M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" }), "ArrowDownward");
+//#endregion
+//#region ../../node_modules/@mui/material/TableSortLabel/tableSortLabelClasses.mjs
+function de(e) {
+	return i("MuiTableSortLabel", e);
+}
+var K = s("MuiTableSortLabel", [
+	"root",
+	"active",
+	"icon",
+	"directionDesc",
+	"directionAsc"
+]), fe = (e) => {
+	let { classes: t, direction: r, active: i } = e;
+	return n({
+		root: [
+			"root",
+			i && "active",
+			`direction${h(r)}`
+		],
+		icon: ["icon"]
+	}, de, t);
+}, pe = c(f, {
+	name: "MuiTableSortLabel",
+	slot: "Root",
+	overridesResolver: (e, t) => {
+		let { ownerState: n } = e;
+		return [t.root, n.active && t.active];
+	}
+})(l(({ theme: e }) => ({
+	cursor: "pointer",
+	display: "inline-flex",
+	justifyContent: "flex-start",
+	flexDirection: "inherit",
+	alignItems: "center",
+	"&:focus": { color: (e.vars || e).palette.text.secondary },
+	"&:hover": {
+		color: (e.vars || e).palette.text.secondary,
+		[`& .${K.icon}`]: { opacity: .5 }
+	},
+	[`&.${K.active}`]: {
+		color: (e.vars || e).palette.text.primary,
+		[`& .${K.icon}`]: {
+			opacity: 1,
+			color: (e.vars || e).palette.text.secondary
+		}
+	}
+}))), me = c("span", {
+	name: "MuiTableSortLabel",
+	slot: "Icon"
+})(l(({ theme: e }) => ({
+	fontSize: 18,
+	marginRight: 4,
+	marginLeft: 4,
+	opacity: 0,
+	transition: e.transitions.create(["opacity", "transform"], { duration: e.transitions.duration.shorter }),
+	userSelect: "none",
+	variants: [{
+		props: { direction: "desc" },
+		style: { transform: "rotate(0deg)" }
+	}, {
+		props: { direction: "asc" },
+		style: { transform: "rotate(180deg)" }
+	}]
+}))), q = /* @__PURE__ */ y.forwardRef(function(e, t) {
+	let n = r({
+		props: e,
+		name: "MuiTableSortLabel"
+	}), { active: i = !1, children: o, className: s, direction: c = "asc", hideSortIcon: l = !1, IconComponent: u = ue, slots: d = {}, slotProps: f = {}, ...p } = n, h = {
+		...n,
+		active: i,
+		direction: c,
+		hideSortIcon: l,
+		IconComponent: u
+	}, g = fe(h), _ = {
+		slots: d,
+		slotProps: f
+	}, [v, y] = m("root", {
+		elementType: pe,
+		externalForwardedProps: _,
+		ownerState: h,
+		className: a(g.root, s),
+		ref: t,
+		additionalProps: { internalNativeButton: !1 }
+	}), [S, C] = m("icon", {
+		elementType: me,
+		externalForwardedProps: _,
+		ownerState: h,
+		className: g.icon
+	});
+	return /* @__PURE__ */ x(v, {
+		disableRipple: !0,
+		component: "span",
+		...y,
+		...p,
+		children: [o, l && !i ? null : /* @__PURE__ */ b(S, {
+			as: u,
+			...C
+		})]
+	});
+});
+process.env.NODE_ENV !== "production" && (q.propTypes = {
+	active: S.default.bool,
+	children: S.default.node,
+	classes: S.default.object,
+	className: S.default.string,
+	direction: S.default.oneOf(["asc", "desc"]),
+	hideSortIcon: S.default.bool,
+	IconComponent: S.default.elementType,
+	slotProps: S.default.shape({
+		icon: S.default.oneOfType([S.default.func, S.default.object]),
+		root: S.default.oneOfType([S.default.func, S.default.object])
+	}),
+	slots: S.default.shape({
+		icon: S.default.elementType,
+		root: S.default.elementType
+	}),
+	sx: S.default.oneOfType([
+		S.default.arrayOf(S.default.oneOfType([
+			S.default.func,
+			S.default.object,
+			S.default.bool
+		])),
+		S.default.func,
+		S.default.object
+	])
+});
+//#endregion
+//#region lib/s-data-table/s-data-table.tsx
+var J = {
+	width: "40px",
+	minWidth: "40px",
+	maxWidth: "40px",
+	boxSizing: "content-box",
+	p: 2
+}, Y = {
+	width: "40px",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center"
+}, X = {
+	width: "20px",
+	height: "20px",
+	m: 0,
+	p: 0
+}, Z = { height: "48px" };
+function Q(e) {
+	return e.sortKey ?? e.field ?? e.name;
+}
+function he(e, t, n) {
+	return e.formatter ? e.formatter(t, n) : e.field ? t[e.field] : null;
+}
+var ge = c(A, {
+	name: "SDataTable",
+	slot: "Root"
+})(({ theme: e }) => ({
+	border: "1px solid",
+	borderCollapse: "separate",
+	borderColor: (e.vars ?? e).palette.divider,
+	borderRadius: e.shape.borderRadius,
+	borderSpacing: 0,
+	boxSizing: "border-box",
+	overflow: "hidden",
+	[`& .${N.root} > .${U.root}:last-child > .${z.root}`]: { borderBottom: 0 }
+})), $ = Object.assign(y.forwardRef((e, t) => {
+	let n = u({
+		props: e,
+		name: "SDataTable"
+	}), { columns: r, hideHead: i, hover: a, onRowClick: s, onRowKeyDown: c, onDeselectAll: l, onDeselectOne: f, onSelectOne: m, onSelectAll: h, onSort: g, rows: y, selectable: S, selected: T, sortBy: E, sortDirection: D, sx: O, uniqueRowId: k, ...A } = n, j = {
+		...n,
+		hideHead: i,
+		hover: a,
+		selectable: S
+	}, M = /* @__PURE__ */ new Set();
+	y.forEach((e) => {
+		let t = e.id ?? k?.(e);
+		t != null && M.add(t);
+	});
+	let N = Array.from(M).filter((e) => T?.has(e)).length, P = N > 0 && N < M.size, F = M.size > 0 && N === M.size, I = (e, t) => `${String(e.field ?? e.name ?? "column")}-${t}`, L = (e, t) => {
+		let n = Q(t);
+		g?.(e, n, E === n && D === "asc" ? "desc" : "asc");
+	};
+	return /* @__PURE__ */ x(ge, {
+		...A,
+		ownerState: j,
+		ref: t,
+		sx: [{ mt: 1 }, ...d(O)],
+		children: [/* @__PURE__ */ b(H, {
+			sx: { ...i && {
+				visibility: "collapse",
+				"--TableCell-borderWidth": 0
+			} },
+			children: /* @__PURE__ */ x(G, {
+				sx: Z,
+				children: [S ? /* @__PURE__ */ b(B, {
+					padding: "checkbox",
+					sx: {
+						...J,
+						bgcolor: "action.hover",
+						backgroundClip: "padding-box"
+					},
+					children: /* @__PURE__ */ b(o, {
+						sx: Y,
+						children: /* @__PURE__ */ b(_, {
+							checked: F,
+							indeterminate: P,
+							slotProps: { input: { "aria-label": "Select all rows" } },
+							sx: X,
+							onChange: (e) => {
+								F ? l?.(e) : h?.(e);
+							}
+						})
+					})
+				}) : null, r.map((e, t) => {
+					let n = e.sortable && E === Q(e), r = n ? D === "asc" ? "ascending" : "descending" : void 0, i = e.hideName ? null : e.name;
+					return /* @__PURE__ */ b(B, {
+						"aria-sort": r,
+						sortDirection: n ? D : !1,
+						sx: {
+							width: e.width,
+							minWidth: e.width,
+							maxWidth: e.width,
+							...e.align && { textAlign: e.align },
+							bgcolor: "action.hover",
+							backgroundClip: "padding-box"
+						},
+						children: e.sortable ? /* @__PURE__ */ b(q, {
+							active: !!n,
+							direction: n ? D : "asc",
+							IconComponent: n ? C : w,
+							"aria-label": e.hideName ? `Sort by ${e.name}` : void 0,
+							onClick: (t) => L(t, e),
+							sx: {
+								display: "flex",
+								justifyContent: "space-between",
+								gap: 1,
+								width: "100%",
+								color: n ? "primary.main" : "inherit",
+								"&.Mui-active": { color: "primary.main" },
+								[`&.${p.focusVisible}`]: {
+									borderRadius: .5,
+									outline: "2px solid",
+									outlineColor: "primary.main",
+									outlineOffset: 2
+								},
+								[`& .${K.icon}`]: {
+									color: "text.disabled",
+									fontSize: "1.25rem",
+									marginLeft: "auto",
+									marginRight: 0,
+									opacity: 1
+								},
+								[`&:hover .${K.icon}`]: {
+									color: "text.secondary",
+									opacity: 1
+								},
+								[`&.${K.active} .${K.icon}`]: {
+									color: "primary.main",
+									opacity: 1
+								},
+								"@media (prefers-reduced-motion: reduce)": { [`& .${K.icon}`]: { transition: "none" } }
+							},
+							children: i
+						}) : i
+					}, I(e, t));
+				})]
+			})
+		}), /* @__PURE__ */ b(R, { children: y.length ? y.map((e, t) => {
+			let n = e.id ?? k?.(e), i = n != null, l = i ? T?.has(n) : !1;
+			return /* @__PURE__ */ x(G, {
+				hover: a,
+				selected: l,
+				onClick: s ? (t) => {
+					s(t, e);
+				} : void 0,
+				onKeyDown: c || s ? (t) => {
+					c?.(t, e), !(!s || t.defaultPrevented || t.target !== t.currentTarget) && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.currentTarget.click());
+				} : void 0,
+				...s && {
+					"aria-keyshortcuts": "Enter Space",
+					tabIndex: 0
+				},
+				sx: {
+					...Z,
+					...s && {
+						cursor: "pointer",
+						"&:focus-visible": {
+							outline: "2px solid",
+							outlineColor: "primary.main",
+							outlineOffset: -2
+						}
+					}
+				},
+				children: [S ? /* @__PURE__ */ b(B, {
+					padding: "checkbox",
+					sx: J,
+					children: /* @__PURE__ */ b(o, {
+						sx: Y,
+						children: /* @__PURE__ */ b(_, {
+							checked: i ? l : !1,
+							slotProps: { input: { "aria-label": i ? `Select row ${String(n)}` : "Select row" } },
+							sx: X,
+							onChange: (t) => {
+								l ? f?.(t, e) : m?.(t, e);
+							},
+							onClick: (e) => {
+								s && e.stopPropagation();
+							}
+						})
+					})
+				}) : null, r.map((n, r) => /* @__PURE__ */ b(B, {
+					sx: { ...n.align && { textAlign: n.align } },
+					children: he(n, e, t)
+				}, I(n, r)))]
+			}, n ?? t);
+		}) : /* @__PURE__ */ b(G, { children: /* @__PURE__ */ b(B, {
+			align: "center",
+			colSpan: r.length + +!!S,
+			children: /* @__PURE__ */ b(v, {})
+		}) }) })]
+	});
+}), { displayName: "SDataTable" });
+$.displayName = "SDataTable";
+//#endregion
+export { $ as t };