react-loadly 1.0.1 → 1.1.0

package/dist/index.cjs.js

@@ -1,1702 +1,2 @@
-'use strict';
-
-var React = require('react');
-
-/**
- * Merges default props with user props, handling undefined values gracefully
- * @param defaultProps - The default props to merge
- * @param userProps - The user provided props
- * @returns Merged props object
- */
-function mergeProps(defaultProps, userProps) {
-    return { ...defaultProps, ...userProps };
-}
-/**
- * Converts size prop to CSS value
- * @param size - The size value (number or string)
- * @param fallback - The fallback value if size is undefined
- * @returns CSS size value as string
- */
-function getSizeValue(size, fallback = "40px") {
-    if (size === undefined)
-        return fallback;
-    if (typeof size === "number")
-        return `${size}px`;
-    return size;
-}
-/**
- * Generates CSS custom properties object from loader variables
- * @param variables - The loader CSS variables object
- * @returns React CSS properties object
- */
-function generateCSSVariables(variables) {
-    const cssProps = {};
-    Object.entries(variables).forEach(([key, value]) => {
-        if (value !== undefined) {
-            cssProps[key] = value;
-        }
-    });
-    return cssProps;
-}
-
-/**
- * Calculates animation duration based on speed multiplier
- * @param baseMs - The base duration in milliseconds
- * @param speed - The speed multiplier (default: 1)
- * @returns Formatted duration string
- */
-function getAnimationDuration(baseMs, speed = 1) {
-    const duration = baseMs / Math.max(speed, 0.1); // Prevent division by zero
-    return `${duration}ms`;
-}
-/**
- * Creates a CSS animation name with prefix
- * @param name - The base name for the animation
- * @returns Prefixed animation name
- */
-function createAnimationName(name) {
-    return `react-loadly-${name}`;
-}
-/**
- * Check if reduced motion is preferred
- * @returns Boolean indicating if reduced motion is preferred
- */
-function prefersReducedMotion() {
-    // Check if we're in a browser environment
-    if (typeof window === "undefined" || !window.matchMedia)
-        return false;
-    try {
-        return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    }
-    catch (e) {
-        return false;
-    }
-}
-/**
- * Get optimized animation settings based on user preferences
- * @param speed - The animation speed multiplier (default: 1)
- * @returns Object with optimized animation settings
- */
-function getOptimizedAnimationSettings(speed = 1) {
-    // In test environments, disable animations to prevent test failures
-    if (typeof process !== "undefined" && process.env.NODE_ENV === "test") {
-        return {
-            duration: "0ms",
-            playState: "paused",
-            iterationCount: 1,
-        };
-    }
-    const reducedMotion = prefersReducedMotion();
-    return {
-        duration: reducedMotion ? "0ms" : getAnimationDuration(1000, speed),
-        playState: reducedMotion ? "paused" : "running",
-        iterationCount: reducedMotion ? 1 : "infinite",
-    };
-}
-
-/**
- * Converts hex color to RGB values
- * @param hex - The hex color string
- * @returns Object with r, g, b values or null if invalid
- */
-function hexToRgb(hex) {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return result
-        ? {
-            r: parseInt(result[1], 16),
-            g: parseInt(result[2], 16),
-            b: parseInt(result[3], 16),
-        }
-        : null;
-}
-/**
- * Generates rgba color with opacity
- * @param color - The hex color string
- * @param opacity - The opacity value (0-1)
- * @returns RGBA color string
- */
-function rgba(color, opacity) {
-    const rgb = hexToRgb(color);
-    if (!rgb)
-        return color;
-    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${clamp(opacity, 0, 1)})`;
-}
-
-/**
- * Clamps a value between min and max
- * @param value - The value to clamp
- * @param min - The minimum value
- * @param max - The maximum value
- * @returns The clamped value
- */
-function clamp(value, min, max) {
-    return Math.min(Math.max(value, min), max);
-}
-
-/**
- * Generates unique IDs for accessibility
- * @param prefix - The prefix for the ID (default: "loader")
- * @returns A unique ID string
- */
-function generateId(prefix = "loader") {
-    return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
-}
-/**
- * Validates and sanitizes CSS values
- * @param value - The CSS value to sanitize
- * @returns Sanitized CSS value or undefined
- */
-function sanitizeCSSValue(value) {
-    if (value === undefined || value === null)
-        return undefined;
-    if (typeof value === "number")
-        return `${value}px`;
-    if (typeof value === "string") {
-        // Basic sanitization - remove potentially dangerous CSS
-        return value.replace(/[<>'"]/g, "");
-    }
-    return undefined;
-}
-
-const Dot = ({ size = 8, color = "var(--react-loadly-color)", opacity = 1, className = "", style = {}, animation, animationDuration, animationDelay, glowIntensity = 0, "data-testid": dataTestId, ...props }) => {
-    const sizeValue = getSizeValue(size);
-    const dotStyle = {
-        width: sizeValue,
-        height: sizeValue,
-        borderRadius: "50%",
-        backgroundColor: color,
-        opacity,
-        animation: animation ? `${animation} ${animationDuration || "1s"} infinite` : undefined,
-        animationDelay,
-        display: "inline-block",
-        boxShadow: glowIntensity > 0 ? `0 0 ${glowIntensity * 10}px ${color}` : undefined,
-        ...style,
-    };
-    return React.createElement("div", { className: `react-loadly-dot ${className}`.trim(), style: dotStyle, "data-testid": dataTestId, ...props });
-};
-
-const Line = ({ width = 30, height = 4, color = "var(--react-loadly-color)", opacity = 1, borderRadius = 2, className = "", style = {}, animation, animationDuration, animationDelay, orientation = "horizontal", "data-testid": dataTestId, ...props }) => {
-    const widthValue = getSizeValue(width);
-    const heightValue = getSizeValue(height);
-    const borderRadiusValue = sanitizeCSSValue(borderRadius);
-    const lineStyle = {
-        width: orientation === "vertical" ? heightValue : widthValue,
-        height: orientation === "vertical" ? widthValue : heightValue,
-        backgroundColor: color,
-        opacity,
-        borderRadius: borderRadiusValue,
-        animation: animation ? `${animation} ${animationDuration || "1s"} infinite` : undefined,
-        animationDelay,
-        display: "inline-block",
-        ...style,
-    };
-    return (React.createElement("div", { className: `react-loadly-line react-loadly-line-${orientation} ${className}`.trim(), style: lineStyle, "data-testid": dataTestId, ...props }));
-};
-
-const Rectangle = ({ width = 20, height = 20, color = "var(--react-loadly-color)", borderColor, borderWidth = 0, borderRadius = 0, opacity = 1, className = "", style = {}, animation, animationDuration, animationDelay, "data-testid": dataTestId, ...props }) => {
-    const widthValue = getSizeValue(width);
-    const heightValue = getSizeValue(height);
-    const borderWidthValue = sanitizeCSSValue(borderWidth);
-    const borderRadiusValue = sanitizeCSSValue(borderRadius);
-    const rectangleStyle = {
-        width: widthValue,
-        height: heightValue,
-        backgroundColor: borderColor ? "transparent" : color,
-        border: borderColor ? `${borderWidthValue} solid ${borderColor}` : undefined,
-        borderRadius: borderRadiusValue,
-        opacity,
-        animation: animation ? `${animation} ${animationDuration || "1s"} infinite` : undefined,
-        animationDelay,
-        display: "inline-block",
-        ...style,
-    };
-    return React.createElement("div", { className: `react-loadly-rectangle ${className}`.trim(), style: rectangleStyle, "data-testid": dataTestId, ...props });
-};
-
-const Circle = ({ size = 20, color = "var(--react-loadly-color)", borderColor, borderWidth = 0, opacity = 1, className = "", style = {}, animation, animationDuration, animationDelay, "data-testid": dataTestId, ...props }) => {
-    const sizeValue = getSizeValue(size);
-    const borderWidthValue = sanitizeCSSValue(borderWidth);
-    const circleStyle = {
-        width: sizeValue,
-        height: sizeValue,
-        borderRadius: "50%",
-        backgroundColor: borderColor ? "transparent" : color,
-        border: borderColor ? `${borderWidthValue} solid ${borderColor}` : undefined,
-        opacity,
-        animation: animation ? `${animation} ${animationDuration || "1s"} infinite` : undefined,
-        animationDelay,
-        display: "inline-block",
-        ...style,
-    };
-    return React.createElement("div", { className: `react-loadly-circle ${className}`.trim(), style: circleStyle, "data-testid": dataTestId, ...props });
-};
-
-const DotCluster = ({ count = 3, dotSize = 8, color = "var(--react-loadly-color)", secondaryColor, spacing = 8, speed = 1, arrangement = "linear", className = "", style = {}, animationType = "wave", "data-testid": dataTestId, ...props }) => {
-    const spacingValue = getSizeValue(spacing);
-    const animationDuration = getAnimationDuration(1200, speed);
-    const getArrangementStyle = () => {
-        switch (arrangement) {
-            case "circular":
-                return {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    position: "relative",
-                    width: `${(parseInt(getSizeValue(dotSize)) + parseInt(spacingValue)) * 2}px`,
-                    height: `${(parseInt(getSizeValue(dotSize)) + parseInt(spacingValue)) * 2}px`,
-                };
-            case "grid": {
-                const gridSize = Math.ceil(Math.sqrt(count));
-                return {
-                    display: "grid",
-                    gridTemplateColumns: `repeat(${gridSize}, 1fr)`,
-                    gap: spacingValue,
-                };
-            }
-            default: // linear
-                return {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: spacingValue,
-                };
-        }
-    };
-    const getDotPosition = (index) => {
-        if (arrangement === "circular") {
-            const angle = (index / count) * 2 * Math.PI;
-            const radius = parseInt(spacingValue);
-            return {
-                position: "absolute",
-                left: "50%",
-                top: "50%",
-                transform: `translate(-50%, -50%) translate(${Math.cos(angle) * radius}px, ${Math.sin(angle) * radius}px)`,
-            };
-        }
-        return {};
-    };
-    const getDotAnimationDelay = (index) => {
-        return `${(index * 0.1) / speed}s`;
-    };
-    const containerStyle = {
-        ...getArrangementStyle(),
-        ...style,
-    };
-    return (React.createElement("div", { className: `react-loadly-dot-cluster react-loadly-dot-cluster-${arrangement} ${className}`.trim(), style: containerStyle, "data-testid": dataTestId, ...props }, Array.from({ length: count }, (_, index) => (React.createElement(Dot, { key: index, size: dotSize, color: secondaryColor && index % 2 === 1 ? secondaryColor : color, animation: `react-loadly-${animationType}`, animationDuration: animationDuration, animationDelay: getDotAnimationDelay(index), style: getDotPosition(index), "data-testid": dataTestId ? `${dataTestId}-dot-${index}` : undefined })))));
-};
-
-const LineGroup = ({ count = 5, lineWidth = 4, lineHeight = 35, color = "var(--react-loadly-color)", secondaryColor, spacing = 6, speed = 1, arrangement = "parallel", orientation = "vertical", className = "", style = {}, animationType = "wave", "data-testid": dataTestId, ...props }) => {
-    const spacingValue = getSizeValue(spacing);
-    const animationDuration = getAnimationDuration(1000, speed);
-    const getArrangementStyle = () => {
-        switch (arrangement) {
-            case "radial":
-                return {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    position: "relative",
-                    width: `${parseInt(getSizeValue(lineHeight)) * 1.5}px`,
-                    height: `${parseInt(getSizeValue(lineHeight)) * 1.5}px`,
-                };
-            case "staggered":
-                return {
-                    display: "flex",
-                    alignItems: "flex-end",
-                    justifyContent: "center",
-                    gap: spacingValue,
-                };
-            default: // parallel
-                return {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    gap: spacingValue,
-                };
-        }
-    };
-    const getLinePosition = (index) => {
-        if (arrangement === "radial") {
-            const angle = (index / count) * 2 * Math.PI;
-            return {
-                position: "absolute",
-                left: "50%",
-                top: "50%",
-                transformOrigin: "center",
-                transform: `translate(-50%, -50%) rotate(${angle}rad)`,
-            };
-        }
-        if (arrangement === "staggered") {
-            const heightMultiplier = 0.3 + 0.7 * Math.sin((index / count) * Math.PI);
-            return {
-                height: orientation === "vertical" ? `${parseInt(getSizeValue(lineHeight)) * heightMultiplier}px` : getSizeValue(lineHeight),
-            };
-        }
-        return {};
-    };
-    const getLineAnimationDelay = (index) => {
-        return `${(index * 0.1) / speed}s`;
-    };
-    const containerStyle = {
-        ...getArrangementStyle(),
-        ...style,
-    };
-    return (React.createElement("div", { className: `react-loadly-line-group react-loadly-line-group-${arrangement} ${className}`.trim(), style: containerStyle, "data-testid": dataTestId, ...props }, Array.from({ length: count }, (_, index) => (React.createElement(Line, { key: index, width: orientation === "horizontal" ? lineWidth : lineHeight, height: orientation === "horizontal" ? lineHeight : lineWidth, color: secondaryColor && index % 2 === 1 ? secondaryColor : color, orientation: orientation, animation: `react-loadly-${animationType}`, animationDuration: animationDuration, animationDelay: getLineAnimationDelay(index), style: getLinePosition(index), "data-testid": dataTestId ? `${dataTestId}-line-${index}` : undefined })))));
-};
-
-const ShapeGroup = ({ count = 4, shapeSize = 16, color = "var(--react-loadly-color)", secondaryColor, spacing = 8, speed = 1, arrangement = "linear", shapeTypes = ["circle", "rectangle"], className = "", style = {}, animationType = "pulse", borderWidth = 0, "data-testid": dataTestId, ...props }) => {
-    const spacingValue = getSizeValue(spacing);
-    const animationDuration = getAnimationDuration(800, speed);
-    const getArrangementStyle = () => {
-        switch (arrangement) {
-            case "circular":
-                return {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    position: "relative",
-                    width: `${(parseInt(getSizeValue(shapeSize)) + parseInt(spacingValue)) * 2.5}px`,
-                    height: `${(parseInt(getSizeValue(shapeSize)) + parseInt(spacingValue)) * 2.5}px`,
-                };
-            case "spiral":
-                return {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    position: "relative",
-                    width: `${(parseInt(getSizeValue(shapeSize)) + parseInt(spacingValue)) * 3}px`,
-                    height: `${(parseInt(getSizeValue(shapeSize)) + parseInt(spacingValue)) * 3}px`,
-                };
-            default: // linear
-                return {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: spacingValue,
-                };
-        }
-    };
-    const getShapePosition = (index) => {
-        if (arrangement === "circular") {
-            const angle = (index / count) * 2 * Math.PI;
-            const radius = parseInt(spacingValue) * 2;
-            return {
-                position: "absolute",
-                left: "50%",
-                top: "50%",
-                transform: `translate(-50%, -50%) translate(${Math.cos(angle) * radius}px, ${Math.sin(angle) * radius}px)`,
-            };
-        }
-        if (arrangement === "spiral") {
-            const angle = (index / count) * 4 * Math.PI;
-            const radius = ((index + 1) * parseInt(spacingValue)) / 2;
-            return {
-                position: "absolute",
-                left: "50%",
-                top: "50%",
-                transform: `translate(-50%, -50%) translate(${Math.cos(angle) * radius}px, ${Math.sin(angle) * radius}px)`,
-            };
-        }
-        return {};
-    };
-    const getShapeAnimationDelay = (index) => {
-        return `${(index * 0.15) / speed}s`;
-    };
-    const getShapeType = (index) => {
-        return shapeTypes[index % shapeTypes.length];
-    };
-    const containerStyle = {
-        ...getArrangementStyle(),
-        ...style,
-    };
-    const renderShape = (index) => {
-        const shapeType = getShapeType(index);
-        const shapeColor = secondaryColor && index % 2 === 1 ? secondaryColor : color;
-        const commonProps = {
-            key: index,
-            color: borderWidth > 0 ? undefined : shapeColor,
-            borderColor: borderWidth > 0 ? shapeColor : undefined,
-            borderWidth: borderWidth > 0 ? borderWidth : undefined,
-            animation: `react-loadly-${animationType}`,
-            animationDuration,
-            animationDelay: getShapeAnimationDelay(index),
-            style: getShapePosition(index),
-            "data-testid": dataTestId ? `${dataTestId}-shape-${index}` : undefined,
-        };
-        if (shapeType === "circle") {
-            return React.createElement(Circle, { ...commonProps, size: shapeSize });
-        }
-        else {
-            return React.createElement(Rectangle, { ...commonProps, width: shapeSize, height: shapeSize });
-        }
-    };
-    return (React.createElement("div", { className: `react-loadly-shape-group react-loadly-shape-group-${arrangement} ${className}`.trim(), style: containerStyle, "data-testid": dataTestId, ...props }, Array.from({ length: count }, (_, index) => renderShape(index))));
-};
-
-const defaultProps$e = {
-    size: 20,
-    color: "var(--react-loadly-color)",
-    speed: 1,
-    loading: true,
-    count: 5,
-    "aria-label": "Loading...",
-};
-const BarsLoader = (userProps) => {
-    const props = mergeProps(defaultProps$e, userProps);
-    const { size, color, speed, loading, className = "", style = {}, count = 5, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, fullscreen, screenWidth, screenHeight, loaderCenter, screenBackground, ...restProps } = props;
-    const id = React.useMemo(() => generateId("bars-loader"), []);
-    const sizeValue = getSizeValue(size);
-    const animationSettings = getOptimizedAnimationSettings(speed);
-    if (!loading)
-        return null;
-    const containerStyle = {
-        display: "inline-flex",
-        flexDirection: "column",
-        alignItems: "center",
-        ...style,
-        ...(fullscreen && {
-            position: "fixed",
-            top: 0,
-            left: 0,
-            width: screenWidth || "100vw",
-            height: screenHeight || "100vh",
-            backgroundColor: screenBackground || "var(--react-loadly-background)",
-            zIndex: 9999,
-            justifyContent: loaderCenter ? "center" : style.justifyContent,
-        }),
-    };
-    const barsContainerStyle = {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        gap: "4px",
-    };
-    const barStyle = {
-        width: "4px",
-        height: sizeValue,
-        backgroundColor: color,
-        borderRadius: "2px",
-        animation: `react-loadly-bars ${animationSettings.duration} ease-in-out infinite`,
-        animationPlayState: animationSettings.playState,
-    };
-    // Create bars with different animation delays
-    const bars = Array.from({ length: count }).map((_, index) => {
-        const delay = `${index * 0.1}s`;
-        const heightFactor = 0.5 + (index % 3) * 0.25; // Vary heights for visual interest
-        return (React.createElement("div", { key: index, style: {
-                ...barStyle,
-                animationDelay: delay,
-                height: `${parseFloat(sizeValue) * heightFactor}px`,
-            }, "data-testid": dataTestId ? `${dataTestId}-bar-${index}` : undefined }));
-    });
-    return (React.createElement("div", { className: `react-loadly react-loadly-bars  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps },
-        React.createElement("div", { style: barsContainerStyle }, bars),
-        showText && (React.createElement("div", { className: "react-loadly-text", id: `${id}-text`, "aria-live": "polite" }, loadingText)),
-        React.createElement("span", { className: "react-loadly-sr-only" }, ariaLabel)));
-};
-
-const defaultProps$d = {
-    size: 60,
-    color: "var(--react-loadly-color)",
-    speed: 1,
-    loading: true,
-    fluidity: 1,
-    amplitude: 1,
-    "aria-label": "Loading...",
-};
-const BlobLoader = (userProps) => {
-    const props = mergeProps(defaultProps$d, userProps);
-    const { size, color, secondaryColor, speed, loading, fluidity, amplitude, className = "", style = {}, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, ...restProps } = props;
-    const id = React.useMemo(() => generateId("blob-loader"), []);
-    const sizeValue = getSizeValue(size);
-    const animationDuration = getAnimationDuration(2500, speed);
-    if (!loading)
-        return null;
-    const containerStyle = {
-        display: "inline-flex",
-        flexDirection: "column",
-        alignItems: "center",
-        ...style,
-    };
-    const blobStyle = {
-        width: sizeValue,
-        height: sizeValue,
-        background: `linear-gradient(45deg, ${color}, ${secondaryColor || color})`,
-        borderRadius: "30% 70% 70% 30% / 30% 30% 70% 70%",
-        animation: `blob-morph ${animationDuration} ease-in-out infinite`,
-        filter: "blur(1px)",
-        position: "relative",
-    };
-    const innerBlobStyle = {
-        position: "absolute",
-        top: "20%",
-        left: "20%",
-        width: "60%",
-        height: "60%",
-        background: `radial-gradient(circle, ${secondaryColor || color}, transparent)`,
-        borderRadius: "40% 60% 60% 40% / 40% 40% 60% 60%",
-        animation: `blob-inner ${animationDuration} ease-in-out infinite reverse`,
-        opacity: 0.7,
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("style", null, `
-        @keyframes blob-morph {
-          0%, 100% {
-            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
-            transform: scale(1) rotate(0deg);
-          }
-          25% {
-            border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
-            transform: scale(${1 + (amplitude ?? 1) * 0.1}) rotate(90deg);
-          }
-          50% {
-            border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
-            transform: scale(${1 - (amplitude ?? 1) * 0.05}) rotate(180deg);
-          }
-          75% {
-            border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
-            transform: scale(${1 + (amplitude ?? 1) * 0.08}) rotate(270deg);
-          }
-        }
-        
-        @keyframes blob-inner {
-          0%, 100% {
-            border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
-            transform: scale(1) rotate(0deg);
-          }
-          33% {
-            border-radius: 70% 30% 50% 50% / 30% 70% 30% 70%;
-            transform: scale(${1.1 + (fluidity ?? 1) * 0.1}) rotate(-120deg);
-          }
-          66% {
-            border-radius: 30% 70% 40% 60% / 70% 30% 70% 30%;
-            transform: scale(${0.9 + (fluidity ?? 1) * 0.05}) rotate(-240deg);
-          }
-        }
-      `),
-        React.createElement("div", { className: `react-loadly react-loadly-blob  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps },
-            React.createElement("div", { style: blobStyle, "data-testid": dataTestId ? `${dataTestId}-blob` : undefined },
-                React.createElement("div", { style: innerBlobStyle })),
-            showText && (React.createElement("div", { className: "react-loadly-text", id: `${id}-text`, "aria-live": "polite" }, loadingText)),
-            React.createElement("span", { className: "react-loadly-sr-only" }, ariaLabel))));
-};
-
-const defaultProps$c = {
-    size: 15,
-    color: "var(--react-loadly-color)",
-    speed: 1,
-    loading: true,
-    count: 3,
-    "aria-label": "Loading...",
-};
-const BounceLoader = (userProps) => {
-    const props = mergeProps(defaultProps$c, userProps);
-    const { size, color, speed, loading, className = "", style = {}, count = 3, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, fullscreen, screenWidth, screenHeight, loaderCenter, screenBackground, ...restProps } = props;
-    const id = React.useMemo(() => generateId("bounce-loader"), []);
-    const sizeValue = getSizeValue(size);
-    const animationSettings = getOptimizedAnimationSettings(speed);
-    if (!loading)
-        return null;
-    const containerStyle = {
-        display: "inline-flex",
-        flexDirection: "column",
-        alignItems: "center",
-        ...style,
-        ...(fullscreen && {
-            position: "fixed",
-            top: 0,
-            left: 0,
-            width: screenWidth || "100vw",
-            height: screenHeight || "100vh",
-            backgroundColor: screenBackground || "var(--react-loadly-background)",
-            zIndex: 9999,
-            justifyContent: loaderCenter ? "center" : style.justifyContent,
-        }),
-    };
-    const bounceContainerStyle = {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        gap: "8px",
-    };
-    const bounceBallStyle = {
-        width: sizeValue,
-        height: sizeValue,
-        borderRadius: "50%",
-        backgroundColor: color,
-        animation: `react-loadly-bounce ${animationSettings.duration} ease-in-out infinite`,
-        animationPlayState: animationSettings.playState,
-    };
-    // Create bounce animation delays for each ball
-    const balls = Array.from({ length: count }).map((_, index) => {
-        const delay = `${index * 0.1}s`;
-        return (React.createElement("div", { key: index, style: {
-                ...bounceBallStyle,
-                animationDelay: delay,
-            }, "data-testid": dataTestId ? `${dataTestId}-ball-${index}` : undefined }));
-    });
-    return (React.createElement("div", { className: `react-loadly react-loadly-bounce ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps },
-        React.createElement("div", { style: bounceContainerStyle }, balls),
-        showText && (React.createElement("div", { className: "react-loadly-text", id: `${id}-text`, "aria-live": "polite" }, loadingText)),
-        React.createElement("span", { className: "react-loadly-sr-only" }, ariaLabel)));
-};
-
-const defaultProps$b = {
-    size: 12,
-    color: "var(--react-loadly-color)",
-    speed: 1,
-    loading: true,
-    count: 3,
-    "aria-label": "Loading...",
-};
-const DotsLoader = (userProps) => {
-    const props = mergeProps(defaultProps$b, userProps);
-    const { size, color, speed, loading, className = "", style = {}, count = 3, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, fullscreen, screenWidth, screenHeight, loaderCenter, screenBackground, ...restProps } = props;
-    const id = React.useMemo(() => generateId("dots-loader"), []);
-    const sizeValue = getSizeValue(size);
-    const animationSettings = getOptimizedAnimationSettings(speed);
-    if (!loading)
-        return null;
-    const containerStyle = {
-        display: "inline-flex",
-        flexDirection: "column",
-        alignItems: "center",
-        ...style,
-        ...(fullscreen && {
-            position: "fixed",
-            top: 0,
-            left: 0,
-            width: screenWidth || "100vw",
-            height: screenHeight || "100vh",
-            backgroundColor: screenBackground || "var(--react-loadly-background)",
-            zIndex: 9999,
-            justifyContent: loaderCenter ? "center" : style.justifyContent,
-        }),
-    };
-    const dotsContainerStyle = {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        gap: "6px",
-    };
-    const dotStyle = {
-        width: sizeValue,
-        height: sizeValue,
-        borderRadius: "50%",
-        backgroundColor: color,
-        animation: `react-loadly-dots ${animationSettings.duration} ease-in-out infinite`,
-        animationPlayState: animationSettings.playState,
-    };
-    // Create dots with different animation delays
-    const dots = Array.from({ length: count }).map((_, index) => {
-        const delay = `${index * 0.2}s`;
-        return (React.createElement("div", { key: index, style: {
-                ...dotStyle,
-                animationDelay: delay,
-            }, "data-testid": dataTestId ? `${dataTestId}-dot-${index}` : undefined }));
-    });
-    return (React.createElement("div", { className: `react-loadly react-loadly-dots  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps },
-        React.createElement("div", { style: dotsContainerStyle }, dots),
-        showText && (React.createElement("div", { className: "react-loadly-text", id: `${id}-text`, "aria-live": "polite" }, loadingText)),
-        React.createElement("span", { className: "react-loadly-sr-only" }, ariaLabel)));
-};
-
-const defaultProps$a = {
-    size: 60,
-    speed: 1,
-    loading: true,
-    animationType: "spin",
-    glowIntensity: 0.3,
-    "aria-label": "Loading...",
-};
-const ElementLoader = (userProps) => {
-    const props = mergeProps(defaultProps$a, userProps);
-    const { size, width, height, speed = 1, loading, animationType, glowIntensity, className = "", style = {}, color = "var(--react-loadly-color)", "aria-label": ariaLabel, loadingText, showText, "data-testid": dataTestId, fullscreen, screenWidth, screenHeight, loaderCenter, screenBackground, children, ...restProps } = props;
-    if (!loading)
-        return null;
-    const containerStyle = {
-        display: "inline-flex",
-        flexDirection: "column",
-        alignItems: "center",
-        ...style,
-        ...(fullscreen && {
-            position: "fixed",
-            top: 0,
-            left: 0,
-            width: screenWidth || "100vw",
-            height: screenHeight || "100vh",
-            backgroundColor: screenBackground || "var(--react-loadly-background)",
-            zIndex: 9999,
-            justifyContent: loaderCenter ? "center" : style.justifyContent,
-        }),
-    };
-    // Enhanced animation variants for ElementLoader
-    const getAnimation = () => {
-        switch (animationType) {
-            case "pulse":
-                return `react-loadly-pulse ${getAnimationDuration(2000, speed)} infinite`;
-            case "glow":
-                return `react-loadly-glow ${getAnimationDuration(2000, speed)} infinite`;
-            case "bounce":
-                return `react-loadly-bounce ${getAnimationDuration(2000, speed)} infinite`;
-            case "flip":
-                return `react-loadly-flip ${getAnimationDuration(2000, speed)} infinite`;
-            case "spin":
-            default:
-                return `react-loadly-spin ${getAnimationDuration(2000, speed)} infinite`;
-        }
-    };
-    // Calculate dimensions, prioritizing width/height props over size
-    const elementWidth = width || size;
-    const elementHeight = height || size;
-    const elementStyle = {
-        width: typeof elementWidth === "number" ? `${elementWidth}px` : elementWidth,
-        height: typeof elementHeight === "number" ? `${elementHeight}px` : elementHeight,
-        animation: getAnimation(),
-        filter: (glowIntensity ?? 0) > 0 ? `drop-shadow(0 0 ${(glowIntensity ?? 0) * 20}px ${color})` : undefined,
-        transformStyle: "preserve-3d",
-        willChange: "transform",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-    };
-    // Add additional animated elements for enhanced visual effect
-    const innerElementStyle = {
-        position: "absolute",
-        top: "50%",
-        left: "50%",
-        width: "60%",
-        height: "60%",
-        borderRadius: "50%",
-        backgroundColor: color,
-        opacity: 0.3,
-        transform: "translate(-50%, -50%)",
-        animation: `react-loadly-pulse ${getAnimationDuration(1500, speed * 1.5)} infinite`,
-        zIndex: -1,
-    };
-    const outerElementStyle = {
-        position: "absolute",
-        top: "50%",
-        left: "50%",
-        width: "120%",
-        height: "120%",
-        borderRadius: "50%",
-        border: `2px solid ${color}`,
-        opacity: 0.2,
-        transform: "translate(-50%, -50%)",
-        animation: `react-loadly-spin ${getAnimationDuration(3000, speed * 0.8)} infinite reverse`,
-        zIndex: -2,
-    };
-    return (React.createElement("div", { className: `react-loadly react-loadly-element-loader ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps },
-        React.createElement("div", { style: { position: "relative", display: "flex", alignItems: "center", justifyContent: "center" } },
-            React.createElement("div", { style: outerElementStyle }),
-            React.createElement("div", { style: innerElementStyle }),
-            React.createElement("div", { style: elementStyle, className: "react-loadly-element", "data-testid": dataTestId ? `${dataTestId}-element` : undefined }, children)),
-        showText && (React.createElement("div", { className: "react-loadly-text", "aria-live": "polite" }, loadingText || ariaLabel)),
-        React.createElement("span", { className: "react-loadly-sr-only" }, ariaLabel)));
-};
-
-const ErrorIcon = ({ className = "" }) => (React.createElement("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" },
-    React.createElement("path", { clipRule: "evenodd", fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" })));
-const NetworkIcon = ({ className = "" }) => (React.createElement("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" },
-    React.createElement("path", { fillRule: "evenodd", d: "M9.243 3.03a1 1 0 01.727 1.213L9.53 6h2.94l.56-2.243a1 1 0 111.94.486L14.53 6H16a1 1 0 110 2h-1.97l-1 4H15a1 1 0 110 2h-2.47l-.56 2.242a1 1 0 11-1.94-.485L10.47 14H7.53l-.56 2.242a1 1 0 11-1.94-.485L5.47 14H4a1 1 0 110-2h1.97l1-4H5a1 1 0 110-2h2.47l.56-2.243a1 1 0 011.213-.727zM9.03 8l-1 4h2.94l1-4H9.03z", clipRule: "evenodd" })));
-const TimeoutIcon = ({ className = "" }) => (React.createElement("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" },
-    React.createElement("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z", clipRule: "evenodd" })));
-const FallbackLoader = ({ error = "Something went wrong", onRetry, showRetry = true, children, type = "error", className = "", style = {}, fullscreen, screenWidth, screenHeight, loaderCenter, screenBackground, ...restProps }) => {
-    const getIcon = () => {
-        switch (type) {
-            case "network":
-                return React.createElement(NetworkIcon, { className: "react-loadly-error-icon" });
-            case "timeout":
-                return React.createElement(TimeoutIcon, { className: "react-loadly-error-icon" });
-            default:
-                return React.createElement(ErrorIcon, { className: "react-loadly-error-icon" });
-        }
-    };
-    const getMessage = () => {
-        switch (type) {
-            case "network":
-                return error || "Network connection failed. Please check your internet connection.";
-            case "timeout":
-                return error || "Loading timeout. The operation took too long to complete.";
-            default:
-                return error || "Something went wrong. Please try again.";
-        }
-    };
-    const containerStyle = {
-        ...style,
-        ...(fullscreen && {
-            position: "fixed",
-            top: 0,
-            left: 0,
-            width: screenWidth || "100vw",
-            height: screenHeight || "100vh",
-            backgroundColor: screenBackground || "var(--react-loadly-error-background)",
-            zIndex: 9999,
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: loaderCenter ? "center" : style.justifyContent,
-        }),
-    };
-    if (children) {
-        return React.createElement("div", { className: `react-loadly-fallback ${className}`.trim(), style: containerStyle, ...restProps }, children);
-    }
-    return (React.createElement("div", { className: `react-loadly-error ${className}`.trim(), style: containerStyle, role: "alert", "aria-live": "polite", ...restProps },
-        getIcon(),
-        React.createElement("p", { className: "react-loadly-error-message" }, getMessage()),
-        showRetry && onRetry && (React.createElement("button", { className: "react-loadly-retry-button", onClick: onRetry, type: "button", "aria-label": "Retry loading" }, "Try Again"))));
-};
-
-const defaultProps$9 = {
-    size: 60,
-    color: "var(--react-loadly-color)",
-    speed: 1,
-    loading: true,
-    fluidity: 1,
-    amplitude: 1,
-    "aria-label": "Loading...",
-};
-const FlowLoader = (userProps) => {
-    const props = mergeProps(defaultProps$9, userProps);
-    const { size, color, secondaryColor, speed, loading, amplitude, className = "", style = {}, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, fullscreen, screenWidth, screenHeight, loaderCenter, screenBackground, ...restProps } = props;
-    const id = React.useMemo(() => generateId("flow-loader"), []);
-    const sizeValue = getSizeValue(size);
-    const numericSize = parseInt(sizeValue);
-    const containerHeight = Math.max(numericSize * 0.4, 10); // Minimum height of 10px
-    const animationDuration = getAnimationDuration(1500, speed);
-    if (!loading)
-        return null;
-    const containerStyle = {
-        display: "inline-flex",
-        flexDirection: "column",
-        alignItems: "center",
-        ...style,
-        ...(fullscreen && {
-            position: "fixed",
-            top: 0,
-            left: 0,
-            width: screenWidth || "100vw",
-            height: screenHeight || "100vh",
-            backgroundColor: screenBackground || "var(--react-loadly-background)",
-            zIndex: 9999,
-            justifyContent: loaderCenter ? "center" : style.justifyContent,
-        }),
-    };
-    const flowContainerStyle = {
-        width: sizeValue,
-        height: `${containerHeight}px`,
-        position: "relative",
-        overflow: "hidden",
-        borderRadius: `${Math.max(numericSize * 0.2, 4)}px`, // Minimum radius of 4px
-        backgroundColor: "rgba(0, 0, 0, 0.1)",
-    };
-    // Ensure minimum particle count even for small sizes
-    const particleCount = Math.max(Math.floor(numericSize / 15), 3);
-    const createParticle = (index) => {
-        const delay = (index * 0.2) / (speed ?? 1);
-        const duration = parseFloat(animationDuration) + index * 100;
-        // Scale particle size based on container size
-        const minParticleSize = Math.max(numericSize / 10, 4); // Minimum 4px
-        const particleSize = minParticleSize + (index % 3) * (minParticleSize / 2);
-        return (React.createElement("div", { key: index, style: {
-                position: "absolute",
-                width: `${particleSize}px`,
-                height: `${particleSize}px`,
-                borderRadius: "50%",
-                background: index % 2 === 0 ? color : secondaryColor || color,
-                animation: `flow-particle-${id} ${duration}ms ease-in-out infinite`,
-                animationDelay: `${delay}s`,
-                opacity: 0.8 - index * 0.1,
-                left: "0px", // Start at the beginning of the container
-                top: `${(containerHeight - particleSize) / 2 + (index % 3) * (containerHeight / (particleCount + 1))}px`, // Distribute vertically
-            }, "data-testid": dataTestId ? `${dataTestId}-particle-${index}` : undefined }));
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("style", null, `
-        @keyframes flow-particle-${id} {
-          0% {
-            transform: translateX(0) translateY(0) scale(0);
-            opacity: 0;
-          }
-          10% {
-            transform: translateX(${Math.min(numericSize * 0.1, 10)}px) translateY(${Math.sin(0.1) * (amplitude ?? Math.min(5, containerHeight / 4))}px) scale(1);
-            opacity: 0.8;
-          }
-          50% {
-            transform: translateX(${Math.min(numericSize * 0.5, numericSize * 0.7)}px) translateY(${Math.sin(0.5) * (amplitude ?? Math.min(5, containerHeight / 4))}px) scale(1);
-            opacity: 0.8;
-          }
-          90% {
-            transform: translateX(${Math.min(numericSize * 0.9, numericSize - 10)}px) translateY(${Math.sin(0.9) * (amplitude ?? Math.min(5, containerHeight / 4))}px) scale(1);
-            opacity: 0.8;
-          }
-          100% {
-            transform: translateX(${numericSize}px) translateY(${Math.sin(1) * (amplitude ?? Math.min(5, containerHeight / 4))}px) scale(0);
-            opacity: 0;
-          }
-        }
-      `),
-        React.createElement("div", { className: `react-loadly react-loadly-flow  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps },
-            React.createElement("div", { style: flowContainerStyle, "data-testid": dataTestId ? `${dataTestId}-container` : undefined }, Array.from({ length: particleCount }, (_, index) => createParticle(index))),
-            showText && (React.createElement("div", { className: "react-loadly-text", id: `${id}-text`, "aria-live": "polite" }, loadingText)),
-            React.createElement("span", { className: "react-loadly-sr-only" }, ariaLabel))));
-};
-
-const defaultProps$8 = {
-    size: 40,
-    color: "var(--react-loadly-color)",
-    speed: 1,
-    loading: true,
-    count: 4,
-    "aria-label": "Loading...",
-};
-const GridLoader = (userProps) => {
-    const props = mergeProps(defaultProps$8, userProps);
-    const { size, color, secondaryColor, speed = 1, loading, count, className = "", style = {}, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, fullscreen, screenWidth, screenHeight, loaderCenter, screenBackground, ...restProps } = props;
-    const id = React.useMemo(() => generateId("grid-loader"), []);
-    const shapeSize = React.useMemo(() => {
-        const sizeNum = typeof size === "number" ? size : parseInt(getSizeValue(size));
-        const gridSize = Math.ceil(Math.sqrt(count || 4));
-        return Math.max(sizeNum / (gridSize * 1.5), 8);
-    }, [size, count]);
-    if (!loading)
-        return null;
-    const containerStyle = {
-        display: "inline-flex",
-        flexDirection: "column",
-        alignItems: "center",
-        ...style,
-        ...(fullscreen && {
-            position: "fixed",
-            top: 0,
-            left: 0,
-            width: screenWidth || "100vw",
-            height: screenHeight || "100vh",
-            backgroundColor: screenBackground || "var(--react-loadly-background)",
-            zIndex: 9999,
-            justifyContent: loaderCenter ? "center" : style.justifyContent,
-        }),
-    };
-    return (React.createElement("div", { className: `react-loadly react-loadly-grid  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps },
-        React.createElement("div", { className: "react-loadly-grid-container", style: {
-                display: "grid",
-                gridTemplateColumns: `repeat(${Math.ceil(Math.sqrt(count || 4))}, 1fr)`,
-                gap: `${shapeSize / 3}px`,
-            }, "data-testid": dataTestId ? `${dataTestId}-grid` : undefined }, Array.from({ length: count || 4 }).map((_, index) => (React.createElement("div", { key: index, className: "react-loadly-grid-item", style: {
-                width: `${shapeSize}px`,
-                height: `${shapeSize}px`,
-                backgroundColor: index % 2 === 0 ? color : secondaryColor || color,
-                borderRadius: "20%",
-                animation: `react-loadly-scale ${1.2 / (speed || 1)}s ease-in-out infinite`,
-                animationDelay: `${(index * 0.1) / (speed || 1)}s`,
-            } })))),
-        showText && (React.createElement("div", { className: "react-loadly-text", id: `${id}-text`, "aria-live": "polite" }, loadingText)),
-        React.createElement("span", { className: "react-loadly-sr-only" }, ariaLabel)));
-};
-
-const defaultProps$7 = {
-    size: 60,
-    color: "var(--react-loadly-color)",
-    speed: 1,
-    loading: true,
-    fluidity: 1,
-    amplitude: 1,
-    "aria-label": "Loading...",
-};
-const LiquidLoader = (userProps) => {
-    const props = mergeProps(defaultProps$7, userProps);
-    const { size, color, secondaryColor, speed, loading, amplitude, className = "", style = {}, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, fullscreen, screenWidth, screenHeight, loaderCenter, screenBackground, ...restProps } = props;
-    const id = React.useMemo(() => generateId("liquid-loader"), []);
-    const sizeValue = getSizeValue(size);
-    const animationDuration = getAnimationDuration(2000, speed);
-    if (!loading)
-        return null;
-    const containerStyle = {
-        display: "inline-flex",
-        flexDirection: "column",
-        alignItems: "center",
-        ...style,
-        ...(fullscreen && {
-            position: "fixed",
-            top: 0,
-            left: 0,
-            width: screenWidth || "100vw",
-            height: screenHeight || "100vh",
-            backgroundColor: screenBackground || "var(--react-loadly-background)",
-            zIndex: 9999,
-            justifyContent: loaderCenter ? "center" : style.justifyContent,
-        }),
-    };
-    const liquidStyle = {
-        width: sizeValue,
-        height: sizeValue,
-        position: "relative",
-        overflow: "hidden",
-        borderRadius: "50%",
-        backgroundColor: "rgba(0, 0, 0, 0.1)",
-    };
-    // Calculate the translateY value based on amplitude
-    const translateY = 50 - (amplitude ?? 1) * 10;
-    const waveStyle = {
-        position: "absolute",
-        bottom: 0,
-        left: 0,
-        width: "200%",
-        height: "200%",
-        background: `linear-gradient(180deg, ${color} 0%, ${secondaryColor || color} 100%)`,
-        borderRadius: "40%",
-        animation: `react-loadly-liquid-wave ${animationDuration} ease-in-out infinite`,
-        transform: "translate(-25%, 50%) rotate(0deg)",
-        animationTimingFunction: `cubic-bezier(0.36, 0.45, 0.63, 0.53)`,
-    };
-    const wave2Style = {
-        ...waveStyle,
-        background: `linear-gradient(180deg, ${secondaryColor || color} 0%, ${color} 100%)`,
-        animation: `react-loadly-liquid-wave ${animationDuration} ease-in-out infinite reverse`,
-        animationDelay: `${ -0.5 / (speed ?? 1)}s`,
-        opacity: 0.8,
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("style", null, `
-        @keyframes react-loadly-liquid-wave {
-          0%, 100% {
-            transform: translate(-25%, 50%) rotate(0deg);
-          }
-          50% {
-            transform: translate(-25%, ${translateY}%) rotate(180deg);
-          }
-        }
-      `),
-        React.createElement("div", { className: `react-loadly react-loadly-liquid  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps },
-            React.createElement("div", { style: liquidStyle, "data-testid": dataTestId ? `${dataTestId}-container` : undefined },
-                React.createElement("div", { style: waveStyle }),
-                React.createElement("div", { style: wave2Style })),
-            showText && (React.createElement("div", { className: "react-loadly-text", id: `${id}-text`, "aria-live": "polite" }, loadingText)),
-            React.createElement("span", { className: "react-loadly-sr-only" }, ariaLabel))));
-};
-
-const defaultProps$6 = {
-    size: 60,
-    speed: 1,
-    loading: true,
-    animationType: "spin",
-    glowIntensity: 0.3,
-    "aria-label": "Loading...",
-    alt: "Loading",
-};
-const LogoSpinLoader = (userProps) => {
-    const props = mergeProps(defaultProps$6, userProps);
-    const { src, alt, size, speed, loading, animationType, glowIntensity, className = "", style = {}, color = "var(--react-loadly-color)", "aria-label": ariaLabel, loadingText, showText, "data-testid": dataTestId, fullscreen, screenWidth, screenHeight, loaderCenter, screenBackground, ...restProps } = props;
-    if (!loading)
-        return null;
-    const containerStyle = {
-        display: "inline-flex",
-        flexDirection: "column",
-        alignItems: "center",
-        ...style,
-        ...(fullscreen && {
-            position: "fixed",
-            top: 0,
-            left: 0,
-            width: screenWidth || "100vw",
-            height: screenHeight || "100vh",
-            backgroundColor: screenBackground || "var(--react-loadly-background)",
-            zIndex: 9999,
-            justifyContent: loaderCenter ? "center" : style.justifyContent,
-        }),
-    };
-    const logoStyle = {
-        width: typeof size === "number" ? `${size}px` : size,
-        height: typeof size === "number" ? `${size}px` : size,
-        animation: `react-loadly-${animationType} ${getAnimationDuration(2000, speed)} infinite`,
-        filter: (glowIntensity ?? 0) > 0 ? `drop-shadow(0 0 ${(glowIntensity ?? 0) * 20}px ${color})` : undefined,
-    };
-    return (React.createElement("div", { className: `react-loadly react-loadly-logo-spin  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps },
-        React.createElement("img", { src: src, alt: alt, style: logoStyle, className: "react-loadly-logo", "data-testid": dataTestId ? `${dataTestId}-logo` : undefined }),
-        showText && (React.createElement("div", { className: "react-loadly-text", "aria-live": "polite" }, loadingText || ariaLabel)),
-        React.createElement("span", { className: "react-loadly-sr-only" }, ariaLabel)));
-};
-
-const defaultProps$5 = {
-    size: 40,
-    color: "var(--react-loadly-color)",
-    speed: 1,
-    loading: true,
-    count: 3,
-    "aria-label": "Loading...",
-};
-const PulseLoader = (userProps) => {
-    const props = mergeProps(defaultProps$5, userProps);
-    const { size, color, secondaryColor, speed, loading, count, className = "", style = {}, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, fullscreen, screenWidth, screenHeight, loaderCenter, screenBackground, ...restProps } = props;
-    const id = React.useMemo(() => generateId("pulse-loader"), []);
-    const dotSize = React.useMemo(() => {
-        const sizeNum = typeof size === "number" ? size : parseInt(getSizeValue(size));
-        return Math.max(sizeNum / 5, 6); // Ensure minimum dot size
-    }, [size]);
-    if (!loading)
-        return null;
-    const containerStyle = {
-        display: "inline-flex",
-        flexDirection: "column",
-        alignItems: "center",
-        ...style,
-        ...(fullscreen && {
-            position: "fixed",
-            top: 0,
-            left: 0,
-            width: screenWidth || "100vw",
-            height: screenHeight || "100vh",
-            backgroundColor: screenBackground || "var(--react-loadly-background)",
-            zIndex: 9999,
-            justifyContent: loaderCenter ? "center" : style.justifyContent,
-        }),
-    };
-    return (React.createElement("div", { className: `react-loadly react-loadly-pulse  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps },
-        React.createElement(DotCluster, { count: count, dotSize: dotSize, color: color, secondaryColor: secondaryColor, speed: speed, arrangement: "linear", animationType: "pulse", spacing: dotSize / 2, "data-testid": dataTestId ? `${dataTestId}-dots` : undefined }),
-        showText && (React.createElement("div", { className: "react-loadly-text", id: `${id}-text`, "aria-live": "polite" }, loadingText)),
-        React.createElement("span", { className: "react-loadly-sr-only" }, ariaLabel)));
-};
-
-const defaultProps$4 = {
-    size: 60,
-    color: "var(--react-loadly-color)",
-    speed: 1,
-    loading: true,
-    borderWidth: 4,
-    "aria-label": "Loading...",
-};
-const RingLoader = (userProps) => {
-    const props = mergeProps(defaultProps$4, userProps);
-    const { size, color, speed, loading, className = "", style = {}, borderWidth, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, fullscreen, screenWidth, screenHeight, loaderCenter, screenBackground, ...restProps } = props;
-    // Use useRef instead of useMemo for better compatibility
-    const idRef = React.useRef(generateId("ring-loader"));
-    const sizeValue = getSizeValue(size);
-    const animationSettings = getOptimizedAnimationSettings(speed);
-    // Don't render anything if not loading
-    if (!loading)
-        return null;
-    const containerStyle = {
-        display: "inline-flex",
-        flexDirection: "column",
-        alignItems: "center",
-        ...style,
-        ...(fullscreen && {
-            position: "fixed",
-            top: 0,
-            left: 0,
-            width: screenWidth || "100vw",
-            height: screenHeight || "100vh",
-            backgroundColor: screenBackground || "var(--react-loadly-background)",
-            zIndex: 9999,
-            justifyContent: loaderCenter ? "center" : style.justifyContent,
-        }),
-    };
-    const ringStyle = {
-        position: "relative",
-        width: sizeValue,
-        height: sizeValue,
-    };
-    const ringSegmentStyle = {
-        boxSizing: "border-box",
-        display: "block",
-        position: "absolute",
-        width: sizeValue,
-        height: sizeValue,
-        border: `${borderWidth}px solid transparent`,
-        borderTop: `${borderWidth}px solid ${color}`,
-        borderBottom: `${borderWidth}px solid ${color}`,
-        borderRadius: "50%",
-        animation: `react-loadly-ring ${animationSettings.duration} cubic-bezier(0.5, 0, 0.5, 1) infinite`,
-        animationPlayState: animationSettings.playState,
-    };
-    // Create the 4 ring segments with their specific styles
-    const segments = Array.from({ length: 4 }).map((_, index) => {
-        const rotation = `${index * 90}deg`;
-        const delay = `${index * -0.15}s`;
-        return (React.createElement("div", { key: index, style: {
-                ...ringSegmentStyle,
-                transform: `rotate(${rotation})`,
-                animationDelay: delay,
-            }, "data-testid": dataTestId ? `${dataTestId}-segment-${index}` : undefined }));
-    });
-    return (React.createElement("div", { className: `react-loadly react-loadly-ring  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps },
-        React.createElement("div", { style: ringStyle }, segments),
-        showText && (React.createElement("div", { className: "react-loadly-text", id: `${idRef.current}-text`, "aria-live": "polite" }, loadingText)),
-        React.createElement("span", { className: "react-loadly-sr-only" }, ariaLabel)));
-};
-
-const defaultProps$3 = {
-    size: 15,
-    color: "var(--react-loadly-color)",
-    speed: 1,
-    loading: true,
-    count: 2,
-    "aria-label": "Loading...",
-};
-const RotateLoader = (userProps) => {
-    const props = mergeProps(defaultProps$3, userProps);
-    const { size, color, speed, loading, className = "", style = {}, count = 2, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, fullscreen, screenWidth, screenHeight, loaderCenter, screenBackground, ...restProps } = props;
-    const id = React.useMemo(() => generateId("rotate-loader"), []);
-    const sizeValue = getSizeValue(size);
-    const animationSettings = getOptimizedAnimationSettings(speed);
-    if (!loading)
-        return null;
-    const containerStyle = {
-        display: "inline-flex",
-        flexDirection: "column",
-        alignItems: "center",
-        ...style,
-        ...(fullscreen && {
-            position: "fixed",
-            top: 0,
-            left: 0,
-            width: screenWidth || "100vw",
-            height: screenHeight || "100vh",
-            backgroundColor: screenBackground || "var(--react-loadly-background)",
-            zIndex: 9999,
-            justifyContent: loaderCenter ? "center" : style.justifyContent,
-        }),
-    };
-    const rotateContainerStyle = {
-        position: "relative",
-        width: sizeValue,
-        height: sizeValue,
-    };
-    const rotateElementStyle = {
-        position: "absolute",
-        width: sizeValue,
-        height: sizeValue,
-        border: "2px solid transparent",
-        borderTopColor: color,
-        borderBottomColor: color,
-        borderRadius: "50%",
-        animation: `react-loadly-ring ${animationSettings.duration} cubic-bezier(0.5, 0, 0.5, 1) infinite`,
-        animationPlayState: animationSettings.playState,
-        transform: "rotate(0deg)",
-    };
-    // Create rotating elements
-    const elements = Array.from({ length: count }).map((_, index) => {
-        const sizeFactor = 1 - index * 0.2;
-        const borderWidth = 2 + index;
-        const delay = `${index * -0.15}s`;
-        return (React.createElement("div", { key: index, style: {
-                ...rotateElementStyle,
-                width: `${parseFloat(sizeValue) * sizeFactor}px`,
-                height: `${parseFloat(sizeValue) * sizeFactor}px`,
-                borderWidth: `${borderWidth}px`,
-                animationDuration: `${parseFloat(animationSettings.duration) * (1 + index * 0.5)}ms`,
-                animationDelay: delay,
-            }, "data-testid": dataTestId ? `${dataTestId}-element-${index}` : undefined }));
-    });
-    return (React.createElement("div", { className: `react-loadly react-loadly-ring  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps },
-        React.createElement("div", { style: rotateContainerStyle }, elements),
-        showText && (React.createElement("div", { className: "react-loadly-text", id: `${id}-text`, "aria-live": "polite" }, loadingText)),
-        React.createElement("span", { className: "react-loadly-sr-only" }, ariaLabel)));
-};
-
-const defaultProps$2 = {
-    size: 40,
-    color: "var(--react-loadly-color)",
-    speed: 1,
-    loading: true,
-    borderWidth: 4,
-    "aria-label": "Loading...",
-};
-const SpinLoader = (userProps) => {
-    const props = mergeProps(defaultProps$2, userProps);
-    const { size, color, speed, loading, className = "", style = {}, borderWidth, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, fullscreen, screenWidth, screenHeight, loaderCenter, screenBackground, ...restProps } = props;
-    // Use useRef instead of useMemo for better compatibility
-    const idRef = React.useRef(generateId("spin-loader"));
-    const sizeValue = getSizeValue(size);
-    const animationSettings = getOptimizedAnimationSettings(speed);
-    if (!loading)
-        return null;
-    const containerStyle = {
-        display: "inline-flex",
-        flexDirection: "column",
-        alignItems: "center",
-        ...style,
-        ...(fullscreen && {
-            position: "fixed",
-            top: 0,
-            left: 0,
-            width: screenWidth || "100vw",
-            height: screenHeight || "100vh",
-            backgroundColor: screenBackground || "var(--react-loadly-background)",
-            zIndex: 9999,
-            justifyContent: loaderCenter ? "center" : style.justifyContent,
-        }),
-    };
-    const spinnerStyle = {
-        width: sizeValue,
-        height: sizeValue,
-        border: `${borderWidth}px solid transparent`,
-        borderTop: `${borderWidth}px solid ${color}`,
-        borderRadius: "50%",
-        animation: `react-loadly-spin ${animationSettings.duration} linear infinite`,
-        animationPlayState: animationSettings.playState,
-    };
-    return (React.createElement("div", { className: `react-loadly react-loadly-spin  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps },
-        React.createElement("div", { style: spinnerStyle, "data-testid": dataTestId ? `${dataTestId}-spinner` : undefined }),
-        showText && (React.createElement("div", { className: "react-loadly-text", id: `${idRef.current}-text`, "aria-live": "polite" }, loadingText)),
-        React.createElement("span", { className: "react-loadly-sr-only" }, ariaLabel)));
-};
-
-const defaultProps$1 = {
-    speed: 1,
-    loading: true,
-    charDelay: 100,
-    "aria-label": "Loading...",
-    loop: true,
-};
-const TypingLoader = (userProps) => {
-    const props = mergeProps(defaultProps$1, userProps);
-    const { loadingText, speed = 1, loading, charDelay = 100, loop, className = "", style = {}, color = "var(--react-loadly-text-color)", fontFamily, fontWeight = 500, "aria-label": ariaLabel, "data-testid": dataTestId, showText, fullscreen, screenWidth, screenHeight, loaderCenter, screenBackground, ...restProps } = props;
-    const [displayText, setDisplayText] = React.useState("");
-    const [isTyping, setIsTyping] = React.useState(false);
-    const timeoutRef = React.useRef(null);
-    React.useEffect(() => {
-        // Clear any existing timeout
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-            timeoutRef.current = null;
-        }
-        if (!loading || !loadingText) {
-            setDisplayText("");
-            return;
-        }
-        setIsTyping(true);
-        setDisplayText("");
-        const typeText = (index = 0) => {
-            if (index < loadingText.length) {
-                setDisplayText(loadingText.substring(0, index + 1));
-                timeoutRef.current = setTimeout(() => typeText(index + 1), charDelay / speed);
-            }
-            else if (loop) {
-                // Reset and start over if looping
-                timeoutRef.current = setTimeout(() => {
-                    setDisplayText("");
-                    typeText(0);
-                }, charDelay * 2);
-            }
-            else {
-                setIsTyping(false);
-            }
-        };
-        typeText(0);
-        // Cleanup timeouts on unmount or when dependencies change
-        return () => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-        };
-    }, [loading, loadingText, charDelay, speed, loop]);
-    if (!loading)
-        return null;
-    const containerStyle = {
-        display: "inline-flex",
-        flexDirection: "column",
-        alignItems: "center",
-        ...style,
-        ...(fullscreen && {
-            position: "fixed",
-            top: 0,
-            left: 0,
-            width: screenWidth || "100vw",
-            height: screenHeight || "100vh",
-            backgroundColor: screenBackground || "var(--react-loadly-background)",
-            zIndex: 9999,
-            justifyContent: loaderCenter ? "center" : style.justifyContent,
-        }),
-    };
-    const textStyle = {
-        color,
-        fontFamily,
-        fontWeight,
-        fontSize: "1.2em",
-        whiteSpace: "pre",
-    };
-    return (React.createElement("div", { className: `react-loadly react-loadly-typing  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps },
-        React.createElement("div", { style: textStyle, "data-testid": dataTestId ? `${dataTestId}-text` : undefined },
-            displayText,
-            React.createElement("span", { className: "react-loadly-typing-cursor", style: {
-                    display: isTyping ? "inline-block" : "none",
-                    animation: `react-loadly-blink ${1 / speed}s step-end infinite`,
-                    marginLeft: "2px",
-                    verticalAlign: "baseline",
-                } }, "|")),
-        showText && (React.createElement("div", { className: "react-loadly-text", "aria-live": "polite" }, loadingText)),
-        React.createElement("span", { className: "react-loadly-sr-only" }, ariaLabel)));
-};
-
-const defaultProps = {
-    size: 40,
-    color: "var(--react-loadly-color)",
-    speed: 1,
-    loading: true,
-    count: 5,
-    "aria-label": "Loading...",
-};
-const WaveLoader = (userProps) => {
-    const props = mergeProps(defaultProps, userProps);
-    const { size, color, secondaryColor, speed, loading, count, className = "", style = {}, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, fullscreen, screenWidth, screenHeight, loaderCenter, screenBackground, ...restProps } = props;
-    const id = React.useMemo(() => generateId("wave-loader"), []);
-    const lineSpecs = React.useMemo(() => {
-        const sizeNum = typeof size === "number" ? size : parseInt(getSizeValue(size));
-        return {
-            width: Math.max(sizeNum / 10, 3), // Line thickness
-            height: sizeNum, // Line height
-            spacing: Math.max(sizeNum / 8, 4), // Spacing between lines
-        };
-    }, [size]);
-    if (!loading)
-        return null;
-    const containerStyle = {
-        display: "inline-flex",
-        flexDirection: "column",
-        alignItems: "center",
-        ...style,
-        ...(fullscreen && {
-            position: "fixed",
-            top: 0,
-            left: 0,
-            width: screenWidth || "100vw",
-            height: screenHeight || "100vh",
-            backgroundColor: screenBackground || "var(--react-loadly-background)",
-            zIndex: 9999,
-            justifyContent: loaderCenter ? "center" : style.justifyContent,
-        }),
-    };
-    return (React.createElement("div", { className: `react-loadly react-loadly-wave  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps },
-        React.createElement(LineGroup, { count: count, lineWidth: lineSpecs.width, lineHeight: lineSpecs.height, color: color, secondaryColor: secondaryColor, speed: speed, arrangement: "staggered", orientation: "vertical", animationType: "wave", spacing: lineSpecs.spacing, "data-testid": dataTestId ? `${dataTestId}-lines` : undefined }),
-        showText && (React.createElement("div", { className: "react-loadly-text", id: `${id}-text`, "aria-live": "polite" }, loadingText)),
-        React.createElement("span", { className: "react-loadly-sr-only" }, ariaLabel)));
-};
-
-/**
- * Custom React hook for managing loader state with advanced features
- * Provides centralized loading state management with timeout, retry, and progress tracking
- *
- * @param options - Configuration options for the loader state
- * @returns Object containing state and methods to control the loader
- */
-const useLoaderState = (options = {}) => {
-    const { initialLoading = false, timeout, maxRetries = 3, onLoadingChange, onError, onProgress } = options;
-    const [state, setState] = React.useState({
-        isLoading: initialLoading,
-        progress: 0,
-        error: null,
-        retryCount: 0,
-    });
-    const timeoutRef = React.useRef(null);
-    const retryTimeoutRef = React.useRef(null);
-    // Clear timeouts on unmount
-    React.useEffect(() => {
-        return () => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-            if (retryTimeoutRef.current) {
-                clearTimeout(retryTimeoutRef.current);
-            }
-        };
-    }, []);
-    // Handle timeout
-    React.useEffect(() => {
-        if (state.isLoading && timeout) {
-            timeoutRef.current = setTimeout(() => {
-                setState((prev) => ({
-                    ...prev,
-                    isLoading: false,
-                    error: "Loading timeout exceeded",
-                }));
-                onError?.("Loading timeout exceeded");
-            }, timeout);
-        }
-        else if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
-        return () => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-        };
-    }, [state.isLoading, timeout, onError]);
-    // Call onLoadingChange when loading state changes
-    React.useEffect(() => {
-        onLoadingChange?.(state.isLoading);
-    }, [state.isLoading, onLoadingChange]);
-    // Call onProgress when progress changes
-    React.useEffect(() => {
-        if (state.progress !== undefined) {
-            onProgress?.(state.progress);
-        }
-    }, [state.progress, onProgress]);
-    const setLoading = React.useCallback((loading) => {
-        setState((prev) => ({
-            ...prev,
-            isLoading: loading,
-            error: loading ? null : prev.error, // Clear error when starting new loading
-            progress: loading ? 0 : prev.progress, // Reset progress when starting
-        }));
-    }, []);
-    const setProgress = React.useCallback((progress) => {
-        const clampedProgress = Math.min(Math.max(progress, 0), 100);
-        setState((prev) => ({
-            ...prev,
-            progress: clampedProgress,
-            // Auto-complete when progress reaches 100%
-            isLoading: clampedProgress >= 100 ? false : prev.isLoading,
-        }));
-    }, []);
-    const setError = React.useCallback((error) => {
-        setState((prev) => ({
-            ...prev,
-            error,
-            isLoading: false,
-        }));
-        if (error) {
-            onError?.(error);
-        }
-    }, [onError]);
-    const retry = React.useCallback(() => {
-        setState((prev) => {
-            const newRetryCount = (prev.retryCount || 0) + 1;
-            if (newRetryCount > maxRetries) {
-                onError?.("Maximum retry attempts exceeded");
-                return {
-                    ...prev,
-                    error: "Maximum retry attempts exceeded",
-                    isLoading: false,
-                };
-            }
-            return {
-                ...prev,
-                retryCount: newRetryCount,
-                isLoading: true,
-                error: null,
-                progress: 0,
-            };
-        });
-        // Add exponential backoff for retries
-        const backoffDelay = Math.min(1000 * Math.pow(2, state.retryCount || 0), 30000);
-        retryTimeoutRef.current = setTimeout(() => {
-            setState((prev) => ({ ...prev, isLoading: true }));
-        }, backoffDelay);
-    }, [state.retryCount, maxRetries, onError]);
-    const reset = React.useCallback(() => {
-        setState({
-            isLoading: false,
-            progress: 0,
-            error: null,
-            retryCount: 0,
-        });
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
-        if (retryTimeoutRef.current) {
-            clearTimeout(retryTimeoutRef.current);
-        }
-    }, []);
-    return {
-        state,
-        setLoading,
-        setProgress,
-        setError,
-        retry,
-        reset,
-    };
-};
-
-/**
- * Hook for managing multiple loader states with shared options
- * Useful when you need to control multiple loaders with the same configuration
- *
- * @param keys - Array of string keys representing each loader state
- * @param options - Shared configuration options for all loader states
- * @returns Record mapping each key to its corresponding loader state methods
- */
-const useMultipleLoaderStates = (keys, options = {}) => {
-    return keys.reduce((acc, key) => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        acc[key] = useLoaderState(options);
-        return acc;
-    }, {});
-};
-
-/**
- * Hook for tracking async operations with automatic loading state management
- * Automatically handles loading states during async operations and provides error handling
- *
- * @param asyncFn - Async function to execute and track
- * @param dependencies - Dependency array to trigger re-execution (similar to useEffect)
- * @param options - Configuration options for the loader state
- * @returns Object containing loader state, data result, and execution method
- */
-const useAsyncLoader = (asyncFn, dependencies = [], options = {}) => {
-    const loaderState = useLoaderState(options);
-    const [data, setData] = React.useState(null);
-    const execute = React.useCallback(async () => {
-        try {
-            loaderState.setLoading(true);
-            loaderState.setError(null);
-            const result = await asyncFn();
-            setData(result);
-            loaderState.setProgress(100);
-            return result;
-        }
-        catch (error) {
-            const errorMessage = error instanceof Error ? error.message : "Unknown error occurred";
-            loaderState.setError(errorMessage);
-            return null;
-        }
-    }, [asyncFn, loaderState]);
-    // Auto-execute on dependency changes
-    React.useEffect(() => {
-        execute();
-    }, dependencies);
-    return {
-        ...loaderState,
-        data,
-        execute,
-    };
-};
-
-exports.BarsLoader = BarsLoader;
-exports.BlobLoader = BlobLoader;
-exports.BounceLoader = BounceLoader;
-exports.Circle = Circle;
-exports.Dot = Dot;
-exports.DotCluster = DotCluster;
-exports.DotsLoader = DotsLoader;
-exports.ElementLoader = ElementLoader;
-exports.FallbackLoader = FallbackLoader;
-exports.FlowLoader = FlowLoader;
-exports.GridLoader = GridLoader;
-exports.Line = Line;
-exports.LineGroup = LineGroup;
-exports.LiquidLoader = LiquidLoader;
-exports.LogoSpinLoader = LogoSpinLoader;
-exports.PulseLoader = PulseLoader;
-exports.Rectangle = Rectangle;
-exports.RingLoader = RingLoader;
-exports.RotateLoader = RotateLoader;
-exports.ShapeGroup = ShapeGroup;
-exports.SpinLoader = SpinLoader;
-exports.TypingLoader = TypingLoader;
-exports.WaveLoader = WaveLoader;
-exports.clamp = clamp;
-exports.createAnimationName = createAnimationName;
-exports.generateCSSVariables = generateCSSVariables;
-exports.generateId = generateId;
-exports.getAnimationDuration = getAnimationDuration;
-exports.getOptimizedAnimationSettings = getOptimizedAnimationSettings;
-exports.getSizeValue = getSizeValue;
-exports.hexToRgb = hexToRgb;
-exports.mergeProps = mergeProps;
-exports.prefersReducedMotion = prefersReducedMotion;
-exports.rgba = rgba;
-exports.sanitizeCSSValue = sanitizeCSSValue;
-exports.useAsyncLoader = useAsyncLoader;
-exports.useLoaderState = useLoaderState;
-exports.useMultipleLoaderStates = useMultipleLoaderStates;
+"use strict";var e=require("react");function t(e,t){return{...e,...t}}function a(e,t="40px"){return void 0===e?t:"number"==typeof e?`${e}px`:e}function r(e,t=1){return`${e/Math.max(t,.1)}ms`}function i(){if("undefined"==typeof window||!window.matchMedia)return!1;try{return window.matchMedia("(prefers-reduced-motion: reduce)").matches}catch(e){return!1}}function n(e=1,t=!0){if("undefined"!=typeof process&&"test"===process.env.NODE_ENV)return{duration:"0ms",playState:"paused",iterationCount:1};const a=t&&i();return{duration:a?"0ms":r(1e3,e),playState:a?"paused":"running",iterationCount:a?1:"infinite"}}function l(e,t,a){return Math.min(Math.max(e,t),a)}function o(e){const t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null}function s(e="loader"){return`${e}-${Math.random().toString(36).substr(2,9)}`}function d(e){if(null!=e)return"number"==typeof e?`${e}px`:"string"==typeof e?e.replace(/[<>'"]/g,""):void 0}const c=({size:t=8,color:r="var(--react-loadly-color)",opacity:i=1,className:n="",style:l={},animation:o,animationDuration:s,animationDelay:d,glowIntensity:c=0,"data-testid":u,...m})=>{const p=a(t),y={width:p,height:p,borderRadius:"50%",backgroundColor:r,opacity:i,animation:o?`${o} ${s||"1s"} infinite`:void 0,animationDelay:d,display:"inline-block",boxShadow:c>0?`0 0 ${10*c}px ${r}`:void 0,...l};return e.createElement("div",{className:`react-loadly-dot ${n}`.trim(),style:y,"data-testid":u,...m})},u=({width:t=30,height:r=4,color:i="var(--react-loadly-color)",opacity:n=1,borderRadius:l=2,className:o="",style:s={},animation:c,animationDuration:u,animationDelay:m,orientation:p="horizontal","data-testid":y,...g})=>{const h=a(t),f=a(r),x={width:"vertical"===p?f:h,height:"vertical"===p?h:f,backgroundColor:i,opacity:n,borderRadius:d(l),animation:c?`${c} ${u||"1s"} infinite`:void 0,animationDelay:m,display:"inline-block",...s};return e.createElement("div",{className:`react-loadly-line react-loadly-line-${p} ${o}`.trim(),style:x,"data-testid":y,...g})},m=({width:t=20,height:r=20,color:i="var(--react-loadly-color)",borderColor:n,borderWidth:l=0,borderRadius:o=0,opacity:s=1,className:c="",style:u={},animation:m,animationDuration:p,animationDelay:y,"data-testid":g,...h})=>{const f=a(t),x=a(r),v=d(l),b={width:f,height:x,backgroundColor:n?"transparent":i,border:n?`${v} solid ${n}`:void 0,borderRadius:d(o),opacity:s,animation:m?`${m} ${p||"1s"} infinite`:void 0,animationDelay:y,display:"inline-block",...u};return e.createElement("div",{className:`react-loadly-rectangle ${c}`.trim(),style:b,"data-testid":g,...h})},p=({size:t=20,color:r="var(--react-loadly-color)",borderColor:i,borderWidth:n=0,opacity:l=1,className:o="",style:s={},animation:c,animationDuration:u,animationDelay:m,"data-testid":p,...y})=>{const g=a(t),h=d(n),f={width:g,height:g,borderRadius:"50%",backgroundColor:i?"transparent":r,border:i?`${h} solid ${i}`:void 0,opacity:l,animation:c?`${c} ${u||"1s"} infinite`:void 0,animationDelay:m,display:"inline-block",...s};return e.createElement("div",{className:`react-loadly-circle ${o}`.trim(),style:f,"data-testid":p,...y})},y=({count:t=3,dotSize:i=8,color:n="var(--react-loadly-color)",secondaryColor:l,spacing:o=8,speed:s=1,arrangement:d="linear",className:u="",style:m={},animationType:p="wave","data-testid":y,...g})=>{const h=a(o),f=r(1200,s),x=e=>{if("circular"===d){const a=e/t*2*Math.PI,r=parseInt(h);return{position:"absolute",left:"50%",top:"50%",transform:`translate(-50%, -50%) translate(${Math.cos(a)*r}px, ${Math.sin(a)*r}px)`}}return{}},v=e=>.1*e/s+"s",b={...(()=>{switch(d){case"circular":return{display:"flex",alignItems:"center",justifyContent:"center",position:"relative",width:2*(parseInt(a(i))+parseInt(h))+"px",height:2*(parseInt(a(i))+parseInt(h))+"px"};case"grid":return{display:"grid",gridTemplateColumns:`repeat(${Math.ceil(Math.sqrt(t))}, 1fr)`,gap:h};default:return{display:"flex",alignItems:"center",gap:h}}})(),...m};return e.createElement("div",{className:`react-loadly-dot-cluster react-loadly-dot-cluster-${d} ${u}`.trim(),style:b,"data-testid":y,...g},Array.from({length:t},(t,a)=>e.createElement(c,{key:a,size:i,color:l&&a%2==1?l:n,animation:`react-loadly-${p}`,animationDuration:f,animationDelay:v(a),style:x(a),"data-testid":y?`${y}-dot-${a}`:void 0})))},g=({count:t=5,lineWidth:i=4,lineHeight:n=35,color:l="var(--react-loadly-color)",secondaryColor:o,spacing:s=6,speed:d=1,arrangement:c="parallel",orientation:m="vertical",className:p="",style:y={},animationType:g="wave","data-testid":h,...f})=>{const x=a(s),v=r(1e3,d),b=e=>{if("radial"===c){return{position:"absolute",left:"50%",top:"50%",transformOrigin:"center",transform:`translate(-50%, -50%) rotate(${e/t*2*Math.PI}rad)`}}if("staggered"===c){const r=.3+.7*Math.sin(e/t*Math.PI);return{height:"vertical"===m?parseInt(a(n))*r+"px":a(n)}}return{}},$=e=>.1*e/d+"s",w={...(()=>{switch(c){case"radial":return{display:"flex",alignItems:"center",justifyContent:"center",position:"relative",width:1.5*parseInt(a(n))+"px",height:1.5*parseInt(a(n))+"px"};case"staggered":return{display:"flex",alignItems:"flex-end",justifyContent:"center",gap:x};default:return{display:"flex",alignItems:"center",justifyContent:"center",gap:x}}})(),...y};return e.createElement("div",{className:`react-loadly-line-group react-loadly-line-group-${c} ${p}`.trim(),style:w,"data-testid":h,...f},Array.from({length:t},(t,a)=>e.createElement(u,{key:a,width:"horizontal"===m?i:n,height:"horizontal"===m?n:i,color:o&&a%2==1?o:l,orientation:m,animation:`react-loadly-${g}`,animationDuration:v,animationDelay:$(a),style:b(a),"data-testid":h?`${h}-line-${a}`:void 0})))},h={size:20,color:"var(--react-loadly-color)",speed:1,loading:!0,count:5,"aria-label":"Loading..."},f={size:60,color:"var(--react-loadly-color)",speed:1,loading:!0,fluidity:1,amplitude:1,"aria-label":"Loading..."},x={size:15,color:"var(--react-loadly-color)",speed:1,loading:!0,count:3,"aria-label":"Loading..."},v={size:12,color:"var(--react-loadly-color)",speed:1,loading:!0,count:3,"aria-label":"Loading..."},b={size:60,speed:1,loading:!0,animationType:"spin",glowIntensity:.3,"aria-label":"Loading..."},$=({className:t=""})=>e.createElement("svg",{className:t,fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},e.createElement("path",{clipRule:"evenodd",fillRule:"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"})),w=({className:t=""})=>e.createElement("svg",{className:t,fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},e.createElement("path",{fillRule:"evenodd",d:"M9.243 3.03a1 1 0 01.727 1.213L9.53 6h2.94l.56-2.243a1 1 0 111.94.486L14.53 6H16a1 1 0 110 2h-1.97l-1 4H15a1 1 0 110 2h-2.47l-.56 2.242a1 1 0 11-1.94-.485L10.47 14H7.53l-.56 2.242a1 1 0 11-1.94-.485L5.47 14H4a1 1 0 110-2h1.97l1-4H5a1 1 0 110-2h2.47l.56-2.243a1 1 0 011.213-.727zM9.03 8l-1 4h2.94l1-4H9.03z",clipRule:"evenodd"})),C=({className:t=""})=>e.createElement("svg",{className:t,fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},e.createElement("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z",clipRule:"evenodd"})),E={size:60,color:"var(--react-loadly-color)",speed:1,loading:!0,fluidity:1,amplitude:1,"aria-label":"Loading..."},k={size:40,color:"var(--react-loadly-color)",speed:1,loading:!0,count:4,"aria-label":"Loading..."},N={size:60,color:"var(--react-loadly-color)",speed:1,loading:!0,fluidity:1,amplitude:1,"aria-label":"Loading..."},I={size:60,speed:1,loading:!0,animationType:"spin",glowIntensity:.3,"aria-label":"Loading...",alt:"Loading"},L={size:40,color:"var(--react-loadly-color)",speed:1,loading:!0,count:3,"aria-label":"Loading..."},z={size:60,color:"var(--react-loadly-color)",speed:1,loading:!0,borderWidth:4,"aria-label":"Loading..."},M={size:15,color:"var(--react-loadly-color)",speed:1,loading:!0,count:2,"aria-label":"Loading..."},T={size:40,speed:1,loading:!0,lines:1,variant:"card",color:"#f1f5f9",highlightColor:"#e2e8f0",shimmerColor:"rgba(255, 255, 255, 0.8)",borderRadius:"4px",spacing:"8px",waveWidth:"200px",waveDirection:"left-to-right","aria-label":"Loading content..."},R={size:40,color:"var(--react-loadly-color)",speed:1,loading:!0,lines:1,variant:"line",shimmer:!0,baseColor:"#e2e8f0",highlightColor:"#f1f5f9",shimmerColor:"rgba(255, 255, 255, 0.6)",borderRadius:"4px",spacing:"8px","aria-label":"Loading content..."},D={size:40,color:"var(--react-loadly-color)",speed:1,loading:!0,borderWidth:4,"aria-label":"Loading..."},j={speed:1,loading:!0,charDelay:100,"aria-label":"Loading...",loop:!0},S={size:40,color:"var(--react-loadly-color)",speed:1,loading:!0,count:5,"aria-label":"Loading..."},W=(t={})=>{const{initialLoading:a=!1,timeout:r,maxRetries:i=3,onLoadingChange:n,onError:l,onProgress:o}=t,[s,d]=e.useState({isLoading:a,progress:0,error:null,retryCount:0}),c=e.useRef(null),u=e.useRef(null);e.useEffect(()=>()=>{c.current&&clearTimeout(c.current),u.current&&clearTimeout(u.current)},[]),e.useEffect(()=>(s.isLoading&&r?c.current=setTimeout(()=>{d(e=>({...e,isLoading:!1,error:"Loading timeout exceeded"})),l?.("Loading timeout exceeded")},r):c.current&&clearTimeout(c.current),()=>{c.current&&clearTimeout(c.current)}),[s.isLoading,r,l]),e.useEffect(()=>{n?.(s.isLoading)},[s.isLoading,n]),e.useEffect(()=>{void 0!==s.progress&&o?.(s.progress)},[s.progress,o]);const m=e.useCallback(e=>{d(t=>({...t,isLoading:e,error:e?null:t.error,progress:e?0:t.progress}))},[]),p=e.useCallback(e=>{const t=Math.min(Math.max(e,0),100);d(e=>({...e,progress:t,isLoading:!(t>=100)&&e.isLoading}))},[]),y=e.useCallback(e=>{d(t=>({...t,error:e,isLoading:!1})),e&&l?.(e)},[l]),g=e.useCallback(()=>{d(e=>{const t=(e.retryCount||0)+1;return t>i?(l?.("Maximum retry attempts exceeded"),{...e,error:"Maximum retry attempts exceeded",isLoading:!1}):{...e,retryCount:t,isLoading:!0,error:null,progress:0}});const e=Math.min(1e3*Math.pow(2,s.retryCount||0),3e4);u.current=setTimeout(()=>{d(e=>({...e,isLoading:!0}))},e)},[s.retryCount,i,l]),h=e.useCallback(()=>{d({isLoading:!1,progress:0,error:null,retryCount:0}),c.current&&clearTimeout(c.current),u.current&&clearTimeout(u.current)},[]);return{state:s,setLoading:m,setProgress:p,setError:y,retry:g,reset:h}};exports.BarsLoader=r=>{const i=t(h,r),{size:l,color:o,speed:d,loading:c,className:u="",style:m={},count:p=5,showText:y,loadingText:g="Loading...","aria-label":f,"data-testid":x,fullscreen:v,screenWidth:b,screenHeight:$,loaderCenter:w,screenBackground:C,...E}=i,k=e.useMemo(()=>s("bars-loader"),[]),N=a(l),I=n(d);if(!c)return null;const L={display:"inline-flex",flexDirection:"column",alignItems:"center",...m,...v&&{position:"fixed",top:0,left:0,width:b||"100vw",height:$||"100vh",backgroundColor:C||"var(--react-loadly-background)",zIndex:9999,justifyContent:w?"center":m.justifyContent}},z={width:"4px",height:N,backgroundColor:o,borderRadius:"2px",animation:`react-loadly-bars ${I.duration} ease-in-out infinite`,animationPlayState:I.playState},M=Array.from({length:p}).map((t,a)=>{const r=.1*a+"s",i=.5+a%3*.25;return e.createElement("div",{key:a,style:{...z,animationDelay:r,height:parseFloat(N)*i+"px"},"data-testid":x?`${x}-bar-${a}`:void 0})});return e.createElement("div",{className:`react-loadly react-loadly-bars  ${u}`.trim(),style:L,role:"status","aria-label":f,"aria-live":"polite","aria-busy":c,"data-testid":x,...E},e.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",gap:"4px"}},M),y&&e.createElement("div",{className:"react-loadly-text",id:`${k}-text`,"aria-live":"polite"},g),e.createElement("span",{className:"react-loadly-sr-only"},f))},exports.BlobLoader=i=>{const n=t(f,i),{size:l,color:o,secondaryColor:d,speed:c,loading:u,fluidity:m,amplitude:p,className:y="",style:g={},showText:h,loadingText:x="Loading...","aria-label":v,"data-testid":b,...$}=n,w=e.useMemo(()=>s("blob-loader"),[]),C=a(l),E=r(2500,c);if(!u)return null;const k={display:"inline-flex",flexDirection:"column",alignItems:"center",...g},N={width:C,height:C,background:`linear-gradient(45deg, ${o}, ${d||o})`,borderRadius:"30% 70% 70% 30% / 30% 30% 70% 70%",animation:`blob-morph ${E} ease-in-out infinite`,filter:"blur(1px)",position:"relative"},I={position:"absolute",top:"20%",left:"20%",width:"60%",height:"60%",background:`radial-gradient(circle, ${d||o}, transparent)`,borderRadius:"40% 60% 60% 40% / 40% 40% 60% 60%",animation:`blob-inner ${E} ease-in-out infinite reverse`,opacity:.7};return e.createElement(e.Fragment,null,e.createElement("style",null,`\n        @keyframes blob-morph {\n          0%, 100% {\n            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;\n            transform: scale(1) rotate(0deg);\n          }\n          25% {\n            border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;\n            transform: scale(${1+.1*(p??1)}) rotate(90deg);\n          }\n          50% {\n            border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;\n            transform: scale(${1-.05*(p??1)}) rotate(180deg);\n          }\n          75% {\n            border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;\n            transform: scale(${1+.08*(p??1)}) rotate(270deg);\n          }\n        }\n        \n        @keyframes blob-inner {\n          0%, 100% {\n            border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;\n            transform: scale(1) rotate(0deg);\n          }\n          33% {\n            border-radius: 70% 30% 50% 50% / 30% 70% 30% 70%;\n            transform: scale(${1.1+.1*(m??1)}) rotate(-120deg);\n          }\n          66% {\n            border-radius: 30% 70% 40% 60% / 70% 30% 70% 30%;\n            transform: scale(${.9+.05*(m??1)}) rotate(-240deg);\n          }\n        }\n      `),e.createElement("div",{className:`react-loadly react-loadly-blob  ${y}`.trim(),style:k,role:"status","aria-label":v,"aria-live":"polite","aria-busy":u,"data-testid":b,...$},e.createElement("div",{style:N,"data-testid":b?`${b}-blob`:void 0},e.createElement("div",{style:I})),h&&e.createElement("div",{className:"react-loadly-text",id:`${w}-text`,"aria-live":"polite"},x),e.createElement("span",{className:"react-loadly-sr-only"},v)))},exports.BounceLoader=r=>{const i=t(x,r),{size:l,color:o,speed:d,loading:c,className:u="",style:m={},count:p=3,showText:y,loadingText:g="Loading...","aria-label":h,"data-testid":f,fullscreen:v,screenWidth:b,screenHeight:$,loaderCenter:w,screenBackground:C,...E}=i,k=e.useMemo(()=>s("bounce-loader"),[]),N=a(l),I=n(d);if(!c)return null;const L={display:"inline-flex",flexDirection:"column",alignItems:"center",...m,...v&&{position:"fixed",top:0,left:0,width:b||"100vw",height:$||"100vh",backgroundColor:C||"var(--react-loadly-background)",zIndex:9999,justifyContent:w?"center":m.justifyContent}},z={width:N,height:N,borderRadius:"50%",backgroundColor:o,animation:`react-loadly-bounce ${I.duration} ease-in-out infinite`,animationPlayState:I.playState},M=Array.from({length:p}).map((t,a)=>{const r=.1*a+"s";return e.createElement("div",{key:a,style:{...z,animationDelay:r},"data-testid":f?`${f}-ball-${a}`:void 0})});return e.createElement("div",{className:`react-loadly react-loadly-bounce ${u}`.trim(),style:L,role:"status","aria-label":h,"aria-live":"polite","aria-busy":c,"data-testid":f,...E},e.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",gap:"8px"}},M),y&&e.createElement("div",{className:"react-loadly-text",id:`${k}-text`,"aria-live":"polite"},g),e.createElement("span",{className:"react-loadly-sr-only"},h))},exports.Circle=p,exports.Dot=c,exports.DotCluster=y,exports.DotsLoader=r=>{const i=t(v,r),{size:l,color:o,speed:d,loading:c,className:u="",style:m={},count:p=3,showText:y,loadingText:g="Loading...","aria-label":h,"data-testid":f,fullscreen:x,screenWidth:b,screenHeight:$,loaderCenter:w,screenBackground:C,...E}=i,k=e.useMemo(()=>s("dots-loader"),[]),N=a(l),I=n(d);if(!c)return null;const L={display:"inline-flex",flexDirection:"column",alignItems:"center",...m,...x&&{position:"fixed",top:0,left:0,width:b||"100vw",height:$||"100vh",backgroundColor:C||"var(--react-loadly-background)",zIndex:9999,justifyContent:w?"center":m.justifyContent}},z={width:N,height:N,borderRadius:"50%",backgroundColor:o,animation:`react-loadly-dots ${I.duration} ease-in-out infinite`,animationPlayState:I.playState},M=Array.from({length:p}).map((t,a)=>{const r=.2*a+"s";return e.createElement("div",{key:a,style:{...z,animationDelay:r},"data-testid":f?`${f}-dot-${a}`:void 0})});return e.createElement("div",{className:`react-loadly react-loadly-dots  ${u}`.trim(),style:L,role:"status","aria-label":h,"aria-live":"polite","aria-busy":c,"data-testid":f,...E},e.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",gap:"6px"}},M),y&&e.createElement("div",{className:"react-loadly-text",id:`${k}-text`,"aria-live":"polite"},g),e.createElement("span",{className:"react-loadly-sr-only"},h))},exports.ElementLoader=a=>{const i=t(b,a),{size:n,width:l,height:o,speed:s=1,loading:d,animationType:c,glowIntensity:u,className:m="",style:p={},color:y="var(--react-loadly-color)","aria-label":g,loadingText:h,showText:f,"data-testid":x,fullscreen:v,screenWidth:$,screenHeight:w,loaderCenter:C,screenBackground:E,children:k,...N}=i;if(!d)return null;const I={display:"inline-flex",flexDirection:"column",alignItems:"center",...p,...v&&{position:"fixed",top:0,left:0,width:$||"100vw",height:w||"100vh",backgroundColor:E||"var(--react-loadly-background)",zIndex:9999,justifyContent:C?"center":p.justifyContent}},L=l||n,z=o||n,M={width:"number"==typeof L?`${L}px`:L,height:"number"==typeof z?`${z}px`:z,animation:(()=>{switch(c){case"pulse":return`react-loadly-pulse ${r(2e3,s)} infinite`;case"glow":return`react-loadly-glow ${r(2e3,s)} infinite`;case"bounce":return`react-loadly-bounce ${r(2e3,s)} infinite`;case"flip":return`react-loadly-flip ${r(2e3,s)} infinite`;default:return`react-loadly-spin ${r(2e3,s)} infinite`}})(),filter:(u??0)>0?`drop-shadow(0 0 ${20*(u??0)}px ${y})`:void 0,transformStyle:"preserve-3d",willChange:"transform",display:"flex",alignItems:"center",justifyContent:"center"},T={position:"absolute",top:"50%",left:"50%",width:"60%",height:"60%",borderRadius:"50%",backgroundColor:y,opacity:.3,transform:"translate(-50%, -50%)",animation:`react-loadly-pulse ${r(1500,1.5*s)} infinite`,zIndex:-1},R={position:"absolute",top:"50%",left:"50%",width:"120%",height:"120%",borderRadius:"50%",border:`2px solid ${y}`,opacity:.2,transform:"translate(-50%, -50%)",animation:`react-loadly-spin ${r(3e3,.8*s)} infinite reverse`,zIndex:-2};return e.createElement("div",{className:`react-loadly react-loadly-element-loader ${m}`.trim(),style:I,role:"status","aria-label":g,"aria-live":"polite","aria-busy":d,"data-testid":x,...N},e.createElement("div",{style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center"}},e.createElement("div",{style:R}),e.createElement("div",{style:T}),e.createElement("div",{style:M,className:"react-loadly-element","data-testid":x?`${x}-element`:void 0},k)),f&&e.createElement("div",{className:"react-loadly-text","aria-live":"polite"},h||g),e.createElement("span",{className:"react-loadly-sr-only"},g))},exports.FallbackLoader=({error:t="Something went wrong",onRetry:a,showRetry:r=!0,children:i,type:n="error",className:l="",style:o={},fullscreen:s,screenWidth:d,screenHeight:c,loaderCenter:u,screenBackground:m,...p})=>{const y={...o,...s&&{position:"fixed",top:0,left:0,width:d||"100vw",height:c||"100vh",backgroundColor:m||"var(--react-loadly-error-background)",zIndex:9999,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:u?"center":o.justifyContent}};return i?e.createElement("div",{className:`react-loadly-fallback ${l}`.trim(),style:y,...p},i):e.createElement("div",{className:`react-loadly-error ${l}`.trim(),style:y,role:"alert","aria-live":"polite",...p},(()=>{switch(n){case"network":return e.createElement(w,{className:"react-loadly-error-icon"});case"timeout":return e.createElement(C,{className:"react-loadly-error-icon"});default:return e.createElement($,{className:"react-loadly-error-icon"})}})(),e.createElement("p",{className:"react-loadly-error-message"},(()=>{switch(n){case"network":return t||"Network connection failed. Please check your internet connection.";case"timeout":return t||"Loading timeout. The operation took too long to complete.";default:return t||"Something went wrong. Please try again."}})()),r&&a&&e.createElement("button",{className:"react-loadly-retry-button",onClick:a,type:"button","aria-label":"Retry loading"},"Try Again"))},exports.FlowLoader=i=>{const n=t(E,i),{size:l,color:o,secondaryColor:d,speed:c,loading:u,amplitude:m,className:p="",style:y={},showText:g,loadingText:h="Loading...","aria-label":f,"data-testid":x,fullscreen:v,screenWidth:b,screenHeight:$,loaderCenter:w,screenBackground:C,...k}=n,N=e.useMemo(()=>s("flow-loader"),[]),I=a(l),L=parseInt(I),z=Math.max(.4*L,10),M=r(1500,c);if(!u)return null;const T={display:"inline-flex",flexDirection:"column",alignItems:"center",...y,...v&&{position:"fixed",top:0,left:0,width:b||"100vw",height:$||"100vh",backgroundColor:C||"var(--react-loadly-background)",zIndex:9999,justifyContent:w?"center":y.justifyContent}},R={width:I,height:`${z}px`,position:"relative",overflow:"hidden",borderRadius:`${Math.max(.2*L,4)}px`,backgroundColor:"rgba(0, 0, 0, 0.1)"},D=Math.max(Math.floor(L/15),3);return e.createElement(e.Fragment,null,e.createElement("style",null,`\n        @keyframes flow-particle-${N} {\n          0% {\n            transform: translateX(0) translateY(0) scale(0);\n            opacity: 0;\n          }\n          10% {\n            transform: translateX(${Math.min(.1*L,10)}px) translateY(${Math.sin(.1)*(m??Math.min(5,z/4))}px) scale(1);\n            opacity: 0.8;\n          }\n          50% {\n            transform: translateX(${Math.min(.5*L,.7*L)}px) translateY(${Math.sin(.5)*(m??Math.min(5,z/4))}px) scale(1);\n            opacity: 0.8;\n          }\n          90% {\n            transform: translateX(${Math.min(.9*L,L-10)}px) translateY(${Math.sin(.9)*(m??Math.min(5,z/4))}px) scale(1);\n            opacity: 0.8;\n          }\n          100% {\n            transform: translateX(${L}px) translateY(${Math.sin(1)*(m??Math.min(5,z/4))}px) scale(0);\n            opacity: 0;\n          }\n        }\n      `),e.createElement("div",{className:`react-loadly react-loadly-flow  ${p}`.trim(),style:T,role:"status","aria-label":f,"aria-live":"polite","aria-busy":u,"data-testid":x,...k},e.createElement("div",{style:R,"data-testid":x?`${x}-container`:void 0},Array.from({length:D},(t,a)=>(t=>{const a=.2*t/(c??1),r=parseFloat(M)+100*t,i=Math.max(L/10,4),n=i+t%3*(i/2);return e.createElement("div",{key:t,style:{position:"absolute",width:`${n}px`,height:`${n}px`,borderRadius:"50%",background:t%2==0?o:d||o,animation:`flow-particle-${N} ${r}ms ease-in-out infinite`,animationDelay:`${a}s`,opacity:.8-.1*t,left:"0px",top:(z-n)/2+t%3*(z/(D+1))+"px"},"data-testid":x?`${x}-particle-${t}`:void 0})})(a))),g&&e.createElement("div",{className:"react-loadly-text",id:`${N}-text`,"aria-live":"polite"},h),e.createElement("span",{className:"react-loadly-sr-only"},f)))},exports.GridLoader=r=>{const i=t(k,r),{size:n,color:l,secondaryColor:o,speed:d=1,loading:c,count:u,className:m="",style:p={},showText:y,loadingText:g="Loading...","aria-label":h,"data-testid":f,fullscreen:x,screenWidth:v,screenHeight:b,loaderCenter:$,screenBackground:w,...C}=i,E=e.useMemo(()=>s("grid-loader"),[]),N=e.useMemo(()=>{const e="number"==typeof n?n:parseInt(a(n)),t=Math.ceil(Math.sqrt(u||4));return Math.max(e/(1.5*t),8)},[n,u]);if(!c)return null;const I={display:"inline-flex",flexDirection:"column",alignItems:"center",...p,...x&&{position:"fixed",top:0,left:0,width:v||"100vw",height:b||"100vh",backgroundColor:w||"var(--react-loadly-background)",zIndex:9999,justifyContent:$?"center":p.justifyContent}};return e.createElement("div",{className:`react-loadly react-loadly-grid  ${m}`.trim(),style:I,role:"status","aria-label":h,"aria-live":"polite","aria-busy":c,"data-testid":f,...C},e.createElement("div",{className:"react-loadly-grid-container",style:{display:"grid",gridTemplateColumns:`repeat(${Math.ceil(Math.sqrt(u||4))}, 1fr)`,gap:N/3+"px"},"data-testid":f?`${f}-grid`:void 0},Array.from({length:u||4}).map((t,a)=>e.createElement("div",{key:a,className:"react-loadly-grid-item",style:{width:`${N}px`,height:`${N}px`,backgroundColor:a%2==0?l:o||l,borderRadius:"20%",animation:`react-loadly-scale ${1.2/(d||1)}s ease-in-out infinite`,animationDelay:.1*a/(d||1)+"s"}}))),y&&e.createElement("div",{className:"react-loadly-text",id:`${E}-text`,"aria-live":"polite"},g),e.createElement("span",{className:"react-loadly-sr-only"},h))},exports.Line=u,exports.LineGroup=g,exports.LiquidLoader=i=>{const n=t(N,i),{size:l,color:o,secondaryColor:d,speed:c,loading:u,amplitude:m,className:p="",style:y={},showText:g,loadingText:h="Loading...","aria-label":f,"data-testid":x,fullscreen:v,screenWidth:b,screenHeight:$,loaderCenter:w,screenBackground:C,...E}=n,k=e.useMemo(()=>s("liquid-loader"),[]),I=a(l),L=r(2e3,c);if(!u)return null;const z={display:"inline-flex",flexDirection:"column",alignItems:"center",...y,...v&&{position:"fixed",top:0,left:0,width:b||"100vw",height:$||"100vh",backgroundColor:C||"var(--react-loadly-background)",zIndex:9999,justifyContent:w?"center":y.justifyContent}},M={width:I,height:I,position:"relative",overflow:"hidden",borderRadius:"50%",backgroundColor:"rgba(0, 0, 0, 0.1)"},T=50-10*(m??1),R={position:"absolute",bottom:0,left:0,width:"200%",height:"200%",background:`linear-gradient(180deg, ${o} 0%, ${d||o} 100%)`,borderRadius:"40%",animation:`react-loadly-liquid-wave ${L} ease-in-out infinite`,transform:"translate(-25%, 50%) rotate(0deg)",animationTimingFunction:"cubic-bezier(0.36, 0.45, 0.63, 0.53)"},D={...R,background:`linear-gradient(180deg, ${d||o} 0%, ${o} 100%)`,animation:`react-loadly-liquid-wave ${L} ease-in-out infinite reverse`,animationDelay:-.5/(c??1)+"s",opacity:.8};return e.createElement(e.Fragment,null,e.createElement("style",null,`\n        @keyframes react-loadly-liquid-wave {\n          0%, 100% {\n            transform: translate(-25%, 50%) rotate(0deg);\n          }\n          50% {\n            transform: translate(-25%, ${T}%) rotate(180deg);\n          }\n        }\n      `),e.createElement("div",{className:`react-loadly react-loadly-liquid  ${p}`.trim(),style:z,role:"status","aria-label":f,"aria-live":"polite","aria-busy":u,"data-testid":x,...E},e.createElement("div",{style:M,"data-testid":x?`${x}-container`:void 0},e.createElement("div",{style:R}),e.createElement("div",{style:D})),g&&e.createElement("div",{className:"react-loadly-text",id:`${k}-text`,"aria-live":"polite"},h),e.createElement("span",{className:"react-loadly-sr-only"},f)))},exports.LogoSpinLoader=a=>{const i=t(I,a),{src:n,alt:l,size:o,speed:s,loading:d,animationType:c,glowIntensity:u,className:m="",style:p={},color:y="var(--react-loadly-color)","aria-label":g,loadingText:h,showText:f,"data-testid":x,fullscreen:v,screenWidth:b,screenHeight:$,loaderCenter:w,screenBackground:C,...E}=i;if(!d)return null;const k={display:"inline-flex",flexDirection:"column",alignItems:"center",...p,...v&&{position:"fixed",top:0,left:0,width:b||"100vw",height:$||"100vh",backgroundColor:C||"var(--react-loadly-background)",zIndex:9999,justifyContent:w?"center":p.justifyContent}},N={width:"number"==typeof o?`${o}px`:o,height:"number"==typeof o?`${o}px`:o,animation:`react-loadly-${c} ${r(2e3,s)} infinite`,filter:(u??0)>0?`drop-shadow(0 0 ${20*(u??0)}px ${y})`:void 0};return e.createElement("div",{className:`react-loadly react-loadly-logo-spin  ${m}`.trim(),style:k,role:"status","aria-label":g,"aria-live":"polite","aria-busy":d,"data-testid":x,...E},e.createElement("img",{src:n,alt:l,style:N,className:"react-loadly-logo","data-testid":x?`${x}-logo`:void 0}),f&&e.createElement("div",{className:"react-loadly-text","aria-live":"polite"},h||g),e.createElement("span",{className:"react-loadly-sr-only"},g))},exports.PulseLoader=r=>{const i=t(L,r),{size:n,color:l,secondaryColor:o,speed:d,loading:c,count:u,className:m="",style:p={},showText:g,loadingText:h="Loading...","aria-label":f,"data-testid":x,fullscreen:v,screenWidth:b,screenHeight:$,loaderCenter:w,screenBackground:C,...E}=i,k=e.useMemo(()=>s("pulse-loader"),[]),N=e.useMemo(()=>{const e="number"==typeof n?n:parseInt(a(n));return Math.max(e/5,6)},[n]);if(!c)return null;const I={display:"inline-flex",flexDirection:"column",alignItems:"center",...p,...v&&{position:"fixed",top:0,left:0,width:b||"100vw",height:$||"100vh",backgroundColor:C||"var(--react-loadly-background)",zIndex:9999,justifyContent:w?"center":p.justifyContent}};return e.createElement("div",{className:`react-loadly react-loadly-pulse  ${m}`.trim(),style:I,role:"status","aria-label":f,"aria-live":"polite","aria-busy":c,"data-testid":x,...E},e.createElement(y,{count:u,dotSize:N,color:l,secondaryColor:o,speed:d,arrangement:"linear",animationType:"pulse",spacing:N/2,"data-testid":x?`${x}-dots`:void 0}),g&&e.createElement("div",{className:"react-loadly-text",id:`${k}-text`,"aria-live":"polite"},h),e.createElement("span",{className:"react-loadly-sr-only"},f))},exports.Rectangle=m,exports.RingLoader=r=>{const i=t(z,r),{size:l,color:o,speed:d,loading:c,className:u="",style:m={},borderWidth:p,showText:y,loadingText:g="Loading...","aria-label":h,"data-testid":f,fullscreen:x,screenWidth:v,screenHeight:b,loaderCenter:$,screenBackground:w,...C}=i,E=e.useRef(s("ring-loader")),k=a(l),N=n(d);if(!c)return null;const I={display:"inline-flex",flexDirection:"column",alignItems:"center",...m,...x&&{position:"fixed",top:0,left:0,width:v||"100vw",height:b||"100vh",backgroundColor:w||"var(--react-loadly-background)",zIndex:9999,justifyContent:$?"center":m.justifyContent}},L={position:"relative",width:k,height:k},M={boxSizing:"border-box",display:"block",position:"absolute",width:k,height:k,border:`${p}px solid transparent`,borderTop:`${p}px solid ${o}`,borderBottom:`${p}px solid ${o}`,borderRadius:"50%",animation:`react-loadly-ring ${N.duration} cubic-bezier(0.5, 0, 0.5, 1) infinite`,animationPlayState:N.playState},T=Array.from({length:4}).map((t,a)=>{const r=90*a+"deg",i=-.15*a+"s";return e.createElement("div",{key:a,style:{...M,transform:`rotate(${r})`,animationDelay:i},"data-testid":f?`${f}-segment-${a}`:void 0})});return e.createElement("div",{className:`react-loadly react-loadly-ring  ${u}`.trim(),style:I,role:"status","aria-label":h,"aria-live":"polite","aria-busy":c,"data-testid":f,...C},e.createElement("div",{style:L},T),y&&e.createElement("div",{className:"react-loadly-text",id:`${E.current}-text`,"aria-live":"polite"},g),e.createElement("span",{className:"react-loadly-sr-only"},h))},exports.RotateLoader=r=>{const i=t(M,r),{size:l,color:o,speed:d,loading:c,className:u="",style:m={},count:p=2,showText:y,loadingText:g="Loading...","aria-label":h,"data-testid":f,fullscreen:x,screenWidth:v,screenHeight:b,loaderCenter:$,screenBackground:w,...C}=i,E=e.useMemo(()=>s("rotate-loader"),[]),k=a(l),N=n(d);if(!c)return null;const I={display:"inline-flex",flexDirection:"column",alignItems:"center",...m,...x&&{position:"fixed",top:0,left:0,width:v||"100vw",height:b||"100vh",backgroundColor:w||"var(--react-loadly-background)",zIndex:9999,justifyContent:$?"center":m.justifyContent}},L={position:"relative",width:k,height:k},z={position:"absolute",width:k,height:k,border:"2px solid transparent",borderTopColor:o,borderBottomColor:o,borderRadius:"50%",animation:`react-loadly-ring ${N.duration} cubic-bezier(0.5, 0, 0.5, 1) infinite`,animationPlayState:N.playState,transform:"rotate(0deg)"},T=Array.from({length:p}).map((t,a)=>{const r=1-.2*a,i=2+a,n=-.15*a+"s";return e.createElement("div",{key:a,style:{...z,width:parseFloat(k)*r+"px",height:parseFloat(k)*r+"px",borderWidth:`${i}px`,animationDuration:parseFloat(N.duration)*(1+.5*a)+"ms",animationDelay:n},"data-testid":f?`${f}-element-${a}`:void 0})});return e.createElement("div",{className:`react-loadly react-loadly-ring  ${u}`.trim(),style:I,role:"status","aria-label":h,"aria-live":"polite","aria-busy":c,"data-testid":f,...C},e.createElement("div",{style:L},T),y&&e.createElement("div",{className:"react-loadly-text",id:`${E}-text`,"aria-live":"polite"},g),e.createElement("span",{className:"react-loadly-sr-only"},h))},exports.ShapeGroup=({count:t=4,shapeSize:i=16,color:n="var(--react-loadly-color)",secondaryColor:l,spacing:o=8,speed:s=1,arrangement:d="linear",shapeTypes:c=["circle","rectangle"],className:u="",style:y={},animationType:g="pulse",borderWidth:h=0,"data-testid":f,...x})=>{const v=a(o),b=r(800,s),$=e=>{if("circular"===d){const a=e/t*2*Math.PI,r=2*parseInt(v);return{position:"absolute",left:"50%",top:"50%",transform:`translate(-50%, -50%) translate(${Math.cos(a)*r}px, ${Math.sin(a)*r}px)`}}if("spiral"===d){const a=e/t*4*Math.PI,r=(e+1)*parseInt(v)/2;return{position:"absolute",left:"50%",top:"50%",transform:`translate(-50%, -50%) translate(${Math.cos(a)*r}px, ${Math.sin(a)*r}px)`}}return{}},w=e=>.15*e/s+"s",C={...(()=>{switch(d){case"circular":return{display:"flex",alignItems:"center",justifyContent:"center",position:"relative",width:2.5*(parseInt(a(i))+parseInt(v))+"px",height:2.5*(parseInt(a(i))+parseInt(v))+"px"};case"spiral":return{display:"flex",alignItems:"center",justifyContent:"center",position:"relative",width:3*(parseInt(a(i))+parseInt(v))+"px",height:3*(parseInt(a(i))+parseInt(v))+"px"};default:return{display:"flex",alignItems:"center",gap:v}}})(),...y},E=t=>{const a=(e=>c[e%c.length])(t),r=l&&t%2==1?l:n,o={key:t,color:h>0?void 0:r,borderColor:h>0?r:void 0,borderWidth:h>0?h:void 0,animation:`react-loadly-${g}`,animationDuration:b,animationDelay:w(t),style:$(t),"data-testid":f?`${f}-shape-${t}`:void 0};return"circle"===a?e.createElement(p,{...o,size:i}):e.createElement(m,{...o,width:i,height:i})};return e.createElement("div",{className:`react-loadly-shape-group react-loadly-shape-group-${d} ${u}`.trim(),style:C,"data-testid":f,...x},Array.from({length:t},(e,t)=>E(t)))},exports.ShimmerLoader=r=>{const i=t(T,r),{size:n,width:l,height:o,speed:s,loading:d,className:c="",style:u={},lines:m=1,variant:p,borderRadius:y,spacing:g,waveWidth:h,color:f,highlightColor:x,shimmerColor:v,waveDirection:b,showText:$,loadingText:w="Loading content...","aria-label":C,"data-testid":E,fullscreen:k,screenWidth:N,screenHeight:I,loaderCenter:L,screenBackground:z,...M}=i;if(!d)return null;const R={display:"inline-flex",flexDirection:"column",alignItems:"center",...u,...k&&{position:"fixed",top:0,left:0,width:N||"100vw",height:I||"100vh",backgroundColor:z||"var(--react-loadly-background)",zIndex:9999,justifyContent:L?"center":u.justifyContent}},D=(()=>{switch(p){case"avatar":return{width:l||n||"40px",height:o||n||"40px",borderRadius:y||"50%"};case"card":return{width:l||"300px",height:o||"200px",borderRadius:y||"8px"};case"text":return{width:l||"100%",height:o||"16px",borderRadius:y||"4px"};case"wave":return{width:l||"100%",height:o||"20px",borderRadius:y||"10px"};default:return{width:l||n||"100%",height:o||"16px",borderRadius:y||"4px"}}})(),j=a(g,"8px"),S=a(h,"200px"),W={width:a(D.width),height:a(D.height),background:`linear-gradient(${"left-to-right"===b?"90deg":"right-to-left"===b?"270deg":"top-to-bottom"===b?"180deg":"0deg"}, ${f} 0%, ${x} 50%, ${f} 100%)`,backgroundSize:`${S} 100%`,borderRadius:a(D.borderRadius),position:"relative",overflow:"hidden",animation:`react-loadly-shimmer-wave ${2/(s||1)}s ease-in-out infinite`};return e.createElement("div",{className:`react-loadly react-loadly-shimmer ${c}`.trim(),style:R,role:"status","aria-label":C,"aria-live":"polite","aria-busy":d,"data-testid":E,...M},e.createElement("div",{style:{display:"flex",flexDirection:"column",width:"100%"}},"card"===p?e.createElement("div",{style:W,"data-testid":E?`${E}-shimmer`:void 0},e.createElement("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,background:`linear-gradient(90deg, transparent, ${v}, transparent)`,animation:`react-loadly-shimmer-overlay ${2/(s||1)}s ease-in-out infinite`}})):"avatar"===p?e.createElement("div",{style:W,"data-testid":E?`${E}-shimmer`:void 0},e.createElement("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,borderRadius:"50%",background:`linear-gradient(90deg, transparent, ${v}, transparent)`,animation:`react-loadly-shimmer-overlay ${2/(s||1)}s ease-in-out infinite`}})):"wave"===p?e.createElement("div",{style:W,"data-testid":E?`${E}-shimmer`:void 0},e.createElement("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,background:`linear-gradient(90deg, transparent, ${v}, transparent)`,animation:`react-loadly-shimmer-wave-overlay ${2/(s||1)}s ease-in-out infinite`}})):Array.from({length:m},(t,a)=>{const r=a===m-1&&m>1?"60%":"100%";return e.createElement("div",{key:a,style:{...W,width:r,marginBottom:a<m-1?j:0},"data-testid":E?`${E}-shimmer-${a}`:void 0},e.createElement("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,background:`linear-gradient(90deg, transparent, ${v}, transparent)`,animation:`react-loadly-shimmer-overlay ${2/(s||1)}s ease-in-out infinite`,animationDelay:.1*a+"s"}}))})),$&&e.createElement("div",{className:"react-loadly-text","aria-live":"polite"},w),e.createElement("span",{className:"react-loadly-sr-only"},C))},exports.SkeletonLoader=r=>{const i=t(R,r),{size:n,width:l,height:o,speed:s,loading:d,className:c="",style:u={},lines:m=1,variant:p,borderRadius:y,spacing:g,shimmer:h,baseColor:f,highlightColor:x,shimmerColor:v,showText:b,loadingText:$="Loading content...","aria-label":w,"data-testid":C,fullscreen:E,screenWidth:k,screenHeight:N,loaderCenter:I,screenBackground:L,...z}=i;if(!d)return null;const M={display:"inline-flex",flexDirection:"column",alignItems:"center",...u,...E&&{position:"fixed",top:0,left:0,width:k||"100vw",height:N||"100vh",backgroundColor:L||"var(--react-loadly-background)",zIndex:9999,justifyContent:I?"center":u.justifyContent}},T=(()=>{switch(p){case"avatar":return{width:l||n||"40px",height:o||n||"40px",borderRadius:y||"50%"};case"card":return{width:l||"300px",height:o||"200px",borderRadius:y||"8px"};case"text":return{width:l||"100%",height:o||"16px",borderRadius:y||"4px"};default:return{width:l||n||"100%",height:o||"16px",borderRadius:y||"4px"}}})(),D=a(g,"8px"),j={width:a(T.width),height:a(T.height),backgroundColor:f,borderRadius:a(T.borderRadius),position:"relative",overflow:"hidden",...h&&{background:`linear-gradient(90deg, ${f} 25%, ${x} 50%, ${f} 75%)`,backgroundSize:"200% 100%",animation:`react-loadly-shimmer ${1.5/(s||1)}s ease-in-out infinite`}};return e.createElement("div",{className:`react-loadly react-loadly-skeleton ${c}`.trim(),style:M,role:"status","aria-label":w,"aria-live":"polite","aria-busy":d,"data-testid":C,...z},e.createElement("div",{style:{display:"flex",flexDirection:"column",width:"100%"}},"card"===p?e.createElement("div",{style:j,"data-testid":C?`${C}-skeleton`:void 0},h&&e.createElement("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,background:`linear-gradient(90deg, transparent, ${v}, transparent)`,animation:`react-loadly-shimmer-overlay ${1.5/(s||1)}s ease-in-out infinite`}})):"avatar"===p?e.createElement("div",{style:j,"data-testid":C?`${C}-skeleton`:void 0},h&&e.createElement("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,borderRadius:"50%",background:`linear-gradient(90deg, transparent, ${v}, transparent)`,animation:`react-loadly-shimmer-overlay ${1.5/(s||1)}s ease-in-out infinite`}})):Array.from({length:m},(t,a)=>{const r=a===m-1&&m>1?"60%":"100%";return e.createElement("div",{key:a,style:{...j,width:r,marginBottom:a<m-1?D:0},"data-testid":C?`${C}-skeleton-${a}`:void 0},h&&e.createElement("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,background:`linear-gradient(90deg, transparent, ${v}, transparent)`,animation:`react-loadly-shimmer-overlay ${1.5/(s||1)}s ease-in-out infinite`,animationDelay:.1*a+"s"}}))})),b&&e.createElement("div",{className:"react-loadly-text","aria-live":"polite"},$),e.createElement("span",{className:"react-loadly-sr-only"},w))},exports.SpinLoader=r=>{const i=t(D,r),{size:l,color:o,speed:d,loading:c,className:u="",style:m={},borderWidth:p,showText:y,loadingText:g="Loading...","aria-label":h,"data-testid":f,fullscreen:x,screenWidth:v,screenHeight:b,loaderCenter:$,screenBackground:w,...C}=i,E=e.useRef(s("spin-loader")),k=a(l),N=n(d);if(!c)return null;const I={display:"inline-flex",flexDirection:"column",alignItems:"center",...m,...x&&{position:"fixed",top:0,left:0,width:v||"100vw",height:b||"100vh",backgroundColor:w||"var(--react-loadly-background)",zIndex:9999,justifyContent:$?"center":m.justifyContent}},L={width:k,height:k,border:`${p}px solid transparent`,borderTop:`${p}px solid ${o}`,borderRadius:"50%",animation:`react-loadly-spin ${N.duration} linear infinite`,animationPlayState:N.playState};return e.createElement("div",{className:`react-loadly react-loadly-spin  ${u}`.trim(),style:I,role:"status","aria-label":h,"aria-live":"polite","aria-busy":c,"data-testid":f,...C},e.createElement("div",{style:L,"data-testid":f?`${f}-spinner`:void 0}),y&&e.createElement("div",{className:"react-loadly-text",id:`${E.current}-text`,"aria-live":"polite"},g),e.createElement("span",{className:"react-loadly-sr-only"},h))},exports.TypingLoader=a=>{const r=t(j,a),{loadingText:i,speed:n=1,loading:l,charDelay:o=100,loop:s,className:d="",style:c={},color:u="var(--react-loadly-text-color)",fontFamily:m,fontWeight:p=500,"aria-label":y,"data-testid":g,showText:h,fullscreen:f,screenWidth:x,screenHeight:v,loaderCenter:b,screenBackground:$,...w}=r,[C,E]=e.useState(""),[k,N]=e.useState(!1),I=e.useRef(null);if(e.useEffect(()=>{if(I.current&&(clearTimeout(I.current),I.current=null),!l||!i)return void E("");N(!0),E("");const e=(t=0)=>{t<i.length?(E(i.substring(0,t+1)),I.current=setTimeout(()=>e(t+1),o/n)):s?I.current=setTimeout(()=>{E(""),e(0)},2*o):N(!1)};return e(0),()=>{I.current&&clearTimeout(I.current)}},[l,i,o,n,s]),!l)return null;const L={display:"inline-flex",flexDirection:"column",alignItems:"center",...c,...f&&{position:"fixed",top:0,left:0,width:x||"100vw",height:v||"100vh",backgroundColor:$||"var(--react-loadly-background)",zIndex:9999,justifyContent:b?"center":c.justifyContent}},z={color:u,fontFamily:m,fontWeight:p,fontSize:"1.2em",whiteSpace:"pre"};return e.createElement("div",{className:`react-loadly react-loadly-typing  ${d}`.trim(),style:L,role:"status","aria-label":y,"aria-live":"polite","aria-busy":l,"data-testid":g,...w},e.createElement("div",{style:z,"data-testid":g?`${g}-text`:void 0},C,e.createElement("span",{className:"react-loadly-typing-cursor",style:{display:k?"inline-block":"none",animation:`react-loadly-blink ${1/n}s step-end infinite`,marginLeft:"2px",verticalAlign:"baseline"}},"|")),h&&e.createElement("div",{className:"react-loadly-text","aria-live":"polite"},i),e.createElement("span",{className:"react-loadly-sr-only"},y))},exports.WaveLoader=r=>{const i=t(S,r),{size:n,color:l,secondaryColor:o,speed:d,loading:c,count:u,className:m="",style:p={},showText:y,loadingText:h="Loading...","aria-label":f,"data-testid":x,fullscreen:v,screenWidth:b,screenHeight:$,loaderCenter:w,screenBackground:C,...E}=i,k=e.useMemo(()=>s("wave-loader"),[]),N=e.useMemo(()=>{const e="number"==typeof n?n:parseInt(a(n));return{width:Math.max(e/10,3),height:e,spacing:Math.max(e/8,4)}},[n]);if(!c)return null;const I={display:"inline-flex",flexDirection:"column",alignItems:"center",...p,...v&&{position:"fixed",top:0,left:0,width:b||"100vw",height:$||"100vh",backgroundColor:C||"var(--react-loadly-background)",zIndex:9999,justifyContent:w?"center":p.justifyContent}};return e.createElement("div",{className:`react-loadly react-loadly-wave  ${m}`.trim(),style:I,role:"status","aria-label":f,"aria-live":"polite","aria-busy":c,"data-testid":x,...E},e.createElement(g,{count:u,lineWidth:N.width,lineHeight:N.height,color:l,secondaryColor:o,speed:d,arrangement:"staggered",orientation:"vertical",animationType:"wave",spacing:N.spacing,"data-testid":x?`${x}-lines`:void 0}),y&&e.createElement("div",{className:"react-loadly-text",id:`${k}-text`,"aria-live":"polite"},h),e.createElement("span",{className:"react-loadly-sr-only"},f))},exports.clamp=l,exports.createAnimationName=function(e){return`react-loadly-${e}`},exports.createAnimationString=function(e,t,a="ease",r="normal",i="infinite"){return`${e} ${t} ${a} ${r} ${i}`},exports.generateCSSVariables=function(e){const t={};return Object.entries(e).forEach(([e,a])=>{void 0!==a&&(t[e]=a)}),t},exports.generateId=s,exports.getAnimationDirection=function(e="normal"){return e},exports.getAnimationDuration=r,exports.getAnimationEasing=function(e="ease"){return e},exports.getOptimizedAnimationSettings=n,exports.getSizeValue=a,exports.hexToRgb=o,exports.mergeProps=t,exports.prefersReducedMotion=i,exports.rgba=function(e,t){const a=o(e);return a?`rgba(${a.r}, ${a.g}, ${a.b}, ${l(t,0,1)})`:e},exports.sanitizeCSSValue=d,exports.useAsyncLoader=(t,a=[],r={})=>{const i=W(r),[n,l]=e.useState(null),o=e.useCallback(async()=>{try{i.setLoading(!0),i.setError(null);const e=await t();return l(e),i.setProgress(100),e}catch(e){const t=e instanceof Error?e.message:"Unknown error occurred";return i.setError(t),null}},[t,i]);return e.useEffect(()=>{o()},a),{...i,data:n,execute:o}},exports.useLoaderState=W,exports.useMultipleLoaderStates=(e,t={})=>e.reduce((e,a)=>(e[a]=W(t),e),{});
 //# sourceMappingURL=index.cjs.js.map