@alfalab/core-components-radio-group 3.0.9 → 4.0.1

package/cssm/desktop.module.css

@@ -0,0 +1,33 @@
+:root {
+} /* deprecated */ :root {
+    --color-light-text-primary: #0e0e0e; /* 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-label-color: var(--color-light-text-primary);
+    --radio-group-sub-padding-left: 0;
+    --radio-group-list-padding-left: 0;
+
+    /* mobile */
+} .radioList {
+    padding-left: var(--radio-group-list-padding-left);
+} .label {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    color: var(--radio-group-label-color);
+    padding-left: var(--radio-group-sub-padding-left);
+} .sub {
+    padding-left: var(--radio-group-sub-padding-left);
+}

package/cssm/index.d.ts

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

package/cssm/index.js

@@ -2,13 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Component = require('./Component.js');
+var Component_responsive = require('./Component.responsive.js');
 require('tslib');
 require('react');
+require('@alfalab/core-components-mq/cssm');
+require('./Component.desktop.js');
+require('./components/base-radio-group/Component.js');
 require('classnames');
 require('@alfalab/hooks');
-require('./index.module.css');
+require('./components/base-radio-group/index.module.css');
+require('./desktop.module.css');
+require('./Component.mobile.js');
+require('./mobile.module.css');
 
 
 
-exports.RadioGroup = Component.RadioGroup;
+exports.RadioGroup = Component_responsive.RadioGroup;

package/cssm/mobile.d.ts

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

package/cssm/mobile.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component_mobile = require('./Component.mobile.js');
+require('tslib');
+require('react');
+require('./components/base-radio-group/Component.js');
+require('classnames');
+require('@alfalab/hooks');
+require('./components/base-radio-group/index.module.css');
+require('./mobile.module.css');
+
+
+
+exports.RadioGroupMobile = Component_mobile.RadioGroupMobile;

package/cssm/mobile.module.css

@@ -0,0 +1,35 @@
+:root {
+} /* deprecated */ :root {
+    --color-light-text-secondary: rgba(60, 60, 67, 0.66); /* 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-mobile-label-color: var(--color-light-text-secondary);
+} .radioList {
+    padding-left: var(--radio-group-mobile-list-padding-left);
+} .label {
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: 400;
+    color: var(--radio-group-mobile-label-color);
+    padding-left: var(--radio-group-mobile-sub-padding-left);
+} .sub {
+    padding-left: var(--radio-group-mobile-sub-padding-left);
+}

package/cssm/vars.css

@@ -0,0 +1,19 @@
+: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 {
+
+    /* mobile */
+}

package/desktop.css

@@ -0,0 +1,34 @@
+/* hash: 15xog */
+:root {
+} /* deprecated */ :root {
+    --color-light-text-primary: #0e0e0e; /* 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-label-color: var(--color-light-text-primary);
+    --radio-group-sub-padding-left: 0;
+    --radio-group-list-padding-left: 0;
+
+    /* mobile */
+} .radio-group__radioList_1rqz2 {
+    padding-left: var(--radio-group-list-padding-left);
+} .radio-group__label_1rqz2 {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    color: var(--radio-group-label-color);
+    padding-left: var(--radio-group-sub-padding-left);
+} .radio-group__sub_1rqz2 {
+    padding-left: var(--radio-group-sub-padding-left);
+}

package/desktop.d.ts

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

package/desktop.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component_desktop = require('./Component.desktop.js');
+require('tslib');
+require('react');
+require('./components/base-radio-group/Component.js');
+require('classnames');
+require('@alfalab/hooks');
+
+
+
+exports.RadioGroupDesktop = Component_desktop.RadioGroupDesktop;

package/esm/Component.desktop.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseRadioGroupProps } from "./components/base-radio-group/index";
+type RadioGroupDesktopProps = Omit<BaseRadioGroupProps, 'styles'>;
+declare const RadioGroupDesktop: React.ForwardRefExoticComponent<RadioGroupDesktopProps & React.RefAttributes<HTMLDivElement>>;
+export { RadioGroupDesktopProps, RadioGroupDesktop };

package/esm/Component.desktop.js

@@ -0,0 +1,12 @@
+import { __assign } from 'tslib';
+import React, { forwardRef } from 'react';
+import { BaseRadioGroup } from './components/base-radio-group/Component.js';
+import 'classnames';
+import '@alfalab/hooks';
+
+var styles = {"radioList":"radio-group__radioList_1rqz2","label":"radio-group__label_1rqz2","sub":"radio-group__sub_1rqz2"};
+require('./desktop.css')
+
+var RadioGroupDesktop = forwardRef(function (props, ref) { return React.createElement(BaseRadioGroup, __assign({}, props, { ref: ref, styles: styles })); });
+
+export { RadioGroupDesktop };

package/esm/Component.mobile.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseRadioGroupProps } from "./components/base-radio-group/index";
+type RadioGroupMobileProps = Omit<BaseRadioGroupProps, 'styles'>;
+declare const RadioGroupMobile: React.ForwardRefExoticComponent<RadioGroupMobileProps & React.RefAttributes<HTMLDivElement>>;
+export { RadioGroupMobileProps, RadioGroupMobile };

package/esm/Component.mobile.js

@@ -0,0 +1,12 @@
+import { __assign } from 'tslib';
+import React, { forwardRef } from 'react';
+import { BaseRadioGroup } from './components/base-radio-group/Component.js';
+import 'classnames';
+import '@alfalab/hooks';
+
+var styles = {"radioList":"radio-group__radioList_pxye2","label":"radio-group__label_pxye2","sub":"radio-group__sub_pxye2"};
+require('./mobile.css')
+
+var RadioGroupMobile = forwardRef(function (props, ref) { return (React.createElement(BaseRadioGroup, __assign({}, props, { ref: ref, styles: styles }))); });
+
+export { RadioGroupMobile };

package/esm/Component.responsive.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseRadioGroupProps } from "./components/base-radio-group/index";
+type RadioGroupProps = Omit<BaseRadioGroupProps, 'styles'> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+declare const RadioGroup: React.ForwardRefExoticComponent<Omit<BaseRadioGroupProps, "styles"> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { RadioGroupProps, RadioGroup };

package/esm/Component.responsive.js

@@ -0,0 +1,18 @@
+import { __rest, __assign } from 'tslib';
+import React, { forwardRef } from 'react';
+import { useMatchMedia } from '@alfalab/core-components-mq/esm';
+import { RadioGroupDesktop } from './Component.desktop.js';
+import { RadioGroupMobile } from './Component.mobile.js';
+import './components/base-radio-group/Component.js';
+import 'classnames';
+import '@alfalab/hooks';
+
+var RadioGroup = forwardRef(function (_a, ref) {
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = __rest(_a, ["breakpoint"]);
+    var query = "(min-width: ".concat(breakpoint, "px)");
+    var isDesktop = useMatchMedia(query)[0];
+    var Component = isDesktop ? RadioGroupDesktop : RadioGroupMobile;
+    return React.createElement(Component, __assign({ ref: ref }, restProps));
+});
+
+export { RadioGroup };

package/{cssm → esm/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/esm/components/base-radio-group/Component.js

@@ -0,0 +1,52 @@
+import { __assign } from 'tslib';
+import React, { forwardRef, useState, Children, isValidElement, cloneElement } from 'react';
+import cn from 'classnames';
+import { useDidUpdateEffect } from '@alfalab/hooks';
+
+var commonStyles = {"component":"radio-group__component_1bayu","error":"radio-group__error_1bayu","tag":"radio-group__tag_1bayu","radioList":"radio-group__radioList_1bayu","vertical":"radio-group__vertical_1bayu","radio":"radio-group__radio_1bayu","horizontal":"radio-group__horizontal_1bayu","tagLabel":"radio-group__tagLabel_1bayu","label":"radio-group__label_1bayu","sub":"radio-group__sub_1bayu","errorMessage":"radio-group__errorMessage_1bayu","hint":"radio-group__hint_1bayu","hiddenInput":"radio-group__hiddenInput_1bayu"};
+require('./index.css')
+
+var BaseRadioGroup = forwardRef(function (_a, ref) {
+    var _b, _c;
+    var children = _a.children, className = _a.className, _d = _a.direction, direction = _d === void 0 ? 'vertical' : _d, label = _a.label, error = _a.error, hint = _a.hint, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _e = _a.type, type = _e === void 0 ? 'radio' : _e, dataTestId = _a.dataTestId, _f = _a.disabled, disabled = _f === void 0 ? false : _f, name = _a.name, value = _a.value, styles = _a.styles;
+    var _g = useState(''), stateValue = _g[0], setStateValue = _g[1];
+    useDidUpdateEffect(function () {
+        setStateValue(value);
+    }, [value]);
+    var isChecked = function (childValue) {
+        return value !== null && (value || stateValue) === childValue;
+    };
+    var handleChange = function (event, childValue) {
+        setStateValue(childValue);
+        if (onChange) {
+            onChange(event, { name: name, value: childValue });
+        }
+    };
+    var renderRadio = function (child) {
+        var _a = child.props, childClassName = _a.className, childValue = _a.value;
+        return cloneElement(child, __assign(__assign({ onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: isChecked(childValue), name: name, className: cn(childClassName, commonStyles.radio) }));
+    };
+    var renderTag = function (child) {
+        var childValue = child.props.value;
+        var checked = isChecked(childValue);
+        var clone = cloneElement(child, __assign(__assign({ onClick: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: checked, name: name, tabIndex: -1 }));
+        return (React.createElement("label", { className: cn(commonStyles.radio, commonStyles.tagLabel) },
+            React.createElement("input", { type: 'radio', autoComplete: 'off', onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled || child.props.disabled, name: name, checked: checked, className: commonStyles.hiddenInput, value: child.props.value }),
+            clone));
+    };
+    var errorMessage = typeof error === 'boolean' ? '' : error;
+    return (React.createElement("div", { className: cn(commonStyles.component, commonStyles[type], commonStyles[direction], (_b = {}, _b[commonStyles.error] = error, _b), 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, (_c = {},
+                _c[styles.radioList] = type === 'radio',
+                _c)), onBlur: onBlur, onFocus: onFocus }, Children.map(children, function (child) {
+            if (isValidElement(child)) {
+                return type === 'radio' ? renderRadio(child) : renderTag(child);
+            }
+            return null;
+        }))) : null,
+        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 { BaseRadioGroup };

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

@@ -1,9 +1,8 @@
-/* hash: 1q4m4 */
+/* hash: 19q33 */
 :root {
 } /* deprecated */ :root {
     --color-light-border-link: #0072ef;
     --color-light-text-negative: #d91d0b;
-    --color-light-text-primary: #0e0e0e;
     --color-light-text-secondary: rgba(60, 60, 67, 0.66); /* 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 {
@@ -27,58 +26,57 @@
 } :root {
     --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_4kez1 {
+
+    /* mobile */
+} .radio-group__component_1bayu {
     display: flex;
     flex-direction: column;
-} .radio-group__error_4kez1 {
-    padding-left: var(--gap-xs);
-    border-left: 1px solid var(--radio-group-error-color);
-} .radio-group__radioList_4kez1 {
+} .radio-group__error_1bayu {
+    padding-left: var(--gap-s);
+    border-left: 1px solid var(--radio-group-error-color)
+} .radio-group__error_1bayu.radio-group__tag_1bayu {
+        padding-left: var(--gap-xs);
+    } .radio-group__radioList_1bayu {
     display: flex;
-} .radio-group__vertical_4kez1 .radio-group__radioList_4kez1 {
+} .radio-group__vertical_1bayu .radio-group__radioList_1bayu {
     flex-direction: column;
     align-items: flex-start;
-} .radio-group__vertical_4kez1 .radio-group__radio_4kez1 {
+} .radio-group__vertical_1bayu .radio-group__radio_1bayu {
     margin-bottom: var(--gap-m)
-} .radio-group__vertical_4kez1 .radio-group__radio_4kez1:last-child {
+} .radio-group__vertical_1bayu .radio-group__radio_1bayu:last-child {
         margin-bottom: 0;
-    } .radio-group__horizontal_4kez1 .radio-group__radioList_4kez1 {
+    } .radio-group__horizontal_1bayu .radio-group__radioList_1bayu {
     flex-wrap: wrap;
     margin-bottom: var(--gap-xs-neg);
-} .radio-group__horizontal_4kez1 .radio-group__radio_4kez1 {
+} .radio-group__horizontal_1bayu .radio-group__radio_1bayu {
     margin-right: var(--gap-xl);
     margin-bottom: var(--gap-xs);
-} .radio-group__horizontal_4kez1 .radio-group__tagLabel_4kez1 {
+} .radio-group__horizontal_1bayu .radio-group__tagLabel_1bayu {
     margin-right: var(--gap-xs);
-} .radio-group__horizontal_4kez1 .radio-group__radio_4kez1:last-child,
-.radio-group__horizontal_4kez1 .radio-group__tagLabel_4kez1:last-child {
+} .radio-group__horizontal_1bayu .radio-group__radio_1bayu:last-child,
+.radio-group__horizontal_1bayu .radio-group__tagLabel_1bayu:last-child {
     margin-right: 0;
-} .radio-group__label_4kez1 {
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 400;
+} .radio-group__label_1bayu {
     margin-bottom: var(--gap-s);
-    color: var(--radio-group-label-color);
-} .radio-group__sub_4kez1 {
+} .radio-group__sub_1bayu {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     margin-top: var(--gap-s);
-} .radio-group__errorMessage_4kez1 {
+} .radio-group__errorMessage_1bayu {
     color: var(--radio-group-error-color);
-} .radio-group__hint_4kez1 {
+} .radio-group__hint_1bayu {
     color: var(--radio-group-hint-color);
-} .radio-group__hiddenInput_4kez1 {
+} .radio-group__hiddenInput_1bayu {
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     opacity: 0
-} .radio-group__hiddenInput_4kez1:focus ~ button {
+} .radio-group__hiddenInput_1bayu:focus ~ button {
         outline: 2px solid var(--focus-color);
         outline-offset: 2px;
-    } .radio-group__tagLabel_4kez1 {
+    } .radio-group__tagLabel_1bayu {
     position: relative;
     max-width: 100%;
 }

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

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

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

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

package/esm/desktop.css

@@ -0,0 +1,34 @@
+/* hash: 15xog */
+:root {
+} /* deprecated */ :root {
+    --color-light-text-primary: #0e0e0e; /* 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-label-color: var(--color-light-text-primary);
+    --radio-group-sub-padding-left: 0;
+    --radio-group-list-padding-left: 0;
+
+    /* mobile */
+} .radio-group__radioList_1rqz2 {
+    padding-left: var(--radio-group-list-padding-left);
+} .radio-group__label_1rqz2 {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    color: var(--radio-group-label-color);
+    padding-left: var(--radio-group-sub-padding-left);
+} .radio-group__sub_1rqz2 {
+    padding-left: var(--radio-group-sub-padding-left);
+}

package/esm/desktop.d.ts

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

package/esm/desktop.js

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

package/esm/index.d.ts

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

package/esm/index.js

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

package/esm/mobile.css

@@ -0,0 +1,36 @@
+/* hash: 170nv */
+:root {
+} /* deprecated */ :root {
+    --color-light-text-secondary: rgba(60, 60, 67, 0.66); /* 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-mobile-label-color: var(--color-light-text-secondary);
+} .radio-group__radioList_pxye2 {
+    padding-left: var(--radio-group-mobile-list-padding-left);
+} .radio-group__label_pxye2 {
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: 400;
+    color: var(--radio-group-mobile-label-color);
+    padding-left: var(--radio-group-mobile-sub-padding-left);
+} .radio-group__sub_pxye2 {
+    padding-left: var(--radio-group-mobile-sub-padding-left);
+}

package/esm/mobile.d.ts

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

package/esm/mobile.js

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

package/index.d.ts

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

package/index.js

@@ -2,12 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Component = require('./Component.js');
+var Component_responsive = require('./Component.responsive.js');
 require('tslib');
 require('react');
+require('@alfalab/core-components-mq');
+require('./Component.desktop.js');
+require('./components/base-radio-group/Component.js');
 require('classnames');
 require('@alfalab/hooks');
+require('./Component.mobile.js');
 
 
 
-exports.RadioGroup = Component.RadioGroup;
+exports.RadioGroup = Component_responsive.RadioGroup;