fansunited-frontend-components 0.0.31-RC5 → 0.0.31-RC7

package/chunks/Tabs-leN3Fb8D.js

@@ -0,0 +1,1079 @@
+import { n as Q, o as G, _ as p, C as w, p as q, q as H, r as K, v as Z, L as ee, w as oe, x as te, y as ne, z as ae, A as se, D as ie, E as re, F as N, G as D, H as E, S as le, I as U, R as ce, J as j, K as B, M as de, N as e, O, Q as J, U as ue, V as pe, X as be, Y as fe, Z as A } from "./Portal-DegkUXpU.js";
+import * as l from "react";
+import { jsx as C } from "react/jsx-runtime";
+function ve(o) {
+  const {
+    value: t,
+    defaultValue: a,
+    onChange: n,
+    orientation: s = "horizontal",
+    direction: r = "ltr",
+    selectionFollowsFocus: i = !1
+  } = o, [d, u] = Q({
+    controlled: t,
+    default: a,
+    name: "Tabs",
+    state: "value"
+  }), c = l.useCallback((g, y) => {
+    u(y), n == null || n(g, y);
+  }, [n, u]), {
+    subitems: f,
+    contextValue: b
+  } = G(), v = l.useRef(() => {
+  }), m = l.useCallback((g) => {
+    var y;
+    return (y = f.get(g)) == null ? void 0 : y.id;
+  }, [f]), h = l.useCallback((g) => v.current(g), []), T = l.useCallback((g) => {
+    v.current = g;
+  }, []);
+  return {
+    contextValue: p({
+      direction: r,
+      getTabId: h,
+      getTabPanelId: m,
+      onSelected: c,
+      orientation: s,
+      registerTabIdLookup: T,
+      selectionFollowsFocus: i,
+      value: d
+    }, b)
+  };
+}
+const Y = /* @__PURE__ */ l.createContext(null);
+process.env.NODE_ENV !== "production" && (Y.displayName = "TabsContext");
+function S() {
+  const o = l.useContext(Y);
+  if (o == null)
+    throw new Error("No TabsContext provided");
+  return o;
+}
+function ge(o) {
+  const {
+    value: t,
+    children: a
+  } = o, {
+    direction: n,
+    getItemIndex: s,
+    onSelected: r,
+    orientation: i,
+    registerItem: d,
+    registerTabIdLookup: u,
+    selectionFollowsFocus: c,
+    totalSubitemCount: f,
+    value: b,
+    getTabId: v,
+    getTabPanelId: m
+  } = t, h = l.useMemo(() => ({
+    getItemIndex: s,
+    registerItem: d,
+    totalSubitemCount: f
+  }), [d, s, f]), T = l.useMemo(() => ({
+    direction: n,
+    getTabId: v,
+    getTabPanelId: m,
+    onSelected: r,
+    orientation: i,
+    registerTabIdLookup: u,
+    selectionFollowsFocus: c,
+    value: b
+  }), [n, v, m, r, i, u, c, b]);
+  return /* @__PURE__ */ C(w.Provider, {
+    value: h,
+    children: /* @__PURE__ */ C(Y.Provider, {
+      value: T,
+      children: a
+    })
+  });
+}
+function me(o) {
+  return o.size;
+}
+function Te(o) {
+  const {
+    value: t,
+    id: a,
+    rootRef: n
+  } = o, s = S();
+  if (s === null)
+    throw new Error("No TabContext provided");
+  const {
+    value: r,
+    getTabId: i
+  } = s, d = q(a), u = l.useRef(null), c = H(u, n), f = l.useMemo(() => ({
+    id: d,
+    ref: u
+  }), [d]), {
+    id: b
+  } = K(t ?? me, f), v = b !== r, m = b !== void 0 ? i(b) : void 0;
+  return {
+    hidden: v,
+    getRootProps: (T = {}) => p({
+      "aria-labelledby": m ?? void 0,
+      hidden: v,
+      id: d ?? void 0
+    }, T, {
+      ref: c
+    }),
+    rootRef: c
+  };
+}
+const X = {
+  valueChange: "valueChange"
+};
+function he(o, t) {
+  if (t.type === X.valueChange)
+    return p({}, o, {
+      highlightedValue: t.value
+    });
+  const a = Z(o, t), {
+    context: {
+      selectionFollowsFocus: n
+    }
+  } = t;
+  if (t.type === ee.itemsChange) {
+    if (a.selectedValues.length > 0)
+      return p({}, a, {
+        highlightedValue: a.selectedValues[0]
+      });
+    oe(null, "reset", t.context);
+  }
+  return n && a.highlightedValue != null ? p({}, a, {
+    selectedValues: [a.highlightedValue]
+  }) : a;
+}
+function ye(o) {
+  var t;
+  const {
+    rootRef: a
+  } = o, {
+    direction: n = "ltr",
+    onSelected: s,
+    orientation: r = "horizontal",
+    value: i,
+    registerTabIdLookup: d,
+    selectionFollowsFocus: u
+  } = S(), {
+    subitems: c,
+    contextValue: f
+  } = G(), b = l.useCallback((P) => {
+    var z;
+    return (z = c.get(P)) == null ? void 0 : z.id;
+  }, [c]);
+  d(b);
+  const v = l.useMemo(() => Array.from(c.keys()), [c]), m = l.useCallback((P) => {
+    var z, _;
+    return P == null ? null : (z = (_ = c.get(P)) == null ? void 0 : _.ref.current) != null ? z : null;
+  }, [c]), h = n === "rtl";
+  let T;
+  r === "vertical" ? T = "vertical" : T = h ? "horizontal-rtl" : "horizontal-ltr";
+  const g = l.useCallback((P, z) => {
+    var _;
+    s(P, (_ = z[0]) != null ? _ : null);
+  }, [s]), y = l.useMemo(() => i === void 0 ? {} : i != null ? {
+    selectedValues: [i]
+  } : {
+    selectedValues: []
+  }, [i]), I = l.useCallback((P) => {
+    var z, _;
+    return (z = (_ = c.get(P)) == null ? void 0 : _.disabled) != null ? z : !1;
+  }, [c]), {
+    contextValue: R,
+    dispatch: L,
+    getRootProps: k,
+    state: {
+      highlightedValue: x,
+      selectedValues: V
+    },
+    rootRef: F
+  } = te({
+    controlledProps: y,
+    disabledItemsFocusable: !u,
+    focusManagement: "DOM",
+    getItemDomElement: m,
+    isItemDisabled: I,
+    items: v,
+    rootRef: a,
+    onChange: g,
+    orientation: T,
+    reducerActionContext: l.useMemo(() => ({
+      selectionFollowsFocus: u || !1
+    }), [u]),
+    selectionMode: "single",
+    stateReducer: he
+  });
+  l.useEffect(() => {
+    i !== void 0 && i != null && L({
+      type: X.valueChange,
+      value: i
+    });
+  }, [L, i]);
+  const $ = (P = {}) => p({}, P, k(P), {
+    "aria-orientation": r === "vertical" ? "vertical" : void 0,
+    role: "tablist"
+  });
+  return {
+    contextValue: l.useMemo(() => p({}, f, R), [f, R]),
+    dispatch: L,
+    getRootProps: $,
+    highlightedValue: x,
+    isRtl: h,
+    orientation: r,
+    rootRef: F,
+    selectedValue: (t = V[0]) != null ? t : null
+  };
+}
+function xe(o) {
+  const {
+    value: t,
+    children: a
+  } = o, {
+    dispatch: n,
+    getItemIndex: s,
+    getItemState: r,
+    registerItem: i,
+    totalSubitemCount: d
+  } = t, u = l.useMemo(() => ({
+    dispatch: n,
+    getItemState: r,
+    getItemIndex: s
+  }), [n, s, r]), c = l.useMemo(() => ({
+    getItemIndex: s,
+    registerItem: i,
+    totalSubitemCount: d
+  }), [i, s, d]);
+  return /* @__PURE__ */ C(w.Provider, {
+    value: c,
+    children: /* @__PURE__ */ C(ne.Provider, {
+      value: u,
+      children: a
+    })
+  });
+}
+function Pe(o) {
+  return o.size;
+}
+function Ce(o) {
+  const {
+    value: t,
+    rootRef: a,
+    disabled: n = !1,
+    id: s
+  } = o, r = l.useRef(null), i = q(s), {
+    value: d,
+    selectionFollowsFocus: u,
+    getTabPanelId: c
+  } = S(), f = l.useMemo(() => ({
+    disabled: n,
+    ref: r,
+    id: i
+  }), [n, r, i]), {
+    id: b,
+    index: v,
+    totalItemCount: m
+  } = K(t ?? Pe, f), {
+    getRootProps: h,
+    highlighted: T,
+    selected: g
+  } = ae({
+    item: b
+  }), {
+    getRootProps: y,
+    rootRef: I,
+    active: R,
+    focusVisible: L,
+    setFocusVisible: k
+  } = se({
+    disabled: n,
+    focusableWhenDisabled: !u,
+    type: "button"
+  }), x = H(r, a, I), V = b !== void 0 ? c(b) : void 0;
+  return {
+    getRootProps: ($ = {}) => {
+      const M = ie($), P = re(h, y);
+      return p({}, $, P(M), {
+        role: "tab",
+        "aria-controls": V,
+        "aria-selected": g,
+        id: i,
+        ref: x
+      });
+    },
+    active: R,
+    focusVisible: L,
+    highlighted: T,
+    index: v,
+    rootRef: x,
+    // the `selected` state isn't set on the server (it relies on effects to be calculated),
+    // so we fall back to checking the `value` prop with the selectedValue from the TabsContext
+    selected: g || b === d,
+    setFocusVisible: k,
+    totalTabsCount: m
+  };
+}
+function Re(o) {
+  return D("MuiTab", o);
+}
+const Le = N("MuiTab", ["root", "disabled", "focusVisible", "selected", "horizontal", "vertical", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantOutlined", "variantSoft", "variantSolid"]), Ie = ["action", "children", "value", "disabled", "onChange", "onClick", "onFocus", "component", "orientation", "variant", "color", "disableIndicator", "indicatorPlacement", "indicatorInset", "slots", "slotProps"], ze = (o) => {
+  const {
+    selected: t,
+    disabled: a,
+    focusVisible: n,
+    variant: s,
+    color: r,
+    orientation: i
+  } = o, d = {
+    root: ["root", i, a && "disabled", n && "focusVisible", t && "selected", s && `variant${O(s)}`, r && `color${O(r)}`]
+  };
+  return J(d, Re, {});
+}, Oe = E(le, {
+  name: "JoyTab",
+  slot: "Root",
+  overridesResolver: (o, t) => t.root
+})(({
+  ownerState: o
+}) => [
+  {
+    flex: "initial",
+    justifyContent: o.row ? "center" : "initial",
+    "--unstable_ListItemDecorator-alignItems": "center",
+    "--unstable_offset": "min(calc(-1 * var(--variant-borderWidth, 0px)), -1px)"
+  },
+  !o.disableIndicator && {
+    '&[aria-selected="true"]': {
+      "--Tab-indicatorColor": "currentColor",
+      zIndex: 1
+      // to stay above other tab elements
+    },
+    // using pseudo element for showing active indicator is best for controlling the size and customization.
+    // for example, developers can customize the radius, width or background.
+    // (border and box-shadow are not flexible when it comes to customization).
+    "&::after": {
+      content: '""',
+      display: "block",
+      position: "absolute",
+      margin: "auto",
+      background: "var(--Tab-indicatorColor)",
+      borderRadius: "var(--Tab-indicatorRadius)"
+    }
+  },
+  // the padding is to account for the indicator's thickness to make the text proportional.
+  !o.disableIndicator && o.indicatorPlacement === "bottom" && {
+    paddingBottom: "calc(var(--ListItem-paddingY) - var(--variant-borderWidth, 0px) + var(--Tab-indicatorThickness) - 1px)",
+    "&::after": {
+      height: "var(--Tab-indicatorThickness)",
+      width: "var(--Tab-indicatorSize)",
+      left: o.indicatorInset ? "var(--ListItem-paddingLeft)" : "var(--unstable_offset)",
+      right: o.indicatorInset ? "var(--ListItem-paddingRight)" : "var(--unstable_offset)",
+      bottom: "calc(-1px - var(--unstable_TabList-underlineBottom, 0px))"
+    }
+  },
+  !o.disableIndicator && o.indicatorPlacement === "top" && {
+    paddingTop: "calc(var(--ListItem-paddingY) - var(--variant-borderWidth, 0px) + var(--Tab-indicatorThickness) - 1px)",
+    "&::after": {
+      height: "var(--Tab-indicatorThickness)",
+      width: "var(--Tab-indicatorSize)",
+      left: o.indicatorInset ? "var(--ListItem-paddingLeft)" : "var(--unstable_offset)",
+      right: o.indicatorInset ? "var(--ListItem-paddingRight)" : "var(--unstable_offset)",
+      top: "calc(-1px - var(--unstable_TabList-underlineTop, 0px))"
+    }
+  },
+  !o.disableIndicator && o.indicatorPlacement === "right" && {
+    paddingRight: "calc(var(--ListItem-paddingRight) + var(--Tab-indicatorThickness) - 1px)",
+    "&::after": {
+      height: "var(--Tab-indicatorSize)",
+      width: "var(--Tab-indicatorThickness)",
+      top: o.indicatorInset ? "var(--ListItem-paddingY)" : "var(--unstable_offset)",
+      bottom: o.indicatorInset ? "var(--ListItem-paddingY)" : "var(--unstable_offset)",
+      right: "calc(-1px - var(--unstable_TabList-underlineRight, 0px))"
+    }
+  },
+  !o.disableIndicator && o.indicatorPlacement === "left" && {
+    paddingLeft: "calc(var(--ListItem-paddingLeft) + var(--Tab-indicatorThickness) - 1px)",
+    "&::after": {
+      height: "var(--Tab-indicatorSize)",
+      width: "var(--Tab-indicatorThickness)",
+      top: o.indicatorInset ? "var(--ListItem-paddingY)" : "var(--unstable_offset)",
+      bottom: o.indicatorInset ? "var(--ListItem-paddingY)" : "var(--unstable_offset)",
+      left: "calc(-1px - var(--unstable_TabList-underlineLeft, 0px))"
+    }
+  }
+]), ke = /* @__PURE__ */ l.forwardRef(function(t, a) {
+  const n = U({
+    props: t,
+    name: "JoyTab"
+  }), s = l.useContext(ce), {
+    action: r,
+    children: i,
+    disabled: d = !1,
+    component: u = "button",
+    orientation: c = "horizontal",
+    variant: f = "plain",
+    color: b = "neutral",
+    disableIndicator: v = !1,
+    indicatorPlacement: m = s ? "bottom" : "right",
+    indicatorInset: h = !1,
+    slots: T = {},
+    slotProps: g = {}
+  } = n, y = j(n, Ie), I = l.useRef(), R = H(I, a), {
+    active: L,
+    focusVisible: k,
+    setFocusVisible: x,
+    selected: V,
+    getRootProps: F
+  } = Ce(p({}, n, {
+    rootRef: R
+  }));
+  l.useImperativeHandle(r, () => ({
+    focusVisible: () => {
+      x(!0), I.current.focus();
+    }
+  }), [x]);
+  const $ = p({}, n, {
+    disableIndicator: v,
+    indicatorPlacement: m,
+    indicatorInset: h,
+    orientation: c,
+    row: s,
+    active: L,
+    focusVisible: k,
+    disabled: d,
+    selected: V,
+    variant: f,
+    color: b
+  }), M = ze($), P = p({}, y, {
+    component: u,
+    slots: T,
+    slotProps: g
+  }), [z, _] = B("root", {
+    ref: a,
+    elementType: Oe,
+    getSlotProps: F,
+    externalForwardedProps: P,
+    ownerState: $,
+    className: M.root
+  });
+  return /* @__PURE__ */ C(de.Provider, {
+    value: c,
+    children: /* @__PURE__ */ C(z, p({}, _, {
+      children: i
+    }))
+  });
+});
+process.env.NODE_ENV !== "production" && (ke.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * A ref for imperative actions. It currently only supports `focusVisible()` action.
+   */
+  action: e.oneOfType([e.func, e.shape({
+    current: e.shape({
+      focusVisible: e.func.isRequired
+    })
+  })]),
+  /**
+   * @ignore
+   */
+  children: e.node,
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   * @default 'neutral'
+   */
+  color: e.oneOfType([e.oneOf(["danger", "neutral", "primary", "success", "warning"]), e.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: e.elementType,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: e.bool,
+  /**
+   * If `true`, the pseudo element indicator is hidden.
+   * @default false
+   */
+  disableIndicator: e.bool,
+  /**
+   * If `true`, the indicator stay within the padding based on the `Tabs` orientation.
+   * @default false
+   */
+  indicatorInset: e.bool,
+  /**
+   * The indicator's position when the Tab is selected.
+   * @default row ? 'bottom' : 'right'
+   */
+  indicatorPlacement: e.oneOf(["bottom", "left", "right", "top"]),
+  /**
+   * Callback invoked when new value is being set.
+   */
+  onChange: e.func,
+  /**
+   * @ignore
+   */
+  onClick: e.func,
+  /**
+   * @ignore
+   */
+  onFocus: e.func,
+  /**
+   * The content direction flow.
+   * @default 'horizontal'
+   */
+  orientation: e.oneOf(["horizontal", "vertical"]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: e.shape({
+    root: e.oneOfType([e.func, e.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: e.shape({
+    root: 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]),
+  /**
+   * You can provide your own value. Otherwise, it falls back to the child position index.
+   */
+  value: e.oneOfType([e.number, e.string]),
+  /**
+   * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
+   * @default 'plain'
+   */
+  variant: e.oneOfType([e.oneOf(["outlined", "plain", "soft", "solid"]), e.string])
+});
+const W = /* @__PURE__ */ l.createContext("md");
+process.env.NODE_ENV !== "production" && (W.displayName = "SizeTabsContext");
+function Ve(o) {
+  return D("MuiTabList", o);
+}
+N("MuiTabList", ["root", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantOutlined", "variantSoft", "variantSolid", "sizeSm", "sizeMd", "sizeLg"]);
+const _e = ["component", "children", "variant", "color", "size", "disableUnderline", "underlinePlacement", "tabFlex", "sticky", "slots", "slotProps"], $e = (o) => {
+  const {
+    orientation: t,
+    size: a,
+    variant: n,
+    color: s
+  } = o, r = {
+    root: ["root", t, n && `variant${O(n)}`, s && `color${O(s)}`, a && `size${O(a)}`]
+  };
+  return J(r, Ve, {});
+}, Fe = E(ue, {
+  name: "JoyTabList",
+  slot: "Root",
+  overridesResolver: (o, t) => t.root
+})(({
+  theme: o,
+  ownerState: t
+}) => {
+  var a;
+  const n = (a = o.variants[t.variant]) == null ? void 0 : a[t.color];
+  return p({
+    "--List-gap": "0px",
+    "--ListDivider-gap": "0px",
+    "--ListItem-paddingX": "var(--Tabs-spacing)",
+    "--ListItem-gap": "0.375rem",
+    // the `var(--unknown,)` is a workaround because emotion does not support space toggle.
+    "--unstable_TabList-hasUnderline": t.disableUnderline ? "var(--unknown,)" : "initial"
+  }, pe, {
+    flexGrow: "initial",
+    flexDirection: t.orientation === "vertical" ? "column" : "row",
+    borderRadius: "var(--List-radius, 0px)",
+    padding: "var(--List-padding, 0px)",
+    zIndex: 1
+  }, t.sticky && {
+    // sticky in list item can be found in grouped options
+    position: "sticky",
+    top: t.sticky === "top" ? "calc(-1 * var(--Tabs-padding, 0px))" : "initial",
+    bottom: t.sticky === "bottom" ? "calc(-1 * var(--Tabs-padding, 0px))" : "initial",
+    backgroundColor: (n == null ? void 0 : n.backgroundColor) || `var(--TabList-stickyBackground, ${o.vars.palette.background.body})`
+  }, !t.disableUnderline && p({}, t.underlinePlacement === "bottom" && {
+    "--unstable_TabList-underlineBottom": "1px",
+    paddingBottom: 1,
+    boxShadow: `inset 0 -1px ${o.vars.palette.divider}`
+  }, t.underlinePlacement === "top" && {
+    "--unstable_TabList-underlineTop": "1px",
+    paddingTop: 1,
+    boxShadow: `inset 0 1px ${o.vars.palette.divider}`
+  }, t.underlinePlacement === "right" && {
+    "--unstable_TabList-underlineRight": "1px",
+    paddingRight: 1,
+    boxShadow: `inset -1px 0 ${o.vars.palette.divider}`
+  }, t.underlinePlacement === "left" && {
+    "--unstable_TabList-underlineLeft": "1px",
+    paddingLeft: 1,
+    boxShadow: `inset 1px 0 ${o.vars.palette.divider}`
+  }), t.tabFlex && {
+    [`& .${Le.root}`]: {
+      flex: t.tabFlex
+    }
+  });
+}), Me = /* @__PURE__ */ l.forwardRef(function(t, a) {
+  const n = U({
+    props: t,
+    name: "JoyTabList"
+  }), s = l.useContext(W), {
+    isRtl: r,
+    orientation: i,
+    getRootProps: d,
+    contextValue: u
+  } = ye({
+    rootRef: a
+  }), {
+    component: c = "div",
+    children: f,
+    variant: b = "plain",
+    color: v = "neutral",
+    size: m,
+    disableUnderline: h = !1,
+    underlinePlacement: T = i === "horizontal" ? "bottom" : "right",
+    tabFlex: g,
+    sticky: y,
+    slots: I = {},
+    slotProps: R = {}
+  } = n, L = j(n, _e), x = p({}, n, {
+    isRtl: r,
+    orientation: i,
+    variant: b,
+    color: v,
+    size: m ?? s,
+    sticky: y,
+    tabFlex: g,
+    nesting: !1,
+    disableUnderline: h,
+    underlinePlacement: T
+  }), V = $e(x), F = p({}, L, {
+    component: c,
+    slots: I,
+    slotProps: R
+  }), [$, M] = B("root", {
+    ref: a,
+    elementType: Fe,
+    getSlotProps: d,
+    externalForwardedProps: F,
+    ownerState: x,
+    className: V.root
+  });
+  return (
+    // @ts-ignore conflicted ref types
+    /* @__PURE__ */ C($, p({}, M, {
+      children: /* @__PURE__ */ C(xe, {
+        value: u,
+        children: /* @__PURE__ */ C(be, {
+          row: i === "horizontal",
+          nested: !0,
+          children: f
+        })
+      })
+    }))
+  );
+});
+process.env.NODE_ENV !== "production" && (Me.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Used to render icon or text elements inside the TabList if `src` is not set.
+   * This can be an element, or just a string.
+   */
+  children: e.node,
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   * @default 'neutral'
+   */
+  color: e.oneOfType([e.oneOf(["danger", "neutral", "primary", "success", "warning"]), e.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: e.elementType,
+  /**
+   * If `true`, the TabList's underline will disappear.
+   * @default false
+   */
+  disableUnderline: e.bool,
+  /**
+   * The size of the component.
+   */
+  size: e.oneOfType([e.oneOf(["sm", "md", "lg"]), e.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: e.shape({
+    root: e.oneOfType([e.func, e.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: e.shape({
+    root: e.elementType
+  }),
+  /**
+   * If provided, the TabList will have postion `sticky`.
+   */
+  sticky: e.oneOf(["bottom", "top"]),
+  /**
+   * 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]),
+  /**
+   * The flex value of the Tab.
+   * @example tabFlex={1} will set flex: '1 1 auto' on each tab (stretch the tab to equally fill the available space).
+   */
+  tabFlex: e.oneOfType([e.number, e.string]),
+  /**
+   * The placement of the TabList's underline.
+   * @default orientation === 'horizontal' ? 'bottom' : 'right'
+   */
+  underlinePlacement: e.oneOf(["bottom", "left", "right", "top"]),
+  /**
+   * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
+   * @default 'plain'
+   */
+  variant: e.oneOfType([e.oneOf(["outlined", "plain", "soft", "solid"]), e.string])
+});
+function Ne(o) {
+  return D("MuiTabPanel", o);
+}
+N("MuiTabPanel", ["root", "hidden", "sizeSm", "sizeMd", "sizeLg", "horizontal", "vertical", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantOutlined", "variantSoft", "variantSolid"]);
+const De = ["children", "value", "component", "color", "variant", "size", "slots", "slotProps", "keepMounted"], Ee = (o) => {
+  const {
+    hidden: t,
+    size: a,
+    variant: n,
+    color: s,
+    orientation: r
+  } = o, i = {
+    root: ["root", t && "hidden", a && `size${O(a)}`, r, n && `variant${O(n)}`, s && `color${O(s)}`, a && `size${O(a)}`]
+  };
+  return J(i, Ne, {});
+}, Ue = E("div", {
+  name: "JoyTabPanel",
+  slot: "Root",
+  overridesResolver: (o, t) => t.root
+})(({
+  theme: o,
+  ownerState: t
+}) => {
+  var a;
+  return p({
+    display: t.hidden ? "none" : "block",
+    padding: "var(--Tabs-spacing)",
+    flexGrow: 1,
+    fontFamily: o.vars.fontFamily.body
+  }, o.typography[`body-${t.size}`], (a = o.variants[t.variant]) == null ? void 0 : a[t.color]);
+}), je = /* @__PURE__ */ l.forwardRef(function(t, a) {
+  const n = U({
+    props: t,
+    name: "JoyTabPanel"
+  }), {
+    orientation: s
+  } = S() || {
+    orientation: "horizontal"
+  }, r = l.useContext(W), {
+    children: i,
+    value: d = 0,
+    component: u,
+    color: c = "neutral",
+    variant: f = "plain",
+    size: b,
+    slots: v = {},
+    slotProps: m = {},
+    keepMounted: h = !1
+  } = n, T = j(n, De), {
+    hidden: g,
+    getRootProps: y
+  } = Te(p({}, n, {
+    value: d
+  })), R = p({}, n, {
+    orientation: s,
+    hidden: g,
+    size: b ?? r,
+    color: c,
+    variant: f
+  }), L = Ee(R), k = p({}, T, {
+    component: u,
+    slots: v,
+    slotProps: m
+  }), [x, V] = B("root", {
+    ref: a,
+    elementType: Ue,
+    getSlotProps: y,
+    externalForwardedProps: k,
+    additionalProps: {
+      role: "tabpanel",
+      ref: a,
+      as: u
+    },
+    ownerState: R,
+    className: L.root
+  });
+  return h ? /* @__PURE__ */ C(x, p({}, V, {
+    children: i
+  })) : /* @__PURE__ */ C(x, p({}, V, {
+    children: !g && i
+  }));
+});
+process.env.NODE_ENV !== "production" && (je.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: e.node,
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   * @default 'neutral'
+   */
+  color: e.oneOfType([e.oneOf(["danger", "neutral", "primary", "success", "warning"]), e.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: e.elementType,
+  /**
+   * Always keep the children in the DOM.
+   * @default false
+   */
+  keepMounted: e.bool,
+  /**
+   * The size of the component.
+   */
+  size: e.oneOfType([e.oneOf(["sm", "md", "lg"]), e.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: e.shape({
+    root: e.oneOfType([e.func, e.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: e.shape({
+    root: 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]),
+  /**
+   * The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected.
+   * @default 0
+   */
+  value: e.oneOfType([e.number, e.string]),
+  /**
+   * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
+   * @default 'plain'
+   */
+  variant: e.oneOfType([e.oneOf(["outlined", "plain", "soft", "solid"]), e.string])
+});
+function Be(o) {
+  return D("MuiTabs", o);
+}
+N("MuiTabs", ["root", "horizontal", "vertical", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantOutlined", "variantSoft", "variantSolid", "sizeSm", "sizeMd", "sizeLg"]);
+const Je = ["children", "value", "defaultValue", "orientation", "direction", "component", "onChange", "selectionFollowsFocus", "variant", "color", "size", "slots", "slotProps"], Se = (o) => {
+  const {
+    orientation: t,
+    variant: a,
+    color: n,
+    size: s
+  } = o, r = {
+    root: ["root", t, a && `variant${O(a)}`, n && `color${O(n)}`, s && `size${O(s)}`]
+  };
+  return J(r, Be, {});
+}, We = E("div", {
+  name: "JoyTabs",
+  slot: "Root",
+  overridesResolver: (o, t) => t.root
+})(({
+  ownerState: o,
+  theme: t
+}) => {
+  var a, n;
+  const s = (a = t.variants[o.variant]) == null ? void 0 : a[o.color], {
+    bgcolor: r,
+    backgroundColor: i,
+    background: d,
+    p: u,
+    padding: c
+  } = fe({
+    theme: t,
+    ownerState: o
+  }, ["bgcolor", "backgroundColor", "background", "p", "padding"]), f = A(t, `palette.${r}`) || r || A(t, `palette.${i}`) || i || d || (s == null ? void 0 : s.backgroundColor) || (s == null ? void 0 : s.background) || t.vars.palette.background.surface;
+  return p({}, o.size === "sm" && {
+    "--Tabs-spacing": "0.75rem"
+  }, o.size === "md" && {
+    "--Tabs-spacing": "1rem"
+  }, o.size === "lg" && {
+    "--Tabs-spacing": "1.25rem"
+  }, {
+    "--Tab-indicatorThickness": "2px",
+    "--Icon-color": o.color !== "neutral" || o.variant === "solid" ? "currentColor" : t.vars.palette.text.icon,
+    "--TabList-stickyBackground": f === "transparent" ? "initial" : f,
+    // for sticky TabList
+    display: "flex",
+    flexDirection: "column"
+  }, o.orientation === "vertical" && {
+    flexDirection: "row"
+  }, {
+    backgroundColor: t.vars.palette.background.surface,
+    position: "relative"
+  }, t.typography[`body-${o.size}`], (n = t.variants[o.variant]) == null ? void 0 : n[o.color], u !== void 0 && {
+    "--Tabs-padding": u
+  }, c !== void 0 && {
+    "--Tabs-padding": c
+  });
+}), He = /* @__PURE__ */ l.forwardRef(function(t, a) {
+  const n = U({
+    props: t,
+    name: "JoyTabs"
+  }), {
+    children: s,
+    value: r,
+    defaultValue: i,
+    orientation: d = "horizontal",
+    direction: u = "ltr",
+    component: c,
+    variant: f = "plain",
+    color: b = "neutral",
+    size: v = "md",
+    slots: m = {},
+    slotProps: h = {}
+  } = n, T = j(n, Je), g = i || (r === void 0 ? 0 : void 0), {
+    contextValue: y
+  } = ve(p({}, n, {
+    orientation: d,
+    defaultValue: g
+  })), I = p({}, n, {
+    orientation: d,
+    direction: u,
+    variant: f,
+    color: b,
+    size: v
+  }), R = Se(I), L = p({}, T, {
+    component: c,
+    slots: m,
+    slotProps: h
+  }), [k, x] = B("root", {
+    ref: a,
+    elementType: We,
+    externalForwardedProps: L,
+    additionalProps: {
+      ref: a,
+      as: c
+    },
+    ownerState: I,
+    className: R.root
+  });
+  return (
+    // @ts-ignore `defaultValue` between HTMLDiv and TabsProps is conflicted.
+    /* @__PURE__ */ C(k, p({}, x, {
+      children: /* @__PURE__ */ C(ge, {
+        value: y,
+        children: /* @__PURE__ */ C(W.Provider, {
+          value: v,
+          children: s
+        })
+      })
+    }))
+  );
+});
+process.env.NODE_ENV !== "production" && (He.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: e.node,
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   * @default 'neutral'
+   */
+  color: e.oneOfType([e.oneOf(["danger", "neutral", "primary", "success", "warning"]), e.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: e.elementType,
+  /**
+   * The default value. Use when the component is not controlled.
+   */
+  defaultValue: e.oneOfType([e.number, e.string]),
+  /**
+   * The direction of the text.
+   * @default 'ltr'
+   */
+  direction: e.oneOf(["ltr", "rtl"]),
+  /**
+   * Callback invoked when new value is being set.
+   */
+  onChange: e.func,
+  /**
+   * The component orientation (layout flow direction).
+   * @default 'horizontal'
+   */
+  orientation: e.oneOf(["horizontal", "vertical"]),
+  /**
+   * If `true` the selected tab changes on focus. Otherwise it only
+   * changes on activation.
+   */
+  selectionFollowsFocus: e.bool,
+  /**
+   * The size of the component.
+   * @default 'md'
+   */
+  size: e.oneOfType([e.oneOf(["sm", "md", "lg"]), e.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: e.shape({
+    root: e.oneOfType([e.func, e.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: e.shape({
+    root: 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]),
+  /**
+   * The value of the currently selected `Tab`.
+   * If you don't want any selected `Tab`, you can set this prop to `null`.
+   */
+  value: e.oneOfType([e.number, e.string]),
+  /**
+   * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
+   * @default 'plain'
+   */
+  variant: e.oneOfType([e.oneOf(["outlined", "plain", "soft", "solid"]), e.string])
+});
+export {
+  He as T,
+  Me as a,
+  ke as b,
+  je as c,
+  Le as t
+};