@soul-refiner/design-system 2.5.0-alpha.4 → 2.5.0-alpha.6

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

@@ -1,5 +1,107 @@
-"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`
+'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 `
   max-width: 700px;
   display: flex;
   flex-direction: row;
@@ -7,10 +109,12 @@
   gap: 12px;
   justify-content: space-between;
   position: relative;
-`,ContentWrapper=styled.styled.div`
+`;
+const ContentWrapper = styled.div `
   display: flex;
   flex-direction: column;
-  ${({$hasReplies:e})=>e?`
+  ${({ $hasReplies }) => $hasReplies
+    ? `
     position: relative;
 
     &::before {
@@ -20,44 +124,55 @@
       left: -28px;
       height: calc(100% - 12px);
       border-left: 2px solid var(--color-grey-9);
-    }`:""}
-`,CommentBox=styled.styled.div`
+    }`
+    : ''}
+`;
+const CommentBox = styled.div `
   padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 8px;
   background-color: var(--color-grey-10);
   border-radius: 16px;
-`,PickerWrapper=styled.styled.div`
+`;
+const PickerWrapper = styled.div `
   position: absolute;
   z-index: 1000;
 
-  ${({$pickerOrientation:e})=>"up"===e?"transform: translateY(-345px);":""}
-  top: ${({$top:e})=>e}px;
-  left: ${({$left:e})=>e}px;
-`,Reaction=styled.styled.div`
-  ${styles.Styles.flex}
+  ${({ $pickerOrientation }) => $pickerOrientation === 'up' ? 'transform: translateY(-345px);' : ''}
+  top: ${({ $top }) => $top}px;
+  left: ${({ $left }) => $left}px;
+`;
+const Reaction = styled.div `
+  ${Styles.flex}
   display: flex;
   padding: 2px 6px;
   border-radius: 12px;
   cursor: pointer;
-  ${({$userSelected:e})=>e?`
+  ${({ $userSelected }) => $userSelected
+    ? `
     background-color: var(--color-primary-blue-4);
     border: 1px solid var(--color-primary-blue-3);
-    `:""}
-`,RepliesWrapper=styled.styled.div`
+    `
+    : ''}
+`;
+const RepliesWrapper = styled.div `
   padding-top: 12px;
-`,ReplyWrapper=styled.styled.div`
+`;
+const ReplyWrapper = styled.div `
   position: relative;
-  ${({$hasLine:e})=>e?`
+  ${({ $hasLine }) => $hasLine
+    ? `
     &::before {
       content: "";
       position: absolute;
       left: -28px;
       height: 100%;
       border-left: 2px solid var(--color-grey-9);
-    }`:""}
-`,ReplyIndicator=styled.styled.div`
+    }`
+    : ''}
+`;
+const ReplyIndicator = styled.div `
   position: absolute;
   top: -12px;
   left: -28px;
@@ -67,7 +182,8 @@
   border: 2px solid var(--color-grey-9);
   border-top: none;
   border-right: none;
-`,CommentWrapper=styled.styled.form`
+`;
+const CommentWrapper = styled.form `
   label {
     margin-bottom: 16px;
   }
@@ -75,4 +191,4 @@
     box-shadow: var(--elevation-6);
     border-radius: 16px;
   }
-`;exports.Comment=Comment;
+`;

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

@@ -1 +1,26 @@
-"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;
+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`;
+    }
+};

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

@@ -0,0 +1 @@
+export { Comment } from './comment';

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

@@ -1,19 +1,99 @@
-"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:`
+'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: `
             flex: 1; 
             background-color: var(--color-grey-10);
             border-radius: 8px;
             @media (max-width: 768px) {
               flex-direction: column;
-              min-height: calc(${b?.current?.style?.height||"360px"} + 24px);
+              min-height: calc(${ref?.current?.style?.height || '360px'} + 24px);
             }
-            `},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;
+            ` },
+                    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;
               @media screen and (max-width: 400px) {
                 flex-direction: column;
                 align-items: flex-start;
                 height: 40px;
                 gap: 0px;
-              }`},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`
+              }` },
+                        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 `
   position: relative;
   padding: 12px 16px;
   display: flex;
@@ -22,7 +102,8 @@
   .popup-actions {
     display: none;
   }
-  ${({$firstNewPost:e})=>e?`
+  ${({ $firstNewPost }) => $firstNewPost
+    ? `
     &:before {
       content: "";
       position: absolute;
@@ -45,18 +126,22 @@
       line-height: 16px;
       background-color: var(--color-red-5);
       border-radius: 18px;
-    }`:""}
-  ${({$editing:e})=>e?`
-      background-color: var(--color-grey-9);`:`
+    }`
+    : ''}
+  ${({ $editing }) => $editing
+    ? `
+      background-color: var(--color-grey-9);`
+    : `
     &:hover {
       background-color: var(--color-grey-10);
       .popup-actions {
         display: flex;
       }
     }`}
-  ${({$sx:e})=>e||""}
-`,TextAreaElement=styled__default.default.textarea`
-  min-width: ${({$minHeight:e})=>e?e-24+"px;":""};
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const TextAreaElement = styled.textarea `
+  min-width: ${({ $minHeight }) => ($minHeight ? $minHeight - 24 + 'px;' : '')};
   width: 100%;
   padding: 4px 16px;
   flex: 1;
@@ -82,7 +167,8 @@
   &::-webkit-scrollbar {
     width: 0px;
   }
-`,ReplyMarker=styled__default.default.div`
+`;
+const ReplyMarker = styled.div `
   height: 12px;
   width: 24px;
   margin-top: 4px;
@@ -90,17 +176,21 @@
   border-left: 2px solid var(--color-grey-9);
   border-top: 2px solid var(--color-grey-9);
   border-radius: 6px 0px 0px 0px;
-`,Reaction=styled__default.default.div`
-  ${styles.Styles.flex}
+`;
+const Reaction = styled.div `
+  ${Styles.flex}
   display: flex;
   padding: 2px 6px;
   border-radius: 12px;
   cursor: pointer;
-  ${({$userSelected:e})=>e?`
+  ${({ $userSelected }) => $userSelected
+    ? `
     background-color: var(--color-primary-blue-4);
     border: 1px solid var(--color-primary-blue-3);
-    `:""}
-`,PopupActionsWrapper=styled__default.default.div`
+    `
+    : ''}
+`;
+const PopupActionsWrapper = styled.div `
   position: absolute;
   top: -16px;
   right: 16px;
@@ -110,9 +200,10 @@
   background-color: var(--color-white);
   border: 1px solid var(--color-grey-9);
   box-shadow: var(--elevation-1);
-  ${({$sx:e})=>e||""}
-`,EditActionsWrapper=styled__default.default.div`
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const EditActionsWrapper = styled.div `
   display: flex;
   align-items: center;
   gap: 4px;
-`;exports.DiscussPost=DiscussPost;
+`;

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

@@ -1 +1,11 @@
-"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;
+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);
+};

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

@@ -0,0 +1 @@
+export { DiscussPost } from './discuss_post';

package/dist/components/surfaces/drawer/drawer.js

@@ -1,5 +1,42 @@
-"use client";
-"use strict";var React=require("react"),styled=require("styled-components"),_function=require("../../../utils/function.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const DrawerContext=React__default.default.createContext([!1,()=>{}]),Drawer=({children:e,controlledOpen:r,onOpenChange:t})=>{const[a,o]=React__default.default.useState(r||!1);React__default.default.useEffect(()=>{void 0!==r&&o(r)},[r]);var l,d=[],n=[];let i=null,c=null;for(const p of React__default.default.Children.toArray(e))React__default.default.isValidElement(p)&&("Drawer.Trigger"===(l=p.type?.displayName)?d.push(p):"Drawer.Header"===l?c=p:"Drawer.Footer"===l?i=p:n.push(p));return React__default.default.createElement(DrawerContext.Provider,{value:[a,o]},d,a&&React__default.default.createElement(Background,{onClick:_function.callAll(()=>o(!1),()=>t&&t())}),React__default.default.createElement(Component,{$open:a},c&&React__default.default.createElement(HeaderWrapper,null,c),React__default.default.createElement(ContentWrapper,null,n),i&&React__default.default.createElement(FooterWrapper,null,i)))},Background=styled.styled.div`
+'use client';
+import React from 'react';
+import { styled } from 'styled-components';
+import { callAll } from '../../../utils/function';
+const DrawerContext = React.createContext([false, (() => undefined)]);
+export const Drawer = ({ children, controlledOpen, onOpenChange, }) => {
+    const [open, setOpen] = React.useState(controlledOpen || false);
+    React.useEffect(() => {
+        if (controlledOpen !== undefined) {
+            setOpen(controlledOpen);
+        }
+    }, [controlledOpen]);
+    const _children = React.Children.toArray(children);
+    const triggers = [];
+    const content = [];
+    let footer = null;
+    let header = null;
+    for (const child of _children) {
+        if (React.isValidElement(child)) {
+            const type = child.type?.displayName;
+            if (type === 'Drawer.Trigger')
+                triggers.push(child);
+            else if (type === 'Drawer.Header')
+                header = child;
+            else if (type === 'Drawer.Footer')
+                footer = child;
+            else
+                content.push(child);
+        }
+    }
+    return (React.createElement(DrawerContext.Provider, { value: [open, setOpen] },
+        triggers,
+        open && (React.createElement(Background, { onClick: callAll(() => setOpen(false), () => onOpenChange && onOpenChange()) })),
+        React.createElement(Component, { "$open": open },
+            header && React.createElement(HeaderWrapper, null, header),
+            React.createElement(ContentWrapper, null, content),
+            footer && React.createElement(FooterWrapper, null, footer))));
+};
+const Background = styled.div `
   position: fixed;
   height: 100vh;
   width: 100vw;
@@ -11,7 +48,8 @@
   background: #000000;
   opacity: 0.5;
   cursor: pointer;
-`,Component=styled.styled.div`
+`;
+const Component = styled.div `
   position: fixed;
   top: 0;
   right: 0;
@@ -27,8 +65,9 @@
   transition: margin-right 0.5s;
   background-color: var(--color-grey-10);
 
-  ${({$open:e})=>e?"margin-right: 0px;":""}
-`,HeaderWrapper=styled.styled.div`
+  ${({ $open }) => ($open ? 'margin-right: 0px;' : '')}
+`;
+const HeaderWrapper = styled.div `
   background-color: var(--color-white);
   box-shadow: var(--elevation-2);
   filter: drop-shadow(var(--elevation-2));
@@ -36,7 +75,8 @@
   position: sticky;
   top: 0;
   border-radius: 16px 0px 0px 0px;
-`,ContentWrapper=styled.styled.div`
+`;
+const ContentWrapper = styled.div `
   height: calc(100vh - 224px);
   position: relative;
   display: flex;
@@ -62,11 +102,30 @@
     background-color: var(--color-grey-6);
     opacity: 30%;
   }
-`,FooterWrapper=styled.styled.div`
+`;
+const FooterWrapper = styled.div `
   background-color: var(--color-white);
   box-shadow: var(--elevation-1);
   position: -webkit-sticky;
   position: sticky;
   bottom: 0;
   border-radius: 0px 0px 0px 16px;
-`,DrawerTrigger=({children:e})=>{const[,r]=React__default.default.useContext(DrawerContext);return e&&React__default.default.cloneElement(e,{onClick:_function.callAll(()=>r(e=>!e),e.props.onClick)})},DrawerHeader=(DrawerTrigger.displayName="Drawer.Trigger",Drawer.Trigger=DrawerTrigger,({children:e})=>React__default.default.createElement("div",null,e)),DrawerContent=(DrawerHeader.displayName="Drawer.Header",Drawer.Header=DrawerHeader,({children:e})=>React__default.default.createElement("div",null,e)),DrawerFooter=(DrawerContent.displayName="Drawer.Content",Drawer.Content=DrawerContent,({children:e})=>React__default.default.createElement("div",null,e));DrawerFooter.displayName="Drawer.Footer",Drawer.Footer=DrawerFooter,exports.Drawer=Drawer;
+`;
+const DrawerTrigger = ({ children: child, }) => {
+    const [, setOpen] = React.useContext(DrawerContext);
+    return (child &&
+        React.cloneElement(child, {
+            onClick: callAll(() => setOpen((prev) => !prev), child.props.onClick),
+        }));
+};
+DrawerTrigger.displayName = 'Drawer.Trigger';
+Drawer.Trigger = DrawerTrigger;
+const DrawerHeader = ({ children }) => (React.createElement("div", null, children));
+DrawerHeader.displayName = 'Drawer.Header';
+Drawer.Header = DrawerHeader;
+const DrawerContent = ({ children }) => (React.createElement("div", null, children));
+DrawerContent.displayName = 'Drawer.Content';
+Drawer.Content = DrawerContent;
+const DrawerFooter = ({ children }) => (React.createElement("div", null, children));
+DrawerFooter.displayName = 'Drawer.Footer';
+Drawer.Footer = DrawerFooter;

package/dist/components/surfaces/drawer/index.js

@@ -0,0 +1 @@
+export { Drawer } from './drawer';

package/dist/components/surfaces/index.js

@@ -0,0 +1,10 @@
+export { Accordion } from './accordion';
+export { CardCarousel } from './carousel';
+export { Comment } from './comment';
+export { DiscussPost } from './discuss_post';
+export { Drawer } from './drawer';
+export { Message } from './message';
+export { Modal } from './modal';
+export { Portal } from './portal';
+export { Post } from './post';
+export { CalendarDate } from './calendar_date';

package/dist/components/surfaces/message/index.js

@@ -0,0 +1 @@
+export { Message } from './message';