frst-components 0.37.0 → 0.38.0

package/dist/esm/src/components/global-menu/index.js

@@ -0,0 +1,181 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import '../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../theme/index.js';
+import { MenuContainer, MenuInner, HamburgerButton, WrapperLogo, WrapperMenu, WrapperRightInfo, WrapperIconNotification, WrapperIconNotificationText, WrapperIconNotificationMobile, Navigation, TextNotification, Help, TolltipTopbar, LanguageSelectorWrapper, LanguageTrigger, LanguageDropdown, LanguageOption, LanguageOptionDot, SubMenuContainer, MenuMobile as MenuMobile$1, ItemMenuMobile, footerMenuMobile, frstSocials, itemFrstSocials } from './globalMenuStyles.js';
+import { LanguageIcon } from '../../../public/customIcons/LanguageIcon.js';
+import { IconHamburgerMenu, FRSTLogo, IconNotification, HasNotificationIcon, HandWave, HelpIcon, BackArrow, ExitArrow, SiteIcon, LinkedinIcon, InstagramIcon, YoutubeIcon, SpotifyIcon, PodCastIcon } from '../../shared/icons.js';
+import FieldSearch from '../field-search-dropdown/index.js';
+import ItemGlobalMenu from '../item-menu-global/index.js';
+import DropdownProfileMenu from '../dropdown-profile-menu/index.js';
+import NotificationPopOver from '../FI/notificationPopOver/index.js';
+
+function GlobalMenu({ variant, menu, customMenu, user, search, notification, languages, languageSelected, onChangeLanguage, style, textNotification, onClickSite, onClickLinkedin, onClickInstagram, onClickYoutube, onClickSpotify, onClickPodCast, onClickProfileMenuText, onClickExit, profileMenuText, showSearchField, marginTopSubMenu, hiddenProfileMenu, onClickLogo, onClickMenuHamburger, showHelp, onClickHelp, onClickNavigation, showProfile = true, InputField, hideNotification, showNavigation, FrstIconFormatted }) {
+    const [valueSearch, setValueSearch] = useState(search.value);
+    const [valueListSearch, setValueListSearch] = useState(search.listEntry);
+    const [loadingSearch, setLoadingSearch] = useState(search.loading);
+    const [isCompact, setIsCompact] = useState(false);
+    const [isVisibleMenuMobile, setIsVisibleMenuMobile] = useState(false);
+    const [openNotification, setOpenNotification] = useState(false);
+    const [openNotificationMobile, setOpenNotificationMobile] = useState(false);
+    const [anchorNotification, setAnchorNotification] = useState(null);
+    const [onAreaPopOver, setOnAreaPopOver] = useState(false);
+    const [SubMenu, setSubMenu] = useState([]);
+    const [SelectedItem, setSelectedItem] = useState();
+    const [hasNewNotification, setHasNewNotification] = useState(false);
+    const [updatedNotificationList, setUpdatedNotificationList] = useState([]);
+    const [showTooltipHelp, setShowTooltipHelp] = useState(false);
+    const [showLanguageDropdown, setShowLanguageDropdown] = useState(false);
+    const languageDropdownRef = useRef(null);
+    useEffect(() => {
+        setHasNewNotification(!!notification?.hasNewNotification);
+    }, [notification, notification?.hasNewNotification]);
+    useEffect(() => {
+        setUpdatedNotificationList(notification?.notificationList);
+    }, [notification, notification?.notificationList]);
+    useEffect(() => {
+        setValueListSearch(search.listEntry);
+    }, [search.listEntry]);
+    useEffect(() => {
+        setLoadingSearch(search.isloading);
+    }, [search.loading]);
+    useEffect(() => {
+        function updateSize() {
+            setIsCompact(window.innerWidth < 1000);
+            setIsVisibleMenuMobile(false);
+        }
+        window.addEventListener('resize', updateSize);
+        updateSize();
+        return () => window.removeEventListener('resize', updateSize);
+    }, []);
+    useEffect(() => {
+        setValueSearch(search.value);
+        setValueListSearch(search.listEntry);
+        setLoadingSearch(search.loading);
+    }, [search]);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (languageDropdownRef.current && !languageDropdownRef.current.contains(event.target)) {
+                setShowLanguageDropdown(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    const languageLabels = {
+        'pt-BR': 'Português (PT-BR)',
+        'pt-PT': 'Português (PT-PT)',
+        'en-US': 'Inglês (EN)',
+        'es': 'Espanhol (ES)'
+    };
+    const languageShortLabels = {
+        'pt-BR': 'PT-BR',
+        'pt-PT': 'PT-PT',
+        'en-US': 'EN',
+        'es': 'ES'
+    };
+    const handleChangeValueSearch = (value) => {
+        setValueSearch(value);
+        search.onChange(value);
+    };
+    const handleCloseNotification = () => {
+        setOpenNotification(!openNotification);
+        setOpenNotificationMobile(!openNotificationMobile);
+    };
+    const handleOpenNotification = (event) => {
+        setOpenNotification(!openNotification);
+        setOpenNotificationMobile(!openNotificationMobile);
+        setAnchorNotification(event.currentTarget);
+        notification?.handleClickOpenPopOverNotification();
+    };
+    const onClickNotification = (event) => {
+        if (!onAreaPopOver) {
+            setOpenNotification(!openNotification);
+            setOpenNotificationMobile(!openNotificationMobile);
+            setAnchorNotification(event.currentTarget);
+        }
+    };
+    const handleClickItem = (item) => {
+        item.onClick();
+        setSelectedItem(item.id);
+        if (item.subMenu)
+            setSubMenu(item.subMenu);
+        else
+            setSubMenu([]);
+    };
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(Fragment, { children: [jsx(MenuMobile, { onClickExit: onClickExit, languageSelected: languageSelected, variant: variant || 'default', items: menu, isVisible: isVisibleMenuMobile, setVisible: (e) => setIsVisibleMenuMobile(e), onClickSite: onClickSite, onClickLinkedin: onClickLinkedin, onClickInstagram: onClickInstagram, onClickYoutube: onClickYoutube, onClickSpotify: onClickSpotify, onClickPodCast: onClickPodCast, customMenu: customMenu }), jsxs("div", { style: { width: '100%', display: 'flex', flexDirection: 'column' }, children: [jsx(MenuContainer, { "$variant": "default", style: style, children: jsxs(MenuInner, { children: [isCompact ? (jsx(HamburgerButton, { style: { marginLeft: 120 }, onClick: () => onClickMenuHamburger(), children: jsx(IconHamburgerMenu, {}) })) : (jsx(WrapperLogo, { onClick: () => onClickLogo(), children: FrstIconFormatted ? FrstIconFormatted : jsx(FRSTLogo, { height: "28", fill: FRSTTheme['colors'].primary1 }) })), jsx(WrapperMenu, { style: {
+                                            height: '100%',
+                                            alignItems: 'center',
+                                            justifyContent: InputField ? 'center' : undefined
+                                        }, children: showSearchField && (InputField ? (jsx(InputField, {})) : (jsx(FieldSearch, { variant: "LXP", value: valueSearch, onFilter: search.onFilter, onChange: (e) => handleChangeValueSearch(e.target.value), placeholder: search.label, loading: loadingSearch, textLoading: search.textLoading, fieldSearchIsOpen: true, setFieldSearchIsOpen: () => { }, isLabeledResult: search.isLabeledResult, listResults: search.isLabeledResult ? null : valueListSearch, labeledResultList: search.isLabeledResult ? valueListSearch : null, historicResults: search.historicResults, isMobileVersion: isCompact, hasOptionSeeAll: search.hasOptionSeeAll, seeAll: search.seeAll, style: { width: isCompact ? '180px' : '332px' } }))) }), jsxs(WrapperRightInfo, { children: [!isCompact && notification && !hideNotification && (jsxs(Fragment, { children: [customMenu?.map((item, index) => (jsx(ItemGlobalMenu, { label: item.label, variant: "LXP", type: "menu", pressed: item.id === SelectedItem || item.active, icon: item.iconBegin, handleOnClick: () => handleClickItem(item), customMenu: customMenu, style: {
+                                                            paddingRight: '10px',
+                                                            paddingLeft: '10px',
+                                                            height: '100%',
+                                                            flexDirection: 'inherit'
+                                                        } }, item.id ? item.id : index))), jsxs(WrapperIconNotification, { onClick: onClickNotification, children: [jsxs("span", { style: { display: 'flex', alignItems: 'center' }, onClick: handleOpenNotification, children: [jsx(IconNotification, { fill: FRSTTheme['colors'].shadeWhite }), hasNewNotification ? (jsx("div", { style: { position: 'relative', bottom: '5px', right: '10px' }, children: jsx(HasNotificationIcon, {}) })) : null, jsx(WrapperIconNotificationText, { children: textNotification })] }), jsx(NotificationPopOver, { handleClickMarkRead: notification.handleClickMarkRead, isOpen: openNotification, anchor: anchorNotification, textEmptyState: notification.textEmptyState, notificationList: updatedNotificationList, textMarkAllAsRead: notification.textMarkAllAsRead, textNotification: notification.textNotification, isMobile: false, setOnAreaPopOver: (e) => setOnAreaPopOver(e), textBack: notification.textBack, handleClickBack: () => handleCloseNotification(), textDeleteAll: notification.textDeleteAll, handleClickDeleteAll: notification.handleClickDeleteAll, isLoading: notification?.isLoading })] })] })), isCompact && notification && !hideNotification && (jsx(WrapperIconNotificationMobile, { onClick: onClickNotification, children: jsxs("span", { style: {
+                                                        display: 'inline-flex',
+                                                        justifyContent: 'flex-start',
+                                                        alignItems: 'center'
+                                                    }, children: [jsx(IconNotification, { fill: FRSTTheme['colors'].shadeWhite }), hasNewNotification ? (jsx("div", { style: { marginLeft: '-12px' }, children: jsx(HasNotificationIcon, {}) })) : null] }) })), jsx(DropdownProfileMenu, { variant: "LXP", user: user, profileMenuText: profileMenuText, handleProfileMenuClick: onClickProfileMenuText, menuItems: user && user.menuItems, isMobileVersion: isCompact, hiddenProfileMenu: hiddenProfileMenu, showProfile: showProfile, style: {
+                                                    marginLeft: isCompact ? '0px' : '5px',
+                                                    marginRight: isCompact ? '0px' : '5px'
+                                                } }), showNavigation && (jsxs(Navigation, { onClick: onClickNavigation, children: [jsx(HandWave, {}), jsx(TextNotification, { children: "Ajuda" })] })), showHelp && (jsxs(Help, { onClick: onClickHelp, onMouseEnter: () => setShowTooltipHelp(true), onMouseLeave: () => setShowTooltipHelp(false), children: [jsx(HelpIcon, {}), !isCompact && jsx(TextNotification, { children: "Suporte" })] })), showTooltipHelp && (jsx("div", { id: "cardAjuda", style: { position: 'relative' }, children: jsx(TolltipTopbar, { children: "Clique aqui para tirar suas d\u00FAvidas com o nosso suporte." }) })), languages && languages.length > 0 && (jsxs(LanguageSelectorWrapper, { ref: languageDropdownRef, children: [jsxs(LanguageTrigger, { onClick: () => setShowLanguageDropdown((prev) => !prev), children: [jsx(LanguageIcon, { fill: "#fff", width: "20", height: "20" }), !isCompact && (jsx("span", { children: languageShortLabels[languageSelected] || languageSelected }))] }), jsx(LanguageDropdown, { "$isOpen": showLanguageDropdown, children: languages.map((lang) => (jsxs(LanguageOption, { "$isSelected": lang === languageSelected, onClick: () => {
+                                                                onChangeLanguage && onChangeLanguage(lang);
+                                                                setShowLanguageDropdown(false);
+                                                            }, children: [jsx("span", { children: languageLabels[lang] || lang }), jsx(LanguageOptionDot, { "$isSelected": lang === languageSelected })] }, lang))) })] }))] })] }) }), SubMenu && SubMenu.length > 0 && (jsx(SubMenuContainer, { "$variant": "default", "$marginTop": marginTopSubMenu, style: style, children: jsx(MenuInner, { children: SubMenu.map((item, index) => (jsx(ItemGlobalMenu, { label: item.label, variant: "LXP", type: "submenu", handleOnClick: () => item.onClick('tes'), style: { paddingRight: '10px', paddingLeft: '10px' } }, item.id ? item.id : index))) }) }))] }), isCompact && openNotificationMobile && notification && (jsx(NotificationPopOver, { handleClickMarkRead: notification.handleClickMarkRead, isOpen: openNotificationMobile, anchor: anchorNotification, textEmptyState: notification.textEmptyState, notificationList: updatedNotificationList, textMarkAllAsRead: notification.textMarkAllAsRead, textNotification: notification.textNotification, isMobile: true, setOnAreaPopOver: (e) => setOnAreaPopOver(e), textBack: notification.textBack, handleClickBack: () => handleCloseNotification(), textDeleteAll: notification.textDeleteAll, handleClickDeleteAll: notification.handleClickDeleteAll, isLoading: notification?.isLoading }))] }) }));
+}
+function MenuMobile({ items, isVisible, setVisible, variant, languageSelected, onClickExit, onClickSite, onClickLinkedin, onClickInstagram, onClickYoutube, onClickSpotify, onClickPodCast, customMenu }) {
+    const [optionsSubMenu, setOptionsSubmenu] = useState({});
+    const [subMenuIsVisible, setSubMenuIsVisible] = useState(false);
+    const newOptionsSubMenu = (items) => {
+        setOptionsSubmenu(items);
+        setTimeout(() => setSubMenuIsVisible(true), 200);
+    };
+    return (jsxs(Fragment, { children: [jsx(SubMenuMobile, { onClickExit: onClickExit, items: optionsSubMenu, isVisible: subMenuIsVisible, setVisible: setSubMenuIsVisible, variant: variant, languageSelected: languageSelected, onClickSite: onClickSite, onClickLinkedin: onClickLinkedin, onClickInstagram: onClickInstagram, onClickYoutube: onClickYoutube, onClickSpotify: onClickSpotify, onClickPodCast: onClickPodCast, customMenu: customMenu }), jsx(MenuMobile$1, { "$isVisible": isVisible, children: variant === 'LXP' || variant === 'custom' ? (jsxs(Fragment, { children: [jsxs("div", { children: [jsx(ItemMenuMobile, { onClick: () => setVisible(false), children: jsxs("span", { children: [' ', jsx(BackArrow, { fill: "white" }), " \u00A0 ", languageSelected === 'en-US' ? 'Back' : 'Voltar'] }) }), items &&
+                                    items.length > 0 &&
+                                    items.map((item, index) => {
+                                        if (item.label == 'Criar conteúdo')
+                                            return;
+                                        if (item.onClick == null)
+                                            return (jsxs(ItemMenuMobile, { onClick: () => newOptionsSubMenu(item.subItens), children: ["\u00A0", item.label] }, index));
+                                        return (jsxs(ItemMenuMobile, { onClick: (e) => item.onClick(e), children: ["\u00A0", item.label] }, index));
+                                    }), jsx(ItemMenuMobile, { style: { borderBottom: 'none' }, onClick: () => onClickExit(), children: jsxs("span", { children: [' ', jsx(ExitArrow, { fill: "white" }), " \u00A0 ", languageSelected === 'en-US' ? 'Logout' : 'Sair'] }) })] }), jsxs(footerMenuMobile, { children: [jsx("span", { style: { marginTop: 24 }, children: languageSelected === 'en-US'
+                                        ? 'Visit our channel and social networks'
+                                        : 'Visite nossos canais e redes sociais' }), jsxs(frstSocials, { children: [jsxs(itemFrstSocials, { onClick: onClickSite, children: [' ', jsx(SiteIcon, {}), ' '] }), jsxs(itemFrstSocials, { onClick: onClickLinkedin, children: [' ', jsx(LinkedinIcon, {}), ' '] }), jsxs(itemFrstSocials, { onClick: onClickInstagram, children: [' ', jsx(InstagramIcon, {}), ' '] }), jsxs(itemFrstSocials, { onClick: onClickYoutube, children: [' ', jsx(YoutubeIcon, {}), ' '] }), jsxs(itemFrstSocials, { onClick: onClickSpotify, children: [' ', jsx(SpotifyIcon, {}), ' '] }), jsxs(itemFrstSocials, { onClick: onClickPodCast, children: [' ', jsx(PodCastIcon, {}), ' '] })] })] })] })) : (jsxs(Fragment, { children: [jsxs("div", { children: [jsx(ItemMenuMobile, { style: { paddingBottom: 32 }, onClick: () => setVisible(false), children: jsxs("span", { children: [' ', jsx(BackArrow, { fill: "white" }), " \u00A0 ", languageSelected === 'en-US' ? 'Back' : 'Voltar'] }) }), items &&
+                                    items.length > 0 &&
+                                    items.map((item, index) => {
+                                        if (item.label == 'Criar conteúdo')
+                                            return;
+                                        if (item.onClick == null)
+                                            return (jsxs(ItemMenuMobile, { onClick: () => newOptionsSubMenu(item.subItens), children: [item.iconBegin, "\u00A0", item.label] }, index));
+                                        return (jsxs(ItemMenuMobile, { onClick: (e) => item.onClick(e), children: [item.iconBegin, "\u00A0", item.label] }, index));
+                                    }), customMenu?.map((item, index) => (jsxs(ItemMenuMobile, { onClick: (e) => item.onClick(e), children: [jsx("span", { style: { marginRight: customMenu ? 2 : 0 }, children: item.iconBegin }), "\u00A0", item.label] }, index)))] }), jsxs(footerMenuMobile, { children: [jsx(ItemMenuMobile, { style: {}, onClick: () => onClickExit(), children: jsxs("span", { children: [' ', jsx(ExitArrow, { fill: "white" }), " \u00A0 ", languageSelected === 'en-US' ? 'Logout' : 'Sair'] }) }), jsx("span", { style: { marginTop: 24 }, children: languageSelected === 'en-US'
+                                        ? 'Visit our channel and social networks'
+                                        : 'Visite nossos canais e redes sociais' }), jsxs(frstSocials, { children: [jsxs(itemFrstSocials, { onClick: onClickSite, children: [' ', jsx(SiteIcon, {}), ' '] }), jsxs(itemFrstSocials, { onClick: onClickLinkedin, children: [' ', jsx(LinkedinIcon, {}), ' '] }), jsxs(itemFrstSocials, { onClick: onClickInstagram, children: [' ', jsx(InstagramIcon, {}), ' '] }), jsxs(itemFrstSocials, { onClick: onClickYoutube, children: [' ', jsx(YoutubeIcon, {}), ' '] }), jsxs(itemFrstSocials, { onClick: onClickSpotify, children: [' ', jsx(SpotifyIcon, {}), ' '] }), jsxs(itemFrstSocials, { onClick: onClickPodCast, children: [' ', jsx(PodCastIcon, {}), ' '] })] })] })] })) })] }));
+}
+function SubMenuMobile({ items, isVisible, setVisible, variant, languageSelected, onClickExit, onClickSite, onClickLinkedin, onClickInstagram, onClickYoutube, onClickSpotify, onClickPodCast, customMenu }) {
+    const [options, setOptions] = useState(items);
+    useEffect(() => {
+        setOptions(items);
+    }, [items]);
+    return (jsx(MenuMobile$1, { "$isVisible": isVisible, style: { zIndex: '10002' }, children: variant === 'LXP' ? (jsxs(Fragment, { children: [jsx("div", { children: options &&
+                        options.length > 0 &&
+                        options.map((item, index) => {
+                            if (item.label == 'Criar conteúdo')
+                                return;
+                            return (jsx(ItemMenuMobile, { onClick: (e) => item.onClick(e), children: item.label }, index));
+                        }) }), jsx(ItemMenuMobile, { onClick: () => setVisible(false), style: { borderTop: '1px solid #444' }, children: languageSelected === 'en-US' ? 'Back' : 'Voltar' })] })) : (jsxs(Fragment, { children: [jsxs("div", { children: [jsx(ItemMenuMobile, { style: { paddingBottom: 32 }, onClick: () => setVisible(false), children: jsxs("span", { children: [' ', jsx(BackArrow, { fill: "white" }), " \u00A0 ", languageSelected === 'en-US' ? 'Back' : 'Voltar'] }) }), options &&
+                            options.length > 0 &&
+                            options.map((item, index) => {
+                                if (item.label == 'Criar conteúdo')
+                                    return;
+                                if (item.onClick == null)
+                                    return (jsxs(ItemMenuMobile, { onClick: (e) => item.onClick(e), children: [item.iconBegin, "\u00A0", item.label] }, index));
+                                return (jsxs(ItemMenuMobile, { onClick: (e) => item.onClick(e), children: [item.iconBegin, "\u00A0", item.label] }, index));
+                            }), customMenu?.map((item, index) => (jsxs(ItemMenuMobile, { onClick: (e) => item.onClick(e), children: [item.iconBegin, "\u00A0", item.label] }, index)))] }), jsxs(footerMenuMobile, { children: [jsx(ItemMenuMobile, { style: {}, onClick: () => onClickExit(), children: jsxs("span", { children: [' ', jsx(ExitArrow, { fill: "white" }), " \u00A0 ", languageSelected === 'en-US' ? 'Logout' : 'Sair'] }) }), jsx("span", { style: { marginTop: 24 }, children: languageSelected === 'en-US'
+                                ? 'Visit our channel and social networks'
+                                : 'Visite nossos canais e redes sociais' }), jsxs(frstSocials, { children: [jsxs(itemFrstSocials, { onClick: onClickSite, children: [' ', jsx(SiteIcon, {}), ' '] }), jsxs(itemFrstSocials, { onClick: onClickLinkedin, children: [' ', jsx(LinkedinIcon, {}), ' '] }), jsxs(itemFrstSocials, { onClick: onClickInstagram, children: [' ', jsx(InstagramIcon, {}), ' '] }), jsxs(itemFrstSocials, { onClick: onClickYoutube, children: [' ', jsx(YoutubeIcon, {}), ' '] }), jsxs(itemFrstSocials, { onClick: onClickSpotify, children: [' ', jsx(SpotifyIcon, {}), ' '] }), jsxs(itemFrstSocials, { onClick: onClickPodCast, children: [' ', jsx(PodCastIcon, {}), ' '] })] })] })] })) }));
+}
+
+export { MenuMobile, SubMenuMobile, GlobalMenu as default };

package/dist/esm/src/components/header-improvement-idea/headerImprovementIdeaStyles.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div `
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+`;
+const WrapperActions = styled.div `
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    margin-left: 12px;
+`;
+
+export { Wrapper, WrapperActions };

package/dist/esm/src/components/header-improvement-idea/index.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import '../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../theme/index.js';
+import { Wrapper, WrapperActions } from './headerImprovementIdeaStyles.js';
+import HeaderUser from '../header-user/index.js';
+import MenuMore from '../menu-more/index.js';
+import CounterLike from '../counter-like/index.js';
+
+function HeaderImprovementIdea({ user, like, menuMore, styles }) {
+    const [userState, setUserState] = useState(user);
+    const [likeState, setLikeState] = useState(like);
+    const [menuMoreState, setMenuMoreState] = useState(menuMore);
+    useEffect(() => {
+        setUserState(user);
+        setLikeState(like);
+        setMenuMoreState(menuMore);
+    }, [user, like, menuMore]);
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(Wrapper, { style: { ...styles }, children: [jsx(HeaderUser, { avatar: user?.avatar, name: user?.name, text: user?.text, onClick: user?.onClick }), jsxs(WrapperActions, { children: [jsx(CounterLike, { total: like?.total, onClick: () => like?.onClick() }), menuMore && menuMore?.length > 0 &&
+                            jsx(MenuMore, { options: menuMore })] })] }) }));
+}
+
+export { HeaderImprovementIdea as default };

package/dist/esm/src/components/header-user/headerUserStyles.js

@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div `
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    user-select: none;
+`;
+const Name = styled.div `
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: ${({ $large }) => $large ? '20px' : '16px'};
+    line-height: 110%;
+
+    color:  ${({ theme }) => theme.colors.neutralsGrey1};
+`;
+const Text = styled.div `
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: ${({ $large }) => $large ? '16px' : '12px'};
+    line-height: 16px;
+
+    color:  ${({ theme }) => theme.colors.neutralsGrey3};
+`;
+const WrapperText = styled.div `
+    display: flex;
+    flex-direction: column;
+    width: fit-content;
+`;
+const WrapperHandle = styled.div `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: ${({ $large }) => $large ? '32px' : '20px'};
+    width: ${({ $large }) => $large ? '32px' : '20px'};
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.5);
+    margin-left: 8px;
+    margin-bottom: 3px;
+    cursor: pointer;
+    padding: ${({ $large }) => $large ? '7px' : '5px'};
+
+    &:hover{
+        background: rgba(255, 255, 255, 0.7);
+    }
+`;
+
+export { Name, Text, Wrapper, WrapperHandle, WrapperText };

package/dist/esm/src/components/header-user/index.js

@@ -0,0 +1,13 @@
+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 { Wrapper, WrapperText, Name, WrapperHandle, Text } from './headerUserStyles.js';
+import Avatar from '../avatar/index.js';
+import { EditIcon, TrashIconNew } from '../../shared/icons.js';
+
+function HeaderUser({ avatar, name, text, onClick, large, showHandleButtons, onClickEdit, onClickDelete, }) {
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(Wrapper, { onClick: () => !!(onClick) ? onClick() : {}, children: [jsx(Avatar, { size: large ? '56px' : '32px', src: avatar?.src, alt: avatar?.alt }), jsxs(WrapperText, { style: { justifyContent: 'space-around' }, children: [jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: [jsx(Name, { "$large": large, children: name }), showHandleButtons ? jsxs(Fragment, { children: [jsx(WrapperHandle, { onClick: () => onClickEdit ? onClickEdit() : {}, "$large": large, children: jsx(EditIcon, { fill: '#444444' }) }), jsx(WrapperHandle, { onClick: () => onClickDelete ? onClickDelete() : {}, "$large": large, children: jsx(TrashIconNew, { fill: '#444444' }) })] }) : null] }), jsx(Text, { "$large": large, children: text })] })] }) }));
+}
+
+export { HeaderUser as default };

package/dist/esm/src/components/headerChallenge/headerChallengeStyle.js

@@ -0,0 +1,104 @@
+import styled from 'styled-components';
+
+const Div = styled.div `
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 300px;
+    background-color: #fff;
+    padding: 50px 50px 50px 124px;
+    margin: 0;
+    background-image: ${props => `url(${props.desktopBackgroundProps})`};
+    background-position: bottom 0px right 0px; 
+    background-repeat: no-repeat;
+    h1 {
+        font-size: 3.25rem;
+        line-height: 67.6px;
+        font-weight: 700;
+        background-image: linear-gradient(to right, rgb(255, 98, 0), rgb(255, 176, 0));
+        background: linear-gradient(-45deg, rgb(255, 98, 0), rgb(255, 176, 0), rgb(255, 98, 0), rgb(255, 176, 0));
+	    background-size: 400% 400%;
+	    animation: gradient 10s ease infinite;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        @keyframes gradient {
+            0% {
+                background-position: 0% 50%;
+            }
+            50% {
+                background-position: 100% 50%;
+            }
+            100% {
+                background-position: 0% 50%;
+            }
+        }
+    }
+    @media (max-width: 1880px) {
+        background-position: bottom 0px right -220px;
+        h1 {
+            font-size: 3.0rem;
+            line-height: 60px;
+            }
+    }
+    @media (max-width: 1650px) {
+        padding: 50px 50px 50px 130px;
+        background-position: bottom 0px right -280px; 
+        h1 {
+            font-size: 2.4rem;
+            line-height: 50px;
+        }
+    }
+    @media (max-width: 1400px) {
+        padding: 50px 50px 50px 40px;
+    }
+    @media (max-width: 1350px) {
+        height: 250px;
+        background-size:contain;
+        background-position: bottom 0px right -220px; 
+    }
+    @media (max-width: 1230px) {
+        background-size:contain;
+        background-position: bottom 0px right -250px; 
+        h1 {
+           font-size: 1.8rem;
+           line-height: 36px;
+        }
+    }
+    @media (max-width: 1100px) {
+        height: 200px;
+        background-size:contain;
+        background-position: bottom 0px right -220px;
+    }
+    @media (max-width: 860px) {
+        background-position: bottom 0px right -250px;
+        h1 {
+           font-size: 1.4rem;
+           line-height: 30px;
+        }
+    }
+    @media (max-width: 750px) {
+        background-image:  ${props => `url(${props.mobileBackgroundProps})`};
+        background-position: top -20px right 0px;
+        h1 {
+           max-width: 345px;
+           font-size: 1.5rem;
+           line-height: 31.2px;
+        }
+    }
+    @media (max-width: 520px) {
+        padding: 10px;
+        background-size:unset;
+        height: 200px;
+        h1 {
+           max-width: 260px;
+           font-size: 16px;
+           line-height: 21.11px;
+        }
+    }
+    @media (max-width: 410px) {
+        background-position: top 0px right -20px;
+        height: 180px
+    }
+`;
+
+export { Div };

package/dist/esm/src/components/headerChallenge/index.js

@@ -0,0 +1,9 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '../../shared/global.css.js';
+import { Div } from './headerChallengeStyle.js';
+
+function HeaderChallenge({ firstLine, secondLine, desktopBackground, mobileBackground }) {
+    return (jsx(Div, { desktopBackgroundProps: desktopBackground, mobileBackgroundProps: mobileBackground, children: jsxs("h1", { children: [firstLine, jsx("br", {}), " ", secondLine] }) }));
+}
+
+export { HeaderChallenge as default };

package/dist/esm/src/components/hypothesisComponent/hypothesisComponent.style.js

@@ -0,0 +1,220 @@
+import styled, { css } from 'styled-components';
+
+const MainContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  color: #222222;
+`;
+const Container = styled.div `
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-family: PT Sans;
+  font-size: 14px;
+  border-radius: 8px;
+  padding: 0 0 0 16px;
+  min-height: 52px;
+
+  ${({ type }) => {
+    switch (type) {
+        case 'prioritize':
+            return css `
+          background: #fdae15;
+        `;
+        case 'raised':
+            return css `
+          background: #f8d784;
+        `;
+        case 'suggested':
+            return css `
+          background: #cddaef;
+        `;
+        default:
+            return '';
+    }
+}}
+`;
+const Title = styled.span `
+  font-weight: 700;
+  white-space: nowrap;
+`;
+styled.span `
+  font-weight: 700;
+`;
+const Separator = styled.div `
+  font-weight: bold;
+  margin: 0 8px;
+`;
+const Description = styled.span `
+  font-weight: 400;
+  padding: 8px 0 8px;
+  width: 100%;
+`;
+const SplitContainer = styled.div `
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+`;
+const SplitContainerDescription = styled.div `
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  height: 100%;
+  width: 100%
+`;
+styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+`;
+styled.div `
+  position: absolute;
+`;
+const VoteButtonContainer = styled.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 150px;
+  background: #f9cd5e;
+  cursor: pointer;
+  ${({ height }) => height > 0 &&
+    css `
+      height: ${height}px;
+    `}
+
+  ${({ type }) => {
+    switch (type) {
+        case 'prioritize':
+            return css `
+          background: #dc9100;
+        `;
+        case 'raised':
+            return css `
+          background: #f9cd5e;
+        `;
+        case 'suggested':
+            return css `
+          background: #a5c3f2;
+        `;
+        default:
+            return '';
+    }
+}}
+    ${({ modeDelete }) => modeDelete &&
+    css `
+      background: inherit;
+    `}
+    border-radius:0 8px 8px 0;
+  padding: 0 16px 0 16px;
+  min-height: 52px;
+  margin-left: 4px;
+`;
+const VoteCount = styled.span `
+  display: flex;
+  align-items: center;
+  height: 100%;
+  gap: 4px;
+  white-space: nowrap;
+  width: auto;
+`;
+const VoteButton = styled.p `
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  height: 100%;
+  width: 100%;
+  font-family: PT Sans;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 18.12px;
+  text-align: left;
+  color: #444444;
+  white-space: nowrap;
+  width: auto;
+`;
+const VoteContent = styled.div `
+  display: flex;
+  div {
+    flex-direction: row-reverse;
+    display: flex;
+    :nth-child(1n) {
+      margin-left: -8px;
+    }
+  }
+`;
+const ImageContent = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: solid 2.5px #fff;
+  color: #ffffff;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`;
+const VoteListContainer = styled.div `
+  position: absolute;
+  top: calc(100% + 1px);
+  right: 0;
+  width: 225px;
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 5px 0px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  z-index: 1999;
+  display: ${({ showVotes }) => (showVotes ? 'block' : 'none')};
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  box-shadow: 0px 15px 20px 0px #22222226;
+`;
+const VoteListItem = styled.div `
+  cursor: pointer;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  ${({ lastVote }) => lastVote === false && 'border-bottom: solid 1px #ccc;'}
+`;
+styled.div `
+  width: 100%;
+  h2{
+    margin-bottom: 0.4rem;
+
+  }
+  p{
+    font-weight: 400;
+    margin-bottom: 1rem;
+
+  }
+`;
+styled.div `
+  width: 100%;
+  border: solid 0.2px #E0E0E0;
+  margin-bottom: 1rem;
+
+`;
+styled.div `
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+  button{
+    margin-left: 1rem;
+  }
+
+`;
+
+export { Container, Description, ImageContent, MainContainer, Separator, SplitContainer, SplitContainerDescription, Title, VoteButton, VoteButtonContainer, VoteContent, VoteCount, VoteListContainer, VoteListItem };