import { r as R, s as _, t as j, _ as t, P as o } from "./PrizeCard-C2El3VOB.js";
import * as f from "react";
import { s as y, u as O, a as b, c as q } from "./Button-DPGn5NZd.js";
import { F as H } from "./CheckCircle-DSloUas8.js";
import { jsxs as F } from "react/jsx-runtime";
function W(e) {
  return _("MuiFormLabel", e);
}
R("MuiFormLabel", ["root", "asterisk"]);
const w = ["children", "component", "htmlFor", "id", "slots", "slotProps"], z = () => q({
  root: ["root"],
  asterisk: ["asterisk"]
}, W, {}), N = y("label", {
  name: "JoyFormLabel",
  slot: "Root",
  overridesResolver: (e, r) => r.root
})(({
  theme: e
}) => ({
  "--Icon-fontSize": "calc(var(--FormLabel-lineHeight) * 1em)",
  WebkitTapHighlightColor: "transparent",
  alignSelf: "var(--FormLabel-alignSelf)",
  // to not fill the block space. It seems like a bug when clicking on empty space (within the label area), even though it is not.
  display: "flex",
  gap: "2px",
  alignItems: "center",
  flexWrap: "wrap",
  userSelect: "none",
  fontFamily: e.vars.fontFamily.body,
  fontSize: `var(--FormLabel-fontSize, ${e.vars.fontSize.sm})`,
  fontWeight: e.vars.fontWeight.md,
  lineHeight: `var(--FormLabel-lineHeight, ${e.vars.lineHeight.sm})`,
  color: `var(--FormLabel-color, ${e.vars.palette.text.primary})`,
  margin: "var(--FormLabel-margin, 0px)"
})), U = y("span", {
  name: "JoyFormLabel",
  slot: "Asterisk",
  overridesResolver: (e, r) => r.asterisk
})({
  color: "var(--FormLabel-asteriskColor)"
}), $ = /* @__PURE__ */ f.forwardRef(function(r, v) {
  var a, n;
  const l = O({
    props: r,
    name: "JoyFormLabel"
  }), {
    children: h,
    component: g = "label",
    htmlFor: i,
    id: p,
    slots: L = {},
    slotProps: k = {}
  } = l, x = j(l, w), s = f.useContext(H), m = (a = (n = r.required) != null ? n : s == null ? void 0 : s.required) != null ? a : !1, c = t({}, l, {
    required: m
  }), d = z(), u = t({}, x, {
    component: g,
    slots: L,
    slotProps: k
  }), [T, C] = b("root", {
    additionalProps: {
      htmlFor: i ?? (s == null ? void 0 : s.htmlFor),
      id: p ?? (s == null ? void 0 : s.labelId)
    },
    ref: v,
    className: d.root,
    elementType: N,
    externalForwardedProps: u,
    ownerState: c
  }), [P, S] = b("asterisk", {
    additionalProps: {
      "aria-hidden": !0
    },
    className: d.asterisk,
    elementType: U,
    externalForwardedProps: u,
    ownerState: c
  });
  return /* @__PURE__ */ F(T, t({}, C, {
    children: [h, m && /* @__PURE__ */ F(P, t({}, S, {
      children: [" ", "*"]
    }))]
  }));
});
process.env.NODE_ENV !== "production" && ($.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: o.node,
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: o.elementType,
  /**
   * @ignore
   */
  htmlFor: o.string,
  /**
   * @ignore
   */
  id: o.string,
  /**
   * The asterisk is added if required=`true`
   */
  required: o.bool,
  /**
   * The props used for each slot inside.
   * @default {}
   */
  slotProps: o.shape({
    asterisk: o.oneOfType([o.func, o.object]),
    root: o.oneOfType([o.func, o.object])
  }),
  /**
   * The components used for each slot inside.
   * @default {}
   */
  slots: o.shape({
    asterisk: o.elementType,
    root: o.elementType
  }),
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object])
});
export {
  $ as F
};
