@alfalab/core-components 44.7.4 → 44.7.5

package/pure-cell/modern/components/text/component.js

@@ -2,7 +2,7 @@ import 'react';
 import 'classnames';
 import '../../../../shared/modern';
 import '../../../../typography/modern';
-export { T as Text } from '../../component-a8997f96.js';
+export { T as Text } from '../../component-0c8c9493.js';
 import 'react-merge-refs';
 import '../../../../comment/modern';
 import '@alfalab/hooks';

package/pure-cell/modern/components/text/index.d.ts

@@ -1 +1 @@
-export * from "../../component-a8997f96";
+export * from "../../component-0c8c9493";

package/pure-cell/modern/components/text/index.js

@@ -1,4 +1,4 @@
-export { T as Text } from '../../component-a8997f96.js';
+export { T as Text } from '../../component-0c8c9493.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/index.js

@@ -1,4 +1,4 @@
-export { P as PureCell } from './component-a8997f96.js';
+export { P as PureCell } from './component-0c8c9493.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/segmented-control/Component.d.ts

@@ -1,4 +1,6 @@
-import { FC, ReactElement } from 'react';
+/// <reference types="react" />
+import React from 'react';
+import { FC, ReactElement } from "react";
 import { SegmentProps } from "./components/index";
 import { ContextType } from "./context";
 import { IDType } from "./typing";
@@ -35,6 +37,16 @@ type SegmentedControlProps = {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+    /**
+     * Дополнительные инлайн стили для враппера
+     */
+    style?: React.CSSProperties;
+};
+declare const SIZE_TO_CLASSNAME_MAP: {
+    xxs: string;
+    xs: string;
+    32: string;
+    40: string;
 };
 declare const SegmentedControl: FC<SegmentedControlProps>;
-export { SegmentedControlProps, SegmentedControl };
+export { SegmentedControlProps, SIZE_TO_CLASSNAME_MAP, SegmentedControl };

package/segmented-control/Component.js

@@ -13,7 +13,7 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var defaultColors = {"wrapper":"segmented-control__wrapper_17qg3","segment":"segmented-control__segment_17qg3","selected":"segmented-control__selected_17qg3","selectedBox":"segmented-control__selectedBox_17qg3"};
 require('./default.css');
 
-var styles = {"wrapper":"segmented-control__wrapper_5iyul","container":"segmented-control__container_5iyul","inner":"segmented-control__inner_5iyul","segment":"segmented-control__segment_5iyul","selected":"segmented-control__selected_5iyul","xs":"segmented-control__xs_5iyul","rounded":"segmented-control__rounded_5iyul","rectangular":"segmented-control__rectangular_5iyul","selectedBox":"segmented-control__selectedBox_5iyul","xxs":"segmented-control__xxs_5iyul"};
+var styles = {"wrapper":"segmented-control__wrapper_5iyul","container":"segmented-control__container_5iyul","inner":"segmented-control__inner_5iyul","segment":"segmented-control__segment_5iyul","selected":"segmented-control__selected_5iyul","size-40":"segmented-control__size-40_5iyul","rounded":"segmented-control__rounded_5iyul","rectangular":"segmented-control__rectangular_5iyul","selectedBox":"segmented-control__selectedBox_5iyul","size-32":"segmented-control__size-32_5iyul"};
 require('./index.css');
 
 var invertedColors = {"wrapper":"segmented-control__wrapper_1sc9j","segment":"segmented-control__segment_1sc9j","selected":"segmented-control__selected_1sc9j","selectedBox":"segmented-control__selectedBox_1sc9j"};
@@ -24,8 +24,14 @@ var colorStyles = {
     inverted: invertedColors,
 };
 var MAX_SEGMENTS = 5;
+var SIZE_TO_CLASSNAME_MAP = {
+    xxs: 'size-32',
+    xs: 'size-40',
+    32: 'size-32',
+    40: 'size-40',
+};
 var SegmentedControl = function (_a) {
-    var className = _a.className, selectedId = _a.selectedId, onChange = _a.onChange, _b = _a.shape, shape = _b === void 0 ? 'rectangular' : _b, _c = _a.size, size = _c === void 0 ? 'xxs' : _c, defaultChildren = _a.children, _d = _a.colors, colors = _d === void 0 ? 'default' : _d, dataTestId = _a.dataTestId;
+    var className = _a.className, selectedId = _a.selectedId, onChange = _a.onChange, _b = _a.shape, shape = _b === void 0 ? 'rectangular' : _b, _c = _a.size, size = _c === void 0 ? 'xxs' : _c, defaultChildren = _a.children, _d = _a.colors, colors = _d === void 0 ? 'default' : _d, dataTestId = _a.dataTestId, style = _a.style;
     var wrapperRef = React.useRef(null);
     var innerRef = React.useRef(null);
     var selectedBoxRef = React.useRef(null);
@@ -60,19 +66,21 @@ var SegmentedControl = function (_a) {
     return (
     // eslint-disable-next-line react/jsx-no-constructed-context-values
     React__default.default.createElement(context.SegmentedControlContext.Provider, { value: { onChange: onChange, colors: colors } },
-        React__default.default.createElement("div", { ref: wrapperRef, className: cn__default.default(styles.wrapper, colorStyles[colors].wrapper, styles[shape], styles[size], className), "data-test-id": dataTestId },
-            React__default.default.createElement("div", { className: cn__default.default(styles.container) },
-                React__default.default.createElement("div", { className: cn__default.default(styles.selectedBox, colorStyles[colors].selectedBox, styles[shape]), ref: selectedBoxRef }),
-                React__default.default.createElement("div", { className: cn__default.default(styles.inner), ref: innerRef }, React__default.default.Children.map(children, function (item) {
-                    var _a;
-                    return React__default.default.cloneElement(item, {
-                        className: cn__default.default(styles.segment, colorStyles[colors].segment, (_a = {},
-                            _a[styles.selected] = item.props.id === selectedId,
-                            _a[colorStyles[colors].selected] = item.props.id === selectedId,
-                            _a), item.props.className),
-                    });
-                })))),
+        React__default.default.createElement("div", { ref: wrapperRef, className: className, style: style, "data-test-id": dataTestId },
+            React__default.default.createElement("div", { className: cn__default.default(styles.wrapper, colorStyles[colors].wrapper, styles[shape], styles[SIZE_TO_CLASSNAME_MAP[size]]) },
+                React__default.default.createElement("div", { className: cn__default.default(styles.container) },
+                    React__default.default.createElement("div", { className: cn__default.default(styles.selectedBox, colorStyles[colors].selectedBox, styles[shape]), ref: selectedBoxRef }),
+                    React__default.default.createElement("div", { className: cn__default.default(styles.inner), ref: innerRef }, React__default.default.Children.map(children, function (item) {
+                        var _a;
+                        return React__default.default.cloneElement(item, {
+                            className: cn__default.default(styles.segment, colorStyles[colors].segment, (_a = {},
+                                _a[styles.selected] = item.props.id === selectedId,
+                                _a[colorStyles[colors].selected] = item.props.id === selectedId,
+                                _a), item.props.className),
+                        });
+                    }))))),
         content && React__default.default.createElement("div", { className: cn__default.default(contentClassName) }, content)));
 };
 
+exports.SIZE_TO_CLASSNAME_MAP = SIZE_TO_CLASSNAME_MAP;
 exports.SegmentedControl = SegmentedControl;

package/segmented-control/cssm/Component.d.ts

@@ -1,4 +1,6 @@
-import { FC, ReactElement } from 'react';
+/// <reference types="react" />
+import React from 'react';
+import { FC, ReactElement } from "react";
 import { SegmentProps } from "./components/index";
 import { ContextType } from "./context";
 import { IDType } from "./typing";
@@ -35,6 +37,16 @@ type SegmentedControlProps = {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+    /**
+     * Дополнительные инлайн стили для враппера
+     */
+    style?: React.CSSProperties;
+};
+declare const SIZE_TO_CLASSNAME_MAP: {
+    xxs: string;
+    xs: string;
+    32: string;
+    40: string;
 };
 declare const SegmentedControl: FC<SegmentedControlProps>;
-export { SegmentedControlProps, SegmentedControl };
+export { SegmentedControlProps, SIZE_TO_CLASSNAME_MAP, SegmentedControl };

package/segmented-control/cssm/Component.js

@@ -21,8 +21,14 @@ var colorStyles = {
     inverted: invertedColors__default.default,
 };
 var MAX_SEGMENTS = 5;
+var SIZE_TO_CLASSNAME_MAP = {
+    xxs: 'size-32',
+    xs: 'size-40',
+    32: 'size-32',
+    40: 'size-40',
+};
 var SegmentedControl = function (_a) {
-    var className = _a.className, selectedId = _a.selectedId, onChange = _a.onChange, _b = _a.shape, shape = _b === void 0 ? 'rectangular' : _b, _c = _a.size, size = _c === void 0 ? 'xxs' : _c, defaultChildren = _a.children, _d = _a.colors, colors = _d === void 0 ? 'default' : _d, dataTestId = _a.dataTestId;
+    var className = _a.className, selectedId = _a.selectedId, onChange = _a.onChange, _b = _a.shape, shape = _b === void 0 ? 'rectangular' : _b, _c = _a.size, size = _c === void 0 ? 'xxs' : _c, defaultChildren = _a.children, _d = _a.colors, colors = _d === void 0 ? 'default' : _d, dataTestId = _a.dataTestId, style = _a.style;
     var wrapperRef = React.useRef(null);
     var innerRef = React.useRef(null);
     var selectedBoxRef = React.useRef(null);
@@ -57,19 +63,21 @@ var SegmentedControl = function (_a) {
     return (
     // eslint-disable-next-line react/jsx-no-constructed-context-values
     React__default.default.createElement(context.SegmentedControlContext.Provider, { value: { onChange: onChange, colors: colors } },
-        React__default.default.createElement("div", { ref: wrapperRef, className: cn__default.default(styles__default.default.wrapper, colorStyles[colors].wrapper, styles__default.default[shape], styles__default.default[size], className), "data-test-id": dataTestId },
-            React__default.default.createElement("div", { className: cn__default.default(styles__default.default.container) },
-                React__default.default.createElement("div", { className: cn__default.default(styles__default.default.selectedBox, colorStyles[colors].selectedBox, styles__default.default[shape]), ref: selectedBoxRef }),
-                React__default.default.createElement("div", { className: cn__default.default(styles__default.default.inner), ref: innerRef }, React__default.default.Children.map(children, function (item) {
-                    var _a;
-                    return React__default.default.cloneElement(item, {
-                        className: cn__default.default(styles__default.default.segment, colorStyles[colors].segment, (_a = {},
-                            _a[styles__default.default.selected] = item.props.id === selectedId,
-                            _a[colorStyles[colors].selected] = item.props.id === selectedId,
-                            _a), item.props.className),
-                    });
-                })))),
+        React__default.default.createElement("div", { ref: wrapperRef, className: className, style: style, "data-test-id": dataTestId },
+            React__default.default.createElement("div", { className: cn__default.default(styles__default.default.wrapper, colorStyles[colors].wrapper, styles__default.default[shape], styles__default.default[SIZE_TO_CLASSNAME_MAP[size]]) },
+                React__default.default.createElement("div", { className: cn__default.default(styles__default.default.container) },
+                    React__default.default.createElement("div", { className: cn__default.default(styles__default.default.selectedBox, colorStyles[colors].selectedBox, styles__default.default[shape]), ref: selectedBoxRef }),
+                    React__default.default.createElement("div", { className: cn__default.default(styles__default.default.inner), ref: innerRef }, React__default.default.Children.map(children, function (item) {
+                        var _a;
+                        return React__default.default.cloneElement(item, {
+                            className: cn__default.default(styles__default.default.segment, colorStyles[colors].segment, (_a = {},
+                                _a[styles__default.default.selected] = item.props.id === selectedId,
+                                _a[colorStyles[colors].selected] = item.props.id === selectedId,
+                                _a), item.props.className),
+                        });
+                    }))))),
         content && React__default.default.createElement("div", { className: cn__default.default(contentClassName) }, content)));
 };
 
+exports.SIZE_TO_CLASSNAME_MAP = SIZE_TO_CLASSNAME_MAP;
 exports.SegmentedControl = SegmentedControl;

package/segmented-control/cssm/index.js

@@ -5,5 +5,6 @@ var components_segment_Component = require('./components/segment/Component.js');
 
 
 
+exports.SIZE_TO_CLASSNAME_MAP = Component.SIZE_TO_CLASSNAME_MAP;
 exports.SegmentedControl = Component.SegmentedControl;
 exports.Segment = components_segment_Component.Segment;

package/segmented-control/cssm/index.module.css

@@ -43,16 +43,16 @@
 } .selected:before,
     .selected + .segment:before {
         opacity: 0;
-    } .xs {
+    } .size-40 {
     height: var(--size-xs-height)
-} .xs .rounded,
-    .xs:has(.rounded) {
+} .size-40 .rounded,
+    .size-40:has(.rounded) {
         border-radius: var(--border-radius-xxl);
-    } .xs:has(.rectangular) {
+    } .size-40:has(.rectangular) {
         border-radius: var(--border-radius-l)
-    } .xs:has(.rectangular) .selectedBox {
+    } .size-40:has(.rectangular) .selectedBox {
             border-radius: 10px;
-        } .xxs {
+        } .size-32 {
     height: var(--size-xxs-height);
 } .rounded {
     border-radius: var(--border-radius-xl);

package/segmented-control/esm/Component.d.ts

@@ -1,4 +1,6 @@
-import { FC, ReactElement } from 'react';
+/// <reference types="react" />
+import React from 'react';
+import { FC, ReactElement } from "react";
 import { SegmentProps } from "./components/index";
 import { ContextType } from "./context";
 import { IDType } from "./typing";
@@ -35,6 +37,16 @@ type SegmentedControlProps = {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+    /**
+     * Дополнительные инлайн стили для враппера
+     */
+    style?: React.CSSProperties;
+};
+declare const SIZE_TO_CLASSNAME_MAP: {
+    xxs: string;
+    xs: string;
+    32: string;
+    40: string;
 };
 declare const SegmentedControl: FC<SegmentedControlProps>;
-export { SegmentedControlProps, SegmentedControl };
+export { SegmentedControlProps, SIZE_TO_CLASSNAME_MAP, SegmentedControl };

package/segmented-control/esm/Component.js

@@ -6,7 +6,7 @@ import { SegmentedControlContext } from './context.js';
 var defaultColors = {"wrapper":"segmented-control__wrapper_17qg3","segment":"segmented-control__segment_17qg3","selected":"segmented-control__selected_17qg3","selectedBox":"segmented-control__selectedBox_17qg3"};
 require('./default.css');
 
-var styles = {"wrapper":"segmented-control__wrapper_5iyul","container":"segmented-control__container_5iyul","inner":"segmented-control__inner_5iyul","segment":"segmented-control__segment_5iyul","selected":"segmented-control__selected_5iyul","xs":"segmented-control__xs_5iyul","rounded":"segmented-control__rounded_5iyul","rectangular":"segmented-control__rectangular_5iyul","selectedBox":"segmented-control__selectedBox_5iyul","xxs":"segmented-control__xxs_5iyul"};
+var styles = {"wrapper":"segmented-control__wrapper_5iyul","container":"segmented-control__container_5iyul","inner":"segmented-control__inner_5iyul","segment":"segmented-control__segment_5iyul","selected":"segmented-control__selected_5iyul","size-40":"segmented-control__size-40_5iyul","rounded":"segmented-control__rounded_5iyul","rectangular":"segmented-control__rectangular_5iyul","selectedBox":"segmented-control__selectedBox_5iyul","size-32":"segmented-control__size-32_5iyul"};
 require('./index.css');
 
 var invertedColors = {"wrapper":"segmented-control__wrapper_1sc9j","segment":"segmented-control__segment_1sc9j","selected":"segmented-control__selected_1sc9j","selectedBox":"segmented-control__selectedBox_1sc9j"};
@@ -17,8 +17,14 @@ var colorStyles = {
     inverted: invertedColors,
 };
 var MAX_SEGMENTS = 5;
+var SIZE_TO_CLASSNAME_MAP = {
+    xxs: 'size-32',
+    xs: 'size-40',
+    32: 'size-32',
+    40: 'size-40',
+};
 var SegmentedControl = function (_a) {
-    var className = _a.className, selectedId = _a.selectedId, onChange = _a.onChange, _b = _a.shape, shape = _b === void 0 ? 'rectangular' : _b, _c = _a.size, size = _c === void 0 ? 'xxs' : _c, defaultChildren = _a.children, _d = _a.colors, colors = _d === void 0 ? 'default' : _d, dataTestId = _a.dataTestId;
+    var className = _a.className, selectedId = _a.selectedId, onChange = _a.onChange, _b = _a.shape, shape = _b === void 0 ? 'rectangular' : _b, _c = _a.size, size = _c === void 0 ? 'xxs' : _c, defaultChildren = _a.children, _d = _a.colors, colors = _d === void 0 ? 'default' : _d, dataTestId = _a.dataTestId, style = _a.style;
     var wrapperRef = useRef(null);
     var innerRef = useRef(null);
     var selectedBoxRef = useRef(null);
@@ -53,19 +59,20 @@ var SegmentedControl = function (_a) {
     return (
     // eslint-disable-next-line react/jsx-no-constructed-context-values
     React.createElement(SegmentedControlContext.Provider, { value: { onChange: onChange, colors: colors } },
-        React.createElement("div", { ref: wrapperRef, className: cn(styles.wrapper, colorStyles[colors].wrapper, styles[shape], styles[size], className), "data-test-id": dataTestId },
-            React.createElement("div", { className: cn(styles.container) },
-                React.createElement("div", { className: cn(styles.selectedBox, colorStyles[colors].selectedBox, styles[shape]), ref: selectedBoxRef }),
-                React.createElement("div", { className: cn(styles.inner), ref: innerRef }, React.Children.map(children, function (item) {
-                    var _a;
-                    return React.cloneElement(item, {
-                        className: cn(styles.segment, colorStyles[colors].segment, (_a = {},
-                            _a[styles.selected] = item.props.id === selectedId,
-                            _a[colorStyles[colors].selected] = item.props.id === selectedId,
-                            _a), item.props.className),
-                    });
-                })))),
+        React.createElement("div", { ref: wrapperRef, className: className, style: style, "data-test-id": dataTestId },
+            React.createElement("div", { className: cn(styles.wrapper, colorStyles[colors].wrapper, styles[shape], styles[SIZE_TO_CLASSNAME_MAP[size]]) },
+                React.createElement("div", { className: cn(styles.container) },
+                    React.createElement("div", { className: cn(styles.selectedBox, colorStyles[colors].selectedBox, styles[shape]), ref: selectedBoxRef }),
+                    React.createElement("div", { className: cn(styles.inner), ref: innerRef }, React.Children.map(children, function (item) {
+                        var _a;
+                        return React.cloneElement(item, {
+                            className: cn(styles.segment, colorStyles[colors].segment, (_a = {},
+                                _a[styles.selected] = item.props.id === selectedId,
+                                _a[colorStyles[colors].selected] = item.props.id === selectedId,
+                                _a), item.props.className),
+                        });
+                    }))))),
         content && React.createElement("div", { className: cn(contentClassName) }, content)));
 };
 
-export { SegmentedControl };
+export { SIZE_TO_CLASSNAME_MAP, SegmentedControl };

package/segmented-control/esm/index.css

@@ -44,16 +44,16 @@
 } .segmented-control__selected_5iyul:before,
     .segmented-control__selected_5iyul + .segmented-control__segment_5iyul:before {
         opacity: 0;
-    } .segmented-control__xs_5iyul {
+    } .segmented-control__size-40_5iyul {
     height: var(--size-xs-height)
-} .segmented-control__xs_5iyul .segmented-control__rounded_5iyul,
-    .segmented-control__xs_5iyul:has(.segmented-control__rounded_5iyul) {
+} .segmented-control__size-40_5iyul .segmented-control__rounded_5iyul,
+    .segmented-control__size-40_5iyul:has(.segmented-control__rounded_5iyul) {
         border-radius: var(--border-radius-xxl);
-    } .segmented-control__xs_5iyul:has(.segmented-control__rectangular_5iyul) {
+    } .segmented-control__size-40_5iyul:has(.segmented-control__rectangular_5iyul) {
         border-radius: var(--border-radius-l)
-    } .segmented-control__xs_5iyul:has(.segmented-control__rectangular_5iyul) .segmented-control__selectedBox_5iyul {
+    } .segmented-control__size-40_5iyul:has(.segmented-control__rectangular_5iyul) .segmented-control__selectedBox_5iyul {
             border-radius: 10px;
-        } .segmented-control__xxs_5iyul {
+        } .segmented-control__size-32_5iyul {
     height: var(--size-xxs-height);
 } .segmented-control__rounded_5iyul {
     border-radius: var(--border-radius-xl);

package/segmented-control/esm/index.js

@@ -1,4 +1,4 @@
-export { SegmentedControl } from './Component.js';
+export { SIZE_TO_CLASSNAME_MAP, SegmentedControl } from './Component.js';
 export { Segment } from './components/segment/Component.js';
 import 'react';
 import '@juggle/resize-observer';

package/segmented-control/index.css

@@ -44,16 +44,16 @@
 } .segmented-control__selected_5iyul:before,
     .segmented-control__selected_5iyul + .segmented-control__segment_5iyul:before {
         opacity: 0;
-    } .segmented-control__xs_5iyul {
+    } .segmented-control__size-40_5iyul {
     height: var(--size-xs-height)
-} .segmented-control__xs_5iyul .segmented-control__rounded_5iyul,
-    .segmented-control__xs_5iyul:has(.segmented-control__rounded_5iyul) {
+} .segmented-control__size-40_5iyul .segmented-control__rounded_5iyul,
+    .segmented-control__size-40_5iyul:has(.segmented-control__rounded_5iyul) {
         border-radius: var(--border-radius-xxl);
-    } .segmented-control__xs_5iyul:has(.segmented-control__rectangular_5iyul) {
+    } .segmented-control__size-40_5iyul:has(.segmented-control__rectangular_5iyul) {
         border-radius: var(--border-radius-l)
-    } .segmented-control__xs_5iyul:has(.segmented-control__rectangular_5iyul) .segmented-control__selectedBox_5iyul {
+    } .segmented-control__size-40_5iyul:has(.segmented-control__rectangular_5iyul) .segmented-control__selectedBox_5iyul {
             border-radius: 10px;
-        } .segmented-control__xxs_5iyul {
+        } .segmented-control__size-32_5iyul {
     height: var(--size-xxs-height);
 } .segmented-control__rounded_5iyul {
     border-radius: var(--border-radius-xl);

package/segmented-control/index.js

@@ -5,5 +5,6 @@ var components_segment_Component = require('./components/segment/Component.js');
 
 
 
+exports.SIZE_TO_CLASSNAME_MAP = Component.SIZE_TO_CLASSNAME_MAP;
 exports.SegmentedControl = Component.SegmentedControl;
 exports.Segment = components_segment_Component.Segment;

package/segmented-control/modern/Component.d.ts

@@ -1,4 +1,6 @@
-import { FC, ReactElement } from 'react';
+/// <reference types="react" />
+import React from 'react';
+import { FC, ReactElement } from "react";
 import { SegmentProps } from "./components/index";
 import { ContextType } from "./context";
 import { IDType } from "./typing";
@@ -35,6 +37,16 @@ type SegmentedControlProps = {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+    /**
+     * Дополнительные инлайн стили для враппера
+     */
+    style?: React.CSSProperties;
+};
+declare const SIZE_TO_CLASSNAME_MAP: {
+    xxs: string;
+    xs: string;
+    32: string;
+    40: string;
 };
 declare const SegmentedControl: FC<SegmentedControlProps>;
-export { SegmentedControlProps, SegmentedControl };
+export { SegmentedControlProps, SIZE_TO_CLASSNAME_MAP, SegmentedControl };

package/segmented-control/modern/Component.js

@@ -6,7 +6,7 @@ import { SegmentedControlContext } from './context.js';
 const defaultColors = {"wrapper":"segmented-control__wrapper_17qg3","segment":"segmented-control__segment_17qg3","selected":"segmented-control__selected_17qg3","selectedBox":"segmented-control__selectedBox_17qg3"};
 require('./default.css');
 
-const styles = {"wrapper":"segmented-control__wrapper_5iyul","container":"segmented-control__container_5iyul","inner":"segmented-control__inner_5iyul","segment":"segmented-control__segment_5iyul","selected":"segmented-control__selected_5iyul","xs":"segmented-control__xs_5iyul","rounded":"segmented-control__rounded_5iyul","rectangular":"segmented-control__rectangular_5iyul","selectedBox":"segmented-control__selectedBox_5iyul","xxs":"segmented-control__xxs_5iyul"};
+const styles = {"wrapper":"segmented-control__wrapper_5iyul","container":"segmented-control__container_5iyul","inner":"segmented-control__inner_5iyul","segment":"segmented-control__segment_5iyul","selected":"segmented-control__selected_5iyul","size-40":"segmented-control__size-40_5iyul","rounded":"segmented-control__rounded_5iyul","rectangular":"segmented-control__rectangular_5iyul","selectedBox":"segmented-control__selectedBox_5iyul","size-32":"segmented-control__size-32_5iyul"};
 require('./index.css');
 
 const invertedColors = {"wrapper":"segmented-control__wrapper_1sc9j","segment":"segmented-control__segment_1sc9j","selected":"segmented-control__selected_1sc9j","selectedBox":"segmented-control__selectedBox_1sc9j"};
@@ -17,7 +17,13 @@ const colorStyles = {
     inverted: invertedColors,
 };
 const MAX_SEGMENTS = 5;
-const SegmentedControl = ({ className, selectedId, onChange, shape = 'rectangular', size = 'xxs', children: defaultChildren, colors = 'default', dataTestId, }) => {
+const SIZE_TO_CLASSNAME_MAP = {
+    xxs: 'size-32',
+    xs: 'size-40',
+    32: 'size-32',
+    40: 'size-40',
+};
+const SegmentedControl = ({ className, selectedId, onChange, shape = 'rectangular', size = 'xxs', children: defaultChildren, colors = 'default', dataTestId, style, }) => {
     const wrapperRef = useRef(null);
     const innerRef = useRef(null);
     const selectedBoxRef = useRef(null);
@@ -52,16 +58,17 @@ const SegmentedControl = ({ className, selectedId, onChange, shape = 'rectangula
     return (
     // eslint-disable-next-line react/jsx-no-constructed-context-values
     React.createElement(SegmentedControlContext.Provider, { value: { onChange, colors } },
-        React.createElement("div", { ref: wrapperRef, className: cn(styles.wrapper, colorStyles[colors].wrapper, styles[shape], styles[size], className), "data-test-id": dataTestId },
-            React.createElement("div", { className: cn(styles.container) },
-                React.createElement("div", { className: cn(styles.selectedBox, colorStyles[colors].selectedBox, styles[shape]), ref: selectedBoxRef }),
-                React.createElement("div", { className: cn(styles.inner), ref: innerRef }, React.Children.map(children, (item) => React.cloneElement(item, {
-                    className: cn(styles.segment, colorStyles[colors].segment, {
-                        [styles.selected]: item.props.id === selectedId,
-                        [colorStyles[colors].selected]: item.props.id === selectedId,
-                    }, item.props.className),
-                }))))),
+        React.createElement("div", { ref: wrapperRef, className: className, style: style, "data-test-id": dataTestId },
+            React.createElement("div", { className: cn(styles.wrapper, colorStyles[colors].wrapper, styles[shape], styles[SIZE_TO_CLASSNAME_MAP[size]]) },
+                React.createElement("div", { className: cn(styles.container) },
+                    React.createElement("div", { className: cn(styles.selectedBox, colorStyles[colors].selectedBox, styles[shape]), ref: selectedBoxRef }),
+                    React.createElement("div", { className: cn(styles.inner), ref: innerRef }, React.Children.map(children, (item) => React.cloneElement(item, {
+                        className: cn(styles.segment, colorStyles[colors].segment, {
+                            [styles.selected]: item.props.id === selectedId,
+                            [colorStyles[colors].selected]: item.props.id === selectedId,
+                        }, item.props.className),
+                    })))))),
         content && React.createElement("div", { className: cn(contentClassName) }, content)));
 };
 
-export { SegmentedControl };
+export { SIZE_TO_CLASSNAME_MAP, SegmentedControl };

package/segmented-control/modern/index.css

@@ -44,16 +44,16 @@
 } .segmented-control__selected_5iyul:before,
     .segmented-control__selected_5iyul + .segmented-control__segment_5iyul:before {
         opacity: 0;
-    } .segmented-control__xs_5iyul {
+    } .segmented-control__size-40_5iyul {
     height: var(--size-xs-height)
-} .segmented-control__xs_5iyul .segmented-control__rounded_5iyul,
-    .segmented-control__xs_5iyul:has(.segmented-control__rounded_5iyul) {
+} .segmented-control__size-40_5iyul .segmented-control__rounded_5iyul,
+    .segmented-control__size-40_5iyul:has(.segmented-control__rounded_5iyul) {
         border-radius: var(--border-radius-xxl);
-    } .segmented-control__xs_5iyul:has(.segmented-control__rectangular_5iyul) {
+    } .segmented-control__size-40_5iyul:has(.segmented-control__rectangular_5iyul) {
         border-radius: var(--border-radius-l)
-    } .segmented-control__xs_5iyul:has(.segmented-control__rectangular_5iyul) .segmented-control__selectedBox_5iyul {
+    } .segmented-control__size-40_5iyul:has(.segmented-control__rectangular_5iyul) .segmented-control__selectedBox_5iyul {
             border-radius: 10px;
-        } .segmented-control__xxs_5iyul {
+        } .segmented-control__size-32_5iyul {
     height: var(--size-xxs-height);
 } .segmented-control__rounded_5iyul {
     border-radius: var(--border-radius-xl);

package/segmented-control/modern/index.js

@@ -1,4 +1,4 @@
-export { SegmentedControl } from './Component.js';
+export { SIZE_TO_CLASSNAME_MAP, SegmentedControl } from './Component.js';
 export { Segment } from './components/segment/Component.js';
 import 'react';
 import '@juggle/resize-observer';

package/select/esm/Component.responsive.js

@@ -41,7 +41,7 @@ import '../../base-modal/esm';
 import '../../button/esm/mobile';
 import './components/virtual-options-list/Component.js';
 import 'react-virtual';
-import './hook-caa3dbd5.js';
+import './hook-3d922dde.js';
 import './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../button/esm/desktop';
 import './presets/useSelectWithApply/options-list-with-apply/header/Component.js';

package/select/esm/index.js

@@ -41,7 +41,7 @@ import '../../base-modal/esm';
 import '../../button/esm/mobile';
 import './components/virtual-options-list/Component.js';
 import 'react-virtual';
-import './hook-caa3dbd5.js';
+import './hook-3d922dde.js';
 import './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../button/esm/desktop';
 import './presets/useSelectWithApply/options-list-with-apply/header/Component.js';

package/select/esm/mobile/Component.mobile.js

@@ -12,7 +12,7 @@ import { Option } from '../components/option/Component.js';
 import { OptionsList } from '../components/options-list/Component.js';
 import { Search } from '../components/search/Component.js';
 import { VirtualOptionsList } from '../components/virtual-options-list/Component.js';
-import { u as useSelectWithApply } from '../hook-caa3dbd5.js';
+import { u as useSelectWithApply } from '../hook-3d922dde.js';
 import { Header } from '../presets/useSelectWithApply/options-list-with-apply/header/Component.js';
 import 'classnames';
 import '@alfalab/icons-glyph/ChevronDownMIcon';

package/select/esm/mobile/Component.modal.mobile.js

@@ -37,7 +37,7 @@ import '../../../input/esm';
 import '@alfalab/icons-glyph/MagnifierMIcon';
 import '../components/virtual-options-list/Component.js';
 import 'react-virtual';
-import '../hook-caa3dbd5.js';
+import '../hook-3d922dde.js';
 import '../presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../../button/esm/desktop';
 import '../presets/useSelectWithApply/options-list-with-apply/header/Component.js';

package/select/esm/mobile/index.js

@@ -38,7 +38,7 @@ import '../../../input/esm';
 import '@alfalab/icons-glyph/MagnifierMIcon';
 import '../components/virtual-options-list/Component.js';
 import 'react-virtual';
-import '../hook-caa3dbd5.js';
+import '../hook-3d922dde.js';
 import '../presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../../button/esm/desktop';
 import '../presets/useSelectWithApply/options-list-with-apply/header/Component.js';

package/select/esm/presets/index.js

@@ -1,6 +1,6 @@
 export { useSelectWithLoading } from './useSelectWithLoading/hook.js';
 export { useLazyLoading } from './useLazyLoading/hook.js';
-export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-caa3dbd5.js';
+export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-3d922dde.js';
 import 'tslib';
 import 'react';
 import '../../../skeleton/esm';

package/select/esm/presets/useSelectWithApply/hook.js

@@ -1,7 +1,7 @@
 import 'tslib';
 import 'react';
 import '../../../../shared/esm';
-export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../../hook-caa3dbd5.js';
+export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../../hook-3d922dde.js';
 import '../../utils.js';
 import '../../components/options-list/Component.js';
 import 'react-merge-refs';

package/select/esm/presets/useSelectWithApply/options-list-with-apply/Component.js

@@ -1,7 +1,7 @@
 import 'tslib';
 import 'react';
 import '../../../components/options-list/Component.js';
-export { O as OptionsListWithApply } from '../../../hook-caa3dbd5.js';
+export { O as OptionsListWithApply } from '../../../hook-3d922dde.js';
 import './footer/Component.js';
 import './header/Component.js';
 import 'react-merge-refs';

package/select/esm/presets/useSelectWithApply/options-list-with-apply/index.d.ts

@@ -1 +1 @@
-export * from "../../../hook-caa3dbd5";
+export * from "../../../hook-3d922dde";

package/select/esm/presets/useSelectWithApply/options-list-with-apply/index.js

@@ -1,4 +1,4 @@
-export { O as OptionsListWithApply } from '../../../hook-caa3dbd5.js';
+export { O as OptionsListWithApply } from '../../../hook-3d922dde.js';
 import 'tslib';
 import 'react';
 import '../../../utils.js';

package/select/esm/shared/index.js

@@ -1,6 +1,6 @@
 export { useSelectWithLoading } from '../presets/useSelectWithLoading/hook.js';
 export { useLazyLoading } from '../presets/useLazyLoading/hook.js';
-export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-caa3dbd5.js';
+export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-3d922dde.js';
 export { defaultAccessor, defaultFilterFn, getSelectTestIds, isGroup, isOptionShape, joinOptions, lastIndexOf, processOptions, usePrevious, useVisibleOptions } from '../utils.js';
 export { Option } from '../components/option/Component.js';
 export { BaseOption } from '../components/base-option/Component.js';

package/select/mobile/Component.mobile.js

@@ -14,7 +14,7 @@ var components_option_Component = require('../components/option/Component.js');
 var components_optionsList_Component = require('../components/options-list/Component.js');
 var components_search_Component = require('../components/search/Component.js');
 var components_virtualOptionsList_Component = require('../components/virtual-options-list/Component.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-a6e5cffc.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-65614410.js');
 var presets_useSelectWithApply_optionsListWithApply_header_Component = require('../presets/useSelectWithApply/options-list-with-apply/header/Component.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }