### Install Project Dependencies

Source: https://github.com/jetbrains/ring-ui/blob/master/CONTRIBUTING.md

Run this command after cloning the repository to install all necessary project dependencies.

```bash
npm install
```

--------------------------------

### Start Development Server

Source: https://github.com/jetbrains/ring-ui/blob/master/CONTRIBUTING.md

Starts the webpack dev server for local development. Access the application at http://localhost:9999.

```bash
npm start
```

--------------------------------

### Basic Setup

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/http.md

Demonstrates how to initialize the HTTP client with authentication and a base server URI.

```APIDOC
## Basic Setup

### Description
Initializes the HTTP client with authentication and a base server URI.

### Code
```typescript
import HTTP from '@jetbrains/ring-ui/components/http/http';
import Auth from '@jetbrains/ring-ui/components/auth/auth';

const auth = new Auth({
  serverUri: 'https://hub.jetbrains.com',
  clientId: 'my-app-id',
});

const http = new HTTP(auth, 'https://api.example.com');
```
```

--------------------------------

### Install Ring UI

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/README.md

Install Ring UI using npm. Use `@jetbrains/ring-ui-built` for the pre-built version or `@jetbrains/ring-ui` to build from source.

```bash
# Using pre-built version (recommended)
npm install @jetbrains/ring-ui-built

# Or from source
npm install @jetbrains/ring-ui
```

--------------------------------

### Build Ring UI from Source

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/README.md

Install dependencies, build the project, and run type checks.

```bash
npm install
npm run build
npm run type-check
npm test
```

--------------------------------

### GET Request with Query Parameters

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/http.md

Example of making a GET request that includes multiple query parameters for searching and filtering results.

```typescript
const response = await http.get('api/search', {
  query: {
    q: 'javascript',
    sort: 'relevance',
    limit: 20
  }
});
// GET /api/search?q=javascript&sort=relevance&limit=20
```

--------------------------------

### HTTP Client Basic Setup

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/http.md

Initializes the HTTP client with an authentication service and a base API URL.

```typescript
import HTTP from '@jetbrains/ring-ui/components/http/http';
import Auth from '@jetbrains/ring-ui/components/auth/auth';

const auth = new Auth({
  serverUri: 'https://hub.jetbrains.com',
  clientId: 'my-app-id',
});

const http = new HTTP(auth, 'https://api.example.com');
```

--------------------------------

### Basic List Example

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/list.md

A fundamental example of rendering a list with basic data. It demonstrates setting up the `data` prop and handling item selection to update the active index.

```typescript
import List from '@jetbrains/ring-ui/components/list/list';

export function BasicList() {
  const [activeIndex, setActiveIndex] = React.useState<number | null>(null);

  const data = [
    { key: 1, label: 'First Item' },
    { key: 2, label: 'Second Item' },
    { key: 3, label: 'Third Item' },
  ];

  return (
    <List
      data={data}
      activeIndex={activeIndex}
      onSelect={(item) => setActiveIndex(data.indexOf(item))}
      ariaLabel="Items"
    />
  );
}
```

--------------------------------

### Performing a GET Request

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/http.md

Demonstrates making a GET request to fetch data, optionally with query parameters for filtering or pagination.

```typescript
// GET /api/users
const users = await http.get('api/users');

// GET /api/users?page=1&limit=10
const page = await http.get('api/users', {
  query: { page: 1, limit: 10 }
});
```

--------------------------------

### Minimal Auth Service Setup

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/configuration.md

Configure the Auth service with only the mandatory `serverUri`. Other options will use their default values.

```typescript
const auth = new Auth({
  serverUri: 'https://hub.jetbrains.com',
});
```

--------------------------------

### GET Request

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/http.md

Shows how to perform GET requests, with and without query parameters.

```APIDOC
## GET Request

### Description
Performs a GET request to the specified endpoint. Supports optional query parameters.

### Method
GET

### Endpoint
`/api/users`

### Parameters
#### Query Parameters
- **page** (number) - Optional - The page number for pagination.
- **limit** (number) - Optional - The number of items to retrieve per page.

### Request Example
```typescript
// GET /api/users
const users = await http.get('api/users');

// GET /api/users?page=1&limit=10
const page = await http.get('api/users', {
  query: { page: 1, limit: 10 }
});
```
```

--------------------------------

### init()

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/auth.md

Initializes the auth service. Must be called once when the app starts. Returns a promise that resolves to the URL to restore after authentication completes.

```APIDOC
## init()

### Description
Initializes the auth service. Must be called once when the app starts.

### Method
`init(): Promise<string | void>`

### Parameters
None

### Request Example
```typescript
const restoreUrl = await auth.init();
if (restoreUrl) {
  // Restore to previous page after auth
}
```

### Response
#### Success Response
- **Promise<string | void>** - Resolves to the URL to restore after authentication completes, or void if no restore URL is available.
```

--------------------------------

### Basic Checkbox Example

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/checkbox.md

Demonstrates the fundamental usage of the Checkbox component with state management.

```typescript
import Checkbox from '@jetbrains/ring-ui/components/checkbox/checkbox';

export function BasicCheckbox() {
  const [checked, setChecked] = React.useState(false);

  return (
    <Checkbox
      checked={checked}
      onChange={(e) => setChecked(e.target.checked)}
    />
  );
}
```

--------------------------------

### Query Parameters

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/http.md

Demonstrates how to pass multiple query parameters to a GET request.

```APIDOC
## Query Parameters

### Description
Specifies how to include multiple query parameters in a GET request.

### Method
GET

### Endpoint
`/api/search`

### Parameters
#### Query Parameters
- **q** (string) - Required - The search query.
- **sort** (string) - Optional - The sorting order.
- **limit** (number) - Optional - The maximum number of results.

### Request Example
```typescript
const response = await http.get('api/search', {
  query: {
    q: 'javascript',
    sort: 'relevance',
    limit: 20
  }
});
// GET /api/search?q=javascript&sort=relevance&limit=20
```
```

--------------------------------

### Basic Text Input Example

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/input.md

A simple example of using the Input component for basic text entry. It utilizes React's useState hook to manage the input's value.

```typescript
import Input from '@jetbrains/ring-ui/components/input/input';

export function BasicInput() {
  const [value, setValue] = React.useState('');

  return (
    <Input
      placeholder="Enter text..."
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}
```

--------------------------------

### Basic Select Example

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/select.md

Demonstrates a simple single-select dropdown. Requires React state management for selected item.

```typescript
import Select from '@jetbrains/ring-ui/components/select/select';

export function BasicSelect() {
  const [selected, setSelected] = React.useState(null);

  const data = [
    { key: 1, label: 'Option 1' },
    { key: 2, label: 'Option 2' },
    { key: 3, label: 'Option 3' },
  ];

  return (
    <Select
      data={data}
      selected={selected}
      onSelect={(item) => setSelected(item)}
      label="Choose an option"
    />
  );
}
```

--------------------------------

### Initialize Auth Component

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/auth.md

Basic setup for the Auth component. Requires server URI, client ID, redirect URI, and scope. Initializes the component and redirects if a restore URL is provided.

```typescript
import Auth from '@jetbrains/ring-ui/components/auth/auth';

const auth = new Auth({
  serverUri: 'https://hub.jetbrains.com',
  clientId: 'my-app-id',
  redirectUri: 'https://myapp.com/auth-callback',
  scope: ['0-0-0-0-0'],
});

auth.init().then(restoreUrl => {
  if (restoreUrl) {
    window.location.href = restoreUrl;
  }
});
```

--------------------------------

### Initiate Login Flow

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/auth.md

Call `login()` to start the authentication process. Ensure the Auth service is initialized before calling this method.

```typescript
await auth.login();
```

--------------------------------

### Making a GET Request with Custom Headers

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/http.md

Illustrates how to include custom headers in a GET request, useful for specific API requirements.

```typescript
const response = await http.get('api/data', {
  headers: {
    'X-Custom-Header': 'value'
  }
});
```

--------------------------------

### Code Examples Coverage

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/MANIFEST.md

Statistics on the types and total number of code examples provided within the Ring UI documentation.

```APIDOC
## Code Examples
- Basic usage (13)
- With validation (8)
- With styling (9)
- With events/handlers (12)
- Integration patterns (15)
- Advanced features (23)
- Total: 80+ examples
```

--------------------------------

### Basic Alert Example

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/alert.md

Demonstrates how to render a basic message alert that can be closed by the user.

```typescript
import Alert, { AlertType } from '@jetbrains/ring-ui/components/alert/alert';

export function BasicAlert() {
  const [isClosing, setIsClosing] = React.useState(false);
  const [visible, setVisible] = React.useState(true);

  if (!visible) return null;

  return (
    <Alert
      type={AlertType.MESSAGE}
      onCloseRequest={() => setIsClosing(true)}
      onClose={() => setVisible(false)}
      isClosing={isClosing}
    >
      This is a message
    </Alert>
  );
}
```

--------------------------------

### Modal Dialog Example in React

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/api-reference.md

Demonstrates how to open and close a modal dialog using Ring UI's Dialog component. Manages dialog visibility state with React.

```typescript
import Dialog from '@jetbrains/ring-ui/components/dialog/dialog';
import Button from '@jetbrains/ring-ui/components/button/button';

export function ModalExample() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open</Button>
      <Dialog
        show={open}
        label="Dialog"
        onCloseAttempt={() => setOpen(false)}
        showCloseButton
      >
        <p>Content here</p>
      </Dialog>
    </>
  );
}
```

--------------------------------

### Error Handling

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/http.md

Provides an example of how to catch and handle HTTP errors.

```APIDOC
## Error Handling

### Description
Demonstrates how to catch and handle potential `HTTPError` exceptions during requests.

### Code
```typescript
import HTTP, { HTTPError } from '@jetbrains/ring-ui/components/http/http';

try {
  const user = await http.get('api/users/999');
} catch (error) {
  if (error instanceof HTTPError) {
    console.error(`Error ${error.status}:`, error.data);
  }
}
```
```

--------------------------------

### get<T>(url, params?)

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/http.md

Performs a GET request to the specified URL with optional parameters. Returns a promise that resolves with the parsed response body.

```APIDOC
## get<T>(url, params?)

GET request.

### Parameters
- **url** (string) - Relative path
- **params** (RequestParamsWithoutMethod) - Query, body, headers, fetch options

### Returns
- **Promise<T>** - Parsed response body

### Example
```javascript
const users = await http.get('api/users');
```
```

--------------------------------

### Gallery of Multiple Colored Icons

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/icon.md

Displays multiple icons with different colors in a flex container. This example demonstrates arranging icons with spacing.

```typescript
import Icon, { Color } from '@jetbrains/ring-ui/components/icon/icon';
import plusIcon from '@jetbrains/icons/plus';
import minusIcon from '@jetbrains/icons/minus';
import checkIcon from '@jetbrains/icons/checkmark';

export function IconGallery() {
  return (
    <div style={{ display: 'flex', gap: '16px' }}>
      <Icon glyph={plusIcon} color={Color.GREEN} />
      <Icon glyph={minusIcon} color={Color.RED} />
      <Icon glyph={checkIcon} color={Color.BLUE} />
    </div>
  );
}
```

--------------------------------

### Importing Icons from @jetbrains/icons

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/icon.md

Import common icons from the @jetbrains/icons package. Ensure the package is installed in your project.

```typescript
import checkIcon from '@jetbrains/icons/checkmark';
import closeIcon from '@jetbrains/icons/close';
import saveIcon from '@jetbrains/icons/save';
import deleteIcon from '@jetbrains/icons/delete';
import settingsIcon from '@jetbrains/icons/settings';
import searchIcon from '@jetbrains/icons/search';
```

--------------------------------

### Row Details Section Example

Source: https://github.com/jetbrains/ring-ui/blob/master/rfc/RG-2542-Reinvent-Table-Component.md

Demonstrates how to implement a collapsible row details section in a table. It uses state to manage the visibility of details and fetches them asynchronously when a row is expanded.

```tsx
const [data, setData] = useState(
  [
    {id: 1624, status: 'Success', details: undefined},
    {id: 1625, status: 'Failed', details: undefined},
  ]
)

async function toggleDetails(index: number) {
  if (data[index].details) {
    setData(data.with(index, {
      ...data[index],
      details: undefined,
    }))
  } else {
    const details: string = await fetchDetails(data[index].id)
    setData(data.with(index, {
      ...data[index],
      details,
    }))
  }
}

return (
  <Table
    data={data}
    columns={[
      {
        key: 'ID',
        renderCell: item => item.id,
      },
      {
        key: 'Result',
        renderCell: item => item.status,
      },
    ]}
    renderItem={(item, index) => {
      const {details} = item
      return (
        <>
          <StandardRowRenderer item={item} index={index} />
          {details && (
            <TableRow className='build-details'>
              <TableCell colSpan={2}>{details}</TableCell>
            </TableRow>
          )}
        </>
      )
    }}
    onRowClick={(e, item, index) => {
      toggleDetails(index)
    }}
    tbodyTrClassName={item => item.details ? 'build-expanded' : undefined}
  />
)
```

--------------------------------

### Initialize Auth Service

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/auth.md

Call `init()` once when the app starts to initialize the auth service. It may return a URL to restore the user to their previous page after authentication.

```typescript
const restoreUrl = await auth.init();
if (restoreUrl) {
  // Restore to previous page after auth
}
```

--------------------------------

### Auto-growing Textarea Example

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/input.md

Shows how to render the Input component as a textarea that automatically adjusts its height based on content. The `multiline` and `autogrow` props are essential for this behavior.

```typescript
import Input from '@jetbrains/ring-ui/components/input/input';

export function AutoGrowingTextarea() {
  const [content, setContent] = React.useState('');

  return (
    <Input
      multiline={true}
      autogrow={true}
      label="Description"
      placeholder="Enter detailed description..."
      value={content}
      onChange={(e) => setContent(e.target.value)}
      style={{ minHeight: '100px' }}
    />
  );
}
```

--------------------------------

### Webpack Configuration for Ring UI

Source: https://github.com/jetbrains/ring-ui/blob/master/README.md

Example webpack.config.js to integrate Ring UI sources into your build process. Ensure Ring UI's module rules are included.

```javascript
const ringConfig = require('@jetbrains/ring-ui/webpack.config').config;

const webpackConfig = {
  entry: 'src/entry.js', // your entry point for webpack
  output: {
    path: 'path/to/dist',
    filename: '[name].js'
  },
  module: {
    rules: [
      ...ringConfig.module.rules,
      <Your rules here>
    ]
  }
};

module.exports = webpackConfig;

```

--------------------------------

### Component Documentation

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/MANIFEST.md

Details on the documented UI components within the Ring UI library, including the number of files, lines of code, and available examples for each.

```APIDOC
## Components Documented
| Component | File | Lines | Examples |
|-----------|------|-------|----------|
| Button | button.md | 201 | 6 |
| Input | input.md | 289 | 8 |
| Checkbox | checkbox.md | 312 | 7 |
| Select | select.md | 315 | 8 |
| Dropdown | dropdown.md | 265 | 7 |
| Dialog | dialog.md | 273 | 6 |
| List | list.md | 301 | 7 |
| Icon | icon.md | 244 | 6 |
| Avatar | avatar.md | 217 | 7 |
| Alert | alert.md | 213 | 5 |
| AlertService | alert-service.md | 230 | 5 |
| Auth | auth.md | 257 | 5 |
| HTTP | http.md | 274 | 7 |
```

--------------------------------

### Basic Dropdown with Button Anchor

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/dropdown.md

A simple example of a Dropdown component anchored to a Button, displaying a list of items.

```APIDOC
## Basic Dropdown with Button

### Description
This example demonstrates a basic Dropdown anchored to a Button. When the button is clicked, a list of selectable items appears.

### Component Usage
```typescript
import Dropdown from '@jetbrains/ring-ui/components/dropdown/dropdown';
import Button from '@jetbrains/ring-ui/components/button/button';
import List from '@jetbrains/ring-ui/components/list/list';

export function BasicDropdown() {
  return (
    <Dropdown
      anchor={<Button>Menu</Button>}
    >
      <List
        data={[
          { key: 1, label: 'Item 1' },
          { key: 2, label: 'Item 2' },
          { key: 3, label: 'Item 3' },
        ]}
        onSelect={(item) => console.log('Selected:', item)}
      />
    </Dropdown>
  );
}
```
```

--------------------------------

### Documentation Elements Coverage

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/MANIFEST.md

Overview of the documentation elements covered across the Ring UI project, including API signatures, type definitions, examples, and more.

```APIDOC
## Documentation Elements
✅ API signatures for all exported functions  
✅ Interface and type definitions  
✅ Property tables with defaults  
✅ Parameter descriptions  
✅ Return type documentation  
✅ Code examples (80+ total)  
✅ Usage patterns and best practices  
✅ Error handling examples  
✅ Integration examples  
✅ Cross-references between components  
```

--------------------------------

### Render Loader Inline Component

Source: https://github.com/jetbrains/ring-ui/blob/master/README.md

Example of rendering a LoaderInline component from Ring UI. This snippet assumes a React and ReactDOM setup.

```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import LoaderInline from '@jetbrains/ring-ui/components/loader-inline/loader-inline';

ReactDOM.render(<LoaderInline/>, document.getElementById('container'));

```

--------------------------------

### GET Request

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/http.md

Performs an authenticated GET request. Suitable for retrieving data from a specified URL.

```typescript
get<T>(url: string, params?: RequestParamsWithoutMethod): Promise<T>
```

```typescript
const users = await http.get('api/users');
```

--------------------------------

### Build Production Files

Source: https://github.com/jetbrains/ring-ui/blob/master/CONTRIBUTING.md

Compiles and bundles the project for production deployment.

```bash
npm run build
```

--------------------------------

### Auth Constructor

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/auth.md

Creates a new Auth instance with the provided configuration. `serverUri` is mandatory.

```APIDOC
## Constructor

### Description
Creates a new Auth instance with configuration.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
* **config.serverUri** (string) - Required - Auth server URI (e.g., https://hub.example.com)
* **config.clientId** (string) - Optional - OAuth client ID
* **config.redirectUri** (string) - Optional - Redirect URI after auth
* **config.scope** (string[]) - Optional - OAuth scopes
* **config.optionalScopes** (string[]) - Optional - Optional OAuth scopes
* **config.redirect** (boolean) - Optional - Use redirects instead of background
* **config.embeddedLogin** (boolean) - Optional - Show login dialog in iframe
* **config.userFields** (string[]) - Optional - User profile fields to fetch
```

--------------------------------

### HTTP Client Constructor

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/http.md

Initializes a new HTTP client instance. Optionally configure authentication, a base URL, and fetch configurations.

```typescript
constructor(auth?: HTTPAuth, baseUrl?: string, fetchConfig?: RequestInit)
```

--------------------------------

### Initialize HTTP Client with Auth and Custom Headers

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/configuration.md

Instantiate the HTTP client with an authentication service, a base URL, and custom fetch configuration including headers and credentials.

```typescript
import HTTP from '@jetbrains/ring-ui/components/http/http';
import Auth from '@jetbrains/ring-ui/components/auth/auth';

const auth = new Auth({ serverUri: 'https://hub.jetbrains.com' });
const http = new HTTP(auth, 'https://api.company.com', {
  headers: {
    'X-Custom-Header': 'value',
  },
  credentials: 'include',
});
```

--------------------------------

### login()

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/auth.md

Initiates the login flow for the user.

```APIDOC
## login()

### Description
Initiates login flow.

### Method
`login(): Promise<void>`

### Parameters
None

### Request Example
```typescript
await auth.login();
```

### Response
#### Success Response (200)
- **Promise<void>** - Indicates successful initiation of the login flow.
```

--------------------------------

### HTTP Class Constructor

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/http.md

Creates a new HTTP client instance. Allows configuration of authentication, base URL, and fetch options.

```APIDOC
## HTTP Class Constructor

Creates a new HTTP client instance.

### Parameters
- **auth** (HTTPAuth) - Optional - Auth service for token management
- **baseUrl** (string) - Optional - Base URL for all requests
- **fetchConfig** (RequestInit) - Optional - Fetch configuration override
```

--------------------------------

### Import Ring UI Components, Services, and Utilities

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/api-reference.md

Demonstrates how to import various components, services, and utilities from the Ring UI library. Ensure these imports are correctly configured in your project.

```typescript
// Components
import Button from '@jetbrains/ring-ui/components/button/button';
import Input from '@jetbrains/ring-ui/components/input/input';
import Dialog from '@jetbrains/ring-ui/components/dialog/dialog';
import Select from '@jetbrains/ring-ui/components/select/select';
import List from '@jetbrains/ring-ui/components/list/list';
import Alert from '@jetbrains/ring-ui/components/alert/alert';
import Checkbox from '@jetbrains/ring-ui/components/checkbox/checkbox';
import Dropdown from '@jetbrains/ring-ui/components/dropdown/dropdown';

// Services
import alertService from '@jetbrains/ring-ui/components/alert-service/alert-service';
import Auth from '@jetbrains/ring-ui/components/auth/auth';
import HTTP from '@jetbrains/ring-ui/components/http/http';

// Utilities
import Icon, { Color } from '@jetbrains/ring-ui/components/icon/icon';
import saveIcon from '@jetbrains/icons/save';
```

--------------------------------

### Run Visual Regression Tests with Prepending Credentials

Source: https://github.com/jetbrains/ring-ui/blob/master/CONTRIBUTING.md

An alternative method to run visual regression tests by prepending BrowserStack credentials to the command.

```bash
BROWSERSTACK_NAME=**** BROWSERSTACK_KEY=**** npm run screenshots-test
```

--------------------------------

### Disabled Dropdown Example

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/dropdown.md

Demonstrates how to disable the dropdown component. When disabled, the dropdown cannot be opened by user interaction.

```typescript
import Dropdown from '@jetbrains/ring-ui/components/dropdown/dropdown';
import Button from '@jetbrains/ring-ui/components/button/button';

export function DisabledDropdown() {
  const [isDisabled, setIsDisabled] = React.useState(false);

  return (
    <>
      <button onClick={() => setIsDisabled(!isDisabled)}>
        Toggle disabled state
      </button>

      <Dropdown
        disabled={isDisabled}
        anchor={<Button>Menu</Button>}
      >
        <div style={{ padding: '16px' }}>
          Cannot open when disabled
        </div>
      </Dropdown>
    </>
  );
}
```

--------------------------------

### Multiple Select Example

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/select.md

Configures the Select component for multiple selections. Uses `onDeselect` to remove items from the selection.

```typescript
import Select from '@jetbrains/ring-ui/components/select/select';

export function MultipleSelect() {
  const [selected, setSelected] = React.useState<any[]>([]);

  const data = [
    { key: 1, label: 'React' },
    { key: 2, label: 'Vue' },
    { key: 3, label: 'Angular' },
  ];

  return (
    <Select
      data={data}
      selected={selected}
      onSelect={(item) => setSelected([...selected, item])}
      onDeselect={(item) => setSelected(selected.filter(s => s.key !== item.key))}
      multiple={{ mode: 'multi' }}
      placeholder="Select frameworks..."
    />
  );
}
```

--------------------------------

### Run Project Tests

Source: https://github.com/jetbrains/ring-ui/blob/master/CONTRIBUTING.md

Executes the test suite for the project.

```bash
npm test
```

--------------------------------

### Checkbox Group Example

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/checkbox.md

Illustrates using multiple Checkboxes within a fieldset to represent a group of related options.

```typescript
import Checkbox from '@jetbrains/ring-ui/components/checkbox/checkbox';

export function CheckboxGroup() {
  const [selected, setSelected] = React.useState({
    javascript: false,
    typescript: false,
    python: false,
  });

  const handleChange = (key: keyof typeof selected) => {
    setSelected(prev => ({
      ...prev,
      [key]: !prev[key],
    }));
  };

  return (
    <fieldset>
      <legend>Languages</legend>
      <Checkbox
        checked={selected.javascript}
        onChange={() => handleChange('javascript')}
        label="JavaScript"
      />
      <Checkbox
        checked={selected.typescript}
        onChange={() => handleChange('typescript')}
        label="TypeScript"
      />
      <Checkbox
        checked={selected.python}
        onChange={() => handleChange('python')}
        label="Python"
      />
    </fieldset>
  );
}
```

--------------------------------

### Basic Ring UI Usage in React

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/README.md

Demonstrates basic usage of Ring UI components like Input and Button within a React application. Ensure styles are imported before using components.

```typescript
// Import styles
import '@jetbrains/ring-ui-built/components/style.css';

// Import components
import Button from '@jetbrains/ring-ui-built/components/button/button';
import Input from '@jetbrains/ring-ui-built/components/input/input';
import alertService from '@jetbrains/ring-ui-built/components/alert-service/alert-service';

export function App() {
  const [name, setName] = React.useState('');

  const handleClick = () => {
    if (name) {
      alertService.successMessage(`Hello, ${name}!`);
    } else {
      alertService.error('Please enter a name');
    }
  };

  return (
    <>
      <Input
        label="Your name"
        placeholder="Enter name..."
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <Button primary onClick={handleClick}>
        Greet
      </Button>
    </>
  );
}
```

--------------------------------

### Full Auth Service Configuration

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/configuration.md

Demonstrates a comprehensive configuration of the Auth service, including all available options for server URI, client ID, scopes, credentials, and refresh settings.

```typescript
const auth = new Auth({
  serverUri: 'https://hub.company.com',
  clientId: 'app-id',
  redirectUri: 'https://app.example.com/',
  scope: ['0-0-0-0-0'],
  optionalScopes: ['youtrack/read'],
  requestCredentials: 'omit',
  redirect: false,
  embeddedLogin: true,
  cleanHash: true,
  cacheCurrentUser: true,
  reloadOnUserChange: false,
  userFields: ['guest', 'id', 'name', 'login', 'profile/avatar/url', 'profile/email/email'],
  backgroundRefreshTimeout: 10000,
  enableBackendStatusCheck: true,
  backendCheckTimeout: 10000,
  fetchCredentials: 'include',
});
```

--------------------------------

### Enable Debug Output and Set Theme

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/README.md

Set environment variables to control debug output and theme for Ring UI.

```bash
# Enable debug output
DEBUG=ring-ui:*

# Set theme
THEME=light
```

--------------------------------

### Basic Notifications

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/alert-service.md

Demonstrates how to use the alert service to display loading, success, and error messages.

```APIDOC
## Basic Notifications

This example shows how to display a loading indicator, a success message, and an error message using the `alertService` instance.

### Methods Used
- `alertService.loadingMessage(message: string)`: Displays a loading message.
- `alertService.successMessage(message: string)`: Displays a success message.
- `alertService.error(message: string)`: Displays an error message.

### Request Example
```typescript
import alertService from '@jetbrains/ring-ui/components/alert-service/alert-service';

export function NotificationExample() {
  const handleSave = async () => {
    try {
      alertService.loadingMessage('Saving...');
      await saveData();
      alertService.successMessage('Saved successfully!');
    } catch (error) {
      alertService.error('Failed to save');
    }
  };

  return <button onClick={handleSave}>Save</button>;
}
```
```

--------------------------------

### Authenticated HTTP Requests

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/auth.md

Initializes the Auth component and then uses the `auth.http` client for making authenticated GET requests to the specified API endpoint.

```typescript
const auth = new Auth({
  serverUri: 'https://hub.jetbrains.com',
  clientId: 'my-app-id',
});

await auth.init();

// Use auth.http for authenticated requests
const response = await auth.http.get('api/issues');
```

--------------------------------

### Instantiate Auth Service

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/configuration.md

Instantiate the Auth service with essential configuration parameters like server URI, client ID, and redirect URI. Ensure all required fields are provided for proper authentication flow.

```typescript
import Auth from '@jetbrains/ring-ui/components/auth/auth';

const auth = new Auth({
  serverUri: 'https://hub.jetbrains.com',
  clientId: 'my-app-id',
  redirectUri: 'https://myapp.com/',
  scope: ['0-0-0-0-0'],
  embeddedLogin: true,
});
```

--------------------------------

### Handling HTTP Errors

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/http.md

Provides an example of how to catch and handle specific HTTP errors, such as unauthorized access, by checking the error type and status.

```typescript
import HTTP, { HTTPError } from '@jetbrains/ring-ui/components/http/http';

try {
  const user = await http.get('api/users/999');
} catch (error) {
  if (error instanceof HTTPError) {
    console.error(`Error ${error.status}:`, error.data);
  }
}
```

--------------------------------

### Controlled Alert with Timeout

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/alert.md

An example of a message alert that automatically closes after a specified timeout. It uses state to manage visibility and closing animations.

```typescript
import Alert, { AlertType } from '@jetbrains/ring-ui/components/alert/alert';

export function ControlledAlert() {
  const [visible, setVisible] = React.useState(true);
  const [isClosing, setIsClosing] = React.useState(false);

  const handleClose = () => {
    setIsClosing(true);
  };

  const handleClosed = () => {
    setVisible(false);
  };

  if (!visible) return null;

  return (
    <Alert
      type={AlertType.MESSAGE}
      timeout={5000}
      isClosing={isClosing}
      onCloseRequest={handleClose}
      onClose={handleClosed}
      showWithAnimation={true}
    >
      This alert will auto-close in 5 seconds
    </Alert>
  );
}
```

--------------------------------

### Get User Information by Token

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/auth.md

Use `getUser()` with an access token to retrieve user details. This method is distinct from `requestUser()` as it requires an explicit token.

```typescript
const user = await auth.getUser(accessToken);
```

--------------------------------

### Programmatic Control of Dropdown

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/dropdown.md

Demonstrates how to control the dropdown's visibility programmatically using a `ref` and the `toggle` method.

```APIDOC
## Programmatic Control

### Description
This example illustrates how to manage the dropdown's state (open/closed) programmatically. It uses `React.useRef` to get a reference to the Dropdown component and then calls its `toggle` method to show or hide the dropdown.

### Component Usage
```typescript
import Dropdown from '@jetbrains/ring-ui/components/dropdown/dropdown';

export function ControlledDropdown() {
  const dropdownRef = React.useRef<Dropdown>(null);

  return (
    <>
      <button onClick={() => dropdownRef.current?.toggle(true)}>
        Open
      </button>
      <button onClick={() => dropdownRef.current?.toggle(false)}>
        Close
      </button>

      <Dropdown
        ref={dropdownRef}
        anchor={<button>Toggle</button>}
      >
        <div style={{ padding: '16px' }}>
          Controlled dropdown
        </div>
      </Dropdown>
    </>
  );
}
```
```

--------------------------------

### Utilities - UI Utilities

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/api-reference.md

Provides documentation for general UI utilities in Ring UI.

```APIDOC
## Popup

### Description
Popup positioning.

## Shortcuts

### Description
Keyboard shortcut handler.

## Theme

### Description
Theme system.

## Icon

### Description
Icon component and constants.
```

--------------------------------

### Import Ring UI Components and Styles

Source: https://github.com/jetbrains/ring-ui/blob/master/README.md

Import necessary Ring UI styles and components as ES modules for quick integration. Ensure styles are imported once.

```javascript
import '@jetbrains/ring-ui-built/components/style.css';

import alertService from '@jetbrains/ring-ui-built/components/alert-service/alert-service';
import Button from '@jetbrains/ring-ui-built/components/button/button';

... 

export const Demo = () => {
  return (
    <Button onClick={() => alertService.successMessage('Hello world')}>
      Click me
    </Button>
  );
};

```

--------------------------------

### Input with Clear Button Functionality

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/input.md

An example of an Input component configured with a clear button. The `onClear` prop is used to reset the input's value when the button is clicked.

```typescript
import Input from '@jetbrains/ring-ui/components/input/input';

export function ClearableInput() {
  const [value, setValue] = React.useState('');

  return (
    <Input
      value={value}
      onChange={(e) => setValue(e.target.value)}
      onClear={() => setValue('')}
      placeholder="Type something..."
    />
  );
}
```

--------------------------------

### Icon Component Usage

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/icon.md

This snippet demonstrates how to use the Icon component with different glyphs and colors. It also shows how to suppress size-related warnings.

```APIDOC
## Icon Component Usage

### Description
This section details the properties available for the Icon component, including glyph, color, and deprecated size-related properties.

### Properties

- **glyph** (string | IconType | null): SVG icon path or icon component. Defaults to null.
- **color** (Color): Icon color. Defaults to `Color.DEFAULT`.
- **size** (Size | number | null | undefined): **Deprecated** - use intrinsic SVG sizes.
- **width** (number | undefined): **Deprecated** - use intrinsic SVG sizes.
- **height** (number | undefined): **Deprecated** - use intrinsic SVG sizes.
- **loading** (boolean | null | undefined): **Deprecated** - not used.
- **suppressSizeWarning** (boolean | null | undefined): Suppress deprecation warnings for size props. Defaults to false.

### Example Usage

```jsx
import Icon from '@jetbrains/ring-ui/src/icon';
import { MyCustomIcon } from './icons'; // Assuming MyCustomIcon is an imported SVG component
import { Color } from '@jetbrains/ring-ui/src/icon';

// Using a string glyph (e.g., from @jetbrains/icons)
<Icon glyph="ring-icon-star" color={Color.BLUE} />

// Using a custom SVG component
<Icon glyph={MyCustomIcon} color={Color.RED} />

// Suppressing size warnings
<Icon glyph="ring-icon-info" suppressSizeWarning={true} />
```

### Color Enum

```typescript
enum Color {
  DEFAULT = 'default',
  RED = 'red',
  GREEN = 'green',
  WHITE = 'white',
  GRAY = 'gray',
  BLUE = 'blue',
  ORANGE = 'orange',
  PURPLE = 'purple',
  BLACK = 'black',
  // ... additional colors
}
```

### IconType Definition

```typescript
export type IconType = ComponentType<SVGAttributes<SVGSVGElement>>;
```

```

--------------------------------

### Build Environment Variables

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/configuration.md

Configure environment variables for the build process, such as setting the Browserlist environment or specifying the theme for stories.

```bash
# Browserlist environment for transpilation
BROWSERSLIST_ENV=dist

# Set theme for stories
DARK=true
```

--------------------------------

### Roving Tabindex Implementation Example

Source: https://github.com/jetbrains/ring-ui/blob/master/rfc/RG-2542-Reinvent-Table-Component.md

Demonstrates the roving tabindex technique for managing focus in a table. Initially, rows are unfocusable, and focus moves between controls via Tab. Arrow keys shift focus between rows, making the target row focusable and others unfocusable. Tab focus returns to native control navigation.

```javascript
Initially, all rows are not focusable (`tabindex="-1"`), and the user navigates between controls by Tab.
When the user presses up/down arrow keys, the prev/next row becomes focusable (`tabindex="0"`), and focus is moved to it programmatically. The previously focused row, if any, becomes unfocusable (`tabindex="-1"`).
When a user moves focus from a row to a control (link, input) by pressing Tab, that row becomes unfocusable (`tabindex="-1"`), which also means that all rows are now unfocusable, and Tab navigation continues between controls.
```

--------------------------------

### Component Dependencies Graph

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/MANIFEST.md

Illustrates the direct dependencies between various Ring UI components. Useful for understanding how components rely on each other.

```text
Dialog → Island, Button, Shortcuts, TabTrap
Select → List, Input, Dropdown, Popup
Dropdown → Popup, Button
List → Shortcuts, Loader, Icon, Button
Avatar → Icon (fallback)
Alert → Icon, Button, Loader
AlertService → Alert, ReactDOM
Auth → HTTP, AuthStorage, AuthRequestBuilder
HTTP → Auth, Fetch API
```

--------------------------------

### List with Icons

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/list.md

Demonstrates how to include icons with list items. Ensure icons are imported correctly and passed via the `icon` property in the data.

```typescript
import List from '@jetbrains/ring-ui/components/list/list';
import settingsIcon from '@jetbrains/icons/settings';
import userIcon from '@jetbrains/icons/user';

export function IconList() {
  const data = [
    { key: 1, label: 'Settings', icon: settingsIcon },
    { key: 2, label: 'Profile', icon: userIcon },
  ];

  return (
    <List
      data={data}
      onSelect={(item) => console.log('Selected:', item)}
      ariaLabel="Menu"
    />
  );
}
```

--------------------------------

### Utilities - Storage & Caching

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/api-reference.md

Provides documentation for storage and caching utilities in Ring UI.

```APIDOC
## Storage

### Description
Local storage wrapper.
```

--------------------------------

### Services and Utilities Documentation

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/MANIFEST.md

Information on the available services and utility modules in Ring UI, including their respective files and line counts.

```APIDOC
## Services & Utilities (3)
| Service | File | Lines |
|-----------|------|-------|
| Authentication | auth.md | 257 |
| HTTP Client | http.md | 274 |
| Notifications | alert-service.md | 230 |
```

--------------------------------

### Reference Documentation

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/MANIFEST.md

Details on the reference documentation available for Ring UI, covering types and configuration options.

```APIDOC
## Reference Docs (2)
| Document | File | Lines | Items |
|----------|------|-------|-------|
| Types | types.md | 346 | 20+ types |
| Configuration | configuration.md | 313 | All options |
```

--------------------------------

### head(url, params?)

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/http.md

Performs a HEAD request to the specified URL with optional parameters. Returns a promise that resolves with the Response object.

```APIDOC
## head(url, params?)

HEAD request (returns Response object).

### Parameters
- **url** (string) - Relative path
- **params** (RequestParamsWithoutMethod) - Query, body, headers, fetch options

### Returns
- **Promise<Response>** - The Response object
```

--------------------------------

### Type Dependencies

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/MANIFEST.md

Shows the relationships between different data types and the components or services they are associated with. Helps in understanding data flow and type usage.

```text
AlertType → Alert, AlertService
AuthUser → Auth, AuthDialog, Header
ListDataItem → List, Select, Dropdown
ControlsHeight → Button, Input, Checkbox, Select
Theme → Alert, Dialog, Island
```

--------------------------------

### Components - Layout & Structure

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/api-reference.md

Provides documentation for layout and structural components in Ring UI.

```APIDOC
## Dialog

### Description
Modal or modeless dialog.

## Dropdown

### Description
Dropdown trigger with customizable anchor.

## Popup

### Description
Low-level popup positioning primitive.

## Island

### Description
Elevated content container.

## Panel

### Description
Side panel layout.

## Grid

### Description
Layout grid system.

## Collapse

### Description
Collapsible content sections.

## ContentLayout

### Description
Main content area layout.

## Header

### Description
Page header component.

## Footer

### Description
Page footer component.
```

--------------------------------

### Basic Button Usage

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/button.md

Renders a standard clickable button. Import the Button component and provide an onClick handler.

```typescript
import Button from '@jetbrains/ring-ui/components/button/button';

export function BasicExample() {
  return (
    <Button onClick={() => console.log('clicked')}> 
      Click me
    </Button>
  );
}
```

--------------------------------

### Utilities - HTTP & Network

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/api-reference.md

Provides documentation for HTTP and network utilities in Ring UI.

```APIDOC
## HTTP

### Description
REST API client with auth integration.

## HTTPError

### Description
HTTP error class.
```

--------------------------------

### Input with Before and After Content

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/input.md

Demonstrates using the `beforeInput` and `afterInput` props to prepend or append content to the Input field. This is useful for currency symbols or units.

```typescript
import Input from '@jetbrains/ring-ui/components/input/input';

export function InputWithAddons() {
  return (
    <Input
      type="number"
      label="Price"
      placeholder="0.00"
      beforeInput="$"
      afterInput=".00"
    />
  );
}
```

--------------------------------

### Utilities - Internationalization

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/api-reference.md

Provides documentation for internationalization utilities in Ring UI.

```APIDOC
## i18n

### Description
Internationalization support.
```

--------------------------------

### Basic Notification Usage

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/alert-service.md

Demonstrates how to use the alertService to display loading, success, and error messages during an asynchronous operation. Ensure the alertService is imported.

```typescript
import alertService from '@jetbrains/ring-ui/components/alert-service/alert-service';

export function NotificationExample() {
  const handleSave = async () => {
    try {
      alertService.loadingMessage('Saving...');
      await saveData();
      alertService.successMessage('Saved successfully!');
    } catch (error) {
      alertService.error('Failed to save');
    }
  };

  return <button onClick={handleSave}>Save</button>;
}
```

--------------------------------

### Basic Icon Usage

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/icon.md

Renders a basic icon using the provided glyph. Ensure the icon glyph is imported correctly.

```typescript
import Icon, { Color } from '@jetbrains/ring-ui/components/icon/icon';
import saveIcon from '@jetbrains/icons/save';

export function BasicIcon() {
  return <Icon glyph={saveIcon} />;
}
```

--------------------------------

### Managing Alert Lifecycle

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/alert-service.md

Illustrates how to manage the lifecycle of an alert, including displaying a loading message and removing it after a delay.

```APIDOC
## Managing Alert Lifecycle

This example demonstrates how to control the visibility of an alert, specifically a loading message, and remove it programmatically after a set duration.

### Methods Used
- `alertService.loadingMessage(message: string)`: Displays a loading message and returns a unique key for the alert.
- `alertService.remove(key: string | number)`: Removes the alert associated with the provided key, triggering its closing animation.

### Request Example
```typescript
import alertService from '@jetbrains/ring-ui/components/alert-service/alert-service';

export function ManagedAlert() {
  const [isProcessing, setIsProcessing] = React.useState(false);

  const startProcess = () => {
    setIsProcessing(true);
    const key = alertService.loadingMessage('Processing...');
    
    setTimeout(() => {
      alertService.remove(key); // Triggers closing animation
      setIsProcessing(false);
    }, 3000);
  };

  return (
    <button onClick={startProcess} disabled={isProcessing}>
      {isProcessing ? 'Processing' : 'Start'}
    </button>
  );
}
```
```

--------------------------------

### Authentication with Ring UI Auth

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/api-reference.md

Initialize and manage authentication using the Ring UI Auth module. Includes setting server URI, client ID, and listening for user changes.

```typescript
import Auth from '@jetbrains/ring-ui/components/auth/auth';

const auth = new Auth({
  serverUri: 'https://hub.jetbrains.com',
  clientId: 'my-app',
});

await auth.init();
auth.addListener(Auth.USER_CHANGED_EVENT, (user) => {
  console.log('User:', user);
});
```

--------------------------------

### Components - Authentication

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/api-reference.md

Provides documentation for authentication components and services in Ring UI.

```APIDOC
## Auth

### Description
OAuth2 authentication service.

## AuthDialog

### Description
Login dialog component.

## AuthDialogService

### Description
Global auth dialog service.
```

--------------------------------

### Auth Service with Custom Scope and Redirect

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/configuration.md

Set up the Auth service with a custom server URI, client ID, redirect URI, and specific OAuth2 scopes. This is useful for integrating with different company services.

```typescript
const auth = new Auth({
  serverUri: 'https://hub.company.com',
  clientId: 'my-app-12345',
  redirectUri: 'https://app.company.com/auth/callback',
  scope: ['0-0-0-0-0', 'hub/read'],
  optionalScopes: ['youtrack/admin'],
});
```

--------------------------------

### Run Visual Regression Tests

Source: https://github.com/jetbrains/ring-ui/blob/master/CONTRIBUTING.md

Executes visual regression tests using Testplane and BrowserStack. Ensure the development server is running.

```bash
npm run screenshots-test
```

--------------------------------

### Input Component Sizing Variations

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/input.md

Illustrates the different size options available for the Input component: S, M, L, and FULL. Each size affects the input's width.

```typescript
import Input from '@jetbrains/ring-ui/components/input/input';

export function InputSizes() {
  return (
    <>
      <Input size="S" placeholder="Small" />
      <Input size="M" placeholder="Medium" />
      <Input size="L" placeholder="Large" />
      <Input size="FULL" placeholder="Full width" />
    </>
  );
}
```

--------------------------------

### Recommended Icon Sizing

Source: https://github.com/jetbrains/ring-ui/blob/master/_autodocs/icon.md

Use icons with their appropriate intrinsic sizes for better visual quality. Avoid scaling icons using the `size` prop, as this is deprecated and may cause warnings.

```typescript
// Use icon already sized at 24px
import checkIcon24 from '@jetbrains/icons/checkmark-24';
<Icon glyph={checkIcon24} />
```

```typescript
// Scaling icon - may produce warnings
import checkIcon from '@jetbrains/icons/checkmark';
<Icon glyph={checkIcon} size={24} />
```

--------------------------------

### Run Accessibility Audit

Source: https://github.com/jetbrains/ring-ui/blob/master/CONTRIBUTING.md

Performs an accessibility audit on the project components. Ensure the development server is running.

```bash
npm run a11y-audit
```