bug: Import ordering configuration doesn't follow outermost-inward pattern

## Description
The current base import-x/order configuration in `@metamask/eslint-config` isn't correctly implementing the intended "outermost inward" pattern for imports. Instead, it's grouping 'parent', 'sibling', and 'index' imports together and sorting them alphabetically, which results in unexpected ordering where local imports can appear before parent/sibling imports.

Screencast shows the current order using `yarn lint:fix` vs the proposed ordering

https://github.com/user-attachments/assets/e1c606f7-8e97-4d6a-9454-706721c3458f

## Current Behavior
With the current configuration from @metamask/eslint-config:
```javascript
'import-x/order': [
'error',
{
'newlines-between': 'always',
groups: [
['builtin', 'external'],
['internal', 'parent', 'sibling', 'index'],
],
alphabetize: {
order: 'asc',
caseInsensitive: true,
},
},
],
```

This produces imports like:
```typescript
import type { Meta, StoryObj } from '@storybook/react';
import React from 'react';

import { AvatarBase } from './AvatarBase'; // Local import appears first
import { SAMPLE_AVATARBASE_URIS } from './AvatarBase.dev';
import README from './README.mdx';
import { AvatarBaseSize, AvatarBaseShape } from '../../types'; // Parent import appears later
import { Icon, IconName, IconSize } from '../Icon'; // Sibling import appears later
import { TextColor } from '../Text';
```

## Expected Behavior
Imports should follow an "outermost inward" pattern (from most distant to closest paths):
```typescript
import type { Meta, StoryObj } from '@storybook/react';
import React from 'react';

import { AvatarBaseSize, AvatarBaseShape } from '../../types'; // Parent imports first
import { Icon, IconName, IconSize } from '../Icon'; // Then sibling imports
import { TextColor } from '../Text';

import { AvatarBase } from './AvatarBase'; // Then local imports
import { SAMPLE_AVATARBASE_URIS } from './AvatarBase.dev';
import README from './README.mdx';
```

## Proposed Solution
Update the import-x/order configuration to explicitly separate parent, sibling, and local imports into distinct groups:

```javascript
'import-x/order': [
'error',
{
'newlines-between': 'always',
groups: [
// External libraries first
['builtin', 'external'],
// Then parent imports (../../)
['parent'],
// Then sibling imports (../)
['sibling'],
// Then local imports (./) including index
['index', 'internal'],
],
alphabetize: {
order: 'asc',
caseInsensitive: true,
},
},
],
```

## Impact
This change would improve code readability by organizing imports in a more logical hierarchical structure, creating a consistent pattern that better reflects the code's dependency structure from external to internal. The current configuration can lead to confusing import ordering where local imports appear before parent imports, which doesn't match the expected mental model of dependency organization.

Search the repository for the base `import-x/order` configuration in `@metamask/eslint-config`, then compare it with the proposed grouping. Run `yarn lint:fix` on an affected example to verify that external, parent, sibling, and local imports are separated in the expected outermost-inward order.

Written by the indexing model from the issue text.