@soul-refiner/design-system 2.0.0-alpha.2 → 2.0.0-alpha.20

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

@@ -0,0 +1,210 @@
+"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: `
+                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 `
+  display: flex;
+  justify-content: center;
+  background-color: var(--color-grey-0);
+
+  img {
+    object-fit: cover !important;
+  }
+
+  ${({ $orientation }) => $orientation === 'vertical' ? 'max-width: 960px; height: max-content;' : ''}
+`;
+const InnerWrapper = styled.styled.div `
+  max-width: 2284px;
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+
+  ${({ $playable }) => $playable
+    ? ''
+    : `
+    .player {
+      cursor: initial;
+      pointer-events: none;
+      user-select: none;
+    }`}
+
+  ${({ $orientation }) => $orientation === 'vertical'
+    ? `
+    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;
+      }`}
+`;
+const Side = styled.styled.div `
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  gap: 24px;
+`;
+const 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%;
+  }
+`;
+const 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 }) => $showingAll
+    ? `
+    max-height: unset;
+    overflow-y: visible;`
+    : ''}
+`;
+
+exports.VideoPlayer = VideoPlayer;

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

@@ -0,0 +1,119 @@
+"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) `
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  font-family: var(--font-inter);
+  color: var(--color-grey-3);
+
+  ${({ as }) => as === 'a'
+    ? `
+    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, $iconColor }) => $type === 'icon'
+    ? `
+    gap: 32px;
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 36px;
+    color: var(--color-${$iconColor});
+
+    &:hover {
+      &:after {
+        width: calc(100% - 80px);
+        background-color: var(--color-${$iconColor});
+      }
+    }`
+    : $type === 'avatar'
+        ? `
+    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;
+    `}
+`;
+const IconWrapper = styled.styled.div `
+  background-color: ${({ $color }) => `var(--color-hue-${$color}-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/src/components/navigation/inner/inner.d.ts

@@ -0,0 +1,92 @@
+import React from 'react';
+import { DrawerProps } from '../../../components/surfaces/drawer/drawer';
+/*************************************************************************************************************************
+ * Inner Navigation
+ */
+declare const InnerNav: {
+    ({ children }: React.PropsWithChildren): React.JSX.Element;
+    Item: {
+        ({ active, href, icon, label, sx, onClick, }: InnerNavItemProps): React.JSX.Element;
+        displayName: string;
+    };
+    Dropdown: {
+        ({ children, icon, label, open, sx, onClick, }: InnerNavDropdownProps): React.JSX.Element;
+        displayName: string;
+    };
+    BackButton: {
+        ({ href, label, sx }: InnerNavBackButtonProps): React.JSX.Element;
+        displayName: string;
+    };
+    Header: {
+        ({ children }: InnerNavHeaderProps): React.JSX.Element;
+        displayName: string;
+    };
+    Drawer: {
+        ({ children, label, controlledOpen, onOpenChange, }: InnerNavDrawerProps): React.JSX.Element;
+        displayName: string;
+    };
+    DrawerHeader: {
+        ({ children }: {
+            children?: React.ReactNode;
+        }): React.JSX.Element;
+        displayName: string;
+    };
+    DrawerContent: {
+        ({ children }: {
+            children?: React.ReactNode;
+        }): React.JSX.Element;
+        displayName: string;
+    };
+    DrawerFooter: {
+        ({ children }: {
+            children?: React.ReactNode;
+        }): React.JSX.Element;
+        displayName: string;
+    };
+    DrawerTrigger: {
+        ({ children: child, }: {
+            children: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+        }): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+        displayName: string;
+    };
+};
+/*************************************************************************************************************************
+ * Item
+ */
+export interface InnerNavItemProps {
+    active: boolean;
+    href?: string;
+    icon?: React.ReactElement;
+    label: React.ReactNode;
+    sx?: string;
+    onClick?: () => void;
+}
+/*************************************************************************************************************************
+ * Dropdown
+ */
+export interface InnerNavDropdownProps extends React.PropsWithChildren {
+    icon?: React.ReactElement;
+    label: React.ReactNode;
+    open: boolean;
+    sx?: string;
+    onClick?: React.MouseEventHandler;
+}
+/*************************************************************************************************************************
+ * Back Button
+ */
+export interface InnerNavBackButtonProps {
+    href: string;
+    label: React.ReactNode;
+    sx?: string;
+}
+/*************************************************************************************************************************
+ * Header
+ */
+export type InnerNavHeaderProps = React.PropsWithChildren;
+/*************************************************************************************************************************
+ * Create Button
+ */
+export interface InnerNavDrawerProps extends DrawerProps, React.PropsWithChildren {
+    label: React.ReactNode;
+}
+export { InnerNav };

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

@@ -0,0 +1,199 @@
+'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 `
+  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) `
+  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 }) => $active
+    ? `
+    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 `
+  & > a,
+  & > button {
+    padding-left: 40px;
+  }
+`;
+const DropdownTriggerWrapper = styled.styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1;
+`;
+const 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 }) => $active
+    ? `
+    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) `
+  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 }) => ($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;