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

package/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/Component.desktop.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var components_baseRadioGroup_Component = require('./components/base-radio-group/Component.js');
+require('classnames');
+require('@alfalab/hooks');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var styles = {"radioList":"radio-group__radioList_1ud02","label":"radio-group__label_1ud02","sub":"radio-group__sub_1ud02"};
+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 })); });
+
+exports.RadioGroupDesktop = RadioGroupDesktop;

package/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/Component.mobile.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var components_baseRadioGroup_Component = require('./components/base-radio-group/Component.js');
+require('classnames');
+require('@alfalab/hooks');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var styles = {"radioList":"radio-group__radioList_srwz3","label":"radio-group__label_srwz3","sub":"radio-group__sub_srwz3"};
+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 }))); });
+
+exports.RadioGroupMobile = RadioGroupMobile;

package/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/Component.responsive.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var coreComponentsMq = require('@alfalab/core-components-mq');
+var Component_desktop = require('./Component.desktop.js');
+var Component_mobile = require('./Component.mobile.js');
+require('./components/base-radio-group/Component.js');
+require('classnames');
+require('@alfalab/hooks');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var RadioGroup = React.forwardRef(function (_a, ref) {
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
+    var query = "(min-width: ".concat(breakpoint, "px)");
+    var isDesktop = coreComponentsMq.useMatchMedia(query)[0];
+    var Component = isDesktop ? Component_desktop.RadioGroupDesktop : Component_mobile.RadioGroupMobile;
+    return React__default.default.createElement(Component, tslib.__assign({ ref: ref }, restProps));
+});
+
+exports.RadioGroup = RadioGroup;

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

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

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

@@ -6,18 +6,19 @@ var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var hooks = require('@alfalab/hooks');
-var styles = require('./index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
-var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
-var RadioGroup = React.forwardRef(function (_a, ref) {
-    var _b;
-    var children = _a.children, className = _a.className, _c = _a.direction, direction = _c === void 0 ? 'vertical' : _c, label = _a.label, error = _a.error, hint = _a.hint, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _d = _a.type, type = _d === void 0 ? 'radio' : _d, dataTestId = _a.dataTestId, _e = _a.disabled, disabled = _e === void 0 ? false : _e, name = _a.name, value = _a.value;
-    var _f = React.useState(''), stateValue = _f[0], setStateValue = _f[1];
+var commonStyles = {"component":"radio-group__component_laaha","error":"radio-group__error_laaha","tag":"radio-group__tag_laaha","radioList":"radio-group__radioList_laaha","vertical":"radio-group__vertical_laaha","radio":"radio-group__radio_laaha","horizontal":"radio-group__horizontal_laaha","tagLabel":"radio-group__tagLabel_laaha","label":"radio-group__label_laaha","sub":"radio-group__sub_laaha","errorMessage":"radio-group__errorMessage_laaha","hint":"radio-group__hint_laaha","hiddenInput":"radio-group__hiddenInput_laaha"};
+require('./index.css')
+
+var BaseRadioGroup = React.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 = React.useState(''), stateValue = _g[0], setStateValue = _g[1];
     hooks.useDidUpdateEffect(function () {
         setStateValue(value);
     }, [value]);
@@ -32,27 +33,29 @@ var RadioGroup = 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, styles__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.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(styles__default.default.radio, styles__default.default.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: styles__default.default.hiddenInput, value: child.props.value }),
+        return (React__default.default.createElement("label", { className: cn__default.default(commonStyles.radio, commonStyles.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(styles__default.default.component, styles__default.default[type], styles__default.default[direction], (_b = {}, _b[styles__default.default.error] = error, _b), className), "data-test-id": dataTestId, ref: ref },
-        label ? React__default.default.createElement("span", { className: styles__default.default.label }, label) : null,
-        children ? (React__default.default.createElement("div", { className: styles__default.default.radioList, onBlur: onBlur, onFocus: onFocus }, React.Children.map(children, function (child) {
+    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 },
+        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, (_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(styles__default.default.sub, styles__default.default.errorMessage), role: 'alert' }, errorMessage)),
-        hint && !errorMessage && (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.sub, styles__default.default.hint) }, hint))));
+        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))));
 });
 
-exports.RadioGroup = RadioGroup;
+exports.BaseRadioGroup = BaseRadioGroup;

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

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

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

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

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

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_baseRadioGroup_Component = require('./Component.js');
+require('tslib');
+require('react');
+require('classnames');
+require('@alfalab/hooks');
+
+
+
+exports.BaseRadioGroup = components_baseRadioGroup_Component.BaseRadioGroup;

package/cssm/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/cssm/Component.desktop.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var components_baseRadioGroup_Component = require('./components/base-radio-group/Component.js');
+var styles = require('./desktop.module.css');
+require('classnames');
+require('@alfalab/hooks');
+require('./components/base-radio-group/index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var RadioGroupDesktop = React.forwardRef(function (props, ref) { return React__default.default.createElement(components_baseRadioGroup_Component.BaseRadioGroup, tslib.__assign({}, props, { ref: ref, styles: styles__default.default })); });
+
+exports.RadioGroupDesktop = RadioGroupDesktop;

package/cssm/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/cssm/Component.mobile.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var components_baseRadioGroup_Component = require('./components/base-radio-group/Component.js');
+var styles = require('./mobile.module.css');
+require('classnames');
+require('@alfalab/hooks');
+require('./components/base-radio-group/index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var RadioGroupMobile = React.forwardRef(function (props, ref) { return (React__default.default.createElement(components_baseRadioGroup_Component.BaseRadioGroup, tslib.__assign({}, props, { ref: ref, styles: styles__default.default }))); });
+
+exports.RadioGroupMobile = RadioGroupMobile;

package/cssm/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/cssm/Component.responsive.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var coreComponentsMq = require('@alfalab/core-components-mq/cssm');
+var Component_desktop = require('./Component.desktop.js');
+var Component_mobile = require('./Component.mobile.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('./mobile.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var RadioGroup = React.forwardRef(function (_a, ref) {
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
+    var query = "(min-width: ".concat(breakpoint, "px)");
+    var isDesktop = coreComponentsMq.useMatchMedia(query)[0];
+    var Component = isDesktop ? Component_desktop.RadioGroupDesktop : Component_mobile.RadioGroupMobile;
+    return React__default.default.createElement(Component, tslib.__assign({ ref: ref }, restProps));
+});
+
+exports.RadioGroup = RadioGroup;

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

@@ -6,19 +6,18 @@ var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var hooks = require('@alfalab/hooks');
+var commonStyles = require('./index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var commonStyles__default = /*#__PURE__*/_interopDefaultCompat(commonStyles);
 
-var styles = {"component":"radio-group__component_phgvy","error":"radio-group__error_phgvy","radioList":"radio-group__radioList_phgvy","vertical":"radio-group__vertical_phgvy","radio":"radio-group__radio_phgvy","horizontal":"radio-group__horizontal_phgvy","tagLabel":"radio-group__tagLabel_phgvy","label":"radio-group__label_phgvy","sub":"radio-group__sub_phgvy","errorMessage":"radio-group__errorMessage_phgvy","hint":"radio-group__hint_phgvy","hiddenInput":"radio-group__hiddenInput_phgvy"};
-require('./index.css')
-
-var RadioGroup = React.forwardRef(function (_a, ref) {
-    var _b;
-    var children = _a.children, className = _a.className, _c = _a.direction, direction = _c === void 0 ? 'vertical' : _c, label = _a.label, error = _a.error, hint = _a.hint, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _d = _a.type, type = _d === void 0 ? 'radio' : _d, dataTestId = _a.dataTestId, _e = _a.disabled, disabled = _e === void 0 ? false : _e, name = _a.name, value = _a.value;
-    var _f = React.useState(''), stateValue = _f[0], setStateValue = _f[1];
+var BaseRadioGroup = React.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 = React.useState(''), stateValue = _g[0], setStateValue = _g[1];
     hooks.useDidUpdateEffect(function () {
         setStateValue(value);
     }, [value]);
@@ -33,27 +32,29 @@ var RadioGroup = 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, styles.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.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(styles.radio, styles.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: styles.hiddenInput, value: child.props.value }),
+        return (React__default.default.createElement("label", { className: cn__default.default(commonStyles__default.default.radio, commonStyles__default.default.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(styles.component, styles[type], styles[direction], (_b = {}, _b[styles.error] = error, _b), className), "data-test-id": dataTestId, ref: ref },
-        label ? React__default.default.createElement("span", { className: styles.label }, label) : null,
-        children ? (React__default.default.createElement("div", { className: styles.radioList, onBlur: onBlur, onFocus: onFocus }, React.Children.map(children, function (child) {
+    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 },
+        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, (_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(styles.sub, styles.errorMessage), role: 'alert' }, errorMessage)),
-        hint && !errorMessage && (React__default.default.createElement("span", { className: cn__default.default(styles.sub, styles.hint) }, hint))));
+        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))));
 });
 
-exports.RadioGroup = RadioGroup;
+exports.BaseRadioGroup = BaseRadioGroup;

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

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

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

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_baseRadioGroup_Component = require('./Component.js');
+require('tslib');
+require('react');
+require('classnames');
+require('@alfalab/hooks');
+require('./index.module.css');
+
+
+
+exports.BaseRadioGroup = components_baseRadioGroup_Component.BaseRadioGroup;

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

@@ -27,13 +27,17 @@
     --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);
+
+    /* mobile */
 } .component {
     display: flex;
     flex-direction: column;
 } .error {
-    padding-left: var(--gap-xs);
-    border-left: 1px solid var(--radio-group-error-color);
-} .radioList {
+    padding-left: var(--gap-s);
+    border-left: 1px solid var(--radio-group-error-color)
+} .error.tag {
+        padding-left: var(--gap-xs);
+    } .radioList {
     display: flex;
 } .vertical .radioList {
     flex-direction: column;

package/cssm/desktop.d.ts

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

package/cssm/desktop.js

@@ -0,0 +1,16 @@
+'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');
+require('./components/base-radio-group/index.module.css');
+require('./desktop.module.css');
+
+
+
+exports.RadioGroupDesktop = Component_desktop.RadioGroupDesktop;

package/cssm/desktop.module.css

@@ -0,0 +1,27 @@
+:root {
+} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} :root {
+    --radio-group-sub-padding-left: 0;
+    --radio-group-list-padding-left: 0;
+
+    /* mobile */
+} .radioList {
+    padding-left: var(--radio-group-list-padding-left);
+} .label {
+    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;