/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.0.0-canary-68a4774
 * Released under the MIT license.
 */

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { tasty } from '../../../tasty/index.js';
const ScrollProgressElement = tasty({
    qa: 'PlaygroundScrollProgress',
});
export function ScrollProgress({ styles }) {
    return (_jsxs(ScrollProgressElement, { styles: styles, children: [_jsx("div", { "data-element": "ProgressBar" }), _jsxs("div", { "data-element": "Content", children: [_jsx("p", { style: { margin: 0, opacity: 0.7 }, children: "Scroll down to see the progress bar animate" }), _jsxs("p", { style: { margin: '16px 0 0', opacity: 0.5, fontSize: '12px' }, children: ["(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {})] })] })] }));
}

        