@hh.ru/magritte-ui-chat-bubble 2.0.5 → 3.0.1

package/Call.js

@@ -6,7 +6,7 @@ import { useChatBubbleColors } from './internal/colors.js';
 import { useChatBubbleMode } from './internal/mode.js';
 import { markMetaHost } from './internal/utils.js';
 import { PhoneCrossFilledSize24, PhoneArrowOutFilledSize24, PhoneArrowInFilledSize24 } from '@hh.ru/magritte-ui-icon/icon';
-import { s as styles } from './chat-bubble-Cs9qnBg4.js';
+import { s as styles } from './chat-bubble-CL1yJA4w.js';
 
 /** Входящий/исходящий звонок */
 const ChatBubbleCallComponent = forwardRef(({ 'data-qa': dataQa = 'chat-bubble-call', title, description, meta, state = 'connected', ...props }, ref) => {

package/ChatBubble.js

@@ -22,7 +22,7 @@ import { flattenFragments, isMetaHost } from './internal/utils.js';
 import { ExclamationCircleFilledSize24 } from '@hh.ru/magritte-ui-icon/icon';
 import { Menu } from '@hh.ru/magritte-ui-menu';
 import { Text } from '@hh.ru/magritte-ui-typography';
-import { s as styles } from './chat-bubble-Cs9qnBg4.js';
+import { s as styles } from './chat-bubble-CL1yJA4w.js';
 import '@hh.ru/magritte-ui-cell';
 import '@hh.ru/magritte-ui-link';
 import '@hh.ru/magritte-ui-loader';

package/File.js

@@ -7,7 +7,7 @@ import { markMetaHost } from './internal/utils.js';
 import { ExclamationTriangleOutlinedSize16, ArrowDownLineOutlinedSize24, DocumentOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
 import { LinkDefaultPropsContext } from '@hh.ru/magritte-ui-link';
 import { Loader } from '@hh.ru/magritte-ui-loader';
-import { s as styles } from './chat-bubble-Cs9qnBg4.js';
+import { s as styles } from './chat-bubble-CL1yJA4w.js';
 import './internal/mode.js';
 
 /** Прикреплённый файл */

package/Label.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useChatBubbleColors } from './internal/colors.js';
 import { Text } from '@hh.ru/magritte-ui-typography';
-import { s as styles } from './chat-bubble-Cs9qnBg4.js';
+import { s as styles } from './chat-bubble-CL1yJA4w.js';
 import './internal/mode.js';
 
 /**

package/Media.d.ts

@@ -14,5 +14,17 @@ export interface ChatBubbleMediaProps extends HTMLAttributes<HTMLDivElement>, Ch
      * @default chat-bubble-media
      */
     'data-qa'?: string;
+    /**
+     * Ширина превью в пикселях.
+     * Задаётся атрибутом, ограничивается стилями компонента, но не переопределяется ими.
+     * Передавать вместе с `height`.
+     */
+    width?: number;
+    /**
+     * Высота превью в пикселях.
+     * Нужна, чтобы вычислить пропорции и зарезервировать место под картинку.
+     * Передавать вместе с `width`.
+     */
+    height?: number;
 }
 export declare const ChatBubbleMedia: import("react").ForwardRefExoticComponent<ChatBubbleMediaProps & import("react").RefAttributes<HTMLDivElement>> & import("@hh.ru/magritte-ui-chat-bubble/internal/utils").MetaHostComponent;

package/Media.js

@@ -3,13 +3,13 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { markMetaHost } from './internal/utils.js';
 import { Text } from '@hh.ru/magritte-ui-typography';
-import { s as styles } from './chat-bubble-Cs9qnBg4.js';
+import { s as styles } from './chat-bubble-CL1yJA4w.js';
 
 /**
  * Медиа в сообщении
  */
-const ChatBubbleMediaComponent = forwardRef(({ alt, children, 'data-qa': dataQa = 'chat-bubble-media', meta, src, format, ...props }, ref) => {
-    return (jsxs("div", { ...props, className: styles.media, "data-qa": dataQa, ref: ref, children: [src && (jsxs(Fragment, { children: [jsx("img", { className: styles.mediaBlur, src: src, alt: "", "aria-hidden": true }), jsx("img", { className: styles.mediaImage, src: src, alt: alt ?? '' })] })), children && jsx("span", { className: styles.mediaContent, children: children }), format && (jsx("span", { className: styles.mediaFormat, "data-qa": "chat-bubble-media-format", children: jsx(Text, { Element: "span", typography: "label-4-regular", style: "constant", children: format }) })), meta && (jsx("span", { className: styles.mediaMeta, "data-qa": "chat-bubble-media-meta", children: meta }))] }));
+const ChatBubbleMediaComponent = forwardRef(({ alt, children, 'data-qa': dataQa = 'chat-bubble-media', meta, src, format, width, height, ...props }, ref) => {
+    return (jsxs("div", { ...props, className: styles.media, "data-qa": dataQa, ref: ref, children: [src && (jsxs(Fragment, { children: [jsx("img", { className: styles.mediaBlur, src: src, alt: "", "aria-hidden": true }), jsx("img", { className: styles.mediaImage, src: src, alt: alt ?? '', width: width, height: height })] })), children && jsx("span", { className: styles.mediaContent, children: children }), format && (jsx("span", { className: styles.mediaFormat, "data-qa": "chat-bubble-media-format", children: jsx(Text, { Element: "span", typography: "label-4-regular", style: "constant", children: format }) })), meta && (jsx("span", { className: styles.mediaMeta, "data-qa": "chat-bubble-media-meta", children: meta }))] }));
 });
 ChatBubbleMediaComponent.displayName = 'ChatBubbleMedia';
 const ChatBubbleMedia = markMetaHost(ChatBubbleMediaComponent);

package/Media.js.map

@@ -1 +1 @@
-{"version":3,"file":"Media.js","sources":["src/Media.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\n\nimport { markMetaHost, type ChatBubbleMetaHostProps } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './chat-bubble.less';\n\nexport interface ChatBubbleMediaProps extends HTMLAttributes<HTMLDivElement>, ChatBubbleMetaHostProps {\n    /** Url изображения или превью видео */\n    src?: string;\n    /** Alt изображения */\n    alt?: string;\n    /** Содержимое поверх превью */\n    children?: ReactNode;\n    /** Тип медиа (отображается в верхнем левом углу) */\n    format?: ReactNode;\n    /**\n     * Значение data-qa\n     * @default chat-bubble-media\n     */\n    'data-qa'?: string;\n}\n\n/**\n * Медиа в сообщении\n */\nconst ChatBubbleMediaComponent = forwardRef<HTMLDivElement, ChatBubbleMediaProps>(\n    ({ alt, children, 'data-qa': dataQa = 'chat-bubble-media', meta, src, format, ...props }, ref) => {\n        return (\n            <div {...props} className={styles.media} data-qa={dataQa} ref={ref}>\n                {src && (\n                    <>\n                        <img className={styles.mediaBlur} src={src} alt=\"\" aria-hidden />\n                        <img className={styles.mediaImage} src={src} alt={alt ?? ''} />\n                    </>\n                )}\n                {children && <span className={styles.mediaContent}>{children}</span>}\n                {format && (\n                    <span className={styles.mediaFormat} data-qa=\"chat-bubble-media-format\">\n                        <Text Element=\"span\" typography=\"label-4-regular\" style=\"constant\">\n                            {format}\n                        </Text>\n                    </span>\n                )}\n                {meta && (\n                    <span className={styles.mediaMeta} data-qa=\"chat-bubble-media-meta\">\n                        {meta}\n                    </span>\n                )}\n            </div>\n        );\n    }\n);\n\nChatBubbleMediaComponent.displayName = 'ChatBubbleMedia';\n\nexport const ChatBubbleMedia = markMetaHost(ChatBubbleMediaComponent);\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;AAuBA;;AAEG;AACH,MAAM,wBAAwB,GAAG,UAAU,CACvC,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,GAAG,mBAAmB,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;IAC7F,QACIA,IAAS,CAAA,KAAA,EAAA,EAAA,GAAA,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,EAAW,SAAA,EAAA,MAAM,EAAE,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CAC7D,GAAG,KACAA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACIC,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAC,EAAE,EAAA,aAAA,EAAA,IAAA,EAAA,CAAe,EACjEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAI,CAAA,CAAA,EAAA,CAChE,CACN,EACA,QAAQ,IAAIA,cAAM,SAAS,EAAE,MAAM,CAAC,YAAY,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAQ,EACnE,MAAM,KACHA,GAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,SAAA,EAAU,0BAA0B,EAAA,QAAA,EACnEA,GAAC,CAAA,IAAI,EAAC,EAAA,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,iBAAiB,EAAC,KAAK,EAAC,UAAU,EAAA,QAAA,EAC7D,MAAM,EAAA,CACJ,EACJ,CAAA,CACV,EACA,IAAI,KACDA,GAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,SAAS,EAAU,SAAA,EAAA,wBAAwB,EAC9D,QAAA,EAAA,IAAI,EACF,CAAA,CACV,CACC,EAAA,CAAA,EACR;AACN,CAAC,CACJ,CAAC;AAEF,wBAAwB,CAAC,WAAW,GAAG,iBAAiB,CAAC;MAE5C,eAAe,GAAG,YAAY,CAAC,wBAAwB;;;;"}
+{"version":3,"file":"Media.js","sources":["src/Media.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\n\nimport { markMetaHost, type ChatBubbleMetaHostProps } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './chat-bubble.less';\n\nexport interface ChatBubbleMediaProps extends HTMLAttributes<HTMLDivElement>, ChatBubbleMetaHostProps {\n    /** Url изображения или превью видео */\n    src?: string;\n    /** Alt изображения */\n    alt?: string;\n    /** Содержимое поверх превью */\n    children?: ReactNode;\n    /** Тип медиа (отображается в верхнем левом углу) */\n    format?: ReactNode;\n    /**\n     * Значение data-qa\n     * @default chat-bubble-media\n     */\n    'data-qa'?: string;\n    /**\n     * Ширина превью в пикселях.\n     * Задаётся атрибутом, ограничивается стилями компонента, но не переопределяется ими.\n     * Передавать вместе с `height`.\n     */\n    width?: number;\n    /**\n     * Высота превью в пикселях.\n     * Нужна, чтобы вычислить пропорции и зарезервировать место под картинку.\n     * Передавать вместе с `width`.\n     */\n    height?: number;\n}\n\n/**\n * Медиа в сообщении\n */\nconst ChatBubbleMediaComponent = forwardRef<HTMLDivElement, ChatBubbleMediaProps>(\n    ({ alt, children, 'data-qa': dataQa = 'chat-bubble-media', meta, src, format, width, height, ...props }, ref) => {\n        return (\n            <div {...props} className={styles.media} data-qa={dataQa} ref={ref}>\n                {src && (\n                    <>\n                        <img className={styles.mediaBlur} src={src} alt=\"\" aria-hidden />\n                        <img className={styles.mediaImage} src={src} alt={alt ?? ''} width={width} height={height} />\n                    </>\n                )}\n                {children && <span className={styles.mediaContent}>{children}</span>}\n                {format && (\n                    <span className={styles.mediaFormat} data-qa=\"chat-bubble-media-format\">\n                        <Text Element=\"span\" typography=\"label-4-regular\" style=\"constant\">\n                            {format}\n                        </Text>\n                    </span>\n                )}\n                {meta && (\n                    <span className={styles.mediaMeta} data-qa=\"chat-bubble-media-meta\">\n                        {meta}\n                    </span>\n                )}\n            </div>\n        );\n    }\n);\n\nChatBubbleMediaComponent.displayName = 'ChatBubbleMedia';\n\nexport const ChatBubbleMedia = markMetaHost(ChatBubbleMediaComponent);\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;AAmCA;;AAEG;AACH,MAAM,wBAAwB,GAAG,UAAU,CACvC,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,GAAG,mBAAmB,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AAC5G,IAAA,QACIA,IAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,EAAA,SAAA,EAAW,MAAM,EAAE,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CAC7D,GAAG,KACAA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACIC,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAC,EAAE,EAAe,aAAA,EAAA,IAAA,EAAA,CAAA,EACjEA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA,CAAA,EAAA,CAC9F,CACN,EACA,QAAQ,IAAIA,GAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,YAAY,EAAG,QAAA,EAAA,QAAQ,EAAQ,CAAA,EACnE,MAAM,KACHA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,SAAA,EAAU,0BAA0B,EAAA,QAAA,EACnEA,GAAC,CAAA,IAAI,EAAC,EAAA,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,iBAAiB,EAAC,KAAK,EAAC,UAAU,EAC7D,QAAA,EAAA,MAAM,EACJ,CAAA,EAAA,CACJ,CACV,EACA,IAAI,KACDA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,SAAS,EAAA,SAAA,EAAU,wBAAwB,EAAA,QAAA,EAC9D,IAAI,EAAA,CACF,CACV,CAAA,EAAA,CACC,EACR;AACN,CAAC,CACJ,CAAC;AAEF,wBAAwB,CAAC,WAAW,GAAG,iBAAiB,CAAC;MAE5C,eAAe,GAAG,YAAY,CAAC,wBAAwB;;;;"}

package/Message.js

@@ -4,7 +4,7 @@ import { forwardRef } from 'react';
 import { useChatBubbleColors } from './internal/colors.js';
 import { markMetaHost } from './internal/utils.js';
 import { Text } from '@hh.ru/magritte-ui-typography';
-import { s as styles } from './chat-bubble-Cs9qnBg4.js';
+import { s as styles } from './chat-bubble-CL1yJA4w.js';
 import './internal/mode.js';
 
 /**

package/Meta.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useTranslation } from '@hh.ru/magritte-common-use-translation';
 import { getColors } from './internal/colors.js';
 import { Text } from '@hh.ru/magritte-ui-typography';
-import { s as styles } from './chat-bubble-Cs9qnBg4.js';
+import { s as styles } from './chat-bubble-CL1yJA4w.js';
 import './internal/mode.js';
 import 'react';
 
@@ -12,12 +12,11 @@ import 'react';
  * Рендерится внутри последнего элемента контента.
  * */
 const Meta = ({ edited, mode, status, time }) => {
-    const visibleStatus = mode === 'incoming' ? undefined : status;
     const editedLabel = useTranslation('ChatBubble', 'edited');
-    if (!time && !visibleStatus && !edited) {
+    if (!time && !status && !edited) {
         return null;
     }
-    return (jsxs("span", { className: styles.meta, "data-qa": "chat-bubble-meta", children: [(time || edited) && (jsxs(Text, { Element: "span", typography: "label-4-regular", style: getColors(mode).secondaryText, children: [edited && jsx("span", { className: styles.edited, children: editedLabel }), time && jsx("span", { children: time })] })), visibleStatus] }));
+    return (jsxs("span", { className: styles.meta, "data-qa": "chat-bubble-meta", children: [(time || edited) && (jsxs(Text, { Element: "span", typography: "label-4-regular", style: getColors(mode).secondaryText, children: [edited && jsx("span", { className: styles.edited, children: editedLabel }), time && jsx("span", { children: time })] })), status] }));
 };
 
 export { Meta };

package/Meta.js.map

@@ -1 +1 @@
-{"version":3,"file":"Meta.js","sources":["src/Meta.tsx"],"sourcesContent":["import { type FC, type ReactNode } from 'react';\n\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { getColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport type { ChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './chat-bubble.less';\n\ninterface MetaProps {\n    mode: ChatBubbleMode;\n    status?: ReactNode;\n    time?: ReactNode;\n    edited?: boolean;\n}\n\n/**\n * Время и статус сообщения\n * Рендерится внутри последнего элемента контента.\n * */\nexport const Meta: FC<MetaProps> = ({ edited, mode, status, time }) => {\n    const visibleStatus = mode === 'incoming' ? undefined : status;\n    const editedLabel = useTranslation('ChatBubble', 'edited');\n\n    if (!time && !visibleStatus && !edited) {\n        return null;\n    }\n\n    return (\n        <span className={styles.meta} data-qa=\"chat-bubble-meta\">\n            {(time || edited) && (\n                <Text Element=\"span\" typography=\"label-4-regular\" style={getColors(mode).secondaryText}>\n                    {edited && <span className={styles.edited}>{editedLabel}</span>}\n                    {time && <span>{time}</span>}\n                </Text>\n            )}\n            {visibleStatus}\n        </span>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAgBA;;;AAGK;AACE,MAAM,IAAI,GAAkB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAI;AAClE,IAAA,MAAM,aAAa,GAAG,IAAI,KAAK,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;IAC/D,MAAM,WAAW,GAAG,cAAc,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;IAE3D,IAAI,CAAC,IAAI,IAAI,CAAC,aAAa,IAAI,CAAC,MAAM,EAAE;AACpC,QAAA,OAAO,IAAI,CAAC;KACf;AAED,IAAA,QACIA,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,SAAA,EAAU,kBAAkB,EAAA,QAAA,EAAA,CACnD,CAAC,IAAI,IAAI,MAAM,MACZA,IAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,iBAAiB,EAAC,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,aAAa,EACjF,QAAA,EAAA,CAAA,MAAM,IAAIC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAA,QAAA,EAAG,WAAW,EAAA,CAAQ,EAC9D,IAAI,IAAIA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAO,IAAI,EAAA,CAAQ,CACzB,EAAA,CAAA,CACV,EACA,aAAa,CACX,EAAA,CAAA,EACT;AACN;;;;"}
+{"version":3,"file":"Meta.js","sources":["src/Meta.tsx"],"sourcesContent":["import { type FC, type ReactNode } from 'react';\n\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { getColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport type { ChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './chat-bubble.less';\n\ninterface MetaProps {\n    mode: ChatBubbleMode;\n    status?: ReactNode;\n    time?: ReactNode;\n    edited?: boolean;\n}\n\n/**\n * Время и статус сообщения\n * Рендерится внутри последнего элемента контента.\n * */\nexport const Meta: FC<MetaProps> = ({ edited, mode, status, time }) => {\n    const editedLabel = useTranslation('ChatBubble', 'edited');\n\n    if (!time && !status && !edited) {\n        return null;\n    }\n\n    return (\n        <span className={styles.meta} data-qa=\"chat-bubble-meta\">\n            {(time || edited) && (\n                <Text Element=\"span\" typography=\"label-4-regular\" style={getColors(mode).secondaryText}>\n                    {edited && <span className={styles.edited}>{editedLabel}</span>}\n                    {time && <span>{time}</span>}\n                </Text>\n            )}\n            {status}\n        </span>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAgBA;;;AAGK;AACE,MAAM,IAAI,GAAkB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAI;IAClE,MAAM,WAAW,GAAG,cAAc,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;IAE3D,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE;AAC7B,QAAA,OAAO,IAAI,CAAC;KACf;AAED,IAAA,QACIA,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,SAAA,EAAU,kBAAkB,EAAA,QAAA,EAAA,CACnD,CAAC,IAAI,IAAI,MAAM,MACZA,IAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,iBAAiB,EAAC,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,aAAa,EACjF,QAAA,EAAA,CAAA,MAAM,IAAIC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAA,QAAA,EAAG,WAAW,EAAA,CAAQ,EAC9D,IAAI,IAAIA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAO,IAAI,EAAA,CAAQ,CACzB,EAAA,CAAA,CACV,EACA,MAAM,CACJ,EAAA,CAAA,EACT;AACN;;;;"}

package/Reply.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useChatBubbleColors } from './internal/colors.js';
 import { Text } from '@hh.ru/magritte-ui-typography';
-import { s as styles } from './chat-bubble-Cs9qnBg4.js';
+import { s as styles } from './chat-bubble-CL1yJA4w.js';
 import './internal/mode.js';
 
 /**

package/Snippet.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useChatBubbleColors } from './internal/colors.js';
 import { Text } from '@hh.ru/magritte-ui-typography';
-import { s as styles } from './chat-bubble-Cs9qnBg4.js';
+import { s as styles } from './chat-bubble-CL1yJA4w.js';
 import './internal/mode.js';
 
 /**

package/Status.d.ts

@@ -1,7 +1,7 @@
 import { type ReactNode } from 'react';
 import { type TooltipHoverProps } from '@hh.ru/magritte-ui-tooltip';
 /** Статус исходящего сообщения */
-export type ChatBubbleStatusValue = 'sending' | 'sent' | 'delivered';
+export type ChatBubbleStatusValue = 'sending' | 'sent' | 'read' | 'deleted';
 export interface ChatBubbleStatusProps extends Omit<TooltipHoverProps, 'activatorRef' | 'placement' | 'size' | 'children'> {
     /** Статус отправки. У сообщений от бота не используется — там всегда «видно только вам»
      * @default sending

package/Status.js

@@ -5,14 +5,15 @@ import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
 import { useTranslation } from '@hh.ru/magritte-common-use-translation';
 import { getColors } from './internal/colors.js';
 import { useChatBubbleMode } from './internal/mode.js';
-import { EyeOutlinedSize16, ClockOutlinedSize16, CheckOutlinedSize16, CheckDoubleOutlinedSize16 } from '@hh.ru/magritte-ui-icon/icon';
+import { EyeOutlinedSize16, ClockOutlinedSize16, CheckOutlinedSize16, CheckDoubleOutlinedSize16, TrashOutlinedSize16 } from '@hh.ru/magritte-ui-icon/icon';
 import { TooltipHover } from '@hh.ru/magritte-ui-tooltip';
-import { s as styles } from './chat-bubble-Cs9qnBg4.js';
+import { s as styles } from './chat-bubble-CL1yJA4w.js';
 
 const ICON = {
     sending: ClockOutlinedSize16,
     sent: CheckOutlinedSize16,
-    delivered: CheckDoubleOutlinedSize16,
+    read: CheckDoubleOutlinedSize16,
+    deleted: TrashOutlinedSize16,
 };
 /**
  * Статус сообщения: иконка и подсказка к ней.
@@ -23,7 +24,12 @@ const ChatBubbleStatus = forwardRef(({ children, 'data-qa': dataQa = 'chat-bubbl
     const activatorRef = useRef(null);
     const activator = useMultipleRefs(ref, activatorRef);
     const isBot = mode === 'bot';
+    const isDeleted = value === 'deleted';
     const label = useTranslation('ChatBubble', isBot ? 'private' : value);
+    // пометка об удалении ставится у любого отправителя, остальные статусы — только у своих сообщений
+    if (mode === 'incoming' && !isDeleted) {
+        return null;
+    }
     // у бота по макету всегда глаз, статус отправки к нему не применяется
     const Icon = isBot ? EyeOutlinedSize16 : ICON[value];
     return (jsxs(Fragment, { children: [jsx("span", { ref: activator, className: styles.status, "data-qa": dataQa, "data-status": isBot ? 'private' : value, children: jsx(Icon, { initialColor: colors.statusIcon, "aria-label": label }) }), jsx(TooltipHover, { ...tooltipProps, activatorRef: activatorRef, placement: "top-center", size: "small", children: children ?? label })] }));

package/Status.js.map

@@ -1 +1 @@
-{"version":3,"file":"Status.js","sources":["src/Status.tsx"],"sourcesContent":["import { forwardRef, useRef, type ReactNode } from 'react';\n\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { getColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { useChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/internal/mode';\nimport {\n    CheckDoubleOutlinedSize16,\n    CheckOutlinedSize16,\n    ClockOutlinedSize16,\n    EyeOutlinedSize16,\n} from '@hh.ru/magritte-ui-icon/icon';\nimport { TooltipHover, type TooltipHoverProps } from '@hh.ru/magritte-ui-tooltip';\n\nimport styles from './chat-bubble.less';\n\n/** Статус исходящего сообщения */\nexport type ChatBubbleStatusValue = 'sending' | 'sent' | 'delivered';\n\nconst ICON = {\n    sending: ClockOutlinedSize16,\n    sent: CheckOutlinedSize16,\n    delivered: CheckDoubleOutlinedSize16,\n} as const;\n\nexport interface ChatBubbleStatusProps\n    extends Omit<TooltipHoverProps, 'activatorRef' | 'placement' | 'size' | 'children'> {\n    /** Статус отправки. У сообщений от бота не используется — там всегда «видно только вам»\n     * @default sending\n     */\n    value?: ChatBubbleStatusValue;\n    /** Текст подсказки. По умолчанию берётся из словаря по статусу */\n    children?: ReactNode;\n    /** Значение data-qa\n     * @default chat-bubble-status\n     */\n    'data-qa'?: string;\n}\n\n/**\n * Статус сообщения: иконка и подсказка к ней.\n */\nexport const ChatBubbleStatus = forwardRef<HTMLSpanElement, ChatBubbleStatusProps>(\n    ({ children, 'data-qa': dataQa = 'chat-bubble-status', value = 'sending', ...tooltipProps }, ref) => {\n        const mode = useChatBubbleMode();\n        const colors = getColors(mode);\n        const activatorRef = useRef<HTMLSpanElement>(null);\n        const activator = useMultipleRefs(ref, activatorRef);\n        const isBot = mode === 'bot';\n        const label = useTranslation('ChatBubble', isBot ? 'private' : value);\n\n        // у бота по макету всегда глаз, статус отправки к нему не применяется\n        const Icon = isBot ? EyeOutlinedSize16 : ICON[value];\n\n        return (\n            <>\n                <span\n                    ref={activator}\n                    className={styles.status}\n                    data-qa={dataQa}\n                    data-status={isBot ? 'private' : value}\n                >\n                    <Icon initialColor={colors.statusIcon} aria-label={label} />\n                </span>\n                <TooltipHover {...tooltipProps} activatorRef={activatorRef} placement=\"top-center\" size=\"small\">\n                    {children ?? label}\n                </TooltipHover>\n            </>\n        );\n    }\n);\n\nChatBubbleStatus.displayName = 'ChatBubbleStatus';\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;AAmBA,MAAM,IAAI,GAAG;AACT,IAAA,OAAO,EAAE,mBAAmB;AAC5B,IAAA,IAAI,EAAE,mBAAmB;AACzB,IAAA,SAAS,EAAE,yBAAyB;CAC9B,CAAC;AAgBX;;AAEG;AACU,MAAA,gBAAgB,GAAG,UAAU,CACtC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,GAAG,oBAAoB,EAAE,KAAK,GAAG,SAAS,EAAE,GAAG,YAAY,EAAE,EAAE,GAAG,KAAI;AAChG,IAAA,MAAM,IAAI,GAAG,iBAAiB,EAAE,CAAC;AACjC,IAAA,MAAM,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;AAC/B,IAAA,MAAM,YAAY,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IACnD,MAAM,SAAS,GAAG,eAAe,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;AACrD,IAAA,MAAM,KAAK,GAAG,IAAI,KAAK,KAAK,CAAC;AAC7B,IAAA,MAAM,KAAK,GAAG,cAAc,CAAC,YAAY,EAAE,KAAK,GAAG,SAAS,GAAG,KAAK,CAAC,CAAC;;AAGtE,IAAA,MAAM,IAAI,GAAG,KAAK,GAAG,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;AAErD,IAAA,QACIA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACIC,GACI,CAAA,MAAA,EAAA,EAAA,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,MAAM,CAAC,MAAM,EACf,SAAA,EAAA,MAAM,EACF,aAAA,EAAA,KAAK,GAAG,SAAS,GAAG,KAAK,EAEtC,QAAA,EAAAA,GAAA,CAAC,IAAI,EAAA,EAAC,YAAY,EAAE,MAAM,CAAC,UAAU,EAAA,YAAA,EAAc,KAAK,EAAA,CAAI,EACzD,CAAA,EACPA,GAAC,CAAA,YAAY,EAAK,EAAA,GAAA,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAC1F,QAAA,EAAA,QAAQ,IAAI,KAAK,EACP,CAAA,CAAA,EAAA,CAChB,EACL;AACN,CAAC,EACH;AAEF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;;;;"}
+{"version":3,"file":"Status.js","sources":["src/Status.tsx"],"sourcesContent":["import { forwardRef, useRef, type ReactNode } from 'react';\n\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { getColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { useChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/internal/mode';\nimport {\n    CheckDoubleOutlinedSize16,\n    CheckOutlinedSize16,\n    ClockOutlinedSize16,\n    EyeOutlinedSize16,\n    TrashOutlinedSize16,\n} from '@hh.ru/magritte-ui-icon/icon';\nimport { TooltipHover, type TooltipHoverProps } from '@hh.ru/magritte-ui-tooltip';\n\nimport styles from './chat-bubble.less';\n\n/** Статус исходящего сообщения */\nexport type ChatBubbleStatusValue = 'sending' | 'sent' | 'read' | 'deleted';\n\nconst ICON = {\n    sending: ClockOutlinedSize16,\n    sent: CheckOutlinedSize16,\n    read: CheckDoubleOutlinedSize16,\n    deleted: TrashOutlinedSize16,\n} as const;\n\nexport interface ChatBubbleStatusProps\n    extends Omit<TooltipHoverProps, 'activatorRef' | 'placement' | 'size' | 'children'> {\n    /** Статус отправки. У сообщений от бота не используется — там всегда «видно только вам»\n     * @default sending\n     */\n    value?: ChatBubbleStatusValue;\n    /** Текст подсказки. По умолчанию берётся из словаря по статусу */\n    children?: ReactNode;\n    /** Значение data-qa\n     * @default chat-bubble-status\n     */\n    'data-qa'?: string;\n}\n\n/**\n * Статус сообщения: иконка и подсказка к ней.\n */\nexport const ChatBubbleStatus = forwardRef<HTMLSpanElement, ChatBubbleStatusProps>(\n    ({ children, 'data-qa': dataQa = 'chat-bubble-status', value = 'sending', ...tooltipProps }, ref) => {\n        const mode = useChatBubbleMode();\n        const colors = getColors(mode);\n        const activatorRef = useRef<HTMLSpanElement>(null);\n        const activator = useMultipleRefs(ref, activatorRef);\n        const isBot = mode === 'bot';\n        const isDeleted = value === 'deleted';\n        const label = useTranslation('ChatBubble', isBot ? 'private' : value);\n\n        // пометка об удалении ставится у любого отправителя, остальные статусы — только у своих сообщений\n        if (mode === 'incoming' && !isDeleted) {\n            return null;\n        }\n\n        // у бота по макету всегда глаз, статус отправки к нему не применяется\n        const Icon = isBot ? EyeOutlinedSize16 : ICON[value];\n\n        return (\n            <>\n                <span\n                    ref={activator}\n                    className={styles.status}\n                    data-qa={dataQa}\n                    data-status={isBot ? 'private' : value}\n                >\n                    <Icon initialColor={colors.statusIcon} aria-label={label} />\n                </span>\n                <TooltipHover {...tooltipProps} activatorRef={activatorRef} placement=\"top-center\" size=\"small\">\n                    {children ?? label}\n                </TooltipHover>\n            </>\n        );\n    }\n);\n\nChatBubbleStatus.displayName = 'ChatBubbleStatus';\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;AAoBA,MAAM,IAAI,GAAG;AACT,IAAA,OAAO,EAAE,mBAAmB;AAC5B,IAAA,IAAI,EAAE,mBAAmB;AACzB,IAAA,IAAI,EAAE,yBAAyB;AAC/B,IAAA,OAAO,EAAE,mBAAmB;CACtB,CAAC;AAgBX;;AAEG;AACU,MAAA,gBAAgB,GAAG,UAAU,CACtC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,GAAG,oBAAoB,EAAE,KAAK,GAAG,SAAS,EAAE,GAAG,YAAY,EAAE,EAAE,GAAG,KAAI;AAChG,IAAA,MAAM,IAAI,GAAG,iBAAiB,EAAE,CAAC;AACjC,IAAA,MAAM,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;AAC/B,IAAA,MAAM,YAAY,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IACnD,MAAM,SAAS,GAAG,eAAe,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;AACrD,IAAA,MAAM,KAAK,GAAG,IAAI,KAAK,KAAK,CAAC;AAC7B,IAAA,MAAM,SAAS,GAAG,KAAK,KAAK,SAAS,CAAC;AACtC,IAAA,MAAM,KAAK,GAAG,cAAc,CAAC,YAAY,EAAE,KAAK,GAAG,SAAS,GAAG,KAAK,CAAC,CAAC;;AAGtE,IAAA,IAAI,IAAI,KAAK,UAAU,IAAI,CAAC,SAAS,EAAE;AACnC,QAAA,OAAO,IAAI,CAAC;KACf;;AAGD,IAAA,MAAM,IAAI,GAAG,KAAK,GAAG,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;AAErD,IAAA,QACIA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACIC,GACI,CAAA,MAAA,EAAA,EAAA,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,MAAM,CAAC,MAAM,EACf,SAAA,EAAA,MAAM,EACF,aAAA,EAAA,KAAK,GAAG,SAAS,GAAG,KAAK,EAEtC,QAAA,EAAAA,GAAA,CAAC,IAAI,EAAA,EAAC,YAAY,EAAE,MAAM,CAAC,UAAU,EAAA,YAAA,EAAc,KAAK,EAAA,CAAI,EACzD,CAAA,EACPA,GAAC,CAAA,YAAY,EAAK,EAAA,GAAA,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAC1F,QAAA,EAAA,QAAQ,IAAI,KAAK,EACP,CAAA,CAAA,EAAA,CAChB,EACL;AACN,CAAC,EACH;AAEF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;;;;"}

package/Tail.js

@@ -2,7 +2,7 @@ import './index.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import classnames from 'classnames';
 import { useChatBubbleMode } from './internal/mode.js';
-import { s as styles } from './chat-bubble-Cs9qnBg4.js';
+import { s as styles } from './chat-bubble-CL1yJA4w.js';
 import 'react';
 
 const OUTLINE = 'M6.5 0C6.5 7.5 5.2 11.8 1.6 13.4C0.9 13.9 0.6 14.5 1.1 14.5H7';

package/chat-bubble-CL1yJA4w.js

@@ -0,0 +1,5 @@
+import './index.css';
+var styles = {"chat-bubble":"magritte-chat-bubble___ds9CP_3-0-1","chatBubble":"magritte-chat-bubble___ds9CP_3-0-1","outgoing":"magritte-outgoing___3n00o_3-0-1","bot":"magritte-bot___Z6vZA_3-0-1","row":"magritte-row___mQNnt_3-0-1","bubble":"magritte-bubble___NVuDI_3-0-1","with-tail":"magritte-with-tail___IdixJ_3-0-1","withTail":"magritte-with-tail___IdixJ_3-0-1","tail":"magritte-tail___E2hdk_3-0-1","tail-outgoing":"magritte-tail-outgoing___Pn3MI_3-0-1","tailOutgoing":"magritte-tail-outgoing___Pn3MI_3-0-1","buttons":"magritte-buttons___yQqBi_3-0-1","aside":"magritte-aside___bTex-_3-0-1","aside-revealed":"magritte-aside-revealed___CRBl7_3-0-1","asideRevealed":"magritte-aside-revealed___CRBl7_3-0-1","error-text":"magritte-error-text___1ZxWY_3-0-1","errorText":"magritte-error-text___1ZxWY_3-0-1","file":"magritte-file___k2IKy_3-0-1","file-preview":"magritte-file-preview___eJKu8_3-0-1","filePreview":"magritte-file-preview___eJKu8_3-0-1","media":"magritte-media___9jH2k_3-0-1","media-blur":"magritte-media-blur___TbiMa_3-0-1","mediaBlur":"magritte-media-blur___TbiMa_3-0-1","media-image":"magritte-media-image___G-FkF_3-0-1","mediaImage":"magritte-media-image___G-FkF_3-0-1","media-content":"magritte-media-content___n3XbD_3-0-1","mediaContent":"magritte-media-content___n3XbD_3-0-1","media-format":"magritte-media-format___AdfCK_3-0-1","mediaFormat":"magritte-media-format___AdfCK_3-0-1","media-meta":"magritte-media-meta___oSxxr_3-0-1","mediaMeta":"magritte-media-meta___oSxxr_3-0-1","reply":"magritte-reply___-QCK7_3-0-1","reply-preview":"magritte-reply-preview___qvlNT_3-0-1","replyPreview":"magritte-reply-preview___qvlNT_3-0-1","reply-body":"magritte-reply-body___f2xx7_3-0-1","replyBody":"magritte-reply-body___f2xx7_3-0-1","snippet":"magritte-snippet___8k9xb_3-0-1","meta":"magritte-meta___1qhjm_3-0-1","edited":"magritte-edited___m-zmB_3-0-1","status":"magritte-status___dHzCt_3-0-1","message-title":"magritte-message-title___dgBFk_3-0-1","messageTitle":"magritte-message-title___dgBFk_3-0-1","label":"magritte-label___i0Wyt_3-0-1","message":"magritte-message___7TEpw_3-0-1"};
+
+export { styles as s };
+//# sourceMappingURL=chat-bubble-CL1yJA4w.js.map

package/chat-bubble-CL1yJA4w.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-bubble-CL1yJA4w.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/index.css

@@ -1,85 +1,85 @@
 :root{
-  --magritte-color-background-overlay-v25-0-1:#20262bad;
-  --magritte-color-text-constant-v25-0-1:#ffffff;
-  --magritte-color-component-chat-bubble-background-incoming-v25-0-1:#F4F6FB;
-  --magritte-color-component-chat-bubble-background-outgoing-v25-0-1:#0070ff;
-  --magritte-color-component-chat-bubble-background-bot-v25-0-1:#f9f7ff;
-  --magritte-color-component-chat-bubble-border-incoming-v25-0-1:#EEF1F7;
-  --magritte-color-component-chat-bubble-border-outgoing-v25-0-1:#0d63e3;
-  --magritte-color-component-chat-bubble-border-bot-v25-0-1:#f3eeff;
-  --magritte-color-component-chat-bubble-border-image-v25-0-1:#0000001a;
-  --magritte-color-component-chat-bubble-snippet-background-incoming-v25-0-1:#EEF1F7;
-  --magritte-color-component-chat-bubble-snippet-background-outgoing-v25-0-1:#2b7fff;
-  --magritte-color-component-chat-bubble-snippet-background-bot-v25-0-1:#f3eeff;
-  --magritte-color-component-chat-bubble-snippet-line-incoming-v25-0-1:#0070ff;
-  --magritte-color-component-chat-bubble-snippet-line-outgoing-v25-0-1:#f3f9ff;
-  --magritte-color-component-chat-bubble-snippet-line-bot-v25-0-1:#9054ea;
+  --magritte-color-background-overlay-v25-1-0:#20262bad;
+  --magritte-color-text-constant-v25-1-0:#ffffff;
+  --magritte-color-component-chat-bubble-background-incoming-v25-1-0:#F4F6FB;
+  --magritte-color-component-chat-bubble-background-outgoing-v25-1-0:#0070ff;
+  --magritte-color-component-chat-bubble-background-bot-v25-1-0:#f9f7ff;
+  --magritte-color-component-chat-bubble-border-incoming-v25-1-0:#EEF1F7;
+  --magritte-color-component-chat-bubble-border-outgoing-v25-1-0:#0d63e3;
+  --magritte-color-component-chat-bubble-border-bot-v25-1-0:#f3eeff;
+  --magritte-color-component-chat-bubble-border-image-v25-1-0:#0000001a;
+  --magritte-color-component-chat-bubble-snippet-background-incoming-v25-1-0:#EEF1F7;
+  --magritte-color-component-chat-bubble-snippet-background-outgoing-v25-1-0:#2b7fff;
+  --magritte-color-component-chat-bubble-snippet-background-bot-v25-1-0:#f3eeff;
+  --magritte-color-component-chat-bubble-snippet-line-incoming-v25-1-0:#0070ff;
+  --magritte-color-component-chat-bubble-snippet-line-outgoing-v25-1-0:#f3f9ff;
+  --magritte-color-component-chat-bubble-snippet-line-bot-v25-1-0:#9054ea;
 }
 
 :root{
-  --magritte-semantic-animation-time-s-duration-v25-0-1:200ms;
+  --magritte-semantic-animation-time-s-duration-v25-1-0:200ms;
 }
 
 .magritte-night-theme{
-  --magritte-color-component-chat-bubble-background-incoming-v25-0-1:#262626;
-  --magritte-color-component-chat-bubble-background-outgoing-v25-0-1:#2b7fff;
-  --magritte-color-component-chat-bubble-background-bot-v25-0-1:#312F47;
-  --magritte-color-component-chat-bubble-border-incoming-v25-0-1:#303030;
-  --magritte-color-component-chat-bubble-border-outgoing-v25-0-1:#0070ff;
-  --magritte-color-component-chat-bubble-border-bot-v25-0-1:#403A59;
-  --magritte-color-component-chat-bubble-snippet-background-incoming-v25-0-1:#303030;
-  --magritte-color-component-chat-bubble-snippet-background-outgoing-v25-0-1:#468ffd;
-  --magritte-color-component-chat-bubble-snippet-background-bot-v25-0-1:#403A59;
+  --magritte-color-component-chat-bubble-background-incoming-v25-1-0:#262626;
+  --magritte-color-component-chat-bubble-background-outgoing-v25-1-0:#2b7fff;
+  --magritte-color-component-chat-bubble-background-bot-v25-1-0:#312F47;
+  --magritte-color-component-chat-bubble-border-incoming-v25-1-0:#303030;
+  --magritte-color-component-chat-bubble-border-outgoing-v25-1-0:#0070ff;
+  --magritte-color-component-chat-bubble-border-bot-v25-1-0:#403A59;
+  --magritte-color-component-chat-bubble-snippet-background-incoming-v25-1-0:#303030;
+  --magritte-color-component-chat-bubble-snippet-background-outgoing-v25-1-0:#468ffd;
+  --magritte-color-component-chat-bubble-snippet-background-bot-v25-1-0:#403A59;
 }
 
 .magritte-zp-day-theme{
-  --magritte-color-component-chat-bubble-background-outgoing-v25-0-1:#7195AF;
-  --magritte-color-component-chat-bubble-border-outgoing-v25-0-1:#557B96;
-  --magritte-color-component-chat-bubble-snippet-background-outgoing-v25-0-1:#90ACC1;
-  --magritte-color-component-chat-bubble-snippet-line-incoming-v25-0-1:#557B96;
-}
-.magritte-chat-bubble___ds9CP_2-0-5{
-  --magritte-chat-bubble-background:var(--magritte-color-component-chat-bubble-background-incoming-v25-0-1);
-  --magritte-chat-bubble-border:var(--magritte-color-component-chat-bubble-border-incoming-v25-0-1);
-  --magritte-chat-bubble-snippet-background:var(--magritte-color-component-chat-bubble-snippet-background-incoming-v25-0-1);
-  --magritte-chat-bubble-snippet-line:var(--magritte-color-component-chat-bubble-snippet-line-incoming-v25-0-1);
+  --magritte-color-component-chat-bubble-background-outgoing-v25-1-0:#7195AF;
+  --magritte-color-component-chat-bubble-border-outgoing-v25-1-0:#557B96;
+  --magritte-color-component-chat-bubble-snippet-background-outgoing-v25-1-0:#90ACC1;
+  --magritte-color-component-chat-bubble-snippet-line-incoming-v25-1-0:#557B96;
+}
+.magritte-chat-bubble___ds9CP_3-0-1{
+  --magritte-chat-bubble-background:var(--magritte-color-component-chat-bubble-background-incoming-v25-1-0);
+  --magritte-chat-bubble-border:var(--magritte-color-component-chat-bubble-border-incoming-v25-1-0);
+  --magritte-chat-bubble-snippet-background:var(--magritte-color-component-chat-bubble-snippet-background-incoming-v25-1-0);
+  --magritte-chat-bubble-snippet-line:var(--magritte-color-component-chat-bubble-snippet-line-incoming-v25-1-0);
   display:flex;
   flex-direction:column;
   align-items:flex-start;
   max-width:calc(100% - 40px);
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-chat-bubble___ds9CP_2-0-5{
+  body.magritte-old-layout .magritte-chat-bubble___ds9CP_3-0-1{
     max-width:min(460px, 100%);
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-chat-bubble___ds9CP_2-0-5{
+  body:not(.magritte-old-layout) .magritte-chat-bubble___ds9CP_3-0-1{
     max-width:min(460px, 100%);
   }
 }
-.magritte-outgoing___3n00o_2-0-5{
-  --magritte-chat-bubble-background:var(--magritte-color-component-chat-bubble-background-outgoing-v25-0-1);
-  --magritte-chat-bubble-border:var(--magritte-color-component-chat-bubble-border-outgoing-v25-0-1);
-  --magritte-chat-bubble-snippet-background:var(--magritte-color-component-chat-bubble-snippet-background-outgoing-v25-0-1);
-  --magritte-chat-bubble-snippet-line:var(--magritte-color-component-chat-bubble-snippet-line-outgoing-v25-0-1);
+.magritte-outgoing___3n00o_3-0-1{
+  --magritte-chat-bubble-background:var(--magritte-color-component-chat-bubble-background-outgoing-v25-1-0);
+  --magritte-chat-bubble-border:var(--magritte-color-component-chat-bubble-border-outgoing-v25-1-0);
+  --magritte-chat-bubble-snippet-background:var(--magritte-color-component-chat-bubble-snippet-background-outgoing-v25-1-0);
+  --magritte-chat-bubble-snippet-line:var(--magritte-color-component-chat-bubble-snippet-line-outgoing-v25-1-0);
   align-items:flex-end;
   margin-left:auto;
 }
-.magritte-bot___Z6vZA_2-0-5{
-  --magritte-chat-bubble-background:var(--magritte-color-component-chat-bubble-background-bot-v25-0-1);
-  --magritte-chat-bubble-border:var(--magritte-color-component-chat-bubble-border-bot-v25-0-1);
-  --magritte-chat-bubble-snippet-background:var(--magritte-color-component-chat-bubble-snippet-background-bot-v25-0-1);
-  --magritte-chat-bubble-snippet-line:var(--magritte-color-component-chat-bubble-snippet-line-bot-v25-0-1);
+.magritte-bot___Z6vZA_3-0-1{
+  --magritte-chat-bubble-background:var(--magritte-color-component-chat-bubble-background-bot-v25-1-0);
+  --magritte-chat-bubble-border:var(--magritte-color-component-chat-bubble-border-bot-v25-1-0);
+  --magritte-chat-bubble-snippet-background:var(--magritte-color-component-chat-bubble-snippet-background-bot-v25-1-0);
+  --magritte-chat-bubble-snippet-line:var(--magritte-color-component-chat-bubble-snippet-line-bot-v25-1-0);
 }
-.magritte-row___mQNnt_2-0-5{
+.magritte-row___mQNnt_3-0-1{
   display:flex;
   position:relative;
   align-items:flex-end;
   gap:8px;
   max-width:100%;
 }
-.magritte-bubble___NVuDI_2-0-5{
+.magritte-bubble___NVuDI_3-0-1{
   position:relative;
   box-sizing:border-box;
   min-width:0;
@@ -90,31 +90,31 @@
   border-radius:20px;
   overflow-wrap:break-word;
 }
-.magritte-with-tail___IdixJ_2-0-5 .magritte-bubble___NVuDI_2-0-5{
+.magritte-with-tail___IdixJ_3-0-1 .magritte-bubble___NVuDI_3-0-1{
   border-bottom-left-radius:0;
 }
-.magritte-with-tail___IdixJ_2-0-5.magritte-outgoing___3n00o_2-0-5 .magritte-bubble___NVuDI_2-0-5{
+.magritte-with-tail___IdixJ_3-0-1.magritte-outgoing___3n00o_3-0-1 .magritte-bubble___NVuDI_3-0-1{
   border-bottom-left-radius:20px;
   border-bottom-right-radius:0;
 }
-.magritte-tail___E2hdk_2-0-5{
+.magritte-tail___E2hdk_3-0-1{
   position:absolute;
   bottom:-1px;
   left:-7px;
 }
-.magritte-tail-outgoing___Pn3MI_2-0-5{
+.magritte-tail-outgoing___Pn3MI_3-0-1{
   left:auto;
   right:-7px;
   transform:scaleX(-1);
 }
-.magritte-buttons___yQqBi_2-0-5{
+.magritte-buttons___yQqBi_3-0-1{
   display:grid;
   grid-template-columns:repeat(2, 1fr);
   gap:8px;
   width:100%;
   margin-top:4px;
 }
-.magritte-aside___bTex-_2-0-5{
+.magritte-aside___bTex-_3-0-1{
   display:flex;
   position:absolute;
   top:0;
@@ -123,35 +123,35 @@
   align-items:flex-start;
   padding-left:8px;
   opacity:0;
-  transition:opacity var(--magritte-semantic-animation-time-s-duration-v25-0-1) ease-in-out;
+  transition:opacity var(--magritte-semantic-animation-time-s-duration-v25-1-0) ease-in-out;
 }
-.magritte-aside-revealed___CRBl7_2-0-5{
+.magritte-aside-revealed___CRBl7_3-0-1{
   opacity:1;
 }
-.magritte-outgoing___3n00o_2-0-5 .magritte-aside___bTex-_2-0-5{
+.magritte-outgoing___3n00o_3-0-1 .magritte-aside___bTex-_3-0-1{
   left:auto;
   right:100%;
   padding-right:8px;
   padding-left:0;
 }
-.magritte-buttons___yQqBi_2-0-5 > *:last-child:nth-child(odd){
+.magritte-buttons___yQqBi_3-0-1 > *:last-child:nth-child(odd){
   grid-column:span 2;
 }
-.magritte-error-text___1ZxWY_2-0-5{
+.magritte-error-text___1ZxWY_3-0-1{
   margin-top:2px;
 }
-.magritte-file___k2IKy_2-0-5{
+.magritte-file___k2IKy_3-0-1{
   display:flex;
   align-items:flex-end;
 }
-.magritte-file-preview___eJKu8_2-0-5{
+.magritte-file-preview___eJKu8_3-0-1{
   display:block;
   width:48px;
   height:48px;
   border-radius:8px;
   object-fit:cover;
 }
-.magritte-media___9jH2k_2-0-5{
+.magritte-media___9jH2k_3-0-1{
   display:flex;
   position:relative;
   box-sizing:border-box;
@@ -161,21 +161,21 @@
   margin:0 -8px;
   border-radius:16px;
   overflow:hidden;
-  box-shadow:inset 0 0 0 1px var(--magritte-color-component-chat-bubble-border-image-v25-0-1);
+  box-shadow:inset 0 0 0 1px var(--magritte-color-component-chat-bubble-border-image-v25-1-0);
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-media___9jH2k_2-0-5{
+  body.magritte-old-layout .magritte-media___9jH2k_3-0-1{
     max-width:452px;
     max-height:452px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-media___9jH2k_2-0-5{
+  body:not(.magritte-old-layout) .magritte-media___9jH2k_3-0-1{
     max-width:452px;
     max-height:452px;
   }
 }
-.magritte-media-blur___TbiMa_2-0-5{
+.magritte-media-blur___TbiMa_3-0-1{
   position:absolute;
   top:-96px;
   left:-96px;
@@ -185,59 +185,62 @@
   filter:blur(48px);
   object-fit:cover;
 }
-.magritte-media-image___G-FkF_2-0-5{
+.magritte-media-image___G-FkF_3-0-1{
   display:block;
   position:relative;
+  height:auto;
   max-width:100%;
   max-height:min(60vh, 452px);
   margin:auto;
+  object-fit:contain;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-media-image___G-FkF_2-0-5{
+  body.magritte-old-layout .magritte-media-image___G-FkF_3-0-1{
     max-height:452px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-media-image___G-FkF_2-0-5{
+  body:not(.magritte-old-layout) .magritte-media-image___G-FkF_3-0-1{
     max-height:452px;
   }
 }
-.magritte-media-content___n3XbD_2-0-5{
+.magritte-media-content___n3XbD_3-0-1{
   display:flex;
   position:absolute;
   inset:0;
   align-items:center;
   justify-content:center;
 }
-.magritte-media-format___AdfCK_2-0-5{
+.magritte-media-format___AdfCK_3-0-1{
   display:flex;
   position:absolute;
   padding:2px 8px;
-  background-color:var(--magritte-color-background-overlay-v25-0-1);
+  background-color:var(--magritte-color-background-overlay-v25-1-0);
   border-radius:12px;
   backdrop-filter:blur(24px);
   top:4px;
   left:4px;
 }
-.magritte-media-meta___oSxxr_2-0-5{
-  --magritte-ui-text-color-override:var(--magritte-color-text-constant-v25-0-1);
+.magritte-media-meta___oSxxr_3-0-1{
+  --magritte-ui-text-color-override:var(--magritte-color-text-constant-v25-1-0);
   display:flex;
   position:absolute;
   padding:2px 8px;
-  background-color:var(--magritte-color-background-overlay-v25-0-1);
+  background-color:var(--magritte-color-background-overlay-v25-1-0);
   border-radius:12px;
   backdrop-filter:blur(24px);
   right:4px;
   bottom:4px;
   align-items:center;
 }
-.magritte-media-meta___oSxxr_2-0-5:empty{
+.magritte-media-meta___oSxxr_3-0-1:empty,
+.magritte-media-meta___oSxxr_3-0-1:has(> :empty){
   display:none;
 }
-.magritte-media-meta___oSxxr_2-0-5 > span{
+.magritte-media-meta___oSxxr_3-0-1 > span{
   margin-left:0;
 }
-.magritte-reply___-QCK7_2-0-5{
+.magritte-reply___-QCK7_3-0-1{
   display:flex;
   position:relative;
   padding:8px;
@@ -248,7 +251,7 @@
   align-items:center;
   gap:8px;
 }
-.magritte-reply___-QCK7_2-0-5::before{
+.magritte-reply___-QCK7_3-0-1::before{
   content:'';
   position:absolute;
   top:0;
@@ -257,22 +260,22 @@
   width:4px;
   background-color:var(--magritte-chat-bubble-snippet-line);
 }
-.magritte-reply-preview___qvlNT_2-0-5{
+.magritte-reply-preview___qvlNT_3-0-1{
   display:block;
   flex-shrink:0;
   width:40px;
   height:40px;
   border-radius:8px;
-  outline:1px solid var(--magritte-color-component-chat-bubble-border-image-v25-0-1);
+  outline:1px solid var(--magritte-color-component-chat-bubble-border-image-v25-1-0);
   outline-offset:-1px;
   object-fit:cover;
 }
-.magritte-reply-body___f2xx7_2-0-5{
+.magritte-reply-body___f2xx7_3-0-1{
   display:flex;
   flex-direction:column;
   min-width:0;
 }
-.magritte-snippet___8k9xb_2-0-5{
+.magritte-snippet___8k9xb_3-0-1{
   display:flex;
   position:relative;
   padding:8px;
@@ -283,7 +286,7 @@
   flex-direction:column;
   gap:2px;
 }
-.magritte-snippet___8k9xb_2-0-5::before{
+.magritte-snippet___8k9xb_3-0-1::before{
   content:'';
   position:absolute;
   top:0;
@@ -292,15 +295,15 @@
   width:4px;
   background-color:var(--magritte-chat-bubble-snippet-line);
 }
-.magritte-snippet___8k9xb_2-0-5 img{
+.magritte-snippet___8k9xb_3-0-1 img{
   display:block;
   max-width:100%;
   border-radius:4px;
-  outline:1px solid var(--magritte-color-component-chat-bubble-border-image-v25-0-1);
+  outline:1px solid var(--magritte-color-component-chat-bubble-border-image-v25-1-0);
   outline-offset:-1px;
   margin-top:6px;
 }
-.magritte-meta___1qhjm_2-0-5{
+.magritte-meta___1qhjm_3-0-1{
   float:right;
   margin-left:12px;
   white-space:nowrap;
@@ -313,53 +316,53 @@
   text-transform:none;
   text-decoration:none;
 }
-.magritte-edited___m-zmB_2-0-5{
+.magritte-edited___m-zmB_3-0-1{
   margin-right:4px;
 }
-.magritte-status___dHzCt_2-0-5{
+.magritte-status___dHzCt_3-0-1{
   display:inline-flex;
   vertical-align:middle;
 }
-.magritte-status___dHzCt_2-0-5:not(:first-child){
+.magritte-status___dHzCt_3-0-1:not(:first-child){
   margin-left:4px;
 }
-.magritte-message-title___dgBFk_2-0-5{
+.magritte-message-title___dgBFk_3-0-1{
   margin-bottom:4px;
 }
-.magritte-label___i0Wyt_2-0-5 + .magritte-media___9jH2k_2-0-5,
-.magritte-label___i0Wyt_2-0-5 + .magritte-message___7TEpw_2-0-5,
-.magritte-label___i0Wyt_2-0-5 + .magritte-snippet___8k9xb_2-0-5,
-.magritte-message___7TEpw_2-0-5 + .magritte-message___7TEpw_2-0-5,
-.magritte-bubble___NVuDI_2-0-5 > .magritte-meta___1qhjm_2-0-5{
+.magritte-label___i0Wyt_3-0-1 + .magritte-media___9jH2k_3-0-1,
+.magritte-label___i0Wyt_3-0-1 + .magritte-message___7TEpw_3-0-1,
+.magritte-label___i0Wyt_3-0-1 + .magritte-snippet___8k9xb_3-0-1,
+.magritte-message___7TEpw_3-0-1 + .magritte-message___7TEpw_3-0-1,
+.magritte-bubble___NVuDI_3-0-1 > .magritte-meta___1qhjm_3-0-1{
   margin-top:4px;
 }
-.magritte-label___i0Wyt_2-0-5 + .magritte-reply___-QCK7_2-0-5,
-.magritte-reply___-QCK7_2-0-5 + .magritte-media___9jH2k_2-0-5,
-.magritte-reply___-QCK7_2-0-5 + .magritte-message___7TEpw_2-0-5,
-.magritte-reply___-QCK7_2-0-5 + .magritte-snippet___8k9xb_2-0-5,
-.magritte-media___9jH2k_2-0-5 + .magritte-snippet___8k9xb_2-0-5{
+.magritte-label___i0Wyt_3-0-1 + .magritte-reply___-QCK7_3-0-1,
+.magritte-reply___-QCK7_3-0-1 + .magritte-media___9jH2k_3-0-1,
+.magritte-reply___-QCK7_3-0-1 + .magritte-message___7TEpw_3-0-1,
+.magritte-reply___-QCK7_3-0-1 + .magritte-snippet___8k9xb_3-0-1,
+.magritte-media___9jH2k_3-0-1 + .magritte-snippet___8k9xb_3-0-1{
   margin-top:8px;
 }
-.magritte-label___i0Wyt_2-0-5 + .magritte-file___k2IKy_2-0-5,
-.magritte-reply___-QCK7_2-0-5 + .magritte-file___k2IKy_2-0-5,
-.magritte-media___9jH2k_2-0-5 + .magritte-file___k2IKy_2-0-5,
-.magritte-media___9jH2k_2-0-5 + .magritte-message___7TEpw_2-0-5,
-.magritte-file___k2IKy_2-0-5 + .magritte-message___7TEpw_2-0-5,
-.magritte-file___k2IKy_2-0-5 + .magritte-snippet___8k9xb_2-0-5{
+.magritte-label___i0Wyt_3-0-1 + .magritte-file___k2IKy_3-0-1,
+.magritte-reply___-QCK7_3-0-1 + .magritte-file___k2IKy_3-0-1,
+.magritte-media___9jH2k_3-0-1 + .magritte-file___k2IKy_3-0-1,
+.magritte-media___9jH2k_3-0-1 + .magritte-message___7TEpw_3-0-1,
+.magritte-file___k2IKy_3-0-1 + .magritte-message___7TEpw_3-0-1,
+.magritte-file___k2IKy_3-0-1 + .magritte-snippet___8k9xb_3-0-1{
   margin-top:12px;
 }
-.magritte-message___7TEpw_2-0-5 + .magritte-snippet___8k9xb_2-0-5{
+.magritte-message___7TEpw_3-0-1 + .magritte-snippet___8k9xb_3-0-1{
   margin-top:16px;
 }
-.magritte-file___k2IKy_2-0-5 + .magritte-file___k2IKy_2-0-5{
+.magritte-file___k2IKy_3-0-1 + .magritte-file___k2IKy_3-0-1{
   margin-top:24px;
 }
-.magritte-label___i0Wyt_2-0-5{
+.magritte-label___i0Wyt_3-0-1{
   margin-top:-4px;
 }
-.magritte-bubble___NVuDI_2-0-5 > .magritte-media___9jH2k_2-0-5:first-child{
+.magritte-bubble___NVuDI_3-0-1 > .magritte-media___9jH2k_3-0-1:first-child{
   margin-top:-8px;
 }
-.magritte-bubble___NVuDI_2-0-5 > .magritte-media___9jH2k_2-0-5:not(:has( ~ :not(.magritte-tail___E2hdk_2-0-5))){
+.magritte-bubble___NVuDI_3-0-1 > .magritte-media___9jH2k_3-0-1:not(:has( ~ :not(.magritte-tail___E2hdk_3-0-1))){
   margin-bottom:-8px;
 }

package/index.js

@@ -11,7 +11,7 @@ import './internal/colors.js';
 import './internal/mode.js';
 import './internal/utils.js';
 import '@hh.ru/magritte-ui-icon/icon';
-import './chat-bubble-Cs9qnBg4.js';
+import './chat-bubble-CL1yJA4w.js';
 import './ErrorAction.js';
 import './internal/errorMenu.js';
 import '@hh.ru/magritte-ui-menu';

package/internal/colors.js

@@ -8,7 +8,7 @@ const COLORS = {
         secondaryText: 'secondary',
         accentText: 'accent',
         replyTitle: 'accent',
-        statusIcon: 'constant',
+        statusIcon: 'secondary',
         button: { mode: 'secondary', style: 'neutral' },
         link: { style: 'accent' },
         secondaryIcon: 'secondary',

package/internal/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","sources":["src/internal/colors.ts"],"sourcesContent":["import type { TokenColorBackground } from '@hh.ru/magritte-design-tokens/types';\nimport type { ButtonProps } from '@hh.ru/magritte-ui-button';\nimport { useChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/internal/mode';\nimport type { ChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/types';\nimport type { IconColor } from '@hh.ru/magritte-ui-icon';\nimport type { LinkProps } from '@hh.ru/magritte-ui-link';\nimport type { TextStyle } from '@hh.ru/magritte-ui-typography';\n\nexport interface ChatBubbleColors {\n    /** Основной текст сообщения, названия файла, текст сниппета */\n    text: TextStyle;\n    /** Второстепенный текст: время, размер файла */\n    secondaryText: TextStyle;\n    /** Акцентный текст: имя отправителя */\n    accentText: TextStyle;\n    /** Автор цитируемого сообщения (у бота акцентный, потому отдельно от accentText) */\n    replyTitle: TextStyle;\n    /** Иконка статуса, лежит на фоне баббла */\n    statusIcon: IconColor;\n    /** Кнопки под бабблом */\n    button: Pick<ButtonProps, 'mode' | 'style'>;\n    /** Ссылка-действие: «Открыть», «Загрузить» */\n    link: Pick<LinkProps, 'style' | 'mode'>;\n    /** Иконка рядом со второстепенным текстом: лоадер загрузки файла */\n    secondaryIcon: IconColor;\n    /** Иконка файла */\n    fileIcon: IconColor;\n    /** Подложка под иконкой файла */\n    fileIconBackground: TokenColorBackground;\n}\n\nconst COLORS: Record<ChatBubbleMode, ChatBubbleColors> = {\n    incoming: {\n        text: 'primary',\n        secondaryText: 'secondary',\n        accentText: 'accent',\n        replyTitle: 'accent',\n        statusIcon: 'constant',\n        button: { mode: 'secondary', style: 'neutral' },\n        link: { style: 'accent' },\n        secondaryIcon: 'secondary',\n        fileIcon: 'constant',\n        fileIconBackground: 'accent',\n    },\n    outgoing: {\n        text: 'constant',\n        secondaryText: 'constant',\n        accentText: 'constant',\n        replyTitle: 'constant',\n        statusIcon: 'constant',\n        button: { mode: 'primary', style: 'accent' },\n        link: { style: 'constant', mode: 'secondary' },\n        secondaryIcon: 'constant',\n        fileIcon: 'accent',\n        fileIconBackground: 'accent-secondary',\n    },\n    bot: {\n        text: 'primary',\n        secondaryText: 'secondary',\n        accentText: 'special',\n        replyTitle: 'accent',\n        statusIcon: 'special',\n        button: { mode: 'secondary', style: 'special' },\n        link: { style: 'accent' },\n        secondaryIcon: 'secondary',\n        fileIcon: 'constant',\n        fileIconBackground: 'special',\n    },\n};\n\nexport const getColors = (mode: ChatBubbleMode): ChatBubbleColors => COLORS[mode];\n\n// Для подкомпонентов, которые сидят под mode провайдером\nexport const useChatBubbleColors = (): ChatBubbleColors => COLORS[useChatBubbleMode()];\n"],"names":[],"mappings":";;;AA+BA,MAAM,MAAM,GAA6C;AACrD,IAAA,QAAQ,EAAE;AACN,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,UAAU,EAAE,UAAU;QACtB,MAAM,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE;AAC/C,QAAA,IAAI,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;AACzB,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,kBAAkB,EAAE,QAAQ;AAC/B,KAAA;AACD,IAAA,QAAQ,EAAE;AACN,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,aAAa,EAAE,UAAU;AACzB,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,UAAU,EAAE,UAAU;QACtB,MAAM,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE;QAC5C,IAAI,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE;AAC9C,QAAA,aAAa,EAAE,UAAU;AACzB,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,kBAAkB,EAAE,kBAAkB;AACzC,KAAA;AACD,IAAA,GAAG,EAAE;AACD,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,UAAU,EAAE,SAAS;AACrB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,UAAU,EAAE,SAAS;QACrB,MAAM,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE;AAC/C,QAAA,IAAI,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;AACzB,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,kBAAkB,EAAE,SAAS;AAChC,KAAA;CACJ,CAAC;AAEK,MAAM,SAAS,GAAG,CAAC,IAAoB,KAAuB,MAAM,CAAC,IAAI,EAAE;AAElF;AACO,MAAM,mBAAmB,GAAG,MAAwB,MAAM,CAAC,iBAAiB,EAAE;;;;"}
+{"version":3,"file":"colors.js","sources":["src/internal/colors.ts"],"sourcesContent":["import type { TokenColorBackground } from '@hh.ru/magritte-design-tokens/types';\nimport type { ButtonProps } from '@hh.ru/magritte-ui-button';\nimport { useChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/internal/mode';\nimport type { ChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/types';\nimport type { IconColor } from '@hh.ru/magritte-ui-icon';\nimport type { LinkProps } from '@hh.ru/magritte-ui-link';\nimport type { TextStyle } from '@hh.ru/magritte-ui-typography';\n\nexport interface ChatBubbleColors {\n    /** Основной текст сообщения, названия файла, текст сниппета */\n    text: TextStyle;\n    /** Второстепенный текст: время, размер файла */\n    secondaryText: TextStyle;\n    /** Акцентный текст: имя отправителя */\n    accentText: TextStyle;\n    /** Автор цитируемого сообщения (у бота акцентный, потому отдельно от accentText) */\n    replyTitle: TextStyle;\n    /** Иконка статуса, лежит на фоне баббла */\n    statusIcon: IconColor;\n    /** Кнопки под бабблом */\n    button: Pick<ButtonProps, 'mode' | 'style'>;\n    /** Ссылка-действие: «Открыть», «Загрузить» */\n    link: Pick<LinkProps, 'style' | 'mode'>;\n    /** Иконка рядом со второстепенным текстом: лоадер загрузки файла */\n    secondaryIcon: IconColor;\n    /** Иконка файла */\n    fileIcon: IconColor;\n    /** Подложка под иконкой файла */\n    fileIconBackground: TokenColorBackground;\n}\n\nconst COLORS: Record<ChatBubbleMode, ChatBubbleColors> = {\n    incoming: {\n        text: 'primary',\n        secondaryText: 'secondary',\n        accentText: 'accent',\n        replyTitle: 'accent',\n        statusIcon: 'secondary',\n        button: { mode: 'secondary', style: 'neutral' },\n        link: { style: 'accent' },\n        secondaryIcon: 'secondary',\n        fileIcon: 'constant',\n        fileIconBackground: 'accent',\n    },\n    outgoing: {\n        text: 'constant',\n        secondaryText: 'constant',\n        accentText: 'constant',\n        replyTitle: 'constant',\n        statusIcon: 'constant',\n        button: { mode: 'primary', style: 'accent' },\n        link: { style: 'constant', mode: 'secondary' },\n        secondaryIcon: 'constant',\n        fileIcon: 'accent',\n        fileIconBackground: 'accent-secondary',\n    },\n    bot: {\n        text: 'primary',\n        secondaryText: 'secondary',\n        accentText: 'special',\n        replyTitle: 'accent',\n        statusIcon: 'special',\n        button: { mode: 'secondary', style: 'special' },\n        link: { style: 'accent' },\n        secondaryIcon: 'secondary',\n        fileIcon: 'constant',\n        fileIconBackground: 'special',\n    },\n};\n\nexport const getColors = (mode: ChatBubbleMode): ChatBubbleColors => COLORS[mode];\n\n// Для подкомпонентов, которые сидят под mode провайдером\nexport const useChatBubbleColors = (): ChatBubbleColors => COLORS[useChatBubbleMode()];\n"],"names":[],"mappings":";;;AA+BA,MAAM,MAAM,GAA6C;AACrD,IAAA,QAAQ,EAAE;AACN,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,UAAU,EAAE,WAAW;QACvB,MAAM,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE;AAC/C,QAAA,IAAI,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;AACzB,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,kBAAkB,EAAE,QAAQ;AAC/B,KAAA;AACD,IAAA,QAAQ,EAAE;AACN,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,aAAa,EAAE,UAAU;AACzB,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,UAAU,EAAE,UAAU;QACtB,MAAM,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE;QAC5C,IAAI,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE;AAC9C,QAAA,aAAa,EAAE,UAAU;AACzB,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,kBAAkB,EAAE,kBAAkB;AACzC,KAAA;AACD,IAAA,GAAG,EAAE;AACD,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,UAAU,EAAE,SAAS;AACrB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,UAAU,EAAE,SAAS;QACrB,MAAM,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE;AAC/C,QAAA,IAAI,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;AACzB,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,kBAAkB,EAAE,SAAS;AAChC,KAAA;CACJ,CAAC;AAEK,MAAM,SAAS,GAAG,CAAC,IAAoB,KAAuB,MAAM,CAAC,IAAI,EAAE;AAElF;AACO,MAAM,mBAAmB,GAAG,MAAwB,MAAM,CAAC,iBAAiB,EAAE;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-chat-bubble",
-  "version": "2.0.5",
+  "version": "3.0.1",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -21,18 +21,18 @@
   "dependencies": {
     "@hh.ru/magritte-common-mouse": "1.2.0",
     "@hh.ru/magritte-common-use-multiple-refs": "1.1.11",
-    "@hh.ru/magritte-common-use-translation": "3.4.0",
-    "@hh.ru/magritte-design-tokens": "25.0.1",
+    "@hh.ru/magritte-common-use-translation": "3.5.0",
+    "@hh.ru/magritte-design-tokens": "25.1.0",
     "@hh.ru/magritte-ui-breakpoint": "6.1.1",
-    "@hh.ru/magritte-ui-button": "7.3.3",
-    "@hh.ru/magritte-ui-cell": "7.2.40",
-    "@hh.ru/magritte-ui-icon": "15.1.1",
-    "@hh.ru/magritte-ui-link": "7.2.2",
-    "@hh.ru/magritte-ui-loader": "4.1.2",
-    "@hh.ru/magritte-ui-menu": "1.0.40",
+    "@hh.ru/magritte-ui-button": "7.3.4",
+    "@hh.ru/magritte-ui-cell": "7.2.41",
+    "@hh.ru/magritte-ui-icon": "15.1.2",
+    "@hh.ru/magritte-ui-link": "7.2.3",
+    "@hh.ru/magritte-ui-loader": "4.1.3",
+    "@hh.ru/magritte-ui-menu": "1.0.42",
     "@hh.ru/magritte-ui-mock-component": "1.1.7",
-    "@hh.ru/magritte-ui-tooltip": "11.0.47",
-    "@hh.ru/magritte-ui-typography": "5.3.12"
+    "@hh.ru/magritte-ui-tooltip": "11.0.48",
+    "@hh.ru/magritte-ui-typography": "5.3.13"
   },
   "peerDependencies": {
     "classnames": ">=2.3.2",
@@ -41,5 +41,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "99cbbbb21b63dbbacea5f9bc721684b70a5c69c0"
+  "gitHead": "37c822e9d543ad23d6aec07b4a18c6d2d2b3ee3a"
 }

package/chat-bubble-Cs9qnBg4.js

@@ -1,5 +0,0 @@
-import './index.css';
-var styles = {"chat-bubble":"magritte-chat-bubble___ds9CP_2-0-5","chatBubble":"magritte-chat-bubble___ds9CP_2-0-5","outgoing":"magritte-outgoing___3n00o_2-0-5","bot":"magritte-bot___Z6vZA_2-0-5","row":"magritte-row___mQNnt_2-0-5","bubble":"magritte-bubble___NVuDI_2-0-5","with-tail":"magritte-with-tail___IdixJ_2-0-5","withTail":"magritte-with-tail___IdixJ_2-0-5","tail":"magritte-tail___E2hdk_2-0-5","tail-outgoing":"magritte-tail-outgoing___Pn3MI_2-0-5","tailOutgoing":"magritte-tail-outgoing___Pn3MI_2-0-5","buttons":"magritte-buttons___yQqBi_2-0-5","aside":"magritte-aside___bTex-_2-0-5","aside-revealed":"magritte-aside-revealed___CRBl7_2-0-5","asideRevealed":"magritte-aside-revealed___CRBl7_2-0-5","error-text":"magritte-error-text___1ZxWY_2-0-5","errorText":"magritte-error-text___1ZxWY_2-0-5","file":"magritte-file___k2IKy_2-0-5","file-preview":"magritte-file-preview___eJKu8_2-0-5","filePreview":"magritte-file-preview___eJKu8_2-0-5","media":"magritte-media___9jH2k_2-0-5","media-blur":"magritte-media-blur___TbiMa_2-0-5","mediaBlur":"magritte-media-blur___TbiMa_2-0-5","media-image":"magritte-media-image___G-FkF_2-0-5","mediaImage":"magritte-media-image___G-FkF_2-0-5","media-content":"magritte-media-content___n3XbD_2-0-5","mediaContent":"magritte-media-content___n3XbD_2-0-5","media-format":"magritte-media-format___AdfCK_2-0-5","mediaFormat":"magritte-media-format___AdfCK_2-0-5","media-meta":"magritte-media-meta___oSxxr_2-0-5","mediaMeta":"magritte-media-meta___oSxxr_2-0-5","reply":"magritte-reply___-QCK7_2-0-5","reply-preview":"magritte-reply-preview___qvlNT_2-0-5","replyPreview":"magritte-reply-preview___qvlNT_2-0-5","reply-body":"magritte-reply-body___f2xx7_2-0-5","replyBody":"magritte-reply-body___f2xx7_2-0-5","snippet":"magritte-snippet___8k9xb_2-0-5","meta":"magritte-meta___1qhjm_2-0-5","edited":"magritte-edited___m-zmB_2-0-5","status":"magritte-status___dHzCt_2-0-5","message-title":"magritte-message-title___dgBFk_2-0-5","messageTitle":"magritte-message-title___dgBFk_2-0-5","label":"magritte-label___i0Wyt_2-0-5","message":"magritte-message___7TEpw_2-0-5"};
-
-export { styles as s };
-//# sourceMappingURL=chat-bubble-Cs9qnBg4.js.map

package/chat-bubble-Cs9qnBg4.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"chat-bubble-Cs9qnBg4.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}