@soul-refiner/design-system 2.5.0-alpha.7 → 2.5.0-alpha.8

package/dist/components/surfaces/carousel/card/card.js

@@ -1,40 +1,5 @@
-'use client';
-import React from 'react';
-import { styled } from 'styled-components';
-import { ChevronLeft } from '../../../../icons/arrow/chevron_left';
-import { ChevronRight } from '../../../../icons/arrow/chevron_right';
-const DEFAULT_SCROLL_TRIGGER_DISTANCE = 11;
-const DEFAULT_SCROLL_DISTANCE = 450;
-export const CardCarousel = ({ children, onScrollEnd, scrollTriggerDistance = DEFAULT_SCROLL_TRIGGER_DISTANCE, scrollDistance = DEFAULT_SCROLL_DISTANCE, sx, }) => {
-    const ref = React.useRef(null);
-    const handleScroll = (event) => {
-        const target = event.target;
-        const scrollDistance = target.scrollWidth - target.scrollLeft;
-        if (scrollDistance - target.clientWidth < scrollTriggerDistance &&
-            onScrollEnd) {
-            onScrollEnd();
-        }
-    };
-    const onNavigateRight = () => {
-        if (ref.current) {
-            const amount = ref.current.scrollLeft + scrollDistance;
-            ref.current.scrollLeft = amount;
-        }
-    };
-    const onNavigateLeft = () => {
-        if (ref.current) {
-            const amount = ref.current.scrollLeft - scrollDistance;
-            ref.current.scrollLeft = amount < 0 ? 0 : amount;
-        }
-    };
-    return (React.createElement(Wrapper, { "$sx": sx },
-        React.createElement(Button, { className: "carousel-navigation", onClick: onNavigateLeft, "$side": "left" },
-            React.createElement(ChevronLeft, { color: "white", size: 48 })),
-        React.createElement(Inner, { onScroll: handleScroll, ref: ref }, children),
-        React.createElement(Button, { className: "carousel-navigation", onClick: onNavigateRight, "$side": "right" },
-            React.createElement(ChevronRight, { color: "white", size: 48 }))));
-};
-const Wrapper = styled.div `
+"use client";
+"use strict";var React=require("react"),styled=require("styled-components"),chevron_left=require("../../../../icons/arrow/chevron_left.js"),chevron_right=require("../../../../icons/arrow/chevron_right.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const DEFAULT_SCROLL_TRIGGER_DISTANCE=11,DEFAULT_SCROLL_DISTANCE=450,CardCarousel=({children:e,onScrollEnd:t,scrollTriggerDistance:r=DEFAULT_SCROLL_TRIGGER_DISTANCE,scrollDistance:l=DEFAULT_SCROLL_DISTANCE,sx:o})=>{const a=React__default.default.useRef(null);return React__default.default.createElement(Wrapper,{$sx:o},React__default.default.createElement(Button,{className:"carousel-navigation",onClick:()=>{var e;a.current&&(e=a.current.scrollLeft-l,a.current.scrollLeft=e<0?0:e)},$side:"left"},React__default.default.createElement(chevron_left.ChevronLeft,{color:"white",size:48})),React__default.default.createElement(Inner,{onScroll:e=>{e=e.target;e.scrollWidth-e.scrollLeft-e.clientWidth<r&&t&&t()},ref:a},e),React__default.default.createElement(Button,{className:"carousel-navigation",onClick:()=>{var e;a.current&&(e=a.current.scrollLeft+l,a.current.scrollLeft=e)},$side:"right"},React__default.default.createElement(chevron_right.ChevronRight,{color:"white",size:48})))},Wrapper=styled.styled.div`
   position: relative;
   height: 288px;
 
@@ -42,9 +7,8 @@ const Wrapper = styled.div `
     display: block;
   }
 
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const Inner = styled.div `
+  ${({$sx:e})=>e||""}
+`,Inner=styled.styled.div`
   position: absolute;
   width: 100%;
   z-index: 0;
@@ -69,8 +33,7 @@ const Inner = styled.div `
     width: 0px;
     height: 0px;
   }
-`;
-const Button = styled.button `
+`,Button=styled.styled.button`
   position: absolute;
   z-index: 1;
   top: 0px;
@@ -86,12 +49,10 @@ const Button = styled.button `
 
   display: none;
 
-  ${({ $side }) => $side === 'left'
-    ? `
+  ${({$side:e})=>"left"===e?`
     left: 0px;
     border-radius: 0px 16px 16px 0px;
-    `
-    : `
+    `:`
     right: 0px;
     border-radius: 16px 0px 0px 16px;`};
-`;
+`;exports.CardCarousel=CardCarousel;

package/dist/components/surfaces/comment/comment.js

@@ -1,107 +1,5 @@
-'use client';
-import React from 'react';
-import { styled } from 'styled-components';
-import Picker from '@emoji-mart/react';
-import { Avatar } from '../../../components/iconography/avatar/avatar';
-import { Box } from '../../../components/atoms/box/box';
-import { P } from '../../../components/atoms/typography/paragraph';
-import { TextInput } from '../../../components/input';
-import { Button } from '../../../components/actions/button/button';
-import { Portal } from '../../../components/surfaces/portal';
-import emojis from '../../../emoji/emojis.json';
-import { Styles } from '../../../common/styles';
-import { Emoticon } from '../../../icons/basic/emoticon_add';
-import { Comment as CommentIcon } from '../../../icons/message/comment';
-import { abbrTimeBeforeDate } from './helpers';
-const MAX_REACTIONS_SHOWN = 5;
-export const Comment = ({ avatarTooltipContent, avatarTooltipSx, content, createdDate, hasMoreReplies, id, onComment, onReact, onShowReplies, dropdown, reactionModal, reactions, replies, userImageUri, userName, userReactions, userProfileUri, }) => {
-    const [showPicker, setShowPicker] = React.useState(false);
-    const [pickerTriggerLoc, setPickerTriggerLoc] = React.useState({
-        x: 0,
-        y: 0,
-    });
-    const [pickerOrientation, setPickerOrientation] = React.useState('up');
-    const [toggleShowCommentInput, setShowCommentInput] = React.useState(false);
-    const [toggleShowReplies, setShowReplies] = React.useState(false);
-    const [comment, setComment] = React.useState('');
-    const _replies = React.Children.toArray(replies);
-    const handleCommentChange = (event) => {
-        setComment(event.target.value);
-    };
-    const handleCommentSubmit = (event) => {
-        event.stopPropagation();
-        event.preventDefault();
-        onComment(comment);
-        setComment('');
-    };
-    const handleReaction = ({ native }) => {
-        onReact(native);
-        setShowPicker(false);
-    };
-    const handlePicker = (event) => {
-        event.stopPropagation();
-        setShowPicker((prev) => !prev);
-        setPickerTriggerLoc({ y: event.clientY, x: event.clientX });
-        setPickerOrientation(event.clientY > 400 ? 'up' : 'down');
-    };
-    const handlePickerBlur = () => setShowPicker(false);
-    const handleToggleCommentInput = () => setShowCommentInput((prev) => !prev);
-    const handleToggleReplies = () => {
-        onShowReplies && onShowReplies();
-        setShowReplies(true);
-    };
-    const createdTime = abbrTimeBeforeDate(createdDate);
-    const reactionElements = reactions &&
-        Object.entries(reactions)
-            .slice(0, MAX_REACTIONS_SHOWN)
-            .sort((a, b) => (a[1] < b[1] ? 1 : -1))
-            .map((reaction) => (React.createElement(Reaction, { key: id + reaction[0], onClick: () => onReact(reaction[0]), "$align": "center", "$dir": "row", "$gap": 5, "$userSelected": userReactions?.includes(reaction[0]) },
-            reaction[0],
-            React.createElement(P, { "$bold": true, "$fontSize": 10, "$lineHeight": 14 }, reaction[1]))));
-    const hasReplies = !!_replies?.length && _replies.length > 0;
-    const replyElements = hasReplies &&
-        _replies.map((reply, index) => {
-            if (!React.isValidElement(reply))
-                return null;
-            const key = reply.props?.id;
-            const hasLine = index !== _replies.length - 1 || hasMoreReplies;
-            return (React.createElement(ReplyWrapper, { "$hasLine": hasLine, key: key },
-                reply,
-                React.createElement(ReplyIndicator, null)));
-        });
-    return (React.createElement(Wrapper, { id: id },
-        React.createElement(Avatar, { href: userProfileUri, image: userImageUri, size: 32, tooltipContent: avatarTooltipContent, tooltipSx: avatarTooltipSx }),
-        React.createElement(Box, { "$flex": 1, "$dir": "column" },
-            React.createElement(ContentWrapper, { "$hasReplies": hasReplies || !!hasMoreReplies },
-                React.createElement(CommentBox, null,
-                    React.createElement(Box, { "$dir": "row", "$justify": "space-between", "$align": "center" },
-                        React.createElement(P, { "$bold": true, "$color": "grey-2", "$fontSize": 14, "$lineHeight": 20 }, userName),
-                        dropdown),
-                    React.createElement(P, { sx: "letter-spacing: -0.176px;" }, content)),
-                React.createElement(Box, { "$align": "flex-start", "$dir": "row", "$display": "flex", "$gap": 16, sx: "margin: 8px 0px; position: relative;" },
-                    React.createElement(Emoticon, { color: "primary-blue-2", onClick: handlePicker, size: 24, sx: " cursor: pointer; flex-shrink: 0;" }),
-                    React.createElement(CommentIcon, { color: "primary-blue-2", onClick: handleToggleCommentInput, size: 24, sx: "border-radius: 50%; cursor: pointer; flex-shrink: 0;" }),
-                    React.createElement(P, { "$color": "grey-7" }, "\u2022"),
-                    React.createElement(P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 24, sx: "flex-shrink: 0;" }, createdTime),
-                    React.createElement(Box, { "$display": "flex", "$flow": "row wrap", "$gap": 6, sx: "max-width: calc(100% - 190px); margin-left: auto;" },
-                        reactionElements,
-                        reactionModal),
-                    showPicker && (React.createElement(Portal, null,
-                        React.createElement(PickerWrapper, { "$pickerOrientation": pickerOrientation, "$top": pickerTriggerLoc.y, "$left": pickerTriggerLoc.x },
-                            React.createElement(Picker, { data: emojis, onEmojiSelect: handleReaction, onClickOutside: handlePickerBlur, maxFrequentRows: 1, navPosition: "none", previewPosition: "none", perLine: 9, theme: "auto" })))))),
-            hasReplies && toggleShowReplies && (React.createElement(RepliesWrapper, null, replyElements)),
-            !toggleShowReplies && !hasMoreReplies && hasReplies && (React.createElement(RepliesWrapper, null,
-                React.createElement(ReplyWrapper, { "$hasLine": false },
-                    React.createElement(Button, { onClick: handleToggleReplies, size: "small", sx: "color: var(--color-grey-3);", type: "text" }, "show replies"),
-                    React.createElement(ReplyIndicator, null)))),
-            hasMoreReplies && (React.createElement(RepliesWrapper, null,
-                React.createElement(ReplyWrapper, { "$hasLine": false },
-                    React.createElement(Button, { onClick: handleToggleReplies, size: "small", sx: "color: var(--color-grey-3);", type: "text" }, "show more replies"),
-                    React.createElement(ReplyIndicator, null)))),
-            toggleShowCommentInput && (React.createElement(CommentWrapper, { onSubmit: handleCommentSubmit },
-                React.createElement(TextInput, { bg: "var(--color-grey-10)", placeholder: "Write a reply", onChange: handleCommentChange, value: comment }))))));
-};
-const Wrapper = styled.div `
+"use client";
+"use strict";var React=require("react"),styled=require("styled-components"),Picker=require("@emoji-mart/react"),avatar=require("../../iconography/avatar/avatar.js"),box=require("../../atoms/box/box.js"),paragraph=require("../../atoms/typography/paragraph.js"),text_input=(require("../../input/checkbox/checkbox.js"),require("../../input/date/date.js"),require("../../input/filter/filter.js"),require("../../input/radio/radio.js"),require("../../input/search/search.js"),require("../../input/select/select.js"),require("../../input/text_area/text_area.js"),require("../../input/text_input/text_input.js")),button=(require("../../input/calendar/calendar.js"),require("../../input/time/time.js"),require("@mui/x-date-pickers/LocalizationProvider"),require("@mui/x-date-pickers/AdapterDateFnsV3"),require("@mui/x-date-pickers/TimeField"),require("../../actions/button/button.js")),portal=require("../portal/portal.js"),emojis=require("../../../emoji/emojis.json.js"),styles=require("../../../common/styles.js"),emoticon_add=require("../../../icons/basic/emoticon_add.js"),comment=require("../../../icons/message/comment.js"),helpers=require("./helpers.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Picker__default=_interopDefaultCompat(Picker);const MAX_REACTIONS_SHOWN=5,Comment=({avatarTooltipContent:e,avatarTooltipSx:t,content:a,createdDate:r,hasMoreReplies:l,id:o,onComment:i,onReact:n,onShowReplies:d,dropdown:u,reactionModal:p,reactions:c,replies:s,userImageUri:f,userName:m,userReactions:_,userProfileUri:x})=>{const[y,R]=React__default.default.useState(!1),[g,b]=React__default.default.useState({x:0,y:0}),[h,$]=React__default.default.useState("up"),[v,E]=React__default.default.useState(!1),[j,q]=React__default.default.useState(!1),[k,C]=React__default.default.useState(""),S=React__default.default.Children.toArray(s);var s=()=>{d&&d(),q(!0)},r=helpers.abbrTimeBeforeDate(r),c=c&&Object.entries(c).slice(0,MAX_REACTIONS_SHOWN).sort((e,t)=>e[1]<t[1]?1:-1).map(e=>React__default.default.createElement(Reaction,{key:o+e[0],onClick:()=>n(e[0]),$align:"center",$dir:"row",$gap:5,$userSelected:_?.includes(e[0])},e[0],React__default.default.createElement(paragraph.P,{$bold:!0,$fontSize:10,$lineHeight:14},e[1]))),w=!!S?.length&&0<S.length,W=w&&S.map((e,t)=>{var a;return React__default.default.isValidElement(e)?(a=e.props?.id,t=t!==S.length-1||l,React__default.default.createElement(ReplyWrapper,{$hasLine:t,key:a},e,React__default.default.createElement(ReplyIndicator,null))):null});return React__default.default.createElement(Wrapper,{id:o},React__default.default.createElement(avatar.Avatar,{href:x,image:f,size:32,tooltipContent:e,tooltipSx:t}),React__default.default.createElement(box.Box,{$flex:1,$dir:"column"},React__default.default.createElement(ContentWrapper,{$hasReplies:w||!!l},React__default.default.createElement(CommentBox,null,React__default.default.createElement(box.Box,{$dir:"row",$justify:"space-between",$align:"center"},React__default.default.createElement(paragraph.P,{$bold:!0,$color:"grey-2",$fontSize:14,$lineHeight:20},m),u),React__default.default.createElement(paragraph.P,{sx:"letter-spacing: -0.176px;"},a)),React__default.default.createElement(box.Box,{$align:"flex-start",$dir:"row",$display:"flex",$gap:16,sx:"margin: 8px 0px; position: relative;"},React__default.default.createElement(emoticon_add.Emoticon,{color:"primary-blue-2",onClick:e=>{e.stopPropagation(),R(e=>!e),b({y:e.clientY,x:e.clientX}),$(400<e.clientY?"up":"down")},size:24,sx:" cursor: pointer; flex-shrink: 0;"}),React__default.default.createElement(comment.Comment,{color:"primary-blue-2",onClick:()=>E(e=>!e),size:24,sx:"border-radius: 50%; cursor: pointer; flex-shrink: 0;"}),React__default.default.createElement(paragraph.P,{$color:"grey-7"},"•"),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:24,sx:"flex-shrink: 0;"},r),React__default.default.createElement(box.Box,{$display:"flex",$flow:"row wrap",$gap:6,sx:"max-width: calc(100% - 190px); margin-left: auto;"},c,p),y&&React__default.default.createElement(portal.Portal,null,React__default.default.createElement(PickerWrapper,{$pickerOrientation:h,$top:g.y,$left:g.x},React__default.default.createElement(Picker__default.default,{data:emojis.default,onEmojiSelect:({native:e})=>{n(e),R(!1)},onClickOutside:()=>R(!1),maxFrequentRows:1,navPosition:"none",previewPosition:"none",perLine:9,theme:"auto"}))))),w&&j&&React__default.default.createElement(RepliesWrapper,null,W),!j&&!l&&w&&React__default.default.createElement(RepliesWrapper,null,React__default.default.createElement(ReplyWrapper,{$hasLine:!1},React__default.default.createElement(button.Button,{onClick:s,size:"small",sx:"color: var(--color-grey-3);",type:"text"},"show replies"),React__default.default.createElement(ReplyIndicator,null))),l&&React__default.default.createElement(RepliesWrapper,null,React__default.default.createElement(ReplyWrapper,{$hasLine:!1},React__default.default.createElement(button.Button,{onClick:s,size:"small",sx:"color: var(--color-grey-3);",type:"text"},"show more replies"),React__default.default.createElement(ReplyIndicator,null))),v&&React__default.default.createElement(CommentWrapper,{onSubmit:e=>{e.stopPropagation(),e.preventDefault(),i(k),C("")}},React__default.default.createElement(text_input.TextInput,{bg:"var(--color-grey-10)",placeholder:"Write a reply",onChange:e=>{C(e.target.value)},value:k}))))},Wrapper=styled.styled.div`
   max-width: 700px;
   display: flex;
   flex-direction: row;
@@ -109,12 +7,10 @@ const Wrapper = styled.div `
   gap: 12px;
   justify-content: space-between;
   position: relative;
-`;
-const ContentWrapper = styled.div `
+`,ContentWrapper=styled.styled.div`
   display: flex;
   flex-direction: column;
-  ${({ $hasReplies }) => $hasReplies
-    ? `
+  ${({$hasReplies:e})=>e?`
     position: relative;
 
     &::before {
@@ -124,55 +20,44 @@ const ContentWrapper = styled.div `
       left: -28px;
       height: calc(100% - 12px);
       border-left: 2px solid var(--color-grey-9);
-    }`
-    : ''}
-`;
-const CommentBox = styled.div `
+    }`:""}
+`,CommentBox=styled.styled.div`
   padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 8px;
   background-color: var(--color-grey-10);
   border-radius: 16px;
-`;
-const PickerWrapper = styled.div `
+`,PickerWrapper=styled.styled.div`
   position: absolute;
   z-index: 1000;
 
-  ${({ $pickerOrientation }) => $pickerOrientation === 'up' ? 'transform: translateY(-345px);' : ''}
-  top: ${({ $top }) => $top}px;
-  left: ${({ $left }) => $left}px;
-`;
-const Reaction = styled.div `
-  ${Styles.flex}
+  ${({$pickerOrientation:e})=>"up"===e?"transform: translateY(-345px);":""}
+  top: ${({$top:e})=>e}px;
+  left: ${({$left:e})=>e}px;
+`,Reaction=styled.styled.div`
+  ${styles.Styles.flex}
   display: flex;
   padding: 2px 6px;
   border-radius: 12px;
   cursor: pointer;
-  ${({ $userSelected }) => $userSelected
-    ? `
+  ${({$userSelected:e})=>e?`
     background-color: var(--color-primary-blue-4);
     border: 1px solid var(--color-primary-blue-3);
-    `
-    : ''}
-`;
-const RepliesWrapper = styled.div `
+    `:""}
+`,RepliesWrapper=styled.styled.div`
   padding-top: 12px;
-`;
-const ReplyWrapper = styled.div `
+`,ReplyWrapper=styled.styled.div`
   position: relative;
-  ${({ $hasLine }) => $hasLine
-    ? `
+  ${({$hasLine:e})=>e?`
     &::before {
       content: "";
       position: absolute;
       left: -28px;
       height: 100%;
       border-left: 2px solid var(--color-grey-9);
-    }`
-    : ''}
-`;
-const ReplyIndicator = styled.div `
+    }`:""}
+`,ReplyIndicator=styled.styled.div`
   position: absolute;
   top: -12px;
   left: -28px;
@@ -182,8 +67,7 @@ const ReplyIndicator = styled.div `
   border: 2px solid var(--color-grey-9);
   border-top: none;
   border-right: none;
-`;
-const CommentWrapper = styled.form `
+`,CommentWrapper=styled.styled.form`
   label {
     margin-bottom: 16px;
   }
@@ -191,4 +75,4 @@ const CommentWrapper = styled.form `
     box-shadow: var(--elevation-6);
     border-radius: 16px;
   }
-`;
+`;exports.Comment=Comment;

package/dist/components/surfaces/comment/helpers.js

@@ -1,26 +1 @@
-export const abbrTimeBeforeDate = (date) => {
-    const now = new Date();
-    const diff = now.getTime() - date.getTime();
-    if (diff < 60000) {
-        // under 1 min
-        return 'Now';
-    }
-    else if (diff < 3600000) {
-        // under one hour
-        const minutes = Math.floor(diff / 60000);
-        return `${minutes}m`;
-    }
-    else if (diff < 86400000) {
-        // under one day
-        const hours = Math.floor(diff / 3600000);
-        return `${hours}h`;
-    }
-    else if (diff < 604800000) {
-        // under one week
-        const days = Math.floor(diff / 86400000);
-        return `${days}d`;
-    }
-    else {
-        return `${Math.floor(diff / 604800000)}w`;
-    }
-};
+"use strict";const abbrTimeBeforeDate=e=>{e=(new Date).getTime()-e.getTime();return e<6e4?"Now":e<36e5?Math.floor(e/6e4)+"m":e<864e5?Math.floor(e/36e5)+"h":e<6048e5?Math.floor(e/864e5)+"d":Math.floor(e/6048e5)+"w"};exports.abbrTimeBeforeDate=abbrTimeBeforeDate;

package/dist/components/surfaces/discuss_post/discuss_post.js

@@ -1,99 +1,19 @@
-'use client';
-import React from 'react';
-import Link from 'next/link';
-import styled from 'styled-components';
-import { Styles } from '../../../common/styles';
-import { Box } from '../../../components/atoms/box/box';
-import { HideButRender } from '../../../components/atoms/hide/hide';
-import { TimeAgo } from '../../../components/atoms/time_ago';
-import { P } from '../../../components/atoms/typography/paragraph';
-import { Avatar } from '../../../components/iconography/avatar/avatar';
-import { isSameDay } from './helpers';
-const MAX_REACTIONS_SHOWN = 5;
-export const DiscussPost = ({ avatarSx, content, createdDate, editActions, editing, firstNewPost, handleContentChange, id, onReact, popupActions, popupSx, reactions, reactionModal, replyContent, replyUserHref, replyUserImageUri, replyUserName, sx, userHref, userImageUri, userName, userReactions, }) => {
-    const ref = React.useRef(null);
-    const [change, setChange] = React.useState(false);
-    React.useEffect(() => {
-        if (ref.current)
-            ref.current.value = content;
-    }, [content]);
-    React.useEffect(() => {
-        if (ref?.current && ref.current.value !== content && handleContentChange) {
-            handleContentChange(ref.current.value);
-        }
-    }, [change]);
-    React.useEffect(() => {
-        if (ref.current) {
-            ref.current.style.height = '48px';
-            const scrollHeight = ref.current.scrollHeight;
-            ref.current.style.height = scrollHeight + 'px';
-        }
-    }, [ref.current, change, content]);
-    const date = React.useMemo(() => isSameDay(new Date(), new Date(createdDate)) ? (React.createElement(TimeAgo, { date: createdDate })) : (new Intl.DateTimeFormat('en-US', {
-        minute: 'numeric',
-        hour: 'numeric',
-        day: 'numeric',
-        month: 'long',
-        year: 'numeric',
-    }).format(createdDate)), [createdDate]);
-    const reactionElements = React.useMemo(() => {
-        if (!reactions)
-            return undefined;
-        else {
-            let avail = Object.entries(reactions);
-            if (reactionModal) {
-                avail = avail.slice(0, MAX_REACTIONS_SHOWN);
-            }
-            return avail
-                .sort((a, b) => (a[1] < b[1] ? 1 : -1))
-                .map((reaction) => (React.createElement(Reaction, { key: id + reaction[0], onClick: () => onReact(reaction[0]), "$align": "center", "$dir": "row", "$gap": 5, "$userSelected": userReactions?.includes(reaction[0]) },
-                reaction[0],
-                React.createElement(P, { "$bold": true, "$fontSize": 10, "$lineHeight": 14 }, reaction[1]))));
-        }
-    }, [reactions, userReactions]);
-    return (React.createElement(Wrapper, { "$editing": editing, "$firstNewPost": firstNewPost, "$sx": sx, id: id },
-        React.createElement(HideButRender, { show: !editing && !!replyContent },
-            React.createElement(Box, { "$align": "center", "$gap": 4, sx: "margin-left: 56px;" },
-                React.createElement(ReplyMarker, null),
-                React.createElement(Avatar, { as: Link, href: replyUserHref, image: replyUserImageUri, size: 16, sx: "img { cursor: pointer;}" }),
-                React.createElement(P, { as: Link, href: replyUserHref, "$color": "primary-blue-2", "$fontSize": 12, "$lineHeight": 16, sx: "flex-shrink: 0; text-decoration: none;" },
-                    "@",
-                    replyUserName),
-                React.createElement(P, { "$fontSize": 12, "$lineHeight": 16, "$textClampLines": 1 }, replyContent))),
-        React.createElement(HideButRender, { show: editing },
-            React.createElement(Box, { "$gap": 16, "$align": "flex-start", className: "editing" },
-                React.createElement(Avatar, { as: Link, href: userHref, image: userImageUri, size: 40, sx: avatarSx }),
-                React.createElement(Box, { "$gap": 10, sx: `
+"use client";
+"use strict";var React=require("react"),Link=require("next/link"),styled=require("styled-components"),styles=require("../../../common/styles.js"),box=require("../../atoms/box/box.js"),hide=require("../../atoms/hide/hide.js"),time_ago=require("../../atoms/time_ago/time_ago.js"),paragraph=require("../../atoms/typography/paragraph.js"),avatar=require("../../iconography/avatar/avatar.js"),helpers=require("./helpers.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Link__default=_interopDefaultCompat(Link),styled__default=_interopDefaultCompat(styled);const MAX_REACTIONS_SHOWN=5,DiscussPost=({avatarSx:e,content:t,createdDate:a,editActions:r,editing:l,firstNewPost:o,handleContentChange:i,id:n,onReact:d,popupActions:u,popupSx:c,reactions:p,reactionModal:s,replyContent:f,replyUserHref:x,replyUserImageUri:_,replyUserName:g,sx:m,userHref:h,userImageUri:y,userName:$,userReactions:R})=>{const b=React__default.default.useRef(null),[v,E]=React__default.default.useState(!1);React__default.default.useEffect(()=>{b.current&&(b.current.value=t)},[t]),React__default.default.useEffect(()=>{b?.current&&b.current.value!==t&&i&&i(b.current.value)},[v]),React__default.default.useEffect(()=>{var e;b.current&&(b.current.style.height="48px",e=b.current.scrollHeight,b.current.style.height=e+"px")},[b.current,v,t]);var w=React__default.default.useMemo(()=>helpers.isSameDay(new Date,new Date(a))?React__default.default.createElement(time_ago.TimeAgo,{date:a}):new Intl.DateTimeFormat("en-US",{minute:"numeric",hour:"numeric",day:"numeric",month:"long",year:"numeric"}).format(a),[a]),k=React__default.default.useMemo(()=>{if(p){let e=Object.entries(p);return(e=s?e.slice(0,MAX_REACTIONS_SHOWN):e).sort((e,t)=>e[1]<t[1]?1:-1).map(e=>React__default.default.createElement(Reaction,{key:n+e[0],onClick:()=>d(e[0]),$align:"center",$dir:"row",$gap:5,$userSelected:R?.includes(e[0])},e[0],React__default.default.createElement(paragraph.P,{$bold:!0,$fontSize:10,$lineHeight:14},e[1])))}},[p,R]);return React__default.default.createElement(Wrapper,{$editing:l,$firstNewPost:o,$sx:m,id:n},React__default.default.createElement(hide.HideButRender,{show:!l&&!!f},React__default.default.createElement(box.Box,{$align:"center",$gap:4,sx:"margin-left: 56px;"},React__default.default.createElement(ReplyMarker,null),React__default.default.createElement(avatar.Avatar,{as:Link__default.default,href:x,image:_,size:16,sx:"img { cursor: pointer;}"}),React__default.default.createElement(paragraph.P,{as:Link__default.default,href:x,$color:"primary-blue-2",$fontSize:12,$lineHeight:16,sx:"flex-shrink: 0; text-decoration: none;"},"@",g),React__default.default.createElement(paragraph.P,{$fontSize:12,$lineHeight:16,$textClampLines:1},f))),React__default.default.createElement(hide.HideButRender,{show:l},React__default.default.createElement(box.Box,{$gap:16,$align:"flex-start",className:"editing"},React__default.default.createElement(avatar.Avatar,{as:Link__default.default,href:h,image:y,size:40,sx:e}),React__default.default.createElement(box.Box,{$gap:10,sx:`
             flex: 1; 
             background-color: var(--color-grey-10);
             border-radius: 8px;
             @media (max-width: 768px) {
               flex-direction: column;
-              min-height: calc(${ref?.current?.style?.height || '360px'} + 24px);
+              min-height: calc(${b?.current?.style?.height||"360px"} + 24px);
             }
-            ` },
-                    React.createElement(TextAreaElement, { onChange: () => setChange((prev) => !prev), ref: ref }),
-                    React.createElement(EditActionsWrapper, null, editActions)))),
-        React.createElement(HideButRender, { show: !editing },
-            React.createElement(Box, { "$gap": 16, "$align": "flex-start" },
-                React.createElement(PopupActionsWrapper, { "$sx": popupSx, className: "popup-actions" }, popupActions),
-                React.createElement(Avatar, { as: Link, href: userHref, image: userImageUri, size: 40, sx: `img { cursor: pointer; }; ${avatarSx}` }),
-                React.createElement(Box, { "$gap": 4, "$dir": "column", sx: "flex: 1;" },
-                    React.createElement(Box, { "$align": "center", "$gap": 8, sx: `height: 20px;
+            `},React__default.default.createElement(TextAreaElement,{onChange:()=>E(e=>!e),ref:b}),React__default.default.createElement(EditActionsWrapper,null,r)))),React__default.default.createElement(hide.HideButRender,{show:!l},React__default.default.createElement(box.Box,{$gap:16,$align:"flex-start"},React__default.default.createElement(PopupActionsWrapper,{$sx:c,className:"popup-actions"},u),React__default.default.createElement(avatar.Avatar,{as:Link__default.default,href:h,image:y,size:40,sx:"img { cursor: pointer; }; "+e}),React__default.default.createElement(box.Box,{$gap:4,$dir:"column",sx:"flex: 1;"},React__default.default.createElement(box.Box,{$align:"center",$gap:8,sx:`height: 20px;
               @media screen and (max-width: 400px) {
                 flex-direction: column;
                 align-items: flex-start;
                 height: 40px;
                 gap: 0px;
-              }` },
-                        React.createElement(P, { "$bold": true, "$color": !!replyContent ? 'special-orange-1' : 'primary-blue-2', "$fontSize": 14, "$lineHeight": 20 }, userName),
-                        React.createElement(P, { "$color": "grey-4", "$fontSize": 10, "$lineHeight": 14 }, date)),
-                    React.createElement(P, { "$fontSize": 14, "$lineHeight": 20, sx: "white-space: pre-line;" }, content),
-                    React.createElement(Box, { "$display": "flex", "$flow": "row wrap", "$gap": 6, sx: "margin-left: auto;" },
-                        reactionElements,
-                        reactionModal))))));
-};
-const Wrapper = styled.div `
+              }`},React__default.default.createElement(paragraph.P,{$bold:!0,$color:f?"special-orange-1":"primary-blue-2",$fontSize:14,$lineHeight:20},$),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:10,$lineHeight:14},w)),React__default.default.createElement(paragraph.P,{$fontSize:14,$lineHeight:20,sx:"white-space: pre-line;"},t),React__default.default.createElement(box.Box,{$display:"flex",$flow:"row wrap",$gap:6,sx:"margin-left: auto;"},k,s)))))},Wrapper=styled__default.default.div`
   position: relative;
   padding: 12px 16px;
   display: flex;
@@ -102,8 +22,7 @@ const Wrapper = styled.div `
   .popup-actions {
     display: none;
   }
-  ${({ $firstNewPost }) => $firstNewPost
-    ? `
+  ${({$firstNewPost:e})=>e?`
     &:before {
       content: "";
       position: absolute;
@@ -126,22 +45,18 @@ const Wrapper = styled.div `
       line-height: 16px;
       background-color: var(--color-red-5);
       border-radius: 18px;
-    }`
-    : ''}
-  ${({ $editing }) => $editing
-    ? `
-      background-color: var(--color-grey-9);`
-    : `
+    }`:""}
+  ${({$editing:e})=>e?`
+      background-color: var(--color-grey-9);`:`
     &:hover {
       background-color: var(--color-grey-10);
       .popup-actions {
         display: flex;
       }
     }`}
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const TextAreaElement = styled.textarea `
-  min-width: ${({ $minHeight }) => ($minHeight ? $minHeight - 24 + 'px;' : '')};
+  ${({$sx:e})=>e||""}
+`,TextAreaElement=styled__default.default.textarea`
+  min-width: ${({$minHeight:e})=>e?e-24+"px;":""};
   width: 100%;
   padding: 4px 16px;
   flex: 1;
@@ -167,8 +82,7 @@ const TextAreaElement = styled.textarea `
   &::-webkit-scrollbar {
     width: 0px;
   }
-`;
-const ReplyMarker = styled.div `
+`,ReplyMarker=styled__default.default.div`
   height: 12px;
   width: 24px;
   margin-top: 4px;
@@ -176,21 +90,17 @@ const ReplyMarker = styled.div `
   border-left: 2px solid var(--color-grey-9);
   border-top: 2px solid var(--color-grey-9);
   border-radius: 6px 0px 0px 0px;
-`;
-const Reaction = styled.div `
-  ${Styles.flex}
+`,Reaction=styled__default.default.div`
+  ${styles.Styles.flex}
   display: flex;
   padding: 2px 6px;
   border-radius: 12px;
   cursor: pointer;
-  ${({ $userSelected }) => $userSelected
-    ? `
+  ${({$userSelected:e})=>e?`
     background-color: var(--color-primary-blue-4);
     border: 1px solid var(--color-primary-blue-3);
-    `
-    : ''}
-`;
-const PopupActionsWrapper = styled.div `
+    `:""}
+`,PopupActionsWrapper=styled__default.default.div`
   position: absolute;
   top: -16px;
   right: 16px;
@@ -200,10 +110,9 @@ const PopupActionsWrapper = styled.div `
   background-color: var(--color-white);
   border: 1px solid var(--color-grey-9);
   box-shadow: var(--elevation-1);
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const EditActionsWrapper = styled.div `
+  ${({$sx:e})=>e||""}
+`,EditActionsWrapper=styled__default.default.div`
   display: flex;
   align-items: center;
   gap: 4px;
-`;
+`;exports.DiscussPost=DiscussPost;

package/dist/components/surfaces/discuss_post/helpers.js

@@ -1,11 +1 @@
-export const isSameDay = (date1, date2) => {
-    sanitizeTime(date1);
-    sanitizeTime(date2);
-    return date1.getTime() === date2.getTime();
-};
-const sanitizeTime = (date) => {
-    date.setHours(0);
-    date.setMinutes(0);
-    date.setSeconds(0);
-    date.setMilliseconds(0);
-};
+"use strict";const isSameDay=(e,s)=>(sanitizeTime(e),sanitizeTime(s),e.getTime()===s.getTime()),sanitizeTime=e=>{e.setHours(0),e.setMinutes(0),e.setSeconds(0),e.setMilliseconds(0)};exports.isSameDay=isSameDay;