@mailstep/design-system 0.8.26 → 0.8.27-beta.0

package/ui/Blocks/SideMenu/styles.d.ts

@@ -1,43 +1,42 @@
 import { NavLink } from 'react-router-dom';
-
-export declare const Container: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     isLeftMenuOpen?: boolean;
 }, never>;
-export declare const SubItemsWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const ItemsSeparator: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const ItemLabel: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const SubItemsWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const ItemsSeparator: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const ItemLabel: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     $isCompact?: boolean;
     isSubitem?: boolean;
 }, never>;
-export declare const ItemDropdownArrow: import('styled-components').StyledComponent<import('react').FC<import('../..').IconProps>, import('@xstyled/system').Theme, {
+export declare const ItemDropdownArrow: import("styled-components").StyledComponent<import("react").FC<import("../..").IconProps>, import("@xstyled/system").Theme, {
     $lightMode?: boolean;
 }, never>;
-export declare const TooltipItemLabel: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const ItemLinkWrap: import('styled-components').StyledComponent<typeof NavLink, import('@xstyled/system').Theme, {
+export declare const TooltipItemLabel: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const ItemLinkWrap: import("styled-components").StyledComponent<typeof NavLink, import("@xstyled/system").Theme, {
     $isCompact?: boolean;
     $lightMode?: boolean;
     appearance?: "gray" | "default";
 }, never>;
-export declare const MenuItemContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const MenuItemContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     $isCompact?: boolean;
     $lightMode?: boolean;
     hasChildren?: boolean;
     isHovering?: boolean;
 }, never>;
-export declare const ItemIcon: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {
+export declare const ItemIcon: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {
     $isCompact?: boolean;
 }, never>;
-export declare const TooltipWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const TooltipWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     $lightMode?: boolean;
 }, never>;
-export declare const OverflowWithEllipsis: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {}, never>;
-export declare const TopLevelWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const OverflowWithEllipsis: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
+export declare const TopLevelWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     isCompact: boolean;
     isLeftMenuOpen?: boolean;
     lightMode?: boolean;
 }, never>;
-export declare const ScrollWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const BodyWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const ScrollWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const BodyWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     isCompact: boolean;
 }, never>;
-export declare const Overlay: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const Overlay: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

package/ui/Blocks/SideMenu/styles.js

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

package/ui/Blocks/SideMenu/types.d.ts

@@ -1,5 +1,4 @@
-import { ReactNode } from 'react';
-
+import { type ReactNode } from 'react';
 export type MenuItemType = {
     icon?: ReactNode;
     onClick?: () => void;

package/ui/Blocks/SideMenu/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,5 @@
+//#region packages/ui/Blocks/SideMenu/utils/constants.ts
+const compactMenuWidth = 75;
+const expandedMenuWidth = 255;
+//#endregion
+export { compactMenuWidth, expandedMenuWidth };

package/ui/Blocks/Stepper/Stepper.d.ts

@@ -1,4 +1,3 @@
-import { FC } from 'react';
-import { StepperProps } from './types';
-
+import { type FC } from 'react';
+import type { StepperProps } from './types';
 export declare const Stepper: FC<StepperProps>;

package/ui/Blocks/Stepper/Stepper.js

@@ -0,0 +1,34 @@
+import { StepItem } from "./components/StepItem/index.js";
+import { Container, ItemsWrapper } from "./styles.js";
+import { useEffect, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/Stepper/Stepper.tsx
+const Stepper = ({ items, activeStep, hasStepNumbering, handleChangeStep, handleGoToNextStep, isLoading }) => {
+	const Component = useMemo(() => items[activeStep]?.component, [items, activeStep]);
+	useEffect(() => {
+		if (!!activeStep && !items[activeStep - 1]?.completed) handleChangeStep?.(0)();
+	}, [items]);
+	if (!items?.length) return null;
+	return /* @__PURE__ */ jsxs(Container, { children: [/* @__PURE__ */ jsx(ItemsWrapper, {
+		total: items.length,
+		hasComponent: !!Component,
+		children: items.map(({ title, disabled, visible, completed, icon }, index) => /* @__PURE__ */ jsx(StepItem, {
+			isPrevStepCompleted: items[index - 1]?.completed,
+			onClick: handleChangeStep?.(index),
+			title,
+			index,
+			total: items.length,
+			activeStep,
+			disabled,
+			visible,
+			completed,
+			hasStepNumbering,
+			icon
+		}, title))
+	}), Component && /* @__PURE__ */ jsx(Component, {
+		handleGoToNextStep,
+		isLoading
+	})] });
+};
+//#endregion
+export { Stepper };

package/ui/Blocks/Stepper/components/StepCircle/index.d.ts

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-
+import { type FC } from 'react';
 type Props = {
     icon?: string;
     isCompleted?: boolean;

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

@@ -0,0 +1,17 @@
+import Icon_default from "../../../../Elements/Icon/index.js";
+import { StepCircleContainer } from "./styles.js";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Blocks/Stepper/components/StepCircle/index.tsx
+const StepCircle = ({ icon, isCompleted, children, isActiveStep }) => {
+	return /* @__PURE__ */ jsx(StepCircleContainer, {
+		isCompleted,
+		isActiveStep,
+		children: icon ? /* @__PURE__ */ jsx(Icon_default, {
+			icon,
+			size: "12px",
+			fill: isCompleted || isActiveStep ? "red1" : "lightGray6"
+		}) : children
+	});
+};
+//#endregion
+export { StepCircle };

package/ui/Blocks/Stepper/components/StepCircle/styles.d.ts

@@ -1,4 +1,4 @@
-export declare const StepCircleContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const StepCircleContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     isCompleted?: boolean;
     isActiveStep?: boolean;
 }, never>;

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

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

package/ui/Blocks/Stepper/components/StepItem/index.d.ts

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-
+import { type FC } from 'react';
 type StepItemProps = {
     onClick?: () => void;
     title: string;

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

@@ -0,0 +1,52 @@
+import { H7, Paragraph2 } from "../../../../Elements/Typography/Typography.js";
+import { StepCircle } from "../StepCircle/index.js";
+import { ContentWrapper, Line, StepItemContainer } from "./styles.js";
+import { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Trans } from "@lingui/react";
+import isBoolean from "lodash/isBoolean.js";
+//#region packages/ui/Blocks/Stepper/components/StepItem/index.tsx
+const StepItem = ({ title, index, disabled, isPrevStepCompleted, activeStep, completed, icon, hasStepNumbering = true, visible = true, total, onClick }) => {
+	const isActiveStep = index === activeStep;
+	const isCompletedStep = isBoolean(completed) ? completed : index < activeStep;
+	return /* @__PURE__ */ jsxs(StepItemContainer, {
+		onClick: !disabled && (isCompletedStep || isPrevStepCompleted) ? onClick : void 0,
+		isActiveStep,
+		isDisabled: disabled,
+		isVisible: visible,
+		total,
+		children: [/* @__PURE__ */ jsx(Line, {
+			isActiveStep,
+			isCompletedStep
+		}), /* @__PURE__ */ jsxs(ContentWrapper, { children: [/* @__PURE__ */ jsx(StepCircle, {
+			icon: isCompletedStep ? "check" : icon,
+			isCompleted: isCompletedStep,
+			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
+			})]
+		})] })]
+	});
+};
+//#endregion
+export { StepItem };

package/ui/Blocks/Stepper/components/StepItem/styles.d.ts

@@ -1,12 +1,12 @@
-export declare const StepItemContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const StepItemContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     isActiveStep: boolean;
     isDisabled?: boolean;
     isVisible?: boolean;
     total: number;
     onClick?: () => void;
 }, never>;
-export declare const Line: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const Line: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     isActiveStep: boolean;
     isCompletedStep: boolean;
 }, never>;
-export declare const ContentWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const ContentWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

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

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