@vlinderclimate/net-zero-ui/components/StepLabel.js

<div align="center"> <img src="https://storage.yandexcloud.net/static.vlinderstorage.com/Telegram_VlinderTech.png" width=200 /> </div> <h1 align="center">Net Zero UI kit</h1>

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib_es6 = require('../tslib.es6-9240d9d1.js');
var jsxRuntime = require('react/jsx-runtime');
var styles = require('@mui/material/styles');
var MuiStepLabel = require('@mui/material/StepLabel');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var MuiStepLabel__default = /*#__PURE__*/_interopDefaultLegacy(MuiStepLabel);

var StepLabelBox = styles.styled(MuiStepLabel__default["default"])(function (_a) {
    var _b;
    var theme = _a.theme;
    return (_b = {
            position: "relative",
            "&::after": {
                content: "''",
                border: 0,
                borderLeftWidth: 2,
                borderStyle: "solid",
                borderColor: theme.palette.green.main,
                position: "absolute",
                top: theme.spacing(2),
                bottom: theme.spacing(-2),
                marginLeft: "-1px",
                left: 12
            },
            ".MuiStepLabel-iconContainer": {
                paddingRight: theme.spacing(3)
            }
        },
        _b[theme.breakpoints.down("sm")] = {
            "&::after": {
                borderLeftWidth: 1,
                top: theme.spacing(1),
                bottom: theme.spacing(-1),
                left: 8
            },
            ".MuiStepLabel-iconContainer": {
                paddingRight: 18
            }
        },
        _b);
});
var StepIcon = styles.styled("div")(function (_a) {
    var _b;
    var theme = _a.theme, ownerState = _a.ownerState;
    return (tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({ zIndex: 1, width: 24, height: 24, borderRadius: "100%", boxShadow: "0 0 0 2px " + theme.palette.gray.white, backgroundColor: theme.palette.green.main }, (ownerState.active && {})), (ownerState.completed && {})), (_b = {}, _b[theme.breakpoints.down("sm")] = {
        width: 16,
        height: 16
    }, _b)));
});
var StepIconBox = function (props) {
    var active = props.active, completed = props.completed, className = props.className;
    return jsxRuntime.jsx(StepIcon, { ownerState: { completed: completed, active: active }, className: className }, void 0);
};
var StepLabel = function (_a) {
    var children = _a.children, restProps = tslib_es6.__rest(_a, ["children"]);
    return (jsxRuntime.jsx(StepLabelBox, tslib_es6.__assign({ StepIconComponent: StepIconBox }, restProps, { children: children }), void 0));
};

exports["default"] = StepLabel;