@alfalab/core-components 48.29.1 → 48.30.0

package/radio/styles/inverted.css

@@ -67,42 +67,42 @@
     /* icon */
     --radio-icon-color-inverted: var(--color-light-neutral-translucent-1300);
     --radio-icon-disabled-color-inverted: var(--color-light-neutral-translucent-500-inverted);
-} .radio__container_16qog:not(.radio__checked_16qog):not(.radio__disabled_16qog) .radio__circle_16qog {
+} .radio__container_psghx:not(.radio__checked_psghx):not(.radio__disabled_psghx) .radio__circle_psghx {
             background-color: var(--radio-bg-color-inverted);
             border: 1.5px solid var(--radio-border-color-inverted);
-        } .radio__container_16qog:not(.radio__checked_16qog):not(.radio__disabled_16qog):hover:not(:active) .radio__circle_16qog {
+        } .radio__container_psghx:not(.radio__checked_psghx):not(.radio__disabled_psghx):hover:not(:active) .radio__circle_psghx {
             background-color: var(--radio-hover-bg-color-inverted);
             border-color: var(--radio-hover-border-color-inverted);
-        } .radio__container_16qog:not(.radio__checked_16qog):not(.radio__disabled_16qog):active .radio__circle_16qog {
+        } .radio__container_psghx:not(.radio__checked_psghx):not(.radio__disabled_psghx):active .radio__circle_psghx {
             background-color: var(--radio-active-bg-color-inverted);
             border-color: var(--radio-active-border-color-inverted);
-        } .radio__container_16qog.radio__disabled_16qog {
+        } .radio__container_psghx.radio__disabled_psghx {
         cursor: var(--disabled-cursor)
-    } .radio__container_16qog.radio__disabled_16qog .radio__circle_16qog {
+    } .radio__container_psghx.radio__disabled_psghx .radio__circle_psghx {
             background-color: var(--radio-disabled-bg-color-inverted);
             border: 1.5px solid var(--radio-disabled-border-color-inverted);
-        } .radio__container_16qog.radio__disabled_16qog .radio__label_16qog {
+        } .radio__container_psghx.radio__disabled_psghx .radio__label_psghx {
             color: var(--radio-disabled-color-inverted);
-        } .radio__container_16qog.radio__disabled_16qog .radio__hint_16qog {
+        } .radio__container_psghx.radio__disabled_psghx .radio__hint_psghx {
             color: var(--radio-disabled-color-inverted);
-        } .radio__container_16qog.radio__disabled_16qog.radio__checked_16qog .radio__circle_16qog:before {
+        } .radio__container_psghx.radio__disabled_psghx.radio__checked_psghx .radio__circle_psghx:before {
             background-color: var(--radio-icon-disabled-color-inverted);
-        } .radio__container_16qog.radio__checked_16qog .radio__circle_16qog {
+        } .radio__container_psghx.radio__checked_psghx .radio__circle_psghx {
             background-color: var(--radio-checked-bg-color-inverted);
             border: 1.5px solid var(--radio-checked-border-color-inverted);
-        } .radio__container_16qog.radio__checked_16qog:hover .radio__circle_16qog {
+        } .radio__container_psghx.radio__checked_psghx:hover .radio__circle_psghx {
             background-color: var(--radio-checked-hover-bg-color-inverted);
             border-color: var(--radio-checked-hover-border-color-inverted);
-        } .radio__container_16qog.radio__checked_16qog:active .radio__circle_16qog {
+        } .radio__container_psghx.radio__checked_psghx:active .radio__circle_psghx {
             background-color: var(--radio-checked-active-bg-color-inverted);
             border-color: var(--radio-checked-active-border-color-inverted);
-        } .radio__container_16qog.radio__disabled_16qog.radio__checked_16qog .radio__circle_16qog {
+        } .radio__container_psghx.radio__disabled_psghx.radio__checked_psghx .radio__circle_psghx {
         background-color: var(--radio-checked-disabled-bg-color-inverted);
         border-color: var(--radio-checked-disabled-border-color-inverted);
-    } .radio__circle_16qog:before {
+    } .radio__circle_psghx:before {
         background-color: var(--radio-icon-color-inverted);
-    } .radio__label_16qog {
+    } .radio__label_psghx {
     color: var(--radio-label-color-inverted);
-} .radio__hint_16qog {
+} .radio__hint_psghx {
     color: var(--radio-hint-color-inverted);
 }

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
+var coreComponentsShared = require('../../../shared');
 var hooks = require('@alfalab/hooks');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -10,7 +11,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_1adqh","error":"radio-group__error_1adqh","tag":"radio-group__tag_1adqh","radioList":"radio-group__radioList_1adqh","verticalRadioList":"radio-group__verticalRadioList_1adqh","horizontalRadioList":"radio-group__horizontalRadioList_1adqh","verticalRadio":"radio-group__verticalRadio_1adqh","horizontalRadio":"radio-group__horizontalRadio_1adqh","horizontalTagLabel":"radio-group__horizontalTagLabel_1adqh","label":"radio-group__label_1adqh","sub":"radio-group__sub_1adqh","errorMessage":"radio-group__errorMessage_1adqh","hint":"radio-group__hint_1adqh","hiddenInput":"radio-group__hiddenInput_1adqh","tagLabel":"radio-group__tagLabel_1adqh"};
+var commonStyles = {"component":"radio-group__component_bz7xc","error":"radio-group__error_bz7xc","tag":"radio-group__tag_bz7xc","radioList":"radio-group__radioList_bz7xc","verticalRadioList":"radio-group__verticalRadioList_bz7xc","horizontalRadioList":"radio-group__horizontalRadioList_bz7xc","verticalRadio":"radio-group__verticalRadio_bz7xc","horizontalRadio":"radio-group__horizontalRadio_bz7xc","horizontalTagLabel":"radio-group__horizontalTagLabel_bz7xc","label":"radio-group__label_bz7xc","sub":"radio-group__sub_bz7xc","errorMessage":"radio-group__errorMessage_bz7xc","hint":"radio-group__hint_bz7xc","hiddenInput":"radio-group__hiddenInput_bz7xc","tagLabel":"radio-group__tagLabel_bz7xc"};
 require('./index.css');
 
 var BaseRadioGroup = React.forwardRef(function (_a, ref) {
@@ -43,15 +44,15 @@ var BaseRadioGroup = React.forwardRef(function (_a, ref) {
     };
     var errorMessage = typeof error === 'boolean' ? '' : error;
     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,
+        label ? (React__default.default.createElement("span", { className: cn__default.default(commonStyles.label, styles.label), "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'label') }, label)) : null,
         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);
             }
             return null;
         }))) : null,
-        errorMessage && (React__default.default.createElement("span", { className: cn__default.default(commonStyles.sub, styles.sub, commonStyles.errorMessage), role: 'alert' }, errorMessage)),
-        hint && !errorMessage && (React__default.default.createElement("span", { className: cn__default.default(commonStyles.sub, styles.sub, commonStyles.hint) }, hint))));
+        errorMessage && (React__default.default.createElement("span", { className: cn__default.default(commonStyles.sub, styles.sub, commonStyles.errorMessage), role: 'alert', "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'error') }, errorMessage)),
+        hint && !errorMessage && (React__default.default.createElement("span", { className: cn__default.default(commonStyles.sub, styles.sub, commonStyles.hint), "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'hint') }, hint))));
 });
 
 exports.BaseRadioGroup = BaseRadioGroup;

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

@@ -40,55 +40,55 @@
     --radio-group-hint-color: var(--color-light-text-secondary);
 
     /* mobile */
-} .radio-group__component_1adqh {
+} .radio-group__component_bz7xc {
     display: flex;
     flex-direction: column;
-} .radio-group__error_1adqh {
+} .radio-group__error_bz7xc {
     padding-left: var(--gap-12);
     border-left: 1px solid var(--color-light-status-negative)
-} .radio-group__error_1adqh.radio-group__tag_1adqh {
+} .radio-group__error_bz7xc.radio-group__tag_bz7xc {
         padding-left: var(--gap-8);
-    } .radio-group__radioList_1adqh {
+    } .radio-group__radioList_bz7xc {
     display: flex;
-} .radio-group__verticalRadioList_1adqh {
+} .radio-group__verticalRadioList_bz7xc {
     flex-direction: column;
     align-items: flex-start;
-} .radio-group__horizontalRadioList_1adqh {
+} .radio-group__horizontalRadioList_bz7xc {
     flex-wrap: wrap;
     margin-bottom: var(--gap-8-neg);
-} .radio-group__verticalRadio_1adqh {
+} .radio-group__verticalRadio_bz7xc {
     margin-bottom: var(--gap-12)
-} .radio-group__verticalRadio_1adqh:last-child {
+} .radio-group__verticalRadio_bz7xc:last-child {
         margin-bottom: var(--gap-0);
-    } .radio-group__horizontalRadio_1adqh {
+    } .radio-group__horizontalRadio_bz7xc {
     margin-right: var(--gap-24);
     margin-bottom: var(--gap-8);
-} .radio-group__horizontalTagLabel_1adqh {
+} .radio-group__horizontalTagLabel_bz7xc {
     margin-right: var(--gap-8);
-} .radio-group__horizontalRadio_1adqh:last-child,
-.radio-group__horizontalTagLabel_1adqh:last-child {
+} .radio-group__horizontalRadio_bz7xc:last-child,
+.radio-group__horizontalTagLabel_bz7xc:last-child {
     margin-right: var(--gap-0);
-} .radio-group__label_1adqh {
+} .radio-group__label_bz7xc {
     margin-bottom: var(--gap-12);
-} .radio-group__sub_1adqh {
+} .radio-group__sub_bz7xc {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     margin-top: var(--gap-12);
-} .radio-group__errorMessage_1adqh {
+} .radio-group__errorMessage_bz7xc {
     color: var(--radio-group-error-color);
-} .radio-group__hint_1adqh {
+} .radio-group__hint_bz7xc {
     color: var(--radio-group-hint-color);
-} .radio-group__hiddenInput_1adqh {
+} .radio-group__hiddenInput_bz7xc {
     position: absolute;
     z-index: -1;
     top: var(--gap-0);
     left: var(--gap-0);
     opacity: 0
-} .radio-group__hiddenInput_1adqh:focus ~ button {
+} .radio-group__hiddenInput_bz7xc:focus ~ button {
         outline: 2px solid var(--focus-color);
         outline-offset: 2px;
-    } .radio-group__tagLabel_1adqh {
+    } .radio-group__tagLabel_bz7xc {
     position: relative;
     max-width: 100%;
 }

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
+var coreComponentsShared = require('../../../../shared/cssm');
 var hooks = require('@alfalab/hooks');
 var commonStyles = require('./index.module.css');
 
@@ -42,15 +43,15 @@ var BaseRadioGroup = React.forwardRef(function (_a, ref) {
     };
     var errorMessage = typeof error === 'boolean' ? '' : error;
     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,
+        label ? (React__default.default.createElement("span", { className: cn__default.default(commonStyles__default.default.label, styles.label), "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'label') }, label)) : null,
         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);
             }
             return null;
         }))) : null,
-        errorMessage && (React__default.default.createElement("span", { className: cn__default.default(commonStyles__default.default.sub, styles.sub, commonStyles__default.default.errorMessage), role: 'alert' }, errorMessage)),
-        hint && !errorMessage && (React__default.default.createElement("span", { className: cn__default.default(commonStyles__default.default.sub, styles.sub, commonStyles__default.default.hint) }, hint))));
+        errorMessage && (React__default.default.createElement("span", { className: cn__default.default(commonStyles__default.default.sub, styles.sub, commonStyles__default.default.errorMessage), role: 'alert', "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'error') }, errorMessage)),
+        hint && !errorMessage && (React__default.default.createElement("span", { className: cn__default.default(commonStyles__default.default.sub, styles.sub, commonStyles__default.default.hint), "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'hint') }, hint))));
 });
 
 exports.BaseRadioGroup = BaseRadioGroup;

package/radio-group/cssm/shared/index.d.ts

@@ -0,0 +1 @@
+export { getRadioGroupTestIds } from "../utils";

package/radio-group/cssm/shared/index.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('../utils.js');
+
+
+
+exports.getRadioGroupTestIds = utils.getRadioGroupTestIds;

package/radio-group/cssm/utils.d.ts

@@ -0,0 +1,7 @@
+declare function getRadioGroupTestIds(dataTestId: string): {
+    checkbox: string;
+    label: string;
+    hint: string;
+    error: string;
+};
+export { getRadioGroupTestIds };

package/radio-group/cssm/utils.js

@@ -0,0 +1,14 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var coreComponentsShared = require('../../shared/cssm');
+
+function getRadioGroupTestIds(dataTestId) {
+    return {
+        checkbox: dataTestId,
+        label: coreComponentsShared.getDataTestId(dataTestId, 'label'),
+        hint: coreComponentsShared.getDataTestId(dataTestId, 'hint'),
+        error: coreComponentsShared.getDataTestId(dataTestId, 'error'),
+    };
+}
+
+exports.getRadioGroupTestIds = getRadioGroupTestIds;

package/radio-group/desktop/Component.desktop.js

@@ -8,7 +8,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"radioList":"radio-group__radioList_1gg5s","label":"radio-group__label_1gg5s","sub":"radio-group__sub_1gg5s"};
+var styles = {"radioList":"radio-group__radioList_zc446","label":"radio-group__label_zc446","sub":"radio-group__sub_zc446"};
 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/radio-group/desktop/desktop.css

@@ -29,14 +29,14 @@
     --radio-group-list-padding-left: var(--gap-0);
 
     /* mobile */
-} .radio-group__radioList_1gg5s {
+} .radio-group__radioList_zc446 {
     padding-left: var(--radio-group-list-padding-left);
-} .radio-group__label_1gg5s {
+} .radio-group__label_zc446 {
     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_1gg5s {
+} .radio-group__sub_zc446 {
     padding-left: var(--radio-group-sub-padding-left);
 }

package/radio-group/esm/Component.responsive.js

@@ -5,6 +5,7 @@ import { RadioGroupDesktop } from './desktop/Component.desktop.js';
 import { RadioGroupMobile } from './mobile/Component.mobile.js';
 import './components/base-radio-group/Component.js';
 import 'classnames';
+import '../../shared/esm';
 import '@alfalab/hooks';
 
 var RadioGroup = forwardRef(function (_a, ref) {

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

@@ -1,9 +1,10 @@
 import { __assign } from 'tslib';
 import React, { forwardRef, useState, Children, isValidElement, cloneElement } from 'react';
 import cn from 'classnames';
+import { getDataTestId } from '../../../../shared/esm';
 import { useDidUpdateEffect } from '@alfalab/hooks';
 
-var commonStyles = {"component":"radio-group__component_1adqh","error":"radio-group__error_1adqh","tag":"radio-group__tag_1adqh","radioList":"radio-group__radioList_1adqh","verticalRadioList":"radio-group__verticalRadioList_1adqh","horizontalRadioList":"radio-group__horizontalRadioList_1adqh","verticalRadio":"radio-group__verticalRadio_1adqh","horizontalRadio":"radio-group__horizontalRadio_1adqh","horizontalTagLabel":"radio-group__horizontalTagLabel_1adqh","label":"radio-group__label_1adqh","sub":"radio-group__sub_1adqh","errorMessage":"radio-group__errorMessage_1adqh","hint":"radio-group__hint_1adqh","hiddenInput":"radio-group__hiddenInput_1adqh","tagLabel":"radio-group__tagLabel_1adqh"};
+var commonStyles = {"component":"radio-group__component_bz7xc","error":"radio-group__error_bz7xc","tag":"radio-group__tag_bz7xc","radioList":"radio-group__radioList_bz7xc","verticalRadioList":"radio-group__verticalRadioList_bz7xc","horizontalRadioList":"radio-group__horizontalRadioList_bz7xc","verticalRadio":"radio-group__verticalRadio_bz7xc","horizontalRadio":"radio-group__horizontalRadio_bz7xc","horizontalTagLabel":"radio-group__horizontalTagLabel_bz7xc","label":"radio-group__label_bz7xc","sub":"radio-group__sub_bz7xc","errorMessage":"radio-group__errorMessage_bz7xc","hint":"radio-group__hint_bz7xc","hiddenInput":"radio-group__hiddenInput_bz7xc","tagLabel":"radio-group__tagLabel_bz7xc"};
 require('./index.css');
 
 var BaseRadioGroup = forwardRef(function (_a, ref) {
@@ -36,15 +37,15 @@ var BaseRadioGroup = forwardRef(function (_a, ref) {
     };
     var errorMessage = typeof error === 'boolean' ? '' : error;
     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,
+        label ? (React.createElement("span", { className: cn(commonStyles.label, styles.label), "data-test-id": getDataTestId(dataTestId, 'label') }, label)) : null,
         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);
             }
             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))));
+        errorMessage && (React.createElement("span", { className: cn(commonStyles.sub, styles.sub, commonStyles.errorMessage), role: 'alert', "data-test-id": getDataTestId(dataTestId, 'error') }, errorMessage)),
+        hint && !errorMessage && (React.createElement("span", { className: cn(commonStyles.sub, styles.sub, commonStyles.hint), "data-test-id": getDataTestId(dataTestId, 'hint') }, hint))));
 });
 
 export { BaseRadioGroup };

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

@@ -40,55 +40,55 @@
     --radio-group-hint-color: var(--color-light-text-secondary);
 
     /* mobile */
-} .radio-group__component_1adqh {
+} .radio-group__component_bz7xc {
     display: flex;
     flex-direction: column;
-} .radio-group__error_1adqh {
+} .radio-group__error_bz7xc {
     padding-left: var(--gap-12);
     border-left: 1px solid var(--color-light-status-negative)
-} .radio-group__error_1adqh.radio-group__tag_1adqh {
+} .radio-group__error_bz7xc.radio-group__tag_bz7xc {
         padding-left: var(--gap-8);
-    } .radio-group__radioList_1adqh {
+    } .radio-group__radioList_bz7xc {
     display: flex;
-} .radio-group__verticalRadioList_1adqh {
+} .radio-group__verticalRadioList_bz7xc {
     flex-direction: column;
     align-items: flex-start;
-} .radio-group__horizontalRadioList_1adqh {
+} .radio-group__horizontalRadioList_bz7xc {
     flex-wrap: wrap;
     margin-bottom: var(--gap-8-neg);
-} .radio-group__verticalRadio_1adqh {
+} .radio-group__verticalRadio_bz7xc {
     margin-bottom: var(--gap-12)
-} .radio-group__verticalRadio_1adqh:last-child {
+} .radio-group__verticalRadio_bz7xc:last-child {
         margin-bottom: var(--gap-0);
-    } .radio-group__horizontalRadio_1adqh {
+    } .radio-group__horizontalRadio_bz7xc {
     margin-right: var(--gap-24);
     margin-bottom: var(--gap-8);
-} .radio-group__horizontalTagLabel_1adqh {
+} .radio-group__horizontalTagLabel_bz7xc {
     margin-right: var(--gap-8);
-} .radio-group__horizontalRadio_1adqh:last-child,
-.radio-group__horizontalTagLabel_1adqh:last-child {
+} .radio-group__horizontalRadio_bz7xc:last-child,
+.radio-group__horizontalTagLabel_bz7xc:last-child {
     margin-right: var(--gap-0);
-} .radio-group__label_1adqh {
+} .radio-group__label_bz7xc {
     margin-bottom: var(--gap-12);
-} .radio-group__sub_1adqh {
+} .radio-group__sub_bz7xc {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     margin-top: var(--gap-12);
-} .radio-group__errorMessage_1adqh {
+} .radio-group__errorMessage_bz7xc {
     color: var(--radio-group-error-color);
-} .radio-group__hint_1adqh {
+} .radio-group__hint_bz7xc {
     color: var(--radio-group-hint-color);
-} .radio-group__hiddenInput_1adqh {
+} .radio-group__hiddenInput_bz7xc {
     position: absolute;
     z-index: -1;
     top: var(--gap-0);
     left: var(--gap-0);
     opacity: 0
-} .radio-group__hiddenInput_1adqh:focus ~ button {
+} .radio-group__hiddenInput_bz7xc:focus ~ button {
         outline: 2px solid var(--focus-color);
         outline-offset: 2px;
-    } .radio-group__tagLabel_1adqh {
+    } .radio-group__tagLabel_bz7xc {
     position: relative;
     max-width: 100%;
 }

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

@@ -2,4 +2,5 @@ export { BaseRadioGroup } from './Component.js';
 import 'tslib';
 import 'react';
 import 'classnames';
+import '../../../../shared/esm';
 import '@alfalab/hooks';

package/radio-group/esm/desktop/Component.desktop.js

@@ -2,9 +2,10 @@ import { __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import { BaseRadioGroup } from '../components/base-radio-group/Component.js';
 import 'classnames';
+import '../../../shared/esm';
 import '@alfalab/hooks';
 
-var styles = {"radioList":"radio-group__radioList_1gg5s","label":"radio-group__label_1gg5s","sub":"radio-group__sub_1gg5s"};
+var styles = {"radioList":"radio-group__radioList_zc446","label":"radio-group__label_zc446","sub":"radio-group__sub_zc446"};
 require('./desktop.css');
 
 var RadioGroupDesktop = forwardRef(function (props, ref) { return React.createElement(BaseRadioGroup, __assign({}, props, { ref: ref, styles: styles })); });

package/radio-group/esm/desktop/desktop.css

@@ -29,14 +29,14 @@
     --radio-group-list-padding-left: var(--gap-0);
 
     /* mobile */
-} .radio-group__radioList_1gg5s {
+} .radio-group__radioList_zc446 {
     padding-left: var(--radio-group-list-padding-left);
-} .radio-group__label_1gg5s {
+} .radio-group__label_zc446 {
     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_1gg5s {
+} .radio-group__sub_zc446 {
     padding-left: var(--radio-group-sub-padding-left);
 }

package/radio-group/esm/desktop/index.js

@@ -3,4 +3,5 @@ import 'tslib';
 import 'react';
 import '../components/base-radio-group/Component.js';
 import 'classnames';
+import '../../../shared/esm';
 import '@alfalab/hooks';

package/radio-group/esm/index.js

@@ -5,5 +5,6 @@ import '../../mq/esm';
 import './desktop/Component.desktop.js';
 import './components/base-radio-group/Component.js';
 import 'classnames';
+import '../../shared/esm';
 import '@alfalab/hooks';
 import './mobile/Component.mobile.js';

package/radio-group/esm/mobile/Component.mobile.js

@@ -2,9 +2,10 @@ import { __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import { BaseRadioGroup } from '../components/base-radio-group/Component.js';
 import 'classnames';
+import '../../../shared/esm';
 import '@alfalab/hooks';
 
-var styles = {"radioList":"radio-group__radioList_wi0hl","label":"radio-group__label_wi0hl","sub":"radio-group__sub_wi0hl"};
+var styles = {"radioList":"radio-group__radioList_1jk4y","label":"radio-group__label_1jk4y","sub":"radio-group__sub_1jk4y"};
 require('./mobile.css');
 
 var RadioGroupMobile = forwardRef(function (props, ref) { return (React.createElement(BaseRadioGroup, __assign({}, props, { ref: ref, styles: styles }))); });

package/radio-group/esm/mobile/index.js

@@ -3,4 +3,5 @@ import 'tslib';
 import 'react';
 import '../components/base-radio-group/Component.js';
 import 'classnames';
+import '../../../shared/esm';
 import '@alfalab/hooks';

package/radio-group/esm/mobile/mobile.css

@@ -32,14 +32,14 @@
     --radio-group-mobile-sub-padding-left: var(--gap-4);
     --radio-group-mobile-list-padding-left: var(--gap-2);
     --radio-group-mobile-label-color: var(--color-light-text-secondary);
-} .radio-group__radioList_wi0hl {
+} .radio-group__radioList_1jk4y {
     padding-left: var(--radio-group-mobile-list-padding-left);
-} .radio-group__label_wi0hl {
+} .radio-group__label_1jk4y {
     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_wi0hl {
+} .radio-group__sub_1jk4y {
     padding-left: var(--radio-group-mobile-sub-padding-left);
 }

package/radio-group/esm/shared/index.d.ts

@@ -0,0 +1 @@
+export { getRadioGroupTestIds } from "../utils";

package/radio-group/esm/shared/index.js

@@ -0,0 +1,2 @@
+export { getRadioGroupTestIds } from '../utils.js';
+import '../../../shared/esm';

package/radio-group/esm/utils.d.ts

@@ -0,0 +1,7 @@
+declare function getRadioGroupTestIds(dataTestId: string): {
+    checkbox: string;
+    label: string;
+    hint: string;
+    error: string;
+};
+export { getRadioGroupTestIds };

package/radio-group/esm/utils.js

@@ -0,0 +1,12 @@
+import { getDataTestId } from '../../shared/esm';
+
+function getRadioGroupTestIds(dataTestId) {
+    return {
+        checkbox: dataTestId,
+        label: getDataTestId(dataTestId, 'label'),
+        hint: getDataTestId(dataTestId, 'hint'),
+        error: getDataTestId(dataTestId, 'error'),
+    };
+}
+
+export { getRadioGroupTestIds };

package/radio-group/mobile/Component.mobile.js

@@ -8,7 +8,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"radioList":"radio-group__radioList_wi0hl","label":"radio-group__label_wi0hl","sub":"radio-group__sub_wi0hl"};
+var styles = {"radioList":"radio-group__radioList_1jk4y","label":"radio-group__label_1jk4y","sub":"radio-group__sub_1jk4y"};
 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/radio-group/mobile/mobile.css

@@ -32,14 +32,14 @@
     --radio-group-mobile-sub-padding-left: var(--gap-4);
     --radio-group-mobile-list-padding-left: var(--gap-2);
     --radio-group-mobile-label-color: var(--color-light-text-secondary);
-} .radio-group__radioList_wi0hl {
+} .radio-group__radioList_1jk4y {
     padding-left: var(--radio-group-mobile-list-padding-left);
-} .radio-group__label_wi0hl {
+} .radio-group__label_1jk4y {
     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_wi0hl {
+} .radio-group__sub_1jk4y {
     padding-left: var(--radio-group-mobile-sub-padding-left);
 }

package/radio-group/modern/Component.responsive.js

@@ -4,6 +4,7 @@ import { RadioGroupDesktop } from './desktop/Component.desktop.js';
 import { RadioGroupMobile } from './mobile/Component.mobile.js';
 import './components/base-radio-group/Component.js';
 import 'classnames';
+import '../../shared/modern';
 import '@alfalab/hooks';
 
 const RadioGroup = forwardRef(({ breakpoint, client, defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop', ...restProps }, ref) => {

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

@@ -1,8 +1,9 @@
 import React, { forwardRef, useState, Children, isValidElement, cloneElement } from 'react';
 import cn from 'classnames';
+import { getDataTestId } from '../../../../shared/modern';
 import { useDidUpdateEffect } from '@alfalab/hooks';
 
-const commonStyles = {"component":"radio-group__component_1adqh","error":"radio-group__error_1adqh","tag":"radio-group__tag_1adqh","radioList":"radio-group__radioList_1adqh","verticalRadioList":"radio-group__verticalRadioList_1adqh","horizontalRadioList":"radio-group__horizontalRadioList_1adqh","verticalRadio":"radio-group__verticalRadio_1adqh","horizontalRadio":"radio-group__horizontalRadio_1adqh","horizontalTagLabel":"radio-group__horizontalTagLabel_1adqh","label":"radio-group__label_1adqh","sub":"radio-group__sub_1adqh","errorMessage":"radio-group__errorMessage_1adqh","hint":"radio-group__hint_1adqh","hiddenInput":"radio-group__hiddenInput_1adqh","tagLabel":"radio-group__tagLabel_1adqh"};
+const commonStyles = {"component":"radio-group__component_bz7xc","error":"radio-group__error_bz7xc","tag":"radio-group__tag_bz7xc","radioList":"radio-group__radioList_bz7xc","verticalRadioList":"radio-group__verticalRadioList_bz7xc","horizontalRadioList":"radio-group__horizontalRadioList_bz7xc","verticalRadio":"radio-group__verticalRadio_bz7xc","horizontalRadio":"radio-group__horizontalRadio_bz7xc","horizontalTagLabel":"radio-group__horizontalTagLabel_bz7xc","label":"radio-group__label_bz7xc","sub":"radio-group__sub_bz7xc","errorMessage":"radio-group__errorMessage_bz7xc","hint":"radio-group__hint_bz7xc","hiddenInput":"radio-group__hiddenInput_bz7xc","tagLabel":"radio-group__tagLabel_bz7xc"};
 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) => {
@@ -45,15 +46,15 @@ const BaseRadioGroup = forwardRef(({ children, className, radioListClassName, di
     };
     const errorMessage = typeof error === 'boolean' ? '' : error;
     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,
+        label ? (React.createElement("span", { className: cn(commonStyles.label, styles.label), "data-test-id": getDataTestId(dataTestId, 'label') }, label)) : null,
         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);
             }
             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))));
+        errorMessage && (React.createElement("span", { className: cn(commonStyles.sub, styles.sub, commonStyles.errorMessage), role: 'alert', "data-test-id": getDataTestId(dataTestId, 'error') }, errorMessage)),
+        hint && !errorMessage && (React.createElement("span", { className: cn(commonStyles.sub, styles.sub, commonStyles.hint), "data-test-id": getDataTestId(dataTestId, 'hint') }, hint))));
 });
 
 export { BaseRadioGroup };