fansunited-widgets-cdn 0.0.84 → 0.0.86-RC1

package/chunks/Tabs-CSu_cWNi.js

@@ -0,0 +1,784 @@
+import { r, w as u, j as C, a0 as Y, Z as O, a5 as Z, G as j, F as U, v as D, _ as B, x as N, y as E, z, D as W, a6 as H } from "./main-XP7dqk6g.js";
+import { b as Q, o as G, p as A, q, r as w, t as tt, v as et, w as ot, x as at, y as nt, z as st, R as it, n as rt, f as lt, h as ct, d as dt, s as ut } from "./Select-p_cHpLhi.js";
+import { u as bt, r as pt } from "./Button-BV7YIFkS.js";
+function vt(t) {
+  const {
+    value: e,
+    defaultValue: a,
+    onChange: o,
+    orientation: n = "horizontal",
+    direction: i = "ltr",
+    selectionFollowsFocus: s = !1
+  } = t, [c, d] = Q({
+    controlled: e,
+    default: a,
+    name: "Tabs",
+    state: "value"
+  }), l = r.useCallback((g, h) => {
+    d(h), o == null || o(g, h);
+  }, [o, d]), {
+    subitems: p,
+    contextValue: b
+  } = G(), v = r.useRef(() => {
+  }), f = r.useCallback((g) => {
+    var h;
+    return (h = p.get(g)) == null ? void 0 : h.id;
+  }, [p]), x = r.useCallback((g) => v.current(g), []), m = r.useCallback((g) => {
+    v.current = g;
+  }, []);
+  return {
+    contextValue: u({
+      direction: i,
+      getTabId: x,
+      getTabPanelId: f,
+      onSelected: l,
+      orientation: n,
+      registerTabIdLookup: m,
+      selectionFollowsFocus: s,
+      value: c
+    }, b)
+  };
+}
+const K = /* @__PURE__ */ r.createContext(null);
+function J() {
+  const t = r.useContext(K);
+  if (t == null)
+    throw new Error("No TabsContext provided");
+  return t;
+}
+function gt(t) {
+  const {
+    value: e,
+    children: a
+  } = t, {
+    direction: o,
+    getItemIndex: n,
+    onSelected: i,
+    orientation: s,
+    registerItem: c,
+    registerTabIdLookup: d,
+    selectionFollowsFocus: l,
+    totalSubitemCount: p,
+    value: b,
+    getTabId: v,
+    getTabPanelId: f
+  } = e, x = r.useMemo(() => ({
+    getItemIndex: n,
+    registerItem: c,
+    totalSubitemCount: p
+  }), [c, n, p]), m = r.useMemo(() => ({
+    direction: o,
+    getTabId: v,
+    getTabPanelId: f,
+    onSelected: i,
+    orientation: s,
+    registerTabIdLookup: d,
+    selectionFollowsFocus: l,
+    value: b
+  }), [o, v, f, i, s, d, l, b]);
+  return /* @__PURE__ */ C.jsx(A.Provider, {
+    value: x,
+    children: /* @__PURE__ */ C.jsx(K.Provider, {
+      value: m,
+      children: a
+    })
+  });
+}
+function ft(t) {
+  return t.size;
+}
+function mt(t) {
+  const {
+    value: e,
+    id: a,
+    rootRef: o
+  } = t, n = J();
+  if (n === null)
+    throw new Error("No TabContext provided");
+  const {
+    value: i,
+    getTabId: s
+  } = n, c = Y(a), d = r.useRef(null), l = O(d, o), p = r.useMemo(() => ({
+    id: c,
+    ref: d
+  }), [c]), {
+    id: b
+  } = q(e ?? ft, p), v = b !== i, f = b !== void 0 ? s(b) : void 0;
+  return {
+    hidden: v,
+    getRootProps: (m = {}) => u({
+      "aria-labelledby": f ?? void 0,
+      hidden: v,
+      id: c ?? void 0
+    }, m, {
+      ref: l
+    }),
+    rootRef: l
+  };
+}
+const X = {
+  valueChange: "valueChange"
+};
+function xt(t, e) {
+  if (e.type === X.valueChange)
+    return u({}, t, {
+      highlightedValue: e.value
+    });
+  const a = w(t, e), {
+    context: {
+      selectionFollowsFocus: o
+    }
+  } = e;
+  if (e.type === tt.itemsChange) {
+    if (a.selectedValues.length > 0)
+      return u({}, a, {
+        highlightedValue: a.selectedValues[0]
+      });
+    et(null, "reset", e.context);
+  }
+  return o && a.highlightedValue != null ? u({}, a, {
+    selectedValues: [a.highlightedValue]
+  }) : a;
+}
+function ht(t) {
+  var e;
+  const {
+    rootRef: a
+  } = t, {
+    direction: o = "ltr",
+    onSelected: n,
+    orientation: i = "horizontal",
+    value: s,
+    registerTabIdLookup: c,
+    selectionFollowsFocus: d
+  } = J(), {
+    subitems: l,
+    contextValue: p
+  } = G(), b = r.useCallback((P) => {
+    var y;
+    return (y = l.get(P)) == null ? void 0 : y.id;
+  }, [l]);
+  c(b);
+  const v = r.useMemo(() => Array.from(l.keys()), [l]), f = r.useCallback((P) => {
+    var y, $;
+    return P == null ? null : (y = ($ = l.get(P)) == null ? void 0 : $.ref.current) != null ? y : null;
+  }, [l]), x = o === "rtl";
+  let m;
+  i === "vertical" ? m = "vertical" : m = x ? "horizontal-rtl" : "horizontal-ltr";
+  const g = r.useCallback((P, y) => {
+    var $;
+    n(P, ($ = y[0]) != null ? $ : null);
+  }, [n]), h = r.useMemo(() => s === void 0 ? {} : s != null ? {
+    selectedValues: [s]
+  } : {
+    selectedValues: []
+  }, [s]), I = r.useCallback((P) => {
+    var y, $;
+    return (y = ($ = l.get(P)) == null ? void 0 : $.disabled) != null ? y : !1;
+  }, [l]), {
+    contextValue: R,
+    dispatch: L,
+    getRootProps: k,
+    state: {
+      highlightedValue: T,
+      selectedValues: V
+    },
+    rootRef: F
+  } = ot({
+    controlledProps: h,
+    disabledItemsFocusable: !d,
+    focusManagement: "DOM",
+    getItemDomElement: f,
+    isItemDisabled: I,
+    items: v,
+    rootRef: a,
+    onChange: g,
+    orientation: m,
+    reducerActionContext: r.useMemo(() => ({
+      selectionFollowsFocus: d || !1
+    }), [d]),
+    selectionMode: "single",
+    stateReducer: xt
+  });
+  r.useEffect(() => {
+    s !== void 0 && s != null && L({
+      type: X.valueChange,
+      value: s
+    });
+  }, [L, s]);
+  const _ = (P = {}) => u({}, P, k(P), {
+    "aria-orientation": i === "vertical" ? "vertical" : void 0,
+    role: "tablist"
+  });
+  return {
+    contextValue: r.useMemo(() => u({}, p, R), [p, R]),
+    dispatch: L,
+    getRootProps: _,
+    highlightedValue: T,
+    isRtl: x,
+    orientation: i,
+    rootRef: F,
+    selectedValue: (e = V[0]) != null ? e : null
+  };
+}
+function Tt(t) {
+  const {
+    value: e,
+    children: a
+  } = t, {
+    dispatch: o,
+    getItemIndex: n,
+    getItemState: i,
+    registerItem: s,
+    totalSubitemCount: c
+  } = e, d = r.useMemo(() => ({
+    dispatch: o,
+    getItemState: i,
+    getItemIndex: n
+  }), [o, n, i]), l = r.useMemo(() => ({
+    getItemIndex: n,
+    registerItem: s,
+    totalSubitemCount: c
+  }), [s, n, c]);
+  return /* @__PURE__ */ C.jsx(A.Provider, {
+    value: l,
+    children: /* @__PURE__ */ C.jsx(at.Provider, {
+      value: d,
+      children: a
+    })
+  });
+}
+function Pt(t) {
+  return t.size;
+}
+function Ct(t) {
+  const {
+    value: e,
+    rootRef: a,
+    disabled: o = !1,
+    id: n
+  } = t, i = r.useRef(null), s = Y(n), {
+    value: c,
+    selectionFollowsFocus: d,
+    getTabPanelId: l
+  } = J(), p = r.useMemo(() => ({
+    disabled: o,
+    ref: i,
+    id: s
+  }), [o, i, s]), {
+    id: b,
+    index: v,
+    totalItemCount: f
+  } = q(e ?? Pt, p), {
+    getRootProps: x,
+    highlighted: m,
+    selected: g
+  } = nt({
+    item: b
+  }), {
+    getRootProps: h,
+    rootRef: I,
+    active: R,
+    focusVisible: L,
+    setFocusVisible: k
+  } = bt({
+    disabled: o,
+    focusableWhenDisabled: !d,
+    type: "button"
+  }), T = O(i, a, I), V = b !== void 0 ? l(b) : void 0;
+  return {
+    getRootProps: (_ = {}) => {
+      const M = Z(_), P = st(x, h);
+      return u({}, _, P(M), {
+        role: "tab",
+        "aria-controls": V,
+        "aria-selected": g,
+        id: s,
+        ref: T
+      });
+    },
+    active: R,
+    focusVisible: L,
+    highlighted: m,
+    index: v,
+    rootRef: T,
+    // 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 === c,
+    setFocusVisible: k,
+    totalTabsCount: f
+  };
+}
+function Rt(t) {
+  return U("MuiTab", t);
+}
+const Lt = j("MuiTab", ["root", "disabled", "focusVisible", "selected", "horizontal", "vertical", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantOutlined", "variantSoft", "variantSolid"]), It = ["action", "children", "value", "disabled", "onChange", "onClick", "onFocus", "component", "orientation", "variant", "color", "disableIndicator", "indicatorPlacement", "indicatorInset", "slots", "slotProps"], yt = (t) => {
+  const {
+    selected: e,
+    disabled: a,
+    focusVisible: o,
+    variant: n,
+    color: i,
+    orientation: s
+  } = t, c = {
+    root: ["root", s, a && "disabled", o && "focusVisible", e && "selected", n && `variant${z(n)}`, i && `color${z(i)}`]
+  };
+  return W(c, Rt, {});
+}, zt = E(lt, {
+  name: "JoyTab",
+  slot: "Root",
+  overridesResolver: (t, e) => e.root
+})(({
+  ownerState: t
+}) => [
+  {
+    flex: "initial",
+    justifyContent: t.row ? "center" : "initial",
+    "--unstable_ListItemDecorator-alignItems": "center",
+    "--unstable_offset": "min(calc(-1 * var(--variant-borderWidth, 0px)), -1px)"
+  },
+  !t.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.
+  !t.disableIndicator && t.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: t.indicatorInset ? "var(--ListItem-paddingLeft)" : "var(--unstable_offset)",
+      right: t.indicatorInset ? "var(--ListItem-paddingRight)" : "var(--unstable_offset)",
+      bottom: "calc(-1px - var(--unstable_TabList-underlineBottom, 0px))"
+    }
+  },
+  !t.disableIndicator && t.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: t.indicatorInset ? "var(--ListItem-paddingLeft)" : "var(--unstable_offset)",
+      right: t.indicatorInset ? "var(--ListItem-paddingRight)" : "var(--unstable_offset)",
+      top: "calc(-1px - var(--unstable_TabList-underlineTop, 0px))"
+    }
+  },
+  !t.disableIndicator && t.indicatorPlacement === "right" && {
+    paddingRight: "calc(var(--ListItem-paddingRight) + var(--Tab-indicatorThickness) - 1px)",
+    "&::after": {
+      height: "var(--Tab-indicatorSize)",
+      width: "var(--Tab-indicatorThickness)",
+      top: t.indicatorInset ? "var(--ListItem-paddingY)" : "var(--unstable_offset)",
+      bottom: t.indicatorInset ? "var(--ListItem-paddingY)" : "var(--unstable_offset)",
+      right: "calc(-1px - var(--unstable_TabList-underlineRight, 0px))"
+    }
+  },
+  !t.disableIndicator && t.indicatorPlacement === "left" && {
+    paddingLeft: "calc(var(--ListItem-paddingLeft) + var(--Tab-indicatorThickness) - 1px)",
+    "&::after": {
+      height: "var(--Tab-indicatorSize)",
+      width: "var(--Tab-indicatorThickness)",
+      top: t.indicatorInset ? "var(--ListItem-paddingY)" : "var(--unstable_offset)",
+      bottom: t.indicatorInset ? "var(--ListItem-paddingY)" : "var(--unstable_offset)",
+      left: "calc(-1px - var(--unstable_TabList-underlineLeft, 0px))"
+    }
+  }
+]), St = /* @__PURE__ */ r.forwardRef(function(e, a) {
+  const o = D({
+    props: e,
+    name: "JoyTab"
+  }), n = r.useContext(it), {
+    action: i,
+    children: s,
+    disabled: c = !1,
+    component: d = "button",
+    orientation: l = "horizontal",
+    variant: p = "plain",
+    color: b = "neutral",
+    disableIndicator: v = !1,
+    indicatorPlacement: f = n ? "bottom" : "right",
+    indicatorInset: x = !1,
+    slots: m = {},
+    slotProps: g = {}
+  } = o, h = B(o, It), I = r.useRef(null), R = O(I, a), {
+    active: L,
+    focusVisible: k,
+    setFocusVisible: T,
+    selected: V,
+    getRootProps: F
+  } = Ct(u({}, o, {
+    rootRef: R
+  }));
+  r.useImperativeHandle(i, () => ({
+    focusVisible: () => {
+      T(!0), I.current.focus();
+    }
+  }), [T]);
+  const _ = u({}, o, {
+    disableIndicator: v,
+    indicatorPlacement: f,
+    indicatorInset: x,
+    orientation: l,
+    row: n,
+    active: L,
+    focusVisible: k,
+    disabled: c,
+    selected: V,
+    variant: p,
+    color: b
+  }), M = yt(_), P = u({}, h, {
+    component: d,
+    slots: m,
+    slotProps: g
+  }), [y, $] = N("root", {
+    ref: a,
+    elementType: zt,
+    getSlotProps: F,
+    externalForwardedProps: P,
+    ownerState: _,
+    className: M.root
+  });
+  return /* @__PURE__ */ C.jsx(rt.Provider, {
+    value: l,
+    children: /* @__PURE__ */ C.jsx(y, u({}, $, {
+      children: s
+    }))
+  });
+}), S = /* @__PURE__ */ r.createContext("md");
+function kt(t) {
+  return U("MuiTabList", t);
+}
+j("MuiTabList", ["root", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantOutlined", "variantSoft", "variantSolid", "sizeSm", "sizeMd", "sizeLg"]);
+const Vt = ["component", "children", "variant", "color", "size", "disableUnderline", "underlinePlacement", "tabFlex", "sticky", "slots", "slotProps"], $t = (t) => {
+  const {
+    orientation: e,
+    size: a,
+    variant: o,
+    color: n
+  } = t, i = {
+    root: ["root", e, o && `variant${z(o)}`, n && `color${z(n)}`, a && `size${z(a)}`]
+  };
+  return W(i, kt, {});
+}, _t = E(dt, {
+  name: "JoyTabList",
+  slot: "Root",
+  overridesResolver: (t, e) => e.root
+})(({
+  theme: t,
+  ownerState: e
+}) => {
+  var a;
+  const o = (a = t.variants[e.variant]) == null ? void 0 : a[e.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": e.disableUnderline ? "var(--unknown,)" : "initial"
+  }, ut, {
+    flexGrow: "initial",
+    flexDirection: e.orientation === "vertical" ? "column" : "row",
+    borderRadius: "var(--List-radius, 0px)",
+    padding: "var(--List-padding, 0px)",
+    zIndex: 1
+  }, e.sticky && {
+    // sticky in list item can be found in grouped options
+    position: "sticky",
+    top: e.sticky === "top" ? "calc(-1 * var(--Tabs-padding, 0px))" : "initial",
+    bottom: e.sticky === "bottom" ? "calc(-1 * var(--Tabs-padding, 0px))" : "initial",
+    backgroundColor: (o == null ? void 0 : o.backgroundColor) || `var(--TabList-stickyBackground, ${t.vars.palette.background.body})`
+  }, !e.disableUnderline && u({}, e.underlinePlacement === "bottom" && {
+    "--unstable_TabList-underlineBottom": "1px",
+    paddingBottom: 1,
+    boxShadow: `inset 0 -1px ${t.vars.palette.divider}`
+  }, e.underlinePlacement === "top" && {
+    "--unstable_TabList-underlineTop": "1px",
+    paddingTop: 1,
+    boxShadow: `inset 0 1px ${t.vars.palette.divider}`
+  }, e.underlinePlacement === "right" && {
+    "--unstable_TabList-underlineRight": "1px",
+    paddingRight: 1,
+    boxShadow: `inset -1px 0 ${t.vars.palette.divider}`
+  }, e.underlinePlacement === "left" && {
+    "--unstable_TabList-underlineLeft": "1px",
+    paddingLeft: 1,
+    boxShadow: `inset 1px 0 ${t.vars.palette.divider}`
+  }), e.tabFlex && {
+    [`& .${Lt.root}`]: {
+      flex: e.tabFlex
+    }
+  });
+}), Ht = /* @__PURE__ */ r.forwardRef(function(e, a) {
+  const o = D({
+    props: e,
+    name: "JoyTabList"
+  }), n = r.useContext(S), {
+    isRtl: i,
+    orientation: s,
+    getRootProps: c,
+    contextValue: d
+  } = ht({
+    rootRef: a
+  }), {
+    component: l = "div",
+    children: p,
+    variant: b = "plain",
+    color: v = "neutral",
+    size: f,
+    disableUnderline: x = !1,
+    underlinePlacement: m = s === "horizontal" ? "bottom" : "right",
+    tabFlex: g,
+    sticky: h,
+    slots: I = {},
+    slotProps: R = {}
+  } = o, L = B(o, Vt), T = u({}, o, {
+    isRtl: i,
+    orientation: s,
+    variant: b,
+    color: v,
+    size: f ?? n,
+    sticky: h,
+    tabFlex: g,
+    nesting: !1,
+    disableUnderline: x,
+    underlinePlacement: m
+  }), V = $t(T), F = u({}, L, {
+    component: l,
+    slots: I,
+    slotProps: R
+  }), [_, M] = N("root", {
+    ref: a,
+    elementType: _t,
+    getSlotProps: c,
+    externalForwardedProps: F,
+    ownerState: T,
+    className: V.root
+  });
+  return (
+    // @ts-ignore conflicted ref types
+    /* @__PURE__ */ C.jsx(_, u({}, M, {
+      children: /* @__PURE__ */ C.jsx(Tt, {
+        value: d,
+        children: /* @__PURE__ */ C.jsx(ct, {
+          row: s === "horizontal",
+          nested: !0,
+          children: p
+        })
+      })
+    }))
+  );
+});
+function Ft(t) {
+  return U("MuiTabPanel", t);
+}
+j("MuiTabPanel", ["root", "hidden", "sizeSm", "sizeMd", "sizeLg", "horizontal", "vertical", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantOutlined", "variantSoft", "variantSolid"]);
+const Mt = ["children", "value", "component", "color", "variant", "size", "slots", "slotProps", "keepMounted"], jt = (t) => {
+  const {
+    hidden: e,
+    size: a,
+    variant: o,
+    color: n,
+    orientation: i
+  } = t, s = {
+    root: ["root", e && "hidden", a && `size${z(a)}`, i, o && `variant${z(o)}`, n && `color${z(n)}`, a && `size${z(a)}`]
+  };
+  return W(s, Ft, {});
+}, Ut = E("div", {
+  name: "JoyTabPanel",
+  slot: "Root",
+  overridesResolver: (t, e) => e.root
+})(({
+  theme: t,
+  ownerState: e
+}) => {
+  var a;
+  return u({
+    display: e.hidden ? "none" : "block",
+    padding: "var(--Tabs-spacing)",
+    flexGrow: 1,
+    fontFamily: t.vars.fontFamily.body
+  }, t.typography[`body-${e.size}`], (a = t.variants[e.variant]) == null ? void 0 : a[e.color]);
+}), Yt = /* @__PURE__ */ r.forwardRef(function(e, a) {
+  const o = D({
+    props: e,
+    name: "JoyTabPanel"
+  }), {
+    orientation: n
+  } = J() || {
+    orientation: "horizontal"
+  }, i = r.useContext(S), {
+    children: s,
+    value: c = 0,
+    component: d,
+    color: l = "neutral",
+    variant: p = "plain",
+    size: b,
+    slots: v = {},
+    slotProps: f = {},
+    keepMounted: x = !1
+  } = o, m = B(o, Mt), {
+    hidden: g,
+    getRootProps: h
+  } = mt(u({}, o, {
+    value: c
+  })), R = u({}, o, {
+    orientation: n,
+    hidden: g,
+    size: b ?? i,
+    color: l,
+    variant: p
+  }), L = jt(R), k = u({}, m, {
+    component: d,
+    slots: v,
+    slotProps: f
+  }), [T, V] = N("root", {
+    ref: a,
+    elementType: Ut,
+    getSlotProps: h,
+    externalForwardedProps: k,
+    additionalProps: {
+      role: "tabpanel",
+      ref: a,
+      as: d
+    },
+    ownerState: R,
+    className: L.root
+  });
+  return x ? /* @__PURE__ */ C.jsx(T, u({}, V, {
+    children: s
+  })) : /* @__PURE__ */ C.jsx(T, u({}, V, {
+    children: !g && s
+  }));
+});
+function Dt(t) {
+  return U("MuiTabs", t);
+}
+j("MuiTabs", ["root", "horizontal", "vertical", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantOutlined", "variantSoft", "variantSolid", "sizeSm", "sizeMd", "sizeLg"]);
+const Bt = ["children", "value", "defaultValue", "orientation", "direction", "component", "onChange", "selectionFollowsFocus", "variant", "color", "size", "slots", "slotProps"], Nt = (t) => {
+  const {
+    orientation: e,
+    variant: a,
+    color: o,
+    size: n
+  } = t, i = {
+    root: ["root", e, a && `variant${z(a)}`, o && `color${z(o)}`, n && `size${z(n)}`]
+  };
+  return W(i, Dt, {});
+}, Et = E("div", {
+  name: "JoyTabs",
+  slot: "Root",
+  overridesResolver: (t, e) => e.root
+})(({
+  ownerState: t,
+  theme: e
+}) => {
+  var a, o;
+  const n = (a = e.variants[t.variant]) == null ? void 0 : a[t.color], {
+    bgcolor: i,
+    backgroundColor: s,
+    background: c,
+    p: d,
+    padding: l
+  } = pt({
+    theme: e,
+    ownerState: t
+  }, ["bgcolor", "backgroundColor", "background", "p", "padding"]), p = H(e, `palette.${i}`) || i || H(e, `palette.${s}`) || s || c || (n == null ? void 0 : n.backgroundColor) || (n == null ? void 0 : n.background) || e.vars.palette.background.surface;
+  return u({}, t.size === "sm" && {
+    "--Tabs-spacing": "0.75rem"
+  }, t.size === "md" && {
+    "--Tabs-spacing": "1rem"
+  }, t.size === "lg" && {
+    "--Tabs-spacing": "1.25rem"
+  }, {
+    "--Tab-indicatorThickness": "2px",
+    "--Icon-color": t.color !== "neutral" || t.variant === "solid" ? "currentColor" : e.vars.palette.text.icon,
+    "--TabList-stickyBackground": p === "transparent" ? "initial" : p,
+    // for sticky TabList
+    display: "flex",
+    flexDirection: "column"
+  }, t.orientation === "vertical" && {
+    flexDirection: "row"
+  }, {
+    backgroundColor: e.vars.palette.background.surface,
+    position: "relative"
+  }, e.typography[`body-${t.size}`], (o = e.variants[t.variant]) == null ? void 0 : o[t.color], d !== void 0 && {
+    "--Tabs-padding": d
+  }, l !== void 0 && {
+    "--Tabs-padding": l
+  });
+}), Gt = /* @__PURE__ */ r.forwardRef(function(e, a) {
+  const o = D({
+    props: e,
+    name: "JoyTabs"
+  }), {
+    children: n,
+    value: i,
+    defaultValue: s,
+    orientation: c = "horizontal",
+    direction: d = "ltr",
+    component: l,
+    variant: p = "plain",
+    color: b = "neutral",
+    size: v = "md",
+    slots: f = {},
+    slotProps: x = {}
+  } = o, m = B(o, Bt), g = s || (i === void 0 ? 0 : void 0), {
+    contextValue: h
+  } = vt(u({}, o, {
+    orientation: c,
+    defaultValue: g
+  })), I = u({}, o, {
+    orientation: c,
+    direction: d,
+    variant: p,
+    color: b,
+    size: v
+  }), R = Nt(I), L = u({}, m, {
+    component: l,
+    slots: f,
+    slotProps: x
+  }), [k, T] = N("root", {
+    ref: a,
+    elementType: Et,
+    externalForwardedProps: L,
+    additionalProps: {
+      ref: a,
+      as: l
+    },
+    ownerState: I,
+    className: R.root
+  });
+  return (
+    // @ts-ignore `defaultValue` between HTMLDiv and TabsProps is conflicted.
+    /* @__PURE__ */ C.jsx(k, u({}, T, {
+      children: /* @__PURE__ */ C.jsx(gt, {
+        value: h,
+        children: /* @__PURE__ */ C.jsx(S.Provider, {
+          value: v,
+          children: n
+        })
+      })
+    }))
+  );
+});
+export {
+  Gt as T,
+  Ht as a,
+  St as b,
+  Yt as c,
+  Lt as t
+};