@mailstep/design-system 0.8.26-beta.2 → 0.8.26-beta.4

package/ui/Blocks/SideMenu/styles.js

@@ -0,0 +1,417 @@
+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

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

package/ui/Blocks/Stepper/Stepper.js

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,62 @@
+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 };