@consta/uikit 3.9.2 → 3.12.0

package/ResponsesImageConnectionError/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImageConnectionError",
-  "version": "3.9.2",
+  "version": "3.12.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImageDeleted/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImageDeleted",
-  "version": "3.9.2",
+  "version": "3.12.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImageEmptyBox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImageEmptyBox",
-  "version": "3.9.2",
+  "version": "3.12.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImageEmptyPockets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImageEmptyPockets",
-  "version": "3.9.2",
+  "version": "3.12.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImageNothingFound/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImageNothingFound",
-  "version": "3.9.2",
+  "version": "3.12.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImageSuccess/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImageSuccess",
-  "version": "3.9.2",
+  "version": "3.12.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesNothingFound/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesNothingFound",
-  "version": "3.9.2",
+  "version": "3.12.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesSuccess/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesSuccess",
-  "version": "3.9.2",
+  "version": "3.12.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Select/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Select",
-  "version": "3.9.2",
+  "version": "3.12.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Sidebar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Sidebar",
-  "version": "3.9.2",
+  "version": "3.12.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Skeleton/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Skeleton",
-  "version": "3.9.2",
+  "version": "3.12.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/SliderCanary/es.js

@@ -0,0 +1 @@
+export * from "../__internal__/src/components/SliderCanary/SliderCanary";

package/SliderCanary/index.d.ts

@@ -0,0 +1 @@
+export * from "../__internal__/src/components/SliderCanary/SliderCanary";

package/SliderCanary/index.js

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("../__internal__/cjs-src/components/SliderCanary/SliderCanary"), exports);

package/SliderCanary/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@consta/uikit/SliderCanary",
+  "version": "3.12.0",
+  "main": "index.js",
+  "module": "es.js",
+  "sideEffects": [
+    "*.css"
+  ]
+}

package/SnackBar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/SnackBar",
-  "version": "3.9.2",
+  "version": "3.12.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Steps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Steps",
-  "version": "3.9.2",
+  "version": "3.12.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Switch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Switch",
-  "version": "3.9.2",
+  "version": "3.12.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/SwitchGroup/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/SwitchGroup",
-  "version": "3.9.2",
+  "version": "3.12.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Table",
-  "version": "3.9.2",
+  "version": "3.12.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Tabs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Tabs",
-  "version": "3.9.2",
+  "version": "3.12.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Tag/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Tag",
-  "version": "3.9.2",
+  "version": "3.12.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/TagBase/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/TagBase",
-  "version": "3.9.2",
+  "version": "3.12.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Text/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Text",
-  "version": "3.9.2",
+  "version": "3.12.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/TextField/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/TextField",
-  "version": "3.9.2",
+  "version": "3.12.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Theme",
-  "version": "3.9.2",
+  "version": "3.12.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ThemeToggler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ThemeToggler",
-  "version": "3.9.2",
+  "version": "3.12.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Timer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Timer",
-  "version": "3.9.2",
+  "version": "3.12.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Tooltip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Tooltip",
-  "version": "3.9.2",
+  "version": "3.12.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/User/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/User",
-  "version": "3.9.2",
+  "version": "3.12.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/UserSelect/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/UserSelect",
-  "version": "3.9.2",
+  "version": "3.12.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/UserSelectDeprecated/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/UserSelectDeprecated",
-  "version": "3.9.2",
+  "version": "3.12.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/__internal__/cjs-src/components/Attach/Attach.d.ts

@@ -12,7 +12,10 @@ declare const Attach: import("../../utils/types/PropsWithAsAttributes").Componen
     errorText?: string | undefined;
     loadingText?: string | undefined;
     onButtonClick?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
-    buttonIcon?: import("react").FC<import("../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<import("../../icons/Icon/Icon").Props, HTMLSpanElement>> | undefined;
+    buttonIcon?: import("react").FC<import("../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributesAndRef<{
+        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
+        size?: "xs" | "s" | "m" | undefined;
+    }, HTMLSpanElement>> | undefined;
     buttonTitle?: string | undefined;
     withAction?: boolean | undefined;
     className?: string | undefined;

package/__internal__/cjs-src/components/Attachment/Attachment.d.ts

@@ -1,6 +1,6 @@
 import './Attachment.css';
 import React from 'react';
-import { IconProps } from '../../icons/Icon/Icon';
+import { IconComponent } from '../../icons/Icon/Icon';
 declare type Props = {
     fileExtension?: string;
     loading?: boolean;
@@ -10,7 +10,7 @@ declare type Props = {
     errorText?: string;
     loadingText?: string;
     onButtonClick?: React.EventHandler<React.MouseEvent>;
-    buttonIcon?: React.FC<IconProps>;
+    buttonIcon?: IconComponent;
     buttonTitle?: string;
     withAction?: boolean;
     className?: string;

package/__internal__/cjs-src/components/Avatar/Avatar.css

@@ -19,35 +19,38 @@
   --avatar-color-16: #1abc1a;
   --avatar-color-17: #6fb80a;
   overflow: hidden;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
   color: #fff;
   background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.24)), to(rgba(255, 255, 255, 0))),
     -webkit-gradient(linear, left top, left bottom, from(var(--avatar-color)), to(var(--avatar-color)));
   background: linear-gradient(rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0)),
     linear-gradient(var(--avatar-color), var(--avatar-color));
+  font-size: var(--avatar-font-size);
   font-weight: var(--font-weight-text-semibold);
+  line-height: var(--avatar-size);
   text-align: center;
   letter-spacing: 0.1em;
 }
 
   .Avatar_size_xs {
-      width: 20px;
-      height: 20px;
-      font-size: 6px;
-      line-height: 20px;
+      --avatar-size: 20px;
+      --avatar-font-size: 6px;
     }
 
   .Avatar_size_s {
-      width: 24px;
-      height: 24px;
-      font-size: 8px;
-      line-height: 24px;
+      --avatar-size: 24px;
+      --avatar-font-size: 8px;
     }
 
   .Avatar_size_m {
-      width: 32px;
-      height: 32px;
-      font-size: 10px;
-      line-height: 32px;
+      --avatar-size: 32px;
+      --avatar-font-size: 10px;
+    }
+
+  .Avatar_size_l {
+      --avatar-size: 40px;
+      --avatar-font-size: 14px;
     }
 
   .Avatar_form_round {

package/__internal__/cjs-src/components/Avatar/Avatar.d.ts

@@ -1,5 +1,5 @@
 import './Avatar.css';
-export declare const avatarPropSize: readonly ["m", "s", "xs"];
+export declare const avatarPropSize: readonly ["m", "s", "xs", "l"];
 export declare type AvatarPropSize = typeof avatarPropSize[number];
 export declare const avatarPropSizeDefault: AvatarPropSize;
 export declare const avatarPropForm: readonly ["round", "brick", "default"];

package/__internal__/cjs-src/components/Avatar/Avatar.js

@@ -6,7 +6,7 @@ require("./Avatar.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var bem_1 = require("../../utils/bem");
 var PropsWithAsAttributes_1 = require("../../utils/types/PropsWithAsAttributes");
-exports.avatarPropSize = ['m', 's', 'xs'];
+exports.avatarPropSize = ['m', 's', 'xs', 'l'];
 exports.avatarPropSizeDefault = exports.avatarPropSize[0];
 exports.avatarPropForm = ['round', 'brick', 'default'];
 exports.avatarPropFormDefault = exports.avatarPropForm[0];

package/__internal__/cjs-src/components/Badge/Badge.d.ts

@@ -1,6 +1,5 @@
 import './Badge.css';
-import React from 'react';
-import { IconProps } from '../../icons/Icon/Icon';
+import { IconComponent } from '../../icons/Icon/Icon';
 export declare const badgePropSize: readonly ["m", "s", "l"];
 export declare type BadgePropSize = typeof badgePropSize[number];
 export declare const badgePropSizeDefault: BadgePropSize;
@@ -19,7 +18,7 @@ declare type Props = {
     status?: BadgePropStatus;
     form?: BadgePropForm;
     minified?: boolean;
-    icon?: React.FC<IconProps>;
+    icon?: IconComponent;
     label?: string;
     children?: never;
 };

package/__internal__/cjs-src/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,6 +1,6 @@
 import './Breadcrumbs.css';
 import React from 'react';
-import { IconProps } from '../../icons/Icon/Icon';
+import { IconComponent } from '../../icons/Icon/Icon';
 import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
 export declare const breadcrumbPropSize: readonly ["m", "xs", "s", "l"];
 export declare type BreadcrumbPropSize = typeof breadcrumbPropSize[number];
@@ -9,7 +9,7 @@ export declare const cnBreadcrumbs: import("@bem-react/classname").ClassNameForm
 export declare type BreadcrumbsPropGetLabel<ITEM> = (item: ITEM) => string | React.ReactNode;
 export declare type BreadcrumbsPropGetIsActive<ITEM> = (item: ITEM) => boolean;
 export declare type BreadcrumbsPropGetLink<ITEM> = (item: ITEM) => string;
-export declare type BreadcrumbsPropGetIcon<ITEM> = (item: ITEM) => React.FC<IconProps> | undefined;
+export declare type BreadcrumbsPropGetIcon<ITEM> = (item: ITEM) => IconComponent | undefined;
 export declare type BreadcrumbsProps<ITEM> = {
     pages: ITEM[];
     getLabel: BreadcrumbsPropGetLabel<ITEM>;

package/__internal__/cjs-src/components/Breadcrumbs/Breadcrumbs.js

@@ -6,7 +6,7 @@ require("./Breadcrumbs.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var IconArrowRight_1 = require("../../icons/IconArrowRight/IconArrowRight");
 var bem_1 = require("../../utils/bem");
-var getSizeByMap_1 = require("../../utils/getSizeByMap");
+var getByMap_1 = require("../../utils/getByMap");
 var Button_1 = require("../Button/Button");
 exports.breadcrumbPropSize = ['m', 'xs', 's', 'l'];
 exports.breadcrumbPropSizeDefault = exports.breadcrumbPropSize[0];
@@ -19,7 +19,7 @@ var sizeMap = {
 };
 exports.Breadcrumbs = react_1["default"].forwardRef(function (props, ref) {
     var pages = props.pages, getLabel = props.getLabel, getIsActive = props.getIsActive, getLink = props.getLink, getIcon = props.getIcon, _a = props.size, size = _a === void 0 ? exports.breadcrumbPropSizeDefault : _a, _b = props.maxCount, maxCount = _b === void 0 ? 0 : _b, onClick = props.onClick, _c = props.onlyIconRoot, onlyIconRoot = _c === void 0 ? false : _c, className = props.className, restProps = tslib_1.__rest(props, ["pages", "getLabel", "getIsActive", "getLink", "getIcon", "size", "maxCount", "onClick", "onlyIconRoot", "className"]);
-    var iconSize = getSizeByMap_1.getSizeByMap(sizeMap, size);
+    var iconSize = getByMap_1.getByMap(sizeMap, size);
     var _d = react_1.useMemo(function () {
         var rest = pages.slice();
         var head = rest.splice(0, 1);

package/__internal__/cjs-src/components/Button/Button.d.ts

@@ -1,6 +1,6 @@
 import './Button.css';
 import React from 'react';
-import { IconProps, IconPropSize } from '../../icons/Icon/Icon';
+import { IconComponent, IconPropSize } from '../../icons/Icon/Icon';
 export declare const buttonPropSize: readonly ["m", "xs", "s", "l"];
 export declare type ButtonPropSize = typeof buttonPropSize[number];
 export declare const buttonPropSizeDefault: ButtonPropSize;
@@ -23,8 +23,8 @@ export declare type Props = {
     loading?: boolean;
     label?: string | number;
     onClick?: React.EventHandler<React.MouseEvent>;
-    iconLeft?: React.FC<IconProps>;
-    iconRight?: React.FC<IconProps>;
+    iconLeft?: IconComponent;
+    iconRight?: IconComponent;
     onlyIcon?: boolean;
     iconSize?: IconPropSize;
     title?: string;

package/__internal__/cjs-src/components/Button/Button.js

@@ -3,10 +3,11 @@ exports.__esModule = true;
 exports.Button = exports.cnButton = exports.COMPONENT_NAME = exports.buttonPropFormDefault = exports.buttonPropForm = exports.buttonPropWidthDefault = exports.buttonPropWidth = exports.buttonPropViewDefault = exports.buttonPropView = exports.buttonPropSizeDefault = exports.buttonPropSize = void 0;
 var tslib_1 = require("tslib");
 require("./Button.css");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
+var useForkRef_1 = require("../../hooks/useForkRef/useForkRef");
 var MixFocus_1 = require("../../mixs/MixFocus/MixFocus");
 var bem_1 = require("../../utils/bem");
-var getSizeByMap_1 = require("../../utils/getSizeByMap");
+var getByMap_1 = require("../../utils/getByMap");
 var PropsWithAsAttributes_1 = require("../../utils/types/PropsWithAsAttributes");
 var usePropsHandler_1 = require("../EventInterceptor/usePropsHandler");
 var Loader_1 = require("../Loader/Loader");
@@ -41,7 +42,8 @@ var sizeMapOnlyIcon = {
     l: 'm'
 };
 exports.Button = PropsWithAsAttributes_1.forwardRefWithAs(function (props, ref) {
-    var _a = usePropsHandler_1.usePropsHandler(exports.COMPONENT_NAME, props, ref), _b = _a.size, size = _b === void 0 ? exports.buttonPropSizeDefault : _b, _c = _a.view, view = _c === void 0 ? exports.buttonPropViewDefault : _c, _d = _a.width, width = _d === void 0 ? exports.buttonPropWidthDefault : _d, _e = _a.form, form = _e === void 0 ? exports.buttonPropFormDefault : _e, iconLeft = _a.iconLeft, iconRight = _a.iconRight, label = _a.label, className = _a.className, onClick = _a.onClick, disabled = _a.disabled, loading = _a.loading, tabIndex = _a.tabIndex, _f = _a.as, as = _f === void 0 ? 'button' : _f, onlyIcon = _a.onlyIcon, iconSizeProp = _a.iconSize, otherProps = tslib_1.__rest(_a, ["size", "view", "width", "form", "iconLeft", "iconRight", "label", "className", "onClick", "disabled", "loading", "tabIndex", "as", "onlyIcon", "iconSize"]);
+    var buttonRef = react_1.useRef(null);
+    var _a = usePropsHandler_1.usePropsHandler(exports.COMPONENT_NAME, props, buttonRef), _b = _a.size, size = _b === void 0 ? exports.buttonPropSizeDefault : _b, _c = _a.view, view = _c === void 0 ? exports.buttonPropViewDefault : _c, _d = _a.width, width = _d === void 0 ? exports.buttonPropWidthDefault : _d, _e = _a.form, form = _e === void 0 ? exports.buttonPropFormDefault : _e, iconLeft = _a.iconLeft, iconRight = _a.iconRight, label = _a.label, className = _a.className, onClick = _a.onClick, disabled = _a.disabled, loading = _a.loading, tabIndex = _a.tabIndex, _f = _a.as, as = _f === void 0 ? 'button' : _f, onlyIcon = _a.onlyIcon, iconSizeProp = _a.iconSize, otherProps = tslib_1.__rest(_a, ["size", "view", "width", "form", "iconLeft", "iconRight", "label", "className", "onClick", "disabled", "loading", "tabIndex", "as", "onlyIcon", "iconSize"]);
     var Tag = as;
     var IconOnly = (!label || onlyIcon) && (iconLeft || iconRight);
     var IconLeft = iconLeft;
@@ -49,8 +51,8 @@ exports.Button = PropsWithAsAttributes_1.forwardRefWithAs(function (props, ref)
     var withIcon = !!iconLeft || !!iconRight;
     var title = props.title || (!!IconOnly && label) || undefined;
     var iconSize = IconOnly
-        ? getSizeByMap_1.getSizeByMap(sizeMapOnlyIcon, size, iconSizeProp)
-        : getSizeByMap_1.getSizeByMap(sizeMap, size, iconSizeProp);
+        ? getByMap_1.getByMap(sizeMapOnlyIcon, size, iconSizeProp)
+        : getByMap_1.getByMap(sizeMap, size, iconSizeProp);
     var handleClick = function (e) {
         if (!disabled && !loading && onClick) {
             onClick(e);
@@ -65,7 +67,7 @@ exports.Button = PropsWithAsAttributes_1.forwardRefWithAs(function (props, ref)
             loading: loading,
             withIcon: withIcon,
             onlyIcon: !!IconOnly
-        }, [MixFocus_1.cnMixFocus(), className]), tabIndex: tabIndex, title: title, ref: ref }, (Tag === 'button' ? { disabled: disabled || loading } : {})),
+        }, [MixFocus_1.cnMixFocus(), className]), tabIndex: tabIndex, title: title, ref: useForkRef_1.useForkRef([ref, buttonRef]) }, (Tag === 'button' ? { disabled: disabled || loading } : {})),
         IconOnly && react_1["default"].createElement(IconOnly, { className: exports.cnButton('Icon'), size: iconSize }),
         !IconOnly &&
             ((IconLeft || IconRight) && label ? (react_1["default"].createElement(react_1["default"].Fragment, null,

package/__internal__/cjs-src/components/Calendar/Calendar.js

@@ -5,7 +5,7 @@ var tslib_1 = require("tslib");
 require("./Calendar.css");
 var react_1 = tslib_1.__importDefault(require("react"));
 var bem_1 = require("../../utils/bem");
-var getSizeByMap_1 = require("../../utils/getSizeByMap");
+var getByMap_1 = require("../../utils/getByMap");
 var CalendarViewOneMonth_1 = require("./CalendarViewOneMonth/CalendarViewOneMonth");
 var CalendarViewSlider_1 = require("./CalendarViewSlider/CalendarViewSlider");
 var CalendarViewTwoMonths_1 = require("./CalendarViewTwoMonths/CalendarViewTwoMonths");
@@ -18,7 +18,7 @@ var viewMap = {
 };
 exports.Calendar = react_1["default"].forwardRef(function (props, ref) {
     var _a = props.view, view = _a === void 0 ? helpers_1.calendarPropViewDefault : _a, className = props.className, otherProps = tslib_1.__rest(props, ["view", "className"]);
-    var ViewComponent = getSizeByMap_1.getSizeByMap(viewMap, view);
+    var ViewComponent = getByMap_1.getByMap(viewMap, view);
     return react_1["default"].createElement(ViewComponent, tslib_1.__assign({}, otherProps, { ref: ref, className: exports.cnCalendar(null, [className]) }));
 });
 tslib_1.__exportStar(require("./CalendarCell/CalendarCell"), exports);

package/__internal__/cjs-src/components/ChoiceGroup/ChoiceGroup.d.ts

@@ -1,6 +1,6 @@
 import './ChoiceGroup.css';
 import React from 'react';
-import { IconProps, IconPropSize } from '../../icons/Icon/Icon';
+import { IconComponent, IconPropSize } from '../../icons/Icon/Icon';
 import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
 export declare const choiceGroupForms: readonly ["default", "brick", "round"];
 export declare type ChoiceGroupPropForm = typeof choiceGroupForms[number];
@@ -15,8 +15,13 @@ export declare const choiceGroupWidth: readonly ["default", "full"];
 export declare type СhoiceGroupPropWidth = typeof choiceGroupWidth[number];
 export declare const choiceGroupWidthDefault: СhoiceGroupPropWidth;
 export declare type ChoiceGroupPropGetLabel<ITEM> = (item: ITEM) => string | number;
-export declare type ChoiceGroupPropGetIcon<ITEM> = (item: ITEM) => React.FC<IconProps> | undefined;
-declare type CommonProps<ITEM> = {
+export declare type ChoiceGroupPropGetIcon<ITEM> = (item: ITEM) => IconComponent | undefined;
+export declare type ChoiceGroupPropValue<ITEM, MULTIPLE extends boolean> = (MULTIPLE extends true ? ITEM[] : ITEM) | null;
+export declare type ChoiceGroupPropOnChange<ITEM, MULTIPLE extends boolean> = (props: {
+    e: React.ChangeEvent<HTMLInputElement>;
+    value: MULTIPLE extends true ? ITEM[] | null : ITEM;
+}) => void;
+declare type Props<ITEM, MULTIPLE extends boolean = false> = PropsWithHTMLAttributesAndRef<{
     size?: ChoiceGroupPropSize;
     form?: ChoiceGroupPropForm;
     view?: ChoiceGroupPropView;
@@ -27,30 +32,14 @@ declare type CommonProps<ITEM> = {
     getLabel: ChoiceGroupPropGetLabel<ITEM>;
     getIcon?: ChoiceGroupPropGetIcon<ITEM>;
     name: string;
-    children?: never;
     disabled?: boolean;
     getDisabled?: (item: ITEM) => boolean | undefined;
-};
-declare type OnChangeMultiple<ITEM> = (props: {
-    e: React.ChangeEvent<HTMLInputElement>;
-    value: ITEM[] | null;
-}) => void;
-declare type OnChangeWithoutMultiple<ITEM> = (props: {
-    e: React.ChangeEvent<HTMLInputElement>;
-    value: ITEM;
-}) => void;
-declare type PropsWithMultiple<ITEM> = {
-    value?: ITEM[] | null;
-    multiple: true;
-    onChange: OnChangeMultiple<ITEM>;
-};
-declare type PropsWithoutMultiple<ITEM> = {
-    value?: ITEM | null;
-    multiple: false;
-    onChange: OnChangeWithoutMultiple<ITEM>;
-};
-declare type Props<ITEM> = PropsWithHTMLAttributesAndRef<CommonProps<ITEM> & (PropsWithMultiple<ITEM> | PropsWithoutMultiple<ITEM>), HTMLDivElement>;
-declare type ChoiceGroup = <ITEM>(props: Props<ITEM>) => React.ReactElement | null;
+    value?: ChoiceGroupPropValue<ITEM, MULTIPLE>;
+    onChange?: ChoiceGroupPropOnChange<ITEM, MULTIPLE>;
+    multiple?: MULTIPLE;
+    children?: never;
+}, HTMLDivElement>;
+declare type ChoiceGroupComponent = <ITEM, MULTIPLE extends boolean = false>(props: Props<ITEM, MULTIPLE>) => React.ReactElement | null;
 export declare const cnChoiceGroup: import("@bem-react/classname").ClassNameFormatter;
-export declare const ChoiceGroup: ChoiceGroup;
+export declare const ChoiceGroup: ChoiceGroupComponent;
 export {};

package/__internal__/cjs-src/components/ChoiceGroup/ChoiceGroup.js

@@ -6,7 +6,7 @@ require("./ChoiceGroup.css");
 var react_1 = tslib_1.__importDefault(require("react"));
 var useChoiceGroup_1 = require("../../hooks/useChoiceGroup/useChoiceGroup");
 var bem_1 = require("../../utils/bem");
-var getSizeByMap_1 = require("../../utils/getSizeByMap");
+var getByMap_1 = require("../../utils/getByMap");
 var ChoiceGroup_Item_1 = require("./Item/ChoiceGroup-Item");
 exports.choiceGroupForms = ['default', 'brick', 'round'];
 exports.choiceGroupDefaultForm = 'default';
@@ -31,7 +31,7 @@ exports.ChoiceGroup = react_1["default"].forwardRef(function (props, ref) {
         callBack: onChange,
         multiple: multiple
     }), getOnChange = _h.getOnChange, getChecked = _h.getChecked;
-    var iconSize = getSizeByMap_1.getSizeByMap(sizeMap, size, iconSizeProp);
+    var iconSize = getByMap_1.getByMap(sizeMap, size, iconSizeProp);
     return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { ref: ref, className: exports.cnChoiceGroup({ size: size, form: form, view: view, width: width, onlyIcon: onlyIcon, disabled: disabled }, [className]) }), items.map(function (item, idx) {
         var itemChecked = getChecked(item);
         var itemDisabled = !!getDisabled && getDisabled(item);

package/__internal__/cjs-src/components/ChoiceGroup/Item/ChoiceGroup-Item.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { IconProps, IconPropSize } from '../../../icons/Icon/Icon';
+import { IconComponent, IconPropSize } from '../../../icons/Icon/Icon';
 declare type Props = {
-    icon?: React.FC<IconProps>;
+    icon?: IconComponent;
     onlyIcon?: boolean;
     iconSize?: IconPropSize;
     label: string;