@soul-refiner/design-system 2.3.17 → 2.3.19
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.
|
@@ -12,7 +12,11 @@
|
|
|
12
12
|
padding: 24px 48px;
|
|
13
13
|
background-color: var(--color-grey-10);
|
|
14
14
|
border-radius: 16px 16px 0px 0px;
|
|
15
|
-
`},React__default.default.createElement(heading.H,{as:"h6",$fontSize:24,$lineHeight:36,$semiBold:!0,$textAlign:"center"},i),React__default.default.createElement(box.Box,{$dir:"column"},React__default.default.createElement(heading.H,{as:"p",$bold:!0,$fontSize:32,$lineHeight:48,$textClampLines:5,$textAlign:"center"},d),React__default.default.createElement(paragraph.P,{as:"span",$color:"grey-4",$textAlign:"center"},"/month")),e),React__default.default.createElement(Divider,null),React__default.default.createElement(box.Box,{sx
|
|
15
|
+
`},React__default.default.createElement(heading.H,{as:"h6",$fontSize:24,$lineHeight:36,$semiBold:!0,$textAlign:"center"},i),React__default.default.createElement(box.Box,{$dir:"column"},React__default.default.createElement(heading.H,{as:"p",$bold:!0,$fontSize:32,$lineHeight:48,$textClampLines:5,$textAlign:"center"},d),React__default.default.createElement(paragraph.P,{as:"span",$color:"grey-4",$textAlign:"center"},"/month")),e),React__default.default.createElement(Divider,null),React__default.default.createElement(box.Box,{sx:`
|
|
16
|
+
position: relative;
|
|
17
|
+
background-color: var(--color-white);
|
|
18
|
+
border-radius: 0 0 16px 16px;
|
|
19
|
+
`,$display:"flex",$dir:"column"},React__default.default.createElement(paragraph.P,{sx:"padding: 16px 24px;"},t),React__default.default.createElement(Divider,{$sx:"margin: 0px 24px; width: calc(100% - 48px);"}),React__default.default.createElement(box.Box,{sx:"padding: 16px 24px; border-radius: 8px;",$dir:"column",$gap:8},React__default.default.createElement(paragraph.P,{$color:"grey-2",$mediumBold:!0},r),o.map((e,t)=>React__default.default.createElement(box.Box,{key:n+t.toString(36),$align:"flex-start",$gap:12},React__default.default.createElement(checkmark.Checkmark,{color:"green-5",sx:`
|
|
16
20
|
flex-shrink: 0;
|
|
17
21
|
padding: 2px;
|
|
18
22
|
border-radius: 50%;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),Player=require("react-h5-audio-player"),box=require("../../atoms/box/box.js"),paragraph=require("../../atoms/typography/paragraph.js"),fast_forward_30=require("../../../icons/audio_video/fast_forward_30.js"),pause=require("../../../icons/audio_video/pause.js"),play=require("../../../icons/audio_video/play.js"),rewind_30=require("../../../icons/audio_video/rewind_30.js"),volume_high=require("../../../icons/audio_video/volume_high.js"),volume_slash=require("../../../icons/audio_video/volume_slash.js"),progressBar=require("../audio/progress-bar.js"),constants=require("../constants.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),Player__default=_interopDefaultCompat(Player);const AudioPlayer=({autoPlay:e,autoPlayAfterSrcChange:t,onListen:a,onPause:r,onPlay:o,playing:l,progress:u,src:i,title:n,thumbnail:d})=>{const[s
|
|
2
|
+
"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),Player=require("react-h5-audio-player"),box=require("../../atoms/box/box.js"),paragraph=require("../../atoms/typography/paragraph.js"),fast_forward_30=require("../../../icons/audio_video/fast_forward_30.js"),pause=require("../../../icons/audio_video/pause.js"),play=require("../../../icons/audio_video/play.js"),rewind_30=require("../../../icons/audio_video/rewind_30.js"),volume_high=require("../../../icons/audio_video/volume_high.js"),volume_slash=require("../../../icons/audio_video/volume_slash.js"),progressBar=require("../audio/progress-bar.js"),constants=require("../constants.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),Player__default=_interopDefaultCompat(Player);const AudioPlayer=({autoPlay:e,autoPlayAfterSrcChange:t,onListen:a,onPause:r,onPlay:o,playing:l,progress:u,src:i,title:n,thumbnail:d})=>{const[c,s]=React__default.default.useState(null);var _=Math.ceil(((c?.audio.current?.duration||0)-u)/60),_=0===_?"":1===_?"Under 1 minute left":2===_?"1 minute left":_+" minutes left";React__default.default.useEffect(()=>{c?.audio.current&&!l?c.audio.current.pause():c?.audio.current&&c.audio.current.play()},[l,c?.audio.current]);return React__default.default.createElement(Wrapper,null,React__default.default.createElement(Player__default.default,{autoPlay:e,autoPlayAfterSrcChange:t,customIcons:{forward:React__default.default.createElement(fast_forward_30.FastForward30,{color:"grey-9",size:20}),pause:React__default.default.createElement(pause.Pause,{color:"grey-9",size:20}),play:React__default.default.createElement(play.Play,{color:"grey-9",size:20}),rewind:React__default.default.createElement(rewind_30.Rewind30,{color:"grey-9",size:20}),volume:React__default.default.createElement(volume_high.VolumeHigh,{color:"grey-9",size:20}),volumeMute:React__default.default.createElement(volume_slash.VolumeSlash,{color:"grey-9",size:20})},customAdditionalControls:[React__default.default.createElement(box.Box,{className:"image-title-container",$align:"center",$gap:56},React__default.default.createElement(Image__default.default,{alt:"",height:64,src:d,width:64,style:{height:64}}),React__default.default.createElement(box.Box,{sx:"max-width: 250px; height: 52px;",$dir:"column",$gap:16},React__default.default.createElement(paragraph.P,{$color:"white",$fontSize:16,$lineHeight:20,$semiBold:!0},n),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:16,$mediumBold:!0},_)))],customControlsSection:[Player.RHAP_UI.ADDITIONAL_CONTROLS,Player.RHAP_UI.MAIN_CONTROLS],customProgressBarSection:[React__default.default.createElement(progressBar.AudioProgressBar,{key:"audio-progress-"+u,duration:c?.audio.current?.duration||0,progress:u,onSeek:e=>{c?.audio.current&&(c.audio.current.currentTime=c.audio.current.duration*e)}}),Player.RHAP_UI.VOLUME_CONTROLS,Player.RHAP_UI.CURRENT_TIME,React__default.default.createElement(paragraph.P,{$color:"white",$fontSize:14}," ","/"," "),Player.RHAP_UI.DURATION],hasDefaultKeyBindings:!1,layout:"horizontal-reverse",listenInterval:constants.LISTEN_CALLBACK_INTERVAL,onListen:()=>{c?.audio.current?.currentTime&&a&&a(c.audio.current.currentTime)},onPause:r,onPlay:o,progressJumpSteps:{backward:constants.FF_INTERVAL,forward:constants.FF_INTERVAL},ref:s,src:i}))},Wrapper=styled__default.default.div`
|
|
3
3
|
position: fixed;
|
|
4
4
|
width: 100%;
|
|
5
5
|
bottom: 0px;
|