"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Label = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const Collapse_1 = require("../../../Collapse");
const Typography_1 = require("../../../Typography");
const Fade_1 = require("../../../transitions/Fade");
const constants_1 = require("../constants");
const styles_1 = require("./styles");
const Label = ({ label, isActiveStep }) => {
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles_1.DesktopLabel, { className: constants_1.stepClassnames.label, variant: "caption", children: label }), (0, jsx_runtime_1.jsxs)(styles_1.MobileLabelGroup, { className: constants_1.stepClassnames.labelMobile, children: [(0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { in: !isActiveStep, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(Fade_1.Fade, { in: !isActiveStep, children: (0, jsx_runtime_1.jsx)(styles_1.MobileCompactLabel, { className: constants_1.stepClassnames.label, component: "span" }) }) }), (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { in: isActiveStep, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(Fade_1.Fade, { in: isActiveStep, children: (0, jsx_runtime_1.jsx)(Typography_1.Typography, { className: constants_1.stepClassnames.label, children: label }) }) })] })] }));
};
exports.Label = Label;
