@mailstep/design-system 0.8.26-beta.1 → 0.8.26-beta.3

package/ui/packages/ui/Blocks/SideMenu/components/Footer.js

@@ -0,0 +1,60 @@
+import { th as e } from "../../../../../node_modules/@xstyled/system/dist/index.js";
+import { css as t, styled as n } from "../../../../../node_modules/@xstyled/styled-components/dist/index.js";
+import { require_jsx_runtime as r } from "../../../../../node_modules/react/jsx-runtime.js";
+import { MenuItems as i } from "../../../Elements/Icon/icons/MenuItems.js";
+import { Trans as a } from "../../../../../node_modules/@lingui/react/dist/index.js";
+import { Paragraph4 as o } from "../../../Elements/Typography/Typography.js";
+import "../../../Elements/Typography/index.js";
+import { useCallback as s } from "react";
+//#region packages/ui/Blocks/SideMenu/components/Footer.tsx
+var c = r(), l = n.div`
+  display: flex;
+  align-items: center;
+  height: 24px;
+  width: 100%;
+  margin-bottom: 24px;
+  justify-content: ${(e) => e.isCompact ? "center" : "flex-start"};
+  padding-left: ${(e) => e.isCompact ? "0" : "22px"};
+`, u = n.div`
+  display: none;
+  @media (min-width: 1024px) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    color: ${({ $lightMode: t }) => t ? e.color("typoPrimary") : e.color("gray")};
+    font-size: 11px;
+    & svg {
+      transform: ${(e) => e.isCompact ? "rotate(180deg)" : "rotate(0deg)"};
+      ${({ $lightMode: n }) => n && t`
+          fill: ${e.color("neutral20")};
+        `}
+
+      & > path {
+        stroke: ${e.color("lightGray5")};
+      }
+    }
+  }
+`, d = ({ isCompact: e, setIsCompact: t, lightMode: n }) => /* @__PURE__ */ (0, c.jsx)(l, {
+	isCompact: e,
+	children: /* @__PURE__ */ (0, c.jsxs)(u, {
+		onClick: s(() => {
+			t?.(!e);
+		}, [t, e]),
+		isCompact: e,
+		$lightMode: n,
+		children: [/* @__PURE__ */ (0, c.jsx)(i, {
+			stroke: "none",
+			width: "24px"
+		}), !e && /* @__PURE__ */ (0, c.jsx)(o, {
+			ml: 2,
+			variant: "semiBold",
+			children: /* @__PURE__ */ (0, c.jsx)(a, {
+				id: "footer.collapse",
+				message: "Collapse"
+			})
+		})]
+	})
+});
+//#endregion
+export { d as default };

package/ui/packages/ui/Blocks/SideMenu/components/HamburgerMenu.js

@@ -0,0 +1,50 @@
+import { th as e } from "../../../../../node_modules/@xstyled/system/dist/index.js";
+import { css as t, useTheme as n, x as r } from "../../../../../node_modules/@xstyled/styled-components/dist/index.js";
+import { require_jsx_runtime as i } from "../../../../../node_modules/react/jsx-runtime.js";
+import { HamburgerMenu as a } from "../../../Elements/Icon/icons/HamburgerMenu.js";
+import { MobileCancel as o } from "../../../Elements/Icon/icons/MobileCancel.js";
+import "react";
+import s from "styled-components";
+//#region packages/ui/Blocks/SideMenu/components/HamburgerMenu.tsx
+var c = i(), l = s(r.div)`
+  width: 36px;
+  height: 36px;
+  border-radius: 70px;
+  background-color: ${e.color("neutral20")};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-shadow: ${e.shadow("dropShadow")};
+  &:hover {
+    cursor: pointer;
+  }
+
+  ${({ isLeftMenuOpen: n }) => n ? t`
+          position: absolute;
+          left: 92%;
+          top: 7px;
+          z-index: 6;
+        ` : t`
+          & > svg > path {
+            stroke: ${e.color("blue2")};
+          }
+        `};
+
+  @media (min-width: 1024px) {
+    display: none;
+  }
+`, u = ({ isLeftMenuOpen: t, onClick: r }) => {
+	let i = n(), s = e.color("neutral20")({ theme: i });
+	return /* @__PURE__ */ (0, c.jsx)(l, {
+		mr: "8px",
+		onClick: r,
+		isLeftMenuOpen: !!t,
+		children: t ? /* @__PURE__ */ (0, c.jsx)(o, { fill: s }) : /* @__PURE__ */ (0, c.jsx)(a, {
+			fill: s,
+			stroke: "none"
+		})
+	});
+};
+//#endregion
+export { u as HamburgerMenuButton };

package/ui/packages/ui/Blocks/SideMenu/components/SubitemTooltip.js

@@ -0,0 +1,45 @@
+import { require_jsx_runtime as e } from "../../../../../node_modules/react/jsx-runtime.js";
+import { H6 as t } from "../../../Elements/Typography/Typography.js";
+import { Popper as n } from "../../../../../node_modules/react-popper/lib/esm/Popper.js";
+import r from "../../../Elements/Portal/index.js";
+import { ItemLinkWrap as i, TooltipItemLabel as a, TooltipWrap as o } from "../styles.js";
+import { useMemo as s } from "react";
+import c from "styled-components";
+//#region packages/ui/Blocks/SideMenu/components/SubitemTooltip.tsx
+var l = e(), u = ({ title: e, link: n = "", lightMode: r }) => /* @__PURE__ */ (0, l.jsx)(i, {
+	...s(() => n.startsWith("https://") ? {
+		to: { pathname: n },
+		target: "_blank"
+	} : { to: n }, [n]),
+	exact: !0,
+	$lightMode: r,
+	children: /* @__PURE__ */ (0, l.jsx)(a, { children: /* @__PURE__ */ (0, l.jsx)(t, {
+		variant: "medium",
+		children: e
+	}) })
+}), d = c.div`
+  z-index: 5;
+  display: ${({ isLeftMenuOpen: e }) => e ? "block" : "none"};
+  @media (min-width: 1024px) {
+    display: block;
+  }
+`, f = ({ items: e, childRef: t, parentRef: i, isLeftMenuOpen: a, onCloseLeftMenu: s, lightMode: c }) => /* @__PURE__ */ (0, l.jsx)(r, { children: /* @__PURE__ */ (0, l.jsx)(n, {
+	innerRef: t,
+	referenceElement: i.current,
+	placement: "right-start",
+	children: ({ ref: t, style: n }) => /* @__PURE__ */ (0, l.jsx)(d, {
+		ref: t,
+		style: n,
+		onClick: s,
+		isLeftMenuOpen: a,
+		children: /* @__PURE__ */ (0, l.jsx)(o, {
+			$lightMode: c,
+			children: e?.map((e, t) => /* @__PURE__ */ (0, l.jsx)(u, {
+				...e,
+				lightMode: c
+			}, `${t}`))
+		})
+	})
+}) });
+//#endregion
+export { f as default };

package/ui/packages/ui/Blocks/SideMenu/context/LeftMenuContext.js

@@ -0,0 +1,17 @@
+import { require_jsx_runtime as e } from "../../../../../node_modules/react/jsx-runtime.js";
+import { createContext as t, useCallback as n, useMemo as r, useState as i } from "react";
+//#region packages/ui/Blocks/SideMenu/context/LeftMenuContext.tsx
+var a = e(), o = t(null), s = ({ children: e, defaultItemSelected: t = null }) => {
+	let [s, c] = i(t), l = n((e) => {
+		c(e);
+	}, []), u = r(() => ({
+		expandedItem: s,
+		expandItem: l
+	}), [s, l]);
+	return /* @__PURE__ */ (0, a.jsx)(o.Provider, {
+		value: u,
+		children: e
+	});
+};
+//#endregion
+export { o as LeftMenuContext, s as LeftMenuProvider };

package/ui/packages/ui/Blocks/SideMenu/context/useLeftMenuContext.js

@@ -0,0 +1,10 @@
+import { LeftMenuContext as e } from "./LeftMenuContext.js";
+import { useContext as t } from "react";
+//#region packages/ui/Blocks/SideMenu/context/useLeftMenuContext.ts
+var n = () => {
+	let n = t(e);
+	if (!n) throw Error("useLeftMenuContext context must be use inside LeftMenuProvider");
+	return n;
+};
+//#endregion
+export { n as useLeftMenuContext };

package/ui/packages/ui/Blocks/SideMenu/index.js

@@ -0,0 +1,7 @@
+import "./components/HamburgerMenu.js";
+import "./utils/constants.js";
+import e from "./SideMenu.js";
+//#region packages/ui/Blocks/SideMenu/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/ui/packages/ui/Blocks/SideMenu/styles.js

@@ -0,0 +1,286 @@
+import { th as e } from "../../../../node_modules/@xstyled/system/dist/index.js";
+import { css as t, styled as n } from "../../../../node_modules/@xstyled/styled-components/dist/index.js";
+import r from "../../Elements/Icon/Icon.js";
+import { NavLink as i } from "../../../../node_modules/react-router-dom/esm/react-router-dom.js";
+import a from "../../utils/CreateRgba/createRgba.js";
+import "./utils/constants.js";
+//#region packages/ui/Blocks/SideMenu/styles.ts
+var o = t`
+  ::after {
+    content: '';
+    position: absolute;
+    width: 60px;
+    height: 40px;
+    z-index: -1;
+    border-radius: 9px 0 0 9px;
+    left: 8px;
+    top: -1px;
+  }
+`, s = t`
+  height: 40px;
+  width: 40px;
+  padding: 9px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9px;
+`, c = n.div`
+  display: ${({ isLeftMenuOpen: e }) => e ? "block" : "none"};
+
+  @media (min-width: 1024px) {
+    display: block;
+    align-self: stretch;
+    height: fit-content;
+
+    @media print {
+      display: none;
+    }
+  }
+`, l = n.div`
+  margin-left: 23px;
+  border-left: 1.5px solid;
+  border-color: ${e("colors.red1")};
+`, u = n.div`
+  height: 1px;
+  width: 100%;
+  margin: 12px 0;
+  background-color: ${e("colors.lightGray6")};
+`, d = n.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: ${({ $isCompact: e }) => e ? "column" : "row"};
+  margin-bottom: ${({ $isCompact: e }) => e ? "10px" : "0"};
+  margin-left: ${({ isSubitem: e }) => e ? "15px" : "0"};
+`, f = n(r)`
+  color: ${({ $lightMode: t }) => t ? e.color("typoPrimary") : "white"};
+  svg {
+    max-width: 11px;
+  }
+`, p = n.div`
+  line-height: 1.5;
+  letter-spacing: 0.4px;
+`, m = n(i)`
+  display: flex;
+  flex-direction: ${({ $isCompact: e }) => e ? "column" : "row"};
+  align-items: center;
+  cursor: pointer;
+  height: ${({ $isCompact: e }) => e ? "60px" : "40px"};
+  border-radius: ${({ $lightMode: e }) => e ? "8px" : "10px"};
+  font-weight: 600;
+  letter-spacing: 0.4px;
+  position: relative;
+  color: ${({ $lightMode: t }) => t ? e.color("typoPrimary") : e.color("lightGray5")};
+  transition: moving 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
+  transition-property: transform;
+
+  &.toplevel {
+    margin: ${({ $isCompact: e }) => e ? "0 0 12px 0" : "16px 0"};
+    padding: ${({ $isCompact: e }) => e ? "10px 14px 6px 13px" : "9px 10px"};
+    gap: ${({ $isCompact: e }) => e ? "none" : "30px"};
+    justify-content: ${({ $isCompact: e }) => e ? "center" : "space-between"};
+    &.active {
+      color: ${({ $lightMode: t }) => t ? e("colors.red1") : "white"};
+    }
+  }
+
+  &.nestedlevel {
+    padding: 0;
+    :hover {
+      color: ${({ $lightMode: t }) => t ? e("colors.red1") : "white"};
+    }
+  }
+
+  &.active > ${p} {
+    background-color: ${({ $lightMode: t }) => t ? e.color("red20") : e.color("blue2")};
+    color: ${({ $lightMode: t }) => t ? e.color("red1") : e.color("white")};
+    width: 100%;
+    border-left: 4px solid ${e("colors.red1")};
+    :last-child {
+      border-bottom-right-radius: 10px;
+    }
+    :first-child {
+      border-top-right-radius: 10px;
+    }
+  }
+
+  ${p} {
+    color: ${({ $lightMode: t }) => t ? e.color("typoPrimary") : e.color("white")};
+    padding-left: 10px;
+    width: -webkit-fill-available;
+    height: -webkit-fill-available;
+  }
+
+  &.active,
+  &.selected {
+    ${f} {
+      color: ${({ $lightMode: t }) => t ? e.color("red1") : e.color("white")};
+    }
+  }
+`, h = n.div`
+   z-index: 1;
+   stroke: ${({ $lightMode: t }) => t ? e.color("blue2") : void 0};
+   .selected > ${d}, .active > ${d} {
+     color: ${({ $lightMode: t }) => t ? e.color("red1") : e.color("white")};
+     stroke: ${({ $lightMode: t }) => t ? e.color("red1") : e.color("blue2")};
+   }
+
+    .toplevel {
+      ${({ $isCompact: n, hasChildren: r, isHovering: i }) => n && r && i && t`
+          & ${g} {
+            ${o}
+            ::after {
+              background-color: ${({ $lightMode: t }) => t ? e.color("neutral20") : e.color("neutral500")};
+            }
+          }
+        `}
+
+        ${({ $isCompact: n, $lightMode: r, hasChildren: i }) => n && t`
+            & ${g} {
+              ${s}
+              :hover {
+                background-color: ${i ? "transparent" : r ? e.color("neutral20") : e.color("neutral500")};
+              }
+            }
+          `}
+
+          &.active, &.selected {
+            ${({ $isCompact: n, hasChildren: r, isHovering: i, $lightMode: a }) => n && r && i ? t`
+                    & ${g} {
+                      ${o}
+                      ::after {
+                        background-color: ${a ? e.color("red20") : e.color("neutral500")};
+                      }
+                    }
+                  ` : t`
+                    & ${g} {
+                      background-color: ${n ? a ? e.color("red20") : e.color("red1") : "transparent"};
+                      :hover {
+                        background-color: ${a ? e.color("red20") : "none"};
+                      }
+                    }
+                  `}
+       
+            background-color: ${({ $isCompact: t, $lightMode: n }) => t ? "none" : n ? e.color("red20") : e.color("red1")};
+            svg {
+              stroke: ${({ $lightMode: t }) => t ? e.color("red1") : e.color("white")};
+            }
+          }
+
+          &.expanded > ${f} {
+            visibility: visible;
+            svg {
+              transform: rotate(180deg);
+            }
+          }
+    }
+
+    &:hover {
+      ${m}.toplevel {
+        background-color: ${({ $isCompact: t, $lightMode: n }) => t ? "none" : n ? e.color("neutral20") : e.color("blue4")};
+      }
+      ${m}.toplevel.active, ${m}.toplevel.selected {
+        background-color: ${({ $lightMode: t, $isCompact: n }) => n ? "none" : t ? e.color("red20") : e.color("red70")};
+      }
+      ${m}.nestedlevel {
+        background-color: inherit;
+      }
+    }
+  }
+`, g = n.span`
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-right: ${({ $isCompact: e }) => e ? "0" : "11px"};
+  margin-bottom: ${({ $isCompact: e }) => e ? "4px" : "0"};
+`, _ = n.div`
+  position: absolute;
+  background-color: ${({ $lightMode: t }) => t ? e.color("white") : e.color("neutral500")};
+  white-space: nowrap;
+  transform: translateX(8px);
+  width: 248px;
+  border-radius: 0 10px 10px 0;
+  z-index: 5;
+  &::before {
+    content: '';
+    position: absolute;
+    border-radius: 10px;
+    width: calc(100% + 80px);
+    height: calc(100% + 100px);
+    left: -16px;
+    top: -50px;
+  }
+
+  & :not(:last-child) {
+    border-radius: 0;
+    border-bottom: 0.5px solid ${({ $lightMode: t }) => t ? e.color("neutral20") : e("colors.textTertiary")};
+  }
+
+  &:first-child > {
+    :hover {
+      border-top-right-radius: 10px;
+      background-color: ${({ $lightMode: t }) => t ? e.color("red20") : e.color("blue2")};
+    }
+  }
+
+  & :not(:first-child) {
+    :hover {
+      border-top-right-radius: 0;
+    }
+  }
+
+  & :last-child > {
+    :hover {
+      border-bottom-right-radius: 10px;
+      background-color: ${({ $lightMode: t }) => t ? e.color("red20") : e.color("blue2")};
+    }
+  }
+`, v = n.span`
+  max-width: 140px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`, y = n.div`
+  background-color: ${({ lightMode: t }) => t ? "white" : e("colors.blue3")};
+  border-right: 1px solid ${e("colors.lightGray6")};
+  height: -webkit-fill-available;
+  transition: width 0.5s ease;
+  width: ${({ isCompact: e }) => `${e ? 75 : 255}px`};
+
+  z-index: 7;
+  position: absolute;
+  top: ${({ isLeftMenuOpen: e }) => e ? "0" : void 0};
+  height: ${({ isLeftMenuOpen: e }) => e ? "100%" : "calc(100% - 52px)"};
+
+  display: flex;
+  flex-direction: column;
+
+  @media (min-width: 1024px) {
+    top: inherit;
+    z-index: 2;
+  }
+`, b = n.div`
+  overflow-y: auto;
+  flex-grow: 1;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`, x = n.div`
+  width: 100%;
+  text-align: center;
+  padding: ${({ isCompact: e }) => e ? "24px 9px" : "24px 22px"};
+  height: calc(100% - 52px);
+`, S = n.div`
+  position: fixed;
+  top: 0;
+  z-index: 6;
+  height: 100%;
+  width: 100%;
+  background-color: ${a("blue2", .6)};
+  @media (min-width: 1024px) {
+    display: none;
+  }
+`;
+//#endregion
+export { x as BodyWrap, c as Container, f as ItemDropdownArrow, g as ItemIcon, d as ItemLabel, m as ItemLinkWrap, u as ItemsSeparator, h as MenuItemContainer, v as OverflowWithEllipsis, S as Overlay, b as ScrollWrap, l as SubItemsWrap, p as TooltipItemLabel, _ as TooltipWrap, y as TopLevelWrap };

package/ui/packages/ui/Blocks/Stepper/Stepper.js

@@ -0,0 +1,32 @@
+import { require_jsx_runtime as e } from "../../../../node_modules/react/jsx-runtime.js";
+import { StepItem as t } from "./components/StepItem/index.js";
+import { Container as n, ItemsWrapper as r } from "./styles.js";
+import { useEffect as i, useMemo as a } from "react";
+//#region packages/ui/Blocks/Stepper/Stepper.tsx
+var o = e(), s = ({ items: e, activeStep: s, hasStepNumbering: c, handleChangeStep: l, handleGoToNextStep: u, isLoading: d }) => {
+	let f = a(() => e[s]?.component, [e, s]);
+	return i(() => {
+		s && !e[s - 1]?.completed && l?.(0)();
+	}, [e]), e?.length ? /* @__PURE__ */ (0, o.jsxs)(n, { children: [/* @__PURE__ */ (0, o.jsx)(r, {
+		total: e.length,
+		hasComponent: !!f,
+		children: e.map(({ title: n, disabled: r, visible: i, completed: a, icon: u }, d) => /* @__PURE__ */ (0, o.jsx)(t, {
+			isPrevStepCompleted: e[d - 1]?.completed,
+			onClick: l?.(d),
+			title: n,
+			index: d,
+			total: e.length,
+			activeStep: s,
+			disabled: r,
+			visible: i,
+			completed: a,
+			hasStepNumbering: c,
+			icon: u
+		}, n))
+	}), f && /* @__PURE__ */ (0, o.jsx)(f, {
+		handleGoToNextStep: u,
+		isLoading: d
+	})] }) : null;
+};
+//#endregion
+export { s as Stepper };

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

@@ -0,0 +1,15 @@
+import { require_jsx_runtime as e } from "../../../../../../node_modules/react/jsx-runtime.js";
+import t from "../../../../Elements/Icon/index.js";
+import { StepCircleContainer as n } from "./styles.js";
+//#region packages/ui/Blocks/Stepper/components/StepCircle/index.tsx
+var r = e(), i = ({ icon: e, isCompleted: i, children: a, isActiveStep: o }) => /* @__PURE__ */ (0, r.jsx)(n, {
+	isCompleted: i,
+	isActiveStep: o,
+	children: e ? /* @__PURE__ */ (0, r.jsx)(t, {
+		icon: e,
+		size: "12px",
+		fill: i || o ? "red1" : "lightGray6"
+	}) : a
+});
+//#endregion
+export { i as StepCircle };

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

@@ -0,0 +1,24 @@
+import { th as e } from "../../../../../../node_modules/@xstyled/system/dist/index.js";
+import { css as t, styled as n } from "../../../../../../node_modules/@xstyled/styled-components/dist/index.js";
+//#region packages/ui/Blocks/Stepper/components/StepCircle/styles.ts
+var r = n.div`
+  font-size: 16px;
+  font-weight: 600;
+  border-radius: 50%;
+  color: ${({ isActiveStep: t }) => t ? e.color("red1") : e.color("lightGray6")};
+  border: ${({ isCompleted: e }) => `${e ? 8 : 2}px solid`};
+  border-color: ${({ isCompleted: t, isActiveStep: n }) => e.color(n || t ? "red1" : "lightGray6")};
+  background: white;
+  height: 36px;
+  width: 36px;
+  display: flex;
+  flex: 0 0 36px;
+  justify-content: center;
+  align-items: center;
+
+  ${({ isActiveStep: n }) => n && t`
+      box-shadow: 0 0 0 4px ${e.color("red20")};
+    `}
+`;
+//#endregion
+export { r as StepCircleContainer };

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

@@ -0,0 +1,52 @@
+import { __toESM as e } from "../../../../../../_virtual/_rolldown/runtime.js";
+import { x as t } from "../../../../../../node_modules/@xstyled/styled-components/dist/index.js";
+import { require_jsx_runtime as n } from "../../../../../../node_modules/react/jsx-runtime.js";
+import { Trans as r } from "../../../../../../node_modules/@lingui/react/dist/index.js";
+import { H7 as i, Paragraph2 as a } from "../../../../Elements/Typography/Typography.js";
+import { StepCircle as o } from "../StepCircle/index.js";
+import { require_isBoolean as s } from "../../../../../../node_modules/lodash/isBoolean.js";
+import { ContentWrapper as c, Line as l, StepItemContainer as u } from "./styles.js";
+//#region packages/ui/Blocks/Stepper/components/StepItem/index.tsx
+var d = /* @__PURE__ */ e(s(), 1), f = n(), p = ({ title: e, index: n, disabled: s, isPrevStepCompleted: p, activeStep: m, completed: h, icon: g, hasStepNumbering: _ = !0, visible: v = !0, total: y, onClick: b }) => {
+	let x = n === m, S = (0, d.default)(h) ? h : n < m;
+	return /* @__PURE__ */ (0, f.jsxs)(u, {
+		onClick: !s && (S || p) ? b : void 0,
+		isActiveStep: x,
+		isDisabled: s,
+		isVisible: v,
+		total: y,
+		children: [/* @__PURE__ */ (0, f.jsx)(l, {
+			isActiveStep: x,
+			isCompletedStep: S
+		}), /* @__PURE__ */ (0, f.jsxs)(c, { children: [/* @__PURE__ */ (0, f.jsx)(o, {
+			icon: S ? "check" : g,
+			isCompleted: S,
+			isActiveStep: x,
+			children: n + 1
+		}), /* @__PURE__ */ (0, f.jsxs)(t.div, {
+			alignSelf: "center",
+			children: [_ && /* @__PURE__ */ (0, f.jsx)(t.span, {
+				textTransform: "uppercase",
+				children: /* @__PURE__ */ (0, f.jsxs)(i, {
+					color: S ? "red1" : "gray1",
+					variant: "semiBold",
+					mt: 0,
+					mb: "4px",
+					children: [
+						/* @__PURE__ */ (0, f.jsx)(r, {
+							id: "step",
+							message: "Step"
+						}),
+						": ",
+						n + 1
+					]
+				})
+			}), /* @__PURE__ */ (0, f.jsx)(a, {
+				variant: "medium",
+				children: e
+			})]
+		})] })]
+	});
+};
+//#endregion
+export { p as StepItem };

package/ui/packages/ui/Blocks/Stepper/components/StepItem/styles.js

@@ -0,0 +1,73 @@
+import { th as e } from "../../../../../../node_modules/@xstyled/system/dist/index.js";
+import { css as t, styled as n } from "../../../../../../node_modules/@xstyled/styled-components/dist/index.js";
+import { StepCircleContainer as r } from "../StepCircle/styles.js";
+//#region packages/ui/Blocks/Stepper/components/StepItem/styles.ts
+var i = t`
+  width: 100%;
+  padding: 8px;
+
+  h6 {
+    font-size: 10px;
+  }
+
+  p {
+    font-size: 12px;
+  }
+
+  ${r} {
+    display: flex;
+  }
+
+  @media (min-width: ${({ total: e }) => e * 150}px) {
+    width: 150px;
+    padding: 16px;
+
+    ${r} {
+      display: none;
+    }
+  }
+
+  @media (min-width: ${({ total: e }) => e * 200}px) {
+    width: 200px;
+    padding: 24px;
+
+    ${r} {
+      display: flex;
+    }
+  }
+
+  @media (min-width: ${({ total: e }) => e * 240}px) {
+    width: 240px;
+
+    p {
+      font-size: 16px;
+    }
+    h6 {
+      font-size: 12px;
+    }
+
+    ${r} {
+      display: flex;
+    }
+  }
+`, a = n.div`
+  border-radius: 10px;
+  width: 240px;
+  padding: 24px;
+  background-color: ${({ isActiveStep: t }) => t ? e.color("bgLightGray1") : "transparent"};
+  cursor: ${({ isDisabled: e, onClick: t }) => e ? "not-allowed" : t ? "pointer" : "auto"};
+  display: ${({ isVisible: e }) => e ? "block" : "none"};
+  ${i}
+`, o = n.div`
+  height: 4px;
+  border-radius: 8px;
+  width: 100%;
+  background-color: ${({ isActiveStep: t, isCompletedStep: n }) => t ? e.color("red1") : n ? e.color("red20") : e.color("lightGray7")};
+  margin-bottom: 16px;
+`, s = n.div`
+  display: flex;
+  column-gap: 16px;
+  align-items: flex-start;
+`;
+//#endregion
+export { s as ContentWrapper, o as Line, a as StepItemContainer };

package/ui/packages/ui/Blocks/Stepper/index.js

@@ -0,0 +1,3 @@
+import "./components/StepCircle/index.js";
+import "./Stepper.js";
+import "./hooks/useStepper.js";