@wulperstudio/cms/organisms/Stepper/Stepper.js

Wulper Studio Library Components CMS

import React from 'react';
import { v4 } from 'uuid';
import Box from '@mui/material/Box';
import { Stepper as StepperWS, Step, StepLabel, useTheme, Stack } from '@mui/material';
import { TextForLinesOutput } from '../../components/TextForLinesOutput';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var Stepper = function Stepper(_ref) {
  var activeStep = _ref.activeStep,
    steps = _ref.steps,
    title = _ref.title;
  var theme = useTheme();
  return /*#__PURE__*/_jsx(Box, {
    sx: {
      width: '100%'
    },
    children: /*#__PURE__*/_jsxs(Stack, {
      rowGap: 2,
      children: [title && /*#__PURE__*/_jsx("div", {
        children: /*#__PURE__*/_jsx(TextForLinesOutput, {
          text: title,
          clines: 1,
          color: theme.palette.text.primary,
          fontSize: "25px",
          fontWeight: "600"
        })
      }), /*#__PURE__*/_jsx(StepperWS, {
        activeStep: activeStep,
        orientation: "vertical",
        children: steps.map(function (step) {
          return /*#__PURE__*/_jsx(Step, {
            children: /*#__PURE__*/_jsx(StepLabel, {
              children: step.label
            })
          }, v4());
        })
      })]
    })
  });
};