tycho-components 0.16.5 → 0.17.1

package/dist/AppReplaceAll/AppReplaceAll.d.ts

@@ -0,0 +1,2 @@
+import './style.scss';
+export default function AppReplaceAll(): import("react/jsx-runtime").JSX.Element;

package/dist/{Header/HeaderReplaceAll/HeaderReplaceAll.js → AppReplaceAll/AppReplaceAll.js}

@@ -1,13 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, Popover } from '@mui/material';
+import { Popover } from '@mui/material';
 import { useState } from 'react';
+import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { IconButton, getCurrentInput, getCurrentOnChange, } from 'tycho-storybook';
+import { Button, IconButton, TextField, getCurrentInput, getCurrentOnChange, } from 'tycho-storybook';
 import './style.scss';
-export default function HeaderReplaceAll() {
+export default function AppReplaceAll() {
     const { t } = useTranslation('header');
-    const [findValue, setFindValue] = useState('');
-    const [replaceValue, setReplaceValue] = useState('');
+    const replaceForm = useForm({
+        defaultValues: { find: '', replace: '' },
+    });
     const [anchorEl, setAnchorEl] = useState(null);
     const replaceAll = (str, find, replace) => {
         // Escape special regex characters in 'find'
@@ -16,6 +18,7 @@ export default function HeaderReplaceAll() {
         return str.replace(regex, replace);
     };
     const handleReplaceAll = () => {
+        const { find: findValue, replace: replaceValue } = replaceForm.getValues();
         const input = getCurrentInput();
         const onChange = getCurrentOnChange();
         if (input && onChange) {
@@ -39,5 +42,5 @@ export default function HeaderReplaceAll() {
                 }, transformOrigin: {
                     vertical: 'top',
                     horizontal: 'left',
-                }, className: "popover-replace", children: _jsxs("div", { className: "popover-body", children: [_jsx("input", { type: "text", placeholder: t('replace.find.placeholder'), value: findValue, onChange: (e) => setFindValue(e.target.value) }), _jsx("input", { type: "text", placeholder: t('replace.placeholder'), value: replaceValue, onChange: (e) => setReplaceValue(e.target.value) }), _jsx(Button, { size: "small", onClick: handleReplaceAll, children: "confirm" })] }) })] }));
+                }, className: "popover-replace", children: _jsxs("div", { className: "popover-body", children: [_jsx(TextField, { label: t('replace.find.placeholder'), attr: "find", createdForm: replaceForm, showEndAdornment: false, placeholder: t('replace.find.placeholder'), width: "12vw" }), _jsx(TextField, { label: t('replace.placeholder'), attr: "replace", createdForm: replaceForm, showEndAdornment: false, placeholder: t('replace.placeholder'), width: "12vw" }), _jsx(Button, { text: t('common:button.confirm'), size: "small", onClick: handleReplaceAll })] }) })] }));
 }

package/dist/AppReplaceAll/index.d.ts

@@ -0,0 +1,2 @@
+import AppReplaceAll from './AppReplaceAll';
+export default AppReplaceAll;

package/dist/AppReplaceAll/index.js

@@ -0,0 +1,2 @@
+import AppReplaceAll from './AppReplaceAll';
+export default AppReplaceAll;

package/dist/AppReplaceAll/style.scss

@@ -0,0 +1,11 @@
+.popover-replace {
+  width: 16vw !important;
+
+  .popover-body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 8px;
+    padding: 8px;
+  }
+}

package/dist/Comments/HeaderNotifications/HeaderNotifications.d.ts

@@ -2,6 +2,7 @@ import './style.scss';
 type Props = {
     uid: string;
     mode: 'lexicon' | 'corpus' | 'parser';
+    mobile?: boolean;
 };
-export default function HeaderNotifications({ uid, mode }: Props): import("react/jsx-runtime").JSX.Element;
+export default function HeaderNotifications({ uid, mode, mobile }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Comments/HeaderNotifications/HeaderNotifications.js

@@ -6,7 +6,7 @@ import { Avatar, IconButton } from 'tycho-storybook';
 import DateUtils from '../../functions/DateUtils';
 import CommentService from '../types/CommentService';
 import './style.scss';
-export default function HeaderNotifications({ uid, mode }) {
+export default function HeaderNotifications({ uid, mode, mobile }) {
     const navigate = useNavigate();
     const { t } = useTranslation('comments');
     const [open, setOpen] = useState(false);
@@ -31,7 +31,7 @@ export default function HeaderNotifications({ uid, mode }) {
     useEffect(() => {
         load();
     }, [uid, tab]);
-    return (_jsxs("div", { className: "ds-dropdown-container notifications-container", children: [_jsx(IconButton, { name: "notifications_active", className: comments && comments.length > 0 ? 'shake' : '', size: "medium", onClick: () => setOpen(!open) }), open && (_jsx("div", { className: "ds-dropdown-list", children: _jsxs("div", { className: "notifications-panel", children: [_jsxs("div", { className: "header", children: [_jsx("span", { children: t('notification.title') }), _jsx(IconButton, { name: "close", size: "small", mode: "ghost", onClick: () => setOpen(false) })] }), _jsxs("div", { className: "tabs", children: [_jsxs("button", { className: tab === 'unread' ? 'active-tab' : '', onClick: () => setTab('unread'), children: [t('notification.unread'), " (", comments?.length || 0, ")"] }), _jsx("button", { className: tab === 'read' ? 'active-tab' : '', onClick: () => setTab('read'), children: t('notification.all') })] }), _jsxs("div", { className: "content", children: [notifications &&
+    return (_jsxs("div", { className: "ds-dropdown-container notifications-container", children: [_jsx(IconButton, { name: "notifications_active", className: comments && comments.length > 0 ? 'shake' : '', size: "medium", onClick: () => setOpen(!open), mode: mobile ? 'outlined' : 'filled' }), open && (_jsx("div", { className: "ds-dropdown-list", children: _jsxs("div", { className: "notifications-panel", children: [_jsxs("div", { className: "header", children: [_jsx("span", { children: t('notification.title') }), _jsx(IconButton, { name: "close", size: "small", mode: "ghost", onClick: () => setOpen(false) })] }), _jsxs("div", { className: "tabs", children: [_jsxs("button", { className: tab === 'unread' ? 'active-tab' : '', onClick: () => setTab('unread'), children: [t('notification.unread'), " (", comments?.length || 0, ")"] }), _jsx("button", { className: tab === 'read' ? 'active-tab' : '', onClick: () => setTab('read'), children: t('notification.all') })] }), _jsxs("div", { className: "content", children: [notifications &&
                                     notifications.map((not, idx) => (_jsxs("div", { className: "item", onClick: () => handleOpen(not), children: [_jsx(Avatar, { src: not.picture, size: "small" }), _jsxs("div", { className: "message", children: [_jsx("span", { className: "text", children: _jsx(Trans, { t: t, i18nKey: "notification.text", values: {
                                                                 user: not.name,
                                                                 entry: not.keywords ? not.keywords['entry'] : '',

package/dist/Header/Header.d.ts

@@ -5,7 +5,6 @@ type Props = {
     redirect?: string;
     autoload?: boolean;
     hideKeyboard?: boolean;
-    hideReplaceAll?: boolean;
     parser?: boolean;
     customHeader?: React.ReactNode;
     notifications?: {
@@ -20,5 +19,5 @@ type Props = {
     helpActions?: HelpAction[];
     useOpenCorpora?: boolean;
 };
-export default function Header({ tool, redirect, autoload, hideKeyboard, hideReplaceAll, customHeader, notifications, keyboardLayout, navigateHome, navigateCorpora, navigateLogout, navigateNotLogged, helpActions, useOpenCorpora, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function Header({ tool, redirect, autoload, hideKeyboard, customHeader, notifications, keyboardLayout, navigateHome, navigateCorpora, navigateLogout, navigateNotLogged, helpActions, useOpenCorpora, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Header/Header.js

@@ -1,28 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cx from 'classnames';
-import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { IconButton } from 'tycho-storybook';
-import HeaderNotifications from '../Comments/HeaderNotifications';
-import LanguageSelector from '../LanguageSelector';
-import VirtualKeyboard from '../VirtualKeyboard';
-import { useCorpusUtils } from '../configs/useCorpusUtils';
-import { useLoggedUtils } from '../configs/useLoggedUtils';
 import HeaderApps from './HeaderApps';
+import HeaderButtons from './HeaderButtons';
 import HeaderCorpora from './HeaderCorpora/HeaderCorpora';
-import HeaderReplaceAll from './HeaderReplaceAll';
 import HeaderUser from './HeaderUser';
-import HelpButton from './HelpButton';
 import './styles.scss';
-export default function Header({ tool, redirect, autoload, hideKeyboard, hideReplaceAll, customHeader, notifications, keyboardLayout, navigateHome, navigateCorpora, navigateLogout, navigateNotLogged = () => {
+export default function Header({ tool, redirect, autoload, hideKeyboard, customHeader, notifications, keyboardLayout, navigateHome, navigateCorpora, navigateLogout, navigateNotLogged = () => {
     location.href = '/auth';
 }, helpActions, useOpenCorpora = true, }) {
     const { t } = useTranslation('header');
-    const { getCorpus } = useCorpusUtils();
-    const { isLogged } = useLoggedUtils();
-    const [openKeyboard, setOpenKeyboard] = useState(false);
     const homeTextsClass = cx('app-title', {
         pointer: navigateHome !== undefined,
     });
-    return (_jsxs("div", { className: "ds-header", children: [_jsxs("div", { className: "header-left", children: [_jsx(HeaderApps, {}), _jsxs("div", { className: homeTextsClass, onClick: () => navigateHome && navigateHome(), children: [_jsx("span", { className: "title", children: t('label.platform') }), _jsx("span", { className: "subtitle", children: tool })] })] }), _jsx("div", { className: "header-center", children: customHeader ? (customHeader) : (_jsx(HeaderCorpora, { redirect: redirect, autoload: autoload, navigateCorpora: navigateCorpora, useOpenCorpora: useOpenCorpora })) }), _jsxs("div", { className: "header-right", children: [!hideReplaceAll && _jsx(HeaderReplaceAll, {}), !hideKeyboard && (_jsx(IconButton, { onClick: () => setOpenKeyboard(!openKeyboard), name: "keyboard", size: "medium", title: t('tooltip.keyboard') })), _jsx(HelpButton, { helpActions: helpActions }), notifications && isLogged() && (_jsx(HeaderNotifications, { uid: notifications.ref, mode: notifications.mode })), _jsx(LanguageSelector, {}), _jsx(HeaderUser, { navigateLogout: navigateLogout, navigateNotLogged: navigateNotLogged })] }), openKeyboard && (_jsx(VirtualKeyboard, { onClose: () => setOpenKeyboard(false), closeLabel: t('button.close'), defaultLayout: keyboardLayout || getCorpus().keyboardLayout || 'english' }))] }));
+    return (_jsxs("div", { className: "ds-header", children: [_jsxs("div", { className: "header-left", children: [_jsx(HeaderApps, { navigateLogout: navigateLogout, navigateNotLogged: navigateNotLogged, hideKeyboard: hideKeyboard, notifications: notifications, keyboardLayout: keyboardLayout, helpActions: helpActions }), _jsxs("div", { className: homeTextsClass, onClick: () => navigateHome && navigateHome(), children: [_jsx("span", { className: "title", children: t('label.platform') }), _jsx("span", { className: "subtitle", children: tool })] }), _jsx("div", { className: "header-corpus", children: customHeader ? (customHeader) : (_jsx(HeaderCorpora, { redirect: redirect, autoload: autoload, navigateCorpora: navigateCorpora, useOpenCorpora: useOpenCorpora })) })] }), _jsxs("div", { className: "header-right", children: [_jsx(HeaderButtons, { hideKeyboard: hideKeyboard, notifications: notifications, keyboardLayout: keyboardLayout, helpActions: helpActions }), _jsx(HeaderUser, { navigateLogout: navigateLogout, navigateNotLogged: navigateNotLogged })] })] }));
 }

package/dist/Header/HeaderApps/HeaderApps.d.ts

@@ -1,2 +1,15 @@
+import { HelpAction } from '../HelpButton/HelpButton';
 import './style.scss';
-export default function HeaderApps(): import("react/jsx-runtime").JSX.Element;
+type Props = {
+    navigateLogout?: () => void;
+    navigateNotLogged: () => void;
+    hideKeyboard?: boolean;
+    notifications?: {
+        mode: 'corpus' | 'parser' | 'lexicon';
+        ref: string;
+    };
+    keyboardLayout?: string;
+    helpActions?: HelpAction[];
+};
+export default function HeaderApps({ navigateLogout, navigateNotLogged, hideKeyboard, notifications, keyboardLayout, helpActions, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Header/HeaderApps/HeaderApps.js

@@ -1,14 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Drawer } from '@mui/material';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Icon, IconButton, Tag } from 'tycho-storybook';
+import { Icon, IconButton, Tag } from 'tycho-storybook';
 import { useCorpusUtils } from '../../configs/useCorpusUtils';
 import { useLoggedUtils } from '../../configs/useLoggedUtils';
+import HeaderButtons from '../HeaderButtons';
+import HeaderUser from '../HeaderUser';
 import { AvailableApps } from '../types/App';
 import logo from './logo.png';
+import youtube from './youtube.png';
 import './style.scss';
-export default function HeaderApps() {
+export default function HeaderApps({ navigateLogout, navigateNotLogged, hideKeyboard, notifications, keyboardLayout, helpActions, }) {
     const { t } = useTranslation('header-app');
     const { getCorpus, hasCorpus } = useCorpusUtils();
     const { hasLexiconAccess, hasParserAccess, isAdminOfAnyCorpus, isLogged } = useLoggedUtils();
@@ -34,15 +37,24 @@ export default function HeaderApps() {
             return null;
         if (item.parser && !hasParserAccess())
             return null;
-        return (_jsxs("div", { className: "item", title: t(`${item.code}.desc`), children: [item.icon && (_jsx("div", { className: "icon", children: _jsx(Icon, { name: item.icon }) })), item.image && _jsx("img", { src: item.image }), _jsxs("div", { className: "texts", children: [_jsx("span", { className: "label", children: t(`${item.code}.name`) }), _jsx("span", { className: "sublabel", children: t(`${item.code}.desc`) })] }), _jsxs("div", { className: "options", children: [item.visibility && (_jsx(Tag, { text: t(`common:label.${item.visibility}`), size: "small", color: "green" })), item.external ? (_jsx(Button, { text: t('common:button.open'), size: "x-small", mode: "tonal", icon: "open_in_new", onClick: () => window.open(item.external, '_blank') })) : (_jsxs(_Fragment, { children: [_jsx(Button, { text: t('common:button.open'), size: "x-small", mode: "tonal", onClick: () => goto(item, false) }), _jsx(IconButton, { name: "open_in_new", size: "x-small", className: "icon-open", mode: "tonal", onClick: () => goto(item, true) })] }))] })] }, idx.valueOf()));
+        return (_jsxs("div", { className: "item", title: t(`${item.code}.desc`), onClick: () => goto(item, item.external ? true : false), children: [item.icon && _jsx(Icon, { name: item.icon, size: "medium" }), item.image && _jsx("img", { src: item.image }), _jsx("span", { className: "title-app", children: t(`${item.code}.name`) }), _jsxs("div", { className: "options", children: [item.visibility && (_jsx(Tag, { text: t(`common:label.${item.visibility}`), size: "small", color: "green", className: "d-none" })), _jsx(IconButton, { name: "open_in_new", size: "x-small", className: "icon-open", mode: "ghost", onClick: (e) => {
+                                e.stopPropagation();
+                                goto(item, true);
+                            }, title: t('label.open.tab') })] })] }, idx.valueOf()));
     };
-    return (_jsxs("div", { className: "header-apps-container", children: [_jsx(IconButton, { name: "apps", className: "icon-apps", size: "large", onClick: () => setOpen(!open), filledIcon: true }), open && (_jsxs(Drawer, { anchor: "left", open: true, onClose: () => setOpen(false), className: "offcanvas-apps", children: [_jsxs("div", { className: "header", children: [_jsx("span", { className: "label", children: t('header:label.platform') }), _jsx(IconButton, { name: "close", size: "x-small", mode: "ghost", onClick: () => setOpen(false) })] }), _jsxs("div", { className: "body", children: [_jsx("div", { className: "title", children: t('label.tools') }), AvailableApps.map((item, idx) => renderItem(item, idx))] }), _jsxs("div", { className: "footer", children: [_jsx("div", { className: "title", children: t('label.quick') }), quickAccess.map((item, idx) => renderItem(item, idx))] })] }))] }));
+    return (_jsxs("div", { className: "header-apps-container", children: [_jsx(IconButton, { name: "apps", className: "icon-apps", size: "large", onClick: () => setOpen(!open), filledIcon: true }), open && (_jsxs(Drawer, { anchor: "left", open: true, onClose: () => setOpen(false), className: "offcanvas-apps", children: [_jsxs("div", { className: "header", children: [_jsx(IconButton, { name: "close", size: "medium", mode: "ghost", iconSize: "medium", onClick: () => setOpen(false) }), _jsx("span", { className: "header-apps-title", children: t('header:label.platform.complete') }), _jsx("div", { className: "header-profile-apps", children: _jsx(HeaderUser, { navigateLogout: navigateLogout, navigateNotLogged: navigateNotLogged }) })] }), _jsxs("div", { className: "body", children: [_jsx("div", { className: "title", children: t('label.tools') }), AvailableApps.map((item, idx) => renderItem(item, idx)), _jsx("div", { className: "title", children: t('label.quick') }), resources.map((item, idx) => renderItem(item, idx))] }), _jsx("div", { className: "footer", children: _jsx("div", { className: "header-apps-buttons", children: _jsx(HeaderButtons, { hideKeyboard: hideKeyboard, notifications: notifications, keyboardLayout: keyboardLayout, helpActions: helpActions, mobile: true }) }) })] }))] }));
 }
-const quickAccess = [
+const resources = [
     {
         code: 'platform',
         image: logo,
         visibility: 'public',
         external: 'https://www.tycho.iel.unicamp.br',
     },
+    {
+        code: 'youtube',
+        image: youtube,
+        visibility: 'public',
+        external: 'https://www.youtube.com/@tychoplatform',
+    },
 ];

package/dist/Header/HeaderApps/style.scss

@@ -1,42 +1,44 @@
 .offcanvas-apps {
   border: 1px solid var(--border-subtle-1);
   background-color: var(--background-default);
-  width: 26vw;
+  width: 16vw;
 
   > .MuiPaper-root {
-    width: 26vw;
+    width: 16vw;
 
     > .header {
       display: flex;
       align-items: center;
-      border-bottom: 1px solid var(--border-subtle-1);
-      padding: 16px;
+      padding: 8px 16px;
+      gap: 16px;
 
-      > .label {
+      > .header-apps-title {
         @include label-large-1;
         color: var(--text-primary);
       }
 
-      > .ds-icon-button {
-        margin-left: auto;
+      .header-profile-apps {
+        display: none;
       }
     }
 
-    > .body,
-    .footer {
-      padding: var(--spacing-250) 0;
+    > .body {
+      > .header-apps-buttons {
+        display: none;
+      }
 
       > .title {
         @include tag-medium-1;
         color: var(--text-tertiary);
-        padding: 0px var(--spacing-250) var(--spacing-150);
+        padding: 16px;
+        border-top: 1px solid var(--border-subtle-1);
       }
 
       > .item {
         display: flex;
         align-items: center;
-        gap: 8px;
-        padding: var(--spacing-100) var(--spacing-250);
+        gap: 24px;
+        padding: 8px 20px;
         cursor: pointer;
 
         &:hover {
@@ -57,30 +59,13 @@
         }
 
         > img {
-          width: 40px;
-          height: 40px;
+          width: 32px;
+          height: 32px;
         }
 
-        > .texts {
-          display: flex;
-          flex-direction: column;
-          gap: 4px;
-
-          > .label {
-            @include label-medium-2;
-            color: var(--text-primary);
-          }
-
-          > .sublabel {
-            @include helper-medium-1;
-            color: var(--text-secondary);
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: inline-block;
-            max-width: 12vw;
-            line-height: 1.2;
-          }
+        > .title-app {
+          @include label-medium-1;
+          color: var(--text-primary);
         }
 
         > .options {
@@ -99,51 +84,75 @@
 
     > .footer {
       border-top: 1px solid var(--border-subtle-1);
+      display: none;
     }
   }
 }
 
-@media (max-width: 1200px) {
-  .offcanvas-apps {
-    width: 30vw;
-  }
-}
-
-@media (max-width: 960px) {
-  .offcanvas-apps {
-    width: 35vw;
+@media (max-width: 1366px) {
+  .offcanvas-apps,
+  .offcanvas-apps > .MuiPaper-root {
+    width: 26vw;
   }
 }
 
-@media (max-width: 1400px) {
+@media (max-width: 1024px) {
   .offcanvas-apps,
   .offcanvas-apps > .MuiPaper-root {
-    width: 40vw;
+    width: 30%;
 
-    .sublabel {
-      max-width: 20vw !important;
+    .body {
+      .icon-open {
+        display: none;
+      }
     }
   }
 }
 
-@media (max-width: 1024px) {
+@media (max-width: 768px) {
   .offcanvas-apps,
   .offcanvas-apps > .MuiPaper-root {
-    width: 50vw;
+    width: 40%;
 
-    .sublabel {
-      max-width: 25vw !important;
+    .body {
+      .icon-open {
+        display: none;
+      }
     }
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 767px) {
   .offcanvas-apps,
   .offcanvas-apps > .MuiPaper-root {
-    width: 100%;
+    width: 80%;
+
+    .header {
+      padding: 4px 8px;
+
+      .header-profile-apps {
+        display: block;
+        margin-left: auto;
+      }
+    }
 
-    .sublabel {
-      max-width: 65vw !important;
+    .body {
+      .icon-open {
+        display: none;
+      }
+    }
+
+    .footer {
+      margin-top: auto;
+      display: block;
+
+      > .header-apps-buttons {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 16px;
+        padding: 8px 16px;
+      }
     }
   }
 }

package/dist/Header/HeaderButtons/HeaderButtons.d.ts

@@ -0,0 +1,16 @@
+import { HelpAction } from '../HelpButton/HelpButton';
+import './styles.scss';
+type Props = {
+    hideKeyboard?: boolean;
+    notifications?: {
+        mode: 'corpus' | 'parser' | 'lexicon';
+        ref: string;
+    };
+    keyboardLayout?: string;
+    navigateHome?: () => void;
+    navigateCorpora?: (uid: string) => void;
+    helpActions?: HelpAction[];
+    mobile?: boolean;
+};
+export default function HeaderButtons({ hideKeyboard, notifications, keyboardLayout, helpActions, mobile, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Header/HeaderButtons/HeaderButtons.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { IconButton } from 'tycho-storybook';
+import HeaderNotifications from '../../Comments/HeaderNotifications';
+import LanguageSelector from '../../LanguageSelector';
+import VirtualKeyboard from '../../VirtualKeyboard';
+import { useCorpusUtils } from '../../configs/useCorpusUtils';
+import { useLoggedUtils } from '../../configs/useLoggedUtils';
+import HelpButton from '../HelpButton';
+import './styles.scss';
+export default function HeaderButtons({ hideKeyboard, notifications, keyboardLayout, helpActions, mobile, }) {
+    const { t } = useTranslation('header');
+    const { getCorpus } = useCorpusUtils();
+    const { isLogged } = useLoggedUtils();
+    const [openKeyboard, setOpenKeyboard] = useState(false);
+    return (_jsxs(_Fragment, { children: [!hideKeyboard && (_jsx(IconButton, { onClick: () => setOpenKeyboard(!openKeyboard), name: "keyboard", size: "medium", title: t('tooltip.keyboard'), mode: mobile ? 'outlined' : 'filled' })), _jsx(HelpButton, { helpActions: helpActions, mobile: mobile }), notifications && isLogged() && (_jsx(HeaderNotifications, { uid: notifications.ref, mode: notifications.mode, mobile: mobile })), _jsx(LanguageSelector, { openToTop: mobile ? true : false, mobile: mobile }), openKeyboard && (_jsx(VirtualKeyboard, { onClose: () => setOpenKeyboard(false), closeLabel: t('button.close'), defaultLayout: keyboardLayout || getCorpus().keyboardLayout || 'english' }))] }));
+}

package/dist/Header/HeaderButtons/index.d.ts

@@ -0,0 +1,2 @@
+import HeaderButtons from './HeaderButtons';
+export default HeaderButtons;

package/dist/Header/HeaderButtons/index.js

@@ -0,0 +1,2 @@
+import HeaderButtons from './HeaderButtons';
+export default HeaderButtons;

package/dist/Header/HeaderCorpora/HeaderCorpora.js

@@ -5,14 +5,12 @@ import { useParams } from 'react-router-dom';
 import AppModal from '../../AppModal';
 import AppPicture from '../../AppPicture';
 import { useCorpusUtils } from '../../configs/useCorpusUtils';
-import { useLoggedUtils } from '../../configs/useLoggedUtils';
 import CorpusService from '../types/CorpusService';
 import HeaderCorpus from './HeaderCorpus';
 import './style.scss';
 export default function HeaderCorpora({ navigateCorpora, redirect, autoload, useOpenCorpora, }) {
     const { t } = useTranslation('header');
     const { setCorpus, getCorpus, hasCorpus } = useCorpusUtils();
-    const { isLogged } = useLoggedUtils();
     const { uid } = useParams();
     const [corpora, setCorpora] = useState([]);
     const [openCorpora, setOpenCorpora] = useState(false);

package/dist/Header/HeaderCorpora/HeaderCorpus.js

@@ -4,5 +4,5 @@ import { useCorpusUtils } from '../../configs/useCorpusUtils';
 import './style.scss';
 export default function HeaderCorpus({ onClick }) {
     const { getCorpus, hasCorpus } = useCorpusUtils();
-    return (_jsx(_Fragment, { children: hasCorpus() && (_jsxs("div", { className: "header-corpus-container", onClick: onClick, children: [_jsx(AppPicture, { src: getCorpus().picture, title: getCorpus().name, className: "header-corpus-image" }), _jsx("span", { children: getCorpus().name })] })) }));
+    return (_jsx(_Fragment, { children: hasCorpus() && (_jsxs("div", { className: "header-corpus-container", onClick: onClick, children: [_jsx(AppPicture, { src: getCorpus().picture, title: getCorpus().name, className: "header-corpus-image" }), _jsx("span", { className: "header-corpus-name", children: getCorpus().name })] })) }));
 }

package/dist/Header/HeaderCorpora/style.scss

@@ -2,19 +2,25 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  gap: 16px;
+  margin-left: 24px;
+  border: 1px solid var(--border-subtle-4);
+  border-radius: var(--radius-100);
+  padding: 6px 16px;
   cursor: pointer;
 
-  > span {
-    margin-right: var(--spacing-200);
-    margin-left: var(--spacing-200);
-    @include label-large-1;
+  .header-corpus-name {
+    @include label-medium-1;
     color: var(--text-light-fixed);
   }
 
   .header-corpus-image {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     border-radius: 50%;
-    width: 32px;
-    height: 32px;
+    width: 24px;
+    height: 24px;
   }
 }
 
@@ -51,3 +57,21 @@
     }
   }
 }
+
+@media (max-width: 768px) {
+  .header-corpus-container .header-corpus-name {
+    max-width: 180px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+@media (max-width: 767px) {
+  .header-corpus-container {
+    margin-left: 12px;
+    .header-corpus-name {
+      max-width: 160px;
+    }
+  }
+}

package/dist/Header/HeaderUser/HeaderUser.d.ts

@@ -1,4 +1,4 @@
-import "./style.scss";
+import './style.scss';
 type Props = {
     navigateLogout?: () => void;
     navigateNotLogged: () => void;

package/dist/Header/HeaderUser/HeaderUser.js

@@ -1,19 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Button, Icon, ProfileDropdown } from "tycho-storybook";
-import { useLoggedUtils } from "../../configs/useLoggedUtils";
-import "./style.scss";
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Icon, ProfileDropdown } from 'tycho-storybook';
+import { useLoggedUtils } from '../../configs/useLoggedUtils';
+import './style.scss';
 export default function HeaderUser({ navigateLogout, navigateNotLogged, }) {
-    const { t } = useTranslation("header");
+    const { t } = useTranslation('header');
     const { isLogged, getLogged } = useLoggedUtils();
     const [open, setOpen] = useState(false);
     const handleProfile = () => {
         setOpen(false);
-        window.open(import.meta.env.VITE_APP_RESERVED_URL, "_blank");
+        window.open(import.meta.env.VITE_APP_RESERVED_URL, '_blank');
     };
-    return (_jsxs("div", { className: "header-user-container", children: [isLogged() ? (_jsx(ProfileDropdown, { src: getLogged()?.picture, title: getLogged()?.name || getLogged()?.sub, onClick: (b) => setOpen(b) })) : (_jsx(Button, { text: t("button.sign.in"), size: "small", onClick: navigateNotLogged })), open && isLogged() && (_jsxs("div", { className: "ds-dropdown-list", children: [_jsx("div", { className: "ds-dropdown-itemlist", children: _jsx("span", { className: "label", children: `${t("profile.label.hello")} ${getLogged()?.name || getLogged()?.sub}` }) }), _jsxs("div", { className: "ds-dropdown-itemlist d-none", children: [_jsx(Icon, { name: "colors", size: "x-small" }), _jsx("span", { className: "label", children: t("profile.label.theme") })] }), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: handleProfile, children: [_jsx(Icon, { name: "person", size: "x-small" }), _jsx("span", { className: "label", children: t("profile.label.home") })] }), _jsxs("div", { className: "ds-dropdown-itemlist", children: [_jsx(Icon, { name: "live_help", size: "x-small" }), _jsx("span", { className: "label", children: t("profile.label.help") })] }), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: () => {
+    return (_jsxs("div", { className: "profile-container", children: [isLogged() ? (_jsx(ProfileDropdown, { src: getLogged()?.picture, title: getLogged()?.name || getLogged()?.sub, onClick: (b) => setOpen(b) })) : (_jsx(Button, { text: t('button.sign.in'), size: "small", onClick: navigateNotLogged })), open && isLogged() && (_jsxs("div", { className: "ds-dropdown-list", children: [_jsx("div", { className: "ds-dropdown-itemlist", children: _jsx("span", { className: "label", children: `${t('profile.label.hello')} ${getLogged()?.name || getLogged()?.sub}` }) }), _jsxs("div", { className: "ds-dropdown-itemlist d-none", children: [_jsx(Icon, { name: "colors", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.theme') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: handleProfile, children: [_jsx(Icon, { name: "person", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.home') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", children: [_jsx(Icon, { name: "live_help", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.help') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: () => {
                             setOpen(false);
                             navigateLogout && navigateLogout();
-                        }, children: [_jsx(Icon, { name: "logout", size: "x-small" }), _jsx("span", { className: "label", children: t("profile.label.logout") })] })] }))] }));
+                        }, children: [_jsx(Icon, { name: "logout", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.logout') })] })] }))] }));
 }

package/dist/Header/HeaderUser/style.scss

@@ -1,4 +1,4 @@
-.header-user-container {
+.profile-container {
   display: flex;
   cursor: pointer;
   position: relative;

package/dist/Header/HelpButton/HelpButton.d.ts

@@ -5,6 +5,7 @@ export type HelpAction = {
 };
 type Props = {
     helpActions?: HelpAction[];
+    mobile?: boolean;
 };
-export default function HelpButton({ helpActions }: Props): import("react/jsx-runtime").JSX.Element;
+export default function HelpButton({ helpActions, mobile }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Header/HelpButton/HelpButton.js

@@ -3,8 +3,8 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { IconButton } from 'tycho-storybook';
 import HelpModal from './HelpModal';
-export default function HelpButton({ helpActions }) {
+export default function HelpButton({ helpActions, mobile }) {
     const { t } = useTranslation('header');
     const [open, setOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { name: "live_help", size: "medium", title: t('tooltip.tutorials'), onClick: () => setOpen(true) }), open && (_jsx(HelpModal, { onClose: () => setOpen(false), helpActions: helpActions }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { name: "live_help", size: "medium", title: t('tooltip.tutorials'), onClick: () => setOpen(true), mode: mobile ? 'outlined' : 'filled' }), open && (_jsx(HelpModal, { onClose: () => setOpen(false), helpActions: helpActions }))] }));
 }