@hh.ru/magritte-ui-chat-bubble 3.0.5 → 3.0.7

package/Call.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
-import { type ChatBubbleMetaHostProps } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';
+import { type ChatBubbleMetaHostProps } from './internal/utils';
 export type ChatBubbleCallState = 'connected' | 'not-connected';
 type ChatBubbleCallHelper = HTMLAttributes<HTMLDivElement> & ChatBubbleMetaHostProps;
 export interface ChatBubbleCallProps extends Omit<ChatBubbleCallHelper, 'children' | 'title'> {
@@ -20,5 +20,5 @@ export interface ChatBubbleCallProps extends Omit<ChatBubbleCallHelper, 'childre
      */
     'data-qa'?: string;
 }
-export declare const ChatBubbleCall: import("react").ForwardRefExoticComponent<ChatBubbleCallProps & import("react").RefAttributes<HTMLDivElement>> & import("@hh.ru/magritte-ui-chat-bubble/internal/utils").MetaHostComponent;
+export declare const ChatBubbleCall: import("react").ForwardRefExoticComponent<ChatBubbleCallProps & import("react").RefAttributes<HTMLDivElement>> & import("./internal/utils").MetaHostComponent;
 export {};

package/Call.js

@@ -6,18 +6,50 @@ 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-DgO7_sM3.js';
+import { s as styles } from './chat-bubble-BOBGge0h.js';
 
-/** Входящий/исходящий звонок */
-const ChatBubbleCallComponent = forwardRef(({ 'data-qa': dataQa = 'chat-bubble-call', title, description, meta, state = 'connected', ...props }, ref) => {
+const ChatBubbleCallComponent = forwardRef(
+  ({ "data-qa": dataQa = "chat-bubble-call", title, description, meta, state = "connected", ...props }, ref) => {
     const mode = useChatBubbleMode();
     const colors = useChatBubbleColors();
-    // у несостоявшегося звонка - крестик в любом режиме, иначе - стрелка по направлению
-    const connectedIcon = mode === 'outgoing' ? PhoneArrowOutFilledSize24 : PhoneArrowInFilledSize24;
-    const Icon = state === 'connected' ? connectedIcon : PhoneCrossFilledSize24;
-    return (jsxs("div", { ...props, className: styles.file, "data-qa": dataQa, ref: ref, children: [jsxs(Cell, { align: "center", horPadding: false, vertPadding: false, left: jsx(Icon, { initialColor: colors.fileIcon, backgroundStyle: colors.fileIconBackground, padding: 12, borderRadius: 8 }), children: [jsx(CellText, { type: "title", style: colors.text, maxLines: 1, "data-qa": "chat-bubble-call-name", children: title }), description && (jsx(CellText, { type: "subtitle", style: state === 'not-connected' && mode === 'incoming' ? 'negative' : colors.secondaryText, maxLines: 1, "data-qa": "chat-bubble-call-description", children: description }))] }), meta] }));
-});
-ChatBubbleCallComponent.displayName = 'ChatBubbleCall';
+    const connectedIcon = mode === "outgoing" ? PhoneArrowOutFilledSize24 : PhoneArrowInFilledSize24;
+    const Icon = state === "connected" ? connectedIcon : PhoneCrossFilledSize24;
+    return /* @__PURE__ */ jsxs("div", { ...props, className: styles.file, "data-qa": dataQa, ref, children: [
+      /* @__PURE__ */ jsxs(
+        Cell,
+        {
+          align: "center",
+          horPadding: false,
+          vertPadding: false,
+          left: /* @__PURE__ */ jsx(
+            Icon,
+            {
+              initialColor: colors.fileIcon,
+              backgroundStyle: colors.fileIconBackground,
+              padding: 12,
+              borderRadius: 8
+            }
+          ),
+          children: [
+            /* @__PURE__ */ jsx(CellText, { type: "title", style: colors.text, maxLines: 1, "data-qa": "chat-bubble-call-name", children: title }),
+            description && /* @__PURE__ */ jsx(
+              CellText,
+              {
+                type: "subtitle",
+                style: state === "not-connected" && mode === "incoming" ? "negative" : colors.secondaryText,
+                maxLines: 1,
+                "data-qa": "chat-bubble-call-description",
+                children: description
+              }
+            )
+          ]
+        }
+      ),
+      meta
+    ] });
+  }
+);
+ChatBubbleCallComponent.displayName = "ChatBubbleCall";
 const ChatBubbleCall = markMetaHost(ChatBubbleCallComponent);
 
 export { ChatBubbleCall };

package/Call.js.map

@@ -1 +1 @@
-{"version":3,"file":"Call.js","sources":["src/Call.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\n\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { useChatBubbleColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { useChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/internal/mode';\nimport { markMetaHost, type ChatBubbleMetaHostProps } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';\nimport {\n    PhoneArrowInFilledSize24,\n    PhoneArrowOutFilledSize24,\n    PhoneCrossFilledSize24,\n} from '@hh.ru/magritte-ui-icon/icon';\n\nimport styles from './chat-bubble.less';\n\nexport type ChatBubbleCallState = 'connected' | 'not-connected';\n\ntype ChatBubbleCallHelper = HTMLAttributes<HTMLDivElement> & ChatBubbleMetaHostProps;\n\nexport interface ChatBubbleCallProps extends Omit<ChatBubbleCallHelper, 'children' | 'title'> {\n    /** Заголовок */\n    title?: ReactNode;\n    /**\n     * Строка под заголовком (например, для длительности звонка)\n     */\n    description?: ReactNode;\n    /**\n     * Состояние звонка\n     * @default connected\n     */\n    state?: ChatBubbleCallState;\n    /**\n     * Значение data-qa\n     * @default chat-bubble-call\n     */\n    'data-qa'?: string;\n}\n\n/** Входящий/исходящий звонок */\nconst ChatBubbleCallComponent = forwardRef<HTMLDivElement, ChatBubbleCallProps>(\n    ({ 'data-qa': dataQa = 'chat-bubble-call', title, description, meta, state = 'connected', ...props }, ref) => {\n        const mode = useChatBubbleMode();\n        const colors = useChatBubbleColors();\n        // у несостоявшегося звонка - крестик в любом режиме, иначе - стрелка по направлению\n        const connectedIcon = mode === 'outgoing' ? PhoneArrowOutFilledSize24 : PhoneArrowInFilledSize24;\n        const Icon = state === 'connected' ? connectedIcon : PhoneCrossFilledSize24;\n\n        return (\n            <div {...props} className={styles.file} data-qa={dataQa} ref={ref}>\n                <Cell\n                    align=\"center\"\n                    horPadding={false}\n                    vertPadding={false}\n                    left={\n                        <Icon\n                            initialColor={colors.fileIcon}\n                            backgroundStyle={colors.fileIconBackground}\n                            padding={12}\n                            borderRadius={8}\n                        />\n                    }\n                >\n                    <CellText type=\"title\" style={colors.text} maxLines={1} data-qa=\"chat-bubble-call-name\">\n                        {title}\n                    </CellText>\n                    {description && (\n                        <CellText\n                            type=\"subtitle\"\n                            style={state === 'not-connected' && mode === 'incoming' ? 'negative' : colors.secondaryText}\n                            maxLines={1}\n                            data-qa=\"chat-bubble-call-description\"\n                        >\n                            {description}\n                        </CellText>\n                    )}\n                </Cell>\n                {meta}\n            </div>\n        );\n    }\n);\n\nChatBubbleCallComponent.displayName = 'ChatBubbleCall';\n\nexport const ChatBubbleCall = markMetaHost(ChatBubbleCallComponent);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAqCA;AACA,MAAM,uBAAuB,GAAG,UAAU,CACtC,CAAC,EAAE,SAAS,EAAE,MAAM,GAAG,kBAAkB,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,KAAK,GAAG,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AACzG,IAAA,MAAM,IAAI,GAAG,iBAAiB,EAAE,CAAC;AACjC,IAAA,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAC;;AAErC,IAAA,MAAM,aAAa,GAAG,IAAI,KAAK,UAAU,GAAG,yBAAyB,GAAG,wBAAwB,CAAC;AACjG,IAAA,MAAM,IAAI,GAAG,KAAK,KAAK,WAAW,GAAG,aAAa,GAAG,sBAAsB,CAAC;IAE5E,QACIA,IAAS,CAAA,KAAA,EAAA,EAAA,GAAA,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,EAAW,SAAA,EAAA,MAAM,EAAE,GAAG,EAAE,GAAG,EAC7D,QAAA,EAAA,CAAAA,IAAA,CAAC,IAAI,EAAA,EACD,KAAK,EAAC,QAAQ,EACd,UAAU,EAAE,KAAK,EACjB,WAAW,EAAE,KAAK,EAClB,IAAI,EACAC,GAAC,CAAA,IAAI,EACD,EAAA,YAAY,EAAE,MAAM,CAAC,QAAQ,EAC7B,eAAe,EAAE,MAAM,CAAC,kBAAkB,EAC1C,OAAO,EAAE,EAAE,EACX,YAAY,EAAE,CAAC,EACjB,CAAA,EAAA,QAAA,EAAA,CAGNA,GAAC,CAAA,QAAQ,EAAC,EAAA,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAU,SAAA,EAAA,uBAAuB,EAClF,QAAA,EAAA,KAAK,EACC,CAAA,EACV,WAAW,KACRA,GAAA,CAAC,QAAQ,EAAA,EACL,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,KAAK,KAAK,eAAe,IAAI,IAAI,KAAK,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC,aAAa,EAC3F,QAAQ,EAAE,CAAC,EAAA,SAAA,EACH,8BAA8B,EAAA,QAAA,EAErC,WAAW,EAAA,CACL,CACd,CAAA,EAAA,CACE,EACN,IAAI,CACH,EAAA,CAAA,EACR;AACN,CAAC,CACJ,CAAC;AAEF,uBAAuB,CAAC,WAAW,GAAG,gBAAgB,CAAC;MAE1C,cAAc,GAAG,YAAY,CAAC,uBAAuB;;;;"}
+{"version":3,"file":"Call.js","sources":["src/Call.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\n\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { useChatBubbleColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { useChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/internal/mode';\nimport { markMetaHost, type ChatBubbleMetaHostProps } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';\nimport {\n    PhoneArrowInFilledSize24,\n    PhoneArrowOutFilledSize24,\n    PhoneCrossFilledSize24,\n} from '@hh.ru/magritte-ui-icon/icon';\n\nimport styles from './chat-bubble.less';\n\nexport type ChatBubbleCallState = 'connected' | 'not-connected';\n\ntype ChatBubbleCallHelper = HTMLAttributes<HTMLDivElement> & ChatBubbleMetaHostProps;\n\nexport interface ChatBubbleCallProps extends Omit<ChatBubbleCallHelper, 'children' | 'title'> {\n    /** Заголовок */\n    title?: ReactNode;\n    /**\n     * Строка под заголовком (например, для длительности звонка)\n     */\n    description?: ReactNode;\n    /**\n     * Состояние звонка\n     * @default connected\n     */\n    state?: ChatBubbleCallState;\n    /**\n     * Значение data-qa\n     * @default chat-bubble-call\n     */\n    'data-qa'?: string;\n}\n\n/** Входящий/исходящий звонок */\nconst ChatBubbleCallComponent = forwardRef<HTMLDivElement, ChatBubbleCallProps>(\n    ({ 'data-qa': dataQa = 'chat-bubble-call', title, description, meta, state = 'connected', ...props }, ref) => {\n        const mode = useChatBubbleMode();\n        const colors = useChatBubbleColors();\n        // у несостоявшегося звонка - крестик в любом режиме, иначе - стрелка по направлению\n        const connectedIcon = mode === 'outgoing' ? PhoneArrowOutFilledSize24 : PhoneArrowInFilledSize24;\n        const Icon = state === 'connected' ? connectedIcon : PhoneCrossFilledSize24;\n\n        return (\n            <div {...props} className={styles.file} data-qa={dataQa} ref={ref}>\n                <Cell\n                    align=\"center\"\n                    horPadding={false}\n                    vertPadding={false}\n                    left={\n                        <Icon\n                            initialColor={colors.fileIcon}\n                            backgroundStyle={colors.fileIconBackground}\n                            padding={12}\n                            borderRadius={8}\n                        />\n                    }\n                >\n                    <CellText type=\"title\" style={colors.text} maxLines={1} data-qa=\"chat-bubble-call-name\">\n                        {title}\n                    </CellText>\n                    {description && (\n                        <CellText\n                            type=\"subtitle\"\n                            style={state === 'not-connected' && mode === 'incoming' ? 'negative' : colors.secondaryText}\n                            maxLines={1}\n                            data-qa=\"chat-bubble-call-description\"\n                        >\n                            {description}\n                        </CellText>\n                    )}\n                </Cell>\n                {meta}\n            </div>\n        );\n    }\n);\n\nChatBubbleCallComponent.displayName = 'ChatBubbleCall';\n\nexport const ChatBubbleCall = markMetaHost(ChatBubbleCallComponent);\n"],"names":[],"mappings":";;;;;;;;;AAsCA,MAAM,uBAA0B,GAAA,UAAA;AAAA,EAC5B,CAAC,EAAE,SAAW,EAAA,MAAA,GAAS,kBAAoB,EAAA,KAAA,EAAO,WAAa,EAAA,IAAA,EAAM,KAAQ,GAAA,WAAA,EAAa,GAAG,KAAA,IAAS,GAAQ,KAAA;AAC1G,IAAA,MAAM,OAAO,iBAAkB,EAAA,CAAA;AAC/B,IAAA,MAAM,SAAS,mBAAoB,EAAA,CAAA;AAEnC,IAAM,MAAA,aAAA,GAAgB,IAAS,KAAA,UAAA,GAAa,yBAA4B,GAAA,wBAAA,CAAA;AACxE,IAAM,MAAA,IAAA,GAAO,KAAU,KAAA,WAAA,GAAc,aAAgB,GAAA,sBAAA,CAAA;AAErD,IACI,uBAAA,IAAA,CAAC,SAAK,GAAG,KAAA,EAAO,WAAW,MAAO,CAAA,IAAA,EAAM,SAAS,EAAA,MAAA,EAAQ,GACrD,EAAA,QAAA,EAAA;AAAA,sBAAA,IAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACG,KAAM,EAAA,QAAA;AAAA,UACN,UAAY,EAAA,KAAA;AAAA,UACZ,WAAa,EAAA,KAAA;AAAA,UACb,IACI,kBAAA,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACG,cAAc,MAAO,CAAA,QAAA;AAAA,cACrB,iBAAiB,MAAO,CAAA,kBAAA;AAAA,cACxB,OAAS,EAAA,EAAA;AAAA,cACT,YAAc,EAAA,CAAA;AAAA,aAAA;AAAA,WAClB;AAAA,UAGJ,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,QAAA,EAAA,EAAS,IAAK,EAAA,OAAA,EAAQ,KAAO,EAAA,MAAA,CAAO,MAAM,QAAU,EAAA,CAAA,EAAG,SAAQ,EAAA,uBAAA,EAC3D,QACL,EAAA,KAAA,EAAA,CAAA;AAAA,YACC,WACG,oBAAA,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACG,IAAK,EAAA,UAAA;AAAA,gBACL,OAAO,KAAU,KAAA,eAAA,IAAmB,IAAS,KAAA,UAAA,GAAa,aAAa,MAAO,CAAA,aAAA;AAAA,gBAC9E,QAAU,EAAA,CAAA;AAAA,gBACV,SAAQ,EAAA,8BAAA;AAAA,gBAEP,QAAA,EAAA,WAAA;AAAA,eAAA;AAAA,aACL;AAAA,WAAA;AAAA,SAAA;AAAA,OAER;AAAA,MACC,IAAA;AAAA,KACL,EAAA,CAAA,CAAA;AAAA,GAER;AACJ,CAAA,CAAA;AAEA,uBAAA,CAAwB,WAAc,GAAA,gBAAA,CAAA;AAEzB,MAAA,cAAA,GAAiB,aAAa,uBAAuB;;;;"}

package/ChatBubble.d.ts

@@ -1,13 +1,13 @@
-import { ChatBubbleCall } from '@hh.ru/magritte-ui-chat-bubble/Call';
-import { ChatBubbleErrorAction } from '@hh.ru/magritte-ui-chat-bubble/ErrorAction';
-import { ChatBubbleFile } from '@hh.ru/magritte-ui-chat-bubble/File';
-import { ChatBubbleLabel } from '@hh.ru/magritte-ui-chat-bubble/Label';
-import { ChatBubbleMedia } from '@hh.ru/magritte-ui-chat-bubble/Media';
-import { ChatBubbleMessage } from '@hh.ru/magritte-ui-chat-bubble/Message';
-import { ChatBubbleReply } from '@hh.ru/magritte-ui-chat-bubble/Reply';
-import { ChatBubbleSnippet } from '@hh.ru/magritte-ui-chat-bubble/Snippet';
-import { ChatBubbleStatus } from '@hh.ru/magritte-ui-chat-bubble/Status';
-import type { ChatBubbleProps } from '@hh.ru/magritte-ui-chat-bubble/types';
+import { ChatBubbleCall } from './Call';
+import { ChatBubbleErrorAction } from './ErrorAction';
+import { ChatBubbleFile } from './File';
+import { ChatBubbleLabel } from './Label';
+import { ChatBubbleMedia } from './Media';
+import { ChatBubbleMessage } from './Message';
+import { ChatBubbleReply } from './Reply';
+import { ChatBubbleSnippet } from './Snippet';
+import { ChatBubbleStatus } from './Status';
+import type { ChatBubbleProps } from './types';
 interface ChatBubbleComponents {
     Call: typeof ChatBubbleCall;
     ErrorAction: typeof ChatBubbleErrorAction;

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-DgO7_sM3.js';
+import { s as styles } from './chat-bubble-BOBGge0h.js';
 import '@hh.ru/magritte-ui-cell';
 import '@hh.ru/magritte-ui-link';
 import '@hh.ru/magritte-ui-loader';
@@ -30,7 +30,23 @@ import '@hh.ru/magritte-common-use-translation';
 import '@hh.ru/magritte-common-use-multiple-refs';
 import '@hh.ru/magritte-ui-tooltip';
 
-const ChatBubble = forwardRef(({ aside, buttons, children, header, edited, errorActions, mode = 'incoming', showTail = false, status, time, error = false, errorText, 'data-qa': dataQa = 'chat-bubble', className, }, ref) => {
+const ChatBubble = forwardRef(
+  ({
+    aside,
+    buttons,
+    children,
+    header,
+    edited,
+    errorActions,
+    mode = "incoming",
+    showTail = false,
+    status,
+    time,
+    error = false,
+    errorText,
+    "data-qa": dataQa = "chat-bubble",
+    className
+  }, ref) => {
     const rowRef = useRef(null);
     const activatorMenuRef = useRef(null);
     const [menuVisible, setMenuVisible] = useState(false);
@@ -38,25 +54,85 @@ const ChatBubble = forwardRef(({ aside, buttons, children, header, edited, error
     const [asideShow, setAsideShow] = useState(false);
     const showAside = useCallback(() => setAsideShow(true), []);
     const hideAside = useCallback(() => setAsideShow(false), []);
-    // скрываем aside при кликах вне
     useCloseByClickOutside(rowRef, hideAside, asideShow);
     const colors = getColors(mode);
-    const buttonsProps = useMemo(() => ({ size: 'small', stretched: true, ...colors.button }), [colors]);
-    /**
-     * Время отдаём последнему элементу контента
-     * Позиция времени меняется, в зависимости от компонента
-     * Если последний ребенок не может отрисовать, вставим meta в самый конец
-     */
-    const meta = jsx(Meta, { mode: mode, status: status, time: time, edited: edited });
+    const buttonsProps = useMemo(
+      () => ({ size: "small", stretched: true, ...colors.button }),
+      [colors]
+    );
+    const meta = /* @__PURE__ */ jsx(Meta, { mode, status, time, edited });
     const items = flattenFragments(children);
     const lastIndex = items.length - 1;
     const metaHosted = isMetaHost(items[lastIndex]);
-    const content = items.map((child, index) => index === lastIndex && isMetaHost(child) ? cloneElement(child, { meta }) : child);
-    return (jsx(ChatBubbleModeProvider, { value: mode, children: jsxs("div", { className: classnames(className, styles.chatBubble, styles[mode], {
-                [styles.withTail]: showTail,
-            }), "data-qa": dataQa, ref: ref, children: [jsxs("div", { className: styles.row, onMouseEnter: aside ? showAside : undefined, onMouseLeave: aside ? hideAside : undefined, onClick: aside ? showAside : undefined, ref: rowRef, children: [jsxs("div", { className: styles.bubble, children: [header, content, !metaHosted && meta, showTail && jsx(Tail, {})] }), mode === 'outgoing' && error && (jsxs("div", { children: [jsx(ExclamationCircleFilledSize24, { ref: activatorMenuRef, initialColor: "negative", onClick: errorActions ? () => setMenuVisible((visible) => !visible) : undefined, "data-qa": "chat-bubble-error-button", "aria-haspopup": errorActions ? 'menu' : undefined, "aria-expanded": errorActions ? menuVisible : undefined }), errorActions && (jsx(Menu, { activatorRef: activatorMenuRef, onClose: closeErrorMenu, placement: "bottom-right", visible: menuVisible, children: jsx(ChatBubbleErrorMenuProvider, { value: closeErrorMenu, children: errorActions }) }))] })), aside && (jsx("div", { className: classnames(styles.aside, { [styles.asideRevealed]: asideShow }), "data-qa": "chat-bubble-aside", children: aside }))] }), mode === 'outgoing' && error && errorText && (jsx("div", { className: styles.errorText, "data-qa": "chat-bubble-error-text", children: jsx(Text, { typography: "label-4-regular", style: "negative", maxLines: 2, children: errorText }) })), buttons && (jsx(ButtonDefaultPropsContext, { props: buttonsProps, children: jsx("div", { className: styles.buttons, "data-qa": "chat-bubble-buttons", children: buttons }) }))] }) }));
-});
-ChatBubble.displayName = 'ChatBubble';
+    const content = items.map(
+      (child, index) => index === lastIndex && isMetaHost(child) ? cloneElement(child, { meta }) : child
+    );
+    return /* @__PURE__ */ jsx(ChatBubbleModeProvider, { value: mode, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classnames(className, styles.chatBubble, styles[mode], {
+          [styles.withTail]: showTail
+        }),
+        "data-qa": dataQa,
+        ref,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: styles.row,
+              onMouseEnter: aside ? showAside : void 0,
+              onMouseLeave: aside ? hideAside : void 0,
+              onClick: aside ? showAside : void 0,
+              ref: rowRef,
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: styles.bubble, children: [
+                  header,
+                  content,
+                  !metaHosted && meta,
+                  showTail && /* @__PURE__ */ jsx(Tail, {})
+                ] }),
+                mode === "outgoing" && error && /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(
+                    ExclamationCircleFilledSize24,
+                    {
+                      ref: activatorMenuRef,
+                      initialColor: "negative",
+                      onClick: errorActions ? () => setMenuVisible((visible) => !visible) : void 0,
+                      "data-qa": "chat-bubble-error-button",
+                      "aria-haspopup": errorActions ? "menu" : void 0,
+                      "aria-expanded": errorActions ? menuVisible : void 0
+                    }
+                  ),
+                  errorActions && /* @__PURE__ */ jsx(
+                    Menu,
+                    {
+                      activatorRef: activatorMenuRef,
+                      onClose: closeErrorMenu,
+                      placement: "bottom-right",
+                      visible: menuVisible,
+                      children: /* @__PURE__ */ jsx(ChatBubbleErrorMenuProvider, { value: closeErrorMenu, children: errorActions })
+                    }
+                  )
+                ] }),
+                aside && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: classnames(styles.aside, { [styles.asideRevealed]: asideShow }),
+                    "data-qa": "chat-bubble-aside",
+                    children: aside
+                  }
+                )
+              ]
+            }
+          ),
+          mode === "outgoing" && error && errorText && /* @__PURE__ */ jsx("div", { className: styles.errorText, "data-qa": "chat-bubble-error-text", children: /* @__PURE__ */ jsx(Text, { typography: "label-4-regular", style: "negative", maxLines: 2, children: errorText }) }),
+          buttons && /* @__PURE__ */ jsx(ButtonDefaultPropsContext, { props: buttonsProps, children: /* @__PURE__ */ jsx("div", { className: styles.buttons, "data-qa": "chat-bubble-buttons", children: buttons }) })
+        ]
+      }
+    ) });
+  }
+);
+ChatBubble.displayName = "ChatBubble";
 ChatBubble.Call = ChatBubbleCall;
 ChatBubble.ErrorAction = ChatBubbleErrorAction;
 ChatBubble.File = ChatBubbleFile;

package/ChatBubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatBubble.js","sources":["src/ChatBubble.tsx"],"sourcesContent":["import { cloneElement, forwardRef, useCallback, useState, useMemo, useRef } from 'react';\nimport classnames from 'classnames';\n\nimport { useCloseByClickOutside } from '@hh.ru/magritte-common-mouse';\nimport { ButtonDefaultPropsContext, type ButtonProps } from '@hh.ru/magritte-ui-button';\nimport { ChatBubbleCall } from '@hh.ru/magritte-ui-chat-bubble/Call';\nimport { ChatBubbleErrorAction } from '@hh.ru/magritte-ui-chat-bubble/ErrorAction';\nimport { ChatBubbleFile } from '@hh.ru/magritte-ui-chat-bubble/File';\nimport { ChatBubbleLabel } from '@hh.ru/magritte-ui-chat-bubble/Label';\nimport { ChatBubbleMedia } from '@hh.ru/magritte-ui-chat-bubble/Media';\nimport { ChatBubbleMessage } from '@hh.ru/magritte-ui-chat-bubble/Message';\nimport { Meta } from '@hh.ru/magritte-ui-chat-bubble/Meta';\nimport { ChatBubbleReply } from '@hh.ru/magritte-ui-chat-bubble/Reply';\nimport { ChatBubbleSnippet } from '@hh.ru/magritte-ui-chat-bubble/Snippet';\nimport { ChatBubbleStatus } from '@hh.ru/magritte-ui-chat-bubble/Status';\nimport { Tail } from '@hh.ru/magritte-ui-chat-bubble/Tail';\nimport { getColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { ChatBubbleErrorMenuProvider } from '@hh.ru/magritte-ui-chat-bubble/internal/errorMenu';\nimport { ChatBubbleModeProvider } from '@hh.ru/magritte-ui-chat-bubble/internal/mode';\nimport { isMetaHost, flattenFragments } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';\nimport type { ChatBubbleProps } from '@hh.ru/magritte-ui-chat-bubble/types';\nimport { ExclamationCircleFilledSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { Menu } from '@hh.ru/magritte-ui-menu';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './chat-bubble.less';\n\ninterface ChatBubbleComponents {\n    Call: typeof ChatBubbleCall;\n    ErrorAction: typeof ChatBubbleErrorAction;\n    File: typeof ChatBubbleFile;\n    Label: typeof ChatBubbleLabel;\n    Media: typeof ChatBubbleMedia;\n    Message: typeof ChatBubbleMessage;\n    Reply: typeof ChatBubbleReply;\n    Snippet: typeof ChatBubbleSnippet;\n    Status: typeof ChatBubbleStatus;\n}\n\nexport const ChatBubble = forwardRef<HTMLDivElement, ChatBubbleProps>(\n    (\n        {\n            aside,\n            buttons,\n            children,\n            header,\n            edited,\n            errorActions,\n            mode = 'incoming',\n            showTail = false,\n            status,\n            time,\n            error = false,\n            errorText,\n            'data-qa': dataQa = 'chat-bubble',\n            className,\n        },\n        ref\n    ) => {\n        const rowRef = useRef<HTMLDivElement>(null);\n        const activatorMenuRef = useRef<SVGElement>(null);\n\n        const [menuVisible, setMenuVisible] = useState(false);\n        const closeErrorMenu = useCallback(() => setMenuVisible(false), []);\n\n        const [asideShow, setAsideShow] = useState(false);\n        const showAside = useCallback(() => setAsideShow(true), []);\n        const hideAside = useCallback(() => setAsideShow(false), []);\n\n        // скрываем aside при кликах вне\n        useCloseByClickOutside(rowRef, hideAside, asideShow);\n\n        const colors = getColors(mode);\n        const buttonsProps: Partial<ButtonProps> = useMemo(\n            () => ({ size: 'small', stretched: true, ...colors.button }),\n            [colors]\n        );\n        /**\n         * Время отдаём последнему элементу контента\n         * Позиция времени меняется, в зависимости от компонента\n         * Если последний ребенок не может отрисовать, вставим meta в самый конец\n         */\n        const meta = <Meta mode={mode} status={status} time={time} edited={edited} />;\n        const items = flattenFragments(children);\n        const lastIndex = items.length - 1;\n        const metaHosted = isMetaHost(items[lastIndex]);\n        const content = items.map((child, index) =>\n            index === lastIndex && isMetaHost(child) ? cloneElement(child, { meta }) : child\n        );\n        return (\n            <ChatBubbleModeProvider value={mode}>\n                <div\n                    className={classnames(className, styles.chatBubble, styles[mode], {\n                        [styles.withTail]: showTail,\n                    })}\n                    data-qa={dataQa}\n                    ref={ref}\n                >\n                    <div\n                        className={styles.row}\n                        onMouseEnter={aside ? showAside : undefined}\n                        onMouseLeave={aside ? hideAside : undefined}\n                        onClick={aside ? showAside : undefined}\n                        ref={rowRef}\n                    >\n                        <div className={styles.bubble}>\n                            {header}\n                            {content}\n                            {!metaHosted && meta}\n                            {showTail && <Tail />}\n                        </div>\n                        {mode === 'outgoing' && error && (\n                            <div>\n                                <ExclamationCircleFilledSize24\n                                    ref={activatorMenuRef}\n                                    initialColor=\"negative\"\n                                    onClick={errorActions ? () => setMenuVisible((visible) => !visible) : undefined}\n                                    data-qa=\"chat-bubble-error-button\"\n                                    aria-haspopup={errorActions ? 'menu' : undefined}\n                                    aria-expanded={errorActions ? menuVisible : undefined}\n                                />\n                                {errorActions && (\n                                    <Menu\n                                        activatorRef={activatorMenuRef}\n                                        onClose={closeErrorMenu}\n                                        placement=\"bottom-right\"\n                                        visible={menuVisible}\n                                    >\n                                        <ChatBubbleErrorMenuProvider value={closeErrorMenu}>\n                                            {errorActions}\n                                        </ChatBubbleErrorMenuProvider>\n                                    </Menu>\n                                )}\n                            </div>\n                        )}\n                        {aside && (\n                            <div\n                                className={classnames(styles.aside, { [styles.asideRevealed]: asideShow })}\n                                data-qa=\"chat-bubble-aside\"\n                            >\n                                {aside}\n                            </div>\n                        )}\n                    </div>\n                    {mode === 'outgoing' && error && errorText && (\n                        <div className={styles.errorText} data-qa=\"chat-bubble-error-text\">\n                            <Text typography=\"label-4-regular\" style=\"negative\" maxLines={2}>\n                                {errorText}\n                            </Text>\n                        </div>\n                    )}\n                    {buttons && (\n                        <ButtonDefaultPropsContext props={buttonsProps}>\n                            <div className={styles.buttons} data-qa=\"chat-bubble-buttons\">\n                                {buttons}\n                            </div>\n                        </ButtonDefaultPropsContext>\n                    )}\n                </div>\n            </ChatBubbleModeProvider>\n        );\n    }\n) as React.ForwardRefExoticComponent<ChatBubbleProps & React.RefAttributes<HTMLDivElement>> & ChatBubbleComponents;\n\nChatBubble.displayName = 'ChatBubble';\n\nChatBubble.Call = ChatBubbleCall;\nChatBubble.ErrorAction = ChatBubbleErrorAction;\nChatBubble.File = ChatBubbleFile;\nChatBubble.Label = ChatBubbleLabel;\nChatBubble.Media = ChatBubbleMedia;\nChatBubble.Message = ChatBubbleMessage;\nChatBubble.Reply = ChatBubbleReply;\nChatBubble.Snippet = ChatBubbleSnippet;\nChatBubble.Status = ChatBubbleStatus;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"ChatBubble.js","sources":["src/ChatBubble.tsx"],"sourcesContent":["import { cloneElement, forwardRef, useCallback, useState, useMemo, useRef } from 'react';\nimport classnames from 'classnames';\n\nimport { useCloseByClickOutside } from '@hh.ru/magritte-common-mouse';\nimport { ButtonDefaultPropsContext, type ButtonProps } from '@hh.ru/magritte-ui-button';\nimport { ChatBubbleCall } from '@hh.ru/magritte-ui-chat-bubble/Call';\nimport { ChatBubbleErrorAction } from '@hh.ru/magritte-ui-chat-bubble/ErrorAction';\nimport { ChatBubbleFile } from '@hh.ru/magritte-ui-chat-bubble/File';\nimport { ChatBubbleLabel } from '@hh.ru/magritte-ui-chat-bubble/Label';\nimport { ChatBubbleMedia } from '@hh.ru/magritte-ui-chat-bubble/Media';\nimport { ChatBubbleMessage } from '@hh.ru/magritte-ui-chat-bubble/Message';\nimport { Meta } from '@hh.ru/magritte-ui-chat-bubble/Meta';\nimport { ChatBubbleReply } from '@hh.ru/magritte-ui-chat-bubble/Reply';\nimport { ChatBubbleSnippet } from '@hh.ru/magritte-ui-chat-bubble/Snippet';\nimport { ChatBubbleStatus } from '@hh.ru/magritte-ui-chat-bubble/Status';\nimport { Tail } from '@hh.ru/magritte-ui-chat-bubble/Tail';\nimport { getColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { ChatBubbleErrorMenuProvider } from '@hh.ru/magritte-ui-chat-bubble/internal/errorMenu';\nimport { ChatBubbleModeProvider } from '@hh.ru/magritte-ui-chat-bubble/internal/mode';\nimport { isMetaHost, flattenFragments } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';\nimport type { ChatBubbleProps } from '@hh.ru/magritte-ui-chat-bubble/types';\nimport { ExclamationCircleFilledSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { Menu } from '@hh.ru/magritte-ui-menu';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './chat-bubble.less';\n\ninterface ChatBubbleComponents {\n    Call: typeof ChatBubbleCall;\n    ErrorAction: typeof ChatBubbleErrorAction;\n    File: typeof ChatBubbleFile;\n    Label: typeof ChatBubbleLabel;\n    Media: typeof ChatBubbleMedia;\n    Message: typeof ChatBubbleMessage;\n    Reply: typeof ChatBubbleReply;\n    Snippet: typeof ChatBubbleSnippet;\n    Status: typeof ChatBubbleStatus;\n}\n\nexport const ChatBubble = forwardRef<HTMLDivElement, ChatBubbleProps>(\n    (\n        {\n            aside,\n            buttons,\n            children,\n            header,\n            edited,\n            errorActions,\n            mode = 'incoming',\n            showTail = false,\n            status,\n            time,\n            error = false,\n            errorText,\n            'data-qa': dataQa = 'chat-bubble',\n            className,\n        },\n        ref\n    ) => {\n        const rowRef = useRef<HTMLDivElement>(null);\n        const activatorMenuRef = useRef<SVGElement>(null);\n\n        const [menuVisible, setMenuVisible] = useState(false);\n        const closeErrorMenu = useCallback(() => setMenuVisible(false), []);\n\n        const [asideShow, setAsideShow] = useState(false);\n        const showAside = useCallback(() => setAsideShow(true), []);\n        const hideAside = useCallback(() => setAsideShow(false), []);\n\n        // скрываем aside при кликах вне\n        useCloseByClickOutside(rowRef, hideAside, asideShow);\n\n        const colors = getColors(mode);\n        const buttonsProps: Partial<ButtonProps> = useMemo(\n            () => ({ size: 'small', stretched: true, ...colors.button }),\n            [colors]\n        );\n        /**\n         * Время отдаём последнему элементу контента\n         * Позиция времени меняется, в зависимости от компонента\n         * Если последний ребенок не может отрисовать, вставим meta в самый конец\n         */\n        const meta = <Meta mode={mode} status={status} time={time} edited={edited} />;\n        const items = flattenFragments(children);\n        const lastIndex = items.length - 1;\n        const metaHosted = isMetaHost(items[lastIndex]);\n        const content = items.map((child, index) =>\n            index === lastIndex && isMetaHost(child) ? cloneElement(child, { meta }) : child\n        );\n        return (\n            <ChatBubbleModeProvider value={mode}>\n                <div\n                    className={classnames(className, styles.chatBubble, styles[mode], {\n                        [styles.withTail]: showTail,\n                    })}\n                    data-qa={dataQa}\n                    ref={ref}\n                >\n                    <div\n                        className={styles.row}\n                        onMouseEnter={aside ? showAside : undefined}\n                        onMouseLeave={aside ? hideAside : undefined}\n                        onClick={aside ? showAside : undefined}\n                        ref={rowRef}\n                    >\n                        <div className={styles.bubble}>\n                            {header}\n                            {content}\n                            {!metaHosted && meta}\n                            {showTail && <Tail />}\n                        </div>\n                        {mode === 'outgoing' && error && (\n                            <div>\n                                <ExclamationCircleFilledSize24\n                                    ref={activatorMenuRef}\n                                    initialColor=\"negative\"\n                                    onClick={errorActions ? () => setMenuVisible((visible) => !visible) : undefined}\n                                    data-qa=\"chat-bubble-error-button\"\n                                    aria-haspopup={errorActions ? 'menu' : undefined}\n                                    aria-expanded={errorActions ? menuVisible : undefined}\n                                />\n                                {errorActions && (\n                                    <Menu\n                                        activatorRef={activatorMenuRef}\n                                        onClose={closeErrorMenu}\n                                        placement=\"bottom-right\"\n                                        visible={menuVisible}\n                                    >\n                                        <ChatBubbleErrorMenuProvider value={closeErrorMenu}>\n                                            {errorActions}\n                                        </ChatBubbleErrorMenuProvider>\n                                    </Menu>\n                                )}\n                            </div>\n                        )}\n                        {aside && (\n                            <div\n                                className={classnames(styles.aside, { [styles.asideRevealed]: asideShow })}\n                                data-qa=\"chat-bubble-aside\"\n                            >\n                                {aside}\n                            </div>\n                        )}\n                    </div>\n                    {mode === 'outgoing' && error && errorText && (\n                        <div className={styles.errorText} data-qa=\"chat-bubble-error-text\">\n                            <Text typography=\"label-4-regular\" style=\"negative\" maxLines={2}>\n                                {errorText}\n                            </Text>\n                        </div>\n                    )}\n                    {buttons && (\n                        <ButtonDefaultPropsContext props={buttonsProps}>\n                            <div className={styles.buttons} data-qa=\"chat-bubble-buttons\">\n                                {buttons}\n                            </div>\n                        </ButtonDefaultPropsContext>\n                    )}\n                </div>\n            </ChatBubbleModeProvider>\n        );\n    }\n) as React.ForwardRefExoticComponent<ChatBubbleProps & React.RefAttributes<HTMLDivElement>> & ChatBubbleComponents;\n\nChatBubble.displayName = 'ChatBubble';\n\nChatBubble.Call = ChatBubbleCall;\nChatBubble.ErrorAction = ChatBubbleErrorAction;\nChatBubble.File = ChatBubbleFile;\nChatBubble.Label = ChatBubbleLabel;\nChatBubble.Media = ChatBubbleMedia;\nChatBubble.Message = ChatBubbleMessage;\nChatBubble.Reply = ChatBubbleReply;\nChatBubble.Snippet = ChatBubbleSnippet;\nChatBubble.Status = ChatBubbleStatus;\n"],"names":[],"mappings":"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"}

package/ErrorAction.js

@@ -4,18 +4,17 @@ import { forwardRef } from 'react';
 import { useChatBubbleErrorMenuClose } from './internal/errorMenu.js';
 import { Menu } from '@hh.ru/magritte-ui-menu';
 
-/**
- * Пункт меню, которое открывается по нажатию на иконку ошибки отправки.
- */
-const ChatBubbleErrorAction = forwardRef(({ 'data-qa': dataQa = 'chat-bubble-error-action', onClick, ...props }, ref) => {
+const ChatBubbleErrorAction = forwardRef(
+  ({ "data-qa": dataQa = "chat-bubble-error-action", onClick, ...props }, ref) => {
     const close = useChatBubbleErrorMenuClose();
     const handleClick = (event) => {
-        onClick?.(event);
-        close();
+      onClick?.(event);
+      close();
     };
-    return jsx(Menu.Item, { ...props, "data-qa": dataQa, onClick: handleClick, ref: ref });
-});
-ChatBubbleErrorAction.displayName = 'ChatBubbleErrorAction';
+    return /* @__PURE__ */ jsx(Menu.Item, { ...props, "data-qa": dataQa, onClick: handleClick, ref });
+  }
+);
+ChatBubbleErrorAction.displayName = "ChatBubbleErrorAction";
 
 export { ChatBubbleErrorAction };
 //# sourceMappingURL=ErrorAction.js.map

package/ErrorAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorAction.js","sources":["src/ErrorAction.tsx"],"sourcesContent":["import { forwardRef, type MouseEvent } from 'react';\n\nimport { useChatBubbleErrorMenuClose } from '@hh.ru/magritte-ui-chat-bubble/internal/errorMenu';\nimport { Menu, type MenuItemProps } from '@hh.ru/magritte-ui-menu';\n\nexport interface ChatBubbleErrorActionProps extends Pick<\n    MenuItemProps,\n    'children' | 'disabled' | 'icon' | 'style' | 'subtitle' | 'onClick'\n> {\n    /** Значение data-qa\n     * @default chat-bubble-error-action\n     */\n    'data-qa'?: string;\n}\n\n/**\n * Пункт меню, которое открывается по нажатию на иконку ошибки отправки.\n */\nexport const ChatBubbleErrorAction = forwardRef<HTMLDivElement, ChatBubbleErrorActionProps>(\n    ({ 'data-qa': dataQa = 'chat-bubble-error-action', onClick, ...props }, ref) => {\n        const close = useChatBubbleErrorMenuClose();\n\n        const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n            onClick?.(event);\n            close();\n        };\n\n        return <Menu.Item {...props} data-qa={dataQa} onClick={handleClick} ref={ref} />;\n    }\n);\n\nChatBubbleErrorAction.displayName = 'ChatBubbleErrorAction';\n"],"names":["_jsx"],"mappings":";;;;;AAeA;;AAEG;MACU,qBAAqB,GAAG,UAAU,CAC3C,CAAC,EAAE,SAAS,EAAE,MAAM,GAAG,0BAA0B,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AAC3E,IAAA,MAAM,KAAK,GAAG,2BAA2B,EAAE,CAAC;AAE5C,IAAA,MAAM,WAAW,GAAG,CAAC,KAAiC,KAAI;AACtD,QAAA,OAAO,GAAG,KAAK,CAAC,CAAC;AACjB,QAAA,KAAK,EAAE,CAAC;AACZ,KAAC,CAAC;AAEF,IAAA,OAAOA,IAAC,IAAI,CAAC,IAAI,EAAA,EAAA,GAAK,KAAK,EAAW,SAAA,EAAA,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,EAAE,GAAG,GAAI,CAAC;AACrF,CAAC,EACH;AAEF,qBAAqB,CAAC,WAAW,GAAG,uBAAuB;;;;"}
+{"version":3,"file":"ErrorAction.js","sources":["src/ErrorAction.tsx"],"sourcesContent":["import { forwardRef, type MouseEvent } from 'react';\n\nimport { useChatBubbleErrorMenuClose } from '@hh.ru/magritte-ui-chat-bubble/internal/errorMenu';\nimport { Menu, type MenuItemProps } from '@hh.ru/magritte-ui-menu';\n\nexport interface ChatBubbleErrorActionProps extends Pick<\n    MenuItemProps,\n    'children' | 'disabled' | 'icon' | 'style' | 'subtitle' | 'onClick'\n> {\n    /** Значение data-qa\n     * @default chat-bubble-error-action\n     */\n    'data-qa'?: string;\n}\n\n/**\n * Пункт меню, которое открывается по нажатию на иконку ошибки отправки.\n */\nexport const ChatBubbleErrorAction = forwardRef<HTMLDivElement, ChatBubbleErrorActionProps>(\n    ({ 'data-qa': dataQa = 'chat-bubble-error-action', onClick, ...props }, ref) => {\n        const close = useChatBubbleErrorMenuClose();\n\n        const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n            onClick?.(event);\n            close();\n        };\n\n        return <Menu.Item {...props} data-qa={dataQa} onClick={handleClick} ref={ref} />;\n    }\n);\n\nChatBubbleErrorAction.displayName = 'ChatBubbleErrorAction';\n"],"names":[],"mappings":";;;;;AAkBO,MAAM,qBAAwB,GAAA,UAAA;AAAA,EACjC,CAAC,EAAE,SAAW,EAAA,MAAA,GAAS,4BAA4B,OAAS,EAAA,GAAG,KAAM,EAAA,EAAG,GAAQ,KAAA;AAC5E,IAAA,MAAM,QAAQ,2BAA4B,EAAA,CAAA;AAE1C,IAAM,MAAA,WAAA,GAAc,CAAC,KAAsC,KAAA;AACvD,MAAA,OAAA,GAAU,KAAK,CAAA,CAAA;AACf,MAAM,KAAA,EAAA,CAAA;AAAA,KACV,CAAA;AAEA,IAAO,uBAAA,GAAA,CAAC,IAAK,CAAA,IAAA,EAAL,EAAW,GAAG,OAAO,SAAS,EAAA,MAAA,EAAQ,OAAS,EAAA,WAAA,EAAa,GAAU,EAAA,CAAA,CAAA;AAAA,GAClF;AACJ,EAAA;AAEA,qBAAA,CAAsB,WAAc,GAAA,uBAAA;;;;"}

package/File.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
-import { type ChatBubbleMetaHostProps } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';
+import { type ChatBubbleMetaHostProps } from './internal/utils';
 export type ChatBubbleFileState = 'unloaded' | 'loading' | 'preview' | 'loaded' | 'invalid';
 type ChatBubbleFileHelper = HTMLAttributes<HTMLDivElement> & ChatBubbleMetaHostProps;
 export interface ChatBubbleFileProps extends Omit<ChatBubbleFileHelper, 'children'> {
@@ -24,5 +24,5 @@ export interface ChatBubbleFileProps extends Omit<ChatBubbleFileHelper, 'childre
      */
     'data-qa'?: string;
 }
-export declare const ChatBubbleFile: import("react").ForwardRefExoticComponent<ChatBubbleFileProps & import("react").RefAttributes<HTMLDivElement>> & import("@hh.ru/magritte-ui-chat-bubble/internal/utils").MetaHostComponent;
+export declare const ChatBubbleFile: import("react").ForwardRefExoticComponent<ChatBubbleFileProps & import("react").RefAttributes<HTMLDivElement>> & import("./internal/utils").MetaHostComponent;
 export {};

package/File.js

@@ -4,29 +4,73 @@ import { forwardRef, useMemo } from 'react';
 import { Cell, CellText } from '@hh.ru/magritte-ui-cell';
 import { useChatBubbleColors } from './internal/colors.js';
 import { markMetaHost } from './internal/utils.js';
-import { ExclamationTriangleOutlinedSize16, ArrowDownLineOutlinedSize24, DocumentOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
+import { ArrowDownLineOutlinedSize24, DocumentOutlinedSize24, ExclamationTriangleOutlinedSize16 } 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-DgO7_sM3.js';
+import { s as styles } from './chat-bubble-BOBGge0h.js';
 import './internal/mode.js';
 
-/** Прикреплённый файл */
-const ChatBubbleFileComponent = forwardRef(({ 'data-qa': dataQa = 'chat-bubble-file', description, meta, name, preview, state = 'loaded', previewAlt, ...props }, ref) => {
+const ChatBubbleFileComponent = forwardRef(
+  ({
+    "data-qa": dataQa = "chat-bubble-file",
+    description,
+    meta,
+    name,
+    preview,
+    state = "loaded",
+    previewAlt,
+    ...props
+  }, ref) => {
     const colors = useChatBubbleColors();
-    const isLoading = state === 'loading';
-    // пока файл не скачан, на иконке стрелка
-    const Icon = state === 'unloaded' || isLoading ? ArrowDownLineOutlinedSize24 : DocumentOutlinedSize24;
-    const defaultLinkProps = useMemo(() => ({ ...colors.link, typography: 'label-3-regular', inline: true }), [colors]);
+    const isLoading = state === "loading";
+    const Icon = state === "unloaded" || isLoading ? ArrowDownLineOutlinedSize24 : DocumentOutlinedSize24;
+    const defaultLinkProps = useMemo(
+      () => ({ ...colors.link, typography: "label-3-regular", inline: true }),
+      [colors]
+    );
     let leftSlot;
     if (isLoading) {
-        leftSlot = jsx(Loader, { size: 16, color: colors.secondaryIcon });
+      leftSlot = /* @__PURE__ */ jsx(Loader, { size: 16, color: colors.secondaryIcon });
+    } else if (state === "invalid") {
+      leftSlot = /* @__PURE__ */ jsx(ExclamationTriangleOutlinedSize16, { initialColor: "negative" });
     }
-    else if (state === 'invalid') {
-        leftSlot = jsx(ExclamationTriangleOutlinedSize16, { initialColor: "negative" });
-    }
-    return (jsxs("div", { ...props, className: styles.file, "data-qa": dataQa, ref: ref, children: [jsxs(Cell, { align: "center", horPadding: false, vertPadding: false, left: state === 'preview' && preview ? (jsx("img", { className: styles.filePreview, src: preview, alt: previewAlt ?? '' })) : (jsx(Icon, { initialColor: colors.fileIcon, backgroundStyle: colors.fileIconBackground, padding: 12, borderRadius: 8 })), children: [jsx(CellText, { type: "title", style: colors.text, maxLines: 1, "data-qa": "chat-bubble-file-name", children: name }), description && (jsx(CellText, { type: "subtitle", style: colors.secondaryText, maxLines: 1, left: leftSlot, "data-qa": "chat-bubble-file-description", children: jsx(LinkDefaultPropsContext, { props: defaultLinkProps, children: description }) }))] }), meta] }));
-});
-ChatBubbleFileComponent.displayName = 'ChatBubbleFile';
+    return /* @__PURE__ */ jsxs("div", { ...props, className: styles.file, "data-qa": dataQa, ref, children: [
+      /* @__PURE__ */ jsxs(
+        Cell,
+        {
+          align: "center",
+          horPadding: false,
+          vertPadding: false,
+          left: state === "preview" && preview ? /* @__PURE__ */ jsx("img", { className: styles.filePreview, src: preview, alt: previewAlt ?? "" }) : /* @__PURE__ */ jsx(
+            Icon,
+            {
+              initialColor: colors.fileIcon,
+              backgroundStyle: colors.fileIconBackground,
+              padding: 12,
+              borderRadius: 8
+            }
+          ),
+          children: [
+            /* @__PURE__ */ jsx(CellText, { type: "title", style: colors.text, maxLines: 1, "data-qa": "chat-bubble-file-name", children: name }),
+            description && /* @__PURE__ */ jsx(
+              CellText,
+              {
+                type: "subtitle",
+                style: colors.secondaryText,
+                maxLines: 1,
+                left: leftSlot,
+                "data-qa": "chat-bubble-file-description",
+                children: /* @__PURE__ */ jsx(LinkDefaultPropsContext, { props: defaultLinkProps, children: description })
+              }
+            )
+          ]
+        }
+      ),
+      meta
+    ] });
+  }
+);
+ChatBubbleFileComponent.displayName = "ChatBubbleFile";
 const ChatBubbleFile = markMetaHost(ChatBubbleFileComponent);
 
 export { ChatBubbleFile };

package/File.js.map

@@ -1 +1 @@
-{"version":3,"file":"File.js","sources":["src/File.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode, useMemo } from 'react';\n\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { useChatBubbleColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { markMetaHost, type ChatBubbleMetaHostProps } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';\nimport {\n    ArrowDownLineOutlinedSize24,\n    DocumentOutlinedSize24,\n    ExclamationTriangleOutlinedSize16,\n} from '@hh.ru/magritte-ui-icon/icon';\nimport { LinkDefaultPropsContext } from '@hh.ru/magritte-ui-link';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\n\nimport styles from './chat-bubble.less';\n\nexport type ChatBubbleFileState = 'unloaded' | 'loading' | 'preview' | 'loaded' | 'invalid';\n\ntype ChatBubbleFileHelper = HTMLAttributes<HTMLDivElement> & ChatBubbleMetaHostProps;\n\nexport interface ChatBubbleFileProps extends Omit<ChatBubbleFileHelper, 'children'> {\n    /** Имя файла */\n    name?: ReactNode;\n    /**\n     * Строка под именем (например, для размера файла и действия с ним)\n     */\n    description?: ReactNode;\n    /**\n     * Состояние файла\n     * @default loaded\n     */\n    state?: ChatBubbleFileState;\n    /** Url превью файла, показывается в состоянии `preview` */\n    preview?: string;\n    /** Alt превью файла */\n    previewAlt?: string;\n    /**\n     * Значение data-qa\n     * @default chat-bubble-file\n     */\n    'data-qa'?: string;\n}\n\n/** Прикреплённый файл */\nconst ChatBubbleFileComponent = forwardRef<HTMLDivElement, ChatBubbleFileProps>(\n    (\n        {\n            'data-qa': dataQa = 'chat-bubble-file',\n            description,\n            meta,\n            name,\n            preview,\n            state = 'loaded',\n            previewAlt,\n            ...props\n        },\n        ref\n    ) => {\n        const colors = useChatBubbleColors();\n        const isLoading = state === 'loading';\n        // пока файл не скачан, на иконке стрелка\n        const Icon = state === 'unloaded' || isLoading ? ArrowDownLineOutlinedSize24 : DocumentOutlinedSize24;\n\n        const defaultLinkProps = useMemo(\n            () => ({ ...colors.link, typography: 'label-3-regular' as const, inline: true }),\n            [colors]\n        );\n\n        let leftSlot: ReactNode;\n        if (isLoading) {\n            leftSlot = <Loader size={16} color={colors.secondaryIcon} />;\n        } else if (state === 'invalid') {\n            leftSlot = <ExclamationTriangleOutlinedSize16 initialColor=\"negative\" />;\n        }\n\n        return (\n            <div {...props} className={styles.file} data-qa={dataQa} ref={ref}>\n                <Cell\n                    align=\"center\"\n                    horPadding={false}\n                    vertPadding={false}\n                    left={\n                        state === 'preview' && preview ? (\n                            <img className={styles.filePreview} src={preview} alt={previewAlt ?? ''} />\n                        ) : (\n                            <Icon\n                                initialColor={colors.fileIcon}\n                                backgroundStyle={colors.fileIconBackground}\n                                padding={12}\n                                borderRadius={8}\n                            />\n                        )\n                    }\n                >\n                    <CellText type=\"title\" style={colors.text} maxLines={1} data-qa=\"chat-bubble-file-name\">\n                        {name}\n                    </CellText>\n                    {description && (\n                        <CellText\n                            type=\"subtitle\"\n                            style={colors.secondaryText}\n                            maxLines={1}\n                            left={leftSlot}\n                            data-qa=\"chat-bubble-file-description\"\n                        >\n                            <LinkDefaultPropsContext props={defaultLinkProps}>{description}</LinkDefaultPropsContext>\n                        </CellText>\n                    )}\n                </Cell>\n                {meta}\n            </div>\n        );\n    }\n);\n\nChatBubbleFileComponent.displayName = 'ChatBubbleFile';\n\nexport const ChatBubbleFile = markMetaHost(ChatBubbleFileComponent);\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;AA0CA;AACA,MAAM,uBAAuB,GAAG,UAAU,CACtC,CACI,EACI,SAAS,EAAE,MAAM,GAAG,kBAAkB,EACtC,WAAW,EACX,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,KAAK,GAAG,QAAQ,EAChB,UAAU,EACV,GAAG,KAAK,EACX,EACD,GAAG,KACH;AACA,IAAA,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAC;AACrC,IAAA,MAAM,SAAS,GAAG,KAAK,KAAK,SAAS,CAAC;;AAEtC,IAAA,MAAM,IAAI,GAAG,KAAK,KAAK,UAAU,IAAI,SAAS,GAAG,2BAA2B,GAAG,sBAAsB,CAAC;AAEtG,IAAA,MAAM,gBAAgB,GAAG,OAAO,CAC5B,OAAO,EAAE,GAAG,MAAM,CAAC,IAAI,EAAE,UAAU,EAAE,iBAA0B,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAChF,CAAC,MAAM,CAAC,CACX,CAAC;AAEF,IAAA,IAAI,QAAmB,CAAC;IACxB,IAAI,SAAS,EAAE;AACX,QAAA,QAAQ,GAAGA,GAAA,CAAC,MAAM,EAAA,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,aAAa,GAAI,CAAC;KAChE;AAAM,SAAA,IAAI,KAAK,KAAK,SAAS,EAAE;QAC5B,QAAQ,GAAGA,IAAC,iCAAiC,EAAA,EAAC,YAAY,EAAC,UAAU,GAAG,CAAC;KAC5E;AAED,IAAA,QACIC,IAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,aAAW,MAAM,EAAE,GAAG,EAAE,GAAG,EAC7D,QAAA,EAAA,CAAAA,IAAA,CAAC,IAAI,EAAA,EACD,KAAK,EAAC,QAAQ,EACd,UAAU,EAAE,KAAK,EACjB,WAAW,EAAE,KAAK,EAClB,IAAI,EACA,KAAK,KAAK,SAAS,IAAI,OAAO,IAC1BD,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,WAAW,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,UAAU,IAAI,EAAE,GAAI,KAE3EA,GAAC,CAAA,IAAI,EACD,EAAA,YAAY,EAAE,MAAM,CAAC,QAAQ,EAC7B,eAAe,EAAE,MAAM,CAAC,kBAAkB,EAC1C,OAAO,EAAE,EAAE,EACX,YAAY,EAAE,CAAC,EAAA,CACjB,CACL,EAGL,QAAA,EAAA,CAAAA,GAAA,CAAC,QAAQ,EAAA,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAU,SAAA,EAAA,uBAAuB,YAClF,IAAI,EAAA,CACE,EACV,WAAW,KACRA,GAAA,CAAC,QAAQ,EAAA,EACL,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,MAAM,CAAC,aAAa,EAC3B,QAAQ,EAAE,CAAC,EACX,IAAI,EAAE,QAAQ,EAAA,SAAA,EACN,8BAA8B,EAAA,QAAA,EAEtCA,IAAC,uBAAuB,EAAA,EAAC,KAAK,EAAE,gBAAgB,EAAG,QAAA,EAAA,WAAW,EAA2B,CAAA,EAAA,CAClF,CACd,CACE,EAAA,CAAA,EACN,IAAI,CAAA,EAAA,CACH,EACR;AACN,CAAC,CACJ,CAAC;AAEF,uBAAuB,CAAC,WAAW,GAAG,gBAAgB,CAAC;MAE1C,cAAc,GAAG,YAAY,CAAC,uBAAuB;;;;"}
+{"version":3,"file":"File.js","sources":["src/File.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode, useMemo } from 'react';\n\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { useChatBubbleColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { markMetaHost, type ChatBubbleMetaHostProps } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';\nimport {\n    ArrowDownLineOutlinedSize24,\n    DocumentOutlinedSize24,\n    ExclamationTriangleOutlinedSize16,\n} from '@hh.ru/magritte-ui-icon/icon';\nimport { LinkDefaultPropsContext } from '@hh.ru/magritte-ui-link';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\n\nimport styles from './chat-bubble.less';\n\nexport type ChatBubbleFileState = 'unloaded' | 'loading' | 'preview' | 'loaded' | 'invalid';\n\ntype ChatBubbleFileHelper = HTMLAttributes<HTMLDivElement> & ChatBubbleMetaHostProps;\n\nexport interface ChatBubbleFileProps extends Omit<ChatBubbleFileHelper, 'children'> {\n    /** Имя файла */\n    name?: ReactNode;\n    /**\n     * Строка под именем (например, для размера файла и действия с ним)\n     */\n    description?: ReactNode;\n    /**\n     * Состояние файла\n     * @default loaded\n     */\n    state?: ChatBubbleFileState;\n    /** Url превью файла, показывается в состоянии `preview` */\n    preview?: string;\n    /** Alt превью файла */\n    previewAlt?: string;\n    /**\n     * Значение data-qa\n     * @default chat-bubble-file\n     */\n    'data-qa'?: string;\n}\n\n/** Прикреплённый файл */\nconst ChatBubbleFileComponent = forwardRef<HTMLDivElement, ChatBubbleFileProps>(\n    (\n        {\n            'data-qa': dataQa = 'chat-bubble-file',\n            description,\n            meta,\n            name,\n            preview,\n            state = 'loaded',\n            previewAlt,\n            ...props\n        },\n        ref\n    ) => {\n        const colors = useChatBubbleColors();\n        const isLoading = state === 'loading';\n        // пока файл не скачан, на иконке стрелка\n        const Icon = state === 'unloaded' || isLoading ? ArrowDownLineOutlinedSize24 : DocumentOutlinedSize24;\n\n        const defaultLinkProps = useMemo(\n            () => ({ ...colors.link, typography: 'label-3-regular' as const, inline: true }),\n            [colors]\n        );\n\n        let leftSlot: ReactNode;\n        if (isLoading) {\n            leftSlot = <Loader size={16} color={colors.secondaryIcon} />;\n        } else if (state === 'invalid') {\n            leftSlot = <ExclamationTriangleOutlinedSize16 initialColor=\"negative\" />;\n        }\n\n        return (\n            <div {...props} className={styles.file} data-qa={dataQa} ref={ref}>\n                <Cell\n                    align=\"center\"\n                    horPadding={false}\n                    vertPadding={false}\n                    left={\n                        state === 'preview' && preview ? (\n                            <img className={styles.filePreview} src={preview} alt={previewAlt ?? ''} />\n                        ) : (\n                            <Icon\n                                initialColor={colors.fileIcon}\n                                backgroundStyle={colors.fileIconBackground}\n                                padding={12}\n                                borderRadius={8}\n                            />\n                        )\n                    }\n                >\n                    <CellText type=\"title\" style={colors.text} maxLines={1} data-qa=\"chat-bubble-file-name\">\n                        {name}\n                    </CellText>\n                    {description && (\n                        <CellText\n                            type=\"subtitle\"\n                            style={colors.secondaryText}\n                            maxLines={1}\n                            left={leftSlot}\n                            data-qa=\"chat-bubble-file-description\"\n                        >\n                            <LinkDefaultPropsContext props={defaultLinkProps}>{description}</LinkDefaultPropsContext>\n                        </CellText>\n                    )}\n                </Cell>\n                {meta}\n            </div>\n        );\n    }\n);\n\nChatBubbleFileComponent.displayName = 'ChatBubbleFile';\n\nexport const ChatBubbleFile = markMetaHost(ChatBubbleFileComponent);\n"],"names":[],"mappings":";;;;;;;;;;;AA2CA,MAAM,uBAA0B,GAAA,UAAA;AAAA,EAC5B,CACI;AAAA,IACI,WAAW,MAAS,GAAA,kBAAA;AAAA,IACpB,WAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAQ,GAAA,QAAA;AAAA,IACR,UAAA;AAAA,IACA,GAAG,KAAA;AAAA,KAEP,GACC,KAAA;AACD,IAAA,MAAM,SAAS,mBAAoB,EAAA,CAAA;AACnC,IAAA,MAAM,YAAY,KAAU,KAAA,SAAA,CAAA;AAE5B,IAAA,MAAM,IAAO,GAAA,KAAA,KAAU,UAAc,IAAA,SAAA,GAAY,2BAA8B,GAAA,sBAAA,CAAA;AAE/E,IAAA,MAAM,gBAAmB,GAAA,OAAA;AAAA,MACrB,OAAO,EAAE,GAAG,MAAA,CAAO,MAAM,UAAY,EAAA,iBAAA,EAA4B,QAAQ,IAAK,EAAA,CAAA;AAAA,MAC9E,CAAC,MAAM,CAAA;AAAA,KACX,CAAA;AAEA,IAAI,IAAA,QAAA,CAAA;AACJ,IAAA,IAAI,SAAW,EAAA;AACX,MAAA,QAAA,uBAAY,MAAO,EAAA,EAAA,IAAA,EAAM,EAAI,EAAA,KAAA,EAAO,OAAO,aAAe,EAAA,CAAA,CAAA;AAAA,KAC9D,MAAA,IAAW,UAAU,SAAW,EAAA;AAC5B,MAAW,QAAA,mBAAA,GAAA,CAAC,iCAAkC,EAAA,EAAA,YAAA,EAAa,UAAW,EAAA,CAAA,CAAA;AAAA,KAC1E;AAEA,IACI,uBAAA,IAAA,CAAC,SAAK,GAAG,KAAA,EAAO,WAAW,MAAO,CAAA,IAAA,EAAM,SAAS,EAAA,MAAA,EAAQ,GACrD,EAAA,QAAA,EAAA;AAAA,sBAAA,IAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACG,KAAM,EAAA,QAAA;AAAA,UACN,UAAY,EAAA,KAAA;AAAA,UACZ,WAAa,EAAA,KAAA;AAAA,UACb,IACI,EAAA,KAAA,KAAU,SAAa,IAAA,OAAA,uBAClB,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,WAAA,EAAa,GAAK,EAAA,OAAA,EAAS,GAAK,EAAA,UAAA,IAAc,IAAI,CAEzE,mBAAA,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACG,cAAc,MAAO,CAAA,QAAA;AAAA,cACrB,iBAAiB,MAAO,CAAA,kBAAA;AAAA,cACxB,OAAS,EAAA,EAAA;AAAA,cACT,YAAc,EAAA,CAAA;AAAA,aAAA;AAAA,WAClB;AAAA,UAIR,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,QAAA,EAAA,EAAS,IAAK,EAAA,OAAA,EAAQ,KAAO,EAAA,MAAA,CAAO,MAAM,QAAU,EAAA,CAAA,EAAG,SAAQ,EAAA,uBAAA,EAC3D,QACL,EAAA,IAAA,EAAA,CAAA;AAAA,YACC,WACG,oBAAA,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACG,IAAK,EAAA,UAAA;AAAA,gBACL,OAAO,MAAO,CAAA,aAAA;AAAA,gBACd,QAAU,EAAA,CAAA;AAAA,gBACV,IAAM,EAAA,QAAA;AAAA,gBACN,SAAQ,EAAA,8BAAA;AAAA,gBAER,QAAC,kBAAA,GAAA,CAAA,uBAAA,EAAA,EAAwB,KAAO,EAAA,gBAAA,EAAmB,QAAY,EAAA,WAAA,EAAA,CAAA;AAAA,eAAA;AAAA,aACnE;AAAA,WAAA;AAAA,SAAA;AAAA,OAER;AAAA,MACC,IAAA;AAAA,KACL,EAAA,CAAA,CAAA;AAAA,GAER;AACJ,CAAA,CAAA;AAEA,uBAAA,CAAwB,WAAc,GAAA,gBAAA,CAAA;AAEzB,MAAA,cAAA,GAAiB,aAAa,uBAAuB;;;;"}

package/Label.js

@@ -3,17 +3,14 @@ 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-DgO7_sM3.js';
+import { s as styles } from './chat-bubble-BOBGge0h.js';
 import './internal/mode.js';
 
-/**
- * Заголовок сообщения.
- */
 const ChatBubbleLabel = forwardRef(({ children, ...props }, ref) => {
-    const colors = useChatBubbleColors();
-    return (jsx("div", { ...props, className: styles.label, "data-qa": "chat-bubble-label", ref: ref, children: jsx(Text, { typography: "subtitle-2-semibold", style: colors.accentText, maxLines: 1, children: children }) }));
+  const colors = useChatBubbleColors();
+  return /* @__PURE__ */ jsx("div", { ...props, className: styles.label, "data-qa": "chat-bubble-label", ref, children: /* @__PURE__ */ jsx(Text, { typography: "subtitle-2-semibold", style: colors.accentText, maxLines: 1, children }) });
 });
-ChatBubbleLabel.displayName = 'ChatBubbleLabel';
+ChatBubbleLabel.displayName = "ChatBubbleLabel";
 
 export { ChatBubbleLabel };
 //# sourceMappingURL=Label.js.map

package/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sources":["src/Label.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, forwardRef } from 'react';\n\nimport { useChatBubbleColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './chat-bubble.less';\n\nexport interface ChatBubbleLabelProps extends HTMLAttributes<HTMLDivElement> {\n    /** Имя отправителя */\n    children?: ReactNode;\n}\n\n/**\n * Заголовок сообщения.\n */\nexport const ChatBubbleLabel = forwardRef<HTMLDivElement, ChatBubbleLabelProps>(({ children, ...props }, ref) => {\n    const colors = useChatBubbleColors();\n\n    return (\n        <div {...props} className={styles.label} data-qa=\"chat-bubble-label\" ref={ref}>\n            <Text typography=\"subtitle-2-semibold\" style={colors.accentText} maxLines={1}>\n                {children}\n            </Text>\n        </div>\n    );\n});\n\nChatBubbleLabel.displayName = 'ChatBubbleLabel';\n"],"names":["_jsx"],"mappings":";;;;;;;AAYA;;AAEG;AACU,MAAA,eAAe,GAAG,UAAU,CAAuC,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AAC5G,IAAA,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAC;AAErC,IAAA,QACIA,GAAS,CAAA,KAAA,EAAA,EAAA,GAAA,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,EAAA,SAAA,EAAU,mBAAmB,EAAC,GAAG,EAAE,GAAG,YACzEA,GAAC,CAAA,IAAI,EAAC,EAAA,UAAU,EAAC,qBAAqB,EAAC,KAAK,EAAE,MAAM,CAAC,UAAU,EAAE,QAAQ,EAAE,CAAC,EAAA,QAAA,EACvE,QAAQ,EACN,CAAA,EAAA,CACL,EACR;AACN,CAAC,EAAE;AAEH,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}
+{"version":3,"file":"Label.js","sources":["src/Label.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, forwardRef } from 'react';\n\nimport { useChatBubbleColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './chat-bubble.less';\n\nexport interface ChatBubbleLabelProps extends HTMLAttributes<HTMLDivElement> {\n    /** Имя отправителя */\n    children?: ReactNode;\n}\n\n/**\n * Заголовок сообщения.\n */\nexport const ChatBubbleLabel = forwardRef<HTMLDivElement, ChatBubbleLabelProps>(({ children, ...props }, ref) => {\n    const colors = useChatBubbleColors();\n\n    return (\n        <div {...props} className={styles.label} data-qa=\"chat-bubble-label\" ref={ref}>\n            <Text typography=\"subtitle-2-semibold\" style={colors.accentText} maxLines={1}>\n                {children}\n            </Text>\n        </div>\n    );\n});\n\nChatBubbleLabel.displayName = 'ChatBubbleLabel';\n"],"names":[],"mappings":";;;;;;;AAea,MAAA,eAAA,GAAkB,WAAiD,CAAC,EAAE,UAAU,GAAG,KAAA,IAAS,GAAQ,KAAA;AAC7G,EAAA,MAAM,SAAS,mBAAoB,EAAA,CAAA;AAEnC,EACI,uBAAA,GAAA,CAAC,SAAK,GAAG,KAAA,EAAO,WAAW,MAAO,CAAA,KAAA,EAAO,WAAQ,mBAAoB,EAAA,GAAA,EACjE,8BAAC,IAAK,EAAA,EAAA,UAAA,EAAW,uBAAsB,KAAO,EAAA,MAAA,CAAO,YAAY,QAAU,EAAA,CAAA,EACtE,UACL,CACJ,EAAA,CAAA,CAAA;AAER,CAAC,EAAA;AAED,eAAA,CAAgB,WAAc,GAAA,iBAAA;;;;"}

package/Media.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
-import { type ChatBubbleMetaHostProps } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';
+import { type ChatBubbleMetaHostProps } from './internal/utils';
 export interface ChatBubbleMediaProps extends HTMLAttributes<HTMLDivElement>, ChatBubbleMetaHostProps {
     /** Url изображения или превью видео */
     src?: string;
@@ -27,4 +27,4 @@ export interface ChatBubbleMediaProps extends HTMLAttributes<HTMLDivElement>, Ch
      */
     height?: number;
 }
-export declare const ChatBubbleMedia: import("react").ForwardRefExoticComponent<ChatBubbleMediaProps & import("react").RefAttributes<HTMLDivElement>> & import("@hh.ru/magritte-ui-chat-bubble/internal/utils").MetaHostComponent;
+export declare const ChatBubbleMedia: import("react").ForwardRefExoticComponent<ChatBubbleMediaProps & import("react").RefAttributes<HTMLDivElement>> & import("./internal/utils").MetaHostComponent;