import { _ as r, t as P, v as b, P as i, J as k } from "./PrizeCard-C2El3VOB.js";
import * as T from "react";
import { g as _ } from "./Notification-BG5P1Xiq.js";
import { s as C, u as O, a as z, c as N } from "./Button-DPGn5NZd.js";
import { jsx as R } from "react/jsx-runtime";
const j = ["className", "children", "component", "inset", "orientation", "role", "slots", "slotProps"], B = (o) => {
  const {
    orientation: e,
    inset: t
  } = o, n = {
    root: ["root", e, t && `inset${k(t)}`]
  };
  return N(n, _, {});
}, E = C("hr", {
  name: "JoyDivider",
  slot: "Root",
  overridesResolver: (o, e) => e.root
})(({
  theme: o,
  ownerState: e
}) => r({
  "--Divider-thickness": "1px",
  "--Divider-lineColor": o.vars.palette.divider
}, e.inset === "none" && {
  "--_Divider-inset": "0px"
}, e.inset === "context" && {
  "--_Divider-inset": "var(--Divider-inset, 0px)"
}, {
  margin: "initial",
  // reset margin for `hr` tag
  marginInline: e.orientation === "vertical" ? "initial" : "var(--_Divider-inset)",
  marginBlock: e.orientation === "vertical" ? "var(--_Divider-inset)" : "initial",
  position: "relative",
  alignSelf: "stretch",
  flexShrink: 0
}, e.children ? r({
  "--Divider-gap": o.spacing(1),
  "--Divider-childPosition": "50%",
  display: "flex",
  flexDirection: e.orientation === "vertical" ? "column" : "row",
  alignItems: "center",
  whiteSpace: "nowrap",
  textAlign: "center",
  border: 0
}, o.typography["body-sm"], {
  "&::before, &::after": {
    position: "relative",
    inlineSize: e.orientation === "vertical" ? "var(--Divider-thickness)" : "initial",
    blockSize: e.orientation === "vertical" ? "initial" : "var(--Divider-thickness)",
    backgroundColor: "var(--Divider-lineColor)",
    // use logical size + background is better than border because they work with gradient.
    content: '""'
  },
  "&::before": {
    marginInlineEnd: e.orientation === "vertical" ? "initial" : "min(var(--Divider-childPosition) * 999, var(--Divider-gap))",
    marginBlockEnd: e.orientation === "vertical" ? "min(var(--Divider-childPosition) * 999, var(--Divider-gap))" : "initial",
    flexBasis: "var(--Divider-childPosition)"
  },
  "&::after": {
    marginInlineStart: e.orientation === "vertical" ? "initial" : "min((100% - var(--Divider-childPosition)) * 999, var(--Divider-gap))",
    marginBlockStart: e.orientation === "vertical" ? "min((100% - var(--Divider-childPosition)) * 999, var(--Divider-gap))" : "initial",
    flexBasis: "calc(100% - var(--Divider-childPosition))"
  }
}) : {
  border: "none",
  // reset the border for `hr` tag
  listStyle: "none",
  backgroundColor: "var(--Divider-lineColor)",
  // use logical size + background is better than border because they work with gradient.
  inlineSize: e.orientation === "vertical" ? "var(--Divider-thickness)" : "initial",
  blockSize: e.orientation === "vertical" ? "initial" : "var(--Divider-thickness)"
})), d = /* @__PURE__ */ T.forwardRef(function(e, t) {
  const n = O({
    props: e,
    name: "JoyDivider"
  }), {
    className: p,
    children: a,
    component: s = a != null ? "div" : "hr",
    inset: m,
    orientation: c = "horizontal",
    role: l = s !== "hr" ? "separator" : void 0,
    slots: D = {},
    slotProps: f = {}
  } = n, h = P(n, j), v = r({}, n, {
    inset: m,
    role: l,
    orientation: c,
    component: s
  }), g = B(v), u = r({}, h, {
    component: s,
    slots: D,
    slotProps: f
  }), [y, x] = z("root", {
    ref: t,
    className: b(g.root, p),
    elementType: E,
    externalForwardedProps: u,
    ownerState: v,
    additionalProps: r({
      as: s,
      role: l
    }, l === "separator" && c === "vertical" && {
      // The implicit aria-orientation of separator is 'horizontal'
      // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role
      "aria-orientation": "vertical"
    })
  });
  return /* @__PURE__ */ R(y, r({}, x, {
    children: a
  }));
});
process.env.NODE_ENV !== "production" && (d.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: i.node,
  /**
   * @ignore
   */
  className: i.string,
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: i.elementType,
  /**
   * Class name applied to the divider to shrink or stretch the line based on the orientation.
   */
  inset: i.oneOfType([i.oneOf(["none", "context"]), i.string]),
  /**
   * The component orientation.
   * @default 'horizontal'
   */
  orientation: i.oneOf(["horizontal", "vertical"]),
  /**
   * @ignore
   */
  role: i.string,
  /**
   * The props used for each slot inside.
   * @default {}
   */
  slotProps: i.shape({
    root: i.oneOfType([i.func, i.object])
  }),
  /**
   * The components used for each slot inside.
   * @default {}
   */
  slots: i.shape({
    root: i.elementType
  }),
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: i.oneOfType([i.arrayOf(i.oneOfType([i.func, i.object, i.bool])), i.func, i.object])
});
d.muiName = "Divider";
export {
  d as D
};
