@soul-refiner/design-system 2.0.0-alpha.27 → 2.0.0-alpha.28

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

@@ -4,9 +4,15 @@ var React = require('react');
 var ReactPlayer = require('react-player');
 var Image = require('next/image');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var ReactPlayer__default = /*#__PURE__*/_interopDefaultCompat(ReactPlayer);
+var Image__default = /*#__PURE__*/_interopDefaultCompat(Image);
+
 const Video = ({ controls = true, loop = false, muted, playsInline, src, subtitles, style, thumbnail, }) => {
-    const ref = React.useRef(null);
-    return (React.createElement(ReactPlayer, { config: {
+    const ref = React__default.default.useRef(null);
+    return (React__default.default.createElement(ReactPlayer__default.default, { config: {
             file: {
                 attributes: {
                     crossOrigin: 'true',
@@ -22,7 +28,7 @@ const Video = ({ controls = true, loop = false, muted, playsInline, src, subtitl
                     srcLang: subtitle.locale,
                 })),
             },
-        }, controls: controls, height: "100%", light: thumbnail ? (React.createElement(Image, { alt: "thumbnail for trailer", layout: "fill", priority: true, quality: 100, src: thumbnail, style: { objectFit: 'contain' } })) : undefined, loop: loop, muted: muted, pip: false, playsinline: playsInline, playing: true, ref: ref, style: {
+        }, controls: controls, height: "100%", light: thumbnail ? (React__default.default.createElement(Image__default.default, { alt: "thumbnail for trailer", layout: "fill", priority: true, quality: 100, src: thumbnail, style: { objectFit: 'contain' } })) : undefined, loop: loop, muted: muted, pip: false, playsinline: playsInline, playing: true, ref: ref, style: {
             backgroundColor: 'var(--color-grey-0)',
             maxHeight: 720,
             maxWidth: 1280,

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

@@ -9,16 +9,21 @@ var paragraph = require('../../atoms/typography/paragraph.js');
 var lock = require('../../../icons/security/lock.js');
 var play_solid = require('../../../icons/audio_video/play_solid.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var Image__default = /*#__PURE__*/_interopDefaultCompat(Image);
+
 const PlaylistItem = ({ duration, onClick, playable, progress = 0, shortDescription, thumbnail, title, }) => {
-    return (React.createElement(Wrapper, { onClick: playable ? onClick : undefined, "$playable": playable },
-        playable ? (React.createElement(play_solid.PlaySolid, { color: "white", size: 16, sx: "position: absolute; left: 8px; bottom: 4px;" })) : (React.createElement(lock.Lock, { color: "white", size: 16, sx: "position: absolute; left: 8px; bottom: 4px;" })),
-        React.createElement(Image, { alt: `thumbnail for ${title}`, height: 75, quality: 100, src: thumbnail, width: 133 }),
-        progress && duration && (React.createElement(ProgressBar, { progressPercent: progress / duration })),
-        React.createElement(box.Box, { "$dir": "column", "$gap": 4, sx: "margin-left: 16px; margin-right: auto; flex: 0 1 auto; flex-basis: content;" },
-            React.createElement(paragraph.P, { "$color": "grey-10", "$semiBold": true }, title),
-            shortDescription && (React.createElement(paragraph.P, { "$color": "grey-9", "$fontSize": 14, "$lineHeight": 20, "$textClampLines": 2, sx: "max-width: min(500px, 75%);" }, shortDescription))),
-        duration && (React.createElement(paragraph.P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, sx: "flex-shrink: 0;" },
-            React.createElement(seconds_to_duration.SecToDuration, { seconds: duration })))));
+    return (React__default.default.createElement(Wrapper, { onClick: playable ? onClick : undefined, "$playable": playable },
+        playable ? (React__default.default.createElement(play_solid.PlaySolid, { color: "white", size: 16, sx: "position: absolute; left: 8px; bottom: 4px;" })) : (React__default.default.createElement(lock.Lock, { color: "white", size: 16, sx: "position: absolute; left: 8px; bottom: 4px;" })),
+        React__default.default.createElement(Image__default.default, { alt: `thumbnail for ${title}`, height: 75, quality: 100, src: thumbnail, width: 133 }),
+        progress && duration && (React__default.default.createElement(ProgressBar, { progressPercent: progress / duration })),
+        React__default.default.createElement(box.Box, { "$dir": "column", "$gap": 4, sx: "margin-left: 16px; margin-right: auto; flex: 0 1 auto; flex-basis: content;" },
+            React__default.default.createElement(paragraph.P, { "$color": "grey-10", "$semiBold": true }, title),
+            shortDescription && (React__default.default.createElement(paragraph.P, { "$color": "grey-9", "$fontSize": 14, "$lineHeight": 20, "$textClampLines": 2, sx: "max-width: min(500px, 75%);" }, shortDescription))),
+        duration && (React__default.default.createElement(paragraph.P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, sx: "flex-shrink: 0;" },
+            React__default.default.createElement(seconds_to_duration.SecToDuration, { seconds: duration })))));
 };
 const Wrapper = styled.styled.div `
   width: 100%;
@@ -30,9 +35,9 @@ const Wrapper = styled.styled.div `
   cursor: pointer;
   ${({ $playable }) => $playable ? '' : 'pointer-events: none; cursor: initial;'}
 `;
-const ProgressBar = ({ progressPercent }) => (React.createElement(ProgressBarSvg, { viewBox: "0 0 133 2", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    React.createElement("rect", { width: 133 * progressPercent, height: "2", fill: "var(--color-primary-blue-2)" }),
-    React.createElement("rect", { x: 133 * progressPercent, width: 133 - 133 * progressPercent, height: "2", fill: "var(--color-grey-8)" })));
+const ProgressBar = ({ progressPercent }) => (React__default.default.createElement(ProgressBarSvg, { viewBox: "0 0 133 2", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React__default.default.createElement("rect", { width: 133 * progressPercent, height: "2", fill: "var(--color-primary-blue-2)" }),
+    React__default.default.createElement("rect", { x: 133 * progressPercent, width: 133 - 133 * progressPercent, height: "2", fill: "var(--color-grey-8)" })));
 const ProgressBarSvg = styled.styled.svg `
   width: 133px;
   position: absolute;

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

@@ -13,14 +13,20 @@ 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.useState(false);
-    const [playingTrailer, setPlayingTrailer] = React.useState(!playable);
-    const ref = React.useRef(null);
+    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) {
@@ -37,12 +43,12 @@ const VideoPlayer = ({ activeIndex, pip, playable, playlist, onPipChange, onProg
     const toggleShowingAll = () => setShowingAll((prev) => !prev);
     if (!mediaItem)
         return null;
-    return (React.createElement(Wrapper, { "$orientation": orientation },
-        React.createElement(InnerWrapper, { "$orientation": orientation, "$playable": playable || playingTrailer },
-            orientation === 'vertical' && (React.createElement(box.Box, { "$dir": "column", "$gap": 4, sx: "margin: 24px;" },
-                React.createElement(heading.H, { as: "h2", "$bold": true, "$color": "white", "$fontSize": 28, "$lineHeight": 36 }, title),
-                React.createElement(paragraph.P, { as: "h3", "$bold": true, "$color": "grey-8" }, subtitle))),
-            React.createElement(ReactPlayer, { className: "player", config: {
+    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',
@@ -58,9 +64,9 @@ const VideoPlayer = ({ activeIndex, pip, playable, playlist, onPipChange, onProg
                             srcLang: subtitle.locale,
                         })),
                     },
-                }, controls: true, height: "100%", light: React.createElement(Image, { alt: `thumbnail for ${title}`, layout: "fill", priority: true, quality: 100, style: {
+                }, 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.createElement(play_solid.PlaySolid, { color: "white", size: 24, sx: "position: absolute; width: 54px; height: 54px;" })) : (React.createElement(lock_circle.LockCircle, { color: "white", size: 24, sx: "position: absolute; width: 54px; height: 54px;" })), playing: playable, ref: ref, style: {
+                    }, 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,
@@ -68,30 +74,30 @@ const VideoPlayer = ({ activeIndex, pip, playable, playlist, onPipChange, onProg
                     overflow: 'hidden',
                     position: 'relative',
                 }, url: mediaItem.src, width: "100%" }),
-            orientation === 'horizontal' && (React.createElement(Side, null,
-                React.createElement(box.Box, { "$dir": "column", "$gap": 4 },
-                    React.createElement(heading.H, { as: "h2", "$bold": true, "$color": "white", "$fontSize": 28, "$lineHeight": 36 }, title),
-                    React.createElement(paragraph.P, { as: "h3", "$bold": true, "$color": "grey-8" }, subtitle)),
-                !!trailer && (React.createElement(box.Box, { "$dir": "column", "$gap": 8, sx: `
+            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.createElement(box.Box, { "$align": "center", "$justify": "space-between", sx: "padding: 8px 0px 8px 14px;" },
-                        React.createElement(paragraph.P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, "$semiBold": true }, "Trailer")),
-                    React.createElement(playlistItem.PlaylistItem, { onClick: () => setPlayingTrailer(true), playable: true, thumbnail: trailer.thumbnail, title: `${title} Trailer` }))),
-                React.createElement(box.Box, { "$align": "center", "$justify": "space-between", sx: "padding: 8px 0px 8px 14px;" },
-                    React.createElement(paragraph.P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, "$semiBold": true }, "All lessons")),
-                React.createElement(HorizontalPlaylistWrapper, null, playlist.map((playlistItem$1, index) => (React.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.createElement(box.Box, { "$dir": "column", "$gap": 24 },
-                !!trailer && (React.createElement(box.Box, { "$dir": "column", "$gap": 8, sx: "margin: 0px 24px;" },
-                    React.createElement(box.Box, { "$align": "center", "$justify": "space-between", sx: "padding: 8px 0px 8px 14px;" },
-                        React.createElement(paragraph.P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, "$semiBold": true }, "Trailer")),
-                    React.createElement(playlistItem.PlaylistItem, { onClick: () => setPlayingTrailer(true), playable: true, thumbnail: trailer.thumbnail, title: `${title} Trailer` }))),
-                React.createElement(box.Box, { "$align": "center", "$justify": "space-between", sx: "padding: 8px 0px; margin: 0px 24px; border-bottom: 1px solid var(--color-grey-3);" },
-                    React.createElement(paragraph.P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, "$semiBold": true }, "All lessons"),
-                    React.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.createElement(VerticalPlaylistWrapper, { "$showingAll": showingAll }, playlist.map((playlistItem$1, index) => (React.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 })))))))));
+                    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;

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

@@ -8,39 +8,44 @@ 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.useId();
-    const _children = React.Children.toArray(children);
+    const id = React__default.default.useId();
+    const _children = React__default.default.Children.toArray(children);
     if (previous) {
-        return (React.createElement(box.Box, { "$align": "center", "$gap": 8, sx: "& > *:last-child { color: var(--color-grey-3) !important; };" },
-            React.createElement(React.Fragment, null,
-                React.createElement(chevron_left.ChevronLeft, { color: "grey-3", size: 24 }),
-                React.isValidElement(_children[0]) &&
-                    React.cloneElement(_children[0], {
+        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.createElement(box.Box, { "$align": "center", "$gap": 8 }, _children.map((child, index) => {
-        if (React.isValidElement(child) &&
+    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.createElement(React.Fragment, { key: id + index.toString(36) },
+            return (React__default.default.createElement(React__default.default.Fragment, { key: id + index.toString(36) },
                 child,
-                _children.length - 1 !== index && (React.createElement(chevron_right.ChevronRight, { color: "grey-3", size: 24 }))));
+                _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.createElement(Item, { href: href || '#', onClick: onClick, "$type": icon ? 'icon' : avatar ? 'avatar' : 'text', "$iconColor": `hue-${iconColor}-1`, scroll: false },
-        icon && (React.createElement(IconWrapper, { "$color": iconColor }, React.cloneElement(icon, { color: `hue-${iconColor}-1`, size: 24 }))),
+    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) `
+const Item = styled.styled(Link__default.default) `
   display: flex;
   flex-flow: row nowrap;
   align-items: center;

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

@@ -10,6 +10,11 @@ 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',
@@ -30,9 +35,9 @@ const InnerNav = ({ children }) => {
         Drawer: [],
         Misc: [],
     };
-    const _children = React.Children.toArray(children);
+    const _children = React__default.default.Children.toArray(children);
     for (const child of _children) {
-        const isValidChild = React.isValidElement(child);
+        const isValidChild = React__default.default.isValidElement(child);
         const isInnerNavChild = isValidChild &&
             INNER_NAV_CHILD_TYPES.includes(child?.type?.displayName?.replace('InnerNav.', ''));
         if (isInnerNavChild) {
@@ -43,13 +48,13 @@ const InnerNav = ({ children }) => {
             elementsByType['Misc'].push(child);
         }
     }
-    return (React.createElement(NavWrapper, { "aria-label": "side-navigation" },
-        React.createElement("div", null, elementsByType['Header']),
-        React.createElement("div", null, elementsByType['BackButton']),
-        React.createElement("div", null, elementsByType['Drawer']),
-        React.createElement("div", null, elementsByType['Item']),
-        React.createElement("div", null, elementsByType['Dropdown']),
-        React.createElement("div", null, elementsByType['Misc'])));
+    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%;
@@ -60,11 +65,11 @@ const NavWrapper = styled.styled.nav `
   border-right: 1px solid var(--color-grey-9);
 `;
 const InnerNavItem = ({ active, href, icon, label, sx, onClick, }) => {
-    return (React.createElement(Item, { "$active": active, "$sx": sx, href: href || '#', scroll: false, onClick: onClick },
+    return (React__default.default.createElement(Item, { "$active": active, "$sx": sx, href: href || '#', scroll: false, onClick: onClick },
         icon,
         label));
 };
-const Item = styled.styled(Link) `
+const Item = styled.styled(Link__default.default) `
   padding: 14px 16px;
   display: flex;
   gap: 16px;
@@ -92,14 +97,14 @@ const Item = styled.styled(Link) `
 InnerNav.Item = InnerNavItem;
 InnerNavItem.displayName = 'InnerNav.Item';
 const InnerNavDropdown = ({ children, icon, label, open, sx, onClick, }) => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(DropdownItem, { "$active": false, "$sx": sx, onClick: onClick },
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        React__default.default.createElement(DropdownItem, { "$active": false, "$sx": sx, onClick: onClick },
             icon,
-            React.createElement(DropdownTriggerWrapper, null,
+            React__default.default.createElement(DropdownTriggerWrapper, null,
                 label,
-                open && React.createElement(chevron_up.ChevronUp, { size: 16 }),
-                !open && React.createElement(chevron_down.ChevronDown, { size: 16 }))),
-        open && React.createElement(DropdownContent, null, children)));
+                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,
@@ -141,12 +146,12 @@ const DropdownItem = styled.styled.a `
 InnerNav.Dropdown = InnerNavDropdown;
 InnerNavDropdown.displayName = 'InnerNav.Dropdown';
 const InnerNavBackButton = ({ href, label, sx }) => {
-    return (React.createElement(BackButton, { href: href, "$sx": sx, scroll: false },
-        React.createElement("div", null,
-            React.createElement(chevron_left.ChevronLeft, { size: 24 })),
+    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) `
+const BackButton = styled.styled(Link__default.default) `
   display: flex;
   align-items: center;
   gap: 8px;
@@ -171,15 +176,15 @@ const BackButton = styled.styled(Link) `
 InnerNav.BackButton = InnerNavBackButton;
 InnerNavBackButton.displayName = 'InnerNav.BackButton';
 const InnerNavHeader = ({ children }) => {
-    return React.createElement(HeaderWrapper, null, 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.createElement(drawer.Drawer, { controlledOpen: controlledOpen, onOpenChange: onOpenChange },
-        React.createElement(drawer.Drawer.Trigger, null,
-            React.createElement(button.Button, { icon: React.createElement(plus.Plus, { color: "white" }), size: "small", sx: "width: 100%; margin-bottom: 24px;", type: "primary", onClick: () => {
+    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));

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

@@ -6,6 +6,11 @@ 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)',
@@ -49,8 +54,8 @@ const colorLookup = {
     },
 };
 const Tabs = ({ activeIndex, items, onChange, size = 'large', sx, }) => {
-    const id = React.useId();
-    return (React.createElement(Wrapper, { "$sx": sx }, items.map((item, index) => (React.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 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;
@@ -73,11 +78,11 @@ const Item = ({ active, color, disabled, href, icon, label, onClick, size = 'lar
     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.createElement(Element, { onClick: !disabled && onClick ? onClick : undefined, href: href || '#', scroll: false, "$active": active, "$color": iconColor, "$disabled": disabled, "$hasIcon": !!icon, "$size": size },
-        icon && React.createElement(IconWrapper, { "$bg": bgColor }, icon),
-        React.createElement(paragraph.P, { "$fontSize": fontSize, "$lineHeight": lineHeight, "$semiBold": true }, label)));
+    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) `
+const Element = styled.styled(Link__default.default) `
   position: relative;
   display: flex;
   align-items: center;

package/dist/components/surfaces/accordion/accordion.js

@@ -8,16 +8,20 @@ var _function = require('../../../utils/function.js');
 var chevron_down = require('../../../icons/arrow/chevron_down.js');
 var chevron_up = require('../../../icons/arrow/chevron_up.js');
 
-const AccordionContext = React.createContext([-1, () => undefined]);
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const AccordionContext = React__default.default.createContext([-1, () => undefined]);
 const Accordion = ({ children, sx }) => {
-    const [openIndex, setOpenIndex] = React.useState(-1);
+    const [openIndex, setOpenIndex] = React__default.default.useState(-1);
     const handleIndexChange = (index) => {
         setOpenIndex((prev) => (prev === index ? -1 : index));
     };
-    return (React.createElement(AccordionContext.Provider, { value: [openIndex, handleIndexChange] },
-        React.createElement(Wrapper, { "$sx": sx }, React.Children.map(children, (child, index) => {
-            if (React.isValidElement(child))
-                return React.cloneElement(child, { index });
+    return (React__default.default.createElement(AccordionContext.Provider, { value: [openIndex, handleIndexChange] },
+        React__default.default.createElement(Wrapper, { "$sx": sx }, React__default.default.Children.map(children, (child, index) => {
+            if (React__default.default.isValidElement(child))
+                return React__default.default.cloneElement(child, { index });
             return null;
         }))));
 };
@@ -25,14 +29,14 @@ const Wrapper = styled.styled.div `
   ${({ $sx }) => ($sx ? $sx : '')};
 `;
 const AccordionItem = ({ buttonSx, children, index, sx, trigger, }) => {
-    const [openIndex, setOpenIndex] = React.useContext(AccordionContext);
-    return (React.createElement(box.Box, { "$dir": "column" },
-        React.createElement(TriggerWrapper, { onClick: _function.callAll(
+    const [openIndex, setOpenIndex] = React__default.default.useContext(AccordionContext);
+    return (React__default.default.createElement(box.Box, { "$dir": "column" },
+        React__default.default.createElement(TriggerWrapper, { onClick: _function.callAll(
             // eslint-disable-next-line
             () => setOpenIndex(index), trigger?.props?.onClick), "$sx": buttonSx },
             trigger,
-            openIndex === index ? React.createElement(chevron_up.ChevronUp, null) : React.createElement(chevron_down.ChevronDown, null)),
-        React.createElement(box.Box, { sx: openIndex === index ? sx : 'visibility: hidden; height: 0px;' }, children)));
+            openIndex === index ? React__default.default.createElement(chevron_up.ChevronUp, null) : React__default.default.createElement(chevron_down.ChevronDown, null)),
+        React__default.default.createElement(box.Box, { sx: openIndex === index ? sx : 'visibility: hidden; height: 0px;' }, children)));
 };
 const TriggerWrapper = styled.styled.button `
   display: flex;

package/dist/components/surfaces/calendar_date/calendar_date.js

@@ -6,17 +6,21 @@ var styled = require('styled-components');
 var heading = require('../../atoms/typography/heading.js');
 var paragraph = require('../../atoms/typography/paragraph.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 const CalendarDate = ({ monthAbbreviation, date, dayOfWeek, startTime, endTime, sx, size = 'large', }) => {
-    return (React.createElement(Container, { "$sx": sx },
-        React.createElement(CalendarContainer, { "$size": size },
-            React.createElement(MonthContainer, { "$size": size },
-                size === 'large' && (React.createElement(heading.H.Seven, { "$color": "white", "$textAlign": "center", "$semiBold": true }, monthAbbreviation)),
-                size === 'small' && (React.createElement(paragraph.P, { "$color": "white", "$textAlign": "center", "$fontSize": 14 }, monthAbbreviation))),
-            React.createElement(DateContainer, { "$size": size },
-                size === 'large' && (React.createElement(heading.H.One, { "$textAlign": "center", "$semiBold": true }, date)),
-                size === 'small' && (React.createElement(heading.H.Six, { "$color": "grey-2", "$textAlign": "center" }, date)))),
-        dayOfWeek && startTime && endTime && (React.createElement(TimeContainer, null,
-            React.createElement(paragraph.P, { as: "span", "$color": "red-5" }, `${dayOfWeek}, ${startTime} -> ${endTime}`)))));
+    return (React__default.default.createElement(Container, { "$sx": sx },
+        React__default.default.createElement(CalendarContainer, { "$size": size },
+            React__default.default.createElement(MonthContainer, { "$size": size },
+                size === 'large' && (React__default.default.createElement(heading.H.Seven, { "$color": "white", "$textAlign": "center", "$semiBold": true }, monthAbbreviation)),
+                size === 'small' && (React__default.default.createElement(paragraph.P, { "$color": "white", "$textAlign": "center", "$fontSize": 14 }, monthAbbreviation))),
+            React__default.default.createElement(DateContainer, { "$size": size },
+                size === 'large' && (React__default.default.createElement(heading.H.One, { "$textAlign": "center", "$semiBold": true }, date)),
+                size === 'small' && (React__default.default.createElement(heading.H.Six, { "$color": "grey-2", "$textAlign": "center" }, date)))),
+        dayOfWeek && startTime && endTime && (React__default.default.createElement(TimeContainer, null,
+            React__default.default.createElement(paragraph.P, { as: "span", "$color": "red-5" }, `${dayOfWeek}, ${startTime} -> ${endTime}`)))));
 };
 const Container = styled.styled.div `
   display: flex;

package/dist/components/surfaces/carousel/card/card.js

@@ -6,10 +6,14 @@ var styled = require('styled-components');
 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);
+
 const DEFAULT_SCROLL_TRIGGER_DISTANCE = 11;
 const DEFAULT_SCROLL_DISTANCE = 450;
 const CardCarousel = ({ children, onScrollEnd, scrollTriggerDistance = DEFAULT_SCROLL_TRIGGER_DISTANCE, scrollDistance = DEFAULT_SCROLL_DISTANCE, sx, }) => {
-    const ref = React.useRef(null);
+    const ref = React__default.default.useRef(null);
     const handleScroll = (event) => {
         const target = event.target;
         const scrollDistance = target.scrollWidth - target.scrollLeft;
@@ -30,12 +34,12 @@ const CardCarousel = ({ children, onScrollEnd, scrollTriggerDistance = DEFAULT_S
             ref.current.scrollLeft = amount < 0 ? 0 : amount;
         }
     };
-    return (React.createElement(Wrapper, { "$sx": sx },
-        React.createElement(Button, { className: "carousel-navigation", onClick: onNavigateLeft, "$side": "left" },
-            React.createElement(chevron_left.ChevronLeft, { color: "white", size: 48 })),
-        React.createElement(Inner, { onScroll: handleScroll, ref: ref }, children),
-        React.createElement(Button, { className: "carousel-navigation", onClick: onNavigateRight, "$side": "right" },
-            React.createElement(chevron_right.ChevronRight, { color: "white", size: 48 }))));
+    return (React__default.default.createElement(Wrapper, { "$sx": sx },
+        React__default.default.createElement(Button, { className: "carousel-navigation", onClick: onNavigateLeft, "$side": "left" },
+            React__default.default.createElement(chevron_left.ChevronLeft, { color: "white", size: 48 })),
+        React__default.default.createElement(Inner, { onScroll: handleScroll, ref: ref }, children),
+        React__default.default.createElement(Button, { className: "carousel-navigation", onClick: onNavigateRight, "$side": "right" },
+            React__default.default.createElement(chevron_right.ChevronRight, { color: "white", size: 48 }))));
 };
 const Wrapper = styled.styled.div `
   position: relative;