@pega/cosmos-react-social 4.0.0-dev.21.0 → 4.0.0-dev.22.0

package/lib/components/Feed/FeedEditRegion.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { Button, Flex, Icon, useI18n, useOuterEvent } from '@pega/cosmos-react-core';
+import FeedRichText from './FeedRichText';
+import { minInputHeight, StyledActions } from './FeedInputRegion';
+import FeedButton from './FeedButton';
+const StyledInputContainer = styled.div `
+  width: 100%;
+`;
+const FeedEditRegion = (props) => {
+    const { variant, id, content, setEditMode, onEditSubmit, emptyEditText, setEmptyEditText } = props;
+    const t = useI18n();
+    const rteRef = useRef();
+    const editTextAreaRef = useRef(null);
+    const [contentModified, setContentModified] = useState(false);
+    useOuterEvent('mousedown', [editTextAreaRef], () => {
+        if (emptyEditText)
+            setEditMode(false);
+    });
+    const handleEdit = () => {
+        if (!emptyEditText && contentModified) {
+            onEditSubmit?.({
+                id,
+                value: rteRef.current?.getPlainText() || ''
+            });
+            setEditMode(false);
+        }
+    };
+    const onKeyDown = (event) => {
+        if ((event.metaKey || event.ctrlKey) && event.key === 'Enter')
+            handleEdit();
+    };
+    useEffect(() => {
+        if (rteRef.current) {
+            rteRef.current?.focus();
+        }
+    }, [rteRef]);
+    const label = t(variant === 'post' ? 'feed_edit_post' : 'feed_edit_comment');
+    return (_jsxs(Flex, { container: { gap: 1, alignItems: 'start' }, children: [_jsx(StyledInputContainer, { ref: editTextAreaRef, children: _jsx(FeedRichText, { label: label, onChange: () => {
+                        setEmptyEditText(rteRef.current?.getPlainText().trim() === '');
+                        setContentModified(rteRef.current?.getPlainText() !== content);
+                    }, onKeyDown: onKeyDown, height: { min: minInputHeight }, defaultValue: content, ref: rteRef }) }), _jsxs(Flex, { as: StyledActions, container: { direction: 'column', gap: 0.5 }, children: [_jsx(Button, { variant: 'simple', as: FeedButton, onClick: () => setEditMode(false), icon: true, label: t('cancel'), children: _jsx(Icon, { name: 'times' }) }), _jsx(Button, { as: FeedButton, disabled: emptyEditText || !contentModified, variant: 'simple', onClick: handleEdit, icon: true, label: t('update'), children: _jsx(Icon, { name: 'send' }) })] })] }));
+};
+export default FeedEditRegion;
+//# sourceMappingURL=FeedEditRegion.js.map

package/lib/components/Feed/FeedEditRegion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeedEditRegion.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedEditRegion.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { Button, Flex, ForwardProps, Icon, useI18n, useOuterEvent } from '@pega/cosmos-react-core';\nimport { RichTextEditorState } from '@pega/cosmos-react-rte';\n\nimport FeedRichText from './FeedRichText';\nimport { FeedEditRegionProps } from './Feed.types';\nimport { minInputHeight, StyledActions } from './FeedInputRegion';\nimport FeedButton from './FeedButton';\n\nconst StyledInputContainer = styled.div`\n  width: 100%;\n`;\n\nconst FeedEditRegion: FC<ForwardProps & FeedEditRegionProps> = (\n  props: ForwardProps & FeedEditRegionProps\n) => {\n  const { variant, id, content, setEditMode, onEditSubmit, emptyEditText, setEmptyEditText } =\n    props;\n\n  const t = useI18n();\n  const rteRef = useRef<RichTextEditorState>();\n  const editTextAreaRef = useRef<HTMLDivElement>(null);\n\n  const [contentModified, setContentModified] = useState(false);\n\n  useOuterEvent('mousedown', [editTextAreaRef], () => {\n    if (emptyEditText) setEditMode(false);\n  });\n\n  const handleEdit = () => {\n    if (!emptyEditText && contentModified) {\n      onEditSubmit?.({\n        id,\n        value: rteRef.current?.getPlainText() || ''\n      });\n      setEditMode(false);\n    }\n  };\n\n  const onKeyDown = (event: KeyboardEvent) => {\n    if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') handleEdit();\n  };\n\n  useEffect(() => {\n    if (rteRef.current) {\n      rteRef.current?.focus();\n    }\n  }, [rteRef]);\n\n  const label = t(variant === 'post' ? 'feed_edit_post' : 'feed_edit_comment');\n\n  return (\n    <Flex container={{ gap: 1, alignItems: 'start' }}>\n      <StyledInputContainer ref={editTextAreaRef}>\n        <FeedRichText\n          label={label}\n          onChange={() => {\n            setEmptyEditText(rteRef.current?.getPlainText().trim() === '');\n            setContentModified(rteRef.current?.getPlainText() !== content);\n          }}\n          onKeyDown={onKeyDown}\n          height={{ min: minInputHeight }}\n          defaultValue={content}\n          ref={rteRef}\n        />\n      </StyledInputContainer>\n      <Flex as={StyledActions} container={{ direction: 'column', gap: 0.5 }}>\n        <Button\n          variant='simple'\n          as={FeedButton}\n          onClick={() => setEditMode(false)}\n          icon\n          label={t('cancel')}\n        >\n          <Icon name='times' />\n        </Button>\n\n        <Button\n          as={FeedButton}\n          disabled={emptyEditText || !contentModified}\n          variant='simple'\n          onClick={handleEdit}\n          icon\n          label={t('update')}\n        >\n          <Icon name='send' />\n        </Button>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default FeedEditRegion;\n"]}

package/lib/components/Feed/FeedInputRegion.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { FeedInputRegionProps } from './Feed.types';
+export declare const minInputHeight = "4rem";
+export declare const StyledActions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const FeedInputRegion: FC<ForwardProps & FeedInputRegionProps>;
+export default FeedInputRegion;
+//# sourceMappingURL=FeedInputRegion.d.ts.map

package/lib/components/Feed/FeedInputRegion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeedInputRegion.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedInputRegion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAoC,MAAM,OAAO,CAAC;AAG7D,OAAO,EAKL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAMjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEpD,eAAO,MAAM,cAAc,SAAS,CAAC;AAoBrC,eAAO,MAAM,aAAa,yGAQxB,CAAC;AAQH,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,YAAY,GAAG,oBAAoB,CAsH5D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/Feed/FeedInputRegion.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { Avatar, Button, defaultThemeProp, Flex, Icon, useElement, useI18n, useOuterEvent } from '@pega/cosmos-react-core';
+import { FeedContext } from './Feed.context';
+import FeedAttachments from './FeedAttachments';
+import FeedButton from './FeedButton';
+import FeedRichText from './FeedRichText';
+export const minInputHeight = '4rem';
+const StyledAvatar = styled(Avatar)(({ theme }) => {
+    return css `
+    margin-block-start: calc(0.5 * ${theme.base.spacing});
+  `;
+});
+StyledAvatar.defaultProps = defaultThemeProp;
+const StyledTextAreaContainer = styled.div(({ theme }) => {
+    return css `
+    width: 100%;
+    overflow-y: hidden;
+    padding: 0 ${theme.base.spacing} calc(0.5 * ${theme.base.spacing}) ${theme.base.spacing};
+  `;
+});
+StyledTextAreaContainer.defaultProps = defaultThemeProp;
+export const StyledActions = styled.div(({ theme }) => {
+    return css `
+    margin-block-start: calc(2.5 * ${theme.base.spacing});
+
+    ${FeedButton} + ${FeedButton} {
+      margin-inline-start: 0;
+    }
+  `;
+});
+StyledActions.defaultProps = defaultThemeProp;
+const HiddenFileInput = styled.input `
+  display: none;
+`;
+const FeedInputRegion = (props) => {
+    const { variant, id, attachments = [], onFilesAdded, onSubmit, inputRegionEl, rteRef, selectedRecipients } = props;
+    const t = useI18n();
+    const { setShowSearchResults } = useContext(FeedContext);
+    const { avatarSrc, fullname, username, userStatus } = useContext(FeedContext).userInfo;
+    const [emptyText, setEmptyText] = useState(true);
+    const [attachmentEl, setAttachmentEl] = useElement();
+    useOuterEvent('mousedown', [inputRegionEl], () => {
+        if (emptyText)
+            rteRef.current?.clear();
+    });
+    const handleSubmit = () => {
+        setShowSearchResults?.(false);
+        if ((!emptyText || attachments.length > 0) && attachments.every(x => !x.error)) {
+            onSubmit({
+                id,
+                value: rteRef.current?.getPlainText() || '',
+                attachments: attachments || [],
+                username,
+                recipients: variant === 'post' ? selectedRecipients : undefined,
+                clear: () => {
+                    rteRef.current?.clear();
+                }
+            });
+        }
+    };
+    const onKeyDown = (event) => {
+        setShowSearchResults?.(true);
+        if ((event.metaKey || event.ctrlKey) && event.key === 'Enter')
+            handleSubmit();
+    };
+    const inputLabel = t(variant === 'post' ? 'feed_new_post' : 'feed_new_comment');
+    const submitLabel = t(variant === 'post' ? 'feed_new_post_submit' : 'feed_new_comment_submit');
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: { alignItems: 'start' }, children: [_jsx(StyledAvatar, { name: fullname, size: variant === 'post' ? 'l' : 'm', imageSrc: avatarSrc, status: userStatus }), _jsx(StyledTextAreaContainer, { children: _jsx(FeedRichText, { label: inputLabel, onChange: () => {
+                                setEmptyText(rteRef.current?.getPlainText().trim() === '');
+                            }, onKeyDown: onKeyDown, height: { min: minInputHeight }, ref: rteRef }) }), _jsxs(Flex, { as: StyledActions, container: { direction: 'column', gap: 0.5 }, children: [onFilesAdded && (_jsx(Button, { variant: 'simple', as: FeedButton, onClick: () => {
+                                    setShowSearchResults?.(false);
+                                    attachmentEl?.click();
+                                }, icon: true, label: t('file_upload_text_multiple'), children: _jsx(Icon, { name: 'paper-clip' }) })), _jsx(Button, { as: FeedButton, disabled: (emptyText && attachments.length === 0) || attachments.some(x => x.error), variant: 'simple', onClick: handleSubmit, icon: true, label: submitLabel, children: _jsx(Icon, { name: 'send' }) })] })] }), _jsx(HiddenFileInput, { ref: setAttachmentEl, type: 'file', multiple: true, onChange: () => {
+                    if (attachmentEl?.files) {
+                        onFilesAdded?.(Array.from(attachmentEl?.files));
+                    }
+                }, 
+                // Must trick input to believe there is no value when activated so that the same file may be added consecutively.
+                onClick: (event) => {
+                    event.target.value = '';
+                } }), _jsx(FeedAttachments, { variant: variant, attachments: attachments })] }));
+};
+export default FeedInputRegion;
+//# sourceMappingURL=FeedInputRegion.js.map

package/lib/components/Feed/FeedInputRegion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeedInputRegion.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedInputRegion.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, MouseEvent, useContext, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Avatar,\n  Button,\n  defaultThemeProp,\n  Flex,\n  ForwardProps,\n  Icon,\n  useElement,\n  useI18n,\n  useOuterEvent\n} from '@pega/cosmos-react-core';\n\nimport { FeedContext } from './Feed.context';\nimport FeedAttachments from './FeedAttachments';\nimport FeedButton from './FeedButton';\nimport FeedRichText from './FeedRichText';\nimport { FeedInputRegionProps } from './Feed.types';\n\nexport const minInputHeight = '4rem';\n\nconst StyledAvatar = styled(Avatar)(({ theme }) => {\n  return css`\n    margin-block-start: calc(0.5 * ${theme.base.spacing});\n  `;\n});\n\nStyledAvatar.defaultProps = defaultThemeProp;\n\nconst StyledTextAreaContainer = styled.div(({ theme }) => {\n  return css`\n    width: 100%;\n    overflow-y: hidden;\n    padding: 0 ${theme.base.spacing} calc(0.5 * ${theme.base.spacing}) ${theme.base.spacing};\n  `;\n});\n\nStyledTextAreaContainer.defaultProps = defaultThemeProp;\n\nexport const StyledActions = styled.div(({ theme }) => {\n  return css`\n    margin-block-start: calc(2.5 * ${theme.base.spacing});\n\n    ${FeedButton} + ${FeedButton} {\n      margin-inline-start: 0;\n    }\n  `;\n});\n\nStyledActions.defaultProps = defaultThemeProp;\n\nconst HiddenFileInput = styled.input`\n  display: none;\n`;\n\nconst FeedInputRegion: FC<ForwardProps & FeedInputRegionProps> = (\n  props: ForwardProps & FeedInputRegionProps\n) => {\n  const {\n    variant,\n    id,\n    attachments = [],\n    onFilesAdded,\n    onSubmit,\n    inputRegionEl,\n    rteRef,\n    selectedRecipients\n  } = props;\n\n  const t = useI18n();\n  const { setShowSearchResults } = useContext(FeedContext);\n  const { avatarSrc, fullname, username, userStatus } = useContext(FeedContext).userInfo;\n\n  const [emptyText, setEmptyText] = useState(true);\n  const [attachmentEl, setAttachmentEl] = useElement<HTMLInputElement>();\n\n  useOuterEvent('mousedown', [inputRegionEl], () => {\n    if (emptyText) rteRef.current?.clear();\n  });\n\n  const handleSubmit = () => {\n    setShowSearchResults?.(false);\n    if ((!emptyText || attachments.length > 0) && attachments.every(x => !x.error)) {\n      onSubmit({\n        id,\n        value: rteRef.current?.getPlainText() || '',\n        attachments: attachments || [],\n        username,\n        recipients: variant === 'post' ? selectedRecipients : undefined,\n        clear: () => {\n          rteRef.current?.clear();\n        }\n      });\n    }\n  };\n\n  const onKeyDown = (event: KeyboardEvent) => {\n    setShowSearchResults?.(true);\n    if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') handleSubmit();\n  };\n\n  const inputLabel = t(variant === 'post' ? 'feed_new_post' : 'feed_new_comment');\n  const submitLabel = t(variant === 'post' ? 'feed_new_post_submit' : 'feed_new_comment_submit');\n\n  return (\n    <>\n      <Flex container={{ alignItems: 'start' }}>\n        <StyledAvatar\n          name={fullname}\n          size={variant === 'post' ? 'l' : 'm'}\n          imageSrc={avatarSrc}\n          status={userStatus}\n        />\n\n        <StyledTextAreaContainer>\n          <FeedRichText\n            label={inputLabel}\n            onChange={() => {\n              setEmptyText(rteRef.current?.getPlainText().trim() === '');\n            }}\n            onKeyDown={onKeyDown}\n            height={{ min: minInputHeight }}\n            ref={rteRef}\n          />\n        </StyledTextAreaContainer>\n\n        <Flex as={StyledActions} container={{ direction: 'column', gap: 0.5 }}>\n          {onFilesAdded && (\n            <Button\n              variant='simple'\n              as={FeedButton}\n              onClick={() => {\n                setShowSearchResults?.(false);\n                attachmentEl?.click();\n              }}\n              icon\n              label={t('file_upload_text_multiple')}\n            >\n              <Icon name='paper-clip' />\n            </Button>\n          )}\n\n          <Button\n            as={FeedButton}\n            disabled={(emptyText && attachments.length === 0) || attachments.some(x => x.error)}\n            variant='simple'\n            onClick={handleSubmit}\n            icon\n            label={submitLabel}\n          >\n            <Icon name='send' />\n          </Button>\n        </Flex>\n      </Flex>\n\n      <HiddenFileInput\n        ref={setAttachmentEl}\n        type='file'\n        multiple\n        onChange={() => {\n          if (attachmentEl?.files) {\n            onFilesAdded?.(Array.from(attachmentEl?.files));\n          }\n        }}\n        // Must trick input to believe there is no value when activated so that the same file may be added consecutively.\n        onClick={(event: MouseEvent) => {\n          (event.target as HTMLInputElement).value = '';\n        }}\n      />\n\n      <FeedAttachments variant={variant} attachments={attachments} />\n    </>\n  );\n};\n\nexport default FeedInputRegion;\n"]}

package/lib/components/Feed/FeedLikeButton.d.ts

@@ -1,19 +1,7 @@
 import { FC } from 'react';
-import { ForwardProps, OmitStrict } from '@pega/cosmos-react-core';
-import { FeedPostProps } from './FeedPost.types';
-import { FeedReplyProps } from './FeedReply.types';
-interface BaseFeedLikeButtonProps extends OmitStrict<FeedPostProps['interactionInfo'], 'commentLabel' | 'interactionsEnabled'>, Pick<FeedPostProps, 'onLoadMoreLikes' | 'onLikeCountInteraction' | 'id' | 'likesLoading'>, Pick<FeedPostProps['info'], 'liked'> {
-    showText?: boolean;
-}
-interface PostFeedLikeButtonProps extends BaseFeedLikeButtonProps {
-    variant: 'post';
-    onLikeClick: FeedPostProps['onLikeClick'];
-}
-interface ReplyFeedLikeButtonProps extends BaseFeedLikeButtonProps {
-    variant: 'reply';
-    onLikeClick: FeedReplyProps['onLikeClick'];
-}
-export type FeedLikeButtonProps = PostFeedLikeButtonProps | ReplyFeedLikeButtonProps;
-export declare const FeedLikeButton: FC<FeedLikeButtonProps & ForwardProps>;
-export {};
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { FeedMessageBaseProps } from './Feed.types';
+type FeedLikeButtonProps = Pick<FeedMessageBaseProps, 'id' | 'liked' | 'likeCount' | 'likes' | 'onLikeClick' | 'onLikeCountInteraction' | 'onLoadMoreLikes' | 'likesLoading'>;
+declare const FeedLikeButton: FC<FeedLikeButtonProps & ForwardProps>;
+export default FeedLikeButton;
 //# sourceMappingURL=FeedLikeButton.d.ts.map

package/lib/components/Feed/FeedLikeButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FeedLikeButton.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedLikeButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA0E,MAAM,OAAO,CAAC;AAGnG,OAAO,EACL,YAAY,EACZ,UAAU,EAiBX,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAIjD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAQnD,UAAU,uBACR,SAAQ,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAC,EAAE,cAAc,GAAG,qBAAqB,CAAC,EAC1F,IAAI,CAAC,aAAa,EAAE,iBAAiB,GAAG,wBAAwB,GAAG,IAAI,GAAG,cAAc,CAAC,EACzF,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,uBAAwB,SAAQ,uBAAuB;IAC/D,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;CAC3C;AAED,UAAU,wBAAyB,SAAQ,uBAAuB;IAChE,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC;CAC5C;AAED,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,GAAG,wBAAwB,CAAC;AAErF,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CAmIjE,CAAC"}
+{"version":3,"file":"FeedLikeButton.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedLikeButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA0E,MAAM,OAAO,CAAC;AAGnG,OAAO,EACL,YAAY,EAeb,MAAM,yBAAyB,CAAC;AAMjC,OAAO,EAAE,oBAAoB,EAAsB,MAAM,cAAc,CAAC;AAgCxE,KAAK,mBAAmB,GAAG,IAAI,CAC7B,oBAAoB,EAClB,IAAI,GACJ,OAAO,GACP,WAAW,GACX,OAAO,GACP,aAAa,GACb,wBAAwB,GACxB,iBAAiB,GACjB,cAAc,CACjB,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CA6H1D,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/Feed/FeedLikeButton.js

@@ -1,17 +1,41 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useContext, useMemo, useRef, useEffect } from 'react';
-import styled from 'styled-components';
-import { Button, Icon, Text, Avatar, MetaList, Count, Tooltip, useModalManager, useI18n, useConfiguration, useElement, formatListToLocaleString, Flex, defaultThemeProp, useUID } from '@pega/cosmos-react-core';
+import styled, { css } from 'styled-components';
+import { Button, Icon, Avatar, Count, Tooltip, useModalManager, useI18n, useConfiguration, useElement, formatListToLocaleString, Flex, defaultThemeProp, useUID } from '@pega/cosmos-react-core';
 import BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';
 import { FeedContext } from './Feed.context';
 import FeedButton from './FeedButton';
 import FeedModalList from './FeedModalList';
-const InlineBareButton = styled(BareRoleButton) `
-  display: inline-block;
-`;
+const InlineBareButton = styled(BareRoleButton)(({ theme }) => {
+    return css `
+    position: relative;
+    display: inline-block;
+    line-height: 1;
+    outline: none;
+    border-radius: calc(${theme.base['border-radius']} * 9999);
+
+    &:hover {
+      ::before {
+        content: '';
+        position: absolute;
+        top: calc(${theme.components.button['border-width']} * -1);
+        bottom: calc(${theme.components.button['border-width']} * -1);
+        left: calc(${theme.components.button['border-width']} * -1);
+        right: calc(${theme.components.button['border-width']} * -1);
+        border-radius: inherit;
+        background-color: currentColor;
+        opacity: 0.15;
+      }
+    }
+
+    &:focus {
+      box-shadow: ${theme.components.button['focus-shadow']};
+    }
+  `;
+});
 InlineBareButton.defaultProps = defaultThemeProp;
-export const FeedLikeButton = forwardRef((props, ref) => {
-    const { id, showText, onLikeCountInteraction, likesLoading, onLoadMoreLikes, liked, likeLabel, likeCount = 0, likes = [] } = props;
+const FeedLikeButton = forwardRef((props, ref) => {
+    const { id, liked, likeCount = 0, likes = [], onLikeClick, onLikeCountInteraction, onLoadMoreLikes, likesLoading } = props;
     const t = useI18n();
     const { locale } = useConfiguration();
     const { create } = useModalManager();
@@ -22,12 +46,12 @@ export const FeedLikeButton = forwardRef((props, ref) => {
     useEffect(() => {
         likesModalRef.current?.update({
             count: likeCount,
-            heading: likeLabel,
+            heading: t('feed_likes'),
             listItems: likes,
             onLoadMore: onLoadMoreLikes,
             loading: likesLoading
         });
-    }, [likeCount, likeLabel, likes, onLoadMoreLikes, likesLoading]);
+    }, [likeCount, likes, onLoadMoreLikes, likesLoading]);
     const likesAttributes = useMemo(() => {
         const likesList = likes.map(x => x.primary.toString());
         return {
@@ -36,10 +60,10 @@ export const FeedLikeButton = forwardRef((props, ref) => {
                     count: likeCount
                 })}`
                 : t('feed_post_likes', [likeCount], { count: likeCount }),
-            label: formatListToLocaleString(likesList.slice(0, 2), t, locale, {
+            label: `${t('feed_liked_by')}:\n${formatListToLocaleString(likesList.slice(0, 2), t, locale, {
                 count: likeCount,
                 separator: '\n'
-            })
+            })}`
         };
     }, [likes, likeCount]);
     const onLikeCountClick = () => {
@@ -56,33 +80,23 @@ export const FeedLikeButton = forwardRef((props, ref) => {
             onLikeCountInteraction?.();
         }
     };
-    return (_jsxs(Flex, { container: { gap: 0.5, alignItems: 'center' }, children: [_jsxs(Button, { variant: 'text', as: FeedButton, onClick: () => {
+    return (_jsxs(Flex, { container: { gap: 0.5, alignItems: 'center' }, children: [_jsx(Button, { variant: 'simple', icon: true, compact: true, as: FeedButton, onClick: () => {
                     const user = {
                         id: loggedInUser.username,
                         primary: loggedInUser.fullname,
-                        secondary: loggedInUser.meta ? _jsx(MetaList, { items: loggedInUser.meta }) : undefined,
+                        secondary: loggedInUser.meta,
                         visual: (_jsx(Avatar, { size: 'l', imageSrc: loggedInUser.avatarSrc, name: loggedInUser.fullname }))
                     };
-                    let eventObj;
-                    if (props.variant === 'post') {
-                        eventObj = {
-                            postId: id,
-                            user
-                        };
-                        props.onLikeClick(eventObj);
-                    }
-                    else {
-                        eventObj = {
-                            replyId: id,
-                            user
-                        };
-                        props.onLikeClick(eventObj);
-                    }
-                }, emphasized: liked, "aria-pressed": liked, label: showText ? undefined : likeLabel, "aria-label": showText ? likeLabel : undefined, "aria-describedby": likeCount > 0 ? likeCountId : undefined, ref: ref, children: [_jsx(Icon, { name: liked ? 'thumbs-up-solid' : 'thumbs-up' }), showText && _jsx(Text, { children: likeLabel })] }), likeCount > 0 && (_jsxs(_Fragment, { children: [_jsx(InlineBareButton, { ref: setCountEl, role: likes.length ? 'button' : undefined, onClick: onLikeCountClick, onFocus: onLikeCountInteraction, onMouseOver: onLikeCountInteraction, "aria-label": likesAttributes.ariaLabel, tabIndex: 0, onKeyDown: (e) => {
+                    onLikeClick({
+                        id,
+                        user
+                    });
+                }, emphasized: liked, "aria-pressed": liked, label: t('feed_like_label'), "aria-describedby": likeCount > 0 ? likeCountId : undefined, ref: ref, children: _jsx(Icon, { name: liked ? 'thumbs-up-solid' : 'thumbs-up' }) }), likeCount > 0 && (_jsxs(_Fragment, { children: [_jsx(InlineBareButton, { ref: setCountEl, role: likes.length ? 'button' : undefined, onClick: onLikeCountClick, onFocus: onLikeCountInteraction, onMouseOver: onLikeCountInteraction, "aria-label": likesAttributes.ariaLabel, tabIndex: 0, onKeyDown: (e) => {
                             if (e.key === 'Enter') {
                                 e.preventDefault();
                                 onLikeCountClick();
                             }
                         }, children: _jsx(Count, { id: likeCountId, "aria-label": t('feed_post_likes', [likeCount], { count: likeCount }), children: likeCount }) }), _jsx(Tooltip, { target: countEl, showDelay: 'none', hideDelay: 'none', describeTarget: false, children: likesAttributes.label || t('feed_post_likes', [likeCount], { count: likeCount }) })] }))] }));
 });
+export default FeedLikeButton;
 //# sourceMappingURL=FeedLikeButton.js.map

package/lib/components/Feed/FeedLikeButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeedLikeButton.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedLikeButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAO,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAiB,MAAM,OAAO,CAAC;AACnG,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAGL,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,KAAK,EACL,OAAO,EAEP,eAAe,EACf,OAAO,EACP,gBAAgB,EAChB,UAAU,EACV,wBAAwB,EACxB,IAAI,EACJ,gBAAgB,EAChB,MAAM,EACP,MAAM,yBAAyB,CAAC;AACjC,OAAO,cAAc,MAAM,8DAA8D,CAAC;AAG1F,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,aAAqC,MAAM,iBAAiB,CAAC;AAGpE,MAAM,gBAAgB,GAAG,MAAM,CAAC,cAAc,CAAC,CAAA;;CAE9C,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAqBjD,MAAM,CAAC,MAAM,cAAc,GAA2C,UAAU,CAC9E,CAAC,KAAK,EAAE,GAA2B,EAAE,EAAE;IACrC,MAAM,EACJ,EAAE,EACF,QAAQ,EACR,sBAAsB,EACtB,YAAY,EACZ,eAAe,EACf,KAAK,EACL,SAAS,EACT,SAAS,GAAG,CAAC,EACb,KAAK,GAAG,EAAE,EACX,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACtC,MAAM,EAAE,MAAM,EAAE,GAAG,eAAe,EAAE,CAAC;IACrC,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAC3D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;IAC/C,MAAM,aAAa,GAAG,MAAM,EAAoC,CAAC;IACjE,MAAM,WAAW,GAAG,MAAM,EAAE,CAAC;IAE7B,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC;YAC5B,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,SAAS;YAClB,SAAS,EAAE,KAAK;YAChB,UAAU,EAAE,eAAe;YAC3B,OAAO,EAAE,YAAY;SACtB,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,eAAe,EAAE,YAAY,CAAC,CAAC,CAAC;IAEjE,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC;QACvD,OAAO;YACL,SAAS,EAAE,SAAS;gBAClB,CAAC,CAAC,GAAG,CAAC,CAAC,eAAe,CAAC,IAAI,wBAAwB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE;oBAClF,KAAK,EAAE,SAAS;iBACjB,CAAC,EAAE;gBACN,CAAC,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC,SAAS,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;YAC3D,KAAK,EAAE,wBAAwB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE;gBAChE,KAAK,EAAE,SAAS;gBAChB,SAAS,EAAE,IAAI;aAChB,CAAC;SACH,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAEvB,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,IAAI,KAAK,CAAC,MAAM,EAAE;YAChB,aAAa,CAAC,OAAO,GAAG,MAAM,CAAC,aAAa,EAAE;gBAC5C,KAAK,EAAE,SAAS;gBAChB,OAAO,EAAE,CAAC,CAAC,YAAY,CAAC;gBACxB,SAAS,EAAE,KAAK;gBAChB,UAAU,EAAE,eAAe;gBAC3B,OAAO,EAAE,YAAY;aACtB,CAAC,CAAC;SACJ;aAAM;YACL,sBAAsB,EAAE,EAAE,CAAC;SAC5B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,aACjD,MAAC,MAAM,IACL,OAAO,EAAC,MAAM,EACd,EAAE,EAAE,UAAU,EACd,OAAO,EAAE,GAAG,EAAE;oBACZ,MAAM,IAAI,GAAG;wBACX,EAAE,EAAE,YAAY,CAAC,QAAQ;wBACzB,OAAO,EAAE,YAAY,CAAC,QAAQ;wBAC9B,SAAS,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,CAAC,IAAI,GAAI,CAAC,CAAC,CAAC,SAAS;wBACjF,MAAM,EAAE,CACN,KAAC,MAAM,IAAC,IAAI,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,CAAC,SAAS,EAAE,IAAI,EAAE,YAAY,CAAC,QAAQ,GAAI,CACnF;qBACF,CAAC;oBACF,IAAI,QAAQ,CAAC;oBACb,IAAI,KAAK,CAAC,OAAO,KAAK,MAAM,EAAE;wBAC5B,QAAQ,GAAG;4BACT,MAAM,EAAE,EAAE;4BACV,IAAI;yBACI,CAAC;wBACX,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;qBAC7B;yBAAM;wBACL,QAAQ,GAAG;4BACT,OAAO,EAAE,EAAE;4BACX,IAAI;yBACI,CAAC;wBACX,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;qBAC7B;gBACH,CAAC,EACD,UAAU,EAAE,KAAK,kBACH,KAAK,EACnB,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,gBAC3B,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,sBAC1B,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EACzD,GAAG,EAAE,GAAG,aAER,KAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW,GAAI,EACtD,QAAQ,IAAI,KAAC,IAAI,cAAE,SAAS,GAAQ,IAC9B,EACR,SAAS,GAAG,CAAC,IAAI,CAChB,8BACE,KAAC,gBAAgB,IACf,GAAG,EAAE,UAAU,EACf,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACzC,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,sBAAsB,EAC/B,WAAW,EAAE,sBAAsB,gBACvB,eAAe,CAAC,SAAS,EACrC,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;4BAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;gCACrB,CAAC,CAAC,cAAc,EAAE,CAAC;gCACnB,gBAAgB,EAAE,CAAC;6BACpB;wBACH,CAAC,YAED,KAAC,KAAK,IACJ,EAAE,EAAE,WAAW,gBACH,CAAC,CAAC,iBAAiB,EAAE,CAAC,SAAS,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,YAElE,SAAS,GACJ,GACS,EACnB,KAAC,OAAO,IAAC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,EAAC,cAAc,EAAE,KAAK,YAC9E,eAAe,CAAC,KAAK,IAAI,CAAC,CAAC,iBAAiB,EAAE,CAAC,SAAS,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,GACzE,IACT,CACJ,IACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import { FC, forwardRef, Ref, useContext, useMemo, useRef, useEffect, KeyboardEvent } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  ForwardProps,\n  OmitStrict,\n  Button,\n  Icon,\n  Text,\n  Avatar,\n  MetaList,\n  Count,\n  Tooltip,\n  ModalMethods,\n  useModalManager,\n  useI18n,\n  useConfiguration,\n  useElement,\n  formatListToLocaleString,\n  Flex,\n  defaultThemeProp,\n  useUID\n} from '@pega/cosmos-react-core';\nimport BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';\n\nimport { FeedPostProps } from './FeedPost.types';\nimport { FeedContext } from './Feed.context';\nimport FeedButton from './FeedButton';\nimport FeedModalList, { FeedModalListProps } from './FeedModalList';\nimport { FeedReplyProps } from './FeedReply.types';\n\nconst InlineBareButton = styled(BareRoleButton)`\n  display: inline-block;\n`;\n\nInlineBareButton.defaultProps = defaultThemeProp;\n\ninterface BaseFeedLikeButtonProps\n  extends OmitStrict<FeedPostProps['interactionInfo'], 'commentLabel' | 'interactionsEnabled'>,\n    Pick<FeedPostProps, 'onLoadMoreLikes' | 'onLikeCountInteraction' | 'id' | 'likesLoading'>,\n    Pick<FeedPostProps['info'], 'liked'> {\n  showText?: boolean;\n}\n\ninterface PostFeedLikeButtonProps extends BaseFeedLikeButtonProps {\n  variant: 'post';\n  onLikeClick: FeedPostProps['onLikeClick'];\n}\n\ninterface ReplyFeedLikeButtonProps extends BaseFeedLikeButtonProps {\n  variant: 'reply';\n  onLikeClick: FeedReplyProps['onLikeClick'];\n}\n\nexport type FeedLikeButtonProps = PostFeedLikeButtonProps | ReplyFeedLikeButtonProps;\n\nexport const FeedLikeButton: FC<FeedLikeButtonProps & ForwardProps> = forwardRef(\n  (props, ref: Ref<HTMLButtonElement>) => {\n    const {\n      id,\n      showText,\n      onLikeCountInteraction,\n      likesLoading,\n      onLoadMoreLikes,\n      liked,\n      likeLabel,\n      likeCount = 0,\n      likes = []\n    } = props;\n    const t = useI18n();\n    const { locale } = useConfiguration();\n    const { create } = useModalManager();\n    const { userInfo: loggedInUser } = useContext(FeedContext);\n    const [countEl, setCountEl] = useElement(null);\n    const likesModalRef = useRef<ModalMethods<FeedModalListProps>>();\n    const likeCountId = useUID();\n\n    useEffect(() => {\n      likesModalRef.current?.update({\n        count: likeCount,\n        heading: likeLabel,\n        listItems: likes,\n        onLoadMore: onLoadMoreLikes,\n        loading: likesLoading\n      });\n    }, [likeCount, likeLabel, likes, onLoadMoreLikes, likesLoading]);\n\n    const likesAttributes = useMemo(() => {\n      const likesList = likes.map(x => x.primary.toString());\n      return {\n        ariaLabel: likeCount\n          ? `${t('feed_liked_by')} ${formatListToLocaleString(likesList.slice(0, 2), t, locale, {\n              count: likeCount\n            })}`\n          : t('feed_post_likes', [likeCount], { count: likeCount }),\n        label: formatListToLocaleString(likesList.slice(0, 2), t, locale, {\n          count: likeCount,\n          separator: '\\n'\n        })\n      };\n    }, [likes, likeCount]);\n\n    const onLikeCountClick = () => {\n      if (likes.length) {\n        likesModalRef.current = create(FeedModalList, {\n          count: likeCount,\n          heading: t('feed_likes'),\n          listItems: likes,\n          onLoadMore: onLoadMoreLikes,\n          loading: likesLoading\n        });\n      } else {\n        onLikeCountInteraction?.();\n      }\n    };\n\n    return (\n      <Flex container={{ gap: 0.5, alignItems: 'center' }}>\n        <Button\n          variant='text'\n          as={FeedButton}\n          onClick={() => {\n            const user = {\n              id: loggedInUser.username,\n              primary: loggedInUser.fullname,\n              secondary: loggedInUser.meta ? <MetaList items={loggedInUser.meta} /> : undefined,\n              visual: (\n                <Avatar size='l' imageSrc={loggedInUser.avatarSrc} name={loggedInUser.fullname} />\n              )\n            };\n            let eventObj;\n            if (props.variant === 'post') {\n              eventObj = {\n                postId: id,\n                user\n              } as const;\n              props.onLikeClick(eventObj);\n            } else {\n              eventObj = {\n                replyId: id,\n                user\n              } as const;\n              props.onLikeClick(eventObj);\n            }\n          }}\n          emphasized={liked}\n          aria-pressed={liked}\n          label={showText ? undefined : likeLabel}\n          aria-label={showText ? likeLabel : undefined}\n          aria-describedby={likeCount > 0 ? likeCountId : undefined}\n          ref={ref}\n        >\n          <Icon name={liked ? 'thumbs-up-solid' : 'thumbs-up'} />\n          {showText && <Text>{likeLabel}</Text>}\n        </Button>\n        {likeCount > 0 && (\n          <>\n            <InlineBareButton\n              ref={setCountEl}\n              role={likes.length ? 'button' : undefined}\n              onClick={onLikeCountClick}\n              onFocus={onLikeCountInteraction}\n              onMouseOver={onLikeCountInteraction}\n              aria-label={likesAttributes.ariaLabel}\n              tabIndex={0}\n              onKeyDown={(e: KeyboardEvent) => {\n                if (e.key === 'Enter') {\n                  e.preventDefault();\n                  onLikeCountClick();\n                }\n              }}\n            >\n              <Count\n                id={likeCountId}\n                aria-label={t('feed_post_likes', [likeCount], { count: likeCount })}\n              >\n                {likeCount}\n              </Count>\n            </InlineBareButton>\n            <Tooltip target={countEl} showDelay='none' hideDelay='none' describeTarget={false}>\n              {likesAttributes.label || t('feed_post_likes', [likeCount], { count: likeCount })}\n            </Tooltip>\n          </>\n        )}\n      </Flex>\n    );\n  }\n);\n"]}
+{"version":3,"file":"FeedLikeButton.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedLikeButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, forwardRef, Ref, useContext, useMemo, useRef, useEffect, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  ForwardProps,\n  Button,\n  Icon,\n  Avatar,\n  Count,\n  Tooltip,\n  ModalMethods,\n  useModalManager,\n  useI18n,\n  useConfiguration,\n  useElement,\n  formatListToLocaleString,\n  Flex,\n  defaultThemeProp,\n  useUID\n} from '@pega/cosmos-react-core';\nimport BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';\n\nimport { FeedContext } from './Feed.context';\nimport FeedButton from './FeedButton';\nimport FeedModalList from './FeedModalList';\nimport { FeedMessageBaseProps, FeedModalListProps } from './Feed.types';\n\nconst InlineBareButton = styled(BareRoleButton)(({ theme }) => {\n  return css`\n    position: relative;\n    display: inline-block;\n    line-height: 1;\n    outline: none;\n    border-radius: calc(${theme.base['border-radius']} * 9999);\n\n    &:hover {\n      ::before {\n        content: '';\n        position: absolute;\n        top: calc(${theme.components.button['border-width']} * -1);\n        bottom: calc(${theme.components.button['border-width']} * -1);\n        left: calc(${theme.components.button['border-width']} * -1);\n        right: calc(${theme.components.button['border-width']} * -1);\n        border-radius: inherit;\n        background-color: currentColor;\n        opacity: 0.15;\n      }\n    }\n\n    &:focus {\n      box-shadow: ${theme.components.button['focus-shadow']};\n    }\n  `;\n});\n\nInlineBareButton.defaultProps = defaultThemeProp;\n\ntype FeedLikeButtonProps = Pick<\n  FeedMessageBaseProps,\n  | 'id'\n  | 'liked'\n  | 'likeCount'\n  | 'likes'\n  | 'onLikeClick'\n  | 'onLikeCountInteraction'\n  | 'onLoadMoreLikes'\n  | 'likesLoading'\n>;\n\nconst FeedLikeButton: FC<FeedLikeButtonProps & ForwardProps> = forwardRef(\n  (props, ref: Ref<HTMLButtonElement>) => {\n    const {\n      id,\n      liked,\n      likeCount = 0,\n      likes = [],\n      onLikeClick,\n      onLikeCountInteraction,\n      onLoadMoreLikes,\n      likesLoading\n    } = props;\n    const t = useI18n();\n    const { locale } = useConfiguration();\n    const { create } = useModalManager();\n    const { userInfo: loggedInUser } = useContext(FeedContext);\n    const [countEl, setCountEl] = useElement(null);\n    const likesModalRef = useRef<ModalMethods<FeedModalListProps>>();\n    const likeCountId = useUID();\n\n    useEffect(() => {\n      likesModalRef.current?.update({\n        count: likeCount,\n        heading: t('feed_likes'),\n        listItems: likes,\n        onLoadMore: onLoadMoreLikes,\n        loading: likesLoading\n      });\n    }, [likeCount, likes, onLoadMoreLikes, likesLoading]);\n\n    const likesAttributes = useMemo(() => {\n      const likesList = likes.map(x => x.primary.toString());\n      return {\n        ariaLabel: likeCount\n          ? `${t('feed_liked_by')} ${formatListToLocaleString(likesList.slice(0, 2), t, locale, {\n              count: likeCount\n            })}`\n          : t('feed_post_likes', [likeCount], { count: likeCount }),\n        label: `${t('feed_liked_by')}:\\n${formatListToLocaleString(\n          likesList.slice(0, 2),\n          t,\n          locale,\n          {\n            count: likeCount,\n            separator: '\\n'\n          }\n        )}`\n      };\n    }, [likes, likeCount]);\n\n    const onLikeCountClick = () => {\n      if (likes.length) {\n        likesModalRef.current = create(FeedModalList, {\n          count: likeCount,\n          heading: t('feed_likes'),\n          listItems: likes,\n          onLoadMore: onLoadMoreLikes,\n          loading: likesLoading\n        });\n      } else {\n        onLikeCountInteraction?.();\n      }\n    };\n\n    return (\n      <Flex container={{ gap: 0.5, alignItems: 'center' }}>\n        <Button\n          variant='simple'\n          icon\n          compact\n          as={FeedButton}\n          onClick={() => {\n            const user = {\n              id: loggedInUser.username,\n              primary: loggedInUser.fullname,\n              secondary: loggedInUser.meta,\n              visual: (\n                <Avatar size='l' imageSrc={loggedInUser.avatarSrc} name={loggedInUser.fullname} />\n              )\n            };\n            onLikeClick({\n              id,\n              user\n            });\n          }}\n          emphasized={liked}\n          aria-pressed={liked}\n          label={t('feed_like_label')}\n          aria-describedby={likeCount > 0 ? likeCountId : undefined}\n          ref={ref}\n        >\n          <Icon name={liked ? 'thumbs-up-solid' : 'thumbs-up'} />\n        </Button>\n        {likeCount > 0 && (\n          <>\n            <InlineBareButton\n              ref={setCountEl}\n              role={likes.length ? 'button' : undefined}\n              onClick={onLikeCountClick}\n              onFocus={onLikeCountInteraction}\n              onMouseOver={onLikeCountInteraction}\n              aria-label={likesAttributes.ariaLabel}\n              tabIndex={0}\n              onKeyDown={(e: KeyboardEvent) => {\n                if (e.key === 'Enter') {\n                  e.preventDefault();\n                  onLikeCountClick();\n                }\n              }}\n            >\n              <Count\n                id={likeCountId}\n                aria-label={t('feed_post_likes', [likeCount], { count: likeCount })}\n              >\n                {likeCount}\n              </Count>\n            </InlineBareButton>\n            <Tooltip target={countEl} showDelay='none' hideDelay='none' describeTarget={false}>\n              {likesAttributes.label || t('feed_post_likes', [likeCount], { count: likeCount })}\n            </Tooltip>\n          </>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default FeedLikeButton;\n"]}

package/lib/components/Feed/FeedModalList.d.ts

@@ -1,17 +1,5 @@
 import { FC } from 'react';
-import { SummaryListItem } from '@pega/cosmos-react-core';
-export interface FeedModalListProps {
-    /** The count for the list of items. */
-    count: number;
-    /** The heading for the Modal. */
-    heading: string;
-    /** The list of MenuItems to render in the Modal. */
-    listItems: SummaryListItem[];
-    /** A callback that is triggered when the bottom of the Modal list is scrolled into view so that additional data may be displayed. */
-    onLoadMore?: () => void;
-    /** Indicates if the data is being currently loading */
-    loading?: boolean;
-}
+import { FeedModalListProps } from './Feed.types';
 declare const FeedModalList: FC<FeedModalListProps>;
 export default FeedModalList;
 //# sourceMappingURL=FeedModalList.d.ts.map

package/lib/components/Feed/FeedModalList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FeedModalList.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedModalList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AAGxD,OAAO,EACL,eAAe,EAUhB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,WAAW,kBAAkB;IACjC,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,oDAAoD;IACpD,SAAS,EAAE,eAAe,EAAE,CAAC;IAC7B,qIAAqI;IACrI,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAYD,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAsDzC,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"FeedModalList.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedModalList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AAiBxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAYlD,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA2DzC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Feed/FeedModalList.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useEffect, useState } from 'react';
 import styled, { css } from 'styled-components';
-import { defaultThemeProp, Flex, Progress, Count, Modal, SummaryListItems, useItemIntersection, usePrevious, useI18n } from '@pega/cosmos-react-core';
+import { defaultThemeProp, Flex, Progress, Count, Modal, SummaryListItems, useItemIntersection, usePrevious, useI18n, MetaList } from '@pega/cosmos-react-core';
 import FeedAnnouncer from './FeedAnnouncer';
 const StyledLoadMore = styled.div(({ theme }) => {
     return css `
@@ -30,7 +30,10 @@ const FeedModalList = ({ loading, count, heading, listItems, onLoadMore }) => {
     useItemIntersection(listRef, listItems.length - 1, () => {
         onLoadMore?.();
     }, ':scope li');
-    return (_jsxs(Modal, { heading: _jsxs(Flex, { container: { gap: 1 }, children: [heading, _jsx(Flex, { item: { alignSelf: 'center' }, as: Count, children: count })] }), ref: listRef, children: [_jsx(FeedAnnouncer, { children: announcementText }), _jsx(SummaryListItems, { items: listItems }), loading && (_jsx(Flex, { container: { justify: 'center' }, as: StyledLoadMore, children: _jsx(Progress, { placement: 'inline' }) }))] }));
+    return (_jsxs(Modal, { heading: _jsxs(Flex, { container: { gap: 1 }, children: [heading, _jsx(Flex, { item: { alignSelf: 'center' }, as: Count, children: count })] }), ref: listRef, children: [_jsx(FeedAnnouncer, { children: announcementText }), _jsx(SummaryListItems, { items: listItems.map(item => ({
+                    ...item,
+                    secondary: item.secondary && _jsx(MetaList, { items: item.secondary })
+                })) }), loading && (_jsx(Flex, { container: { justify: 'center' }, as: StyledLoadMore, children: _jsx(Progress, { placement: 'inline' }) }))] }));
 };
 export default FeedModalList;
 //# sourceMappingURL=FeedModalList.js.map

package/lib/components/Feed/FeedModalList.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeedModalList.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedModalList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAEL,gBAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,KAAK,EACL,gBAAgB,EAChB,mBAAmB,EACnB,WAAW,EACX,OAAO,EACR,MAAM,yBAAyB,CAAC;AAEjC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAe5C,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9C,OAAO,GAAG,CAAA;kBACM,KAAK,CAAC,IAAI,CAAC,OAAO;;;GAGjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,aAAa,GAA2B,CAAC,EAC7C,OAAO,EACP,KAAK,EACL,OAAO,EACP,SAAS,EACT,UAAU,EACS,EAAE,EAAE;IACvB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC7B,MAAM,SAAS,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IACzC,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE7D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO;YAAE,mBAAmB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACjD,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,EAAE;YACb,MAAM,UAAU,GAAG,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC;YACvD,IAAI,UAAU,GAAG,CAAC;gBAChB,mBAAmB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC,UAAU,CAAC,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;SACjF;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,mBAAmB,CACjB,OAAO,EACP,SAAS,CAAC,MAAM,GAAG,CAAC,EACpB,GAAG,EAAE;QACH,UAAU,EAAE,EAAE,CAAC;IACjB,CAAC,EACD,WAAW,CACZ,CAAC;IAEF,OAAO,CACL,MAAC,KAAK,IACJ,OAAO,EACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,aACxB,OAAO,EACR,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,KAAK,YAC3C,KAAK,GACD,IACF,EAET,GAAG,EAAE,OAAO,aAEZ,KAAC,aAAa,cAAE,gBAAgB,GAAiB,EACjD,KAAC,gBAAgB,IAAC,KAAK,EAAE,SAAS,GAAI,EACrC,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,cAAc,YACxD,KAAC,QAAQ,IAAC,SAAS,EAAC,QAAQ,GAAG,GAC1B,CACR,IACK,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FC, useRef, useEffect, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  SummaryListItem,\n  defaultThemeProp,\n  Flex,\n  Progress,\n  Count,\n  Modal,\n  SummaryListItems,\n  useItemIntersection,\n  usePrevious,\n  useI18n\n} from '@pega/cosmos-react-core';\n\nimport FeedAnnouncer from './FeedAnnouncer';\n\nexport interface FeedModalListProps {\n  /** The count for the list of items. */\n  count: number;\n  /** The heading for the Modal. */\n  heading: string;\n  /** The list of MenuItems to render in the Modal. */\n  listItems: SummaryListItem[];\n  /** A callback that is triggered when the bottom of the Modal list is scrolled into view so that additional data may be displayed. */\n  onLoadMore?: () => void;\n  /** Indicates if the data is being currently loading */\n  loading?: boolean;\n}\n\nconst StyledLoadMore = styled.div(({ theme }) => {\n  return css`\n    margin-top: ${theme.base.spacing};\n    min-height: 2rem;\n    min-width: 2rem;\n  `;\n});\n\nStyledLoadMore.defaultProps = defaultThemeProp;\n\nconst FeedModalList: FC<FeedModalListProps> = ({\n  loading,\n  count,\n  heading,\n  listItems,\n  onLoadMore\n}: FeedModalListProps) => {\n  const t = useI18n();\n  const listRef = useRef(null);\n  const prevItems = usePrevious(listItems);\n  const [announcementText, setAnnouncementText] = useState('');\n\n  useEffect(() => {\n    if (loading) setAnnouncementText(t('loading'));\n  }, [loading]);\n\n  useEffect(() => {\n    if (prevItems) {\n      const difference = listItems.length - prevItems.length;\n      if (difference > 0)\n        setAnnouncementText(t('new_item_added', [difference], { count: difference }));\n    }\n  }, [listItems]);\n\n  useItemIntersection(\n    listRef,\n    listItems.length - 1,\n    () => {\n      onLoadMore?.();\n    },\n    ':scope li'\n  );\n\n  return (\n    <Modal\n      heading={\n        <Flex container={{ gap: 1 }}>\n          {heading}\n          <Flex item={{ alignSelf: 'center' }} as={Count}>\n            {count}\n          </Flex>\n        </Flex>\n      }\n      ref={listRef}\n    >\n      <FeedAnnouncer>{announcementText}</FeedAnnouncer>\n      <SummaryListItems items={listItems} />\n      {loading && (\n        <Flex container={{ justify: 'center' }} as={StyledLoadMore}>\n          <Progress placement='inline' />\n        </Flex>\n      )}\n    </Modal>\n  );\n};\n\nexport default FeedModalList;\n"]}
+{"version":3,"file":"FeedModalList.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedModalList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,KAAK,EACL,gBAAgB,EAChB,mBAAmB,EACnB,WAAW,EACX,OAAO,EACP,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAEjC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAG5C,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9C,OAAO,GAAG,CAAA;kBACM,KAAK,CAAC,IAAI,CAAC,OAAO;;;GAGjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,aAAa,GAA2B,CAAC,EAC7C,OAAO,EACP,KAAK,EACL,OAAO,EACP,SAAS,EACT,UAAU,EACS,EAAE,EAAE;IACvB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC7B,MAAM,SAAS,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IACzC,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE7D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO;YAAE,mBAAmB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACjD,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,EAAE;YACb,MAAM,UAAU,GAAG,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC;YACvD,IAAI,UAAU,GAAG,CAAC;gBAChB,mBAAmB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC,UAAU,CAAC,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;SACjF;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,mBAAmB,CACjB,OAAO,EACP,SAAS,CAAC,MAAM,GAAG,CAAC,EACpB,GAAG,EAAE;QACH,UAAU,EAAE,EAAE,CAAC;IACjB,CAAC,EACD,WAAW,CACZ,CAAC;IAEF,OAAO,CACL,MAAC,KAAK,IACJ,OAAO,EACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,aACxB,OAAO,EACR,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,KAAK,YAC3C,KAAK,GACD,IACF,EAET,GAAG,EAAE,OAAO,aAEZ,KAAC,aAAa,cAAE,gBAAgB,GAAiB,EACjD,KAAC,gBAAgB,IACf,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;oBAC5B,GAAG,IAAI;oBACP,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,KAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,SAAS,GAAI;iBACjE,CAAC,CAAC,GACH,EACD,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,cAAc,YACxD,KAAC,QAAQ,IAAC,SAAS,EAAC,QAAQ,GAAG,GAC1B,CACR,IACK,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FC, useRef, useEffect, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  Flex,\n  Progress,\n  Count,\n  Modal,\n  SummaryListItems,\n  useItemIntersection,\n  usePrevious,\n  useI18n,\n  MetaList\n} from '@pega/cosmos-react-core';\n\nimport FeedAnnouncer from './FeedAnnouncer';\nimport { FeedModalListProps } from './Feed.types';\n\nconst StyledLoadMore = styled.div(({ theme }) => {\n  return css`\n    margin-top: ${theme.base.spacing};\n    min-height: 2rem;\n    min-width: 2rem;\n  `;\n});\n\nStyledLoadMore.defaultProps = defaultThemeProp;\n\nconst FeedModalList: FC<FeedModalListProps> = ({\n  loading,\n  count,\n  heading,\n  listItems,\n  onLoadMore\n}: FeedModalListProps) => {\n  const t = useI18n();\n  const listRef = useRef(null);\n  const prevItems = usePrevious(listItems);\n  const [announcementText, setAnnouncementText] = useState('');\n\n  useEffect(() => {\n    if (loading) setAnnouncementText(t('loading'));\n  }, [loading]);\n\n  useEffect(() => {\n    if (prevItems) {\n      const difference = listItems.length - prevItems.length;\n      if (difference > 0)\n        setAnnouncementText(t('new_item_added', [difference], { count: difference }));\n    }\n  }, [listItems]);\n\n  useItemIntersection(\n    listRef,\n    listItems.length - 1,\n    () => {\n      onLoadMore?.();\n    },\n    ':scope li'\n  );\n\n  return (\n    <Modal\n      heading={\n        <Flex container={{ gap: 1 }}>\n          {heading}\n          <Flex item={{ alignSelf: 'center' }} as={Count}>\n            {count}\n          </Flex>\n        </Flex>\n      }\n      ref={listRef}\n    >\n      <FeedAnnouncer>{announcementText}</FeedAnnouncer>\n      <SummaryListItems\n        items={listItems.map(item => ({\n          ...item,\n          secondary: item.secondary && <MetaList items={item.secondary} />\n        }))}\n      />\n      {loading && (\n        <Flex container={{ justify: 'center' }} as={StyledLoadMore}>\n          <Progress placement='inline' />\n        </Flex>\n      )}\n    </Modal>\n  );\n};\n\nexport default FeedModalList;\n"]}

package/lib/components/Feed/FeedNewPost.d.ts

@@ -1,35 +1,6 @@
 import { FC } from 'react';
 import { ForwardProps } from '@pega/cosmos-react-core';
-import { PostTypeMenuProps, RecipientMenuItem } from './FeedNewPostTypeMenu';
-import { AttachedFiles } from './FeedAttachments';
-export interface FeedNewPostProps {
-    /** A unique ID for the NewPost */
-    id: string;
-    /** A set of attachment files. */
-    attachments?: AttachedFiles[];
-    /** Information that is used to label buttons and inputs for accessibility purposes */
-    interactionInfo: {
-        textAreaPlaceholder: string;
-        postLabel: string;
-    };
-    /** A callback containing a list of added files that will run whenever files are added to the post. */
-    onFilesAdded?: (files: AttachedFiles[]) => void;
-    /** A callback that will run when the new post button has been clicked */
-    onPost: (event: {
-        newPostId: string;
-        value: string;
-        attachments: AttachedFiles[];
-        recipients: RecipientMenuItem[];
-        username: string;
-        clear: () => void;
-    }) => void;
-    autoFocus?: boolean;
-    /** Array of private recipient options */
-    recipients?: PostTypeMenuProps['recipients'];
-    /** Handler for new search on private recipient options */
-    onRecipientSearch?: (newSearch: string) => void;
-}
-export declare const StyledTextAreaContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+import { FeedNewPostProps } from './Feed.types';
 export declare const StyledFeedNewPost: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const FeedNewPost: FC<ForwardProps & FeedNewPostProps>;
 export default FeedNewPost;

package/lib/components/Feed/FeedNewPost.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FeedNewPost.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedNewPost.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,EAAE,EAAkC,MAAM,OAAO,CAAC;AAGrE,OAAO,EAaL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAKjC,OAA4B,EAE1B,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAwB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAOnE,MAAM,WAAW,gBAAgB;IAC/B,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,iCAAiC;IACjC,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;IAC9B,sFAAsF;IACtF,eAAe,EAAE;QACf,mBAAmB,EAAE,MAAM,CAAC;QAC5B,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,sGAAsG;IACtG,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IAChD,yEAAyE;IACzE,MAAM,EAAE,CAAC,KAAK,EAAE;QACd,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,aAAa,EAAE,CAAC;QAC7B,UAAU,EAAE,iBAAiB,EAAE,CAAC;QAChC,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,IAAI,CAAC;KACnB,KAAK,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yCAAyC;IACzC,UAAU,CAAC,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAC;IAC7C,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,uBAAuB,yGAalC,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAU5B,CAAC;AAQH,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,YAAY,GAAG,gBAAgB,CAwJpD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FeedNewPost.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedNewPost.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAoB,MAAM,OAAO,CAAC;AAG7C,OAAO,EAIL,YAAY,EAEb,MAAM,yBAAyB,CAAC;AAMjC,OAAO,EAAE,gBAAgB,EAAkD,MAAM,cAAc,CAAC;AAKhG,eAAO,MAAM,iBAAiB,yGAAe,CAAC;AAI9C,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,YAAY,GAAG,gBAAgB,CAgDpD,CAAC;AAEF,eAAe,WAAW,CAAC"}