@databiosphere/findable-ui 5.0.0 → 7.0.0

package/lib/components/Layout/components/Header/components/Content/content.styles.js

@@ -1,11 +1,5 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Content = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-exports.Content = styled_1.default.div `
+import styled from "@emotion/styled";
+export const Content = styled.div `
   display: grid;
   gap: 4px;
   padding: 16px 0;

package/lib/components/Layout/components/Header/header.js

@@ -1,108 +1,69 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Header = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-const entities_1 = require("../../../../common/entities");
-const useBreakpointHelper_1 = require("../../../../hooks/useBreakpointHelper");
-const useLayoutState_1 = require("../../../../hooks/useLayoutState");
-const useResizeObserver_1 = require("../../../../hooks/useResizeObserver");
-const layoutState_1 = require("../../../../providers/layoutState");
-const breakpoints_1 = require("../../../../theme/common/breakpoints");
-const constants_1 = require("./common/constants");
-const utils_1 = require("./common/utils");
-const actions_1 = require("./components/Content/components/Actions/actions");
-const authentication_1 = require("./components/Content/components/Actions/components/Authentication/authentication");
-const menu_1 = require("./components/Content/components/Actions/components/Menu/menu");
-const search_1 = require("./components/Content/components/Actions/components/Search/search");
-const navigation_1 = require("./components/Content/components/Navigation/navigation");
-const slogan_1 = require("./components/Content/components/Slogan/slogan");
-const slogan_styles_1 = require("./components/Content/components/Slogan/slogan.styles");
-const socials_styles_1 = require("./components/Content/components/Socials/socials.styles");
-const header_styles_1 = require("./header.styles");
-const Header = (_a) => {
-    var headerProps = __rest(_a, []);
-    const { Announcements, authenticationEnabled, actions, className, Logo, navAlignment = entities_1.ELEMENT_ALIGNMENT.LEFT, navLinks, searchEnabled, searchURL, slogan, socialMedia, } = headerProps;
-    const { layoutDispatch } = (0, useLayoutState_1.useLayoutState)();
-    const headerRef = (0, react_1.useRef)(null);
-    const { height } = (0, useResizeObserver_1.useResizeObserver)(headerRef, useResizeObserver_1.getBorderBoxSizeHeight) || {};
-    const [menuOpen, setMenuOpen] = (0, react_1.useState)(false);
-    const onlySmDesktop = (0, useBreakpointHelper_1.useBreakpointHelper)(useBreakpointHelper_1.BREAKPOINT_FN_NAME.ONLY, breakpoints_1.DESKTOP_SM);
-    const smDesktop = (0, useBreakpointHelper_1.useBreakpointHelper)(useBreakpointHelper_1.BREAKPOINT_FN_NAME.UP, breakpoints_1.DESKTOP_SM);
-    const desktop = (0, useBreakpointHelper_1.useBreakpointHelper)(useBreakpointHelper_1.BREAKPOINT_FN_NAME.UP, breakpoints_1.DESKTOP);
-    const AppBar = navAlignment === entities_1.ELEMENT_ALIGNMENT.RIGHT ? header_styles_1.HeaderSmAppBar : header_styles_1.AppBar;
+import { Fade, Toolbar } from "@mui/material";
+import React, { useCallback, useEffect, useRef, useState, } from "react";
+import { ELEMENT_ALIGNMENT, } from "../../../../common/entities";
+import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useBreakpointHelper";
+import { useLayoutState } from "../../../../hooks/useLayoutState";
+import { getBorderBoxSizeHeight, useResizeObserver, } from "../../../../hooks/useResizeObserver";
+import { LayoutActionKind } from "../../../../providers/layoutState";
+import { DESKTOP, DESKTOP_SM } from "../../../../theme/common/breakpoints";
+import { FADE_TRANSITION_PROPS } from "./common/constants";
+import { getHeaderNavigationLinks } from "./common/utils";
+import { Actions } from "./components/Content/components/Actions/actions";
+import { Authentication } from "./components/Content/components/Actions/components/Authentication/authentication";
+import { Menu } from "./components/Content/components/Actions/components/Menu/menu";
+import { Search } from "./components/Content/components/Actions/components/Search/search";
+import { Navigation, } from "./components/Content/components/Navigation/navigation";
+import { Slogan } from "./components/Content/components/Slogan/slogan";
+import { Divider } from "./components/Content/components/Slogan/slogan.styles";
+import { Socials } from "./components/Content/components/Socials/socials.styles";
+import { AppBar as HeaderAppBar, HeaderSmAppBar } from "./header.styles";
+export const Header = ({ ...headerProps }) => {
+    const { Announcements, authenticationEnabled, actions, className, Logo, navAlignment = ELEMENT_ALIGNMENT.LEFT, navLinks, searchEnabled, searchURL, slogan, socialMedia, } = headerProps;
+    const { layoutDispatch } = useLayoutState();
+    const headerRef = useRef(null);
+    const { height } = useResizeObserver(headerRef, getBorderBoxSizeHeight) || {};
+    const [menuOpen, setMenuOpen] = useState(false);
+    const onlySmDesktop = useBreakpointHelper(BREAKPOINT_FN_NAME.ONLY, DESKTOP_SM);
+    const smDesktop = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
+    const desktop = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP);
+    const AppBar = navAlignment === ELEMENT_ALIGNMENT.RIGHT ? HeaderSmAppBar : HeaderAppBar;
     const showActions = searchEnabled || authenticationEnabled || !smDesktop;
     const isNavigationIn = smDesktop;
     const isSloganIn = Boolean(slogan) && smDesktop;
     const isSocialsIn = Boolean(socialMedia) && desktop;
-    const fadeProps = constants_1.FADE_TRANSITION_PROPS;
+    const fadeProps = FADE_TRANSITION_PROPS;
     // Closes header menu.
-    const closeMenu = (0, react_1.useCallback)(() => {
+    const closeMenu = useCallback(() => {
         setMenuOpen(false);
     }, []);
     // Opens header menu.
-    const openMenu = (0, react_1.useCallback)(() => {
+    const openMenu = useCallback(() => {
         setMenuOpen(true);
     }, []);
     // Updates layout state header height.
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!height)
             return;
         layoutDispatch({
             payload: height,
-            type: layoutState_1.LayoutActionKind.UpdateHeaderHeight,
+            type: LayoutActionKind.UpdateHeaderHeight,
         });
     }, [height, layoutDispatch]);
-    return (react_1.default.createElement(AppBar, { ref: headerRef, className: className, elevation: 1, position: "fixed" },
+    return (React.createElement(AppBar, { ref: headerRef, className: className, elevation: 1, position: "fixed" },
         Announcements,
-        react_1.default.createElement(material_1.Toolbar, { variant: "dense" },
+        React.createElement(Toolbar, { variant: "dense" },
             Logo,
-            react_1.default.createElement(material_1.Fade, Object.assign({ in: isSloganIn, style: { transitionDelay: isSloganIn ? "50ms" : "0ms" } }, fadeProps),
-                react_1.default.createElement(slogan_styles_1.Divider, { orientation: "vertical" })),
-            react_1.default.createElement(material_1.Fade, Object.assign({ in: isSloganIn, style: { transitionDelay: isSloganIn ? "50ms" : "0ms" } }, fadeProps),
-                react_1.default.createElement(slogan_1.Slogan, { slogan: slogan })),
-            react_1.default.createElement(material_1.Fade, Object.assign({ in: isNavigationIn }, fadeProps),
-                react_1.default.createElement(navigation_1.Navigation, { alignment: navAlignment, headerProps: headerProps, links: (0, utils_1.getHeaderNavigationLinks)(navLinks, socialMedia, onlySmDesktop) })),
-            socialMedia && (react_1.default.createElement(material_1.Fade, Object.assign({ in: isSocialsIn }, fadeProps),
-                react_1.default.createElement(socials_styles_1.Socials, { buttonSize: "small", socials: socialMedia.socials }))),
-            react_1.default.createElement(actions_1.Actions, { showActions: showActions },
-                react_1.default.createElement(search_1.Search, { closeMenu: closeMenu, searchEnabled: searchEnabled, searchURL: searchURL }),
-                react_1.default.createElement(authentication_1.Authentication, { authenticationEnabled: authenticationEnabled, closeMenu: closeMenu }),
+            React.createElement(Fade, { in: isSloganIn, style: { transitionDelay: isSloganIn ? "50ms" : "0ms" }, ...fadeProps },
+                React.createElement(Divider, { orientation: "vertical" })),
+            React.createElement(Fade, { in: isSloganIn, style: { transitionDelay: isSloganIn ? "50ms" : "0ms" }, ...fadeProps },
+                React.createElement(Slogan, { slogan: slogan })),
+            React.createElement(Fade, { in: isNavigationIn, ...fadeProps },
+                React.createElement(Navigation, { alignment: navAlignment, headerProps: headerProps, links: getHeaderNavigationLinks(navLinks, socialMedia, onlySmDesktop) })),
+            socialMedia && (React.createElement(Fade, { in: isSocialsIn, ...fadeProps },
+                React.createElement(Socials, { buttonSize: "small", socials: socialMedia.socials }))),
+            React.createElement(Actions, { showActions: showActions },
+                React.createElement(Search, { closeMenu: closeMenu, searchEnabled: searchEnabled, searchURL: searchURL }),
+                React.createElement(Authentication, { authenticationEnabled: authenticationEnabled, closeMenu: closeMenu }),
                 actions,
-                react_1.default.createElement(menu_1.Menu, { closeMenu: closeMenu, headerProps: headerProps, open: menuOpen, openMenu: openMenu })))));
+                React.createElement(Menu, { closeMenu: closeMenu, headerProps: headerProps, open: menuOpen, openMenu: openMenu })))));
 };
-exports.Header = Header;

package/lib/components/Layout/components/Header/header.stories.js

@@ -1,44 +1,38 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HeaderStory = void 0;
-const react_1 = __importDefault(require("react"));
-const entities_1 = require("../../../../common/entities");
-const logo_svg_1 = __importDefault(require("../../../../images/logo.svg"));
-const discourseIcon_1 = require("../../../common/CustomIcon/components/DiscourseIcon/discourseIcon");
-const gitHubIcon_1 = require("../../../common/CustomIcon/components/GitHubIcon/gitHubIcon");
-const xIcon_1 = require("../../../common/CustomIcon/components/XIcon/xIcon");
-const youTubeIcon_1 = require("../../../common/CustomIcon/components/YouTubeIcon/youTubeIcon");
-const constants_1 = require("./common/constants");
-const logo_1 = require("./components/Content/components/Logo/logo");
-const header_1 = require("./header");
-exports.default = {
+import React from "react";
+import { ELEMENT_ALIGNMENT } from "../../../../common/entities";
+import logo from "../../../../images/logo.svg";
+import { DiscourseIcon } from "../../../common/CustomIcon/components/DiscourseIcon/discourseIcon";
+import { GitHubIcon } from "../../../common/CustomIcon/components/GitHubIcon/gitHubIcon";
+import { XIcon } from "../../../common/CustomIcon/components/XIcon/xIcon";
+import { YouTubeIcon } from "../../../common/CustomIcon/components/YouTubeIcon/youTubeIcon";
+import { HEADER_NAVIGATION_LABEL } from "./common/constants";
+import { Logo } from "./components/Content/components/Logo/logo";
+import { Header } from "./header";
+export default {
     argTypes: {
         Logo: { control: { disable: true } },
         authenticationEnabled: { control: "boolean" },
         navAlignment: {
             control: "select",
-            options: [entities_1.ELEMENT_ALIGNMENT.LEFT, entities_1.ELEMENT_ALIGNMENT.CENTER],
+            options: [ELEMENT_ALIGNMENT.LEFT, ELEMENT_ALIGNMENT.CENTER],
         },
         navLinks: { control: "array" },
         searchEnabled: { control: "boolean" },
         slogan: { control: "text" },
         socialMedia: { control: { disable: true } },
     },
-    component: header_1.Header,
+    component: Header,
     parameters: {
         layout: "fullscreen",
     },
     title: "Components/Layout/Header",
 };
 const url = "/";
-exports.HeaderStory = {
+export const HeaderStory = {
     args: {
-        Logo: react_1.default.createElement(logo_1.Logo, { alt: "Logo", height: 40, link: "/", src: logo_svg_1.default }),
+        Logo: React.createElement(Logo, { alt: "Logo", height: 40, link: "/", src: logo }),
         authenticationEnabled: false,
-        navAlignment: entities_1.ELEMENT_ALIGNMENT.CENTER,
+        navAlignment: ELEMENT_ALIGNMENT.CENTER,
         navLinks: [
             {
                 label: "Overview",
@@ -74,25 +68,25 @@ exports.HeaderStory = {
         searchEnabled: true,
         slogan: "Header Slogan",
         socialMedia: {
-            label: constants_1.HEADER_NAVIGATION_LABEL.SOCIALS,
+            label: HEADER_NAVIGATION_LABEL.SOCIALS,
             socials: [
                 {
-                    Icon: xIcon_1.XIcon,
+                    Icon: XIcon,
                     label: "X",
                     url: "https://twitter.com",
                 },
                 {
-                    Icon: youTubeIcon_1.YouTubeIcon,
+                    Icon: YouTubeIcon,
                     label: "YouTube",
                     url: "https://www.youtube.com",
                 },
                 {
-                    Icon: discourseIcon_1.DiscourseIcon,
+                    Icon: DiscourseIcon,
                     label: "Discourse",
                     url: "https://www.discourse.org/",
                 },
                 {
-                    Icon: gitHubIcon_1.GitHubIcon,
+                    Icon: GitHubIcon,
                     label: "GitHub",
                     url: "https://github.com",
                 },

package/lib/components/Layout/components/Header/header.styles.js

@@ -1,13 +1,7 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HeaderSmAppBar = exports.AppBar = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-const constants_1 = require("./common/constants");
-exports.AppBar = (0, styled_1.default)(material_1.AppBar) `
+import styled from "@emotion/styled";
+import { AppBar as MAppBar } from "@mui/material";
+import { HEADER_HEIGHT } from "./common/constants";
+export const AppBar = styled(MAppBar) `
   border-bottom: 1px solid ${({ theme }) => theme.palette.smoke.main};
 
   &.MuiPaper-elevation0 {
@@ -16,11 +10,11 @@ exports.AppBar = (0, styled_1.default)(material_1.AppBar) `
 
   .MuiToolbar-root {
     gap: 16px;
-    height: ${constants_1.HEADER_HEIGHT}px;
+    height: ${HEADER_HEIGHT}px;
     min-height: unset;
   }
 `;
-exports.HeaderSmAppBar = (0, styled_1.default)(exports.AppBar) `
+export const HeaderSmAppBar = styled(AppBar) `
   .MuiToolbar-root {
     gap: 8px;
   }

package/lib/components/Layout/components/Main/main.js

@@ -1,15 +1,8 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Main = void 0;
-const react_1 = __importDefault(require("react"));
-const useLayoutState_1 = require("../../../../hooks/useLayoutState");
-const main_styles_1 = require("./main.styles");
-const Main = ({ children, className }) => {
-    const { layoutState } = (0, useLayoutState_1.useLayoutState)();
+import React from "react";
+import { useLayoutState } from "../../../../hooks/useLayoutState";
+import { MainWithOffset } from "./main.styles";
+export const Main = ({ children, className }) => {
+    const { layoutState } = useLayoutState();
     const { headerHeight } = layoutState;
-    return (react_1.default.createElement(main_styles_1.MainWithOffset, { className: className, offset: headerHeight }, children));
+    return (React.createElement(MainWithOffset, { className: className, offset: headerHeight }, children));
 };
-exports.Main = Main;

package/lib/components/Layout/components/Main/main.styles.js

@@ -1,19 +1,13 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MainWithOffset = exports.Main = void 0;
-const react_1 = require("@emotion/react");
-const styled_1 = __importDefault(require("@emotion/styled"));
-const main = (0, react_1.css) `
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+const main = css `
   align-items: flex-start;
   display: flex;
   flex: 1;
 `;
-exports.Main = (0, styled_1.default)("main") `
+export const Main = styled("main") `
   ${main};
 `;
-exports.MainWithOffset = (0, styled_1.default)(exports.Main) `
+export const MainWithOffset = styled(Main) `
   margin-top: ${({ offset }) => offset}px;
 `;

package/lib/components/Layout/components/Nav/components/NavBarHero/navBarHero.js

@@ -1,21 +1,14 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavBarHero = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const staticImage_1 = require("../../../../../common/StaticImage/staticImage");
-const navBarHero_styles_1 = require("./navBarHero.styles");
-const NavBarHero = ({ byline, logo, slogan, }) => {
+import { Divider } from "@mui/material";
+import React from "react";
+import { StaticImage, } from "../../../../../common/StaticImage/staticImage";
+import { HeroLogo as Logo, HeroText, NavBarHero as Hero, } from "./navBarHero.styles";
+export const NavBarHero = ({ byline, logo, slogan, }) => {
     const showHero = byline || logo || slogan;
-    return (react_1.default.createElement(react_1.default.Fragment, null, showHero && (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(navBarHero_styles_1.NavBarHero, null,
-            logo && (react_1.default.createElement(navBarHero_styles_1.HeroLogo, null,
-                react_1.default.createElement(staticImage_1.StaticImage, Object.assign({}, logo)))),
-            slogan && react_1.default.createElement(navBarHero_styles_1.HeroText, null, slogan),
-            byline && react_1.default.createElement(navBarHero_styles_1.HeroText, null, byline)),
-        react_1.default.createElement(material_1.Divider, null)))));
+    return (React.createElement(React.Fragment, null, showHero && (React.createElement(React.Fragment, null,
+        React.createElement(Hero, null,
+            logo && (React.createElement(Logo, null,
+                React.createElement(StaticImage, { ...logo }))),
+            slogan && React.createElement(HeroText, null, slogan),
+            byline && React.createElement(HeroText, null, byline)),
+        React.createElement(Divider, null)))));
 };
-exports.NavBarHero = NavBarHero;

package/lib/components/Layout/components/Nav/components/NavBarHero/navBarHero.styles.js

@@ -1,17 +1,11 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HeroText = exports.HeroLogo = exports.NavBarHero = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-exports.NavBarHero = styled_1.default.div `
+import styled from "@emotion/styled";
+export const NavBarHero = styled.div `
   display: grid;
   gap: 8px 0;
   grid-auto-flow: row;
   justify-items: flex-start;
 `;
-exports.HeroLogo = styled_1.default.span `
+export const HeroLogo = styled.span `
   line-height: 0;
 
   img {
@@ -20,7 +14,7 @@ exports.HeroLogo = styled_1.default.span `
     width: auto;
   }
 `;
-exports.HeroText = styled_1.default.span `
+export const HeroText = styled.span `
   color: ${({ theme }) => theme.palette.ink.light};
   display: block;
   font-size: 12px;

package/lib/components/Layout/components/Nav/nav.js

@@ -1,21 +1,14 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Nav = void 0;
-const material_1 = require("@mui/material");
-const link_1 = __importDefault(require("next/link"));
-const react_1 = __importDefault(require("react"));
-const nav_styles_1 = require("./nav.styles");
-const Nav = ({ Hero, navigation }) => {
-    return (react_1.default.createElement(nav_styles_1.NavBar, null,
+import { ListItem, ListItemButton, ListItemText } from "@mui/material";
+import Link from "next/link";
+import React from "react";
+import { List, NavBar } from "./nav.styles";
+export const Nav = ({ Hero, navigation }) => {
+    return (React.createElement(NavBar, null,
         Hero,
-        react_1.default.createElement(nav_styles_1.List, null, navigation.map(({ active, label, url }, i) => {
-            return (react_1.default.createElement(material_1.ListItem, { key: `${label}${i}` },
-                react_1.default.createElement(link_1.default, { href: url !== null && url !== void 0 ? url : "", legacyBehavior: true, passHref: true },
-                    react_1.default.createElement(material_1.ListItemButton, { disabled: !url, selected: active },
-                        react_1.default.createElement(material_1.ListItemText, { disableTypography: true, primary: label })))));
+        React.createElement(List, null, navigation.map(({ active, label, url }, i) => {
+            return (React.createElement(ListItem, { key: `${label}${i}` },
+                React.createElement(Link, { href: url ?? "", legacyBehavior: true, passHref: true },
+                    React.createElement(ListItemButton, { disabled: !url, selected: active },
+                        React.createElement(ListItemText, { disableTypography: true, primary: label })))));
         }))));
 };
-exports.Nav = Nav;

package/lib/components/Layout/components/Nav/nav.stories.js

@@ -1,15 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavStory = void 0;
-const nav_1 = require("./nav");
-exports.default = {
-    component: nav_1.Nav,
+import { Nav } from "./nav";
+export default {
+    component: Nav,
     parameters: {
         layout: "fullscreen",
     },
     title: "Components/Layout/Nav",
 };
-exports.NavStory = {
+export const NavStory = {
     args: {
         navigation: [
             { label: "Learning AnVIL", url: "" },

package/lib/components/Layout/components/Nav/nav.styles.js

@@ -1,18 +1,12 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.List = exports.NavBar = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-const fonts_1 = require("../../../../styles/common/mixins/fonts");
-exports.NavBar = styled_1.default.div `
+import styled from "@emotion/styled";
+import { List as MList } from "@mui/material";
+import { textBody400, textBody500, textUppercase500, } from "../../../../styles/common/mixins/fonts";
+export const NavBar = styled.div `
   .MuiDivider-root {
     margin: 20px 0;
   }
 `;
-exports.List = (0, styled_1.default)(material_1.List) `
+export const List = styled(MList) `
   display: grid;
   gap: 12px;
   padding: 0;
@@ -30,7 +24,7 @@ exports.List = (0, styled_1.default)(material_1.List) `
       }
 
       .MuiListItemText-root {
-        ${fonts_1.textBody400};
+        ${textBody400};
       }
 
       &.Mui-disabled {
@@ -39,7 +33,7 @@ exports.List = (0, styled_1.default)(material_1.List) `
         opacity: 1;
 
         .MuiListItemText-root {
-          ${fonts_1.textUppercase500};
+          ${textUppercase500};
         }
       }
 
@@ -47,7 +41,7 @@ exports.List = (0, styled_1.default)(material_1.List) `
         color: ${({ theme }) => theme.palette.primary.main};
 
         .MuiListItemText-root {
-          ${fonts_1.textBody500};
+          ${textBody500};
         }
       }
     }

package/lib/components/Layout/components/Outline/common/constants.d.ts

@@ -1,2 +1,2 @@
-import { TabProps as MTabProps } from "@mui/material/Tab/Tab";
+import { TabProps as MTabProps } from "@mui/material";
 export declare const DEFAULT_TAB_VALUE: MTabProps["value"];

package/lib/components/Layout/components/Outline/common/constants.js

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_TAB_VALUE = void 0;
-exports.DEFAULT_TAB_VALUE = "";
+export const DEFAULT_TAB_VALUE = "";

package/lib/components/Layout/components/Outline/components/ContentsTab/contentsTab.js

@@ -1,25 +1,6 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+import React from "react";
+import { Segment } from "../../../../../common/CustomIcon/components/Segment/segment";
+import { Tab } from "./contentsTab.styles";
+export const ContentsTab = ({ className, value, ...props /* Spread props to allow for Mui Tab specific prop overrides. */ }) => {
+    return (React.createElement(Tab, { className: className, label: "Contents", icon: React.createElement(Segment, { fontSize: "small" }), iconPosition: "start", value: value, ...props }));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContentsTab = void 0;
-const react_1 = __importDefault(require("react"));
-const segment_1 = require("../../../../../common/CustomIcon/components/Segment/segment");
-const contentsTab_styles_1 = require("./contentsTab.styles");
-const ContentsTab = (_a) => {
-    var { className, value } = _a, props = __rest(_a, ["className", "value"]) /* Spread props to allow for Mui Tab specific prop overrides. */;
-    return (react_1.default.createElement(contentsTab_styles_1.Tab, Object.assign({ className: className, label: "Contents", icon: react_1.default.createElement(segment_1.Segment, { fontSize: "small" }), iconPosition: "start", value: value }, props)));
-};
-exports.ContentsTab = ContentsTab;

package/lib/components/Layout/components/Outline/components/ContentsTab/contentsTab.styles.js

@@ -1,22 +1,16 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tab = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-const colors_1 = require("../../../../../../styles/common/mixins/colors");
-const fonts_1 = require("../../../../../../styles/common/mixins/fonts");
-const outline_styles_1 = require("../../outline.styles");
-exports.Tab = (0, styled_1.default)(material_1.Tab) `
-  ${outline_styles_1.tab};
+import styled from "@emotion/styled";
+import { Tab as MTab } from "@mui/material";
+import { inkLight } from "../../../../../../styles/common/mixins/colors";
+import { textUppercase500 } from "../../../../../../styles/common/mixins/fonts";
+import { tab } from "../../outline.styles";
+export const Tab = styled(MTab) `
+  ${tab};
 
   && {
-    ${fonts_1.textUppercase500};
+    ${textUppercase500};
     align-items: center;
     align-self: flex-start;
-    color: ${colors_1.inkLight};
+    color: ${inkLight};
     pointer-events: none;
   }
 `;