taxonium-component
Version:
React component for exploring large phylogenetic trees in the browser
1,839 lines (1,829 loc) • 680 kB
JavaScript
var Zu = Object.defineProperty;
var ed = (e, t, n) => t in e ? Zu(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
var gt = (e, t, n) => ed(e, typeof t != "symbol" ? t + "" : t, n);
import { p as B, c as ye } from "./index-CoM8QAjP.js";
import { aw as mt, cF as td, cG as Fe, cH as At, cI as nd, c8 as od, A as jn, z as Cn, E as wn, cJ as Tt, G as Se, aQ as Je, H as we, I as ht, aR as $n, cK as yo, cL as yn, b2 as Ui, aU as bt, T as No, c3 as Fs, U as So, b0 as Ki, a4 as so, ax as $e, cM as Xi, cN as rd, bA as Yi, bY as Mr, b4 as ld, cC as m, aB as Qi, aP as zr, cO as sd, cP as id, cD as Z, bb as ad, bS as cd, cQ as ud, a3 as dd, B as fd, c as Ji, cR as gd, C as hd, cS as Zi, cT as md, cU as pd, bG as bd, cV as Cd, cW as wd, cX as yd, P as Sd, cY as vd, cZ as Vt, c_ as ul, c$ as ea, b3 as it, aC as Sn, d0 as ta, au as Id, d1 as dl, d2 as Ho } from "./JBrowsePanel-BNE3gNW1.js";
import * as u from "react";
import { createElement as Dn } from "react";
import r from "prop-types";
import { jsxs as Ce, jsx as I } from "react/jsx-runtime";
import * as xd from "react-dom";
import { s as He, g as Ed } from "./getThemeProps-0-NQjaiI.js";
import { S as Md, F as Pd, f as Td } from "./FormControlLabel-CfHqydvH.js";
import { g as Od, a as Fd, l as io, M as fl } from "./MenuItem-DAMdxuDJ.js";
import { D as kd } from "./Divider-36OQM56c.js";
import { B as Dd } from "./Badge-CnFA6CHB.js";
import { b as Br } from "./TableCell-BMrUTE1N.js";
import { C as Rd } from "./Checkbox-D7_LksK2.js";
function Nd(e) {
return String(e).match(/[\d.\-+]*\s*(.*)/)[1] || "";
}
function Hd(e) {
return parseFloat(e);
}
function ks(e) {
return e.substring(2).toLowerCase();
}
function Vd(e, t) {
return t.documentElement.clientWidth < e.clientX || t.documentElement.clientHeight < e.clientY;
}
function Ko(e) {
const {
children: t,
disableReactTree: n = !1,
mouseEvent: o = "onClick",
onClickAway: l,
touchEvent: s = "onTouchEnd"
} = e, i = u.useRef(!1), a = u.useRef(null), c = u.useRef(!1), f = u.useRef(!1);
u.useEffect(() => (setTimeout(() => {
c.current = !0;
}, 0), () => {
c.current = !1;
}), []);
const d = mt(td(t), a), g = Fe((v) => {
const C = f.current;
f.current = !1;
const b = At(a.current);
if (!c.current || !a.current || "clientX" in v && Vd(v, b))
return;
if (i.current) {
i.current = !1;
return;
}
let w;
v.composedPath ? w = v.composedPath().includes(a.current) : w = !b.documentElement.contains(
// @ts-expect-error returns `false` as intended when not dispatched from a Node
v.target
) || a.current.contains(
// @ts-expect-error returns `false` as intended when not dispatched from a Node
v.target
), !w && (n || !C) && l(v);
}), h = (v) => (C) => {
f.current = !0;
const b = t.props[v];
b && b(C);
}, p = {
ref: d
};
return s !== !1 && (p[s] = h(s)), u.useEffect(() => {
if (s !== !1) {
const v = ks(s), C = At(a.current), b = () => {
i.current = !0;
};
return C.addEventListener(v, g), C.addEventListener("touchmove", b), () => {
C.removeEventListener(v, g), C.removeEventListener("touchmove", b);
};
}
}, [g, s]), o !== !1 && (p[o] = h(o)), u.useEffect(() => {
if (o !== !1) {
const v = ks(o), C = At(a.current);
return C.addEventListener(v, g), () => {
C.removeEventListener(v, g);
};
}
}, [g, o]), /* @__PURE__ */ u.cloneElement(t, p);
}
B.env.NODE_ENV !== "production" && (Ko.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The wrapped element.
*/
children: nd.isRequired,
/**
* If `true`, the React tree is ignored and only the DOM tree is considered.
* This prop changes how portaled elements are handled.
* @default false
*/
disableReactTree: r.bool,
/**
* The mouse event to listen to. You can disable the listener by providing `false`.
* @default 'onClick'
*/
mouseEvent: r.oneOf(["onClick", "onMouseDown", "onMouseUp", "onPointerDown", "onPointerUp", !1]),
/**
* Callback fired when a "click away" event is detected.
*/
onClickAway: r.func.isRequired,
/**
* The touch event to listen to. You can disable the listener by providing `false`.
* @default 'onTouchEnd'
*/
touchEvent: r.oneOf(["onTouchEnd", "onTouchStart", !1])
});
B.env.NODE_ENV !== "production" && (Ko.propTypes = od(Ko.propTypes));
function Ld(e) {
return jn("MuiLinearProgress", e);
}
Cn("MuiLinearProgress", ["root", "colorPrimary", "colorSecondary", "determinate", "indeterminate", "buffer", "query", "dashed", "dashedColorPrimary", "dashedColorSecondary", "bar", "bar1", "bar2", "barColorPrimary", "barColorSecondary", "bar1Indeterminate", "bar1Determinate", "bar1Buffer", "bar2Indeterminate", "bar2Buffer"]);
const _r = 4, qr = yn`
0% {
left: -35%;
right: 100%;
}
60% {
left: 100%;
right: -90%;
}
100% {
left: 100%;
right: -90%;
}
`, Gd = typeof qr != "string" ? yo`
animation: ${qr} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
` : null, jr = yn`
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
100% {
left: 107%;
right: -8%;
}
`, $d = typeof jr != "string" ? yo`
animation: ${jr} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
` : null, Wr = yn`
0% {
opacity: 1;
background-position: 0 -23px;
}
60% {
opacity: 0;
background-position: 0 -23px;
}
100% {
opacity: 1;
background-position: -200px -23px;
}
`, Ad = typeof Wr != "string" ? yo`
animation: ${Wr} 3s infinite linear;
` : null, zd = (e) => {
const {
classes: t,
variant: n,
color: o
} = e, l = {
root: ["root", `color${Je(o)}`, n],
dashed: ["dashed", `dashedColor${Je(o)}`],
bar1: ["bar", "bar1", `barColor${Je(o)}`, (n === "indeterminate" || n === "query") && "bar1Indeterminate", n === "determinate" && "bar1Determinate", n === "buffer" && "bar1Buffer"],
bar2: ["bar", "bar2", n !== "buffer" && `barColor${Je(o)}`, n === "buffer" && `color${Je(o)}`, (n === "indeterminate" || n === "query") && "bar2Indeterminate", n === "buffer" && "bar2Buffer"]
};
return we(l, Ld, t);
}, gl = (e, t) => e.vars ? e.vars.palette.LinearProgress[`${t}Bg`] : e.palette.mode === "light" ? e.lighten(e.palette[t].main, 0.62) : e.darken(e.palette[t].main, 0.5), Bd = Se("span", {
name: "MuiLinearProgress",
slot: "Root",
overridesResolver: (e, t) => {
const {
ownerState: n
} = e;
return [t.root, t[`color${Je(n.color)}`], t[n.variant]];
}
})(ht(({
theme: e
}) => ({
position: "relative",
overflow: "hidden",
display: "block",
height: 4,
// Fix Safari's bug during composition of different paint.
zIndex: 0,
"@media print": {
colorAdjust: "exact"
},
variants: [...Object.entries(e.palette).filter($n()).map(([t]) => ({
props: {
color: t
},
style: {
backgroundColor: gl(e, t)
}
})), {
props: ({
ownerState: t
}) => t.color === "inherit" && t.variant !== "buffer",
style: {
"&::before": {
content: '""',
position: "absolute",
left: 0,
top: 0,
right: 0,
bottom: 0,
backgroundColor: "currentColor",
opacity: 0.3
}
}
}, {
props: {
variant: "buffer"
},
style: {
backgroundColor: "transparent"
}
}, {
props: {
variant: "query"
},
style: {
transform: "rotate(180deg)"
}
}]
}))), _d = Se("span", {
name: "MuiLinearProgress",
slot: "Dashed",
overridesResolver: (e, t) => {
const {
ownerState: n
} = e;
return [t.dashed, t[`dashedColor${Je(n.color)}`]];
}
})(ht(({
theme: e
}) => ({
position: "absolute",
marginTop: 0,
height: "100%",
width: "100%",
backgroundSize: "10px 10px",
backgroundPosition: "0 -23px",
variants: [{
props: {
color: "inherit"
},
style: {
opacity: 0.3,
backgroundImage: "radial-gradient(currentColor 0%, currentColor 16%, transparent 42%)"
}
}, ...Object.entries(e.palette).filter($n()).map(([t]) => {
const n = gl(e, t);
return {
props: {
color: t
},
style: {
backgroundImage: `radial-gradient(${n} 0%, ${n} 16%, transparent 42%)`
}
};
})]
})), Ad || {
// At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used.
animation: `${Wr} 3s infinite linear`
}), qd = Se("span", {
name: "MuiLinearProgress",
slot: "Bar1",
overridesResolver: (e, t) => {
const {
ownerState: n
} = e;
return [t.bar, t.bar1, t[`barColor${Je(n.color)}`], (n.variant === "indeterminate" || n.variant === "query") && t.bar1Indeterminate, n.variant === "determinate" && t.bar1Determinate, n.variant === "buffer" && t.bar1Buffer];
}
})(ht(({
theme: e
}) => ({
width: "100%",
position: "absolute",
left: 0,
bottom: 0,
top: 0,
transition: "transform 0.2s linear",
transformOrigin: "left",
variants: [{
props: {
color: "inherit"
},
style: {
backgroundColor: "currentColor"
}
}, ...Object.entries(e.palette).filter($n()).map(([t]) => ({
props: {
color: t
},
style: {
backgroundColor: (e.vars || e).palette[t].main
}
})), {
props: {
variant: "determinate"
},
style: {
transition: `transform .${_r}s linear`
}
}, {
props: {
variant: "buffer"
},
style: {
zIndex: 1,
transition: `transform .${_r}s linear`
}
}, {
props: ({
ownerState: t
}) => t.variant === "indeterminate" || t.variant === "query",
style: {
width: "auto"
}
}, {
props: ({
ownerState: t
}) => t.variant === "indeterminate" || t.variant === "query",
style: Gd || {
animation: `${qr} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite`
}
}]
}))), jd = Se("span", {
name: "MuiLinearProgress",
slot: "Bar2",
overridesResolver: (e, t) => {
const {
ownerState: n
} = e;
return [t.bar, t.bar2, t[`barColor${Je(n.color)}`], (n.variant === "indeterminate" || n.variant === "query") && t.bar2Indeterminate, n.variant === "buffer" && t.bar2Buffer];
}
})(ht(({
theme: e
}) => ({
width: "100%",
position: "absolute",
left: 0,
bottom: 0,
top: 0,
transition: "transform 0.2s linear",
transformOrigin: "left",
variants: [...Object.entries(e.palette).filter($n()).map(([t]) => ({
props: {
color: t
},
style: {
"--LinearProgressBar2-barColor": (e.vars || e).palette[t].main
}
})), {
props: ({
ownerState: t
}) => t.variant !== "buffer" && t.color !== "inherit",
style: {
backgroundColor: "var(--LinearProgressBar2-barColor, currentColor)"
}
}, {
props: ({
ownerState: t
}) => t.variant !== "buffer" && t.color === "inherit",
style: {
backgroundColor: "currentColor"
}
}, {
props: {
color: "inherit"
},
style: {
opacity: 0.3
}
}, ...Object.entries(e.palette).filter($n()).map(([t]) => ({
props: {
color: t,
variant: "buffer"
},
style: {
backgroundColor: gl(e, t),
transition: `transform .${_r}s linear`
}
})), {
props: ({
ownerState: t
}) => t.variant === "indeterminate" || t.variant === "query",
style: {
width: "auto"
}
}, {
props: ({
ownerState: t
}) => t.variant === "indeterminate" || t.variant === "query",
style: $d || {
animation: `${jr} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite`
}
}]
}))), na = /* @__PURE__ */ u.forwardRef(function(t, n) {
const o = wn({
props: t,
name: "MuiLinearProgress"
}), {
className: l,
color: s = "primary",
value: i,
valueBuffer: a,
variant: c = "indeterminate",
...f
} = o, d = {
...o,
color: s,
variant: c
}, g = zd(d), h = Tt(), p = {}, v = {
bar1: {},
bar2: {}
};
if (c === "determinate" || c === "buffer")
if (i !== void 0) {
p["aria-valuenow"] = Math.round(i), p["aria-valuemin"] = 0, p["aria-valuemax"] = 100;
let C = i - 100;
h && (C = -C), v.bar1.transform = `translateX(${C}%)`;
} else B.env.NODE_ENV !== "production" && console.error("MUI: You need to provide a value prop when using the determinate or buffer variant of LinearProgress .");
if (c === "buffer")
if (a !== void 0) {
let C = (a || 0) - 100;
h && (C = -C), v.bar2.transform = `translateX(${C}%)`;
} else B.env.NODE_ENV !== "production" && console.error("MUI: You need to provide a valueBuffer prop when using the buffer variant of LinearProgress.");
return /* @__PURE__ */ Ce(Bd, {
className: ye(g.root, l),
ownerState: d,
role: "progressbar",
...p,
ref: n,
...f,
children: [c === "buffer" ? /* @__PURE__ */ I(_d, {
className: g.dashed,
ownerState: d
}) : null, /* @__PURE__ */ I(qd, {
className: g.bar1,
ownerState: d,
style: v.bar1
}), c === "determinate" ? null : /* @__PURE__ */ I(jd, {
className: g.bar2,
ownerState: d,
style: v.bar2
})]
});
});
B.env.NODE_ENV !== "production" && (na.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* Override or extend the styles applied to the component.
*/
classes: r.object,
/**
* @ignore
*/
className: r.string,
/**
* The color of the component.
* It supports both default and custom theme colors, which can be added as shown in the
* [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
* @default 'primary'
*/
color: r.oneOfType([r.oneOf(["inherit", "primary", "secondary"]), r.string]),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: r.oneOfType([r.arrayOf(r.oneOfType([r.func, r.object, r.bool])), r.func, r.object]),
/**
* The value of the progress indicator for the determinate and buffer variants.
* Value between 0 and 100.
*/
value: r.number,
/**
* The value for the buffer variant.
* Value between 0 and 100.
*/
valueBuffer: r.number,
/**
* The variant to use.
* Use indeterminate or query when there is no progress value.
* @default 'indeterminate'
*/
variant: r.oneOf(["buffer", "determinate", "indeterminate", "query"])
});
const Wd = (e) => {
const {
alignItems: t,
classes: n
} = e;
return we({
root: ["root", t === "flex-start" && "alignItemsFlexStart"]
}, Od, n);
}, Ud = Se("div", {
name: "MuiListItemIcon",
slot: "Root",
overridesResolver: (e, t) => {
const {
ownerState: n
} = e;
return [t.root, n.alignItems === "flex-start" && t.alignItemsFlexStart];
}
})(ht(({
theme: e
}) => ({
minWidth: 56,
color: (e.vars || e).palette.action.active,
flexShrink: 0,
display: "inline-flex",
variants: [{
props: {
alignItems: "flex-start"
},
style: {
marginTop: 8
}
}]
}))), Ur = /* @__PURE__ */ u.forwardRef(function(t, n) {
const o = wn({
props: t,
name: "MuiListItemIcon"
}), {
className: l,
...s
} = o, i = u.useContext(Ui), a = {
...o,
alignItems: i.alignItems
}, c = Wd(a);
return /* @__PURE__ */ I(Ud, {
className: ye(c.root, l),
ownerState: a,
ref: n,
...s
});
});
B.env.NODE_ENV !== "production" && (Ur.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The content of the component, normally `Icon`, `SvgIcon`,
* or a `@mui/icons-material` SVG icon element.
*/
children: r.node,
/**
* Override or extend the styles applied to the component.
*/
classes: r.object,
/**
* @ignore
*/
className: r.string,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: r.oneOfType([r.arrayOf(r.oneOfType([r.func, r.object, r.bool])), r.func, r.object])
});
const Kd = (e) => {
const {
classes: t,
inset: n,
primary: o,
secondary: l,
dense: s
} = e;
return we({
root: ["root", n && "inset", s && "dense", o && l && "multiline"],
primary: ["primary"],
secondary: ["secondary"]
}, Fd, t);
}, Xd = Se("div", {
name: "MuiListItemText",
slot: "Root",
overridesResolver: (e, t) => {
const {
ownerState: n
} = e;
return [{
[`& .${io.primary}`]: t.primary
}, {
[`& .${io.secondary}`]: t.secondary
}, t.root, n.inset && t.inset, n.primary && n.secondary && t.multiline, n.dense && t.dense];
}
})({
flex: "1 1 auto",
minWidth: 0,
marginTop: 4,
marginBottom: 4,
[`.${Fs.root}:where(& .${io.primary})`]: {
display: "block"
},
[`.${Fs.root}:where(& .${io.secondary})`]: {
display: "block"
},
variants: [{
props: ({
ownerState: e
}) => e.primary && e.secondary,
style: {
marginTop: 6,
marginBottom: 6
}
}, {
props: ({
ownerState: e
}) => e.inset,
style: {
paddingLeft: 56
}
}]
}), oa = /* @__PURE__ */ u.forwardRef(function(t, n) {
const o = wn({
props: t,
name: "MuiListItemText"
}), {
children: l,
className: s,
disableTypography: i = !1,
inset: a = !1,
primary: c,
primaryTypographyProps: f,
secondary: d,
secondaryTypographyProps: g,
slots: h = {},
slotProps: p = {},
...v
} = o, {
dense: C
} = u.useContext(Ui);
let b = c ?? l, w = d;
const P = {
...o,
disableTypography: i,
inset: a,
primary: !!b,
secondary: !!w,
dense: C
}, k = Kd(P), N = {
slots: h,
slotProps: {
primary: f,
secondary: g,
...p
}
}, [F, H] = bt("root", {
className: ye(k.root, s),
elementType: Xd,
externalForwardedProps: {
...N,
...v
},
ownerState: P,
ref: n
}), [R, x] = bt("primary", {
className: k.primary,
elementType: No,
externalForwardedProps: N,
ownerState: P
}), [S, E] = bt("secondary", {
className: k.secondary,
elementType: No,
externalForwardedProps: N,
ownerState: P
});
return b != null && b.type !== No && !i && (b = /* @__PURE__ */ I(R, {
variant: C ? "body2" : "body1",
component: x != null && x.variant ? void 0 : "span",
...x,
children: b
})), w != null && w.type !== No && !i && (w = /* @__PURE__ */ I(S, {
variant: "body2",
color: "textSecondary",
...E,
children: w
})), /* @__PURE__ */ Ce(F, {
...H,
children: [b, w]
});
});
B.env.NODE_ENV !== "production" && (oa.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* Alias for the `primary` prop.
*/
children: r.node,
/**
* Override or extend the styles applied to the component.
*/
classes: r.object,
/**
* @ignore
*/
className: r.string,
/**
* If `true`, the children won't be wrapped by a Typography component.
* This can be useful to render an alternative Typography variant by wrapping
* the `children` (or `primary`) text, and optional `secondary` text
* with the Typography component.
* @default false
*/
disableTypography: r.bool,
/**
* If `true`, the children are indented.
* This should be used if there is no left avatar or left icon.
* @default false
*/
inset: r.bool,
/**
* The main content element.
*/
primary: r.node,
/**
* These props will be forwarded to the primary typography component
* (as long as disableTypography is not `true`).
* @deprecated Use `slotProps.primary` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
primaryTypographyProps: r.object,
/**
* The secondary content element.
*/
secondary: r.node,
/**
* These props will be forwarded to the secondary typography component
* (as long as disableTypography is not `true`).
* @deprecated Use `slotProps.secondary` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
secondaryTypographyProps: r.object,
/**
* The props used for each slot inside.
* @default {}
*/
slotProps: r.shape({
primary: r.oneOfType([r.func, r.object]),
root: r.oneOfType([r.func, r.object]),
secondary: r.oneOfType([r.func, r.object])
}),
/**
* The components used for each slot inside.
* @default {}
*/
slots: r.shape({
primary: r.elementType,
root: r.elementType,
secondary: r.elementType
}),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: r.oneOfType([r.arrayOf(r.oneOfType([r.func, r.object, r.bool])), r.func, r.object])
});
const Yd = So(/* @__PURE__ */ I("path", {
d: "M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"
}), "FirstPage"), Qd = So(/* @__PURE__ */ I("path", {
d: "M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"
}), "LastPage");
function Jd(e) {
return jn("MuiSkeleton", e);
}
Cn("MuiSkeleton", ["root", "text", "rectangular", "rounded", "circular", "pulse", "wave", "withChildren", "fitContent", "heightAuto"]);
const Zd = (e) => {
const {
classes: t,
variant: n,
animation: o,
hasChildren: l,
width: s,
height: i
} = e;
return we({
root: ["root", n, o, l && "withChildren", l && !s && "fitContent", l && !i && "heightAuto"]
}, Jd, t);
}, Kr = yn`
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
`, Xr = yn`
0% {
transform: translateX(-100%);
}
50% {
/* +0.5s of delay between each loop */
transform: translateX(100%);
}
100% {
transform: translateX(100%);
}
`, ef = typeof Kr != "string" ? yo`
animation: ${Kr} 2s ease-in-out 0.5s infinite;
` : null, tf = typeof Xr != "string" ? yo`
&::after {
animation: ${Xr} 2s linear 0.5s infinite;
}
` : null, nf = Se("span", {
name: "MuiSkeleton",
slot: "Root",
overridesResolver: (e, t) => {
const {
ownerState: n
} = e;
return [t.root, t[n.variant], n.animation !== !1 && t[n.animation], n.hasChildren && t.withChildren, n.hasChildren && !n.width && t.fitContent, n.hasChildren && !n.height && t.heightAuto];
}
})(ht(({
theme: e
}) => {
const t = Nd(e.shape.borderRadius) || "px", n = Hd(e.shape.borderRadius);
return {
display: "block",
// Create a "on paper" color with sufficient contrast retaining the color
backgroundColor: e.vars ? e.vars.palette.Skeleton.bg : e.alpha(e.palette.text.primary, e.palette.mode === "light" ? 0.11 : 0.13),
height: "1.2em",
variants: [{
props: {
variant: "text"
},
style: {
marginTop: 0,
marginBottom: 0,
height: "auto",
transformOrigin: "0 55%",
transform: "scale(1, 0.60)",
borderRadius: `${n}${t}/${Math.round(n / 0.6 * 10) / 10}${t}`,
"&:empty:before": {
content: '"\\00a0"'
}
}
}, {
props: {
variant: "circular"
},
style: {
borderRadius: "50%"
}
}, {
props: {
variant: "rounded"
},
style: {
borderRadius: (e.vars || e).shape.borderRadius
}
}, {
props: ({
ownerState: o
}) => o.hasChildren,
style: {
"& > *": {
visibility: "hidden"
}
}
}, {
props: ({
ownerState: o
}) => o.hasChildren && !o.width,
style: {
maxWidth: "fit-content"
}
}, {
props: ({
ownerState: o
}) => o.hasChildren && !o.height,
style: {
height: "auto"
}
}, {
props: {
animation: "pulse"
},
style: ef || {
animation: `${Kr} 2s ease-in-out 0.5s infinite`
}
}, {
props: {
animation: "wave"
},
style: {
position: "relative",
overflow: "hidden",
/* Fix bug in Safari https://bugs.webkit.org/show_bug.cgi?id=68196 */
WebkitMaskImage: "-webkit-radial-gradient(white, black)",
"&::after": {
background: `linear-gradient(
90deg,
transparent,
${(e.vars || e).palette.action.hover},
transparent
)`,
content: '""',
position: "absolute",
transform: "translateX(-100%)",
bottom: 0,
left: 0,
right: 0,
top: 0
}
}
}, {
props: {
animation: "wave"
},
style: tf || {
"&::after": {
animation: `${Xr} 2s linear 0.5s infinite`
}
}
}]
};
})), ra = /* @__PURE__ */ u.forwardRef(function(t, n) {
const o = wn({
props: t,
name: "MuiSkeleton"
}), {
animation: l = "pulse",
className: s,
component: i = "span",
height: a,
style: c,
variant: f = "text",
width: d,
...g
} = o, h = {
...o,
animation: l,
component: i,
variant: f,
hasChildren: !!g.children
}, p = Zd(h);
return /* @__PURE__ */ I(nf, {
as: i,
ref: n,
className: ye(p.root, s),
ownerState: h,
...g,
style: {
width: d,
height: a,
...c
}
});
});
B.env.NODE_ENV !== "production" && (ra.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The animation.
* If `false` the animation effect is disabled.
* @default 'pulse'
*/
animation: r.oneOf(["pulse", "wave", !1]),
/**
* Optional children to infer width and height from.
*/
children: r.node,
/**
* Override or extend the styles applied to the component.
*/
classes: r.object,
/**
* @ignore
*/
className: r.string,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: r.elementType,
/**
* Height of the skeleton.
* Useful when you don't want to adapt the skeleton to a text element but for instance a card.
*/
height: r.oneOfType([r.number, r.string]),
/**
* @ignore
*/
style: r.object,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: r.oneOfType([r.arrayOf(r.oneOfType([r.func, r.object, r.bool])), r.func, r.object]),
/**
* The type of content that will be rendered.
* @default 'text'
*/
variant: r.oneOfType([r.oneOf(["circular", "rectangular", "rounded", "text"]), r.string]),
/**
* Width of the skeleton.
* Useful when the skeleton is inside an inline element with no width of its own.
*/
width: r.oneOfType([r.number, r.string])
});
function of(e) {
return jn("MuiSwitch", e);
}
const ct = Cn("MuiSwitch", ["root", "edgeStart", "edgeEnd", "switchBase", "colorPrimary", "colorSecondary", "sizeSmall", "sizeMedium", "checked", "disabled", "input", "thumb", "track"]), rf = (e) => {
const {
classes: t,
edge: n,
size: o,
color: l,
checked: s,
disabled: i
} = e, a = {
root: ["root", n && `edge${Je(n)}`, `size${Je(o)}`],
switchBase: ["switchBase", `color${Je(l)}`, s && "checked", i && "disabled"],
thumb: ["thumb"],
track: ["track"],
input: ["input"]
}, c = we(a, of, t);
return {
...t,
// forward the disabled and checked classes to the SwitchBase
...c
};
}, lf = Se("span", {
name: "MuiSwitch",
slot: "Root",
overridesResolver: (e, t) => {
const {
ownerState: n
} = e;
return [t.root, n.edge && t[`edge${Je(n.edge)}`], t[`size${Je(n.size)}`]];
}
})({
display: "inline-flex",
width: 58,
height: 38,
overflow: "hidden",
padding: 12,
boxSizing: "border-box",
position: "relative",
flexShrink: 0,
zIndex: 0,
// Reset the stacking context.
verticalAlign: "middle",
// For correct alignment with the text.
"@media print": {
colorAdjust: "exact"
},
variants: [{
props: {
edge: "start"
},
style: {
marginLeft: -8
}
}, {
props: {
edge: "end"
},
style: {
marginRight: -8
}
}, {
props: {
size: "small"
},
style: {
width: 40,
height: 24,
padding: 7,
[`& .${ct.thumb}`]: {
width: 16,
height: 16
},
[`& .${ct.switchBase}`]: {
padding: 4,
[`&.${ct.checked}`]: {
transform: "translateX(16px)"
}
}
}
}]
}), sf = Se(Md, {
name: "MuiSwitch",
slot: "SwitchBase",
overridesResolver: (e, t) => {
const {
ownerState: n
} = e;
return [t.switchBase, {
[`& .${ct.input}`]: t.input
}, n.color !== "default" && t[`color${Je(n.color)}`]];
}
})(ht(({
theme: e
}) => ({
position: "absolute",
top: 0,
left: 0,
zIndex: 1,
// Render above the focus ripple.
color: e.vars ? e.vars.palette.Switch.defaultColor : `${e.palette.mode === "light" ? e.palette.common.white : e.palette.grey[300]}`,
transition: e.transitions.create(["left", "transform"], {
duration: e.transitions.duration.shortest
}),
[`&.${ct.checked}`]: {
transform: "translateX(20px)"
},
[`&.${ct.disabled}`]: {
color: e.vars ? e.vars.palette.Switch.defaultDisabledColor : `${e.palette.mode === "light" ? e.palette.grey[100] : e.palette.grey[600]}`
},
[`&.${ct.checked} + .${ct.track}`]: {
opacity: 0.5
},
[`&.${ct.disabled} + .${ct.track}`]: {
opacity: e.vars ? e.vars.opacity.switchTrackDisabled : `${e.palette.mode === "light" ? 0.12 : 0.2}`
},
[`& .${ct.input}`]: {
left: "-100%",
width: "300%"
}
})), ht(({
theme: e
}) => ({
"&:hover": {
backgroundColor: e.alpha((e.vars || e).palette.action.active, (e.vars || e).palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity
"@media (hover: none)": {
backgroundColor: "transparent"
}
},
variants: [...Object.entries(e.palette).filter($n(["light"])).map(([t]) => ({
props: {
color: t
},
style: {
[`&.${ct.checked}`]: {
color: (e.vars || e).palette[t].main,
"&:hover": {
backgroundColor: e.alpha((e.vars || e).palette[t].main, (e.vars || e).palette.action.hoverOpacity),
"@media (hover: none)": {
backgroundColor: "transparent"
}
},
[`&.${ct.disabled}`]: {
color: e.vars ? e.vars.palette.Switch[`${t}DisabledColor`] : `${e.palette.mode === "light" ? e.lighten(e.palette[t].main, 0.62) : e.darken(e.palette[t].main, 0.55)}`
}
},
[`&.${ct.checked} + .${ct.track}`]: {
backgroundColor: (e.vars || e).palette[t].main
}
}
}))]
}))), af = Se("span", {
name: "MuiSwitch",
slot: "Track"
})(ht(({
theme: e
}) => ({
height: "100%",
width: "100%",
borderRadius: 14 / 2,
zIndex: -1,
transition: e.transitions.create(["opacity", "background-color"], {
duration: e.transitions.duration.shortest
}),
backgroundColor: e.vars ? e.vars.palette.common.onBackground : `${e.palette.mode === "light" ? e.palette.common.black : e.palette.common.white}`,
opacity: e.vars ? e.vars.opacity.switchTrack : `${e.palette.mode === "light" ? 0.38 : 0.3}`
}))), cf = Se("span", {
name: "MuiSwitch",
slot: "Thumb"
})(ht(({
theme: e
}) => ({
boxShadow: (e.vars || e).shadows[1],
backgroundColor: "currentColor",
width: 20,
height: 20,
borderRadius: "50%"
}))), Yr = /* @__PURE__ */ u.forwardRef(function(t, n) {
const o = wn({
props: t,
name: "MuiSwitch"
}), {
className: l,
color: s = "primary",
edge: i = !1,
size: a = "medium",
sx: c,
slots: f = {},
slotProps: d = {},
...g
} = o, h = {
...o,
color: s,
edge: i,
size: a
}, p = rf(h), v = {
slots: f,
slotProps: d
}, [C, b] = bt("root", {
className: ye(p.root, l),
elementType: lf,
externalForwardedProps: v,
ownerState: h,
additionalProps: {
sx: c
}
}), [w, P] = bt("thumb", {
className: p.thumb,
elementType: cf,
externalForwardedProps: v,
ownerState: h
}), k = /* @__PURE__ */ I(w, {
...P
}), [N, F] = bt("track", {
className: p.track,
elementType: af,
externalForwardedProps: v,
ownerState: h
});
return /* @__PURE__ */ Ce(C, {
...b,
children: [/* @__PURE__ */ I(sf, {
type: "checkbox",
icon: k,
checkedIcon: k,
ref: n,
ownerState: h,
...g,
classes: {
...p,
root: p.switchBase
},
slots: {
...f.switchBase && {
root: f.switchBase
},
...f.input && {
input: f.input
}
},
slotProps: {
...d.switchBase && {
root: typeof d.switchBase == "function" ? d.switchBase(h) : d.switchBase
},
input: {
role: "switch"
},
...d.input && {
input: typeof d.input == "function" ? d.input(h) : d.input
}
}
}), /* @__PURE__ */ I(N, {
...F
})]
});
});
B.env.NODE_ENV !== "production" && (Yr.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* If `true`, the component is checked.
*/
checked: r.bool,
/**
* The icon to display when the component is checked.
*/
checkedIcon: r.node,
/**
* Override or extend the styles applied to the component.
*/
classes: r.object,
/**
* @ignore
*/
className: r.string,
/**
* The color of the component.
* It supports both default and custom theme colors, which can be added as shown in the
* [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
* @default 'primary'
*/
color: r.oneOfType([r.oneOf(["default", "primary", "secondary", "error", "info", "success", "warning"]), r.string]),
/**
* The default checked state. Use when the component is not controlled.
*/
defaultChecked: r.bool,
/**
* If `true`, the component is disabled.
*/
disabled: r.bool,
/**
* If `true`, the ripple effect is disabled.
* @default false
*/
disableRipple: r.bool,
/**
* If given, uses a negative margin to counteract the padding on one
* side (this is often helpful for aligning the left or right
* side of the icon with content above or below, without ruining the border
* size and shape).
* @default false
*/
edge: r.oneOf(["end", "start", !1]),
/**
* The icon to display when the component is unchecked.
*/
icon: r.node,
/**
* The id of the `input` element.
*/
id: r.string,
/**
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
* @deprecated Use `slotProps.input` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
inputProps: r.object,
/**
* Pass a ref to the `input` element.
* @deprecated Use `slotProps.input.ref` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
inputRef: Ki,
/**
* Callback fired when the state is changed.
*
* @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
* You can pull out the new value by accessing `event.target.value` (string).
* You can pull out the new checked state by accessing `event.target.checked` (boolean).
*/
onChange: r.func,
/**
* If `true`, the `input` element is required.
* @default false
*/
required: r.bool,
/**
* The size of the component.
* `small` is equivalent to the dense switch styling.
* @default 'medium'
*/
size: r.oneOfType([r.oneOf(["medium", "small"]), r.string]),
/**
* The props used for each slot inside.
* @default {}
*/
slotProps: r.shape({
input: r.oneOfType([r.func, r.object]),
root: r.oneOfType([r.func, r.object]),
switchBase: r.oneOfType([r.func, r.object]),
thumb: r.oneOfType([r.func, r.object]),
track: r.oneOfType([r.func, r.object])
}),
/**
* The components used for each slot inside.
* @default {}
*/
slots: r.shape({
input: r.elementType,
root: r.elementType,
switchBase: r.elementType,
thumb: r.elementType,
track: r.elementType
}),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: r.oneOfType([r.arrayOf(r.oneOfType([r.func, r.object, r.bool])), r.func, r.object]),
/**
* The value of the component. The DOM API casts this to a string.
* The browser uses "on" as the default value.
*/
value: r.any
});
const uf = So(/* @__PURE__ */ I("path", {
d: "M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
}), "KeyboardArrowLeft"), df = So(/* @__PURE__ */ I("path", {
d: "M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
}), "KeyboardArrowRight");
function ff(e) {
return jn("MuiTablePaginationActions", e);
}
Cn("MuiTablePaginationActions", ["root"]);
const gf = (e) => {
const {
classes: t
} = e;
return we({
root: ["root"]
}, ff, t);
}, hf = Se("div", {
name: "MuiTablePaginationActions",
slot: "Root"
})({}), la = /* @__PURE__ */ u.forwardRef(function(t, n) {
const o = wn({
props: t,
name: "MuiTablePaginationActions"
}), {
backIconButtonProps: l,
className: s,
count: i,
disabled: a = !1,
getItemAriaLabel: c,
nextIconButtonProps: f,
onPageChange: d,
page: g,
rowsPerPage: h,
showFirstButton: p,
showLastButton: v,
slots: C = {},
slotProps: b = {},
...w
} = o, P = Tt(), N = gf(o), F = (Y) => {
d(Y, 0);
}, H = (Y) => {
d(Y, g - 1);
}, R = (Y) => {
d(Y, g + 1);
}, x = (Y) => {
d(Y, Math.max(0, Math.ceil(i / h) - 1));
}, S = C.firstButton ?? so, E = C.lastButton ?? so, M = C.nextButton ?? so, L = C.previousButton ?? so, V = C.firstButtonIcon ?? Yd, A = C.lastButtonIcon ?? Qd, O = C.nextButtonIcon ?? df, T = C.previousButtonIcon ?? uf, D = P ? E : S, z = P ? M : L, q = P ? L : M, G = P ? S : E, $ = P ? b.lastButton : b.firstButton, _ = P ? b.nextButton : b.previousButton, K = P ? b.previousButton : b.nextButton, j = P ? b.firstButton : b.lastButton;
return /* @__PURE__ */ Ce(hf, {
ref: n,
className: ye(N.root, s),
...w,
children: [p && /* @__PURE__ */ I(D, {
onClick: F,
disabled: a || g === 0,
"aria-label": c("first", g),
title: c("first", g),
...$,
children: P ? /* @__PURE__ */ I(A, {
...b.lastButtonIcon
}) : /* @__PURE__ */ I(V, {
...b.firstButtonIcon
})
}), /* @__PURE__ */ I(z, {
onClick: H,
disabled: a || g === 0,
color: "inherit",
"aria-label": c("previous", g),
title: c("previous", g),
..._ ?? l,
children: P ? /* @__PURE__ */ I(O, {
...b.nextButtonIcon
}) : /* @__PURE__ */ I(T, {
...b.previousButtonIcon
})
}), /* @__PURE__ */ I(q, {
onClick: R,
disabled: a || (i !== -1 ? g >= Math.ceil(i / h) - 1 : !1),
color: "inherit",
"aria-label": c("next", g),
title: c("next", g),
...K ?? f,
children: P ? /* @__PURE__ */ I(T, {
...b.previousButtonIcon
}) : /* @__PURE__ */ I(O, {
...b.nextButtonIcon
})
}), v && /* @__PURE__ */ I(G, {
onClick: x,
disabled: a || g >= Math.ceil(i / h) - 1,
"aria-label": c("last", g),
title: c("last", g),
...j,
children: P ? /* @__PURE__ */ I(V, {
...b.firstButtonIcon
}) : /* @__PURE__ */ I(A, {
...b.lastButtonIcon
})
})]
});
});
B.env.NODE_ENV !== "production" && (la.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* This prop is an alias for `slotProps.previousButton` and will be overriden by it if both are used.
* @deprecated Use `slotProps.previousButton` instead.
*/
backIconButtonProps: r.object,
/**
* @ignore
*/
children: r.node,
/**
* Override or extend the styles applied to the component.
*/
classes: r.object,
/**
* @ignore
*/
className: r.string,
/**
* @ignore
*/
count: r.number.isRequired,
/**
* If `true`, the component is disabled.
* @default false
*/
disabled: r.bool,
/**
* Accepts a function which returns a string value that provides a user-friendly name for the current page.
* This is important for screen reader users.
*
* For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
* @param {string} type The link or button type to format ('first' | 'last' | 'next' | 'previous').
* @returns {string}
*/
getItemAriaLabel: r.func.isRequired,
/**
* This prop is an alias for `slotProps.nextButton` and will be overriden by it if both are used.
* @deprecated Use `slotProps.nextButton` instead.
*/
nextIconButtonProps: r.object,
/**
* @ignore
*/
onPageChange: r.func.isRequired,
/**
* @ignore
*/
page: r.number.isRequired,
/**
* @ignore
*/
rowsPerPage: r.number.isRequired,
/**
* @ignore
*/
showFirstButton: r.bool.isRequired,
/**
* @ignore
*/
showLastButton: r.bool.isRequired,
/**
* @ignore
*/
slotProps: r.shape({
firstButton: r.object,
firstButtonIcon: r.object,
lastButton: r.object,
lastButtonIcon: r.object,
nextButton: r.object,
nextButtonIcon: r.object,
previousButton: r.object,
previousButtonIcon: r.object
}),
/**
* @ignore
*/
slots: r.shape({
firstButton: r.elementType,
firstButtonIcon: r.elementType,
lastButton: r.elementType,
lastButtonIcon: r.elementType,
nextButton: r.elementType,
nextButtonIcon: r.elementType,
previousButton: r.elementType,
previousButtonIcon: r.elementType
})
});
function mf(e) {
return jn("MuiTablePagination", e);
}
const fn = Cn("MuiTablePagination", ["root", "toolbar", "spacer", "selectLabel", "selectRoot", "select", "selectIcon", "input", "menuItem", "displayedRows", "actions"]);
var Ds;
const pf = Se(Br, {
name: "MuiTablePagination",
slot: "Root"
})(ht(({
theme: e
}) => ({
overflow: "auto",
color: (e.vars || e).palette.text.primary,
fontSize: e.typography.pxToRem(14),
// Increase the specificity to override TableCell.
"&:last-child": {
padding: 0
}
}))), bf = Se(rd, {
name: "MuiTablePagination",
slot: "Toolbar",
overridesResolver: (e, t) => ({
[`& .${fn.actions}`]: t.actions,
...t.toolbar
})
})(ht(({
theme: e
}) => ({
minHeight: 52,
paddingRight: 2,
[`${e.breakpoints.up("xs")} and (orientation: landscape)`]: {
minHeight: 52
},
[e.breakpoints.up("sm")]: {
minHeight: 52,
paddingRight: 2
},
[`& .${fn.actions}`]: {
flexShrink: 0,
marginLeft: 20
}
}))), Cf = Se("div", {
name: "MuiTablePagination",
slot: "Spacer"
})({
flex: "1 1 100%"
}), wf = Se("p", {
name: "MuiTablePagination",
slot: "SelectLabel"
})(ht(({
theme: e
}) => ({
...e.typography.body2,
flexShrink: 0
}))), yf = Se(Yi, {
name: "MuiTablePagination",
slot: "Select",
overridesResolver: (e, t) => ({
[`& .${fn.selectIcon}`]: t.selectIcon,
[`& .${fn.select}`]: t.select,
...t.input,
...t.selectRoot
})
})({
color: "inherit",
fontSize: "inherit",
flexShrink: 0,
marginRight: 32,
marginLeft: 8,
[`& .${fn.select}`]: {
paddingLeft: 8,
paddingRight: 24,
textAlign: "right",
textAlignLast: "right"
// Align <select> on Chrome.
}
}), Sf = Se(fl, {
name: "MuiTablePagination",
slot: "MenuItem"
})({}), vf = Se("p", {
name: "MuiTablePagination",
slot: "DisplayedRows"
})(ht(({
theme: e
}) => ({
...e.typography.body2,
flexShrink: 0
})));
function If({
from: e,
to: t,
count: n
}) {
return `${e}–${t} of ${n !== -1 ? n : `more than ${t}`}`;
}
function xf(e) {
return `Go to ${e} page`;
}
const Ef = (e) => {
const {
classes: t
} = e;
return we({
root: ["root"],
toolbar: ["toolbar"],
spacer: ["spacer"],
selectLabel: ["selectLabel"],
select: ["select"],
input: ["input"],
selectIcon: ["selectIcon"],
menuItem: ["menuItem"],
displayedRows: ["displayedRows"],
actions: ["actions"]
}, mf, t);
}, sa = /* @__PURE__ */ u.forwardRef(function(t, n) {
const o = wn({
props: t,
name: "MuiTablePagination"
}), {
ActionsComponent: l = la,
backIconButtonProps: s,
colSpan: i,
component: a = Br,
count: c,
disabled: f = !1,
getItemAriaLabel: d = xf,
labelDisplayedRows: g = If,
labelRowsPerPage: h = "Rows per page:",
nextIconButtonProps: p,
onPageChange: v,
onRowsPerPageChange: C,
page: b,
rowsPerPage: w,
rowsPerPageOptions: P = [10, 25, 50, 100],
SelectProps: k = {},
showFirstButton: N = !1,
showLastButton: F = !1,
slotProps: H = {},
slots: R = {},
...x
} = o, S = o, E = Ef(S), M = (H == null ? void 0 : H.select) ?? k, L = M.native ? "option" : Sf;
let V;
(a === Br || a === "td") && (V = i || 1e3);
const A = $e(M.id), O = $e(M.labelId), T = () => c === -1 ? (b + 1) * w : w === -1 ? c : Math.min(c, (b + 1) * w), D = {
slots: R,
slotProps: H
}, [z, q] = bt("root", {
ref: n,
className: E.root,
elementType: pf,
externalForwardedProps: {
...D,
component: a,
...x
},
ownerState: S,
additionalProps: {
colSpan: V
}
}), [G, $] = bt("toolbar", {
className: E.toolbar,
elementType: bf,
externalForwardedProps: D,
ownerState: S
}), [_, K] = bt("spacer", {
className: E.spacer,
elementType: Cf,
externalForwardedProps: D,
ownerState: S
}), [j, Y] = bt("selectLabel", {
className: E.selectLabel,
elementType: wf,
externalForwardedProps: D,
ownerState: S,
additionalProps: {
id: O
}
}), [Q, ce] = bt("select", {
className: E.select,
elementType: yf,
externalForwardedProps: D,
ownerState: S
}), [ae, ue] = bt("menuItem", {
className: E.menuItem,
elementType: L,
externalForwardedProps: D,
ownerState: S
}), [W, X] = bt("displayedRows", {
className: E.displayedRows,
elementType: vf,
externalForwardedProps: D,
ownerState: S
});
return /* @__PURE__ */ I(z, {
...q,
children: /* @__PURE__ */ Ce(G, {
...$,
children: [/* @__PURE__ */ I(_, {
...K
}), P.length > 1 && /* @__PURE__ */ I(j, {
...Y,
children: h
}), P.length > 1 && /* @__PURE__ */ I(Q, {
variant: "standard",
...!M.variant && {
input: Ds || (Ds = /* @__PURE__ */ I(Xi, {}))
},
value: w,
onChange: C,
id: A,
labelId: O,
...M,
classes: {
...M.classes,
// TODO v5 remove `classes.input`
root: ye(E.input, E.selectRoot, (M.classes || {}).root),
select: ye(E.select, (M.classes || {}).select),
// TODO v5 remove `selectIcon`
icon: ye(E.selectIcon, (M.classes || {}).icon)
},
disabled: f,
...ce,
children: P.map((J) => /* @__PURE__ */ Dn(ae, {
...ue,
key: J.label ? J.label : J,
value: J.value ? J.value : J
}, J.label ? J.label : J))
}), /* @__PURE__ */ I(W, {
...X,
children: g({
from: c === 0 ? 0 : b * w + 1,
to: T(),
count: c === -1 ? -1 : c,
page: b
})
}), /* @__PURE__ */ I(l, {
className: E.actions,
backIconButtonProps: s,
count: c,
nextIconButtonProps: p,
onPageChange: v,
page: b,
rowsPerPage: w,
showFirstButton