@redocly/theme 0.58.0-next.1 → 0.58.0-next.11

package/src/core/contexts/CodeSnippetContext.tsx

@@ -1,31 +1,67 @@
-import { createContext, useContext, useState } from 'react';
+import React, { createContext, useContext, useCallback, useMemo } from 'react';
 
-export type CodeSnippetContextType = {
-  activeSnippetName: string;
-  setActiveSnippetName: (name: string) => void;
-};
+import { useLocalState } from '../hooks/use-local-state';
 
 export const CODE_GROUP_SNIPPET_NAME_KEY = 'redocly:codeGroupSnippetName';
 
+type CodeSnippetContextType = {
+  activeSnippets: Record<string, string>;
+  setActiveSnippet: (groupId: string, snippetId: string) => void;
+};
+
 export const CodeSnippetContext = createContext<CodeSnippetContextType | null>(null);
 
-export function useActiveCodeSnippetName(
-  mode: 'tabs' | 'dropdown',
-): [string, (name: string) => void] {
+export function CodeSnippetProvider({ children }: { children: React.ReactNode }) {
+  const [activeSnippets, setActiveSnippets] = useLocalState<Record<string, string>>(
+    CODE_GROUP_SNIPPET_NAME_KEY,
+    {},
+  );
+
+  const setActiveSnippet = useCallback(
+    (groupId: string, snippetId: string) => {
+      setActiveSnippets({ ...activeSnippets, [groupId]: snippetId });
+    },
+    [activeSnippets, setActiveSnippets],
+  );
+
+  const contextValue = { activeSnippets, setActiveSnippet };
+
+  return <CodeSnippetContext.Provider value={contextValue}>{children}</CodeSnippetContext.Provider>;
+}
+
+export const useCodeSnippetContext = (): CodeSnippetContextType => {
   const context = useContext(CodeSnippetContext);
+
   if (!context) {
     throw new Error('useCodeSnippetContext must be used within a CodeSnippetContext');
   }
 
-  const [activeSnippetName, setActiveSnippetName] = useState(
-    mode === 'tabs' ? '' : context.activeSnippetName,
+  return context;
+};
+
+export const useActiveCodeSnippetId = (
+  groupId?: string,
+  availableSnippets?: { id: string }[],
+): [string, (id: string) => void] => {
+  const { activeSnippets, setActiveSnippet } = useCodeSnippetContext();
+
+  const storedSnippetId = groupId ? activeSnippets[groupId] || '' : '';
+
+  const activeId = useMemo(() => {
+    if (!availableSnippets?.length) return storedSnippetId;
+
+    const found = storedSnippetId && availableSnippets.find((s) => s.id === storedSnippetId);
+    return found ? storedSnippetId : availableSnippets[0]?.id || '';
+  }, [storedSnippetId, availableSnippets]);
+
+  const setActiveSnippetId = useCallback(
+    (id: string) => {
+      if (groupId) {
+        setActiveSnippet(groupId, id);
+      }
+    },
+    [groupId, setActiveSnippet],
   );
 
-  if (mode === 'tabs') {
-    // use non-synced state for tabs mode
-    return [activeSnippetName, setActiveSnippetName];
-  } else {
-    // use global synced state for dropdown mode
-    return [context.activeSnippetName, context.setActiveSnippetName];
-  }
-}
+  return [activeId, setActiveSnippetId];
+};

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

@@ -21,7 +21,7 @@ export function useCatalogTableViewRow({
     }
 
     return Object.values(entitiesCatalogConfig.catalogs ?? {}).find((catalog) => {
-      return catalog.includes?.some((include) => include.type === entityType);
+      return catalog?.includes?.some((include) => include.type === entityType);
     });
   };
 

package/src/core/hooks/use-active-section-id.ts

@@ -25,6 +25,12 @@ export function useActiveSectionId(
           setItemId('');
           return;
         }
+
+        if (window.scrollY <= 0) {
+          setItemId(sections[0].getAttribute('data-section-id') || '');
+          return;
+        }
+
         for (let i = 0; i < sections.length; i++) {
           const section = sections[i];
           const rect = section.getBoundingClientRect();

package/src/core/hooks/use-codeblock-tabs-controls.ts

@@ -1,9 +1,9 @@
 import { useEffect, useState, useCallback, useMemo } from 'react';
 
-import type { CodeBlockTabItems } from '../../components/CodeBlock/CodeBlock';
+import type { CodeBlockItems } from '../../components/CodeBlock/CodeBlock';
 
 type CodeBlockTabsProps = {
-  tabs: CodeBlockTabItems;
+  tabs: CodeBlockItems;
   containerRef: React.RefObject<HTMLDivElement | null>;
   tabRefs: React.RefObject<HTMLButtonElement[]>;
 };

package/src/core/hooks/use-control.ts

@@ -1,4 +1,6 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useRef } from 'react';
+
+const DEFAULT_CONTROL_OPEN_DELAY = 300;
 
 export type UseControlReturnType = {
   isOpened: boolean;
@@ -8,9 +10,25 @@ export type UseControlReturnType = {
 
 export const useControl = (initialVal = false): UseControlReturnType => {
   const [isOpened, setIsOpened] = useState<boolean>(initialVal);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clearOpenTimer = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+  }, []);
+
+  const handleOpen = useCallback(() => {
+    clearOpenTimer();
+    timeoutRef.current = setTimeout(() => {
+      setIsOpened(true);
+    }, DEFAULT_CONTROL_OPEN_DELAY);
+  }, [clearOpenTimer]);
 
-  const handleOpen = useCallback(() => setIsOpened(true), []);
-  const handleClose = useCallback(() => setIsOpened(false), []);
+  const handleClose = useCallback(() => {
+    clearOpenTimer();
+    setIsOpened(false);
+  }, [clearOpenTimer]);
 
   return {
     isOpened,

package/src/core/hooks/use-local-state.ts

@@ -1,30 +1,39 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
+
+import { isBrowser } from '../utils/js-utils';
+
+function getStoredValue<T>(key: string, fallback: T): T {
+  if (!isBrowser()) return fallback;
 
-function getInitialValue<T>(key: string, initialValue: T): T {
-  if (typeof window === 'undefined') {
-    return initialValue;
-  }
   try {
     const savedValue = localStorage.getItem(key);
-    if (savedValue) {
-      return JSON.parse(savedValue) as T;
-    }
-  } catch (error) {
-    console.error(`Error reading from localStorage for key "${key}":`, error);
+    return savedValue ? (JSON.parse(savedValue) as T) : fallback;
+  } catch {
+    return fallback;
   }
-  return initialValue;
 }
 
 export function useLocalState<T>(key: string, initialValue: T): [T, (value: T) => void] {
-  const [value, setValue] = useState<T>(() => getInitialValue(key, initialValue));
+  const [value, setValue] = useState<T>(initialValue);
 
+  // Load stored value from localStorage after component mounts
+  // This ensures SSR compatibility: server and client both start with initialValue,
+  // then client loads the actual stored value without hydration mismatch
   useEffect(() => {
-    try {
-      localStorage.setItem(key, JSON.stringify(value));
-    } catch (error) {
-      console.error(`Error writing to localStorage for key "${key}":`, error);
-    }
-  }, [key, value]);
+    if (!isBrowser()) return;
+    setValue(getStoredValue(key, initialValue));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key]);
+
+  const handleSetValue = useCallback(
+    (newValue: T) => {
+      setValue(newValue);
+      if (isBrowser()) {
+        localStorage.setItem(key, JSON.stringify(newValue));
+      }
+    },
+    [key],
+  );
 
-  return [value, setValue] as const;
+  return [value, handleSetValue] as const;
 }

package/src/core/hooks/use-page-actions.ts

@@ -12,10 +12,19 @@ import { useThemeHooks } from './use-theme-hooks';
 import { useThemeConfig } from './use-theme-config';
 import { ClipboardService } from '../utils/clipboard-service';
 import { IS_BROWSER } from '../utils/dom';
+import { CursorIcon } from '../../icons/CursorIcon/CursorIcon';
 
 const DEFAULT_ENABLED_ACTIONS = ['copy', 'view', 'chatgpt', 'claude'] as const;
+const CURSOR_URL =
+  'cursor://anysphere.cursor-deeplink/mcp/install?name=$NAME&config=$BASE64_ENCODED_CONFIG';
 
-export function usePageActions(pageSlug: string): PageAction[] {
+export type PageActionType = 'copy' | 'view' | 'chatgpt' | 'claude' | 'mcp-cursor';
+
+export function usePageActions(
+  pageSlug: string,
+  mcpUrl?: string,
+  actions?: PageActionType[],
+): PageAction[] {
   const { useTranslate, usePageData, usePageProps, usePageSharedData } = useThemeHooks();
   const { translate } = useTranslate();
 
@@ -32,7 +41,7 @@ export function usePageActions(pageSlug: string): PageAction[] {
   );
   const { isPublic } = usePageData() || {};
 
-  const actions: PageAction[] = useMemo(() => {
+  const result: PageAction[] = useMemo(() => {
     if (shouldHideAllActions) {
       return [];
     }
@@ -54,9 +63,49 @@ export function usePageActions(pageSlug: string): PageAction[] {
       return url.toString();
     }
 
-    return (themeConfig.navigation?.actions?.items || DEFAULT_ENABLED_ACTIONS)
+    return (themeConfig.navigation?.actions?.items || actions || DEFAULT_ENABLED_ACTIONS)
       .map((action) => {
+        function generateMCPConfig(isCursor?: boolean): string {
+          const jsonConfig = {
+            'mcp-server': {
+              url: mcpUrl,
+              description: 'MCP Server',
+            },
+          };
+          if (isCursor) {
+            const url = CURSOR_URL.replace('$NAME', 'mcp-server').replace(
+              '$BASE64_ENCODED_CONFIG',
+              btoa(JSON.stringify(jsonConfig['mcp-server'])),
+            );
+            return url;
+          }
+
+          return JSON.stringify(jsonConfig, null, 2);
+        }
+
         switch (action) {
+          case 'mcp-cursor':
+            if (!mcpUrl) {
+              return null;
+            }
+
+            return {
+              buttonText: translate('page.actions.cursorMcpButtonText', 'Connect to Cursor'),
+              title: translate('page.actions.cursorMcpTitle', 'Connect to Cursor'),
+              description: translate(
+                'page.actions.cursorMcpDescription',
+                'Install MCP server on Cursor',
+              ),
+              iconComponent: CursorIcon,
+              onClick: () => {
+                try {
+                  const url = generateMCPConfig(true);
+                  window.open(url, '_blank');
+                } catch (error) {
+                  console.error(error);
+                }
+              },
+            };
           case 'copy':
             return {
               buttonText: translate('page.actions.copyButtonText', 'Copy'),
@@ -121,9 +170,17 @@ export function usePageActions(pageSlug: string): PageAction[] {
         }
       })
       .filter((action) => action !== null);
-  }, [themeConfig, translate, pageSlug, isPublic, shouldHideAllActions]);
-
-  return actions;
+  }, [
+    shouldHideAllActions,
+    pageSlug,
+    themeConfig.navigation?.actions?.items,
+    actions,
+    mcpUrl,
+    translate,
+    isPublic,
+  ]);
+
+  return result;
 }
 
 function shouldHidePageActions(

package/src/core/hooks/use-telemetry-fallback.ts

@@ -58,4 +58,9 @@ export const useTelemetryFallback = () => ({
   sendAsyncapiDocsMessageClickedMessage: () => {},
   sendAsyncapiDocsServerModalOpenedMessage: () => {},
   sendAsyncapiDocsDownloadDefinitionClickedMessage: () => {},
+  sendGraphqlDocsViewedMessage: () => {},
+  sendGraphqlDocsPerformanceMetricsMessage: () => {},
+  sendGraphqlDocsReferencedInLinkClickedMessage: () => {},
+  sendGraphqlDocsRequiredScopesModalOpenedMessage: () => {},
+  sendGraphqlDocsDownloadDefinitionClickedMessage: () => {},
 });

package/src/core/openapi/index.ts

@@ -4,6 +4,10 @@
 // This selective import approach will help with tree shaking and reduce
 // the overall bundle size by avoiding importing the entire theme package
 // when only specific functionality is needed.
+export type { UserClaims } from '../types/user-claims';
+export type { OperationParameter, ParameterHighlight } from '../types/search';
+export type { TFunction, TOptions } from '../types/l10n';
+export type { SelectOption, SelectProps } from '../types/select';
 export { IS_BROWSER } from '../utils/dom';
 export {
   addLeadingSlash,
@@ -13,20 +17,21 @@ export {
   addTrailingSlash,
   withPathPrefix,
 } from '../utils/urls';
+export { capitalize } from '../utils/string';
 export { typedMemo } from '../hoc/typedMemo';
 export { useMount } from '../hooks/use-mount';
 export { GlobalStyle } from '../styles/global';
 export { breakpoints } from '../utils/media-css';
 export { isPrimitive } from '../utils/args-typecheck';
-export type { UserClaims } from '../types/user-claims';
+export { ClipboardService } from '../utils/clipboard-service';
+export { getUserAgent } from '../utils/get-user-agent';
 export { useFocusTrap } from '../hooks/use-focus-trap';
-export type { TFunction, TOptions } from '../types/l10n';
 export { useThemeHooks } from '../hooks/use-theme-hooks';
 export { useOutsideClick } from '../hooks/use-outside-click';
-export type { SelectOption, SelectProps } from '../types/select';
 export { useActiveSectionId } from '../hooks/use-active-section-id';
 export { useModalScrollLock } from '../hooks/use-modal-scroll-lock';
+export { useSearchDialog } from '../hooks/search/use-search-dialog';
+export { useDialogHotKeys } from '../hooks/use-dialog-hotkeys';
 export { SecurityVariablesEnvSuffix } from '../constants/environments';
 export { isUndefined, isString, isNotNull, isObject } from '../utils/type-guards';
 export { ThemeDataContext, type ThemeDataTransferObject } from '../contexts/ThemeDataContext';
-export { ENTITY_RELATION_TYPES } from '../constants/catalog';

package/src/core/styles/global.ts

@@ -780,6 +780,25 @@ const apiReferenceDocs = css`
   --fab-icon-color: var(--navbar-text-color); // @presenter Color
 
   // @tokens End
+
+  /**
+    * @tokens OpenAPI Schema Catalog Link
+   */
+
+  --schema-catalog-link-margin-bottom: var(--spacing-lg);
+  --schema-catalog-link-padding: 2px;
+  --schema-catalog-link-border-radius: var(--border-radius-md);
+  --schema-catalog-link-background-color: var(--layer-color);
+  --schema-catalog-link-color: var(--color-purple-7);
+
+  --schema-catalog-link-share-icon-color: var(--color-purple-7);
+  --schema-catalog-link-share-icon-background-color: var(--color-purple-1);
+  --schema-catalog-link-share-icon-border-radius: var(--border-radius-md);
+  --schema-catalog-link-share-icon-wrapper-size: var(--spacing-xl);
+
+  --schema-catalog-link-text-color: var(--text-color-primary);
+
+  // @tokens End
 `;
 
 const badges = css`

package/src/core/types/catalog.ts

@@ -1,10 +1,9 @@
 import { InfiniteData, UseInfiniteQueryResult } from '@tanstack/react-query';
 import { CatalogEntityConfig, LayoutVariant } from '@redocly/config';
+import { ENTITY_RELATION_TYPES } from '@redocly/config';
 
 import type { CatalogFilterConfig } from '@redocly/theme/config';
 
-import { ENTITY_RELATION_TYPES } from '../constants/catalog';
-
 export type SortOption = 'title' | '-title' | 'type' | '-type';
 
 export type UseCatalogResponse = {

package/src/core/types/hooks.ts

@@ -17,6 +17,7 @@ import type {
   FilteredCatalog,
   UseCatalogSortResponse,
   UseCatalogSearchResponse,
+  CatalogViewMode,
 } from './catalog';
 import type { UserMenuData } from './user-menu';
 import type { ItemState } from './sidebar';
@@ -139,7 +140,11 @@ export type ThemeHooks = {
         nextPage?: ResolvedNavItemWithLink;
       }
     | undefined;
-  useCatalog: (config?: CatalogEntityConfig, entitiesCounterInitial?: number) => UseCatalogResponse;
+  useCatalog: (
+    config?: CatalogEntityConfig,
+    entitiesCounterInitial?: number,
+    initialViewMode?: CatalogViewMode,
+  ) => UseCatalogResponse;
   useCatalogSort: () => UseCatalogSortResponse;
   useCatalogSearch: () => UseCatalogSearchResponse;
   useFetchCatalogEntities: (

package/src/core/types/index.ts

@@ -16,3 +16,4 @@ export * from './open-api-server';
 export * from './marker';
 export * from './code-walkthrough';
 export * from './page-actions';
+export * from './open-api-info';

package/src/core/types/l10n.ts

@@ -206,6 +206,9 @@ export type TranslationKey =
   | 'page.actions.claudeTitle'
   | 'page.actions.claudeButtonText'
   | 'page.actions.claudeDescription'
+  | 'page.actions.cursorMcpButtonText'
+  | 'page.actions.cursorMcpTitle'
+  | 'page.actions.cursorMcpDescription'
   | 'openapi.download.description.title'
   | 'openapi.info.title'
   | 'openapi.info.contact.url'
@@ -280,6 +283,19 @@ export type TranslationKey =
   | 'openapi.requiredScopes'
   | 'openapi.unsupportedLanguage'
   | 'openapi.failedToGenerateCodeSample'
+  | 'openapi.schemaCatalogLink.title'
+  | 'openapi.schemaCatalogLink.copyButtonTooltip'
+  | 'openapi.schemaCatalogLink.copiedTooltip'
+  | 'openapi.mcp.title'
+  | 'openapi.mcp.endpoint'
+  | 'openapi.mcp.tools'
+  | 'openapi.mcp.protocolVersion'
+  | 'openapi.mcp.capabilities'
+  | 'openapi.mcp.experimentalCapabilities'
+  | 'openapi.mcp.inputSchema'
+  | 'openapi.mcp.inputExample'
+  | 'openapi.mcp.outputSchema'
+  | 'openapi.mcp.outputExample'
   | 'asyncapi.download.description.title'
   | 'asyncapi.info.title'
   | 'graphql.queries'

package/src/core/types/open-api-info.ts

@@ -0,0 +1,34 @@
+export type OpenAPIInfo = {
+  title: string;
+  version: string;
+  description?: string;
+  summary?: string;
+  termsOfService?: string;
+  contact?: {
+    name?: string;
+    url?: string;
+    email?: string;
+  };
+  license?: {
+    name: string;
+    url?: string;
+    identifier?: string;
+  };
+  externalDocs?: {
+    description?: string;
+    url: string;
+  };
+  'x-logo'?: {
+    url?: string;
+    backgroundColor?: string;
+    altText?: string;
+    href?: string;
+  };
+  'x-metadata'?: {
+    apiId?: string;
+    [key: string]: unknown;
+  };
+  'x-seo'?: {
+    title?: string;
+  };
+};

package/src/core/types/open-api-server.ts

@@ -1,6 +1,7 @@
 export type OpenAPIServer = {
   url: string;
   description?: string;
+  name?: string;
   variables?: Record<
     string,
     {

package/src/core/types/search.ts

@@ -15,7 +15,8 @@ export type OperationParameter = {
   enum: string[] | undefined;
 };
 
-export type SearchDocument = {
+// TODO: review SearchHit type as it might contain properties that are not in the search results
+export type SearchHit = {
   id: string;
   url: string;
   title: string | string[];
@@ -26,7 +27,6 @@ export type SearchDocument = {
   deprecated?: boolean;
   security?: string[];
   parameters?: OperationParameter[];
-  metadata?: Record<string, any>;
   version?: string;
   versionFolderId?: string;
   isDefaultVersion?: boolean;
@@ -47,7 +47,7 @@ export type ParameterHighlight = {
 };
 
 export type SearchItemData = {
-  document: SearchDocument;
+  document: SearchHit;
   highlight: Record<string, string> & { parameters?: ParameterHighlight[]; path?: string[] };
 };
 

package/src/core/utils/urls.ts

@@ -54,8 +54,9 @@ export function addLeadingSlash(url: string): string {
 }
 
 export function removeTrailingSlash(url: string): string {
-  return url.endsWith('/') ? url.substring(0, url.length - 1) : url;
+  return url.endsWith('/') && url !== '/' ? url.substring(0, url.length - 1) : url;
 }
+
 export function removeLeadingSlash(url: string): string {
   return url.startsWith('/') ? url.substring(1) : url;
 }

package/src/ext/useConfigureReplay.ts

@@ -4,7 +4,7 @@ import type {
   ConfigureRequestValues,
   ConfigureServerRequestValues,
 } from '@redocly/theme/ext/configure';
-import type { UserClaims, OpenAPIServer } from '@redocly/theme/core/types';
+import type { UserClaims, OpenAPIServer, OpenAPIInfo } from '@redocly/theme/core/types';
 
 type ContextProps = {
   operation: {
@@ -14,6 +14,7 @@ type ContextProps = {
     href: string;
     method: string;
   };
+  info: OpenAPIInfo;
   servers: OpenAPIServer[];
   userClaims: UserClaims;
 };

package/src/icons/CursorIcon/CursorIcon.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+const Icon = (props: IconProps) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M7.99956 15V8.0001L2 11.4999L7.99956 15Z" fill="#939393" />
+    <path d="M14 4.49979L7.99956 15V8.0001L14 4.49979Z" fill="#E3E3E3" />
+    <path d="M2 4.49979H14L7.99956 8.0001L2 4.49979Z" fill="white" />
+    <path d="M8.00025 1V4.49995L14 4.49979L8.00025 1Z" fill="#444444" />
+    <path
+      d="M2 4.49979L8.00025 4.49995V1L2 4.49979ZM13.9999 11.4998L10.9999 9.74987L7.99956 15L13.9999 11.4998Z"
+      fill="#939393"
+    />
+    <path
+      d="M14 4.49979L10.9999 9.74987L13.9999 11.4998L14 4.49979ZM7.99956 8.0001L2 11.4999V4.49979L7.99956 8.0001Z"
+      fill="#444444"
+    />
+  </svg>
+);
+
+export const CursorIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CursorIcon/CursorIcon',
+}))<IconProps>`
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/HierarchyIcon/HierarchyIcon.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.0625 7.3125H15.1875C15.4858 7.31216 15.7717 7.19352 15.9826 6.98262C16.1935 6.77171 16.3122 6.48576 16.3125 6.1875V2.8125C16.3122 2.51424 16.1935 2.22829 15.9826 2.01738C15.7717 1.80648 15.4858 1.68784 15.1875 1.6875H2.8125C2.51424 1.68784 2.22829 1.80648 2.01738 2.01738C1.80648 2.22829 1.68784 2.51424 1.6875 2.8125V6.1875C1.68784 6.48576 1.80648 6.77171 2.01738 6.98262C2.22829 7.19352 2.51424 7.31216 2.8125 7.3125H3.9375H5.0625ZM15.1875 2.8125H2.8125V6.1875H15.1875V2.8125Z"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15.1875 10.6875H9.5625C9.26424 10.6878 8.97829 10.8065 8.76738 11.0174C8.55648 11.2283 8.43784 11.5142 8.4375 11.8125V12.9375H5.0625V10.4546V9.5625V7.3125H3.9375V10.4546V12.9375C3.93784 13.2358 4.05648 13.5217 4.26738 13.7326C4.47829 13.9435 4.76424 14.0622 5.0625 14.0625H8.4375V15.1875C8.43784 15.4858 8.55648 15.7717 8.76738 15.9826C8.97829 16.1935 9.26424 16.3122 9.5625 16.3125H15.1875C15.4858 16.3122 15.7717 16.1935 15.9826 15.9826C16.1935 15.7717 16.3122 15.4858 16.3125 15.1875V11.8125C16.3122 11.5142 16.1935 11.2283 15.9826 11.0174C15.7717 10.8065 15.4858 10.6878 15.1875 10.6875ZM9.5625 11.8125V15.1875H15.1875V11.8125H9.5625Z"
+    />
+  </svg>
+);
+
+export const HierarchyIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/HierarchyIcon/HierarchyIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;