@alfalab/core-components-radio-group 4.1.0 → 4.2.0

package/Component.desktop.js

@@ -12,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"radioList":"radio-group__radioList_j0spj","label":"radio-group__label_j0spj","sub":"radio-group__sub_j0spj"};
+var styles = {"radioList":"radio-group__radioList_1arjj","label":"radio-group__label_1arjj","sub":"radio-group__sub_1arjj"};
 require('./desktop.css')
 
 var RadioGroupDesktop = React.forwardRef(function (props, ref) { return React__default.default.createElement(components_baseRadioGroup_Component.BaseRadioGroup, tslib.__assign({}, props, { ref: ref, styles: styles })); });

package/Component.mobile.js

@@ -12,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"radioList":"radio-group__radioList_ree10","label":"radio-group__label_ree10","sub":"radio-group__sub_ree10"};
+var styles = {"radioList":"radio-group__radioList_19nbj","label":"radio-group__label_19nbj","sub":"radio-group__sub_19nbj"};
 require('./mobile.css')
 
 var RadioGroupMobile = React.forwardRef(function (props, ref) { return (React__default.default.createElement(components_baseRadioGroup_Component.BaseRadioGroup, tslib.__assign({}, props, { ref: ref, styles: styles }))); });

package/components/base-radio-group/Component.js

@@ -12,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var commonStyles = {"component":"radio-group__component_1gwql","error":"radio-group__error_1gwql","tag":"radio-group__tag_1gwql","radioList":"radio-group__radioList_1gwql","vertical":"radio-group__vertical_1gwql","radio":"radio-group__radio_1gwql","horizontal":"radio-group__horizontal_1gwql","tagLabel":"radio-group__tagLabel_1gwql","label":"radio-group__label_1gwql","sub":"radio-group__sub_1gwql","errorMessage":"radio-group__errorMessage_1gwql","hint":"radio-group__hint_1gwql","hiddenInput":"radio-group__hiddenInput_1gwql"};
+var commonStyles = {"component":"radio-group__component_179iy","error":"radio-group__error_179iy","tag":"radio-group__tag_179iy","radioList":"radio-group__radioList_179iy","verticalRadioList":"radio-group__verticalRadioList_179iy","horizontalRadioList":"radio-group__horizontalRadioList_179iy","verticalRadio":"radio-group__verticalRadio_179iy","horizontalRadio":"radio-group__horizontalRadio_179iy","horizontalTagLabel":"radio-group__horizontalTagLabel_179iy","label":"radio-group__label_179iy","sub":"radio-group__sub_179iy","errorMessage":"radio-group__errorMessage_179iy","hint":"radio-group__hint_179iy","hiddenInput":"radio-group__hiddenInput_179iy","tagLabel":"radio-group__tagLabel_179iy"};
 require('./index.css')
 
 var BaseRadioGroup = React.forwardRef(function (_a, ref) {
@@ -33,22 +33,20 @@ var BaseRadioGroup = React.forwardRef(function (_a, ref) {
     };
     var renderRadio = function (child) {
         var _a = child.props, childClassName = _a.className, childValue = _a.value;
-        return React.cloneElement(child, tslib.__assign(tslib.__assign({ onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: isChecked(childValue), name: name, className: cn__default.default(childClassName, commonStyles.radio) }));
+        return React.cloneElement(child, tslib.__assign(tslib.__assign({ onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: isChecked(childValue), name: name, className: cn__default.default(childClassName, commonStyles["".concat(direction, "Radio")]) }));
     };
     var renderTag = function (child) {
         var childValue = child.props.value;
         var checked = isChecked(childValue);
         var clone = React.cloneElement(child, tslib.__assign(tslib.__assign({ onClick: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: checked, name: name, tabIndex: -1 }));
-        return (React__default.default.createElement("label", { className: cn__default.default(commonStyles.radio, commonStyles.tagLabel) },
+        return (React__default.default.createElement("label", { className: cn__default.default(commonStyles["".concat(direction, "Radio")], commonStyles["".concat(direction, "TagLabel")]) },
             React__default.default.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__default.default.createElement("div", { className: cn__default.default(commonStyles.component, commonStyles[type], commonStyles[direction], (_b = {}, _b[commonStyles.error] = error, _b), className), "data-test-id": dataTestId, ref: ref },
+    return (React__default.default.createElement("div", { className: cn__default.default(commonStyles.component, commonStyles[type], (_b = {}, _b[commonStyles.error] = error, _b), className), "data-test-id": dataTestId, ref: ref },
         label ? (React__default.default.createElement("span", { className: cn__default.default(commonStyles.label, styles.label) }, label)) : null,
-        children ? (React__default.default.createElement("div", { className: cn__default.default(commonStyles.radioList, radioListClassName, (_c = {},
-                _c[styles.radioList] = type === 'radio',
-                _c)), onBlur: onBlur, onFocus: onFocus }, React.Children.map(children, function (child) {
+        children ? (React__default.default.createElement("div", { className: cn__default.default(commonStyles.radioList, commonStyles["".concat(direction, "RadioList")], radioListClassName, (_c = {}, _c[styles.radioList] = type === 'radio', _c)), onBlur: onBlur, onFocus: onFocus }, React.Children.map(children, function (child) {
             if (React.isValidElement(child)) {
                 return type === 'radio' ? renderRadio(child) : renderTag(child);
             }

package/components/base-radio-group/index.css

@@ -1,4 +1,4 @@
-/* hash: rhtyn */
+/* hash: 1tmfa */
 :root {
 } /* deprecated */ :root {
     --color-light-border-link: #0072ef;
@@ -28,55 +28,55 @@
     --radio-group-hint-color: var(--color-light-text-secondary);
 
     /* mobile */
-} .radio-group__component_1gwql {
+} .radio-group__component_179iy {
     display: flex;
     flex-direction: column;
-} .radio-group__error_1gwql {
+} .radio-group__error_179iy {
     padding-left: var(--gap-s);
     border-left: 1px solid var(--radio-group-error-color)
-} .radio-group__error_1gwql.radio-group__tag_1gwql {
+} .radio-group__error_179iy.radio-group__tag_179iy {
         padding-left: var(--gap-xs);
-    } .radio-group__radioList_1gwql {
+    } .radio-group__radioList_179iy {
     display: flex;
-} .radio-group__vertical_1gwql .radio-group__radioList_1gwql {
+} .radio-group__verticalRadioList_179iy {
     flex-direction: column;
     align-items: flex-start;
-} .radio-group__vertical_1gwql .radio-group__radio_1gwql {
-    margin-bottom: var(--gap-m)
-} .radio-group__vertical_1gwql .radio-group__radio_1gwql:last-child {
-        margin-bottom: 0;
-    } .radio-group__horizontal_1gwql .radio-group__radioList_1gwql {
+} .radio-group__horizontalRadioList_179iy {
     flex-wrap: wrap;
     margin-bottom: var(--gap-xs-neg);
-} .radio-group__horizontal_1gwql .radio-group__radio_1gwql {
+} .radio-group__verticalRadio_179iy {
+    margin-bottom: var(--gap-m)
+} .radio-group__verticalRadio_179iy:last-child {
+        margin-bottom: 0;
+    } .radio-group__horizontalRadio_179iy {
     margin-right: var(--gap-xl);
     margin-bottom: var(--gap-xs);
-} .radio-group__horizontal_1gwql .radio-group__tagLabel_1gwql {
+} .radio-group__horizontalTagLabel_179iy {
     margin-right: var(--gap-xs);
-} .radio-group__horizontal_1gwql .radio-group__radio_1gwql:last-child,
-.radio-group__horizontal_1gwql .radio-group__tagLabel_1gwql:last-child {
+} .radio-group__horizontalRadio_179iy:last-child,
+.radio-group__horizontalTagLabel_179iy:last-child {
     margin-right: 0;
-} .radio-group__label_1gwql {
+} .radio-group__label_179iy {
     margin-bottom: var(--gap-s);
-} .radio-group__sub_1gwql {
+} .radio-group__sub_179iy {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     margin-top: var(--gap-s);
-} .radio-group__errorMessage_1gwql {
+} .radio-group__errorMessage_179iy {
     color: var(--radio-group-error-color);
-} .radio-group__hint_1gwql {
+} .radio-group__hint_179iy {
     color: var(--radio-group-hint-color);
-} .radio-group__hiddenInput_1gwql {
+} .radio-group__hiddenInput_179iy {
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     opacity: 0
-} .radio-group__hiddenInput_1gwql:focus ~ button {
+} .radio-group__hiddenInput_179iy:focus ~ button {
         outline: 2px solid var(--focus-color);
         outline-offset: 2px;
-    } .radio-group__tagLabel_1gwql {
+    } .radio-group__tagLabel_179iy {
     position: relative;
     max-width: 100%;
 }

package/cssm/components/base-radio-group/Component.js

@@ -32,22 +32,20 @@ var BaseRadioGroup = React.forwardRef(function (_a, ref) {
     };
     var renderRadio = function (child) {
         var _a = child.props, childClassName = _a.className, childValue = _a.value;
-        return React.cloneElement(child, tslib.__assign(tslib.__assign({ onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: isChecked(childValue), name: name, className: cn__default.default(childClassName, commonStyles__default.default.radio) }));
+        return React.cloneElement(child, tslib.__assign(tslib.__assign({ onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: isChecked(childValue), name: name, className: cn__default.default(childClassName, commonStyles__default.default["".concat(direction, "Radio")]) }));
     };
     var renderTag = function (child) {
         var childValue = child.props.value;
         var checked = isChecked(childValue);
         var clone = React.cloneElement(child, tslib.__assign(tslib.__assign({ onClick: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: checked, name: name, tabIndex: -1 }));
-        return (React__default.default.createElement("label", { className: cn__default.default(commonStyles__default.default.radio, commonStyles__default.default.tagLabel) },
+        return (React__default.default.createElement("label", { className: cn__default.default(commonStyles__default.default["".concat(direction, "Radio")], commonStyles__default.default["".concat(direction, "TagLabel")]) },
             React__default.default.createElement("input", { type: 'radio', autoComplete: 'off', onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled || child.props.disabled, name: name, checked: checked, className: commonStyles__default.default.hiddenInput, value: child.props.value }),
             clone));
     };
     var errorMessage = typeof error === 'boolean' ? '' : error;
-    return (React__default.default.createElement("div", { className: cn__default.default(commonStyles__default.default.component, commonStyles__default.default[type], commonStyles__default.default[direction], (_b = {}, _b[commonStyles__default.default.error] = error, _b), className), "data-test-id": dataTestId, ref: ref },
+    return (React__default.default.createElement("div", { className: cn__default.default(commonStyles__default.default.component, commonStyles__default.default[type], (_b = {}, _b[commonStyles__default.default.error] = error, _b), className), "data-test-id": dataTestId, ref: ref },
         label ? (React__default.default.createElement("span", { className: cn__default.default(commonStyles__default.default.label, styles.label) }, label)) : null,
-        children ? (React__default.default.createElement("div", { className: cn__default.default(commonStyles__default.default.radioList, radioListClassName, (_c = {},
-                _c[styles.radioList] = type === 'radio',
-                _c)), onBlur: onBlur, onFocus: onFocus }, React.Children.map(children, function (child) {
+        children ? (React__default.default.createElement("div", { className: cn__default.default(commonStyles__default.default.radioList, commonStyles__default.default["".concat(direction, "RadioList")], radioListClassName, (_c = {}, _c[styles.radioList] = type === 'radio', _c)), onBlur: onBlur, onFocus: onFocus }, React.Children.map(children, function (child) {
             if (React.isValidElement(child)) {
                 return type === 'radio' ? renderRadio(child) : renderTag(child);
             }

package/cssm/components/base-radio-group/index.module.css

@@ -37,23 +37,23 @@
         padding-left: var(--gap-xs);
     } .radioList {
     display: flex;
-} .vertical .radioList {
+} .verticalRadioList {
     flex-direction: column;
     align-items: flex-start;
-} .vertical .radio {
-    margin-bottom: var(--gap-m)
-} .vertical .radio:last-child {
-        margin-bottom: 0;
-    } .horizontal .radioList {
+} .horizontalRadioList {
     flex-wrap: wrap;
     margin-bottom: var(--gap-xs-neg);
-} .horizontal .radio {
+} .verticalRadio {
+    margin-bottom: var(--gap-m)
+} .verticalRadio:last-child {
+        margin-bottom: 0;
+    } .horizontalRadio {
     margin-right: var(--gap-xl);
     margin-bottom: var(--gap-xs);
-} .horizontal .tagLabel {
+} .horizontalTagLabel {
     margin-right: var(--gap-xs);
-} .horizontal .radio:last-child,
-.horizontal .tagLabel:last-child {
+} .horizontalRadio:last-child,
+.horizontalTagLabel:last-child {
     margin-right: 0;
 } .label {
     margin-bottom: var(--gap-s);

package/cssm/desktop/index.d.ts

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

package/cssm/{desktop.js → desktop/index.js}

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

package/cssm/mobile/index.d.ts

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

package/cssm/{mobile.js → mobile/index.js}

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

package/desktop/index.d.ts

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

package/{desktop.js → desktop/index.js}

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

package/desktop/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/desktop/index.js"
+}

package/desktop.css

@@ -1,4 +1,4 @@
-/* hash: 12evq */
+/* hash: 1tcm4 */
 :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 */
@@ -21,14 +21,14 @@
     --radio-group-list-padding-left: 0;
 
     /* mobile */
-} .radio-group__radioList_j0spj {
+} .radio-group__radioList_1arjj {
     padding-left: var(--radio-group-list-padding-left);
-} .radio-group__label_j0spj {
+} .radio-group__label_1arjj {
     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_j0spj {
+} .radio-group__sub_1arjj {
     padding-left: var(--radio-group-sub-padding-left);
 }

package/esm/Component.desktop.js

@@ -4,7 +4,7 @@ import { BaseRadioGroup } from './components/base-radio-group/Component.js';
 import 'classnames';
 import '@alfalab/hooks';
 
-var styles = {"radioList":"radio-group__radioList_j0spj","label":"radio-group__label_j0spj","sub":"radio-group__sub_j0spj"};
+var styles = {"radioList":"radio-group__radioList_1arjj","label":"radio-group__label_1arjj","sub":"radio-group__sub_1arjj"};
 require('./desktop.css')
 
 var RadioGroupDesktop = forwardRef(function (props, ref) { return React.createElement(BaseRadioGroup, __assign({}, props, { ref: ref, styles: styles })); });

package/esm/Component.mobile.js

@@ -4,7 +4,7 @@ import { BaseRadioGroup } from './components/base-radio-group/Component.js';
 import 'classnames';
 import '@alfalab/hooks';
 
-var styles = {"radioList":"radio-group__radioList_ree10","label":"radio-group__label_ree10","sub":"radio-group__sub_ree10"};
+var styles = {"radioList":"radio-group__radioList_19nbj","label":"radio-group__label_19nbj","sub":"radio-group__sub_19nbj"};
 require('./mobile.css')
 
 var RadioGroupMobile = forwardRef(function (props, ref) { return (React.createElement(BaseRadioGroup, __assign({}, props, { ref: ref, styles: styles }))); });

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

@@ -3,7 +3,7 @@ import React, { forwardRef, useState, Children, isValidElement, cloneElement } f
 import cn from 'classnames';
 import { useDidUpdateEffect } from '@alfalab/hooks';
 
-var commonStyles = {"component":"radio-group__component_1gwql","error":"radio-group__error_1gwql","tag":"radio-group__tag_1gwql","radioList":"radio-group__radioList_1gwql","vertical":"radio-group__vertical_1gwql","radio":"radio-group__radio_1gwql","horizontal":"radio-group__horizontal_1gwql","tagLabel":"radio-group__tagLabel_1gwql","label":"radio-group__label_1gwql","sub":"radio-group__sub_1gwql","errorMessage":"radio-group__errorMessage_1gwql","hint":"radio-group__hint_1gwql","hiddenInput":"radio-group__hiddenInput_1gwql"};
+var commonStyles = {"component":"radio-group__component_179iy","error":"radio-group__error_179iy","tag":"radio-group__tag_179iy","radioList":"radio-group__radioList_179iy","verticalRadioList":"radio-group__verticalRadioList_179iy","horizontalRadioList":"radio-group__horizontalRadioList_179iy","verticalRadio":"radio-group__verticalRadio_179iy","horizontalRadio":"radio-group__horizontalRadio_179iy","horizontalTagLabel":"radio-group__horizontalTagLabel_179iy","label":"radio-group__label_179iy","sub":"radio-group__sub_179iy","errorMessage":"radio-group__errorMessage_179iy","hint":"radio-group__hint_179iy","hiddenInput":"radio-group__hiddenInput_179iy","tagLabel":"radio-group__tagLabel_179iy"};
 require('./index.css')
 
 var BaseRadioGroup = forwardRef(function (_a, ref) {
@@ -24,22 +24,20 @@ var BaseRadioGroup = forwardRef(function (_a, ref) {
     };
     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) }));
+        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["".concat(direction, "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) },
+        return (React.createElement("label", { className: cn(commonStyles["".concat(direction, "Radio")], commonStyles["".concat(direction, "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 },
+    return (React.createElement("div", { className: cn(commonStyles.component, commonStyles[type], (_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, radioListClassName, (_c = {},
-                _c[styles.radioList] = type === 'radio',
-                _c)), onBlur: onBlur, onFocus: onFocus }, Children.map(children, function (child) {
+        children ? (React.createElement("div", { className: cn(commonStyles.radioList, commonStyles["".concat(direction, "RadioList")], radioListClassName, (_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);
             }

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

@@ -1,4 +1,4 @@
-/* hash: rhtyn */
+/* hash: 1tmfa */
 :root {
 } /* deprecated */ :root {
     --color-light-border-link: #0072ef;
@@ -28,55 +28,55 @@
     --radio-group-hint-color: var(--color-light-text-secondary);
 
     /* mobile */
-} .radio-group__component_1gwql {
+} .radio-group__component_179iy {
     display: flex;
     flex-direction: column;
-} .radio-group__error_1gwql {
+} .radio-group__error_179iy {
     padding-left: var(--gap-s);
     border-left: 1px solid var(--radio-group-error-color)
-} .radio-group__error_1gwql.radio-group__tag_1gwql {
+} .radio-group__error_179iy.radio-group__tag_179iy {
         padding-left: var(--gap-xs);
-    } .radio-group__radioList_1gwql {
+    } .radio-group__radioList_179iy {
     display: flex;
-} .radio-group__vertical_1gwql .radio-group__radioList_1gwql {
+} .radio-group__verticalRadioList_179iy {
     flex-direction: column;
     align-items: flex-start;
-} .radio-group__vertical_1gwql .radio-group__radio_1gwql {
-    margin-bottom: var(--gap-m)
-} .radio-group__vertical_1gwql .radio-group__radio_1gwql:last-child {
-        margin-bottom: 0;
-    } .radio-group__horizontal_1gwql .radio-group__radioList_1gwql {
+} .radio-group__horizontalRadioList_179iy {
     flex-wrap: wrap;
     margin-bottom: var(--gap-xs-neg);
-} .radio-group__horizontal_1gwql .radio-group__radio_1gwql {
+} .radio-group__verticalRadio_179iy {
+    margin-bottom: var(--gap-m)
+} .radio-group__verticalRadio_179iy:last-child {
+        margin-bottom: 0;
+    } .radio-group__horizontalRadio_179iy {
     margin-right: var(--gap-xl);
     margin-bottom: var(--gap-xs);
-} .radio-group__horizontal_1gwql .radio-group__tagLabel_1gwql {
+} .radio-group__horizontalTagLabel_179iy {
     margin-right: var(--gap-xs);
-} .radio-group__horizontal_1gwql .radio-group__radio_1gwql:last-child,
-.radio-group__horizontal_1gwql .radio-group__tagLabel_1gwql:last-child {
+} .radio-group__horizontalRadio_179iy:last-child,
+.radio-group__horizontalTagLabel_179iy:last-child {
     margin-right: 0;
-} .radio-group__label_1gwql {
+} .radio-group__label_179iy {
     margin-bottom: var(--gap-s);
-} .radio-group__sub_1gwql {
+} .radio-group__sub_179iy {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     margin-top: var(--gap-s);
-} .radio-group__errorMessage_1gwql {
+} .radio-group__errorMessage_179iy {
     color: var(--radio-group-error-color);
-} .radio-group__hint_1gwql {
+} .radio-group__hint_179iy {
     color: var(--radio-group-hint-color);
-} .radio-group__hiddenInput_1gwql {
+} .radio-group__hiddenInput_179iy {
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     opacity: 0
-} .radio-group__hiddenInput_1gwql:focus ~ button {
+} .radio-group__hiddenInput_179iy:focus ~ button {
         outline: 2px solid var(--focus-color);
         outline-offset: 2px;
-    } .radio-group__tagLabel_1gwql {
+    } .radio-group__tagLabel_179iy {
     position: relative;
     max-width: 100%;
 }

package/esm/desktop/index.d.ts

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

package/esm/desktop/index.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/desktop.css

@@ -1,4 +1,4 @@
-/* hash: 12evq */
+/* hash: 1tcm4 */
 :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 */
@@ -21,14 +21,14 @@
     --radio-group-list-padding-left: 0;
 
     /* mobile */
-} .radio-group__radioList_j0spj {
+} .radio-group__radioList_1arjj {
     padding-left: var(--radio-group-list-padding-left);
-} .radio-group__label_j0spj {
+} .radio-group__label_1arjj {
     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_j0spj {
+} .radio-group__sub_1arjj {
     padding-left: var(--radio-group-sub-padding-left);
 }

package/esm/mobile/index.d.ts

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

package/esm/mobile/index.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/esm/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 1nxht */
+/* hash: n4bof */
 :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 */
@@ -23,14 +23,14 @@
     --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_ree10 {
+} .radio-group__radioList_19nbj {
     padding-left: var(--radio-group-mobile-list-padding-left);
-} .radio-group__label_ree10 {
+} .radio-group__label_19nbj {
     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_ree10 {
+} .radio-group__sub_19nbj {
     padding-left: var(--radio-group-mobile-sub-padding-left);
 }

package/mobile/index.d.ts

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

package/{mobile.js → mobile/index.js}

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Component_mobile = require('./Component.mobile.js');
+var Component_mobile = require('../Component.mobile.js');
 require('tslib');
 require('react');
-require('./components/base-radio-group/Component.js');
+require('../components/base-radio-group/Component.js');
 require('classnames');
 require('@alfalab/hooks');
 

package/mobile/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/mobile/index.js"
+}

package/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 1nxht */
+/* hash: n4bof */
 :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 */
@@ -23,14 +23,14 @@
     --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_ree10 {
+} .radio-group__radioList_19nbj {
     padding-left: var(--radio-group-mobile-list-padding-left);
-} .radio-group__label_ree10 {
+} .radio-group__label_19nbj {
     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_ree10 {
+} .radio-group__sub_19nbj {
     padding-left: var(--radio-group-mobile-sub-padding-left);
 }

package/modern/Component.desktop.js

@@ -3,7 +3,7 @@ import { BaseRadioGroup } from './components/base-radio-group/Component.js';
 import 'classnames';
 import '@alfalab/hooks';
 
-const styles = {"radioList":"radio-group__radioList_j0spj","label":"radio-group__label_j0spj","sub":"radio-group__sub_j0spj"};
+const styles = {"radioList":"radio-group__radioList_1arjj","label":"radio-group__label_1arjj","sub":"radio-group__sub_1arjj"};
 require('./desktop.css')
 
 const RadioGroupDesktop = forwardRef((props, ref) => React.createElement(BaseRadioGroup, { ...props, ref: ref, styles: styles }));

package/modern/Component.mobile.js

@@ -3,7 +3,7 @@ import { BaseRadioGroup } from './components/base-radio-group/Component.js';
 import 'classnames';
 import '@alfalab/hooks';
 
-const styles = {"radioList":"radio-group__radioList_ree10","label":"radio-group__label_ree10","sub":"radio-group__sub_ree10"};
+const styles = {"radioList":"radio-group__radioList_19nbj","label":"radio-group__label_19nbj","sub":"radio-group__sub_19nbj"};
 require('./mobile.css')
 
 const RadioGroupMobile = forwardRef((props, ref) => (React.createElement(BaseRadioGroup, { ...props, ref: ref, styles: styles })));

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

@@ -2,7 +2,7 @@ import React, { forwardRef, useState, Children, isValidElement, cloneElement } f
 import cn from 'classnames';
 import { useDidUpdateEffect } from '@alfalab/hooks';
 
-const commonStyles = {"component":"radio-group__component_1gwql","error":"radio-group__error_1gwql","tag":"radio-group__tag_1gwql","radioList":"radio-group__radioList_1gwql","vertical":"radio-group__vertical_1gwql","radio":"radio-group__radio_1gwql","horizontal":"radio-group__horizontal_1gwql","tagLabel":"radio-group__tagLabel_1gwql","label":"radio-group__label_1gwql","sub":"radio-group__sub_1gwql","errorMessage":"radio-group__errorMessage_1gwql","hint":"radio-group__hint_1gwql","hiddenInput":"radio-group__hiddenInput_1gwql"};
+const commonStyles = {"component":"radio-group__component_179iy","error":"radio-group__error_179iy","tag":"radio-group__tag_179iy","radioList":"radio-group__radioList_179iy","verticalRadioList":"radio-group__verticalRadioList_179iy","horizontalRadioList":"radio-group__horizontalRadioList_179iy","verticalRadio":"radio-group__verticalRadio_179iy","horizontalRadio":"radio-group__horizontalRadio_179iy","horizontalTagLabel":"radio-group__horizontalTagLabel_179iy","label":"radio-group__label_179iy","sub":"radio-group__sub_179iy","errorMessage":"radio-group__errorMessage_179iy","hint":"radio-group__hint_179iy","hiddenInput":"radio-group__hiddenInput_179iy","tagLabel":"radio-group__tagLabel_179iy"};
 require('./index.css')
 
 const BaseRadioGroup = forwardRef(({ children, className, radioListClassName, direction = 'vertical', label, error, hint, onChange, onBlur, onFocus, type = 'radio', dataTestId, disabled = false, name, value, styles, }, ref) => {
@@ -25,7 +25,7 @@ const BaseRadioGroup = forwardRef(({ children, className, radioListClassName, di
             ...child.props,
             checked: isChecked(childValue),
             name,
-            className: cn(childClassName, commonStyles.radio),
+            className: cn(childClassName, commonStyles[`${direction}Radio`]),
         });
     };
     const renderTag = (child) => {
@@ -39,16 +39,14 @@ const BaseRadioGroup = forwardRef(({ children, className, radioListClassName, di
             name,
             tabIndex: -1,
         });
-        return (React.createElement("label", { className: cn(commonStyles.radio, commonStyles.tagLabel) },
+        return (React.createElement("label", { className: cn(commonStyles[`${direction}Radio`], commonStyles[`${direction}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(commonStyles.component, commonStyles[type], commonStyles[direction], { [commonStyles.error]: error }, className), "data-test-id": dataTestId, ref: ref },
+    return (React.createElement("div", { className: cn(commonStyles.component, commonStyles[type], { [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, radioListClassName, {
-                [styles.radioList]: type === 'radio',
-            }), onBlur: onBlur, onFocus: onFocus }, Children.map(children, (child) => {
+        children ? (React.createElement("div", { className: cn(commonStyles.radioList, commonStyles[`${direction}RadioList`], radioListClassName, { [styles.radioList]: type === 'radio' }), onBlur: onBlur, onFocus: onFocus }, Children.map(children, (child) => {
             if (isValidElement(child)) {
                 return type === 'radio' ? renderRadio(child) : renderTag(child);
             }

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

@@ -1,4 +1,4 @@
-/* hash: rhtyn */
+/* hash: 1tmfa */
 :root {
 } /* deprecated */ :root {
     --color-light-border-link: #0072ef;
@@ -28,55 +28,55 @@
     --radio-group-hint-color: var(--color-light-text-secondary);
 
     /* mobile */
-} .radio-group__component_1gwql {
+} .radio-group__component_179iy {
     display: flex;
     flex-direction: column;
-} .radio-group__error_1gwql {
+} .radio-group__error_179iy {
     padding-left: var(--gap-s);
     border-left: 1px solid var(--radio-group-error-color)
-} .radio-group__error_1gwql.radio-group__tag_1gwql {
+} .radio-group__error_179iy.radio-group__tag_179iy {
         padding-left: var(--gap-xs);
-    } .radio-group__radioList_1gwql {
+    } .radio-group__radioList_179iy {
     display: flex;
-} .radio-group__vertical_1gwql .radio-group__radioList_1gwql {
+} .radio-group__verticalRadioList_179iy {
     flex-direction: column;
     align-items: flex-start;
-} .radio-group__vertical_1gwql .radio-group__radio_1gwql {
-    margin-bottom: var(--gap-m)
-} .radio-group__vertical_1gwql .radio-group__radio_1gwql:last-child {
-        margin-bottom: 0;
-    } .radio-group__horizontal_1gwql .radio-group__radioList_1gwql {
+} .radio-group__horizontalRadioList_179iy {
     flex-wrap: wrap;
     margin-bottom: var(--gap-xs-neg);
-} .radio-group__horizontal_1gwql .radio-group__radio_1gwql {
+} .radio-group__verticalRadio_179iy {
+    margin-bottom: var(--gap-m)
+} .radio-group__verticalRadio_179iy:last-child {
+        margin-bottom: 0;
+    } .radio-group__horizontalRadio_179iy {
     margin-right: var(--gap-xl);
     margin-bottom: var(--gap-xs);
-} .radio-group__horizontal_1gwql .radio-group__tagLabel_1gwql {
+} .radio-group__horizontalTagLabel_179iy {
     margin-right: var(--gap-xs);
-} .radio-group__horizontal_1gwql .radio-group__radio_1gwql:last-child,
-.radio-group__horizontal_1gwql .radio-group__tagLabel_1gwql:last-child {
+} .radio-group__horizontalRadio_179iy:last-child,
+.radio-group__horizontalTagLabel_179iy:last-child {
     margin-right: 0;
-} .radio-group__label_1gwql {
+} .radio-group__label_179iy {
     margin-bottom: var(--gap-s);
-} .radio-group__sub_1gwql {
+} .radio-group__sub_179iy {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     margin-top: var(--gap-s);
-} .radio-group__errorMessage_1gwql {
+} .radio-group__errorMessage_179iy {
     color: var(--radio-group-error-color);
-} .radio-group__hint_1gwql {
+} .radio-group__hint_179iy {
     color: var(--radio-group-hint-color);
-} .radio-group__hiddenInput_1gwql {
+} .radio-group__hiddenInput_179iy {
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     opacity: 0
-} .radio-group__hiddenInput_1gwql:focus ~ button {
+} .radio-group__hiddenInput_179iy:focus ~ button {
         outline: 2px solid var(--focus-color);
         outline-offset: 2px;
-    } .radio-group__tagLabel_1gwql {
+    } .radio-group__tagLabel_179iy {
     position: relative;
     max-width: 100%;
 }

package/modern/desktop/index.d.ts

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

package/modern/desktop/index.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/desktop.css

@@ -1,4 +1,4 @@
-/* hash: 12evq */
+/* hash: 1tcm4 */
 :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 */
@@ -21,14 +21,14 @@
     --radio-group-list-padding-left: 0;
 
     /* mobile */
-} .radio-group__radioList_j0spj {
+} .radio-group__radioList_1arjj {
     padding-left: var(--radio-group-list-padding-left);
-} .radio-group__label_j0spj {
+} .radio-group__label_1arjj {
     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_j0spj {
+} .radio-group__sub_1arjj {
     padding-left: var(--radio-group-sub-padding-left);
 }

package/modern/mobile/index.d.ts

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

package/modern/mobile/index.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/modern/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 1nxht */
+/* hash: n4bof */
 :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 */
@@ -23,14 +23,14 @@
     --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_ree10 {
+} .radio-group__radioList_19nbj {
     padding-left: var(--radio-group-mobile-list-padding-left);
-} .radio-group__label_ree10 {
+} .radio-group__label_19nbj {
     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_ree10 {
+} .radio-group__sub_19nbj {
     padding-left: var(--radio-group-mobile-sub-padding-left);
 }

package/package.json

@@ -1,31 +1,11 @@
 {
     "name": "@alfalab/core-components-radio-group",
-    "version": "4.1.0",
+    "version": "4.2.0",
     "description": "Radio group",
     "keywords": [],
     "license": "MIT",
     "main": "index.js",
     "module": "./esm/index.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",
         "directory": "dist"

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

@@ -154,7 +154,7 @@ export const BaseRadioGroup = forwardRef<HTMLDivElement, BaseRadioGroupProps>(
                 ...child.props,
                 checked: isChecked(childValue),
                 name,
-                className: cn(childClassName, commonStyles.radio),
+                className: cn(childClassName, commonStyles[`${direction}Radio`]),
             });
         };
 
@@ -171,7 +171,12 @@ export const BaseRadioGroup = forwardRef<HTMLDivElement, BaseRadioGroupProps>(
             });
 
             return (
-                <label className={cn(commonStyles.radio, commonStyles.tagLabel)}>
+                <label
+                    className={cn(
+                        commonStyles[`${direction}Radio`],
+                        commonStyles[`${direction}TagLabel`],
+                    )}
+                >
                     <input
                         type='radio'
                         autoComplete='off'
@@ -194,7 +199,6 @@ export const BaseRadioGroup = forwardRef<HTMLDivElement, BaseRadioGroupProps>(
                 className={cn(
                     commonStyles.component,
                     commonStyles[type],
-                    commonStyles[direction],
                     { [commonStyles.error]: error },
                     className,
                 )}
@@ -207,9 +211,12 @@ export const BaseRadioGroup = forwardRef<HTMLDivElement, BaseRadioGroupProps>(
 
                 {children ? (
                     <div
-                        className={cn(commonStyles.radioList, radioListClassName, {
-                            [styles.radioList]: type === 'radio',
-                        })}
+                        className={cn(
+                            commonStyles.radioList,
+                            commonStyles[`${direction}RadioList`],
+                            radioListClassName,
+                            { [styles.radioList]: type === 'radio' },
+                        )}
                         onBlur={onBlur}
                         onFocus={onFocus}
                     >

package/src/components/base-radio-group/index.module.css

@@ -18,12 +18,17 @@
     display: flex;
 }
 
-.vertical .radioList {
+.verticalRadioList {
     flex-direction: column;
     align-items: flex-start;
 }
 
-.vertical .radio {
+.horizontalRadioList {
+    flex-wrap: wrap;
+    margin-bottom: var(--gap-xs-neg);
+}
+
+.verticalRadio {
     margin-bottom: var(--gap-m);
 
     &:last-child {
@@ -31,22 +36,17 @@
     }
 }
 
-.horizontal .radioList {
-    flex-wrap: wrap;
-    margin-bottom: var(--gap-xs-neg);
-}
-
-.horizontal .radio {
+.horizontalRadio {
     margin-right: var(--gap-xl);
     margin-bottom: var(--gap-xs);
 }
 
-.horizontal .tagLabel {
+.horizontalTagLabel {
     margin-right: var(--gap-xs);
 }
 
-.horizontal .radio:last-child,
-.horizontal .tagLabel:last-child {
+.horizontalRadio:last-child,
+.horizontalTagLabel:last-child {
     margin-right: 0;
 }
 

package/src/desktop/index.ts

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

package/src/desktop/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/desktop/index.js"
+}

package/src/mobile/index.ts

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

package/src/mobile/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/mobile/index.js"
+}

package/cssm/desktop.d.ts

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

package/cssm/mobile.d.ts

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

package/desktop.d.ts

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

package/esm/desktop.d.ts

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

package/esm/desktop.js

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

package/esm/mobile.d.ts

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

package/esm/mobile.js

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

package/mobile.d.ts

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

package/modern/desktop.d.ts

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

package/modern/desktop.js

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

package/modern/mobile.d.ts

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

package/modern/mobile.js

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

package/src/desktop.ts

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

package/src/mobile.ts

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