import { jsx, jsxs } from "react/jsx-runtime";
import { Box } from "../Box/Box.mjs";
import { buildDataAttributes } from "../Accordion/Accordion.mjs";
import { atoms } from "../../css/atoms/atoms.mjs";
import { rootSize, delay, size, currentColor, circle } from "./Loader.css.mjs";
import { tone } from "../../css/typography.css.mjs";
const Loader = ({
  size: size$1 = "standard",
  "aria-label": ariaLabel = "Loading",
  delayVisibility = false,
  data,
  ...restProps
}) => /* @__PURE__ */ jsx(
  Box,
  {
    display: "flex",
    alignItems: "center",
    className: [
      rootSize[size$1],
      delayVisibility ? delay : void 0
    ],
    "aria-label": ariaLabel,
    role: "alert",
    "aria-live": "assertive",
    ...buildDataAttributes({ data, validateRestProps: restProps }),
    children: /* @__PURE__ */ jsxs(
      "svg",
      {
        xmlns: "http://www.w3.org/2000/svg",
        className: [
          atoms({ reset: "svg" }),
          size[size$1],
          currentColor,
          tone.neutral
        ].join(" "),
        viewBox: "0 0 302 134",
        "aria-hidden": true,
        children: [
          /* @__PURE__ */ jsx("circle", { className: circle, cy: "67", cx: "40", r: "40" }),
          /* @__PURE__ */ jsx("circle", { className: circle, cy: "67", cx: "150", r: "40" }),
          /* @__PURE__ */ jsx("circle", { className: circle, cy: "67", cx: "260", r: "40" })
        ]
      }
    )
  }
);
export {
  Loader
};
