@soul-refiner/design-system 2.13.13 → 2.14.2

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

@@ -1,19 +1,19 @@
 "use client";
-"use strict";var React=require("react"),Link=require("next/link"),styled=require("styled-components"),regex=require("../../../common/regex.js"),styles=require("../../../common/styles.js"),box=require("../../atoms/box/box.js"),hide=require("../../atoms/hide/hide.js"),highlighter=require("../../atoms/highlighter/highlighter.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:i,handleContentChange:o,id:n,onReact:d,popupActions:u,popupSx:c,reactions:s,reactionModal:p,replyContent:f,replyUserHref:x,replyUserImageUri:g,replyUserName:_,sx:h,userHref:m,userImageUri:y,userName:$,isAdmin:b,userReactions:R})=>{const v=React__default.default.useRef(null),[E,w]=React__default.default.useState(!1);React__default.default.useEffect(()=>{v.current&&(v.current.value=t)},[t]),React__default.default.useEffect(()=>{v?.current&&v.current.value!==t&&o&&o(v.current.value)},[E]);var k=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]),S=React__default.default.useMemo(()=>{if(s){let e=Object.entries(s);return(e=p?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])))}},[s,R]);return React__default.default.createElement(Wrapper,{$editing:l,$firstNewPost:i,$sx:h,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:g,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;"},"@",_),React__default.default.createElement(paragraph.P,{sx:"word-break: break-word; white-space: pre-line;",$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:m,image:y,size:40,sx:e}),React__default.default.createElement(box.Box,{$gap:10,sx:`
+"use strict";var React=require("react"),Link=require("next/link"),styled=require("styled-components"),regex=require("../../../common/regex.js"),styles=require("../../../common/styles.js"),box=require("../../atoms/box/box.js"),hide=require("../../atoms/hide/hide.js"),highlighter=require("../../atoms/highlighter/highlighter.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"),emojiReactions=require("../../feedback/emojiPicker/emoji-reactions.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,latestReaction:c,popupSx:s,reactions:p,reactionModal:f,replyContent:x,replyUserHref:_,replyUserImageUri:g,replyUserName:m,sx:h,userHref:R,userImageUri:y,userName:b,isAdmin:$,userReactions:v})=>{const E=React__default.default.useRef(null),[w,k]=React__default.default.useState(!1);React__default.default.useEffect(()=>{E.current&&(E.current.value=t)},[t]),React__default.default.useEffect(()=>{E?.current&&E.current.value!==t&&i&&i(E.current.value)},[w]);var j=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]),A=React__default.default.useMemo(()=>{if(p){let e=Object.entries(p);return(e=f?e.slice(0,MAX_REACTIONS_SHOWN):e).sort((e,t)=>e[1]<t[1]?1:-1).map(([e,t])=>React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(emojiReactions.EmojiReaction,{key:n+e,emoji:e,isActive:v?.includes(e),onReact:()=>d(e),count:t,showSparkle:e===c,showCount:!0})))}},[p,v]);return React__default.default.createElement(Wrapper,{$editing:l,$firstNewPost:o,$sx:h,id:n},React__default.default.createElement(hide.HideButRender,{show:!l&&!!x},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:_,image:g,size:16,sx:"img { cursor: pointer;}"}),React__default.default.createElement(paragraph.P,{as:Link__default.default,href:_,$color:"primary-blue-2",$fontSize:12,$lineHeight:16,sx:"flex-shrink: 0; text-decoration: none;"},"@",m),React__default.default.createElement(paragraph.P,{sx:"word-break: break-word; white-space: pre-line;",$fontSize:12,$lineHeight:16,$textClampLines:1},x))),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:R,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(${v?.current?.style?.height||"360px"} + 24px);
+              min-height: calc(${E?.current?.style?.height||"360px"} + 24px);
             }
-            `},React__default.default.createElement(TextAreaElement,{onChange:()=>w(e=>!e),onInput:e=>{e=e.target;e.style.height="48px",e.style.height=Math.max(e.scrollHeight,e.offsetHeight)+"px"},ref:v}),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:m,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__default.default.createElement(TextAreaElement,{onChange:()=>k(e=>!e),onInput:e=>{e=e.target;e.style.height="48px",e.style.height=Math.max(e.scrollHeight,e.offsetHeight)+"px"},ref:E}),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:s,className:"popup-actions"},u),React__default.default.createElement(avatar.Avatar,{as:Link__default.default,href:R,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__default.default.createElement(paragraph.P,{$bold:!0,$color:b?"special-orange-1":"primary-blue-2",$fontSize:14,$lineHeight:20,as:m?Link__default.default:"span",href:m},$),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:10,$lineHeight:14},k)),React__default.default.createElement(paragraph.P,{$fontSize:14,$lineHeight:20,sx:"white-space: pre-line; word-break: break-word;"},React__default.default.createElement(highlighter.Highlighter,{highlightRender:e=>React__default.default.createElement(paragraph.P,{as:"span",$color:"primary-blue-2",sx:"font-size: inherit; line-height: inherit;"},React__default.default.createElement(Link__default.default,{href:e,target:"_blank"},e)),seperator:regex.URL_REGEX,text:t})),React__default.default.createElement(box.Box,{$display:"flex",$flow:"row wrap",$gap:6,sx:"margin-left: auto;"},S,p)))))},Wrapper=styled__default.default.div`
+              }`},React__default.default.createElement(paragraph.P,{$bold:!0,$color:$?"special-orange-1":"primary-blue-2",$fontSize:14,$lineHeight:20,as:R?Link__default.default:"span",href:R},b),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:10,$lineHeight:14},j)),React__default.default.createElement(paragraph.P,{$fontSize:14,$lineHeight:20,sx:"white-space: pre-line; word-break: break-word;"},React__default.default.createElement(highlighter.Highlighter,{highlightRender:e=>React__default.default.createElement(paragraph.P,{as:"span",$color:"primary-blue-2",sx:"font-size: inherit; line-height: inherit;"},React__default.default.createElement(Link__default.default,{href:e,target:"_blank"},e)),seperator:regex.URL_REGEX,text:t})),React__default.default.createElement(box.Box,{$display:"flex",$flow:"row wrap",$gap:6,sx:"margin-left: auto;"},A,f)))))},Wrapper=styled__default.default.div`
   position: relative;
   padding: 12px 16px;
   display: flex;
@@ -90,7 +90,7 @@
   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`
+`,PopupActionsWrapper=(styled__default.default.div`
   ${styles.Styles.flex}
   display: flex;
   padding: 2px 6px;
@@ -100,7 +100,7 @@
     background-color: var(--color-primary-blue-4);
     border: 1px solid var(--color-primary-blue-3);
     `:""}
-`,PopupActionsWrapper=styled__default.default.div`
+`,styled__default.default.div`
   position: absolute;
   top: -16px;
   right: 16px;
@@ -111,7 +111,7 @@
   border: 1px solid var(--color-grey-9);
   box-shadow: var(--elevation-1);
   ${({$sx:e})=>e||""}
-`,EditActionsWrapper=styled__default.default.div`
+`),EditActionsWrapper=styled__default.default.div`
   display: flex;
   align-items: center;
   gap: 4px;

package/dist/components/surfaces/post/post.js

@@ -4,7 +4,7 @@
             height: ${k.y}; 
             width: ${k.x};
             margin: 0 auto;
-            `},React__default.default.createElement(NavArrow,{$side:"left",$visible:0!==E,onClick:W},React__default.default.createElement(chevron_left.ChevronLeft,{color:"white",size:48})),React__default.default.createElement(Image__default.default,{alt:"",fill:!0,quality:100,onLoad:e=>{var{naturalHeight:e,naturalWidth:t}=e.target;let a=t+"px",l=e+"px";window?.innerHeight<e&&window?.innerWidth<t?(a=Math.floor(.95*window.innerHeight*t/e)+"px",l=Math.round(.95*window.innerWidth*e/t)+"px"):window?.innerHeight<e?(a=Math.floor(.95*window.innerHeight*t/e)+"px",l="95vh"):window?.innerWidth<t&&(a="95vw",l=Math.round(.95*window.innerWidth*e/t)+"px"),C({x:a,y:l})},draggable:!1,priority:!0,sizes:"100vw",src:p[E],style:{objectFit:"cover"}}),React__default.default.createElement(NavArrow,{$side:"right",$visible:E!==p.length-1,onClick:q},React__default.default.createElement(chevron_right.ChevronRight,{color:"white",size:48})))),React__default.default.createElement(Header,null,React__default.default.createElement(avatar.Avatar,{isPaidUser:h,as:l?Link__default.default:"button",href:l,image:r,size:64,status:a?"online":void 0,subtitle:React__default.default.createElement(paragraph.P,{as:"span",sx:"vertical-align: top;",$fontSize:14,$lineHeight:20},React__default.default.createElement(time_ago.TimeAgo,{date:new Date(u)})),title:React__default.default.createElement(heading.H,{as:l?Link__default.default:"span",href:l,sx:"text-decoration:none;",$bold:!0,$fontSize:18,$lineHeight:26},t),textPosition:"right",tooltipContent:i,tooltipSx:o,sx:l?"img { cursor: pointer; }":void 0}),c),!!d?.length&&React__default.default.createElement("div",{style:{padding:"16px 24px"}},g&&1<R?React__default.default.createElement(ShowMoreText__default.default,{lines:2,more:"Continue Reading",onClick:x,anchorClass:"see-more",expanded:!1,truncatedEndingComponent:"... "},React__default.default.createElement(paragraph.P,{$sx:"white-space: pre-line; word-break: break-word;",$textClampLines:2},React__default.default.createElement(highlighter.Highlighter,{highlightRender:e=>React__default.default.createElement(paragraph.P,{as:"span",$color:"primary-blue-2"},React__default.default.createElement(Link__default.default,{href:e,target:"_blank"},e)),seperator:regex.URL_REGEX,text:d}))):React__default.default.createElement(paragraph.P,{$sx:"white-space: pre-line; word-break: break-word;",innerRef:w},React__default.default.createElement(highlighter.Highlighter,{highlightRender:e=>React__default.default.createElement(paragraph.P,{as:"span",$color:"primary-blue-2"},React__default.default.createElement(Link__default.default,{href:e,target:"_blank"},e)),seperator:regex.URL_REGEX,text:g&&1===R?"This is a premium post. Join to the membership to unlock the full access.":d})),g&&!p?.length&&React__default.default.createElement(JoinNow,{onClick:x},React__default.default.createElement(paragraph.P,{$fontSize:14,$mediumBold:!0},"Join now for $",y," per month"))),g&&!!p?.length&&!j&&React__default.default.createElement(BlurredContentWrapper,null,React__default.default.createElement(Image__default.default,{alt:"",width:650,height:427,priority:!0,quality:100,src:p[0],style:{objectFit:"fill",height:"100%",width:"100%",filter:"blur(60px)",position:"absolute",top:0,left:"50%",transform:"translateX(-50%)"}}),React__default.default.createElement(lock.Lock,{size:40,color:"white",sx:"z-index: 1"}),React__default.default.createElement("div",{style:{display:"flex",flexDirection:"column",zIndex:1}},React__default.default.createElement(paragraph.P,{$color:"white",$fontSize:14,$bold:!0,$lineHeight:20},"Become a member"),React__default.default.createElement(paragraph.P,{$color:"white",$fontSize:14,$bold:!0,$lineHeight:20},"to unlock this post")),React__default.default.createElement(JoinNow,{onClick:x,style:{zIndex:1,marginTop:0}},React__default.default.createElement(paragraph.P,{$fontSize:14,$mediumBold:!0},"Join now for $",y," per month"))),!!p?.length&&!j&&!g&&React__default.default.createElement(ImagesWrapper,{$numImages:p.length},p.slice(0,4).map((e,t)=>React__default.default.createElement(ImageWrapper,{key:""+v+e.slice(0,15)+t},React__default.default.createElement(Image__default.default,{alt:"",fill:!0,onClick:()=>$(t),quality:100,src:e,draggable:!1,style:{cursor:"pointer",objectFit:"cover"}}))),4<p.length&&React__default.default.createElement(heading.H,{as:"p",className:"more-than",sx:"pointer-events: none;",$color:"grey-10",$fontSize:28,$lineHeight:36,$semiBold:!0},"+",p.length-4)),!p?.length&&!j&&m&&!g&&React__default.default.createElement(Link__default.default,{href:m.url,target:"_blank"},React__default.default.createElement(ImageWrapper,null,React__default.default.createElement(Image__default.default,{alt:"",fill:!0,quality:100,src:m.imageUrl,draggable:!1,style:{cursor:"pointer",objectFit:"cover"}})),React__default.default.createElement(box.Box,{$dir:"column",$gap:8,sx:"padding: 8px 16px;"},React__default.default.createElement(paragraph.P,{$color:"grey-2",$semiBold:!0},m.title),React__default.default.createElement(paragraph.P,{$color:"grey-5"},m.description))),j&&React__default.default.createElement(VideoWrapper,null,React__default.default.createElement(video.Video,{src:_.url,thumbnail:_.thumbnail,subtitles:[]})),!!e.length&&React__default.default.createElement(ActionsWrapper,null,!g&&e),s&&!!n.length&&React__default.default.createElement(CommentWrapper,null,n))},Wrapper=styled.styled.div`
+            `},React__default.default.createElement(NavArrow,{$side:"left",$visible:0!==E,onClick:W},React__default.default.createElement(chevron_left.ChevronLeft,{color:"white",size:48})),React__default.default.createElement(Image__default.default,{alt:"",fill:!0,quality:100,onLoad:e=>{var{naturalHeight:e,naturalWidth:t}=e.target;let a=t+"px",l=e+"px";window?.innerHeight<e&&window?.innerWidth<t?(a=Math.floor(.95*window.innerHeight*t/e)+"px",l=Math.round(.95*window.innerWidth*e/t)+"px"):window?.innerHeight<e?(a=Math.floor(.95*window.innerHeight*t/e)+"px",l="95vh"):window?.innerWidth<t&&(a="95vw",l=Math.round(.95*window.innerWidth*e/t)+"px"),C({x:a,y:l})},draggable:!1,priority:!0,sizes:"100vw",src:p[E],style:{objectFit:"cover"}}),React__default.default.createElement(NavArrow,{$side:"right",$visible:E!==p.length-1,onClick:q},React__default.default.createElement(chevron_right.ChevronRight,{color:"white",size:48})))),React__default.default.createElement(Header,null,React__default.default.createElement(avatar.Avatar,{isPaidUser:h,as:l?Link__default.default:"button",href:l,image:r,size:64,status:a?"online":void 0,subtitle:React__default.default.createElement(paragraph.P,{as:"span",sx:"vertical-align: top;",$fontSize:14,$lineHeight:20},React__default.default.createElement(time_ago.TimeAgo,{date:new Date(u)})),title:React__default.default.createElement(heading.H,{as:l?Link__default.default:"span",href:l,sx:"text-decoration:none;",$bold:!0,$fontSize:18,$lineHeight:26},t),textPosition:"right",tooltipContent:i,tooltipSx:o,sx:l?"img { cursor: pointer; }":void 0}),c),!!d?.length&&React__default.default.createElement("div",{style:{padding:"16px 24px"}},g&&1<R?React__default.default.createElement(ShowMoreText__default.default,{lines:2,more:"Continue Reading",onClick:x,anchorClass:"see-more",expanded:!1,truncatedEndingComponent:"... "},React__default.default.createElement(paragraph.P,{$sx:"white-space: pre-line; word-break: break-word;",$textClampLines:2},React__default.default.createElement(highlighter.Highlighter,{highlightRender:e=>React__default.default.createElement(paragraph.P,{as:"span",$color:"primary-blue-2"},React__default.default.createElement(Link__default.default,{href:e,target:"_blank"},e)),seperator:regex.URL_REGEX,text:d}))):React__default.default.createElement(paragraph.P,{$sx:"white-space: pre-line; word-break: break-word;",innerRef:w},React__default.default.createElement(highlighter.Highlighter,{highlightRender:e=>React__default.default.createElement(paragraph.P,{as:"span",$color:"primary-blue-2"},React__default.default.createElement(Link__default.default,{href:e,target:"_blank"},e)),seperator:regex.URL_REGEX,text:g&&1===R?"This is a premium post. Join to the membership to unlock the full access.":d})),g&&!p?.length&&React__default.default.createElement(JoinNow,{onClick:x},React__default.default.createElement(paragraph.P,{$fontSize:14,$mediumBold:!0},"Join now for $",y," per month"))),g&&!!p?.length&&!j&&React__default.default.createElement(BlurredContentWrapper,null,React__default.default.createElement(Image__default.default,{alt:"",width:650,height:427,priority:!0,quality:100,src:p[0],style:{objectFit:"fill",height:"100%",width:"100%",filter:"blur(60px)",position:"absolute",top:0,left:"50%",transform:"translateX(-50%)"}}),React__default.default.createElement(lock.Lock,{size:40,color:"white",sx:"z-index: 1"}),React__default.default.createElement("div",{style:{display:"flex",flexDirection:"column",zIndex:1}},React__default.default.createElement(paragraph.P,{$color:"white",$fontSize:14,$bold:!0,$lineHeight:20},"Become a member"),React__default.default.createElement(paragraph.P,{$color:"white",$fontSize:14,$bold:!0,$lineHeight:20},"to unlock this post")),React__default.default.createElement(JoinNow,{onClick:x,style:{zIndex:1,marginTop:0}},React__default.default.createElement(paragraph.P,{$fontSize:14,$mediumBold:!0},"Join now for $",y," per month"))),!!p?.length&&!j&&!g&&React__default.default.createElement(ImagesWrapper,{$numImages:p.length},p.slice(0,4).map((e,t)=>React__default.default.createElement(ImageWrapper,{key:""+v+e.slice(0,15)+t},React__default.default.createElement(Image__default.default,{alt:"",fill:!0,onClick:()=>$(t),quality:100,src:e,draggable:!1,style:{cursor:"pointer",objectFit:"cover"}}))),4<p.length&&React__default.default.createElement(heading.H,{as:"p",className:"more-than",sx:"pointer-events: none;",$color:"grey-10",$fontSize:28,$lineHeight:36,$semiBold:!0},"+",p.length-4)),!p?.length&&!j&&m&&!g&&React__default.default.createElement(Link__default.default,{href:m.url,target:"_blank"},React__default.default.createElement(ImageWrapper,null,React__default.default.createElement(Image__default.default,{alt:"",fill:!0,quality:100,src:m.imageUrl,draggable:!1,style:{cursor:"pointer",objectFit:"cover"}})),React__default.default.createElement(box.Box,{$dir:"column",$gap:8,sx:"padding: 8px 16px;"},React__default.default.createElement(paragraph.P,{$color:"grey-2",$semiBold:!0},m.title),React__default.default.createElement(paragraph.P,{$color:"grey-5"},m.description))),j&&React__default.default.createElement(VideoWrapper,null,React__default.default.createElement(video.Video,{src:_.url,thumbnail:_.thumbnail,subtitles:[],title:_?.title})),!!e.length&&React__default.default.createElement(ActionsWrapper,null,!g&&e),s&&!!n.length&&React__default.default.createElement(CommentWrapper,null,n))},Wrapper=styled.styled.div`
   position: relative;
   max-width: 700px;
   width: 100%;
@@ -81,7 +81,7 @@
 `,VideoWrapper=styled.styled.div`
   position: relative;
   width: 100%;
-  height: 427px;
+  height: 480px;
 `,BlurredContentWrapper=styled.styled.div`
   position: relative;
   display: flex;

package/dist/index.js

@@ -1 +1 @@
-"use strict";var button=require("./components/actions/button/button.js"),dropdown=require("./components/actions/dropdown/dropdown.js"),rate=require("./components/actions/rate/rate.js"),_switch=require("./components/actions/switch/switch.js"),toggle=require("./components/actions/toggle/toggle.js"),upload=require("./components/actions/upload/upload.js"),box=require("./components/atoms/box/box.js"),hide=require("./components/atoms/hide/hide.js"),highlighter=require("./components/atoms/highlighter/highlighter.js"),seconds_to_duration=require("./components/atoms/seconds_to_duration/seconds_to_duration.js"),display=require("./components/atoms/typography/display.js"),heading=require("./components/atoms/typography/heading.js"),paragraph=require("./components/atoms/typography/paragraph.js"),typography=require("./components/atoms/typography/typography.js"),time_ago=require("./components/atoms/time_ago/time_ago.js"),card=require("./components/card/card.js"),editor=require("./components/editor/editor.js"),simple_editor=require("./components/editor/simple_editor/simple_editor.js"),badge=require("./components/feedback/badge/badge.js"),banner=require("./components/feedback/banner/banner.js"),loader=require("./components/feedback/loader/loader.js"),notification=require("./components/feedback/notification/notification.js"),progress=require("./components/feedback/progress/progress.js"),toast=require("./components/feedback/toast/toast.js"),tooltip=require("./components/feedback/tooltip/tooltip.js"),animated_toast=require("./components/feedback/animated_toast/animated_toast.js"),avatar=require("./components/iconography/avatar/avatar.js"),icon=require("./components/iconography/icon/icon.js"),checkbox=require("./components/input/checkbox/checkbox.js"),date=require("./components/input/date/date.js"),filter=require("./components/input/filter/filter.js"),radio=require("./components/input/radio/radio.js"),search=require("./components/input/search/search.js"),select=require("./components/input/select/select.js"),text_area=require("./components/input/text_area/text_area.js"),text_input=require("./components/input/text_input/text_input.js"),calendar=require("./components/input/calendar/calendar.js"),time=require("./components/input/time/time.js"),time_input=require("./components/input/time_input/time_input.js"),audioPlayer=require("./components/media/audio-player/audio-player.js"),audioPlaylist=require("./components/media/audio-playlist/audio-playlist.js"),audioPreview=require("./components/media/audio-preview/audio-preview.js"),video=require("./components/media/video/video.js"),video$1=require("./components/media/video-player/video.js"),playing_indicator=require("./components/media/audio-playlist/playing_indicator.js"),breadcrumb=require("./components/navigation/breadcrumb/breadcrumb.js"),inner=require("./components/navigation/inner/inner.js"),tabs=require("./components/navigation/tabs/tabs.js"),accordion=require("./components/surfaces/accordion/accordion.js"),card$1=require("./components/surfaces/carousel/card/card.js"),comment=require("./components/surfaces/comment/comment.js"),discuss_post=require("./components/surfaces/discuss_post/discuss_post.js"),drawer=require("./components/surfaces/drawer/drawer.js"),message=require("./components/surfaces/message/message.js"),modal=require("./components/surfaces/modal/modal.js"),portal=require("./components/surfaces/portal/portal.js"),post=require("./components/surfaces/post/post.js"),calendar_date=require("./components/surfaces/calendar_date/calendar_date.js"),table=require("./components/table/table/table.js"),users_selection=require("./components/custom/users_selection/users_selection.js"),courses_selection=require("./components/custom/courses_selection/courses_selection.js"),index=require("./icons/index.js"),emojis=require("./emoji/emojis.json.js");exports.Button=button.Button,exports.Dropdown=dropdown.Dropdown,exports.Rate=rate.Rate,exports.Switch=_switch.Switch,exports.Toggle=toggle.Toggle,exports.Upload=upload.Upload,exports.Box=box.Box,exports.HideButRender=hide.HideButRender,exports.Highlighter=highlighter.Highlighter,exports.SecToDuration=seconds_to_duration.SecToDuration,exports.Display=display.Display,exports.H=heading.H,exports.P=paragraph.P,exports.Typography=typography.Typography,exports.TimeAgo=time_ago.TimeAgo,exports.Card=card.Card,exports.Editor=editor.Editor,exports.SimpleEditor=simple_editor.SimpleEditor,exports.Badge=badge.Badge,exports.Banner=banner.Banner,exports.Loader=loader.Loader,exports.Notification=notification.Notification,exports.Progress=progress.Progress,exports.Toast=toast.Toast,exports.Tooltip=tooltip.Tooltip,exports.AnimatedToast=animated_toast.AnimatedToast,exports.Avatar=avatar.Avatar,exports.Icon=icon.Icon,exports.Checkbox=checkbox.Checkbox,exports.DatePicker=date.DatePicker,exports.Filter=filter.Filter,exports.Radio=radio.Radio,exports.Search=search.Search,exports.Select=select.Select,exports.TextArea=text_area.TextArea,exports.TextInput=text_input.TextInput,exports.CalendarInput=calendar.CalendarInput,exports.Time=time.Time,exports.TimeInput=time_input.TimeInput,exports.AudioPlayer=audioPlayer.AudioPlayer,exports.AudioPlaylist=audioPlaylist.AudioPlaylist,exports.AudioPreview=audioPreview.AudioPreview,exports.Video=video.Video,exports.VideoPlayer=video$1.VideoPlayer,exports.NowPlaying=playing_indicator.NowPlaying,exports.Breadcrumb=breadcrumb.Breadcrumb,exports.InnerNav=inner.InnerNav,exports.Tabs=tabs.Tabs,exports.Accordion=accordion.Accordion,exports.CardCarousel=card$1.CardCarousel,exports.Comment=comment.Comment,exports.DiscussPost=discuss_post.DiscussPost,exports.Drawer=drawer.Drawer,exports.Message=message.Message,exports.Modal=modal.Modal,exports.Portal=portal.Portal,exports.Post=post.Post,exports.CalendarDate=calendar_date.CalendarDate,exports.Table=table.Table,exports.UsersSelection=users_selection.UsersSelection,exports.CoursesSelection=courses_selection.CoursesSelection,exports.Icons=index,exports.emoji=emojis;
+"use strict";var button=require("./components/actions/button/button.js"),dropdown=require("./components/actions/dropdown/dropdown.js"),rate=require("./components/actions/rate/rate.js"),_switch=require("./components/actions/switch/switch.js"),toggle=require("./components/actions/toggle/toggle.js"),upload=require("./components/actions/upload/upload.js"),box=require("./components/atoms/box/box.js"),hide=require("./components/atoms/hide/hide.js"),highlighter=require("./components/atoms/highlighter/highlighter.js"),seconds_to_duration=require("./components/atoms/seconds_to_duration/seconds_to_duration.js"),display=require("./components/atoms/typography/display.js"),heading=require("./components/atoms/typography/heading.js"),paragraph=require("./components/atoms/typography/paragraph.js"),typography=require("./components/atoms/typography/typography.js"),time_ago=require("./components/atoms/time_ago/time_ago.js"),card=require("./components/card/card.js"),editor=require("./components/editor/editor.js"),simple_editor=require("./components/editor/simple_editor/simple_editor.js"),badge=require("./components/feedback/badge/badge.js"),banner=require("./components/feedback/banner/banner.js"),loader=require("./components/feedback/loader/loader.js"),notification=require("./components/feedback/notification/notification.js"),progress=require("./components/feedback/progress/progress.js"),toast=require("./components/feedback/toast/toast.js"),tooltip=require("./components/feedback/tooltip/tooltip.js"),animated_toast=require("./components/feedback/animated_toast/animated_toast.js"),emojiPicker=require("./components/feedback/emojiPicker/emoji-picker.js"),emojiReactions=require("./components/feedback/emojiPicker/emoji-reactions.js"),avatar=require("./components/iconography/avatar/avatar.js"),icon=require("./components/iconography/icon/icon.js"),checkbox=require("./components/input/checkbox/checkbox.js"),date=require("./components/input/date/date.js"),filter=require("./components/input/filter/filter.js"),radio=require("./components/input/radio/radio.js"),search=require("./components/input/search/search.js"),select=require("./components/input/select/select.js"),text_area=require("./components/input/text_area/text_area.js"),text_input=require("./components/input/text_input/text_input.js"),calendar=require("./components/input/calendar/calendar.js"),time=require("./components/input/time/time.js"),time_input=require("./components/input/time_input/time_input.js"),audioPlayer=require("./components/media/audio-player/audio-player.js"),audioPlaylist=require("./components/media/audio-playlist/audio-playlist.js"),audioPreview=require("./components/media/audio-preview/audio-preview.js"),video=require("./components/media/video/video.js"),video$1=require("./components/media/video-player/video.js"),playing_indicator=require("./components/media/audio-playlist/playing_indicator.js"),breadcrumb=require("./components/navigation/breadcrumb/breadcrumb.js"),inner=require("./components/navigation/inner/inner.js"),tabs=require("./components/navigation/tabs/tabs.js"),accordion=require("./components/surfaces/accordion/accordion.js"),card$1=require("./components/surfaces/carousel/card/card.js"),comment=require("./components/surfaces/comment/comment.js"),discuss_post=require("./components/surfaces/discuss_post/discuss_post.js"),drawer=require("./components/surfaces/drawer/drawer.js"),message=require("./components/surfaces/message/message.js"),modal=require("./components/surfaces/modal/modal.js"),portal=require("./components/surfaces/portal/portal.js"),post=require("./components/surfaces/post/post.js"),calendar_date=require("./components/surfaces/calendar_date/calendar_date.js"),table=require("./components/table/table/table.js"),users_selection=require("./components/custom/users_selection/users_selection.js"),courses_selection=require("./components/custom/courses_selection/courses_selection.js"),index=require("./icons/index.js"),emojis=require("./emoji/emojis.json.js");exports.Button=button.Button,exports.Dropdown=dropdown.Dropdown,exports.Rate=rate.Rate,exports.Switch=_switch.Switch,exports.Toggle=toggle.Toggle,exports.Upload=upload.Upload,exports.Box=box.Box,exports.HideButRender=hide.HideButRender,exports.Highlighter=highlighter.Highlighter,exports.SecToDuration=seconds_to_duration.SecToDuration,exports.Display=display.Display,exports.H=heading.H,exports.P=paragraph.P,exports.Typography=typography.Typography,exports.TimeAgo=time_ago.TimeAgo,exports.Card=card.Card,exports.Editor=editor.Editor,exports.SimpleEditor=simple_editor.SimpleEditor,exports.Badge=badge.Badge,exports.Banner=banner.Banner,exports.Loader=loader.Loader,exports.Notification=notification.Notification,exports.Progress=progress.Progress,exports.Toast=toast.Toast,exports.Tooltip=tooltip.Tooltip,exports.AnimatedToast=animated_toast.AnimatedToast,exports.CustomEmojiPicker=emojiPicker.CustomEmojiPicker,exports.EmojiReaction=emojiReactions.EmojiReaction,exports.Avatar=avatar.Avatar,exports.Icon=icon.Icon,exports.Checkbox=checkbox.Checkbox,exports.DatePicker=date.DatePicker,exports.Filter=filter.Filter,exports.Radio=radio.Radio,exports.Search=search.Search,exports.Select=select.Select,exports.TextArea=text_area.TextArea,exports.TextInput=text_input.TextInput,exports.CalendarInput=calendar.CalendarInput,exports.Time=time.Time,exports.TimeInput=time_input.TimeInput,exports.AudioPlayer=audioPlayer.AudioPlayer,exports.AudioPlaylist=audioPlaylist.AudioPlaylist,exports.AudioPreview=audioPreview.AudioPreview,exports.Video=video.Video,exports.VideoPlayer=video$1.VideoPlayer,exports.NowPlaying=playing_indicator.NowPlaying,exports.Breadcrumb=breadcrumb.Breadcrumb,exports.InnerNav=inner.InnerNav,exports.Tabs=tabs.Tabs,exports.Accordion=accordion.Accordion,exports.CardCarousel=card$1.CardCarousel,exports.Comment=comment.Comment,exports.DiscussPost=discuss_post.DiscussPost,exports.Drawer=drawer.Drawer,exports.Message=message.Message,exports.Modal=modal.Modal,exports.Portal=portal.Portal,exports.Post=post.Post,exports.CalendarDate=calendar_date.CalendarDate,exports.Table=table.Table,exports.UsersSelection=users_selection.UsersSelection,exports.CoursesSelection=courses_selection.CoursesSelection,exports.Icons=index,exports.emoji=emojis;

package/dist/src/components/custom/help_center/help_center-auth.d.ts

@@ -0,0 +1,7 @@
+import { USER_ROLES, User } from './types';
+declare const auth: {
+    isAuthenticated: () => boolean;
+    getUser: () => User | null;
+    hasPermission: (role: (typeof USER_ROLES)[keyof typeof USER_ROLES], permission: string) => boolean;
+};
+export default auth;

package/dist/src/components/custom/help_center/help_center-customModal.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CustomModalProps } from './types';
+declare const CustomModal: React.FC<CustomModalProps>;
+export default CustomModal;

package/dist/src/components/custom/help_center/help_center-defaultArticle.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface DefaultArticlePageProps {
+    articleId: string;
+    title: string;
+    handleCreateCategory: (value: string) => void;
+    handleCreateArticle: () => void;
+}
+export declare const HowCanWeHelpPage: React.FC;
+export declare const DefaultArticlePage: React.FC<DefaultArticlePageProps>;
+interface DefaultSubcategoryPageProps {
+    categoryId: string;
+    subcategoryId: string;
+}
+export declare const DefaultSubcategoryPage: React.FC<DefaultSubcategoryPageProps>;
+export {};

package/dist/src/components/custom/help_center/help_center-editable-content.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ArticleCategory } from './types';
+interface EditArticleFormProps {
+    articleCategory: ArticleCategory;
+}
+declare const ArticleCategoryWithQA: React.FC<EditArticleFormProps>;
+export default ArticleCategoryWithQA;

package/dist/src/components/custom/help_center/help_center-mainPage.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const MainPage: React.FC;
+export default MainPage;

package/dist/src/components/custom/help_center/help_center-sidebar.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Sidebar: React.FC;
+export default Sidebar;

package/dist/src/components/custom/help_center/help_center.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Category, USER_ROLES } from './types';
+interface HelpCenterProps {
+    initialData: {
+        categories: Category[];
+        userRole: (typeof USER_ROLES)[keyof typeof USER_ROLES];
+    };
+    onDataChange?: (data: {
+        categories: Category[];
+    }) => void;
+}
+export declare const HelpCenter: React.FC<HelpCenterProps>;
+export {};

package/dist/src/components/custom/help_center/help_center_articlle-list.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ArticleListProps {
+    categoryId: string;
+    subcategoryId: string;
+}
+declare const ArticleList: React.FC<ArticleListProps>;
+export default ArticleList;

package/dist/src/components/custom/help_center/help_center_categoryList.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface CategoryListProps {
+    children: (categoryId: string, subcategoryId?: string) => React.ReactNode;
+}
+declare const CategoryList: React.FC<CategoryListProps>;
+export default CategoryList;

package/dist/src/components/custom/help_center/help_center_dataStore.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { HelpCenterContextValue, HelpCenterProviderProps } from './types';
+export declare const HelpCenterContext: React.Context<HelpCenterContextValue | undefined>;
+export declare const HelpCenterProvider: React.FC<HelpCenterProviderProps>;

package/dist/src/components/custom/help_center/help_center_layout.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const AppLayout: React.FC;
+export default AppLayout;

package/dist/src/components/custom/help_center/help_center_seedData.d.ts

@@ -0,0 +1,2 @@
+import { Category } from './types';
+export declare const categoriesInitialData: Category[];

package/dist/src/components/custom/help_center/help_center_sub-category.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface SubCategoryListProps {
+    categoryId: string;
+    children: (subcategoryId: string) => React.ReactNode;
+}
+declare const SubCategoryList: React.FC<SubCategoryListProps>;
+export default SubCategoryList;

package/dist/src/components/custom/help_center/index.d.ts

@@ -0,0 +1 @@
+export { HelpCenter } from './help_center';

package/dist/src/components/custom/help_center/types.d.ts

@@ -0,0 +1,124 @@
+/// <reference types="react" />
+import { TElement } from '@udecode/plate';
+import { IStyledComponent } from 'styled-components';
+import { FastOmit } from 'styled-components/dist/types';
+export interface Category {
+    id: string;
+    name: string;
+    subcategories: Subcategory[];
+}
+export interface Subcategory {
+    id: string;
+    name: string;
+    categoryId: string;
+    articles: Article[];
+}
+export interface WithPermissionProps {
+    role: (typeof USER_ROLES)[keyof typeof USER_ROLES];
+    permission: string;
+}
+export declare const USER_ROLES: {
+    readonly ADMIN: "admin";
+    readonly EDITOR: "editor";
+    readonly VIEWER: "viewer";
+};
+export interface User {
+    id: string;
+    email: string;
+    role: (typeof USER_ROLES)[keyof typeof USER_ROLES];
+}
+export interface Category {
+    id: string;
+    name: string;
+    subcategories: Subcategory[];
+}
+export declare enum DropdownOptions {
+    RENAME = "Rename",
+    CREATE_SUBCATEGORY = "Create Sub-Category",
+    DELETE_CATEGORY = "Remove the Category",
+    CREATE_ARTICLES = "Create Articles",
+    DELETE_SUBCATEGORY = "Remove"
+}
+export interface CustomModalProps {
+    title: string;
+    isOpen: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    initialValue?: string;
+    modalType: modalType;
+    submitButtonText?: string;
+    cancelButtonText?: string;
+    mainContent?: React.ReactNode;
+    headerContent?: React.ReactNode;
+    footerContent?: React.ReactNode;
+    onSubmit: (value: string) => void;
+    trigger: React.ReactNode;
+}
+export type modalType = 'create' | 'edit' | 'delete' | 'create-article-category' | 'edit-article' | 'edit-article-category' | 'delete-article-category' | 'edit-article-QA' | 'delete-article-QA' | 'articleQuestion';
+export interface Subcategory {
+    id: string;
+    name: string;
+    categoryId: string;
+    articles: Article[];
+}
+export interface ArticleCategory {
+    id: string;
+    title?: string;
+    articleId: string;
+    description?: string;
+    questions?: ArticleQuestion[];
+}
+export interface ArticleQuestion {
+    id: string;
+    articleCategoryId: string;
+    question?: string;
+    answer?: TElement[];
+}
+export interface Article {
+    id: string;
+    title: string;
+    content: ArticleCategory[];
+    categoryId: string;
+    subcategoryId: string;
+}
+export interface HelpCenterContextValue {
+    categories: Category[];
+    isLoading: boolean;
+    selectedArticle: Article | null;
+    isNewArticle: boolean;
+    selectedSubcategory: Subcategory | null;
+    error: string | null;
+    userRole: (typeof USER_ROLES)[keyof typeof USER_ROLES];
+    breadcrumbTrail: string[];
+    setSelectedSubcategory: React.Dispatch<React.SetStateAction<Subcategory | null>>;
+    setSelectedArticle: React.Dispatch<React.SetStateAction<Article | null>>;
+    setIsNewArticle: React.Dispatch<React.SetStateAction<boolean>>;
+    setBreadcrumbTrail: React.Dispatch<React.SetStateAction<string[]>>;
+    addCategory: (name: string) => void;
+    updateCategory: (id: string, name: string) => void;
+    deleteCategory: (id: string) => void;
+    addSubcategory: (categoryId: string, name: string) => void;
+    addArticleCategory: (categoryId: string, subcategoryId: string, articleId: string, newCategory: Omit<ArticleCategory, 'id'>) => void;
+    deleteArticleQuestion: (categoryId: string, subcategoryId: string, articleId: string, articleCategoryId: string, questionId: string) => void;
+    deleteArticleCategory: (categoryId: string, subcategoryId: string, articleId: string, articleCategoryId: string) => void;
+    updateArticleCategory: (categoryId: string, subcategoryId: string, articleId: string, articleCategoryId: string, updatedCategoryName: string) => void;
+    addArticleQuestion: (categoryId: string, subcategoryId: string, articleId: string, articleCategoryId: string, newQuestion: Omit<ArticleQuestion, 'id'>) => void;
+    updateArticleQuestion: (categoryId: string, subcategoryId: string, articleId: string, articleCategoryId: string, articleQuestionId: string, updatedQuestion: Omit<ArticleQuestion, 'id'>) => void;
+    updateSubcategory: (categoryId: string, subcategoryId: string, name: string) => void;
+    deleteSubcategory: (categoryId: string, subcategoryId: string) => void;
+    addArticle: (categoryId: string, subcategoryId: string, title: string, content: ArticleCategory[]) => string;
+    updateArticle: (categoryId: string, subcategoryId: string, articleId: string, title: string, content: ArticleCategory[]) => void;
+    deleteArticle: (categoryId: string, subcategoryId: string, articleId: string) => void;
+}
+export interface HelpCenterProviderProps extends HelpCenterProps {
+    children: React.ReactNode;
+}
+export interface HelpCenterProps {
+    initialData: {
+        categories: Category[];
+        userRole: (typeof USER_ROLES)[keyof typeof USER_ROLES];
+    };
+    onDataChange?: (data: {
+        categories: Category[];
+    }) => void;
+}
+export type StyledType = IStyledComponent<'web', FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

package/dist/src/components/editor/context.d.ts

@@ -24,4 +24,5 @@ export declare const EditorContext: React.Context<{
     }) => React.ReactElement;
     filterComponent?: React.ComponentType<FilterComponentProps> | undefined;
     defaultFilter?: string | undefined;
+    hideShowAnswersButton?: boolean | undefined;
 }>;

package/dist/src/components/editor/editor.d.ts

@@ -14,6 +14,7 @@ export interface EditorProps {
         courseMediaId: number;
     }) => React.ReactElement;
     filterComponent?: React.ComponentType<FilterComponentProps>;
+    hideShowAnswersButton?: boolean;
 }
 export type EditorContent = TElement;
-export declare const Editor: ({ commentInputLoader, commentLoader, editable, handleVideoClick, imageSrcLoader, onChange, previousContent, defaultFilter, videoTitleLoader, filterComponent, }: EditorProps) => React.JSX.Element;
+export declare const Editor: ({ commentInputLoader, commentLoader, editable, handleVideoClick, imageSrcLoader, onChange, previousContent, defaultFilter, videoTitleLoader, filterComponent, hideShowAnswersButton, }: EditorProps) => React.JSX.Element;

package/dist/src/components/feedback/emojiPicker/constants.d.ts

@@ -0,0 +1,17 @@
+export declare const FREQUENTLY_USED_IDS: string[];
+export declare enum CategoryId {
+    FREQUENTLY = "frequently",
+    PEOPLE = "people",
+    NATURE = "nature",
+    FOODS = "foods",
+    ACTIVITY = "activity",
+    OBJECTS = "objects",
+    SYMBOLS = "symbols",
+    FLAGS = "flags"
+}
+export declare const CATEGORY_ICONS: Record<CategoryId, string>;
+export declare const RAINBOW_COLORS: string[];
+export declare const SPRITE_URL = "/emojis/64-2Q7F4PKG.png";
+export declare const SPRITE_COLUMNS = 62;
+export declare const TILE_SIZE = 25;
+export declare const SPRITE_SIZE = 100;

package/dist/src/components/feedback/emojiPicker/emoji-picker.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const CustomEmojiPicker: React.FC<{
+    onSelect: (emoji: Record<string, string>) => void;
+    onClickOutside?: () => void;
+    open?: boolean;
+    trigger?: React.ReactNode;
+    $pickersx?: string;
+}>;

package/dist/src/components/feedback/emojiPicker/emoji-reactions.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface EmojiReactionProps {
+    emoji: string;
+    isActive: boolean;
+    size?: number;
+    showSparkle?: boolean;
+    count?: number;
+    onReact: () => void;
+    showCount?: boolean;
+}
+export declare const EmojiReaction: React.FC<EmojiReactionProps>;
+export {};

package/dist/src/components/feedback/emojiPicker/grid-mapper.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const EmojiGridMapper: React.FC;

package/dist/src/components/feedback/emojiPicker/index.d.ts

@@ -0,0 +1,3 @@
+export { CustomEmojiPicker } from './emoji-picker';
+export { EmojiReaction } from './emoji-reactions';
+export type { NormalizedEmojiType, ReactionEmojiProps } from './types';

package/dist/src/components/feedback/emojiPicker/sparkle-reaction.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './reaction-sparkle.css';
+import { ReactionEmojiProps } from './types';
+export declare const ReactionEmoji: React.FC<ReactionEmojiProps>;

package/dist/src/components/feedback/emojiPicker/types.d.ts

@@ -0,0 +1,37 @@
+export type NormalizedEmojiType = {
+    id: string;
+    name: string;
+    keywords?: string[];
+    skins: {
+        unified: string;
+        native: string;
+    }[];
+    coordinates?: {
+        x: number;
+        y: number;
+    };
+};
+export interface ReactionEmojiProps {
+    emojiId: string;
+    size?: number;
+    sparkleOnMount?: boolean;
+    coordinates?: {
+        x: number;
+        y: number;
+    };
+}
+export type RawEmojiDataType = {
+    emojis: Record<string, NormalizedEmojiType>;
+    categories: {
+        id: string;
+        emojis: string[];
+    }[];
+};
+export type PreprocessedEmojiDataType = {
+    categories: {
+        [categoryId: string]: NormalizedEmojiType[];
+    };
+    emojiMap: {
+        [emojiId: string]: NormalizedEmojiType;
+    };
+};

package/dist/src/components/feedback/emojiPicker/utils.d.ts

@@ -0,0 +1,3 @@
+import { NormalizedEmojiType, PreprocessedEmojiDataType, RawEmojiDataType } from './types';
+export declare function preprocessEmojiData(rawData: RawEmojiDataType, FREQUENTLY_USED_IDS: string[]): PreprocessedEmojiDataType;
+export declare function buildNativeEmojiMap(emojis: Record<string, NormalizedEmojiType>): Record<string, NormalizedEmojiType>;

package/dist/src/components/feedback/index.d.ts

@@ -14,3 +14,6 @@ export { Tooltip } from './tooltip';
 export type { TooltipProps } from './tooltip';
 export { AnimatedToast } from './animated_toast';
 export type { AnimatedToastProps } from './animated_toast';
+export { CustomEmojiPicker } from './emojiPicker';
+export { EmojiReaction } from './emojiPicker';
+export type { NormalizedEmojiType } from './emojiPicker';

package/dist/src/components/iconography/EmojiPicker/Reaction.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './reaction-sparkle.css';
+interface RainbowReactionEmojiProps {
+    emojiId: string;
+    size?: number;
+    sparkleOnMount?: boolean;
+}
+export declare const RainbowReactionEmoji: React.FC<RainbowReactionEmojiProps>;
+export {};

package/dist/src/components/iconography/EmojiPicker/emoji-picker.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+type NormalizedEmoji = {
+    id: string;
+    name: string;
+    keywords?: string[];
+    skins: {
+        unified: string;
+        native: string;
+    }[];
+    coordinates?: {
+        x: number;
+        y: number;
+    };
+};
+export declare const CustomEmojiPicker: React.FC<{
+    onSelect: (emoji: NormalizedEmoji) => void;
+}>;
+export {};

package/dist/src/components/iconography/EmojiPicker/grid-mapper.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const EmojiGridMapper: React.FC;

package/dist/src/components/media/audio-player/progress-bar.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface AudioProgressBarProps {
+    /**
+     * @param duration the total duration of the audio media in seconds
+     * */
+    duration: number;
+    /**
+     * @param progress the amount of the audio media listened to
+     * */
+    progress: number;
+    onSeek: (percent: number) => void;
+}
+export declare const AudioProgressBar: ({ duration, progress, onSeek, }: AudioProgressBarProps) => React.JSX.Element;
+export {};

package/dist/src/components/media/video/video.d.ts

@@ -13,5 +13,6 @@ export interface VideoProps {
     thumbnailObjectFit?: 'cover' | 'contain' | 'fill' | 'unset';
     forwardedRef?: React.RefObject<ReactPlayer>;
     playing?: boolean;
+    title?: string;
 }
-export declare const Video: ({ controls, loop, muted, playsInline, src, subtitles, style, thumbnail, thumbnailObjectFit, forwardedRef, playing, }: VideoProps) => React.JSX.Element;
+export declare const Video: ({ controls, loop, muted, playsInline, src, subtitles, style, thumbnail, thumbnailObjectFit, forwardedRef, playing, title, }: VideoProps) => React.JSX.Element;

package/dist/src/components/surfaces/comment/comment.d.ts

@@ -19,6 +19,8 @@ export interface CommentProps {
     reactions?: Record<string, number>;
     replies?: React.ReactElement[];
     userImageUri: string;
+    latestReaction?: string;
+    setLatestUserReaction?: React.Dispatch<React.SetStateAction<string>>;
     customPlaceHolder?: string;
     userName: string;
     userReactions?: string[];
@@ -26,4 +28,4 @@ export interface CommentProps {
     sx?: string;
     moveButtonsToLeft?: boolean;
 }
-export declare const Comment: ({ avatarTooltipContent, avatarTooltipSx, content, createdDate, hasMoreReplies, id, onComment, onReact, onShowReplies, onEdit, isEditing, setIsEditing, dropdown, reactionModal, reactions, replies, userImageUri, userName, userReactions, visibilityIcon, customPlaceHolder, userProfileUri, sx, moveButtonsToLeft, }: CommentProps) => React.JSX.Element;
+export declare const Comment: ({ avatarTooltipContent, avatarTooltipSx, content, createdDate, hasMoreReplies, id, onComment, onReact, latestReaction, onShowReplies, onEdit, isEditing, setIsEditing, dropdown, reactionModal, reactions, replies, userImageUri, userName, userReactions, visibilityIcon, customPlaceHolder, userProfileUri, sx, moveButtonsToLeft, }: CommentProps) => React.JSX.Element;

package/dist/src/components/surfaces/discuss_post/discuss_post.d.ts

@@ -20,8 +20,10 @@ export interface DiscussPostProps {
     sx?: string;
     userHref: string;
     userImageUri: string;
+    latestReaction?: string;
+    setLatestUserReaction?: React.Dispatch<React.SetStateAction<string>>;
     userName: string;
     isAdmin?: boolean;
     userReactions?: string[];
 }
-export declare const DiscussPost: ({ avatarSx, content, createdDate, editActions, editing, firstNewPost, handleContentChange, id, onReact, popupActions, popupSx, reactions, reactionModal, replyContent, replyUserHref, replyUserImageUri, replyUserName, sx, userHref, userImageUri, userName, isAdmin, userReactions, }: DiscussPostProps) => React.JSX.Element;
+export declare const DiscussPost: ({ avatarSx, content, createdDate, editActions, editing, firstNewPost, handleContentChange, id, onReact, popupActions, latestReaction, popupSx, reactions, reactionModal, replyContent, replyUserHref, replyUserImageUri, replyUserName, sx, userHref, userImageUri, userName, isAdmin, userReactions, }: DiscussPostProps) => React.JSX.Element;

package/dist/src/components/surfaces/post/post.d.ts

@@ -24,6 +24,7 @@ export interface PostProps extends React.PropsWithChildren {
     video?: {
         url: string;
         thumbnail: string;
+        title?: string;
     };
     onJoin?: () => void;
     monthlyMembershipPrice?: number;