import { P as e, Q as C, _ as b, R as g, S as f, T as R, U as N, V as D, L as F, t as E, v as _, X as T, Y as B } from "./PrizeCard-C2El3VOB.js";
import { x as G, y as w, c as U, s as $, u as L } from "./Button-DPGn5NZd.js";
import * as m from "react";
import { jsx as M } from "react/jsx-runtime";
const A = G(), J = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"], I = C(), Q = A("div", {
  name: "MuiStack",
  slot: "Root",
  overridesResolver: (o, r) => r.root
});
function W(o) {
  return w({
    props: o,
    name: "MuiStack",
    defaultTheme: I
  });
}
function X(o, r) {
  const c = m.Children.toArray(o).filter(Boolean);
  return c.reduce((a, i, n) => (a.push(i), n < c.length - 1 && a.push(/* @__PURE__ */ m.cloneElement(r, {
    key: `separator-${n}`
  })), a), []);
}
const Y = (o) => ({
  row: "Left",
  "row-reverse": "Right",
  column: "Top",
  "column-reverse": "Bottom"
})[o], q = ({
  ownerState: o,
  theme: r
}) => {
  let c = b({
    display: "flex",
    flexDirection: "column"
  }, g({
    theme: r
  }, f({
    values: o.direction,
    breakpoints: r.breakpoints.values
  }), (a) => ({
    flexDirection: a
  })));
  if (o.spacing) {
    const a = R(r), i = Object.keys(r.breakpoints.values).reduce((s, t) => ((typeof o.spacing == "object" && o.spacing[t] != null || typeof o.direction == "object" && o.direction[t] != null) && (s[t] = !0), s), {}), n = f({
      values: o.direction,
      base: i
    }), l = f({
      values: o.spacing,
      base: i
    });
    typeof n == "object" && Object.keys(n).forEach((s, t, p) => {
      if (!n[s]) {
        const d = t > 0 ? n[p[t - 1]] : "column";
        n[s] = d;
      }
    }), c = N(c, g({
      theme: r
    }, l, (s, t) => o.useFlexGap ? {
      gap: T(a, s)
    } : {
      // The useFlexGap={false} implement relies on each child to give up control of the margin.
      // We need to reset the margin to avoid double spacing.
      "& > :not(style):not(style)": {
        margin: 0
      },
      "& > :not(style) ~ :not(style)": {
        [`margin${Y(t ? n[t] : o.direction)}`]: T(a, s)
      }
    }));
  }
  return c = D(r.breakpoints, c), c;
};
function z(o = {}) {
  const {
    // This will allow adding custom styled fn (for example for custom sx style function)
    createStyledComponent: r = Q,
    useThemeProps: c = W,
    componentName: a = "MuiStack"
  } = o, i = () => U({
    root: ["root"]
  }, (s) => B(a, s), {}), n = r(q), l = /* @__PURE__ */ m.forwardRef(function(s, t) {
    const p = c(s), u = F(p), {
      component: d = "div",
      direction: h = "column",
      spacing: j = 0,
      divider: v,
      children: O,
      className: k,
      useFlexGap: x = !1
    } = u, P = E(u, J), S = {
      direction: h,
      spacing: j,
      useFlexGap: x
    }, V = i();
    return /* @__PURE__ */ M(n, b({
      as: d,
      ownerState: S,
      ref: t,
      className: _(V.root, k)
    }, P, {
      children: v ? X(O, v) : O
    }));
  });
  return process.env.NODE_ENV !== "production" && (l.propTypes = {
    children: e.node,
    direction: e.oneOfType([e.oneOf(["column-reverse", "column", "row-reverse", "row"]), e.arrayOf(e.oneOf(["column-reverse", "column", "row-reverse", "row"])), e.object]),
    divider: e.node,
    spacing: e.oneOfType([e.arrayOf(e.oneOfType([e.number, e.string])), e.number, e.object, e.string]),
    sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
  }), l;
}
const H = z({
  createStyledComponent: $("div", {
    name: "JoyStack",
    slot: "Root",
    overridesResolver: (o, r) => r.root
  }),
  useThemeProps: (o) => L({
    props: o,
    name: "JoyStack"
  })
});
process.env.NODE_ENV !== "production" && (H.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 component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: e.elementType,
  /**
   * Defines the `flex-direction` style property.
   * It is applied for all screen sizes.
   * @default 'column'
   */
  direction: e.oneOfType([e.oneOf(["column-reverse", "column", "row-reverse", "row"]), e.arrayOf(e.oneOf(["column-reverse", "column", "row-reverse", "row"])), e.object]),
  /**
   * Add an element between each child.
   */
  divider: e.node,
  /**
   * Defines the space between immediate children.
   * @default 0
   */
  spacing: e.oneOfType([e.arrayOf(e.oneOfType([e.number, e.string])), e.number, e.object, e.string]),
  /**
   * The system prop, which 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]),
  /**
   * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
   *
   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
   * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
   *
   * To enable this flag globally, follow the [theme's default props](https://mui.com/joy-ui/customization/themed-components/#default-props) configuration.
   * @default false
   */
  useFlexGap: e.bool
});
export {
  H as S
};
