import { _ as p, I as G, r as N, s as D, t as E, P as e, J as O, K as A } from "./PrizeCard-C2El3VOB.js";
import * as l from "react";
import { u as w, C as K, b as q, l as Q, L as Z, m as ee, c as oe, d as te, e as ne, f as ae, g as se, R as ie, h as re, i as le, s as ce, j as de } from "./Select-BtID79ha.js";
import { d as H, e as ue, f as pe, s as j, u as U, a as B, c as J, r as be } from "./Button-DPGn5NZd.js";
import { jsx as C } from "react/jsx-runtime";
import { u as fe } from "./useEventCallback-Dqgs56Ox.js";
function ve(o) {
  const {
    value: t,
    defaultValue: a,
    onChange: n,
    orientation: s = "horizontal",
    direction: r = "ltr",
    selectionFollowsFocus: i = !1
  } = o, [d, u] = fe({
    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
  } = w(), 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 W() {
  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(K.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 = W();
  if (s === null)
    throw new Error("No TabContext provided");
  const {
    value: r,
    getTabId: i
  } = s, d = G(a), u = l.useRef(null), c = H(u, n), f = l.useMemo(() => ({
    id: d,
    ref: u
  }), [d]), {
    id: b
  } = q(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 = Q(o, t), {
    context: {
      selectionFollowsFocus: n
    }
  } = t;
  if (t.type === Z.itemsChange) {
    if (a.selectedValues.length > 0)
      return p({}, a, {
        highlightedValue: a.selectedValues[0]
      });
    ee(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
  } = W(), {
    subitems: c,
    contextValue: f
  } = w(), 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
  } = oe({
    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(K.Provider, {
    value: c,
    children: /* @__PURE__ */ C(te.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 = G(s), {
    value: d,
    selectionFollowsFocus: u,
    getTabPanelId: c
  } = W(), f = l.useMemo(() => ({
    disabled: n,
    ref: r,
    id: i
  }), [n, r, i]), {
    id: b,
    index: v,
    totalItemCount: m
  } = q(t ?? Pe, f), {
    getRootProps: h,
    highlighted: T,
    selected: g
  } = ne({
    item: b
  }), {
    getRootProps: y,
    rootRef: I,
    active: R,
    focusVisible: L,
    setFocusVisible: k
  } = ue({
    disabled: n,
    focusableWhenDisabled: !u,
    type: "button"
  }), x = H(r, a, I), V = b !== void 0 ? c(b) : void 0;
  return {
    getRootProps: ($ = {}) => {
      const M = pe($), P = ae(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 = j(se, {
  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(ie), {
    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 = E(n, Ie), I = l.useRef(null), 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(re.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 S = /* @__PURE__ */ l.createContext("md");
process.env.NODE_ENV !== "production" && (S.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 = j(le, {
  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"
  }, ce, {
    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(S), {
    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 = E(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(de, {
          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, {});
}, je = j("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]);
}), Ue = /* @__PURE__ */ l.forwardRef(function(t, a) {
  const n = U({
    props: t,
    name: "JoyTabPanel"
  }), {
    orientation: s
  } = W() || {
    orientation: "horizontal"
  }, r = l.useContext(S), {
    children: i,
    value: d = 0,
    component: u,
    color: c = "neutral",
    variant: f = "plain",
    size: b,
    slots: v = {},
    slotProps: m = {},
    keepMounted: h = !1
  } = n, T = E(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: je,
    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" && (Ue.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"], We = (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, {});
}, Se = j("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
  } = be({
    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 = E(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 = We(I), L = p({}, T, {
    component: c,
    slots: m,
    slotProps: h
  }), [k, x] = B("root", {
    ref: a,
    elementType: Se,
    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(S.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,
  Ue as c,
  Le as t
};
