@soul-refiner/design-system 1.6.1-alpha.3 → 1.6.2

package/dist/components/input/text_area/text_area.js

@@ -0,0 +1,110 @@
+'use client';
+import React from 'react';
+import styled from 'styled-components';
+import { Box } from '../../atoms/box/box';
+import { CheckmarkCircle, AlertCircle } from '../../../icons';
+export const TextArea = ({ bg = 'var(--color-blue-10)', disabled, helperText, icon, label, maxCharacters, minHeight, minWidth, name, onChange, placeholder, resize = false, successful, sx, value, warning, }) => {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (ref.current) {
+            ref.current.style.height = `${minHeight}px`;
+            const scrollHeight = ref.current.scrollHeight;
+            ref.current.style.height = scrollHeight + 'px';
+        }
+    }, [ref.current, value]);
+    return (React.createElement(Label, { "$disabled": disabled, "$sx": sx },
+        label,
+        React.createElement(InputWrapper, { "$bg": bg, "$minWidth": minWidth, "$successful": successful, "$warning": warning },
+            icon,
+            React.createElement(TextAreaElement, { disabled: disabled, name: name, onChange: onChange, placeholder: placeholder, ref: ref, value: maxCharacters
+                    ? value.slice(0, maxCharacters - 1)
+                    : value, "$minHeight": minHeight, "$resize": resize }),
+            successful && React.createElement(CheckmarkCircle, { color: "green-3" }),
+            warning && React.createElement(AlertCircle, { color: "red-4" })),
+        React.createElement(Box, { "$gap": 16, "$justify": "space-between" },
+            helperText && React.createElement(HelperText, null, helperText),
+            maxCharacters && (React.createElement(MaxCharactersText, null,
+                value.length,
+                " / ",
+                maxCharacters)))));
+};
+const Label = styled.label `
+  width: 100%;
+  display: flex;
+  gap: 4px;
+  flex-flow: column nowrap;
+  color: var(--color-grey-2);
+  font-family: var(--font-inter);
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 26px;
+
+  ${({ $disabled }) => $disabled
+    ? `
+    color: var(--color-grey-7) !important;
+    & > * {
+      color: var(--color-grey-7) !important;
+    }
+    & > div:first-of-type {
+      background-color: var(--color-grey-9) !important;
+    }`
+    : ''}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const InputWrapper = styled.div `
+  min-width: ${({ $minWidth }) => ($minWidth ? $minWidth + 'px;' : '')}
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 12px;
+  background-color: ${({ $bg }) => $bg};
+  border-radius: 8px;
+  border: 1px solid transparent;
+
+  &:hover {
+    border-color: var(--color-grey-8);
+  }
+
+  &:focus-within {
+    border-color: var(--color-primary-blue-2);
+  }
+
+  ${({ $successful }) => $successful ? 'border-color: var(--color-green-3) !important;' : ''}
+  ${({ $warning }) => $warning ? 'border-color: var(--color-red-4) !important;' : ''}
+`;
+const TextAreaElement = styled.textarea `
+  min-width: ${({ $minHeight }) => ($minHeight ? $minHeight - 24 + 'px;' : '')}
+  padding: 0px;
+  flex: 1;
+  font-family: var(--font-inter);
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--color-grey-3);
+  border: none;
+  outline: none;
+  border-radius: 8px;
+  background-color: transparent;
+
+  &::placeholder {
+    color: var(--color-grey-6);
+  }
+
+  ${({ $resize }) => ($resize ? '' : 'resize: none;')}
+`;
+const HelperText = styled.p `
+  color: var(--color-grey-4);
+  font-family: var(--font-inter);
+  font-size: 14px;
+  line-height: 20px;
+`;
+const MaxCharactersText = styled.p `
+  text-align: right;
+  color: var(--color-grey-6);
+  font-family: var(--font-inter);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+`;

package/dist/components/input/text_input/index.js

@@ -0,0 +1 @@
+export { TextInput } from './text_input';

package/dist/components/input/text_input/text_input.d.ts

@@ -13,7 +13,6 @@ export type Props = {
     name?: string;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
     onMultipleChange?: (values: string[]) => void;
-    onSubmit?: React.FormEventHandler<HTMLInputElement>;
     placeholder?: string;
     size?: TextInputSize;
     sx?: string;

package/dist/components/input/text_input/text_input.js

@@ -0,0 +1,147 @@
+'use client';
+import React from 'react';
+import styled from 'styled-components';
+import { Chip } from '../../feedback/chip/chip';
+import { CheckmarkCircle, AlertCircle } from '../../../icons';
+export const TextInput = ({ bg = 'var(--color-blue-10)', disabled, helperText, icon, label, maxCharacters, multiple, name, onChange, onMultipleChange, placeholder, size = 'large', successful, sx, value, warning, type = 'text', placeIconAtTheEnd = false, inputSx, }) => {
+    const id = React.useId();
+    const isMultiple = multiple;
+    const [multipleValueToAdd, setMultipleValueToAdd] = React.useState('');
+    const handleMultipleValueToAdd = (event) => {
+        setMultipleValueToAdd(event.target.value);
+    };
+    /**
+     * when there is no text in the input,
+     * pop the previous multiple value out
+     */
+    const handleMultipleValueDelete = (event) => {
+        if (value.length &&
+            onMultipleChange &&
+            !multipleValueToAdd &&
+            (event.key === 'Delete' || event.key === 'Backspace')) {
+            onMultipleChange(value.slice(0, value.length - 1));
+        }
+    };
+    /**
+     * when a user presses enter (submit) add the input to the values
+     * but don't add the same value twice
+     */
+    const handleMultipleAdd = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        const alreadyHasValue = value.includes(multipleValueToAdd);
+        if (onMultipleChange && !alreadyHasValue) {
+            onMultipleChange([...value, multipleValueToAdd]);
+        }
+        setMultipleValueToAdd('');
+    };
+    /**
+     * when the user clicks on the chip to remove it, remove it from the value
+     */
+    const handleMultipleItemRemoval = (removalItem) => {
+        onMultipleChange &&
+            onMultipleChange(value.filter((item) => item !== removalItem));
+    };
+    return (React.createElement(Label, { "$disabled": disabled, "$size": size, "$sx": sx },
+        label,
+        React.createElement(InputWrapper, { "$bg": bg, "$size": size, "$successful": successful, "$warning": warning },
+            !placeIconAtTheEnd && icon,
+            isMultiple && (React.createElement(MultipleInputWrapper, { onSubmit: handleMultipleAdd },
+                value.filter(Boolean).map((item, index) => (React.createElement(Chip, { key: id + item + index, color: "blue", size: "small", onDismiss: () => handleMultipleItemRemoval(item) }, item))),
+                React.createElement(Input, { onChange: handleMultipleValueToAdd, onKeyDown: handleMultipleValueDelete, value: multipleValueToAdd, "$size": size, "$sx": inputSx }))),
+            !isMultiple && (React.createElement(Input, { disabled: disabled, name: name, onChange: onChange, placeholder: placeholder, value: type === 'number'
+                    ? value
+                    : maxCharacters
+                        ? value?.slice(0, maxCharacters - 1) || ''
+                        : value, "$size": size, type: type, "$sx": inputSx })),
+            maxCharacters && type !== 'number' && !placeIconAtTheEnd && (React.createElement(MaxCharactersText, { "$size": size },
+                value?.length || 0,
+                " / ",
+                maxCharacters)),
+            placeIconAtTheEnd && icon,
+            successful && React.createElement(CheckmarkCircle, { color: "green-3" }),
+            warning && React.createElement(AlertCircle, { color: "red-4" })),
+        helperText && React.createElement(HelperText, { "$size": size }, helperText)));
+};
+const Label = styled.div `
+  width: 100%;
+  display: flex;
+  gap: 4px;
+  flex-flow: column nowrap;
+  color: var(--color-grey-2);
+  font-family: var(--font-inter);
+  font-size: ${({ $size }) => ($size === 'small' ? 16 : 18)}px;
+  font-weight: 500;
+  line-height: ${({ $size }) => ($size === 'small' ? 24 : 26)}px;
+
+  ${({ $disabled }) => $disabled
+    ? `
+    color: var(--color-grey-7) !important;
+    & > * {
+      color: var(--color-grey-7) !important;
+    }
+    & > div {
+      background-color: var(--color-grey-9) !important;
+    }`
+    : ''}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const InputWrapper = styled.div `
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  box-sizing: border-box;
+  padding: ${({ $size }) => ($size === 'small' ? '6px 12px' : '12px')};
+  background-color: ${({ $bg }) => $bg};
+  border-radius: 8px;
+  border: 1px solid transparent;
+
+  &:hover {
+    border-color: var(--color-grey-8);
+  }
+
+  &:focus-within {
+    border-color: var(--color-primary-blue-2);
+  }
+
+  ${({ $successful }) => $successful ? 'border-color: var(--color-green-3) !important;' : ''}
+  ${({ $warning }) => $warning ? 'border-color: var(--color-red-4) !important;' : ''}
+`;
+const Input = styled.input `
+  padding: 0px;
+  flex: 1;
+  font-family: var(--font-inter);
+  font-size: ${({ $size }) => ($size === 'small' ? 14 : 16)}px;
+  line-height: ${({ $size }) => ($size === 'small' ? 20 : 24)}px;
+  color: var(--color-grey-3);
+  border: none;
+  outline: none;
+  border-radius: 8px;
+  background-color: transparent;
+
+  &::placeholder {
+    color: var(--color-grey-6);
+  }
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const HelperText = styled.span `
+  color: var(--color-grey-4);
+  font-family: var(--font-inter);
+  font-size: ${({ $size }) => ($size === 'small' ? 12 : 14)}px;
+  line-height: ${({ $size }) => ($size === 'small' ? 16 : 20)}px;
+`;
+const MaxCharactersText = styled.span `
+  color: var(--color-grey-6);
+  font-family: var(--font-inter);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+`;
+const MultipleInputWrapper = styled.form `
+  display: flex;
+  flex-flow: row wrap;
+  gap: 8px 16px;
+`;

package/dist/components/input/time/index.js

@@ -0,0 +1 @@
+export { Time } from './time';

package/dist/components/input/time/time.js

@@ -0,0 +1,69 @@
+'use client';
+import { Dropdown } from '../../actions/dropdown';
+import React from 'react';
+import styled from 'styled-components';
+import { Clock } from '../../../icons';
+export const Time = ({ selectedTime, setTime, selectedPeriod, setPeriod, }) => {
+    const hours = React.useMemo(() => {
+        const hours = [];
+        for (let i = 1; i <= 12; i++) {
+            hours.push(`${i}:00`);
+            hours.push(`${i}:15`);
+            hours.push(`${i}:30`);
+            hours.push(`${i}:45`);
+        }
+        return hours;
+    }, []);
+    return (React.createElement(Dropdown, { options: hours.map((hour) => ({
+            value: hour,
+            label: hour,
+        })), containerSx: "height: 440px;", trigger: React.createElement(InputWrapper, null,
+            React.createElement(Input, { readOnly: true, value: `${selectedTime} ${selectedPeriod}` }),
+            React.createElement(Clock, null)), additionalOptions: [
+            {
+                label: 'AM',
+                value: 'AM',
+            },
+            {
+                label: 'PM',
+                value: 'PM',
+            },
+        ], onChange: (event) => {
+            const value = event.target.getAttribute('data-value') ?? '';
+            setTime(value);
+        }, additionalOnChange: setPeriod, defaultValue: selectedTime, defaultAdditionalValue: selectedPeriod }));
+};
+const InputWrapper = styled.div `
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 12px;
+  background-color: var(--color-blue-10);
+  border-radius: 8px;
+  border: 1px solid transparent;
+
+  &:hover {
+    border-color: var(--color-grey-8);
+  }
+
+  &:focus-within {
+    border-color: var(--color-primary-blue-2);
+  }
+`;
+const Input = styled.input `
+  padding: 0px;
+  flex: 1;
+  font-family: var(--font-inter);
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--color-grey-3);
+  border: none;
+  outline: none;
+  border-radius: 8px;
+  background-color: transparent;
+
+  &::placeholder {
+    color: var(--color-grey-6);
+  }
+`;

package/dist/components/media/common.js

@@ -0,0 +1 @@
+export {};

package/dist/components/media/index.js

@@ -0,0 +1,2 @@
+export { Video } from './video';
+export { VideoPlayer } from './video-player';

package/dist/components/media/video/index.js

@@ -0,0 +1 @@
+export { Video } from './video';

package/dist/components/media/video/video.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import ReactPlayer from 'react-player';
+import Image from 'next/image';
+export const Video = ({ controls = true, loop = false, muted, playsInline, src, subtitles, style, thumbnail, }) => {
+    const ref = React.useRef(null);
+    return (React.createElement(ReactPlayer, { config: {
+            file: {
+                attributes: {
+                    crossOrigin: 'true',
+                },
+                forceHLS: true,
+                hlsOptions: {
+                    autoStartLoad: true,
+                },
+                tracks: subtitles?.map((subtitle) => ({
+                    kind: 'subtitles',
+                    label: subtitle.label,
+                    src: subtitle.src,
+                    srcLang: subtitle.locale,
+                })),
+            },
+        }, controls: controls, height: "100%", light: thumbnail ? (React.createElement(Image, { alt: "thumbnail for trailer", layout: "fill", priority: true, quality: 100, src: thumbnail, style: { objectFit: 'contain' } })) : undefined, loop: loop, muted: muted, pip: false, playsinline: playsInline, playing: true, ref: ref, style: {
+            backgroundColor: 'var(--color-grey-0)',
+            maxHeight: 720,
+            maxWidth: 1280,
+            minHeight: 480,
+            overflow: 'hidden',
+            position: 'relative',
+            ...(style || {}),
+        }, url: src, width: "100%" }));
+};

package/dist/components/media/video-player/index.js

@@ -0,0 +1 @@
+export { VideoPlayer } from './video';

package/dist/components/media/video-player/playlist-item.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 interface PlaylistItemProps {
-    duration?: number;
+    duration: number;
     onClick: () => void;
     playable?: boolean;
     progress?: number;
-    shortDescription?: string;
+    shortDescription: string;
     thumbnail: string;
     title: string;
 }

package/dist/components/media/video-player/playlist-item.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import Image from 'next/image';
+import styled from 'styled-components';
+import { Box } from '../../atoms/box';
+import { SecToDuration } from '../../atoms/seconds_to_duration';
+import { P } from '../../atoms/typography';
+import { PlaySolid } from '../../../icons/audio_video';
+export const PlaylistItem = ({ duration, onClick, playable, progress = 0, shortDescription, thumbnail, title, }) => {
+    return (React.createElement(Wrapper, { onClick: playable ? onClick : undefined, "$playable": playable },
+        React.createElement(PlaySolid, { color: "white", size: 16, sx: "position: absolute; left: 8px; bottom: 4px;" }),
+        React.createElement(Image, { alt: `thumbnail for ${title}`, height: 75, quality: 100, src: thumbnail, width: 133 }),
+        React.createElement(ProgressBar, { progressPercent: progress / duration }),
+        React.createElement(Box, { "$dir": "column", "$gap": 4, sx: "margin-left: 16px; margin-right: auto; flex: 0 1 auto; flex-basis: content;" },
+            React.createElement(P, { "$color": "grey-10", "$semiBold": true }, title),
+            React.createElement(P, { "$color": "grey-9", "$fontSize": 14, "$lineHeight": 20, "$textClampLines": 2, sx: "max-width: min(500px, 75%);" }, shortDescription)),
+        React.createElement(P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, sx: "flex-shrink: 0;" },
+            React.createElement(SecToDuration, { seconds: duration }))));
+};
+const Wrapper = styled.div `
+  width: 100%;
+  flex: 0 1 auto;
+  display: flex;
+  align-items: center;
+  position: relative;
+  box-sizing: border-box;
+  cursor: pointer;
+  ${({ $playable }) => $playable ? '' : 'pointer-events: none; cursor: initial;'}
+`;
+const ProgressBar = ({ progressPercent }) => (React.createElement(ProgressBarSvg, { viewBox: "0 0 133 2", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("rect", { width: 133 * progressPercent, height: "2", fill: "var(--color-primary-blue-2)" }),
+    React.createElement("rect", { x: 133 * progressPercent, width: 133 - 133 * progressPercent, height: "2", fill: "var(--color-grey-8)" })));
+const ProgressBarSvg = styled.svg `
+  width: 133px;
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+`;

package/dist/components/media/video-player/video.d.ts

@@ -10,12 +10,6 @@ interface MediaItem {
     thumbnail: string;
     title: string;
 }
-interface Trailer {
-    id: number;
-    src: string;
-    subtitles: Subtitle[];
-    thumbnail: string;
-}
 export interface VideoPlayerProps {
     /**
      * @param activeIndex the media item from the playlist currently playing
@@ -48,10 +42,6 @@ export interface VideoPlayerProps {
      * @param playlist the media items in the player
      */
     playlist: MediaItem[];
-    /**
-     * @param setMediaItem sets the index of the item to be played
-     */
-    setMediaItem: (index: number) => void;
     /**
      * @param subtitle the video player's subtitle
      */
@@ -61,13 +51,13 @@ export interface VideoPlayerProps {
      */
     title: string;
     /**
-     * @param trailer if in
+     * @param setMediaItem sets the index of the item to be played
      */
-    trailer?: Trailer;
+    setMediaItem: (index: number) => void;
 }
 /**
  * ReactPlayer props reference -> https://www.npmjs.com/package/react-player#props
  * HLS Option props reference -> https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning
  */
-export declare const VideoPlayer: ({ activeIndex, pip, playable, playlist, onPipChange, onProgress, orientation, setMediaItem, subtitle, title, trailer, }: VideoPlayerProps) => React.JSX.Element | null;
+export declare const VideoPlayer: ({ activeIndex, pip, playable, playlist, onPipChange, onProgress, orientation, setMediaItem, subtitle, title, }: VideoPlayerProps) => React.JSX.Element | null;
 export {};

package/dist/components/media/video-player/video.js

@@ -0,0 +1,178 @@
+'use client';
+import React from 'react';
+import Image from 'next/image';
+import ReactPlayer from 'react-player';
+import styled from 'styled-components';
+import { Box } from '../../atoms/box';
+import { H, P } from '../../atoms/typography';
+import { Button } from '../../actions/button';
+import { LockCircle, PlaySolid } from '../../../icons';
+import { PlaylistItem } from './playlist-item';
+/**
+ * ReactPlayer props reference -> https://www.npmjs.com/package/react-player#props
+ * HLS Option props reference -> https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning
+ */
+export const VideoPlayer = ({ activeIndex, pip, playable, playlist, onPipChange, onProgress, orientation, setMediaItem, subtitle, title, }) => {
+    const [showingAll, setShowingAll] = React.useState(false);
+    const ref = React.useRef(null);
+    const mediaItem = playlist?.[activeIndex];
+    const handleReady = () => {
+        const currTime = ref?.current?.getCurrentTime();
+        if (currTime === 0 && mediaItem?.progress !== 0) {
+            ref.current.seekTo(mediaItem.progress);
+        }
+    };
+    const toggleShowingAll = () => setShowingAll((prev) => !prev);
+    if (!mediaItem)
+        return null;
+    return (React.createElement(Wrapper, { "$orientation": orientation },
+        React.createElement(InnerWrapper, { "$orientation": orientation, "$playable": playable },
+            orientation === 'vertical' && (React.createElement(Box, { "$dir": "column", "$gap": 4, sx: "margin: 24px;" },
+                React.createElement(H, { as: "h2", "$bold": true, "$color": "white", "$fontSize": 28, "$lineHeight": 36 }, title),
+                React.createElement(P, { as: "h3", "$bold": true, "$color": "grey-8" }, subtitle))),
+            React.createElement(ReactPlayer, { className: "player", config: {
+                    file: {
+                        attributes: {
+                            crossOrigin: 'true',
+                        },
+                        forceHLS: true,
+                        hlsOptions: {
+                            autoStartLoad: true,
+                        },
+                        tracks: mediaItem.subtitles.map((subtitle) => ({
+                            kind: 'subtitles',
+                            label: subtitle.label,
+                            src: subtitle.src,
+                            srcLang: subtitle.locale,
+                        })),
+                    },
+                }, controls: true, height: "100%", light: React.createElement(Image, { alt: `thumbnail for ${title}`, layout: "fill", priority: true, quality: 100, style: {
+                        objectFit: 'contain',
+                    }, src: mediaItem.thumbnail }), progressInterval: 4000, onDisablePIP: () => onPipChange && onPipChange(false), onEnablePIP: () => onPipChange && onPipChange(true), onProgress: onProgress, onReady: handleReady, pip: pip, playIcon: playable ? (React.createElement(PlaySolid, { color: "white", size: 24, sx: "position: absolute; width: 54px; height: 54px;" })) : (React.createElement(LockCircle, { color: "white", size: 24, sx: "position: absolute; width: 54px; height: 54px;" })), playing: playable, ref: ref, style: {
+                    backgroundColor: 'var(--color-grey-0)',
+                    maxHeight: 720,
+                    maxWidth: 1280,
+                    minHeight: 480,
+                    overflow: 'hidden',
+                    position: 'relative',
+                }, url: mediaItem.src, width: "100%" }),
+            orientation === 'horizontal' && (React.createElement(Side, null,
+                React.createElement(Box, { "$dir": "column", "$gap": 4 },
+                    React.createElement(H, { as: "h2", "$bold": true, "$color": "white", "$fontSize": 28, "$lineHeight": 36 }, title),
+                    React.createElement(P, { as: "h3", "$bold": true, "$color": "grey-8" }, subtitle)),
+                React.createElement(Box, { "$align": "center", "$justify": "space-between", sx: "padding: 8px 0px 8px 14px;" },
+                    React.createElement(P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, "$semiBold": true }, "All lessons")),
+                React.createElement(HorizontalPlaylistWrapper, null, playlist.map((playlistItem, index) => (React.createElement(PlaylistItem, { key: playlistItem.id, duration: playlistItem.duration, onClick: () => setMediaItem(index), playable: playable, progress: playlistItem.progress, shortDescription: playlistItem.shortDescription, thumbnail: playlistItem.thumbnail, title: playlistItem.title })))))),
+            orientation === 'vertical' && (React.createElement(Box, { "$dir": "column", "$gap": 24 },
+                React.createElement(Box, { "$align": "center", "$justify": "space-between", sx: "padding: 8px 0px; margin: 0px 24px; border-bottom: 1px solid var(--color-grey-3);" },
+                    React.createElement(P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, "$semiBold": true }, "All lessons"),
+                    React.createElement(Button, { onClick: toggleShowingAll, size: "small", sx: "background-color: var(--color-grey-2); border-color: var(--color-grey-8); color: var(--color-grey-8);", type: "text" }, showingAll ? 'Collapse' : 'View all')),
+                React.createElement(VerticalPlaylistWrapper, { "$showingAll": showingAll }, playlist.map((playlistItem, index) => (React.createElement(PlaylistItem, { key: playlistItem.id, duration: playlistItem.duration, onClick: () => setMediaItem(index), progress: playlistItem.progress, shortDescription: playlistItem.shortDescription, thumbnail: playlistItem.thumbnail, title: playlistItem.title })))))))));
+};
+const Wrapper = styled.div `
+  display: flex;
+  justify-content: center;
+  background-color: var(--color-grey-0);
+
+  img {
+    object-fit: cover !important;
+  }
+
+  ${({ $orientation }) => $orientation === 'vertical' ? 'max-width: 960px; height: max-content;' : ''}
+`;
+const InnerWrapper = styled.div `
+  max-width: 2284px;
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+
+  ${({ $playable }) => $playable
+    ? ''
+    : `
+    .player {
+      cursor: initial;
+      pointer-events: none;
+      user-select: none;
+    }`}
+
+  ${({ $orientation }) => $orientation === 'vertical'
+    ? `
+    flex-direction: column;
+    gap: 24px;
+    justify-content: flex-start;`
+    : `
+      & > div:first-of-type {
+        flex: 5;
+        aspect-ratio: 1280 / 720;
+      }
+      & > div:last-of-type {
+        flex: 3;
+      }`}
+`;
+const Side = styled.div `
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  gap: 24px;
+`;
+const HorizontalPlaylistWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  max-height: 548px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 24px;
+
+  &::-webkit-scrollbar-track {
+    box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.15);
+    -webkit-box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    background-color: var(--color-grey-2);
+    margin: 40px 0px 15px 0px;
+  }
+  &::-webkit-scrollbar {
+    width: 8px;
+    border-radius: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: var(--color-grey-6);
+    opacity: 30%;
+  }
+`;
+const VerticalPlaylistWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 0px 12px 48px 24px;
+  margin-right: 24px;
+  max-height: 350px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+
+  &::-webkit-scrollbar-track {
+    box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.15);
+    -webkit-box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    background-color: var(--color-grey-2);
+    margin: 40px 0px 15px 0px;
+  }
+  &::-webkit-scrollbar {
+    width: 8px;
+    border-radius: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: var(--color-grey-6);
+    opacity: 30%;
+  }
+
+  ${({ $showingAll }) => $showingAll
+    ? `
+    max-height: unset;
+    overflow-y: visible;`
+    : ''}
+`;