@alfalab/core-components-radio-group 3.0.8 → 4.0.0

package/modern/Component.responsive.js

@@ -0,0 +1,16 @@
+import React, { forwardRef } from 'react';
+import { useMatchMedia } from '@alfalab/core-components-mq/modern';
+import { RadioGroupDesktop } from './Component.desktop.js';
+import { RadioGroupMobile } from './Component.mobile.js';
+import './components/base-radio-group/Component.js';
+import 'classnames';
+import '@alfalab/hooks';
+
+const RadioGroup = forwardRef(({ breakpoint = 1024, ...restProps }, ref) => {
+    const query = `(min-width: ${breakpoint}px)`;
+    const [isDesktop] = useMatchMedia(query);
+    const Component = isDesktop ? RadioGroupDesktop : RadioGroupMobile;
+    return React.createElement(Component, { ref: ref, ...restProps });
+});
+
+export { RadioGroup };

package/modern/{Component.d.ts → components/base-radio-group/Component.d.ts}

@@ -3,7 +3,7 @@ import React from 'react';
 import { ChangeEvent, FocusEvent, MouseEvent, ReactNode } from "react";
 type Direction = 'horizontal' | 'vertical';
 type RadioGroupType = 'radio' | 'tag';
-type RadioGroupProps = {
+type BaseRadioGroupProps = {
     /**
      * Заголовок группы
      */
@@ -63,6 +63,12 @@ type RadioGroupProps = {
      * Value выбранного дочернего элемента
      */
     value?: string | null;
+    /**
+     * Основные стили компонента.
+     */
+    styles: {
+        [key: string]: string;
+    };
 };
-declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
-export { Direction, RadioGroupType, RadioGroupProps, RadioGroup };
+declare const BaseRadioGroup: React.ForwardRefExoticComponent<BaseRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+export { Direction, RadioGroupType, BaseRadioGroupProps, BaseRadioGroup };

package/modern/{Component.js → components/base-radio-group/Component.js}

@@ -2,10 +2,10 @@ import React, { forwardRef, useState, Children, isValidElement, cloneElement } f
 import cn from 'classnames';
 import { useDidUpdateEffect } from '@alfalab/hooks';
 
-const styles = {"component":"radio-group__component_phgvy","error":"radio-group__error_phgvy","radioList":"radio-group__radioList_phgvy","vertical":"radio-group__vertical_phgvy","radio":"radio-group__radio_phgvy","horizontal":"radio-group__horizontal_phgvy","tagLabel":"radio-group__tagLabel_phgvy","label":"radio-group__label_phgvy","sub":"radio-group__sub_phgvy","errorMessage":"radio-group__errorMessage_phgvy","hint":"radio-group__hint_phgvy","hiddenInput":"radio-group__hiddenInput_phgvy"};
+const commonStyles = {"component":"radio-group__component_laaha","error":"radio-group__error_laaha","tag":"radio-group__tag_laaha","radioList":"radio-group__radioList_laaha","vertical":"radio-group__vertical_laaha","radio":"radio-group__radio_laaha","horizontal":"radio-group__horizontal_laaha","tagLabel":"radio-group__tagLabel_laaha","label":"radio-group__label_laaha","sub":"radio-group__sub_laaha","errorMessage":"radio-group__errorMessage_laaha","hint":"radio-group__hint_laaha","hiddenInput":"radio-group__hiddenInput_laaha"};
 require('./index.css')
 
-const RadioGroup = forwardRef(({ children, className, direction = 'vertical', label, error, hint, onChange, onBlur, onFocus, type = 'radio', dataTestId, disabled = false, name, value, }, ref) => {
+const BaseRadioGroup = forwardRef(({ children, className, direction = 'vertical', label, error, hint, onChange, onBlur, onFocus, type = 'radio', dataTestId, disabled = false, name, value, styles, }, ref) => {
     const [stateValue, setStateValue] = useState('');
     useDidUpdateEffect(() => {
         setStateValue(value);
@@ -25,7 +25,7 @@ const RadioGroup = forwardRef(({ children, className, direction = 'vertical', la
             ...child.props,
             checked: isChecked(childValue),
             name,
-            className: cn(childClassName, styles.radio),
+            className: cn(childClassName, commonStyles.radio),
         });
     };
     const renderTag = (child) => {
@@ -39,21 +39,23 @@ const RadioGroup = forwardRef(({ children, className, direction = 'vertical', la
             name,
             tabIndex: -1,
         });
-        return (React.createElement("label", { className: cn(styles.radio, styles.tagLabel) },
-            React.createElement("input", { type: 'radio', autoComplete: 'off', onChange: (event) => handleChange(event, childValue), disabled: disabled || child.props.disabled, name: name, checked: checked, className: styles.hiddenInput, value: child.props.value }),
+        return (React.createElement("label", { className: cn(commonStyles.radio, commonStyles.tagLabel) },
+            React.createElement("input", { type: 'radio', autoComplete: 'off', onChange: (event) => handleChange(event, childValue), disabled: disabled || child.props.disabled, name: name, checked: checked, className: commonStyles.hiddenInput, value: child.props.value }),
             clone));
     };
     const errorMessage = typeof error === 'boolean' ? '' : error;
-    return (React.createElement("div", { className: cn(styles.component, styles[type], styles[direction], { [styles.error]: error }, className), "data-test-id": dataTestId, ref: ref },
-        label ? React.createElement("span", { className: styles.label }, label) : null,
-        children ? (React.createElement("div", { className: styles.radioList, onBlur: onBlur, onFocus: onFocus }, Children.map(children, (child) => {
+    return (React.createElement("div", { className: cn(commonStyles.component, commonStyles[type], commonStyles[direction], { [commonStyles.error]: error }, className), "data-test-id": dataTestId, ref: ref },
+        label ? (React.createElement("span", { className: cn(commonStyles.label, styles.label) }, label)) : null,
+        children ? (React.createElement("div", { className: cn(commonStyles.radioList, {
+                [styles.radioList]: type === 'radio',
+            }), onBlur: onBlur, onFocus: onFocus }, Children.map(children, (child) => {
             if (isValidElement(child)) {
                 return type === 'radio' ? renderRadio(child) : renderTag(child);
             }
             return null;
         }))) : null,
-        errorMessage && (React.createElement("span", { className: cn(styles.sub, styles.errorMessage), role: 'alert' }, errorMessage)),
-        hint && !errorMessage && (React.createElement("span", { className: cn(styles.sub, styles.hint) }, hint))));
+        errorMessage && (React.createElement("span", { className: cn(commonStyles.sub, styles.sub, commonStyles.errorMessage), role: 'alert' }, errorMessage)),
+        hint && !errorMessage && (React.createElement("span", { className: cn(commonStyles.sub, styles.sub, commonStyles.hint) }, hint))));
 });
 
-export { RadioGroup };
+export { BaseRadioGroup };

package/modern/{index.css → components/base-radio-group/index.css}

@@ -1,4 +1,4 @@
-/* hash: qfvvr */
+/* hash: 2q0m4 */
 :root {
 } /* deprecated */ :root {
     --color-light-border-link: #0072ef;
@@ -28,57 +28,61 @@
     --radio-group-error-color: var(--color-light-text-negative);
     --radio-group-hint-color: var(--color-light-text-secondary);
     --radio-group-label-color: var(--color-light-text-primary);
-} .radio-group__component_phgvy {
+
+    /* mobile */
+} .radio-group__component_laaha {
     display: flex;
     flex-direction: column;
-} .radio-group__error_phgvy {
-    padding-left: var(--gap-xs);
-    border-left: 1px solid var(--radio-group-error-color);
-} .radio-group__radioList_phgvy {
+} .radio-group__error_laaha {
+    padding-left: var(--gap-s);
+    border-left: 1px solid var(--radio-group-error-color)
+} .radio-group__error_laaha.radio-group__tag_laaha {
+        padding-left: var(--gap-xs);
+    } .radio-group__radioList_laaha {
     display: flex;
-} .radio-group__vertical_phgvy .radio-group__radioList_phgvy {
+} .radio-group__vertical_laaha .radio-group__radioList_laaha {
     flex-direction: column;
     align-items: flex-start;
-} .radio-group__vertical_phgvy .radio-group__radio_phgvy {
+} .radio-group__vertical_laaha .radio-group__radio_laaha {
     margin-bottom: var(--gap-m)
-} .radio-group__vertical_phgvy .radio-group__radio_phgvy:last-child {
+} .radio-group__vertical_laaha .radio-group__radio_laaha:last-child {
         margin-bottom: 0;
-    } .radio-group__horizontal_phgvy .radio-group__radioList_phgvy {
+    } .radio-group__horizontal_laaha .radio-group__radioList_laaha {
     flex-wrap: wrap;
     margin-bottom: var(--gap-xs-neg);
-} .radio-group__horizontal_phgvy .radio-group__radio_phgvy {
+} .radio-group__horizontal_laaha .radio-group__radio_laaha {
     margin-right: var(--gap-xl);
     margin-bottom: var(--gap-xs);
-} .radio-group__horizontal_phgvy .radio-group__tagLabel_phgvy {
+} .radio-group__horizontal_laaha .radio-group__tagLabel_laaha {
     margin-right: var(--gap-xs);
-} .radio-group__horizontal_phgvy .radio-group__radio_phgvy:last-child,
-.radio-group__horizontal_phgvy .radio-group__tagLabel_phgvy:last-child {
+} .radio-group__horizontal_laaha .radio-group__radio_laaha:last-child,
+.radio-group__horizontal_laaha .radio-group__tagLabel_laaha:last-child {
     margin-right: 0;
-} .radio-group__label_phgvy {
+} .radio-group__label_laaha {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     margin-bottom: var(--gap-s);
     color: var(--radio-group-label-color);
-} .radio-group__sub_phgvy {
+} .radio-group__sub_laaha {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     margin-top: var(--gap-s);
-} .radio-group__errorMessage_phgvy {
+} .radio-group__errorMessage_laaha {
     color: var(--radio-group-error-color);
-} .radio-group__hint_phgvy {
+} .radio-group__hint_laaha {
     color: var(--radio-group-hint-color);
-} .radio-group__hiddenInput_phgvy {
+} .radio-group__hiddenInput_laaha {
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     opacity: 0
-} .radio-group__hiddenInput_phgvy:focus ~ button {
+} .radio-group__hiddenInput_laaha:focus ~ button {
         outline: 2px solid var(--focus-color);
         outline-offset: 2px;
-    } .radio-group__tagLabel_phgvy {
+    } .radio-group__tagLabel_laaha {
     position: relative;
     max-width: 100%;
 }

package/modern/components/base-radio-group/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/modern/components/base-radio-group/index.js

@@ -0,0 +1,4 @@
+export { BaseRadioGroup } from './Component.js';
+import 'react';
+import 'classnames';
+import '@alfalab/hooks';

package/modern/desktop.css

@@ -0,0 +1,28 @@
+/* hash: 8ejm5 */
+:root {
+} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} :root {
+    --radio-group-sub-padding-left: 0;
+    --radio-group-list-padding-left: 0;
+
+    /* mobile */
+} .radio-group__radioList_1ud02 {
+    padding-left: var(--radio-group-list-padding-left);
+} .radio-group__label_1ud02 {
+    padding-left: var(--radio-group-sub-padding-left);
+} .radio-group__sub_1ud02 {
+    padding-left: var(--radio-group-sub-padding-left);
+}

package/modern/desktop.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.desktop";
+export {};

package/modern/desktop.js

@@ -0,0 +1,5 @@
+export { RadioGroupDesktop } from './Component.desktop.js';
+import 'react';
+import './components/base-radio-group/Component.js';
+import 'classnames';
+import '@alfalab/hooks';

package/modern/index.d.ts

@@ -1 +1,2 @@
-export * from "./Component";
+export * from "./Component.responsive";
+export {};

package/modern/index.js

@@ -1,4 +1,8 @@
-export { RadioGroup } from './Component.js';
+export { RadioGroup } from './Component.responsive.js';
 import 'react';
+import '@alfalab/core-components-mq/modern';
+import './Component.desktop.js';
+import './components/base-radio-group/Component.js';
 import 'classnames';
 import '@alfalab/hooks';
+import './Component.mobile.js';

package/modern/mobile.css

@@ -0,0 +1,30 @@
+/* hash: 1ptzr */
+:root {
+} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-3xs: 2px;
+    --gap-2xs: 4px;
+} :root {
+} :root {
+} :root {
+
+    /* mobile */
+    --radio-group-mobile-sub-padding-left: var(--gap-2xs);
+    --radio-group-mobile-list-padding-left: var(--gap-3xs);
+} .radio-group__radioList_srwz3 {
+    padding-left: var(--radio-group-mobile-list-padding-left);
+} .radio-group__label_srwz3 {
+    padding-left: var(--radio-group-mobile-sub-padding-left);
+} .radio-group__sub_srwz3 {
+    padding-left: var(--radio-group-mobile-sub-padding-left);
+}

package/modern/mobile.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.mobile";
+export {};

package/modern/mobile.js

@@ -0,0 +1,5 @@
+export { RadioGroupMobile } from './Component.mobile.js';
+import 'react';
+import './components/base-radio-group/Component.js';
+import 'classnames';
+import '@alfalab/hooks';

package/package.json

@@ -1,13 +1,30 @@
 {
     "name": "@alfalab/core-components-radio-group",
-    "version": "3.0.8",
+    "version": "4.0.0",
     "description": "Radio group",
     "keywords": [],
     "license": "MIT",
     "main": "index.js",
     "module": "./esm/index.js",
-    "scripts": {
-        "postinstall": "node -e \"if (require('fs').existsSync('./send-stats.js')){require('./send-stats.js')} \""
+    "exports": {
+        ".": {
+            "import": "./esm/index.js",
+            "require": "./index.js"
+        },
+        "./mobile": {
+            "import": "./esm/mobile.js",
+            "require": "./mobile.js"
+        },
+        "./desktop": {
+            "import": "./esm/desktop.js",
+            "require": "./desktop.js"
+        },
+        "./esm": "./esm/index.js",
+        "./cssm": "./cssm/index.js",
+        "./modern": "./modern/index.js",
+        "./esm/*": "./esm/*",
+        "./cssm/*": "./cssm/*",
+        "./modern/*": "./modern/*"
     },
     "publishConfig": {
         "access": "public",
@@ -18,6 +35,7 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
+        "@alfalab/core-components-mq": "^4.2.0",
         "@alfalab/hooks": "^1.13.0",
         "classnames": "^2.3.1",
         "tslib": "^2.4.0"

package/src/Component.desktop.tsx

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+
+import { BaseRadioGroup, BaseRadioGroupProps } from './components/base-radio-group';
+
+import styles from './desktop.module.css';
+
+export type RadioGroupDesktopProps = Omit<BaseRadioGroupProps, 'styles'>;
+
+export const RadioGroupDesktop = forwardRef<HTMLDivElement, RadioGroupDesktopProps>(
+    (props, ref) => <BaseRadioGroup {...props} ref={ref} styles={styles} />,
+);

package/src/Component.mobile.tsx

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+
+import { BaseRadioGroup, BaseRadioGroupProps } from './components/base-radio-group';
+
+import styles from './mobile.module.css';
+
+export type RadioGroupMobileProps = Omit<BaseRadioGroupProps, 'styles'>;
+
+export const RadioGroupMobile = forwardRef<HTMLDivElement, RadioGroupMobileProps>((props, ref) => (
+    <BaseRadioGroup {...props} ref={ref} styles={styles} />
+));

package/src/Component.responsive.tsx

@@ -0,0 +1,27 @@
+import React, { forwardRef } from 'react';
+
+import { useMatchMedia } from '@alfalab/core-components-mq';
+
+import { BaseRadioGroupProps } from './components/base-radio-group';
+import { RadioGroupDesktop } from './Component.desktop';
+import { RadioGroupMobile } from './Component.mobile';
+
+export type RadioGroupProps = Omit<BaseRadioGroupProps, 'styles'> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+
+export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
+    ({ breakpoint = 1024, ...restProps }, ref) => {
+        const query = `(min-width: ${breakpoint}px)`;
+
+        const [isDesktop] = useMatchMedia(query);
+
+        const Component = isDesktop ? RadioGroupDesktop : RadioGroupMobile;
+
+        return <Component ref={ref} {...restProps} />;
+    },
+);

package/src/components/base-radio-group/Component.tsx

@@ -0,0 +1,237 @@
+import React, {
+    ChangeEvent,
+    Children,
+    cloneElement,
+    FocusEvent,
+    forwardRef,
+    isValidElement,
+    MouseEvent,
+    ReactElement,
+    ReactNode,
+    useState,
+} from 'react';
+import cn from 'classnames';
+
+import { useDidUpdateEffect } from '@alfalab/hooks';
+
+import commonStyles from './index.module.css';
+
+export type Direction = 'horizontal' | 'vertical';
+export type RadioGroupType = 'radio' | 'tag';
+
+export type BaseRadioGroupProps = {
+    /**
+     * Заголовок группы
+     */
+    label?: ReactNode;
+
+    /**
+     * Направление
+     */
+    direction?: Direction;
+
+    /**
+     * Тип компонента
+     */
+    type?: RadioGroupType;
+
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+
+    /**
+     * Отображение ошибки
+     */
+    error?: ReactNode | boolean;
+
+    /**
+     * Текст подсказки снизу
+     */
+    hint?: ReactNode;
+
+    /**
+     * Дочерние элементы. Ожидаются компоненты `Radio` или `Tag`
+     */
+    children: ReactNode;
+
+    /**
+     * Обработчик изменения значения 'checked' одного из дочерних компонентов
+     */
+    onChange?: (
+        event: ChangeEvent | MouseEvent,
+        payload: {
+            value: string;
+            name?: string;
+        },
+    ) => void;
+
+    /**
+     * Обработчик блюра.
+     */
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+
+    /**
+     * Обработчик фокуса.
+     */
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+
+    /**
+     * Управление возможностью изменения состояния 'checked' дочерних компонентов Radio | Tag
+     */
+    disabled?: boolean;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+
+    /**
+     * Атрибут name для всех дочерних компонентов
+     */
+    name?: string;
+
+    /**
+     * Value выбранного дочернего элемента
+     */
+    value?: string | null;
+
+    /**
+     * Основные стили компонента.
+     */
+    styles: { [key: string]: string };
+};
+
+export const BaseRadioGroup = forwardRef<HTMLDivElement, BaseRadioGroupProps>(
+    (
+        {
+            children,
+            className,
+            direction = 'vertical',
+            label,
+            error,
+            hint,
+            onChange,
+            onBlur,
+            onFocus,
+            type = 'radio',
+            dataTestId,
+            disabled = false,
+            name,
+            value,
+            styles,
+        },
+        ref,
+    ) => {
+        const [stateValue, setStateValue] = useState<BaseRadioGroupProps['value']>('');
+
+        useDidUpdateEffect(() => {
+            setStateValue(value);
+        }, [value]);
+
+        const isChecked = (childValue: string) =>
+            value !== null && (value || stateValue) === childValue;
+
+        const handleChange = (event: ChangeEvent | MouseEvent, childValue: string) => {
+            setStateValue(childValue);
+            if (onChange) {
+                onChange(event, { name, value: childValue });
+            }
+        };
+
+        const renderRadio = (child: ReactElement) => {
+            const { className: childClassName, value: childValue } = child.props;
+
+            return cloneElement(child, {
+                onChange: (event: ChangeEvent) => handleChange(event, childValue),
+                disabled,
+                ...child.props,
+                checked: isChecked(childValue),
+                name,
+                className: cn(childClassName, commonStyles.radio),
+            });
+        };
+
+        const renderTag = (child: ReactElement) => {
+            const childValue = child.props.value;
+            const checked = isChecked(childValue);
+            const clone = cloneElement(child, {
+                onClick: (event: MouseEvent) => handleChange(event, childValue),
+                disabled,
+                ...child.props,
+                checked,
+                name,
+                tabIndex: -1,
+            });
+
+            return (
+                <label className={cn(commonStyles.radio, commonStyles.tagLabel)}>
+                    <input
+                        type='radio'
+                        autoComplete='off'
+                        onChange={(event: ChangeEvent) => handleChange(event, childValue)}
+                        disabled={disabled || child.props.disabled}
+                        name={name}
+                        checked={checked}
+                        className={commonStyles.hiddenInput}
+                        value={child.props.value}
+                    />
+                    {clone}
+                </label>
+            );
+        };
+
+        const errorMessage = typeof error === 'boolean' ? '' : error;
+
+        return (
+            <div
+                className={cn(
+                    commonStyles.component,
+                    commonStyles[type],
+                    commonStyles[direction],
+                    { [commonStyles.error]: error },
+                    className,
+                )}
+                data-test-id={dataTestId}
+                ref={ref}
+            >
+                {label ? (
+                    <span className={cn(commonStyles.label, styles.label)}>{label}</span>
+                ) : null}
+
+                {children ? (
+                    <div
+                        className={cn(commonStyles.radioList, {
+                            [styles.radioList]: type === 'radio',
+                        })}
+                        onBlur={onBlur}
+                        onFocus={onFocus}
+                    >
+                        {Children.map(children, (child) => {
+                            if (isValidElement(child)) {
+                                return type === 'radio' ? renderRadio(child) : renderTag(child);
+                            }
+
+                            return null;
+                        })}
+                    </div>
+                ) : null}
+
+                {errorMessage && (
+                    <span
+                        className={cn(commonStyles.sub, styles.sub, commonStyles.errorMessage)}
+                        role='alert'
+                    >
+                        {errorMessage}
+                    </span>
+                )}
+
+                {hint && !errorMessage && (
+                    <span className={cn(commonStyles.sub, styles.sub, commonStyles.hint)}>
+                        {hint}
+                    </span>
+                )}
+            </div>
+        );
+    },
+);