@soul-refiner/design-system 2.14.34 → 2.14.36
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.
package/README.md
ADDED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
# Soul Refiner Design System
|
|
2
|
+
|
|
3
|
+
A centralized, reusable design system used across all Soul Refiner web applications to maintain visual consistency, streamline development, and speed up feature delivery.
|
|
4
|
+
|
|
5
|
+
## Package Info
|
|
6
|
+
|
|
7
|
+
- **Name:** `@soul-refiner/design-system`
|
|
8
|
+
- **Version:** `2.14.17`
|
|
9
|
+
- **License:** MIT
|
|
10
|
+
- **Registry:** [npmjs.org](https://registry.npmjs.org)
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
## What’s Included
|
|
15
|
+
|
|
16
|
+
This design system is built using modern, flexible libraries, making it easy to compose and extend UI components:
|
|
17
|
+
|
|
18
|
+
### Frameworks & Libraries
|
|
19
|
+
|
|
20
|
+
| Purpose | Technology |
|
|
21
|
+
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
22
|
+
| Component Library | [React](https://reactjs.org), [Styled-Components](https://styled-components.com), [MUI](https://mui.com), [Radix UI](https://www.radix-ui.com/) |
|
|
23
|
+
| Utility Styling | [TailwindCSS](https://tailwindcss.com), [tailwind-merge](https://github.com/dcastil/tailwind-merge), [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate) |
|
|
24
|
+
| Rich Text | [Slate.js](https://docs.slatejs.org/), [Plate Editor](https://plate.udecode.io/) |
|
|
25
|
+
| Media Support | `react-player`, `react-h5-audio-player` |
|
|
26
|
+
| Tooling & Build | Rollup, Storybook, Prettier, Husky, Chromatic |
|
|
27
|
+
| Emoji Support | Emoji Mart |
|
|
28
|
+
| Drag-and-Drop | `react-dnd`, `react-dnd-html5-backend` |
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
## Features
|
|
33
|
+
|
|
34
|
+
- Reusable UI components (inputs, buttons, tooltips, date pickers, etc.)
|
|
35
|
+
- Theme consistency across apps
|
|
36
|
+
- Built with Radix UI and MUI for accessibility and interactivity
|
|
37
|
+
- TypeScript support with full typings
|
|
38
|
+
- Easy integration with apps using `next`, `react`, `styled-components`
|
|
39
|
+
- Visual testing with Storybook and Chromatic
|
|
40
|
+
- Documentation and live examples via Storybook
|
|
41
|
+
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
## Development Setup
|
|
45
|
+
|
|
46
|
+
### Install dependencies
|
|
47
|
+
|
|
48
|
+
```bash
|
|
49
|
+
yarn install
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Build the component library
|
|
53
|
+
|
|
54
|
+
```bash
|
|
55
|
+
yarn build
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Run Storybook locally
|
|
59
|
+
|
|
60
|
+
```bash
|
|
61
|
+
yarn storybook
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### Format code
|
|
65
|
+
|
|
66
|
+
```bash
|
|
67
|
+
yarn format
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
---
|
|
71
|
+
|
|
72
|
+
## Getting Started - Adding the design system to your application
|
|
73
|
+
|
|
74
|
+
### 1. Install via npm
|
|
75
|
+
|
|
76
|
+
```bash
|
|
77
|
+
npm install @soul-refiner/design-system
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### or using yarn
|
|
81
|
+
|
|
82
|
+
```bash
|
|
83
|
+
yarn add @soul-refiner/design-system
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
#### Important to note: Issues with Storybook and Fixes
|
|
87
|
+
|
|
88
|
+
- [Clickup Doc](https://app.clickup.com/24491279/v/dc/qbd8f-2130/qbd8f-8793)
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var React=require("react"),styled=require("styled-components"),date$1=require("../../../common/date.js"),
|
|
2
|
+
"use strict";var React=require("react"),styled=require("styled-components"),date$1=require("../../../common/date.js"),paragraph=require("../../atoms/typography/paragraph.js"),chevron_left=require("../../../icons/arrow/chevron_left.js"),chevron_right=require("../../../icons/arrow/chevron_right.js"),calendar=require("../../../icons/time/calendar.js"),date=require("../../../utils/date.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const CalendarInput=({selectedDate:l,onSelect:r,disablePastDates:o})=>{const d=new Date;d.setHours(0),d.setMinutes(0),d.setSeconds(0),d.setMilliseconds(0),new Date(d).setDate(1);const t=React__default.default.useRef(null),[e,n]=React__default.default.useState(!1),[i,a]=React__default.default.useState(()=>l?.toDateString()||(new Date).toDateString());React__default.default.useEffect(()=>{l&&a(l.toDateString())},[l]);var u=()=>n(e=>!e);const c=React__default.default.useCallback(e=>{var e=e.currentTarget,t=e.getAttribute("data-day"),a=e.getAttribute("data-month"),e=e.getAttribute("data-year");t&&a&&e&&(a=new Date(a+`/${t}/`+e),r(a),requestAnimationFrame(()=>{n(!1)}))},[]);var s=date.buildCalendar(new Date(i).getMonth()+1,new Date(i).getFullYear()),f=React__default.default.useMemo(()=>{var e,t,a;return l?([e,t,a]=(l||new Date).toLocaleString("default",{year:"2-digit",month:"2-digit",day:"2-digit"}).split("/"),e+` / ${t} / `+a):""},[l]);return React__default.default.createElement(Wrapper,{onBlurCapture:e=>{t?.current&&!t?.current?.contains(e.relatedTarget)&&n(!1)},ref:t,tabIndex:0},React__default.default.createElement(InputWrapper,null,React__default.default.createElement(Input,{value:f,onFocus:u,style:{letterSpacing:"1px",fontSize:"16px",lineHeight:"24px"},readOnly:!0}),React__default.default.createElement(calendar.Calendar,{onClick:u})),e&&React__default.default.createElement(DateSelector,null,React__default.default.createElement(InnerWrapper,null,React__default.default.createElement("div",null,React__default.default.createElement(MonthBar,null,React__default.default.createElement(Arrow,{onClick:()=>{a(e=>{e=new Date(e);return e.setMonth(e.getMonth()-1),e.toDateString()})}},React__default.default.createElement(chevron_left.ChevronLeft,{size:24})),React__default.default.createElement(paragraph.P,null,Object.values(date$1.MONTHS)[Math.max(0,Math.min(new Date(i).getMonth(),11))]+" "+new Date(i).getFullYear()),React__default.default.createElement(Arrow,{onClick:()=>{a(e=>{e=new Date(e);return e.setMonth(e.getMonth()+1),e.toDateString()})}},React__default.default.createElement(chevron_right.ChevronRight,{size:24}))),React__default.default.createElement(WeekdayWrapper,null,Object.values(date$1.WEEKDAYS).map(e=>React__default.default.createElement(paragraph.P,{key:e},e))),React__default.default.createElement(Calendar,null,s.map((e,t)=>React__default.default.createElement(Week,{key:"week-"+t.toString(36)},e.map((e,t)=>{var a=new Date(`${e[1]}/${e[2]}/`+e[0]),r=0<d.getTime()-a.getTime(),n=e[1]!==date.zeroPad(new Date(i).getMonth()+1,2),r=o?r:n,n=Math.abs(a.getTime()-d.getTime())<.5,a=l&&l.getTime()===a.getTime();return React__default.default.createElement(Day,{className:((n?"today":"")+(r?" not-current":"")+(a?" selected":"")).trim(),"data-day":e[2],"data-month":e[1],"data-year":e[0],key:"day-"+t.toString(36),onClick:c},(""+e[2]).startsWith("0")?(""+e[2])[1]:e[2])}))))))))},Wrapper=styled.styled.div`
|
|
3
3
|
position: relative;
|
|
4
4
|
width: fit-content;
|
|
5
5
|
font-family: var(--font-inter);
|
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
|
|
13
13
|
`,InnerWrapper=styled.styled.div`
|
|
14
14
|
display: flex;
|
|
15
|
-
gap:
|
|
16
|
-
padding:
|
|
15
|
+
gap: 20px;
|
|
16
|
+
padding: 20px;
|
|
17
17
|
position: relative;
|
|
18
18
|
border-radius: 25px;
|
|
19
19
|
|
|
@@ -32,13 +32,13 @@
|
|
|
32
32
|
display: flex;
|
|
33
33
|
justify-content: space-between;
|
|
34
34
|
align-items: center;
|
|
35
|
-
margin-bottom:
|
|
35
|
+
margin-bottom: 18px;
|
|
36
36
|
user-select: none;
|
|
37
37
|
`,Arrow=styled.styled.button`
|
|
38
38
|
appearance: none;
|
|
39
39
|
border: none;
|
|
40
40
|
outline: none;
|
|
41
|
-
padding:
|
|
41
|
+
padding: 8px;
|
|
42
42
|
display: flex;
|
|
43
43
|
justify-content: center;
|
|
44
44
|
align-items: center;
|
|
@@ -55,17 +55,17 @@
|
|
|
55
55
|
}
|
|
56
56
|
`,WeekdayWrapper=styled.styled.div`
|
|
57
57
|
display: flex;
|
|
58
|
-
gap:
|
|
58
|
+
gap: 20px;
|
|
59
59
|
user-select: none;
|
|
60
60
|
`,Calendar=styled.styled.div`
|
|
61
61
|
display: flex;
|
|
62
62
|
flex-direction: column;
|
|
63
|
-
gap:
|
|
64
|
-
margin:
|
|
63
|
+
gap: 16px;
|
|
64
|
+
margin: 16px 0px;
|
|
65
65
|
user-select: none;
|
|
66
66
|
`,Week=styled.styled.div`
|
|
67
67
|
display: flex;
|
|
68
|
-
gap:
|
|
68
|
+
gap: 20px;
|
|
69
69
|
border-radius: 24px;
|
|
70
70
|
`,Day=styled.styled.button`
|
|
71
71
|
outline: none;
|
|
@@ -74,8 +74,8 @@
|
|
|
74
74
|
display: flex;
|
|
75
75
|
align-items: center;
|
|
76
76
|
justify-content: center;
|
|
77
|
-
width:
|
|
78
|
-
height:
|
|
77
|
+
width: 28px;
|
|
78
|
+
height: 28px;
|
|
79
79
|
border-radius: 50%;
|
|
80
80
|
cursor: pointer;
|
|
81
81
|
font-family: var(--font-inter);
|
|
@@ -101,10 +101,6 @@
|
|
|
101
101
|
background-color: var(--color-blue-9);
|
|
102
102
|
}
|
|
103
103
|
}
|
|
104
|
-
`,BottomWrapper=styled.styled.div`
|
|
105
|
-
display: flex;
|
|
106
|
-
justify-content: flex-end;
|
|
107
|
-
gap: 18px;
|
|
108
104
|
`,Input=styled.styled.input`
|
|
109
105
|
width: 100%;
|
|
110
106
|
padding: 0px;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var React=require("react"),Image=require("next/image"),ReactPlayer=require("react-player"),styled=require("styled-components"),button=require("../../actions/button/button.js"),box=require("../../atoms/box/box.js"),tabs=(require("../../navigation/breadcrumb/breadcrumb.js"),require("../../navigation/inner/inner.js"),require("../../navigation/tabs/tabs.js")),select_item=require("../../../icons/basic/select_item.js"),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js"),lock_circle=require("../../../icons/security/lock_circle.js"),play_solid=require("../../../icons/audio_video/play_solid.js"),localStorage=require("../../../utils/local-storage.js"),playlistItem=require("./playlist-item.js"),misc=require("./misc.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image),ReactPlayer__default=_interopDefaultCompat(ReactPlayer);const RESOLUTION=1280/720,MIN_PIP_HEIGHT=200,MIN_PIP_WIDTH=RESOLUTION*MIN_PIP_HEIGHT,VideoPlayer=({activeIndex:e,pip:t,playable:a,playlist:l,onClickPreview:
|
|
2
|
+
"use strict";var React=require("react"),Image=require("next/image"),ReactPlayer=require("react-player"),styled=require("styled-components"),button=require("../../actions/button/button.js"),box=require("../../atoms/box/box.js"),tabs=(require("../../navigation/breadcrumb/breadcrumb.js"),require("../../navigation/inner/inner.js"),require("../../navigation/tabs/tabs.js")),select_item=require("../../../icons/basic/select_item.js"),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js"),lock_circle=require("../../../icons/security/lock_circle.js"),play_solid=require("../../../icons/audio_video/play_solid.js"),localStorage=require("../../../utils/local-storage.js"),playlistItem=require("./playlist-item.js"),misc=require("./misc.js"),chevron_down=require("../../../icons/arrow/chevron_down.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image),ReactPlayer__default=_interopDefaultCompat(ReactPlayer);const RESOLUTION=1280/720,MIN_PIP_HEIGHT=200,MIN_PIP_WIDTH=RESOLUTION*MIN_PIP_HEIGHT,VideoPlayer=({activeIndex:e,pip:t,playable:a,playlist:l,onClickPreview:W,onPipChange:i,onProgress:L,onStart:M,orientation:r,setMediaItem:q,onShowAllPlaylist:o,forwardedRef:n,subtitle:d,title:c,trailer:s,additionalMedia:u})=>{const p="undefined"!=typeof window?window:{innerHeight:0,innerWidth:600};var f=p.innerHeight/3,g=RESOLUTION*(p.innerHeight/3),h=React__default.default.useRef(null);const m=n||h,_=React__default.default.useRef({});n=React__default.default.useRef(null);const x=React__default.default.useRef(null),[b,y]=React__default.default.useState(0),[w,N]=React__default.default.useState(!1),[R,v]=React__default.default.useState(!a),[E,I]=React__default.default.useState(l?.[e].id||null),[A,O]=localStorage.useLocalStorage("videoPipHeight",f),[B,V]=localStorage.useLocalStorage("videoPipWidth",g),[U,X]=localStorage.useLocalStorage("video-volume",1),[S,Y]=localStorage.useLocalStorage("videoPipRight",16),[F,G]=localStorage.useLocalStorage("videoPipBottom",16),[$,J]=React__default.default.useState([0,0]),[P,k]=React__default.default.useState([0,0]),[z,K]=React__default.default.useState(!1),[Q,Z]=React__default.default.useState(0),[D,ee]=React__default.default.useState([]),[te,ae]=React__default.default.useState([]),C=R?s:z?D?.[Q]:l?.[e];React__default.default.useEffect(()=>{u&&(ee(u.filter(e=>"VIDEO"===e.type)),ae(u.filter(e=>"FILE"===e.type)))},[u]),React__default.default.useEffect(()=>{const e=()=>{const e=_.current[E];e&&setTimeout(()=>{e.scrollIntoView({behavior:"smooth",block:"center"})},0)};return l?.length&&E&&("undefined"!=typeof window&&window.addEventListener("load",e),e()),()=>{"undefined"!=typeof window&&window.removeEventListener("load",e)}},[l,E]);const H=(e,t=!1)=>{v(!1),K(t),(t?Z:q)(e)};h=()=>{N(e=>!e),o&&o(!w)};const T=(e,t)=>{var a;!x?.current||(a=x.current.getBoundingClientRect()).x<16||a.y<16||e>=2*p.innerWidth/3||t>=2*p.innerHeight/3||e<MIN_PIP_WIDTH||t<MIN_PIP_HEIGHT||(V(e),O(t))};f=()=>{var e;x?.current&&(e=x.current.getBoundingClientRect(),k([e.width,e.height]))},g=e=>{var t,a,l,i;x?.current&&(t=e.currentTarget.getAttribute("class")?.split(" ")||[],a=window.innerWidth-e.clientX,i=window.innerHeight-e.clientY,e.clientX<0||e.clientY<0||(e.stopPropagation(),e.preventDefault(),t.includes("top")?(e=Math.round(i-$[1]+P[1]),l=Math.round(e*RESOLUTION),T(l,e)):t.includes("bottom")?(l=Math.round($[1]-i+P[1]),e=Math.round(l*RESOLUTION),T(e,l)):t.includes("left")?(i=Math.round(a-$[0]+P[0]),e=Math.round(i/RESOLUTION),T(i,e)):t.includes("right")&&(l=Math.round($[0]-a+P[0]),i=Math.round(l/RESOLUTION),T(l,i))))};const j=React.useMemo(()=>{var e=[{label:"All lessons",color:"dark"}];return u?.length&&e.push({label:"Resources",color:"dark"}),e.push({label:"Trailer",color:"dark"}),e},[u]);var e=b===j.length-1,le=u&&0<b&&b<j.length-1;return React__default.default.useEffect(()=>{b>=j.length&&y(0)},[j,b]),C?React__default.default.createElement(Wrapper,{$orientation:r},React__default.default.createElement(InnerWrapper,{$orientation:r,$playable:a||R||z},"vertical"===r&&React__default.default.createElement(box.Box,{className:"pip-trigger-vertical pip-trigger",$dir:"column",$gap:4,sx:"margin: 24px;"},React__default.default.createElement(heading.H,{as:"h2",$bold:!0,$color:"white",$fontSize:28,$lineHeight:36},c),React__default.default.createElement(paragraph.P,{as:"h3",$bold:!0,$color:"grey-8"},d)),t&&React__default.default.createElement(ClosePip,null),React__default.default.createElement(PipWrapper,{$pip:!!t,draggable:t&&0===P[0],onDrag:t?e=>{var t,a,l,i;e.clientX<0||e.clientY<0||(t=window.innerWidth-e.clientX,e=window.innerHeight-e.clientY,a=S+(t-$[0]),l=F+(e-$[1]),x?.current&&(i=x.current.getBoundingClientRect(),a&&16<=a&&a<=p.innerWidth-16-i.width&&Y(a),l)&&16<=l&&l<=p.innerHeight-16-i.height&&G(l),J([t,e]))}:void 0,onMouseDown:e=>{J([window.innerWidth-e.clientX,window.innerHeight-e.clientY])},ref:x,style:t?{bottom:F,height:A,right:S,width:B}:void 0},t&&React__default.default.createElement(button.Button,{className:"close-pip",icon:React__default.default.createElement(select_item.SelectItem,{color:"grey-0"}),onClick:e=>{e.stopPropagation(),i&&i(!1)},size:"large",sx:`
|
|
3
3
|
display: none;
|
|
4
4
|
position: absolute;
|
|
5
5
|
top: 8px;
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
svg {
|
|
9
9
|
fill: var(--color-white);
|
|
10
10
|
}
|
|
11
|
-
`,type:"text"}),React__default.default.createElement(ReactPlayer__default.default,{className:"player",config:{file:{attributes:{crossOrigin:"true",disablePictureInPicture:"true"},forceHLS:!0,hlsOptions:{autoStartLoad:!0},tracks:(C?.subtitles||[]).map(e=>({kind:"subtitles",label:e.label,src:e.src,srcLang:e.locale}))}},controls:!0,height:"100%",light:React__default.default.createElement(Image__default.default,{alt:"thumbnail for "+c,layout:"fill",priority:!0,quality:100,style:{objectFit:"contain"},src:C.thumbnail}),progressInterval:4e3,onProgress:e=>
|
|
11
|
+
`,type:"text"}),React__default.default.createElement(ReactPlayer__default.default,{className:"player",config:{file:{attributes:{crossOrigin:"true",disablePictureInPicture:"true"},forceHLS:!0,hlsOptions:{autoStartLoad:!0},tracks:(C?.subtitles||[]).map(e=>({kind:"subtitles",label:e.label,src:e.src,srcLang:e.locale}))}},controls:!0,height:"100%",light:React__default.default.createElement(Image__default.default,{alt:"thumbnail for "+c,layout:"fill",priority:!0,quality:100,style:{objectFit:"contain"},src:C.thumbnail}),progressInterval:4e3,onProgress:e=>L(e,z),onStart:M,onClickPreview:W,onReady:()=>{R||z||0===m?.current?.getCurrentTime()&&0!==C?.progress&&m.current.seekTo(C.progress)},pip:t,playIcon:a||R||z?React__default.default.createElement(play_solid.PlaySolid,{color:"white",size:24,sx:"position: absolute; width: 54px; height: 54px;"}):React__default.default.createElement(lock_circle.LockCircle,{color:"white",size:24,sx:"position: absolute; width: 54px; height: 54px;"}),playing:a,ref:m,url:C.src,width:"100%",volume:U,onVolumeChange:e=>{X(e.target.volume)}}),t&&React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(Resizer,{className:"top horizontal",draggable:"false",onDrag:g,onMouseDown:f,onDragEnd:()=>k([0,0]),tabIndex:0}),React__default.default.createElement(Resizer,{className:"bottom horizontal",draggable:"false",onDrag:g,onMouseDown:f,onDragEnd:()=>k([0,0]),tabIndex:0}),React__default.default.createElement(Resizer,{className:"right vertical",draggable:"false",onDrag:g,onMouseDown:f,onDragEnd:()=>k([0,0]),tabIndex:0}),React__default.default.createElement(Resizer,{className:"left vertical",draggable:"false",onDrag:g,onMouseDown:f,onDragEnd:()=>k([0,0]),tabIndex:0}))),"horizontal"===r&&React__default.default.createElement(Side,null,React__default.default.createElement(ScalableContainerWrapper,{$showingAll:w},React__default.default.createElement(box.Box,{$dir:"column",$gap:4},React__default.default.createElement(heading.H,{as:"h2",$bold:!0,$color:"white",$fontSize:28,$lineHeight:36},c),React__default.default.createElement(paragraph.P,{as:"h3",$bold:!0,$color:"grey-8"},d)),React__default.default.createElement(box.Box,{$align:"center"},React__default.default.createElement(tabs.Tabs,{activeIndex:b,onChange:e=>y(e),items:j,size:"medium",sx:"justify-content: flex-start;"}),React__default.default.createElement(misc.ButtonViewAll,{showingAll:w,orientation:r,toggleShowingAll:h})),0===b?React__default.default.createElement(HorizontalPlaylistWrapper,{ref:n,$showingAll:w},l.map((t,e)=>React__default.default.createElement(playlistItem.PlaylistItem,{key:t.id,playlistItemId:t.id,onClick:()=>{I(t.id),H(e)},title:t.title,thumbnail:t.thumbnail,shortDescription:t.shortDescription,duration:t.duration,progress:t.progress,playable:a,nowplaying:E,comingSoon:t.comingSoon||!1,ref:e=>{_.current[t.id]=e}}))):le?React__default.default.createElement(React__default.default.Fragment,null,!!D.length&&React__default.default.createElement("div",{style:{display:"flex",alignItems:"center",gap:16}},React__default.default.createElement(chevron_down.ChevronDown,{size:20,color:"white"}),React__default.default.createElement(paragraph.P,{$color:"white",$fontSize:16,$semiBold:!0},"Leaders")),D.map((t,e)=>React__default.default.createElement(playlistItem.PlaylistItem,{key:t.id,playlistItemId:t.id,onClick:()=>{I(t.id),H(e,!0)},progress:0,title:t.name,thumbnail:t.thumbnail||"",shortDescription:t.shortDescription,playable:!0,nowplaying:E,ref:e=>{_.current[t.id]=e}})),!!te.length&&React__default.default.createElement("div",{style:{display:"flex",alignItems:"center",gap:16}},React__default.default.createElement(chevron_down.ChevronDown,{size:20,color:"white"}),React__default.default.createElement(paragraph.P,{$color:"white",$fontSize:16,$semiBold:!0},"Tools & Documents")),te.map(e=>React__default.default.createElement(playlistItem.PlaylistItem,{key:e.id,onClick:()=>{window.open(e.src,"_blank")},title:e.name,thumbnail:e.thumbnail||"",shortDescription:e.shortDescription,playable:!0}))):e&&s?React__default.default.createElement(misc.TrailerListItem,{title:c,handleSetPlayingTrailer:v,trailer:s}):null)),"vertical"===r&&React__default.default.createElement(box.Box,{$dir:"column",$gap:24,sx:w?"z-index: 3; position:relative;":"height: auto"},React__default.default.createElement(ScalableContainerWrapperVertical,{$showingAll:w},React__default.default.createElement(box.Box,{sx:"padding: 0 1.5rem;",$align:"center"},React__default.default.createElement(tabs.Tabs,{activeIndex:b,onChange:e=>y(e),items:j,size:"medium",sx:"justify-content: flex-start;"}),React__default.default.createElement(misc.ButtonViewAll,{showingAll:w,orientation:r,toggleShowingAll:h})),[React__default.default.createElement(VerticalPlaylistWrapper,{ref:n,$showingAll:w},l.map((t,e)=>React__default.default.createElement(playlistItem.PlaylistItem,{comingSoon:t.comingSoon||!1,nowplaying:E,playlistItemId:t.id,duration:t.duration,key:t.id,ref:e=>{_.current[t.id]=e},onClick:()=>{H(e),I(t.id)},playable:a,progress:t.progress,shortDescription:t.shortDescription,thumbnail:t.thumbnail,title:t.title}))),!!s&&React__default.default.createElement(box.Box,{$dir:"column",$gap:8,sx:"margin: 0px 24px;"},React__default.default.createElement(misc.TrailerListItem,{title:c,handleSetPlayingTrailer:v,trailer:s}))][b])))):null},Wrapper=styled.styled.div`
|
|
12
12
|
display: flex;
|
|
13
13
|
justify-content: center;
|
|
14
14
|
background-color: var(--color-grey-0);
|