frst-components 0.37.0 → 0.38.0

package/dist/esm/src/components/DS/scroll-container-v2/ButtonControl/buttonControlStyles.js

@@ -0,0 +1,65 @@
+import styled from 'styled-components';
+
+const ButtonControllStyled = styled.div `  
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    background: ${({ theme }) => theme.colors.shadeWhite};
+    border: 1px solid #e8e8e8;
+
+    width: ${({ sizeButton }) => sizeButton ? SIZE_BUTTON[sizeButton] : '50px'};
+    height: ${({ sizeButton }) => sizeButton ? SIZE_BUTTON[sizeButton] : '50px'};
+  
+    min-width: ${({ sizeButton }) => sizeButton ? SIZE_BUTTON[sizeButton] : '50px'};
+    min-height: ${({ sizeButton }) => sizeButton ? SIZE_BUTTON[sizeButton] : '50px'};
+
+    border-radius: 50%;
+    padding: ${({ sizeButton, direction }) => (sizeButton && direction) ? PADDING_SIZE_BUTTON[direction][sizeButton] : '3px'} !important;
+    
+    svg {
+        width: ${({ sizeButton }) => SIZE_ARROW[sizeButton]} !important;
+        height: ${({ sizeButton }) => SIZE_ARROW[sizeButton]} !important;
+    }
+    &:hover {
+        background: ${({ theme }) => theme.colors.primary1} !important;
+        border: 0px solid #e8e8e8;
+        path {
+            stroke: #fff;
+        }
+    }
+
+    box-shadow: 8px 21px 8px 0 rgb(34 34 34 / 30%) !important;
+    z-index: 9;
+    transition: all 0.2s ease-in-out;
+`;
+const SIZE_BUTTON = {
+    'small': '20px',
+    'medium': '50px',
+    'large': '80px',
+    'extra-large': '100px'
+};
+const SIZE_ARROW = {
+    'small': '8px',
+    'medium': '25px',
+    'large': '30px',
+    'extra-large': '50px'
+};
+const PADDING_SIZE_BUTTON = {
+    'right': {
+        'small': '0px 0px 0px 1px',
+        'medium': '0px 0px 0px 5px',
+        'large': '0px 0px 0px 7px',
+        'extra-large': '0px 0px 0px 10px'
+    },
+    'left': {
+        'small': '0px 1px 0px 0px',
+        'medium': '0px 5px 0px 0px',
+        'large': '0px 7px 0px 0px',
+        'extra-large': '0px 10px 0px 0px'
+    }
+};
+
+export { ButtonControllStyled };

package/dist/esm/src/components/DS/scroll-container-v2/ButtonControl/index.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../../theme/index.js';
+import { ButtonControllStyled } from './buttonControlStyles.js';
+import { useLongPress } from './useLongPress.js';
+
+function ButtonControll({ onClick, onClickLongPress, isVisible, direction, ArrowScroll, sizeButton, styles }) {
+    const longPressEvent = useLongPress(() => {
+        onClickLongPress();
+    }, 500);
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsx(ButtonControllStyled, { onClick: onClick, ...longPressEvent, style: {
+                visibility: isVisible ? 'visible' : 'hidden',
+                position: 'absolute',
+                [direction]: 0,
+                ...styles
+            }, sizeButton: sizeButton, direction: direction, children: jsx(ArrowScroll, {}) }) }));
+}
+
+export { ButtonControll };

package/dist/esm/src/components/DS/scroll-container-v2/ButtonControl/useLongPress.js

@@ -0,0 +1,26 @@
+import { useState, useEffect } from 'react';
+
+function useLongPress(callback = () => { }, ms = 2000) {
+    const [startLongPress, setStartLongPress] = useState(false);
+    useEffect(() => {
+        let timerId;
+        if (startLongPress) {
+            timerId = setTimeout(callback, ms);
+        }
+        else {
+            clearTimeout(timerId);
+        }
+        return () => {
+            clearTimeout(timerId);
+        };
+    }, [callback, ms, startLongPress]);
+    return {
+        onMouseDown: () => setStartLongPress(true),
+        onMouseUp: () => setStartLongPress(false),
+        onMouseLeave: () => setStartLongPress(false),
+        onTouchStart: () => setStartLongPress(true),
+        onTouchEnd: () => setStartLongPress(false),
+    };
+}
+
+export { useLongPress };

package/dist/esm/src/components/DS/scroll-container-v2/index.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import '../../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { ArrowScrollLeft, ArrowScrollRight } from '../../../shared/icons.js';
+import { WrapperHorizontal, WrapperContent } from './scrollContainerStyles.js';
+import { ButtonControll } from './ButtonControl/index.js';
+import { useScroll } from './useScroll.js';
+
+function ScrollContainer({ children, isVisibleControlsButtons, stepMove, horizontalMarginInternScroll, verticalMarginInternScroll, marginsArrowButtonHorizontal, marginsArrowButtonVertical, positionArrowButton, className, styles, sizeArrowButton, hiddenHorizontalScrollBar, handleClick }) {
+    const { scrollToLeft, scrollToRight, onClickLongPress, isVisibleLeft, isVisibleRight, scrollRef } = useScroll(stepMove, handleClick);
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsx("div", { style: { position: 'relative' }, className: className, children: jsxs(WrapperHorizontal, { position: positionArrowButton, style: { ...styles }, children: [jsx(WrapperContent, { ref: scrollRef, paddingInternHorizontal: horizontalMarginInternScroll, paddingInternVertical: verticalMarginInternScroll, hiddenHorizontalScrollBar: hiddenHorizontalScrollBar, children: jsx("div", { style: {
+                                width: 'fit-content',
+                                display: 'flex',
+                                flexDirection: 'row',
+                                whiteSpace: 'pre-wrap',
+                                userSelect: 'none'
+                            }, children: children }) }), isVisibleControlsButtons && (jsxs(Fragment, { children: [jsx(ButtonControll, { onClick: scrollToLeft, onClickLongPress: () => onClickLongPress('left'), isVisible: isVisibleLeft, direction: "left", ArrowScroll: ArrowScrollLeft, sizeButton: sizeArrowButton, styles: {
+                                    marginLeft: marginsArrowButtonHorizontal,
+                                    marginTop: positionArrowButton == 'top' ? marginsArrowButtonVertical : '0px',
+                                    marginBottom: positionArrowButton == 'base' ? marginsArrowButtonVertical : '0px',
+                                } }), jsx(ButtonControll, { onClick: scrollToRight, onClickLongPress: () => onClickLongPress('right'), isVisible: isVisibleRight, direction: "right", ArrowScroll: ArrowScrollRight, sizeButton: sizeArrowButton, styles: {
+                                    marginRight: marginsArrowButtonHorizontal,
+                                    marginTop: positionArrowButton == 'top' ? marginsArrowButtonVertical : '0px',
+                                    marginBottom: positionArrowButton == 'base' ? marginsArrowButtonVertical : '0px',
+                                } })] }))] }) }) }));
+}
+
+export { ScrollContainer as default };

package/dist/esm/src/components/DS/scroll-container-v2/scrollContainerStyles.js

@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+
+const POSITION_ARROW = {
+    'top': 'flex-start',
+    'mid': 'center',
+    'base': 'flex-end',
+};
+const WrapperHorizontal = styled.div `
+  display: flex;
+  flex-direction: row;
+  align-items: ${({ position }) => (position ? POSITION_ARROW[position] : 'center')};;
+  justify-content: center;
+  width: 100%;
+  height: auto;
+`;
+const WrapperContent = styled.div `
+
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: fit-content;
+  overflow-x: ${({ hiddenHorizontalScrollBar }) => (hiddenHorizontalScrollBar ? 'hidden' : 'scroll')};
+  overflow-y: hidden;
+  white-space: nowrap;
+  gap: 24px;
+
+  scroll-behavior: smooth;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  padding-left: ${({ paddingInternHorizontal }) => (paddingInternHorizontal ? paddingInternHorizontal : '150px')};
+  padding-right: ${({ paddingInternHorizontal }) => (paddingInternHorizontal ? paddingInternHorizontal : '150px')};
+  padding-top: ${({ paddingInternVertical }) => (paddingInternVertical ? paddingInternVertical : '0px')};
+  padding-bottom: ${({ paddingInternVertical }) => (paddingInternVertical ? paddingInternVertical : '0px')};
+
+  & > * {
+    all: initial;
+  }
+`;
+styled.div `
+  min-width: 350px;
+  min-height: 300px;
+  margin: 10px;
+  margin-left: 2px;
+  margin-right: 2px;
+  background-color: #0f0;
+  z-index: 1;
+  border-radius: 20px;
+`;
+
+export { WrapperContent, WrapperHorizontal };

package/dist/esm/src/components/DS/scroll-container-v2/useScroll.js

@@ -0,0 +1,85 @@
+import { useRef, useState, useEffect } from 'react';
+
+// @ts-nocheck
+const useScroll = (stepMove, handleClick) => {
+    const scrollRef = useRef();
+    const [isVisibleLeft, setIsVisibleLeft] = useState(false);
+    const [isVisibleRight, setIsVisibleRight] = useState(false);
+    const scrollToLeft = () => {
+        const scrollElement = scrollRef.current;
+        scrollElement.scrollLeft - stepMove <= 0 ? setIsVisibleLeft(false) : setIsVisibleLeft(true);
+        setIsVisibleRight(true);
+        scrollElement.scrollLeft = scrollElement.scrollLeft - stepMove;
+        handleClick();
+    };
+    const scrollToRight = () => {
+        const scrollElement = scrollRef.current;
+        scrollElement.scrollLeft + stepMove <= 0 ? setIsVisibleLeft(false) : setIsVisibleLeft(true);
+        scrollElement.offsetWidth + scrollElement.scrollLeft + stepMove >= scrollElement.scrollWidth
+            ? setIsVisibleRight(false)
+            : setIsVisibleRight(true);
+        scrollElement.scrollLeft = scrollElement.scrollLeft + stepMove;
+        handleClick();
+    };
+    const onClickLongPress = (direction) => {
+        let stepMoveLocal = 999999;
+        if (direction == 'right') {
+            const scrollElement = scrollRef.current;
+            scrollElement.scrollLeft + stepMoveLocal <= 0 ? setIsVisibleLeft(false) : setIsVisibleLeft(true);
+            scrollElement.offsetWidth + scrollElement.scrollLeft + stepMoveLocal >= scrollElement.scrollWidth
+                ? setIsVisibleRight(false)
+                : setIsVisibleRight(true);
+            scrollElement.scrollLeft = scrollElement.scrollLeft + stepMoveLocal;
+        }
+        else {
+            const scrollElement = scrollRef.current;
+            scrollElement.scrollLeft - stepMoveLocal <= 0 ? setIsVisibleLeft(false) : setIsVisibleLeft(true);
+            setIsVisibleRight(true);
+            scrollElement.scrollLeft = scrollElement.scrollLeft - stepMoveLocal;
+        }
+    };
+    useEffect(() => {
+        const scrollElement = scrollRef.current;
+        if (scrollElement && scrollElement.clientWidth && scrollElement.clientWidth < scrollElement.scrollWidth)
+            setIsVisibleRight(true);
+        else
+            setIsVisibleRight(false);
+    }, []);
+    useEffect(() => {
+        const scrollElement = scrollRef.current;
+        scrollElement.offsetWidth + scrollElement.scrollLeft >= scrollElement.scrollWidth
+            ? setIsVisibleRight(false)
+            : setIsVisibleRight(true);
+        scrollElement.scrollLeft - stepMove <= 0 ? setIsVisibleLeft(false) : setIsVisibleLeft(true);
+        if (scrollElement && scrollElement.clientWidth && scrollElement.clientWidth < scrollElement.scrollWidth)
+            setIsVisibleRight(true);
+        else
+            setIsVisibleRight(false);
+    }, [stepMove]);
+    useEffect(() => {
+        const updateSize = () => {
+            const scrollElement = scrollRef.current;
+            if (scrollElement.offsetWidth + scrollElement.scrollLeft >= scrollElement.scrollWidth)
+                setIsVisibleRight(false);
+            else
+                setIsVisibleRight(true);
+            scrollElement.scrollLeft - stepMove <= 0 ? setIsVisibleLeft(false) : setIsVisibleLeft(true);
+            if (scrollElement && scrollElement.clientWidth && scrollElement.clientWidth < scrollElement.scrollWidth)
+                setIsVisibleRight(true);
+            else
+                setIsVisibleRight(false);
+        };
+        window.addEventListener('resize', updateSize);
+        return () => window.removeEventListener('resize', updateSize);
+    }, [stepMove]);
+    return {
+        scrollToLeft,
+        scrollToRight,
+        onClickLongPress,
+        isVisibleLeft,
+        isVisibleRight,
+        scrollRef
+    };
+};
+
+export { useScroll };

package/dist/esm/src/components/DS/select/Select.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import { SelectContext } from './SelectContext.js';
+import { FRSTTheme } from '../../../theme/index.js';
+import { DropDownContainer, EventOverlay, DropDownHeader, SelectedOption, DropDownHeaderIcon, DropDownListContainer, DropDownList } from './styles/StylesSelect.js';
+
+function ArrowIcon({ fill }) {
+    return (jsx("svg", { width: "14", height: "7", viewBox: "0 0 14 7", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M7.1736 6.64904L13.521 0.992188H0.826172L7.1736 6.64904Z", fill: fill ? fill : "#222222" }) }));
+}
+function Select({ placeholder, defaultValue, children, onChange, loading, isError, style, disabled, ArrowIconFormatted }) {
+    const wrapperRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedOption, setSelectedOption] = useState(null);
+    const [selectedOptionValue, setSelectedOptionValue] = useState();
+    useEffect(() => {
+        function handleClickOutside(event) {
+            // @ts-ignore
+            if (wrapperRef.current && !wrapperRef.current.contains(event.target) && isOpen)
+                setIsOpen(false);
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [wrapperRef, isOpen]);
+    useEffect(() => {
+        let param = false;
+        children &&
+            children.length &&
+            children.forEach((child) => {
+                if (child.props.value == defaultValue) {
+                    param = true;
+                    setSelectedOption(child.props.label);
+                    setSelectedOptionValue(child.props.value);
+                }
+            });
+        if (!param) {
+            setSelectedOption(null);
+            setSelectedOptionValue(false);
+        }
+    }, [children, defaultValue]);
+    const toggle = () => setIsOpen(!isOpen);
+    const handleChange = (e) => {
+        onChange(e);
+        toggle();
+    };
+    return (jsx("div", { style: style, children: jsxs(DropDownContainer, { ref: wrapperRef, "$error": isError, theme: FRSTTheme, children: [jsx(EventOverlay, { onClick: toggle, "$disabled": disabled }), jsxs(DropDownHeader, { "$error": isError, "$disabled": disabled, theme: FRSTTheme, children: [loading ? (jsx("p", { children: "Carregando dados..." })) : selectedOption ? (jsx(SelectedOption, { children: selectedOption })) : (jsx("p", { children: placeholder })), jsx(DropDownHeaderIcon, { "$open": isOpen, children: ArrowIconFormatted ? jsx(ArrowIconFormatted, { fill: disabled && '#BDBDBD' }) : jsx(ArrowIcon, { fill: disabled && '#BDBDBD' }) })] }), isOpen && (jsx(DropDownListContainer, { children: jsx(DropDownList, { children: jsx("div", { onClick: handleChange, children: jsx(SelectContext.Provider, { value: { selected: selectedOptionValue }, children: children }) }) }) }))] }) }));
+}
+
+export { ArrowIcon, Select as default };

package/dist/esm/src/components/DS/select/SelectContext.js

@@ -0,0 +1,6 @@
+import React__default from 'react';
+
+// Create react context to share data between components
+const SelectContext = React__default.createContext(null);
+
+export { SelectContext };

package/dist/esm/src/components/DS/select/SelectItem.js

@@ -0,0 +1,46 @@
+import { jsx } from 'react/jsx-runtime';
+import styled, { css } from 'styled-components';
+import { SelectContext } from './SelectContext.js';
+
+const ListItem = styled("li") `
+    list-style: none;
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 19px;
+    color: #000;
+    height: 38px;
+    margin: 0;
+    padding-left: 16px;
+    margin-top: 4px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    white-space: normal;
+
+    ${props => props.disabled === true && css `
+        cursor: not-allowed;
+        background-color: #e5e5e5;
+        opacity: 0.3;
+    `}
+
+    ${props => props.selected === true && css `
+        background-color: #e5e5e5;
+        cursor: pointer;
+        opacity: 1;
+    `}
+
+    &:hover {
+        background-color: #e5e5e5;
+    }
+`;
+function SelectItem({ value, label, selected, handleSelect, disabled }) {
+    return (jsx(SelectContext.Consumer, { children: ({ selected }) => (jsx(ListItem, { disabled: disabled, selected: selected === value, value: value, onClick: handleSelect, children: label })) }));
+}
+
+export { SelectItem as default };

package/dist/esm/src/components/DS/select/index.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import Select from './Select.js';
+import SelectItem from './SelectItem.js';
+
+function SelectFRST({ placeholder, valueSelect, handleValueSelect, listItems, isError, style, disabled, ArrowIcon = null }) {
+    return (jsx(Select, { placeholder: placeholder, defaultValue: valueSelect, onChange: (e) => handleValueSelect(e.target?.attributes?.value?.value), isError: isError, style: style, disabled: disabled, ArrowIconFormatted: ArrowIcon, children: listItems.map((item, index) => (jsx(SelectItem, { label: item, value: item }, index))) }));
+}
+
+export { SelectFRST as default };

package/dist/esm/src/components/DS/select/styles/StylesSelect.js

@@ -0,0 +1,107 @@
+import styled, { css } from 'styled-components';
+
+const DropDownContainer = styled.div `
+  width: 100%;
+  height: 48px;
+  background: #ffffff;
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+  position: relative;
+  ${(props) => props.$error &&
+    css `
+      background: ${({ theme }) => theme.colors.inputError};
+      border: 1px solid ${({ theme }) => theme.colors.messageError1};
+  `};
+`;
+const EventOverlay = styled.div `
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: transparent;
+  ${props => props.$disabled &&
+    css `
+      cursor: not-allowed !important;
+      pointer-events: none;
+  `};
+  z-index: 2;
+`;
+const DropDownHeader = styled.div `
+  font-weight: 500;
+  font-size: 1.3rem;
+  color: #3faffa;
+  background: #ffffff;
+  cursor: pointer;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding-left: 16px;
+  border-radius: 4px;
+
+  p {
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 19px;
+    color: #a6a6a6;
+  }
+  ${(props) => props.$error &&
+    css `
+      background: ${({ theme }) => theme.colors.inputError};
+      p {
+        color: ${({ theme }) => theme.colors.linkError};
+      }
+    `};
+  ${(props) => props.$disabled &&
+    css `
+        background: ${({ theme }) => theme.colors.neutralsGrey8};
+        border: 1px solid ${({ theme }) => theme.colors.neutralsGrey6};
+        cursor: not-allowed !important;
+        p {
+          color: ${({ theme }) => theme.colors.neutralsGrey5};
+        }
+  `};
+`;
+const DropDownListContainer = styled('div') ``;
+const DropDownList = styled('ul') `
+  padding: 0;
+  margin: 0;
+  background: #ffffff;
+  border: 2px solid #e5e5e5;
+  box-sizing: border-box;
+  color: #3faffa;
+  font-size: 1.3rem;
+  font-weight: 500;
+  position: absolute;
+  width: 100%;
+  z-index: 5;
+
+  &:first-child {
+    padding-top: 0.8em;
+  }
+`;
+const DropDownHeaderIcon = styled('div') `
+  position: absolute;
+  right: 16.48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.1s ease-in-out;
+
+  ${({ $open }) => $open === true &&
+    css `
+      transform: rotate(180deg);
+    `}
+`;
+const SelectedOption = styled('p') `
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 19px;
+  color: #222222;
+`;
+
+export { DropDownContainer, DropDownHeader, DropDownHeaderIcon, DropDownList, DropDownListContainer, EventOverlay, SelectedOption };

package/dist/esm/src/components/DS/steps-progress/index.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Box } from '@mui/material';
+import React__default from 'react';
+import '../../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { ProgressBar, ProgressItem, ContainerSteps, CicleStep, CicleStepChar, CicleStepName } from './stepsProgressStyles.js';
+
+// import { IAvatar } from './stepsProgress'
+function StepsProgress({ definedSteps, stepSelected, width = 600, colorItemWhite = false }) {
+    const stepColor = definedSteps.filter(s => s.step !== 1);
+    return (jsxs(ThemeProvider, { theme: FRSTTheme, children: [jsx(ProgressBar, { children: stepColor && Array.isArray(stepColor) ?
+                    stepColor.map((item, index) => jsx(ProgressItem, { "$active": item?.active }, index))
+                    : null }), jsx(ContainerSteps, { children: definedSteps && Array.isArray(definedSteps) ?
+                    definedSteps.map((item, index) => {
+                        return (jsxs(React__default.Fragment, { children: [(item?.step == stepSelected) &&
+                                    jsx(StepItem, { index: index, name: item?.name, action: item?.action, step: item?.step, variant: 'selected' }), (!(item?.step == stepSelected) && item?.active) &&
+                                    jsx(StepItem, { index: index, name: item?.name, action: item?.action, step: item?.step, variant: 'normal', colorItemWhite: colorItemWhite }), (!item?.active) &&
+                                    jsx(StepItem, { index: index, name: item?.name, action: item?.action, step: item?.step, variant: 'disabled' })] }, index));
+                    })
+                    : null })] }));
+}
+function StepItem({ index, name, action, step, variant, colorItemWhite = false }) {
+    return (jsx(Fragment, { children: jsxs(Box, { children: [jsx(CicleStep, { "$variant": variant }), jsx(CicleStepChar, { "$variant": variant, onClick: () => variant != 'disabled' ? action() : () => { }, children: step }), jsx(CicleStepName, { "$variant": variant, "$colorItemWhite": colorItemWhite, onClick: () => variant != 'disabled' ? action() : () => { }, children: name })] }, index) }));
+}
+
+export { StepsProgress as default };

package/dist/esm/src/components/DS/steps-progress/stepsProgressStyles.js

@@ -0,0 +1,85 @@
+import styled from 'styled-components';
+import { Box } from '@mui/material';
+
+const ProgressBar = styled(Box) `
+    display: flex;
+    justify-content: space-between;
+    max-width: calc(100% - 66px);
+    margin: auto;
+    margin-bottom: -28px;    
+    
+    @media (max-width: 400px) {
+        max-width: calc(100% - 50px);
+        margin-bottom: -28px;    
+    }
+`;
+const ProgressItem = styled(Box) `
+    height: 8px;
+    background: ${({ $active }) => $active ? '#FEA852' : '#D9D9D9'};
+    width: 100%;
+    @media (max-width: 400px) {
+        height: 5px;
+    }
+`;
+const ContainerSteps = styled(Box) `
+    display: flex;
+    justify-content: space-between;
+    max-width: 100%;
+    margin: auto;
+    position: relative;
+    z-index: 1;
+`;
+const CicleStep = styled(Box) `
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: #FFE0C2;
+    color: #FFF;
+    opacity: ${({ $variant }) => $variant == 'selected' ? '0.5' : '0'};
+    cursor: ${({ $variant }) => $variant == 'disabled' ? 'not-allowed' : 'pointer'};
+    @media (max-width: 400px) {    
+        opacity: 0;
+        width: 25px;
+        height: 25px;
+    }
+`;
+const CicleStepChar = styled(Box) `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    color: #FFF;
+    margin-left: 10px;
+    margin-top: -40px;
+    background: ${({ $variant }) => $variant == 'disabled' ? ('#BDBDBD') : ($variant == 'selected' ? '#F26818' : '#FEA852')};
+    position: ${({ $variant }) => $variant != 'disabled' && 'relative'};
+    cursor: ${({ $variant }) => $variant == 'disabled' ? 'not-allowed' : 'pointer'};
+
+    @media (max-width: 400px) {
+        width: 15px;
+        height: 15px;
+        margin-top: -8px;    
+    }
+`;
+const CicleStepName = styled(Box) `
+    margin-left: -10px;
+    margin-top: 20px;
+    width: 70px;
+    text-align: center;
+    color: ${({ $variant }) => $variant == 'disabled' ? ('#757575') : ($variant == 'selected' ? '#F26818' : ($variant == 'white' ? '#FFF' : '#222'))};
+    font-weight: ${({ $variant }) => $variant == 'selected' ? '600' : '400'};
+    cursor: ${({ $variant }) => $variant == 'disabled' ? 'not-allowed' : 'pointer'};
+
+    ${({ $colorItemWhite }) => $colorItemWhite &&
+    `
+    color:#fff;
+    `}
+
+    @media (max-width: 400px) {        
+        font-size: 10px;
+    }
+`;
+
+export { CicleStep, CicleStepChar, CicleStepName, ContainerSteps, ProgressBar, ProgressItem };

package/dist/esm/src/components/DS/toast/index.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { FRSTTheme } from '../../../theme/index.js';
+import { ThemeProvider } from 'styled-components';
+import { ErrorInCicleIcon, CloseIcon } from '../../../shared/icons.js';
+import { CircledCheck } from '../../../../public/customIcons/CircledCheck.js';
+import { CircledAlert } from '../../../../public/customIcons/CircledAlert.js';
+import { ToastWrapper, Icon, Text, CloseButton } from './toast.styles.js';
+
+const Toast = ({ type = 'success', message, onClose, showBySeconds = 5, styles }) => {
+    const [isToastOpen, setIsToastOpen] = useState(true);
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            onClose();
+        }, showBySeconds * 1000);
+        return () => clearTimeout(timer);
+    }, [onClose]);
+    let iconComponent;
+    switch (type) {
+        case 'error':
+            iconComponent = jsx(ErrorInCicleIcon, { fill: '#C00F00', width: '22', height: '22' });
+            break;
+        case 'success':
+            iconComponent = jsx(CircledCheck, { width: '22', height: '22' });
+            break;
+        case 'alert':
+            iconComponent = jsx(CircledAlert, { width: '22', height: '22' });
+            break;
+        default:
+            iconComponent = jsx(CircledAlert, { width: '22', height: '22' });
+    }
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(ToastWrapper, { visible: isToastOpen, style: { ...styles }, children: [jsx(Icon, { children: iconComponent }), jsx(Text, { children: message }), jsx(CloseButton, { onClick: onClose, children: jsx(CloseIcon, { width: '14', height: '14' }) })] }) }));
+};
+
+export { Toast };