/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
import { extractStyles } from "../../../tasty/utils/styles.js";
import { keyframes } from "../../../tasty/injector/index.js";
import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
import { tasty } from "../../../tasty/tasty.js";
import { filterBaseProps } from "../../../tasty/utils/filter-base-props.js";
import { forwardRef } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/components/content/Placeholder/Placeholder.tsx
const placeholderAnimation = keyframes({
	"0%": { "background-position": "0 0" },
	"100%": { "background-position": "$placeholder-animation-size 0" }
});
const StyledPlaceholder = tasty({
	role: "alert",
	"aria-live": "polite",
	"aria-label": "Content is loading",
	styles: {
		display: "block",
		fill: "#dark.10",
		height: "2x",
		opacity: ".35",
		aspectRatio: {
			"": "initial",
			circle: "1 / 1"
		},
		radius: {
			"": "1r",
			circle: "round"
		},
		"$placeholder-animation-time": "1.4s",
		"$placeholder-animation-size": "calc((180rem + 100vw) / 3)",
		backgroundRepeat: "repeat",
		backgroundSize: "$placeholder-animation-size",
		backgroundColor: "#dark.15",
		animation: {
			"": "none",
			animated: `${placeholderAnimation} $placeholder-animation-time linear infinite`
		},
		backgroundImage: {
			"": "none",
			animated: `linear-gradient(
        135deg,
        #dark.15 0%,
        #dark.15 5%,
        #dark.0 35%,
        #dark-03.2 50%,
        #dark-03.0 65%,
        #dark.15 95%,
        #dark.15 100%
      )`
		}
	}
});
const Placeholder = forwardRef(function Placeholder(allProps, ref) {
	let { size = "2x", isStatic, circle, ...props } = allProps;
	let styles = extractStyles(props, CONTAINER_STYLES);
	return /* @__PURE__ */ jsx(StyledPlaceholder, {
		role: "region",
		...filterBaseProps(props, { eventProps: true }),
		ref,
		mods: {
			animated: !isStatic,
			circle
		},
		styles: {
			height: size,
			...styles
		}
	});
});

//#endregion
export { Placeholder };
//# sourceMappingURL=Placeholder.js.map