@soul-refiner/design-system 2.7.5 → 2.7.7

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 (14) hide show
  1. package/dist/components/media/audio-playlist/audio-playlist.js +21 -13
  2. package/dist/components/media/audio-playlist/playlist-item.js +8 -5
  3. package/dist/components/surfaces/comment/comment.js +2 -1
  4. package/dist/src/components/atoms/box/box.d.ts +2 -2
  5. package/dist/src/components/atoms/typography/typography.d.ts +1 -1
  6. package/dist/src/components/card/styles.d.ts +1 -1
  7. package/dist/src/components/editor/navbar/navbar.d.ts +2 -2
  8. package/dist/src/components/editor/styles/menu_button.d.ts +2 -2
  9. package/dist/src/components/media/audio-playlist/audio-playlist.d.ts +5 -2
  10. package/dist/src/components/media/audio-playlist/playlist-item.d.ts +2 -1
  11. package/dist/src/components/surfaces/comment/comment.d.ts +2 -1
  12. package/dist/styles/globals.css +1790 -0
  13. package/dist/styles/output.css +1790 -0
  14. package/package.json +1 -1
package/dist/components/media/audio-playlist/audio-playlist.js CHANGED
@@ -1,11 +1,11 @@
1
- "use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),heading=require("../../atoms/typography/heading.js"),arrow_up=require("../../../icons/arrow/arrow_up.js"),chevron_down=require("../../../icons/arrow/chevron_down.js"),audioPlayer=require("../audio-player/audio-player.js"),playlistItem=require("./playlist-item.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image),styled__default=_interopDefaultCompat(styled);const AudioPlaylist=({activeIndex:e,onProgress:t,isPaidUser:a,playlist:l,previewImage:i,setMediaItem:r,subtitle:d,title:o})=>{var n="undefined"!=typeof window?window:null;const u=l?.[e],[p,s]=React__default.default.useState(!1),[f,c]=React__default.default.useState(!1),[_,m]=React__default.default.useState(0);return React__default.default.createElement(Wrapper,{$fullscreen:p},React__default.default.createElement(ThumbnailWrapper,null,React__default.default.createElement(Image__default.default,{alt:"thumbnail",height:400,width:n?.innerWidth||500,src:i}),React__default.default.createElement(box.Box,{$dir:"column",sx:"padding: 100px 0px 160px; position: relative; z-index: 2; margin: 0px 160px;"},React__default.default.createElement(heading.H,{$bold:!0,$color:"white",$fontSize:64,$lineHeight:96},o),React__default.default.createElement(heading.H,{$color:"grey-8",$fontSize:28,$lineHeight:36,$semiBold:!0},d))),React__default.default.createElement(PlaylistWrapper,null,l.map((e,t)=>React__default.default.createElement(playlistItem.PlaylistItem,{duration:e.duration,isPaidUser:a,key:e.id,playing:e.id===u?.id&&f,progress:_,onPause:()=>c(!1),onPlay:()=>{r(t),c(!0)},title:e.title,thumbnail:e.thumbnail}))),React__default.default.createElement(Shade,{$isFullscreen:p},a&&React__default.default.createElement(Button,{onClick:()=>s(e=>!e)},p?React__default.default.createElement(arrow_up.ArrowUp,{color:"grey-0",size:24}):React__default.default.createElement(chevron_down.ChevronDown,{color:"white",size:24}))),!!u&&React__default.default.createElement(BottomBarWrapper,null,React__default.default.createElement(audioPlayer.AudioPlayer,{onListen:e=>{m(e),t&&t(e)},onPause:()=>c(!1),onPlay:()=>c(!0),playing:f,progress:_,src:u.src,thumbnail:u.thumbnail,title:u.title})))},Wrapper=styled__default.default.div`
1
+ "use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),heading=require("../../atoms/typography/heading.js"),arrow_up=require("../../../icons/arrow/arrow_up.js"),chevron_down=require("../../../icons/arrow/chevron_down.js"),audioPlayer=require("../audio-player/audio-player.js"),playlistItem=require("./playlist-item.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image),styled__default=_interopDefaultCompat(styled);const AudioPlaylist=({activeIndex:e,bannerSx:t,darkMode:a,isPaidUser:l,onProgress:i,playlist:r,playlistSx:d,previewImage:o,setMediaItem:n,subtitle:u,title:s})=>{var p="undefined"!=typeof window?window:null;const f=r?.[e],[c,_]=React__default.default.useState(!1),[m,x]=React__default.default.useState(!1),[g,y]=React__default.default.useState(0);return React__default.default.createElement(Wrapper,{$darkMode:a,$fullscreen:c},React__default.default.createElement(ThumbnailWrapper,{$sx:t},React__default.default.createElement(Image__default.default,{alt:"thumbnail",height:400,width:p?.innerWidth||500,src:o}),React__default.default.createElement(box.Box,{$dir:"column",sx:"padding: 100px 0px 160px; position: relative; z-index: 2; margin: 0px 160px;"},React__default.default.createElement(heading.H,{$bold:!0,$color:a?"white":"grey-0",$fontSize:64,$lineHeight:96},s),React__default.default.createElement(heading.H,{$color:a?"grey-8":"grey-3",$fontSize:28,$lineHeight:36,$semiBold:!0},u))),React__default.default.createElement(PlaylistWrapper,{$sx:d},r.map((e,t)=>React__default.default.createElement(playlistItem.PlaylistItem,{darkMode:a,duration:e.duration,isPaidUser:l,key:e.id,playing:e.id===f?.id&&m,progress:g,onPause:()=>x(!1),onPlay:()=>{n(t),x(!0)},title:e.title,thumbnail:e.thumbnail}))),React__default.default.createElement(Shade,{$darkMode:a,$isFullscreen:c},l&&React__default.default.createElement(Button,{onClick:()=>_(e=>!e)},c?React__default.default.createElement(arrow_up.ArrowUp,{color:"grey-0",size:24}):React__default.default.createElement(chevron_down.ChevronDown,{color:"white",size:24}))),!!f&&React__default.default.createElement(BottomBarWrapper,null,React__default.default.createElement(audioPlayer.AudioPlayer,{onListen:e=>{y(e),i&&i(e)},onPause:()=>x(!1),onPlay:()=>x(!0),playing:m,progress:g,src:f.src,thumbnail:f.thumbnail,title:f.title})))},Wrapper=styled__default.default.div`
2
2
  ${({$fullscreen:e})=>e?"height: 100vh;":"height: 744px;"}
3
3
  width: 100vw;
4
4
  position: relative;
5
5
  padding-bottom: 24px;
6
6
  overflow-y: auto;
7
7
  overflow-x: hidden;
8
- background-color: var(--color-grey-0);
8
+ background-color: ${({$darkMode:e})=>e?"var(--color-grey-0)":"white"};
9
9
  `,ThumbnailWrapper=styled__default.default.div`
10
10
  width: 100%;
11
11
  max-width: 2240px;
@@ -18,25 +18,32 @@
18
18
  position: absolute;
19
19
  z-index: 0;
20
20
  }
21
+ ${({$sx:e})=>e||""};
21
22
  `,Shade=styled__default.default.div`
22
23
  position: absolute;
23
24
  bottom: 0px;
24
25
  left: 0px;
26
+ z-index: 5;
27
+ pointer-events: none;
25
28
  width: 100%;
26
29
  height: 160px;
27
30
  display: flex;
28
- background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
31
+ background: linear-gradient(
32
+ 180deg,
33
+ ${({$darkMode:e})=>e?"rgba(0, 0, 0, 0) 0%, #000":"rgba(255, 255, 255, 0) 0%, #fff"}
34
+ 100%
35
+ );
29
36
  ${({$isFullscreen:e})=>e?`padding: 0px 24px;
30
- align-items: flex-start;
31
- justify-content: flex-end;
32
- button {
33
- background-color: white;
34
- }`:`padding: 96px 0px 16px;
35
- align-items: center;
36
- justify-content: center;
37
- button {
38
- background-color: transparent;
39
- }`}
37
+ align-items: flex-start;
38
+ justify-content: flex-end;
39
+ button {
40
+ background-color: white;
41
+ }`:`padding: 96px 0px 16px;
42
+ align-items: center;
43
+ justify-content: center;
44
+ button {
45
+ background-color: transparent;
46
+ }`}
40
47
  `,Button=styled__default.default.button`
41
48
  padding: 12px;
42
49
  appearance: none;
@@ -51,6 +58,7 @@
51
58
  display: flex;
52
59
  flex-direction: column;
53
60
  overflow-y: auto;
61
+ ${({$sx:e})=>e||""};
54
62
  `,BottomBarWrapper=styled__default.default.nav`
55
63
  position: fixed;
56
64
  z-index: 50000;
package/dist/components/media/audio-playlist/playlist-item.js CHANGED
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- "use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),paragraph=require("../../atoms/typography/paragraph.js"),pause_solid=require("../../../icons/audio_video/pause_solid.js"),play_solid=require("../../../icons/audio_video/play_solid.js"),progressBar=require("../audio/progress-bar.js"),time=require("../../../utils/time.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("react-h5-audio-player/lib/styles.css");var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image),styled__default=_interopDefaultCompat(styled);const PlaylistItem=({duration:e,onPause:t,onPlay:a,playing:r,isPaidUser:l,progress:o,thumbnail:i,title:d})=>{var u=r?t:a;return React__default.default.createElement(ItemWrapper,{$playing:r,onClick:u},React__default.default.createElement(box.Box,{$gap:24,$dir:"row",$align:"center"},React__default.default.createElement(Image__default.default,{alt:"",height:64,src:i,width:64,style:{height:64,marginRight:8,borderRadius:8}}),React__default.default.createElement(box.Box,{$align:"center",sx:"flex: 1 1 250px; width: 250px;"},l&&(r?React__default.default.createElement(Button,{onClick:t},React__default.default.createElement(pause_solid.PauseSolid,{color:"white",size:24})):React__default.default.createElement(Button,{onClick:a},React__default.default.createElement(play_solid.PlaySolid,{color:"white",size:24}))),React__default.default.createElement(paragraph.P,{$bold:!0,$color:"white",$fontSize:14,$lineHeight:20,$textClampLines:1,sx:"margin-right: 32px;"},d))),React__default.default.createElement(box.Box,{$align:"center",sx:"flex: 3; margin-left: auto;"},React__default.default.createElement(paragraph.P,{$color:"grey-9",$fontSize:10,$lineHeight:14,$sx:"flex: 0; width: fit-content; min-width: 56px;"},time.secondsToTimestamp(e)),React__default.default.createElement(progressBar.AudioProgressBar,{duration:e||0,progress:r?o:0})))},ItemWrapper=styled__default.default.button`
2
+ "use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),paragraph=require("../../atoms/typography/paragraph.js"),pause_solid=require("../../../icons/audio_video/pause_solid.js"),play_solid=require("../../../icons/audio_video/play_solid.js"),progressBar=require("../audio/progress-bar.js"),time=require("../../../utils/time.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("react-h5-audio-player/lib/styles.css");var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image),styled__default=_interopDefaultCompat(styled);const PlaylistItem=({darkMode:e=!0,duration:t,onPause:a,onPlay:r,playing:l,isPaidUser:o,progress:i,thumbnail:d,title:u})=>{var n=l?a:r,s=e?"white":"grey-3";return console.log(e),React__default.default.createElement(ItemWrapper,{$darkMode:e,$playing:l,onClick:n},React__default.default.createElement(box.Box,{$gap:24,$dir:"row",$align:"center"},React__default.default.createElement(Image__default.default,{alt:"",height:64,src:d,width:64,style:{height:64,marginRight:8,borderRadius:8}}),React__default.default.createElement(box.Box,{$align:"center",sx:"flex: 1 1 250px; width: 250px;"},o&&(l?React__default.default.createElement(Button,{onClick:a},React__default.default.createElement(pause_solid.PauseSolid,{color:s,size:24})):React__default.default.createElement(Button,{onClick:r},React__default.default.createElement(play_solid.PlaySolid,{color:s,size:24}))),React__default.default.createElement(paragraph.P,{$bold:!0,$color:s,$fontSize:14,$lineHeight:20,$textClampLines:1,sx:"margin-right: 32px;"},u))),React__default.default.createElement(box.Box,{$align:"center",sx:"flex: 3; margin-left: auto;"},React__default.default.createElement(paragraph.P,{$color:e?"grey-9":"grey-3",$fontSize:10,$lineHeight:14,$sx:"flex: 0; width: fit-content; min-width: 56px;"},time.secondsToTimestamp(t)),React__default.default.createElement(progressBar.AudioProgressBar,{duration:t||0,progress:l?i:0})))},ItemWrapper=styled__default.default.button`
3
3
  padding: 16px 32px;
4
4
  display: flex;
5
5
  flex-direction: row;
@@ -7,10 +7,13 @@
7
7
  border-radius: 8px;
8
8
  border: none;
9
9
  cursor: pointer;
10
- ${({$playing:e})=>e?"background-color: var(--color-grey-2);":`background-color: transparent;
11
- &:hover {
12
- background-color: var(--color-grey-1);
13
- }`}
10
+ ${({$darkMode:e,$playing:t})=>e?t?"background-color: var(--color-grey-2);":`background-color: transparent;
11
+ &:hover {
12
+ background-color: var(--color-grey-1);
13
+ }`:t?"background-color: var(--color-grey-10);":`background-color: var(--color-grey-9);
14
+ &:hover {
15
+ background-color: var(--color-grey-8);
16
+ }`}
14
17
  `,Button=styled__default.default.div`
15
18
  padding: 16px;
16
19
  appearance: none;
package/dist/components/surfaces/comment/comment.js CHANGED
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- "use strict";var React=require("react"),styled=require("styled-components"),Picker=require("@emoji-mart/react"),avatar=require("../../iconography/avatar/avatar.js"),box=require("../../atoms/box/box.js"),paragraph=require("../../atoms/typography/paragraph.js"),text_input=(require("../../input/checkbox/checkbox.js"),require("../../input/date/date.js"),require("../../input/filter/filter.js"),require("../../input/radio/radio.js"),require("../../input/search/search.js"),require("../../input/select/select.js"),require("../../input/text_area/text_area.js"),require("../../input/text_input/text_input.js")),button=(require("../../input/calendar/calendar.js"),require("../../input/time/time.js"),require("@mui/x-date-pickers/LocalizationProvider"),require("@mui/x-date-pickers/AdapterDateFnsV3"),require("@mui/x-date-pickers/TimeField"),require("../../actions/button/button.js")),portal=require("../portal/portal.js"),emojis=require("../../../emoji/emojis.json.js"),styles=require("../../../common/styles.js"),emoticon_add=require("../../../icons/basic/emoticon_add.js"),comment=require("../../../icons/message/comment.js"),helpers=require("./helpers.js"),Link=require("next/link");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Picker__default=_interopDefaultCompat(Picker),Link__default=_interopDefaultCompat(Link);const MAX_REACTIONS_SHOWN=5,Comment=({avatarTooltipContent:e,avatarTooltipSx:t,content:a,createdDate:r,hasMoreReplies:l,id:o,onComment:i,onReact:n,onShowReplies:u,dropdown:d,reactionModal:p,reactions:c,replies:s,userImageUri:f,userName:m,userReactions:_,visibilityIcon:x,customPlaceHolder:y,userProfileUri:R})=>{const[g,b]=React__default.default.useState(!1),[h,$]=React__default.default.useState({x:0,y:0}),[v,E]=React__default.default.useState("up"),[j,k]=React__default.default.useState(!1),[q,C]=React__default.default.useState(!1),[S,w]=React__default.default.useState(""),P=React__default.default.Children.toArray(s);var s=()=>{u&&u(),C(!0)},r=helpers.abbrTimeBeforeDate(r),c=c&&Object.entries(c).slice(0,MAX_REACTIONS_SHOWN).sort((e,t)=>e[1]<t[1]?1:-1).map(e=>React__default.default.createElement(Reaction,{key:o+e[0],onClick:()=>n(e[0]),$align:"center",$dir:"row",$gap:5,$userSelected:_?.includes(e[0])},e[0],React__default.default.createElement(paragraph.P,{$bold:!0,$fontSize:10,$lineHeight:14},e[1]))),W=!!P?.length&&0<P.length,z=W&&P.map((e,t)=>{var a;return React__default.default.isValidElement(e)?(a=e.props?.id,t=t!==P.length-1||l,React__default.default.createElement(ReplyWrapper,{$hasLine:t,key:a},e,React__default.default.createElement(ReplyIndicator,null))):null});return React__default.default.createElement(Wrapper,{id:"comment-"+o},React__default.default.createElement(avatar.Avatar,{as:Link__default.default,href:R,image:f,size:32,tooltipContent:e,tooltipSx:t}),React__default.default.createElement(box.Box,{$flex:1,$dir:"column"},React__default.default.createElement(ContentWrapper,{$hasReplies:W||!!l},React__default.default.createElement(CommentBox,null,React__default.default.createElement(box.Box,{$dir:"row",$justify:"space-between",$align:"center"},React__default.default.createElement(paragraph.P,{$bold:!0,$color:"grey-2",$fontSize:14,$lineHeight:20},m),d),React__default.default.createElement(paragraph.P,{sx:"letter-spacing: -0.176px;"},a)),React__default.default.createElement(box.Box,{$align:"flex-start",$dir:"row",$display:"flex",$gap:16,sx:"margin: 8px 0px; position: relative;"},React__default.default.createElement(emoticon_add.Emoticon,{color:"primary-blue-2",onClick:e=>{e.stopPropagation(),b(e=>!e),$({y:e.clientY,x:e.clientX}),E(400<e.clientY?"up":"down")},size:24,sx:" cursor: pointer; flex-shrink: 0;"}),React__default.default.createElement(comment.Comment,{color:"primary-blue-2",onClick:()=>k(e=>!e),size:24,sx:"border-radius: 50%; cursor: pointer; flex-shrink: 0;"}),React__default.default.createElement(paragraph.P,{$color:"grey-7"},"•"),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:24,sx:"flex-shrink: 0;"},r),React__default.default.createElement(box.Box,{$display:"flex",$flow:"row wrap",$gap:6,sx:"max-width: calc(100% - 190px); margin-left: auto;"},c,p),g&&React__default.default.createElement(portal.Portal,null,React__default.default.createElement(PickerWrapper,{$pickerOrientation:v,$top:h.y,$left:h.x},React__default.default.createElement(Picker__default.default,{data:emojis.default,onEmojiSelect:({native:e})=>{n(e),b(!1)},onClickOutside:()=>b(!1),maxFrequentRows:1,navPosition:"none",previewPosition:"none",perLine:9,theme:"auto"}))))),W&&q&&React__default.default.createElement(RepliesWrapper,null,z),!q&&!l&&W&&React__default.default.createElement(RepliesWrapper,null,React__default.default.createElement(ReplyWrapper,{$hasLine:!1},React__default.default.createElement(button.Button,{onClick:s,size:"small",sx:"color: var(--color-grey-3);",type:"text"},"show replies"),React__default.default.createElement(ReplyIndicator,null))),l&&React__default.default.createElement(RepliesWrapper,null,React__default.default.createElement(ReplyWrapper,{$hasLine:!1},React__default.default.createElement(button.Button,{onClick:s,size:"small",sx:"color: var(--color-grey-3);",type:"text"},"show more replies"),React__default.default.createElement(ReplyIndicator,null))),j&&React__default.default.createElement(CommentWrapper,{onSubmit:e=>{e.stopPropagation(),e.preventDefault(),i(S),w("")}},React__default.default.createElement(text_input.TextInput,{bg:"var(--color-grey-10)",placeholder:y||"Write a reply",onChange:e=>{w(e.target.value)},value:S,placeIconAtTheEnd:!0,icon:x}))))},Wrapper=styled.styled.div`
2
+ "use strict";var React=require("react"),styled=require("styled-components"),Picker=require("@emoji-mart/react"),avatar=require("../../iconography/avatar/avatar.js"),box=require("../../atoms/box/box.js"),paragraph=require("../../atoms/typography/paragraph.js"),text_input=(require("../../input/checkbox/checkbox.js"),require("../../input/date/date.js"),require("../../input/filter/filter.js"),require("../../input/radio/radio.js"),require("../../input/search/search.js"),require("../../input/select/select.js"),require("../../input/text_area/text_area.js"),require("../../input/text_input/text_input.js")),button=(require("../../input/calendar/calendar.js"),require("../../input/time/time.js"),require("@mui/x-date-pickers/LocalizationProvider"),require("@mui/x-date-pickers/AdapterDateFnsV3"),require("@mui/x-date-pickers/TimeField"),require("../../actions/button/button.js")),portal=require("../portal/portal.js"),emojis=require("../../../emoji/emojis.json.js"),styles=require("../../../common/styles.js"),emoticon_add=require("../../../icons/basic/emoticon_add.js"),comment=require("../../../icons/message/comment.js"),helpers=require("./helpers.js"),Link=require("next/link");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Picker__default=_interopDefaultCompat(Picker),Link__default=_interopDefaultCompat(Link);const MAX_REACTIONS_SHOWN=5,Comment=({avatarTooltipContent:e,avatarTooltipSx:t,content:a,createdDate:r,hasMoreReplies:l,id:o,onComment:i,onReact:n,onShowReplies:u,dropdown:d,reactionModal:p,reactions:c,replies:s,userImageUri:f,userName:m,userReactions:_,visibilityIcon:x,customPlaceHolder:y,userProfileUri:R,sx:g})=>{const[b,h]=React__default.default.useState(!1),[$,v]=React__default.default.useState({x:0,y:0}),[E,j]=React__default.default.useState("up"),[k,q]=React__default.default.useState(!1),[C,S]=React__default.default.useState(!1),[w,P]=React__default.default.useState(""),W=React__default.default.Children.toArray(s);var s=()=>{u&&u(),S(!0)},r=helpers.abbrTimeBeforeDate(r),c=c&&Object.entries(c).slice(0,MAX_REACTIONS_SHOWN).sort((e,t)=>e[1]<t[1]?1:-1).map(e=>React__default.default.createElement(Reaction,{key:o+e[0],onClick:()=>n(e[0]),$align:"center",$dir:"row",$gap:5,$userSelected:_?.includes(e[0])},e[0],React__default.default.createElement(paragraph.P,{$bold:!0,$fontSize:10,$lineHeight:14},e[1]))),z=!!W?.length&&0<W.length,I=z&&W.map((e,t)=>{var a;return React__default.default.isValidElement(e)?(a=e.props?.id,t=t!==W.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:g,id:"comment-"+o},React__default.default.createElement(avatar.Avatar,{as:Link__default.default,href:R,image:f,size:32,tooltipContent:e,tooltipSx:t}),React__default.default.createElement(box.Box,{$flex:1,$dir:"column"},React__default.default.createElement(ContentWrapper,{$hasReplies:z||!!l},React__default.default.createElement(CommentBox,null,React__default.default.createElement(box.Box,{$dir:"row",$justify:"space-between",$align:"center"},React__default.default.createElement(paragraph.P,{$bold:!0,$color:"grey-2",$fontSize:14,$lineHeight:20},m),d),React__default.default.createElement(paragraph.P,{sx:"letter-spacing: -0.176px;"},a)),React__default.default.createElement(box.Box,{$align:"flex-start",$dir:"row",$display:"flex",$gap:16,sx:"margin: 8px 0px; position: relative;"},React__default.default.createElement(emoticon_add.Emoticon,{color:"primary-blue-2",onClick:e=>{e.stopPropagation(),h(e=>!e),v({y:e.clientY,x:e.clientX}),j(400<e.clientY?"up":"down")},size:24,sx:" cursor: pointer; flex-shrink: 0;"}),React__default.default.createElement(comment.Comment,{color:"primary-blue-2",onClick:()=>q(e=>!e),size:24,sx:"border-radius: 50%; cursor: pointer; flex-shrink: 0;"}),React__default.default.createElement(paragraph.P,{$color:"grey-7"},"•"),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:24,sx:"flex-shrink: 0;"},r),React__default.default.createElement(box.Box,{$display:"flex",$flow:"row wrap",$gap:6,sx:"max-width: calc(100% - 190px); margin-left: auto;"},c,p),b&&React__default.default.createElement(portal.Portal,null,React__default.default.createElement(PickerWrapper,{$pickerOrientation:E,$top:$.y,$left:$.x},React__default.default.createElement(Picker__default.default,{data:emojis.default,onEmojiSelect:({native:e})=>{n(e),h(!1)},onClickOutside:()=>h(!1),maxFrequentRows:1,navPosition:"none",previewPosition:"none",perLine:9,theme:"auto"}))))),z&&C&&React__default.default.createElement(RepliesWrapper,null,I),!C&&!l&&z&&React__default.default.createElement(RepliesWrapper,null,React__default.default.createElement(ReplyWrapper,{$hasLine:!1},React__default.default.createElement(button.Button,{onClick:s,size:"small",sx:"color: var(--color-grey-3);",type:"text"},"show replies"),React__default.default.createElement(ReplyIndicator,null))),l&&React__default.default.createElement(RepliesWrapper,null,React__default.default.createElement(ReplyWrapper,{$hasLine:!1},React__default.default.createElement(button.Button,{onClick:s,size:"small",sx:"color: var(--color-grey-3);",type:"text"},"show more replies"),React__default.default.createElement(ReplyIndicator,null))),k&&React__default.default.createElement(CommentWrapper,{onSubmit:e=>{e.stopPropagation(),e.preventDefault(),i(w),P("")}},React__default.default.createElement(text_input.TextInput,{bg:"var(--color-grey-10)",placeholder:y||"Write a reply",onChange:e=>{P(e.target.value)},value:w,placeIconAtTheEnd:!0,icon:x}))))},Wrapper=styled.styled.div`
3
3
  max-width: 700px;
4
4
  display: flex;
5
5
  flex-direction: row;
@@ -7,6 +7,7 @@
7
7
  gap: 12px;
8
8
  justify-content: space-between;
9
9
  position: relative;
10
+ ${({$sx:e})=>e||""}
10
11
  `,ContentWrapper=styled.styled.div`
11
12
  display: flex;
12
13
  flex-direction: column;
package/dist/src/components/atoms/box/box.d.ts CHANGED
@@ -16,7 +16,7 @@ export interface BoxProps extends BackgroundColor, BorderRadius, Elevation, Flex
16
16
  sx?: string;
17
17
  }
18
18
  export declare const Box: ({ $display, sx, ...args }: BoxProps) => React.JSX.Element;
19
- export declare const Component: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BoxProps & {
19
+ export declare const Component: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BoxProps & {
20
20
  $sx?: string | undefined;
21
- }>> & string;
21
+ }>>;
22
22
  export {};
package/dist/src/components/atoms/typography/typography.d.ts CHANGED
@@ -8,4 +8,4 @@ export type TypographyProps = Pick<React.HTMLAttributes<HTMLParagraphElement>, '
8
8
  value?: string;
9
9
  href?: string;
10
10
  } & Color & Styleable & TextClamp & TypographyStyle & TypographyWeight;
11
- export declare const Typography: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, TypographyProps>> & string;
11
+ export declare const Typography: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, TypographyProps>>;
package/dist/src/components/card/styles.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  /// <reference types="react" />
2
- export declare const PurchaseTextWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../../components/atoms/box/box").BoxProps, never>> & string & Omit<({ $display, sx, ...args }: import("../../components/atoms/box/box").BoxProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
2
+ export declare const PurchaseTextWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("../../components/atoms/box/box").BoxProps, never>> & Omit<({ $display, sx, ...args }: import("../../components/atoms/box/box").BoxProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
package/dist/src/components/editor/navbar/navbar.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
2
  export declare const EditorBar: () => React.JSX.Element;
3
- export declare const MenuButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
3
+ export declare const MenuButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
4
4
  $active?: boolean | undefined;
5
- }>> & string;
5
+ }>>;
package/dist/src/components/editor/styles/menu_button.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  /// <reference types="react" />
2
- export declare const MenuButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
2
+ export declare const MenuButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
3
3
  $active?: boolean | undefined;
4
- }>> & string;
4
+ }>>;
package/dist/src/components/media/audio-playlist/audio-playlist.d.ts CHANGED
@@ -2,13 +2,16 @@ import React from 'react';
2
2
  import { MediaItem } from '../common';
3
3
  export interface AudioPlaylistProps {
4
4
  activeIndex: number;
5
+ bannerSx?: string;
6
+ darkMode?: boolean;
7
+ isPaidUser?: boolean;
5
8
  onProgress: (progress: number) => void;
6
9
  playable: boolean;
7
- isPaidUser?: boolean;
8
10
  playlist: MediaItem[];
11
+ playlistSx?: string;
9
12
  previewImage: string;
10
13
  setMediaItem: (index: number) => void;
11
14
  subtitle: string;
12
15
  title: string;
13
16
  }
14
- export declare const AudioPlaylist: ({ activeIndex, onProgress, playable, isPaidUser, playlist, previewImage, setMediaItem, subtitle, title, }: AudioPlaylistProps) => React.JSX.Element;
17
+ export declare const AudioPlaylist: ({ activeIndex, bannerSx, darkMode, isPaidUser, onProgress, playlist, playlistSx, previewImage, setMediaItem, subtitle, title, }: AudioPlaylistProps) => React.JSX.Element;
package/dist/src/components/media/audio-playlist/playlist-item.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import 'react-h5-audio-player/lib/styles.css';
3
3
  interface PlaylistItemProps {
4
+ darkMode?: boolean;
4
5
  duration: number;
5
6
  onPause: () => void;
6
7
  onPlay: () => void;
@@ -10,5 +11,5 @@ interface PlaylistItemProps {
10
11
  thumbnail: string;
11
12
  title: string;
12
13
  }
13
- export declare const PlaylistItem: ({ duration, onPause, onPlay, playing, isPaidUser, progress, thumbnail, title, }: PlaylistItemProps) => React.JSX.Element;
14
+ export declare const PlaylistItem: ({ darkMode, duration, onPause, onPlay, playing, isPaidUser, progress, thumbnail, title, }: PlaylistItemProps) => React.JSX.Element;
14
15
  export {};
package/dist/src/components/surfaces/comment/comment.d.ts CHANGED
@@ -20,5 +20,6 @@ export interface CommentProps {
20
20
  userName: string;
21
21
  userReactions?: string[];
22
22
  userProfileUri: string;
23
+ sx?: string;
23
24
  }
24
- export declare const Comment: ({ avatarTooltipContent, avatarTooltipSx, content, createdDate, hasMoreReplies, id, onComment, onReact, onShowReplies, dropdown, reactionModal, reactions, replies, userImageUri, userName, userReactions, visibilityIcon, customPlaceHolder, userProfileUri, }: CommentProps) => React.JSX.Element;
25
+ export declare const Comment: ({ avatarTooltipContent, avatarTooltipSx, content, createdDate, hasMoreReplies, id, onComment, onReact, onShowReplies, dropdown, reactionModal, reactions, replies, userImageUri, userName, userReactions, visibilityIcon, customPlaceHolder, userProfileUri, sx, }: CommentProps) => React.JSX.Element;