@cgi-learning-hub/ui 1.4.0 → 1.5.0-dev.1743511847

package/dist/Tab-qZjEW6Cy.js

@@ -0,0 +1,1394 @@
+import * as s from "react";
+import { P as o, G as re, H as le, I as R, S as so } from "./generateUtilityClasses-SJ1QPUag.js";
+import { jsx as T, jsxs as K } from "react/jsx-runtime";
+import { u as $e } from "./index-uoOKg_7A.js";
+import { u as ao } from "./useTheme-EvTdEPuY.js";
+import { u as he, s as $, c as se } from "./DefaultPropsProvider-ZFZfNXyN.js";
+import { m as me } from "./memoTheme-C9GnPENe.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-Dk3n_NBz.js";
+import { u as ne } from "./useSlotProps-Cz_jXqU-.js";
+import { B as ze } from "./ButtonBase-DYKChljK.js";
+import { u as fe } from "./useEventCallback-BAQJJ3ye.js";
+import { o as co } from "./ownerDocument-CUrv0DIK.js";
+import { r as uo } from "./refType-D-xpF9tL.js";
+import { u as po } from "./useThemeProps-jdOTP9Fb.js";
+import { c as Le } from "./capitalize-R3VbHRUv.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);
+  return s.useEffect(() => {
+    e(`mui-p-${Math.round(Math.random() * 1e5)}`);
+  }, []), t;
+}
+function ho(t) {
+  const {
+    children: e,
+    value: n
+  } = t, a = bo(), i = s.useMemo(() => ({
+    idPrefix: a,
+    value: n
+  }), [a, n]);
+  return /* @__PURE__ */ T(ve.Provider, {
+    value: i,
+    children: e
+  });
+}
+process.env.NODE_ENV !== "production" && (ho.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.
+   */
+  children: o.node,
+  /**
+   * The value of the currently selected `Tab`.
+   */
+  value: o.oneOfType([o.number, o.string]).isRequired
+});
+function Ae() {
+  return s.useContext(ve);
+}
+function Fe(t, e) {
+  const {
+    idPrefix: n
+  } = t;
+  return n === null ? null : `${t.idPrefix}-P-${e}`;
+}
+function Ve(t, e) {
+  const {
+    idPrefix: n
+  } = t;
+  return n === null ? null : `${t.idPrefix}-T-${e}`;
+}
+function mo(t) {
+  return (1 + Math.sin(Math.PI * t - Math.PI / 2)) / 2;
+}
+function vo(t, e, n, a = {}, i = () => {
+}) {
+  const {
+    ease: d = mo,
+    duration: p = 300
+    // standard
+  } = a;
+  let f = null;
+  const h = e[t];
+  let S = !1;
+  const y = () => {
+    S = !0;
+  }, m = (v) => {
+    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) {
+      requestAnimationFrame(() => {
+        i(null);
+      });
+      return;
+    }
+    requestAnimationFrame(m);
+  };
+  return h === n ? (i(new Error("Element already at target position")), y) : (requestAnimationFrame(m), y);
+}
+const So = {
+  width: 99,
+  height: 99,
+  position: "absolute",
+  top: -9999,
+  overflow: "scroll"
+};
+function He(t) {
+  const {
+    onChange: e,
+    ...n
+  } = t, a = s.useRef(), i = s.useRef(null), d = () => {
+    a.current = i.current.offsetHeight - i.current.clientHeight;
+  };
+  return io(() => {
+    const p = We(() => {
+      const h = a.current;
+      d(), h !== a.current && e(a.current);
+    }), f = De(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,
+    ref: i
+  });
+}
+process.env.NODE_ENV !== "production" && (He.propTypes = {
+  onChange: o.func.isRequired
+});
+const yo = je(/* @__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", {
+  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);
+}
+const wo = re("MuiTabScrollButton", ["root", "vertical", "horizontal", "disabled"]), xo = (t) => {
+  const {
+    classes: e,
+    orientation: n,
+    disabled: a
+  } = t;
+  return se({
+    root: ["root", n, a && "disabled"]
+  }, go, e);
+}, Co = $(ze, {
+  name: "MuiTabScrollButton",
+  slot: "Root",
+  overridesResolver: (t, e) => {
+    const {
+      ownerState: n
+    } = t;
+    return [e.root, n.orientation && e[n.orientation]];
+  }
+})({
+  width: 40,
+  flexShrink: 0,
+  opacity: 0.8,
+  [`&.${wo.disabled}`]: {
+    opacity: 0
+  },
+  variants: [{
+    props: {
+      orientation: "vertical"
+    },
+    style: {
+      width: "100%",
+      height: 40,
+      "& svg": {
+        transform: "var(--TabScrollButton-svgRotate)"
+      }
+    }
+  }]
+}), Ue = /* @__PURE__ */ s.forwardRef(function(e, n) {
+  const a = he({
+    props: e,
+    name: "MuiTabScrollButton"
+  }), {
+    className: i,
+    slots: d = {},
+    slotProps: p = {},
+    direction: f,
+    orientation: h,
+    disabled: S,
+    ...y
+  } = a, m = $e(), v = {
+    isRtl: m,
+    ...a
+  }, g = xo(v), W = d.StartScrollButtonIcon ?? yo, E = d.EndScrollButtonIcon ?? To, w = ne({
+    elementType: W,
+    externalSlotProps: p.startScrollButtonIcon,
+    additionalProps: {
+      fontSize: "small"
+    },
+    ownerState: v
+  }), F = ne({
+    elementType: E,
+    externalSlotProps: p.endScrollButtonIcon,
+    additionalProps: {
+      fontSize: "small"
+    },
+    ownerState: v
+  });
+  return /* @__PURE__ */ T(Co, {
+    component: "div",
+    className: R(g.root, i),
+    ref: n,
+    role: null,
+    ownerState: v,
+    tabIndex: null,
+    ...y,
+    style: {
+      ...y.style,
+      ...h === "vertical" && {
+        "--TabScrollButton-svgRotate": `rotate(${m ? -90 : 90}deg)`
+      }
+    },
+    children: f === "left" ? /* @__PURE__ */ T(W, {
+      ...w
+    }) : /* @__PURE__ */ T(E, {
+      ...F
+    })
+  });
+});
+process.env.NODE_ENV !== "production" && (Ue.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.
+   */
+  children: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * The direction the button should indicate.
+   */
+  direction: o.oneOf(["left", "right"]).isRequired,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: o.bool,
+  /**
+   * The component orientation (layout flow direction).
+   */
+  orientation: o.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])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: o.shape({
+    EndScrollButtonIcon: o.elementType,
+    StartScrollButtonIcon: o.elementType
+  }),
+  /**
+   * @ignore
+   */
+  style: o.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])
+});
+function Bo(t) {
+  return le("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);
+  for (; i; ) {
+    if (i === t.firstChild) {
+      if (a)
+        return;
+      a = !0;
+    }
+    const d = i.disabled || i.getAttribute("aria-disabled") === "true";
+    if (!i.hasAttribute("tabindex") || d)
+      i = n(t, i);
+    else {
+      i.focus();
+      return;
+    }
+  }
+}, Eo = (t) => {
+  const {
+    vertical: e,
+    fixed: n,
+    hideScrollbar: a,
+    scrollableX: i,
+    scrollableY: d,
+    centered: p,
+    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"],
+    indicator: ["indicator"],
+    scrollButtons: ["scrollButtons", f && "scrollButtonsHideMobile"],
+    scrollableX: [i && "scrollableX"],
+    hideScrollbar: [a && "hideScrollbar"]
+  }, Bo, h);
+}, Io = $("div", {
+  name: "MuiTabs",
+  slot: "Root",
+  overridesResolver: (t, e) => {
+    const {
+      ownerState: n
+    } = t;
+    return [{
+      [`& .${be.scrollButtons}`]: e.scrollButtons
+    }, {
+      [`& .${be.scrollButtons}`]: n.scrollButtonsHideMobile && e.scrollButtonsHideMobile
+    }, e.root, n.vertical && e.vertical];
+  }
+})(me(({
+  theme: t
+}) => ({
+  overflow: "hidden",
+  minHeight: 48,
+  // Add iOS momentum scrolling for iOS < 13.0
+  WebkitOverflowScrolling: "touch",
+  display: "flex",
+  variants: [{
+    props: ({
+      ownerState: e
+    }) => e.vertical,
+    style: {
+      flexDirection: "column"
+    }
+  }, {
+    props: ({
+      ownerState: e
+    }) => e.scrollButtonsHideMobile,
+    style: {
+      [`& .${be.scrollButtons}`]: {
+        [t.breakpoints.down("sm")]: {
+          display: "none"
+        }
+      }
+    }
+  }]
+}))), Mo = $("div", {
+  name: "MuiTabs",
+  slot: "Scroller",
+  overridesResolver: (t, e) => {
+    const {
+      ownerState: n
+    } = t;
+    return [e.scroller, n.fixed && e.fixed, n.hideScrollbar && e.hideScrollbar, n.scrollableX && e.scrollableX, n.scrollableY && e.scrollableY];
+  }
+})({
+  position: "relative",
+  display: "inline-block",
+  flex: "1 1 auto",
+  whiteSpace: "nowrap",
+  variants: [{
+    props: ({
+      ownerState: t
+    }) => t.fixed,
+    style: {
+      overflowX: "hidden",
+      width: "100%"
+    }
+  }, {
+    props: ({
+      ownerState: t
+    }) => t.hideScrollbar,
+    style: {
+      // Hide dimensionless scrollbar on macOS
+      scrollbarWidth: "none",
+      // Firefox
+      "&::-webkit-scrollbar": {
+        display: "none"
+        // Safari + Chrome
+      }
+    }
+  }, {
+    props: ({
+      ownerState: t
+    }) => t.scrollableX,
+    style: {
+      overflowX: "auto",
+      overflowY: "hidden"
+    }
+  }, {
+    props: ({
+      ownerState: t
+    }) => t.scrollableY,
+    style: {
+      overflowY: "auto",
+      overflowX: "hidden"
+    }
+  }]
+}), No = $("div", {
+  name: "MuiTabs",
+  slot: "FlexContainer",
+  overridesResolver: (t, e) => {
+    const {
+      ownerState: n
+    } = t;
+    return [e.flexContainer, n.vertical && e.flexContainerVertical, n.centered && e.centered];
+  }
+})({
+  display: "flex",
+  variants: [{
+    props: ({
+      ownerState: t
+    }) => t.vertical,
+    style: {
+      flexDirection: "column"
+    }
+  }, {
+    props: ({
+      ownerState: t
+    }) => t.centered,
+    style: {
+      justifyContent: "center"
+    }
+  }]
+}), Po = $("span", {
+  name: "MuiTabs",
+  slot: "Indicator",
+  overridesResolver: (t, e) => e.indicator
+})(me(({
+  theme: t
+}) => ({
+  position: "absolute",
+  height: 2,
+  bottom: 0,
+  width: "100%",
+  transition: t.transitions.create(),
+  variants: [{
+    props: {
+      indicatorColor: "primary"
+    },
+    style: {
+      backgroundColor: (t.vars || t).palette.primary.main
+    }
+  }, {
+    props: {
+      indicatorColor: "secondary"
+    },
+    style: {
+      backgroundColor: (t.vars || t).palette.secondary.main
+    }
+  }, {
+    props: ({
+      ownerState: e
+    }) => e.vertical,
+    style: {
+      height: "100%",
+      width: 2,
+      right: 0
+    }
+  }]
+}))), Ro = $(He)({
+  overflowX: "auto",
+  overflowY: "hidden",
+  // Hide dimensionless scrollbar on macOS
+  scrollbarWidth: "none",
+  // Firefox
+  "&::-webkit-scrollbar": {
+    display: "none"
+    // Safari + Chrome
+  }
+}), Oe = {};
+let ke = !1;
+const Xe = /* @__PURE__ */ s.forwardRef(function(e, n) {
+  const a = he({
+    props: e,
+    name: "MuiTabs"
+  }), i = ao(), d = $e(), {
+    "aria-label": p,
+    "aria-labelledby": f,
+    action: h,
+    centered: S = !1,
+    children: y,
+    className: m,
+    component: v = "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 = {
+    ...a,
+    component: v,
+    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,
+    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
+  });
+  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({
+    overflow: "hidden",
+    scrollbarWidth: 0
+  }), Z = /* @__PURE__ */ new Map(), P = s.useRef(null), L = s.useRef(null), Ce = () => {
+    const r = P.current;
+    let l;
+    if (r) {
+      const u = r.getBoundingClientRect();
+      l = {
+        clientWidth: r.clientWidth,
+        scrollLeft: r.scrollLeft,
+        scrollTop: r.scrollTop,
+        scrollWidth: r.scrollWidth,
+        top: u.top,
+        bottom: u.bottom,
+        left: u.left,
+        right: u.right
+      };
+    }
+    let c;
+    if (r && O !== !1) {
+      const u = L.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);
+      }
+    }
+    return {
+      tabsMeta: l,
+      tabMeta: c
+    };
+  }, Y = fe(() => {
+    const {
+      tabsMeta: r,
+      tabMeta: l
+    } = Ce();
+    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)));
+    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);
+    else {
+      const I = Math.abs(z[u] - b[u]), A = Math.abs(z[_] - b[_]);
+      (I >= 1 || A >= 1) && ye(b);
+    }
+  }), de = (r, {
+    animation: l = !0
+  } = {}) => {
+    l ? vo(X, P.current, r, {
+      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];
+    let l = 0;
+    const c = Array.from(L.current.children);
+    for (let u = 0; u < c.length; u += 1) {
+      const b = c[u];
+      if (l + b[ce] > r) {
+        u === 0 && (l = r);
+        break;
+      }
+      l += b[ce];
+    }
+    return l;
+  }, eo = () => {
+    Be(-1 * Ee());
+  }, oo = () => {
+    Be(Ee());
+  }, to = s.useCallback((r) => {
+    Ze({
+      overflow: null,
+      scrollbarWidth: r
+    });
+  }, []), 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, {
+      slots: {
+        StartScrollButtonIcon: V.StartScrollButtonIcon
+      },
+      slotProps: {
+        startScrollButtonIcon: Ye
+      },
+      orientation: w,
+      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,
+      direction: d ? "left" : "right",
+      onClick: oo,
+      disabled: !ge,
+      ...D,
+      className: R(k.scrollButtons, D.className)
+    }) : null, r;
+  }, Ie = fe((r) => {
+    const {
+      tabsMeta: l,
+      tabMeta: c
+    } = Ce();
+    if (!(!c || !l)) {
+      if (c[J] < l[J]) {
+        const u = l[X] + (c[J] - l[J]);
+        de(u, {
+          animation: r
+        });
+      } else if (c[Q] > l[Q]) {
+        const u = l[X] + (c[Q] - l[Q]);
+        de(u, {
+          animation: r
+        });
+      }
+    }
+  }), ee = fe(() => {
+    C && M !== !1 && Qe(!we);
+  });
+  s.useEffect(() => {
+    const r = We(() => {
+      P.current && Y();
+    });
+    let l;
+    const c = (I) => {
+      I.forEach((A) => {
+        A.removedNodes.forEach((q) => {
+          l == null || l.unobserve(q);
+        }), A.addedNodes.forEach((q) => {
+          l == null || l.observe(q);
+        });
+      }), r(), ee();
+    }, u = De(P.current);
+    u.addEventListener("resize", r);
+    let b;
+    return typeof ResizeObserver < "u" && (l = new ResizeObserver(r), Array.from(L.current.children).forEach((I) => {
+      l.observe(I);
+    })), typeof MutationObserver < "u" && (b = new MutationObserver(c), b.observe(L.current, {
+      childList: !0
+    })), () => {
+      r.clear(), u.removeEventListener("resize", r), 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,
+        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();
+      };
+    }
+  }, [C, M, we, y == null ? void 0 : y.length]), s.useEffect(() => {
+    Ke(!0);
+  }, []), s.useEffect(() => {
+    Y();
+  }), s.useEffect(() => {
+    Ie(Oe !== z);
+  }, [Ie, z]), 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
+    }
+  });
+  let oe = 0;
+  const ro = s.Children.map(y, (r) => {
+    if (!/* @__PURE__ */ s.isValidElement(r))
+      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(`
+`));
+    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,
+      selected: c,
+      selectionFollowsFocus: ae,
+      onChange: E,
+      textColor: G,
+      value: l,
+      ...oe === 1 && O === !1 && !r.props.tabIndex ? {
+        tabIndex: 0
+      } : {}
+    });
+  }), lo = (r) => {
+    const l = L.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) {
+      case b:
+        r.preventDefault(), te(l, c, Re);
+        break;
+      case I:
+        r.preventDefault(), te(l, c, Pe);
+        break;
+      case "Home":
+        r.preventDefault(), te(l, null, Pe);
+        break;
+      case "End":
+        r.preventDefault(), te(l, null, Re);
+        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,
+      style: {
+        overflow: xe.overflow,
+        [B ? `margin${d ? "Left" : "Right"}` : "marginBottom"]: ie ? void 0 : -xe.scrollbarWidth
+      },
+      ref: P,
+      children: [/* @__PURE__ */ T(No, {
+        "aria-label": p,
+        "aria-labelledby": f,
+        "aria-orientation": w === "vertical" ? "vertical" : null,
+        className: k.flexContainer,
+        ownerState: j,
+        onKeyDown: lo,
+        ref: L,
+        role: "tablist",
+        children: ro
+      }), Se && Me]
+    }), ue.scrollButtonEnd]
+  });
+});
+process.env.NODE_ENV !== "production" && (Xe.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Callback fired when the component mounts.
+   * This is useful when you want to trigger an action programmatically.
+   * It supports two actions: `updateIndicator()` and `updateScrollButtons()`
+   *
+   * @param {object} actions This object contains all possible actions
+   * that can be triggered programmatically.
+   */
+  action: uo,
+  /**
+   * 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,
+  /**
+   * The label for the Tabs as a string.
+   */
+  "aria-label": o.string,
+  /**
+   * An id or list of ids separated by a space that label the Tabs.
+   */
+  "aria-labelledby": o.string,
+  /**
+   * If `true`, the tabs are centered.
+   * This prop is intended for large views.
+   * @default false
+   */
+  centered: o.bool,
+  /**
+   * The content of the component.
+   */
+  children: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: o.elementType,
+  /**
+   * Determines the color of the indicator.
+   * @default 'primary'
+   */
+  indicatorColor: o.oneOfType([o.oneOf(["primary", "secondary"]), o.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,
+  /**
+   * The component orientation (layout flow direction).
+   * @default 'horizontal'
+   */
+  orientation: o.oneOf(["horizontal", "vertical"]),
+  /**
+   * The component used to render the scroll buttons.
+   * @default TabScrollButton
+   */
+  ScrollButtonComponent: o.elementType,
+  /**
+   * Determine behavior of scroll buttons when tabs are set to scroll:
+   *
+   * - `auto` will only present them when not all the items are visible.
+   * - `true` will always present them.
+   * - `false` will never present them.
+   *
+   * By default the scroll buttons are hidden on mobile.
+   * This behavior can be disabled with `allowScrollButtonsMobile`.
+   * @default 'auto'
+   */
+  scrollButtons: o.oneOf(["auto", !1, !0]),
+  /**
+   * If `true` the selected tab changes on focus. Otherwise it only
+   * changes on activation.
+   */
+  selectionFollowsFocus: o.bool,
+  /**
+   * 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])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: o.shape({
+    EndScrollButtonIcon: o.elementType,
+    StartScrollButtonIcon: o.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]),
+  /**
+   * Props applied to the tab indicator element.
+   * @default  {}
+   */
+  TabIndicatorProps: o.object,
+  /**
+   * Props applied to the [`TabScrollButton`](https://mui.com/material-ui/api/tab-scroll-button/) element.
+   * @default {}
+   */
+  TabScrollButtonProps: o.object,
+  /**
+   * Determines the color of the `Tab`.
+   * @default 'primary'
+   */
+  textColor: o.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,
+  /**
+   * Determines additional display behavior of the tabs:
+   *
+   *  - `scrollable` will invoke scrolling properties and allow for horizontally
+   *  scrolling (or swiping) of the tab bar.
+   *  - `fullWidth` will make the tabs grow to use all the available space,
+   *  which should be used for small views, like on mobile.
+   *  - `standard` will render the default state.
+   * @default 'standard'
+   */
+  variant: o.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
+});
+const Oo = /* @__PURE__ */ s.forwardRef(function(e, n) {
+  const {
+    children: a,
+    ...i
+  } = e, d = Ae();
+  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)
+  }) : null);
+  return /* @__PURE__ */ T(Xe, {
+    ...i,
+    ref: n,
+    value: d.value,
+    children: p
+  });
+});
+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`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * A list of `<Tab />` elements.
+   */
+  children: o.node
+});
+function ko(t) {
+  return le("MuiTabPanel", t);
+}
+const lt = re("MuiTabPanel", ["root", "hidden"]), $o = (t) => {
+  const {
+    classes: e,
+    hidden: n
+  } = t;
+  return se({
+    root: ["root", n && "hidden"]
+  }, ko, e);
+}, Wo = $("div", {
+  name: "MuiTabPanel",
+  slot: "Root",
+  overridesResolver: (t, e) => e.root
+})(({
+  theme: t
+}) => ({
+  padding: t.spacing(3)
+})), Do = /* @__PURE__ */ s.forwardRef(function(e, n) {
+  const a = po({
+    props: e,
+    name: "MuiTabPanel"
+  }), {
+    children: i,
+    className: d,
+    value: p,
+    keepMounted: f = !1,
+    ...h
+  } = a, S = {
+    ...a
+  }, y = $o(S), m = Ae();
+  if (m === null)
+    throw new TypeError("No TabContext provided");
+  const v = Fe(m, p), g = Ve(m, p);
+  return /* @__PURE__ */ T(Wo, {
+    "aria-labelledby": g,
+    className: R(y.root, d),
+    hidden: p !== m.value,
+    id: v,
+    ref: n,
+    role: "tabpanel",
+    ownerState: S,
+    ...h,
+    children: (f || p === m.value) && i
+  });
+});
+process.env.NODE_ENV !== "production" && (Do.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.
+   */
+  children: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * Always keep the children in the DOM.
+   * @default false
+   */
+  keepMounted: o.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]),
+  /**
+   * 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
+});
+function jo(t) {
+  return le("MuiTab", t);
+}
+const x = re("MuiTab", ["root", "labelIcon", "textColorInherit", "textColorPrimary", "textColorSecondary", "selected", "disabled", "fullWidth", "wrapped", "iconWrapper", "icon"]), zo = (t) => {
+  const {
+    classes: e,
+    textColor: n,
+    fullWidth: a,
+    wrapped: i,
+    icon: d,
+    label: p,
+    selected: f,
+    disabled: h
+  } = t, S = {
+    root: ["root", d && p && "labelIcon", `textColor${Le(n)}`, a && "fullWidth", i && "wrapped", f && "selected", h && "disabled"],
+    icon: ["iconWrapper", "icon"]
+  };
+  return se(S, jo, e);
+}, Lo = $(ze, {
+  name: "MuiTab",
+  slot: "Root",
+  overridesResolver: (t, e) => {
+    const {
+      ownerState: n
+    } = 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
+    }, {
+      [`& .${x.icon}`]: e.icon
+    }];
+  }
+})(me(({
+  theme: t
+}) => ({
+  ...t.typography.button,
+  maxWidth: 360,
+  minWidth: 90,
+  position: "relative",
+  minHeight: 48,
+  flexShrink: 0,
+  padding: "12px 16px",
+  overflow: "hidden",
+  whiteSpace: "normal",
+  textAlign: "center",
+  lineHeight: 1.25,
+  variants: [{
+    props: ({
+      ownerState: e
+    }) => e.label && (e.iconPosition === "top" || e.iconPosition === "bottom"),
+    style: {
+      flexDirection: "column"
+    }
+  }, {
+    props: ({
+      ownerState: e
+    }) => e.label && e.iconPosition !== "top" && e.iconPosition !== "bottom",
+    style: {
+      flexDirection: "row"
+    }
+  }, {
+    props: ({
+      ownerState: e
+    }) => e.icon && e.label,
+    style: {
+      minHeight: 72,
+      paddingTop: 9,
+      paddingBottom: 9
+    }
+  }, {
+    props: ({
+      ownerState: e,
+      iconPosition: n
+    }) => e.icon && e.label && n === "top",
+    style: {
+      [`& > .${x.icon}`]: {
+        marginBottom: 6
+      }
+    }
+  }, {
+    props: ({
+      ownerState: e,
+      iconPosition: n
+    }) => e.icon && e.label && n === "bottom",
+    style: {
+      [`& > .${x.icon}`]: {
+        marginTop: 6
+      }
+    }
+  }, {
+    props: ({
+      ownerState: e,
+      iconPosition: n
+    }) => e.icon && e.label && n === "start",
+    style: {
+      [`& > .${x.icon}`]: {
+        marginRight: t.spacing(1)
+      }
+    }
+  }, {
+    props: ({
+      ownerState: e,
+      iconPosition: n
+    }) => e.icon && e.label && n === "end",
+    style: {
+      [`& > .${x.icon}`]: {
+        marginLeft: t.spacing(1)
+      }
+    }
+  }, {
+    props: {
+      textColor: "inherit"
+    },
+    style: {
+      color: "inherit",
+      opacity: 0.6,
+      // same opacity as theme.palette.text.secondary
+      [`&.${x.selected}`]: {
+        opacity: 1
+      },
+      [`&.${x.disabled}`]: {
+        opacity: (t.vars || t).palette.action.disabledOpacity
+      }
+    }
+  }, {
+    props: {
+      textColor: "primary"
+    },
+    style: {
+      color: (t.vars || t).palette.text.secondary,
+      [`&.${x.selected}`]: {
+        color: (t.vars || t).palette.primary.main
+      },
+      [`&.${x.disabled}`]: {
+        color: (t.vars || t).palette.text.disabled
+      }
+    }
+  }, {
+    props: {
+      textColor: "secondary"
+    },
+    style: {
+      color: (t.vars || t).palette.text.secondary,
+      [`&.${x.selected}`]: {
+        color: (t.vars || t).palette.secondary.main
+      },
+      [`&.${x.disabled}`]: {
+        color: (t.vars || t).palette.text.disabled
+      }
+    }
+  }, {
+    props: ({
+      ownerState: e
+    }) => e.fullWidth,
+    style: {
+      flexShrink: 1,
+      flexGrow: 1,
+      flexBasis: 0,
+      maxWidth: "none"
+    }
+  }, {
+    props: ({
+      ownerState: e
+    }) => e.wrapped,
+    style: {
+      fontSize: t.typography.pxToRem(12)
+    }
+  }]
+}))), Ao = /* @__PURE__ */ s.forwardRef(function(e, n) {
+  const a = he({
+    props: e,
+    name: "MuiTab"
+  }), {
+    className: i,
+    disabled: d = !1,
+    disableFocusRipple: p = !1,
+    // eslint-disable-next-line react/prop-types
+    fullWidth: f,
+    icon: h,
+    iconPosition: S = "top",
+    // eslint-disable-next-line react/prop-types
+    indicator: y,
+    label: m,
+    onChange: v,
+    onClick: g,
+    onFocus: W,
+    // eslint-disable-next-line react/prop-types
+    selected: E,
+    // eslint-disable-next-line react/prop-types
+    selectionFollowsFocus: w,
+    // eslint-disable-next-line react/prop-types
+    textColor: F = "inherit",
+    value: M,
+    wrapped: ae = !1,
+    ...V
+  } = a, U = {
+    ...a,
+    disabled: d,
+    disableFocusRipple: p,
+    selected: E,
+    icon: !!h,
+    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);
+  };
+  return /* @__PURE__ */ K(Lo, {
+    focusRipple: !p,
+    className: R(H.root, i),
+    ref: n,
+    role: "tab",
+    "aria-selected": E,
+    disabled: d,
+    onClick: G,
+    onFocus: O,
+    ownerState: U,
+    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]
+  });
+});
+process.env.NODE_ENV !== "production" && (Ao.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 isn't supported.
+   * Use the `component` prop if you need to change the children structure.
+   */
+  children: fo,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: o.bool,
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple: o.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple: o.bool,
+  /**
+   * The icon to display.
+   */
+  icon: o.oneOfType([o.element, o.string]),
+  /**
+   * The position of the icon relative to the label.
+   * @default 'top'
+   */
+  iconPosition: o.oneOf(["bottom", "end", "start", "top"]),
+  /**
+   * The label element.
+   */
+  label: o.node,
+  /**
+   * @ignore
+   */
+  onChange: o.func,
+  /**
+   * @ignore
+   */
+  onClick: o.func,
+  /**
+   * @ignore
+   */
+  onFocus: o.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]),
+  /**
+   * You can provide your own value. Otherwise, we fallback to the child position index.
+   */
+  value: o.any,
+  /**
+   * Tab labels appear in a single row.
+   * They can use a second line if needed.
+   * @default false
+   */
+  wrapped: o.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
+};