kdpa-components 1.35.2 → 1.35.3

package/dist/Tabs-9775b0bb.js

@@ -0,0 +1,1084 @@
+import { _ as f, a as so } from "./extends-393586f3.js";
+import * as u from "react";
+import { g as So, h as jo, P as e } from "./identifier-9dfe30d8.js";
+import { g as vo, s as L, u as yo, c as O, a as xo } from "./useThemeProps-7d04a175.js";
+import { j as v } from "./jsx-runtime-944c88e2.js";
+import { B as zo } from "./ButtonBase-0f9f324d.js";
+import { u as ee } from "./unsupportedProp-3dbf01f6.js";
+import { r as te } from "./emotion-is-prop-valid.esm-b7f48706.js";
+import { u as $o } from "./useTheme-014a54ad.js";
+import { a as le, u as bo } from "./useEventCallback-fe4fd69c.js";
+import { d as mo, o as ko } from "./ownerWindow-e6cc3097.js";
+import { u as no } from "./useSlotProps-f238319f.js";
+import { r as re } from "./refType-af1a9f54.js";
+import { K as ne, a as se } from "./KeyboardArrowRight-14dbe7d6.js";
+import { o as ie } from "./ownerDocument-5430cd5b.js";
+let U;
+function Fo() {
+  if (U)
+    return U;
+  const o = document.createElement("div"), t = document.createElement("div");
+  return t.style.width = "10px", t.style.height = "1px", o.appendChild(t), o.dir = "rtl", o.style.fontSize = "14px", o.style.width = "4px", o.style.height = "1px", o.style.position = "absolute", o.style.top = "-1000px", o.style.overflow = "scroll", document.body.appendChild(o), U = "reverse", o.scrollLeft > 0 ? U = "default" : (o.scrollLeft = 1, o.scrollLeft === 0 && (U = "negative")), document.body.removeChild(o), U;
+}
+function Mo(o, t) {
+  const n = o.scrollLeft;
+  if (t !== "rtl")
+    return n;
+  switch (Fo()) {
+    case "negative":
+      return o.scrollWidth - o.clientWidth + n;
+    case "reverse":
+      return o.scrollWidth - o.clientWidth - n;
+    default:
+      return n;
+  }
+}
+function ae(o) {
+  return So("MuiTab", o);
+}
+const ce = vo("MuiTab", ["root", "labelIcon", "textColorInherit", "textColorPrimary", "textColorSecondary", "selected", "disabled", "fullWidth", "wrapped", "iconWrapper"]), F = ce, de = ["className", "disabled", "disableFocusRipple", "fullWidth", "icon", "iconPosition", "indicator", "label", "onChange", "onClick", "onFocus", "selected", "selectionFollowsFocus", "textColor", "value", "wrapped"], ue = (o) => {
+  const {
+    classes: t,
+    textColor: n,
+    fullWidth: c,
+    wrapped: i,
+    icon: d,
+    label: m,
+    selected: b,
+    disabled: p
+  } = o, S = {
+    root: ["root", d && m && "labelIcon", `textColor${jo(n)}`, c && "fullWidth", i && "wrapped", b && "selected", p && "disabled"],
+    iconWrapper: ["iconWrapper"]
+  };
+  return xo(S, ae, t);
+}, pe = L(zo, {
+  name: "MuiTab",
+  slot: "Root",
+  overridesResolver: (o, t) => {
+    const {
+      ownerState: n
+    } = o;
+    return [t.root, n.label && n.icon && t.labelIcon, t[`textColor${jo(n.textColor)}`], n.fullWidth && t.fullWidth, n.wrapped && t.wrapped];
+  }
+})(({
+  theme: o,
+  ownerState: t
+}) => f({}, o.typography.button, {
+  maxWidth: 360,
+  minWidth: 90,
+  position: "relative",
+  minHeight: 48,
+  flexShrink: 0,
+  padding: "12px 16px",
+  overflow: "hidden",
+  whiteSpace: "normal",
+  textAlign: "center"
+}, t.label && {
+  flexDirection: t.iconPosition === "top" || t.iconPosition === "bottom" ? "column" : "row"
+}, {
+  lineHeight: 1.25
+}, t.icon && t.label && {
+  minHeight: 72,
+  paddingTop: 9,
+  paddingBottom: 9,
+  [`& > .${F.iconWrapper}`]: f({}, t.iconPosition === "top" && {
+    marginBottom: 6
+  }, t.iconPosition === "bottom" && {
+    marginTop: 6
+  }, t.iconPosition === "start" && {
+    marginRight: o.spacing(1)
+  }, t.iconPosition === "end" && {
+    marginLeft: o.spacing(1)
+  })
+}, t.textColor === "inherit" && {
+  color: "inherit",
+  opacity: 0.6,
+  // same opacity as theme.palette.text.secondary
+  [`&.${F.selected}`]: {
+    opacity: 1
+  },
+  [`&.${F.disabled}`]: {
+    opacity: (o.vars || o).palette.action.disabledOpacity
+  }
+}, t.textColor === "primary" && {
+  color: (o.vars || o).palette.text.secondary,
+  [`&.${F.selected}`]: {
+    color: (o.vars || o).palette.primary.main
+  },
+  [`&.${F.disabled}`]: {
+    color: (o.vars || o).palette.text.disabled
+  }
+}, t.textColor === "secondary" && {
+  color: (o.vars || o).palette.text.secondary,
+  [`&.${F.selected}`]: {
+    color: (o.vars || o).palette.secondary.main
+  },
+  [`&.${F.disabled}`]: {
+    color: (o.vars || o).palette.text.disabled
+  }
+}, t.fullWidth && {
+  flexShrink: 1,
+  flexGrow: 1,
+  flexBasis: 0,
+  maxWidth: "none"
+}, t.wrapped && {
+  fontSize: o.typography.pxToRem(12)
+})), Lo = /* @__PURE__ */ u.forwardRef(function(t, n) {
+  const c = yo({
+    props: t,
+    name: "MuiTab"
+  }), {
+    className: i,
+    disabled: d = !1,
+    disableFocusRipple: m = !1,
+    // eslint-disable-next-line react/prop-types
+    fullWidth: b,
+    icon: p,
+    iconPosition: S = "top",
+    // eslint-disable-next-line react/prop-types
+    indicator: R,
+    label: C,
+    onChange: g,
+    onClick: y,
+    onFocus: D,
+    // eslint-disable-next-line react/prop-types
+    selected: w,
+    // eslint-disable-next-line react/prop-types
+    selectionFollowsFocus: x,
+    // eslint-disable-next-line react/prop-types
+    textColor: A = "inherit",
+    value: I,
+    wrapped: io = !1
+  } = c, H = so(c, de), Y = f({}, c, {
+    disabled: d,
+    disableFocusRipple: m,
+    selected: w,
+    icon: !!p,
+    iconPosition: S,
+    label: !!C,
+    fullWidth: b,
+    textColor: A,
+    wrapped: io
+  }), _ = ue(Y), j = p && C && /* @__PURE__ */ u.isValidElement(p) ? /* @__PURE__ */ u.cloneElement(p, {
+    className: O(_.iconWrapper, p.props.className)
+  }) : p, Q = (N) => {
+    !w && g && g(N, I), y && y(N);
+  }, P = (N) => {
+    x && !w && g && g(N, I), D && D(N);
+  };
+  return /* @__PURE__ */ v.jsxs(pe, f({
+    focusRipple: !m,
+    className: O(_.root, i),
+    ref: n,
+    role: "tab",
+    "aria-selected": w,
+    disabled: d,
+    onClick: Q,
+    onFocus: P,
+    ownerState: Y,
+    tabIndex: w ? 0 : -1
+  }, H, {
+    children: [S === "top" || S === "start" ? /* @__PURE__ */ v.jsxs(u.Fragment, {
+      children: [j, C]
+    }) : /* @__PURE__ */ v.jsxs(u.Fragment, {
+      children: [C, j]
+    }), R]
+  }));
+});
+process.env.NODE_ENV !== "production" && (Lo.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * This prop isn't supported.
+   * Use the `component` prop if you need to change the children structure.
+   */
+  children: ee,
+  /**
+   * 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 Ye = Lo;
+function fe(o) {
+  return (1 + Math.sin(Math.PI * o - Math.PI / 2)) / 2;
+}
+function be(o, t, n, c = {}, i = () => {
+}) {
+  const {
+    ease: d = fe,
+    duration: m = 300
+    // standard
+  } = c;
+  let b = null;
+  const p = t[o];
+  let S = !1;
+  const R = () => {
+    S = !0;
+  }, C = (g) => {
+    if (S) {
+      i(new Error("Animation cancelled"));
+      return;
+    }
+    b === null && (b = g);
+    const y = Math.min(1, (g - b) / m);
+    if (t[o] = d(y) * (n - p) + p, y >= 1) {
+      requestAnimationFrame(() => {
+        i(null);
+      });
+      return;
+    }
+    requestAnimationFrame(C);
+  };
+  return p === n ? (i(new Error("Element already at target position")), R) : (requestAnimationFrame(C), R);
+}
+const he = ["onChange"], me = {
+  width: 99,
+  height: 99,
+  position: "absolute",
+  top: -9999,
+  overflow: "scroll"
+};
+function Do(o) {
+  const {
+    onChange: t
+  } = o, n = so(o, he), c = u.useRef(), i = u.useRef(null), d = () => {
+    c.current = i.current.offsetHeight - i.current.clientHeight;
+  };
+  return le(() => {
+    const m = mo(() => {
+      const p = c.current;
+      d(), p !== c.current && t(c.current);
+    }), b = ko(i.current);
+    return b.addEventListener("resize", m), () => {
+      m.clear(), b.removeEventListener("resize", m);
+    };
+  }, [t]), u.useEffect(() => {
+    d(), t(c.current);
+  }, [t]), /* @__PURE__ */ v.jsx("div", f({
+    style: me,
+    ref: i
+  }, n));
+}
+process.env.NODE_ENV !== "production" && (Do.propTypes = {
+  onChange: e.func.isRequired
+});
+function Se(o) {
+  return So("MuiTabScrollButton", o);
+}
+const ve = vo("MuiTabScrollButton", ["root", "vertical", "horizontal", "disabled"]), ye = ve, xe = ["className", "slots", "slotProps", "direction", "orientation", "disabled"], ge = (o) => {
+  const {
+    classes: t,
+    orientation: n,
+    disabled: c
+  } = o;
+  return xo({
+    root: ["root", n, c && "disabled"]
+  }, Se, t);
+}, Te = L(zo, {
+  name: "MuiTabScrollButton",
+  slot: "Root",
+  overridesResolver: (o, t) => {
+    const {
+      ownerState: n
+    } = o;
+    return [t.root, n.orientation && t[n.orientation]];
+  }
+})(({
+  ownerState: o
+}) => f({
+  width: 40,
+  flexShrink: 0,
+  opacity: 0.8,
+  [`&.${ye.disabled}`]: {
+    opacity: 0
+  }
+}, o.orientation === "vertical" && {
+  width: "100%",
+  height: 40,
+  "& svg": {
+    transform: `rotate(${o.isRtl ? -90 : 90}deg)`
+  }
+})), Ao = /* @__PURE__ */ u.forwardRef(function(t, n) {
+  var c, i;
+  const d = yo({
+    props: t,
+    name: "MuiTabScrollButton"
+  }), {
+    className: m,
+    slots: b = {},
+    slotProps: p = {},
+    direction: S
+  } = d, R = so(d, xe), g = $o().direction === "rtl", y = f({
+    isRtl: g
+  }, d), D = ge(y), w = (c = b.StartScrollButtonIcon) != null ? c : ne, x = (i = b.EndScrollButtonIcon) != null ? i : se, A = no({
+    elementType: w,
+    externalSlotProps: p.startScrollButtonIcon,
+    additionalProps: {
+      fontSize: "small"
+    },
+    ownerState: y
+  }), I = no({
+    elementType: x,
+    externalSlotProps: p.endScrollButtonIcon,
+    additionalProps: {
+      fontSize: "small"
+    },
+    ownerState: y
+  });
+  return /* @__PURE__ */ v.jsx(Te, f({
+    component: "div",
+    className: O(D.root, m),
+    ref: n,
+    role: null,
+    ownerState: y,
+    tabIndex: null
+  }, R, {
+    children: S === "left" ? /* @__PURE__ */ v.jsx(w, f({}, A)) : /* @__PURE__ */ v.jsx(x, f({}, I))
+  }));
+});
+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 "yarn 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
+  }),
+  /**
+   * 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])
+});
+const Be = Ao;
+function Ce(o) {
+  return So("MuiTabs", o);
+}
+const we = vo("MuiTabs", ["root", "vertical", "flexContainer", "flexContainerVertical", "centered", "scroller", "fixed", "scrollableX", "scrollableY", "hideScrollbar", "scrollButtons", "scrollButtonsHideMobile", "indicator"]), ho = we, Ee = ["aria-label", "aria-labelledby", "action", "centered", "children", "className", "component", "allowScrollButtonsMobile", "indicatorColor", "onChange", "orientation", "ScrollButtonComponent", "scrollButtons", "selectionFollowsFocus", "slots", "slotProps", "TabIndicatorProps", "TabScrollButtonProps", "textColor", "value", "variant", "visibleScrollbar"], Ro = (o, t) => o === t ? o.firstChild : t && t.nextElementSibling ? t.nextElementSibling : o.firstChild, Po = (o, t) => o === t ? o.lastChild : t && t.previousElementSibling ? t.previousElementSibling : o.lastChild, ro = (o, t, n) => {
+  let c = !1, i = n(o, t);
+  for (; i; ) {
+    if (i === o.firstChild) {
+      if (c)
+        return;
+      c = !0;
+    }
+    const d = i.disabled || i.getAttribute("aria-disabled") === "true";
+    if (!i.hasAttribute("tabindex") || d)
+      i = n(o, i);
+    else {
+      i.focus();
+      return;
+    }
+  }
+}, Ie = (o) => {
+  const {
+    vertical: t,
+    fixed: n,
+    hideScrollbar: c,
+    scrollableX: i,
+    scrollableY: d,
+    centered: m,
+    scrollButtonsHideMobile: b,
+    classes: p
+  } = o;
+  return xo({
+    root: ["root", t && "vertical"],
+    scroller: ["scroller", n && "fixed", c && "hideScrollbar", i && "scrollableX", d && "scrollableY"],
+    flexContainer: ["flexContainer", t && "flexContainerVertical", m && "centered"],
+    indicator: ["indicator"],
+    scrollButtons: ["scrollButtons", b && "scrollButtonsHideMobile"],
+    scrollableX: [i && "scrollableX"],
+    hideScrollbar: [c && "hideScrollbar"]
+  }, Ce, p);
+}, Ne = L("div", {
+  name: "MuiTabs",
+  slot: "Root",
+  overridesResolver: (o, t) => {
+    const {
+      ownerState: n
+    } = o;
+    return [{
+      [`& .${ho.scrollButtons}`]: t.scrollButtons
+    }, {
+      [`& .${ho.scrollButtons}`]: n.scrollButtonsHideMobile && t.scrollButtonsHideMobile
+    }, t.root, n.vertical && t.vertical];
+  }
+})(({
+  ownerState: o,
+  theme: t
+}) => f({
+  overflow: "hidden",
+  minHeight: 48,
+  // Add iOS momentum scrolling for iOS < 13.0
+  WebkitOverflowScrolling: "touch",
+  display: "flex"
+}, o.vertical && {
+  flexDirection: "column"
+}, o.scrollButtonsHideMobile && {
+  [`& .${ho.scrollButtons}`]: {
+    [t.breakpoints.down("sm")]: {
+      display: "none"
+    }
+  }
+})), Me = L("div", {
+  name: "MuiTabs",
+  slot: "Scroller",
+  overridesResolver: (o, t) => {
+    const {
+      ownerState: n
+    } = o;
+    return [t.scroller, n.fixed && t.fixed, n.hideScrollbar && t.hideScrollbar, n.scrollableX && t.scrollableX, n.scrollableY && t.scrollableY];
+  }
+})(({
+  ownerState: o
+}) => f({
+  position: "relative",
+  display: "inline-block",
+  flex: "1 1 auto",
+  whiteSpace: "nowrap"
+}, o.fixed && {
+  overflowX: "hidden",
+  width: "100%"
+}, o.hideScrollbar && {
+  // Hide dimensionless scrollbar on macOS
+  scrollbarWidth: "none",
+  // Firefox
+  "&::-webkit-scrollbar": {
+    display: "none"
+    // Safari + Chrome
+  }
+}, o.scrollableX && {
+  overflowX: "auto",
+  overflowY: "hidden"
+}, o.scrollableY && {
+  overflowY: "auto",
+  overflowX: "hidden"
+})), Re = L("div", {
+  name: "MuiTabs",
+  slot: "FlexContainer",
+  overridesResolver: (o, t) => {
+    const {
+      ownerState: n
+    } = o;
+    return [t.flexContainer, n.vertical && t.flexContainerVertical, n.centered && t.centered];
+  }
+})(({
+  ownerState: o
+}) => f({
+  display: "flex"
+}, o.vertical && {
+  flexDirection: "column"
+}, o.centered && {
+  justifyContent: "center"
+})), Pe = L("span", {
+  name: "MuiTabs",
+  slot: "Indicator",
+  overridesResolver: (o, t) => t.indicator
+})(({
+  ownerState: o,
+  theme: t
+}) => f({
+  position: "absolute",
+  height: 2,
+  bottom: 0,
+  width: "100%",
+  transition: t.transitions.create()
+}, o.indicatorColor === "primary" && {
+  backgroundColor: (t.vars || t).palette.primary.main
+}, o.indicatorColor === "secondary" && {
+  backgroundColor: (t.vars || t).palette.secondary.main
+}, o.vertical && {
+  height: "100%",
+  width: 2,
+  right: 0
+})), We = L(Do, {
+  name: "MuiTabs",
+  slot: "ScrollbarSize"
+})({
+  overflowX: "auto",
+  overflowY: "hidden",
+  // Hide dimensionless scrollbar on macOS
+  scrollbarWidth: "none",
+  // Firefox
+  "&::-webkit-scrollbar": {
+    display: "none"
+    // Safari + Chrome
+  }
+}), Wo = {};
+let Oo = !1;
+const Ho = /* @__PURE__ */ u.forwardRef(function(t, n) {
+  const c = yo({
+    props: t,
+    name: "MuiTabs"
+  }), i = $o(), d = i.direction === "rtl", {
+    "aria-label": m,
+    "aria-labelledby": b,
+    action: p,
+    centered: S = !1,
+    children: R,
+    className: C,
+    component: g = "div",
+    allowScrollButtonsMobile: y = !1,
+    indicatorColor: D = "primary",
+    onChange: w,
+    orientation: x = "horizontal",
+    ScrollButtonComponent: A = Be,
+    scrollButtons: I = "auto",
+    selectionFollowsFocus: io,
+    slots: H = {},
+    slotProps: Y = {},
+    TabIndicatorProps: _ = {},
+    TabScrollButtonProps: j = {},
+    textColor: Q = "primary",
+    value: P,
+    variant: N = "standard",
+    visibleScrollbar: ao = !1
+  } = c, _o = so(c, Ee), M = N === "scrollable", T = x === "vertical", K = T ? "scrollTop" : "scrollLeft", Z = T ? "top" : "left", oo = T ? "bottom" : "right", co = T ? "clientHeight" : "clientWidth", q = T ? "height" : "width", z = f({}, c, {
+    component: g,
+    allowScrollButtonsMobile: y,
+    indicatorColor: D,
+    orientation: x,
+    vertical: T,
+    scrollButtons: I,
+    textColor: Q,
+    variant: N,
+    visibleScrollbar: ao,
+    fixed: !M,
+    hideScrollbar: M && !ao,
+    scrollableX: M && !T,
+    scrollableY: M && T,
+    centered: S && !M,
+    scrollButtonsHideMobile: !y
+  }), W = Ie(z), Vo = no({
+    elementType: H.StartScrollButtonIcon,
+    externalSlotProps: Y.startScrollButtonIcon,
+    ownerState: z
+  }), Xo = no({
+    elementType: H.EndScrollButtonIcon,
+    externalSlotProps: Y.endScrollButtonIcon,
+    ownerState: z
+  });
+  process.env.NODE_ENV !== "production" && S && M && console.error('MUI: You can not use the `centered={true}` and `variant="scrollable"` properties at the same time on a `Tabs` component.');
+  const [go, Uo] = u.useState(!1), [$, To] = u.useState(Wo), [V, Yo] = u.useState({
+    start: !1,
+    end: !1
+  }), [Bo, Ko] = u.useState({
+    overflow: "hidden",
+    scrollbarWidth: 0
+  }), eo = /* @__PURE__ */ new Map(), E = u.useRef(null), G = u.useRef(null), Co = () => {
+    const l = E.current;
+    let r;
+    if (l) {
+      const a = l.getBoundingClientRect();
+      r = {
+        clientWidth: l.clientWidth,
+        scrollLeft: l.scrollLeft,
+        scrollTop: l.scrollTop,
+        scrollLeftNormalized: Mo(l, i.direction),
+        scrollWidth: l.scrollWidth,
+        top: a.top,
+        bottom: a.bottom,
+        left: a.left,
+        right: a.right
+      };
+    }
+    let s;
+    if (l && P !== !1) {
+      const a = G.current.children;
+      if (a.length > 0) {
+        const h = a[eo.get(P)];
+        process.env.NODE_ENV !== "production" && (h || console.error(["MUI: The `value` provided to the Tabs component is invalid.", `None of the Tabs' children match with "${P}".`, eo.keys ? `You can provide one of the following values: ${Array.from(eo.keys()).join(", ")}.` : null].join(`
+`))), s = h ? h.getBoundingClientRect() : null, process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "test" && !Oo && 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\` ("${P}") 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(`
+`)), Oo = !0);
+      }
+    }
+    return {
+      tabsMeta: r,
+      tabMeta: s
+    };
+  }, J = bo(() => {
+    const {
+      tabsMeta: l,
+      tabMeta: r
+    } = Co();
+    let s = 0, a;
+    if (T)
+      a = "top", r && l && (s = r.top - l.top + l.scrollTop);
+    else if (a = d ? "right" : "left", r && l) {
+      const B = d ? l.scrollLeftNormalized + l.clientWidth - l.scrollWidth : l.scrollLeft;
+      s = (d ? -1 : 1) * (r[a] - l[a] + B);
+    }
+    const h = {
+      [a]: s,
+      // May be wrong until the font is loaded.
+      [q]: r ? r[q] : 0
+    };
+    if (isNaN($[a]) || isNaN($[q]))
+      To(h);
+    else {
+      const B = Math.abs($[a] - h[a]), X = Math.abs($[q] - h[q]);
+      (B >= 1 || X >= 1) && To(h);
+    }
+  }), uo = (l, {
+    animation: r = !0
+  } = {}) => {
+    r ? be(K, E.current, l, {
+      duration: i.transitions.duration.standard
+    }) : E.current[K] = l;
+  }, wo = (l) => {
+    let r = E.current[K];
+    T ? r += l : (r += l * (d ? -1 : 1), r *= d && Fo() === "reverse" ? -1 : 1), uo(r);
+  }, Eo = () => {
+    const l = E.current[co];
+    let r = 0;
+    const s = Array.from(G.current.children);
+    for (let a = 0; a < s.length; a += 1) {
+      const h = s[a];
+      if (r + h[co] > l) {
+        a === 0 && (r = l);
+        break;
+      }
+      r += h[co];
+    }
+    return r;
+  }, qo = () => {
+    wo(-1 * Eo());
+  }, Go = () => {
+    wo(Eo());
+  }, Jo = u.useCallback((l) => {
+    Ko({
+      overflow: null,
+      scrollbarWidth: l
+    });
+  }, []), Qo = () => {
+    const l = {};
+    l.scrollbarSizeListener = M ? /* @__PURE__ */ v.jsx(We, {
+      onChange: Jo,
+      className: O(W.scrollableX, W.hideScrollbar)
+    }) : null;
+    const r = V.start || V.end, s = M && (I === "auto" && r || I === !0);
+    return l.scrollButtonStart = s ? /* @__PURE__ */ v.jsx(A, f({
+      slots: {
+        StartScrollButtonIcon: H.StartScrollButtonIcon
+      },
+      slotProps: {
+        startScrollButtonIcon: Vo
+      },
+      orientation: x,
+      direction: d ? "right" : "left",
+      onClick: qo,
+      disabled: !V.start
+    }, j, {
+      className: O(W.scrollButtons, j.className)
+    })) : null, l.scrollButtonEnd = s ? /* @__PURE__ */ v.jsx(A, f({
+      slots: {
+        EndScrollButtonIcon: H.EndScrollButtonIcon
+      },
+      slotProps: {
+        endScrollButtonIcon: Xo
+      },
+      orientation: x,
+      direction: d ? "left" : "right",
+      onClick: Go,
+      disabled: !V.end
+    }, j, {
+      className: O(W.scrollButtons, j.className)
+    })) : null, l;
+  }, Io = bo((l) => {
+    const {
+      tabsMeta: r,
+      tabMeta: s
+    } = Co();
+    if (!(!s || !r)) {
+      if (s[Z] < r[Z]) {
+        const a = r[K] + (s[Z] - r[Z]);
+        uo(a, {
+          animation: l
+        });
+      } else if (s[oo] > r[oo]) {
+        const a = r[K] + (s[oo] - r[oo]);
+        uo(a, {
+          animation: l
+        });
+      }
+    }
+  }), k = bo(() => {
+    if (M && I !== !1) {
+      const {
+        scrollTop: l,
+        scrollHeight: r,
+        clientHeight: s,
+        scrollWidth: a,
+        clientWidth: h
+      } = E.current;
+      let B, X;
+      if (T)
+        B = l > 1, X = l < r - s - 1;
+      else {
+        const lo = Mo(E.current, i.direction);
+        B = d ? lo < a - h - 1 : lo > 1, X = d ? lo > 1 : lo < a - h - 1;
+      }
+      (B !== V.start || X !== V.end) && Yo({
+        start: B,
+        end: X
+      });
+    }
+  });
+  u.useEffect(() => {
+    const l = mo(() => {
+      E.current && (J(), k());
+    }), r = ko(E.current);
+    r.addEventListener("resize", l);
+    let s;
+    return typeof ResizeObserver < "u" && (s = new ResizeObserver(l), Array.from(G.current.children).forEach((a) => {
+      s.observe(a);
+    })), () => {
+      l.clear(), r.removeEventListener("resize", l), s && s.disconnect();
+    };
+  }, [J, k]);
+  const po = u.useMemo(() => mo(() => {
+    k();
+  }), [k]);
+  u.useEffect(() => () => {
+    po.clear();
+  }, [po]), u.useEffect(() => {
+    Uo(!0);
+  }, []), u.useEffect(() => {
+    J(), k();
+  }), u.useEffect(() => {
+    Io(Wo !== $);
+  }, [Io, $]), u.useImperativeHandle(p, () => ({
+    updateIndicator: J,
+    updateScrollButtons: k
+  }), [J, k]);
+  const No = /* @__PURE__ */ v.jsx(Pe, f({}, _, {
+    className: O(W.indicator, _.className),
+    ownerState: z,
+    style: f({}, $, _.style)
+  }));
+  let to = 0;
+  const Zo = u.Children.map(R, (l) => {
+    if (!/* @__PURE__ */ u.isValidElement(l))
+      return null;
+    process.env.NODE_ENV !== "production" && te.isFragment(l) && console.error(["MUI: The Tabs component doesn't accept a Fragment as a child.", "Consider providing an array instead."].join(`
+`));
+    const r = l.props.value === void 0 ? to : l.props.value;
+    eo.set(r, to);
+    const s = r === P;
+    return to += 1, /* @__PURE__ */ u.cloneElement(l, f({
+      fullWidth: N === "fullWidth",
+      indicator: s && !go && No,
+      selected: s,
+      selectionFollowsFocus: io,
+      onChange: w,
+      textColor: Q,
+      value: r
+    }, to === 1 && P === !1 && !l.props.tabIndex ? {
+      tabIndex: 0
+    } : {}));
+  }), oe = (l) => {
+    const r = G.current, s = ie(r).activeElement;
+    if (s.getAttribute("role") !== "tab")
+      return;
+    let h = x === "horizontal" ? "ArrowLeft" : "ArrowUp", B = x === "horizontal" ? "ArrowRight" : "ArrowDown";
+    switch (x === "horizontal" && d && (h = "ArrowRight", B = "ArrowLeft"), l.key) {
+      case h:
+        l.preventDefault(), ro(r, s, Po);
+        break;
+      case B:
+        l.preventDefault(), ro(r, s, Ro);
+        break;
+      case "Home":
+        l.preventDefault(), ro(r, null, Ro);
+        break;
+      case "End":
+        l.preventDefault(), ro(r, null, Po);
+        break;
+    }
+  }, fo = Qo();
+  return /* @__PURE__ */ v.jsxs(Ne, f({
+    className: O(W.root, C),
+    ownerState: z,
+    ref: n,
+    as: g
+  }, _o, {
+    children: [fo.scrollButtonStart, fo.scrollbarSizeListener, /* @__PURE__ */ v.jsxs(Me, {
+      className: W.scroller,
+      ownerState: z,
+      style: {
+        overflow: Bo.overflow,
+        [T ? `margin${d ? "Left" : "Right"}` : "marginBottom"]: ao ? void 0 : -Bo.scrollbarWidth
+      },
+      ref: E,
+      onScroll: po,
+      children: [/* @__PURE__ */ v.jsx(Re, {
+        "aria-label": m,
+        "aria-labelledby": b,
+        "aria-orientation": x === "vertical" ? "vertical" : null,
+        className: W.flexContainer,
+        ownerState: z,
+        onKeyDown: oe,
+        ref: G,
+        role: "tablist",
+        children: Zo
+      }), go && No]
+    }), fo.scrollButtonEnd]
+  }));
+});
+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 "yarn 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: re,
+  /**
+   * 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`](/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 Ke = Ho;
+export {
+  Ke as T,
+  Ye as a,
+  ho as t
+};