@linagora/twake-mui 9.6.0 → 9.8.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# @linagora/twake-mui [9.8.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.7.0...@linagora/twake-mui@9.8.0) (2026-09-24)
+
+
+### Features
+
+* **twake-mui:** Migrate DropdownText from cozy-ui ([777b07c](https://github.com/linagora/twake-ui/commit/777b07c26e72cc21ac278dd33b1e0a8210dc19e9))
+
+# @linagora/twake-mui [9.7.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.6.0...@linagora/twake-mui@9.7.0) (2026-09-24)
+
+
+### Features
+
+* **twake-mui:** Added ContactPopover component ([5332ae2](https://github.com/linagora/twake-ui/commit/5332ae2051c0863ce8269a32954c5dbb3a5a5694))
+* **twake-mui:** Migrate SearchBar from cozy-ui ([0b03e38](https://github.com/linagora/twake-ui/commit/0b03e38cee859c52d913acb3aca155eeca0c9665))
+
 # @linagora/twake-mui [9.6.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.5.1...@linagora/twake-mui@9.6.0) (2026-09-24)
 
 

package/dist/components/Avatar/helpers.d.ts

@@ -6,3 +6,12 @@ export declare const colorMapping: Record<string, string>;
  * @returns Color key from supportedColors
  */
 export declare const nameToColor: (name?: string) => string | undefined;
+/**
+ * Extract initials from a name (first letter of first name + first letter of last name)
+ * If only one name is provided, returns first 2 letters
+ * Falls back to first 2 letters of email local-part if no name provided
+ * @param name - Display name
+ * @param email - Email address (fallback source for initials)
+ * @returns Uppercase initials string
+ */
+export declare const getInitials: (name: string, email: string) => string;

package/dist/components/Avatar/helpers.js

@@ -41,3 +41,24 @@ export const nameToColor = (name = '') => {
     const key = makeKey(colors, name);
     return colors[key];
 };
+/**
+ * Extract initials from a name (first letter of first name + first letter of last name)
+ * If only one name is provided, returns first 2 letters
+ * Falls back to first 2 letters of email local-part if no name provided
+ * @param name - Display name
+ * @param email - Email address (fallback source for initials)
+ * @returns Uppercase initials string
+ */
+export const getInitials = (name, email) => {
+    if (!name || name === email) {
+        const emailPart = email.split('@')[0];
+        return emailPart.slice(0, 2).toUpperCase();
+    }
+    const parts = name.trim().split(/\s+/);
+    if (parts.length === 1) {
+        return parts[0].slice(0, 2).toUpperCase();
+    }
+    const firstName = parts[0];
+    const lastName = parts[parts.length - 1];
+    return (firstName[0] + lastName[0]).toUpperCase();
+};

package/dist/components/ContactPopover/AttendeeInfo.d.ts

@@ -0,0 +1,9 @@
+export interface AttendeeInfoProps {
+    /** Attendee display name */
+    name: string;
+    /** Attendee email address */
+    email: string;
+    /** Callback when email is copied to clipboard */
+    onEmailCopy?: (email: string) => void;
+}
+export declare const AttendeeInfo: ({ name, email, onEmailCopy }: AttendeeInfoProps) => JSX.Element;

package/dist/components/ContactPopover/AttendeeInfo.js

@@ -0,0 +1,35 @@
+import { Icon } from '@linagora/twake-icons';
+import { Copy } from '@linagora/twake-icons';
+import { Box, IconButton, Typography, useTheme, alpha } from '@mui/material';
+import React, { useState } from 'react';
+import { useI18n } from 'twake-i18n';
+import { Avatar } from '../Avatar';
+import { nameToColor, getInitials } from '../Avatar/helpers';
+export const AttendeeInfo = ({ name, email, onEmailCopy }) => {
+    const theme = useTheme();
+    const { t } = useI18n();
+    const [showCopied, setShowCopied] = useState(false);
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(email);
+            onEmailCopy?.(email);
+            setShowCopied(true);
+            setTimeout(() => setShowCopied(false), 2000);
+        }
+        catch {
+            // Clipboard write failed — silently ignore
+        }
+    };
+    const avatarColor = nameToColor(name || email);
+    const initials = getInitials(name, email);
+    return (React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 } },
+        React.createElement(Avatar, { color: avatarColor, size: 48, sx: { width: 48, height: 48, fontSize: '1.25rem' } }, initials),
+        React.createElement(Box, { sx: { minWidth: 0 } },
+            name && name !== email ? (React.createElement(Typography, { variant: "body1", sx: { fontWeight: 500 }, noWrap: true }, name)) : null,
+            React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } },
+                React.createElement(Typography, { variant: "body2", color: "text.secondary", noWrap: true }, email),
+                React.createElement(IconButton, { size: "small", onClick: () => void handleCopy(), sx: { p: 0.5, color: alpha(theme.palette.grey[900], 0.9) }, title: showCopied
+                        ? t('ContactPopover.copiedTooltip')
+                        : t('ContactPopover.copyTooltip') },
+                    React.createElement(Icon, { icon: Copy, size: 16, color: theme.palette.text.icon }))))));
+};

package/dist/components/ContactPopover/ContactPopover.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ContactPopover } from './index';
+declare const meta: Meta<typeof ContactPopover>;
+export default meta;
+type Story = StoryObj<typeof ContactPopover>;
+export declare const Default: Story;

package/dist/components/ContactPopover/ContactPopover.stories.js

@@ -0,0 +1,73 @@
+import { Chip, Box, Typography } from '@mui/material';
+import React, { useEffect, useRef } from 'react';
+import { ContactPopover } from './index';
+const meta = {
+    title: 'Components/ContactPopover',
+    component: ContactPopover,
+    parameters: {
+        layout: 'centered'
+    },
+    tags: ['autodocs', 'argos'],
+    argTypes: {
+        name: {
+            control: 'text',
+            description: 'Attendee display name'
+        },
+        email: {
+            control: 'text',
+            description: 'Attendee email address'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disable the popover'
+        },
+        onEmailCopy: {
+            action: 'email copied'
+        },
+        onClose: {
+            action: 'popover closed'
+        }
+    }
+};
+export default meta;
+export const Default = {
+    render: () => {
+        const containerRef = useRef(null);
+        useEffect(() => {
+            const timer = setTimeout(() => {
+                containerRef.current
+                    ?.querySelectorAll('[role="button"]')[0]
+                    .click();
+            }, 100);
+            return () => clearTimeout(timer);
+        }, []);
+        return (React.createElement(Box, { ref: containerRef, sx: { display: 'flex', flexDirection: 'column', gap: 3 } },
+            React.createElement(Box, null,
+                React.createElement(Typography, { variant: "subtitle2", gutterBottom: true }, "Default \u2014 all actions"),
+                React.createElement(ContactPopover, { name: "John Doe", email: "john.doe@example.com" },
+                    React.createElement(Chip, { label: "John Doe", clickable: true }),
+                    React.createElement(ContactPopover.Actions, null,
+                        React.createElement(ContactPopover.EmailAction, { url: "https://mail.example.com/john.doe" }),
+                        React.createElement(ContactPopover.CalendarAction, { url: "https://calendar.example.com/john.doe" }),
+                        React.createElement(ContactPopover.ChatAction, { url: "https://chat.example.com/john.doe" }),
+                        React.createElement(ContactPopover.VideoAction, { url: "https://meet.example.com/john.doe" })))),
+            React.createElement(Box, null,
+                React.createElement(Typography, { variant: "subtitle2", gutterBottom: true }, "Email only"),
+                React.createElement(ContactPopover, { name: "", email: "jane.smith@example.com" },
+                    React.createElement(Chip, { label: "jane.smith@example.com", clickable: true }),
+                    React.createElement(ContactPopover.Actions, null,
+                        React.createElement(ContactPopover.EmailAction, { url: "mailto:jane.smith@example.com" })))),
+            React.createElement(Box, null,
+                React.createElement(Typography, { variant: "subtitle2", gutterBottom: true }, "Without actions"),
+                React.createElement(ContactPopover, { name: "Alice Brown", email: "alice.brown@example.com" },
+                    React.createElement(Chip, { label: "Alice Brown", clickable: true }))),
+            React.createElement(Box, null,
+                React.createElement(Typography, { variant: "subtitle2", gutterBottom: true }, "Long name / email"),
+                React.createElement(ContactPopover, { name: "Christopher Alexander Montgomery", email: "christopher.montgomery@verylongdomain.example.com" },
+                    React.createElement(Chip, { label: "Christopher Alexander Montgomery", clickable: true }),
+                    React.createElement(ContactPopover.Actions, null,
+                        React.createElement(ContactPopover.ChatAction, { url: "https://chat.example.com/christopher" }),
+                        React.createElement(ContactPopover.VideoAction, { url: "https://meet.example.com/christopher" }),
+                        React.createElement(ContactPopover.CalendarAction, { url: "https://calendar.example.com/christopher" }))))));
+    }
+};

package/dist/components/ContactPopover/ContactPopoverActions.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface ContactPopoverActionsProps {
+    /** Action items rendered inside the actions bar */
+    children: React.ReactNode;
+}
+export declare const ContactPopoverActions: ({ children }: ContactPopoverActionsProps) => JSX.Element;

package/dist/components/ContactPopover/ContactPopoverActions.js

@@ -0,0 +1,3 @@
+import { Box } from '@mui/material';
+import React from 'react';
+export const ContactPopoverActions = ({ children }) => (React.createElement(Box, { sx: { display: 'flex', gap: 1 } }, children));

package/dist/components/ContactPopover/ContactPopoverCalendarAction.d.ts

@@ -0,0 +1,5 @@
+export interface ContactPopoverCalendarActionProps {
+    /** URL for calendar action (e.g., view attendee's calendar) */
+    url: string;
+}
+export declare const ContactPopoverCalendarAction: ({ url }: ContactPopoverCalendarActionProps) => JSX.Element;

package/dist/components/ContactPopover/ContactPopoverCalendarAction.js

@@ -0,0 +1,9 @@
+import { Icon } from '@linagora/twake-icons';
+import { CalendarToday } from '@linagora/twake-icons';
+import { IconButton, useTheme } from '@mui/material';
+import React from 'react';
+export const ContactPopoverCalendarAction = ({ url }) => {
+    const theme = useTheme();
+    return (React.createElement(IconButton, { href: url, size: "small", sx: { border: `1px solid ${theme.palette.divider}` } },
+        React.createElement(Icon, { icon: CalendarToday, size: 20, color: theme.palette.text.icon })));
+};

package/dist/components/ContactPopover/ContactPopoverChatAction.d.ts

@@ -0,0 +1,5 @@
+export interface ContactPopoverChatActionProps {
+    /** URL for chat action (e.g., Twake Chat link) */
+    url: string;
+}
+export declare const ContactPopoverChatAction: ({ url }: ContactPopoverChatActionProps) => JSX.Element;

package/dist/components/ContactPopover/ContactPopoverChatAction.js

@@ -0,0 +1,9 @@
+import { Icon } from '@linagora/twake-icons';
+import { Discuss } from '@linagora/twake-icons';
+import { IconButton, useTheme } from '@mui/material';
+import React from 'react';
+export const ContactPopoverChatAction = ({ url }) => {
+    const theme = useTheme();
+    return (React.createElement(IconButton, { href: url, size: "small", sx: { border: `1px solid ${theme.palette.divider}` } },
+        React.createElement(Icon, { icon: Discuss, size: 20, color: theme.palette.text.icon })));
+};

package/dist/components/ContactPopover/ContactPopoverEmailAction.d.ts

@@ -0,0 +1,5 @@
+export interface ContactPopoverEmailActionProps {
+    /** URL for email action */
+    url: string;
+}
+export declare const ContactPopoverEmailAction: ({ url }: ContactPopoverEmailActionProps) => JSX.Element;

package/dist/components/ContactPopover/ContactPopoverEmailAction.js

@@ -0,0 +1,12 @@
+import { Button, useTheme } from '@mui/material';
+import React from 'react';
+import { useI18n } from 'twake-i18n';
+export const ContactPopoverEmailAction = ({ url }) => {
+    const theme = useTheme();
+    const { t } = useI18n();
+    return (React.createElement(Button, { href: url, variant: "outlined", size: "small", fullWidth: true, sx: {
+            justifyContent: 'center',
+            color: theme.palette.text.primary,
+            borderColor: theme.palette.divider
+        } }, t('ContactPopover.emailButton')));
+};

package/dist/components/ContactPopover/ContactPopoverVideoAction.d.ts

@@ -0,0 +1,5 @@
+export interface ContactPopoverVideoActionProps {
+    /** URL for video call action (e.g., Twake Meet link) */
+    url: string;
+}
+export declare const ContactPopoverVideoAction: ({ url }: ContactPopoverVideoActionProps) => JSX.Element;

package/dist/components/ContactPopover/ContactPopoverVideoAction.js

@@ -0,0 +1,9 @@
+import { Icon } from '@linagora/twake-icons';
+import { Camera } from '@linagora/twake-icons';
+import { IconButton, useTheme } from '@mui/material';
+import React from 'react';
+export const ContactPopoverVideoAction = ({ url }) => {
+    const theme = useTheme();
+    return (React.createElement(IconButton, { href: url, size: "small", sx: { border: `1px solid ${theme.palette.divider}` } },
+        React.createElement(Icon, { icon: Camera, size: 20, color: theme.palette.text.icon })));
+};

package/dist/components/ContactPopover/index.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ContactPopoverActions } from './ContactPopoverActions';
+import { ContactPopoverCalendarAction } from './ContactPopoverCalendarAction';
+import { ContactPopoverChatAction } from './ContactPopoverChatAction';
+import { ContactPopoverEmailAction } from './ContactPopoverEmailAction';
+import { ContactPopoverVideoAction } from './ContactPopoverVideoAction';
+export interface ContactPopoverProps {
+    /** Attendee display name */
+    name: string;
+    /** Attendee email address */
+    email: string;
+    /** Children element that triggers the popover, plus optional ContactPopover.Actions */
+    children: React.ReactNode;
+    /** Callback when email is copied to clipboard */
+    onEmailCopy?: (email: string) => void;
+    /** Callback when the popover closes */
+    onClose?: () => void;
+    /** Disable the popover (render children only) */
+    disabled?: boolean;
+}
+interface ContactPopoverComponent extends React.FC<ContactPopoverProps> {
+    Actions: typeof ContactPopoverActions;
+    ChatAction: typeof ContactPopoverChatAction;
+    VideoAction: typeof ContactPopoverVideoAction;
+    CalendarAction: typeof ContactPopoverCalendarAction;
+    EmailAction: typeof ContactPopoverEmailAction;
+}
+export declare const ContactPopover: ContactPopoverComponent;
+export { ContactPopoverActions, ContactPopoverChatAction, ContactPopoverVideoAction, ContactPopoverCalendarAction, ContactPopoverEmailAction };
+export default ContactPopover;

package/dist/components/ContactPopover/index.js

@@ -0,0 +1,134 @@
+import { Icon } from '@linagora/twake-icons';
+import { Cross } from '@linagora/twake-icons';
+import { Box, IconButton, Popover, styled } from '@mui/material';
+import React, { useEffect, useRef, useState } from 'react';
+import { useExtendI18n } from 'twake-i18n';
+import { AttendeeInfo } from './AttendeeInfo';
+import { ContactPopoverActions } from './ContactPopoverActions';
+import { ContactPopoverCalendarAction } from './ContactPopoverCalendarAction';
+import { ContactPopoverChatAction } from './ContactPopoverChatAction';
+import { ContactPopoverEmailAction } from './ContactPopoverEmailAction';
+import { ContactPopoverVideoAction } from './ContactPopoverVideoAction';
+import en from './locales/en.json';
+import fr from './locales/fr.json';
+import ru from './locales/ru.json';
+import vi from './locales/vi.json';
+const locales = { en, fr, ru, vi };
+const StyledPopoverContent = styled(Box)(({ theme }) => ({
+    padding: theme.spacing(3),
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(2),
+    position: 'relative',
+    minWidth: 320
+}));
+const CloseButton = styled(IconButton)(() => ({
+    position: 'absolute',
+    top: 8,
+    right: 8
+}));
+export const ContactPopover = ({ name, email, children, onEmailCopy, onClose, disabled = false }) => {
+    useExtendI18n(locales);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const openTimeoutRef = useRef(null);
+    const closeTimeoutRef = useRef(null);
+    const clearOpenTimeout = () => {
+        if (openTimeoutRef.current) {
+            clearTimeout(openTimeoutRef.current);
+            openTimeoutRef.current = null;
+        }
+    };
+    const clearCloseTimeout = () => {
+        if (closeTimeoutRef.current) {
+            clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = null;
+        }
+    };
+    const handleTriggerMouseEnter = (event) => {
+        clearCloseTimeout();
+        clearOpenTimeout();
+        const target = event.currentTarget;
+        if (anchorEl) {
+            setAnchorEl(target);
+            return;
+        }
+        openTimeoutRef.current = setTimeout(() => {
+            setAnchorEl(target);
+        }, 500);
+    };
+    const handleTriggerMouseLeave = () => {
+        clearOpenTimeout();
+        if (anchorEl)
+            return;
+        clearCloseTimeout();
+        closeTimeoutRef.current = setTimeout(() => {
+            setAnchorEl(null);
+        }, 200);
+    };
+    const handlePopoverMouseEnter = () => {
+        clearCloseTimeout();
+        clearOpenTimeout();
+    };
+    const handleMouseLeave = () => {
+        clearOpenTimeout();
+        clearCloseTimeout();
+        closeTimeoutRef.current = setTimeout(() => {
+            setAnchorEl(null);
+        }, 200);
+    };
+    const handleClick = (event) => {
+        clearOpenTimeout();
+        clearCloseTimeout();
+        setAnchorEl(anchorEl ? null : event.currentTarget);
+    };
+    const handleClose = () => {
+        clearOpenTimeout();
+        clearCloseTimeout();
+        setAnchorEl(null);
+        onClose?.();
+    };
+    useEffect(() => {
+        return () => {
+            clearOpenTimeout();
+            clearCloseTimeout();
+        };
+    }, []);
+    const childrenArray = React.Children.toArray(children);
+    const actionsChild = childrenArray.find((child) => React.isValidElement(child) && child.type === ContactPopoverActions);
+    const triggerChildren = childrenArray.filter(child => child !== actionsChild);
+    if (disabled) {
+        return React.createElement(React.Fragment, null, triggerChildren);
+    }
+    return (React.createElement("div", null,
+        React.createElement("div", { onClick: handleClick, onMouseEnter: handleTriggerMouseEnter, onMouseLeave: handleTriggerMouseLeave, onKeyDown: event => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    handleClick(event);
+                }
+            }, role: "button", tabIndex: 0, style: {
+                display: 'inline-block',
+                width: 'fit-content',
+                cursor: 'pointer'
+            } }, triggerChildren),
+        React.createElement(Popover, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: handleClose, anchorOrigin: { vertical: 'center', horizontal: 'right' }, transformOrigin: { vertical: 'center', horizontal: 'left' }, slotProps: {
+                paper: {
+                    elevation: 4,
+                    sx: {
+                        borderRadius: 2
+                    },
+                    onMouseEnter: handlePopoverMouseEnter,
+                    onMouseLeave: handleMouseLeave
+                }
+            } },
+            React.createElement(StyledPopoverContent, null,
+                React.createElement(CloseButton, { size: "small", onClick: handleClose },
+                    React.createElement(Icon, { icon: Cross, size: 16 })),
+                React.createElement(AttendeeInfo, { name: name, email: email, onEmailCopy: onEmailCopy }),
+                actionsChild))));
+};
+ContactPopover.Actions = ContactPopoverActions;
+ContactPopover.ChatAction = ContactPopoverChatAction;
+ContactPopover.VideoAction = ContactPopoverVideoAction;
+ContactPopover.CalendarAction = ContactPopoverCalendarAction;
+ContactPopover.EmailAction = ContactPopoverEmailAction;
+export { ContactPopoverActions, ContactPopoverChatAction, ContactPopoverVideoAction, ContactPopoverCalendarAction, ContactPopoverEmailAction };
+export default ContactPopover;

package/dist/components/ContactPopover/locales/en.json

@@ -0,0 +1,7 @@
+{
+    "ContactPopover": {
+        "emailButton": "Send an email",
+        "copyTooltip": "Copy email",
+        "copiedTooltip": "Copied!"
+    }
+}

package/dist/components/ContactPopover/locales/fr.json

@@ -0,0 +1,7 @@
+{
+    "ContactPopover": {
+        "emailButton": "Envoyer un email",
+        "copyTooltip": "Copier l'email",
+        "copiedTooltip": "Copié !"
+    }
+}

package/dist/components/ContactPopover/locales/ru.json

@@ -0,0 +1,7 @@
+{
+    "ContactPopover": {
+        "emailButton": "Отправить email",
+        "copyTooltip": "Копировать email",
+        "copiedTooltip": "Скопировано!"
+    }
+}

package/dist/components/ContactPopover/locales/vi.json

@@ -0,0 +1,7 @@
+{
+    "ContactPopover": {
+        "emailButton": "Gửi email",
+        "copyTooltip": "Sao chép email",
+        "copiedTooltip": "Đã sao chép!"
+    }
+}

package/dist/components/DropdownText/DropdownText.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import DropdownText from './index';
+declare const meta: Meta<typeof DropdownText>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Screenshot: Story;

package/dist/components/DropdownText/DropdownText.stories.js

@@ -0,0 +1,74 @@
+import { Box, Grid, Stack } from '@mui/material';
+import React from 'react';
+import DropdownText from './index';
+const variants = [
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'subtitle1',
+    'subtitle2',
+    'body1',
+    'body2',
+    'caption'
+];
+const columns = [
+    { title: 'Default', props: {} },
+    { title: 'Disabled', props: { disabled: true } },
+    { title: 'Color primary', props: { color: 'primary' } },
+    { title: 'Color error', props: { color: 'error' } }
+];
+const meta = {
+    title: 'DropdownText',
+    component: DropdownText,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    argTypes: {
+        variant: { control: 'select', options: variants },
+        color: {
+            control: 'select',
+            options: ['inherit', 'primary', 'secondary', 'error', 'textSecondary']
+        },
+        disabled: { control: 'boolean' },
+        noWrap: { control: 'boolean' },
+        spaceBetween: { control: 'boolean' }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        children: 'Dropdown'
+    }
+};
+const Frame = ({ width, children }) => (React.createElement(Box, { sx: { width, border: 1, borderStyle: 'dashed', borderColor: 'divider' } }, children));
+// Visual Regression - Combined view for Argos testing
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Variants"),
+            React.createElement(Grid, { container: true, spacing: 2 }, columns.map(({ title, props }) => (React.createElement(Grid, { key: title, size: { xs: 6, sm: 3 } },
+                React.createElement(Stack, { spacing: 2 },
+                    React.createElement("div", null, title),
+                    variants.map(variant => (React.createElement(DropdownText, { key: variant, variant: variant, ...props }, variant))))))))),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Containers"),
+            React.createElement(Stack, { spacing: 2 },
+                React.createElement(Frame, null,
+                    React.createElement(DropdownText, null, "This is a long text without ellipsis without restrictive container")),
+                React.createElement(Frame, { width: "150px" },
+                    React.createElement(DropdownText, null, "This is a long text without ellipsis inside a restrictive container")),
+                React.createElement(Frame, { width: "150px" },
+                    React.createElement(DropdownText, { noWrap: true }, "This is a long text with ellipsis inside a container")),
+                React.createElement(Frame, null,
+                    React.createElement(DropdownText, null,
+                        "Text with",
+                        React.createElement("br", null),
+                        "breaking spaces",
+                        React.createElement("br", null),
+                        "inside content")),
+                React.createElement(Frame, null,
+                    React.createElement(DropdownText, { spaceBetween: true }, "Space between text and icon"))))))
+};

package/dist/components/DropdownText/index.d.ts

@@ -0,0 +1,29 @@
+import { IconProps } from '@linagora/twake-icons';
+import { TypographyProps } from '@mui/material';
+import React from 'react';
+declare const iconSizeByVariant: {
+    readonly h1: 24;
+    readonly h2: 17;
+    readonly h3: 15;
+    readonly h4: 14;
+    readonly h5: 13;
+    readonly h6: 12;
+    readonly body1: 12;
+    readonly body2: 11;
+    readonly caption: 10;
+    readonly subtitle1: 11;
+    readonly subtitle2: 10;
+};
+export type DropdownTextVariant = keyof typeof iconSizeByVariant;
+export interface DropdownTextProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    variant?: DropdownTextVariant;
+    color?: TypographyProps['color'];
+    disabled?: boolean;
+    noWrap?: boolean;
+    spaceBetween?: boolean;
+    innerTextProps?: TypographyProps;
+    innerIconContainerProps?: TypographyProps;
+    innerIconProps?: Omit<IconProps, 'icon'>;
+}
+declare const DropdownText: React.ForwardRefExoticComponent<DropdownTextProps & React.RefAttributes<HTMLDivElement>>;
+export default DropdownText;

package/dist/components/DropdownText/index.js

@@ -0,0 +1,34 @@
+import { Icon, Bottom } from '@linagora/twake-icons';
+import { Box, Typography } from '@mui/material';
+import React from 'react';
+const iconSizeByVariant = {
+    h1: 24,
+    h2: 17,
+    h3: 15,
+    h4: 14,
+    h5: 13,
+    h6: 12,
+    body1: 12,
+    body2: 11,
+    caption: 10,
+    subtitle1: 11,
+    subtitle2: 10
+};
+const DropdownText = React.forwardRef(({ variant = 'body1', color = 'inherit', disabled = false, noWrap = false, spaceBetween = false, innerTextProps, innerIconContainerProps, innerIconProps, children, ...props }, ref) => {
+    const textColor = disabled ? 'textDisabled' : color;
+    return (React.createElement(Box, { ref: ref, sx: {
+            display: 'flex',
+            width: '100%',
+            alignItems: 'center',
+            justifyContent: spaceBetween ? 'space-between' : undefined
+        }, ...props },
+        React.createElement(Typography, { variant: variant, color: textColor, noWrap: noWrap, ...innerTextProps }, children),
+        React.createElement(Typography, { component: "span", color: textColor, sx: {
+                display: 'flex',
+                ml: '5px',
+                mt: variant === 'body1' ? '3px' : undefined
+            }, ...innerIconContainerProps },
+            React.createElement(Icon, { icon: Bottom, size: iconSizeByVariant[variant], ...innerIconProps }))));
+});
+DropdownText.displayName = 'DropdownText';
+export default DropdownText;

package/dist/components/NavDesktopDropdown/index.js

@@ -1,7 +1,7 @@
-import { Bottom, Icon } from '@linagora/twake-icons';
-import { ListItem, Typography } from '@mui/material';
+import { ListItem } from '@mui/material';
 import React, { Children, isValidElement, useState } from 'react';
 import { useBreakpoints } from '../../hooks/useBreakpoints';
+import DropdownText from '../DropdownText';
 export const NavDesktopDropdown = ({ label, children, defaultOpen = true, limit = 5 }) => {
     const { isDesktop } = useBreakpoints();
     const [open, setOpen] = useState(defaultOpen);
@@ -10,15 +10,15 @@ export const NavDesktopDropdown = ({ label, children, defaultOpen = true, limit
     if (!isDesktop)
         return null;
     return (React.createElement(React.Fragment, null,
-        React.createElement(ListItem, { onClick: isActivated ? onToggle : undefined, sx: {
+        React.createElement(ListItem, { sx: {
                 minHeight: 48,
                 py: 1,
                 px: 2,
-                justifyContent: 'space-between',
                 cursor: isActivated ? 'pointer' : undefined
             } },
-            React.createElement(Typography, { variant: "caption", sx: { color: 'text.secondary' } }, label),
-            isActivated && (React.createElement(Typography, { component: "span", sx: { display: 'flex', ml: '5px', color: 'text.secondary' } },
-                React.createElement(Icon, { icon: Bottom, size: 10, rotate: open ? 0 : -90 })))),
+            React.createElement(DropdownText, { variant: "caption", color: "textSecondary", spaceBetween: true, onClick: isActivated ? onToggle : undefined, innerIconProps: {
+                    rotate: open ? 0 : -90,
+                    display: isActivated ? undefined : 'none'
+                } }, label)),
         open && children));
 };

package/dist/components/SearchBar/DisableHighlight.d.ts

@@ -0,0 +1 @@
+export declare const DisableHighlight: import("@emotion/styled").StyledComponent<any, {}, {}>;

package/dist/components/SearchBar/DisableHighlight.js

@@ -0,0 +1,5 @@
+import { styled } from '@mui/material';
+import { Highlight } from './Highlight';
+export const DisableHighlight = styled(Highlight)(({ theme }) => ({
+    backgroundColor: theme.palette.action.disabled
+}));

package/dist/components/SearchBar/FocusHighlight.d.ts

@@ -0,0 +1 @@
+export declare const FocusHighlight: import("@emotion/styled").StyledComponent<any, {}, {}>;

package/dist/components/SearchBar/FocusHighlight.js

@@ -0,0 +1,6 @@
+import { styled } from '@mui/material';
+import { Highlight } from './Highlight';
+export const FocusHighlight = styled(Highlight)(({ theme }) => ({
+    pointerEvents: 'none',
+    backgroundColor: theme.palette.action.hover
+}));

package/dist/components/SearchBar/Highlight.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '@mui/material/styles';
+export declare const Highlight: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, React.JSX.IntrinsicElements, {}>;

package/dist/components/SearchBar/Highlight.js

@@ -0,0 +1,14 @@
+import { styled } from '@mui/material';
+export const Highlight = styled('span')(({ theme }) => ({
+    overflow: 'hidden',
+    position: 'absolute',
+    top: -1,
+    right: -1,
+    bottom: -1,
+    left: -1,
+    borderRadius: 'inherit',
+    opacity: 0,
+    transition: theme.transitions.create('opacity', {
+        duration: theme.transitions.duration.short
+    })
+}));

package/dist/components/SearchBar/SearchBar.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SearchBar } from './index';
+declare const meta: Meta<typeof SearchBar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Screenshot: Story;

package/dist/components/SearchBar/SearchBar.stories.js

@@ -0,0 +1,60 @@
+import { Cloud } from '@linagora/twake-icons';
+import { Stack, Typography } from '@mui/material';
+import React from 'react';
+import { SearchBar } from './index';
+const sizes = ['small', 'medium', 'large', 'auto'];
+const meta = {
+    title: 'SearchBar',
+    component: SearchBar,
+    parameters: { layout: 'padded' },
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: 'select',
+            options: sizes
+        },
+        type: {
+            control: 'select',
+            options: ['search', 'button']
+        },
+        elevation: { control: 'number' },
+        disabled: { control: 'boolean' },
+        disabledClear: { control: 'boolean' },
+        disabledFocus: { control: 'boolean' },
+        disabledHover: { control: 'boolean' },
+        placeholder: { control: 'text' },
+        defaultValue: { control: 'text' },
+        value: { control: 'text' }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        size: 'small',
+        elevation: 1
+    }
+};
+const Row = ({ title, children }) => (React.createElement("section", { style: { paddingBottom: '24px' } },
+    React.createElement("h3", { style: { marginBottom: '12px', marginTop: 0 } }, title),
+    React.createElement(Stack, { spacing: 2 }, children)));
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4, sx: { width: '100%', maxWidth: 800 } },
+        React.createElement(Row, { title: "Sizes" }, sizes.map(size => (React.createElement(SearchBar, { key: size, size: size, placeholder: `Size: ${size}` })))),
+        React.createElement(Row, { title: "Normal" },
+            React.createElement(SearchBar, { size: "small" }),
+            React.createElement(SearchBar, { size: "medium", defaultValue: "Filled search" })),
+        React.createElement(Row, { title: "With elevation" },
+            React.createElement(SearchBar, { size: "small", elevation: 10 })),
+        React.createElement(Row, { title: "Disabled" },
+            React.createElement(SearchBar, { disabled: true, size: "small" }),
+            React.createElement(SearchBar, { disabled: true, size: "small", defaultValue: "Disabled filled search" })),
+        React.createElement(Row, { title: "Button type" },
+            React.createElement(SearchBar, { type: "button", size: "small", label: React.createElement(Typography, { color: "primary" }, "This is a custom label") }),
+            React.createElement(SearchBar, { type: "button", size: "medium", icon: Cloud, label: "Button with string label" })),
+        React.createElement(Row, { title: "Options" },
+            React.createElement(SearchBar, { size: "small", defaultValue: "Without clear button", disabledClear: true }),
+            React.createElement(SearchBar, { size: "small", disabledHover: true, placeholder: "Disabled hover" }),
+            React.createElement(SearchBar, { size: "small", disabledFocus: true, placeholder: "Disabled focus" }),
+            React.createElement(SearchBar, { size: "small", icon: Cloud, placeholder: "Custom icon" }))))
+};

package/dist/components/SearchBar/SearchBarButtonBase.d.ts

@@ -0,0 +1,3 @@
+export declare const SearchBarButtonBase: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonBaseOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, keyof import("@mui/material").ButtonBaseOwnProps> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "disabled" | "style" | "className" | "type" | "tabIndex" | "children" | "classes" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/components/SearchBar/SearchBarButtonBase.js

@@ -0,0 +1,7 @@
+import { ButtonBase, styled } from '@mui/material';
+export const SearchBarButtonBase = styled(ButtonBase)({
+    flex: 1,
+    justifyContent: 'flex-start',
+    height: '100%',
+    borderRadius: 99
+});

package/dist/components/SearchBar/SearchBarIconWrapper.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '@mui/material/styles';
+export declare const SearchBarIconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, React.JSX.IntrinsicElements, {}>;

package/dist/components/SearchBar/SearchBarIconWrapper.js

@@ -0,0 +1,6 @@
+import { styled } from '@mui/material';
+export const SearchBarIconWrapper = styled('div')(({ theme }) => ({
+    color: theme.palette.text.secondary,
+    padding: '0 1rem',
+    display: 'flex'
+}));

package/dist/components/SearchBar/SearchBarInputBase.d.ts

@@ -0,0 +1,5 @@
+import { SearchBarProps } from './types';
+export declare const SearchBarInputBase: import("@emotion/styled").StyledComponent<import("@mui/material").InputBaseProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    searchSize: NonNullable<SearchBarProps["size"]>;
+    hasIcon: boolean;
+}, {}, {}>;

package/dist/components/SearchBar/SearchBarInputBase.js

@@ -0,0 +1,11 @@
+import { InputBase, styled } from '@mui/material';
+const fontSizeToPixel = { small: 14, medium: 16, large: 16, auto: 16 };
+export const SearchBarInputBase = styled(InputBase, {
+    shouldForwardProp: prop => prop !== 'searchSize' && prop !== 'hasIcon'
+})(({ searchSize, hasIcon }) => {
+    return {
+        flex: 1,
+        fontSize: fontSizeToPixel[searchSize],
+        paddingLeft: !hasIcon ? '1rem' : undefined
+    };
+});

package/dist/components/SearchBar/SearchBarRoot.d.ts

@@ -0,0 +1,7 @@
+import { SearchBarProps } from './types';
+export declare const SearchBarRoot: import("@emotion/styled").StyledComponent<import("@mui/material").PaperOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "style" | "square" | "className" | "elevation" | "children" | "classes" | "sx" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    searchSize: NonNullable<SearchBarProps["size"]>;
+    isFocused: boolean;
+}, {}, {}>;

package/dist/components/SearchBar/SearchBarRoot.js

@@ -0,0 +1,39 @@
+import { Paper, styled } from '@mui/material';
+const sizeToPixel = { small: 40, medium: 48, large: 56, auto: 'auto' };
+const radiusBySize = { small: 20, medium: 24, large: 28, auto: 24 };
+export const SearchBarRoot = styled(Paper, {
+    shouldForwardProp: prop => prop !== 'searchSize' && prop !== 'isFocused'
+})(({ theme, searchSize, isFocused }) => {
+    return {
+        display: 'flex',
+        boxSizing: 'border-box',
+        position: 'relative',
+        alignItems: 'center',
+        height: sizeToPixel[searchSize],
+        flex: 'auto',
+        borderRadius: radiusBySize[searchSize],
+        borderStyle: 'solid',
+        borderWidth: 1,
+        paddingRight: '0.5rem',
+        borderColor: isFocused ? theme.palette.primary.main : 'transparent',
+        backgroundColor: isFocused
+            ? theme.palette.background.paper
+            : theme.palette.background.default,
+        transition: theme.transitions.create(['border-color', 'background-color']),
+        '&:hover': {
+            '&:not(.Mui-disabled):not(.SearchBar-focused)': {
+                '& .SearchBar-focusHighlight': {
+                    opacity: 1
+                }
+            }
+        },
+        '&.Mui-disabled': {
+            '& .SearchBar-icon': {
+                color: theme.palette.text.disabled
+            },
+            '& .SearchBar-disableHighlight': {
+                opacity: 1
+            }
+        }
+    };
+});

package/dist/components/SearchBar/SearchBarTypography.d.ts

@@ -0,0 +1,5 @@
+export declare const SearchBarTypography: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "style" | "color" | "className" | "children" | "classes" | "sx" | "variant" | "align" | "noWrap" | "gutterBottom" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    hasIcon: boolean;
+}, {}, {}>;

package/dist/components/SearchBar/SearchBarTypography.js

@@ -0,0 +1,8 @@
+import { Typography, styled } from '@mui/material';
+export const SearchBarTypography = styled(Typography, {
+    shouldForwardProp: prop => prop !== 'hasIcon'
+})(({ hasIcon }) => ({
+    color: 'currentColor',
+    opacity: 0.42,
+    paddingLeft: !hasIcon ? '1rem' : undefined
+}));

package/dist/components/SearchBar/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SearchBarProps } from './types';
+export declare const SearchBar: React.ForwardRefExoticComponent<Omit<SearchBarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default SearchBar;

package/dist/components/SearchBar/index.js

@@ -0,0 +1,87 @@
+import { Cross, Icon, Magnifier } from '@linagora/twake-icons';
+import { IconButton } from '@mui/material';
+import debounce from '@mui/utils/debounce';
+import cx from 'classnames';
+import React, { forwardRef, useState, useMemo, useRef, useEffect } from 'react';
+import { DisableHighlight } from './DisableHighlight';
+import { FocusHighlight } from './FocusHighlight';
+import { SearchBarButtonBase } from './SearchBarButtonBase';
+import { SearchBarIconWrapper } from './SearchBarIconWrapper';
+import { SearchBarInputBase } from './SearchBarInputBase';
+import { SearchBarRoot } from './SearchBarRoot';
+import { SearchBarTypography } from './SearchBarTypography';
+export const SearchBar = forwardRef(({ placeholder, icon = Magnifier, size = 'small', type = 'search', label, componentsProps, disabledClear = false, disabledFocus = false, disabledHover = false, className, defaultValue = '', value, elevation = 1, disabled = false, onChange = () => { }, onClear = () => { }, onFocus = () => { }, onBlur = () => { }, ...props }, ref) => {
+    const [currentValue, setCurrentValue] = useState(defaultValue);
+    const [isFocused, setIsFocused] = useState(false);
+    const spreadValue = typeof value !== 'undefined' ? value : currentValue;
+    const isSelfControlledComp = typeof value === 'undefined';
+    const onChangeRef = useRef(onChange);
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    const delayedOnChangeRef = useRef();
+    useEffect(() => {
+        delayedOnChangeRef.current = debounce((ev) => {
+            onChangeRef.current(ev);
+        }, 375);
+        return () => {
+            delayedOnChangeRef.current?.clear();
+        };
+    }, []);
+    const delayedOnChange = useMemo(() => {
+        const fn = (ev) => {
+            delayedOnChangeRef.current?.(ev);
+        };
+        fn.clear = () => {
+            delayedOnChangeRef.current?.clear();
+        };
+        return fn;
+    }, []);
+    const handleChange = (ev) => {
+        if (!isSelfControlledComp)
+            return onChange(ev);
+        const _value = ev.target.value;
+        delayedOnChange(ev);
+        setCurrentValue(_value);
+    };
+    const handleClear = (ev) => {
+        delayedOnChange.clear();
+        const mockEvent = {
+            ...ev,
+            target: { ...ev.target, value: '' }
+        };
+        onChange(mockEvent);
+        onClear(ev);
+        if (isSelfControlledComp)
+            setCurrentValue('');
+    };
+    const handleFocus = (ev) => {
+        onFocus(ev);
+        setIsFocused(true);
+    };
+    const handleBlur = (ev) => {
+        onBlur(ev);
+        setIsFocused(false);
+    };
+    const effectivelyFocused = isFocused && !disabledFocus;
+    return (React.createElement(SearchBarRoot, { component: "form", elevation: elevation, searchSize: size, isFocused: effectivelyFocused, className: cx(className, {
+            'SearchBar-focused': effectivelyFocused,
+            'Mui-disabled': disabled
+        }), ref: ref, onSubmit: (ev) => {
+            ev.preventDefault();
+            props.onSubmit?.(ev);
+        }, ...props },
+        type === 'button' ? (React.createElement(SearchBarButtonBase, { disabled: disabled, "aria-label": typeof label === 'string' ? label : 'Search' },
+            icon && (React.createElement(SearchBarIconWrapper, { className: "SearchBar-icon" },
+                React.createElement(Icon, { icon: icon }))),
+            typeof label === 'string' ? (React.createElement(SearchBarTypography, { hasIcon: !!icon }, label)) : (label))) : (React.createElement(React.Fragment, null,
+            icon && (React.createElement(SearchBarIconWrapper, { className: "SearchBar-icon" },
+                React.createElement(Icon, { icon: icon }))),
+            React.createElement(SearchBarInputBase, { ...componentsProps?.inputBase, className: cx(componentsProps?.inputBase?.className), searchSize: size, hasIcon: !!icon, placeholder: disabled ? undefined : placeholder, value: disabled ? placeholder : spreadValue, disabled: disabled, "aria-label": placeholder || 'Search', onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur }))),
+        spreadValue && !disabledClear && type === 'search' && !disabled && (React.createElement(IconButton, { size: "small", onClick: handleClear, "aria-label": "Clear search" },
+            React.createElement(Icon, { icon: Cross }))),
+        !disabledHover && !disabled && (React.createElement(FocusHighlight, { className: "SearchBar-focusHighlight" })),
+        disabled && (React.createElement(DisableHighlight, { className: "SearchBar-disableHighlight" }))));
+});
+SearchBar.displayName = 'SearchBar';
+export default SearchBar;

package/dist/components/SearchBar/types.d.ts

@@ -0,0 +1,23 @@
+import { InputBaseProps, PaperProps } from '@mui/material';
+import React from 'react';
+export interface SearchBarProps extends Omit<PaperProps, 'onChange' | 'onBlur' | 'onFocus'> {
+    type?: 'button' | 'search';
+    size?: 'small' | 'medium' | 'large' | 'auto';
+    icon?: React.ElementType;
+    componentsProps?: {
+        inputBase?: InputBaseProps;
+    };
+    value?: string;
+    defaultValue?: string;
+    disabledClear?: boolean;
+    disabledFocus?: boolean;
+    disabledHover?: boolean;
+    elevation?: number;
+    placeholder?: string;
+    label?: React.ReactNode;
+    disabled?: boolean;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+}

package/dist/components/SearchBar/types.js

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

package/dist/index.d.ts

@@ -10,8 +10,11 @@ export { Avatar, default as AvatarDefault } from './components/Avatar';
 export { Button, default as ButtonDefault } from './components/Button';
 export { default as Chip } from './components/Chip';
 export { Dialog, default as DialogDefault } from './components/Dialog';
+export { ContactPopover, default as ContactPopoverDefault } from './components/ContactPopover';
+export { default as DropdownText } from './components/DropdownText';
 export { Tabs, default as TabsDefault } from './components/Tabs';
 export { Switch, default as SwitchDefault } from './components/Switch';
+export { SearchBar, default as SearchBarDefault } from './components/SearchBar';
 export { Sidebar, SIDEBAR_MOBILE_HEIGHT } from './components/Sidebar';
 export { Layout, Main, Content } from './components/Layout';
 export { Nav } from './components/Nav';
@@ -21,7 +24,7 @@ export { NavIcon } from './components/NavIcon';
 export { NavText } from './components/NavText';
 export { NavDesktopLimiter } from './components/NavDesktopLimiter';
 export { NavDesktopDropdown } from './components/NavDesktopDropdown';
-export { nameToColor, supportedColors } from './components/Avatar/helpers';
+export { nameToColor, supportedColors, getInitials } from './components/Avatar/helpers';
 export { default as AccordionExpandIcon } from './components/AccordionExpandIcon';
 export { default as VirtualizedTable } from './components/VirtualizedTable';
 export { VirtuosoMockContext } from 'react-virtuoso';
@@ -30,10 +33,19 @@ export type { TwakeTheme } from './lib/theme';
 export type { PaletteJson } from './lib/types';
 export type { AvatarProps } from './components/Avatar';
 export type { ButtonProps } from './components/Button';
+export type { ContactPopoverProps } from './components/ContactPopover';
+export { ContactPopoverActions, ContactPopoverChatAction, ContactPopoverVideoAction, ContactPopoverCalendarAction, ContactPopoverEmailAction } from './components/ContactPopover';
+export type { ContactPopoverActionsProps } from './components/ContactPopover/ContactPopoverActions';
+export type { ContactPopoverChatActionProps } from './components/ContactPopover/ContactPopoverChatAction';
+export type { ContactPopoverVideoActionProps } from './components/ContactPopover/ContactPopoverVideoAction';
+export type { ContactPopoverCalendarActionProps } from './components/ContactPopover/ContactPopoverCalendarAction';
+export type { ContactPopoverEmailActionProps } from './components/ContactPopover/ContactPopoverEmailAction';
 export type { ChipProps } from './components/Chip';
 export type { DialogProps, DialogSize } from './components/Dialog';
+export type { DropdownTextProps, DropdownTextVariant } from './components/DropdownText';
 export type { TabsProps } from './components/Tabs';
 export type { SwitchProps } from './components/Switch';
+export type { SearchBarProps } from './components/SearchBar/types';
 export type { SidebarProps } from './components/Sidebar';
 export type { LayoutProps, MainProps, ContentProps } from './components/Layout';
 export type { NavProps } from './components/Nav';

package/dist/index.js

@@ -13,8 +13,11 @@ export { Avatar, default as AvatarDefault } from './components/Avatar';
 export { Button, default as ButtonDefault } from './components/Button';
 export { default as Chip } from './components/Chip';
 export { Dialog, default as DialogDefault } from './components/Dialog';
+export { ContactPopover, default as ContactPopoverDefault } from './components/ContactPopover';
+export { default as DropdownText } from './components/DropdownText';
 export { Tabs, default as TabsDefault } from './components/Tabs';
 export { Switch, default as SwitchDefault } from './components/Switch';
+export { SearchBar, default as SearchBarDefault } from './components/SearchBar';
 export { Sidebar, SIDEBAR_MOBILE_HEIGHT } from './components/Sidebar';
 export { Layout, Main, Content } from './components/Layout';
 export { Nav } from './components/Nav';
@@ -24,8 +27,9 @@ export { NavIcon } from './components/NavIcon';
 export { NavText } from './components/NavText';
 export { NavDesktopLimiter } from './components/NavDesktopLimiter';
 export { NavDesktopDropdown } from './components/NavDesktopDropdown';
-export { nameToColor, supportedColors } from './components/Avatar/helpers';
+export { nameToColor, supportedColors, getInitials } from './components/Avatar/helpers';
 export { default as AccordionExpandIcon } from './components/AccordionExpandIcon';
 export { default as VirtualizedTable } from './components/VirtualizedTable';
 export { VirtuosoMockContext } from 'react-virtuoso';
 export { useBreakpoints } from './hooks/useBreakpoints';
+export { ContactPopoverActions, ContactPopoverChatAction, ContactPopoverVideoAction, ContactPopoverCalendarAction, ContactPopoverEmailAction } from './components/ContactPopover';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "9.6.0",
+  "version": "9.8.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",