@databiosphere/findable-ui 6.0.0 → 8.0.0

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

@@ -1,13 +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.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 { css } from "@emotion/react";
+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,12 +11,31 @@ 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) `
-  .MuiToolbar-root {
-    gap: 8px;
+const group = css `
+  align-items: center;
+  display: flex;
+  flex: 1;
+`;
+export const Left = styled.div `
+  ${group};
+  gap: 16px;
+  justify-content: flex-start;
+
+  .MuiButton-navPrimary {
+    &:first-of-type {
+      margin-left: 24px;
+    }
   }
 `;
+export const Center = styled.div `
+  ${group};
+  justify-content: center;
+`;
+export const Right = styled.div `
+  ${group};
+  justify-content: flex-end;
+`;

package/lib/components/Layout/components/Header/hooks/useHeaderVisibility.d.ts

@@ -0,0 +1,20 @@
+import { HeaderProps } from "../header";
+export interface UseHeaderVisibility {
+    isIn: {
+        isActionsIn: boolean;
+        isCenterGroupIn: boolean;
+        isCenterNavigationIn: boolean;
+        isLeftGroupIn: boolean;
+        isLeftNavigationIn: boolean;
+        isRightGroupIn: boolean;
+        isRightNavigationIn: boolean;
+        isSloganIn: boolean;
+        isSocialsIn: boolean;
+    };
+}
+/**
+ * Returns header component visibility for header related rendering logic.
+ * @param headerProps - Header component props.
+ * @returns header component visibility.
+ */
+export declare const useHeaderVisibility: (headerProps: HeaderProps) => UseHeaderVisibility;

package/lib/components/Layout/components/Header/hooks/useHeaderVisibility.js

@@ -0,0 +1,46 @@
+import { useBreakpoint } from "../../../../../hooks/useBreakpoint";
+/**
+ * Returns header component visibility for header related rendering logic.
+ * @param headerProps - Header component props.
+ * @returns header component visibility.
+ */
+export const useHeaderVisibility = (headerProps) => {
+    const { lgUp, mdUp } = useBreakpoint();
+    // Header configuration.
+    const { actions, authenticationEnabled, logo, navigation: [navItemsL, navItemsC, navItemsR] = [], searchEnabled, slogan, socialMedia, } = headerProps;
+    // Header content.
+    const hasActions = Boolean(actions);
+    const hasLogo = Boolean(logo);
+    const hasMenu = !mdUp;
+    const hasNavItemsC = Boolean(navItemsC);
+    const hasNavItemsL = Boolean(navItemsL);
+    const hasNavItemsR = Boolean(navItemsR);
+    const hasSlogan = Boolean(slogan);
+    const hasSocials = Boolean(socialMedia);
+    // Determines header content visibility.
+    const isActionsIn = hasActions || searchEnabled || authenticationEnabled || hasMenu;
+    const isNavigationIn = mdUp;
+    const isSloganIn = hasSlogan && mdUp;
+    const isSocialsIn = hasSocials && lgUp;
+    // Determines navigation visibility.
+    const isCenterNavigationIn = isNavigationIn && hasNavItemsC;
+    const isLeftNavigationIn = isNavigationIn && hasNavItemsL;
+    const isRightNavigationIn = isNavigationIn && hasNavItemsR;
+    // Determines group visibility.
+    const isLeftGroupIn = hasLogo || isSocialsIn || isLeftNavigationIn;
+    const isCenterGroupIn = isCenterNavigationIn;
+    const isRightGroupIn = isRightNavigationIn || isSocialsIn || isActionsIn;
+    return {
+        isIn: {
+            isActionsIn,
+            isCenterGroupIn,
+            isCenterNavigationIn,
+            isLeftGroupIn,
+            isLeftNavigationIn,
+            isRightGroupIn,
+            isRightNavigationIn,
+            isSloganIn,
+            isSocialsIn,
+        },
+    };
+};

package/lib/components/Layout/components/Header/hooks/useMeasureHeader.d.ts

@@ -0,0 +1,5 @@
+import { RefObject } from "react";
+export interface UseMeasureHeader {
+    headerRef: RefObject<HTMLElement>;
+}
+export declare const useMeasureHeader: () => UseMeasureHeader;

package/lib/components/Layout/components/Header/hooks/useMeasureHeader.js

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from "react";
+import { useLayoutState } from "../../../../../hooks/useLayoutState";
+import { getBorderBoxSizeHeight, useResizeObserver, } from "../../../../../hooks/useResizeObserver";
+import { LayoutActionKind } from "../../../../../providers/layoutState";
+export const useMeasureHeader = () => {
+    const { layoutDispatch } = useLayoutState();
+    const headerRef = useRef(null);
+    const { height } = useResizeObserver(headerRef, getBorderBoxSizeHeight) || {};
+    // Updates layout state header height.
+    useEffect(() => {
+        if (!height)
+            return;
+        layoutDispatch({
+            payload: height,
+            type: LayoutActionKind.UpdateHeaderHeight,
+        });
+    }, [height, layoutDispatch]);
+    return { headerRef };
+};

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.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;
   }
 `;

package/lib/components/Layout/components/Outline/outline.js

@@ -1,61 +1,22 @@
-"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.Outline = void 0;
-const router_1 = require("next/router");
-const react_1 = __importStar(require("react"));
-const constants_1 = require("./common/constants");
-const outline_styles_1 = require("./outline.styles");
-const Outline = (_a) => {
-    var { className, Contents, outline } = _a, props = __rest(_a, ["className", "Contents", "outline"]) /* Spread props to allow for Mui Tabs specific prop overrides. */;
-    const { asPath, push } = (0, router_1.useRouter)();
-    const [activeTab, setActiveTab] = (0, react_1.useState)("");
+import { useRouter } from "next/router";
+import React, { useEffect, useState } from "react";
+import { DEFAULT_TAB_VALUE } from "./common/constants";
+import { Tab, Tabs } from "./outline.styles";
+export const Outline = ({ className, Contents, outline, ...props /* Spread props to allow for Mui Tabs specific prop overrides. */ }) => {
+    const { asPath, push } = useRouter();
+    const [activeTab, setActiveTab] = useState("");
     // Callback fired when selected tab value changes.
     const handleChange = (_event, tabValue) => {
         push(`#${tabValue}`);
     };
     // Update active tab when path changes.
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         setActiveTab(getActiveTab(outline, asPath));
     }, [asPath, outline]);
-    return (react_1.default.createElement(outline_styles_1.Tabs, Object.assign({ className: className, indicatorColor: activeTab ? "primary" : "transparent", onChange: handleChange, orientation: "vertical", value: activeTab }, props),
-        react_1.default.createElement(Contents, { value: constants_1.DEFAULT_TAB_VALUE }),
-        outline.map(({ depth, hash, value }) => (react_1.default.createElement(outline_styles_1.Tab, { key: hash, depth: depth, label: value, value: hash })))));
+    return (React.createElement(Tabs, { className: className, indicatorColor: activeTab ? "primary" : "transparent", onChange: handleChange, orientation: "vertical", value: activeTab, ...props },
+        React.createElement(Contents, { value: DEFAULT_TAB_VALUE }),
+        outline.map(({ depth, hash, value }) => (React.createElement(Tab, { key: hash, depth: depth, label: value, value: hash })))));
 };
-exports.Outline = Outline;
 /**
  * Initializes active tab.
  * @param outline - Outline items.
@@ -69,5 +30,5 @@ function getActiveTab(outline, asPath) {
             return hashLink;
         }
     }
-    return constants_1.DEFAULT_TAB_VALUE;
+    return DEFAULT_TAB_VALUE;
 }

package/lib/components/Layout/components/Outline/outline.styles.js

@@ -1,16 +1,10 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tab = exports.Tabs = exports.tab = void 0;
-const react_1 = require("@emotion/react");
-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 palette_1 = require("../../../../theme/common/palette");
-exports.tab = (0, react_1.css) `
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { Tab as MTab, Tabs as MTabs } from "@mui/material";
+import { smokeMain } from "../../../../styles/common/mixins/colors";
+import { textBody500, textBodySmall400, } from "../../../../styles/common/mixins/fonts";
+import { inkMain } from "../../../../theme/common/palette";
+export const tab = css `
   align-items: flex-start;
   margin: 0;
   max-width: unset;
@@ -21,9 +15,9 @@ exports.tab = (0, react_1.css) `
     text-decoration: none;
   }
 `;
-exports.Tabs = (0, styled_1.default)(material_1.Tabs) `
+export const Tabs = styled(MTabs) `
   align-self: flex-start;
-  box-shadow: inset 1px 0 ${colors_1.smokeMain};
+  box-shadow: inset 1px 0 ${smokeMain};
   margin: 0;
   max-width: 242px;
   padding: 0;
@@ -42,20 +36,20 @@ exports.Tabs = (0, styled_1.default)(material_1.Tabs) `
     width: 3px;
   }
 `;
-exports.Tab = (0, styled_1.default)(material_1.Tab, {
+export const Tab = styled(MTab, {
     shouldForwardProp: (prop) => prop !== "depth",
 }) `
-  ${exports.tab};
-  color: ${palette_1.inkMain};
+  ${tab};
+  color: ${inkMain};
 
   ${(props) => props.depth === 2 &&
-    (0, react_1.css) `
-      ${(0, fonts_1.textBody500)(props)};
+    css `
+      ${textBody500(props)};
     `};
 
   ${(props) => props.depth === 3 &&
-    (0, react_1.css) `
-      ${(0, fonts_1.textBodySmall400)(props)};
+    css `
+      ${textBodySmall400(props)};
       margin-left: 16px;
       padding: 8px 24px;
     `};

package/lib/components/Layout/components/Sidebar/components/SidebarButton/sidebarButton.js

@@ -1,28 +1,9 @@
-"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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidebarButton = void 0;
-const FilterListRounded_1 = __importDefault(require("@mui/icons-material/FilterListRounded"));
-const react_1 = __importDefault(require("react"));
-const sidebarButton_styles_1 = require("./sidebarButton.styles");
-const SidebarButton = (_a) => {
-    var { className, count, label, onClick } = _a, props = __rest(_a, ["className", "count", "label", "onClick"]);
-    return (react_1.default.createElement(sidebarButton_styles_1.SidebarButton, Object.assign({ className: className, onClick: onClick }, props),
-        react_1.default.createElement(FilterListRounded_1.default, { fontSize: "small" }),
+import FilterListRoundedIcon from "@mui/icons-material/FilterListRounded";
+import React from "react";
+import { Badge, SidebarButton as Button } from "./sidebarButton.styles";
+export const SidebarButton = ({ className, count, label, onClick, ...props }) => {
+    return (React.createElement(Button, { className: className, onClick: onClick, ...props },
+        React.createElement(FilterListRoundedIcon, { fontSize: "small" }),
         label,
-        count > 0 && react_1.default.createElement(sidebarButton_styles_1.Badge, null, count)));
+        count > 0 && React.createElement(Badge, null, count)));
 };
-exports.SidebarButton = SidebarButton;