@soul-refiner/design-system 2.0.1-alpha.1 → 2.0.2

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

@@ -1,5 +1,21 @@
 "use client";
-"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`
+'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 `
   display: flex;
   flex-flow: row nowrap;
   gap: 24px;
@@ -10,8 +26,9 @@
   input {
     display: none;
   }
-  ${({$sx:e})=>e||""}
-`,SelectBox=styled.styled.div`
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const SelectBox = styled.styled.div `
   position: relative;
   width: 18px;
   height: 18px;
@@ -19,7 +36,8 @@
   border-radius: 4px;
   flex-shrink: 0;
 
-  ${({$selected:e})=>e?`
+  ${({ $selected }) => $selected
+    ? `
     background-color: var(--color-primary-blue-2);
     border-color: var(--color-primary-blue-2);
     
@@ -31,5 +49,8 @@
       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,5 +1,42 @@
 "use client";
-"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`
+'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 `
   width: 100%;
   display: flex;
   gap: 4px;
@@ -10,24 +47,27 @@
   font-weight: 500;
   line-height: 26px;
 
-  ${({$disabled:e})=>e?`
+  ${({ $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:e})=>e||""}
-`,InputWrapper=styled.styled.div`
-  min-width: ${({$minWidth:e})=>e?e+"px;":""}
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const InputWrapper = styled.styled.div `
+  min-width: ${({ $minWidth }) => ($minWidth ? $minWidth + 'px;' : '')}
   display: flex;
   gap: 8px;
   align-items: center;
   box-sizing: border-box;
   padding: 12px;
-  background-color: ${({$bg:e})=>e};
+  background-color: ${({ $bg }) => $bg};
   border-radius: 8px;
   border: 1px solid transparent;
 
@@ -39,10 +79,11 @@
     border-color: var(--color-primary-blue-2);
   }
 
-  ${({$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;":""}
+  ${({ $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;' : '')}
   padding: 0px;
   flex: 1;
   font-family: var(--font-inter);
@@ -58,13 +99,15 @@
     color: var(--color-grey-6);
   }
 
-  ${({$resize:e})=>e?"":"resize: none;"}
-`,HelperText=styled.styled.p`
+  ${({ $resize }) => ($resize ? '' : 'resize: none;')}
+`;
+const HelperText = styled.styled.p `
   color: var(--color-grey-4);
   font-family: var(--font-inter);
   font-size: 14px;
   line-height: 20px;
-`,MaxCharactersText=styled.styled.p`
+`;
+const MaxCharactersText = styled.styled.p `
   text-align: right;
   color: var(--color-grey-6);
   font-family: var(--font-inter);
@@ -72,4 +115,6 @@
   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,32 +1,107 @@
 "use client";
-"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`
+'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 `
   width: 100%;
   display: flex;
   gap: 4px;
   flex-flow: column nowrap;
   color: var(--color-grey-2);
   font-family: var(--font-inter);
-  font-size: ${({$size:e})=>"small"===e?16:18}px;
+  font-size: ${({ $size }) => ($size === 'small' ? 16 : 18)}px;
   font-weight: 500;
-  line-height: ${({$size:e})=>"small"===e?24:26}px;
+  line-height: ${({ $size }) => ($size === 'small' ? 24 : 26)}px;
 
-  ${({$disabled:e})=>e?`
+  ${({ $disabled }) => $disabled
+    ? `
     color: var(--color-grey-7) !important;
     & > * {
       color: var(--color-grey-7) !important;
     }
     & > div {
       background-color: var(--color-grey-9) !important;
-    }`:""}
+    }`
+    : ''}
 
-  ${({$sx:e})=>e||""}
-`,InputWrapper=styled.styled.div`
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const InputWrapper = styled.styled.div `
   display: flex;
   gap: 8px;
   align-items: center;
   box-sizing: border-box;
-  padding: ${({$size:e})=>"small"===e?"6px 12px":"12px"};
-  background-color: ${({$bg:e})=>e};
+  padding: ${({ $size }) => ($size === 'small' ? '6px 12px' : '12px')};
+  background-color: ${({ $bg }) => $bg};
   border-radius: 8px;
   border: 1px solid transparent;
 
@@ -38,14 +113,15 @@
     border-color: var(--color-primary-blue-2);
   }
 
-  ${({$successful:e})=>e?"border-color: var(--color-green-3) !important;":""}
-  ${({$warning:e})=>e?"border-color: var(--color-red-4) !important;":""}
-`,Input=styled.styled.input`
+  ${({ $successful }) => $successful ? 'border-color: var(--color-green-3) !important;' : ''}
+  ${({ $warning }) => $warning ? 'border-color: var(--color-red-4) !important;' : ''}
+`;
+const Input = styled.styled.input `
   padding: 0px;
   flex: 1;
   font-family: var(--font-inter);
-  font-size: ${({$size:e})=>"small"===e?14:16}px;
-  line-height: ${({$size:e})=>"small"===e?20:24}px;
+  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;
@@ -56,21 +132,26 @@
     color: var(--color-grey-6);
   }
 
-  ${({$sx:e})=>e||""}
-`,HelperText=styled.styled.span`
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const HelperText = styled.styled.span `
   color: var(--color-grey-4);
   font-family: var(--font-inter);
-  font-size: ${({$size:e})=>"small"===e?12:14}px;
-  line-height: ${({$size:e})=>"small"===e?16:20}px;
-`,MaxCharactersText=styled.styled.span`
+  font-size: ${({ $size }) => ($size === 'small' ? 12 : 14)}px;
+  line-height: ${({ $size }) => ($size === 'small' ? 16 : 20)}px;
+`;
+const 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;
-`,MultipleInputWrapper=styled.styled.form`
+`;
+const 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,5 +1,46 @@
 "use client";
-"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`
+'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 `
   width: fit-content;
   display: flex;
   gap: 8px;
@@ -17,7 +58,8 @@
   &:focus-within {
     border-color: var(--color-primary-blue-2);
   }
-`,Input=styled.styled.input`
+`;
+const Input = styled.styled.input `
   max-width: 120px;
   padding: 0px;
   flex: 1;
@@ -33,4 +75,6 @@
   &::placeholder {
     color: var(--color-grey-6);
   }
-`;exports.Time=Time;
+`;
+
+exports.Time = Time;

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

@@ -1 +1,42 @@
-"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;
+'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;

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

@@ -1,4 +1,31 @@
-"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`
+'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 `
   width: 100%;
   flex: 0 1 auto;
   display: flex;
@@ -6,10 +33,16 @@
   position: relative;
   box-sizing: border-box;
   cursor: pointer;
-  ${({$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`
+  ${({ $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 `
   width: 133px;
   position: absolute;
   bottom: 0px;
   left: 0px;
-`;exports.PlaylistItem=PlaylistItem;
+`;
+
+exports.PlaylistItem = PlaylistItem;