### Toast Component Examples (React)

Source: https://context7.com/skbkontur/kontur-ui/llms.txt

Demonstrates the Toast component for displaying temporary notification messages. Includes examples for simple messages, messages with actions, and using SingleToast for singleton behavior.

```tsx
import { Toast } from '@skbkontur/react-ui';

// Show success toast
Toast.push('Changes saved successfully');

// Show toast with action
Toast.push('Item deleted', {
  action: {
    label: 'Undo',
    handler: () => handleUndo()
  }
});

// Using SingleToast for singleton pattern
import { SingleToast } from '@skbkontur/react-ui';

SingleToast.push('Loading...');
// Later...
SingleToast.push('Complete!');
```

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

### Tooltip Component Examples (React)

Source: https://context7.com/skbkontur/kontur-ui/llms.txt

Shows how to use the Tooltip component to display contextual information on hover or focus. Includes basic, positioned, and manually controlled tooltips.

```tsx
import { Tooltip, Button } from '@skbkontur/react-ui';

// Basic tooltip
<Tooltip render={() => 'Helpful information'}>
  <Button>Hover me</Button>
</Tooltip>

// Tooltip with position
<Tooltip
  render={() => 'Positioned tooltip'}
  pos="bottom center"
>
  <span>Hover for details</span>
</Tooltip>

// Tooltip with manual control
<Tooltip
  trigger="manual"
  opened={showTooltip}
  render={() => 'Controlled tooltip'}
>
  <Button onClick={() => setShowTooltip(!showTooltip)}>
    Toggle Tooltip
  </Button>
</Tooltip>
```

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

### SidePage Component Example (React)

Source: https://context7.com/skbkontur/kontur-ui/llms.txt

Demonstrates the SidePage component, which displays content in a sliding panel from the right. Includes examples with header, body, and footer.

```tsx
import { SidePage, Button } from '@skbkontur/react-ui';

// SidePage with header, body, and footer
const [isOpen, setIsOpen] = useState(false);

{isOpen && (
  <SidePage onClose={() => setIsOpen(false)} width={600}>
    <SidePage.Header>User Details</SidePage.Header>
    <SidePage.Body>
      <SidePage.Container>
        <UserForm user={selectedUser} />
      </SidePage.Container>
    </SidePage.Body>
    <SidePage.Footer>
      <Button use="primary" onClick={handleSave}>Save</Button>
      <Button onClick={() => setIsOpen(false)}>Cancel</Button>
    </SidePage.Footer>
  </SidePage>
)}
```

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

### Modal Component Examples (React)

Source: https://context7.com/skbkontur/kontur-ui/llms.txt

Illustrates the Modal component for displaying content in an overlay dialog. Shows basic usage with header, body, footer, and an example of a modal without a close button.

```tsx
import { Modal, Button } from '@skbkontur/react-ui';

// Basic modal with header and footer
const [isOpen, setIsOpen] = useState(false);

{isOpen && (
  <Modal onClose={() => setIsOpen(false)}>
    <Modal.Header>Confirm Action</Modal.Header>
    <Modal.Body>
      Are you sure you want to proceed with this action?
    </Modal.Body>
    <Modal.Footer>
      <Button use="primary" onClick={handleConfirm}>
        Confirm
      </Button>
      <Button onClick={() => setIsOpen(false)}>
        Cancel
      </Button>
    </Modal.Footer>
  </Modal>
)}

// Modal without close button
<Modal disableClose>
  <Modal.Header>Important Notice</Modal.Header>
  <Modal.Body>Please complete the required fields.</Modal.Body>
</Modal>
```

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

### RadioGroup Component Examples (React)

Source: https://context7.com/skbkontur/kontur-ui/llms.txt

Shows the RadioGroup component for managing a group of radio buttons for single selection. Includes examples for vertical and horizontal layouts.

```tsx
import { RadioGroup, Radio } from '@skbkontur/react-ui';

// RadioGroup with Radio items
<RadioGroup
  value={selectedOption}
  onValueChange={setSelectedOption}
>
  <Radio value="option1">Option 1</Radio>
  <Radio value="option2">Option 2</Radio>
  <Radio value="option3">Option 3</Radio>
</RadioGroup>

// Horizontal layout
<RadioGroup
  value={size}
  onValueChange={setSize}
  inline
>
  <Radio value="small">Small</Radio>
  <Radio value="medium">Medium</Radio>
  <Radio value="large">Large</Radio>
</RadioGroup>
```

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

### Select Component Examples - React

Source: https://context7.com/skbkontur/kontur-ui/llms.txt

Provides examples of the Select component for dropdown selections. It covers using simple string arrays, object arrays with custom rendering, and setting placeholders and widths. The Select component supports single selection and keyboard navigation.

```tsx
import { Select } from '@skbkontur/react-ui';

// Basic select with items array
<Select
  items={['Option 1', 'Option 2', 'Option 3']}
  value={selected}
  onValueChange={setSelected}
/>

// Select with object items
<Select
  items={[
    { id: 1, name: 'Apple' },
    { id: 2, name: 'Banana' },
    { id: 3, name: 'Orange' }
  ]}
  value={fruit}
  onValueChange={setFruit}
  renderItem={(item) => item.name}
  renderValue={(item) => item.name}
/>

// Select with placeholder and width
<Select
  placeholder="Choose an option"
  width={300}
  items={items}
  value={value}
  onValueChange={setValue}
/>
```

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

### ComboBox Component Examples (React)

Source: https://context7.com/skbkontur/kontur-ui/llms.txt

Demonstrates the ComboBox component for text input with dropdown selection. Supports async search and static item lists with custom filtering and rendering.

```tsx
import { ComboBox } from '@skbkontur/react-ui';

// ComboBox with async search
<ComboBox
  value={city}
  onValueChange={setCity}
  getItems={(query) =>
    fetch(`/api/cities?q=${query}`)
      .then(res => res.json())
  }
  renderItem={(item) => item.name}
  valueToString={(item) => item?.name ?? ''}
/>

// ComboBox with static items
<ComboBox
  value={country}
  onValueChange={setCountry}
  getItems={(query) =>
    Promise.resolve(
      countries.filter(c =>
        c.name.toLowerCase().includes(query.toLowerCase())
      )
    )
  }
  renderItem={(item) => item.name}
  valueToString={(item) => item?.name ?? ''}
  placeholder="Start typing..."
/>
```

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

### DateRangePicker Component Examples - React

Source: https://context7.com/skbkontur/kontur-ui/llms.txt

Demonstrates how to use the DateRangePicker component for selecting a range of dates. Examples include basic usage and applying minimum and maximum date constraints.

```tsx
import { DateRangePicker } from '@skbkontur/react-ui';

// Basic date range picker
<DateRangePicker
  value={{ start: startDate, end: endDate }}
  onValueChange={({ start, end }) => {
    setStartDate(start);
    setEndDate(end);
  }}
/>

// With min/max constraints
<DateRangePicker
  value={dateRange}
  onValueChange={setDateRange}
  minDate="01.01.2023"
  maxDate="31.12.2023"
/>
```

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

### Checkbox Component Examples (React)

Source: https://context7.com/skbkontur/kontur-ui/llms.txt

Illustrates the Checkbox component for standard boolean selection. Covers basic usage, indeterminate state, and disabled checkboxes.

```tsx
import { Checkbox } from '@skbkontur/react-ui';

// Basic checkbox
<Checkbox
  checked={isChecked}
  onValueChange={setIsChecked}
>
  I agree to the terms
</Checkbox>

// Indeterminate state
<Checkbox
  checked={someSelected}
  indeterminate={someSelected && !allSelected}
  onValueChange={handleSelectAll}
>
  Select All
</Checkbox>

// Disabled checkbox
<Checkbox checked disabled>
  Locked option
</Checkbox>
```

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

### Input Component Examples - React

Source: https://context7.com/skbkontur/kontur-ui/llms.txt

Showcases the Input component's capabilities, including basic usage, prefix/suffix, validation states, and password input with a visibility toggle. The Input component supports masking, icons, and integrates with validation libraries.

```tsx
import { Input } from '@skbkontur/react-ui';

// Basic input with placeholder
<Input
  placeholder="Enter your name"
  value={name}
  onValueChange={setName}
/>

// Input with prefix and suffix
<Input
  prefix="$"
  suffix=".00"
  value={amount}
  onValueChange={setAmount}
  align="right"
/>

// Input with validation error
<Input
  error
  value={email}
  onValueChange={setEmail}
/>

// Password input with visibility toggle
<Input
  type="password"
  rightIcon={<EyeIcon />}
  value={password}
  onValueChange={setPassword}
/>
```

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

### Button Component Examples - React

Source: https://context7.com/skbkontur/kontur-ui/llms.txt

Demonstrates various ways to use the Button component, including different variants, sizes, states, and features like icons and arrow indicators. The Button component supports multiple visual styles and can be rendered as different HTML elements.

```tsx
import { Button } from '@skbkontur/react-ui';

// Basic button variants
<Button use="primary" onClick={() => console.log('clicked')}>
  Primary Action
</Button>

<Button use="danger" size="large">
  Delete Item
</Button>

<Button use="link" icon={<Icon />}>
  Link with Icon
</Button>

// Loading state button
<Button use="primary" loading disabled>
  Submitting...
</Button>

// Button with arrow indicator
<Button arrow="right">
  Next Step
</Button>
```

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

### Configure Documentation Environment

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/index.html

Sets global window variables for logging and documentation options, and imports necessary Storybook manager bundles for UI components.

```javascript
window['LOGLEVEL'] = "info";
window['DOCS_OPTIONS'] = { "defaultName": "Docs", "autodocs": "tag", "docsMode": true };
window['CONFIG_TYPE'] = "PRODUCTION";
import './sb-manager/runtime.js';
import './sb-addons/links-0/manager-bundle.js';
import './sb-addons/essentials-controls-1/manager-bundle.js';
import './sb-addons/essentials-actions-2/manager-bundle.js';
import './sb-addons/essentials-backgrounds-3/manager-bundle.js';
import './sb-addons/essentials-viewport-4/manager-bundle.js';
import './sb-addons/essentials-toolbars-5/manager-bundle.js';
import './sb-addons/essentials-measure-6/manager-bundle.js';
import './sb-addons/essentials-outline-7/manager-bundle.js';
import './sb-addons/storybook-8/manager-bundle.js';
```

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

### Storybook Initialization and Addons

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/mini-skeleton/0.2.0/index.html

Initializes Storybook with specific global settings for references, log level, and documentation options. It then imports various Storybook runtime and addon manager bundles.

```javascript
window['REFS'] = {}; window['LOGLEVEL'] = "info"; window['DOCS_OPTIONS'] = { "docsMode": true, "defaultName": "Docs", "autodocs": "tag" }; window['CONFIG_TYPE'] = "PRODUCTION"; import './sb-manager/runtime.js'; import './sb-addons/essentials-controls-0/manager-bundle.js'; import './sb-addons/essentials-actions-1/manager-bundle.js'; import './sb-addons/essentials-backgrounds-2/manager-bundle.js'; import './sb-addons/essentials-viewport-3/manager-bundle.js'; import './sb-addons/essentials-toolbars-4/manager-bundle.js'; import './sb-addons/essentials-measure-5/manager-bundle.js'; import './sb-addons/essentials-outline-6/manager-bundle.js'; import './sb-addons/storybook-7/manager-bundle.js';
```

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

### Initialize Global Configuration Objects

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/index.html

Defines the global 'FEATURES' object for toggling application capabilities and the 'REFS' object for mapping package versions to their respective documentation URLs.

```javascript
window['FEATURES'] = { "warnOnLegacyHierarchySeparator": true, "buildStoriesJson": false, "storyStoreV7": true, "argTypeTargetsV7": true, "legacyDecoratorFileOrder": false, "disallowImplicitActionsInRenderV8": false };
window['REFS'] = { "react-ui": { "expanded": true, "title": "React UI", "url": "https://tech.skbkontur.ru/kontur-ui/packages/react-ui/5.6.12", "versions": { "5.6.12": "https://tech.skbkontur.ru/kontur-ui/packages/react-ui/5.6.12" } } };
```

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

### Initialize Storybook Runtime Configuration

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/react-error-pages/2.2.10/iframe.html

Sets global window objects for Storybook environment, feature flags, and story discovery patterns. This ensures the preview environment is correctly configured before the main application bundles are loaded.

```javascript
window['CONFIG_TYPE'] = "PRODUCTION";
window['LOGLEVEL'] = "info";
window['FRAMEWORK_OPTIONS'] = {"legacyRootApi":true};
window['FEATURES'] = {"argTypeTargetsV7":true,"legacyDecoratorFileOrder":false,"disallowImplicitActionsInRenderV8":true};
window['STORIES'] = [{"titlePrefix":"","directory":"./packages/react-error-pages/__docs__","files":"*.mdx","importPathMatcher":"^\\.[\\/](?:packages\\/react-error-pages\\/__docs__\\/(?!\\.)(?=.)[^/]*?\\.mdx)$"},{"titlePrefix":"","directory":"./packages/react-error-pages/__docs__","files":"*.docs.stories.tsx","importPathMatcher":"^\\.[\\/](?:packages\\/react-error-pages\\/__docs__\\/(?!\\.)(?=.)[^/]*?\\.docs\\.stories\\.tsx)$"}];
window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":"tag","docsMode":true};
window['TAGS_OPTIONS'] = {"dev-only":{"excludeFromDocsStories":true},"docs-only":{"excludeFromSidebar":true},"test-only":{"excludeFromSidebar":true,"excludeFromDocsStories":true}};
```

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

### Load Storybook Bundles

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/react-error-pages/2.2.10/iframe.html

Imports the necessary runtime and bundle files required to execute the Storybook preview environment.

```javascript
import './sb-preview/runtime.js';
import './runtime~main.3ebd3b3e.iframe.bundle.js';
import './375.c97bd34d.iframe.bundle.js';
import './main.06a860d8.iframe.bundle.js';
```

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

### GET /api/tags

Source: https://context7.com/skbkontur/kontur-ui/llms.txt

Retrieves a list of tags for the TokenInput component autocomplete functionality.

```APIDOC
## GET /api/tags

### Description
Fetches a list of tags based on a query string for the TokenInput autocomplete feature.

### Method
GET

### Endpoint
/api/tags

### Parameters
#### Query Parameters
- **q** (string) - Required - The search query string to filter tags.

### Request Example
GET /api/tags?q=example

### Response
#### Success Response (200)
- **tags** (array) - List of tag objects.

#### Response Example
[
  { "id": "1", "name": "Tag 1" },
  { "id": "2", "name": "Tag 2" }
]
```

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

### Initialize Storybook Global Configuration

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/logos/2.15.2/index.html

JavaScript configuration for the Storybook manager, defining feature flags, log levels, and documentation options. It also imports necessary addon bundles for the Storybook environment.

```javascript
window['FEATURES'] = { "argTypeTargetsV7": true, "legacyDecoratorFileOrder": false, "disallowImplicitActionsInRenderV8": true };
window['DOCS_OPTIONS'] = { "docsMode": true, "defaultName": "Docs", "autodocs": "tag" };
import './sb-manager/globals-runtime.js';
import './sb-addons/essentials-controls-1/manager-bundle.js';
```

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

### GET /api/cities

Source: https://context7.com/skbkontur/kontur-ui/llms.txt

Endpoint used by the ComboBox component to fetch city suggestions based on a search query.

```APIDOC
## GET /api/cities

### Description
Retrieves a list of cities matching the provided search query for the ComboBox component.

### Method
GET

### Endpoint
/api/cities

### Parameters
#### Query Parameters
- **q** (string) - Required - The search query string to filter cities.

### Request Example
GET /api/cities?q=Moscow

### Response
#### Success Response (200)
- **items** (array) - List of city objects.

#### Response Example
[
  {"id": 1, "name": "Moscow"},
  {"id": 2, "name": "Moscow Region"}
]
```

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

### Global Documentation Theme Configuration

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/colors/2.1.5/iframe.html

CSS variables and global styles for the documentation wrapper, including dark mode support and font settings for the Kontur UI documentation site.

```css
:root { --sidebar-width: 13rem; --sidebar-left-padding: 0.5rem; --content-width: calc(100% - var(--sidebar-width)); } body { font-family: 'Lab Grotesque', 'Helvetica Neue', Roboto, Arial, sans-serif; font-size: 14px; margin: 0; background: white; color: rgba(0, 0, 0, 0.87); }
```

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

### Storybook Configuration and Runtime JavaScript

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/iframe.html

This snippet shows the Storybook configuration, including feature flags, options, and the loading of necessary runtime JavaScript files. It's essential for the Storybook environment to function correctly.

```javascript
window['CONFIG_TYPE'] = "PRODUCTION"; window['LOGLEVEL'] = "info"; window['FRAMEWORK_OPTIONS'] = {"builder":{"useSWC":true}};
window['FEATURES'] = {"warnOnLegacyHierarchySeparator":true,"buildStoriesJson":false,"storyStoreV7":true,"argTypeTargetsV7":true,"legacyDecoratorFileOrder":false,"disallowImplicitActionsInRenderV8":false};
window['STORIES'] = [{"titlePrefix":"","directory":"./.storybook/docsPages","files":"**/*.mdx","importPathMatcher":"^\\.["\\\\/"].(?:\\.storybook\\/docsPages(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)"\\*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.mdx)$"}];
window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":"tag","docsMode":true};
import './sb-preview/runtime.js'; import './runtime~main.c2757213.iframe.bundle.js'; import './423.5c149308.iframe.bundle.js'; import './main.51e582b1.iframe.bundle.js';
```

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

### Storybook Reference and Logging Configuration

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/react-ui-addons/5.3.3/index.html

Sets up Storybook's reference configurations (REFS) and logging level. The REFS object is empty, indicating no external references are configured. The LOGLEVEL is set to 'info', which means informational messages and above will be logged.

```javascript
window['REFS'] = {};
window['LOGLEVEL'] = "info";
```

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

### Control application-wide loading with GlobalLoader

Source: https://context7.com/skbkontur/kontur-ui/llms.txt

GlobalLoader provides a top-level progress indicator. It is controlled via static start and done methods, making it suitable for managing global async task states.

```tsx
import { GlobalLoader } from '@skbkontur/react-ui';

GlobalLoader.start();
GlobalLoader.done();

async function fetchData() {
  GlobalLoader.start();
  try {
    const data = await api.getData();
    setData(data);
  } finally {
    GlobalLoader.done();
  }
}
```

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

### DatePicker Component Examples - React

Source: https://context7.com/skbkontur/kontur-ui/llms.txt

Illustrates the usage of the DatePicker component for selecting single dates. It covers basic functionality, date range constraints, custom width, and disabled states. The DatePicker supports custom formatting and localization.

```tsx
import { DatePicker } from '@skbkontur/react-ui';

// Basic date picker
<DatePicker
  value={date}
  onValueChange={setDate}
/>

// Date picker with range constraints
<DatePicker
  value={date}
  onValueChange={setDate}
  minDate="01.01.2020"
  maxDate="31.12.2025"
/>

// Date picker with custom width
<DatePicker
  value={date}
  onValueChange={setDate}
  width={200}
/>

// Disabled state
<DatePicker
  value={date}
  disabled
/>
```

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

### React Libraries

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/mass-actions-panel/0.6.9/861.b1c25328.iframe.bundle.js.LICENSE.txt

Documentation for various React production minified libraries.

```APIDOC
## React Libraries

### Description
This section covers the production-minified React libraries used in the project, including `react-is`, `scheduler`, `react-dom`, `react-jsx-runtime`, and `react`.

### License
MIT

### Copyright
(c) Facebook, Inc. and its affiliates.

### Source
All libraries are sourced from the root directory of the React project's repository.
```

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

### Prism.js Syntax Highlighting

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/mass-actions-panel/0.6.9/861.b1c25328.iframe.bundle.js.LICENSE.txt

Details on the Prism.js library for syntax highlighting.

```APIDOC
## Prism.js

### Description
A lightweight, robust, elegant syntax highlighting library.

### License
MIT

### Link
https://opensource.org/licenses/MIT

### Author
Lea Verou (https://lea.verou.me)
```

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

### Storybook UI Preparation and Display Logic - CSS

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/empty-state/1.1.4/iframe.html

Manages the display of Storybook UI elements during story preparation and when specific states like 'preparing', 'no preview', or 'error display' are active. It uses CSS selectors to hide or show elements based on class names.

```css
/* While we aren't showing the main block yet, but still preparing, we want everything the user has rendered, which may or may not be in #storybook-root, to be display none */
.sb-show-preparing-story:not(.sb-show-main) > :not(.sb-preparing-story) {
  display: none;
}
.sb-show-preparing-docs:not(.sb-show-main) > :not(.sb-preparing-docs) {
  display: none;
}

/* Hide our own blocks when we aren't supposed to be showing them */
:not(.sb-show-preparing-story) > .sb-preparing-story,
:not(.sb-show-preparing-docs) > .sb-preparing-docs,
:not(.sb-show-nopreview) > .sb-nopreview,
:not(.sb-show-errordisplay) > .sb-errordisplay {
  display: none;
}
```

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

### Get Font Sizes for APCA Contrast

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/react-ui/5.6.12/8735.452bcd7b.iframe.bundle.js.LICENSE.txt

The fontLookupAPCA function returns an array of recommended font sizes based on a given APCA contrast (Lc) value. This helps ensure text legibility across different contrast levels. Dependencies: fontLookupAPCA. Input: Lc contrast value. Output: Array of font sizes.

```javascript
import { fontLookupAPCA } from 'apca-w3';

let Lc = 60; // Example contrast value
let fontArray = fontLookupAPCA(Lc);
// fontArray will contain recommended font sizes for the given Lc.
```

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

### Setting Global Configuration Variables

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/table/0.1.12/iframe.html

This snippet demonstrates how global configuration variables are set on the window object. These include environment type, log level, framework options, and feature flags, which are essential for controlling the application's behavior and features.

```javascript
window['CONFIG_TYPE'] = "PRODUCTION";
window['LOGLEVEL'] = "info";
window['FRAMEWORK_OPTIONS'] = {"legacyRootApi":true};
window['FEATURES'] = {"argTypeTargetsV7":true,"legacyDecoratorFileOrder":false,"disallowImplicitActionsInRenderV8":true};
```

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

### Storybook Loader and Preparing State Styles - CSS

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/logos/2.15.2/iframe.html

Styles the preparing state overlays and the loader component in Storybook. The preparing state uses a high z-index to ensure it appears above rendered content, and the loader utilizes the 'sb-rotate360' animation.

```css
.sb-preparing-story, .sb-preparing-docs { background-color: white; z-index: 2147483647; }
.sb-loader { -webkit-animation: sb-rotate360 0.7s linear infinite; animation: sb-rotate360 0.7s linear infinite; border-color: rgba(97, 97, 97, 0.29); border-radiu
```

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

### Configure Storybook Runtime Environment

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/table/0.1.12/index.html

JavaScript configuration for Storybook features, logging levels, and documentation options. It also imports necessary manager bundles for addons like controls, actions, and docs.

```javascript
window['FEATURES'] = { "argTypeTargetsV7": true, "legacyDecoratorFileOrder": false, "disallowImplicitActionsInRenderV8": true };
window['STORYBOOK_RENDERER'] = "react";
import './sb-manager/globals-runtime.js';
import './sb-addons/essentials-controls-1/manager-bundle.js';
```

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

### Initialize Storybook Global Configuration

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/empty-state/1.1.4/index.html

Sets global window variables to define feature flags, log levels, and framework settings for Storybook. This configuration enables specific behaviors like Webpack 5 building and React integration.

```javascript
window['FEATURES'] = { "argTypeTargetsV7": true, "legacyDecoratorFileOrder": false, "disallowImplicitActionsInRenderV8": true };
window['REFS'] = {};
window['LOGLEVEL'] = "info";
window['DOCS_OPTIONS'] = { "docsMode": true, "defaultName": "Docs", "autodocs": "tag" };
window['CONFIG_TYPE'] = "PRODUCTION";
window['TAGS_OPTIONS'] = { "dev-only": { "excludeFromDocsStories": true }, "docs-only": { "excludeFromSidebar": true }, "test-only": { "excludeFromSidebar": true, "excludeFromDocsStories": true } };
window['STORYBOOK_RENDERER'] = "react";
window['STORYBOOK_BUILDER'] = "@storybook/builder-webpack5";
window['STORYBOOK_FRAMEWORK'] = "@storybook/react-webpack5";
```

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

### Display contextual guidance with Hint

Source: https://context7.com/skbkontur/kontur-ui/llms.txt

The Hint component offers inline help text. It can be triggered by specific icons or integrated directly into input fields to provide user assistance.

```tsx
import { Hint } from '@skbkontur/react-ui';

<Hint text="Enter your full legal name as it appears on official documents">
  <QuestionIcon />
</Hint>

<Input
  value={value}
  onValueChange={setValue}
  rightIcon={
    <Hint text="Password must be at least 8 characters">
      <InfoIcon />
    </Hint>
  }
/>
```

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

### Storybook Loader and Preparing State Styling - CSS

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/empty-state/1.1.4/iframe.html

Styles the loader component and the 'preparing' states for stories and docs in Storybook. The loader uses a rotation animation, and the preparing states are styled to appear on top of the content.

```css
/* We display the preparing loaders *over* the rendering story */
.sb-preparing-story,
.sb-preparing-docs {
  background-color: white;
  /* Maximum possible z-index. It would be better to use stacking contexts to ensure it's always on top, but this isn't possible as it would require making CSS changes that could affect user code */
  z-index: 2147483647;
}

.sb-loader {
  -webkit-animation: sb-rotate360 0.7s linear infinite;
  animation: sb-rotate360 0.7s linear infinite;
  border-color: rgba(97, 97, 97, 0.29);
  border-radiu
```

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

### Importing Runtime JavaScript Bundles

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/table/0.1.12/iframe.html

This snippet shows the import statements for various runtime JavaScript bundles required by the application. These bundles contain essential code for the application's functionality, including the storybook preview runtime and other core modules.

```javascript
import './sb-preview/runtime.js';
import './runtime~main.c3b0cde9.iframe.bundle.js';
import './3861.3a9f07fe.iframe.bundle.js';
import './main.d5cc2d72.iframe.bundle.js';
```

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

### Import Runtime JavaScript Bundles

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/colors/2.1.5/iframe.html

Imports essential JavaScript runtime bundles for the Kontur UI application. These bundles include the Storybook preview runtime and other necessary modules for the application's functionality.

```javascript
import './sb-preview/runtime.js';
import './runtime~main.a825cdc0.iframe.bundle.js';
import './19.dae183d6.iframe.bundle.js';
import './main.2ce37990.iframe.bundle.js';
```

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

### Define Storybook Preview and Table Styles

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/colors/2.1.5/iframe.html

CSS classes for styling Storybook preview blocks and argument tables. It includes animations for loading states and layout configurations for documentation components.

```css
.sb-previewBlock { background: #fff; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0; margin: 25px auto 40px; max-width: 600px; } .sb-argstableBlock { border-collapse: collapse; border-spacing: 0; font-size: 13px; line-height: 20px; margin: 25px auto 40px; max-width: 600px; text-align: left; width: 100%; }
```

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

### Define Storybook UI Typography and Layout

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/mass-actions-panel/0.6.9/iframe.html

Configures the Nunito Sans font family and sets up responsive layout wrappers for the Storybook preview area. These styles ensure consistent rendering across different screen sizes.

```css
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2'); }
.sb-wrapper { position: fixed; top: 0; bottom: 0; left: 0; right: 0; box-sizing: border-box; padding: 40px; font-family: 'Nunito Sans', sans-serif; overflow: auto; }
@media (max-width: 700px) { .sb-wrapper { padding: 20px; } }
```

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

### Storybook Runtime Configuration (JavaScript)

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/hidden-links/0.1.2/iframe.html

Sets global JavaScript variables for Storybook runtime, including configuration type, log level, framework options, feature flags, and story definitions. It also loads necessary Storybook runtime modules.

```javascript
window['CONFIG_TYPE'] = "PRODUCTION"; window['LOGLEVEL'] = "info"; window['FRAMEWORK_OPTIONS'] = {"legacyRootApi":true}; window['FEATURES'] = {"warnOnLegacyHierarchySeparator":true,"buildStoriesJson":false,"storyStoreV7":true,"argTypeTargetsV7":true,"legacyDecoratorFileOrder":false,"disallowImplicitActionsInRenderV8":false}; window['STORIES'] = [{"titlePrefix":"","directory":"./packages/hidden-links/__docs__","files":"*.mdx","importPathMatcher":"^\\.["\\\\/\\](?:packages\\/hidden-links\\/__docs__\/(?!\\.)(?=.)[^\]*\.mdx)$"},{"titlePrefix":"","directory":"./packages/hidden-links/__docs__","files":"*.docs.stories.tsx","importPathMatcher":"^\\.["\\\\/\\](?:packages\\/hidden-links\\/__docs__\/(?!\\.)(?=.)[^\]*\.docs.stories.tsx)$"}]; window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":"tag","docsMode":true};import './sb-preview/runtime.js'; import './runtime~main.f47974b6.iframe.bundle.js'; import './866.9718b150.iframe.bundle.js'; import './main.3bc9fcfa.iframe.bundle.js';
```

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

### Storybook Runtime Configuration

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/import-wizard/2.3.7/index.html

JavaScript configuration for the Storybook environment, defining feature flags, log levels, and documentation options. It also imports necessary manager bundles for addons.

```javascript
window['FEATURES'] = { "warnOnLegacyHierarchySeparator": true, "buildStoriesJson": false, "storyStoreV7": true, "argTypeTargetsV7": true, "legacyDecoratorFileOrder": false, "disallowImplicitActionsInRenderV8": false };
window['REFS'] = {};
window['LOGLEVEL'] = "info";
window['DOCS_OPTIONS'] = { "docsMode": true, "defaultName": "Docs", "autodocs": "tag" };
window['CONFIG_TYPE'] = "PRODUCTION";
import './sb-manager/runtime.js';
import './sb-addons/essentials-controls-0/manager-bundle.js';
import './sb-addons/essentials-actions-1/manager-bundle.js';
import './sb-addons/essentials-backgrounds-2/manager-bundle.js';
import './sb-addons/essentials-viewport-3/manager-bundle.js';
import './sb-addons/essentials-toolbars-4/manager-bundle.js';
import './sb-addons/essentials-measure-5/manager-bundle.js';
import './sb-addons/essentials-outline-6/manager-bundle.js';
import './sb-addons/storybook-docs-7/manager-bundle.js';
```

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

### Storybook Wrapper and Responsive Padding - CSS

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/empty-state/1.1.4/iframe.html

Defines the main wrapper for the Storybook UI, setting its position, padding, and font. It also includes responsive adjustments for padding on smaller screens to ensure content is well-spaced.

```css
.sb-wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  padding: 40px;
  font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: auto;
}

@media (max-width: 700px) {
  .sb-wrapper {
    padding: 20px;
  }
}

@media (max-width: 500px) {
  .sb-wrapper {
    padding: 10px;
  }
}
```

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

### Storybook Runtime Configuration and Feature Flags

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/react-ui-validations/2.3.8/index.html

This JavaScript code configures various runtime settings for Storybook, including feature flags, references, logging level, documentation options, and build environment details. It also imports necessary manager bundles for core functionality and addons.

```javascript
window['FEATURES'] = { "argTypeTargetsV7": true, "legacyDecoratorFileOrder": false, "disallowImplicitActionsInRenderV8": true }; window['REFS'] = {}; window['LOGLEVEL'] = "info"; window['DOCS_OPTIONS'] = { "docsMode": true, "defaultName": "Docs", "autodocs": "tag" }; window['CONFIG_TYPE'] = "PRODUCTION"; window['TAGS_OPTIONS'] = { "dev-only": { "excludeFromDocsStories": true }, "docs-only": { "excludeFromSidebar": true }, "test-only": { "excludeFromSidebar": true, "excludeFromDocsStories": true } }; window['STORYBOOK_RENDERER'] = "react"; window['STORYBOOK_BUILDER'] = "@storybook/builder-webpack5"; window['STORYBOOK_FRAMEWORK'] = "@storybook/react-webpack5"; import './sb-manager/globals-runtime.js'; import './sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js'; import './sb-addons/essentials-controls-1/manager-bundle.js'; import './sb-addons/essentials-actions-2/manager-bundle.js'; import './sb-addons/essentials-docs-3/manager-bundle.js'; import './sb-addons/essentials-backgrounds-4/manager-bundle.js'; import './sb-addons/essentials-viewport-5/manager-bundle.js'; import './sb-addons/essentials-toolbars-6/manager-bundle.js'; import './sb-addons/essentials-measure-7/manager-bundle.js'; import './sb-addons/essentials-outline-8/manager-bundle.js'; import './sb-addons/storybook-docs-9/manager-bundle.js'; import './sb-manager/runtime.js';
```

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

### Storybook Preparing State Styles

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/react-error-pages/2.2.10/iframe.html

Styles for elements indicating that a Storybook story or documentation is being prepared. These elements are styled with a white background and a high z-index to ensure they appear on top of other content.

```css
.sb-preparing-story, .sb-preparing-docs { background-color: white; z-index: 2147483647; }
```

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

### Storybook Docs Details and Summary Styling

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/typography/0.1.3/iframe.html

This CSS targets the 'details' and 'summary' elements within Storybook documentation, specifically for the Kontur UI. It ensures that the summary text color is consistent with the overall theme and that interactive elements behave as expected.

```css
#storybook-docs .sbdocs-wrapper details > summary {
  color: rgba(0, 0, 0, 0.87);
}
```

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

### SAPC APCA (Advanced Perceptual Contrast Algorithm)

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/mass-actions-panel/0.6.9/861.b1c25328.iframe.bundle.js.LICENSE.txt

Information on the APCA library for calculating contrast ratios.

```APIDOC
## SAPC APCA - Advanced Perceptual Contrast Algorithm

### Description
Provides functions to parse color values and determine Lc contrast, including contrast calculation and font size lookup based on contrast.

### Version
Beta 0.1.9 W3

### Revision Date
July 3, 2022

### License
W3 LICENSE

### Contact
Issues or Discussions at: https://github.com/Myndex/SAPC-APCA/

### Minimal Imports
```javascript
import {
  APCAcontrast,
  sRGBtoY,
  displayP3toY,
  calcAPCA,
  fontLookupAPCA
} from 'apca-w3';
import { colorParsley } from 'colorparsley';
```

### Forward Contrast Usage
```javascript
// Where colors are sent as an rgba array [255,255,255,1]
Lc = APCAcontrast( sRGBtoY( TEXTcolor ) , sRGBtoY( BACKGNDcolor ) );

// Retrieving an array of font sizes for the contrast:
fontArray = fontLookupAPCA(Lc);
```

### Live Demonstrator
https://www.myndex.com/APCA/
```

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

### Tabbable Library

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/mass-actions-panel/0.6.9/861.b1c25328.iframe.bundle.js.LICENSE.txt

Information regarding the tabbable library for managing focusable elements.

```APIDOC
## Tabbable Library

### Description
Helps determine which elements in a container are tabbable.

### Version
6.2.0

### License
MIT

### Link
https://github.com/focus-trap/tabbable/blob/master/LICENSE
```

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

### Configure application themes with ThemeContext

Source: https://context7.com/skbkontur/kontur-ui/llms.txt

ThemeContext allows for global styling overrides. It supports applying predefined themes or custom objects to modify component appearance variables.

```tsx
import { ThemeContext, THEME_2022 } from '@skbkontur/react-ui';

<ThemeContext.Provider value={THEME_2022}>
  <App />
</ThemeContext.Provider>

const customTheme = {
  ...THEME_2022,
  btnPrimaryBg: '#1a73e8',
  btnPrimaryHoverBg: '#1557b0',
  linkColor: '#1a73e8',
};

<ThemeContext.Provider value={customTheme}>
  <App />
</ThemeContext.Provider>
```

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

### Configure Storybook Stories

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/colors/2.1.5/iframe.html

Configures the Storybook stories for the Kontur UI project. This involves defining the title prefix, directory, file patterns, and import path matchers for MDX and story files.

```javascript
window['STORIES'] = [
  {
    "titlePrefix": "",
    "directory": "./packages/colors/__docs__",
    "files": "*.mdx",
    "importPathMatcher": "^\\.[" + "\\/" + "](packages\\/colors\\/__docs__/(?!\\.)(?=.)[^/]*?\".mdx)$
  },
  {
    "titlePrefix": "",
    "directory": "./packages/colors/__docs__",
    "files": "*.docs.stories.tsx",
    "importPathMatcher": "^\\.[" + "\\/" + "](packages\\/colors\\/__docs__/(?!\\.)(?=.)[^/]*?\".docs.stories.tsx)$
  }
];
```

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

### Storybook Feature Flags and Configuration

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/colors/2.1.5/index.html

Sets various Storybook global configurations, including feature flags, reference configurations, log levels, documentation options, and build settings. These control Storybook's behavior and appearance.

```javascript
window['FEATURES'] = { "argTypeTargetsV7": true, "legacyDecoratorFileOrder": false, "disallowImplicitActionsInRenderV8": true }; window['REFS'] = {}; window['LOGLEVEL'] = "info"; window['DOCS_OPTIONS'] = { "docsMode": true, "defaultName": "Docs", "autodocs": "tag" }; window['CONFIG_TYPE'] = "PRODUCTION"; window['TAGS_OPTIONS'] = { "dev-only": { "excludeFromDocsStories": true }, "docs-only": { "excludeFromSidebar": true }, "test-only": { "excludeFromSidebar": true, "excludeFromDocsStories": true } }; window['STORYBOOK_RENDERER'] = "react"; window['STORYBOOK_BUILDER'] = "@storybook/builder-webpack5"; window['STORYBOOK_FRAMEWORK'] = "@storybook/react-webpack5";
```

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

### Set Production Configuration Variables

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/colors/2.1.5/iframe.html

Sets global configuration variables for the Kontur UI project, including the build type, logging level, and framework options. These are typically set at the application's entry point to control runtime behavior.

```javascript
window['CONFIG_TYPE'] = "PRODUCTION";
window['LOGLEVEL'] = "info";
window['FRAMEWORK_OPTIONS'] = {"legacyRootApi":true};
window['FEATURES'] = {"argTypeTargetsV7":true,"legacyDecoratorFileOrder":false,"disallowImplicitActionsInRenderV8":true};
window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":"tag","docsMode":true};
window['TAGS_OPTIONS'] = {"dev-only":{"excludeFromDocsStories":true},"docs-only":{"excludeFromSidebar":true},"test-only":{"excludeFromSidebar":true,"excludeFromDocsStories":true}};
```

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

### Storybook Docs Options Configuration

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/react-ui-addons/5.3.3/index.html

Configures options for Storybook's documentation features. It enables 'docsMode', sets a default name for documentation pages to 'Docs', and enables 'autodocs' based on tags. This configuration influences how documentation is generated and displayed.

```javascript
window['DOCS_OPTIONS'] = { "docsMode": true, "defaultName": "Docs", "autodocs": "tag" };
```

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

### Storybook Configuration Variables

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/hidden-links/0.1.2/index.html

Sets various feature flags, references, logging levels, documentation options, and configuration types for Storybook. These settings control the behavior and appearance of the Storybook interface and documentation generation.

```javascript
window['FEATURES'] = { "warnOnLegacyHierarchySeparator": true, "buildStoriesJson": false, "storyStoreV7": true, "argTypeTargetsV7": true, "legacyDecoratorFileOrder": false, "disallowImplicitActionsInRenderV8": false };
window['REFS'] = {};
window['LOGLEVEL'] = "info";
window['DOCS_OPTIONS'] = { "docsMode": true, "defaultName": "Docs", "autodocs": "tag" };
window['CONFIG_TYPE'] = "PRODUCTION";
```

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

### Storybook Documentation and Tag Options

Source: https://github.com/skbkontur/kontur-ui/blob/gh-pages/packages/table/0.1.12/iframe.html

This configuration sets options for Storybook's documentation features and tag handling. It defines default naming conventions, autodocs behavior, and rules for excluding certain tags from documentation or sidebar visibility based on their development status.

```javascript
window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":"tag","docsMode":true};
window['TAGS_OPTIONS'] = {"dev-only":{"excludeFromDocsStories":true},"docs-only":{"excludeFromSidebar":true},"test-only":{"excludeFromSidebar":true,"excludeFromDocsStories":true}};
```