@soul-refiner/design-system 1.7.22 → 2.0.0-alpha.0

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

@@ -1,110 +0,0 @@
-'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

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

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

@@ -1,147 +0,0 @@
-'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

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

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

@@ -1,71 +0,0 @@
-'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 `
-  width: fit-content;
-  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 `
-  max-width: 120px;
-  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

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

package/dist/components/media/index.js

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

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

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

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

@@ -1,31 +0,0 @@
-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

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

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

@@ -1,37 +0,0 @@
-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 { Lock, PlaySolid } from '../../../icons';
-export const PlaylistItem = ({ duration, onClick, playable, progress = 0, shortDescription, thumbnail, title, }) => {
-    return (React.createElement(Wrapper, { onClick: playable ? onClick : undefined, "$playable": playable },
-        playable ? (React.createElement(PlaySolid, { color: "white", size: 16, sx: "position: absolute; left: 8px; bottom: 4px;" })) : (React.createElement(Lock, { 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 }),
-        progress && duration && (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),
-            shortDescription && (React.createElement(P, { "$color": "grey-9", "$fontSize": 14, "$lineHeight": 20, "$textClampLines": 2, sx: "max-width: min(500px, 75%);" }, shortDescription))),
-        duration && (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.js

@@ -1,197 +0,0 @@
-'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, trailer, }) => {
-    const [showingAll, setShowingAll] = React.useState(false);
-    const [playingTrailer, setPlayingTrailer] = React.useState(!playable);
-    const ref = React.useRef(null);
-    const mediaItem = playingTrailer ? trailer : playlist?.[activeIndex];
-    const handleReady = () => {
-        if (!playingTrailer) {
-            const currTime = ref?.current?.getCurrentTime();
-            if (currTime === 0 && mediaItem?.progress !== 0) {
-                ref.current.seekTo(mediaItem.progress);
-            }
-        }
-    };
-    const handleMediaItemChange = (id) => {
-        setPlayingTrailer(false);
-        setMediaItem(id);
-    };
-    const toggleShowingAll = () => setShowingAll((prev) => !prev);
-    if (!mediaItem)
-        return null;
-    return (React.createElement(Wrapper, { "$orientation": orientation },
-        React.createElement(InnerWrapper, { "$orientation": orientation, "$playable": playable || playingTrailer },
-            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 || playingTrailer ? (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)),
-                !!trailer && (React.createElement(Box, { "$dir": "column", "$gap": 8, sx: `
-                margin-bottom: 8x;
-                border-bottom: 1px solid var(--color-grey-4);
-                padding-bottom: 16px;
-                ` },
-                    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 }, "Trailer")),
-                    React.createElement(PlaylistItem, { onClick: () => setPlayingTrailer(true), playable: true, thumbnail: trailer.thumbnail, title: `${title} Trailer` }))),
-                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: () => handleMediaItemChange(index), playable: playable, progress: playlistItem.progress, shortDescription: playlistItem.shortDescription, thumbnail: playlistItem.thumbnail, title: playlistItem.title })))))),
-            orientation === 'vertical' && (React.createElement(Box, { "$dir": "column", "$gap": 24 },
-                !!trailer && (React.createElement(Box, { "$dir": "column", "$gap": 8, sx: "margin: 0px 24px;" },
-                    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 }, "Trailer")),
-                    React.createElement(PlaylistItem, { onClick: () => setPlayingTrailer(true), playable: true, thumbnail: trailer.thumbnail, title: `${title} Trailer` }))),
-                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: () => handleMediaItemChange(index), playable: playable, 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;`
-    : ''}
-`;