@cgi-learning-hub/ui 1.5.1 → 1.6.0-dev.1747671610

package/dist/{Tab-C1r8JXwz.js → Tab-52AkFc9v.js}

@@ -1,44 +1,45 @@
 import * as s from "react";
-import { P as o, G as re, H as le, I as R, S as so } from "./generateUtilityClasses-BpRGbQmY.js";
-import { jsx as T, jsxs as K } from "react/jsx-runtime";
-import { u as $e } from "./index-JOgYmUF8.js";
-import { u as ao } from "./useTheme-BDL2rp7a.js";
-import { u as he, s as $, c as se } from "./DefaultPropsProvider-Ik4eAJdt.js";
-import { m as me } from "./memoTheme-44McxcVZ.js";
-import { u as io } from "./useEnhancedEffect-CJGo-L3B.js";
-import { d as We } from "./debounce-46wSf_lW.js";
-import { o as De } from "./ownerWindow-niciwP7I.js";
-import { c as je } from "./createSvgIcon-CsMK8tGM.js";
-import { u as ne } from "./useSlotProps-CDJdiQpV.js";
-import { B as ze } from "./ButtonBase-Bncgzjtp.js";
-import { u as fe } from "./useEventCallback-BAQJJ3ye.js";
-import { o as co } from "./ownerDocument-CUrv0DIK.js";
-import { r as uo } from "./refType-DsRJ5_Sj.js";
-import { u as po } from "./useThemeProps-DjkGUV8r.js";
-import { c as Le } from "./capitalize-DSG2FA7x.js";
-import { u as fo } from "./unsupportedProp-BuVD30Gh.js";
-const ve = /* @__PURE__ */ s.createContext(null);
-process.env.NODE_ENV !== "production" && (ve.displayName = "TabContext");
-function bo() {
-  const [t, e] = s.useState(null);
+import { P as e } from "./index-Sy88PpwE.js";
+import { jsx as T, jsxs as G } from "react/jsx-runtime";
+import { F as ae, G as ie, H as j, X as wo } from "./generateUtilityClasses-DngCqveO.js";
+import { u as ze } from "./index-DX2Sl0Ig.js";
+import { u as xo } from "./useTheme-C59wIJ3-.js";
+import { u as Se, s as D, c as ce } from "./DefaultPropsProvider-hFv1J_xl.js";
+import { m as ve } from "./memoTheme-nmt7i1dS.js";
+import { a as Bo, u as me } from "./useEventCallback-Yoj9nCug.js";
+import { d as Fe } from "./debounce-46wSf_lW.js";
+import { o as Ae } from "./ownerWindow-niciwP7I.js";
+import { u as H } from "./useSlot-BDb1lvxu.js";
+import { u as se } from "./useSlotProps-B_D8u0j-.js";
+import { c as Ve } from "./createSvgIcon-BlKmtOkV.js";
+import { B as He } from "./ButtonBase-Chb99sDQ.js";
+import { o as Co } from "./ownerDocument-CUrv0DIK.js";
+import { r as Eo } from "./refType-Dp7CJc86.js";
+import { u as Io } from "./useThemeProps-BFQ8ndnj.js";
+import { c as Ue } from "./capitalize-BHFotl9B.js";
+import { u as Po } from "./unsupportedProp-BuVD30Gh.js";
+const Te = /* @__PURE__ */ s.createContext(null);
+process.env.NODE_ENV !== "production" && (Te.displayName = "TabContext");
+function Mo() {
+  const [t, o] = s.useState(null);
   return s.useEffect(() => {
-    e(`mui-p-${Math.round(Math.random() * 1e5)}`);
+    o(`mui-p-${Math.round(Math.random() * 1e5)}`);
   }, []), t;
 }
-function ho(t) {
+function Oo(t) {
   const {
-    children: e,
-    value: n
-  } = t, a = bo(), i = s.useMemo(() => ({
+    children: o,
+    value: r
+  } = t, a = Mo(), i = s.useMemo(() => ({
     idPrefix: a,
-    value: n
-  }), [a, n]);
-  return /* @__PURE__ */ T(ve.Provider, {
+    value: r
+  }), [a, r]);
+  return /* @__PURE__ */ T(Te.Provider, {
     value: i,
-    children: e
+    children: o
   });
 }
-process.env.NODE_ENV !== "production" && (ho.propTypes = {
+process.env.NODE_ENV !== "production" && (Oo.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -46,50 +47,50 @@ process.env.NODE_ENV !== "production" && (ho.propTypes = {
   /**
    * The content of the component.
    */
-  children: o.node,
+  children: e.node,
   /**
    * The value of the currently selected `Tab`.
    */
-  value: o.oneOfType([o.number, o.string]).isRequired
+  value: e.oneOfType([e.number, e.string]).isRequired
 });
-function Ae() {
-  return s.useContext(ve);
+function Xe() {
+  return s.useContext(Te);
 }
-function Fe(t, e) {
+function Ke(t, o) {
   const {
-    idPrefix: n
+    idPrefix: r
   } = t;
-  return n === null ? null : `${t.idPrefix}-P-${e}`;
+  return r === null ? null : `${t.idPrefix}-P-${o}`;
 }
-function Ve(t, e) {
+function _e(t, o) {
   const {
-    idPrefix: n
+    idPrefix: r
   } = t;
-  return n === null ? null : `${t.idPrefix}-T-${e}`;
+  return r === null ? null : `${t.idPrefix}-T-${o}`;
 }
-function mo(t) {
+function Ro(t) {
   return (1 + Math.sin(Math.PI * t - Math.PI / 2)) / 2;
 }
-function vo(t, e, n, a = {}, i = () => {
+function No(t, o, r, a = {}, i = () => {
 }) {
   const {
-    ease: d = mo,
+    ease: d = Ro,
     duration: p = 300
     // standard
   } = a;
   let f = null;
-  const h = e[t];
+  const h = o[t];
   let S = !1;
-  const y = () => {
+  const v = () => {
     S = !0;
-  }, m = (v) => {
+  }, m = (y) => {
     if (S) {
       i(new Error("Animation cancelled"));
       return;
     }
-    f === null && (f = v);
-    const g = Math.min(1, (v - f) / p);
-    if (e[t] = d(g) * (n - h) + h, g >= 1) {
+    f === null && (f = y);
+    const g = Math.min(1, (y - f) / p);
+    if (o[t] = d(g) * (r - h) + h, g >= 1) {
       requestAnimationFrame(() => {
         i(null);
       });
@@ -97,72 +98,72 @@ function vo(t, e, n, a = {}, i = () => {
     }
     requestAnimationFrame(m);
   };
-  return h === n ? (i(new Error("Element already at target position")), y) : (requestAnimationFrame(m), y);
+  return h === r ? (i(new Error("Element already at target position")), v) : (requestAnimationFrame(m), v);
 }
-const So = {
+const jo = {
   width: 99,
   height: 99,
   position: "absolute",
   top: -9999,
   overflow: "scroll"
 };
-function He(t) {
+function Ye(t) {
   const {
-    onChange: e,
-    ...n
+    onChange: o,
+    ...r
   } = t, a = s.useRef(), i = s.useRef(null), d = () => {
     a.current = i.current.offsetHeight - i.current.clientHeight;
   };
-  return io(() => {
-    const p = We(() => {
+  return Bo(() => {
+    const p = Fe(() => {
       const h = a.current;
-      d(), h !== a.current && e(a.current);
-    }), f = De(i.current);
+      d(), h !== a.current && o(a.current);
+    }), f = Ae(i.current);
     return f.addEventListener("resize", p), () => {
       p.clear(), f.removeEventListener("resize", p);
     };
-  }, [e]), s.useEffect(() => {
-    d(), e(a.current);
-  }, [e]), /* @__PURE__ */ T("div", {
-    style: So,
-    ...n,
+  }, [o]), s.useEffect(() => {
+    d(), o(a.current);
+  }, [o]), /* @__PURE__ */ T("div", {
+    style: jo,
+    ...r,
     ref: i
   });
 }
-process.env.NODE_ENV !== "production" && (He.propTypes = {
-  onChange: o.func.isRequired
+process.env.NODE_ENV !== "production" && (Ye.propTypes = {
+  onChange: e.func.isRequired
 });
-const yo = je(/* @__PURE__ */ T("path", {
+const ko = Ve(/* @__PURE__ */ T("path", {
   d: "M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
-}), "KeyboardArrowLeft"), To = je(/* @__PURE__ */ T("path", {
+}), "KeyboardArrowLeft"), $o = Ve(/* @__PURE__ */ T("path", {
   d: "M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
 }), "KeyboardArrowRight");
-function go(t) {
-  return le("MuiTabScrollButton", t);
+function Do(t) {
+  return ie("MuiTabScrollButton", t);
 }
-const wo = re("MuiTabScrollButton", ["root", "vertical", "horizontal", "disabled"]), xo = (t) => {
+const Wo = ae("MuiTabScrollButton", ["root", "vertical", "horizontal", "disabled"]), Lo = (t) => {
   const {
-    classes: e,
-    orientation: n,
+    classes: o,
+    orientation: r,
     disabled: a
   } = t;
-  return se({
-    root: ["root", n, a && "disabled"]
-  }, go, e);
-}, Co = $(ze, {
+  return ce({
+    root: ["root", r, a && "disabled"]
+  }, Do, o);
+}, zo = D(He, {
   name: "MuiTabScrollButton",
   slot: "Root",
-  overridesResolver: (t, e) => {
+  overridesResolver: (t, o) => {
     const {
-      ownerState: n
+      ownerState: r
     } = t;
-    return [e.root, n.orientation && e[n.orientation]];
+    return [o.root, r.orientation && o[r.orientation]];
   }
 })({
   width: 40,
   flexShrink: 0,
   opacity: 0.8,
-  [`&.${wo.disabled}`]: {
+  [`&.${Wo.disabled}`]: {
     opacity: 0
   },
   variants: [{
@@ -177,9 +178,9 @@ const wo = re("MuiTabScrollButton", ["root", "vertical", "horizontal", "disabled
       }
     }
   }]
-}), Ue = /* @__PURE__ */ s.forwardRef(function(e, n) {
-  const a = he({
-    props: e,
+}), qe = /* @__PURE__ */ s.forwardRef(function(o, r) {
+  const a = Se({
+    props: o,
     name: "MuiTabScrollButton"
   }), {
     className: i,
@@ -188,47 +189,47 @@ const wo = re("MuiTabScrollButton", ["root", "vertical", "horizontal", "disabled
     direction: f,
     orientation: h,
     disabled: S,
-    ...y
-  } = a, m = $e(), v = {
+    ...v
+  } = a, m = ze(), y = {
     isRtl: m,
     ...a
-  }, g = xo(v), W = d.StartScrollButtonIcon ?? yo, E = d.EndScrollButtonIcon ?? To, w = ne({
+  }, g = Lo(y), W = d.StartScrollButtonIcon ?? ko, E = d.EndScrollButtonIcon ?? $o, x = se({
     elementType: W,
     externalSlotProps: p.startScrollButtonIcon,
     additionalProps: {
       fontSize: "small"
     },
-    ownerState: v
-  }), F = ne({
+    ownerState: y
+  }), J = se({
     elementType: E,
     externalSlotProps: p.endScrollButtonIcon,
     additionalProps: {
       fontSize: "small"
     },
-    ownerState: v
+    ownerState: y
   });
-  return /* @__PURE__ */ T(Co, {
+  return /* @__PURE__ */ T(zo, {
     component: "div",
-    className: R(g.root, i),
-    ref: n,
+    className: j(g.root, i),
+    ref: r,
     role: null,
-    ownerState: v,
+    ownerState: y,
     tabIndex: null,
-    ...y,
+    ...v,
     style: {
-      ...y.style,
+      ...v.style,
       ...h === "vertical" && {
         "--TabScrollButton-svgRotate": `rotate(${m ? -90 : 90}deg)`
       }
     },
     children: f === "left" ? /* @__PURE__ */ T(W, {
-      ...w
+      ...x
     }) : /* @__PURE__ */ T(E, {
-      ...F
+      ...J
     })
   });
 });
-process.env.NODE_ENV !== "production" && (Ue.propTypes = {
+process.env.NODE_ENV !== "production" && (qe.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -236,59 +237,59 @@ process.env.NODE_ENV !== "production" && (Ue.propTypes = {
   /**
    * The content of the component.
    */
-  children: o.node,
+  children: e.node,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: o.object,
+  classes: e.object,
   /**
    * @ignore
    */
-  className: o.string,
+  className: e.string,
   /**
    * The direction the button should indicate.
    */
-  direction: o.oneOf(["left", "right"]).isRequired,
+  direction: e.oneOf(["left", "right"]).isRequired,
   /**
    * If `true`, the component is disabled.
    * @default false
    */
-  disabled: o.bool,
+  disabled: e.bool,
   /**
    * The component orientation (layout flow direction).
    */
-  orientation: o.oneOf(["horizontal", "vertical"]).isRequired,
+  orientation: e.oneOf(["horizontal", "vertical"]).isRequired,
   /**
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    * @default {}
    */
-  slotProps: o.shape({
-    endScrollButtonIcon: o.oneOfType([o.func, o.object]),
-    startScrollButtonIcon: o.oneOfType([o.func, o.object])
+  slotProps: e.shape({
+    endScrollButtonIcon: e.oneOfType([e.func, e.object]),
+    startScrollButtonIcon: e.oneOfType([e.func, e.object])
   }),
   /**
    * The components used for each slot inside.
    * @default {}
    */
-  slots: o.shape({
-    EndScrollButtonIcon: o.elementType,
-    StartScrollButtonIcon: o.elementType
+  slots: e.shape({
+    EndScrollButtonIcon: e.elementType,
+    StartScrollButtonIcon: e.elementType
   }),
   /**
    * @ignore
    */
-  style: o.object,
+  style: e.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object])
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
 });
-function Bo(t) {
-  return le("MuiTabs", t);
+function Fo(t) {
+  return ie("MuiTabs", t);
 }
-const be = re("MuiTabs", ["root", "vertical", "flexContainer", "flexContainerVertical", "centered", "scroller", "fixed", "scrollableX", "scrollableY", "hideScrollbar", "scrollButtons", "scrollButtonsHideMobile", "indicator"]), Pe = (t, e) => t === e ? t.firstChild : e && e.nextElementSibling ? e.nextElementSibling : t.firstChild, Re = (t, e) => t === e ? t.lastChild : e && e.previousElementSibling ? e.previousElementSibling : t.lastChild, te = (t, e, n) => {
-  let a = !1, i = n(t, e);
+const ye = ae("MuiTabs", ["root", "vertical", "list", "flexContainer", "flexContainerVertical", "centered", "scroller", "fixed", "scrollableX", "scrollableY", "hideScrollbar", "scrollButtons", "scrollButtonsHideMobile", "indicator"]), $e = (t, o) => t === o ? t.firstChild : o && o.nextElementSibling ? o.nextElementSibling : t.firstChild, De = (t, o) => t === o ? t.lastChild : o && o.previousElementSibling ? o.previousElementSibling : t.lastChild, le = (t, o, r) => {
+  let a = !1, i = r(t, o);
   for (; i; ) {
     if (i === t.firstChild) {
       if (a)
@@ -297,16 +298,16 @@ const be = re("MuiTabs", ["root", "vertical", "flexContainer", "flexContainerVer
     }
     const d = i.disabled || i.getAttribute("aria-disabled") === "true";
     if (!i.hasAttribute("tabindex") || d)
-      i = n(t, i);
+      i = r(t, i);
     else {
       i.focus();
       return;
     }
   }
-}, Eo = (t) => {
+}, Ao = (t) => {
   const {
-    vertical: e,
-    fixed: n,
+    vertical: o,
+    fixed: r,
     hideScrollbar: a,
     scrollableX: i,
     scrollableY: d,
@@ -314,29 +315,29 @@ const be = re("MuiTabs", ["root", "vertical", "flexContainer", "flexContainerVer
     scrollButtonsHideMobile: f,
     classes: h
   } = t;
-  return se({
-    root: ["root", e && "vertical"],
-    scroller: ["scroller", n && "fixed", a && "hideScrollbar", i && "scrollableX", d && "scrollableY"],
-    flexContainer: ["flexContainer", e && "flexContainerVertical", p && "centered"],
+  return ce({
+    root: ["root", o && "vertical"],
+    scroller: ["scroller", r && "fixed", a && "hideScrollbar", i && "scrollableX", d && "scrollableY"],
+    list: ["list", "flexContainer", o && "flexContainerVertical", o && "vertical", p && "centered"],
     indicator: ["indicator"],
     scrollButtons: ["scrollButtons", f && "scrollButtonsHideMobile"],
     scrollableX: [i && "scrollableX"],
     hideScrollbar: [a && "hideScrollbar"]
-  }, Bo, h);
-}, Io = $("div", {
+  }, Fo, h);
+}, Vo = D("div", {
   name: "MuiTabs",
   slot: "Root",
-  overridesResolver: (t, e) => {
+  overridesResolver: (t, o) => {
     const {
-      ownerState: n
+      ownerState: r
     } = t;
     return [{
-      [`& .${be.scrollButtons}`]: e.scrollButtons
+      [`& .${ye.scrollButtons}`]: o.scrollButtons
     }, {
-      [`& .${be.scrollButtons}`]: n.scrollButtonsHideMobile && e.scrollButtonsHideMobile
-    }, e.root, n.vertical && e.vertical];
+      [`& .${ye.scrollButtons}`]: r.scrollButtonsHideMobile && o.scrollButtonsHideMobile
+    }, o.root, r.vertical && o.vertical];
   }
-})(me(({
+})(ve(({
   theme: t
 }) => ({
   overflow: "hidden",
@@ -346,31 +347,31 @@ const be = re("MuiTabs", ["root", "vertical", "flexContainer", "flexContainerVer
   display: "flex",
   variants: [{
     props: ({
-      ownerState: e
-    }) => e.vertical,
+      ownerState: o
+    }) => o.vertical,
     style: {
       flexDirection: "column"
     }
   }, {
     props: ({
-      ownerState: e
-    }) => e.scrollButtonsHideMobile,
+      ownerState: o
+    }) => o.scrollButtonsHideMobile,
     style: {
-      [`& .${be.scrollButtons}`]: {
+      [`& .${ye.scrollButtons}`]: {
         [t.breakpoints.down("sm")]: {
           display: "none"
         }
       }
     }
   }]
-}))), Mo = $("div", {
+}))), Ho = D("div", {
   name: "MuiTabs",
   slot: "Scroller",
-  overridesResolver: (t, e) => {
+  overridesResolver: (t, o) => {
     const {
-      ownerState: n
+      ownerState: r
     } = t;
-    return [e.scroller, n.fixed && e.fixed, n.hideScrollbar && e.hideScrollbar, n.scrollableX && e.scrollableX, n.scrollableY && e.scrollableY];
+    return [o.scroller, r.fixed && o.fixed, r.hideScrollbar && o.hideScrollbar, r.scrollableX && o.scrollableX, r.scrollableY && o.scrollableY];
   }
 })({
   position: "relative",
@@ -415,14 +416,14 @@ const be = re("MuiTabs", ["root", "vertical", "flexContainer", "flexContainerVer
       overflowX: "hidden"
     }
   }]
-}), No = $("div", {
+}), Uo = D("div", {
   name: "MuiTabs",
-  slot: "FlexContainer",
-  overridesResolver: (t, e) => {
+  slot: "List",
+  overridesResolver: (t, o) => {
     const {
-      ownerState: n
+      ownerState: r
     } = t;
-    return [e.flexContainer, n.vertical && e.flexContainerVertical, n.centered && e.centered];
+    return [o.list, o.flexContainer, r.vertical && o.flexContainerVertical, r.centered && o.centered];
   }
 })({
   display: "flex",
@@ -441,11 +442,11 @@ const be = re("MuiTabs", ["root", "vertical", "flexContainer", "flexContainerVer
       justifyContent: "center"
     }
   }]
-}), Po = $("span", {
+}), Xo = D("span", {
   name: "MuiTabs",
   slot: "Indicator",
-  overridesResolver: (t, e) => e.indicator
-})(me(({
+  overridesResolver: (t, o) => o.indicator
+})(ve(({
   theme: t
 }) => ({
   position: "absolute",
@@ -469,15 +470,15 @@ const be = re("MuiTabs", ["root", "vertical", "flexContainer", "flexContainerVer
     }
   }, {
     props: ({
-      ownerState: e
-    }) => e.vertical,
+      ownerState: o
+    }) => o.vertical,
     style: {
       height: "100%",
       width: 2,
       right: 0
     }
   }]
-}))), Ro = $(He)({
+}))), Ko = D(Ye)({
   overflowX: "auto",
   overflowY: "hidden",
   // Hide dimensionless scrollbar on macOS
@@ -487,76 +488,86 @@ const be = re("MuiTabs", ["root", "vertical", "flexContainer", "flexContainerVer
     display: "none"
     // Safari + Chrome
   }
-}), Oe = {};
-let ke = !1;
-const Xe = /* @__PURE__ */ s.forwardRef(function(e, n) {
-  const a = he({
-    props: e,
+}), We = {};
+let Le = !1;
+const Ge = /* @__PURE__ */ s.forwardRef(function(o, r) {
+  const a = Se({
+    props: o,
     name: "MuiTabs"
-  }), i = ao(), d = $e(), {
+  }), i = xo(), d = ze(), {
     "aria-label": p,
     "aria-labelledby": f,
     action: h,
     centered: S = !1,
-    children: y,
+    children: v,
     className: m,
-    component: v = "div",
+    component: y = "div",
     allowScrollButtonsMobile: g = !1,
     indicatorColor: W = "primary",
     onChange: E,
-    orientation: w = "horizontal",
-    ScrollButtonComponent: F = Ue,
-    scrollButtons: M = "auto",
-    selectionFollowsFocus: ae,
-    slots: V = {},
-    slotProps: U = {},
-    TabIndicatorProps: H = {},
-    TabScrollButtonProps: D = {},
-    textColor: G = "primary",
-    value: O,
-    variant: N = "standard",
-    visibleScrollbar: ie = !1,
-    ..._e
-  } = a, C = N === "scrollable", B = w === "vertical", X = B ? "scrollTop" : "scrollLeft", J = B ? "top" : "left", Q = B ? "bottom" : "right", ce = B ? "clientHeight" : "clientWidth", _ = B ? "height" : "width", j = {
+    orientation: x = "horizontal",
+    ScrollButtonComponent: J,
+    // TODO: remove in v7 (deprecated in v6)
+    scrollButtons: P = "auto",
+    selectionFollowsFocus: de,
+    slots: M = {},
+    slotProps: A = {},
+    TabIndicatorProps: U = {},
+    // TODO: remove in v7 (deprecated in v6)
+    TabScrollButtonProps: X = {},
+    // TODO: remove in v7 (deprecated in v6)
+    textColor: Q = "primary",
+    value: k,
+    variant: O = "standard",
+    visibleScrollbar: ue = !1,
+    ...Je
+  } = a, B = O === "scrollable", C = x === "vertical", K = C ? "scrollTop" : "scrollLeft", Z = C ? "top" : "left", ee = C ? "bottom" : "right", pe = C ? "clientHeight" : "clientWidth", _ = C ? "height" : "width", R = {
     ...a,
-    component: v,
+    component: y,
     allowScrollButtonsMobile: g,
     indicatorColor: W,
-    orientation: w,
-    vertical: B,
-    scrollButtons: M,
-    textColor: G,
-    variant: N,
-    visibleScrollbar: ie,
-    fixed: !C,
-    hideScrollbar: C && !ie,
-    scrollableX: C && !B,
-    scrollableY: C && B,
-    centered: S && !C,
+    orientation: x,
+    vertical: C,
+    scrollButtons: P,
+    textColor: Q,
+    variant: O,
+    visibleScrollbar: ue,
+    fixed: !B,
+    hideScrollbar: B && !ue,
+    scrollableX: B && !C,
+    scrollableY: B && C,
+    centered: S && !B,
     scrollButtonsHideMobile: !g
-  }, k = Eo(j), Ye = ne({
-    elementType: V.StartScrollButtonIcon,
-    externalSlotProps: U.startScrollButtonIcon,
-    ownerState: j
-  }), qe = ne({
-    elementType: V.EndScrollButtonIcon,
-    externalSlotProps: U.endScrollButtonIcon,
-    ownerState: j
+  }, $ = Ao(R), Qe = se({
+    elementType: M.StartScrollButtonIcon,
+    externalSlotProps: A.startScrollButtonIcon,
+    ownerState: R
+  }), Ze = se({
+    elementType: M.EndScrollButtonIcon,
+    externalSlotProps: A.endScrollButtonIcon,
+    ownerState: R
   });
-  process.env.NODE_ENV !== "production" && S && C && console.error('MUI: You can not use the `centered={true}` and `variant="scrollable"` properties at the same time on a `Tabs` component.');
-  const [Se, Ke] = s.useState(!1), [z, ye] = s.useState(Oe), [Te, Ge] = s.useState(!1), [ge, Je] = s.useState(!1), [we, Qe] = s.useState(!1), [xe, Ze] = s.useState({
+  process.env.NODE_ENV !== "production" && S && B && console.error('MUI: You can not use the `centered={true}` and `variant="scrollable"` properties at the same time on a `Tabs` component.');
+  const [ge, eo] = s.useState(!1), [L, we] = s.useState(We), [xe, oo] = s.useState(!1), [Be, to] = s.useState(!1), [Ce, no] = s.useState(!1), [Ee, ro] = s.useState({
     overflow: "hidden",
     scrollbarWidth: 0
-  }), Z = /* @__PURE__ */ new Map(), P = s.useRef(null), L = s.useRef(null), Ce = () => {
-    const r = P.current;
+  }), oe = /* @__PURE__ */ new Map(), N = s.useRef(null), z = s.useRef(null), V = {
+    slots: M,
+    slotProps: {
+      indicator: U,
+      scrollButton: X,
+      ...A
+    }
+  }, Ie = () => {
+    const n = N.current;
     let l;
-    if (r) {
-      const u = r.getBoundingClientRect();
+    if (n) {
+      const u = n.getBoundingClientRect();
       l = {
-        clientWidth: r.clientWidth,
-        scrollLeft: r.scrollLeft,
-        scrollTop: r.scrollTop,
-        scrollWidth: r.scrollWidth,
+        clientWidth: n.clientWidth,
+        scrollLeft: n.scrollLeft,
+        scrollTop: n.scrollTop,
+        scrollWidth: n.scrollWidth,
         top: u.top,
         bottom: u.bottom,
         left: u.left,
@@ -564,253 +575,288 @@ const Xe = /* @__PURE__ */ s.forwardRef(function(e, n) {
       };
     }
     let c;
-    if (r && O !== !1) {
-      const u = L.current.children;
+    if (n && k !== !1) {
+      const u = z.current.children;
       if (u.length > 0) {
-        const b = u[Z.get(O)];
-        process.env.NODE_ENV !== "production" && (b || console.error(["MUI: The `value` provided to the Tabs component is invalid.", `None of the Tabs' children match with "${O}".`, Z.keys ? `You can provide one of the following values: ${Array.from(Z.keys()).join(", ")}.` : null].join(`
-`))), c = b ? b.getBoundingClientRect() : null, process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "test" && !ke && c && c.width === 0 && c.height === 0 && // if the whole Tabs component is hidden, don't warn
-        l.clientWidth !== 0 && (l = null, console.error(["MUI: The `value` provided to the Tabs component is invalid.", `The Tab with this \`value\` ("${O}") is not part of the document layout.`, "Make sure the tab item is present in the document or that it's not `display: none`."].join(`
-`)), ke = !0);
+        const b = u[oe.get(k)];
+        process.env.NODE_ENV !== "production" && (b || console.error(["MUI: The `value` provided to the Tabs component is invalid.", `None of the Tabs' children match with "${k}".`, oe.keys ? `You can provide one of the following values: ${Array.from(oe.keys()).join(", ")}.` : null].join(`
+`))), c = b ? b.getBoundingClientRect() : null, process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "test" && !Le && c && c.width === 0 && c.height === 0 && // if the whole Tabs component is hidden, don't warn
+        l.clientWidth !== 0 && (l = null, console.error(["MUI: The `value` provided to the Tabs component is invalid.", `The Tab with this \`value\` ("${k}") is not part of the document layout.`, "Make sure the tab item is present in the document or that it's not `display: none`."].join(`
+`)), Le = !0);
       }
     }
     return {
       tabsMeta: l,
       tabMeta: c
     };
-  }, Y = fe(() => {
+  }, Y = me(() => {
     const {
-      tabsMeta: r,
+      tabsMeta: n,
       tabMeta: l
-    } = Ce();
+    } = Ie();
     let c = 0, u;
-    B ? (u = "top", l && r && (c = l.top - r.top + r.scrollTop)) : (u = d ? "right" : "left", l && r && (c = (d ? -1 : 1) * (l[u] - r[u] + r.scrollLeft)));
+    C ? (u = "top", l && n && (c = l.top - n.top + n.scrollTop)) : (u = d ? "right" : "left", l && n && (c = (d ? -1 : 1) * (l[u] - n[u] + n.scrollLeft)));
     const b = {
       [u]: c,
       // May be wrong until the font is loaded.
       [_]: l ? l[_] : 0
     };
-    if (typeof z[u] != "number" || typeof z[_] != "number")
-      ye(b);
+    if (typeof L[u] != "number" || typeof L[_] != "number")
+      we(b);
     else {
-      const I = Math.abs(z[u] - b[u]), A = Math.abs(z[_] - b[_]);
-      (I >= 1 || A >= 1) && ye(b);
+      const I = Math.abs(L[u] - b[u]), F = Math.abs(L[_] - b[_]);
+      (I >= 1 || F >= 1) && we(b);
     }
-  }), de = (r, {
+  }), fe = (n, {
     animation: l = !0
   } = {}) => {
-    l ? vo(X, P.current, r, {
+    l ? No(K, N.current, n, {
       duration: i.transitions.duration.standard
-    }) : P.current[X] = r;
-  }, Be = (r) => {
-    let l = P.current[X];
-    B ? l += r : l += r * (d ? -1 : 1), de(l);
-  }, Ee = () => {
-    const r = P.current[ce];
+    }) : N.current[K] = n;
+  }, Pe = (n) => {
+    let l = N.current[K];
+    C ? l += n : l += n * (d ? -1 : 1), fe(l);
+  }, Me = () => {
+    const n = N.current[pe];
     let l = 0;
-    const c = Array.from(L.current.children);
+    const c = Array.from(z.current.children);
     for (let u = 0; u < c.length; u += 1) {
       const b = c[u];
-      if (l + b[ce] > r) {
-        u === 0 && (l = r);
+      if (l + b[pe] > n) {
+        u === 0 && (l = n);
         break;
       }
-      l += b[ce];
+      l += b[pe];
     }
     return l;
-  }, eo = () => {
-    Be(-1 * Ee());
-  }, oo = () => {
-    Be(Ee());
-  }, to = s.useCallback((r) => {
-    Ze({
+  }, lo = () => {
+    Pe(-1 * Me());
+  }, so = () => {
+    Pe(Me());
+  }, [ao, {
+    onChange: te,
+    ...io
+  }] = H("scrollbar", {
+    className: j($.scrollableX, $.hideScrollbar),
+    elementType: Ko,
+    shouldForwardComponentProp: !0,
+    externalForwardedProps: V,
+    ownerState: R
+  }), co = s.useCallback((n) => {
+    te == null || te(n), ro({
       overflow: null,
-      scrollbarWidth: r
+      scrollbarWidth: n
     });
-  }, []), no = () => {
-    const r = {};
-    r.scrollbarSizeListener = C ? /* @__PURE__ */ T(Ro, {
-      onChange: to,
-      className: R(k.scrollableX, k.hideScrollbar)
-    }) : null;
-    const c = C && (M === "auto" && (Te || ge) || M === !0);
-    return r.scrollButtonStart = c ? /* @__PURE__ */ T(F, {
+  }, [te]), [Oe, Re] = H("scrollButtons", {
+    className: j($.scrollButtons, X.className),
+    elementType: qe,
+    externalForwardedProps: V,
+    ownerState: R,
+    additionalProps: {
+      orientation: x,
       slots: {
-        StartScrollButtonIcon: V.StartScrollButtonIcon
+        StartScrollButtonIcon: M.startScrollButtonIcon || M.StartScrollButtonIcon,
+        EndScrollButtonIcon: M.endScrollButtonIcon || M.EndScrollButtonIcon
       },
       slotProps: {
-        startScrollButtonIcon: Ye
-      },
-      orientation: w,
+        startScrollButtonIcon: Qe,
+        endScrollButtonIcon: Ze
+      }
+    }
+  }), uo = () => {
+    const n = {};
+    n.scrollbarSizeListener = B ? /* @__PURE__ */ T(ao, {
+      ...io,
+      onChange: co
+    }) : null;
+    const c = B && (P === "auto" && (xe || Be) || P === !0);
+    return n.scrollButtonStart = c ? /* @__PURE__ */ T(Oe, {
       direction: d ? "right" : "left",
-      onClick: eo,
-      disabled: !Te,
-      ...D,
-      className: R(k.scrollButtons, D.className)
-    }) : null, r.scrollButtonEnd = c ? /* @__PURE__ */ T(F, {
-      slots: {
-        EndScrollButtonIcon: V.EndScrollButtonIcon
-      },
-      slotProps: {
-        endScrollButtonIcon: qe
-      },
-      orientation: w,
+      onClick: lo,
+      disabled: !xe,
+      ...Re
+    }) : null, n.scrollButtonEnd = c ? /* @__PURE__ */ T(Oe, {
       direction: d ? "left" : "right",
-      onClick: oo,
-      disabled: !ge,
-      ...D,
-      className: R(k.scrollButtons, D.className)
-    }) : null, r;
-  }, Ie = fe((r) => {
+      onClick: so,
+      disabled: !Be,
+      ...Re
+    }) : null, n;
+  }, Ne = me((n) => {
     const {
       tabsMeta: l,
       tabMeta: c
-    } = Ce();
+    } = Ie();
     if (!(!c || !l)) {
-      if (c[J] < l[J]) {
-        const u = l[X] + (c[J] - l[J]);
-        de(u, {
-          animation: r
+      if (c[Z] < l[Z]) {
+        const u = l[K] + (c[Z] - l[Z]);
+        fe(u, {
+          animation: n
         });
-      } else if (c[Q] > l[Q]) {
-        const u = l[X] + (c[Q] - l[Q]);
-        de(u, {
-          animation: r
+      } else if (c[ee] > l[ee]) {
+        const u = l[K] + (c[ee] - l[ee]);
+        fe(u, {
+          animation: n
         });
       }
     }
-  }), ee = fe(() => {
-    C && M !== !1 && Qe(!we);
+  }), ne = me(() => {
+    B && P !== !1 && no(!Ce);
   });
   s.useEffect(() => {
-    const r = We(() => {
-      P.current && Y();
+    const n = Fe(() => {
+      N.current && Y();
     });
     let l;
     const c = (I) => {
-      I.forEach((A) => {
-        A.removedNodes.forEach((q) => {
+      I.forEach((F) => {
+        F.removedNodes.forEach((q) => {
           l == null || l.unobserve(q);
-        }), A.addedNodes.forEach((q) => {
+        }), F.addedNodes.forEach((q) => {
           l == null || l.observe(q);
         });
-      }), r(), ee();
-    }, u = De(P.current);
-    u.addEventListener("resize", r);
+      }), n(), ne();
+    }, u = Ae(N.current);
+    u.addEventListener("resize", n);
     let b;
-    return typeof ResizeObserver < "u" && (l = new ResizeObserver(r), Array.from(L.current.children).forEach((I) => {
+    return typeof ResizeObserver < "u" && (l = new ResizeObserver(n), Array.from(z.current.children).forEach((I) => {
       l.observe(I);
-    })), typeof MutationObserver < "u" && (b = new MutationObserver(c), b.observe(L.current, {
+    })), typeof MutationObserver < "u" && (b = new MutationObserver(c), b.observe(z.current, {
       childList: !0
     })), () => {
-      r.clear(), u.removeEventListener("resize", r), b == null || b.disconnect(), l == null || l.disconnect();
+      n.clear(), u.removeEventListener("resize", n), b == null || b.disconnect(), l == null || l.disconnect();
     };
-  }, [Y, ee]), s.useEffect(() => {
-    const r = Array.from(L.current.children), l = r.length;
-    if (typeof IntersectionObserver < "u" && l > 0 && C && M !== !1) {
-      const c = r[0], u = r[l - 1], b = {
-        root: P.current,
+  }, [Y, ne]), s.useEffect(() => {
+    const n = Array.from(z.current.children), l = n.length;
+    if (typeof IntersectionObserver < "u" && l > 0 && B && P !== !1) {
+      const c = n[0], u = n[l - 1], b = {
+        root: N.current,
         threshold: 0.99
-      }, I = (pe) => {
-        Ge(!pe[0].isIntersecting);
-      }, A = new IntersectionObserver(I, b);
-      A.observe(c);
-      const q = (pe) => {
-        Je(!pe[0].isIntersecting);
-      }, Ne = new IntersectionObserver(q, b);
-      return Ne.observe(u), () => {
-        A.disconnect(), Ne.disconnect();
+      }, I = (he) => {
+        oo(!he[0].isIntersecting);
+      }, F = new IntersectionObserver(I, b);
+      F.observe(c);
+      const q = (he) => {
+        to(!he[0].isIntersecting);
+      }, ke = new IntersectionObserver(q, b);
+      return ke.observe(u), () => {
+        F.disconnect(), ke.disconnect();
       };
     }
-  }, [C, M, we, y == null ? void 0 : y.length]), s.useEffect(() => {
-    Ke(!0);
+  }, [B, P, Ce, v == null ? void 0 : v.length]), s.useEffect(() => {
+    eo(!0);
   }, []), s.useEffect(() => {
     Y();
   }), s.useEffect(() => {
-    Ie(Oe !== z);
-  }, [Ie, z]), s.useImperativeHandle(h, () => ({
+    Ne(We !== L);
+  }, [Ne, L]), s.useImperativeHandle(h, () => ({
     updateIndicator: Y,
-    updateScrollButtons: ee
-  }), [Y, ee]);
-  const Me = /* @__PURE__ */ T(Po, {
-    ...H,
-    className: R(k.indicator, H.className),
-    ownerState: j,
-    style: {
-      ...z,
-      ...H.style
+    updateScrollButtons: ne
+  }), [Y, ne]);
+  const [po, fo] = H("indicator", {
+    className: j($.indicator, U.className),
+    elementType: Xo,
+    externalForwardedProps: V,
+    ownerState: R,
+    additionalProps: {
+      style: L
     }
+  }), je = /* @__PURE__ */ T(po, {
+    ...fo
   });
-  let oe = 0;
-  const ro = s.Children.map(y, (r) => {
-    if (!/* @__PURE__ */ s.isValidElement(r))
+  let re = 0;
+  const bo = s.Children.map(v, (n) => {
+    if (!/* @__PURE__ */ s.isValidElement(n))
       return null;
-    process.env.NODE_ENV !== "production" && so.isFragment(r) && console.error(["MUI: The Tabs component doesn't accept a Fragment as a child.", "Consider providing an array instead."].join(`
+    process.env.NODE_ENV !== "production" && wo.isFragment(n) && console.error(["MUI: The Tabs component doesn't accept a Fragment as a child.", "Consider providing an array instead."].join(`
 `));
-    const l = r.props.value === void 0 ? oe : r.props.value;
-    Z.set(l, oe);
-    const c = l === O;
-    return oe += 1, /* @__PURE__ */ s.cloneElement(r, {
-      fullWidth: N === "fullWidth",
-      indicator: c && !Se && Me,
+    const l = n.props.value === void 0 ? re : n.props.value;
+    oe.set(l, re);
+    const c = l === k;
+    return re += 1, /* @__PURE__ */ s.cloneElement(n, {
+      fullWidth: O === "fullWidth",
+      indicator: c && !ge && je,
       selected: c,
-      selectionFollowsFocus: ae,
+      selectionFollowsFocus: de,
       onChange: E,
-      textColor: G,
+      textColor: Q,
       value: l,
-      ...oe === 1 && O === !1 && !r.props.tabIndex ? {
+      ...re === 1 && k === !1 && !n.props.tabIndex ? {
         tabIndex: 0
       } : {}
     });
-  }), lo = (r) => {
-    const l = L.current, c = co(l).activeElement;
+  }), ho = (n) => {
+    if (n.altKey || n.shiftKey || n.ctrlKey || n.metaKey)
+      return;
+    const l = z.current, c = Co(l).activeElement;
     if (c.getAttribute("role") !== "tab")
       return;
-    let b = w === "horizontal" ? "ArrowLeft" : "ArrowUp", I = w === "horizontal" ? "ArrowRight" : "ArrowDown";
-    switch (w === "horizontal" && d && (b = "ArrowRight", I = "ArrowLeft"), r.key) {
+    let b = x === "horizontal" ? "ArrowLeft" : "ArrowUp", I = x === "horizontal" ? "ArrowRight" : "ArrowDown";
+    switch (x === "horizontal" && d && (b = "ArrowRight", I = "ArrowLeft"), n.key) {
       case b:
-        r.preventDefault(), te(l, c, Re);
+        n.preventDefault(), le(l, c, De);
         break;
       case I:
-        r.preventDefault(), te(l, c, Pe);
+        n.preventDefault(), le(l, c, $e);
         break;
       case "Home":
-        r.preventDefault(), te(l, null, Pe);
+        n.preventDefault(), le(l, null, $e);
         break;
       case "End":
-        r.preventDefault(), te(l, null, Re);
+        n.preventDefault(), le(l, null, De);
         break;
     }
-  }, ue = no();
-  return /* @__PURE__ */ K(Io, {
-    className: R(k.root, m),
-    ownerState: j,
-    ref: n,
-    as: v,
-    ..._e,
-    children: [ue.scrollButtonStart, ue.scrollbarSizeListener, /* @__PURE__ */ K(Mo, {
-      className: k.scroller,
-      ownerState: j,
+  }, be = uo(), [mo, yo] = H("root", {
+    ref: r,
+    className: j($.root, m),
+    elementType: Vo,
+    externalForwardedProps: {
+      ...V,
+      ...Je,
+      component: y
+    },
+    ownerState: R
+  }), [So, vo] = H("scroller", {
+    ref: N,
+    className: $.scroller,
+    elementType: Ho,
+    externalForwardedProps: V,
+    ownerState: R,
+    additionalProps: {
       style: {
-        overflow: xe.overflow,
-        [B ? `margin${d ? "Left" : "Right"}` : "marginBottom"]: ie ? void 0 : -xe.scrollbarWidth
-      },
-      ref: P,
-      children: [/* @__PURE__ */ T(No, {
+        overflow: Ee.overflow,
+        [C ? `margin${d ? "Left" : "Right"}` : "marginBottom"]: ue ? void 0 : -Ee.scrollbarWidth
+      }
+    }
+  }), [To, go] = H("list", {
+    ref: z,
+    className: j($.list, $.flexContainer),
+    elementType: Uo,
+    externalForwardedProps: V,
+    ownerState: R,
+    getSlotProps: (n) => ({
+      ...n,
+      onKeyDown: (l) => {
+        var c;
+        ho(l), (c = n.onKeyDown) == null || c.call(n, l);
+      }
+    })
+  });
+  return /* @__PURE__ */ G(mo, {
+    ...yo,
+    children: [be.scrollButtonStart, be.scrollbarSizeListener, /* @__PURE__ */ G(So, {
+      ...vo,
+      children: [/* @__PURE__ */ T(To, {
         "aria-label": p,
         "aria-labelledby": f,
-        "aria-orientation": w === "vertical" ? "vertical" : null,
-        className: k.flexContainer,
-        ownerState: j,
-        onKeyDown: lo,
-        ref: L,
+        "aria-orientation": x === "vertical" ? "vertical" : null,
         role: "tablist",
-        children: ro
-      }), Se && Me]
-    }), ue.scrollButtonEnd]
+        ...go,
+        children: bo
+      }), ge && je]
+    }), be.scrollButtonEnd]
   });
 });
-process.env.NODE_ENV !== "production" && (Xe.propTypes = {
+process.env.NODE_ENV !== "production" && (Ge.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -823,66 +869,67 @@ process.env.NODE_ENV !== "production" && (Xe.propTypes = {
    * @param {object} actions This object contains all possible actions
    * that can be triggered programmatically.
    */
-  action: uo,
+  action: Eo,
   /**
    * If `true`, the scroll buttons aren't forced hidden on mobile.
    * By default the scroll buttons are hidden on mobile and takes precedence over `scrollButtons`.
    * @default false
    */
-  allowScrollButtonsMobile: o.bool,
+  allowScrollButtonsMobile: e.bool,
   /**
    * The label for the Tabs as a string.
    */
-  "aria-label": o.string,
+  "aria-label": e.string,
   /**
    * An id or list of ids separated by a space that label the Tabs.
    */
-  "aria-labelledby": o.string,
+  "aria-labelledby": e.string,
   /**
    * If `true`, the tabs are centered.
    * This prop is intended for large views.
    * @default false
    */
-  centered: o.bool,
+  centered: e.bool,
   /**
    * The content of the component.
    */
-  children: o.node,
+  children: e.node,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: o.object,
+  classes: e.object,
   /**
    * @ignore
    */
-  className: o.string,
+  className: e.string,
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: o.elementType,
+  component: e.elementType,
   /**
    * Determines the color of the indicator.
    * @default 'primary'
    */
-  indicatorColor: o.oneOfType([o.oneOf(["primary", "secondary"]), o.string]),
+  indicatorColor: e.oneOfType([e.oneOf(["primary", "secondary"]), e.string]),
   /**
    * Callback fired when the value changes.
    *
    * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
    * @param {any} value We default to the index of the child (number)
    */
-  onChange: o.func,
+  onChange: e.func,
   /**
    * The component orientation (layout flow direction).
    * @default 'horizontal'
    */
-  orientation: o.oneOf(["horizontal", "vertical"]),
+  orientation: e.oneOf(["horizontal", "vertical"]),
   /**
    * The component used to render the scroll buttons.
+   * @deprecated use the `slots.scrollButtons` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default TabScrollButton
    */
-  ScrollButtonComponent: o.elementType,
+  ScrollButtonComponent: e.elementType,
   /**
    * Determine behavior of scroll buttons when tabs are set to scroll:
    *
@@ -894,53 +941,68 @@ process.env.NODE_ENV !== "production" && (Xe.propTypes = {
    * This behavior can be disabled with `allowScrollButtonsMobile`.
    * @default 'auto'
    */
-  scrollButtons: o.oneOf(["auto", !1, !0]),
+  scrollButtons: e.oneOf(["auto", !1, !0]),
   /**
    * If `true` the selected tab changes on focus. Otherwise it only
    * changes on activation.
    */
-  selectionFollowsFocus: o.bool,
+  selectionFollowsFocus: e.bool,
   /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
+   * The props used for each slot inside.
    * @default {}
    */
-  slotProps: o.shape({
-    endScrollButtonIcon: o.oneOfType([o.func, o.object]),
-    startScrollButtonIcon: o.oneOfType([o.func, o.object])
+  slotProps: e.shape({
+    endScrollButtonIcon: e.oneOfType([e.func, e.object]),
+    indicator: e.oneOfType([e.func, e.object]),
+    list: e.oneOfType([e.func, e.object]),
+    root: e.oneOfType([e.func, e.object]),
+    scrollbar: e.oneOfType([e.func, e.object]),
+    scrollButtons: e.oneOfType([e.func, e.object]),
+    scroller: e.oneOfType([e.func, e.object]),
+    startScrollButtonIcon: e.oneOfType([e.func, e.object])
   }),
   /**
    * The components used for each slot inside.
    * @default {}
    */
-  slots: o.shape({
-    EndScrollButtonIcon: o.elementType,
-    StartScrollButtonIcon: o.elementType
+  slots: e.shape({
+    endScrollButtonIcon: e.elementType,
+    EndScrollButtonIcon: e.elementType,
+    indicator: e.elementType,
+    list: e.elementType,
+    root: e.elementType,
+    scrollbar: e.elementType,
+    scrollButtons: e.elementType,
+    scroller: e.elementType,
+    startScrollButtonIcon: e.elementType,
+    StartScrollButtonIcon: e.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
   /**
    * Props applied to the tab indicator element.
+   * @deprecated use the `slotProps.indicator` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default  {}
    */
-  TabIndicatorProps: o.object,
+  TabIndicatorProps: e.object,
   /**
    * Props applied to the [`TabScrollButton`](https://mui.com/material-ui/api/tab-scroll-button/) element.
+   * @deprecated use the `slotProps.scrollButtons` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default {}
    */
-  TabScrollButtonProps: o.object,
+  TabScrollButtonProps: e.object,
   /**
    * Determines the color of the `Tab`.
    * @default 'primary'
    */
-  textColor: o.oneOf(["inherit", "primary", "secondary"]),
+  textColor: e.oneOf(["inherit", "primary", "secondary"]),
   /**
    * The value of the currently selected `Tab`.
    * If you don't want any selected `Tab`, you can set this prop to `false`.
    */
-  value: o.any,
+  value: e.any,
   /**
    * Determines additional display behavior of the tabs:
    *
@@ -951,34 +1013,34 @@ process.env.NODE_ENV !== "production" && (Xe.propTypes = {
    *  - `standard` will render the default state.
    * @default 'standard'
    */
-  variant: o.oneOf(["fullWidth", "scrollable", "standard"]),
+  variant: e.oneOf(["fullWidth", "scrollable", "standard"]),
   /**
    * If `true`, the scrollbar is visible. It can be useful when displaying
    * a long vertical list of tabs.
    * @default false
    */
-  visibleScrollbar: o.bool
+  visibleScrollbar: e.bool
 });
-const Oo = /* @__PURE__ */ s.forwardRef(function(e, n) {
+const _o = /* @__PURE__ */ s.forwardRef(function(o, r) {
   const {
     children: a,
     ...i
-  } = e, d = Ae();
+  } = o, d = Xe();
   if (d === null)
     throw new TypeError("No TabContext provided");
   const p = s.Children.map(a, (f) => /* @__PURE__ */ s.isValidElement(f) ? /* @__PURE__ */ s.cloneElement(f, {
     // SOMEDAY: `Tabs` will set those themselves
-    "aria-controls": Fe(d, f.props.value),
-    id: Ve(d, f.props.value)
+    "aria-controls": Ke(d, f.props.value),
+    id: _e(d, f.props.value)
   }) : null);
-  return /* @__PURE__ */ T(Xe, {
+  return /* @__PURE__ */ T(Ge, {
     ...i,
-    ref: n,
+    ref: r,
     value: d.value,
     children: p
   });
 });
-process.env.NODE_ENV !== "production" && (Oo.propTypes = {
+process.env.NODE_ENV !== "production" && (_o.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -986,30 +1048,30 @@ process.env.NODE_ENV !== "production" && (Oo.propTypes = {
   /**
    * A list of `<Tab />` elements.
    */
-  children: o.node
+  children: e.node
 });
-function ko(t) {
-  return le("MuiTabPanel", t);
+function Yo(t) {
+  return ie("MuiTabPanel", t);
 }
-const lt = re("MuiTabPanel", ["root", "hidden"]), $o = (t) => {
+const gt = ae("MuiTabPanel", ["root", "hidden"]), qo = (t) => {
   const {
-    classes: e,
-    hidden: n
+    classes: o,
+    hidden: r
   } = t;
-  return se({
-    root: ["root", n && "hidden"]
-  }, ko, e);
-}, Wo = $("div", {
+  return ce({
+    root: ["root", r && "hidden"]
+  }, Yo, o);
+}, Go = D("div", {
   name: "MuiTabPanel",
   slot: "Root",
-  overridesResolver: (t, e) => e.root
+  overridesResolver: (t, o) => o.root
 })(({
   theme: t
 }) => ({
   padding: t.spacing(3)
-})), Do = /* @__PURE__ */ s.forwardRef(function(e, n) {
-  const a = po({
-    props: e,
+})), Jo = /* @__PURE__ */ s.forwardRef(function(o, r) {
+  const a = Io({
+    props: o,
     name: "MuiTabPanel"
   }), {
     children: i,
@@ -1019,23 +1081,23 @@ const lt = re("MuiTabPanel", ["root", "hidden"]), $o = (t) => {
     ...h
   } = a, S = {
     ...a
-  }, y = $o(S), m = Ae();
+  }, v = qo(S), m = Xe();
   if (m === null)
     throw new TypeError("No TabContext provided");
-  const v = Fe(m, p), g = Ve(m, p);
-  return /* @__PURE__ */ T(Wo, {
+  const y = Ke(m, p), g = _e(m, p);
+  return /* @__PURE__ */ T(Go, {
     "aria-labelledby": g,
-    className: R(y.root, d),
+    className: j(v.root, d),
     hidden: p !== m.value,
-    id: v,
-    ref: n,
+    id: y,
+    ref: r,
     role: "tabpanel",
     ownerState: S,
     ...h,
     children: (f || p === m.value) && i
   });
 });
-process.env.NODE_ENV !== "production" && (Do.propTypes = {
+process.env.NODE_ENV !== "production" && (Jo.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -1043,37 +1105,37 @@ process.env.NODE_ENV !== "production" && (Do.propTypes = {
   /**
    * The content of the component.
    */
-  children: o.node,
+  children: e.node,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: o.object,
+  classes: e.object,
   /**
    * @ignore
    */
-  className: o.string,
+  className: e.string,
   /**
    * Always keep the children in the DOM.
    * @default false
    */
-  keepMounted: o.bool,
+  keepMounted: e.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
   /**
    * The `value` of the corresponding `Tab`. Must use the index of the `Tab` when
    * no `value` was passed to `Tab`.
    */
-  value: o.oneOfType([o.number, o.string]).isRequired
+  value: e.oneOfType([e.number, e.string]).isRequired
 });
-function jo(t) {
-  return le("MuiTab", t);
+function Qo(t) {
+  return ie("MuiTab", t);
 }
-const x = re("MuiTab", ["root", "labelIcon", "textColorInherit", "textColorPrimary", "textColorSecondary", "selected", "disabled", "fullWidth", "wrapped", "iconWrapper", "icon"]), zo = (t) => {
+const w = ae("MuiTab", ["root", "labelIcon", "textColorInherit", "textColorPrimary", "textColorSecondary", "selected", "disabled", "fullWidth", "wrapped", "iconWrapper", "icon"]), Zo = (t) => {
   const {
-    classes: e,
-    textColor: n,
+    classes: o,
+    textColor: r,
     fullWidth: a,
     wrapped: i,
     icon: d,
@@ -1081,24 +1143,24 @@ const x = re("MuiTab", ["root", "labelIcon", "textColorInherit", "textColorPrima
     selected: f,
     disabled: h
   } = t, S = {
-    root: ["root", d && p && "labelIcon", `textColor${Le(n)}`, a && "fullWidth", i && "wrapped", f && "selected", h && "disabled"],
+    root: ["root", d && p && "labelIcon", `textColor${Ue(r)}`, a && "fullWidth", i && "wrapped", f && "selected", h && "disabled"],
     icon: ["iconWrapper", "icon"]
   };
-  return se(S, jo, e);
-}, Lo = $(ze, {
+  return ce(S, Qo, o);
+}, et = D(He, {
   name: "MuiTab",
   slot: "Root",
-  overridesResolver: (t, e) => {
+  overridesResolver: (t, o) => {
     const {
-      ownerState: n
+      ownerState: r
     } = t;
-    return [e.root, n.label && n.icon && e.labelIcon, e[`textColor${Le(n.textColor)}`], n.fullWidth && e.fullWidth, n.wrapped && e.wrapped, {
-      [`& .${x.iconWrapper}`]: e.iconWrapper
+    return [o.root, r.label && r.icon && o.labelIcon, o[`textColor${Ue(r.textColor)}`], r.fullWidth && o.fullWidth, r.wrapped && o.wrapped, {
+      [`& .${w.iconWrapper}`]: o.iconWrapper
     }, {
-      [`& .${x.icon}`]: e.icon
+      [`& .${w.icon}`]: o.icon
     }];
   }
-})(me(({
+})(ve(({
   theme: t
 }) => ({
   ...t.typography.button,
@@ -1114,22 +1176,22 @@ const x = re("MuiTab", ["root", "labelIcon", "textColorInherit", "textColorPrima
   lineHeight: 1.25,
   variants: [{
     props: ({
-      ownerState: e
-    }) => e.label && (e.iconPosition === "top" || e.iconPosition === "bottom"),
+      ownerState: o
+    }) => o.label && (o.iconPosition === "top" || o.iconPosition === "bottom"),
     style: {
       flexDirection: "column"
     }
   }, {
     props: ({
-      ownerState: e
-    }) => e.label && e.iconPosition !== "top" && e.iconPosition !== "bottom",
+      ownerState: o
+    }) => o.label && o.iconPosition !== "top" && o.iconPosition !== "bottom",
     style: {
       flexDirection: "row"
     }
   }, {
     props: ({
-      ownerState: e
-    }) => e.icon && e.label,
+      ownerState: o
+    }) => o.icon && o.label,
     style: {
       minHeight: 72,
       paddingTop: 9,
@@ -1137,41 +1199,41 @@ const x = re("MuiTab", ["root", "labelIcon", "textColorInherit", "textColorPrima
     }
   }, {
     props: ({
-      ownerState: e,
-      iconPosition: n
-    }) => e.icon && e.label && n === "top",
+      ownerState: o,
+      iconPosition: r
+    }) => o.icon && o.label && r === "top",
     style: {
-      [`& > .${x.icon}`]: {
+      [`& > .${w.icon}`]: {
         marginBottom: 6
       }
     }
   }, {
     props: ({
-      ownerState: e,
-      iconPosition: n
-    }) => e.icon && e.label && n === "bottom",
+      ownerState: o,
+      iconPosition: r
+    }) => o.icon && o.label && r === "bottom",
     style: {
-      [`& > .${x.icon}`]: {
+      [`& > .${w.icon}`]: {
         marginTop: 6
       }
     }
   }, {
     props: ({
-      ownerState: e,
-      iconPosition: n
-    }) => e.icon && e.label && n === "start",
+      ownerState: o,
+      iconPosition: r
+    }) => o.icon && o.label && r === "start",
     style: {
-      [`& > .${x.icon}`]: {
+      [`& > .${w.icon}`]: {
         marginRight: t.spacing(1)
       }
     }
   }, {
     props: ({
-      ownerState: e,
-      iconPosition: n
-    }) => e.icon && e.label && n === "end",
+      ownerState: o,
+      iconPosition: r
+    }) => o.icon && o.label && r === "end",
     style: {
-      [`& > .${x.icon}`]: {
+      [`& > .${w.icon}`]: {
         marginLeft: t.spacing(1)
       }
     }
@@ -1183,10 +1245,10 @@ const x = re("MuiTab", ["root", "labelIcon", "textColorInherit", "textColorPrima
       color: "inherit",
       opacity: 0.6,
       // same opacity as theme.palette.text.secondary
-      [`&.${x.selected}`]: {
+      [`&.${w.selected}`]: {
         opacity: 1
       },
-      [`&.${x.disabled}`]: {
+      [`&.${w.disabled}`]: {
         opacity: (t.vars || t).palette.action.disabledOpacity
       }
     }
@@ -1196,10 +1258,10 @@ const x = re("MuiTab", ["root", "labelIcon", "textColorInherit", "textColorPrima
     },
     style: {
       color: (t.vars || t).palette.text.secondary,
-      [`&.${x.selected}`]: {
+      [`&.${w.selected}`]: {
         color: (t.vars || t).palette.primary.main
       },
-      [`&.${x.disabled}`]: {
+      [`&.${w.disabled}`]: {
         color: (t.vars || t).palette.text.disabled
       }
     }
@@ -1209,17 +1271,17 @@ const x = re("MuiTab", ["root", "labelIcon", "textColorInherit", "textColorPrima
     },
     style: {
       color: (t.vars || t).palette.text.secondary,
-      [`&.${x.selected}`]: {
+      [`&.${w.selected}`]: {
         color: (t.vars || t).palette.secondary.main
       },
-      [`&.${x.disabled}`]: {
+      [`&.${w.disabled}`]: {
         color: (t.vars || t).palette.text.disabled
       }
     }
   }, {
     props: ({
-      ownerState: e
-    }) => e.fullWidth,
+      ownerState: o
+    }) => o.fullWidth,
     style: {
       flexShrink: 1,
       flexGrow: 1,
@@ -1228,15 +1290,15 @@ const x = re("MuiTab", ["root", "labelIcon", "textColorInherit", "textColorPrima
     }
   }, {
     props: ({
-      ownerState: e
-    }) => e.wrapped,
+      ownerState: o
+    }) => o.wrapped,
     style: {
       fontSize: t.typography.pxToRem(12)
     }
   }]
-}))), Ao = /* @__PURE__ */ s.forwardRef(function(e, n) {
-  const a = he({
-    props: e,
+}))), ot = /* @__PURE__ */ s.forwardRef(function(o, r) {
+  const a = Se({
+    props: o,
     name: "MuiTab"
   }), {
     className: i,
@@ -1247,21 +1309,21 @@ const x = re("MuiTab", ["root", "labelIcon", "textColorInherit", "textColorPrima
     icon: h,
     iconPosition: S = "top",
     // eslint-disable-next-line react/prop-types
-    indicator: y,
+    indicator: v,
     label: m,
-    onChange: v,
+    onChange: y,
     onClick: g,
     onFocus: W,
     // eslint-disable-next-line react/prop-types
     selected: E,
     // eslint-disable-next-line react/prop-types
-    selectionFollowsFocus: w,
+    selectionFollowsFocus: x,
     // eslint-disable-next-line react/prop-types
-    textColor: F = "inherit",
-    value: M,
-    wrapped: ae = !1,
-    ...V
-  } = a, U = {
+    textColor: J = "inherit",
+    value: P,
+    wrapped: de = !1,
+    ...M
+  } = a, A = {
     ...a,
     disabled: d,
     disableFocusRipple: p,
@@ -1270,35 +1332,35 @@ const x = re("MuiTab", ["root", "labelIcon", "textColorInherit", "textColorPrima
     iconPosition: S,
     label: !!m,
     fullWidth: f,
-    textColor: F,
-    wrapped: ae
-  }, H = zo(U), D = h && m && /* @__PURE__ */ s.isValidElement(h) ? /* @__PURE__ */ s.cloneElement(h, {
-    className: R(H.icon, h.props.className)
-  }) : h, G = (N) => {
-    !E && v && v(N, M), g && g(N);
-  }, O = (N) => {
-    w && !E && v && v(N, M), W && W(N);
+    textColor: J,
+    wrapped: de
+  }, U = Zo(A), X = h && m && /* @__PURE__ */ s.isValidElement(h) ? /* @__PURE__ */ s.cloneElement(h, {
+    className: j(U.icon, h.props.className)
+  }) : h, Q = (O) => {
+    !E && y && y(O, P), g && g(O);
+  }, k = (O) => {
+    x && !E && y && y(O, P), W && W(O);
   };
-  return /* @__PURE__ */ K(Lo, {
+  return /* @__PURE__ */ G(et, {
     focusRipple: !p,
-    className: R(H.root, i),
-    ref: n,
+    className: j(U.root, i),
+    ref: r,
     role: "tab",
     "aria-selected": E,
     disabled: d,
-    onClick: G,
-    onFocus: O,
-    ownerState: U,
+    onClick: Q,
+    onFocus: k,
+    ownerState: A,
     tabIndex: E ? 0 : -1,
-    ...V,
-    children: [S === "top" || S === "start" ? /* @__PURE__ */ K(s.Fragment, {
-      children: [D, m]
-    }) : /* @__PURE__ */ K(s.Fragment, {
-      children: [m, D]
-    }), y]
+    ...M,
+    children: [S === "top" || S === "start" ? /* @__PURE__ */ G(s.Fragment, {
+      children: [X, m]
+    }) : /* @__PURE__ */ G(s.Fragment, {
+      children: [m, X]
+    }), v]
   });
 });
-process.env.NODE_ENV !== "production" && (Ao.propTypes = {
+process.env.NODE_ENV !== "production" && (ot.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -1307,25 +1369,25 @@ process.env.NODE_ENV !== "production" && (Ao.propTypes = {
    * This prop isn't supported.
    * Use the `component` prop if you need to change the children structure.
    */
-  children: fo,
+  children: Po,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: o.object,
+  classes: e.object,
   /**
    * @ignore
    */
-  className: o.string,
+  className: e.string,
   /**
    * If `true`, the component is disabled.
    * @default false
    */
-  disabled: o.bool,
+  disabled: e.bool,
   /**
    * If `true`, the  keyboard focus ripple is disabled.
    * @default false
    */
-  disableFocusRipple: o.bool,
+  disableFocusRipple: e.bool,
   /**
    * If `true`, the ripple effect is disabled.
    *
@@ -1333,62 +1395,62 @@ process.env.NODE_ENV !== "production" && (Ao.propTypes = {
    * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
    * @default false
    */
-  disableRipple: o.bool,
+  disableRipple: e.bool,
   /**
    * The icon to display.
    */
-  icon: o.oneOfType([o.element, o.string]),
+  icon: e.oneOfType([e.element, e.string]),
   /**
    * The position of the icon relative to the label.
    * @default 'top'
    */
-  iconPosition: o.oneOf(["bottom", "end", "start", "top"]),
+  iconPosition: e.oneOf(["bottom", "end", "start", "top"]),
   /**
    * The label element.
    */
-  label: o.node,
+  label: e.node,
   /**
    * @ignore
    */
-  onChange: o.func,
+  onChange: e.func,
   /**
    * @ignore
    */
-  onClick: o.func,
+  onClick: e.func,
   /**
    * @ignore
    */
-  onFocus: o.func,
+  onFocus: e.func,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
   /**
    * You can provide your own value. Otherwise, we fallback to the child position index.
    */
-  value: o.any,
+  value: e.any,
   /**
    * Tab labels appear in a single row.
    * They can use a second line if needed.
    * @default false
    */
-  wrapped: o.bool
+  wrapped: e.bool
 });
 export {
-  To as K,
-  ho as T,
-  Oo as a,
-  Do as b,
-  Ao as c,
-  Xe as d,
-  Ve as e,
-  ko as f,
-  Fe as g,
-  x as h,
-  jo as i,
-  be as j,
-  Bo as k,
-  yo as l,
-  lt as t,
-  Ae as u
+  $o as K,
+  Oo as T,
+  _o as a,
+  Jo as b,
+  ot as c,
+  Ge as d,
+  _e as e,
+  Yo as f,
+  Ke as g,
+  w as h,
+  Qo as i,
+  ye as j,
+  Fo as k,
+  ko as l,
+  gt as t,
+  Xe as u
 };