import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { omitThemingProps, styled, useStyleConfig, vui } from '../core';
import { cs, filterUndefined } from '../utils';
export const SkeletonBase = styled.divBox `
  animation: vui-pulse 1.5s ease-in-out 0.5s infinite;
`;
/**
 * Displays one or more animated skeleton elements to signify loading content.
 */
export const Skeleton = vui((props, ref) => {
    const { className, repeat = 1, ...rest } = omitThemingProps(props);
    const styles = useStyleConfig('Skeleton', props);
    const arr = Array(repeat).fill(0);
    const aliasedProps = filterUndefined({
        w: props.variant === 'circle' ? styles.h : undefined,
    });
    return (_jsx(_Fragment, { children: arr.map((_, i) => (_jsx(SkeletonBase, { className: cs('vui-skeleton', className), ref: ref, ...styles, ...aliasedProps, ...rest }, i))) }));
});
Skeleton.displayName = 'Skeleton';
export default Skeleton;
//# sourceMappingURL=skeleton.js.map