frst-components 0.36.9 → 0.38.0

package/dist/esm/src/components/DS/newCards/people/index.js

@@ -0,0 +1,120 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ThemeProvider } from 'styled-components';
+import { ContainerCard, HeaderInfo, UserInfo, ButtonsList, CardButton } from './styles.js';
+import { FRSTTheme } from '../../../../theme/index.js';
+import Avatar from '../../../avatar/index.js';
+import { Tooltip } from '@mui/material';
+
+function ProfileIcon() {
+    return (jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M8 0C3.584 0 0 3.584 0 8C0 12.416 3.584 16 8 16C12.416 16 16 12.416 16 8C16 3.584 12.416 0 8 0ZM8 2.4C9.328 2.4 10.4 3.472 10.4 4.8C10.4 6.128 9.328 7.2 8 7.2C6.672 7.2 5.6 6.128 5.6 4.8C5.6 3.472 6.672 2.4 8 2.4ZM8 13.76C6 13.76 4.232 12.736 3.2 11.184C3.224 9.592 6.4 8.72 8 8.72C9.592 8.72 12.776 9.592 12.8 11.184C11.768 12.736 10 13.76 8 13.76Z", fill: "white" }) }));
+}
+function InviteIcon() {
+    return (jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M16.6663 13.9812V14.3412C16.6663 14.8635 16.4909 15.3647 16.1681 15.7671C16.0488 15.9224 15.8523 16 15.6488 16H13.7681C14.0558 15.4988 14.2102 14.9271 14.2102 14.3412V13.9812C14.2102 12.9647 13.8383 12.0259 13.2067 11.3129C13.2558 11.2988 13.2979 11.2706 13.34 11.2494C13.6628 11.0659 14.0628 11.0094 14.4418 11.1012C15.7471 11.4329 16.6663 12.6118 16.6663 13.9812ZM11.7541 4C11.5295 4 11.312 4.02118 11.1014 4.07059C11.9365 4.84 12.4558 5.94824 12.4558 7.17647C12.4558 8.40471 11.9365 9.51294 11.1014 10.2823C11.312 10.3318 11.5295 10.3529 11.7541 10.3529C13.4944 10.3529 14.912 8.92706 14.912 7.17647C14.912 5.42588 13.4944 4 11.7541 4ZM8.24529 4C6.50494 4 5.08739 5.42588 5.08739 7.17647C5.08739 8.92706 6.50494 10.3529 8.24529 10.3529C9.98564 10.3529 11.4032 8.92706 11.4032 7.17647C11.4032 5.42588 9.98564 4 8.24529 4ZM10.933 11.1012C10.8067 11.0729 10.6874 11.0588 10.5611 11.0588C10.3014 11.0588 10.0488 11.1224 9.83126 11.2494C9.34003 11.5177 8.79266 11.6518 8.24529 11.6518C7.69792 11.6518 7.15758 11.5176 6.67337 11.2565C6.44179 11.1294 6.18213 11.0588 5.92248 11.0588C5.8102 11.0588 5.70492 11.0729 5.59966 11.0941C4.26633 11.4047 3.33301 12.5976 3.33301 13.9812V14.3412C3.33301 14.8635 3.50846 15.3647 3.83127 15.7671C3.95057 15.9224 4.14705 16 4.35056 16H12.14C12.3435 16 12.54 15.9224 12.6593 15.7671C12.9821 15.3647 13.1576 14.8635 13.1576 14.3412V13.9812C13.1576 12.6118 12.2383 11.4329 10.933 11.1012Z", fill: "white" }), jsx("path", { d: "M3.03809 1.03857V5.03857", stroke: "white", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M1.03809 3.03857H5.03809", stroke: "white", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+}
+function MessageIcon() {
+    return (jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M1.33366 8.3382C1.33366 6.77478 1.33366 5.21768 1.33366 3.65426C1.33366 2.71114 1.91366 1.94525 2.80033 1.72371C2.97366 1.67941 3.15366 1.66675 3.32699 1.66675C6.44032 1.66675 9.56033 1.66675 12.6737 1.66675C13.587 1.66675 14.287 2.16679 14.567 3.01496C14.607 3.14156 14.6337 3.26815 14.667 3.40107V10.4713C14.6137 10.6612 14.5803 10.8637 14.4937 11.041C14.1403 11.8068 13.5337 12.1866 12.7137 12.1993C12.487 12.1993 12.2603 12.1993 12.027 12.1993C12.027 12.2563 12.0203 12.3069 12.0203 12.3512C12.0203 12.8576 12.0203 13.3576 12.0137 13.864C12.0137 14.1868 11.7937 14.3893 11.5203 14.3197C11.4403 14.3007 11.3603 14.2501 11.2937 14.1995C10.4937 13.5665 9.69366 12.9335 8.89366 12.2942C8.81366 12.2309 8.72699 12.1993 8.62033 12.1993C6.86033 12.1993 5.10699 12.1993 3.34699 12.1993C2.90699 12.1993 2.50032 12.1043 2.14699 11.8322C1.62033 11.4334 1.34699 10.8954 1.34699 10.2181C1.34699 9.59147 1.34699 8.97117 1.34699 8.34453L1.33366 8.3382ZM11.4537 8.02805C11.947 8.02805 12.3403 7.61662 12.3403 7.11658C12.3403 6.61653 11.9403 6.20511 11.4537 6.20511C10.967 6.20511 10.567 6.61653 10.567 7.11658C10.567 7.61662 10.967 8.02805 11.4537 8.02805ZM8.09366 8.02805C8.58699 8.02805 8.98033 7.61662 8.98033 7.11658C8.98033 6.61653 8.58033 6.20511 8.09366 6.20511C7.60699 6.20511 7.20699 6.61653 7.20699 7.11658C7.20699 7.61662 7.60699 8.02805 8.09366 8.02805ZM4.53366 8.02805C5.02699 8.02805 5.42033 7.61662 5.42033 7.11658C5.42033 6.61653 5.02033 6.20511 4.53366 6.20511C4.04699 6.20511 3.64699 6.61653 3.64699 7.11658C3.64699 7.61662 4.04699 8.02805 4.53366 8.02805Z", fill: "white" }) }));
+}
+function PeopleCard({ avatar, name, area, position, showBtnProfile, showBtnInvite, showBtnMessage, handleClickProfile, handleClickInvite, handleClickMessage }) {
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(ContainerCard, { children: [jsxs(HeaderInfo, { children: [jsx(Avatar, { src: avatar, size: '56px' }), jsxs(UserInfo, { children: [jsx("p", { className: 'title', children: name }), jsx("p", { children: area }), jsx("p", { children: position })] })] }), jsxs(ButtonsList, { children: [showBtnProfile &&
+                            jsx(Tooltip, { title: 'Acessar perfil', placement: 'bottom', arrow: true, slotProps: {
+                                    popper: {
+                                        modifiers: [
+                                            {
+                                                name: 'offset',
+                                                options: {
+                                                    offset: [0, -8]
+                                                }
+                                            }
+                                        ],
+                                    },
+                                    tooltip: {
+                                        sx: {
+                                            backgroundColor: '#FFFFFF',
+                                            fontFamily: 'PT Sans',
+                                            fontWeight: 400,
+                                            fontSize: '14px',
+                                            lineHeight: 1.3,
+                                            textAlign: 'center',
+                                            color: '#757575',
+                                            border: '1px solid #BDBDBD',
+                                            boxShadow: '0px 25px 18px -20px #22222233'
+                                        }
+                                    },
+                                    arrow: {
+                                        sx: {
+                                            ":before": {
+                                                border: '1px solid #BDBDBD'
+                                            },
+                                            color: '#FFFFFF'
+                                        }
+                                    }
+                                }, children: jsx(CardButton, { onClick: handleClickProfile, children: jsx(ProfileIcon, {}) }) }), showBtnInvite &&
+                            jsx(Tooltip, { title: 'Convidar', placement: 'bottom', arrow: true, slotProps: {
+                                    popper: {
+                                        modifiers: [
+                                            {
+                                                name: 'offset',
+                                                options: {
+                                                    offset: [0, -8]
+                                                }
+                                            }
+                                        ],
+                                    },
+                                    tooltip: {
+                                        sx: {
+                                            backgroundColor: '#FFFFFF',
+                                            fontFamily: 'PT Sans',
+                                            fontWeight: 400,
+                                            fontSize: '14px',
+                                            lineHeight: 1.3,
+                                            textAlign: 'center',
+                                            color: '#757575',
+                                            border: '1px solid #BDBDBD',
+                                            boxShadow: '0px 25px 18px -20px #22222233'
+                                        }
+                                    },
+                                    arrow: {
+                                        sx: {
+                                            ":before": {
+                                                border: '1px solid #BDBDBD'
+                                            },
+                                            color: '#FFFFFF'
+                                        }
+                                    }
+                                }, children: jsx(CardButton, { onClick: handleClickInvite, children: jsx(InviteIcon, {}) }) }), showBtnMessage &&
+                            jsx(Tooltip, { title: 'Enviar mensagem', placement: 'bottom', arrow: true, slotProps: {
+                                    popper: {
+                                        modifiers: [
+                                            {
+                                                name: 'offset',
+                                                options: {
+                                                    offset: [0, -8]
+                                                }
+                                            }
+                                        ],
+                                    },
+                                    tooltip: {
+                                        sx: {
+                                            backgroundColor: '#FFFFFF',
+                                            fontFamily: 'PT Sans',
+                                            fontWeight: 400,
+                                            fontSize: '14px',
+                                            lineHeight: 1.3,
+                                            textAlign: 'center',
+                                            color: '#757575',
+                                            border: '1px solid #BDBDBD',
+                                            boxShadow: '0px 25px 18px -20px #22222233'
+                                        }
+                                    },
+                                    arrow: {
+                                        sx: {
+                                            ":before": {
+                                                border: '1px solid #BDBDBD'
+                                            },
+                                            color: '#FFFFFF'
+                                        }
+                                    }
+                                }, children: jsx(CardButton, { onClick: handleClickMessage, children: jsx(MessageIcon, {}) }) })] })] }) }));
+}
+
+export { PeopleCard as default };

package/dist/esm/src/components/DS/newCards/people/styles.js

@@ -0,0 +1,75 @@
+import styled from 'styled-components';
+
+const ContainerCard = styled('div') `
+    width: 280px;
+    height: 140px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    padding: 16px;
+    border-radius: 12px;
+    background-color: ${({ theme }) => theme.colors.shadeWhite};
+    border: 2px solid transparent;
+
+    :hover {
+        border: 2px solid #757575;
+    }
+
+    :focus {
+        border: 2px solid #757575;
+        background-color: #F7F7F7;
+    }
+
+`;
+const HeaderInfo = styled('div') `
+    display: flex;
+    gap: 12px;
+    height: 56px;
+`;
+const UserInfo = styled('div') `
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    .title {
+        font-family: 'PT Sans';
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 1.1;
+        color: #222222;
+    }
+
+    p {
+        font-family: 'PT Sans';
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 1.3;
+        color: #757575;
+        margin: 0;
+    }
+`;
+const ButtonsList = styled('div') `
+    display: flex;
+    gap: 16px;
+`;
+const CardButton = styled('div') `
+    width: 32px;
+    height: 32px;
+    padding: 8px;
+    border-radius: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    background-color: ${({ theme }) => theme.colors.primary1};
+    border: 1px solid ${({ theme }) => theme.colors.primary1};
+
+    :hover {
+        background: #F18624;
+        border: 1px solid #F18624;
+    }
+
+`;
+
+export { ButtonsList, CardButton, ContainerCard, HeaderInfo, UserInfo };

package/dist/esm/src/components/DS/newCards/trail/index.js

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { TrailCardContainer, WrapperBanner, CardInfo } from './styles.js';
+
+function TrailCard({ banner, trailName, company, handleClick }) {
+    return (jsxs(TrailCardContainer, { onClick: handleClick, children: [jsx(WrapperBanner, { children: jsx("img", { src: banner, alt: "banner" }) }), jsxs(CardInfo, { children: [jsxs("p", { className: "trailName", children: [" ", trailName, " "] }), company &&
+                        jsxs("p", { className: "company", children: [company.icon && company.icon !== '' &&
+                                    jsx("img", { src: company.icon }), company.name] })] })] }));
+}
+
+export { TrailCard as default };

package/dist/esm/src/components/DS/newCards/trail/styles.js

@@ -0,0 +1,60 @@
+import styled from 'styled-components';
+
+const TrailCardContainer = styled('div') `
+    width: 246px;
+    height: 242px;
+    padding: 8px 8px 16px 8px;
+    border-radius: 12px;
+    background: #FFFFFF;
+    gap: 8px;
+    cursor: pointer;
+    border: 2px solid transparent;
+
+    :hover {
+        border: 2px solid #757575;
+    }
+
+    :focus {
+        border: 2px solid #757575;
+        background-color: #F7F7F7;
+    }
+`;
+const WrapperBanner = styled('div') `
+    img {
+        width: 100%;
+        height: 140px;
+        border-radius: 8px;
+        object-fit: cover;
+    }
+`;
+const CardInfo = styled('div') `
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    .trailName {
+        font-family: 'PT Sans';
+        font-size: 14px;
+        font-weight: 700;
+        line-height: 1.3;
+        color: #222222;
+    }
+
+    .company {
+        display: flex;
+        gap: 8px;
+        font-family: 'PT Sans';
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 1.5;
+        color: #444444;
+
+        img {
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+        }
+    }
+`;
+
+export { CardInfo, TrailCardContainer, WrapperBanner };

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

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect, useRef } from 'react';
+import { FRSTTheme } from '../../../theme/index.js';
+import { ThemeProvider } from 'styled-components';
+import { CardContainer, ImageTextGroup, TextLevel, Challenge, ScroollableContent, StepBox, StepBoxIconBlock, CheckCircle, StepBar, StepBoxTextBlock, StepBoxTitle, StepBoxDescription } from './onboardingProgressMenuStyles.js';
+import { Tick, Dot } from '../../../shared/icons.js';
+import { useEventListener } from 'usehooks-ts';
+
+function OnboardingProgressMenu(props) {
+    const { items, level, textChallenge, countChallenge, style } = props;
+    const [internalItems, setInternalItems] = useState(items);
+    const [isScrollInTop, setIsScrollInTop] = useState(true);
+    const [isScrollInBottom, setIsScrollInBottom] = useState(true);
+    useEffect(() => {
+        const sortedData = [...items].sort((a, b) => {
+            if (a.finished && !b.finished) {
+                return -1;
+            }
+            if (!a.finished && b.finished) {
+                return 1;
+            }
+            return 0;
+        });
+        setInternalItems(sortedData);
+    }, [items]);
+    const scrollRef = useRef(null);
+    const handleScroll = (event) => {
+        if (scrollRef.current) {
+            const container = scrollRef.current;
+            const isScrolledToBottom = container.scrollTop + container.clientHeight >= container.scrollHeight;
+            const isScrolledToTop = container.scrollTop === 0;
+            setIsScrollInBottom(isScrolledToBottom);
+            setIsScrollInTop(isScrolledToTop);
+        }
+    };
+    useEventListener('scroll', handleScroll, scrollRef);
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(CardContainer, { id: "container-checklist", style: { ...style }, children: [jsxs(ImageTextGroup, { id: "container-level", children: [jsx("img", { id: "image-level", src: level.avatar, width: 85, height: 85 }), jsxs("div", { children: [jsx(TextLevel, { id: "name-level-Up", children: level.name }), jsxs(Challenge, { id: "count-Challenge", children: [countChallenge, " ", textChallenge] })] })] }), !isScrollInTop && (jsx("div", { style: {
+                        background: 'linear-gradient(#ffffff, #ffffff19)',
+                        height: '50px',
+                        position: 'absolute',
+                        top: 120,
+                        right: 36,
+                        width: 'calc(100% - 46px)',
+                        zIndex: 10
+                    } })), jsx(ScroollableContent, { id: "scrool-content", ref: scrollRef, children: internalItems.map((i, index) => (jsxs(StepBox, { id: "container-step", children: [jsxs(StepBoxIconBlock, { children: [jsx(CheckCircle, { isComplete: i.finished, isChecked: i.finished, children: i.finished ? jsx(Tick, { width: "12" }) : jsx(Dot, { width: "16", height: "16" }) }), items.length + 1 > index && jsx(StepBar, { isComplete: i.finished })] }), jsxs(StepBoxTextBlock, { children: [jsx(StepBoxTitle, { onClick: i.handleClick, isComplete: i.finished, children: i.title }), jsx(StepBoxDescription, { children: i.description })] })] }, i.id))) }), !isScrollInBottom && (jsx("div", { style: {
+                        background: 'linear-gradient(#ffffff19, #ffffff)',
+                        height: '50px',
+                        position: 'absolute',
+                        bottom: 27,
+                        right: 36,
+                        width: 'calc(100% - 46px)',
+                        zIndex: 10
+                    } }))] }) }));
+}
+
+export { OnboardingProgressMenu as default };

package/dist/esm/src/components/DS/onboarding-progress-menu/onboardingProgressMenuStyles.js

@@ -0,0 +1,98 @@
+import styled from 'styled-components';
+
+const CardContainer = styled.div `
+  box-sizing: border-box;
+  max-width: 100%;
+  height: auto;
+  background: ${({ theme }) => theme.colors.shadeWhite};
+  box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 8px 0px;
+  border-color: ${({ theme }) => theme.colors.linkDisabled};
+  border-radius: 12px;
+  padding-right: 23px;
+  padding-top: 27px;
+  padding-left: 23px;
+  padding-bottom: 27px;
+  position: relative;
+`;
+const TextLevel = styled.p `
+  ${({ theme }) => theme.fonts.textMessageComponentsBold};
+  color: ${({ theme }) => theme.colors.neutralsGrey1};
+  display: block;
+`;
+const Challenge = styled.p `
+  ${({ theme }) => theme.fonts.textMessageRegular};
+  color: ${({ theme }) => theme.colors.neutralsGrey1};
+`;
+const ImageTextGroup = styled.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 11.83px;
+  padding-bottom: 20.35px;
+`;
+const ScroollableContent = styled.div `
+  display: block;
+  width: 100%;
+  overflow-y: auto;
+  max-height: 520px;
+  padding-right: 17px;
+  position: relative;
+  &::-webkit-scrollbar {
+    width: 7px;
+    background-color: #e2e8f0;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #64748b;
+  }
+`;
+const StepBox = styled.div `
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+`;
+const StepBoxTextBlock = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+`;
+const StepBoxIconBlock = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 66px;
+  align-items: center;
+`;
+const StepBar = styled.div `
+  width: 2px;
+  flex: 1;
+  border-radius: 2px;
+  background-color: ${({ isComplete, theme }) => (isComplete ? theme.colors.primary1 : theme.colors.incompleteGrey)};
+`;
+const StepBoxTitle = styled.a `
+  ${({ theme }) => theme.fonts.MessageComponentsBodyBold};
+  color: ${({ isComplete, theme }) => (isComplete ? theme.colors.primary1 : ' #344054')};
+  ${({ isComplete }) => !isComplete && 'font-weight: 500;'}
+  margin-top:7px;
+  cursor: pointer;
+  text-decoration: none;
+`;
+const StepBoxDescription = styled.p `
+  ${({ theme }) => theme.fonts.textMessageComponentsRegular};
+  color: #6a7585;
+  margin-bottom: 18px;
+`;
+const CheckCircle = styled.div `
+  box-sizing: border-box !important;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 16px;
+  background-color: ${({ isComplete, theme }) => (isComplete ? theme.colors.primary1 : theme.colors.primary1)};
+  border: 4px solid ${({ isChecked, theme }) => (isChecked ? theme.colors.shadeWhite : theme.colors.shadeWhite)};
+`;
+
+export { CardContainer, Challenge, CheckCircle, ImageTextGroup, ScroollableContent, StepBar, StepBox, StepBoxDescription, StepBoxIconBlock, StepBoxTextBlock, StepBoxTitle, TextLevel };

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

@@ -0,0 +1,29 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { LocalizationIcon, ExclamationIcon, GoalIcon } from '../../../shared/icons.js';
+import { WrapperProgressGoalBar, TextUP, ProgressGoalBarContainer, StartIndicator, IndicatorTextInit, Number, TypeProgressText, CurrentIndicator, IndicatorTextCurrent, EndIndicator, IndicatorText, ProgressBarColor } from './progressGoalBarStyles.js';
+import { useProgressGoalBar } from './useProgressGoalBar.js';
+
+function StarIcon() {
+    return (jsx("svg", { width: "14", height: "13", viewBox: "0 0 14 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M6.57085 0.717765C6.7649 0.393208 7.2351 0.393208 7.42915 0.717765L9.18631 3.65671C9.25631 3.77378 9.37108 3.85717 9.50405 3.88756L12.8421 4.65054C13.2108 4.7348 13.3561 5.18198 13.1074 5.46682L10.8553 8.04618C10.7656 8.14892 10.7217 8.28385 10.7339 8.41969L11.0398 11.8302C11.0736 12.2068 10.6932 12.4832 10.3454 12.3347L7.19637 10.9899C7.07094 10.9363 6.92906 10.9363 6.80363 10.9899L3.65458 12.3347C3.30682 12.4832 2.92643 12.2068 2.96021 11.8302L3.2661 8.41969C3.27828 8.28385 3.23444 8.14892 3.14473 8.04618L0.892626 5.46682C0.643919 5.18198 0.789216 4.7348 1.15785 4.65054L4.49595 3.88756C4.62892 3.85717 4.74369 3.77378 4.81369 3.65671L6.57085 0.717765Z", fill: "white" }) }));
+}
+const ProgressGoalBar = ({ start, current, goal, isVisibleMessage = true }) => {
+    const { isGoalExceeded, isGoalReached, positions, noGoal, noResult, resultEvolved, stabilizeExceeding, stabilizeDecreased, stabilize, isGoalDecreased, isGoalIncrease } = useProgressGoalBar({
+        start,
+        current,
+        goal
+    });
+    const getDisplayText = () => {
+        if (noResult) {
+            return positions?.currenText;
+        }
+        else if (stabilizeExceeding) {
+            return positions?.stabilizeExceedingText;
+        }
+        else {
+            return positions?.currentTextInit;
+        }
+    };
+    return (jsxs(WrapperProgressGoalBar, { children: [isVisibleMessage && jsx(TextUP, { children: positions?.message }), jsxs(ProgressGoalBarContainer, { children: [jsx(StartIndicator, { position: positions?.start, children: jsx(LocalizationIcon, {}) }), !stabilizeDecreased && jsx(IndicatorTextInit, { noResult: noResult, position: positions?.start, isGoalReached: isGoalReached, isGoalExceeded: isGoalExceeded, resultEvolved: resultEvolved, start: positions?.start, stabilize: stabilize, children: jsxs(Fragment, { children: [jsx(Number, { children: start }), jsx(TypeProgressText, { children: getDisplayText() })] }) }), !isGoalReached && (jsxs(Fragment, { children: [jsx(CurrentIndicator, { status: positions?.currentVariant, position: positions?.current, children: isGoalExceeded ? jsx(StarIcon, {}) : jsx(ExclamationIcon, {}) }), jsx(IndicatorTextCurrent, { position: positions?.current, noGoal: noGoal, noResult: noResult, children: !noResult && (jsxs(Fragment, { children: [jsx(Number, { children: current }), jsx(TypeProgressText, { children: positions?.currenText })] })) })] })), jsx(EndIndicator, { position: positions?.goal, isGoalExceeded: isGoalExceeded, isGoalReached: isGoalReached, children: jsx(GoalIcon, {}) }), jsxs(IndicatorText, { position: positions?.goal, stabilize: stabilize || stabilizeDecreased, children: [jsx(Number, { children: !stabilizeExceeding && goal }), jsx(TypeProgressText, { children: stabilizeExceeding || stabilize ? positions?.textGoal : positions?.TextoGoalDefault })] }), jsx(ProgressBarColor, { isGoalExceeded: isGoalExceeded, width: positions?.[positions?.barRef], hasRegressed: noGoal, isGoalDecreased: isGoalDecreased, isGoalIncrese: isGoalIncrease, stabileze: stabilize })] })] }));
+};
+
+export { ProgressGoalBar };

package/dist/esm/src/components/DS/progressGoalBar/progressGoalBarStyles.js

@@ -0,0 +1,183 @@
+import styled from 'styled-components';
+import { CurrentVariant } from './useProgressGoalBar.js';
+
+const WrapperProgressGoalBar = styled.div `
+    display: flex;
+    flex-direction: column;
+`;
+const ProgressGoalBarContainer = styled.div `
+    width: 346px;
+    background-color:#D7D7D7;
+    height: 16px;
+    border-radius: 50px;
+    position: relative;
+    display: flex;
+    align-items:center;
+    z-index: 0;
+`;
+const StartIndicator = styled.div `
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+    background: #8D8E96;
+    border: 3px solid #BFBFC4       ;
+    color: #FFF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    font-weight: bold;
+    position: relative;
+    left: calc(${({ position }) => position}% ${({ position }) => position && '- 26px'});
+    z-index: 2;
+`;
+const CurrentIndicator = styled.div `
+    width: 26px;
+    height: 26px;
+    display: flex;
+    border-radius: 50%;
+    align-items: center;   
+    justify-content: center;
+    background: ${({ status }) => {
+    switch (status) {
+        case CurrentVariant.Star:
+            return '#FDB437'; // Cor para quando a meta é excedida
+        case CurrentVariant.Warning:
+            return '#C03535'; // Cor não saiu do lugar ou diminuiu o atual
+        case CurrentVariant.Normal:
+        default:
+            return '#EB903D';
+    }
+}};
+    border: ${({ status }) => {
+    switch (status) {
+        case CurrentVariant.Star:
+            return '3px solid #FED182'; // Borda para quando a meta é excedida
+        case CurrentVariant.Warning:
+            return '3px solid #E25454'; // Cor não saiu do lugar ou diminuiu o atual
+        case CurrentVariant.Normal:
+        default:
+            return '3px solid #F0B37D'; // Borda padrão
+    }
+}};
+    position: absolute;
+    top: -5px;
+    left: calc(${({ position }) => position}% ${({ position }) => position && '- 16px'});
+    z-index: 2;
+`;
+const EndIndicator = styled.div `
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+    background: ${({ isGoalReached, isGoalExceeded }) => isGoalReached || isGoalExceeded ? '#F18624' : '#757575'};
+    border: ${({ isGoalReached, isGoalExceeded }) => isGoalReached || isGoalExceeded ? '3px solid #FFA24C' : '3px solid #9C9C9C'};
+    color: #FFF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    font-weight: bold;
+    position: relative;
+    /* left: calc(346px - 50px); */
+    left: calc(${({ position }) => position}% - 52px);
+    z-index: 2;
+`;
+const ProgressBarColor = styled.div `
+    height: 100%;
+    border-radius: 50px;
+    width: ${({ width }) => width}%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 1;
+    background: ${({ isGoalExceeded, hasRegressed, isGoalDecreased, isGoalIncrese, stabileze }) => {
+    if (hasRegressed) {
+        return '#C90017';
+    }
+    else if (isGoalDecreased || isGoalIncrese || stabileze) {
+        return 'linear-gradient(90deg, rgba(161, 162, 171, 1) 0%, rgba(251, 141, 40, 1) 10%)';
+    }
+    else if (isGoalExceeded) {
+        return 'linear-gradient(90deg,  rgba(251, 141, 40, 1) 78%, rgba(255, 215, 0, 1) 100%)';
+    }
+    else {
+        return 'linear-gradient(90deg, rgba(161, 162, 171, 1) 33%, rgba(251, 141, 40, 1) 65%)';
+    }
+}};
+`;
+const TextUP = styled.div `
+    font-size: 14px;
+    font-family: 'Work Sans';
+    font-style: italic;
+    font-weight: 500;
+    color: #444444;
+    margin-bottom: 24px;
+`;
+const IndicatorText = styled.div `
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: ${({ noResult, isGoalReached, isGoalExceeded, resultEvolved, start }) => noResult || isGoalReached || isGoalExceeded || resultEvolved || start === 0 ? 'start' : 'center'};
+    top: 100%; 
+    /* left: calc(${({ position }) => position}% ${({ position }) => position && '- 59px'}); */
+    left:  ${({ position, stabilize }) => stabilize
+    ? `calc(${position}% - 59px)`
+    : `calc(${position}% - 26px)`};  /* Posiciona o texto com base na posição do indicador */
+    margin-top: 8px; 
+    font-size: 12px; 
+    color: #333;
+    white-space: nowrap; 
+`;
+const IndicatorTextInit = styled.div `
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: ${({ noResult, isGoalReached, isGoalExceeded, resultEvolved, start }) => noResult || isGoalReached || isGoalExceeded || resultEvolved || start === 0 ? 'start' : 'center'};
+    top: 100%; 
+    left: calc(${({ position }) => position}% ${({ position }) => position && '- 30px'});
+    margin-top: 8px; 
+    font-size: 12px; 
+    color: #333;
+    white-space: nowrap; 
+`;
+const IndicatorTextCurrent = styled.div `
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items:  ${({ noGoal, noResult }) => noGoal || noResult ? 'start' : 'center'};
+    top: 100%; 
+    left: calc(${({ position }) => position}% ${({ position }) => position && '- 30px'}); 
+    margin-top: 8px;
+    font-size: 12px; 
+    color: #333; 
+    white-space: nowrap;
+
+`;
+styled.div `
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items:  center;
+    top: 100%;
+    left: calc(${({ position }) => position}% ${({ position }) => position && '- 30px'});
+    margin-top: 8px; 
+    font-size: 12px;
+    color: #333;
+    white-space: nowrap; 
+
+`;
+const Number = styled.p `
+    font-family: 'Work Sans';
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 18.77px;
+    color: #444444;
+`;
+const TypeProgressText = styled.p `
+    font-family: 'Work Sans';
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 11.73px;
+`;
+
+export { CurrentIndicator, EndIndicator, IndicatorText, IndicatorTextCurrent, IndicatorTextInit, Number, ProgressBarColor, ProgressGoalBarContainer, StartIndicator, TextUP, TypeProgressText, WrapperProgressGoalBar };

package/dist/esm/src/components/DS/progressGoalBar/progressTexts.js

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const MESSAGES = {
+    reachedGoal: jsx("span", { children: "Este resultado atingiu a meta definida! \uD83C\uDF89" }),
+    progressExceeded: (jsxs("span", { children: ["Este resultado ", jsx("strong", { children: "superou a meta" }), " definida! \uD83C\uDF89"] })),
+    progressImproved: (jsxs("span", { children: ["Este ", jsx("strong", { children: "resultado evoluiu" }), ", mas ", jsx("strong", { children: "n\u00E3o atingiu" }), " a meta definida."] })),
+    progressNoResults: (jsxs("span", { children: ["Este desafio ", jsx("strong", { children: "n\u00E3o obteve resultados" }), " e ", jsx("strong", { children: "n\u00E3o atingiu" }), " a meta definida."] })),
+    progressNoGoal: (jsxs("span", { children: ["Este resultado ", jsx("strong", { children: "n\u00E3o atingiu" }), " a meta definida e ", jsx("strong", { children: "regrediu" }), " em rela\u00E7\u00E3o ao valor inicial"] })),
+    currentTextResult: jsx("span", { children: "RESULTADO" }),
+    currentTextInitAndResult: jsx("span", { children: "IN\u00CDCIO E RESULTADO" }),
+    currentTextInit: jsx("span", { children: "IN\u00CDCIO" }),
+    stabilizeExceedingText: jsx("span", { children: "IN\u00CDCIO E META" }),
+    textGoal: jsx("span", { children: "META E RESULTADO" }),
+    TextoGoalDefault: jsx("span", { children: "META" })
+};
+
+export { MESSAGES };