@soul-refiner/design-system 2.0.4 → 2.1.1-alpha.1

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

@@ -1,21 +1,5 @@
 "use client";
-'use strict';
-
-var React = require('react');
-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 }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-const Select = ({ label, onClick, selected, sx, value, }) => {
-    return (React__default.default.createElement(Label, { onClick: (event) => onClick(event, value), "$sx": sx },
-        React__default.default.createElement("input", { value: value, type: "radio", checked: selected, readOnly: true }),
-        React__default.default.createElement(SelectBox, { "$selected": selected }),
-        React__default.default.createElement(paragraph.P, { as: "div" }, label)));
-};
-const Label = styled.styled.div `
+"use strict";var React=require("react"),styled=require("styled-components"),paragraph=require("../../atoms/typography/paragraph.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Select=({label:e,onClick:t,selected:a,sx:r,value:l})=>React__default.default.createElement(Label,{onClick:e=>t(e,l),$sx:r},React__default.default.createElement("input",{value:l,type:"radio",checked:a,readOnly:!0}),React__default.default.createElement(SelectBox,{$selected:a}),React__default.default.createElement(paragraph.P,{as:"div"},e)),Label=styled.styled.div`
   display: flex;
   flex-flow: row nowrap;
   gap: 24px;
@@ -26,9 +10,8 @@ const Label = styled.styled.div `
   input {
     display: none;
   }
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const SelectBox = styled.styled.div `
+  ${({$sx:e})=>e||""}
+`,SelectBox=styled.styled.div`
   position: relative;
   width: 18px;
   height: 18px;
@@ -36,8 +19,7 @@ const SelectBox = styled.styled.div `
   border-radius: 4px;
   flex-shrink: 0;
 
-  ${({ $selected }) => $selected
-    ? `
+  ${({$selected:e})=>e?`
     background-color: var(--color-primary-blue-2);
     border-color: var(--color-primary-blue-2);
     
@@ -49,8 +31,5 @@ const SelectBox = styled.styled.div `
       font-size: 13px;
       color: var(--color-white);
       font-weight: 500;
-    }`
-    : ''}
-`;
-
-exports.Select = Select;
+    }`:""}
+`;exports.Select=Select;

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

@@ -1,42 +1,5 @@
 "use client";
-'use strict';
-
-var React = require('react');
-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');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-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__default.default.useRef(null);
-    React__default.default.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__default.default.createElement(Label, { "$disabled": disabled, "$sx": sx },
-        label,
-        React__default.default.createElement(InputWrapper, { "$bg": bg, "$minWidth": minWidth, "$successful": successful, "$warning": warning },
-            icon,
-            React__default.default.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__default.default.createElement(checkmark_circle.CheckmarkCircle, { color: "green-3" }),
-            warning && React__default.default.createElement(alert_circle.AlertCircle, { color: "red-4" })),
-        React__default.default.createElement(box.Box, { "$gap": 16, "$justify": "space-between" },
-            helperText && React__default.default.createElement(HelperText, null, helperText),
-            maxCharacters && (React__default.default.createElement(MaxCharactersText, null,
-                value.length,
-                " / ",
-                maxCharacters)))));
-};
-const Label = styled.styled.label `
+"use strict";var React=require("react"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),checkmark_circle=require("../../../icons/basic/checkmark_circle.js"),alert_circle=require("../../../icons/notifications/alert_circle.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const TextArea=({bg:e="var(--color-blue-10)",disabled:r,helperText:t,icon:a,label:l,maxCharacters:o,minHeight:n,minWidth:c,name:i,onChange:d,placeholder:s,resize:u=!1,successful:f,sx:p,value:x,warning:g})=>{const m=React__default.default.useRef(null);return React__default.default.useEffect(()=>{var e;m.current&&(m.current.style.height=n+"px",e=m.current.scrollHeight,m.current.style.height=e+"px")},[m.current,x]),React__default.default.createElement(Label,{$disabled:r,$sx:p},l,React__default.default.createElement(InputWrapper,{$bg:e,$minWidth:c,$successful:f,$warning:g},a,React__default.default.createElement(TextAreaElement,{disabled:r,name:i,onChange:d,placeholder:s,ref:m,value:o?x.slice(0,o-1):x,$minHeight:n,$resize:u}),f&&React__default.default.createElement(checkmark_circle.CheckmarkCircle,{color:"green-3"}),g&&React__default.default.createElement(alert_circle.AlertCircle,{color:"red-4"})),React__default.default.createElement(box.Box,{$gap:16,$justify:"space-between"},t&&React__default.default.createElement(HelperText,null,t),o&&React__default.default.createElement(MaxCharactersText,null,x.length," / ",o)))},Label=styled.styled.label`
   width: 100%;
   display: flex;
   gap: 4px;
@@ -47,27 +10,24 @@ const Label = styled.styled.label `
   font-weight: 500;
   line-height: 26px;
 
-  ${({ $disabled }) => $disabled
-    ? `
+  ${({$disabled:e})=>e?`
     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.styled.div `
-  min-width: ${({ $minWidth }) => ($minWidth ? $minWidth + 'px;' : '')}
+  ${({$sx:e})=>e||""}
+`,InputWrapper=styled.styled.div`
+  min-width: ${({$minWidth:e})=>e?e+"px;":""}
   display: flex;
   gap: 8px;
   align-items: center;
   box-sizing: border-box;
   padding: 12px;
-  background-color: ${({ $bg }) => $bg};
+  background-color: ${({$bg:e})=>e};
   border-radius: 8px;
   border: 1px solid transparent;
 
@@ -79,11 +39,10 @@ const InputWrapper = styled.styled.div `
     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.styled.textarea `
-  min-width: ${({ $minHeight }) => ($minHeight ? $minHeight - 24 + 'px;' : '')}
+  ${({$successful:e})=>e?"border-color: var(--color-green-3) !important;":""}
+  ${({$warning:e})=>e?"border-color: var(--color-red-4) !important;":""}
+`,TextAreaElement=styled.styled.textarea`
+  min-width: ${({$minHeight:e})=>e?e-24+"px;":""}
   padding: 0px;
   flex: 1;
   font-family: var(--font-inter);
@@ -99,15 +58,13 @@ const TextAreaElement = styled.styled.textarea `
     color: var(--color-grey-6);
   }
 
-  ${({ $resize }) => ($resize ? '' : 'resize: none;')}
-`;
-const HelperText = styled.styled.p `
+  ${({$resize:e})=>e?"":"resize: none;"}
+`,HelperText=styled.styled.p`
   color: var(--color-grey-4);
   font-family: var(--font-inter);
   font-size: 14px;
   line-height: 20px;
-`;
-const MaxCharactersText = styled.styled.p `
+`,MaxCharactersText=styled.styled.p`
   text-align: right;
   color: var(--color-grey-6);
   font-family: var(--font-inter);
@@ -115,6 +72,4 @@ const MaxCharactersText = styled.styled.p `
   font-style: normal;
   font-weight: 400;
   line-height: 20px;
-`;
-
-exports.TextArea = TextArea;
+`;exports.TextArea=TextArea;

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

@@ -1,107 +1,32 @@
 "use client";
-'use strict';
-
-var React = require('react');
-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');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-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__default.default.useId();
-    const isMultiple = multiple;
-    const [multipleValueToAdd, setMultipleValueToAdd] = React__default.default.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 frm the value
-     */
-    const handleMultipleItemRemoval = (removalItem) => {
-        onMultipleChange &&
-            onMultipleChange(value.filter((item) => item !== removalItem));
-    };
-    return (React__default.default.createElement(Label, { "$disabled": disabled, "$size": size, "$sx": sx },
-        label,
-        React__default.default.createElement(InputWrapper, { "$bg": bg, "$size": size, "$successful": successful, "$warning": warning },
-            !placeIconAtTheEnd && icon,
-            isMultiple && (React__default.default.createElement(MultipleInputWrapper, { onSubmit: handleMultipleAdd },
-                value.filter(Boolean).map((item, index) => (React__default.default.createElement(chip.Chip, { key: id + item + index, color: "blue", size: "small", onDismiss: () => handleMultipleItemRemoval(item) }, item))),
-                React__default.default.createElement(Input, { onChange: handleMultipleValueToAdd, onKeyDown: handleMultipleValueDelete, value: multipleValueToAdd, "$size": size, "$sx": inputSx }))),
-            !isMultiple && (React__default.default.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__default.default.createElement(MaxCharactersText, { "$size": size },
-                value?.length || 0,
-                " / ",
-                maxCharacters)),
-            placeIconAtTheEnd && icon,
-            successful && React__default.default.createElement(checkmark_circle.CheckmarkCircle, { color: "green-3" }),
-            warning && React__default.default.createElement(alert_circle.AlertCircle, { color: "red-4" })),
-        helperText && React__default.default.createElement(HelperText, { "$size": size }, helperText)));
-};
-const Label = styled.styled.div `
+"use strict";var React=require("react"),styled=require("styled-components"),chip=require("../../feedback/chip/chip.js"),checkmark_circle=require("../../../icons/basic/checkmark_circle.js"),alert_circle=require("../../../icons/notifications/alert_circle.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const TextInput=({bg:e="var(--color-blue-10)",disabled:t,helperText:l,icon:r,label:a,maxCharacters:o,multiple:n,name:c,onChange:i,onMultipleChange:s,placeholder:p,size:d="large",successful:u,sx:f,value:m,warning:x,type:g="text",placeIconAtTheEnd:y=!1,inputSx:$})=>{const h=React__default.default.useId();const[_,b]=React__default.default.useState("");return React__default.default.createElement(Label,{$disabled:t,$size:d,$sx:f},a,React__default.default.createElement(InputWrapper,{$bg:e,$size:d,$successful:u,$warning:x},!y&&r,n&&React__default.default.createElement(MultipleInputWrapper,{onSubmit:e=>{e.stopPropagation(),e.preventDefault();e=m.includes(_);s&&!e&&s([...m,_]),b("")}},m.filter(Boolean).map((e,t)=>React__default.default.createElement(chip.Chip,{key:h+e+t,color:"blue",size:"small",onDismiss:()=>{var t;t=e,s&&s(m.filter(e=>e!==t))}},e)),React__default.default.createElement(Input,{onChange:e=>{b(e.target.value)},onKeyDown:e=>{!m.length||!s||_||"Delete"!==e.key&&"Backspace"!==e.key||s(m.slice(0,m.length-1))},value:_,$size:d,$sx:$})),!n&&React__default.default.createElement(Input,{disabled:t,name:c,onChange:i,placeholder:p,value:"number"!==g&&o?m?.slice(0,o-1)||"":m,$size:d,type:g,$sx:$}),o&&"number"!==g&&!y&&React__default.default.createElement(MaxCharactersText,{$size:d},m?.length||0," / ",o),y&&r,u&&React__default.default.createElement(checkmark_circle.CheckmarkCircle,{color:"green-3"}),x&&React__default.default.createElement(alert_circle.AlertCircle,{color:"red-4"})),l&&React__default.default.createElement(HelperText,{$size:d},l))},Label=styled.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-size: ${({$size:e})=>"small"===e?16:18}px;
   font-weight: 500;
-  line-height: ${({ $size }) => ($size === 'small' ? 24 : 26)}px;
+  line-height: ${({$size:e})=>"small"===e?24:26}px;
 
-  ${({ $disabled }) => $disabled
-    ? `
+  ${({$disabled:e})=>e?`
     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.styled.div `
+  ${({$sx:e})=>e||""}
+`,InputWrapper=styled.styled.div`
   display: flex;
   gap: 8px;
   align-items: center;
   box-sizing: border-box;
-  padding: ${({ $size }) => ($size === 'small' ? '6px 12px' : '12px')};
-  background-color: ${({ $bg }) => $bg};
+  padding: ${({$size:e})=>"small"===e?"6px 12px":"12px"};
+  background-color: ${({$bg:e})=>e};
   border-radius: 8px;
   border: 1px solid transparent;
 
@@ -113,15 +38,14 @@ const InputWrapper = styled.styled.div `
     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.styled.input `
+  ${({$successful:e})=>e?"border-color: var(--color-green-3) !important;":""}
+  ${({$warning:e})=>e?"border-color: var(--color-red-4) !important;":""}
+`,Input=styled.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;
+  font-size: ${({$size:e})=>"small"===e?14:16}px;
+  line-height: ${({$size:e})=>"small"===e?20:24}px;
   color: var(--color-grey-3);
   border: none;
   outline: none;
@@ -132,26 +56,21 @@ const Input = styled.styled.input `
     color: var(--color-grey-6);
   }
 
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const HelperText = styled.styled.span `
+  ${({$sx:e})=>e||""}
+`,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 = styled.styled.span `
+  font-size: ${({$size:e})=>"small"===e?12:14}px;
+  line-height: ${({$size:e})=>"small"===e?16:20}px;
+`,MaxCharactersText=styled.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.styled.form `
+`,MultipleInputWrapper=styled.styled.form`
   display: flex;
   flex-flow: row wrap;
   gap: 8px 16px;
-`;
-
-exports.TextInput = TextInput;
+`;exports.TextInput=TextInput;

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

@@ -1,46 +1,5 @@
 "use client";
-'use strict';
-
-var dropdown = require('../../actions/dropdown/dropdown.js');
-var React = require('react');
-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 }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-const Time = ({ selectedTime, setTime, selectedPeriod, setPeriod, }) => {
-    const hours = React__default.default.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__default.default.createElement(dropdown.Dropdown, { options: hours.map((hour) => ({
-            value: hour,
-            label: hour,
-        })), containerSx: "height: 440px;", trigger: React__default.default.createElement(InputWrapper, null,
-            React__default.default.createElement(Input, { readOnly: true, value: `${selectedTime} ${selectedPeriod}` }),
-            React__default.default.createElement(clock.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.styled.div `
+"use strict";var dropdown=require("../../actions/dropdown/dropdown.js"),React=require("react"),styled=require("styled-components"),clock=require("../../../icons/time/clock.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Time=({selectedTime:e,setTime:t,selectedPeriod:r,setPeriod:a})=>{var o=React__default.default.useMemo(()=>{var t=[];for(let e=1;e<=12;e++)t.push(e+":00"),t.push(e+":15"),t.push(e+":30"),t.push(e+":45");return t},[]);return React__default.default.createElement(dropdown.Dropdown,{options:o.map(e=>({value:e,label:e})),containerSx:"height: 440px;",trigger:React__default.default.createElement(InputWrapper,null,React__default.default.createElement(Input,{readOnly:!0,value:e+" "+r}),React__default.default.createElement(clock.Clock,null)),additionalOptions:[{label:"AM",value:"AM"},{label:"PM",value:"PM"}],onChange:e=>{e=e.target.getAttribute("data-value")??"";t(e)},additionalOnChange:a,defaultValue:e,defaultAdditionalValue:r})},InputWrapper=styled.styled.div`
   width: fit-content;
   display: flex;
   gap: 8px;
@@ -58,8 +17,7 @@ const InputWrapper = styled.styled.div `
   &:focus-within {
     border-color: var(--color-primary-blue-2);
   }
-`;
-const Input = styled.styled.input `
+`,Input=styled.styled.input`
   max-width: 120px;
   padding: 0px;
   flex: 1;
@@ -75,6 +33,4 @@ const Input = styled.styled.input `
   &::placeholder {
     color: var(--color-grey-6);
   }
-`;
-
-exports.Time = Time;
+`;exports.Time=Time;

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

@@ -1,42 +1 @@
-'use strict';
-
-var React = require('react');
-var ReactPlayer = require('react-player');
-var Image = require('next/image');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var ReactPlayer__default = /*#__PURE__*/_interopDefaultCompat(ReactPlayer);
-var Image__default = /*#__PURE__*/_interopDefaultCompat(Image);
-
-const Video = ({ controls = true, loop = false, muted, playsInline, src, subtitles, style, thumbnail, }) => {
-    const ref = React__default.default.useRef(null);
-    return (React__default.default.createElement(ReactPlayer__default.default, { 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__default.default.createElement(Image__default.default, { 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%" }));
-};
-
-exports.Video = Video;
+"use strict";var React=require("react"),ReactPlayer=require("react-player"),Image=require("next/image");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),ReactPlayer__default=_interopDefaultCompat(ReactPlayer),Image__default=_interopDefaultCompat(Image);const Video=({controls:e=!0,loop:t=!1,muted:a,playsInline:l,src:r,subtitles:i,style:o,thumbnail:u})=>{var c=React__default.default.useRef(null);return React__default.default.createElement(ReactPlayer__default.default,{config:{file:{attributes:{crossOrigin:"true"},forceHLS:!0,hlsOptions:{autoStartLoad:!0},tracks:i?.map(e=>({kind:"subtitles",label:e.label,src:e.src,srcLang:e.locale}))}},controls:e,height:"100%",light:u?React__default.default.createElement(Image__default.default,{alt:"thumbnail for trailer",layout:"fill",priority:!0,quality:100,src:u,style:{objectFit:"contain"}}):void 0,loop:t,muted:a,pip:!1,playsinline:l,playing:!0,ref:c,style:{backgroundColor:"var(--color-grey-0)",maxHeight:720,maxWidth:1280,minHeight:480,overflow:"hidden",position:"relative",...o||{}},url:r,width:"100%"})};exports.Video=Video;

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

@@ -1,31 +1,4 @@
-'use strict';
-
-var React = require('react');
-var Image = require('next/image');
-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');
-var lock = require('../../../icons/security/lock.js');
-var play_solid = require('../../../icons/audio_video/play_solid.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var Image__default = /*#__PURE__*/_interopDefaultCompat(Image);
-
-const PlaylistItem = ({ duration, onClick, playable, progress = 0, shortDescription, thumbnail, title, }) => {
-    return (React__default.default.createElement(Wrapper, { onClick: playable ? onClick : undefined, "$playable": playable },
-        playable ? (React__default.default.createElement(play_solid.PlaySolid, { color: "white", size: 16, sx: "position: absolute; left: 8px; bottom: 4px;" })) : (React__default.default.createElement(lock.Lock, { color: "white", size: 16, sx: "position: absolute; left: 8px; bottom: 4px;" })),
-        React__default.default.createElement(Image__default.default, { alt: `thumbnail for ${title}`, height: 75, quality: 100, src: thumbnail, width: 133 }),
-        progress && duration && (React__default.default.createElement(ProgressBar, { progressPercent: progress / duration })),
-        React__default.default.createElement(box.Box, { "$dir": "column", "$gap": 4, sx: "margin-left: 16px; margin-right: auto; flex: 0 1 auto; flex-basis: content;" },
-            React__default.default.createElement(paragraph.P, { "$color": "grey-10", "$semiBold": true }, title),
-            shortDescription && (React__default.default.createElement(paragraph.P, { "$color": "grey-9", "$fontSize": 14, "$lineHeight": 20, "$textClampLines": 2, sx: "max-width: min(500px, 75%);" }, shortDescription))),
-        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 = styled.styled.div `
+"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),seconds_to_duration=require("../../atoms/seconds_to_duration/seconds_to_duration.js"),paragraph=require("../../atoms/typography/paragraph.js"),lock=require("../../../icons/security/lock.js"),play_solid=require("../../../icons/audio_video/play_solid.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image);const PlaylistItem=({duration:e,onClick:t,playable:a,progress:l=0,shortDescription:r,thumbnail:o,title:i})=>React__default.default.createElement(Wrapper,{onClick:a?t:void 0,$playable:a},a?React__default.default.createElement(play_solid.PlaySolid,{color:"white",size:16,sx:"position: absolute; left: 8px; bottom: 4px;"}):React__default.default.createElement(lock.Lock,{color:"white",size:16,sx:"position: absolute; left: 8px; bottom: 4px;"}),React__default.default.createElement(Image__default.default,{alt:"thumbnail for "+i,height:75,quality:100,src:o,width:133}),l&&e&&React__default.default.createElement(ProgressBar,{progressPercent:l/e}),React__default.default.createElement(box.Box,{$dir:"column",$gap:4,sx:"margin-left: 16px; margin-right: auto; flex: 0 1 auto; flex-basis: content;"},React__default.default.createElement(paragraph.P,{$color:"grey-10",$semiBold:!0},i),r&&React__default.default.createElement(paragraph.P,{$color:"grey-9",$fontSize:14,$lineHeight:20,$textClampLines:2,sx:"max-width: min(500px, 75%);"},r)),e&&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:e}))),Wrapper=styled.styled.div`
   width: 100%;
   flex: 0 1 auto;
   display: flex;
@@ -33,16 +6,10 @@ const Wrapper = styled.styled.div `
   position: relative;
   box-sizing: border-box;
   cursor: pointer;
-  ${({ $playable }) => $playable ? '' : 'pointer-events: none; cursor: initial;'}
-`;
-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 = styled.styled.svg `
+  ${({$playable:e})=>e?"":"pointer-events: none; cursor: initial;"}
+`,ProgressBar=({progressPercent:e})=>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*e,height:"2",fill:"var(--color-primary-blue-2)"}),React__default.default.createElement("rect",{x:133*e,width:133-133*e,height:"2",fill:"var(--color-grey-8)"})),ProgressBarSvg=styled.styled.svg`
   width: 133px;
   position: absolute;
   bottom: 0px;
   left: 0px;
-`;
-
-exports.PlaylistItem = PlaylistItem;
+`;exports.PlaylistItem=PlaylistItem;