import { s as I, r as k, _ as c, P as o, t as R, v as L, J as N } from "./PrizeCard-C2El3VOB.js";
import * as p from "react";
import { s as z, u as j, a as h, c as _ } from "./Button-DPGn5NZd.js";
import { c as V } from "./CheckCircle-DSloUas8.js";
import { jsx as v } from "react/jsx-runtime";
const W = V(/* @__PURE__ */ v("path", {
  d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
}), "Person");
function H(r) {
  return I("MuiAvatar", r);
}
k("MuiAvatar", ["root", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "fallback", "sizeSm", "sizeMd", "sizeLg", "img", "variantOutlined", "variantSoft", "variantSolid"]);
function q(r) {
  return I("MuiAvatarGroup", r);
}
k("MuiAvatarGroup", ["root"]);
const B = ["className", "color", "component", "size", "variant", "children", "slots", "slotProps"], C = /* @__PURE__ */ p.createContext(void 0);
process.env.NODE_ENV !== "production" && (C.displayName = "AvatarGroupContext");
const K = () => _({
  root: ["root"]
}, q, {}), Q = z("div", {
  name: "JoyAvatarGroup",
  slot: "Root",
  overridesResolver: (r, e) => e.root
})(({
  ownerState: r,
  theme: e
}) => c({}, r.size === "sm" && {
  "--AvatarGroup-gap": "-0.375rem",
  "--Avatar-ringSize": "2px"
}, r.size === "md" && {
  "--AvatarGroup-gap": "-0.5rem",
  "--Avatar-ringSize": "2px"
}, r.size === "lg" && {
  "--AvatarGroup-gap": "-0.625rem",
  "--Avatar-ringSize": "4px"
}, {
  "--Avatar-ring": `0 0 0 var(--Avatar-ringSize) var(--Avatar-ringColor, ${e.vars.palette.background.surface})`,
  "--Avatar-marginInlineStart": "var(--AvatarGroup-gap)",
  display: "flex",
  marginInlineStart: "calc(-1 * var(--AvatarGroup-gap))"
})), X = /* @__PURE__ */ p.forwardRef(function(e, a) {
  const t = j({
    props: e,
    name: "JoyAvatarGroup"
  }), {
    className: s,
    color: n,
    component: i = "div",
    size: l = "md",
    variant: f,
    children: d,
    slots: m = {},
    slotProps: g = {}
  } = t, T = R(t, B), y = p.useMemo(() => c({}, t, {
    color: n,
    component: i,
    size: l,
    variant: f
  }), [n, i, t, l, f]), b = K(), [x, O] = h("root", {
    ref: a,
    className: L(b.root, s),
    elementType: Q,
    externalForwardedProps: c({}, T, {
      component: i,
      slots: m,
      slotProps: g
    }),
    ownerState: y
  });
  return /* @__PURE__ */ v(C.Provider, {
    value: y,
    children: /* @__PURE__ */ v(x, c({}, O, {
      children: d
    }))
  });
});
process.env.NODE_ENV !== "production" && (X.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 AvatarGroup if `src` is not set.
   * This can be an element, or just a string.
   */
  children: o.node,
  /**
   * @ignore
   */
  className: o.string,
  /**
   * The color of the component. It supports those theme colors that make sense for this component.
   * @default 'neutral'
   */
  color: o.oneOfType([o.oneOf(["danger", "neutral", "primary", "success", "warning"]), o.string]),
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: o.elementType,
  /**
   * The size of the component.
   * It accepts theme values between 'sm' and 'lg'.
   * @default 'md'
   */
  size: o.oneOfType([o.oneOf(["lg", "md", "sm"]), o.string]),
  /**
   * The props used for each slot inside.
   * @default {}
   */
  slotProps: o.shape({
    root: o.oneOfType([o.func, o.object])
  }),
  /**
   * The components used for each slot inside.
   * @default {}
   */
  slots: o.shape({
    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]),
  /**
   * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
   * @default 'soft'
   */
  variant: o.oneOfType([o.oneOf(["outlined", "plain", "soft", "solid"]), o.string])
});
const Y = ["alt", "color", "size", "variant", "src", "srcSet", "children", "component", "slots", "slotProps"], Z = (r) => {
  const {
    size: e,
    variant: a,
    color: t,
    src: s,
    srcSet: n
  } = r, i = {
    root: ["root", a && `variant${N(a)}`, t && `color${N(t)}`, e && `size${N(e)}`],
    img: [(s || n) && "img"],
    fallback: ["fallback"]
  };
  return _(i, H, {});
}, oo = z("div", {
  name: "JoyAvatar",
  slot: "Root",
  overridesResolver: (r, e) => e.root
})(({
  theme: r,
  ownerState: e
}) => {
  var a;
  return c({
    "--Icon-color": e.color !== "neutral" || e.variant === "solid" ? "currentColor" : r.vars.palette.text.icon
  }, r.typography[`title-${e.size}`], e.size === "sm" && {
    width: "var(--Avatar-size, 2rem)",
    height: "var(--Avatar-size, 2rem)",
    fontSize: "calc(var(--Avatar-size, 2rem) * 0.4375)"
    // default as 14px
  }, e.size === "md" && {
    width: "var(--Avatar-size, 2.5rem)",
    height: "var(--Avatar-size, 2.5rem)",
    fontSize: "calc(var(--Avatar-size, 2.5rem) * 0.4)"
    // default as 16px
  }, e.size === "lg" && {
    width: "var(--Avatar-size, 3rem)",
    height: "var(--Avatar-size, 3rem)",
    fontSize: "calc(var(--Avatar-size, 3rem) * 0.375)"
    // default as 18px
  }, {
    marginInlineStart: "var(--Avatar-marginInlineStart)",
    boxShadow: "var(--Avatar-ring)",
    position: "relative",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flexShrink: 0,
    lineHeight: 1,
    overflow: "hidden",
    borderRadius: "var(--Avatar-radius, 50%)",
    userSelect: "none"
  }, (a = r.variants[e.variant]) == null ? void 0 : a[e.color]);
}), eo = z("img", {
  name: "JoyAvatar",
  slot: "Img",
  overridesResolver: (r, e) => e.img
})({
  width: "100%",
  height: "100%",
  textAlign: "center",
  // Handle non-square image. The property isn't supported by IE11.
  objectFit: "cover",
  // Hide alt text.
  color: "transparent",
  // Hide the image broken icon, only works on Chrome.
  textIndent: 1e4
}), ro = z(W, {
  name: "JoyAvatar",
  slot: "Fallback",
  overridesResolver: (r, e) => e.fallback
})({
  width: "64%",
  height: "64%"
});
function to({
  crossOrigin: r,
  referrerPolicy: e,
  src: a,
  srcSet: t
}) {
  const [s, n] = p.useState(!1);
  return p.useEffect(() => {
    if (!a && !t)
      return;
    n(!1);
    let i = !0;
    const l = new Image();
    return l.onload = () => {
      i && n("loaded");
    }, l.onerror = () => {
      i && n("error");
    }, l.crossOrigin = r, l.referrerPolicy = e, a && (l.src = a), t && (l.srcset = t), () => {
      i = !1;
    };
  }, [r, e, a, t]), s;
}
const ao = /* @__PURE__ */ p.forwardRef(function(e, a) {
  const t = j({
    props: e,
    name: "JoyAvatar"
  }), s = p.useContext(C), {
    alt: n,
    color: i = "neutral",
    size: l = "md",
    variant: f = "soft",
    src: d,
    srcSet: m,
    children: g,
    component: T,
    slots: y = {},
    slotProps: b = {}
  } = t, x = R(t, Y), O = e.variant || (s == null ? void 0 : s.variant) || f, F = e.color || (s == null ? void 0 : s.color) || i, $ = e.size || (s == null ? void 0 : s.size) || l;
  let u = null;
  const A = c({}, t, {
    color: F,
    size: $,
    variant: O,
    grouped: !!s
  }), P = Z(A), S = c({}, x, {
    component: T,
    slots: y,
    slotProps: b
  }), [w, E] = h("root", {
    ref: a,
    className: P.root,
    elementType: oo,
    externalForwardedProps: S,
    ownerState: A
  }), [J, G] = h("img", {
    additionalProps: {
      alt: n,
      src: d,
      srcSet: m
    },
    className: P.img,
    elementType: eo,
    externalForwardedProps: S,
    ownerState: A
  }), [M, U] = h("fallback", {
    className: P.fallback,
    elementType: ro,
    externalForwardedProps: S,
    ownerState: A
  }), D = to(c({}, G, {
    src: d,
    srcSet: m
  }));
  return (d || m) && D !== "error" ? u = /* @__PURE__ */ v(J, c({}, G)) : g != null ? u = g : n ? u = n[0] : u = /* @__PURE__ */ v(M, c({}, U)), /* @__PURE__ */ v(w, c({}, E, {
    children: u
  }));
});
process.env.NODE_ENV !== "production" && (ao.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * Used in combination with `src` or `srcSet` to
   * provide an alt attribute for the rendered `img` element.
   */
  alt: o.string,
  /**
   * Used to render icon or text elements inside the Avatar if `src` is not set.
   * This can be an element, or just a string.
   */
  children: o.node,
  /**
   * The color of the component. It supports those theme colors that make sense for this component.
   * @default 'neutral'
   */
  color: o.oneOfType([o.oneOf(["danger", "neutral", "primary", "success", "warning"]), o.string]),
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: o.elementType,
  /**
   * The size of the component.
   * It accepts theme values between 'sm' and 'lg'.
   * @default 'md'
   */
  size: o.oneOfType([o.oneOf(["lg", "md", "sm"]), o.string]),
  /**
   * The props used for each slot inside.
   * @default {}
   */
  slotProps: o.shape({
    fallback: o.oneOfType([o.func, o.object]),
    img: o.oneOfType([o.func, o.object]),
    root: o.oneOfType([o.func, o.object])
  }),
  /**
   * The components used for each slot inside.
   * @default {}
   */
  slots: o.shape({
    fallback: o.elementType,
    img: o.elementType,
    root: o.elementType
  }),
  /**
   * The `src` attribute for the `img` element.
   */
  src: o.string,
  /**
   * The `srcSet` attribute for the `img` element.
   * Use this attribute for responsive image display.
   */
  srcSet: o.string,
  /**
   * 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]),
  /**
   * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
   * @default 'soft'
   */
  variant: o.oneOfType([o.oneOf(["outlined", "plain", "soft", "solid"]), o.string])
});
export {
  ao as A
};
