@soul-refiner/design-system 2.14.1 → 2.14.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/components/editor/plugins/blocks/qa.js +2 -2
  2. package/dist/components/media/video-player/playlist-item.js +2 -2
  3. package/dist/components/surfaces/comment/comment.js +8 -8
  4. package/dist/components/surfaces/discuss_post/discuss_post.js +7 -7
  5. package/dist/index.js +1 -1
  6. package/dist/src/components/feedback/index.d.ts +3 -0
  7. package/dist/src/components/surfaces/comment/comment.d.ts +3 -1
  8. package/dist/src/components/surfaces/discuss_post/discuss_post.d.ts +3 -1
  9. package/dist/src/styles/globals.css +1 -1
  10. package/dist/styles/output.css +121 -0
  11. package/package.json +5 -2
package/dist/components/editor/plugins/blocks/qa.js CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";var React=require("react"),plate=require("@udecode/plate"),styled=require("styled-components"),constants=require("../../constants.js"),context=require("../../context.js"),button=require("../../../actions/button/button.js"),box=require("../../../atoms/box/box.js"),hide=require("../../../atoms/hide/hide.js"),heading=require("../../../atoms/typography/heading.js"),chevron_down=require("../../../../icons/arrow/chevron_down.js"),chevron_up=require("../../../../icons/arrow/chevron_up.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const QuestionAnswerElement=React__default.default.forwardRef(({children:e,element:t,...a},n)=>{var r=t["questionAnswerId"];const{defaultFilter:l="",commentInputLoader:o,commentLoader:u,filterComponent:d,hideShowAnswersButton:c}=React__default.default.useContext(context.EditorContext),[i,s]=React__default.default.useState(!1),[f,_]=React__default.default.useState(l);var m=React__default.default.useCallback(e=>{const t=e.currentTarget.getAttribute("data-value");_(e=>e===t?l:t)},[]),p=React__default.default.useCallback(()=>_(l),[]);return React__default.default.createElement(plate.PlateElement,{asChild:!0,element:t,ref:n,...a},React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(Question,null,React__default.default.createElement(heading.H,{as:"p",$fontSize:18,$lineHeight:26,$mediumBold:!0},e)),React__default.default.createElement(box.Box,{$dir:"column",$gap:"medium",sx:"padding: 8px 24px;",contentEditable:!1},(!c||d)&&React__default.default.createElement(box.Box,{sx:"width: 100%",$justify:"space-between"},!c&&React__default.default.createElement(button.Button,{as:"div",icon:i?React__default.default.createElement(chevron_up.ChevronUp,{color:"grey-3"}):React__default.default.createElement(chevron_down.ChevronDown,{color:"grey-3"}),onClick:()=>s(e=>!e),size:"small",sx:`
1
+ "use strict";var React=require("react"),plate=require("@udecode/plate"),styled=require("styled-components"),constants=require("../../constants.js"),context=require("../../context.js"),button=require("../../../actions/button/button.js"),box=require("../../../atoms/box/box.js"),hide=require("../../../atoms/hide/hide.js"),heading=require("../../../atoms/typography/heading.js"),chevron_down=require("../../../../icons/arrow/chevron_down.js"),chevron_up=require("../../../../icons/arrow/chevron_up.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const QuestionAnswerElement=React__default.default.forwardRef(({children:e,element:t,...a},n)=>{var r=t["questionAnswerId"];const{defaultFilter:o="",commentInputLoader:l,commentLoader:u,filterComponent:d,hideShowAnswersButton:c}=React__default.default.useContext(context.EditorContext),[i,s]=React__default.default.useState(!1),[f,_]=React__default.default.useState(o);var m=React__default.default.useCallback(e=>{const t=e.currentTarget.getAttribute("data-value");_(e=>e===t?o:t)},[]),p=React__default.default.useCallback(()=>_(o),[]);return React__default.default.createElement(plate.PlateElement,{asChild:!0,element:t,ref:n,...a},React__default.default.createElement(React.Fragment,null,React__default.default.createElement(Question,null,React__default.default.createElement(heading.H,{as:"p",$fontSize:18,$lineHeight:26,$mediumBold:!0},e)),React__default.default.createElement(box.Box,{$dir:"column",$gap:"medium",sx:"padding: 8px 24px;",contentEditable:!1},(!c||d)&&React__default.default.createElement(box.Box,{sx:"width: 100%",$justify:"space-between"},!c&&React__default.default.createElement(button.Button,{as:"div",icon:i?React__default.default.createElement(chevron_up.ChevronUp,{color:"grey-3"}):React__default.default.createElement(chevron_down.ChevronDown,{color:"grey-3"}),onClick:()=>s(e=>!e),size:"small",sx:`
2
2
  width: fit-content;
3
3
  flex-direction: row-reverse;
4
4
  color: var(--color-grey-5);
@@ -6,7 +6,7 @@
6
6
  &:not(:hover) svg {
7
7
  fill: var(--color-grey-3);
8
8
  }
9
- `,type:"text",contentEditable:!1},i?"Hide answers":"Show answers"),d&&React__default.default.createElement(hide.HideButRender,{show:i},React__default.default.createElement(d,{filter:f,onFilterChange:m,questionAnswerId:r}))),React__default.default.createElement(hide.HideButRender,{show:i},React__default.default.createElement(u,{questionAnswerId:r,filterType:f,resetFilter:p,waitToLoad:!i})),React__default.default.createElement(o,{questionAnswerId:r,onComment:()=>s(!0)}))))}),Question=styled.styled.div`
9
+ `,type:"text",contentEditable:!1},i?"Hide answers":"Show answers"),d&&React__default.default.createElement(hide.HideButRender,{show:i},React__default.default.createElement(d,{filter:f,onFilterChange:m,questionAnswerId:r}))),React__default.default.createElement(hide.HideButRender,{show:i},React__default.default.createElement(u,{questionAnswerId:r,filterType:f,resetFilter:p,waitToLoad:!i})),React__default.default.createElement(l,{questionAnswerId:r,onComment:()=>s(!0)}))))}),Question=styled.styled.div`
10
10
  margin-bottom: 8px;
11
11
  padding: 16px;
12
12
  border-left: 8px solid var(--color-hue-blue-1);
package/dist/components/media/video-player/playlist-item.js CHANGED
@@ -1,10 +1,10 @@
1
- "use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),seconds_to_duration=require("../../atoms/seconds_to_duration/seconds_to_duration.js"),paragraph=require("../../atoms/typography/paragraph.js"),lock=require("../../../icons/security/lock.js"),play_solid=require("../../../icons/audio_video/play_solid.js"),tooltip=(require("../../feedback/badge/badge.js"),require("../../feedback/banner/banner.js"),require("../../feedback/loader/loader.js"),require("../../feedback/notification/notification.js"),require("../../feedback/progress/progress.js"),require("../../feedback/toast/toast.js"),require("../../feedback/tooltip/tooltip.js"));function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../feedback/animated_toast/animated_toast.js");var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image);const PlaylistItem=React__default.default.forwardRef(({comingSoon:e,duration:t,onClick:a,playable:l,progress:r=0,shortDescription:o,thumbnail:i,nowplaying:n,playlistItemId:s,title:d},c)=>React__default.default.createElement(Wrapper,{ref:c,onClick:l&&!e?a:void 0,$playable:l,$playlistItemId:s,$nowplaying:n},l?React__default.default.createElement(play_solid.PlaySolid,{color:"white",size:16,sx:"position: absolute; left: 10px; bottom: 10px;"}):React__default.default.createElement(lock.Lock,{color:"white",size:16,sx:"position: absolute; left: 10px; bottom: 10px;"}),React__default.default.createElement(Image__default.default,{alt:"thumbnail for "+d,height:75,quality:100,src:i,width:133}),r&&t&&!e?React__default.default.createElement(ProgressBar,{progressPercent:r/t}):null,React__default.default.createElement(box.Box,{$dir:"column",$gap:4,sx:`
1
+ "use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),seconds_to_duration=require("../../atoms/seconds_to_duration/seconds_to_duration.js"),paragraph=require("../../atoms/typography/paragraph.js"),lock=require("../../../icons/security/lock.js"),play_solid=require("../../../icons/audio_video/play_solid.js"),tooltip=(require("../../feedback/badge/badge.js"),require("../../feedback/banner/banner.js"),require("../../feedback/loader/loader.js"),require("../../feedback/notification/notification.js"),require("../../feedback/progress/progress.js"),require("../../feedback/toast/toast.js"),require("../../feedback/tooltip/tooltip.js"));function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../feedback/animated_toast/animated_toast.js"),require("../../feedback/emojiPicker/emoji-picker.js"),require("../../feedback/emojiPicker/emoji-reactions.js");var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image);const PlaylistItem=React__default.default.forwardRef(({comingSoon:e,duration:t,onClick:a,playable:r,progress:o=0,shortDescription:l,thumbnail:i,nowplaying:n,playlistItemId:s,title:c},d)=>React__default.default.createElement(Wrapper,{ref:d,onClick:r&&!e?a:void 0,$playable:r,$playlistItemId:s,$nowplaying:n},r?React__default.default.createElement(play_solid.PlaySolid,{color:"white",size:16,sx:"position: absolute; left: 10px; bottom: 10px;"}):React__default.default.createElement(lock.Lock,{color:"white",size:16,sx:"position: absolute; left: 10px; bottom: 10px;"}),React__default.default.createElement(Image__default.default,{alt:"thumbnail for "+c,height:75,quality:100,src:i,width:133}),o&&t&&!e?React__default.default.createElement(ProgressBar,{progressPercent:o/t}):null,React__default.default.createElement(box.Box,{$dir:"column",$gap:4,sx:`
2
2
  margin-left: 16px;
3
3
  margin-right: auto;
4
4
  flex: 0 1 auto;
5
5
  flex-basis: content;
6
6
  max-width: 280px;
7
- `},React__default.default.createElement(paragraph.P,{$color:"grey-10",$semiBold:!0},d),React__default.default.createElement(box.Box,{$gap:4,$align:"flex-end"},o&&React__default.default.createElement(paragraph.P,{$color:"grey-9",$fontSize:14,$lineHeight:20,$textClampLines:2,sx:"max-width: min(500px, 100%);"},o),o&&70<o?.length&&React__default.default.createElement(box.Box,{$justify:"flex-start",sx:"div{ text-align: left !important; z-index: 99; } .opaque { opacity: 1 !important;} margin-right: 16px; "},React__default.default.createElement(tooltip.Tooltip,{content:o,place:"left"},React__default.default.createElement(paragraph.P,{$fontSize:14,$color:"white"},"More"))))),t&&!e&&React__default.default.createElement(paragraph.P,{$color:"grey-8",$fontSize:14,$lineHeight:20,sx:"flex-shrink: 0;"},React__default.default.createElement(seconds_to_duration.SecToDuration,{seconds:t})),e&&React__default.default.createElement(paragraph.P,{$color:"grey-8",$fontSize:14,$lineHeight:20,sx:"flex-shrink: 0;"},"Coming soon"))),Wrapper=styled.styled.div`
7
+ `},React__default.default.createElement(paragraph.P,{$color:"grey-10",$semiBold:!0},c),React__default.default.createElement(box.Box,{$gap:4,$align:"flex-end"},l&&React__default.default.createElement(paragraph.P,{$color:"grey-9",$fontSize:14,$lineHeight:20,$textClampLines:2,sx:"max-width: min(500px, 100%);"},l),l&&70<l?.length&&React__default.default.createElement(box.Box,{$justify:"flex-start",sx:"div{ text-align: left !important; z-index: 99; } .opaque { opacity: 1 !important;} margin-right: 16px; "},React__default.default.createElement(tooltip.Tooltip,{content:l,place:"left"},React__default.default.createElement(paragraph.P,{$fontSize:14,$color:"white"},"More"))))),t&&!e&&React__default.default.createElement(paragraph.P,{$color:"grey-8",$fontSize:14,$lineHeight:20,sx:"flex-shrink: 0;"},React__default.default.createElement(seconds_to_duration.SecToDuration,{seconds:t})),e&&React__default.default.createElement(paragraph.P,{$color:"grey-8",$fontSize:14,$lineHeight:20,sx:"flex-shrink: 0;"},"Coming soon"))),Wrapper=styled.styled.div`
8
8
  width: 100%;
9
9
  flex: 0 1 auto;
10
10
  padding: 6px;
package/dist/components/surfaces/comment/comment.js CHANGED
@@ -1,13 +1,13 @@
1
1
  "use client";
2
- "use strict";var React=require("react"),styled=require("styled-components"),Link=require("next/link"),Picker=require("@emoji-mart/react"),emojis=require("../../../emoji/emojis.json.js"),avatar=require("../../iconography/avatar/avatar.js"),box=require("../../atoms/box/box.js"),highlighter=require("../../atoms/highlighter/highlighter.js"),paragraph=require("../../atoms/typography/paragraph.js"),button=require("../../actions/button/button.js"),portal=require("../portal/portal.js"),regex=require("../../../common/regex.js"),styles=require("../../../common/styles.js"),emoticon_add=require("../../../icons/basic/emoticon_add.js"),comment=require("../../../icons/message/comment.js"),helpers=require("./helpers.js"),responsive_text_area=require("../../input/responsive-text_area/responsive_text_area.js"),send_text=require("../../../icons/email/send_text.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),styled__default=_interopDefaultCompat(styled),Link__default=_interopDefaultCompat(Link),Picker__default=_interopDefaultCompat(Picker);const MAX_REACTIONS_SHOWN=5,Comment=({avatarTooltipContent:e,avatarTooltipSx:t,content:a,createdDate:r,hasMoreReplies:l,id:o,onComment:n,onReact:i,onShowReplies:u,onEdit:d,isEditing:c,setIsEditing:s,dropdown:p,reactionModal:f,reactions:_,replies:m,userImageUri:x,userName:g,userReactions:R,visibilityIcon:h,customPlaceHolder:y,userProfileUri:b,sx:v,moveButtonsToLeft:$=!1})=>{const[E,k]=React__default.default.useState(!1),[C,T]=React__default.default.useState({x:0,y:0}),[I,A]=React__default.default.useState("up"),[D,O]=React__default.default.useState(!1),[w,H]=React__default.default.useState(!1),[j,S]=React__default.default.useState(""),[q,P]=React__default.default.useState(a),W=React__default.default.useRef(null),B=React__default.default.Children.toArray(m);React__default.default.useEffect(()=>{c&&W.current&&W.current.focus()},[c]);var m=e=>{e.stopPropagation(),k(e=>!e),T({y:e.clientY,x:e.clientX}),A(400<e.clientY?"up":"down")},L=()=>{u&&u(),H(!0)},r=helpers.abbrTimeBeforeDate(r),_=_&&Object.entries(_).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:()=>i(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]))),z=!!B?.length&&0<B.length,N=z&&B.map((e,t)=>{var a;return React__default.default.isValidElement(e)?(a=e.props?.id,t=t!==B.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,{$sx:v,id:"comment-"+o,$moveButtonsToLeft:$},React__default.default.createElement(avatar.Avatar,{as:Link__default.default,href:b,image:x,size:32,tooltipContent:e,tooltipSx:t}),React__default.default.createElement(box.Box,{$flex:1,$dir:"column"},React__default.default.createElement(ContentWrapper,{$hasReplies:z||!!l},c?React__default.default.createElement(responsive_text_area.ResponsiveTextArea,{inputStyles:"min-height: 104px;",wrapperStyles:"background:var(--color-grey-9); ",onChange:e=>{P(e.target.value)},value:q,ref:W}):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,{as:b?Link__default.default:"span",href:b,$bold:!0,$color:"grey-2",sx:"text-decoration:none !important; color:var(--color-grey-2) !important;",$fontSize:14,$lineHeight:20},g),p),React__default.default.createElement(paragraph.P,{sx:"white-space: pre-line;letter-spacing: -0.176px; word-break: break-word;"},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:a}))),React__default.default.createElement(box.Box,{$align:"flex-start",$dir:"row",$display:"flex",$gap:16,sx:"margin: 8px 0px; position: relative;"},c?React__default.default.createElement(box.Box,{$display:"flex",$align:"center",$justify:"space-between",$gap:6,sx:"margin-top: 8px; width: 100%;"},React__default.default.createElement(emoticon_add.Emoticon,{color:"primary-blue-2",onClick:m,size:24,sx:`cursor: pointer; flex-shrink: 0;
3
- ${!$&&"margin-right: auto;"}
4
- `}),React__default.default.createElement(button.Button,{onClick:()=>{s&&s(!c),P(a)},sx:`background-color: transparent; border: none; box-shadow: none; color: var(--color-primary-blue-2);
5
- ${$?"margin-left: 20px;":"margin-left: auto;"}
2
+ "use strict";var React=require("react"),styled=require("styled-components"),Link=require("next/link"),avatar=require("../../iconography/avatar/avatar.js"),box=require("../../atoms/box/box.js"),highlighter=require("../../atoms/highlighter/highlighter.js"),paragraph=require("../../atoms/typography/paragraph.js"),button=require("../../actions/button/button.js"),portal=require("../portal/portal.js"),regex=require("../../../common/regex.js"),styles=require("../../../common/styles.js"),emoticon_add=require("../../../icons/basic/emoticon_add.js"),comment=require("../../../icons/message/comment.js"),helpers=require("./helpers.js"),responsive_text_area=require("../../input/responsive-text_area/responsive_text_area.js"),send_text=require("../../../icons/email/send_text.js"),emojiPicker=(require("../../actions/dropdown/dropdown.js"),require("../../actions/rate/rate.js"),require("../../actions/switch/switch.js"),require("../../actions/toggle/toggle.js"),require("../../actions/upload/upload.js"),require("../../atoms/typography/display.js"),require("../../atoms/typography/heading.js"),require("../../atoms/typography/typography.js"),require("../../card/action/action.js"),require("../../card/audio/audio.js"),require("../../card/feature/feature.js"),require("../../card/person/person.js"),require("../../card/price/price.js"),require("../../card/regular/regular.js"),require("../../card/video/video.js"),require("../../card/written/written.js"),require("../../card/meeting/meeting.js"),require("../../editor/editor.js"),require("../../editor/simple_editor/simple_editor.js"),require("../../feedback/badge/badge.js"),require("../../feedback/banner/banner.js"),require("../../feedback/loader/loader.js"),require("../../feedback/notification/notification.js"),require("../../feedback/progress/progress.js"),require("../../feedback/toast/toast.js"),require("react-tooltip"),require("../../feedback/animated_toast/animated_toast.js"),require("../../feedback/emojiPicker/emoji-picker.js")),emojiReactions=require("../../feedback/emojiPicker/emoji-reactions.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../iconography/icon/icon.js"),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"),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("../../media/audio-player/audio-player.js"),require("../../media/audio-playlist/audio-playlist.js"),require("../../media/audio-preview/audio-preview.js"),require("react-player"),require("next/image"),require("../../media/video-player/video.js"),require("../../media/audio-playlist/playing_indicator.js"),require("../../navigation/breadcrumb/breadcrumb.js"),require("../../navigation/inner/inner.js"),require("../../navigation/tabs/tabs.js"),require("../accordion/accordion.js"),require("../carousel/card/card.js"),require("../discuss_post/discuss_post.js"),require("../drawer/drawer.js"),require("../message/message.js"),require("../modal/modal.js"),require("../post/post.js"),require("../calendar_date/calendar_date.js"),require("../../table/table/table.js"),require("../../custom/users_selection/users_selection.js"),require("../../custom/courses_selection/courses_selection.js"),require("../../../icons/basic/subtask.js"),require("../../../common/colors.js");var React__default=_interopDefaultCompat(React),styled__default=_interopDefaultCompat(styled),Link__default=_interopDefaultCompat(Link);const MAX_REACTIONS_SHOWN=5,Comment=({avatarTooltipContent:e,avatarTooltipSx:t,content:a,createdDate:r,hasMoreReplies:l,id:i,onComment:o,onReact:n,latestReaction:u,onShowReplies:s,onEdit:d,isEditing:c,setIsEditing:p,dropdown:f,reactionModal:_,reactions:m,replies:x,userImageUri:g,userName:b,userReactions:y,visibilityIcon:h,customPlaceHolder:R,userProfileUri:j,sx:T,moveButtonsToLeft:q=!1})=>{const[v,k]=React__default.default.useState(!1),[E,A]=React__default.default.useState({x:0,y:0}),[I,D]=React__default.default.useState("up"),[O,H]=React__default.default.useState(!1),[$,F]=React__default.default.useState(!1),[w,C]=React__default.default.useState(""),[S,W]=React__default.default.useState(a),P=React__default.default.useRef(null),B=React__default.default.Children.toArray(x);React__default.default.useEffect(()=>{c&&P.current&&P.current.focus()},[c]);var x=e=>{e.stopPropagation(),k(e=>!e),A({y:e.clientY,x:e.clientX}),D(400<e.clientY?"up":"down")},L=()=>{s&&s(),F(!0)},r=helpers.abbrTimeBeforeDate(r),m=m&&Object.entries(m).slice(0,MAX_REACTIONS_SHOWN).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:i+e,emoji:e,isActive:y?.includes(e),onReact:()=>n(e),showSparkle:e===u,count:t,showCount:!0}))),z=!!B?.length&&0<B.length,N=z&&B.map((e,t)=>{var a;return React__default.default.isValidElement(e)?(a=e.props?.id,t=t!==B.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,{$sx:T,id:"comment-"+i,$moveButtonsToLeft:q},React__default.default.createElement(avatar.Avatar,{as:Link__default.default,href:j,image:g,size:32,tooltipContent:e,tooltipSx:t}),React__default.default.createElement(box.Box,{$flex:1,$dir:"column"},React__default.default.createElement(ContentWrapper,{$hasReplies:z||!!l},c?React__default.default.createElement(responsive_text_area.ResponsiveTextArea,{inputStyles:"min-height: 104px;",wrapperStyles:"background:var(--color-grey-9); ",onChange:e=>{W(e.target.value)},value:S,ref:P}):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,{as:j?Link__default.default:"span",href:j,$bold:!0,$color:"grey-2",sx:"text-decoration:none !important; color:var(--color-grey-2) !important;",$fontSize:14,$lineHeight:20},b),f),React__default.default.createElement(paragraph.P,{sx:"white-space: pre-line;letter-spacing: -0.176px; word-break: break-word;"},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:a}))),React__default.default.createElement(box.Box,{$align:"flex-start",$dir:"row",$display:"flex",$gap:16,sx:"margin: 8px 0px; position: relative;"},c?React__default.default.createElement(box.Box,{$display:"flex",$align:"center",$justify:"space-between",$gap:6,sx:"margin-top: 8px; width: 100%;"},React__default.default.createElement(emoticon_add.Emoticon,{color:"primary-blue-2",onClick:x,size:24,sx:`cursor: pointer; flex-shrink: 0;
3
+ ${!q&&"margin-right: auto;"}
4
+ `}),React__default.default.createElement(button.Button,{onClick:()=>{p&&p(!c),W(a)},sx:`background-color: transparent; border: none; box-shadow: none; color: var(--color-primary-blue-2);
5
+ ${q?"margin-left: 20px;":"margin-left: auto;"}
6
6
  &:hover, &:focus {
7
7
  border: none;
8
8
  outline: none;
9
9
  }
10
- `,size:"small",type:"outlined"},"Cancel"),React__default.default.createElement(button.Button,{onClick:()=>{d&&d(q,o),s&&s(!1)},size:"small",type:"primary"},"Save")):React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(emoticon_add.Emoticon,{color:"primary-blue-2",onClick:m,size:24,sx:" cursor: pointer; flex-shrink: 0;"}),React__default.default.createElement(comment.Comment,{color:"primary-blue-2",onClick:()=>O(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;"},_,f)),E&&React__default.default.createElement(portal.Portal,null,React__default.default.createElement(PickerWrapper,{$pickerOrientation:I,$top:C.y,$left:C.x},React__default.default.createElement(Picker__default.default,{data:emojis.default,onEmojiSelect:({native:e})=>{i(e),k(!1)},onClickOutside:()=>k(!1),maxFrequentRows:1,navPosition:"none",previewPosition:"none",perLine:9,theme:"auto"}))))),z&&w&&React__default.default.createElement(RepliesWrapper,null,N),!w&&!l&&z&&React__default.default.createElement(RepliesWrapper,null,React__default.default.createElement(ReplyWrapper,{$hasLine:!1},React__default.default.createElement(button.Button,{onClick:L,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:L,size:"small",sx:"color: var(--color-grey-3);",type:"text"},"show more replies"),React__default.default.createElement(ReplyIndicator,null))),D&&React__default.default.createElement(CommentWrapper,null,React__default.default.createElement(responsive_text_area.ResponsiveTextArea,{bg:"var(--color-grey-10)",value:j,onChange:e=>{S(e.target.value)},placeholder:y||"Write a reply",maxCharacters:1e3,wrapperStyles:"margin: 16px 0; width: 100%;",actionComponent:React__default.default.createElement(box.Box,{sx:"margin: auto 0 5px 0px;",$align:"center",$justify:"center",$gap:8},h,React__default.default.createElement(button.Button,{disabled:!j.length,icon:React__default.default.createElement(send_text.SendText,null),onClick:e=>{e.stopPropagation(),e.preventDefault(),n(j),S("")},sx:`
10
+ `,size:"small",type:"outlined"},"Cancel"),React__default.default.createElement(button.Button,{onClick:()=>{d&&d(S,i),p&&p(!1)},size:"small",type:"primary"},"Save")):React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(emoticon_add.Emoticon,{color:"primary-blue-2",onClick:x,size:24,sx:" cursor: pointer; flex-shrink: 0;"}),React__default.default.createElement(comment.Comment,{color:"primary-blue-2",onClick:()=>H(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;"},m,_)),v&&React__default.default.createElement(portal.Portal,null,React__default.default.createElement(PickerWrapper,{$pickerOrientation:I,$top:E.y,$left:E.x},React__default.default.createElement(emojiPicker.CustomEmojiPicker,{open:v,trigger:React__default.default.createElement(React__default.default.Fragment,null),onSelect:({native:e})=>{n(e),k(!1)},onClickOutside:()=>k(!1)}))))),z&&$&&React__default.default.createElement(RepliesWrapper,null,N),!$&&!l&&z&&React__default.default.createElement(RepliesWrapper,null,React__default.default.createElement(ReplyWrapper,{$hasLine:!1},React__default.default.createElement(button.Button,{onClick:L,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:L,size:"small",sx:"color: var(--color-grey-3);",type:"text"},"show more replies"),React__default.default.createElement(ReplyIndicator,null))),O&&React__default.default.createElement(CommentWrapper,null,React__default.default.createElement(responsive_text_area.ResponsiveTextArea,{bg:"var(--color-grey-10)",value:w,onChange:e=>{C(e.target.value)},placeholder:R||"Write a reply",maxCharacters:1e3,wrapperStyles:"margin: 16px 0; width: 100%;",actionComponent:React__default.default.createElement(box.Box,{sx:"margin: auto 0 5px 0px;",$align:"center",$justify:"center",$gap:8},h,React__default.default.createElement(button.Button,{disabled:!w.length,icon:React__default.default.createElement(send_text.SendText,null),onClick:e=>{e.stopPropagation(),e.preventDefault(),o(w),C("")},sx:`
11
11
  justify-content: center;
12
12
  background-color: var(--color-primary-blue-2);
13
13
  align-items: center;
@@ -65,7 +65,7 @@
65
65
  ${({$pickerOrientation:e})=>"up"===e?"transform: translateY(-345px);":""}
66
66
  top: ${({$top:e})=>e}px;
67
67
  left: ${({$left:e})=>e}px;
68
- `,Reaction=styled__default.default.div`
68
+ `,RepliesWrapper=(styled__default.default.div`
69
69
  ${styles.Styles.flex}
70
70
  display: flex;
71
71
  padding: 2px 6px;
@@ -75,9 +75,9 @@
75
75
  background-color: var(--color-primary-blue-4);
76
76
  border: 1px solid var(--color-primary-blue-3);
77
77
  `:""}
78
- `,RepliesWrapper=styled__default.default.div`
78
+ `,styled__default.default.div`
79
79
  padding-top: 12px;
80
- `,ReplyWrapper=styled__default.default.div`
80
+ `),ReplyWrapper=styled__default.default.div`
81
81
  position: relative;
82
82
  ${({$hasLine:e})=>e?`
83
83
  &::before {
package/dist/components/surfaces/discuss_post/discuss_post.js CHANGED
@@ -1,19 +1,19 @@
1
1
  "use client";
2
- "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:`
2
+ "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:`
3
3
  flex: 1;
4
4
  background-color: var(--color-grey-10);
5
5
  border-radius: 8px;
6
6
  @media (max-width: 768px) {
7
7
  flex-direction: column;
8
- min-height: calc(${v?.current?.style?.height||"360px"} + 24px);
8
+ min-height: calc(${E?.current?.style?.height||"360px"} + 24px);
9
9
  }
10
- `},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;
10
+ `},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;
11
11
  @media screen and (max-width: 400px) {
12
12
  flex-direction: column;
13
13
  align-items: flex-start;
14
14
  height: 40px;
15
15
  gap: 0px;
16
- }`},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`
16
+ }`},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`
17
17
  position: relative;
18
18
  padding: 12px 16px;
19
19
  display: flex;
@@ -90,7 +90,7 @@
90
90
  border-left: 2px solid var(--color-grey-9);
91
91
  border-top: 2px solid var(--color-grey-9);
92
92
  border-radius: 6px 0px 0px 0px;
93
- `,Reaction=styled__default.default.div`
93
+ `,PopupActionsWrapper=(styled__default.default.div`
94
94
  ${styles.Styles.flex}
95
95
  display: flex;
96
96
  padding: 2px 6px;
@@ -100,7 +100,7 @@
100
100
  background-color: var(--color-primary-blue-4);
101
101
  border: 1px solid var(--color-primary-blue-3);
102
102
  `:""}
103
- `,PopupActionsWrapper=styled__default.default.div`
103
+ `,styled__default.default.div`
104
104
  position: absolute;
105
105
  top: -16px;
106
106
  right: 16px;
@@ -111,7 +111,7 @@
111
111
  border: 1px solid var(--color-grey-9);
112
112
  box-shadow: var(--elevation-1);
113
113
  ${({$sx:e})=>e||""}
114
- `,EditActionsWrapper=styled__default.default.div`
114
+ `),EditActionsWrapper=styled__default.default.div`
115
115
  display: flex;
116
116
  align-items: center;
117
117
  gap: 4px;
package/dist/index.js CHANGED
@@ -1 +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;
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"),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/feedback/index.d.ts CHANGED
@@ -14,3 +14,6 @@ export { Tooltip } from './tooltip';
14
14
  export type { TooltipProps } from './tooltip';
15
15
  export { AnimatedToast } from './animated_toast';
16
16
  export type { AnimatedToastProps } from './animated_toast';
17
+ export { CustomEmojiPicker } from './emojiPicker';
18
+ export { EmojiReaction } from './emojiPicker';
19
+ export type { NormalizedEmojiType } from './emojiPicker';
package/dist/src/components/surfaces/comment/comment.d.ts CHANGED
@@ -19,6 +19,8 @@ export interface CommentProps {
19
19
  reactions?: Record<string, number>;
20
20
  replies?: React.ReactElement[];
21
21
  userImageUri: string;
22
+ latestReaction?: string;
23
+ setLatestUserReaction?: React.Dispatch<React.SetStateAction<string>>;
22
24
  customPlaceHolder?: string;
23
25
  userName: string;
24
26
  userReactions?: string[];
@@ -26,4 +28,4 @@ export interface CommentProps {
26
28
  sx?: string;
27
29
  moveButtonsToLeft?: boolean;
28
30
  }
29
- 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;
31
+ 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 CHANGED
@@ -20,8 +20,10 @@ export interface DiscussPostProps {
20
20
  sx?: string;
21
21
  userHref: string;
22
22
  userImageUri: string;
23
+ latestReaction?: string;
24
+ setLatestUserReaction?: React.Dispatch<React.SetStateAction<string>>;
23
25
  userName: string;
24
26
  isAdmin?: boolean;
25
27
  userReactions?: string[];
26
28
  }
27
- 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;
29
+ 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/styles/globals.css CHANGED
@@ -1 +1 @@
1
- @tailwind base;@tailwind components;@tailwind utilities;@layer base{:root{--background:0 0% 100%;--foreground:222.2 84% 4.9%;--card:0 0% 100%;--card-foreground:222.2 84% 4.9%;--popover:0 0% 100%;--popover-foreground:222.2 84% 4.9%;--primary:222.2 47.4% 11.2%;--primary-foreground:210 40% 98%;--secondary:210 40% 96.1%;--secondary-foreground:222.2 47.4% 11.2%;--muted:210 40% 96.1%;--muted-foreground:215.4 16.3% 46.9%;--accent:210 40% 96.1%;--accent-foreground:222.2 47.4% 11.2%;--destructive:0 84.2% 60.2%;--destructive-foreground:210 40% 98%;--border:214.3 31.8% 91.4%;--input:214.3 31.8% 91.4%;--ring:222.2 84% 4.9%;--radius:0.5rem;--font-inter:Inter;--color-page-bg:#f8fafc;--color-white:#fff;--color-primary-blue-0:#003f73;--color-primary-blue-1:#005aa6;--color-primary-blue-2:#0076d9;--color-primary-blue-3:#d4e7fa;--color-primary-blue-4:#e9f2fb;--color-grey-0:#080809;--color-grey-1:#17191b;--color-grey-2:#313438;--color-grey-3:#4a4f55;--color-grey-4:#636971;--color-grey-5:#7c838d;--color-grey-6:#989da4;--color-grey-7:#b3b7bc;--color-grey-8:#d0d2d6;--color-grey-9:#eaebed;--color-grey-10:#f8f9f9;--color-red-0:#491410;--color-red-1:#5b1914;--color-red-2:#83241d;--color-red-3:#aa2f25;--color-red-4:#cf3a2e;--color-red-5:#f34638;--color-red-6:#f66e63;--color-red-7:#f8948c;--color-red-8:#fbbdb8;--color-red-9:#fee3e1;--color-red-10:#fff8f7;--color-green-0:#113a1c;--color-green-1:#154923;--color-green-2:#1f6933;--color-green-3:#288641;--color-green-4:#31a450;--color-green-5:#3cc260;--color-green-6:#66cf82;--color-green-7:#8edca3;--color-green-8:#b8e9c6;--color-green-9:#e0f6e6;--color-green-10:#f7fdf9;--color-blue-0:#0a2c48;--color-blue-1:#0c375b;--color-blue-2:#114f81;--color-blue-3:#1665a6;--color-blue-4:#1b7bcb;--color-blue-5:#2393ef;--color-blue-6:#51a9f2;--color-blue-7:#80c1f6;--color-blue-8:#b1d9f9;--color-blue-9:#ddeffc;--color-blue-10:#f6fbfe;--color-turquoise-0:#033630;--color-turquoise-1:#0b4740;--color-turquoise-2:#1a685f;--color-turquoise-3:#29877e;--color-turquoise-4:#38a89c;--color-turquoise-5:#49c7ba;--color-turquoise-6:#6fd3c8;--color-turquoise-7:#95ded7;--color-turquoise-8:#baeae5;--color-turquoise-9:#e1f6f3;--color-turquoise-10:#f5fcfb;--color-purple-0:#31153a;--color-purple-1:#3d1a49;--color-purple-2:#572567;--color-purple-3:#703086;--color-purple-4:#8a3ca5;--color-purple-5:#a349c2;--color-purple-6:#b76fcf;--color-purple-7:#ca96dc;--color-purple-8:#debeea;--color-purple-9:#f0e3f6;--color-purple-10:#fbf8fd;--color-yellow-0:#4b3b02;--color-yellow-1:#5e4a02;--color-yellow-2:#876b04;--color-yellow-3:#ad8905;--color-yellow-4:#d5a806;--color-yellow-5:#fac70a;--color-yellow-6:#fbd33d;--color-yellow-7:#fcde71;--color-yellow-8:#fdeba9;--color-yellow-9:#fef6d8;--color-yellow-10:#fffdf5;--color-orange-0:#4a2b03;--color-orange-1:#5d3604;--color-orange-2:#854d06;--color-orange-3:#ac6307;--color-orange-4:#d27909;--color-orange-5:#f7900f;--color-orange-6:#f9a742;--color-orange-7:#fbbf74;--color-orange-8:#fcd6a8;--color-orange-9:#feedd9;--color-orange-10:#fffaf5;--color-hue-pink-1:#a5199d;--color-hue-pink-2:#fed6ff;--color-hue-pink-3:#fbe7f9;--color-hue-purple-1:#584fd6;--color-hue-purple-2:#c4c1f0;--color-hue-purple-3:#f3effb;--color-hue-ocean-1:#226f91;--color-hue-ocean-2:#c1e2f0;--color-hue-ocean-3:#eff7fb;--color-hue-mint-1:#078f81;--color-hue-mint-2:#a9e4de;--color-hue-mint-3:#d8f3f0;--color-hue-blue-1:#0b5cd7;--color-hue-blue-2:#b6cff3;--color-hue-blue-3:#ecf2fc;--color-hue-orange-1:#e96d00;--color-hue-orange-2:#ffd5bd;--color-hue-orange-3:#fff2e5;--color-special-yellow-1:#efb520;--color-special-yellow-2:#fff3c7;--color-special-orange-1:#ff5722;--color-special-orange-2:#ffead2;--color-special-red-1:#f72f4d;--color-special-red-2:#feded5;--color-special-pink-1:#fb19b4;--color-special-pink-2:#fed3e1;--color-special-purple-1:#7a5bf5;--color-special-purple-2:#ece1fe;--color-special-blue-1:#6c75f7;--color-special-blue-2:#dfeaff;--color-special-turquoise-1:#24a3d0;--color-special-turquoise-2:#cff9f2;--color-special-green-1:#1ea385;--color-special-green-2:#d4fae4;--color-special-grape-1:#2fa52d;--color-special-grape-2:#e3fad6;--color-gradient-blue-1:#1d62f0;--color-gradient-blue-2:#1ad5fd;--color-gradient-teal-1:#5ac8fb;--color-gradient-teal-2:#52edc7;--color-gradient-green-1:#0cd318;--color-gradient-green-2:#87fc70;--color-gradient-spring-green-1:#09b3a1;--color-gradient-spring-green-2:#3ac15e;--color-gradient-yellow-1:#ffcd02;--color-gradient-yellow-2:#ffdb4c;--color-gradient-orange-1:#ff5e3a;--color-gradient-orange-2:#ff9500;--color-gradient-red-1:#ff2a68;--color-gradient-red-2:#ff5e3a;--color-gradient-pink-1:#c643fc;--color-gradient-pink-2:#ef4db6;--color-gradient-purple-1:#ae33e8;--color-gradient-purple-2:#5e44ff;--gradient-background-1:radial-gradient(50.49% 55.14% at 5.76% 3.88%,#d9062c 11.51%,rgba(186,24,175,0) 100%,rgba(255,0,0,0) 0),radial-gradient(50.75% 55.24% at 93.3% -5.24%,#ff7a00 6.42%,rgba(186,24,175,0) 100%,rgba(255,122,0,0) 0),linear-gradient(180deg,#b80cbf,#2d21b6);--gradient-background-2:radial-gradient(47.55% 121.02% at 24.15% 120.55%,#ff7a00 0%,rgba(186,24,175,0) 100%),radial-gradient(107.04% 116.84% at 120.44% 68.19%,#ba004b 27.09%,#ba06c8 47.64%,#0026b7 86.58%);--gradient-light:radial-gradient(39.84% 64.62% at 3.52% 96.87%,#e7f1fd 0%,rgba(232,241,254,0) 100%),radial-gradient(35.14% 65.68% at 98.89% 0%,#ece1ef 0%,rgba(236,226,240,0) 100%),linear-gradient(109.97deg,#eef9f9 4.72%,#ecf1fd 100.82%);--gradient-dark-grey:linear-gradient(360deg,#2b2b2b,#4a4a4a);--gradient-grey:linear-gradient(360deg,#898c90,#dbddde);--gradient-light-grey:linear-gradient(360deg,#d7d7d7,#f7f7f7);--extra-small:4px;--small:8px;--medium:16px;--medium-large:20px;--large:24px;--extra-large:40px;--full:80px;--elevation-1:0px 3px 3px rgba(0,0,0,.04);--elevation-2:0px 4px 8px rgba(0,0,0,.1);--elevation-3:0px 6px 10px rgba(0,0,0,.15);--elevation-4:0px 4px 10px rgba(0,0,0,.06);--elevation-5:inset 0px 2px 2px rgba(0,0,0,.12);--elevation-6:inset 0px 4px 4px rgba(0,0,0,.03);--elevation-7:0px 0px 15px rgba(0,0,0,.05);--elevation-8:0px 1px 30px rgba(0,0,0,.06);--elevation-9:0px 15px 50px rgba(0,0,0,.15);--spacing-0:4px;--spacing-1:8px;--spacing-2:16px;--spacing-3:24px;--spacing-4:32px;--spacing-5:40px;--spacing-6:48px;--spacing-7:56px;--spacing-8:64px;--spacing-9:72px;--spacing-10:80px;--spacing-11:88px;--spacing-12:96px;--spacing-13:104px;--spacing-14:112px;--spacing-15:120px}*,body{@apply bg-background text-foreground}}
1
+ @tailwind base;@tailwind components;@tailwind utilities;@layer base{:root{--background:0 0% 100%;--foreground:222.2 84% 4.9%;--card:0 0% 100%;--card-foreground:222.2 84% 4.9%;--popover:0 0% 100%;--popover-foreground:222.2 84% 4.9%;--primary:222.2 47.4% 11.2%;--primary-foreground:210 40% 98%;--secondary:210 40% 96.1%;--secondary-foreground:222.2 47.4% 11.2%;--muted:210 40% 96.1%;--muted-foreground:215.4 16.3% 46.9%;--accent:210 40% 96.1%;--accent-foreground:222.2 47.4% 11.2%;--destructive:0 84.2% 60.2%;--destructive-foreground:210 40% 98%;--border:214.3 31.8% 91.4%;--input:214.3 31.8% 91.4%;--ring:222.2 84% 4.9%;--radius:0.5rem;--font-inter:Inter;--color-page-bg:#f8fafc;--color-white:#fff;--color-primary-blue-0:#003f73;--color-primary-blue-1:#005aa6;--color-primary-blue-2:#0076d9;--color-primary-blue-3:#d4e7fa;--color-primary-blue-4:#e9f2fb;--color-grey-0:#080809;--color-grey-1:#17191b;--color-grey-2:#313438;--color-grey-3:#4a4f55;--color-grey-4:#636971;--color-grey-5:#7c838d;--color-grey-6:#989da4;--color-grey-7:#b3b7bc;--color-grey-8:#d0d2d6;--color-grey-9:#eaebed;--color-grey-10:#f8f9f9;--color-red-0:#491410;--color-red-1:#5b1914;--color-red-2:#83241d;--color-red-3:#aa2f25;--color-red-4:#cf3a2e;--color-red-5:#f34638;--color-red-6:#f66e63;--color-red-7:#f8948c;--color-red-8:#fbbdb8;--color-red-9:#fee3e1;--color-red-10:#fff8f7;--color-green-0:#113a1c;--color-green-1:#154923;--color-green-2:#1f6933;--color-green-3:#288641;--color-green-4:#31a450;--color-green-5:#3cc260;--color-green-6:#66cf82;--color-green-7:#8edca3;--color-green-8:#b8e9c6;--color-green-9:#e0f6e6;--color-green-10:#f7fdf9;--color-blue-0:#0a2c48;--color-blue-1:#0c375b;--color-blue-2:#114f81;--color-blue-3:#1665a6;--color-blue-4:#1b7bcb;--color-blue-5:#2393ef;--color-blue-6:#51a9f2;--color-blue-7:#80c1f6;--color-blue-8:#b1d9f9;--color-blue-9:#ddeffc;--color-blue-10:#f6fbfe;--color-turquoise-0:#033630;--color-turquoise-1:#0b4740;--color-turquoise-2:#1a685f;--color-turquoise-3:#29877e;--color-turquoise-4:#38a89c;--color-turquoise-5:#49c7ba;--color-turquoise-6:#6fd3c8;--color-turquoise-7:#95ded7;--color-turquoise-8:#baeae5;--color-turquoise-9:#e1f6f3;--color-turquoise-10:#f5fcfb;--color-purple-0:#31153a;--color-purple-1:#3d1a49;--color-purple-2:#572567;--color-purple-3:#703086;--color-purple-4:#8a3ca5;--color-purple-5:#a349c2;--color-purple-6:#b76fcf;--color-purple-7:#ca96dc;--color-purple-8:#debeea;--color-purple-9:#f0e3f6;--color-purple-10:#fbf8fd;--color-yellow-0:#4b3b02;--color-yellow-1:#5e4a02;--color-yellow-2:#876b04;--color-yellow-3:#ad8905;--color-yellow-4:#d5a806;--color-yellow-5:#fac70a;--color-yellow-6:#fbd33d;--color-yellow-7:#fcde71;--color-yellow-8:#fdeba9;--color-yellow-9:#fef6d8;--color-yellow-10:#fffdf5;--color-orange-0:#4a2b03;--color-orange-1:#5d3604;--color-orange-2:#854d06;--color-orange-3:#ac6307;--color-orange-4:#d27909;--color-orange-5:#f7900f;--color-orange-6:#f9a742;--color-orange-7:#fbbf74;--color-orange-8:#fcd6a8;--color-orange-9:#feedd9;--color-orange-10:#fffaf5;--color-hue-pink-1:#a5199d;--color-hue-pink-2:#fed6ff;--color-hue-pink-3:#fbe7f9;--color-hue-purple-1:#584fd6;--color-hue-purple-2:#c4c1f0;--color-hue-purple-3:#f3effb;--color-hue-ocean-1:#226f91;--color-hue-ocean-2:#c1e2f0;--color-hue-ocean-3:#eff7fb;--color-hue-mint-1:#078f81;--color-hue-mint-2:#a9e4de;--color-hue-mint-3:#d8f3f0;--color-hue-blue-1:#0b5cd7;--color-hue-blue-2:#b6cff3;--color-hue-blue-3:#ecf2fc;--color-hue-orange-1:#e96d00;--color-hue-orange-2:#ffd5bd;--color-hue-orange-3:#fff2e5;--color-special-yellow-1:#efb520;--color-special-yellow-2:#fff3c7;--color-special-orange-1:#ff5722;--color-special-orange-2:#ffead2;--color-special-red-1:#f72f4d;--color-special-red-2:#feded5;--color-special-pink-1:#fb19b4;--color-special-pink-2:#fed3e1;--color-special-purple-1:#7a5bf5;--color-special-purple-2:#ece1fe;--color-special-blue-1:#6c75f7;--color-special-blue-2:#dfeaff;--color-special-turquoise-1:#24a3d0;--color-special-turquoise-2:#cff9f2;--color-special-green-1:#1ea385;--color-special-green-2:#d4fae4;--color-special-grape-1:#2fa52d;--color-special-grape-2:#e3fad6;--color-gradient-blue-1:#1d62f0;--color-gradient-blue-2:#1ad5fd;--color-gradient-teal-1:#5ac8fb;--color-gradient-teal-2:#52edc7;--color-gradient-green-1:#0cd318;--color-gradient-green-2:#87fc70;--color-gradient-spring-green-1:#09b3a1;--color-gradient-spring-green-2:#3ac15e;--color-gradient-yellow-1:#ffcd02;--color-gradient-yellow-2:#ffdb4c;--color-gradient-orange-1:#ff5e3a;--color-gradient-orange-2:#ff9500;--color-gradient-red-1:#ff2a68;--color-gradient-red-2:#ff5e3a;--color-gradient-pink-1:#c643fc;--color-gradient-pink-2:#ef4db6;--color-gradient-purple-1:#ae33e8;--color-gradient-purple-2:#5e44ff;--gradient-background-1:radial-gradient(50.49% 55.14% at 5.76% 3.88%,#d9062c 11.51%,rgba(186,24,175,0) 100%,rgba(255,0,0,0) 0),radial-gradient(50.75% 55.24% at 93.3% -5.24%,#ff7a00 6.42%,rgba(186,24,175,0) 100%,rgba(255,122,0,0) 0),linear-gradient(180deg,#b80cbf,#2d21b6);--gradient-background-2:radial-gradient(47.55% 121.02% at 24.15% 120.55%,#ff7a00 0%,rgba(186,24,175,0) 100%),radial-gradient(107.04% 116.84% at 120.44% 68.19%,#ba004b 27.09%,#ba06c8 47.64%,#0026b7 86.58%);--gradient-light:radial-gradient(39.84% 64.62% at 3.52% 96.87%,#e7f1fd 0%,rgba(232,241,254,0) 100%),radial-gradient(35.14% 65.68% at 98.89% 0%,#ece1ef 0%,rgba(236,226,240,0) 100%),linear-gradient(109.97deg,#eef9f9 4.72%,#ecf1fd 100.82%);--gradient-dark-grey:linear-gradient(360deg,#2b2b2b,#4a4a4a);--gradient-grey:linear-gradient(360deg,#898c90,#dbddde);--gradient-light-grey:linear-gradient(360deg,#d7d7d7,#f7f7f7);--extra-small:4px;--small:8px;--medium:16px;--medium-large:20px;--large:24px;--extra-large:40px;--full:80px;--elevation-1:0px 3px 3px rgba(0,0,0,.04);--elevation-2:0px 4px 8px rgba(0,0,0,.1);--elevation-3:0px 6px 10px rgba(0,0,0,.15);--elevation-4:0px 4px 10px rgba(0,0,0,.06);--elevation-5:inset 0px 2px 2px rgba(0,0,0,.12);--elevation-6:inset 0px 4px 4px rgba(0,0,0,.03);--elevation-7:0px 0px 15px rgba(0,0,0,.05);--elevation-8:0px 1px 30px rgba(0,0,0,.06);--elevation-9:0px 15px 50px rgba(0,0,0,.15);--spacing-0:4px;--spacing-1:8px;--spacing-2:16px;--spacing-3:24px;--spacing-4:32px;--spacing-5:40px;--spacing-6:48px;--spacing-7:56px;--spacing-8:64px;--spacing-9:72px;--spacing-10:80px;--spacing-11:88px;--spacing-12:96px;--spacing-13:104px;--spacing-14:112px;--spacing-15:120px}*,body{@apply bg-background text-foreground}}.emoji-picker{background:#fff;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.08);font-family:sans-serif;max-height:320px;overflow-y:auto;padding:12px;width:300px}.emoji-picker h4{color:#555;font-size:14px;font-weight:600;margin:16px 0 8px;text-transform:capitalize}.emoji-grid{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(28px,1fr))}.emoji-btn{align-items:center;border-radius:6px;cursor:pointer;display:flex;height:28px;justify-content:center;transition:transform .2s ease;width:28px}.emoji-btn:hover{background-color:#f0f0f0;transform:scale(1.2)}.emoji-core:active{transform:scale(1.15)}@keyframes sparklePop{0%{opacity:1;transform:scale(.5)}to{opacity:0;transform:scale(1.6)}}.magic{--r:45px;display:inline-block;position:relative}.magic:before{border:var(--r) solid orange;border-radius:50%;box-sizing:border-box;content:"";height:calc(var(--r)*2);left:calc(50% - var(--r));position:absolute;top:calc(50% - var(--r));transform:scale(0);width:calc(var(--r)*2)}.magic.spark:before{border-width:0;transform:scale(1);transition:transform .5s,border-width .5s .5s}.magic:after{--c1:radial-gradient(circle,red 50%,transparent 60%);--c2:radial-gradient(circle,orange 50%,transparent 60%);background:var(--c1),var(--c1),var(--c1),var(--c1),var(--c2),var(--c2),var(--c2),var(--c2);background-position:calc(50% - var(--r)) calc(50% - var(--r)),calc(50% + var(--r)) calc(50% - var(--r)),calc(50% - var(--r)) calc(50% + var(--r)),calc(50% + var(--r)) calc(50% + var(--r)),50% calc(50% + var(--r)*1.414),calc(50% + var(--r)*1.414) 50%,calc(50% - var(--r)*1.414) 50%,50% calc(50% - var(--r)*1.414);background-repeat:no-repeat;background-size:calc(var(--r)/3) calc(var(--r)/3);content:"";height:calc(var(--r)*4);left:calc(50% - var(--r)*2);position:absolute;top:calc(50% - var(--r)*2);transform:scale(0);width:calc(var(--r)*4)}.magic.spark:after{background-size:0 0;opacity:0;transform:scale(1);transition:transform .5s .5s,opacity .4s .9s,background-size .5s .9s}.reaction-container{display:inline-block;position:relative}.reaction-flash{background:radial-gradient(circle,hsla(0,0%,100%,0) 30%,hsla(0,0%,100%,0) 100%);border-radius:50%;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:1}.reaction-flash.active{animation:rainbow-pulse .2s ease-out forwards}.reaction-emoji{position:relative;transition:transform .3s ease;z-index:2}.reaction-emoji.active{animation:emoji-pop .5s ease-out forwards}.sparkle-container{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:3}.sparkle{filter:drop-shadow(0 0 3px rgba(255,255,255,.8));height:10px;opacity:0;position:absolute;transform-origin:center;width:10px}.sparkle.star{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}.sparkle.dot{border-radius:50%}.sparkle:after{background:linear-gradient(135deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0) 50%,hsla(0,0%,100%,0));border-radius:inherit;bottom:0;content:"";left:0;opacity:.7;position:absolute;right:0;top:0}.sparkle-ring{border-radius:50%;left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0)}@keyframes rainbow-pulse{0%{background:radial-gradient(circle,hsla(0,0%,100%,0) 30%,hsla(0,0%,100%,0) 100%);box-shadow:0 0 0 0 hsla(0,0%,100%,0)}20%{background:radial-gradient(circle,hsla(0,0%,100%,.8) 0,rgba(255,0,0,.3) 30%,rgba(255,255,0,.2) 50%,rgba(0,255,255,.1) 70%,rgba(0,0,255,0) 100%);box-shadow:0 0 30px 5px hsla(0,0%,100%,.7)}to{background:radial-gradient(circle,hsla(0,0%,100%,0) 30%,hsla(0,0%,100%,0) 100%);box-shadow:0 0 0 0 hsla(0,0%,100%,0)}}@keyframes emoji-pop{0%{transform:scale(1)}40%{transform:scale(1.3)}70%{transform:scale(1.15)}85%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes sparkle-fly{0%{opacity:0;transform:translate(0) scale(0) rotate(0deg)}10%{opacity:1}70%{opacity:1}to{opacity:0;transform:translate(var(--tx),var(--ty)) scale(var(--scale)) rotate(var(--rotation))}}@keyframes ring-expand{0%{border-width:15px;opacity:.9;transform:translate(-50%,-50%) scale(.1)}to{border-width:1px;opacity:0;transform:translate(-50%,-50%) scale(.4)}}
package/dist/styles/output.css CHANGED
@@ -1495,6 +1495,10 @@ body {
1495
1495
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1496
1496
  }
1497
1497
 
1498
+ .ease-out {
1499
+ transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
1500
+ }
1501
+
1498
1502
  @keyframes enter {
1499
1503
  from {
1500
1504
  opacity: var(--tw-enter-opacity, 1);
@@ -1513,6 +1517,123 @@ body {
1513
1517
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1514
1518
  }
1515
1519
 
1520
+ .ease-out {
1521
+ animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
1522
+ }
1523
+
1524
+ .emoji-picker {
1525
+ max-height: 320px;
1526
+ width: 300px;
1527
+ overflow-y: auto;
1528
+ background: white;
1529
+ border-radius: 8px;
1530
+ padding: 12px;
1531
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
1532
+ font-family: sans-serif;
1533
+ }
1534
+
1535
+ .emoji-picker h4 {
1536
+ font-size: 14px;
1537
+ font-weight: 600;
1538
+ color: #555;
1539
+ margin: 16px 0 8px;
1540
+ text-transform: capitalize;
1541
+ }
1542
+
1543
+ .emoji-grid {
1544
+ display: grid;
1545
+ grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
1546
+ gap: 6px;
1547
+ }
1548
+
1549
+ .emoji-btn {
1550
+ width: 28px;
1551
+ height: 28px;
1552
+ display: flex;
1553
+ align-items: center;
1554
+ justify-content: center;
1555
+ cursor: pointer;
1556
+ border-radius: 6px;
1557
+ transition: transform 0.2s ease;
1558
+ }
1559
+
1560
+ .emoji-btn:hover {
1561
+ background-color: #f0f0f0;
1562
+ transform: scale(1.2);
1563
+ }
1564
+
1565
+ .emoji-core:active {
1566
+ transform: scale(1.15);
1567
+ }
1568
+
1569
+ @keyframes sparklePop {
1570
+ 0% {
1571
+ opacity: 1;
1572
+ transform: scale(0.5);
1573
+ }
1574
+
1575
+ 100% {
1576
+ opacity: 0;
1577
+ transform: scale(1.6);
1578
+ }
1579
+ }
1580
+
1581
+ .magic {
1582
+ display: inline-block;
1583
+ position: relative;
1584
+ --r: 45px;
1585
+ }
1586
+
1587
+ .magic::before {
1588
+ content: '';
1589
+ position: absolute;
1590
+ top: calc(50% - var(--r));
1591
+ left: calc(50% - var(--r));
1592
+ width: calc(2 * var(--r));
1593
+ height: calc(2 * var(--r));
1594
+ border-radius: 50%;
1595
+ border: solid orange var(--r);
1596
+ transform: scale(0);
1597
+ box-sizing: border-box;
1598
+ }
1599
+
1600
+ .magic.spark::before {
1601
+ border-width: 0;
1602
+ transform: scale(1);
1603
+ transition: transform 0.5s, border-width 0.5s 0.5s;
1604
+ }
1605
+
1606
+ .magic::after {
1607
+ content: '';
1608
+ position: absolute;
1609
+ width: calc(4 * var(--r));
1610
+ height: calc(4 * var(--r));
1611
+ left: calc(50% - 2 * var(--r));
1612
+ top: calc(50% - 2 * var(--r));
1613
+ --c1: radial-gradient(circle, red 50%, transparent 60%);
1614
+ --c2: radial-gradient(circle, orange 50%, transparent 60%);
1615
+ background: var(--c1), var(--c1), var(--c1), var(--c1), var(--c2), var(--c2),
1616
+ var(--c2), var(--c2);
1617
+ background-size: calc(var(--r) / 3) calc(var(--r) / 3);
1618
+ background-position: calc(50% - var(--r)) calc(50% - var(--r)),
1619
+ calc(50% + var(--r)) calc(50% - var(--r)),
1620
+ calc(50% - var(--r)) calc(50% + var(--r)),
1621
+ calc(50% + var(--r)) calc(50% + var(--r)),
1622
+ calc(50% + 0px) calc(50% + var(--r) * 1.414),
1623
+ calc(50% + var(--r) * 1.414) calc(50% + 0px),
1624
+ calc(50% - var(--r) * 1.414) calc(50% + 0px),
1625
+ calc(50% + 0px) calc(50% - var(--r) * 1.414);
1626
+ background-repeat: no-repeat;
1627
+ transform: scale(0);
1628
+ }
1629
+
1630
+ .magic.spark::after {
1631
+ transform: scale(1);
1632
+ opacity: 0;
1633
+ background-size: 0 0;
1634
+ transition: transform 0.5s 0.5s, opacity 0.4s 0.9s, background-size 0.5s 0.9s;
1635
+ }
1636
+
1516
1637
  .before\:absolute::before {
1517
1638
  content: var(--tw-content);
1518
1639
  position: absolute;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@soul-refiner/design-system",
3
- "version": "2.14.1",
3
+ "version": "2.14.2",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/src/index.d.ts",
6
6
  "license": "MIT",
@@ -37,6 +37,7 @@
37
37
  "@types/react": "^18.2.48",
38
38
  "@types/react-dom": "18.2.0",
39
39
  "@types/react-show-more-text": "^1.4.5",
40
+ "@types/react-window": "^1.8.8",
40
41
  "@types/styled-components": "~5.1.26",
41
42
  "chromatic": "~6.17.4",
42
43
  "husky": "~8.0.0",
@@ -66,7 +67,8 @@
66
67
  "prepare": "husky install"
67
68
  },
68
69
  "dependencies": {
69
- "@emoji-mart/react": "~1.1.1",
70
+ "@emoji-mart/data": "^1.2.1",
71
+ "@emoji-mart/react": "^1.1.1",
70
72
  "@emotion/react": "^11.11.4",
71
73
  "@emotion/styled": "^11.11.0",
72
74
  "@mui/material": "^5.15.13",
@@ -93,6 +95,7 @@
93
95
  "react-player": "~2.13.0",
94
96
  "react-show-more-text": "^1.7.1",
95
97
  "react-tooltip": "~5.18.0",
98
+ "react-window": "^1.8.11",
96
99
  "scheduler": "~0.23.0",
97
100
  "slate": "~0.101.5",
98
101
  "slate-history": "~0.100.0",