@stakefish/ui/components/StepperHorizontal.js

<div align="center"> <a href="https://www.npmjs.com/package/@stakefish/ui"><img src="https://gateway.pinata.cloud/ipfs/QmbZL1ceA8Yiz2pKALTg919jYx141DPUGegC9L4XpyayW5" width="300" /></a> </div>

import { _ as __assign } from '../tslib.es6-35932c2c.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { styled } from '@mui/material/styles';
import { c as clsx } from '../clsx.m-6243b874.js';

/**
 * Copyright (c) 2013-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

/**
 * Use invariant() to assert state which your program assumes to be true.
 *
 * Provide sprintf-style format (only %s is supported) and arguments
 * to provide information about what broke and what you were
 * expecting.
 *
 * The invariant message will be stripped in production, but the invariant
 * will remain to ensure logic does not differ in production.
 */

var NODE_ENV = process.env.NODE_ENV;

var invariant = function(condition, format, a, b, c, d, e, f) {
  if (NODE_ENV !== 'production') {
    if (format === undefined) {
      throw new Error('invariant requires an error message argument');
    }
  }

  if (!condition) {
    var error;
    if (format === undefined) {
      error = new Error(
        'Minified exception occurred; use the non-minified dev environment ' +
        'for the full error message and additional helpful warnings.'
      );
    } else {
      var args = [a, b, c, d, e, f];
      var argIndex = 0;
      error = new Error(
        format.replace(/%s/g, function() { return args[argIndex++]; })
      );
      error.name = 'Invariant Violation';
    }

    error.framesToPop = 1; // we don't care about invariant's own frame
    throw error;
  }
};

var invariant_1 = invariant;

var STEP_PREFIX = "StepperHorizontal-Step";
var StepperHorizontalBox = styled("div")(function (_a) {
    var theme = _a.theme;
    return ({
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        backgroundColor: theme.palette.gray.white,
        padding: theme.spacing(2, 3, 5, 3)
    });
});
var StepperHorizontalStep = styled("div")(function (_a) {
    var _b, _c;
    var theme = _a.theme;
    return (_b = {
            boxSizing: "content-box",
            padding: theme.spacing(1),
            flex: "1"
        },
        _b["&.".concat(STEP_PREFIX, "-active, &.").concat(STEP_PREFIX, "-completed")] = (_c = {},
            _c["& .".concat(STEP_PREFIX, "-icon")] = {
                backgroundColor: theme.palette.primary.main
            },
            _c["& .".concat(STEP_PREFIX, "-label")] = {
                color: theme.palette.text.primary,
                fontFamily: theme.typography.fontFamilyHeadline
            },
            _c),
        _b["& .".concat(STEP_PREFIX, "-icon")] = {
            backgroundColor: theme.palette.gray[100],
            borderRadius: theme.borders.radius.md,
            padding: theme.spacing(0.5)
        },
        _b["& .".concat(STEP_PREFIX, "-label")] = {
            padding: theme.spacing(1),
            fontSize: theme.typography.fontSizeXs2,
            fontWeight: theme.typography.fontWeightNormal,
            textAlign: "center",
            color: theme.palette.text.secondary
        },
        _b);
});
var StepperHorizontal = function (_a) {
    var steps = _a.steps, _b = _a.activeStep, activeStep = _b === void 0 ? 0 : _b;
    invariant_1(steps.length >= 2, "You must declare at least 2 steps");
    var renderSteps = function () {
        return steps.map(function (step, i) {
            var isActive = activeStep === i;
            var isComplete = activeStep > i;
            var className = clsx([
                "".concat(STEP_PREFIX),
                isActive && "".concat(STEP_PREFIX, "-active"),
                isComplete && "".concat(STEP_PREFIX, "-completed")
            ]);
            return (jsxs(StepperHorizontalStep, __assign({ className: className }, { children: [jsx("div", { className: "".concat(STEP_PREFIX, "-icon") }, void 0), jsx("div", __assign({ className: "".concat(STEP_PREFIX, "-label") }, { children: step }), void 0)] }), i));
        });
    };
    return jsx(StepperHorizontalBox, { children: renderSteps() }, void 0);
};

export { StepperHorizontal as default };