fansunited-widgets-cdn 0.0.86-RC4 → 0.0.86-RC6

package/chunks/Tabs-leN3Fb8D--YMyy3EM.js

@@ -0,0 +1,783 @@
+import { a4 as M, v as $, x as _, P as u, K as j, U as D, a7 as K, as as Q, a3 as E, aa as Z, af as q, aS as Y, ad as L, a1 as N, aw as ee, aP as U, aT as O, aU as te, ax as oe, ay as ae, aV as ie, y as X, aW as A, aX as ne, ai as re, aK as le, aY as se, aB as de, ap as W, aZ as ce, a_ as ue, a$ as ve } from "./Portal-DegkUXpU-ByGP9zS1.js";
+import { r as l, j as P } from "./main-Bh6iw92_.js";
+function be(e) {
+  const {
+    value: t,
+    defaultValue: o,
+    onChange: a,
+    orientation: i = "horizontal",
+    direction: n = "ltr",
+    selectionFollowsFocus: r = !1
+  } = e, [c, d] = q({
+    controlled: t,
+    default: o,
+    name: "Tabs",
+    state: "value"
+  }), s = l.useCallback((g, f) => {
+    d(f), a == null || a(g, f);
+  }, [a, d]), {
+    subitems: b,
+    contextValue: v
+  } = Y(), p = l.useRef(() => {
+  }), m = l.useCallback((g) => {
+    var f;
+    return (f = b.get(g)) == null ? void 0 : f.id;
+  }, [b]), h = l.useCallback((g) => p.current(g), []), x = l.useCallback((g) => {
+    p.current = g;
+  }, []);
+  return {
+    contextValue: u({
+      direction: n,
+      getTabId: h,
+      getTabPanelId: m,
+      onSelected: s,
+      orientation: i,
+      registerTabIdLookup: x,
+      selectionFollowsFocus: r,
+      value: c
+    }, v)
+  };
+}
+const G = /* @__PURE__ */ l.createContext(null);
+function B() {
+  const e = l.useContext(G);
+  if (e == null)
+    throw new Error("No TabsContext provided");
+  return e;
+}
+function pe(e) {
+  const {
+    value: t,
+    children: o
+  } = e, {
+    direction: a,
+    getItemIndex: i,
+    onSelected: n,
+    orientation: r,
+    registerItem: c,
+    registerTabIdLookup: d,
+    selectionFollowsFocus: s,
+    totalSubitemCount: b,
+    value: v,
+    getTabId: p,
+    getTabPanelId: m
+  } = t, h = l.useMemo(() => ({
+    getItemIndex: i,
+    registerItem: c,
+    totalSubitemCount: b
+  }), [c, i, b]), x = l.useMemo(() => ({
+    direction: a,
+    getTabId: p,
+    getTabPanelId: m,
+    onSelected: n,
+    orientation: r,
+    registerTabIdLookup: d,
+    selectionFollowsFocus: s,
+    value: v
+  }), [a, p, m, n, r, d, s, v]);
+  return /* @__PURE__ */ P.jsx(O.Provider, {
+    value: h,
+    children: /* @__PURE__ */ P.jsx(G.Provider, {
+      value: x,
+      children: o
+    })
+  });
+}
+function ge(e) {
+  return e.size;
+}
+function fe(e) {
+  const {
+    value: t,
+    id: o,
+    rootRef: a
+  } = e, i = B();
+  if (i === null)
+    throw new Error("No TabContext provided");
+  const {
+    value: n,
+    getTabId: r
+  } = i, c = X(o), d = l.useRef(null), s = E(d, a), b = l.useMemo(() => ({
+    id: c,
+    ref: d
+  }), [c]), {
+    id: v
+  } = A(t ?? ge, b), p = v !== n, m = v !== void 0 ? r(v) : void 0;
+  return {
+    hidden: p,
+    getRootProps: (h = {}) => u({
+      "aria-labelledby": m ?? void 0,
+      hidden: p,
+      id: c ?? void 0
+    }, h, {
+      ref: s
+    }),
+    rootRef: s
+  };
+}
+const H = {
+  valueChange: "valueChange"
+};
+function me(e, t) {
+  if (t.type === H.valueChange)
+    return u({}, e, {
+      highlightedValue: t.value
+    });
+  const o = ce(e, t), {
+    context: {
+      selectionFollowsFocus: a
+    }
+  } = t;
+  if (t.type === ue.itemsChange) {
+    if (o.selectedValues.length > 0)
+      return u({}, o, {
+        highlightedValue: o.selectedValues[0]
+      });
+    ve(null, "reset", t.context);
+  }
+  return a && o.highlightedValue != null ? u({}, o, {
+    selectedValues: [o.highlightedValue]
+  }) : o;
+}
+function he(e) {
+  var t;
+  const {
+    rootRef: o
+  } = e, {
+    direction: a = "ltr",
+    onSelected: i,
+    orientation: n = "horizontal",
+    value: r,
+    registerTabIdLookup: c,
+    selectionFollowsFocus: d
+  } = B(), {
+    subitems: s,
+    contextValue: b
+  } = Y(), v = l.useCallback((I) => {
+    var R;
+    return (R = s.get(I)) == null ? void 0 : R.id;
+  }, [s]);
+  c(v);
+  const p = l.useMemo(() => Array.from(s.keys()), [s]), m = l.useCallback((I) => {
+    var R, C;
+    return I == null ? null : (R = (C = s.get(I)) == null ? void 0 : C.ref.current) != null ? R : null;
+  }, [s]), h = a === "rtl";
+  let x;
+  n === "vertical" ? x = "vertical" : x = h ? "horizontal-rtl" : "horizontal-ltr";
+  const g = l.useCallback((I, R) => {
+    var C;
+    i(I, (C = R[0]) != null ? C : null);
+  }, [i]), f = l.useMemo(() => r === void 0 ? {} : r != null ? {
+    selectedValues: [r]
+  } : {
+    selectedValues: []
+  }, [r]), z = l.useCallback((I) => {
+    var R, C;
+    return (R = (C = s.get(I)) == null ? void 0 : C.disabled) != null ? R : !1;
+  }, [s]), {
+    contextValue: y,
+    dispatch: T,
+    getRootProps: k,
+    state: {
+      highlightedValue: w,
+      selectedValues: V
+    },
+    rootRef: S
+  } = te({
+    controlledProps: f,
+    disabledItemsFocusable: !d,
+    focusManagement: "DOM",
+    getItemDomElement: m,
+    isItemDisabled: z,
+    items: p,
+    rootRef: o,
+    onChange: g,
+    orientation: x,
+    reducerActionContext: l.useMemo(() => ({
+      selectionFollowsFocus: d || !1
+    }), [d]),
+    selectionMode: "single",
+    stateReducer: me
+  });
+  l.useEffect(() => {
+    r !== void 0 && r != null && T({
+      type: H.valueChange,
+      value: r
+    });
+  }, [T, r]);
+  const F = (I = {}) => u({}, I, k(I), {
+    "aria-orientation": n === "vertical" ? "vertical" : void 0,
+    role: "tablist"
+  });
+  return {
+    contextValue: l.useMemo(() => u({}, b, y), [b, y]),
+    dispatch: T,
+    getRootProps: F,
+    highlightedValue: w,
+    isRtl: h,
+    orientation: n,
+    rootRef: S,
+    selectedValue: (t = V[0]) != null ? t : null
+  };
+}
+function xe(e) {
+  const {
+    value: t,
+    children: o
+  } = e, {
+    dispatch: a,
+    getItemIndex: i,
+    getItemState: n,
+    registerItem: r,
+    totalSubitemCount: c
+  } = t, d = l.useMemo(() => ({
+    dispatch: a,
+    getItemState: n,
+    getItemIndex: i
+  }), [a, i, n]), s = l.useMemo(() => ({
+    getItemIndex: i,
+    registerItem: r,
+    totalSubitemCount: c
+  }), [r, i, c]);
+  return /* @__PURE__ */ P.jsx(O.Provider, {
+    value: s,
+    children: /* @__PURE__ */ P.jsx(ie.Provider, {
+      value: d,
+      children: o
+    })
+  });
+}
+function Te(e) {
+  return e.size;
+}
+function Ie(e) {
+  const {
+    value: t,
+    rootRef: o,
+    disabled: a = !1,
+    id: i
+  } = e, n = l.useRef(null), r = X(i), {
+    value: c,
+    selectionFollowsFocus: d,
+    getTabPanelId: s
+  } = B(), b = l.useMemo(() => ({
+    disabled: a,
+    ref: n,
+    id: r
+  }), [a, n, r]), {
+    id: v,
+    index: p,
+    totalItemCount: m
+  } = A(t ?? Te, b), {
+    getRootProps: h,
+    highlighted: x,
+    selected: g
+  } = ne({
+    item: v
+  }), {
+    getRootProps: f,
+    rootRef: z,
+    active: y,
+    focusVisible: T,
+    setFocusVisible: k
+  } = re({
+    disabled: a,
+    focusableWhenDisabled: !d,
+    type: "button"
+  }), w = E(n, o, z), V = v !== void 0 ? s(v) : void 0;
+  return {
+    getRootProps: (S = {}) => {
+      const F = le(S), I = se(h, f);
+      return u({}, S, I(F), {
+        role: "tab",
+        "aria-controls": V,
+        "aria-selected": g,
+        id: r,
+        ref: w
+      });
+    },
+    active: y,
+    focusVisible: T,
+    highlighted: x,
+    index: p,
+    rootRef: w,
+    // 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 || v === c,
+    setFocusVisible: k,
+    totalTabsCount: m
+  };
+}
+function Pe(e) {
+  return W("MuiTab", e);
+}
+const ke = M("MuiTab", ["root", "disabled", "focusVisible", "selected", "horizontal", "vertical", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantOutlined", "variantSoft", "variantSolid"]), ye = ["action", "children", "value", "disabled", "onChange", "onClick", "onFocus", "component", "orientation", "variant", "color", "disableIndicator", "indicatorPlacement", "indicatorInset", "slots", "slotProps"], Re = (e) => {
+  const {
+    selected: t,
+    disabled: o,
+    focusVisible: a,
+    variant: i,
+    color: n,
+    orientation: r
+  } = e, c = {
+    root: ["root", r, o && "disabled", a && "focusVisible", t && "selected", i && `variant${L(i)}`, n && `color${L(n)}`]
+  };
+  return N(c, Pe, {});
+}, Le = D(de, {
+  name: "JoyTab",
+  slot: "Root",
+  overridesResolver: (e, t) => t.root
+})(({
+  ownerState: e
+}) => [
+  {
+    flex: "initial",
+    justifyContent: e.row ? "center" : "initial",
+    "--unstable_ListItemDecorator-alignItems": "center",
+    "--unstable_offset": "min(calc(-1 * var(--variant-borderWidth, 0px)), -1px)"
+  },
+  !e.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.
+  !e.disableIndicator && e.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: e.indicatorInset ? "var(--ListItem-paddingLeft)" : "var(--unstable_offset)",
+      right: e.indicatorInset ? "var(--ListItem-paddingRight)" : "var(--unstable_offset)",
+      bottom: "calc(-1px - var(--unstable_TabList-underlineBottom, 0px))"
+    }
+  },
+  !e.disableIndicator && e.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: e.indicatorInset ? "var(--ListItem-paddingLeft)" : "var(--unstable_offset)",
+      right: e.indicatorInset ? "var(--ListItem-paddingRight)" : "var(--unstable_offset)",
+      top: "calc(-1px - var(--unstable_TabList-underlineTop, 0px))"
+    }
+  },
+  !e.disableIndicator && e.indicatorPlacement === "right" && {
+    paddingRight: "calc(var(--ListItem-paddingRight) + var(--Tab-indicatorThickness) - 1px)",
+    "&::after": {
+      height: "var(--Tab-indicatorSize)",
+      width: "var(--Tab-indicatorThickness)",
+      top: e.indicatorInset ? "var(--ListItem-paddingY)" : "var(--unstable_offset)",
+      bottom: e.indicatorInset ? "var(--ListItem-paddingY)" : "var(--unstable_offset)",
+      right: "calc(-1px - var(--unstable_TabList-underlineRight, 0px))"
+    }
+  },
+  !e.disableIndicator && e.indicatorPlacement === "left" && {
+    paddingLeft: "calc(var(--ListItem-paddingLeft) + var(--Tab-indicatorThickness) - 1px)",
+    "&::after": {
+      height: "var(--Tab-indicatorSize)",
+      width: "var(--Tab-indicatorThickness)",
+      top: e.indicatorInset ? "var(--ListItem-paddingY)" : "var(--unstable_offset)",
+      bottom: e.indicatorInset ? "var(--ListItem-paddingY)" : "var(--unstable_offset)",
+      left: "calc(-1px - var(--unstable_TabList-underlineLeft, 0px))"
+    }
+  }
+]), Ee = /* @__PURE__ */ l.forwardRef(function(e, t) {
+  const o = $({
+    props: e,
+    name: "JoyTab"
+  }), a = l.useContext(Q), {
+    action: i,
+    children: n,
+    disabled: r = !1,
+    component: c = "button",
+    orientation: d = "horizontal",
+    variant: s = "plain",
+    color: b = "neutral",
+    disableIndicator: v = !1,
+    indicatorPlacement: p = a ? "bottom" : "right",
+    indicatorInset: m = !1,
+    slots: h = {},
+    slotProps: x = {}
+  } = o, g = _(o, ye), f = l.useRef(), z = E(f, t), {
+    active: y,
+    focusVisible: T,
+    setFocusVisible: k,
+    selected: w,
+    getRootProps: V
+  } = Ie(u({}, o, {
+    rootRef: z
+  }));
+  l.useImperativeHandle(i, () => ({
+    focusVisible: () => {
+      k(!0), f.current.focus();
+    }
+  }), [k]);
+  const S = u({}, o, {
+    disableIndicator: v,
+    indicatorPlacement: p,
+    indicatorInset: m,
+    orientation: d,
+    row: a,
+    active: y,
+    focusVisible: T,
+    disabled: r,
+    selected: w,
+    variant: s,
+    color: b
+  }), F = Re(S), I = u({}, g, {
+    component: c,
+    slots: h,
+    slotProps: x
+  }), [R, C] = j("root", {
+    ref: t,
+    elementType: Le,
+    getSlotProps: V,
+    externalForwardedProps: I,
+    ownerState: S,
+    className: F.root
+  });
+  return /* @__PURE__ */ P.jsx(Z.Provider, {
+    value: d,
+    children: /* @__PURE__ */ P.jsx(R, u({}, C, {
+      children: n
+    }))
+  });
+}), J = /* @__PURE__ */ l.createContext("md");
+function ze(e) {
+  return W("MuiTabList", e);
+}
+M("MuiTabList", ["root", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantOutlined", "variantSoft", "variantSolid", "sizeSm", "sizeMd", "sizeLg"]);
+const Ce = ["component", "children", "variant", "color", "size", "disableUnderline", "underlinePlacement", "tabFlex", "sticky", "slots", "slotProps"], Se = (e) => {
+  const {
+    orientation: t,
+    size: o,
+    variant: a,
+    color: i
+  } = e, n = {
+    root: ["root", t, a && `variant${L(a)}`, i && `color${L(i)}`, o && `size${L(o)}`]
+  };
+  return N(n, ze, {});
+}, we = D(oe, {
+  name: "JoyTabList",
+  slot: "Root",
+  overridesResolver: (e, t) => t.root
+})(({
+  theme: e,
+  ownerState: t
+}) => {
+  var o;
+  const a = (o = e.variants[t.variant]) == null ? void 0 : o[t.color];
+  return u({
+    "--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"
+  }, ae, {
+    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: (a == null ? void 0 : a.backgroundColor) || `var(--TabList-stickyBackground, ${e.vars.palette.background.body})`
+  }, !t.disableUnderline && u({}, t.underlinePlacement === "bottom" && {
+    "--unstable_TabList-underlineBottom": "1px",
+    paddingBottom: 1,
+    boxShadow: `inset 0 -1px ${e.vars.palette.divider}`
+  }, t.underlinePlacement === "top" && {
+    "--unstable_TabList-underlineTop": "1px",
+    paddingTop: 1,
+    boxShadow: `inset 0 1px ${e.vars.palette.divider}`
+  }, t.underlinePlacement === "right" && {
+    "--unstable_TabList-underlineRight": "1px",
+    paddingRight: 1,
+    boxShadow: `inset -1px 0 ${e.vars.palette.divider}`
+  }, t.underlinePlacement === "left" && {
+    "--unstable_TabList-underlineLeft": "1px",
+    paddingLeft: 1,
+    boxShadow: `inset 1px 0 ${e.vars.palette.divider}`
+  }), t.tabFlex && {
+    [`& .${ke.root}`]: {
+      flex: t.tabFlex
+    }
+  });
+}), Je = /* @__PURE__ */ l.forwardRef(function(e, t) {
+  const o = $({
+    props: e,
+    name: "JoyTabList"
+  }), a = l.useContext(J), {
+    isRtl: i,
+    orientation: n,
+    getRootProps: r,
+    contextValue: c
+  } = he({
+    rootRef: t
+  }), {
+    component: d = "div",
+    children: s,
+    variant: b = "plain",
+    color: v = "neutral",
+    size: p,
+    disableUnderline: m = !1,
+    underlinePlacement: h = n === "horizontal" ? "bottom" : "right",
+    tabFlex: x,
+    sticky: g,
+    slots: f = {},
+    slotProps: z = {}
+  } = o, y = _(o, Ce), T = u({}, o, {
+    isRtl: i,
+    orientation: n,
+    variant: b,
+    color: v,
+    size: p ?? a,
+    sticky: g,
+    tabFlex: x,
+    nesting: !1,
+    disableUnderline: m,
+    underlinePlacement: h
+  }), k = Se(T), w = u({}, y, {
+    component: d,
+    slots: f,
+    slotProps: z
+  }), [V, S] = j("root", {
+    ref: t,
+    elementType: we,
+    getSlotProps: r,
+    externalForwardedProps: w,
+    ownerState: T,
+    className: k.root
+  });
+  return (
+    // @ts-ignore conflicted ref types
+    /* @__PURE__ */ P.jsx(V, u({}, S, {
+      children: /* @__PURE__ */ P.jsx(xe, {
+        value: c,
+        children: /* @__PURE__ */ P.jsx(K, {
+          row: n === "horizontal",
+          nested: !0,
+          children: s
+        })
+      })
+    }))
+  );
+});
+function Ve(e) {
+  return W("MuiTabPanel", e);
+}
+M("MuiTabPanel", ["root", "hidden", "sizeSm", "sizeMd", "sizeLg", "horizontal", "vertical", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantOutlined", "variantSoft", "variantSolid"]);
+const Fe = ["children", "value", "component", "color", "variant", "size", "slots", "slotProps", "keepMounted"], Me = (e) => {
+  const {
+    hidden: t,
+    size: o,
+    variant: a,
+    color: i,
+    orientation: n
+  } = e, r = {
+    root: ["root", t && "hidden", o && `size${L(o)}`, n, a && `variant${L(a)}`, i && `color${L(i)}`, o && `size${L(o)}`]
+  };
+  return N(r, Ve, {});
+}, $e = D("div", {
+  name: "JoyTabPanel",
+  slot: "Root",
+  overridesResolver: (e, t) => t.root
+})(({
+  theme: e,
+  ownerState: t
+}) => {
+  var o;
+  return u({
+    display: t.hidden ? "none" : "block",
+    padding: "var(--Tabs-spacing)",
+    flexGrow: 1,
+    fontFamily: e.vars.fontFamily.body
+  }, e.typography[`body-${t.size}`], (o = e.variants[t.variant]) == null ? void 0 : o[t.color]);
+}), Ue = /* @__PURE__ */ l.forwardRef(function(e, t) {
+  const o = $({
+    props: e,
+    name: "JoyTabPanel"
+  }), {
+    orientation: a
+  } = B() || {
+    orientation: "horizontal"
+  }, i = l.useContext(J), {
+    children: n,
+    value: r = 0,
+    component: c,
+    color: d = "neutral",
+    variant: s = "plain",
+    size: b,
+    slots: v = {},
+    slotProps: p = {},
+    keepMounted: m = !1
+  } = o, h = _(o, Fe), {
+    hidden: x,
+    getRootProps: g
+  } = fe(u({}, o, {
+    value: r
+  })), f = u({}, o, {
+    orientation: a,
+    hidden: x,
+    size: b ?? i,
+    color: d,
+    variant: s
+  }), z = Me(f), y = u({}, h, {
+    component: c,
+    slots: v,
+    slotProps: p
+  }), [T, k] = j("root", {
+    ref: t,
+    elementType: $e,
+    getSlotProps: g,
+    externalForwardedProps: y,
+    additionalProps: {
+      role: "tabpanel",
+      ref: t,
+      as: c
+    },
+    ownerState: f,
+    className: z.root
+  });
+  return m ? /* @__PURE__ */ P.jsx(T, u({}, k, {
+    children: n
+  })) : /* @__PURE__ */ P.jsx(T, u({}, k, {
+    children: !x && n
+  }));
+});
+function _e(e) {
+  return W("MuiTabs", e);
+}
+M("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"], De = (e) => {
+  const {
+    orientation: t,
+    variant: o,
+    color: a,
+    size: i
+  } = e, n = {
+    root: ["root", t, o && `variant${L(o)}`, a && `color${L(a)}`, i && `size${L(i)}`]
+  };
+  return N(n, _e, {});
+}, Ne = D("div", {
+  name: "JoyTabs",
+  slot: "Root",
+  overridesResolver: (e, t) => t.root
+})(({
+  ownerState: e,
+  theme: t
+}) => {
+  var o, a;
+  const i = (o = t.variants[e.variant]) == null ? void 0 : o[e.color], {
+    bgcolor: n,
+    backgroundColor: r,
+    background: c,
+    p: d,
+    padding: s
+  } = ee({
+    theme: t,
+    ownerState: e
+  }, ["bgcolor", "backgroundColor", "background", "p", "padding"]), b = U(t, `palette.${n}`) || n || U(t, `palette.${r}`) || r || c || (i == null ? void 0 : i.backgroundColor) || (i == null ? void 0 : i.background) || t.vars.palette.background.surface;
+  return u({}, e.size === "sm" && {
+    "--Tabs-spacing": "0.75rem"
+  }, e.size === "md" && {
+    "--Tabs-spacing": "1rem"
+  }, e.size === "lg" && {
+    "--Tabs-spacing": "1.25rem"
+  }, {
+    "--Tab-indicatorThickness": "2px",
+    "--Icon-color": e.color !== "neutral" || e.variant === "solid" ? "currentColor" : t.vars.palette.text.icon,
+    "--TabList-stickyBackground": b === "transparent" ? "initial" : b,
+    // for sticky TabList
+    display: "flex",
+    flexDirection: "column"
+  }, e.orientation === "vertical" && {
+    flexDirection: "row"
+  }, {
+    backgroundColor: t.vars.palette.background.surface,
+    position: "relative"
+  }, t.typography[`body-${e.size}`], (a = t.variants[e.variant]) == null ? void 0 : a[e.color], d !== void 0 && {
+    "--Tabs-padding": d
+  }, s !== void 0 && {
+    "--Tabs-padding": s
+  });
+}), Ye = /* @__PURE__ */ l.forwardRef(function(e, t) {
+  const o = $({
+    props: e,
+    name: "JoyTabs"
+  }), {
+    children: a,
+    value: i,
+    defaultValue: n,
+    orientation: r = "horizontal",
+    direction: c = "ltr",
+    component: d,
+    variant: s = "plain",
+    color: b = "neutral",
+    size: v = "md",
+    slots: p = {},
+    slotProps: m = {}
+  } = o, h = _(o, je), x = n || (i === void 0 ? 0 : void 0), {
+    contextValue: g
+  } = be(u({}, o, {
+    orientation: r,
+    defaultValue: x
+  })), f = u({}, o, {
+    orientation: r,
+    direction: c,
+    variant: s,
+    color: b,
+    size: v
+  }), z = De(f), y = u({}, h, {
+    component: d,
+    slots: p,
+    slotProps: m
+  }), [T, k] = j("root", {
+    ref: t,
+    elementType: Ne,
+    externalForwardedProps: y,
+    additionalProps: {
+      ref: t,
+      as: d
+    },
+    ownerState: f,
+    className: z.root
+  });
+  return (
+    // @ts-ignore `defaultValue` between HTMLDiv and TabsProps is conflicted.
+    /* @__PURE__ */ P.jsx(T, u({}, k, {
+      children: /* @__PURE__ */ P.jsx(pe, {
+        value: g,
+        children: /* @__PURE__ */ P.jsx(J.Provider, {
+          value: v,
+          children: a
+        })
+      })
+    }))
+  );
+});
+export {
+  Ye as H,
+  ke as L,
+  Je as M,
+  Ue as j,
+  Ee as k
+};