@cgi-learning-hub/ui 1.2.0-dev.1725030880 → 1.2.0-dev.1725451328

package/dist/Tabs-CV_eM5RY.js

@@ -0,0 +1,1222 @@
+import * as c from "react";
+import { I as pt, J as ft, K as Wt, L as W, P as e } from "./identifier-Bsv46xiT.js";
+import { s as L, m as bt, u as ht, c as mt, e as ne } from "./DefaultPropsProvider-QV6PDjPd.js";
+import { jsxs as q, jsx as x } from "react/jsx-runtime";
+import { B as kt } from "./ButtonBase-D0vqeM8I.js";
+import { u as re } from "./unsupportedProp-BuVD30Gh.js";
+import { a as $t, b as nt, u as le } from "./useTheme-C0nMwKpp.js";
+import { u as se } from "./useForkRef-DwN_Iz9R.js";
+import { o as zt, d as Dt, a as ae } from "./ownerWindow-BoRkeomM.js";
+import { u as dt } from "./useEventCallback-BgMlqKLP.js";
+import { r as ie } from "./refType-BnS1d2D8.js";
+import { c as At } from "./createSvgIcon-B6bEgasO.js";
+function ce(o) {
+  return pt("MuiTab", o);
+}
+const de = ft("MuiTab", ["root", "labelIcon", "textColorInherit", "textColorPrimary", "textColorSecondary", "selected", "disabled", "fullWidth", "wrapped", "iconWrapper", "icon"]), T = de, ue = (o) => {
+  const {
+    classes: t,
+    textColor: l,
+    fullWidth: d,
+    wrapped: i,
+    icon: u,
+    label: b,
+    selected: h,
+    disabled: f
+  } = o, S = {
+    root: ["root", u && b && "labelIcon", `textColor${Wt(l)}`, d && "fullWidth", i && "wrapped", h && "selected", f && "disabled"],
+    icon: ["iconWrapper", "icon"]
+  };
+  return mt(S, ce, t);
+}, pe = L(kt, {
+  name: "MuiTab",
+  slot: "Root",
+  overridesResolver: (o, t) => {
+    const {
+      ownerState: l
+    } = o;
+    return [t.root, l.label && l.icon && t.labelIcon, t[`textColor${Wt(l.textColor)}`], l.fullWidth && t.fullWidth, l.wrapped && t.wrapped, {
+      [`& .${T.iconWrapper}`]: t.iconWrapper
+    }, {
+      [`& .${T.icon}`]: t.icon
+    }];
+  }
+})(bt(({
+  theme: o
+}) => ({
+  ...o.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: t
+    }) => t.label && (t.iconPosition === "top" || t.iconPosition === "bottom"),
+    style: {
+      flexDirection: "column"
+    }
+  }, {
+    props: ({
+      ownerState: t
+    }) => t.label && t.iconPosition !== "top" && t.iconPosition !== "bottom",
+    style: {
+      flexDirection: "row"
+    }
+  }, {
+    props: ({
+      ownerState: t
+    }) => t.icon && t.label,
+    style: {
+      minHeight: 72,
+      paddingTop: 9,
+      paddingBottom: 9
+    }
+  }, {
+    props: ({
+      ownerState: t,
+      iconPosition: l
+    }) => t.icon && t.label && l === "top",
+    style: {
+      [`& > .${T.icon}`]: {
+        marginBottom: 6
+      }
+    }
+  }, {
+    props: ({
+      ownerState: t,
+      iconPosition: l
+    }) => t.icon && t.label && l === "bottom",
+    style: {
+      [`& > .${T.icon}`]: {
+        marginTop: 6
+      }
+    }
+  }, {
+    props: ({
+      ownerState: t,
+      iconPosition: l
+    }) => t.icon && t.label && l === "start",
+    style: {
+      [`& > .${T.icon}`]: {
+        marginRight: o.spacing(1)
+      }
+    }
+  }, {
+    props: ({
+      ownerState: t,
+      iconPosition: l
+    }) => t.icon && t.label && l === "end",
+    style: {
+      [`& > .${T.icon}`]: {
+        marginLeft: o.spacing(1)
+      }
+    }
+  }, {
+    props: {
+      textColor: "inherit"
+    },
+    style: {
+      color: "inherit",
+      opacity: 0.6,
+      // same opacity as theme.palette.text.secondary
+      [`&.${T.selected}`]: {
+        opacity: 1
+      },
+      [`&.${T.disabled}`]: {
+        opacity: (o.vars || o).palette.action.disabledOpacity
+      }
+    }
+  }, {
+    props: {
+      textColor: "primary"
+    },
+    style: {
+      color: (o.vars || o).palette.text.secondary,
+      [`&.${T.selected}`]: {
+        color: (o.vars || o).palette.primary.main
+      },
+      [`&.${T.disabled}`]: {
+        color: (o.vars || o).palette.text.disabled
+      }
+    }
+  }, {
+    props: {
+      textColor: "secondary"
+    },
+    style: {
+      color: (o.vars || o).palette.text.secondary,
+      [`&.${T.selected}`]: {
+        color: (o.vars || o).palette.secondary.main
+      },
+      [`&.${T.disabled}`]: {
+        color: (o.vars || o).palette.text.disabled
+      }
+    }
+  }, {
+    props: ({
+      ownerState: t
+    }) => t.fullWidth,
+    style: {
+      flexShrink: 1,
+      flexGrow: 1,
+      flexBasis: 0,
+      maxWidth: "none"
+    }
+  }, {
+    props: ({
+      ownerState: t
+    }) => t.wrapped,
+    style: {
+      fontSize: o.typography.pxToRem(12)
+    }
+  }]
+}))), Ft = /* @__PURE__ */ c.forwardRef(function(t, l) {
+  const d = ht({
+    props: t,
+    name: "MuiTab"
+  }), {
+    className: i,
+    disabled: u = !1,
+    disableFocusRipple: b = !1,
+    // eslint-disable-next-line react/prop-types
+    fullWidth: h,
+    icon: f,
+    iconPosition: S = "top",
+    // eslint-disable-next-line react/prop-types
+    indicator: v,
+    label: y,
+    onChange: m,
+    onClick: C,
+    onFocus: k,
+    // eslint-disable-next-line react/prop-types
+    selected: I,
+    // eslint-disable-next-line react/prop-types
+    selectionFollowsFocus: g,
+    // eslint-disable-next-line react/prop-types
+    textColor: j = "inherit",
+    value: M,
+    wrapped: rt = !1,
+    ...H
+  } = d, U = {
+    ...d,
+    disabled: u,
+    disableFocusRipple: b,
+    selected: I,
+    icon: !!f,
+    iconPosition: S,
+    label: !!y,
+    fullWidth: h,
+    textColor: j,
+    wrapped: rt
+  }, V = ue(U), $ = f && y && /* @__PURE__ */ c.isValidElement(f) ? /* @__PURE__ */ c.cloneElement(f, {
+    className: W(V.icon, f.props.className)
+  }) : f, G = (R) => {
+    !I && m && m(R, M), C && C(R);
+  }, N = (R) => {
+    g && !I && m && m(R, M), k && k(R);
+  };
+  return /* @__PURE__ */ q(pe, {
+    focusRipple: !b,
+    className: W(V.root, i),
+    ref: l,
+    role: "tab",
+    "aria-selected": I,
+    disabled: u,
+    onClick: G,
+    onFocus: N,
+    ownerState: U,
+    tabIndex: I ? 0 : -1,
+    ...H,
+    children: [S === "top" || S === "start" ? /* @__PURE__ */ q(c.Fragment, {
+      children: [$, y]
+    }) : /* @__PURE__ */ q(c.Fragment, {
+      children: [y, $]
+    }), v]
+  });
+});
+process.env.NODE_ENV !== "production" && (Ft.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: re,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.object,
+  /**
+   * @ignore
+   */
+  className: e.string,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: e.bool,
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple: e.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: e.bool,
+  /**
+   * The icon to display.
+   */
+  icon: e.oneOfType([e.element, e.string]),
+  /**
+   * The position of the icon relative to the label.
+   * @default 'top'
+   */
+  iconPosition: e.oneOf(["bottom", "end", "start", "top"]),
+  /**
+   * The label element.
+   */
+  label: e.node,
+  /**
+   * @ignore
+   */
+  onChange: e.func,
+  /**
+   * @ignore
+   */
+  onClick: e.func,
+  /**
+   * @ignore
+   */
+  onFocus: e.func,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  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: e.any,
+  /**
+   * Tab labels appear in a single row.
+   * They can use a second line if needed.
+   * @default false
+   */
+  wrapped: e.bool
+});
+const je = Ft, fe = At(/* @__PURE__ */ x("path", {
+  d: "M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+}), "KeyboardArrowLeft"), be = At(/* @__PURE__ */ x("path", {
+  d: "M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+}), "KeyboardArrowRight");
+function he(o) {
+  return (1 + Math.sin(Math.PI * o - Math.PI / 2)) / 2;
+}
+function me(o, t, l, d = {}, i = () => {
+}) {
+  const {
+    ease: u = he,
+    duration: b = 300
+    // standard
+  } = d;
+  let h = null;
+  const f = t[o];
+  let S = !1;
+  const v = () => {
+    S = !0;
+  }, y = (m) => {
+    if (S) {
+      i(new Error("Animation cancelled"));
+      return;
+    }
+    h === null && (h = m);
+    const C = Math.min(1, (m - h) / b);
+    if (t[o] = u(C) * (l - f) + f, C >= 1) {
+      requestAnimationFrame(() => {
+        i(null);
+      });
+      return;
+    }
+    requestAnimationFrame(y);
+  };
+  return f === l ? (i(new Error("Element already at target position")), v) : (requestAnimationFrame(y), v);
+}
+const Se = {
+  width: 99,
+  height: 99,
+  position: "absolute",
+  top: -9999,
+  overflow: "scroll"
+};
+function Lt(o) {
+  const {
+    onChange: t,
+    ...l
+  } = o, d = c.useRef(), i = c.useRef(null), u = () => {
+    d.current = i.current.offsetHeight - i.current.clientHeight;
+  };
+  return se(() => {
+    const b = Dt(() => {
+      const f = d.current;
+      u(), f !== d.current && t(d.current);
+    }), h = zt(i.current);
+    return h.addEventListener("resize", b), () => {
+      b.clear(), h.removeEventListener("resize", b);
+    };
+  }, [t]), c.useEffect(() => {
+    u(), t(d.current);
+  }, [t]), /* @__PURE__ */ x("div", {
+    style: Se,
+    ref: i,
+    ...l
+  });
+}
+process.env.NODE_ENV !== "production" && (Lt.propTypes = {
+  onChange: e.func.isRequired
+});
+function ve(o) {
+  return pt("MuiTabScrollButton", o);
+}
+const ye = ft("MuiTabScrollButton", ["root", "vertical", "horizontal", "disabled"]), ge = (o) => {
+  const {
+    classes: t,
+    orientation: l,
+    disabled: d
+  } = o;
+  return mt({
+    root: ["root", l, d && "disabled"]
+  }, ve, t);
+}, Te = L(kt, {
+  name: "MuiTabScrollButton",
+  slot: "Root",
+  overridesResolver: (o, t) => {
+    const {
+      ownerState: l
+    } = o;
+    return [t.root, l.orientation && t[l.orientation]];
+  }
+})({
+  width: 40,
+  flexShrink: 0,
+  opacity: 0.8,
+  [`&.${ye.disabled}`]: {
+    opacity: 0
+  },
+  variants: [{
+    props: {
+      orientation: "vertical"
+    },
+    style: {
+      width: "100%",
+      height: 40,
+      "& svg": {
+        transform: "var(--TabScrollButton-svgRotate)"
+      }
+    }
+  }]
+}), jt = /* @__PURE__ */ c.forwardRef(function(t, l) {
+  const d = ht({
+    props: t,
+    name: "MuiTabScrollButton"
+  }), {
+    className: i,
+    slots: u = {},
+    slotProps: b = {},
+    direction: h,
+    orientation: f,
+    disabled: S,
+    ...v
+  } = d, y = $t(), m = {
+    isRtl: y,
+    ...d
+  }, C = ge(m), k = u.StartScrollButtonIcon ?? fe, I = u.EndScrollButtonIcon ?? be, g = nt({
+    elementType: k,
+    externalSlotProps: b.startScrollButtonIcon,
+    additionalProps: {
+      fontSize: "small"
+    },
+    ownerState: m
+  }), j = nt({
+    elementType: I,
+    externalSlotProps: b.endScrollButtonIcon,
+    additionalProps: {
+      fontSize: "small"
+    },
+    ownerState: m
+  });
+  return /* @__PURE__ */ x(Te, {
+    component: "div",
+    className: W(C.root, i),
+    ref: l,
+    role: null,
+    ownerState: m,
+    tabIndex: null,
+    ...v,
+    style: {
+      ...v.style,
+      ...f === "vertical" && {
+        "--TabScrollButton-svgRotate": `rotate(${y ? -90 : 90}deg)`
+      }
+    },
+    children: h === "left" ? /* @__PURE__ */ x(k, {
+      ...g
+    }) : /* @__PURE__ */ x(I, {
+      ...j
+    })
+  });
+});
+process.env.NODE_ENV !== "production" && (jt.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: e.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.object,
+  /**
+   * @ignore
+   */
+  className: e.string,
+  /**
+   * The direction the button should indicate.
+   */
+  direction: e.oneOf(["left", "right"]).isRequired,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: e.bool,
+  /**
+   * The component orientation (layout flow direction).
+   */
+  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: 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: e.shape({
+    EndScrollButtonIcon: e.elementType,
+    StartScrollButtonIcon: e.elementType
+  }),
+  /**
+   * @ignore
+   */
+  style: e.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
+});
+function we(o) {
+  return pt("MuiTabs", o);
+}
+const Be = ft("MuiTabs", ["root", "vertical", "flexContainer", "flexContainerVertical", "centered", "scroller", "fixed", "scrollableX", "scrollableY", "hideScrollbar", "scrollButtons", "scrollButtonsHideMobile", "indicator"]), ut = Be, Rt = (o, t) => o === t ? o.firstChild : t && t.nextElementSibling ? t.nextElementSibling : o.firstChild, Ot = (o, t) => o === t ? o.lastChild : t && t.previousElementSibling ? t.previousElementSibling : o.lastChild, ot = (o, t, l) => {
+  let d = !1, i = l(o, t);
+  for (; i; ) {
+    if (i === o.firstChild) {
+      if (d)
+        return;
+      d = !0;
+    }
+    const u = i.disabled || i.getAttribute("aria-disabled") === "true";
+    if (!i.hasAttribute("tabindex") || u)
+      i = l(o, i);
+    else {
+      i.focus();
+      return;
+    }
+  }
+}, xe = (o) => {
+  const {
+    vertical: t,
+    fixed: l,
+    hideScrollbar: d,
+    scrollableX: i,
+    scrollableY: u,
+    centered: b,
+    scrollButtonsHideMobile: h,
+    classes: f
+  } = o;
+  return mt({
+    root: ["root", t && "vertical"],
+    scroller: ["scroller", l && "fixed", d && "hideScrollbar", i && "scrollableX", u && "scrollableY"],
+    flexContainer: ["flexContainer", t && "flexContainerVertical", b && "centered"],
+    indicator: ["indicator"],
+    scrollButtons: ["scrollButtons", h && "scrollButtonsHideMobile"],
+    scrollableX: [i && "scrollableX"],
+    hideScrollbar: [d && "hideScrollbar"]
+  }, we, f);
+}, Ce = L("div", {
+  name: "MuiTabs",
+  slot: "Root",
+  overridesResolver: (o, t) => {
+    const {
+      ownerState: l
+    } = o;
+    return [{
+      [`& .${ut.scrollButtons}`]: t.scrollButtons
+    }, {
+      [`& .${ut.scrollButtons}`]: l.scrollButtonsHideMobile && t.scrollButtonsHideMobile
+    }, t.root, l.vertical && t.vertical];
+  }
+})(bt(({
+  theme: o
+}) => ({
+  overflow: "hidden",
+  minHeight: 48,
+  // Add iOS momentum scrolling for iOS < 13.0
+  WebkitOverflowScrolling: "touch",
+  display: "flex",
+  variants: [{
+    props: ({
+      ownerState: t
+    }) => t.vertical,
+    style: {
+      flexDirection: "column"
+    }
+  }, {
+    props: ({
+      ownerState: t
+    }) => t.scrollButtonsHideMobile,
+    style: {
+      [`& .${ut.scrollButtons}`]: {
+        [o.breakpoints.down("sm")]: {
+          display: "none"
+        }
+      }
+    }
+  }]
+}))), Ie = L("div", {
+  name: "MuiTabs",
+  slot: "Scroller",
+  overridesResolver: (o, t) => {
+    const {
+      ownerState: l
+    } = o;
+    return [t.scroller, l.fixed && t.fixed, l.hideScrollbar && t.hideScrollbar, l.scrollableX && t.scrollableX, l.scrollableY && t.scrollableY];
+  }
+})({
+  position: "relative",
+  display: "inline-block",
+  flex: "1 1 auto",
+  whiteSpace: "nowrap",
+  variants: [{
+    props: ({
+      ownerState: o
+    }) => o.fixed,
+    style: {
+      overflowX: "hidden",
+      width: "100%"
+    }
+  }, {
+    props: ({
+      ownerState: o
+    }) => o.hideScrollbar,
+    style: {
+      // Hide dimensionless scrollbar on macOS
+      scrollbarWidth: "none",
+      // Firefox
+      "&::-webkit-scrollbar": {
+        display: "none"
+        // Safari + Chrome
+      }
+    }
+  }, {
+    props: ({
+      ownerState: o
+    }) => o.scrollableX,
+    style: {
+      overflowX: "auto",
+      overflowY: "hidden"
+    }
+  }, {
+    props: ({
+      ownerState: o
+    }) => o.scrollableY,
+    style: {
+      overflowY: "auto",
+      overflowX: "hidden"
+    }
+  }]
+}), Ee = L("div", {
+  name: "MuiTabs",
+  slot: "FlexContainer",
+  overridesResolver: (o, t) => {
+    const {
+      ownerState: l
+    } = o;
+    return [t.flexContainer, l.vertical && t.flexContainerVertical, l.centered && t.centered];
+  }
+})({
+  display: "flex",
+  variants: [{
+    props: ({
+      ownerState: o
+    }) => o.vertical,
+    style: {
+      flexDirection: "column"
+    }
+  }, {
+    props: ({
+      ownerState: o
+    }) => o.centered,
+    style: {
+      justifyContent: "center"
+    }
+  }]
+}), Me = L("span", {
+  name: "MuiTabs",
+  slot: "Indicator",
+  overridesResolver: (o, t) => t.indicator
+})(bt(({
+  theme: o
+}) => ({
+  position: "absolute",
+  height: 2,
+  bottom: 0,
+  width: "100%",
+  transition: o.transitions.create(),
+  variants: [{
+    props: {
+      indicatorColor: "primary"
+    },
+    style: {
+      backgroundColor: (o.vars || o).palette.primary.main
+    }
+  }, {
+    props: {
+      indicatorColor: "secondary"
+    },
+    style: {
+      backgroundColor: (o.vars || o).palette.secondary.main
+    }
+  }, {
+    props: ({
+      ownerState: t
+    }) => t.vertical,
+    style: {
+      height: "100%",
+      width: 2,
+      right: 0
+    }
+  }]
+}))), Re = L(Lt)({
+  overflowX: "auto",
+  overflowY: "hidden",
+  // Hide dimensionless scrollbar on macOS
+  scrollbarWidth: "none",
+  // Firefox
+  "&::-webkit-scrollbar": {
+    display: "none"
+    // Safari + Chrome
+  }
+}), Nt = {};
+let Pt = !1;
+const Ht = /* @__PURE__ */ c.forwardRef(function(t, l) {
+  const d = ht({
+    props: t,
+    name: "MuiTabs"
+  }), i = le(), u = $t(), {
+    "aria-label": b,
+    "aria-labelledby": h,
+    action: f,
+    centered: S = !1,
+    children: v,
+    className: y,
+    component: m = "div",
+    allowScrollButtonsMobile: C = !1,
+    indicatorColor: k = "primary",
+    onChange: I,
+    orientation: g = "horizontal",
+    ScrollButtonComponent: j = jt,
+    scrollButtons: M = "auto",
+    selectionFollowsFocus: rt,
+    slots: H = {},
+    slotProps: U = {},
+    TabIndicatorProps: V = {},
+    TabScrollButtonProps: $ = {},
+    textColor: G = "primary",
+    value: N,
+    variant: R = "standard",
+    visibleScrollbar: lt = !1,
+    ...Vt
+  } = d, w = R === "scrollable", B = g === "vertical", X = B ? "scrollTop" : "scrollLeft", J = B ? "top" : "left", Q = B ? "bottom" : "right", st = B ? "clientHeight" : "clientWidth", Y = B ? "height" : "width", z = {
+    ...d,
+    component: m,
+    allowScrollButtonsMobile: C,
+    indicatorColor: k,
+    orientation: g,
+    vertical: B,
+    scrollButtons: M,
+    textColor: G,
+    variant: R,
+    visibleScrollbar: lt,
+    fixed: !w,
+    hideScrollbar: w && !lt,
+    scrollableX: w && !B,
+    scrollableY: w && B,
+    centered: S && !w,
+    scrollButtonsHideMobile: !C
+  }, P = xe(z), Ut = nt({
+    elementType: H.StartScrollButtonIcon,
+    externalSlotProps: U.startScrollButtonIcon,
+    ownerState: z
+  }), Xt = nt({
+    elementType: H.EndScrollButtonIcon,
+    externalSlotProps: U.endScrollButtonIcon,
+    ownerState: z
+  });
+  process.env.NODE_ENV !== "production" && S && w && console.error('MUI: You can not use the `centered={true}` and `variant="scrollable"` properties at the same time on a `Tabs` component.');
+  const [St, Yt] = c.useState(!1), [D, vt] = c.useState(Nt), [yt, Kt] = c.useState(!1), [gt, _t] = c.useState(!1), [Tt, qt] = c.useState(!1), [wt, Gt] = c.useState({
+    overflow: "hidden",
+    scrollbarWidth: 0
+  }), Z = /* @__PURE__ */ new Map(), O = c.useRef(null), A = c.useRef(null), Bt = () => {
+    const n = O.current;
+    let r;
+    if (n) {
+      const a = n.getBoundingClientRect();
+      r = {
+        clientWidth: n.clientWidth,
+        scrollLeft: n.scrollLeft,
+        scrollTop: n.scrollTop,
+        scrollWidth: n.scrollWidth,
+        top: a.top,
+        bottom: a.bottom,
+        left: a.left,
+        right: a.right
+      };
+    }
+    let s;
+    if (n && N !== !1) {
+      const a = A.current.children;
+      if (a.length > 0) {
+        const p = a[Z.get(N)];
+        process.env.NODE_ENV !== "production" && (p || console.error(["MUI: The `value` provided to the Tabs component is invalid.", `None of the Tabs' children match with "${N}".`, Z.keys ? `You can provide one of the following values: ${Array.from(Z.keys()).join(", ")}.` : null].join(`
+`))), s = p ? p.getBoundingClientRect() : null, process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "test" && !Pt && s && s.width === 0 && s.height === 0 && // if the whole Tabs component is hidden, don't warn
+        r.clientWidth !== 0 && (r = null, console.error(["MUI: The `value` provided to the Tabs component is invalid.", `The Tab with this \`value\` ("${N}") 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(`
+`)), Pt = !0);
+      }
+    }
+    return {
+      tabsMeta: r,
+      tabMeta: s
+    };
+  }, K = dt(() => {
+    const {
+      tabsMeta: n,
+      tabMeta: r
+    } = Bt();
+    let s = 0, a;
+    B ? (a = "top", r && n && (s = r.top - n.top + n.scrollTop)) : (a = u ? "right" : "left", r && n && (s = (u ? -1 : 1) * (r[a] - n[a] + n.scrollLeft)));
+    const p = {
+      [a]: s,
+      // May be wrong until the font is loaded.
+      [Y]: r ? r[Y] : 0
+    };
+    if (typeof D[a] != "number" || typeof D[Y] != "number")
+      vt(p);
+    else {
+      const E = Math.abs(D[a] - p[a]), F = Math.abs(D[Y] - p[Y]);
+      (E >= 1 || F >= 1) && vt(p);
+    }
+  }), at = (n, {
+    animation: r = !0
+  } = {}) => {
+    r ? me(X, O.current, n, {
+      duration: i.transitions.duration.standard
+    }) : O.current[X] = n;
+  }, xt = (n) => {
+    let r = O.current[X];
+    B ? r += n : r += n * (u ? -1 : 1), at(r);
+  }, Ct = () => {
+    const n = O.current[st];
+    let r = 0;
+    const s = Array.from(A.current.children);
+    for (let a = 0; a < s.length; a += 1) {
+      const p = s[a];
+      if (r + p[st] > n) {
+        a === 0 && (r = n);
+        break;
+      }
+      r += p[st];
+    }
+    return r;
+  }, Jt = () => {
+    xt(-1 * Ct());
+  }, Qt = () => {
+    xt(Ct());
+  }, Zt = c.useCallback((n) => {
+    Gt({
+      overflow: null,
+      scrollbarWidth: n
+    });
+  }, []), te = () => {
+    const n = {};
+    n.scrollbarSizeListener = w ? /* @__PURE__ */ x(Re, {
+      onChange: Zt,
+      className: W(P.scrollableX, P.hideScrollbar)
+    }) : null;
+    const s = w && (M === "auto" && (yt || gt) || M === !0);
+    return n.scrollButtonStart = s ? /* @__PURE__ */ x(j, {
+      slots: {
+        StartScrollButtonIcon: H.StartScrollButtonIcon
+      },
+      slotProps: {
+        startScrollButtonIcon: Ut
+      },
+      orientation: g,
+      direction: u ? "right" : "left",
+      onClick: Jt,
+      disabled: !yt,
+      ...$,
+      className: W(P.scrollButtons, $.className)
+    }) : null, n.scrollButtonEnd = s ? /* @__PURE__ */ x(j, {
+      slots: {
+        EndScrollButtonIcon: H.EndScrollButtonIcon
+      },
+      slotProps: {
+        endScrollButtonIcon: Xt
+      },
+      orientation: g,
+      direction: u ? "left" : "right",
+      onClick: Qt,
+      disabled: !gt,
+      ...$,
+      className: W(P.scrollButtons, $.className)
+    }) : null, n;
+  }, It = dt((n) => {
+    const {
+      tabsMeta: r,
+      tabMeta: s
+    } = Bt();
+    if (!(!s || !r)) {
+      if (s[J] < r[J]) {
+        const a = r[X] + (s[J] - r[J]);
+        at(a, {
+          animation: n
+        });
+      } else if (s[Q] > r[Q]) {
+        const a = r[X] + (s[Q] - r[Q]);
+        at(a, {
+          animation: n
+        });
+      }
+    }
+  }), tt = dt(() => {
+    w && M !== !1 && qt(!Tt);
+  });
+  c.useEffect(() => {
+    const n = Dt(() => {
+      O.current && K();
+    });
+    let r;
+    const s = (E) => {
+      E.forEach((F) => {
+        F.removedNodes.forEach((_) => {
+          r == null || r.unobserve(_);
+        }), F.addedNodes.forEach((_) => {
+          r == null || r.observe(_);
+        });
+      }), n(), tt();
+    }, a = zt(O.current);
+    a.addEventListener("resize", n);
+    let p;
+    return typeof ResizeObserver < "u" && (r = new ResizeObserver(n), Array.from(A.current.children).forEach((E) => {
+      r.observe(E);
+    })), typeof MutationObserver < "u" && (p = new MutationObserver(s), p.observe(A.current, {
+      childList: !0
+    })), () => {
+      n.clear(), a.removeEventListener("resize", n), p == null || p.disconnect(), r == null || r.disconnect();
+    };
+  }, [K, tt]), c.useEffect(() => {
+    const n = Array.from(A.current.children), r = n.length;
+    if (typeof IntersectionObserver < "u" && r > 0 && w && M !== !1) {
+      const s = n[0], a = n[r - 1], p = {
+        root: O.current,
+        threshold: 0.99
+      }, E = (ct) => {
+        Kt(!ct[0].isIntersecting);
+      }, F = new IntersectionObserver(E, p);
+      F.observe(s);
+      const _ = (ct) => {
+        _t(!ct[0].isIntersecting);
+      }, Mt = new IntersectionObserver(_, p);
+      return Mt.observe(a), () => {
+        F.disconnect(), Mt.disconnect();
+      };
+    }
+  }, [w, M, Tt, v == null ? void 0 : v.length]), c.useEffect(() => {
+    Yt(!0);
+  }, []), c.useEffect(() => {
+    K();
+  }), c.useEffect(() => {
+    It(Nt !== D);
+  }, [It, D]), c.useImperativeHandle(f, () => ({
+    updateIndicator: K,
+    updateScrollButtons: tt
+  }), [K, tt]);
+  const Et = /* @__PURE__ */ x(Me, {
+    ...V,
+    className: W(P.indicator, V.className),
+    ownerState: z,
+    style: {
+      ...D,
+      ...V.style
+    }
+  });
+  let et = 0;
+  const ee = c.Children.map(v, (n) => {
+    if (!/* @__PURE__ */ c.isValidElement(n))
+      return null;
+    process.env.NODE_ENV !== "production" && ne.isFragment(n) && console.error(["MUI: The Tabs component doesn't accept a Fragment as a child.", "Consider providing an array instead."].join(`
+`));
+    const r = n.props.value === void 0 ? et : n.props.value;
+    Z.set(r, et);
+    const s = r === N;
+    return et += 1, /* @__PURE__ */ c.cloneElement(n, {
+      fullWidth: R === "fullWidth",
+      indicator: s && !St && Et,
+      selected: s,
+      selectionFollowsFocus: rt,
+      onChange: I,
+      textColor: G,
+      value: r,
+      ...et === 1 && N === !1 && !n.props.tabIndex ? {
+        tabIndex: 0
+      } : {}
+    });
+  }), oe = (n) => {
+    const r = A.current, s = ae(r).activeElement;
+    if (s.getAttribute("role") !== "tab")
+      return;
+    let p = g === "horizontal" ? "ArrowLeft" : "ArrowUp", E = g === "horizontal" ? "ArrowRight" : "ArrowDown";
+    switch (g === "horizontal" && u && (p = "ArrowRight", E = "ArrowLeft"), n.key) {
+      case p:
+        n.preventDefault(), ot(r, s, Ot);
+        break;
+      case E:
+        n.preventDefault(), ot(r, s, Rt);
+        break;
+      case "Home":
+        n.preventDefault(), ot(r, null, Rt);
+        break;
+      case "End":
+        n.preventDefault(), ot(r, null, Ot);
+        break;
+    }
+  }, it = te();
+  return /* @__PURE__ */ q(Ce, {
+    className: W(P.root, y),
+    ownerState: z,
+    ref: l,
+    as: m,
+    ...Vt,
+    children: [it.scrollButtonStart, it.scrollbarSizeListener, /* @__PURE__ */ q(Ie, {
+      className: P.scroller,
+      ownerState: z,
+      style: {
+        overflow: wt.overflow,
+        [B ? `margin${u ? "Left" : "Right"}` : "marginBottom"]: lt ? void 0 : -wt.scrollbarWidth
+      },
+      ref: O,
+      children: [/* @__PURE__ */ x(Ee, {
+        "aria-label": b,
+        "aria-labelledby": h,
+        "aria-orientation": g === "vertical" ? "vertical" : null,
+        className: P.flexContainer,
+        ownerState: z,
+        onKeyDown: oe,
+        ref: A,
+        role: "tablist",
+        children: ee
+      }), St && Et]
+    }), it.scrollButtonEnd]
+  });
+});
+process.env.NODE_ENV !== "production" && (Ht.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: ie,
+  /**
+   * 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: e.bool,
+  /**
+   * The label for the Tabs as a string.
+   */
+  "aria-label": e.string,
+  /**
+   * An id or list of ids separated by a space that label the Tabs.
+   */
+  "aria-labelledby": e.string,
+  /**
+   * If `true`, the tabs are centered.
+   * This prop is intended for large views.
+   * @default false
+   */
+  centered: e.bool,
+  /**
+   * The content of the component.
+   */
+  children: e.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.object,
+  /**
+   * @ignore
+   */
+  className: e.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: e.elementType,
+  /**
+   * Determines the color of the indicator.
+   * @default 'primary'
+   */
+  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: e.func,
+  /**
+   * The component orientation (layout flow direction).
+   * @default 'horizontal'
+   */
+  orientation: e.oneOf(["horizontal", "vertical"]),
+  /**
+   * The component used to render the scroll buttons.
+   * @default TabScrollButton
+   */
+  ScrollButtonComponent: e.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: e.oneOf(["auto", !1, !0]),
+  /**
+   * If `true` the selected tab changes on focus. Otherwise it only
+   * changes on activation.
+   */
+  selectionFollowsFocus: e.bool,
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   * @default {}
+   */
+  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: e.shape({
+    EndScrollButtonIcon: e.elementType,
+    StartScrollButtonIcon: e.elementType
+  }),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
+  /**
+   * Props applied to the tab indicator element.
+   * @default  {}
+   */
+  TabIndicatorProps: e.object,
+  /**
+   * Props applied to the [`TabScrollButton`](https://mui.com/material-ui/api/tab-scroll-button/) element.
+   * @default {}
+   */
+  TabScrollButtonProps: e.object,
+  /**
+   * Determines the color of the `Tab`.
+   * @default 'primary'
+   */
+  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: e.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: 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: e.bool
+});
+const He = Ht;
+export {
+  be as K,
+  je as T,
+  He as a,
+  ut as b,
+  we as c,
+  fe as d,
+  ce as g,
+  T as t
+};