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

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

@@ -0,0 +1,54 @@
+"use client";
+"use strict";var React=require("react"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),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 Radio=({checked:e=!1,disabled:r,label:a,onClick:t,reversed:o,sx:l,value:d,...i})=>{return React__default.default.createElement(Label,{$disabled:r,$reversed:o,$sx:l,onClick:e=>{e.stopPropagation(),e.preventDefault(),t&&t(e)}},React__default.default.createElement(Input,{checked:e,onClickCapture:e=>{e.stopPropagation(),t&&t(e)},disabled:r,type:"radio",value:d,...i}),React__default.default.createElement(paragraph.P,{as:"span"},a))},Label=styled.styled.label`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  user-select: none;
+
+  ${({$disabled:e})=>e?`
+    & > * {
+      color: var(--color-grey-7);
+    }`:`
+    cursor: pointer;
+    &:hover {
+      input {
+        border-color: var(--color-primary-blue-2);
+      }
+    }`}
+  flex-direction: ${({$reversed:e})=>e?"row-reverse":"row"};
+  ${({$sx:e})=>e||""}
+`,Input=styled.styled.input`
+  appearance: none;
+  position: relative;
+  height: 20px;
+  width: 20px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  background-color: var(--color-white);
+  border: 1px solid var(--color-grey-8);
+  cursor: pointer;
+  border-radius: 50%;
+
+  &:checked {
+    border-color: var(--color-primary-blue-2);
+    &::after {
+      content: '';
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background-color: var(--color-primary-blue-2);
+    }
+  }
+
+  &:disabled {
+    &:checked {
+      border-color: var(--color-grey-8);
+      &::after {
+        background-color: var(--color-grey-7);
+      }
+    }
+  }
+`,RadioGroup=({children:e,name:r,...a})=>React__default.default.createElement(box.Box,{...a},React__default.default.Children.map(e,e=>{if(React__default.default.isValidElement(e))return React__default.default.createElement(Radio,{key:e.key,name:r,...e.props})}));(Radio.Group=RadioGroup).displayName="Radio.Group",exports.Radio=Radio;

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

@@ -0,0 +1,82 @@
+"use client";
+"use strict";var React=require("react"),styled=require("styled-components"),styles=require("../../../common/styles.js"),close=require("../../../icons/basic/close.js"),search=require("../../../icons/basic/search.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Search=({dropdownFilter:e,onChange:r,onClearText:o,onSubmit:a,placeholder:l,size:t,sx:d,value:s})=>{const[i,c]=React__default.default.useState(!1),[n,p]=React__default.default.useState(!1),u=React__default.default.useRef(null);var g=!i&&"collapsed"===t,x=g||"large"===t?24:16;return React__default.default.createElement(Wrapper,{$align:"center",$dir:"row",$isCollapsed:g,$isFocused:n,$borderRadius:"large",$size:t,$sx:d,onClick:e&&"large"===t?void 0:g?()=>{c(!0),u?.current?.focus()}:()=>{u?.current?.focus()}},React__default.default.createElement(search.Search,{color:"large"===t?"blue-7":"grey-3",size:x,onClick:g?void 0:()=>{c(!1),p(!1),u?.current?.blur()},sx:g||"collapsed"!==t?void 0:`
+          &:hover {
+            cursor: pointer;
+            background-color: var(--color-grey-10);
+            border-radius: 50%;
+          }`}),React__default.default.createElement(Input,{$isCollapsed:g,onBlur:()=>p(!1),onChange:r,onFocus:()=>p(!0),onSubmit:a,placeholder:l,ref:u,value:s}),!g&&o&&React__default.default.createElement(close.Close,{size:16,onClick:o,sx:`
+            ${0===s.length?"visibility: hidden;":""}
+            padding: 4px;
+            &:hover {
+              cursor: pointer;
+              background-color: var(--color-grey-10);
+              border-radius: 50%;
+            }`}),"large"===t&&e&&React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(Separator,null),e))},Wrapper=styled.styled.div`
+  ${styles.Styles.flex}
+  ${styles.Styles.padding}
+  display: flex;
+  background-color: var(--color-white);
+  border: 1px solid transparent;
+
+  & > * {
+    width: fit-content;
+    flex-shrink: 0;
+  }
+
+  ${({$isCollapsed:e,$size:r})=>e?`
+    padding: 12px;
+    border-radius: 50%;
+    &:hover {
+      background-color: var(--color-grey-10);
+      cursor: pointer;
+    }`:`
+    border-radius: 8px;
+    `+("collapsed"===r?`
+      gap: 8px;
+      padding: 10px 16px;
+      border: 1px solid var(--color-grey-8);
+      
+      &:hover {
+        border: 1px solid var(--color-grey-6);
+      }`:"small"===r?`
+      gap: 12px;
+      padding: 10px 16px;
+      border: 1px solid var(--color-grey-8);
+      
+      &:hover {
+        border: 1px solid var(--color-grey-6);
+      }`:"medium"===r?`
+      gap: 12px;
+      padding: 14px 16px;
+      border: 1px solid var(--color-grey-8);
+      
+      &:hover {
+        border: 1px solid var(--color-grey-6);
+      }`:`
+      gap: 16px;
+      padding: 16px;
+      box-shadow: var(--elevation-1);
+      
+      &:hover {
+        border: 1px solid var(--color-grey-6);
+      }`)}
+
+  ${({$isFocused:e,$isCollapsed:r})=>e&&!r?"border: 1px solid var(--color-primary-blue-2) !important;":""}
+
+  ${({$sx:e})=>e||""}
+`,Input=styled.styled.input.attrs(({ref:e})=>({ref:e}))`
+  flex: 1;
+  border-radius: 8px;
+  outline: none;
+  border: none;
+  font-size: 14px;
+  font-family: var(--font-inter);
+  line-height: 20px;
+  color: var(--color-grey-2);
+
+  ${({$isCollapsed:e})=>e?"width: 0px; height: 0px; padding: 0px !important; border: none !important;":""}
+`,Separator=styled.styled.div`
+  width: 1px;
+  height: 20px;
+  background-color: var(--color-grey-9);
+`;exports.Search=Search;

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

@@ -0,0 +1,35 @@
+"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`
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 24px;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+
+  input {
+    display: none;
+  }
+  ${({$sx:e})=>e||""}
+`,SelectBox=styled.styled.div`
+  position: relative;
+  width: 18px;
+  height: 18px;
+  border: 1px solid var(--color-grey-8);
+  border-radius: 4px;
+  flex-shrink: 0;
+
+  ${({$selected:e})=>e?`
+    background-color: var(--color-primary-blue-2);
+    border-color: var(--color-primary-blue-2);
+    
+    &::after {
+      position: absolute;
+      content: '✔';
+      top: -1px;
+      left: 4px;
+      font-size: 13px;
+      color: var(--color-white);
+      font-weight: 500;
+    }`:""}
+`;exports.Select=Select;

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

@@ -0,0 +1,75 @@
+"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`
+  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: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: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:e})=>e};
+  border-radius: 8px;
+  border: 1px solid transparent;
+
+  &:hover {
+    border-color: var(--color-grey-8);
+  }
+
+  &:focus-within {
+    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;":""}
+  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:e})=>e?"":"resize: none;"}
+`,HelperText=styled.styled.p`
+  color: var(--color-grey-4);
+  font-family: var(--font-inter);
+  font-size: 14px;
+  line-height: 20px;
+`,MaxCharactersText=styled.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;
+`;exports.TextArea=TextArea;

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

@@ -0,0 +1,76 @@
+"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`
+  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-weight: 500;
+  line-height: ${({$size:e})=>"small"===e?24:26}px;
+
+  ${({$disabled:e})=>e?`
+    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`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  box-sizing: border-box;
+  padding: ${({$size:e})=>"small"===e?"6px 12px":"12px"};
+  background-color: ${({$bg:e})=>e};
+  border-radius: 8px;
+  border: 1px solid transparent;
+
+  &:hover {
+    border-color: var(--color-grey-8);
+  }
+
+  &:focus-within {
+    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`
+  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;
+  color: var(--color-grey-3);
+  border: none;
+  outline: none;
+  border-radius: 8px;
+  background-color: transparent;
+
+  &::placeholder {
+    color: var(--color-grey-6);
+  }
+
+  ${({$sx:e})=>e||""}
+`,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`
+  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`
+  display: flex;
+  flex-flow: row wrap;
+  gap: 8px 16px;
+`;exports.TextInput=TextInput;

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

@@ -0,0 +1,36 @@
+"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`
+  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);
+  }
+`,Input=styled.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);
+  }
+`;exports.Time=Time;

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

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

@@ -0,0 +1,15 @@
+"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;
+  align-items: center;
+  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`
+  width: 133px;
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+`;exports.PlaylistItem=PlaylistItem;

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

@@ -0,0 +1,102 @@
+"use client";
+"use strict";var React=require("react"),Image=require("next/image"),ReactPlayer=require("react-player"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js"),button=require("../../actions/button/button.js"),lock_circle=require("../../../icons/security/lock_circle.js"),play_solid=require("../../../icons/audio_video/play_solid.js"),playlistItem=require("./playlist-item.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image),ReactPlayer__default=_interopDefaultCompat(ReactPlayer);const VideoPlayer=({activeIndex:e,pip:t,playable:a,playlist:l,onPipChange:r,onProgress:o,orientation:i,setMediaItem:n,subtitle:c,title:d,trailer:p})=>{const[s,u]=React__default.default.useState(!1),[x,f]=React__default.default.useState(!a),g=React__default.default.useRef(null),m=x?p:l?.[e];const b=e=>{f(!1),n(e)};return m?React__default.default.createElement(Wrapper,{$orientation:i},React__default.default.createElement(InnerWrapper,{$orientation:i,$playable:a||x},"vertical"===i&&React__default.default.createElement(box.Box,{$dir:"column",$gap:4,sx:"margin: 24px;"},React__default.default.createElement(heading.H,{as:"h2",$bold:!0,$color:"white",$fontSize:28,$lineHeight:36},d),React__default.default.createElement(paragraph.P,{as:"h3",$bold:!0,$color:"grey-8"},c)),React__default.default.createElement(ReactPlayer__default.default,{className:"player",config:{file:{attributes:{crossOrigin:"true"},forceHLS:!0,hlsOptions:{autoStartLoad:!0},tracks:m.subtitles.map(e=>({kind:"subtitles",label:e.label,src:e.src,srcLang:e.locale}))}},controls:!0,height:"100%",light:React__default.default.createElement(Image__default.default,{alt:"thumbnail for "+d,layout:"fill",priority:!0,quality:100,style:{objectFit:"contain"},src:m.thumbnail}),progressInterval:4e3,onDisablePIP:()=>r&&r(!1),onEnablePIP:()=>r&&r(!0),onProgress:o,onReady:()=>{x||0===g?.current?.getCurrentTime()&&0!==m?.progress&&g.current.seekTo(m.progress)},pip:t,playIcon:a||x?React__default.default.createElement(play_solid.PlaySolid,{color:"white",size:24,sx:"position: absolute; width: 54px; height: 54px;"}):React__default.default.createElement(lock_circle.LockCircle,{color:"white",size:24,sx:"position: absolute; width: 54px; height: 54px;"}),playing:a,ref:g,style:{backgroundColor:"var(--color-grey-0)",maxHeight:720,maxWidth:1280,minHeight:480,overflow:"hidden",position:"relative"},url:m.src,width:"100%"}),"horizontal"===i&&React__default.default.createElement(Side,null,React__default.default.createElement(box.Box,{$dir:"column",$gap:4},React__default.default.createElement(heading.H,{as:"h2",$bold:!0,$color:"white",$fontSize:28,$lineHeight:36},d),React__default.default.createElement(paragraph.P,{as:"h3",$bold:!0,$color:"grey-8"},c)),!!p&&React__default.default.createElement(box.Box,{$dir:"column",$gap:8,sx:`
+                margin-bottom: 8x;
+                border-bottom: 1px solid var(--color-grey-4);
+                padding-bottom: 16px;
+                `},React__default.default.createElement(box.Box,{$align:"center",$justify:"space-between",sx:"padding: 8px 0px 8px 14px;"},React__default.default.createElement(paragraph.P,{$color:"grey-8",$fontSize:14,$lineHeight:20,$semiBold:!0},"Trailer")),React__default.default.createElement(playlistItem.PlaylistItem,{onClick:()=>f(!0),playable:!0,thumbnail:p.thumbnail,title:d+" Trailer"})),React__default.default.createElement(box.Box,{$align:"center",$justify:"space-between",sx:"padding: 8px 0px 8px 14px;"},React__default.default.createElement(paragraph.P,{$color:"grey-8",$fontSize:14,$lineHeight:20,$semiBold:!0},"All lessons")),React__default.default.createElement(HorizontalPlaylistWrapper,null,l.map((e,t)=>React__default.default.createElement(playlistItem.PlaylistItem,{key:e.id,duration:e.duration,onClick:()=>b(t),playable:a,progress:e.progress,shortDescription:e.shortDescription,thumbnail:e.thumbnail,title:e.title})))),"vertical"===i&&React__default.default.createElement(box.Box,{$dir:"column",$gap:24},!!p&&React__default.default.createElement(box.Box,{$dir:"column",$gap:8,sx:"margin: 0px 24px;"},React__default.default.createElement(box.Box,{$align:"center",$justify:"space-between",sx:"padding: 8px 0px 8px 14px;"},React__default.default.createElement(paragraph.P,{$color:"grey-8",$fontSize:14,$lineHeight:20,$semiBold:!0},"Trailer")),React__default.default.createElement(playlistItem.PlaylistItem,{onClick:()=>f(!0),playable:!0,thumbnail:p.thumbnail,title:d+" Trailer"})),React__default.default.createElement(box.Box,{$align:"center",$justify:"space-between",sx:"padding: 8px 0px; margin: 0px 24px; border-bottom: 1px solid var(--color-grey-3);"},React__default.default.createElement(paragraph.P,{$color:"grey-8",$fontSize:14,$lineHeight:20,$semiBold:!0},"All lessons"),React__default.default.createElement(button.Button,{onClick:()=>u(e=>!e),size:"small",sx:"background-color: var(--color-grey-2); border-color: var(--color-grey-8); color: var(--color-grey-8);",type:"text"},s?"Collapse":"View all")),React__default.default.createElement(VerticalPlaylistWrapper,{$showingAll:s},l.map((e,t)=>React__default.default.createElement(playlistItem.PlaylistItem,{key:e.id,duration:e.duration,onClick:()=>b(t),playable:a,progress:e.progress,shortDescription:e.shortDescription,thumbnail:e.thumbnail,title:e.title})))))):null},Wrapper=styled.styled.div`
+  display: flex;
+  justify-content: center;
+  background-color: var(--color-grey-0);
+
+  img {
+    object-fit: cover !important;
+  }
+
+  ${({$orientation:e})=>"vertical"===e?"max-width: 960px; height: max-content;":""}
+`,InnerWrapper=styled.styled.div`
+  max-width: 2284px;
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+
+  ${({$playable:e})=>e?"":`
+    .player {
+      cursor: initial;
+      pointer-events: none;
+      user-select: none;
+    }`}
+
+  ${({$orientation:e})=>"vertical"===e?`
+    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;
+      }`}
+`,Side=styled.styled.div`
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  gap: 24px;
+`,HorizontalPlaylistWrapper=styled.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%;
+  }
+`,VerticalPlaylistWrapper=styled.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:e})=>e?`
+    max-height: unset;
+    overflow-y: visible;`:""}
+`;exports.VideoPlayer=VideoPlayer;

package/dist/components/navigation/breadcrumb/breadcrumb.js

@@ -0,0 +1,64 @@
+"use client";
+"use strict";var React=require("react"),styled=require("styled-components"),Link=require("next/link"),box=require("../../atoms/box/box.js"),chevron_left=require("../../../icons/arrow/chevron_left.js"),chevron_right=require("../../../icons/arrow/chevron_right.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Link__default=_interopDefaultCompat(Link);const Breadcrumb=({children:e,previous:t})=>{const r=React__default.default.useId(),a=React__default.default.Children.toArray(e);return t?React__default.default.createElement(box.Box,{$align:"center",$gap:8,sx:"& > *:last-child { color: var(--color-grey-3) !important; };"},React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(chevron_left.ChevronLeft,{color:"grey-3",size:24}),React__default.default.isValidElement(a[0])&&React__default.default.cloneElement(a[0],{icon:void 0,avatar:void 0}))):React__default.default.createElement(box.Box,{$align:"center",$gap:8},a.map((e,t)=>!React__default.default.isValidElement(e)||"BreadcrumbItem"!==e.type?.displayName&&"Breadcrumb.Item"!==e.type?.displayName?null:React__default.default.createElement(React__default.default.Fragment,{key:r+t.toString(36)},e,a.length-1!==t&&React__default.default.createElement(chevron_right.ChevronRight,{color:"grey-3",size:24}))))},BreadcrumbItem=({avatar:e,children:t,href:r,icon:a,iconColor:o="blue",onClick:l})=>React__default.default.createElement(Item,{href:r||"#",onClick:l,$type:a?"icon":e?"avatar":"text",$iconColor:`hue-${o}-1`,scroll:!1},a&&React__default.default.createElement(IconWrapper,{$color:o},React__default.default.cloneElement(a,{color:`hue-${o}-1`,size:24})),e,t),Item=((Breadcrumb.Item=BreadcrumbItem).displayName="Breadcrumb.Item",styled.styled(Link__default.default)`
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  font-family: var(--font-inter);
+  color: var(--color-grey-3);
+
+  ${({as:e})=>"a"===e?`
+    text-decoration: none;
+    color: var(--color-primary-blue-2);
+    
+    &:hover {
+      position: relative;
+      &:after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 1px;
+        bottom: 0px;
+        right: 0px;
+        background-color: var(--color-primary-blue-1);
+      }
+    }`:""}
+
+  ${({$type:e,$iconColor:t})=>"icon"===e?`
+    gap: 32px;
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 36px;
+    color: var(--color-${t});
+
+    &:hover {
+      &:after {
+        width: calc(100% - 80px);
+        background-color: var(--color-${t});
+      }
+    }`:"avatar"===e?`
+    padding: 4px;
+    gap: 16px;
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 26px;
+    color: var(--color-grey-1);
+    &:hover {
+      &:after {
+        background-color: var(--color-primary-blue-2);
+      }
+    }`:`
+    padding: 4px 0px;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    `}
+`),IconWrapper=styled.styled.div`
+  background-color: ${({$color:e})=>`var(--color-hue-${e}-2)`};
+  height: 48px;
+  width: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  border-radius: 8px;
+`;exports.Breadcrumb=Breadcrumb;

package/dist/components/navigation/inner/inner.js

@@ -0,0 +1,83 @@
+"use strict";var React=require("react"),styled=require("styled-components"),Link=require("next/link"),button=require("../../actions/button/button.js"),drawer=require("../../surfaces/drawer/drawer.js"),chevron_down=require("../../../icons/arrow/chevron_down.js"),chevron_left=require("../../../icons/arrow/chevron_left.js"),chevron_up=require("../../../icons/arrow/chevron_up.js"),plus=require("../../../icons/basic/plus.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Link__default=_interopDefaultCompat(Link);const INNER_NAV_CHILD_TYPES=["Header","Item","Dropdown","BackButton","Drawer","Misc"],InnerNav=({children:e})=>{var r={Header:[],Item:[],Dropdown:[],BackButton:[],Drawer:[],Misc:[]};for(const a of React__default.default.Children.toArray(e))(React__default.default.isValidElement(a)&&INNER_NAV_CHILD_TYPES.includes(a?.type?.displayName?.replace("InnerNav.",""))?r[a?.type?.displayName.replace("InnerNav.","")]:r.Misc).push(a);return React__default.default.createElement(NavWrapper,{"aria-label":"side-navigation"},React__default.default.createElement("div",null,r.Header),React__default.default.createElement("div",null,r.BackButton),React__default.default.createElement("div",null,r.Drawer),React__default.default.createElement("div",null,r.Item),React__default.default.createElement("div",null,r.Dropdown),React__default.default.createElement("div",null,r.Misc))},NavWrapper=styled.styled.nav`
+  height: 100%;
+  width: 365px;
+  padding: 24px 12px 24px 16px;
+  box-sizing: border-box;
+  background-color: var(--color-blue-10);
+  border-right: 1px solid var(--color-grey-9);
+`,InnerNavItem=({active:e,href:r,icon:a,label:t,sx:n,onClick:l})=>React__default.default.createElement(Item,{$active:e,$sx:n,href:r||"#",scroll:!1,onClick:l},a,t),Item=styled.styled(Link__default.default)`
+  padding: 14px 16px;
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  border-radius: 8px;
+  font-family: var(--font-inter);
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--color-blue-2);
+  cursor: pointer;
+  svg {
+    fill: var(--color-blue-2);
+  }
+  ${({$active:e})=>e?`
+    background-color: var(--color-primary-blue-3);`:`
+    &:hover {
+      background-color: var(--color-primary-blue-4);
+    }`}
+
+  ${({$sx:e})=>e||""}
+`,InnerNavDropdown=((InnerNav.Item=InnerNavItem).displayName="InnerNav.Item",({children:e,icon:r,label:a,open:t,sx:n,onClick:l})=>React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(DropdownItem,{$active:!1,$sx:n,onClick:l},r,React__default.default.createElement(DropdownTriggerWrapper,null,a,t&&React__default.default.createElement(chevron_up.ChevronUp,{size:16}),!t&&React__default.default.createElement(chevron_down.ChevronDown,{size:16}))),t&&React__default.default.createElement(DropdownContent,null,e))),DropdownContent=styled.styled.div`
+  & > a,
+  & > button {
+    padding-left: 40px;
+  }
+`,DropdownTriggerWrapper=styled.styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1;
+`,DropdownItem=styled.styled.a`
+  padding: 14px 16px;
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  border-radius: 8px;
+  font-family: var(--font-inter);
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--color-blue-2);
+  cursor: pointer;
+  svg {
+    fill: var(--color-blue-2);
+  }
+  ${({$active:e})=>e?`
+    background-color: var(--color-primary-blue-3);`:`
+    &:hover {
+      background-color: var(--color-primary-blue-4);
+    }`}
+
+  ${({$sx:e})=>e||""}
+`,InnerNavBackButton=((InnerNav.Dropdown=InnerNavDropdown).displayName="InnerNav.Dropdown",({href:e,label:r,sx:a})=>React__default.default.createElement(BackButton,{href:e,$sx:a,scroll:!1},React__default.default.createElement("div",null,React__default.default.createElement(chevron_left.ChevronLeft,{size:24})),r)),BackButton=styled.styled(Link__default.default)`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: var(--font-inter);
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--color-grey-3);
+  text-decoration: none;
+  border-radius: 8px;
+
+  &:hover {
+    background-color: var(--color-primary-blue-4);
+  }
+
+  div {
+    padding: 12px;
+  }
+
+  ${({$sx:e})=>e||""}
+`,InnerNavHeader=((InnerNav.BackButton=InnerNavBackButton).displayName="InnerNav.BackButton",({children:e})=>React__default.default.createElement(HeaderWrapper,null,e)),HeaderWrapper=styled.styled.div``,InnerNavDrawer=((InnerNav.Header=InnerNavHeader).displayName="InnerNav.Header",({children:e,label:r,controlledOpen:a,onOpenChange:t})=>React__default.default.createElement(drawer.Drawer,{controlledOpen:a,onOpenChange:t},React__default.default.createElement(drawer.Drawer.Trigger,null,React__default.default.createElement(button.Button,{icon:React__default.default.createElement(plus.Plus,{color:"white"}),size:"small",sx:"width: 100%; margin-bottom: 24px;",type:"primary",onClick:()=>{t?.()}},r)),e));(InnerNav.Drawer=InnerNavDrawer).displayName="InnerNav.Drawer",InnerNav.DrawerHeader=drawer.Drawer.Header,InnerNav.DrawerContent=drawer.Drawer.Content,InnerNav.DrawerFooter=drawer.Drawer.Footer,InnerNav.DrawerTrigger=drawer.Drawer.Trigger,exports.InnerNav=InnerNav;