@redocly/theme 0.55.0-next.7 → 0.55.0-next.8

package/src/components/PageNavigation/NextButton.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import styled from 'styled-components';
 
 import type { JSX } from 'react';
 import type { ResolvedNavItemWithLink } from '@redocly/config';
 
-import { useThemeHooks, useThemeConfig } from '@redocly/theme/core/hooks';
-import { Button } from '@redocly/theme/components/Button/Button';
+import { NavigationButton } from '@redocly/theme/components/PageNavigation/NavigationButton';
+import { useThemeConfig, useThemeHooks } from '@redocly/theme/core/hooks';
 import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';
 
 export type NextPageType = {
@@ -15,52 +14,30 @@ export type NextPageType = {
 
 export function NextButton({ nextPage, className }: NextPageType): JSX.Element {
   const { navigation } = useThemeConfig();
-  const { useTranslate } = useThemeHooks();
+  const { useTranslate, usePageProps } = useThemeHooks();
+  const { frontmatter } = usePageProps();
   const { translate } = useTranslate();
 
-  if (!nextPage || navigation?.nextButton?.hide) {
-    return <div>&nbsp;</div>;
-  }
-
-  const nextPageText = nextPage.label || nextPage.routeSlug || '';
   const translationKey = 'page.nextButton';
   const label =
+    frontmatter?.navigation?.nextButton?.label || nextPage?.label || nextPage?.routeSlug || '';
+  const link = frontmatter?.navigation?.nextButton?.link || nextPage?.link;
+  const text =
     navigation?.nextButton?.text || translate(translationKey, { defaultValue: 'Next page' });
 
+  if (navigation?.nextButton?.hide || !link || !label) {
+    return <div>&nbsp;</div>;
+  }
+
   return (
-    <NextButtonWrapper
-      data-component-name="PageNavigation/NextButton"
-      data-translation-key={translationKey}
-    >
-      <NextPageLabel>{label}</NextPageLabel>
-      <NextPageButton
-        size="large"
-        to={nextPage.link}
-        extraClass={className}
-        variant="link"
-        icon={<ArrowRightIcon />}
-        iconPosition="right"
-      >
-        {nextPageText}
-      </NextPageButton>
-    </NextButtonWrapper>
+    <NavigationButton
+      label={label}
+      link={link}
+      text={text}
+      translationKey={translationKey}
+      position="right"
+      className={className}
+      icon={<ArrowRightIcon />}
+    />
   );
 }
-
-const NextButtonWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  text-align: right;
-`;
-
-const NextPageButton = styled(Button)`
-  text-wrap: wrap;
-  padding-left: 0;
-  padding-right: 0;
-`;
-
-const NextPageLabel = styled.span`
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-sm);
-  font-weight: var(--font-weight-regular);
-`;

package/src/components/PageNavigation/PageNavigation.tsx

@@ -5,8 +5,8 @@ import type { JSX } from 'react';
 import type { ResolvedNavItemWithLink } from '@redocly/config';
 
 import { useThemeConfig } from '@redocly/theme/core/hooks';
-import { PreviousButton } from '@redocly/theme/components/PageNavigation/PreviousButton';
 import { NextButton } from '@redocly/theme/components/PageNavigation/NextButton';
+import { PreviousButton } from '@redocly/theme/components/PageNavigation/PreviousButton';
 
 export type PageNavigationType = {
   nextPage?: ResolvedNavItemWithLink | null;

package/src/components/PageNavigation/PreviousButton.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
-import styled from 'styled-components';
 
 import type { JSX } from 'react';
 import type { ResolvedNavItemWithLink } from '@redocly/config';
 
-import { useThemeHooks, useThemeConfig } from '@redocly/theme/core/hooks';
-import { Button } from '@redocly/theme/components/Button/Button';
+import { NavigationButton } from '@redocly/theme/components/PageNavigation/NavigationButton';
+import { useThemeConfig, useThemeHooks } from '@redocly/theme/core/hooks';
 import { ArrowLeftIcon } from '@redocly/theme/icons/ArrowLeftIcon/ArrowLeftIcon';
 
 export type PreviousPageType = {
@@ -15,53 +14,31 @@ export type PreviousPageType = {
 
 export function PreviousButton({ prevPage, className }: PreviousPageType): JSX.Element {
   const { navigation } = useThemeConfig();
-  const { useTranslate } = useThemeHooks();
+  const { useTranslate, usePageProps } = useThemeHooks();
+  const { frontmatter } = usePageProps();
   const { translate } = useTranslate();
 
-  if (!prevPage || navigation?.previousButton?.hide) {
-    return <div>&nbsp;</div>;
-  }
-
-  const prevPageText = prevPage.label || prevPage.routeSlug || '';
   const translationKey = 'page.previousButton';
   const label =
+    frontmatter?.navigation?.previousButton?.label || prevPage?.label || prevPage?.routeSlug || '';
+  const link = frontmatter?.navigation?.previousButton?.link || prevPage?.link;
+  const text =
     navigation?.previousButton?.text ||
     translate(translationKey, { defaultValue: 'Previous page' });
 
+  if (navigation?.previousButton?.hide || !link || !label) {
+    return <div>&nbsp;</div>;
+  }
+
   return (
-    <PreviousButtonWrapper
-      data-component-name="PageNavigation/PreviousButton"
-      data-translation-key={translationKey}
-    >
-      <PreviousPageLabel>{label}</PreviousPageLabel>
-      <PreviousPageButton
-        size="large"
-        to={prevPage.link}
-        extraClass={className}
-        variant="link"
-        icon={<ArrowLeftIcon />}
-        iconPosition="left"
-      >
-        {prevPageText}
-      </PreviousPageButton>
-    </PreviousButtonWrapper>
+    <NavigationButton
+      label={label}
+      link={link}
+      text={text}
+      translationKey={translationKey}
+      position="left"
+      className={className}
+      icon={<ArrowLeftIcon />}
+    />
   );
 }
-
-const PreviousButtonWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  text-align: left;
-`;
-
-const PreviousPageButton = styled(Button)`
-  text-wrap: wrap;
-  padding-left: 0;
-  padding-right: 0;
-`;
-
-const PreviousPageLabel = styled.span`
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-sm);
-  font-weight: var(--font-weight-regular);
-`;

package/src/components/Search/SearchAiConversationInput.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import type { JSX } from 'react';
 
+import { AI_SEARCH_MAX_MESSAGE_LENGTH } from '@redocly/theme/core/constants';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { SendIcon } from '@redocly/theme/icons/SendIcon/SendIcon';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
@@ -62,7 +63,9 @@ export function SearchAiConversationInput({
         onKeyUp={handleOnKeyUp}
         value={query}
         disabled={isGeneratingResponse}
+        maxLength={AI_SEARCH_MAX_MESSAGE_LENGTH}
       />
+
       <SendButton
         disabled={isDisabled}
         size="small"

package/src/components/Select/Select.tsx

@@ -43,9 +43,10 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
     return values
       .map((value) => {
         const selectedOption = options.find((option) => option.value === value);
-        return selectedOption || typeof value === 'string'
-          ? ({ value } as SelectOption<T>)
-          : (value as SelectOption<T>);
+        return (
+          selectedOption ||
+          (typeof value === 'string' ? ({ value } as SelectOption<T>) : (value as SelectOption<T>))
+        );
       })
       .filter((option) => !!option);
   };
@@ -298,4 +299,5 @@ const SelectDropdown = styled(Dropdown)`
 
 const SelectDropdownMenu = styled(DropdownMenu)`
   width: 100%;
+  margin-top: var(--spacing-unit);
 `;

package/src/components/Sidebar/Sidebar.tsx

@@ -121,7 +121,7 @@ const SidebarContent = styled.aside<{ opened?: boolean; collapsed?: boolean }>`
   }
 `;
 
-const SidebarHeader = styled.div<{ collapsed?: boolean }>`
+export const SidebarHeader = styled.div<{ collapsed?: boolean }>`
   margin: var(--sidebar-offset-top) var(--sidebar-margin-horizontal) 0
     var(--sidebar-margin-horizontal);
   padding: 0 0 var(--sidebar-header-padding-bottom) 0;

package/src/components/Tag/Tag.tsx

@@ -46,9 +46,11 @@ export type TagProps = {
   icon?: React.ReactNode;
   active?: boolean;
   tabIndex?: number;
+  style?: React.CSSProperties;
   onClick?: (event: React.MouseEvent) => void;
   onKeyDown?: (event: React.KeyboardEvent) => void;
   onClose?: (event: React.MouseEvent) => void;
+  maxLength?: number;
 };
 
 export function Tag({
@@ -65,8 +67,72 @@ export function Tag({
   borderless,
   withStatusDot,
   statusDotColor = 'var(--tag-status-dot-color-default)',
+  maxLength,
   ...otherProps
 }: TagProps): JSX.Element {
+  const truncateText = (text: string, maxLen: number): string => {
+    if (text.length <= maxLen) return text;
+    return text.slice(0, maxLen) + '...';
+  };
+
+  const extractTextFromElement = (element: React.ReactNode): string => {
+    if (typeof element === 'string') {
+      return element;
+    }
+    if (typeof element === 'number') {
+      return element.toString();
+    }
+    if (React.isValidElement(element)) {
+      const props = element.props as { children?: React.ReactNode };
+      if (typeof props.children === 'string') {
+        return props.children;
+      }
+    }
+    return '';
+  };
+
+  const truncateJSXElement = (element: React.ReactNode, maxLen: number): React.ReactNode => {
+    if (typeof element === 'string') {
+      return truncateText(element, maxLen);
+    }
+    if (typeof element === 'number') {
+      const numStr = element.toString();
+      return numStr.length > maxLen ? truncateText(numStr, maxLen) : element;
+    }
+    if (React.isValidElement(element)) {
+      const textContent = extractTextFromElement(element);
+      if (textContent.length <= maxLen) {
+        return element;
+      }
+
+      const props = element.props as { children?: React.ReactNode };
+
+      if (typeof props.children === 'string') {
+        return React.cloneElement(element, {
+          ...props,
+          children: truncateText(props.children, maxLen),
+        } as any);
+      }
+    }
+    return element;
+  };
+
+  const renderChildren = (): React.ReactNode => {
+    if (!maxLength) {
+      return children;
+    }
+
+    if (typeof children === 'string') {
+      return truncateText(children, maxLength);
+    }
+
+    if (React.isValidElement(children)) {
+      return truncateJSXElement(children, maxLength);
+    }
+
+    return children;
+  };
+
   return (
     <TagWrapper
       tabIndex={tabIndex}
@@ -80,7 +146,7 @@ export function Tag({
       {...otherProps}
     >
       {withStatusDot ? <StatusDot color={statusDotColor} /> : icon ? icon : null}
-      <ContentWrapper>{children}</ContentWrapper>
+      <ContentWrapper>{renderChildren()}</ContentWrapper>
       {closable && (
         <CloseButton
           onClick={(event) => {

package/src/components/Tag/variables.ts

@@ -160,6 +160,27 @@ export const tag = css`
     --tag-close-button-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
   }
 
+  .tag-grass {
+    --tag-color: var(--color-grass-8); // @presenter Color
+    --tag-bg-color: transparent; // @presenter Color
+    --tag-border-color: var(--color-grass-4); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-grass-1); // @presenter Color
+  }
+  
+  .tag-purple {
+    --tag-color: var(--color-purple-7); // @presenter Color
+    --tag-bg-color: transparent; // @presenter Color
+    --tag-border-color: var(--color-purple-4); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-purple-1); // @presenter Color
+  }
+
+  .tag-sky {
+    --tag-color: var(--color-sky-9); // @presenter Color
+    --tag-bg-color: transparent; // @presenter Color
+    --tag-border-color: var(--color-sky-5); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-sky-2); // @presenter Color
+  }
+
   /**
     * @tokens Tag http
     */

package/src/components/Tooltip/Tooltip.tsx

@@ -13,6 +13,7 @@ export type TooltipProps = {
   className?: string;
   width?: string;
   dataTestId?: string;
+  disabled?: boolean;
 };
 
 export function TooltipComponent({
@@ -24,6 +25,7 @@ export function TooltipComponent({
   className = 'default',
   width,
   dataTestId,
+  disabled = false,
 }: PropsWithChildren<TooltipProps>): JSX.Element {
   const ref = useRef<HTMLDivElement | null>(null);
   const { isOpened, handleOpen, handleClose } = useControl(isOpen);
@@ -33,20 +35,21 @@ export function TooltipComponent({
   const isControlled = isOpen !== undefined;
 
   useEffect(() => {
-    if (isControlled) {
+    if (isControlled && !disabled) {
       if (isOpen) {
         handleOpen();
       } else {
         handleClose();
       }
     }
-  }, [isOpen, isControlled, handleOpen, handleClose]);
+  }, [isOpen, isControlled, handleOpen, handleClose, disabled]);
 
-  const controllers = !isControlled && {
-    onMouseEnter: handleOpen,
-    onMouseLeave: handleClose,
-    onClick: handleClose,
-  };
+  const controllers = !isControlled &&
+    !disabled && {
+      onMouseEnter: handleOpen,
+      onMouseLeave: handleClose,
+      onClick: handleClose,
+    };
 
   return (
     <TooltipWrapper
@@ -56,7 +59,7 @@ export function TooltipComponent({
       data-component-name="Tooltip/Tooltip"
     >
       {children}
-      {isOpened && (
+      {isOpened && !disabled && (
         <TooltipBody
           data-testid={dataTestId || (typeof tip === 'string' ? tip : '')}
           placement={placement}
@@ -83,10 +86,11 @@ const PLACEMENTS = {
       withArrow &&
       css`
         &::after {
-          border-left: 5px solid transparent;
-          border-right: 5px solid transparent;
-          border-top-width: 6px;
+          border-left: 6px solid transparent;
+          border-right: 6px solid transparent;
+          border-top-width: 8px;
           border-top-style: solid;
+          border-radius: 2px 2px 0 0;
           bottom: 0;
           left: 50%;
           transform: translate(-50%, 99%);
@@ -103,10 +107,11 @@ const PLACEMENTS = {
       withArrow &&
       css`
         &::after {
-          border-left: 5px solid transparent;
-          border-right: 5px solid transparent;
-          border-bottom-width: 6px;
+          border-left: 6px solid transparent;
+          border-right: 6px solid transparent;
+          border-bottom-width: 8px;
           border-bottom-style: solid;
+          border-radius: 0 0 2px 2px;
           top: 0;
           left: 50%;
           transform: translate(-50%, -99%);
@@ -123,10 +128,11 @@ const PLACEMENTS = {
       withArrow &&
       css`
         &::after {
-          border-top: 5px solid transparent;
-          border-bottom: 5px solid transparent;
-          border-left-width: 6px;
+          border-top: 6px solid transparent;
+          border-bottom: 6px solid transparent;
+          border-left-width: 8px;
           border-left-style: solid;
+          border-radius: 2px 0 0 2px;
           top: 50%;
           right: 0;
           transform: translate(99%, -50%);
@@ -143,10 +149,11 @@ const PLACEMENTS = {
       withArrow &&
       css`
         &::after {
-          border-top: 5px solid transparent;
-          border-bottom: 5px solid transparent;
-          border-right-width: 6px;
+          border-top: 6px solid transparent;
+          border-bottom: 6px solid transparent;
+          border-right-width: 8px;
           border-right-style: solid;
+          border-radius: 0 2px 2px 0;
           top: 50%;
           left: 0;
           transform: translate(-99%, -50%);
@@ -173,7 +180,7 @@ const TooltipBody = styled.span<
   white-space: normal;
   overflow-wrap: break-word;
 
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-md);
   transition: opacity 0.3s ease-out;
 
   font-size: 13px;
@@ -187,11 +194,13 @@ const TooltipBody = styled.span<
     display: inline-block;
     width: 0;
     height: 0;
-    border-color: var(--tooltip-bg-color);
+    border-color: var(--tooltip-arrow-color, var(--tooltip-bg-color));
   }
 
   background: var(--tooltip-bg-color);
   color: var(--tooltip-text-color);
+  border: var(--tooltip-border-width, 0) var(--tooltip-border-style, solid)
+    var(--tooltip-border-color, transparent);
   box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;
 
   width: ${({ width }) => width || '120px'};

package/src/components/Tooltip/variables.ts

@@ -8,6 +8,10 @@ export const tooltip = css`
 
   --tooltip-text-color: var(--text-color-secondary);
   --tooltip-bg-color: var(--bg-color-raised);
+  --tooltip-arrow-color: var(--tooltip-bg-color);
+  --tooltip-border-width: 0;
+  --tooltip-border-style: solid;
+  --tooltip-border-color: transparent;
   --tooltip-padding-vertical: var(--spacing-xs);
   --tooltip-padding-horizontal: var(--spacing-sm);
   --tooltip-padding: var(--tooltip-padding-vertical) var(--tooltip-padding-horizontal);
@@ -16,6 +20,19 @@ export const tooltip = css`
   .tooltip-copy-button {
     --tooltip-text-color: var(--text-color-secondary);
     --tooltip-bg-color: var(--bg-color-raised);
+    --tooltip-arrow-color: var(--tooltip-bg-color);
+  }
+
+  .tooltip-catalog {
+    --tooltip-text-color: var(--text-color-primary);
+    --tooltip-bg-color: var(--layer-color);
+    --tooltip-arrow-color: var(--border-color-secondary);
+    --tooltip-border-width: 2px;
+    --tooltip-border-color: var(--border-color-secondary);
+    --tooltip-padding-vertical: var(--spacing-xs);
+    --tooltip-padding-horizontal: var(--spacing-sm);
+    --tooltip-padding: var(--tooltip-padding-vertical) var(--tooltip-padding-horizontal);
+    --tooltip-max-width: 300px;
   }
 
   // @tokens End

package/src/core/constants/catalog.ts

@@ -0,0 +1 @@
+export const CATALOG_TAG_MAX_LENGTH = 15;

package/src/core/constants/index.ts

@@ -2,3 +2,4 @@ export * from '@redocly/theme/core/constants/common';
 export * from '@redocly/theme/core/constants/environments';
 export * from '@redocly/theme/core/constants/code-walkthrough';
 export * from '@redocly/theme/core/constants/search';
+export * from '@redocly/theme/core/constants/catalog';

package/src/core/constants/search.ts

@@ -38,4 +38,6 @@ export const AI_SEARCH_ERROR_CONFIG: Record<AiSearchError, AiSearchErrorConfig>
   [AiSearchError.ErrorProcessingResponse]: defaultErrorConfig,
 } as const;
 
+export const AI_SEARCH_MAX_MESSAGE_LENGTH = 45000;
+
 export const SEARCH_DEBOUNCE_TIME_MS = 300;

package/src/core/hooks/__mocks__/use-theme-hooks.ts

@@ -85,4 +85,5 @@ export const useThemeHooks = jest.fn(() => ({
     submitFeedback: jest.fn(),
   })),
   useLoadAndNavigate: jest.fn(),
+  usePageProps: jest.fn().mockReturnValue({}),
 }));

package/src/core/hooks/catalog/useCatalogEntities.ts

@@ -0,0 +1,16 @@
+import type { UseCatalogEntitiesProps } from '@redocly/theme';
+
+export function useCatalogEntities({ entitiesTypes, excludedEntities }: UseCatalogEntitiesProps) {
+  const initialTypesWithoutAll = entitiesTypes.filter((type) => type !== 'all');
+  const initialTypesFilter = entitiesTypes.length ? `type:${initialTypesWithoutAll.join(',')}` : '';
+  const initialExcludedEntitiesFilter = excludedEntities?.length
+    ? `-key:${excludedEntities.map((entity) => entity.key).join(',')}`
+    : '';
+  const initialFilter = initialTypesFilter
+    ? `${initialTypesFilter} AND ${initialExcludedEntitiesFilter}`
+    : initialExcludedEntitiesFilter;
+
+  return {
+    initialFilter,
+  };
+}

package/src/core/hooks/catalog/useCatalogTableHeaderCellActions.ts

@@ -0,0 +1,38 @@
+import {
+  BaseEntity,
+  CatalogColumn,
+} from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
+
+import { SortOption } from '../../types';
+
+type CatalogTableHeaderCellActionsProps<T extends BaseEntity> = {
+  column: CatalogColumn<T>;
+  handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
+  setSortOption: (sortOption: SortOption | null) => void;
+  isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
+};
+
+export function useCatalogTableHeaderCellActions<T extends BaseEntity>({
+  column,
+  handleSortClick,
+  setSortOption,
+  isColumnSorted,
+}: CatalogTableHeaderCellActionsProps<T>) {
+  const sortKey = column.sortKey;
+  const isUpActive = sortKey ? isColumnSorted(sortKey, 'desc') : false;
+  const isDownActive = sortKey ? isColumnSorted(sortKey, 'asc') : false;
+
+  const handleCellClick = (): void => {
+    if (!column.sortable || !sortKey) return;
+
+    if (isDownActive) {
+      handleSortClick(sortKey, 'desc');
+    } else if (isUpActive) {
+      setSortOption(null);
+    } else {
+      handleSortClick(sortKey, 'asc');
+    }
+  };
+
+  return { handleCellClick, sortKey, isUpActive, isDownActive };
+}

package/src/core/hooks/catalog/useCatalogTableViewRow.ts

@@ -0,0 +1,40 @@
+import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+
+import { getPathPrefix } from '../../utils';
+
+type CatalogTableViewRowProps = {
+  entityKey: string;
+  entityType: string;
+  catalogConfig: CatalogEntityConfig;
+  entitiesCatalogConfig?: EntitiesCatalogConfig;
+};
+
+export function useCatalogTableViewRow({
+  entityKey,
+  entityType,
+  catalogConfig,
+  entitiesCatalogConfig,
+}: CatalogTableViewRowProps) {
+  const getCatalogSpecificConfigByEntityTypeIncluded = () => {
+    if (!entitiesCatalogConfig) {
+      return;
+    }
+
+    return Object.values(entitiesCatalogConfig.catalogs ?? {}).find((catalog) => {
+      return catalog.includes?.some((include) => include.type === entityType);
+    });
+  };
+
+  const getEntityDetailsLink = () => {
+    const pathPrefix = getPathPrefix();
+    const catalogSpecificConfig = getCatalogSpecificConfigByEntityTypeIncluded();
+
+    if (!catalogSpecificConfig || !entitiesCatalogConfig) {
+      return `${pathPrefix}/catalogs/${catalogConfig.slug}/entities/${entityKey}`;
+    }
+
+    return `${pathPrefix}/catalogs/${catalogSpecificConfig.slug}/entities/${entityKey}`;
+  };
+
+  return { getEntityDetailsLink };
+}

package/src/core/hooks/index.ts

@@ -36,5 +36,7 @@ export * from '@redocly/theme/core/hooks/code-walkthrough/use-renderable-files';
 export * from '@redocly/theme/core/hooks/use-element-size';
 export * from '@redocly/theme/core/hooks/use-time-ago';
 export * from '@redocly/theme/core/hooks/use-input-key-commands';
+export * from '@redocly/theme/core/hooks/catalog/useCatalogEntities';
 export * from '@redocly/theme/core/hooks/use-active-page-version';
 export * from '@redocly/theme/core/hooks/use-page-versions';
+export * from '@redocly/theme/core/hooks/use-user-teams';

package/src/core/hooks/use-user-teams.ts

@@ -0,0 +1,8 @@
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+export function useUserTeams() {
+  const { useUserTeams } = useThemeHooks();
+  const userTeams = useUserTeams();
+
+  return userTeams;
+}