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

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

@@ -1,105 +1,9 @@
 "use client";
-'use strict';
-
-var React = require('react');
-var Image = require('next/image');
-var ReactPlayer = require('react-player');
-var styled = require('styled-components');
-var box = require('../../atoms/box/box.js');
-var heading = require('../../atoms/typography/heading.js');
-var paragraph = require('../../atoms/typography/paragraph.js');
-var button = require('../../actions/button/button.js');
-var lock_circle = require('../../../icons/security/lock_circle.js');
-var play_solid = require('../../../icons/audio_video/play_solid.js');
-var playlistItem = require('./playlist-item.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);
-var ReactPlayer__default = /*#__PURE__*/_interopDefaultCompat(ReactPlayer);
-
-/**
- * ReactPlayer props reference -> https://www.npmjs.com/package/react-player#props
- * HLS Option props reference -> https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning
- */
-const VideoPlayer = ({ activeIndex, pip, playable, playlist, onPipChange, onProgress, orientation, setMediaItem, subtitle, title, trailer, }) => {
-    const [showingAll, setShowingAll] = React__default.default.useState(false);
-    const [playingTrailer, setPlayingTrailer] = React__default.default.useState(!playable);
-    const ref = React__default.default.useRef(null);
-    const mediaItem = playingTrailer ? trailer : playlist?.[activeIndex];
-    const handleReady = () => {
-        if (!playingTrailer) {
-            const currTime = ref?.current?.getCurrentTime();
-            if (currTime === 0 && mediaItem?.progress !== 0) {
-                ref.current.seekTo(mediaItem.progress);
-            }
-        }
-    };
-    const handleMediaItemChange = (id) => {
-        setPlayingTrailer(false);
-        setMediaItem(id);
-    };
-    const toggleShowingAll = () => setShowingAll((prev) => !prev);
-    if (!mediaItem)
-        return null;
-    return (React__default.default.createElement(Wrapper, { "$orientation": orientation },
-        React__default.default.createElement(InnerWrapper, { "$orientation": orientation, "$playable": playable || playingTrailer },
-            orientation === 'vertical' && (React__default.default.createElement(box.Box, { "$dir": "column", "$gap": 4, sx: "margin: 24px;" },
-                React__default.default.createElement(heading.H, { as: "h2", "$bold": true, "$color": "white", "$fontSize": 28, "$lineHeight": 36 }, title),
-                React__default.default.createElement(paragraph.P, { as: "h3", "$bold": true, "$color": "grey-8" }, subtitle))),
-            React__default.default.createElement(ReactPlayer__default.default, { className: "player", config: {
-                    file: {
-                        attributes: {
-                            crossOrigin: 'true',
-                        },
-                        forceHLS: true,
-                        hlsOptions: {
-                            autoStartLoad: true,
-                        },
-                        tracks: mediaItem.subtitles.map((subtitle) => ({
-                            kind: 'subtitles',
-                            label: subtitle.label,
-                            src: subtitle.src,
-                            srcLang: subtitle.locale,
-                        })),
-                    },
-                }, controls: true, height: "100%", light: React__default.default.createElement(Image__default.default, { alt: `thumbnail for ${title}`, layout: "fill", priority: true, quality: 100, style: {
-                        objectFit: 'contain',
-                    }, src: mediaItem.thumbnail }), progressInterval: 4000, onDisablePIP: () => onPipChange && onPipChange(false), onEnablePIP: () => onPipChange && onPipChange(true), onProgress: onProgress, onReady: handleReady, pip: pip, playIcon: playable || playingTrailer ? (React__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: playable, ref: ref, style: {
-                    backgroundColor: 'var(--color-grey-0)',
-                    maxHeight: 720,
-                    maxWidth: 1280,
-                    minHeight: 480,
-                    overflow: 'hidden',
-                    position: 'relative',
-                }, url: mediaItem.src, width: "100%" }),
-            orientation === 'horizontal' && (React__default.default.createElement(Side, null,
-                React__default.default.createElement(box.Box, { "$dir": "column", "$gap": 4 },
-                    React__default.default.createElement(heading.H, { as: "h2", "$bold": true, "$color": "white", "$fontSize": 28, "$lineHeight": 36 }, title),
-                    React__default.default.createElement(paragraph.P, { as: "h3", "$bold": true, "$color": "grey-8" }, subtitle)),
-                !!trailer && (React__default.default.createElement(box.Box, { "$dir": "column", "$gap": 8, sx: `
+"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": true }, "Trailer")),
-                    React__default.default.createElement(playlistItem.PlaylistItem, { onClick: () => setPlayingTrailer(true), playable: true, thumbnail: trailer.thumbnail, title: `${title} 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": true }, "All lessons")),
-                React__default.default.createElement(HorizontalPlaylistWrapper, null, playlist.map((playlistItem$1, index) => (React__default.default.createElement(playlistItem.PlaylistItem, { key: playlistItem$1.id, duration: playlistItem$1.duration, onClick: () => handleMediaItemChange(index), playable: playable, progress: playlistItem$1.progress, shortDescription: playlistItem$1.shortDescription, thumbnail: playlistItem$1.thumbnail, title: playlistItem$1.title })))))),
-            orientation === 'vertical' && (React__default.default.createElement(box.Box, { "$dir": "column", "$gap": 24 },
-                !!trailer && (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": true }, "Trailer")),
-                    React__default.default.createElement(playlistItem.PlaylistItem, { onClick: () => setPlayingTrailer(true), playable: true, thumbnail: trailer.thumbnail, title: `${title} 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": true }, "All lessons"),
-                    React__default.default.createElement(button.Button, { onClick: toggleShowingAll, size: "small", sx: "background-color: var(--color-grey-2); border-color: var(--color-grey-8); color: var(--color-grey-8);", type: "text" }, showingAll ? 'Collapse' : 'View all')),
-                React__default.default.createElement(VerticalPlaylistWrapper, { "$showingAll": showingAll }, playlist.map((playlistItem$1, index) => (React__default.default.createElement(playlistItem.PlaylistItem, { key: playlistItem$1.id, duration: playlistItem$1.duration, onClick: () => handleMediaItemChange(index), playable: playable, progress: playlistItem$1.progress, shortDescription: playlistItem$1.shortDescription, thumbnail: playlistItem$1.thumbnail, title: playlistItem$1.title })))))))));
-};
-const Wrapper = styled.styled.div `
+                `},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);
@@ -108,29 +12,24 @@ const Wrapper = styled.styled.div `
     object-fit: cover !important;
   }
 
-  ${({ $orientation }) => $orientation === 'vertical' ? 'max-width: 960px; height: max-content;' : ''}
-`;
-const InnerWrapper = styled.styled.div `
+  ${({$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 }) => $playable
-    ? ''
-    : `
+  ${({$playable:e})=>e?"":`
     .player {
       cursor: initial;
       pointer-events: none;
       user-select: none;
     }`}
 
-  ${({ $orientation }) => $orientation === 'vertical'
-    ? `
+  ${({$orientation:e})=>"vertical"===e?`
     flex-direction: column;
     gap: 24px;
-    justify-content: flex-start;`
-    : `
+    justify-content: flex-start;`:`
       & > div:first-of-type {
         flex: 5;
         aspect-ratio: 1280 / 720;
@@ -138,16 +37,14 @@ const InnerWrapper = styled.styled.div `
       & > div:last-of-type {
         flex: 3;
       }`}
-`;
-const Side = styled.styled.div `
+`,Side=styled.styled.div`
   position: relative;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   padding: 24px;
   gap: 24px;
-`;
-const HorizontalPlaylistWrapper = styled.styled.div `
+`,HorizontalPlaylistWrapper=styled.styled.div`
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -172,8 +69,7 @@ const HorizontalPlaylistWrapper = styled.styled.div `
     background-color: var(--color-grey-6);
     opacity: 30%;
   }
-`;
-const VerticalPlaylistWrapper = styled.styled.div `
+`,VerticalPlaylistWrapper=styled.styled.div`
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -200,11 +96,7 @@ const VerticalPlaylistWrapper = styled.styled.div `
     opacity: 30%;
   }
 
-  ${({ $showingAll }) => $showingAll
-    ? `
+  ${({$showingAll:e})=>e?`
     max-height: unset;
-    overflow-y: visible;`
-    : ''}
-`;
-
-exports.VideoPlayer = VideoPlayer;
+    overflow-y: visible;`:""}
+`;exports.VideoPlayer=VideoPlayer;

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

@@ -1,59 +1,12 @@
 "use client";
-'use strict';
-
-var React = require('react');
-var styled = require('styled-components');
-var Link = require('next/link');
-var box = require('../../atoms/box/box.js');
-var chevron_left = require('../../../icons/arrow/chevron_left.js');
-var chevron_right = require('../../../icons/arrow/chevron_right.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var Link__default = /*#__PURE__*/_interopDefaultCompat(Link);
-
-const Breadcrumb = ({ children, previous }) => {
-    const id = React__default.default.useId();
-    const _children = React__default.default.Children.toArray(children);
-    if (previous) {
-        return (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(_children[0]) &&
-                    React__default.default.cloneElement(_children[0], {
-                        icon: undefined,
-                        avatar: undefined,
-                    }))));
-    }
-    return (React__default.default.createElement(box.Box, { "$align": "center", "$gap": 8 }, _children.map((child, index) => {
-        if (React__default.default.isValidElement(child) &&
-            (child.type?.displayName === 'BreadcrumbItem' ||
-                child.type?.displayName === 'Breadcrumb.Item')) {
-            return (React__default.default.createElement(React__default.default.Fragment, { key: id + index.toString(36) },
-                child,
-                _children.length - 1 !== index && (React__default.default.createElement(chevron_right.ChevronRight, { color: "grey-3", size: 24 }))));
-        }
-        return null;
-    })));
-};
-const BreadcrumbItem = ({ avatar, children, href, icon, iconColor = 'blue', onClick, }) => {
-    return (React__default.default.createElement(Item, { href: href || '#', onClick: onClick, "$type": icon ? 'icon' : avatar ? 'avatar' : 'text', "$iconColor": `hue-${iconColor}-1`, scroll: false },
-        icon && (React__default.default.createElement(IconWrapper, { "$color": iconColor }, React__default.default.cloneElement(icon, { color: `hue-${iconColor}-1`, size: 24 }))),
-        avatar,
-        children));
-};
-Breadcrumb.Item = BreadcrumbItem;
-BreadcrumbItem.displayName = 'Breadcrumb.Item';
-const Item = styled.styled(Link__default.default) `
+"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 }) => as === 'a'
-    ? `
+  ${({as:e})=>"a"===e?`
     text-decoration: none;
     color: var(--color-primary-blue-2);
     
@@ -68,25 +21,21 @@ const Item = styled.styled(Link__default.default) `
         right: 0px;
         background-color: var(--color-primary-blue-1);
       }
-    }`
-    : ''}
+    }`:""}
 
-  ${({ $type, $iconColor }) => $type === 'icon'
-    ? `
+  ${({$type:e,$iconColor:t})=>"icon"===e?`
     gap: 32px;
     font-size: 24px;
     font-weight: 700;
     line-height: 36px;
-    color: var(--color-${$iconColor});
+    color: var(--color-${t});
 
     &:hover {
       &:after {
         width: calc(100% - 80px);
-        background-color: var(--color-${$iconColor});
+        background-color: var(--color-${t});
       }
-    }`
-    : $type === 'avatar'
-        ? `
+    }`:"avatar"===e?`
     padding: 4px;
     gap: 16px;
     font-size: 18px;
@@ -97,16 +46,14 @@ const Item = styled.styled(Link__default.default) `
       &:after {
         background-color: var(--color-primary-blue-2);
       }
-    }`
-        : `
+    }`:`
     padding: 4px 0px;
     font-size: 16px;
     font-weight: 500;
     line-height: 24px;
     `}
-`;
-const IconWrapper = styled.styled.div `
-  background-color: ${({ $color }) => `var(--color-hue-${$color}-2)`};
+`),IconWrapper=styled.styled.div`
+  background-color: ${({$color:e})=>`var(--color-hue-${e}-2)`};
   height: 48px;
   width: 48px;
   display: flex;
@@ -114,6 +61,4 @@ const IconWrapper = styled.styled.div `
   align-items: center;
   box-sizing: border-box;
   border-radius: 8px;
-`;
-
-exports.Breadcrumb = Breadcrumb;
+`;exports.Breadcrumb=Breadcrumb;

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

@@ -1,75 +1,11 @@
-'use strict';
-
-var React = require('react');
-var styled = require('styled-components');
-var Link = require('next/link');
-var button = require('../../actions/button/button.js');
-var drawer = require('../../surfaces/drawer/drawer.js');
-var chevron_down = require('../../../icons/arrow/chevron_down.js');
-var chevron_left = require('../../../icons/arrow/chevron_left.js');
-var chevron_up = require('../../../icons/arrow/chevron_up.js');
-var plus = require('../../../icons/basic/plus.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var Link__default = /*#__PURE__*/_interopDefaultCompat(Link);
-
-const INNER_NAV_CHILD_TYPES = [
-    'Header',
-    'Item',
-    'Dropdown',
-    'BackButton',
-    'Drawer',
-    'Misc',
-];
-/*************************************************************************************************************************
- * Inner Navigation
- */
-const InnerNav = ({ children }) => {
-    const elementsByType = {
-        Header: [],
-        Item: [],
-        Dropdown: [],
-        BackButton: [],
-        Drawer: [],
-        Misc: [],
-    };
-    const _children = React__default.default.Children.toArray(children);
-    for (const child of _children) {
-        const isValidChild = React__default.default.isValidElement(child);
-        const isInnerNavChild = isValidChild &&
-            INNER_NAV_CHILD_TYPES.includes(child?.type?.displayName?.replace('InnerNav.', ''));
-        if (isInnerNavChild) {
-            const type = child?.type?.displayName.replace('InnerNav.', '');
-            elementsByType[type].push(child);
-        }
-        else {
-            elementsByType['Misc'].push(child);
-        }
-    }
-    return (React__default.default.createElement(NavWrapper, { "aria-label": "side-navigation" },
-        React__default.default.createElement("div", null, elementsByType['Header']),
-        React__default.default.createElement("div", null, elementsByType['BackButton']),
-        React__default.default.createElement("div", null, elementsByType['Drawer']),
-        React__default.default.createElement("div", null, elementsByType['Item']),
-        React__default.default.createElement("div", null, elementsByType['Dropdown']),
-        React__default.default.createElement("div", null, elementsByType['Misc'])));
-};
-const NavWrapper = styled.styled.nav `
+"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);
-`;
-const InnerNavItem = ({ active, href, icon, label, sx, onClick, }) => {
-    return (React__default.default.createElement(Item, { "$active": active, "$sx": sx, href: href || '#', scroll: false, onClick: onClick },
-        icon,
-        label));
-};
-const Item = styled.styled(Link__default.default) `
+`,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;
@@ -84,41 +20,24 @@ const Item = styled.styled(Link__default.default) `
   svg {
     fill: var(--color-blue-2);
   }
-  ${({ $active }) => $active
-    ? `
-    background-color: var(--color-primary-blue-3);`
-    : `
+  ${({$active:e})=>e?`
+    background-color: var(--color-primary-blue-3);`:`
     &:hover {
       background-color: var(--color-primary-blue-4);
     }`}
 
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-InnerNav.Item = InnerNavItem;
-InnerNavItem.displayName = 'InnerNav.Item';
-const InnerNavDropdown = ({ children, icon, label, open, sx, onClick, }) => {
-    return (React__default.default.createElement(React__default.default.Fragment, null,
-        React__default.default.createElement(DropdownItem, { "$active": false, "$sx": sx, onClick: onClick },
-            icon,
-            React__default.default.createElement(DropdownTriggerWrapper, null,
-                label,
-                open && React__default.default.createElement(chevron_up.ChevronUp, { size: 16 }),
-                !open && React__default.default.createElement(chevron_down.ChevronDown, { size: 16 }))),
-        open && React__default.default.createElement(DropdownContent, null, children)));
-};
-const DropdownContent = styled.styled.div `
+  ${({$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;
   }
-`;
-const DropdownTriggerWrapper = styled.styled.div `
+`,DropdownTriggerWrapper=styled.styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex: 1;
-`;
-const DropdownItem = styled.styled.a `
+`,DropdownItem=styled.styled.a`
   padding: 14px 16px;
   display: flex;
   gap: 16px;
@@ -133,25 +52,14 @@ const DropdownItem = styled.styled.a `
   svg {
     fill: var(--color-blue-2);
   }
-  ${({ $active }) => $active
-    ? `
-    background-color: var(--color-primary-blue-3);`
-    : `
+  ${({$active:e})=>e?`
+    background-color: var(--color-primary-blue-3);`:`
     &:hover {
       background-color: var(--color-primary-blue-4);
     }`}
 
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-InnerNav.Dropdown = InnerNavDropdown;
-InnerNavDropdown.displayName = 'InnerNav.Dropdown';
-const InnerNavBackButton = ({ href, label, sx }) => {
-    return (React__default.default.createElement(BackButton, { href: href, "$sx": sx, scroll: false },
-        React__default.default.createElement("div", null,
-            React__default.default.createElement(chevron_left.ChevronLeft, { size: 24 })),
-        label));
-};
-const BackButton = styled.styled(Link__default.default) `
+  ${({$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;
@@ -171,29 +79,5 @@ const BackButton = styled.styled(Link__default.default) `
     padding: 12px;
   }
 
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-InnerNav.BackButton = InnerNavBackButton;
-InnerNavBackButton.displayName = 'InnerNav.BackButton';
-const InnerNavHeader = ({ children }) => {
-    return React__default.default.createElement(HeaderWrapper, null, children);
-};
-const HeaderWrapper = styled.styled.div ``;
-InnerNav.Header = InnerNavHeader;
-InnerNavHeader.displayName = 'InnerNav.Header';
-const InnerNavDrawer = ({ children, label, controlledOpen, onOpenChange, }) => {
-    return (React__default.default.createElement(drawer.Drawer, { controlledOpen: controlledOpen, onOpenChange: onOpenChange },
-        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: () => {
-                    onOpenChange?.();
-                } }, label)),
-        children));
-};
-InnerNav.Drawer = InnerNavDrawer;
-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;
+  ${({$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;