braid-design-system
Version:
Themeable design system for the SEEK Group
50 lines (49 loc) • 1.46 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { atoms } from "../../css/atoms/atoms.mjs";
import { Box } from "../Box/Box.mjs";
import { buildDataAttributes } from "../private/buildDataAttributes.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
};