@databiosphere/findable-ui 21.4.0 → 23.0.0

package/src/components/Filter/components/SearchAllFilters/searchAllFilters.tsx

@@ -11,7 +11,7 @@ import React, {
   useState,
 } from "react";
 import { SelectCategoryView } from "../../../../common/entities";
-import { BODY, SIDEBAR_POSITIONER } from "../../../../common/selectors";
+import { SELECTOR } from "../../../../common/selectors";
 import {
   BREAKPOINT_FN_NAME,
   useBreakpointHelper,
@@ -89,8 +89,8 @@ export const SearchAllFilters = ({
     if (desktopSmUp) {
       setElementsOverflowStyle(
         [
-          document.querySelector(BODY),
-          document.getElementById(SIDEBAR_POSITIONER),
+          document.querySelector(SELECTOR.BODY),
+          document.getElementById(SELECTOR.SIDEBAR_POSITIONER),
         ],
         overflowStyle
       );

package/src/components/Index/components/AzulFileDownload/azulFileDownload.stories.tsx

@@ -1,17 +1,20 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { AzulFileDownload } from "./azulFileDownload";
 
-export default {
+const meta = {
   component: AzulFileDownload,
   title: "Components/Common/IconButton/Download",
-} as ComponentMeta<typeof AzulFileDownload>;
+} satisfies Meta<typeof AzulFileDownload>;
 
-const AzulFileDownloadTemplate: ComponentStory<typeof AzulFileDownload> = (
-  args
-) => <AzulFileDownload {...args} />;
+export default meta;
 
-export const AzulFileDownloadStory = AzulFileDownloadTemplate.bind({});
-AzulFileDownloadStory.args = {
-  url: "https://service.dev.singlecell.gi.ucsc.edu/repository/files/d496b624-eb67-5e47-999a-848e856c5bcc?catalog=dcp2&version=2021-09-10T16%3A09%3A44.000000Z",
+type Story = StoryObj<typeof meta>;
+
+export const AzulFileDownloadStory: Story = {
+  args: {
+    entityName: "",
+    relatedEntityId: "",
+    relatedEntityName: "",
+    url: "https://service.dev.singlecell.gi.ucsc.edu/repository/files/d496b624-eb67-5e47-999a-848e856c5bcc?catalog=dcp2&version=2021-09-10T16%3A09%3A44.000000Z",
+  },
 };

package/src/components/Index/components/Hero/components/Summaries/summaries.stories.tsx

@@ -1,24 +1,24 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { Summaries } from "./summaries";
 
-export default {
+const meta = {
   argTypes: {
-    summaries: { control: "array" },
+    summaries: { control: "object" },
   },
   component: Summaries,
   title: "Components/Summary",
-} as ComponentMeta<typeof Summaries>;
+} satisfies Meta<typeof Summaries>;
 
-const SummariesTemplate: ComponentStory<typeof Summaries> = (args) => (
-  <Summaries {...args} />
-);
+export default meta;
 
-export const SummariesStory = SummariesTemplate.bind({});
-SummariesStory.args = {
-  summaries: [
-    { count: "1", label: "Species" },
-    { count: "1.1k", label: "Donors" },
-    { count: "508.5k", label: "Files" },
-  ],
+type Story = StoryObj<typeof meta>;
+
+export const SummariesStory: Story = {
+  args: {
+    summaries: [
+      { count: "1", label: "Species" },
+      { count: "1.1k", label: "Donors" },
+      { count: "508.5k", label: "Files" },
+    ],
+  },
 };

package/src/components/Index/components/Hero/hero.stories.tsx

@@ -1,9 +1,10 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
+import { Summaries } from "./components/Summaries/summaries";
 import { SummariesStory } from "./components/Summaries/summaries.stories";
 import { Hero } from "./hero";
 
-export default {
+const meta = {
   argTypes: {
     Summaries: { table: { disable: true } },
     title: { table: { disable: true } },
@@ -13,12 +14,15 @@ export default {
     layout: "fullscreen",
   },
   title: "Components/Hero/ExploreView",
-} as ComponentMeta<typeof Hero>;
+} satisfies Meta<typeof Hero>;
 
-const HeroTemplate: ComponentStory<typeof Hero> = (args) => <Hero {...args} />;
+export default meta;
 
-export const HeroStory = HeroTemplate.bind({});
-HeroStory.args = {
-  Summaries: <SummariesStory {...SummariesStory.args} />,
-  title: "Data Explorer",
+type Story = StoryObj<typeof meta>;
+
+export const HeroStory: Story = {
+  args: {
+    Summaries: <Summaries {...SummariesStory.args} />,
+    title: "Data Explorer",
+  },
 };

package/src/components/Index/components/NTagCell/nTagCell.stories.tsx

@@ -1,22 +1,22 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { NTagCell } from "./nTagCell";
 
-export default {
+const meta = {
   argTypes: {
     label: { control: "text" },
-    values: { control: "array" },
+    values: { control: "object" },
   },
   component: NTagCell,
   title: "Components/Table/Cell/NTagCell",
-} as ComponentMeta<typeof NTagCell>;
+} satisfies Meta<typeof NTagCell>;
 
-const NTagCellTemplate: ComponentStory<typeof NTagCell> = (args) => (
-  <NTagCell {...args} />
-);
+export default meta;
 
-export const NTagCellStory = NTagCellTemplate.bind({});
-NTagCellStory.args = {
-  label: "species",
-  values: ["Homo sapiens", "Mus musculus"],
+type Story = StoryObj<typeof meta>;
+
+export const NTagCellStory: Story = {
+  args: {
+    label: "species",
+    values: ["Homo sapiens", "Mus musculus"],
+  },
 };

package/src/components/Index/index.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
+import { Summaries } from "./components/Hero/components/Summaries/summaries";
 import { SummariesStory } from "./components/Hero/components/Summaries/summaries.stories";
 import { Index } from "./index";
 
@@ -22,7 +23,7 @@ type Story = StoryObj<typeof Index>;
 export const IndexStory: Story = {
   args: {
     List: undefined,
-    Summaries: <SummariesStory {...SummariesStory.args} />,
+    Summaries: <Summaries {...SummariesStory.args} />,
     Tabs: undefined,
     title: "Explore Data",
   },

package/src/components/Index/index.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-import { useLayoutState } from "../../hooks/useLayoutState";
+import { useLayoutDimensions } from "../../providers/layoutDimensions/hook";
 import { HeroTitle } from "../common/Title/title";
 import { Hero } from "./components/Hero/hero";
 import { Index as IndexLayout } from "./index.styles";
@@ -25,10 +25,9 @@ export const Index = ({
   Tabs,
   title,
 }: IndexProps): JSX.Element => {
-  const { layoutState } = useLayoutState();
-  const { headerHeight } = layoutState;
+  const { dimensions } = useLayoutDimensions();
   return (
-    <IndexLayout className={className} marginTop={headerHeight}>
+    <IndexLayout className={className} marginTop={dimensions.header.height}>
       <Hero SideBarButton={SideBarButton} Summaries={Summaries} title={title} />
       {SubTitleHero}
       {Tabs}

package/src/components/Layout/components/BackPage/backPageView.stories.tsx

@@ -1,17 +1,25 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
+import { CollaboratingOrganizations } from "../../../Project/components/CollaboratingOrganizations/collaboratingOrganizations";
 import { CollaboratingOrganizationsStory } from "../../../Project/components/CollaboratingOrganizations/collaboratingOrganizations.stories";
+import { Contacts } from "../../../Project/components/Contacts/contacts";
 import { ContactsStory } from "../../../Project/components/Contacts/contacts.stories";
+import { Contributors } from "../../../Project/components/Contributors/contributors";
 import { ContributorsStory } from "../../../Project/components/Contributors/contributors.stories";
+import { DataCurators } from "../../../Project/components/DataCurators/dataCurators";
 import { DataCuratorsStory } from "../../../Project/components/DataCurators/dataCurators.stories";
-import { DataReleasePolicyStory } from "../../../Project/components/DataReleasePolicy/dataReleasePolicy.stories";
+import { DataReleasePolicy } from "../../../Project/components/DataReleasePolicy/dataReleasePolicy";
+import { Description } from "../../../Project/components/Description/description";
 import { DescriptionStory } from "../../../Project/components/Description/description.stories";
+import { Details } from "../../../Project/components/Details/details";
 import { DetailsStory } from "../../../Project/components/Details/details.stories";
+import { Publications } from "../../../Project/components/Publications/publications";
 import { PublicationsStory } from "../../../Project/components/Publications/publications.stories";
+import { SupplementaryLinks } from "../../../Project/components/SupplementaryLinks/supplementaryLinks";
 import { SupplementaryLinksStory } from "../../../Project/components/SupplementaryLinks/supplementaryLinks.stories";
 import { BackPageView } from "./backPageView";
 
-export default {
+const meta = {
   argTypes: {
     isDetailOverview: { control: "boolean" },
     mainColumn: { table: { disable: true } },
@@ -23,39 +31,37 @@ export default {
     layout: "fullscreen",
   },
   title: "Views/BackPage",
-} as ComponentMeta<typeof BackPageView>;
+} satisfies Meta<typeof BackPageView>;
 
-const BackPageViewTemplate: ComponentStory<typeof BackPageView> = (args) => (
-  <BackPageView {...args} />
-);
+export default meta;
 
-export const BackPageViewStory = BackPageViewTemplate.bind({});
-BackPageViewStory.args = {
-  isDetailOverview: true,
-  mainColumn: (
-    <>
-      <DescriptionStory
-        projectDescription={DescriptionStory.args?.projectDescription || "None"}
-      />
-      <ContactsStory {...ContactsStory.args} />
-      <PublicationsStory {...PublicationsStory.args} />
-      <ContributorsStory {...ContributorsStory.args} />
-      <CollaboratingOrganizationsStory
-        {...CollaboratingOrganizationsStory.args}
-      />
-      <DataCuratorsStory {...DataCuratorsStory.args} />
-      {/*<CitationStory {...CitationStory.args} />*/}
-      <SupplementaryLinksStory {...SupplementaryLinksStory.args} />
-      <DataReleasePolicyStory />
-    </>
-  ),
-  sideColumn: (
-    <>
-      <DetailsStory
-        title={DetailsStory.args?.title ?? ""}
-        keyValuePairs={DetailsStory.args?.keyValuePairs}
-      />
-    </>
-  ),
-  top: <></>,
+type Story = StoryObj<typeof meta>;
+
+export const BackPageViewStory: Story = {
+  args: {
+    isDetailOverview: true,
+    mainColumn: (
+      <>
+        <Description
+          projectDescription={
+            DescriptionStory.args?.projectDescription || "None"
+          }
+        />
+        <Contacts {...ContactsStory.args} />
+        <Publications {...PublicationsStory.args} />
+        <Contributors {...ContributorsStory.args} />
+        <CollaboratingOrganizations {...CollaboratingOrganizationsStory.args} />
+        <DataCurators {...DataCuratorsStory.args} />
+        {/*<Citation {...CitationStory.args} />*/}
+        <SupplementaryLinks {...SupplementaryLinksStory.args} />
+        <DataReleasePolicy />
+      </>
+    ),
+    sideColumn: (
+      <>
+        <Details {...DetailsStory.args} />
+      </>
+    ),
+    top: <></>,
+  },
 };

package/src/components/Layout/components/ContentLayout/contentLayout.tsx

@@ -1,6 +1,6 @@
 import { useRouter } from "next/router";
 import React, { ReactNode } from "react";
-import { useLayoutState } from "../../../../hooks/useLayoutState";
+import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
 import { BaseComponentProps } from "../../../types";
 import { LayoutStyle } from "./common/entities";
 import {
@@ -29,9 +29,7 @@ export const ContentLayout = ({
   outline,
 }: BaseComponentProps & ContentLayoutProps): JSX.Element => {
   const { asPath } = useRouter();
-  const {
-    layoutState: { headerHeight },
-  } = useLayoutState();
+  const { dimensions } = useLayoutDimensions();
   return (
     <Layout
       className={className}
@@ -40,16 +38,16 @@ export const ContentLayout = ({
     >
       {navigation && (
         <NavigationGrid
-          headerHeight={headerHeight}
+          headerHeight={dimensions.header.height}
           panelColor={layoutStyle?.navigation}
         >
-          <Positioner headerHeight={headerHeight}>
+          <Positioner headerHeight={dimensions.header.height}>
             <Navigation>{navigation}</Navigation>
           </Positioner>
         </NavigationGrid>
       )}
       <ContentGrid
-        headerHeight={headerHeight}
+        headerHeight={dimensions.header.height}
         panelColor={layoutStyle?.content}
       >
         <Content>{content}</Content>
@@ -57,10 +55,10 @@ export const ContentLayout = ({
       {outline && (
         <OutlineGrid
           key={getOutlineKey(asPath)}
-          headerHeight={headerHeight}
+          headerHeight={dimensions.header.height}
           panelColor={layoutStyle?.outline}
         >
-          <Positioner headerHeight={headerHeight}>
+          <Positioner headerHeight={dimensions.header.height}>
             <Outline>{outline}</Outline>
           </Positioner>
         </OutlineGrid>

package/src/components/Layout/components/Footer/footer.stories.tsx

@@ -9,10 +9,10 @@ import { YouTubeIcon } from "../../../common/CustomIcon/components/YouTubeIcon/y
 import { Logo } from "../Header/components/Content/components/Logo/logo";
 import { Footer } from "./footer";
 
-export default {
+const meta = {
   argTypes: {
     Branding: { control: { disabled: true } },
-    navLinks: { control: "array" },
+    navLinks: { control: "object" },
     socials: { control: { disabled: true } },
   },
   component: Footer,
@@ -20,13 +20,15 @@ export default {
     layout: "fullscreen",
   },
   title: "Components/Layout/Footer",
-} as Meta<typeof Footer>;
+} satisfies Meta<typeof Footer>;
+
+export default meta;
 
 type Story = StoryObj<typeof Footer>;
 
 export const FooterStory: Story = {
   args: {
-    Branding: <Logo alt="logo" height={24} link={"/"} src={logo} />,
+    Branding: <Logo alt="logo" height={24} link={"/"} src={logo.src} />,
     navLinks: [
       {
         label: "Help",

package/src/components/Layout/components/Footer/footer.styles.ts

@@ -8,6 +8,7 @@ import { Link as DXLink } from "../../../Links/components/Link/link";
 
 export const AppBar = styled(MAppBar)`
   padding: 16px 0;
+  z-index: 1; /* required for outline or navigation overflow */
 
   .MuiToolbar-root {
     align-items: flex-start;

package/src/components/Layout/components/Footer/footer.tsx

@@ -1,5 +1,7 @@
 import { Toolbar } from "@mui/material";
 import React, { ReactNode } from "react";
+import { SELECTOR } from "../../../../common/selectors";
+import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
 import { Social } from "../../../common/Socials/socials";
 import { ANCHOR_TARGET } from "../../../Links/common/entities";
 import { isNodeBoolean } from "../../../utils";
@@ -22,11 +24,14 @@ export const Footer = ({
   socials,
   versionInfo,
 }: FooterProps): JSX.Element => {
+  const { footerRef } = useLayoutDimensions();
   return (
     <AppBar
       className={className}
       color="inherit"
       component="footer"
+      id={SELECTOR.FOOTER}
+      ref={footerRef}
       variant="footer"
     >
       <Toolbar variant="dense">

package/src/components/Layout/components/Header/header.stories.tsx

@@ -31,7 +31,7 @@ const url = "/";
 export const HeaderStory: Story = {
   args: {
     authenticationEnabled: false,
-    logo: <Logo alt="Logo" height={40} link="/" src={logo} />,
+    logo: <Logo alt="Logo" height={40} link="/" src={logo.src} />,
     navigation: [
       undefined,
       [

package/src/components/Layout/components/Header/header.tsx

@@ -1,7 +1,9 @@
 import { Fade, Toolbar } from "@mui/material";
 import { usePathname } from "next/navigation";
 import React, { ReactNode } from "react";
+import { SELECTOR } from "../../../../common/selectors";
 import { ComponentsConfig } from "../../../../config/entities";
+import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
 import {
   APP_BAR_PROPS,
   FADE_TRANSITION_PROPS,
@@ -29,7 +31,6 @@ import { Socials } from "./components/Content/components/Socials/socials.styles"
 import { AppBar, Center, Left, Right } from "./header.styles";
 import { useHeaderNavigation } from "./hooks/useHeaderNavigation";
 import { useHeaderVisibility } from "./hooks/useHeaderVisibility";
-import { useMeasureHeader } from "./hooks/useMeasureHeader";
 import { useMenu } from "./hooks/useMenu";
 
 export interface HeaderProps {
@@ -48,7 +49,7 @@ export interface HeaderProps {
 export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
   const { navigation } = useHeaderNavigation(headerProps);
   const { isIn } = useHeaderVisibility({ ...headerProps, navigation });
-  const { headerRef } = useMeasureHeader();
+  const { headerRef } = useLayoutDimensions();
   const { onClose, onOpen, open } = useMenu();
   const pathname = usePathname() ?? "";
   const {
@@ -68,7 +69,12 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
     pathname,
   };
   return (
-    <AppBar {...APP_BAR_PROPS} ref={headerRef} className={className}>
+    <AppBar
+      {...APP_BAR_PROPS}
+      className={className}
+      id={SELECTOR.HEADER}
+      ref={headerRef}
+    >
       {/* Announcements */}
       <Announcements announcements={announcements} />
       {/* Toolbar */}

package/src/components/Layout/components/Main/main.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-import { useLayoutState } from "../../../../hooks/useLayoutState";
+import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
 import { MainWithOffset } from "./main.styles";
 
 export interface MainProps {
@@ -8,10 +8,9 @@ export interface MainProps {
 }
 
 export const Main = ({ children, className }: MainProps): JSX.Element => {
-  const { layoutState } = useLayoutState();
-  const { headerHeight } = layoutState;
+  const { dimensions } = useLayoutDimensions();
   return (
-    <MainWithOffset className={className} offset={headerHeight}>
+    <MainWithOffset className={className} offset={dimensions.header.height}>
       {children}
     </MainWithOffset>
   );

package/src/components/Layout/components/Outline/components/ContentsTab/contentsTab.styles.ts

@@ -1,10 +1,10 @@
 import styled from "@emotion/styled";
-import { Tab as MTab } from "@mui/material";
+import { Tab } 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)`
+export const StyledTab = styled(Tab)`
   ${tab};
 
   && {

package/src/components/Layout/components/Outline/components/ContentsTab/contentsTab.tsx

@@ -1,24 +1,21 @@
-import { TabProps as MTabProps } from "@mui/material";
 import React from "react";
+import { FONT_SIZE } from "../../../../../../styles/common/mui/icon";
+import { TAB_PROPS } from "../../../../../../styles/common/mui/tab";
 import { Segment } from "../../../../../common/CustomIcon/components/Segment/segment";
-import { Tab } from "./contentsTab.styles";
-
-export interface ContentsTabProps extends Omit<MTabProps, "value"> {
-  className?: string;
-  value: string;
-}
+import { StyledTab } from "./contentsTab.styles";
+import { ContentsTabProps } from "./types";
 
 export const ContentsTab = ({
   className,
   value,
-  ...props /* Spread props to allow for Mui Tab specific prop overrides. */
+  ...props /* MuiTabProps. */
 }: ContentsTabProps): JSX.Element => {
   return (
-    <Tab
+    <StyledTab
       className={className}
       label="Contents"
-      icon={<Segment fontSize="small" />}
-      iconPosition="start"
+      icon={<Segment fontSize={FONT_SIZE.SMALL} />}
+      iconPosition={TAB_PROPS.ICON_POSITION.START}
       value={value}
       {...props}
     />

package/src/components/Layout/components/Outline/components/ContentsTab/types.ts

@@ -0,0 +1,8 @@
+import { TabProps } from "@mui/material";
+import { BaseComponentProps } from "../../../../../types";
+
+export interface ContentsTabProps
+  extends BaseComponentProps,
+    Omit<TabProps, "value"> {
+  value: string;
+}

package/src/components/Layout/components/Outline/hooks/UseHash/hook.ts

@@ -0,0 +1,17 @@
+import { isSSR } from "../../../../../../utils/ssr";
+import { UseHash } from "./types";
+
+/**
+ * Hook to get the current URL hash without the leading '#' character.
+ *
+ * @description
+ * Extracts the hash from window.location.hash and removes the leading '#'.
+ * Returns empty string when running in SSR environment.
+ *
+ * @returns Object containing the hash without leading '#', or empty string if SSR.
+ */
+export function useHash(): UseHash {
+  if (isSSR()) return { hash: "" };
+  const { hash } = window.location;
+  return { hash: hash.replace(/^#/, "") };
+}

package/src/components/Layout/components/Outline/hooks/UseHash/types.ts

@@ -0,0 +1,3 @@
+export interface UseHash {
+  hash: string;
+}

package/src/components/Layout/components/Outline/hooks/UseTabs/constants.ts

@@ -0,0 +1,3 @@
+import { TabProps } from "@mui/material";
+
+export const DEFAULT_TAB_VALUE: TabProps["value"] = "";

package/src/components/Layout/components/Outline/hooks/UseTabs/hook.ts

@@ -0,0 +1,32 @@
+import { TabsProps } from "@mui/material";
+import Router from "next/router";
+import { SyntheticEvent, useCallback, useEffect, useState } from "react";
+import { TABS_PROPS } from "../../../../../../styles/common/mui/tabs";
+import { OutlineItem } from "../../types";
+import { useHash } from "../UseHash/hook";
+import { DEFAULT_TAB_VALUE } from "./constants";
+import { getNextValue } from "./utils";
+
+export function useTabs(
+  outline: OutlineItem[]
+): Pick<TabsProps, "indicatorColor" | "onChange" | "orientation" | "value"> {
+  const [value, setValue] = useState<TabsProps["value"]>(DEFAULT_TAB_VALUE);
+  const { hash } = useHash();
+
+  const onChange = useCallback((_event: SyntheticEvent, hash: string): void => {
+    Router.push({ hash });
+  }, []);
+
+  useEffect(() => {
+    setValue(getNextValue(hash, outline));
+  }, [hash, outline]);
+
+  return {
+    indicatorColor: value
+      ? TABS_PROPS.INDICATOR_COLOR.PRIMARY
+      : TABS_PROPS.INDICATOR_COLOR.TRANSPARENT,
+    onChange,
+    orientation: TABS_PROPS.ORIENTATION.VERTICAL,
+    value,
+  };
+}

package/src/components/Layout/components/Outline/hooks/UseTabs/utils.ts

@@ -0,0 +1,18 @@
+import { TabsProps } from "@mui/material";
+import { OutlineItem } from "../../types";
+import { DEFAULT_TAB_VALUE } from "./constants";
+
+/**
+ * Returns the tab value for navigation.
+ * @param hash - The current hash from the URL.
+ * @param outlineItems - Outline items.
+ * @returns The item's hash if found and enabled, otherwise returns the default tab value.
+ */
+export function getNextValue(
+  hash: string,
+  outlineItems: OutlineItem[]
+): TabsProps["value"] {
+  const item = outlineItems.find((item) => item.hash === hash);
+  if (!item || item.disabled) return DEFAULT_TAB_VALUE;
+  return item.hash;
+}

package/src/components/Layout/components/Outline/outline.styles.ts

@@ -24,7 +24,7 @@ export const tab = css`
   }
 `;
 
-export const Tabs = styled(MTabs)`
+export const StyledTabs = styled(MTabs)`
   align-self: flex-start;
   box-shadow: inset 1px 0 ${smokeMain};
   margin: 0;
@@ -46,7 +46,7 @@ export const Tabs = styled(MTabs)`
   }
 `;
 
-export const Tab = styled(MTab, {
+export const StyledTab = styled(MTab, {
   shouldForwardProp: (prop) => prop !== "depth",
 })<Props>`
   ${tab};