@soul-refiner/design-system 2.0.0-alpha.18 → 2.0.0-alpha.19

package/dist/src/components/input/calendar/calendar.js

@@ -2,7 +2,7 @@
 'use strict';
 
 var React = require('react');
-var styledComponents = require('styled-components');
+var styled = require('styled-components');
 var date$1 = require('../../../common/date.js');
 var button = require('../../actions/button/button.js');
 var paragraph = require('../../atoms/typography/paragraph.js');
@@ -112,12 +112,12 @@ const CalendarInput = ({ selectedDate, onSelect: parentOnSelect, disablePastDate
                         React__default.default.createElement(button.Button, { onClick: handleCancel, size: "small", sx: "width: 80px;", type: "outlined" }, "Cancel"),
                         React__default.default.createElement(button.Button, { onClick: handleApply, size: "small", sx: "width: 80px;" }, "Apply"))))))));
 };
-const Wrapper = styledComponents.styled.div `
+const Wrapper = styled.styled.div `
   position: relative;
   width: fit-content;
   font-family: var(--font-inter);
 `;
-const DateSelector = styledComponents.styled.div `
+const DateSelector = styled.styled.div `
   transform: translateY(26px);
   position: absolute;
   z-index: 5;
@@ -125,7 +125,7 @@ const DateSelector = styledComponents.styled.div `
   border-radius: 25px;
   box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
 `;
-const InnerWrapper = styledComponents.styled.div `
+const InnerWrapper = styled.styled.div `
   display: flex;
   gap: 31px;
   padding: 30px;
@@ -144,14 +144,14 @@ const InnerWrapper = styledComponents.styled.div `
     box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.1);
   }
 `;
-const MonthBar = styledComponents.styled.div `
+const MonthBar = styled.styled.div `
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 32px;
   user-select: none;
 `;
-const Arrow = styledComponents.styled.button `
+const Arrow = styled.styled.button `
   appearance: none;
   border: none;
   outline: none;
@@ -171,24 +171,24 @@ const Arrow = styledComponents.styled.button `
     }
   }
 `;
-const WeekdayWrapper = styledComponents.styled.div `
+const WeekdayWrapper = styled.styled.div `
   display: flex;
   gap: 32px;
   user-select: none;
 `;
-const Calendar = styledComponents.styled.div `
+const Calendar = styled.styled.div `
   display: flex;
   flex-direction: column;
   gap: 32px;
   margin: 32px 0px;
   user-select: none;
 `;
-const Week = styledComponents.styled.div `
+const Week = styled.styled.div `
   display: flex;
   gap: 32px;
   border-radius: 24px;
 `;
-const Day = styledComponents.styled.button `
+const Day = styled.styled.button `
   outline: none;
   border: none;
   background: transparent;
@@ -223,12 +223,12 @@ const Day = styledComponents.styled.button `
     }
   }
 `;
-const BottomWrapper = styledComponents.styled.div `
+const BottomWrapper = styled.styled.div `
   display: flex;
   justify-content: flex-end;
   gap: 18px;
 `;
-const Input = styledComponents.styled.input `
+const Input = styled.styled.input `
   max-width: 140px;
   padding: 0px;
   flex: 1;
@@ -244,7 +244,7 @@ const Input = styledComponents.styled.input `
     color: var(--color-grey-6);
   }
 `;
-const InputWrapper = styledComponents.styled.div `
+const InputWrapper = styled.styled.div `
   width: fit-content;
   display: flex;
   gap: 8px;

package/dist/src/components/input/checkbox/checkbox.js

@@ -2,7 +2,7 @@
 'use strict';
 
 var React = require('react');
-var styledComponents = require('styled-components');
+var styled = require('styled-components');
 var styles = require('../../../common/styles.js');
 var checkmark = require('../../../icons/basic/checkmark.js');
 
@@ -13,7 +13,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 const Checkbox = ({ disabled, selected, sx, ...rest }) => {
     return (React__default.default.createElement(Box, { "$align": "center", "$disabled": !!disabled, "$display": "flex", "$justify": "center", "$selected": selected, "$sx": sx, ...rest }, selected && React__default.default.createElement(checkmark.Checkmark, { color: "white" })));
 };
-const Box = styledComponents.styled.div `
+const Box = styled.styled.div `
   display: flex;
   width: 20px;
   height: 20px;

package/dist/src/components/input/date/date.js

@@ -2,7 +2,7 @@
 'use strict';
 
 var React = require('react');
-var styledComponents = require('styled-components');
+var styled = require('styled-components');
 var date$1 = require('../../../common/date.js');
 var button = require('../../actions/button/button.js');
 var paragraph = require('../../atoms/typography/paragraph.js');
@@ -214,12 +214,12 @@ const DatePicker = ({ endDate, label, onSelect: parentOnSelect, startDate, }) =>
                         React__default.default.createElement(button.Button, { onClick: handleCancel, size: "small", sx: "width: 80px;", type: "outlined" }, "Cancel"),
                         React__default.default.createElement(button.Button, { onClick: handleApply, size: "small", sx: "width: 80px;" }, "Apply"))))))));
 };
-const Wrapper = styledComponents.styled.div `
+const Wrapper = styled.styled.div `
   position: relative;
   width: fit-content;
   font-family: var(--font-inter);
 `;
-const Trigger = styledComponents.styled.button `
+const Trigger = styled.styled.button `
   padding: 12px 24px;
   background-color: #ffffff;
   border: 1px solid var(--color-grey-6);
@@ -251,7 +251,7 @@ const Trigger = styledComponents.styled.button `
     border-color: var(--color-blue-3);
   }
 `;
-const DateSelector = styledComponents.styled.div `
+const DateSelector = styled.styled.div `
   transform: translateY(26px);
   position: absolute;
   z-index: 5;
@@ -259,7 +259,7 @@ const DateSelector = styledComponents.styled.div `
   border-radius: 25px;
   box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
 `;
-const InnerWrapper = styledComponents.styled.div `
+const InnerWrapper = styled.styled.div `
   display: flex;
   gap: 31px;
   padding: 30px;
@@ -278,7 +278,7 @@ const InnerWrapper = styledComponents.styled.div `
     box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.1);
   }
 `;
-const Left = styledComponents.styled.div `
+const Left = styled.styled.div `
   display: flex;
   flex-flow: column nowrap;
   gap: 24px;
@@ -306,14 +306,14 @@ const Left = styledComponents.styled.div `
     }
   }
 `;
-const MonthBar = styledComponents.styled.div `
+const MonthBar = styled.styled.div `
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 32px;
   user-select: none;
 `;
-const Arrow = styledComponents.styled.button `
+const Arrow = styled.styled.button `
   appearance: none;
   border: none;
   outline: none;
@@ -333,24 +333,24 @@ const Arrow = styledComponents.styled.button `
     }
   }
 `;
-const WeekdayWrapper = styledComponents.styled.div `
+const WeekdayWrapper = styled.styled.div `
   display: flex;
   gap: 32px;
   user-select: none;
 `;
-const Calendar = styledComponents.styled.div `
+const Calendar = styled.styled.div `
   display: flex;
   flex-direction: column;
   gap: 32px;
   margin: 32px 0px;
   user-select: none;
 `;
-const Week = styledComponents.styled.div `
+const Week = styled.styled.div `
   display: flex;
   gap: 32px;
   border-radius: 24px;
 `;
-const Day = styledComponents.styled.button `
+const Day = styled.styled.button `
   outline: none;
   border: none;
   background: transparent;
@@ -520,7 +520,7 @@ const Day = styledComponents.styled.button `
     }
   }
 `;
-const BottomWrapper = styledComponents.styled.div `
+const BottomWrapper = styled.styled.div `
   display: flex;
   justify-content: flex-end;
   gap: 18px;

package/dist/src/components/input/filter/filter.js

@@ -2,7 +2,7 @@
 'use strict';
 
 var React = require('react');
-var styledComponents = require('styled-components');
+var styled = require('styled-components');
 var box = require('../../atoms/box/box.js');
 var button = require('../../actions/button/button.js');
 var paragraph = require('../../atoms/typography/paragraph.js');
@@ -15,6 +15,7 @@ var filter_option = require('./filter_option.js');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
 const Filter = ({ closeOnBlur = true, disabled, graphic, graphicAlignment = 'left', resetGraphic, label = '', sx, triggerType, options, defaultValue = '', closeOnChange = true, optionOnChange, optionShowClose, checkbox, applyOnClick, resetOnClick, applyResetActions, }) => {
     const multiple = !!checkbox;
@@ -134,13 +135,13 @@ const Filter = ({ closeOnBlur = true, disabled, graphic, graphicAlignment = 'lef
                             setOpen(false);
                         }, size: "small", type: "primary" }, "Apply"))))))));
 };
-const Wrapper = styledComponents.styled.div `
+const Wrapper = styled__default.default.div `
   position: relative;
   display: block;
   outline: none;
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
-const Container = styledComponents.styled.div `
+const Container = styled__default.default.div `
   position: absolute;
   width: max-content;
   z-index: 100;
@@ -209,7 +210,7 @@ const FilterTrigger = ({ disabled, graphic, graphicAlignment, label, onClick, re
 };
 Filter.Trigger = FilterTrigger;
 FilterTrigger.displayName = 'Filter.Trigger';
-const sharedStyles = styledComponents.css `
+const sharedStyles = styled.css `
   display: flex;
   padding: 10px 16px;
   border: none;
@@ -228,7 +229,7 @@ const sharedStyles = styledComponents.css `
     }
   }
 `;
-const Outlined = styledComponents.styled.button `
+const Outlined = styled__default.default.button `
   ${sharedStyles}
   ${styles.Styles.flex}
   border: 1px solid var(--color-grey-8);
@@ -240,7 +241,7 @@ const Outlined = styledComponents.styled.button `
     background-color: var(--color-grey-9);
   }
 `;
-const Pill = styledComponents.styled.button `
+const Pill = styled__default.default.button `
   ${sharedStyles}
   ${styles.Styles.flex}
   border: 1px solid var(--color-grey-8);
@@ -266,7 +267,7 @@ const Pill = styledComponents.styled.button `
     `
     : ''}
 `;
-const Labeled = styledComponents.styled.button `
+const Labeled = styled__default.default.button `
   ${sharedStyles}
   ${styles.Styles.flex}
   border-radius: 24px;
@@ -278,12 +279,12 @@ const Labeled = styledComponents.styled.button `
     background-color: var(--color-grey-9);
   }
 `;
-const LabelSeparator = styledComponents.styled.div `
+const LabelSeparator = styled__default.default.div `
   width: 1px;
   height: 20px;
   background-color: var(--color-grey-8);
 `;
-const Avatar = styledComponents.styled.button `
+const Avatar = styled__default.default.button `
   ${sharedStyles}
   ${styles.Styles.flex}
   padding: 4px 16px;
@@ -304,7 +305,7 @@ const Avatar = styledComponents.styled.button `
     }
   }
 `;
-const Text = styledComponents.styled.button `
+const Text = styled__default.default.button `
   ${sharedStyles}
   ${styles.Styles.flex}
   gap: 8px;

package/dist/src/components/input/filter/filter_option.js

@@ -2,7 +2,7 @@
 'use strict';
 
 var React = require('react');
-var styledComponents = require('styled-components');
+var styled = require('styled-components');
 var box = require('../../atoms/box/box.js');
 var paragraph = require('../../atoms/typography/paragraph.js');
 var checkbox = require('../checkbox/checkbox.js');
@@ -24,7 +24,7 @@ const Option = ({ label, onClick, selected, sx, value, checkbox: checkbox$1, rad
             } }))));
 };
 Option.displayName = 'Filter.Option';
-const OptionWrapper = styledComponents.styled.div `
+const OptionWrapper = styled.styled.div `
   position: relative;
   z-index: 1;
   padding: 12px 16px;
@@ -67,7 +67,7 @@ const Spacer = ({ sx }) => {
     return React__default.default.createElement(SpacerWrapper, { "$sx": sx });
 };
 Spacer.displayName = 'Filter.Spacer';
-const SpacerWrapper = styledComponents.styled.div `
+const SpacerWrapper = styled.styled.div `
   width: 100%;
   height: 1px;
   background-color: var(--color-grey-8);

package/dist/src/components/input/radio/radio.js

@@ -2,7 +2,7 @@
 'use strict';
 
 var React = require('react');
-var styledComponents = require('styled-components');
+var styled = require('styled-components');
 var box = require('../../atoms/box/box.js');
 var paragraph = require('../../atoms/typography/paragraph.js');
 
@@ -24,7 +24,7 @@ const Radio = ({ checked = false, disabled, label, onClick, reversed, sx, value,
         React__default.default.createElement(Input, { checked: checked, onClickCapture: handleInputClick, disabled: disabled, type: "radio", value: value, ...rest }),
         React__default.default.createElement(paragraph.P, { as: "span" }, label)));
 };
-const Label = styledComponents.styled.label `
+const Label = styled.styled.label `
   display: flex;
   align-items: center;
   gap: 8px;
@@ -45,7 +45,7 @@ const Label = styledComponents.styled.label `
   flex-direction: ${({ $reversed }) => ($reversed ? 'row-reverse' : 'row')};
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
-const Input = styledComponents.styled.input `
+const Input = styled.styled.input `
   appearance: none;
   position: relative;
   height: 20px;

package/dist/src/components/input/search/search.js

@@ -2,7 +2,7 @@
 'use strict';
 
 var React = require('react');
-var styledComponents = require('styled-components');
+var styled = require('styled-components');
 var styles = require('../../../common/styles.js');
 var close = require('../../../icons/basic/close.js');
 var search = require('../../../icons/basic/search.js');
@@ -55,7 +55,7 @@ const Search = ({ dropdownFilter, onChange, onClearText, onSubmit, placeholder,
             React__default.default.createElement(Separator, null),
             dropdownFilter))));
 };
-const Wrapper = styledComponents.styled.div `
+const Wrapper = styled.styled.div `
   ${styles.Styles.flex}
   ${styles.Styles.padding}
   display: flex;
@@ -123,7 +123,7 @@ const Wrapper = styledComponents.styled.div `
 
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
-const Input = styledComponents.styled.input.attrs(({ ref }) => ({
+const Input = styled.styled.input.attrs(({ ref }) => ({
     ref: ref,
 })) `
   flex: 1;
@@ -139,7 +139,7 @@ const Input = styledComponents.styled.input.attrs(({ ref }) => ({
     ? 'width: 0px; height: 0px; padding: 0px !important; border: none !important;'
     : ''}
 `;
-const Separator = styledComponents.styled.div `
+const Separator = styled.styled.div `
   width: 1px;
   height: 20px;
   background-color: var(--color-grey-9);

package/dist/src/components/input/select/select.js

@@ -2,7 +2,7 @@
 'use strict';
 
 var React = require('react');
-var styledComponents = require('styled-components');
+var styled = require('styled-components');
 var paragraph = require('../../atoms/typography/paragraph.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -15,7 +15,7 @@ const Select = ({ label, onClick, selected, sx, value, }) => {
         React__default.default.createElement(SelectBox, { "$selected": selected }),
         React__default.default.createElement(paragraph.P, { as: "div" }, label)));
 };
-const Label = styledComponents.styled.div `
+const Label = styled.styled.div `
   display: flex;
   flex-flow: row nowrap;
   gap: 24px;
@@ -28,7 +28,7 @@ const Label = styledComponents.styled.div `
   }
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
-const SelectBox = styledComponents.styled.div `
+const SelectBox = styled.styled.div `
   position: relative;
   width: 18px;
   height: 18px;

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

@@ -2,7 +2,7 @@
 'use strict';
 
 var React = require('react');
-var styledComponents = require('styled-components');
+var styled = require('styled-components');
 var box = require('../../atoms/box/box.js');
 var checkmark_circle = require('../../../icons/basic/checkmark_circle.js');
 var alert_circle = require('../../../icons/notifications/alert_circle.js');
@@ -36,7 +36,7 @@ const TextArea = ({ bg = 'var(--color-blue-10)', disabled, helperText, icon, lab
                 " / ",
                 maxCharacters)))));
 };
-const Label = styledComponents.styled.label `
+const Label = styled.styled.label `
   width: 100%;
   display: flex;
   gap: 4px;
@@ -60,7 +60,7 @@ const Label = styledComponents.styled.label `
 
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
-const InputWrapper = styledComponents.styled.div `
+const InputWrapper = styled.styled.div `
   min-width: ${({ $minWidth }) => ($minWidth ? $minWidth + 'px;' : '')}
   display: flex;
   gap: 8px;
@@ -82,7 +82,7 @@ const InputWrapper = styledComponents.styled.div `
   ${({ $successful }) => $successful ? 'border-color: var(--color-green-3) !important;' : ''}
   ${({ $warning }) => $warning ? 'border-color: var(--color-red-4) !important;' : ''}
 `;
-const TextAreaElement = styledComponents.styled.textarea `
+const TextAreaElement = styled.styled.textarea `
   min-width: ${({ $minHeight }) => ($minHeight ? $minHeight - 24 + 'px;' : '')}
   padding: 0px;
   flex: 1;
@@ -101,13 +101,13 @@ const TextAreaElement = styledComponents.styled.textarea `
 
   ${({ $resize }) => ($resize ? '' : 'resize: none;')}
 `;
-const HelperText = styledComponents.styled.p `
+const HelperText = styled.styled.p `
   color: var(--color-grey-4);
   font-family: var(--font-inter);
   font-size: 14px;
   line-height: 20px;
 `;
-const MaxCharactersText = styledComponents.styled.p `
+const MaxCharactersText = styled.styled.p `
   text-align: right;
   color: var(--color-grey-6);
   font-family: var(--font-inter);

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

@@ -2,7 +2,7 @@
 'use strict';
 
 var React = require('react');
-var styledComponents = require('styled-components');
+var styled = require('styled-components');
 var chip = require('../../feedback/chip/chip.js');
 var checkmark_circle = require('../../../icons/basic/checkmark_circle.js');
 var alert_circle = require('../../../icons/notifications/alert_circle.js');
@@ -71,7 +71,7 @@ const TextInput = ({ bg = 'var(--color-blue-10)', disabled, helperText, icon, la
             warning && React__default.default.createElement(alert_circle.AlertCircle, { color: "red-4" })),
         helperText && React__default.default.createElement(HelperText, { "$size": size }, helperText)));
 };
-const Label = styledComponents.styled.div `
+const Label = styled.styled.div `
   width: 100%;
   display: flex;
   gap: 4px;
@@ -95,7 +95,7 @@ const Label = styledComponents.styled.div `
 
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
-const InputWrapper = styledComponents.styled.div `
+const InputWrapper = styled.styled.div `
   display: flex;
   gap: 8px;
   align-items: center;
@@ -116,7 +116,7 @@ const InputWrapper = styledComponents.styled.div `
   ${({ $successful }) => $successful ? 'border-color: var(--color-green-3) !important;' : ''}
   ${({ $warning }) => $warning ? 'border-color: var(--color-red-4) !important;' : ''}
 `;
-const Input = styledComponents.styled.input `
+const Input = styled.styled.input `
   padding: 0px;
   flex: 1;
   font-family: var(--font-inter);
@@ -134,13 +134,13 @@ const Input = styledComponents.styled.input `
 
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
-const HelperText = styledComponents.styled.span `
+const HelperText = styled.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 = styledComponents.styled.span `
+const MaxCharactersText = styled.styled.span `
   color: var(--color-grey-6);
   font-family: var(--font-inter);
   font-size: 14px;
@@ -148,7 +148,7 @@ const MaxCharactersText = styledComponents.styled.span `
   font-weight: 400;
   line-height: 20px;
 `;
-const MultipleInputWrapper = styledComponents.styled.form `
+const MultipleInputWrapper = styled.styled.form `
   display: flex;
   flex-flow: row wrap;
   gap: 8px 16px;

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

@@ -3,7 +3,7 @@
 
 var dropdown = require('../../actions/dropdown/dropdown.js');
 var React = require('react');
-var styledComponents = require('styled-components');
+var styled = require('styled-components');
 var clock = require('../../../icons/time/clock.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -40,7 +40,7 @@ const Time = ({ selectedTime, setTime, selectedPeriod, setPeriod, }) => {
             setTime(value);
         }, additionalOnChange: setPeriod, defaultValue: selectedTime, defaultAdditionalValue: selectedPeriod }));
 };
-const InputWrapper = styledComponents.styled.div `
+const InputWrapper = styled.styled.div `
   width: fit-content;
   display: flex;
   gap: 8px;
@@ -59,7 +59,7 @@ const InputWrapper = styledComponents.styled.div `
     border-color: var(--color-primary-blue-2);
   }
 `;
-const Input = styledComponents.styled.input `
+const Input = styled.styled.input `
   max-width: 120px;
   padding: 0px;
   flex: 1;

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

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var Image = require('next/image');
-var styledComponents = require('styled-components');
+var styled = require('styled-components');
 var box = require('../../atoms/box/box.js');
 var seconds_to_duration = require('../../atoms/seconds_to_duration/seconds_to_duration.js');
 var paragraph = require('../../atoms/typography/paragraph.js');
@@ -25,7 +25,7 @@ const PlaylistItem = ({ duration, onClick, playable, progress = 0, shortDescript
         duration && (React__default.default.createElement(paragraph.P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, sx: "flex-shrink: 0;" },
             React__default.default.createElement(seconds_to_duration.SecToDuration, { seconds: duration })))));
 };
-const Wrapper = styledComponents.styled.div `
+const Wrapper = styled.styled.div `
   width: 100%;
   flex: 0 1 auto;
   display: flex;
@@ -38,7 +38,7 @@ const Wrapper = styledComponents.styled.div `
 const ProgressBar = ({ progressPercent }) => (React__default.default.createElement(ProgressBarSvg, { viewBox: "0 0 133 2", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
     React__default.default.createElement("rect", { width: 133 * progressPercent, height: "2", fill: "var(--color-primary-blue-2)" }),
     React__default.default.createElement("rect", { x: 133 * progressPercent, width: 133 - 133 * progressPercent, height: "2", fill: "var(--color-grey-8)" })));
-const ProgressBarSvg = styledComponents.styled.svg `
+const ProgressBarSvg = styled.styled.svg `
   width: 133px;
   position: absolute;
   bottom: 0px;

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

@@ -4,7 +4,7 @@
 var React = require('react');
 var Image = require('next/image');
 var ReactPlayer = require('react-player');
-var styledComponents = require('styled-components');
+var styled = require('styled-components');
 var box = require('../../atoms/box/box.js');
 var heading = require('../../atoms/typography/heading.js');
 var paragraph = require('../../atoms/typography/paragraph.js');
@@ -99,7 +99,7 @@ const VideoPlayer = ({ activeIndex, pip, playable, playlist, onPipChange, onProg
                     React__default.default.createElement(button.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__default.default.createElement(VerticalPlaylistWrapper, { "$showingAll": showingAll }, playlist.map((playlistItem$1, index) => (React__default.default.createElement(playlistItem.PlaylistItem, { key: playlistItem$1.id, duration: playlistItem$1.duration, onClick: () => handleMediaItemChange(index), playable: playable, progress: playlistItem$1.progress, shortDescription: playlistItem$1.shortDescription, thumbnail: playlistItem$1.thumbnail, title: playlistItem$1.title })))))))));
 };
-const Wrapper = styledComponents.styled.div `
+const Wrapper = styled.styled.div `
   display: flex;
   justify-content: center;
   background-color: var(--color-grey-0);
@@ -110,7 +110,7 @@ const Wrapper = styledComponents.styled.div `
 
   ${({ $orientation }) => $orientation === 'vertical' ? 'max-width: 960px; height: max-content;' : ''}
 `;
-const InnerWrapper = styledComponents.styled.div `
+const InnerWrapper = styled.styled.div `
   max-width: 2284px;
   flex: 1;
   display: flex;
@@ -139,7 +139,7 @@ const InnerWrapper = styledComponents.styled.div `
         flex: 3;
       }`}
 `;
-const Side = styledComponents.styled.div `
+const Side = styled.styled.div `
   position: relative;
   box-sizing: border-box;
   display: flex;
@@ -147,7 +147,7 @@ const Side = styledComponents.styled.div `
   padding: 24px;
   gap: 24px;
 `;
-const HorizontalPlaylistWrapper = styledComponents.styled.div `
+const HorizontalPlaylistWrapper = styled.styled.div `
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -173,7 +173,7 @@ const HorizontalPlaylistWrapper = styledComponents.styled.div `
     opacity: 30%;
   }
 `;
-const VerticalPlaylistWrapper = styledComponents.styled.div `
+const VerticalPlaylistWrapper = styled.styled.div `
   display: flex;
   flex-direction: column;
   gap: 24px;