import { s as F, r as R, _ as r, t as _, v as E, P as o, J as f, l as V } from "./PrizeCard-C2El3VOB.js";
import * as c from "react";
import { jsxs as j, jsx as m } from "react/jsx-runtime";
import { s as B, u as M, a as A, c as L } from "./Button-DPGn5NZd.js";
function X(n) {
  return F("MuiSvgIcon", n);
}
R("MuiSvgIcon", ["root", "colorInherit", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "fontSizeInherit", "fontSizeXs", "fontSizeSm", "fontSizeMd", "fontSizeLg", "fontSizeXl", "fontSizeXl2", "fontSizeXl3", "fontSizeXl4", "sizeSm", "sizeMd", "sizeLg"]);
const k = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox", "size", "slots", "slotProps"], D = (n) => {
  const {
    color: e,
    size: s,
    fontSize: i
  } = n, t = {
    root: ["root", e && e !== "inherit" && `color${f(e)}`, s && `size${f(s)}`, i && `fontSize${f(i)}`]
  };
  return L(t, X, {});
}, u = {
  sm: "xl",
  md: "xl2",
  lg: "xl3"
}, U = B("svg", {
  name: "JoySvgIcon",
  slot: "Root",
  overridesResolver: (n, e) => e.root
})(({
  theme: n,
  ownerState: e
}) => {
  var s;
  return r({}, e.instanceSize && {
    "--Icon-fontSize": n.vars.fontSize[u[e.instanceSize]]
  }, e.instanceFontSize && e.instanceFontSize !== "inherit" && {
    "--Icon-fontSize": n.vars.fontSize[e.instanceFontSize]
  }, {
    userSelect: "none",
    margin: "var(--Icon-margin)",
    width: "1em",
    height: "1em",
    display: "inline-block",
    // the <svg> will define the property that has `currentColor`
    // for example heroicons uses fill="none" and stroke="currentColor"
    fill: e.hasSvgAsChild ? void 0 : "currentColor",
    flexShrink: 0,
    fontSize: `var(--Icon-fontSize, ${n.vars.fontSize[u[e.size]] || "unset"})`
  }, e.fontSize && e.fontSize !== "inherit" && {
    fontSize: `var(--Icon-fontSize, ${n.fontSize[e.fontSize]})`
  }, !e.htmlColor && r({
    color: `var(--Icon-color, ${n.vars.palette.text.icon})`
  }, e.color === "inherit" && {
    color: "inherit"
  }, e.color !== "inherit" && n.vars.palette[e.color] && {
    color: `rgba(${(s = n.vars.palette[e.color]) == null ? void 0 : s.mainChannel} / 1)`
  }));
}), p = /* @__PURE__ */ c.forwardRef(function(e, s) {
  const i = M({
    props: e,
    name: "JoySvgIcon"
  }), {
    children: t,
    className: h,
    color: v,
    component: z = "svg",
    fontSize: x,
    htmlColor: C,
    inheritViewBox: d = !1,
    titleAccess: l,
    viewBox: S = "0 0 24 24",
    size: y = "md",
    slots: I = {},
    slotProps: N = {}
  } = i, O = _(i, k), a = /* @__PURE__ */ c.isValidElement(t) && t.type === "svg", g = r({}, i, {
    color: v,
    component: z,
    size: y,
    instanceSize: e.size,
    fontSize: x,
    instanceFontSize: e.fontSize,
    inheritViewBox: d,
    viewBox: S,
    hasSvgAsChild: a
  }), T = D(g), $ = r({}, O, {
    component: z,
    slots: I,
    slotProps: N
  }), [b, P] = A("root", {
    ref: s,
    className: E(T.root, h),
    elementType: U,
    externalForwardedProps: $,
    ownerState: g,
    additionalProps: r({
      color: C,
      focusable: !1
    }, l && {
      role: "img"
    }, !l && {
      "aria-hidden": !0
    }, !d && {
      viewBox: S
    }, a && t.props)
  });
  return /* @__PURE__ */ j(b, r({}, P, {
    children: [a ? t.props.children : t, l ? /* @__PURE__ */ m("title", {
      children: l
    }) : null]
  }));
});
process.env.NODE_ENV !== "production" && (p.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * Node passed into the SVG element.
   */
  children: o.node,
  /**
   * @ignore
   */
  className: o.string,
  /**
   * The color of the component. It supports those theme colors that make sense for this component.
   * You can use the `htmlColor` prop to apply a color attribute to the SVG element.
   */
  color: o.oneOfType([o.oneOf(["danger", "inherit", "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 theme's fontSize applied to the icon that will override the `size` prop.
   * Use this prop when you want to use a specific font-size from the theme.
   */
  fontSize: o.oneOfType([o.oneOf(["inherit", "lg", "md", "sm", "xl", "xl2", "xl3", "xl4", "xs"]), o.string]),
  /**
   * Applies a color attribute to the SVG element.
   */
  htmlColor: o.string,
  /**
   * If `true`, the root node will inherit the custom `component`'s viewBox and the `viewBox`
   * prop will be ignored.
   * Useful when you want to reference a custom `component` and have `SvgIcon` pass that
   * `component`'s viewBox to the root node.
   * @default false
   */
  inheritViewBox: o.bool,
  /**
   * The shape-rendering attribute. The behavior of the different options is described on the
   * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering).
   * If you are having issues with blurry icons you should investigate this prop.
   */
  shapeRendering: o.string,
  /**
   * The size of the component.
   * @default 'md'
   */
  size: o.oneOfType([o.oneOf(["sm", "md", "lg"]), 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]),
  /**
   * Provides a human-readable title for the element that contains it.
   * https://www.w3.org/TR/SVG-access/#Equivalent
   */
  titleAccess: o.string,
  /**
   * Allows you to redefine what the coordinates without units mean inside an SVG element.
   * For example, if the SVG element is 500 (width) by 200 (height),
   * and you pass viewBox="0 0 50 20",
   * this means that the coordinates inside the SVG will go from the top left corner (0,0)
   * to bottom right (50,20) and each unit will be worth 10px.
   * @default '0 0 24 24'
   */
  viewBox: o.string
});
function H(n, e) {
  function s(i, t) {
    return /* @__PURE__ */ m(p, r({
      "data-testid": `${e}Icon`,
      ref: t
    }, i, {
      children: n
    }));
  }
  return process.env.NODE_ENV !== "production" && (s.displayName = `${e}Icon`), s.muiName = p.muiName, /* @__PURE__ */ c.memo(/* @__PURE__ */ c.forwardRef(s));
}
const J = /* @__PURE__ */ c.createContext(void 0);
process.env.NODE_ENV !== "production" && (J.displayName = "FormControlContext");
const K = V(/* @__PURE__ */ m("path", {
  d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z"
}), "CheckCircle");
export {
  K as C,
  J as F,
  H as c
};
