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

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

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

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

@@ -1,199 +0,0 @@
-'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;

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

@@ -1,159 +0,0 @@
-"use client";
-'use strict';
-
-var React = require('react');
-var styled = require('styled-components');
-var Link = require('next/link');
-var paragraph = require('../../atoms/typography/paragraph.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var Link__default = /*#__PURE__*/_interopDefaultCompat(Link);
-
-const colorLookup = {
-    blue: {
-        bg: 'var(--color-hue-blue-2)',
-        icon: 'var(--color-hue-blue-1)',
-    },
-    green: {
-        bg: 'var(--color-green-8)',
-        icon: 'var(--color-green-2)',
-    },
-    grey: {
-        bg: 'var(--color-grey-9)',
-        icon: 'var(--color-grey-7)',
-    },
-    mint: {
-        bg: 'var(--color-hue-mint-2)',
-        icon: 'var(--color-hue-mint-1)',
-    },
-    ocean: {
-        bg: 'var(--color-hue-ocean-2)',
-        icon: 'var(--color-hue-ocean-1)',
-    },
-    orange: {
-        bg: 'var(--color-hue-orange-2)',
-        icon: 'var(--color-hue-orange-1)',
-    },
-    pink: {
-        bg: 'var(--color-hue-pink-2)',
-        icon: 'var(--color-hue-pink-1)',
-    },
-    purple: {
-        bg: 'var(--color-hue-purple-2)',
-        icon: 'var(--color-hue-purple-1)',
-    },
-    red: {
-        bg: 'var(--color-red-9)',
-        icon: 'var(--color-red-3)',
-    },
-    yellow: {
-        bg: 'var(--color-yellow-8)',
-        icon: 'var(--color-yellow-3)',
-    },
-};
-const Tabs = ({ activeIndex, items, onChange, size = 'large', sx, }) => {
-    const id = React__default.default.useId();
-    return (React__default.default.createElement(Wrapper, { "$sx": sx }, items.map((item, index) => (React__default.default.createElement(Item, { active: activeIndex === index, color: item?.color, disabled: item?.disabled, href: item?.href, icon: item?.icon, key: id + index.toString(36), label: item.label, onClick: () => onChange && onChange(index), size: size })))));
-};
-const Wrapper = styled.styled.div `
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: flex-end;
-  justify-content: center;
-  gap: 16px;
-  margin: 0px;
-  padding: 0px;
-
-  a {
-    text-decoration: none;
-  }
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const Item = ({ active, color, disabled, href, icon, label, onClick, size = 'large', }) => {
-    const inputColor = disabled ? 'grey' : color ? color : 'blue';
-    const iconColor = colorLookup[inputColor].icon;
-    const bgColor = colorLookup[inputColor].bg;
-    const fontSize = size === 'large' ? 16 : size === 'medium' ? 14 : 12;
-    const lineHeight = size === 'large' ? 24 : size === 'medium' ? 20 : 16;
-    return (React__default.default.createElement(Element, { onClick: !disabled && onClick ? onClick : undefined, href: href || '#', scroll: false, "$active": active, "$color": iconColor, "$disabled": disabled, "$hasIcon": !!icon, "$size": size },
-        icon && React__default.default.createElement(IconWrapper, { "$bg": bgColor }, icon),
-        React__default.default.createElement(paragraph.P, { "$fontSize": fontSize, "$lineHeight": lineHeight, "$semiBold": true }, label)));
-};
-const Element = styled.styled(Link__default.default) `
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  user-select: none;
-
-  ${({ $size, $hasIcon }) => $hasIcon
-    ? 'padding: 16px 12px;'
-    : $size === 'small'
-        ? 'padding: 10px 8px;'
-        : $size === 'medium'
-            ? 'padding: 14px 10px;'
-            : 'padding: 22px 12px;'}
-
-  ${({ $hasIcon, $color, $disabled }) => $disabled
-    ? `
-  cursor: initial;
-  `
-    : $hasIcon
-        ? `
-  &:hover {
-    p {
-      color: ${$color};
-    }
-  }
-
-  div > svg {
-    fill: ${$color};
-  }`
-        : `
-  &:hover {
-    background-color: var(--color-grey-10);
-    &:after {
-      position: absolute;
-      content: '';
-      width: 100%;
-      height: 3px;
-      bottom: 0px;
-      left: 0px;
-      background-color: var(--color-primary-blue-3);
-      border-top-right-radius: 3px;
-      border-top-left-radius: 3px;
-    }
-  }
-  &:active {
-    background-color: var(--color-grey-9);
-  }`}
-
-  ${({ $active, $color, $hasIcon }) => $active
-    ? `
-  &:after {
-    position: absolute;
-    content: '';
-    width: 100%;
-    height: 3px;
-    bottom: 0px;
-    left: 0px;
-    background-color: ${$hasIcon ? $color : 'var(--color-primary-blue-2)'} !important;
-    border-top-right-radius: 3px;
-    border-top-left-radius: 3px;
-  }
-  `
-    : ''}
-`;
-const IconWrapper = styled.styled.div `
-  padding: 8px;
-  border-radius: 8px;
-  background-color: ${({ $bg }) => $bg};
-`;
-Tabs.Item = Item;
-Item.displayName = 'Tabs.Item';
-
-exports.Tabs = Tabs;