@mailstep/design-system 0.8.26-beta.5 → 0.8.26

package/ui/Blocks/SideMenu/styles.js

@@ -1,417 +0,0 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n  ::after {\n    content: '';\n    position: absolute;\n    width: 60px;\n    height: 40px;\n    z-index: -1;\n    border-radius: 9px 0 0 9px;\n    left: 8px;\n    top: -1px;\n  }\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  height: 40px;\n  width: 40px;\n  padding: 9px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9px;\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  display: ",
-        ";\n\n  @media (min-width: 1024px) {\n    display: block;\n    align-self: stretch;\n    height: fit-content;\n\n    @media print {\n      display: none;\n    }\n  }\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n  margin-left: 23px;\n  border-left: 1.5px solid;\n  border-color: ",
-        ";\n"
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n  height: 1px;\n  width: 100%;\n  margin: 12px 0;\n  background-color: ",
-        ";\n"
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject5() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: ",
-        ";\n  margin-bottom: ",
-        ";\n  margin-left: ",
-        ";\n"
-    ]);
-    _templateObject5 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject6() {
-    var data = _tagged_template_literal([
-        "\n  color: ",
-        ";\n  svg {\n    max-width: 11px;\n  }\n"
-    ]);
-    _templateObject6 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject7() {
-    var data = _tagged_template_literal([
-        "\n  line-height: 1.5;\n  letter-spacing: 0.4px;\n"
-    ]);
-    _templateObject7 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject8() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  flex-direction: ",
-        ";\n  align-items: center;\n  cursor: pointer;\n  height: ",
-        ";\n  border-radius: ",
-        ";\n  font-weight: 600;\n  letter-spacing: 0.4px;\n  position: relative;\n  color: ",
-        ";\n  transition: moving 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);\n  transition-property: transform;\n\n  &.toplevel {\n    margin: ",
-        ";\n    padding: ",
-        ";\n    gap: ",
-        ";\n    justify-content: ",
-        ";\n    &.active {\n      color: ",
-        ";\n    }\n  }\n\n  &.nestedlevel {\n    padding: 0;\n    :hover {\n      color: ",
-        ";\n    }\n  }\n\n  &.active > ",
-        " {\n    background-color: ",
-        ";\n    color: ",
-        ";\n    width: 100%;\n    border-left: 4px solid ",
-        ";\n    :last-child {\n      border-bottom-right-radius: 10px;\n    }\n    :first-child {\n      border-top-right-radius: 10px;\n    }\n  }\n\n  ",
-        " {\n    color: ",
-        ";\n    padding-left: 10px;\n    width: -webkit-fill-available;\n    height: -webkit-fill-available;\n  }\n\n  &.active,\n  &.selected {\n    ",
-        " {\n      color: ",
-        ";\n    }\n  }\n"
-    ]);
-    _templateObject8 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject9() {
-    var data = _tagged_template_literal([
-        "\n          & ",
-        " {\n            ",
-        "\n            ::after {\n              background-color: ",
-        ";\n            }\n          }\n        "
-    ]);
-    _templateObject9 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject10() {
-    var data = _tagged_template_literal([
-        "\n            & ",
-        " {\n              ",
-        "\n              :hover {\n                background-color: ",
-        ";\n              }\n            }\n          "
-    ]);
-    _templateObject10 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject11() {
-    var data = _tagged_template_literal([
-        "\n                    & ",
-        " {\n                      ",
-        "\n                      ::after {\n                        background-color: ",
-        ";\n                      }\n                    }\n                  "
-    ]);
-    _templateObject11 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject12() {
-    var data = _tagged_template_literal([
-        "\n                    & ",
-        " {\n                      background-color: ",
-        ";\n                      :hover {\n                        background-color: ",
-        ";\n                      }\n                    }\n                  "
-    ]);
-    _templateObject12 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject13() {
-    var data = _tagged_template_literal([
-        "\n   z-index: 1;\n   stroke: ",
-        ";\n   .selected > ",
-        ", .active > ",
-        " {\n     color: ",
-        ";\n     stroke: ",
-        ";\n   }\n\n    .toplevel {\n      ",
-        "\n\n        ",
-        "\n\n          &.active, &.selected {\n            ",
-        "\n       \n            background-color: ",
-        ";\n            svg {\n              stroke: ",
-        ";\n            }\n          }\n\n          &.expanded > ",
-        " {\n            visibility: visible;\n            svg {\n              transform: rotate(180deg);\n            }\n          }\n    }\n\n    &:hover {\n      ",
-        ".toplevel {\n        background-color: ",
-        ";\n      }\n      ",
-        ".toplevel.active, ",
-        ".toplevel.selected {\n        background-color: ",
-        ";\n      }\n      ",
-        ".nestedlevel {\n        background-color: inherit;\n      }\n    }\n  }\n"
-    ]);
-    _templateObject13 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject14() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-right: ",
-        ";\n  margin-bottom: ",
-        ";\n"
-    ]);
-    _templateObject14 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject15() {
-    var data = _tagged_template_literal([
-        "\n  position: absolute;\n  background-color: ",
-        ";\n  white-space: nowrap;\n  transform: translateX(8px);\n  width: 248px;\n  border-radius: 0 10px 10px 0;\n  z-index: 5;\n  &::before {\n    content: '';\n    position: absolute;\n    border-radius: 10px;\n    width: calc(100% + 80px);\n    height: calc(100% + 100px);\n    left: -16px;\n    top: -50px;\n  }\n\n  & :not(:last-child) {\n    border-radius: 0;\n    border-bottom: 0.5px solid ",
-        ";\n  }\n\n  &:first-child > {\n    :hover {\n      border-top-right-radius: 10px;\n      background-color: ",
-        ";\n    }\n  }\n\n  & :not(:first-child) {\n    :hover {\n      border-top-right-radius: 0;\n    }\n  }\n\n  & :last-child > {\n    :hover {\n      border-bottom-right-radius: 10px;\n      background-color: ",
-        ";\n    }\n  }\n"
-    ]);
-    _templateObject15 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject16() {
-    var data = _tagged_template_literal([
-        "\n  max-width: 140px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"
-    ]);
-    _templateObject16 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject17() {
-    var data = _tagged_template_literal([
-        "\n  background-color: ",
-        ";\n  border-right: 1px solid ",
-        ";\n  height: -webkit-fill-available;\n  transition: width 0.5s ease;\n  width: ",
-        ";\n\n  z-index: 7;\n  position: absolute;\n  top: ",
-        ";\n  height: ",
-        ";\n\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 1024px) {\n    top: inherit;\n    z-index: 2;\n  }\n"
-    ]);
-    _templateObject17 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject18() {
-    var data = _tagged_template_literal([
-        "\n  overflow-y: auto;\n  flex-grow: 1;\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"
-    ]);
-    _templateObject18 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject19() {
-    var data = _tagged_template_literal([
-        "\n  width: 100%;\n  text-align: center;\n  padding: ",
-        ";\n  height: calc(100% - 52px);\n"
-    ]);
-    _templateObject19 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject20() {
-    var data = _tagged_template_literal([
-        "\n  position: fixed;\n  top: 0;\n  z-index: 6;\n  height: 100%;\n  width: 100%;\n  background-color: ",
-        ";\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"
-    ]);
-    _templateObject20 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import { NavLink } from "react-router-dom";
-import Icon from "../../Elements/Icon/Icon";
-import createRgba from "../../utils/CreateRgba/createRgba";
-import { compactMenuWidth, expandedMenuWidth } from "./utils/constants";
-import styled, { css } from "@xstyled/styled-components";
-import { th } from "@xstyled/system";
-var leftMenuAfter = css(_templateObject());
-var compactMenuItem = css(_templateObject1());
-var Container = styled.div(_templateObject2(), function(param) {
-    var isLeftMenuOpen = param.isLeftMenuOpen;
-    return isLeftMenuOpen ? "block" : "none";
-});
-var SubItemsWrap = styled.div(_templateObject3(), th("colors.red1"));
-var ItemsSeparator = styled.div(_templateObject4(), th("colors.lightGray6"));
-var ItemLabel = styled.div(_templateObject5(), function(param) {
-    var $isCompact = param.$isCompact;
-    return $isCompact ? "column" : "row";
-}, function(param) {
-    var $isCompact = param.$isCompact;
-    return $isCompact ? "10px" : "0";
-}, function(param) {
-    var isSubitem = param.isSubitem;
-    return isSubitem ? "15px" : "0";
-});
-var ItemDropdownArrow = styled(Icon)(_templateObject6(), function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th.color("typoPrimary") : "white";
-});
-var TooltipItemLabel = styled.div(_templateObject7());
-var ItemLinkWrap = styled(NavLink)(_templateObject8(), function(param) {
-    var $isCompact = param.$isCompact;
-    return $isCompact ? "column" : "row";
-}, function(param) {
-    var $isCompact = param.$isCompact;
-    return $isCompact ? "60px" : "40px";
-}, function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? "8px" : "10px";
-}, function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th.color("typoPrimary") : th.color("lightGray5");
-}, function(param) {
-    var $isCompact = param.$isCompact;
-    return $isCompact ? "0 0 12px 0" : "16px 0";
-}, function(param) {
-    var $isCompact = param.$isCompact;
-    return $isCompact ? "10px 14px 6px 13px" : "9px 10px";
-}, function(param) {
-    var $isCompact = param.$isCompact;
-    return $isCompact ? "none" : "30px";
-}, function(param) {
-    var $isCompact = param.$isCompact;
-    return $isCompact ? "center" : "space-between";
-}, function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th("colors.red1") : "white";
-}, function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th("colors.red1") : "white";
-}, TooltipItemLabel, function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th.color("red20") : th.color("blue2");
-}, function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th.color("red1") : th.color("white");
-}, th("colors.red1"), TooltipItemLabel, function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th.color("typoPrimary") : th.color("white");
-}, ItemDropdownArrow, function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th.color("red1") : th.color("white");
-});
-var MenuItemContainer = styled.div(_templateObject13(), function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th.color("blue2") : void 0;
-}, ItemLabel, ItemLabel, function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th.color("red1") : th.color("white");
-}, function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th.color("red1") : th.color("blue2");
-}, function(param) {
-    var $isCompact = param.$isCompact, hasChildren = param.hasChildren, isHovering = param.isHovering;
-    return $isCompact && hasChildren && isHovering && css(_templateObject9(), ItemIcon, leftMenuAfter, function(param) {
-        var $lightMode = param.$lightMode;
-        return $lightMode ? th.color("neutral20") : th.color("neutral500");
-    });
-}, function(param) {
-    var $isCompact = param.$isCompact, $lightMode = param.$lightMode, hasChildren = param.hasChildren;
-    return $isCompact && css(_templateObject10(), ItemIcon, compactMenuItem, hasChildren ? "transparent" : $lightMode ? th.color("neutral20") : th.color("neutral500"));
-}, function(param) {
-    var $isCompact = param.$isCompact, hasChildren = param.hasChildren, isHovering = param.isHovering, $lightMode = param.$lightMode;
-    return $isCompact && hasChildren && isHovering ? css(_templateObject11(), ItemIcon, leftMenuAfter, $lightMode ? th.color("red20") : th.color("neutral500")) : css(_templateObject12(), ItemIcon, !$isCompact ? "transparent" : $lightMode ? th.color("red20") : th.color("red1"), $lightMode ? th.color("red20") : "none");
-}, function(param) {
-    var $isCompact = param.$isCompact, $lightMode = param.$lightMode;
-    if ($isCompact) return "none";
-    if ($lightMode) return th.color("red20");
-    return th.color("red1");
-}, function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th.color("red1") : th.color("white");
-}, ItemDropdownArrow, ItemLinkWrap, function(param) {
-    var $isCompact = param.$isCompact, $lightMode = param.$lightMode;
-    return $isCompact ? "none" : $lightMode ? th.color("neutral20") : th.color("blue4");
-}, ItemLinkWrap, ItemLinkWrap, function(param) {
-    var $lightMode = param.$lightMode, $isCompact = param.$isCompact;
-    if ($isCompact) return "none";
-    if ($lightMode) return th.color("red20");
-    return th.color("red70");
-}, ItemLinkWrap);
-var ItemIcon = styled.span(_templateObject14(), function(param) {
-    var $isCompact = param.$isCompact;
-    return $isCompact ? "0" : "11px";
-}, function(param) {
-    var $isCompact = param.$isCompact;
-    return $isCompact ? "4px" : "0";
-});
-var TooltipWrap = styled.div(_templateObject15(), function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th.color("white") : th.color("neutral500");
-}, function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th.color("neutral20") : th("colors.textTertiary");
-}, function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th.color("red20") : th.color("blue2");
-}, function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th.color("red20") : th.color("blue2");
-});
-var OverflowWithEllipsis = styled.span(_templateObject16());
-var TopLevelWrap = styled.div(_templateObject17(), function(param) {
-    var lightMode = param.lightMode;
-    return lightMode ? "white" : th("colors.blue3");
-}, th("colors.lightGray6"), function(param) {
-    var isCompact = param.isCompact;
-    return "".concat(isCompact ? compactMenuWidth : expandedMenuWidth, "px");
-}, function(param) {
-    var isLeftMenuOpen = param.isLeftMenuOpen;
-    return isLeftMenuOpen ? "0" : void 0;
-}, function(param) {
-    var isLeftMenuOpen = param.isLeftMenuOpen;
-    return isLeftMenuOpen ? "100%" : "calc(100% - 52px)";
-});
-var ScrollWrap = styled.div(_templateObject18());
-var BodyWrap = styled.div(_templateObject19(), function(param) {
-    var isCompact = param.isCompact;
-    return isCompact ? "24px 9px" : "24px 22px";
-});
-var Overlay = styled.div(_templateObject20(), createRgba("blue2", 0.6));
-export { BodyWrap, Container, ItemDropdownArrow, ItemIcon, ItemLabel, ItemLinkWrap, ItemsSeparator, MenuItemContainer, OverflowWithEllipsis, Overlay, ScrollWrap, SubItemsWrap, TooltipItemLabel, TooltipWrap, TopLevelWrap };

package/ui/Blocks/SideMenu/utils/constants.js

@@ -1,3 +0,0 @@
-var compactMenuWidth = 75;
-var expandedMenuWidth = 255;
-export { compactMenuWidth, expandedMenuWidth };

package/ui/Blocks/Stepper/Stepper.js

@@ -1,53 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo } from "react";
-import { StepItem } from "./components/StepItem";
-import { Container, ItemsWrapper } from "./styles";
-var Stepper = function Stepper(param) {
-    var items = param.items, activeStep = param.activeStep, hasStepNumbering = param.hasStepNumbering, handleChangeStep = param.handleChangeStep, handleGoToNextStep = param.handleGoToNextStep, isLoading = param.isLoading;
-    var Component = useMemo(function() {
-        var _items_activeStep;
-        return (_items_activeStep = items[activeStep]) === null || _items_activeStep === void 0 ? void 0 : _items_activeStep.component;
-    }, [
-        items,
-        activeStep
-    ]);
-    useEffect(function() {
-        var _items_;
-        if (!!activeStep && !((_items_ = items[activeStep - 1]) === null || _items_ === void 0 ? void 0 : _items_.completed)) {
-            handleChangeStep === null || handleChangeStep === void 0 ? void 0 : handleChangeStep(0)();
-        }
-    }, [
-        items
-    ]);
-    if (!(items === null || items === void 0 ? void 0 : items.length)) return null;
-    return /* @__PURE__ */ jsxs(Container, {
-        children: [
-            /* @__PURE__ */ jsx(ItemsWrapper, {
-                total: items.length,
-                hasComponent: !!Component,
-                children: items.map(function(param, index) {
-                    var title = param.title, disabled = param.disabled, visible = param.visible, completed = param.completed, icon = param.icon;
-                    var _items_;
-                    return /* @__PURE__ */ jsx(StepItem, {
-                        isPrevStepCompleted: (_items_ = items[index - 1]) === null || _items_ === void 0 ? void 0 : _items_.completed,
-                        onClick: handleChangeStep === null || handleChangeStep === void 0 ? void 0 : handleChangeStep(index),
-                        title: title,
-                        index: index,
-                        total: items.length,
-                        activeStep: activeStep,
-                        disabled: disabled,
-                        visible: visible,
-                        completed: completed,
-                        hasStepNumbering: hasStepNumbering,
-                        icon: icon
-                    }, title);
-                })
-            }),
-            Component && /* @__PURE__ */ jsx(Component, {
-                handleGoToNextStep: handleGoToNextStep,
-                isLoading: isLoading
-            })
-        ]
-    });
-};
-export { Stepper };

package/ui/Blocks/Stepper/components/StepCircle/index.js

@@ -1,16 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import Icon from "../../../../Elements/Icon";
-import { StepCircleContainer } from "./styles";
-var StepCircle = function StepCircle(param) {
-    var icon = param.icon, isCompleted = param.isCompleted, children = param.children, isActiveStep = param.isActiveStep;
-    return /* @__PURE__ */ jsx(StepCircleContainer, {
-        isCompleted: isCompleted,
-        isActiveStep: isActiveStep,
-        children: icon ? /* @__PURE__ */ jsx(Icon, {
-            icon: icon,
-            size: "12px",
-            fill: isCompleted || isActiveStep ? "red1" : "lightGray6"
-        }) : children
-    });
-};
-export { StepCircle };

package/ui/Blocks/Stepper/components/StepCircle/styles.js

@@ -1,48 +0,0 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n      box-shadow: 0 0 0 4px ",
-        ";\n    "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  font-size: 16px;\n  font-weight: 600;\n  border-radius: 50%;\n  color: ",
-        ";\n  border: ",
-        ";\n  border-color: ",
-        ";\n  background: white;\n  height: 36px;\n  width: 36px;\n  display: flex;\n  flex: 0 0 36px;\n  justify-content: center;\n  align-items: center;\n\n  ",
-        "\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import styled, { css, th } from "@xstyled/styled-components";
-var StepCircleContainer = styled.div(_templateObject1(), function(param) {
-    var isActiveStep = param.isActiveStep;
-    return isActiveStep ? th.color("red1") : th.color("lightGray6");
-}, function(param) {
-    var isCompleted = param.isCompleted;
-    return "".concat(isCompleted ? 8 : 2, "px solid");
-}, function(param) {
-    var isCompleted = param.isCompleted, isActiveStep = param.isActiveStep;
-    return th.color(isActiveStep || isCompleted ? "red1" : "lightGray6");
-}, function(param) {
-    var isActiveStep = param.isActiveStep;
-    return isActiveStep && css(_templateObject(), th.color("red20"));
-});
-export { StepCircleContainer };

package/ui/Blocks/Stepper/components/StepItem/index.js

@@ -1,62 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Paragraph2, H7 } from "../../../../Elements/Typography/Typography";
-import { StepCircle } from "../StepCircle";
-import { Trans } from "@lingui/react";
-import { x } from "@xstyled/styled-components";
-import isBoolean from "lodash/isBoolean";
-import { Line, StepItemContainer, ContentWrapper } from "./styles";
-var StepItem = function StepItem(param) {
-    var title = param.title, index = param.index, disabled = param.disabled, isPrevStepCompleted = param.isPrevStepCompleted, activeStep = param.activeStep, completed = param.completed, icon = param.icon, _param_hasStepNumbering = param.hasStepNumbering, hasStepNumbering = _param_hasStepNumbering === void 0 ? true : _param_hasStepNumbering, _param_visible = param.visible, visible = _param_visible === void 0 ? true : _param_visible, total = param.total, onClick = param.onClick;
-    var isActiveStep = index === activeStep;
-    var isCompletedStep = isBoolean(completed) ? completed : index < activeStep;
-    return /* @__PURE__ */ jsxs(StepItemContainer, {
-        onClick: !disabled && (isCompletedStep || isPrevStepCompleted) ? onClick : void 0,
-        isActiveStep: isActiveStep,
-        isDisabled: disabled,
-        isVisible: visible,
-        total: total,
-        children: [
-            /* @__PURE__ */ jsx(Line, {
-                isActiveStep: isActiveStep,
-                isCompletedStep: isCompletedStep
-            }),
-            /* @__PURE__ */ jsxs(ContentWrapper, {
-                children: [
-                    /* @__PURE__ */ jsx(StepCircle, {
-                        icon: isCompletedStep ? "check" : icon,
-                        isCompleted: isCompletedStep,
-                        isActiveStep: isActiveStep,
-                        children: index + 1
-                    }),
-                    /* @__PURE__ */ jsxs(x.div, {
-                        alignSelf: "center",
-                        children: [
-                            hasStepNumbering && /* @__PURE__ */ jsx(x.span, {
-                                textTransform: "uppercase",
-                                children: /* @__PURE__ */ jsxs(H7, {
-                                    color: isCompletedStep ? "red1" : "gray1",
-                                    variant: "semiBold",
-                                    mt: 0,
-                                    mb: "4px",
-                                    children: [
-                                        /* @__PURE__ */ jsx(Trans, {
-                                            id: "step",
-                                            message: "Step"
-                                        }),
-                                        ": ",
-                                        index + 1
-                                    ]
-                                })
-                            }),
-                            /* @__PURE__ */ jsx(Paragraph2, {
-                                variant: "medium",
-                                children: title
-                            })
-                        ]
-                    })
-                ]
-            })
-        ]
-    });
-};
-export { StepItem };