### Basic InputSlider Example

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/InputSlider/README.md

A basic example of the InputSlider component with predefined tags for values. It demonstrates how to set initial values and display currency.

```jsx
() => {
    const [value, setValue] = React.useState(50);
    const changeHandler = (e) => {
        setValue(parseInt(e) || 0);
    };
    return (
            <InputSlider
                onChange={changeHandler}
                value={value}
                postfix='15%'>
                <InputSlider.Tag val={0}>0 $</InputSlider.Tag>
                <InputSlider.Tag val={50}>50 $</InputSlider.Tag>
                <InputSlider.Tag val={100}>100 $</InputSlider.Tag>
            </InputSlider>
    );
}
```

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

### Install ViennaUI Components

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/README.md

Installs the main ViennaUI React components library using either npm or yarn package managers.

```bash
$ npm i vienna-ui
$ yarn add vienna-ui
```

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

### Install Specific ViennaUI Packages

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/README.md

Installs individual packages from the ViennaUI ecosystem, such as icons, tokens, or utility functions.

```bash
$ npm i <package-name>
$ yarn add <package-name>
```

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

### Grid Layout Examples

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/Grid/README.md

Provides various examples of Grid layouts, showcasing different column distributions (12 columns, halves, thirds, quarters).

```jsx
<React.Fragment>
    <Grid.Row>
        <Grid.Col size={1}>
            <ComponentHelpers.Grid.Demo>1</ComponentHelpers.Grid.Demo>
        </Grid.Col>
        <Grid.Col size={1}>
            <ComponentHelpers.Grid.Demo>1</ComponentHelpers.Grid.Demo>
        </Grid.Col>
        <Grid.Col size={1}>
            <ComponentHelpers.Grid.Demo>1</ComponentHelpers.Grid.Demo>
        </Grid.Col>
        <Grid.Col size={1}>
            <ComponentHelpers.Grid.Demo>1</ComponentHelpers.Grid.Demo>
        </Grid.Col>
        <Grid.Col size={1}>
            <ComponentHelpers.Grid.Demo>1</ComponentHelpers.Grid.Demo>
        </Grid.Col>
        <Grid.Col size={1}>
            <ComponentHelpers.Grid.Demo>1</ComponentHelpers.Grid.Demo>
        </Grid.Col>
        <Grid.Col size={1}>
            <ComponentHelpers.Grid.Demo>1</ComponentHelpers.Grid.Demo>
        </Grid.Col>
        <Grid.Col size={1}>
            <ComponentHelpers.Grid.Demo>1</ComponentHelpers.Grid.Demo>
        </Grid.Col>
        <Grid.Col size={1}>
            <ComponentHelpers.Grid.Demo>1</ComponentHelpers.Grid.Demo>
        </Grid.Col>
        <Grid.Col size={1}>
            <ComponentHelpers.Grid.Demo>1</ComponentHelpers.Grid.Demo>
        </Grid.Col>
        <Grid.Col size={1}>
            <ComponentHelpers.Grid.Demo>1</ComponentHelpers.Grid.Demo>
        </Grid.Col>
        <Grid.Col size={1}>
            <ComponentHelpers.Grid.Demo>1</ComponentHelpers.Grid.Demo>
        </Grid.Col>
    </Grid.Row>
    <Grid.Row>
        <Grid.Col size={6}>
            <ComponentHelpers.Grid.Demo>One of two columns</ComponentHelpers.Grid.Demo>
        </Grid.Col>
        <Grid.Col size={6}>
            <ComponentHelpers.Grid.Demo>One of two columns</ComponentHelpers.Grid.Demo>
        </Grid.Col>
    </Grid.Row>
    <Grid.Row>
        <Grid.Col size={4}>
            <ComponentHelpers.Grid.Demo>One of three columns</ComponentHelpers.Grid.Demo>
        </Grid.Col>
        <Grid.Col size={4}>
            <ComponentHelpers.Grid.Demo>One of three columns</ComponentHelpers.Grid.Demo>
        </Grid.Col>
        <Grid.Col size={4}>
            <ComponentHelpers.Grid.Demo>One of three columns</ComponentHelpers.Grid.Demo>
        </Grid.Col>
    </Grid.Row>
    <Grid.Row>
        <Grid.Col size={3}>
            <ComponentHelpers.Grid.Demo>One of four columns</ComponentHelpers.Grid.Demo>
        </Grid.Col>
        <Grid.Col size={3}>
            <ComponentHelpers.Grid.Demo>One of four columns</ComponentHelpers.Grid.Demo>
        </Grid.Col>
        <Grid.Col size={3}>
            <ComponentHelpers.Grid.Demo>One of four columns</ComponentHelpers.Grid.Demo>
        </Grid.Col>
        <Grid.Col size={3}>
            <ComponentHelpers.Grid.Demo>One of four columns</ComponentHelpers.Grid.Demo>
        </Grid.Col>
    </Grid.Row>
</React.Fragment>
```

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

### Basic CssGrid Usage Example

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/CssGrid/README.md

An example of using the CssGrid component to create a grid layout with specified rows and columns, populating it with child elements.

```html
<CssGrid height='100%' templateColumns='100px auto 100px' templateRows='100px auto 50px'>
    <ComponentHelpers.CssGrid.Demo color='lightblue'>1</ComponentHelpers.CssGrid.Demo>
    <ComponentHelpers.CssGrid.Demo color='peachpuff'>2</ComponentHelpers.CssGrid.Demo>
    <ComponentHelpers.CssGrid.Demo color='orchid'>3</ComponentHelpers.CssGrid.Demo>
    <ComponentHelpers.CssGrid.Demo color='darkorange'>4</ComponentHelpers.CssGrid.Demo>
    <ComponentHelpers.CssGrid.Demo color='darkseagreen'>5</ComponentHelpers.CssGrid.Demo>
    <ComponentHelpers.CssGrid.Demo color='gold'>6</ComponentHelpers.CssGrid.Demo>
    <ComponentHelpers.CssGrid.Demo color='deepskyblue'>7</ComponentHelpers.CssGrid.Demo>
    <ComponentHelpers.CssGrid.Demo color='lightgreen'>8</ComponentHelpers.CssGrid.Demo>
    <ComponentHelpers.CssGrid.Demo color='lightsalmon'>9</ComponentHelpers.CssGrid.Demo>
</CssGrid>
```

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

### CardVersatile Component Usage Example

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/CardVersatile/README.md

A comprehensive example showcasing the usage of the CardVersatile component with various properties like title, icon, counter, hint, badge, extraText, subtitle, and info.

```jsx
<CardVersatile
    title="Card title"
    icon={{
        type: 'square',
        children: 'ВВ',
    }}
    counter={{
        children: '2',
    }}
    hint={{
        header: 'Заголовок подсказки',
        content: 'Содержимое подсказки',
    }}
    badge={{
        children: 'Status',
    }}
    extraText="Extra text"
    subtitle="Card subtitle"
    info="More information"
>
    Some text
</CardVersatile>
```

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

### Interactive Example with Custom Buttons

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/MultiselectWithSearch/README.md

Provides an interactive example showcasing custom 'Select All' and 'Clear' buttons alongside the MultiselectWithSearch component. It demonstrates how to manage the state and trigger actions for selecting or clearing all options.

```jsx
    {
        const [state, setValue] = React.useState({ values: [] });
        const handleSelect = (data) => setValue({ values: data.value });
        const checkAll = () => setValue({ values: ['Значение 1', 'Значение большое 2', 'Значение еще больше 3', 'Знач. 4', 'Значение 5'] });
        const uncheckAll = () => setValue({ values: [] });
        return (
            <Groups design='vertical'>
                <MultiselectWithSearch disableSelectAll disableReset placeholder='Выберите значение' values={[...state.values]} onSelect={handleSelect}>
                    <div __nowrap__="true" style={{height: '44px'}}>
                        <Groups alignItems="center" height="full" justifyContent="center">
                            <Button design="accent" size='xs' onClick={checkAll}>Выбрать все</Button>
                            <Button size='xs' onClick={uncheckAll}>Очистить</Button>
                        </Groups>
                    </div>
                    <MultiselectWithSearch.Option>Значение 1</MultiselectWithSearch.Option>
                    <MultiselectWithSearch.Option>Значение большое 2</MultiselectWithSearch.Option>
                    <MultiselectWithSearch.Option>Значение еще больше 3</MultiselectWithSearch.Option>
                    <MultiselectWithSearch.Option>Знач. 4</MultiselectWithSearch.Option>
                    <MultiselectWithSearch.Option>Значение 5</MultiselectWithSearch.Option>
                </MultiselectWithSearch>
            </Groups>
        );
    }
```

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

### IconContainer Basic Usage

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/IconContainer/README.md

Shows basic examples of using the IconContainer with text, an image, and an icon.

```javascript
<Groups>
    <IconContainer>M</IconContainer>
    <IconContainer>
        <img src={ComponentHelpers.Avatar.ImageURL} alt='Аватар'/>
    </IconContainer>
    <IconContainer>
       <ManPersonIcon />
    </IconContainer>
</Groups>
```

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

### Viennaui Tour Component Usage Example (React)

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/Tour/README.md

A comprehensive example demonstrating the integration and usage of the Viennaui Tour component within a React application. It showcases how to define tour steps, manage tour visibility, and pass custom `testId` props.

```javascript
{
    const [showModal, setShowModal] = React.useState(false);
    const [showTour, setShowTour] = React.useState(false);
    const show = () => setShowTour(true);
    const steps = [
        {
            selector: '.start-tour4',
            highlightedSelectors: [],
            type: 'accent',
            content: {
                title: 'Начнем знакомиться?',
                description: 'Это accent',
            },
            backButtonText: 'Позже',
            nextButtonText: 'Начнем',
        },
        {
            selector: '.fist-step4',
            content: { title: 'Title 1', description: 'description 1', image: 'https://insider-test.raiffeisen.ru/uploads/article/11320/previews/detail.jpg?1725975927224' },
            maskRadius: 8,
            onEnter: () => console.log('ENTER'),
            onLeave: () => console.log('LEAVE'),
        },
        {
            selector: '.second-step4',
            content: { title: 'Title 2', description: 'description 2' },
            maskRadius: 8,
            position: 'right'
        },
        {
            selector: '.third-step4',
            type: 'accent',
            content: { title: 'Title 3', description: 'description 3' },
            position: 'left',
        },
        {
            selector: '.fourth-step4',
            content: { title: 'Title 4', description: 'description 4' },
            position: 'bottom',
            onLeave: ({ nextStep }) => {
                if (nextStep === 5) {
                    setShowTour(false);
                    setShowModal(true);
                }
            },
        },
        {
            selector: '.fifth-step4',
            content: { title: 'Title 5', description: 'description 5' },
            position: 'left',
            onLeave: ({ nextStep }) => {
                if (nextStep === 5) {
                    setShowTour(false);
                    setShowModal(true);
                }
            },
        },
         {
            selector: '.fifth-step4',
            content: { title: 'Title 5', description: 'description 5' },
            position: 'left',
            onLeave: ({ nextStep }) => {
                if (nextStep === 5) {
                    setShowTour(false);
                    setShowModal(true);
                }
            },
        },
    ];
    return (
        <div>
            <Tour
                isOpen={showTour}
                steps={steps}
                testId={{ overlay: 'tour_overlay', popoverBackStepBtn: 'tour_back-step-button', popoverNextStepBtn: 'tour_next-step-button', closeIcon: 'tour-popover_close-icon' }}
                onChangeIsOpen={(val) => setShowTour(val)}
                beforeClose={() => console.log('beforeClose')}
                afterOpen={() => console.log('afterOpen')}
            />
            <Flex direction={'column'} alignItems={'flex-start'} gap={'s16'} style={{ width: '100%', padding: '24px' }}>
                <Button className={'start-tour4'} onClick={show}>Show tour</Button>
                <Flex direction={'column'} gap={'s16'} style={{ width: '100%' }}>
                    <Logotype className='fist-step4' size='s' style={{ alignSelf: 'flex-end' }} />
                    <Logotype className='second-step4' size='m' style={{ alignSelf: 'flex-start' }} />
                    <Logotype className='third-step4' size='l' style={{ alignSelf: 'flex-end' }} />
                    <Logotype className='fourth-step4' size='xl' style={{ alignSelf: 'flex-start' }} />
                    <Logotype className='fifth-step4' size='xxl' style={{ alignSelf: 'center' }} />
                </Flex>
            </Flex>
        </div>
    );
}
```

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

### ComboButton Usage Examples

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/ComboButton/README.md

Provides examples of using the ComboButton component with different designs and configurations, including single-button and double-button variants. It showcases how to define options and integrate with Button components.

```javascript
{
    const options = [
        <ComboButton.Option onClick={(e) => console.log(e.target)} key={1}>
            Option 1
        </ComboButton.Option>,
        <ComboButton.Option onClick={(e) => console.log(e.target)} key={2}>
            Option 2
        </ComboButton.Option>,
        <ComboButton.Option onClick={(e) => console.log(e.target)} key={3}>
            Option 3
        </ComboButton.Option>,
    ];
    return (
        <Groups>
            <ComboButton options={options}>
                <Button onClick={(e) => console.log(e.target)}>Button</Button>
            </ComboButton>
            <ComboButton design='accent' options={options}>
                <Button onClick={(e) => console.log(e.target)}>Button</Button>
            </ComboButton>
            <ComboButton design='critical' options={options}>
                <Button onClick={(e) => console.log(e.target)}>Button</Button>
            </ComboButton>
            <ComboButton design='outline' options={options}>
                <Button onClick={(e) => console.log(e.target)}>Button</Button>
            </ComboButton>
             <ComboButton design='ghost' options={options} maxListWidth={100}>
                <Button onClick={(e) => console.log(e.target)}>Button</Button>
            </ComboButton>
        </Groups>
    );
}
```

```javascript
{
    const options = [
        <ComboButton.Option key={1}>Option 1</ComboButton.Option>,
        <ComboButton.Option key={2}>Option 2</ComboButton.Option>,
        <ComboButton.Option key={3}>Option 3</ComboButton.Option>,
        <ComboButton.Option key={4}>Option 4</ComboButton.Option>,
        <ComboButton.Option key={5}>Option 5</ComboButton.Option>,
    ];
    return (
        <Groups>
            <ComboButton options={options}>
                <Button>Button</Button>
            </ComboButton>
            <ComboButton options={options} design='outline'>
                <Button>Button</Button>
            </ComboButton>
        </Groups>
    );
}
```

```javascript
{
    const options = [
        <ComboButton.Option key={1}>Option 1</ComboButton.Option>,
        <ComboButton.Option key={2}>Option 2</ComboButton.Option>,
        <ComboButton.Option key={3}>Option 3</ComboButton.Option>,
        <ComboButton.Option key={4}>Option 4</ComboButton.Option>,
        <ComboButton.Option key={5}>Option 5</ComboButton.Option>,
    ];
    return (
        <Groups>
            <ComboButton options={options}>
                <Button>Button</Button>
                <Button />
            </ComboButton>
            <ComboButton options={options} design='outline'>
                <Button>Button</Button>
                <Button />
            </ComboButton>
        </Groups>
    );
}
```

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

### Skeleton Line Design Examples

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/Skeleton/README.md

Shows examples of the Skeleton component with 'line' design, illustrating different sizes ('s', 'm', 'l', 'xl') and width customization.

```html
<Groups design="vertical">
    <Skeleton design="line" size="s"></Skeleton>
    <Skeleton design="line" size="m"></Skeleton>
    <Skeleton design="line" size="l"></Skeleton>
    <Skeleton design="line" size="xl"></Skeleton>
</Groups>
```

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

### Drawer Component Usage Example

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/Drawer/README.md

Provides a practical example of using the Drawer component in a React application. It shows how to control the drawer's visibility using state and includes common elements like a header, body, and footer with buttons.

```javascript
{
    () => {
        const [isOpen, setOpen] = React.useState(false);
        return (
            <>
                <Button onClick={() => setOpen(true)}>Show Drawer</Button>
                <Drawer isOpen={isOpen} onClose={() => setOpen(false)}>
                    <Drawer.Layout>
                        <Drawer.Head>
                            <Drawer.Title>Enter SMS-code</Drawer.Title>
                            <Drawer.SubTitle>Drawer SubHeader</Drawer.SubTitle>
                        </Drawer.Head>
                        <Drawer.Body>
                            <ComponentHelpers.Drawer.Demo>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                incididunt ut labore et dolore magna aliqua. Amet cursus sit amet dictum sit amet justo
                                donec enim. Sit amet porttitor eget dolor morbi non. Ipsum consequat nisl vel pretium
                                lectus quam id leo in. Duis ut diam quam nulla porttitor massa. Id volutpat lacus
                                laoreet non. Etiam non quam lacus suspendisse faucibus. Mollis aliquam ut porttitor leo
                                a diam. Auctor urna nunc id cursus metus aliquam. In dictum non consectetur a erat nam
                                at lectus. Facilisi cras fermentum odio eu feugiat. Risus commodo viverra maecenas
                                accumsan. Interdum velit euismod in pellentesque massa placerat duis ultricies. Ac ut
                                consequat semper viverra nam libero justo. Dapibus ultrices in iaculis nunc sed augue
                                lacus viverra.
                            </ComponentHelpers.Drawer.Demo>
                            <Select placeholder='Выберите значение'>
                                <Select.Option>Значение 1</Select.Option>
                                <Select.Option>Значение 2</Select.Option>
                                <Select.Option>Значение 3</Select.Option>
                                <Select.Option>Значение 4</Select.Option>
                                <Select.Option>Значение 5</Select.Option>
                            </Select>
                        </Drawer.Body>
                        <Drawer.Footer>
                            <Groups>
                                <Button size='l' design='outline'>
                                    Button example
                                </Button>
                                <Button size='l' design='accent' onClick={() => setOpen(false)}>
                                    Close
                                </Button>
                            </Groups>
                        </Drawer.Footer>
                    </Drawer.Layout>
                </Drawer>
            </>
        );
    }
}
```

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

### Alarm Component Usage Example

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/Alarm/READMEENG.md

Demonstrates how to use the Alarm component with a 'success' design.

```jsx
<Alarm design='success' />
```

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

### React Usage Example for Viennaui Drawer

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/Drawer/README.md

A complete React example showcasing the integration of the Viennaui Drawer component. It includes state management for drawer visibility, passing custom `testId` props, and structuring content within the Drawer's layout, header, body, and footer.

```javascript
{
    () => {
        const [isOpen, setOpen] = React.useState(false);
        return (
            <>
                <Button onClick={() => setOpen(true)}>Show Drawer</Button>
                <Drawer isOpen={isOpen} onClose={() => setOpen(false)} testId={{ btnClose: 'btnClose', overlay: 'overlay' }}>
                    <Drawer.Layout>
                        <Drawer.Head>
                            <Drawer.Title>Enter SMS-code</Drawer.Title>
                            <Drawer.SubTitle>Drawer SubHeader</Drawer.SubTitle>
                        </Drawer.Head>
                        <Drawer.Body>
                            <ComponentHelpers.Drawer.Demo>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                incididunt ut labore et dolore magna aliqua. Amet cursus sit amet dictum sit amet justo
                                donec enim. Sit amet porttitor eget dolor morbi non. Ipsum consequat nisl vel pretium
                                lectus quam id leo in. Duis ut diam quam nulla porttitor massa. Id volutpat lacus
                                laoreet non. Etiam non quam lacus suspendisse faucibus. Mollis aliquam ut porttitor leo
                                a diam. Auctor urna nunc id cursus metus aliquam. In dictum non consectetur a erat nam
                                at lectus. Facilisi cras fermentum odio eu feugiat. Risus commodo viverra maecenas
                                accumsan. Interdum velit euismod in pellentesque massa placerat duis ultricies. Ac ut
                                consequat semper viverra nam libero justo. Dapibus ultrices in iaculis nunc sed augue
                                lacus viverra.
                            </ComponentHelpers.Drawer.Demo>
                            <Select placeholder='Выберите значение'>
                                <Select.Option>Значение 1</Select.Option>
                                <Select.Option>Значение 2</Select.Option>
                                <Select.Option>Значение 3</Select.Option>
                                <Select.Option>Значение 4</Select.Option>
                                <Select.Option>Значение 5</Select.Option>
                            </Select>
                        </Drawer.Body>
                        <Drawer.Footer>
                            <Groups>
                                <Button size='l' design='outline'>
                                    Button example
                                </Button>
                                <Button size='l' design='accent' onClick={() => setOpen(false)}>
                                    Close
                                </Button>
                            </Groups>
                        </Drawer.Footer>
                    </Drawer.Layout>
                </Drawer>
            </>
        );
    }
}
```

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

### Basic Textarea Usage

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/Textarea/README.md

Shows a basic example of using the Textarea component with a placeholder.

```javascript
<Textarea placeholder="Многострочное поле для ввода текста" />
```

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

### Basic Timer Usage

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/Timer/README.md

A simple example of rendering the Timer component without any props.

```html
<Timer />
```

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

### useInterval Hook Example

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/Timer/README.md

Demonstrates the usage of the `useInterval` hook to manage a counter that increments every second. The timer can be started or stopped by clicking a button.

```javascript
() => {
    const [count, update] = React.useState(0);
    const [stoped, stop] = React.useState(false);
    useInterval(
        () => {
            update(count + 1);
        },
        stoped ? null : 1000
    );
    return (
        <Groups>
            <div>{count}</div>
            <Button size='s' onClick={() => stop(!stoped)}>
                Start / Stop timer
            </Button>
        </Groups>
    );
}
```

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

### Aligning Search Suggestions

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/Search/README.md

Demonstrates how to align search suggestions to the start or end of the input field using the 'align' parameter. This example uses React state and callbacks to manage the search input and suggestions.

```jsx
    {
        const [value, setValue] = React.useState('');
        const [suggests, setSuggests] = React.useState();
        const handleChange = React.useCallback((data) => {
            const mock = [
                'Райффайзен банк',
                'Райффайзен IT',
                'Иванов Иван Иванович',
                'Иванов Иван Петрович',
                'Ивановская область',
                'Рамблер',
            ];
            const regexp = new RegExp(`^${data.value.toUpperCase()}`);
            const temp = (data.value && mock.filter((m) => regexp.test(m.toUpperCase()))) || [];
            setSuggests(temp);
            setValue(data.value);
        }, []);
        const handleSelect = React.useCallback((data) => {
            setValue(data.value);
        }, []);
        return (
                <Search
                    suggests={suggests}
                    value={value}
                    placeholder={'Начните ввод'}
                    allowClear
                    onChange={handleChange}
                    fitOptions={false}
                    align={'end'}
                    onSelect={handleSelect}
                />
        );
    }
```

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

### Basic Wizard Usage

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/Wizard/README.md

Demonstrates the basic structure of the Wizard component with multiple steps and a footer.

```javascript
<Wizard value={0}>
    <Wizard.Body>
        <Wizard.Step title='Шаг 1'>1</Wizard.Step>
        <Wizard.Step title='Шаг 2'>2</Wizard.Step>
        <Wizard.Step title='Шаг 3'>3</Wizard.Step>
        <Wizard.Step title='Шаг 4'>4</Wizard.Step>
        <Wizard.Step title='Шаг 5'>5</Wizard.Step>
    </Wizard.Body>
    <Wizard.Footer>Footer</Wizard.Footer>
</Wizard>
```

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

### ComboButton Positioning Examples

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/ComboButton/README.md

Demonstrates various combinations of 'align' and 'float' properties for the ComboButton component to control its positioning relative to the parent. 'align' controls the vertical or horizontal alignment, while 'float' controls the start or end alignment.

```jsx
{
    const options = Array.from(Array(5).keys()).map((i) => (
        <ComboButton.Option key={i}>Option Option {i}</ComboButton.Option>
    ));
    return (
        <Groups>
            <ComboButton options={options} align={'vertical'} float={'start'} fitOptions={false} >
                <Button>Button</Button>
            </ComboButton>
            <ComboButton options={options} align={'vertical'} float={'end'} fitOptions={false} >
                <Button>Button</Button>
            </ComboButton>
            <ComboButton options={options} align={'horizontal'} float={'start'} fitOptions={false} >
                <Button>Button</Button>
            </ComboButton>
            <ComboButton options={options} align={'horizontal'} float={'end'} fitOptions={false} >
                <Button>Button</Button>
            </ComboButton>
            <ComboButton options={options} align={'top'} float={'start'} fitOptions={false} >
                <Button>Button</Button>
            </ComboButton>
            <ComboButton options={options} align={'bottom'} float={'end'} fitOptions={false} >
                <Button>Button</Button>
            </ComboButton>
            <ComboButton options={options} align={'left'} float={'start'} fitOptions={false} >
                <Button>Button</Button>
            </ComboButton>
            <ComboButton options={options} align={'right'} float={'end'} fitOptions={false} >
                <Button>Button</Button>
            </ComboButton>
        </Groups>
    );
}
```

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

### Tour Component Usage Example

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/Tour/README.md

Demonstrates how to use the Tour component in a React application. It includes state management for tour visibility and defines an array of steps with various configurations like selectors, content, and event handlers.

```javascript
{
    () => {
        const [showTour, setShowTour] = React.useState(false);
        const steps = [
            {
                selector: '.start-tour',
                highlightedSelectors: [],
                type: 'accent',
                content: {
                    title: 'Начнем знакомиться?',
                    description: 'Это accent',
                },
                backButtonText: 'Позже',
                nextButtonText: 'Начнем',
            },
            {
                selector: '.fist-step',
                content: {
                    title: 'Title 1',
                    description: 'description 1',
                    image: 'https://insider-test.raiffeisen.ru/uploads/article/11320/previews/detail.jpg?1725975927224',
                },
                maskRadius: 8,
                onEnter: () => {
                    console.log('ENTER');
                },
                onLeave: () => {
                    console.log('LEAVE');
                },
            },
            {
                selector: '.second-step',
                content: {
                    title: 'Title 2',
                    description: 'description 2',
                },
                maskRadius: 8,
                position: 'right'
            },
            {
                selector: '.third-step',
                type: 'accent',
                content: {
                    title: 'Title 3',
                    description: 'description 3',
                },
                position: 'left',
            },
            {
                selector: '.fourth-step',
                content: {
                    title: 'Title 4',
                    description: 'description 4',
                },
                position: 'bottom'
            },
            {
                selector: '.fifth-step',
                content: {
                    title: 'Title 5',
                    description: 'description 5',
                },
                onLeave: () => {
                    console.log('CLOSE TOUR');
                },
                position: 'left'
            },
        ];
        return (
            <div>
                <Tour
                    isOpen={showTour}
                    steps={steps}
                    onChangeIsOpen={(val) => setShowTour(val)}
                />
                <Flex direction={'column'} alignItems={'flex-start'} gap={'s16'} style={{ width: '100%', padding: '24px' }}>
                    <Button className={'start-tour'} onClick={() => setShowTour(true)}>Show tour</Button>
                    <Flex direction={'column'} gap={'s16'} style={{ width: '100%' }}>
                        <Logotype className='fist-step' size='s' style={{ alignSelf: 'flex-end' }} />
                        <Logotype className='second-step' size='m' style={{ alignSelf: 'flex-start' }} />
                        <Logotype className='third-step' size='l' style={{ alignSelf: 'flex-end' }} />
                        <Logotype className='fourth-step' size='xl' style={{ alignSelf: 'flex-start' }} />
                        <Logotype className='fifth-step' size='xxl' style={{ alignSelf: 'center' }} />
                    </Flex>
                </Flex>
            </div>
        );
    }
}
```

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

### Timer with Start and Stop Values

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/Timer/README.md

Configures the timer to start at 100 and stop at 110 using the 'start' and 'stop' props.

```html
<Timer start={100} stop={110} />
```

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

### InputSlider Usage Example

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/InputSlider/README.md

Demonstrates how to use the InputSlider component with state management, event handling, and custom tags. It showcases setting min, max, initial value, and handling value changes.

```javascript
{
    () => {
        const [value, setValue] = React.useState(50);
        const changeHandler = (e) => {
            setValue(parseInt(e));
        };
        return (
            <InputSlider
                min={20}
                max={100}
                lazy={false}
                onChange={changeHandler}
                value={value}
                postfix='15%'>
                <InputSlider.Tag val={20}>20 $</InputSlider.Tag>
                <InputSlider.Tag val={50}>50 $</InputSlider.Tag>
                <InputSlider.Tag val={100}>100 $</InputSlider.Tag>
            </InputSlider>
        );
    }
}
```

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

### Interactive Filter Example

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/Filter/README.md

An example of an interactive Filter component where items can be removed.

```javascript
() => {
    const [state, setState] = React.useState({ a: true, b: true, c: true });
    return (
        <Groups>
            <Button design='accent' onClick={() => setState({ a: true, b: true, c: true })}>
                Reset
            </Button>
            <Filter>
                {state.a && (
                    <Filter.Item onDelete={() => setState((old) => ({ ...old, ...{ a: false } }))}>Пол</Filter.Item>
                )}
                {state.b && (
                    <Filter.Item maxWidth={100} onDelete={() => setState((old) => ({ ...old, ...{ b: false } }))}>
                        Рост очень высокий
                    </Filter.Item>
                )}
                {state.c && (
                    <Filter.Item onDelete={() => setState((old) => ({ ...old, ...{ c: false } }))}>Вес</Filter.Item>
                )}
            </Filter>
        </Groups>
    );
}
```

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

### Horizontal Divider Example

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/Divider/README.md

Provides an example of a horizontal Divider used to separate content blocks.

```javascript
{() => {
        return(
            <div>
                    <Groups>
                        <IconContainer size="s" color="sochi10">
                            <ManPersonIcon />
                        </IconContainer>
                        <div style={{display: "flex", flexDirection: "column"}}>
                            <h5 style={{margin: 0}} > Твердислав Николаевич Пьянка</h5>
                            <P  color='seattle100'> Администратор</P>
                        </div>
                    </Groups>
                    <Divider />
                     <Groups>
                        <IconContainer size="s" color="sochi10">
                            <ManPersonIcon />
                        </IconContainer>
                        <div style={{display: "flex", flexDirection: "column"}}>
                            <h5 style={{margin: 0}}> Анатолий Петрович Непонятых</h5>
                            <P  color='seattle100'> Оператор </P>
                         </div>
                    </Groups>
            </div>
        )
    }}
```

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

### FileLoader Usage Example

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/FileLoader/README.md

Demonstrates how to use the FileLoader component with state management for files. It includes handlers for adding new files and deleting existing ones.

```javascript
() => {
    const [files, setFiles] = React.useState([]);
    const changeHandler = React.useCallback(
        ({ value: newFiles }) => {
            setFiles([...files, ...newFiles]);
        },
        [files]
    );
    const deleteHandler = React.useCallback(
        (file) => {
            setFiles(files.filter((f) => f !== file));
        },
        [files]
    );
    return (
        <FileLoader onChange={changeHandler} content={'Перетащите файлы'}>
            {files.map((f, i) => (
                <File key={i} file={f} onDelete={deleteHandler} />
            ))}
        </FileLoader>
    );
}
```

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

### Monthpicker Localization Example

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/Monthpicker/README.md

Provides an example of localizing the Monthpicker component by passing a locale object from `date-fns/locale` and custom localization strings.

```javascript
import React from 'react';
import { Monthpicker } from 'vienna-ui';
import { enGB } from 'date-fns/locale'; // Assuming enGB is imported

function App() {
    const [value, setValue] = React.useState();
    const handleChange = React.useCallback(
        ({ value }) => setValue(value),
        []
    );
    const calendarLocalization = {
        'ds.calendar.month.january': 'Jan.',
        'ds.calendar.month.february': 'Feb.',
        'ds.calendar.month.march': 'Mar.',
        'ds.calendar.month.april': 'Apr.',
        'ds.calendar.month.may': 'May',
        'ds.calendar.month.june': 'Jun.',
        'ds.calendar.month.july': 'Jul',
        'ds.calendar.month.august': 'Aug.',
        'ds.calendar.month.september': 'Sep.',
        'ds.calendar.month.october': 'Oct.',
        'ds.calendar.month.november': 'Nov.',
        'ds.calendar.month.december': 'Dec.'
    };
    return (
        <Monthpicker
            value={value}
            placeholder="Choose month"
            onChange={handleChange}
            locale={enGB}
            localization={calendarLocalization}
        />
    );
}
```

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

### Basic Steps Usage

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/Steps/README.md

Shows the fundamental structure for using the Steps component with individual Steps.Step elements.

```javascript
<Steps>
    <Steps.Step header='Title' text='Subtitle' />
    <Steps.Step status='waiting' header='Title' text='Subtitle' />
    <Steps.Step status='waiting' header='Title' text='Subtitle' />
</Steps>
```

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

### Dynamic Option Loading

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/MultiselectWithSearch/README.md

Demonstrates how to load options dynamically, for example, after an API call or a delay. This example uses `setTimeout` to simulate fetching options.

```jsx
const [options, setOptions] = React.useState([]);
const [values, setValues] = React.useState([]);
const handleSelect = ({ value }) => setValues(value);
React.useEffect(() => {
    setTimeout(() => {
        setOptions(['Значение 1', 'Значение большое 2', 'Значение еще больше 3', 'Знач. 4', 'Значение 5']);
    }, 3000);
}, []);
return (
    <Groups design='vertical'>
        <MultiselectWithSearch
            placeholder='Выберите значение'
            options={options}
            values={values}
            design='material'
            onSelect={handleSelect}
        />
    </Groups>
);
```

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

### Nested Modals Example

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/Modal/README.md

Demonstrates how to implement nested modals, where one modal can trigger the opening of another. This example uses `ComponentHelpers.Modal.confirmModal` to show a confirmation dialog from within a modal.

```jsx
{
    () => {
        const showModal = React.useCallback(() => {
            ComponentHelpers.Modal.confirmModal('Продолжить выполнение операции?').then(console.log);
        }, []);
        const [open, close] = useModal(
            <Modal.Layout>
                <ComponentHelpers.Modal.Image />
                <Modal.Head align={'center'}>
                    <Modal.Title>Modal header</Modal.Title>
                </Modal.Head>
                <Modal.Body>
                    <div style={{ textAlign: 'center' }}>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua.
                    </div>
                </Modal.Body>
                <Modal.Footer align={'center'}>
                    <Button size='l' design='accent' onClick={showModal}>
                        Show modal
                    </Button>
                </Modal.Footer>
            </Modal.Layout>
        );
        return (
            <Groups design='vertical'>
                <Button onClick={open}>Show modal</Button>
            </Groups>
        );
    }
}
```

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

### Drawer Component Usage Example

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/Drawer/README.md

Demonstrates the basic structure and usage of the Drawer component, including its layout, body, footer, and interactive buttons. It shows how to manage the drawer's open/closed state using a toggle.

```jsx
<>
    <Drawer open={toggle} onClose={() => setToggle(false)}>
        <Drawer.Layout>
            <Drawer.Header>
                <Drawer.Title>Drawer Title</Drawer.Title>
                <Drawer.CloseButton onClick={() => setToggle(false)} />
            </Drawer.Header>
            <Drawer.Body>
                {/* Content of the drawer */}
                <ComponentHelpers.Drawer.Demo />
            </Drawer.Body>
            <Drawer.Footer>
                <Groups>
                    <Button size='l' design='outline' onClick={() => setToggle(!toggle)}>
                        Button example
                    </Button>
                    <Button size='l' design='accent' onClick={() => setOpen(false)}>
                        Close
                    </Button>
                </Groups>
            </Drawer.Footer>
        </Drawer.Layout>
    </Drawer>
</>
```

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

### Popover Component Updates

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/CHANGELOG_LLM.md

Shows the removal of 'fontSize' and 'fontWeight' props from the Popover component. These props were present in the 'before' example but omitted in the 'after' example.

```jsx
return (
        <Body>
            <Popover
                placement="right"
                action="click"
                header="This is header"
                content="Ut ut dui non ipsum pharetra aliquam id in libero. Aenean placerat leo nec ex pharetra finibus. Nunc id turpis eu risus rhoncus cursus quis efficitur sapien. Donec vitae arcu at lectus placerat fringilla."
                fontSize={18}
                fontWeight={700}
            >
                {ref => <Button forwardedRef={ref}>Click me</Button>}
            </Popover>
            <Popover
                design="dark"
                placement="bottom"
                action="hover"
                header="This is header"
                content="Ut ut dui non ipsum pharetra aliquam id in libero. Aenean placerat leo nec ex pharetra finibus. Nunc id turpis eu risus rhoncus cursus quis efficitur sapien. Donec vitae arcu at lectus placerat fringilla."
            >
                {ref => <Button forwardedRef={ref}>Hover me</Button>}
            </Popover>
        </Body>
    )
```

```jsx
return (
        <Body>
            <Popover
                placement="right"
                action="click"
                header="This is header"
                content="Ut ut dui non ipsum pharetra aliquam id in libero. Aenean placerat leo nec ex pharetra finibus. Nunc id turpis eu risus rhoncus cursus quis efficitur sapien. Donec vitae arcu at lectus placerat fringilla."
            >
                {ref => <Button forwardedRef={ref}>Click me</Button>}
            </Popover>
            <Popover
                design="dark"
                placement="bottom"
                action="hover"
                header="This is header"
                content="Ut ut dui non ipsum pharetra aliquam id in libero. Aenean placerat leo nec ex pharetra finibus. Nunc id turpis eu risus rhoncus cursus quis efficitur sapien. Donec vitae arcu at lectus placerat fringilla."
            >
                {ref => <Button forwardedRef={ref}>Hover me</Button>}
            </Popover>
        </Body>
    )
```

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

### Skeleton Circle Design Examples

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/Skeleton/README.md

Shows examples of the 'circle' design for Skeleton, with variations in size ('s', 'm', 'l', 'xl') for circular placeholders.

```html
<Groups>
    <Skeleton design="circle" size="s"></Skeleton>
    <Skeleton design="circle" size="m"></Skeleton>
    <Skeleton design="circle" size="l"></Skeleton>
    <Skeleton design="circle" size="xl"></Skeleton>
</Groups>
```

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

### Basic Collapse Usage

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/Collapse/README.md

Demonstrates the basic usage of the Collapse component with a header and content.

```jsx
<Collapse header='The text for the label'>Content: text, table, image or another component</Collapse>
```

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

### Basic Highlight Usage

Source: https://github.com/raiffeisen-dgtl/viennaui/blob/master/src/Highlight/README.md

Demonstrates the basic usage of the Highlight component with a query string.

```javascript
{
    () => {
        return (
            <Highlight query={'знач'}>Значение</Highlight>
        );
    }
}
```