import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Collapse } from '../../../Collapse';
import { Typography } from '../../../Typography';
import { Fade } from '../../../transitions/Fade';
import { stepClassnames } from '../constants';
import { DesktopLabel, MobileCompactLabel, MobileLabelGroup } from './styles';
export const Label = ({ label, isActiveStep }) => {
    return (_jsxs(_Fragment, { children: [_jsx(DesktopLabel, { className: stepClassnames.label, variant: "caption", children: label }), _jsxs(MobileLabelGroup, { className: stepClassnames.labelMobile, children: [_jsx(Collapse, { in: !isActiveStep, orientation: "horizontal", children: _jsx(Fade, { in: !isActiveStep, children: _jsx(MobileCompactLabel, { className: stepClassnames.label, component: "span" }) }) }), _jsx(Collapse, { in: isActiveStep, orientation: "horizontal", children: _jsx(Fade, { in: isActiveStep, children: _jsx(Typography, { className: stepClassnames.label, children: label }) }) })] })] }));
};
