===============
LIBRARY RULES
===============
From library maintainers:
- Import components from @skbkontur/react-ui, not from deep paths
- Always use ThemeContext from @skbkontur/react-ui for theming
- Library supports React 16.8+ with hooks
- Button: use 'use' prop for styling (primary, pay, danger), not 'variant'
- DatePicker: value format is "DD.MM.YYYY" string, not Date object
- MaskedInput: use 'mask' prop with format like "99.99.9999" where 9 = digit
- Select: items prop expects array of [value, label] tuples
- For form validation use ValidationContainer + ValidationWrapper components
- Use Gapped component for spacing between elements, not manual margins
- Modal: always wrap content in Modal.Header, Modal.Body, Modal.Footer
- Toast: call Toast.push() as static method, don't render as component
- Do not use CSS modules to override component styles, use theme variables
- Do not pass children to Select, use items prop instead

### Getting Started

Source: https://tech.skbkontur.ru/kontur-ui?path=%2Fdocs%2Freact-ui_information-theme--docs#созданиередактирование-темы

Instructions on how to install and start using the React UI library.

```APIDOC
## Getting Started

### Description
Guides users through the process of installing and setting up the React UI library in their projects.

### Method
N/A (Documentation page)

### Endpoint
N/A

### Parameters
N/A

### Request Example
N/A

### Response
N/A

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Getting Started API

Source: https://tech.skbkontur.ru/kontur-ui?path=%2Fdocs%2Ftable_responsive--docs#адаптивный-пример-таблицы

Guide for getting started with the React UI library, including installation and basic usage.

```APIDOC
## Getting Started API

### Description
Guide for getting started with the React UI library, including installation and basic usage.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
This section provides instructions for setting up and using the React UI library.

#### Response Example
None provided for getting started guide.
```

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

### Install SideMenu Component

Source: https://tech.skbkontur.ru/kontur-ui?path=%2Fdocs%2Fside-menu_sidemenu--docs#кастомизация-темы-sidemenu

Use this command to install the SideMenu component. Ensure you have npm or yarn configured.

```bash
npm i @skbkontur/side-menu
```

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

### Component API Example (Generic)

Source: https://tech.skbkontur.ru/kontur-ui?path=%2Fdocs%2Freact-ui_changelog--docs#0260httpsgithubcomskbkonturretail-uicompareretail-ui0250retail-ui0260-2018-10-23

Example structure for component API documentation, including properties and their descriptions.

```APIDOC
## Component API Reference (Example)

### Parameters

Name| Description| Default| Control
---|---|---|---
propertyName*| This is a short descriptionsummary| defaultValue| Set string
propertyName*| This is a short descriptionsummary| defaultValue| Set string
propertyName*| This is a short descriptionsummary| defaultValue| Set string
```

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

### Theme Options

Source: https://tech.skbkontur.ru/kontur-ui?path=%2Fdocs%2Freact-ui_information-datatids--docs#information-datatids--docs

These are examples of theme and locale options available within the React UI library.

```text
BrandRed
AccentGray
ThemeLight
Russian
Feature flags
```

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

### React UI Migration

Source: https://tech.skbkontur.ru/kontur-ui?path=%2Fdocs%2Freact-ui_information-theme--docs#созданиередактирование-темы

Guide for migrating from previous versions of React UI.

```APIDOC
## React UI Migration

### Description
Instructions and considerations for migrating your project to newer versions of the React UI library.

### Method
N/A (Documentation page)

### Endpoint
N/A

### Parameters
N/A

### Request Example
N/A

### Response
N/A

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Theme Color Example

Source: https://tech.skbkontur.ru/kontur-ui?path=%2Fdocs%2Freact-ui_information-strictmode--docs#без-strictmode

Demonstrates the use of predefined theme colors. These are typically imported or accessed from a theme provider.

```javascript
BrandRed
AccentGray
ThemeLight
```

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

### Migration API

Source: https://tech.skbkontur.ru/kontur-ui?path=%2Fdocs%2Ftable_responsive--docs#адаптивный-пример-таблицы

Guides and instructions for migrating to newer versions of the React UI library.

```APIDOC
## Migration API

### Description
Guides and instructions for migrating to newer versions of the React UI library.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
This section provides steps and considerations for migrating between library versions.

#### Response Example
None provided for migration guide.
```

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

### Storybook Troubleshooting Guide

Source: https://tech.skbkontur.ru/kontur-ui?path=%2Fdocs%2Freact-ui_changelog--docs#2160httpsgithubcomskbkonturretail-uicompareskbkonturreact-ui2150skbkonturreact-ui2160-2021-04-12

Provides common troubleshooting steps for Storybook rendering issues, including checking configuration, providers, and environment variables.

```markdown
# No Preview
Sorry, but you either have no stories or none are selected somehow.
  * Please check the Storybook config.
  * Try reloading the page.


If the problem persists, check the browser console, or the terminal you've run Storybook from.
```

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

### Storybook Rendering Issues

Source: https://tech.skbkontur.ru/kontur-ui/packages/react-ui/5.6.12/index.html?path=%2Fdocs%2Finformation-theme--docs#вложенные-темы

Troubleshooting guide for common Storybook rendering problems with Kontur UI components.

```APIDOC
## Storybook Rendering Issues

### Description
This section provides guidance on resolving common rendering issues within Storybook for Kontur UI components.

### Common Causes and Solutions:

1.  **Missing Context/Providers**: Use decorators to supply necessary contexts or providers.
    *   Refer to the [Decorators documentation](https://storybook.js.org/docs/react/writing-stories/decorators) for detailed instructions.

2.  **Misconfigured Webpack or Vite**: Ensure Storybook correctly picks up all necessary settings for loaders, plugins, and other parameters.
    *   Consult the [Webpack](https://storybook.js.org/docs/react/configure/webpack) or [Vite](https://storybook.js.org/docs/react/configure/vite) configuration guides.

3.  **Missing Environment Variables**: Set up any required custom environment variables.
    *   Follow the instructions in the [Environment Variables documentation](https://storybook.js.org/docs/react/configure/environment-variables).
```

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

### Storybook Troubleshooting Guide

Source: https://tech.skbkontur.ru/kontur-ui?path=%2Fdocs%2Freact-ui_information-theme--docs#theme

This text provides common reasons for Storybook rendering issues, such as missing context providers, misconfigured build tools (Webpack/Vite), or missing environment variables. It directs users to relevant documentation for solutions.

```text
- Please check your stories field of your main.js config.
- Also check the browser console and terminal for error messages.
```

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

### Responsive

Source: https://tech.skbkontur.ru/kontur-ui?path=%2Fdocs%2Freact-ui_versioning-changelog--docs

Guidelines on making React UI components responsive.

```APIDOC
## Responsive Design

### Description
Information on how to implement responsive designs using React UI components.

### Method
N/A

### Endpoint
N/A

### Parameters
N/A

### Request Example
N/A

### Response
N/A
```

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

### Locale Example

Source: https://tech.skbkontur.ru/kontur-ui?path=%2Fdocs%2Freact-ui_information-strictmode--docs#без-strictmode

Represents the concept of internationalization or localization within the UI.

```text
Russian
```

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

### Storybook Rendering Issues

Source: https://tech.skbkontur.ru/kontur-ui/packages/react-ui/5.6.12/index.html?path=%2Fdocs%2Finformation-datatids--docs#information-datatids--docs

Troubleshooting guide for common Storybook rendering problems.

```APIDOC
## Storybook Rendering Issues

### Description
This section provides guidance on resolving common rendering issues in Storybook.

### Common Causes and Solutions
1. **Missing Context/Providers**: Use decorators to supply necessary contexts or providers.
   - Refer to the [Decorators documentation](https://storybook.js.org/docs/react/writing-stories/decorators).
2. **Misconfigured Webpack or Vite**: Ensure Storybook correctly picks up Webpack/Vite settings.
   - Consult guides for [configuring Webpack](https://storybook.js.org/docs/react/configure/webpack) or [Vite](https://storybook.js.org/docs/react/configure/vite).
3. **Missing Environment Variables**: Set up required environment variables.
   - See the [Environment Variables documentation](https://storybook.js.org/docs/react/configure/environment-variables).
```

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

### Overview

Source: https://tech.skbkontur.ru/kontur-ui?path=%2Fdocs%2Freact-ui_information-theme--docs#созданиередактирование-темы

General overview of the React UI library.

```APIDOC
## Overview

### Description
A high-level introduction to the React UI component library, its purpose, and key features.

### Method
N/A (Documentation page)

### Endpoint
N/A

### Parameters
N/A

### Request Example
N/A

### Response
N/A

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Error Handling and Configuration

Source: https://tech.skbkontur.ru/kontur-ui?path=%2Fdocs%2Freact-ui_changelog--docs#4210httpsgithubcomskbkonturretail-uicompareskbkonturreact-ui4210-next3skbkonturreact-ui4210-2024-02-21

Guidance on troubleshooting rendering issues and common configuration problems in Storybook.

```APIDOC
# Component Rendering Issues

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

1.  **Missing Context/Providers**: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the [Decorators documentation](link-to-decorators-docs).
2.  **Misconfigured Webpack or Vite**: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
3.  **Missing Environment Variables**: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the [Environment Variables documentation](link-to-env-vars-docs).

## Storybook Error Messages

```
Couldn't find story matching 'changelog--docs'.
```

- Are you sure a story with that id exists?
- Please check your stories field of your main.js config.
- Also check the browser console and terminal for error messages.

```

# No Preview

Sorry, but you either have no stories or none are selected somehow.
  * Please check the Storybook config.
  * Try reloading the page.

If the problem persists, check the browser console, or the terminal you've run Storybook from.
```

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

### Changelog - Deprecated Color Functions

Source: https://tech.skbkontur.ru/kontur-ui?path=%2Fdocs%2Freact-ui_changelog--docs#0210httpsgithubcomskbkonturretail-uicompareretail-ui0202retail-ui0210-2018-08-16

This changelog entry advises against using `lib/ColorFunctions` in favor of the native CSS function `color-mix()` starting from version 6.0.0.

```text
`lib/ColorFunctions`, use native CSS-function color-mix()
```

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

### Addons

Source: https://tech.skbkontur.ru/kontur-ui?path=%2Fdocs%2Freact-ui_information-datatids--docs#datatids

General documentation for Addons.

```APIDOC
## Addons

### Description
This section likely pertains to supplementary components or features that can be added to other UI elements.
```

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

### Storybook Error Message Example

Source: https://tech.skbkontur.ru/kontur-ui?path=%2Fdocs%2Freact-ui_information-datatids--docs#datatids

This message indicates that a story with the specified ID could not be found in the Storybook configuration. Check your story file paths and main.js configuration.

```bash
Couldn't find story matching 'information-datatids--docs'.
```

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

### Global Context Configuration

Source: https://tech.skbkontur.ru/kontur-ui?path=%2Fdocs%2Freact-ui_information-responsive--docs#настройка-адаптивности

Overview of global contexts available for configuration including Theme, Locale, and Feature Flags.

```APIDOC
## Global Contexts

### Description
Configuration contexts used to manage global state for the application.

### Contexts
- **Theme**: Manages visual styles (e.g., ThemeLight, BrandRed, AccentGray).
- **Locale**: Manages language settings (e.g., Russian).
- **Feature flags**: Manages enabled/disabled features within the application.
```

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

### Overview API

Source: https://tech.skbkontur.ru/kontur-ui?path=%2Fdocs%2Ftable_responsive--docs#адаптивный-пример-таблицы

General overview and conceptual information for the React UI library.

```APIDOC
## Overview API

### Description
General overview and conceptual information for the React UI library.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
This section provides conceptual information about the React UI library.

#### Response Example
None provided for general overview.
```

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

### Storybook Error Message Example

Source: https://tech.skbkontur.ru/kontur-ui?path=%2Fdocs%2Freact-ui_information-theme--docs#theme

This code block shows a typical error message encountered in Storybook when a story cannot be found. It suggests checking the Storybook configuration and browser console for more details.

```text
Couldn't find story matching 'information-theme--docs'.
```

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

### TooltipMenu

Source: https://tech.skbkontur.ru/kontur-ui?path=%2Fdocs%2Freact-ui_information-datatids--docs#datatids

Documentation for the TooltipMenu component.

```APIDOC
## TooltipMenu

### Description
A menu that appears in conjunction with a tooltip.

### Data Test IDs
- `TooltipMenuDataTids.root`: 'TooltipMenu__root'
```

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

### Global Context Configuration

Source: https://tech.skbkontur.ru/kontur-ui?path=%2Fdocs%2Freact-ui_information-responsive--docs#отключение-адаптивности

Configuration for global contexts including Theme, Locale, and Feature Flags.

```APIDOC
## Global Contexts

### Description
Configuration settings for global application state.

### Available Contexts
- **Theme**: Manages visual styles (e.g., ThemeLight, BrandRed, AccentGray).
- **Locale**: Manages language settings (e.g., Russian).
- **Feature flags**: Manages enabled/disabled features.
```

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

### Storybook Rendering Issues: Common Causes

Source: https://tech.skbkontur.ru/kontur-ui?path=%2Fdocs%2Freact-ui_changelog--docs#163httpsgithubcomskbkonturretail-uicompareretail-ui162retail-ui163-2019-11-18

Components may fail to render in Storybook due to missing context providers, misconfigured build tools (Webpack/Vite), or incorrect environment variables. Consult the Storybook documentation for decorators, Webpack/Vite configuration, and environment variable setup to resolve these issues.

```text
1. **Missing Context/Providers** : You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
2. **Misconfigured Webpack or Vite** : Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
3. **Missing Environment Variables** : Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.
```

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

### Storybook Rendering Issues: Common Causes

Source: https://tech.skbkontur.ru/kontur-ui?path=%2Fdocs%2Freact-ui_changelog--docs#0212httpsgithubcomskbkonturretail-uicompareretail-ui0210retail-ui0212-2018-08-17

Components may fail to render in Storybook due to missing context providers, misconfigured build tools like Webpack or Vite, or missing environment variables. Consult the Storybook documentation for decorators, Webpack/Vite configuration, and environment variable setup.

```markdown
# The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:
  1. **Missing Context/Providers** : You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. **Misconfigured Webpack or Vite** : Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. **Missing Environment Variables** : Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.
```

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

### Storybook Configuration Issues

Source: https://tech.skbkontur.ru/kontur-ui?path=%2Fdocs%2Fempty-state_emptystate

Guidance on resolving common Storybook rendering issues for components.

```APIDOC
## Storybook Configuration Issues

### Description
This section outlines common reasons why a component might fail to render in Storybook and provides solutions.

### Common Causes and Solutions

1.  **Missing Context/Providers**: Use decorators to supply necessary contexts or providers.
    *   Refer to the [Decorators documentation](link_to_decorators_docs) for detailed instructions.

2.  **Misconfigured Webpack or Vite**: Ensure Storybook correctly picks up loader, plugin, and other relevant settings.
    *   Consult the [Webpack/Vite configuration guides](link_to_webpack_vite_docs) for step-by-step instructions.

3.  **Missing Environment Variables**: Set up any required custom environment variables.
    *   Follow the guidelines in the [Environment Variables documentation](link_to_env_vars_docs).

### Error Messages

-   `Couldn't find story matching 'emptystate'.`
    *   Verify that a story with the specified ID exists.
    *   Check the `stories` field in your `main.js` configuration.
    *   Examine the browser console and terminal for error messages.

### Troubleshooting Steps

-   Check the Storybook configuration.
-   Try reloading the page.
-   Inspect the browser console for errors.
-   Examine the terminal output where Storybook was run.
```

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

### Theme Configuration

Source: https://tech.skbkontur.ru/kontur-ui?path=%2Fdocs%2Freact-ui_information-theme--docs#версии-тем

API reference for configuring the theme properties in Kontur UI.

```APIDOC
## Theme Configuration

### Description
Defines the theme properties for the UI components.

### Parameters
#### Properties
- **propertyName** (string) - Required - Short description of the property.
- **defaultValue** (string) - Required - The default value for the property.
```

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

### Button Component Usage

Source: https://tech.skbkontur.ru/kontur-ui?path=%2Fdocs%2Freact-ui_changelog--docs#542httpsgithubcomskbkonturretail-uicompareskbkonturreact-ui541skbkonturreact-ui542-2025-11-20

Demonstrates different 'use' values for the Button component. Ensure the correct theme and styles are applied.

```javascript
import { Button } from "@skbkontur/react-ui";

<Button use="accent">Accent Button</Button>
<Button use="outline">Outline Button</Button>
<Button use="fill">Fill Button</Button>
```

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

### Button Component Usage

Source: https://tech.skbkontur.ru/kontur-ui?path=%2Fdocs%2Freact-ui_changelog--docs#507httpsgithubcomskbkonturretail-uicompareskbkonturreact-ui506skbkonturreact-ui507-2025-01-16

Demonstrates different 'use' values for the Button component. Ensure the correct theme and available values are used.

```javascript
import { Button } from 'kontur-ui/Button';

<Button use="accent">Accent Button</Button>
<Button use="outline">Outline Button</Button>
<Button use="fill">Fill Button</Button>
```

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

### Responsive API

Source: https://tech.skbkontur.ru/kontur-ui?path=%2Fdocs%2Ftable_responsive--docs#адаптивный-пример-таблицы

Information and utilities for creating responsive designs with the React UI library.

```APIDOC
## Responsive API

### Description
Information and utilities for creating responsive designs with the React UI library.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
This section details how to implement responsive layouts and components.

#### Response Example
None provided for responsive API.
```