@mailstep/design-system 0.6.56 → 0.6.57-beta.1

package/ui/Blocks/SideMenu/styles.js

@@ -0,0 +1,162 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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_1 || (templateObject_1 = __makeTemplateObject(["\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"], ["\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"])));
+var compactMenuItem = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\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"], ["\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"])));
+export var Container = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\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"], ["\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"])), function (_a) {
+    var isLeftMenuOpen = _a.isLeftMenuOpen;
+    return (isLeftMenuOpen ? 'block' : 'none');
+});
+export var SubItemsWrap = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-left: 23px;\n  border-left: 1.5px solid;\n  border-color: ", ";\n"], ["\n  margin-left: 23px;\n  border-left: 1.5px solid;\n  border-color: ", ";\n"])), th('colors.red1'));
+export var ItemsSeparator = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 1px;\n  width: 100%;\n  margin: 12px 0;\n  background-color: ", ";\n"], ["\n  height: 1px;\n  width: 100%;\n  margin: 12px 0;\n  background-color: ", ";\n"])), th('colors.lightGray6'));
+export var ItemLabel = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (_a) {
+    var $isCompact = _a.$isCompact;
+    return ($isCompact ? 'column' : 'row');
+}, function (_a) {
+    var $isCompact = _a.$isCompact;
+    return ($isCompact ? '10px' : '0');
+}, function (_a) {
+    var isSubitem = _a.isSubitem;
+    return (isSubitem ? '15px' : '0');
+});
+export var ItemDropdownArrow = styled(Icon)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  color: ", ";\n  svg {\n    max-width: 11px;\n  }\n"], ["\n  color: ", ";\n  svg {\n    max-width: 11px;\n  }\n"])), function (_a) {
+    var $lightMode = _a.$lightMode;
+    return ($lightMode ? th.color('typoPrimary') : 'white');
+});
+export var TooltipItemLabel = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  line-height: 1.5;\n  letter-spacing: 0.4px;\n"], ["\n  line-height: 1.5;\n  letter-spacing: 0.4px;\n"])));
+export var ItemLinkWrap = styled(NavLink)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\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"], ["\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"])), function (_a) {
+    var $isCompact = _a.$isCompact;
+    return ($isCompact ? 'column' : 'row');
+}, function (_a) {
+    var $isCompact = _a.$isCompact;
+    return ($isCompact ? '60px' : '40px');
+}, function (_a) {
+    var $lightMode = _a.$lightMode;
+    return ($lightMode ? '8px' : '10px');
+}, function (_a) {
+    var $lightMode = _a.$lightMode;
+    return ($lightMode ? th.color('typoPrimary') : th.color('lightGray5'));
+}, function (_a) {
+    var $isCompact = _a.$isCompact;
+    return ($isCompact ? '0 0 12px 0' : '16px 0');
+}, function (_a) {
+    var $isCompact = _a.$isCompact;
+    return ($isCompact ? '10px 14px 6px 13px' : '9px 10px');
+}, function (_a) {
+    var $isCompact = _a.$isCompact;
+    return ($isCompact ? 'none' : '30px');
+}, function (_a) {
+    var $isCompact = _a.$isCompact;
+    return ($isCompact ? 'center' : 'space-between');
+}, function (_a) {
+    var $lightMode = _a.$lightMode;
+    return ($lightMode ? th('colors.red1') : 'white');
+}, function (_a) {
+    var $lightMode = _a.$lightMode;
+    return ($lightMode ? th('colors.red1') : 'white');
+}, TooltipItemLabel, function (_a) {
+    var $lightMode = _a.$lightMode;
+    return ($lightMode ? th.color('red20') : th.color('blue2'));
+}, function (_a) {
+    var $lightMode = _a.$lightMode;
+    return ($lightMode ? th.color('red1') : th.color('white'));
+}, th('colors.red1'), TooltipItemLabel, function (_a) {
+    var $lightMode = _a.$lightMode;
+    return ($lightMode ? th.color('typoPrimary') : th.color('white'));
+}, ItemDropdownArrow, function (_a) {
+    var $lightMode = _a.$lightMode;
+    return ($lightMode ? th.color('red1') : th.color('white'));
+});
+export var MenuItemContainer = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\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"], ["\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"])), function (_a) {
+    var $lightMode = _a.$lightMode;
+    return ($lightMode ? th.color('blue2') : undefined);
+}, ItemLabel, ItemLabel, function (_a) {
+    var $lightMode = _a.$lightMode;
+    return ($lightMode ? th.color('red1') : th.color('white'));
+}, function (_a) {
+    var $lightMode = _a.$lightMode;
+    return ($lightMode ? th.color('red1') : th.color('blue2'));
+}, function (_a) {
+    var $isCompact = _a.$isCompact, hasChildren = _a.hasChildren, isHovering = _a.isHovering;
+    return $isCompact &&
+        hasChildren &&
+        isHovering && css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n          & ", " {\n            ", "\n            ::after {\n              background-color: ", ";\n            }\n          }\n        "], ["\n          & ", " {\n            ", "\n            ::after {\n              background-color: ", ";\n            }\n          }\n        "])), ItemIcon, leftMenuAfter, function (_a) {
+        var $lightMode = _a.$lightMode;
+        return ($lightMode ? th.color('neutral20') : th.color('neutral500'));
+    });
+}, function (_a) {
+    var $isCompact = _a.$isCompact, $lightMode = _a.$lightMode, hasChildren = _a.hasChildren;
+    return $isCompact && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n            & ", " {\n              ", "\n              :hover {\n                background-color: ", ";\n              }\n            }\n          "], ["\n            & ", " {\n              ", "\n              :hover {\n                background-color: ", ";\n              }\n            }\n          "])), ItemIcon, compactMenuItem, hasChildren ? 'transparent' : $lightMode ? th.color('neutral20') : th.color('neutral500'));
+}, function (_a) {
+    var $isCompact = _a.$isCompact, hasChildren = _a.hasChildren, isHovering = _a.isHovering, $lightMode = _a.$lightMode;
+    return $isCompact && hasChildren && isHovering
+        ? css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n                    & ", " {\n                      ", "\n                      ::after {\n                        background-color: ", ";\n                      }\n                    }\n                  "], ["\n                    & ", " {\n                      ", "\n                      ::after {\n                        background-color: ", ";\n                      }\n                    }\n                  "])), ItemIcon, leftMenuAfter, $lightMode ? th.color('red20') : th.color('neutral500')) : css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n                    & ", " {\n                      background-color: ", ";\n                      :hover {\n                        background-color: ", ";\n                      }\n                    }\n                  "], ["\n                    & ", " {\n                      background-color: ", ";\n                      :hover {\n                        background-color: ", ";\n                      }\n                    }\n                  "])), ItemIcon, !$isCompact ? 'transparent' : $lightMode ? th.color('red20') : th.color('red1'), $lightMode ? th.color('red20') : 'none');
+}, function (_a) {
+    var $isCompact = _a.$isCompact, $lightMode = _a.$lightMode;
+    if ($isCompact)
+        return 'none';
+    if ($lightMode)
+        return th.color('red20');
+    return th.color('red1');
+}, function (_a) {
+    var $lightMode = _a.$lightMode;
+    return ($lightMode ? th.color('red1') : th.color('white'));
+}, ItemDropdownArrow, ItemLinkWrap, function (_a) {
+    var $isCompact = _a.$isCompact, $lightMode = _a.$lightMode;
+    return $isCompact ? 'none' : $lightMode ? th.color('neutral20') : th.color('blue4');
+}, ItemLinkWrap, ItemLinkWrap, function (_a) {
+    var $lightMode = _a.$lightMode, $isCompact = _a.$isCompact;
+    if ($isCompact)
+        return 'none';
+    if ($lightMode)
+        return th.color('red20');
+    return th.color('red70');
+}, ItemLinkWrap);
+export var ItemIcon = styled.span(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-right: ", ";\n  margin-bottom: ", ";\n"], ["\n  display: flex;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-right: ", ";\n  margin-bottom: ", ";\n"])), function (_a) {
+    var $isCompact = _a.$isCompact;
+    return ($isCompact ? '0' : '11px');
+}, function (_a) {
+    var $isCompact = _a.$isCompact;
+    return ($isCompact ? '4px' : '0');
+});
+export var TooltipWrap = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\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"], ["\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"])), function (_a) {
+    var $lightMode = _a.$lightMode;
+    return ($lightMode ? th.color('white') : th.color('neutral500'));
+}, function (_a) {
+    var $lightMode = _a.$lightMode;
+    return ($lightMode ? th.color('neutral20') : th('colors.textTertiary'));
+}, function (_a) {
+    var $lightMode = _a.$lightMode;
+    return ($lightMode ? th.color('red20') : th.color('blue2'));
+}, function (_a) {
+    var $lightMode = _a.$lightMode;
+    return ($lightMode ? th.color('red20') : th.color('blue2'));
+});
+export var OverflowWithEllipsis = styled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  max-width: 140px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  max-width: 140px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
+export var TopLevelWrap = styled.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\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: 5;\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"], ["\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: 5;\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"])), function (_a) {
+    var lightMode = _a.lightMode;
+    return (lightMode ? 'white' : th('colors.blue3'));
+}, th('colors.lightGray6'), function (_a) {
+    var isCompact = _a.isCompact;
+    return "".concat(isCompact ? compactMenuWidth : expandedMenuWidth, "px");
+}, function (_a) {
+    var isLeftMenuOpen = _a.isLeftMenuOpen;
+    return (isLeftMenuOpen ? '0' : undefined);
+}, function (_a) {
+    var isLeftMenuOpen = _a.isLeftMenuOpen;
+    return (isLeftMenuOpen ? '100%' : 'calc(100% - 52px)');
+});
+export var ScrollWrap = styled.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  overflow-y: auto;\n  flex-grow: 1;\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  overflow-y: auto;\n  flex-grow: 1;\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])));
+export var BodyWrap = styled.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  width: 100%;\n  text-align: center;\n  padding: ", ";\n  height: calc(100% - 52px);\n"], ["\n  width: 100%;\n  text-align: center;\n  padding: ", ";\n  height: calc(100% - 52px);\n"])), function (_a) {
+    var isCompact = _a.isCompact;
+    return (isCompact ? '24px 9px' : '24px 22px');
+});
+export var Overlay = styled.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  z-index: 4;\n  height: 100%;\n  width: 100%;\n  background-color: ", ";\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"], ["\n  position: fixed;\n  top: 0;\n  z-index: 4;\n  height: 100%;\n  width: 100%;\n  background-color: ", ";\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"])), createRgba('blue2', 0.6));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;

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

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+export type MenuItemType = {
+    icon?: ReactNode;
+    title: string;
+    link?: string;
+    acl?: [string, string];
+    items?: MenuItemType[];
+    id: string;
+    lightMode?: boolean;
+    separator?: boolean;
+    appearance?: 'gray' | 'default';
+};
+export type SideMenuProps = {
+    menuItems: MenuItemType[];
+    isCompact: boolean;
+    setIsCompact?: (compact: boolean) => void;
+    isLeftMenuOpen?: boolean;
+    onCloseLeftMenu?: () => void;
+    variant?: 'dark' | 'light';
+    children?: ReactNode;
+};

package/ui/Blocks/SideMenu/utils/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const compactMenuWidth = 75;
+export declare const expandedMenuWidth = 255;

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

@@ -0,0 +1,2 @@
+export var compactMenuWidth = 75;
+export var expandedMenuWidth = 255;

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

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

package/ui/Blocks/Stepper/Stepper.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { StepItem } from './components/StepItem';
+import { Container, ItemsWrapper } from './styles';
+export var Stepper = function (_a) {
+    var items = _a.items, activeStep = _a.activeStep, handleChangeStep = _a.handleChangeStep;
+    if (!(items === null || items === void 0 ? void 0 : items.length))
+        return null;
+    var Component = useMemo(function () { return items[activeStep].component; }, [items, activeStep]);
+    return (_jsxs(Container, { children: [_jsx(ItemsWrapper, { children: items.map(function (_a, index) {
+                    var title = _a.title, disabled = _a.disabled, completed = _a.completed;
+                    return (_jsx(StepItem, { onClick: handleChangeStep(index), title: title, index: index, activeStep: activeStep, disabled: disabled, completed: completed }, title));
+                }) }), _jsx(Component, { handleGoToNextStep: handleChangeStep(activeStep + 1) })] }));
+};

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

@@ -0,0 +1,11 @@
+import { type FC } from 'react';
+type StepItemProps = {
+    onClick: () => void;
+    title: string;
+    index: number;
+    activeStep: number;
+    disabled?: boolean;
+    completed?: boolean;
+};
+export declare const StepItem: FC<StepItemProps>;
+export {};

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Icon from '../../../../Elements/Icon/Icon';
+import { Paragraph2, H7 } from '../../../../Elements/Typography/Typography';
+import { Trans } from '@lingui/react';
+import { x } from '@xstyled/styled-components';
+import isBoolean from 'lodash/isBoolean';
+import { Line, StepItemContainer, StepNumber, ContentWrapper, CompletedStep } from './styles';
+export var StepItem = function (_a) {
+    var title = _a.title, index = _a.index, disabled = _a.disabled, activeStep = _a.activeStep, completed = _a.completed, onClick = _a.onClick;
+    var isActiveStep = index === activeStep;
+    var isCompletedStep = isBoolean(completed) ? completed : index < activeStep;
+    return (_jsxs(StepItemContainer, { onClick: !disabled && isCompletedStep ? onClick : undefined, isActiveStep: isActiveStep, isDisabled: disabled, children: [_jsx(Line, { isActiveStep: isActiveStep, isCompletedStep: isCompletedStep }), _jsxs(ContentWrapper, { children: [isCompletedStep ? (_jsx(CompletedStep, { children: _jsx(Icon, { icon: "check", size: "12px" }) })) : (_jsx(StepNumber, { isActiveStep: isActiveStep, children: index + 1 })), _jsxs("div", { children: [_jsx(x.span, { textTransform: "uppercase", children: _jsxs(H7, { color: "gray1", variant: "semiBold", mt: 0, mb: "4px", children: [_jsx(Trans, { id: "step", message: "Step" }), ": ", index + 1] }) }), _jsx(Paragraph2, { variant: "medium", children: title })] })] })] }));
+};

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

@@ -0,0 +1,13 @@
+export declare const StepItemContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    isActiveStep: boolean;
+    isDisabled?: boolean | undefined;
+}, never>;
+export declare const Line: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    isActiveStep: boolean;
+    isCompletedStep: boolean;
+}, never>;
+export declare const StepNumber: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    isActiveStep: boolean;
+}, never>;
+export declare const ContentWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const CompletedStep: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

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

@@ -0,0 +1,33 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { css, th } from '@xstyled/styled-components';
+export var StepItemContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 10px;\n  width: 240px;\n  padding: 24px;\n  background-color: ", ";\n  cursor: ", ";\n"], ["\n  border-radius: 10px;\n  width: 240px;\n  padding: 24px;\n  background-color: ", ";\n  cursor: ", ";\n"])), function (_a) {
+    var isActiveStep = _a.isActiveStep;
+    return (isActiveStep ? th.color('bgLightGray1') : 'transparent');
+}, function (_a) {
+    var isDisabled = _a.isDisabled;
+    return (isDisabled ? 'not-allowed' : 'pointer');
+});
+export var Line = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 4px;\n  border-radius: 8px;\n  width: 100%;\n  background-color: ", ";\n  margin-bottom: 16px;\n"], ["\n  height: 4px;\n  border-radius: 8px;\n  width: 100%;\n  background-color: ", ";\n  margin-bottom: 16px;\n"])), function (_a) {
+    var isActiveStep = _a.isActiveStep, isCompletedStep = _a.isCompletedStep;
+    if (isActiveStep)
+        return th.color('red1');
+    if (isCompletedStep)
+        return th.color('red20');
+    return th.color('lightGray7');
+});
+export var StepNumber = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 16px;\n  font-weight: 600;\n  margin-bottom: 16px;\n  color: ", ";\n  border: 2px solid ", ";\n  border-radius: 50%;\n  height: 36px;\n  width: 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  ", "\n"], ["\n  font-size: 16px;\n  font-weight: 600;\n  margin-bottom: 16px;\n  color: ", ";\n  border: 2px solid ", ";\n  border-radius: 50%;\n  height: 36px;\n  width: 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  ", "\n"])), function (_a) {
+    var isActiveStep = _a.isActiveStep;
+    return (isActiveStep ? th.color('red1') : th.color('lightGray6'));
+}, function (_a) {
+    var isActiveStep = _a.isActiveStep;
+    return (isActiveStep ? th.color('red1') : th.color('lightGray6'));
+}, function (_a) {
+    var isActiveStep = _a.isActiveStep;
+    return isActiveStep && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      box-shadow: 0 0 0 4px ", ";\n    "], ["\n      box-shadow: 0 0 0 4px ", ";\n    "])), th.color('red20'));
+});
+export var ContentWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  column-gap: 16px;\n"], ["\n  display: flex;\n  column-gap: 16px;\n"])));
+export var CompletedStep = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border-radius: 50%;\n  border: 8px solid ", ";\n  color: ", ";\n  height: 36px;\n  width: 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  border-radius: 50%;\n  border: 8px solid ", ";\n  color: ", ";\n  height: 36px;\n  width: 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])), th.color('red1'), th.color('red1'));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -0,0 +1,6 @@
+type HookType = () => {
+    activeStep: number;
+    handleChangeStep: (step: number) => () => void;
+};
+export declare const useStepper: HookType;
+export {};

package/ui/Blocks/Stepper/hooks/useStepper.js

@@ -0,0 +1,8 @@
+import { useCallback, useState } from 'react';
+export var useStepper = function () {
+    var _a = useState(0), activeStep = _a[0], setActiveStep = _a[1];
+    var handleChangeStep = useCallback(function (step) { return function () {
+        setActiveStep(step);
+    }; }, []);
+    return { activeStep: activeStep, handleChangeStep: handleChangeStep };
+};

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

@@ -0,0 +1,3 @@
+export { Stepper as default } from './Stepper';
+export { useStepper } from './hooks/useStepper';
+export type { StepperItem, StepperPassedDownProps } from './types';

package/ui/Blocks/Stepper/index.js

@@ -0,0 +1,2 @@
+export { Stepper as default } from './Stepper';
+export { useStepper } from './hooks/useStepper';

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

@@ -0,0 +1,7 @@
+declare const meta: {
+    title: string;
+    tags: string[];
+};
+export default meta;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const AllStepsCompleted: () => import("react/jsx-runtime").JSX.Element;

package/ui/Blocks/Stepper/stories/Stepper.stories.js

@@ -0,0 +1,60 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Stepper from '../';
+import Button from '../../../Elements/Button/Button';
+import { LinguiContainer } from '../../../utils/LinguiContainer';
+import { useStepper } from '../hooks/useStepper';
+var items = [
+    {
+        title: 'Scan product',
+        component: function (_a) {
+            var handleGoToNextStep = _a.handleGoToNextStep;
+            return (_jsxs("div", { children: ["Scan product ", _jsx(Button, { onClick: handleGoToNextStep, children: "Go next" })] }));
+        }
+    },
+    {
+        title: 'Measurement',
+        component: function (_a) {
+            var handleGoToNextStep = _a.handleGoToNextStep;
+            return (_jsxs("div", { children: ["Measurement page ", _jsx(Button, { onClick: handleGoToNextStep, children: "Go next" })] }));
+        }
+    },
+    {
+        title: 'Logistic info',
+        component: function (_a) {
+            var handleGoToNextStep = _a.handleGoToNextStep;
+            return (_jsxs("div", { children: ["Logistic info ", _jsx(Button, { onClick: handleGoToNextStep, children: "Go next" })] }));
+        }
+    },
+    {
+        title: 'Color',
+        component: function (_a) {
+            var handleGoToNextStep = _a.handleGoToNextStep;
+            return (_jsxs("div", { children: ["Select color ", _jsx(Button, { onClick: handleGoToNextStep, children: "Finish" })] }));
+        }
+    }
+];
+var completedItems = items.map(function (item) { return (__assign(__assign({}, item), { completed: true })); });
+var meta = {
+    title: 'Blocks/Stepper',
+    tags: ['autodocs']
+};
+export default meta;
+export var Default = function () {
+    var _a = useStepper(), activeStep = _a.activeStep, handleChangeStep = _a.handleChangeStep;
+    return (_jsx(LinguiContainer, { children: _jsx(Stepper, { items: items, activeStep: activeStep, handleChangeStep: handleChangeStep }) }));
+};
+export var AllStepsCompleted = function () {
+    var _a = useStepper(), activeStep = _a.activeStep, handleChangeStep = _a.handleChangeStep;
+    return (_jsx(LinguiContainer, { children: _jsx(Stepper, { items: completedItems, activeStep: activeStep, handleChangeStep: handleChangeStep }) }));
+};

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

@@ -0,0 +1,2 @@
+export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const ItemsWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

package/ui/Blocks/Stepper/styles.js

@@ -0,0 +1,8 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from '@xstyled/styled-components';
+export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n"])));
+export var ItemsWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  margin-bottom: 36px;\n"], ["\n  display: flex;\n  margin-bottom: 36px;\n"])));
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+export type StepperProps = {
+    items: StepperItem[];
+    activeStep: number;
+    handleChangeStep: (step: number) => () => void;
+};
+export type StepperPassedDownProps = {
+    handleGoToNextStep: () => void;
+};
+export type StepperItem = {
+    title: string;
+    completed?: boolean;
+    disabled?: boolean;
+    component: FC<StepperPassedDownProps>;
+};

package/ui/Blocks/Stepper/types.js

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

package/ui/Elements/Text/Text.d.ts

@@ -1,3 +1,3 @@
 import type { TextProps } from './types';
-declare const Text: (props: TextProps) => JSX.Element;
+declare const Text: ({ as, ...props }: TextProps) => JSX.Element;
 export default Text;

package/ui/Elements/Text/Text.js

@@ -9,7 +9,21 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { x } from '@xstyled/styled-components';
-var Text = function (props) { return _jsx(x.div, __assign({ as: "span" }, props)); };
+var Text = function (_a) {
+    var _b = _a.as, as = _b === void 0 ? 'span' : _b, props = __rest(_a, ["as"]);
+    return _jsx(x.div, __assign({ as: as }, props));
+};
 export default Text;

package/ui/Elements/Text/stories/Text.stories.d.ts

@@ -2,7 +2,7 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: (props: import("..").TextProps) => JSX.Element;
+    component: ({ as, ...props }: import("..").TextProps) => JSX.Element;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/Text/types.d.ts

@@ -1,13 +1,15 @@
-import { ReactNode } from 'react';
+import { ComponentType, ReactNode } from 'react';
 export type TextVariant = 'normal' | 'medium' | 'semiBold' | 'bold';
 export type TextProps = {
     children?: ReactNode | ReactNode[];
-    fontSize?: number;
+    fontSize?: string | number;
     fontWeight?: string;
+    fontFamily?: string;
     variant?: TextVariant;
     mt?: string | number;
     mr?: string | number;
     mb?: string | number;
     ml?: string | number;
     color?: string;
+    as?: string | ComponentType<any>;
 };

package/ui/Elements/Typography/Typography.d.ts

@@ -1,117 +1,14 @@
 import { TextProps as BaseTextProps } from '../Text';
-export declare const Text: {
-    (props: BaseTextProps): JSX.Element;
-    defaultProps: {
-        fontFamily: string;
-    };
-};
-export declare const Paragraph1: {
-    (props: BaseTextProps): JSX.Element;
-    defaultProps: {
-        as: string;
-        fontFamily: string;
-        fontSize: string;
-    };
-};
-export declare const Paragraph2: {
-    (props: BaseTextProps): JSX.Element;
-    defaultProps: {
-        as: string;
-        fontFamily: string;
-        fontSize: string;
-    };
-};
-export declare const Paragraph3: {
-    (props: BaseTextProps): JSX.Element;
-    defaultProps: {
-        as: string;
-        fontFamily: string;
-        fontSize: string;
-    };
-};
-export declare const Paragraph4: {
-    (props: BaseTextProps): JSX.Element;
-    defaultProps: {
-        as: string;
-        fontFamily: string;
-        fontSize: string;
-    };
-};
-export declare const Paragraph5: {
-    (props: BaseTextProps): JSX.Element;
-    defaultProps: {
-        as: string;
-        fontFamily: string;
-        fontSize: string;
-    };
-};
-export declare const H1: {
-    (props: BaseTextProps): JSX.Element;
-    defaultProps: {
-        as: string;
-        fontFamily: string;
-        fontSize: string;
-        mt: number;
-        mb: number;
-    };
-};
-export declare const H2: {
-    (props: BaseTextProps): JSX.Element;
-    defaultProps: {
-        as: string;
-        fontFamily: string;
-        fontSize: string;
-        mt: number;
-        mb: number;
-    };
-};
-export declare const H3: {
-    (props: BaseTextProps): JSX.Element;
-    defaultProps: {
-        as: string;
-        fontFamily: string;
-        fontSize: string;
-        mt: number;
-        mb: number;
-    };
-};
-export declare const H4: {
-    (props: BaseTextProps): JSX.Element;
-    defaultProps: {
-        as: string;
-        fontFamily: string;
-        fontSize: string;
-        mt: number;
-        mb: number;
-    };
-};
-export declare const H5: {
-    (props: BaseTextProps): JSX.Element;
-    defaultProps: {
-        as: string;
-        fontFamily: string;
-        fontSize: string;
-        mt: number;
-        mb: number;
-    };
-};
-export declare const H6: {
-    (props: BaseTextProps): JSX.Element;
-    defaultProps: {
-        as: string;
-        fontFamily: string;
-        fontSize: string;
-        mt: number;
-        mb: number;
-    };
-};
-export declare const H7: {
-    (props: BaseTextProps): JSX.Element;
-    defaultProps: {
-        as: string;
-        fontFamily: string;
-        fontSize: string;
-        mt: number;
-        mb: number;
-    };
-};
+export declare const Text: ({ as, fontFamily, fontSize, variant, ...props }: BaseTextProps) => JSX.Element;
+export declare const Paragraph1: (props: BaseTextProps) => JSX.Element;
+export declare const Paragraph2: (props: BaseTextProps) => JSX.Element;
+export declare const Paragraph3: (props: BaseTextProps) => JSX.Element;
+export declare const Paragraph4: (props: BaseTextProps) => JSX.Element;
+export declare const Paragraph5: (props: BaseTextProps) => JSX.Element;
+export declare const H1: (props: BaseTextProps) => JSX.Element;
+export declare const H2: (props: BaseTextProps) => JSX.Element;
+export declare const H3: (props: BaseTextProps) => JSX.Element;
+export declare const H4: (props: BaseTextProps) => JSX.Element;
+export declare const H5: (props: BaseTextProps) => JSX.Element;
+export declare const H6: (props: BaseTextProps) => JSX.Element;
+export declare const H7: (props: BaseTextProps) => JSX.Element;