[code-infra] Use @mui/docs/HighlightedCodeWithTabs in markdown

docs/pages/experiments/docs/codeblock.md

@@ -27,7 +27,7 @@ pnpm add @mui/material @emotion/react @emotion/styled
 
 ### Component version
 
-{{"component": "modules/components/HighlightedCodeWithTabs", "tabs": [{"tab":"JS", "code":"<div>Hello</div>", "language": "jsx"}, {"tab": "TS", "code": "type A = {}"}]}}
+{{"component": "@mui/docs/HighlightedCodeWithTabs", "tabs": [{"tab":"JS", "code":"<div>Hello</div>", "language": "jsx"}, {"tab": "TS", "code": "type A = {}"}]}}
 
 ## With header path
 

docs/src/modules/components/RichMarkdownElement.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslate, useUserLanguage } from '@mui/docs/i18n';
-import { HighlightedCodeWithTabs } from '@mui/docs/HighlightedCode';
+import { HighlightedCodeWithTabs } from '@mui/docs/HighlightedCodeWithTabs';
 import { MarkdownElement } from '@mui/docs/MarkdownElement';
 import Demo from 'docs/src/modules/components/Demo';
 

packages/mui-docs/src/HighlightedCode/index.tsx

@@ -1,2 +1 @@
 export * from './HighlightedCode';
-export * from './HighlightedCodeWithTabs';

packages/mui-docs/src/HighlightedCode/HighlightedCodeWithTabs.tsx → packages/mui-docs/src/HighlightedCodeWithTabs/HighlightedCodeWithTabs.tsx

@@ -5,7 +5,7 @@ import { TabsList as TabsListBase } from '@mui/base/TabsList';
 import { TabPanel as TabPanelBase } from '@mui/base/TabPanel';
 import { Tab as TabBase } from '@mui/base/Tab';
 import useLocalStorageState from '@mui/utils/useLocalStorageState';
-import { HighlightedCode } from './HighlightedCode';
+import { HighlightedCode } from '../HighlightedCode';
 
 export const CodeTabList = styled(TabsListBase)<{
   ownerState: { mounted: boolean; contained?: boolean };

packages/mui-docs/src/HighlightedCodeWithTabs/index.ts

@@ -0,0 +1,2 @@
+export * from './HighlightedCodeWithTabs';
+export { HighlightedCodeWithTabs as default } from './HighlightedCodeWithTabs';