import { b as __makeTemplateObject, _ as __assign } from '../tslib.es6-20a2a300.js';
import { jsx } from 'react/jsx-runtime';
import { s as styled } from '../styled-components.esm-a98d7870.js';
import Icon from './Icon.js';
import Typography from './Typography.js';
import colors from '../theme/colors.js';
import '../defaultTheme-49a26576.js';
import 'react';
import '../hoist-non-react-statics.cjs-b718ab87.js';
import '../icons/ArrowRight.js';
import '../icons/ArrowRightCircle.js';
import '../icons/Check.js';
import '../icons/CheckCircle.js';
import '../icons/ChevronRight.js';
import '../icons/CrossCircle.js';
import '../icons/DollarSign.js';
import '../icons/InfoCircle.js';
import '../icons/Link.js';
import '../icons/TriangleUp.js';
import '../icons/TriangleDown.js';
import '../icons/TriangleLeft.js';
import '../icons/Copy.js';
import '../icons/SortUp.js';
import '../icons/Cross.js';
import '../icons/Search.js';
import '../icons/Range.js';
import '../makeStyles-c9a99c7a.js';
import '../_commonjsHelpers-57e89916.js';
import '../theme/fontSize.js';
import '../theme/fontWeight.js';
import '../theme/fontFamily.js';
import '../theme/lineHeight.js';
import '../Typography-649a8eff.js';
import '../clsx.m-6243b874.js';
import '../withStyles-99aeb25b.js';
import '../capitalize-5d3e9aac.js';

var IconBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
    var theme = _a.theme, isError = _a.isError;
    return ({
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        width: theme.spacing(6),
        height: theme.spacing(6),
        borderRadius: "100%",
        border: "5px solid " + colors.gray.white,
        boxSizing: "content-box",
        backgroundColor: !isError ? colors.success.main : colors.error.light,
        "& .icon": {
            width: theme.spacing(2),
            height: theme.spacing(2)
        }
    });
});
var StepIcon = function (props) {
    var error = props.error, completed = props.completed, icon = props.icon;
    return (jsx(IconBox, __assign({ isError: error !== null && error !== void 0 ? error : false }, { children: completed ? jsx(Icon, { iconKey: "check" }, void 0) : jsx(Typography, __assign({ variant: "calloutBold" }, { children: icon }), void 0) }), void 0));
};
var templateObject_1;

export { StepIcon as default };
