@consta/uikit 3.11.0 → 3.12.0

package/__internal__/cjs-src/icons/createIcon/createIcon.d.ts

@@ -6,5 +6,8 @@ declare type CreateIconArguments = {
     xs: SizeComponent;
     name: string;
 };
-export declare function createIcon({ m, s, xs, name }: CreateIconArguments): React.FC<import("../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<import("../Icon/Icon").Props, HTMLSpanElement>>;
+export declare function createIcon({ m, s, xs, name }: CreateIconArguments): React.ForwardRefExoticComponent<Pick<import("../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributesAndRef<{
+    view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
+    size?: "xs" | "s" | "m" | undefined;
+}, HTMLSpanElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "view" | "size" | "key"> & React.RefAttributes<HTMLSpanElement>>;
 export {};

package/__internal__/cjs-src/icons/createIcon/createIcon.js

@@ -2,27 +2,27 @@
 exports.__esModule = true;
 exports.createIcon = void 0;
 var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
 var Icon_1 = require("../Icon/Icon");
+function getSvgBySize(size, m, s, xs) {
+    switch (size) {
+        case 'xs':
+            return xs;
+        case 's':
+            return s;
+        case 'm':
+            return m;
+        default:
+            return m;
+    }
+}
 function createIcon(_a) {
     var m = _a.m, s = _a.s, xs = _a.xs, name = _a.name;
-    var IconComponent = function (props) {
-        function getSvgBySize(size) {
-            switch (size) {
-                case 'xs':
-                    return xs;
-                case 's':
-                    return s;
-                case 'm':
-                    return m;
-                default:
-                    return m;
-            }
-        }
-        var Svg = getSvgBySize(props.size);
-        return (react_1["default"].createElement(Icon_1.Icon, tslib_1.__assign({}, props, { className: Icon_1.cnIcon(null, [name, props.className]) }),
+    var IconComponent = react_1.forwardRef(function (props, ref) {
+        var Svg = getSvgBySize(props.size, m, s, xs);
+        return (react_1["default"].createElement(Icon_1.Icon, tslib_1.__assign({}, props, { className: Icon_1.cnIcon(null, [name, props.className]), ref: ref }),
             react_1["default"].createElement(Svg, { className: Icon_1.cnIcon('Svg') })));
-    };
+    });
     return IconComponent;
 }
 exports.createIcon = createIcon;

package/__internal__/cjs-src/mixs/MixSpace/MixSpace.css

@@ -1,4 +1,6 @@
-.MixSpace_pT_3xs,
+.MixSpace_pT_0,
+    .MixSpace_pT_auto,
+    .MixSpace_pT_3xs,
     .MixSpace_pT_2xs,
     .MixSpace_pT_xs,
     .MixSpace_pT_s,
@@ -12,6 +14,12 @@
     .MixSpace_pT_6xl {
       padding-top: var(--space-padding-top);
     }
+    .MixSpace_pT_0 {
+      --space-padding-top: 0;
+    }
+    .MixSpace_pT_auto {
+      --space-padding-top: auto;
+    }
     .MixSpace_pT_3xs {
       --space-padding-top: var(--space-3xs);
     }
@@ -48,7 +56,9 @@
     .MixSpace_pT_6xl {
       --space-padding-top: var(--space-6xl);
     }
-  .MixSpace_pL_3xs,
+  .MixSpace_pL_0,
+    .MixSpace_pL_auto,
+    .MixSpace_pL_3xs,
     .MixSpace_pL_2xs,
     .MixSpace_pL_xs,
     .MixSpace_pL_s,
@@ -62,6 +72,12 @@
     .MixSpace_pL_6xl {
       padding-left: var(--space-padding-left);
     }
+  .MixSpace_pL_0 {
+      --space-padding-left: 0;
+    }
+  .MixSpace_pL_auto {
+      --space-padding-left: auto;
+    }
   .MixSpace_pL_3xs {
       --space-padding-left: var(--space-3xs);
     }
@@ -98,7 +114,9 @@
   .MixSpace_pL_6xl {
       --space-padding-left: var(--space-6xl);
     }
-  .MixSpace_pR_3xs,
+  .MixSpace_pR_0,
+    .MixSpace_pR_auto,
+    .MixSpace_pR_3xs,
     .MixSpace_pR_2xs,
     .MixSpace_pR_xs,
     .MixSpace_pR_s,
@@ -112,6 +130,12 @@
     .MixSpace_pR_6xl {
       padding-right: var(--space-padding-right);
     }
+  .MixSpace_pR_0 {
+      --space-padding-right: 0;
+    }
+  .MixSpace_pR_auto {
+      --space-padding-right: auto;
+    }
   .MixSpace_pR_3xs {
       --space-padding-right: var(--space-3xs);
     }
@@ -148,7 +172,9 @@
   .MixSpace_pR_6xl {
       --space-padding-right: var(--space-6xl);
     }
-  .MixSpace_pB_3xs,
+  .MixSpace_pB_0,
+    .MixSpace_pB_auto,
+    .MixSpace_pB_3xs,
     .MixSpace_pB_2xs,
     .MixSpace_pB_xs,
     .MixSpace_pB_s,
@@ -162,6 +188,12 @@
     .MixSpace_pB_6xl {
       padding-bottom: var(--space-padding-bottom);
     }
+  .MixSpace_pB_0 {
+      --space-padding-bottom: 0;
+    }
+  .MixSpace_pB_auto {
+      --space-padding-bottom: auto;
+    }
   .MixSpace_pB_3xs {
       --space-padding-bottom: var(--space-3xs);
     }
@@ -198,7 +230,9 @@
   .MixSpace_pB_6xl {
       --space-padding-bottom: var(--space-6xl);
     }
-  .MixSpace_mT_3xs,
+  .MixSpace_mT_0,
+    .MixSpace_mT_auto,
+    .MixSpace_mT_3xs,
     .MixSpace_mT_2xs,
     .MixSpace_mT_xs,
     .MixSpace_mT_s,
@@ -212,6 +246,12 @@
     .MixSpace_mT_6xl {
       margin-top: var(--space-margin-top);
     }
+  .MixSpace_mT_0 {
+      --space-margin-top: 0;
+    }
+  .MixSpace_mT_auto {
+      --space-margin-top: auto;
+    }
   .MixSpace_mT_3xs {
       --space-margin-top: var(--space-3xs);
     }
@@ -248,7 +288,9 @@
   .MixSpace_mT_6xl {
       --space-margin-top: var(--space-6xl);
     }
-  .MixSpace_mL_3xs,
+  .MixSpace_mL_0,
+    .MixSpace_mL_auto,
+    .MixSpace_mL_3xs,
     .MixSpace_mL_2xs,
     .MixSpace_mL_xs,
     .MixSpace_mL_s,
@@ -262,6 +304,12 @@
     .MixSpace_mL_6xl {
       margin-left: var(--space-margin-left);
     }
+  .MixSpace_mL_0 {
+      --space-margin-left: 0;
+    }
+  .MixSpace_mL_auto {
+      --space-margin-left: auto;
+    }
   .MixSpace_mL_3xs {
       --space-margin-left: var(--space-3xs);
     }
@@ -298,7 +346,9 @@
   .MixSpace_mL_6xl {
       --space-margin-left: var(--space-6xl);
     }
-  .MixSpace_mR_3xs,
+  .MixSpace_mR_0,
+    .MixSpace_mR_auto,
+    .MixSpace_mR_3xs,
     .MixSpace_mR_2xs,
     .MixSpace_mR_xs,
     .MixSpace_mR_s,
@@ -312,6 +362,12 @@
     .MixSpace_mR_6xl {
       margin-right: var(--space-margin-right);
     }
+  .MixSpace_mR_0 {
+      --space-margin-right: 0;
+    }
+  .MixSpace_mR_auto {
+      --space-margin-right: auto;
+    }
   .MixSpace_mR_3xs {
       --space-margin-right: var(--space-3xs);
     }
@@ -348,7 +404,9 @@
   .MixSpace_mR_6xl {
       --space-margin-right: var(--space-6xl);
     }
-  .MixSpace_mB_3xs,
+  .MixSpace_mB_0,
+    .MixSpace_mB_auto,
+    .MixSpace_mB_3xs,
     .MixSpace_mB_2xs,
     .MixSpace_mB_xs,
     .MixSpace_mB_s,
@@ -362,6 +420,12 @@
     .MixSpace_mB_6xl {
       margin-bottom: var(--space-margin-bottom);
     }
+  .MixSpace_mB_0 {
+      --space-margin-bottom: 0;
+    }
+  .MixSpace_mB_auto {
+      --space-margin-bottom: auto;
+    }
   .MixSpace_mB_3xs {
       --space-margin-bottom: var(--space-3xs);
     }

package/__internal__/cjs-src/mixs/MixSpace/MixSpace.d.ts

@@ -1,5 +1,5 @@
 import './MixSpace.css';
-declare type PropSpace = 'm' | '3xs' | '2xs' | 'xs' | 's' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+declare type PropSpace = 0 | 'auto' | 'm' | '3xs' | '2xs' | 'xs' | 's' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
 declare type Props = {
     p?: PropSpace;
     m?: PropSpace;

package/__internal__/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__/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__/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__/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__/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__/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,7 +15,7 @@ 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;
+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>;

package/__internal__/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;

package/__internal__/src/components/Collapse/Collapse.d.ts

@@ -1,6 +1,6 @@
 import './Collapse.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';
 import { CollapseIconPropDirection } from './CollapseIcon/CollapseIcon';
 export declare const collapsePropSize: readonly ["m", "l", "s", "xs", "2xs"];
@@ -19,7 +19,7 @@ export declare const collapsePropDirectionIconDefault: "up";
 export declare const collapsePropCloseDirectionIconDefault: "down";
 declare type CollapseProps = PropsWithHTMLAttributesAndRef<{
     size?: CollapsePropSize;
-    icon?: React.FC<IconProps>;
+    icon?: IconComponent;
     view?: CollapsePropView;
     divider?: boolean;
     label: string;
@@ -27,7 +27,7 @@ declare type CollapseProps = PropsWithHTMLAttributesAndRef<{
     hoverEffect?: boolean;
     isOpen?: boolean;
 } & ({
-    closeIcon?: React.FC<IconProps>;
+    closeIcon?: IconComponent;
     directionIcon?: never;
     closeDirectionIcon?: never;
 } | {

package/__internal__/src/components/CollapseGroup/helpers.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IconProps } from '../../icons/Icon/Icon';
+import { IconComponent } from '../../icons/Icon/Icon';
 import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
 import { CollapsePropHorizontalSpace, CollapsePropSize, CollapsePropView } from '../Collapse/Collapse';
 import { CollapseIconPropDirection } from '../Collapse/CollapseIcon/CollapseIcon';
@@ -20,7 +20,7 @@ export declare type CollapseGroupProps<ITEM, IS_ACCORDION extends boolean> = Pro
     items: ITEM[];
     isAccordion?: IS_ACCORDION;
     children?: never;
-    icon?: React.FC<IconProps>;
+    icon?: IconComponent;
     divider?: boolean;
     size?: CollapsePropSize;
     view?: CollapsePropView;
@@ -31,7 +31,7 @@ export declare type CollapseGroupProps<ITEM, IS_ACCORDION extends boolean> = Pro
     getItemLabel?: CollapseGroupPropGetItemLabel<ITEM>;
     getItemContent?: CollapseGroupPropGetItemContent<ITEM>;
 } & ({
-    closeIcon: React.FC<IconProps>;
+    closeIcon: IconComponent;
     directionIcon?: never;
     closeDirectionIcon?: never;
 } | {
@@ -62,7 +62,10 @@ export declare function withDefaultGetters<ITEM, IS_ACCORDION extends boolean>(p
     items: ITEM[];
     isAccordion?: IS_ACCORDION | undefined;
     children?: undefined;
-    icon?: React.FC<import("../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<import("../../icons/Icon/Icon").Props, HTMLSpanElement>> | undefined;
+    icon?: React.FC<PropsWithHTMLAttributesAndRef<{
+        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
+        size?: "xs" | "s" | "m" | undefined;
+    }, HTMLSpanElement>> | undefined;
     divider?: boolean | undefined;
     size?: "xs" | "s" | "m" | "l" | "2xs" | undefined;
     view?: "primary" | "secondary" | undefined;
@@ -73,7 +76,10 @@ export declare function withDefaultGetters<ITEM, IS_ACCORDION extends boolean>(p
     getItemLabel?: CollapseGroupPropGetItemLabel<ITEM> | undefined;
     getItemContent?: CollapseGroupPropGetItemContent<ITEM> | undefined;
 } & {
-    closeIcon: React.FC<import("../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<import("../../icons/Icon/Icon").Props, HTMLSpanElement>>;
+    closeIcon: React.FC<PropsWithHTMLAttributesAndRef<{
+        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
+        size?: "xs" | "s" | "m" | undefined;
+    }, HTMLSpanElement>>;
     directionIcon?: undefined;
     closeDirectionIcon?: undefined;
 } & {
@@ -95,7 +101,10 @@ export declare function withDefaultGetters<ITEM, IS_ACCORDION extends boolean>(p
     items: ITEM[];
     isAccordion?: IS_ACCORDION | undefined;
     children?: undefined;
-    icon?: React.FC<import("../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<import("../../icons/Icon/Icon").Props, HTMLSpanElement>> | undefined;
+    icon?: React.FC<PropsWithHTMLAttributesAndRef<{
+        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
+        size?: "xs" | "s" | "m" | undefined;
+    }, HTMLSpanElement>> | undefined;
     divider?: boolean | undefined;
     size?: "xs" | "s" | "m" | "l" | "2xs" | undefined;
     view?: "primary" | "secondary" | undefined;

package/__internal__/src/components/ContextMenu/ContextMenuItem/ContextMenuItem.css

@@ -7,6 +7,7 @@
       -ms-flex-align: center;
           align-items: center;
   padding: var(--vertical-space) var(--space-s);
+  text-decoration: none;
   word-break: break-word;
   cursor: pointer;
   -webkit-transition: background 0.2s;

package/__internal__/src/components/ContextMenu/ContextMenuItem/ContextMenuItem.d.ts

@@ -1,4 +1,4 @@
 import './ContextMenuItem.css';
-import { ContextMenuItem as ContextMenuItemType } from '../helpers';
+import { ContextMenuItemComponent } from '../helpers';
 export declare const cnContextMenuItem: import("@bem-react/classname").ClassNameFormatter;
-export declare const ContextMenuItem: ContextMenuItemType;
+export declare const ContextMenuItem: ContextMenuItemComponent;

package/__internal__/src/components/ContextMenu/ContextMenuItem/ContextMenuItem.js

@@ -1,6 +1,6 @@
 import { __assign, __read, __rest, __spread } from "tslib";
 import './ContextMenuItem.css';
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { IconArrowRight } from '../../../icons/IconArrowRight/IconArrowRight';
 import { cn } from '../../../utils/bem';
 import { Text } from '../../Text/Text';
@@ -16,10 +16,10 @@ function renderSide(side, position, withArrow) {
         }), key: index }, item)); });
     return sidesRender;
 }
-export var ContextMenuItem = React.forwardRef(function (props, ref) {
-    var label = props.label, rightSide = props.rightSide, leftSide = props.leftSide, _a = props.size, size = _a === void 0 ? contextMenuDefaultSize : _a, active = props.active, withSubMenu = props.withSubMenu, accent = props.accent, disabled = props.disabled, otherProps = __rest(props, ["label", "rightSide", "leftSide", "size", "active", "withSubMenu", "accent", "disabled"]);
-    var view = disabled ? undefined : accent;
-    return (React.createElement(Text, __assign({}, otherProps, { className: cnContextMenuItem({ size: size, active: active, disabled: disabled }), ref: ref, size: size, view: view, lineHeight: "xs" }),
+export var ContextMenuItem = forwardRef(function (props, ref) {
+    var label = props.label, rightSide = props.rightSide, leftSide = props.leftSide, _a = props.size, size = _a === void 0 ? contextMenuDefaultSize : _a, active = props.active, withSubMenu = props.withSubMenu, accent = props.accent, disabled = props.disabled, _b = props.as, as = _b === void 0 ? 'div' : _b, className = props.className, otherProps = __rest(props, ["label", "rightSide", "leftSide", "size", "active", "withSubMenu", "accent", "disabled", "as", "className"]);
+    var view = (disabled ? undefined : accent) || 'primary';
+    return (React.createElement(Text, __assign({}, otherProps, { className: cnContextMenuItem({ size: size, active: active, disabled: disabled }, [className]), ref: ref, size: size, view: view, lineHeight: "xs", as: as }),
         renderSide(leftSide, 'left', false),
         !rightSide && !leftSide && !withSubMenu ? (label) : (React.createElement("div", { className: cnContextMenuItem('Side', { position: 'center' }) }, label)),
         renderSide(rightSide, 'right', withSubMenu)));

package/__internal__/src/components/ContextMenu/ContextMenuLevel/ContextMenuLevel.js

@@ -44,11 +44,11 @@ export var ContextMenuLevel = React.forwardRef(function (props, ref) {
     // props относящиеся к уровню меню
     size = _a === void 0 ? contextMenuDefaultSize : _a, level = props.level, activeItem = props.activeItem, addLevel = props.addLevel, className = props.className, deleteLevel = props.deleteLevel, items = props.items, setHoveredParenLevel = props.setHoveredParenLevel, 
     // props относящиеся к пунктам меню
-    getLabel = props.getLabel, getRightSideBar = props.getRightSideBar, getLeftSideBar = props.getLeftSideBar, getSubItems = props.getSubItems, getGroupId = props.getGroupId, getAccent = props.getAccent, getDisabled = props.getDisabled, getOnClick = props.getOnClick, getItemOnClick = props.getItemOnClick, onItemClick = props.onItemClick, 
+    getLabel = props.getLabel, getRightSideBar = props.getRightSideBar, getLeftSideBar = props.getLeftSideBar, getSubItems = props.getSubItems, getGroupId = props.getGroupId, getAccent = props.getAccent, getDisabled = props.getDisabled, getOnClick = props.getOnClick, getItemOnClick = props.getItemOnClick, onItemClick = props.onItemClick, getItemHTMLAttributes = props.getItemHTMLAttributes, getItemAs = props.getItemAs, 
     // props относящиеся к группам меню
     sortGroup = props.sortGroup, getGroupLabel = props.getGroupLabel, 
     // props относящиеся к поповеру
-    direction = props.direction, possibleDirections = props.possibleDirections, offset = props.offset, onSetDirection = props.onSetDirection, hoveredParenLevel = props.hoveredParenLevel, spareDirection = props.spareDirection, anchorRef = props.anchorRef, otherProps = __rest(props, ["size", "level", "activeItem", "addLevel", "className", "deleteLevel", "items", "setHoveredParenLevel", "getLabel", "getRightSideBar", "getLeftSideBar", "getSubItems", "getGroupId", "getAccent", "getDisabled", "getOnClick", "getItemOnClick", "onItemClick", "sortGroup", "getGroupLabel", "direction", "possibleDirections", "offset", "onSetDirection", "hoveredParenLevel", "spareDirection", "anchorRef"]);
+    direction = props.direction, possibleDirections = props.possibleDirections, offset = props.offset, onSetDirection = props.onSetDirection, hoveredParenLevel = props.hoveredParenLevel, spareDirection = props.spareDirection, anchorRef = props.anchorRef, otherProps = __rest(props, ["size", "level", "activeItem", "addLevel", "className", "deleteLevel", "items", "setHoveredParenLevel", "getLabel", "getRightSideBar", "getLeftSideBar", "getSubItems", "getGroupId", "getAccent", "getDisabled", "getOnClick", "getItemOnClick", "onItemClick", "getItemHTMLAttributes", "getItemAs", "sortGroup", "getGroupLabel", "direction", "possibleDirections", "offset", "onSetDirection", "hoveredParenLevel", "spareDirection", "anchorRef"]);
     var _b = __read(useState(false), 2), hovered = _b[0], setHovered = _b[1];
     var groups = getGroups(items, getGroupId, undefined, undefined, sortGroup && (function (a, b) { return sortGroup(a.key, b.key); }));
     var getItemIndex = function (groupId, itemIndex) { return groupId + "-" + itemIndex; };
@@ -117,7 +117,9 @@ export var ContextMenuLevel = React.forwardRef(function (props, ref) {
                         setHoveredParenLevel(level);
                     };
                 var accent = typeof getAccent === 'function' ? getAccent(item) : undefined;
-                return (React.createElement(ContextMenuItem, { ref: ref, label: label, leftSide: leftSide, rightSide: rightSide, size: size, key: itemIndex, onMouseEnter: onMouseEnter, onClick: onClick, active: activeItem === itemIndex, withSubMenu: Boolean(subItems), accent: accent, disabled: disabled }));
+                var atributes = typeof getItemHTMLAttributes === 'function' ? getItemHTMLAttributes(item) : {};
+                var as = typeof getItemAs === 'function' ? getItemAs(item) : undefined;
+                return (React.createElement(ContextMenuItem, __assign({}, atributes, { ref: ref, label: label, leftSide: leftSide, rightSide: rightSide, size: size, key: itemIndex, onMouseEnter: onMouseEnter, onClick: onClick, active: activeItem === itemIndex, withSubMenu: Boolean(subItems), accent: accent, disabled: disabled, as: as })));
             })));
     })));
 });

package/__internal__/src/components/ContextMenu/helpers.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { ClickOutsideHandler } from '../../hooks/useClickOutside/useClickOutside';
-import { PropsWithHTMLAttributes, PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
+import { PropsWithAsAttributes } from '../../utils/types/PropsWithAsAttributes';
+import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
 import { Direction, Position } from '../Popover/Popover';
 export declare const contextMenuSizes: readonly ["m", "s", "l"];
 export declare type ContextMenuPropSize = typeof contextMenuSizes[number];
@@ -16,7 +17,9 @@ export declare type ContextMenuPropGetKey<ITEM> = (item: ITEM) => string | numbe
 export declare type ContextMenuPropGetDisable<ITEM> = (item: ITEM) => boolean | undefined;
 export declare type ContextMenuPropGetGroupLabel = (id: string | number | undefined) => string | number | undefined;
 export declare type ContextMenuPropSortGroup = (a: string | number, b: string | number) => number;
-export declare type ContextMenuPropGetItemOnClick<ITEM> = (item: ITEM) => React.EventHandler<React.MouseEvent<HTMLDivElement>> | undefined;
+export declare type ContextMenuPropGetItemOnClick<ITEM> = (item: ITEM) => React.EventHandler<React.MouseEvent> | undefined;
+export declare type ContextMenuPropGetItemAs<ITEM> = (item: ITEM) => keyof JSX.IntrinsicElements;
+export declare type ContextMenuPropGetItemHTMLAttributes<ITEM> = (item: ITEM) => JSX.IntrinsicElements[keyof JSX.IntrinsicElements];
 export declare const contextMenuPropSubMenuDirections: readonly ["rightStartUp", "rightStartDown", "leftStartUp", "leftStartDown"];
 export declare type ContextMenuPropSubMenuDirection = typeof contextMenuPropSubMenuDirections[number];
 export declare const contextMenuPropDefaultSubMenuDirection: ContextMenuPropSubMenuDirection;
@@ -52,6 +55,8 @@ export declare type ContextMenuProps<ITEM> = PropsWithHTMLAttributesAndRef<{
     }) => void;
     onClickOutside?: ClickOutsideHandler;
     spareDirection?: Direction;
+    getItemAs?: ContextMenuPropGetItemAs<ITEM>;
+    getItemHTMLAttributes?: ContextMenuPropGetItemHTMLAttributes<ITEM>;
 } & PositioningProps, HTMLDivElement>;
 export declare type AddLevel<ITEM> = (level: number, items: ITEM[], anchorRef: React.RefObject<HTMLElement>, activeItem: string) => void;
 export declare type DeleteLevel = (level: number) => void;
@@ -64,7 +69,7 @@ declare type ContextMenuLevelProps<ITEM> = Omit<ContextMenuProps<ITEM> & {
     hoveredParenLevel: number;
     setHoveredParenLevel: (level: number) => void;
 }, 'subMenuDirection' | 'getKey' | 'onClickOutside' | 'isOpen'>;
-export declare type ContextMenuItemProps<ITEM> = PropsWithHTMLAttributes<{
+export declare type ContextMenuItemProps<AS extends keyof JSX.IntrinsicElements = 'div'> = PropsWithAsAttributes<{
     label: string | number;
     rightSide?: React.ReactNode;
     leftSide?: React.ReactNode;
@@ -73,7 +78,7 @@ export declare type ContextMenuItemProps<ITEM> = PropsWithHTMLAttributes<{
     withSubMenu: boolean;
     accent?: ContextMenuAccent;
     disabled?: boolean;
-} & React.RefAttributes<HTMLDivElement>, HTMLDivElement>;
+}, AS> & React.RefAttributes<HTMLDivElement>;
 export declare type Level<ITEM> = {
     items: ITEM[];
     activeItem?: string;
@@ -81,7 +86,7 @@ export declare type Level<ITEM> = {
     possibleDirections?: readonly Direction[];
     offset?: number;
 } & PositioningProps;
-export declare type ContextMenuItem = <ITEM>(props: ContextMenuItemProps<ITEM>, ref: React.Ref<HTMLElement>) => React.ReactElement | null;
+export declare type ContextMenuItemComponent = <AS extends keyof JSX.IntrinsicElements = 'div'>(props: ContextMenuItemProps<AS>, ref: React.Ref<HTMLElement>) => React.ReactElement | null;
 export declare type ContextMenuType = <ITEM>(props: ContextMenuProps<ITEM>) => React.ReactElement | null;
 export declare type ContextMenuLevelType = <ITEM>(props: ContextMenuLevelProps<ITEM>, ref: React.Ref<HTMLElement>) => React.ReactElement | null;
 export {};

package/__internal__/src/components/DatePickerCanary/DatePickerFieldTypeDate/DatePickerFieldTypeDate.d.ts

@@ -19,8 +19,14 @@ export declare const DatePickerFieldTypeDate: React.ForwardRefExoticComponent<{
     onBlur?: ((event: React.FocusEvent<HTMLElement>) => void) | undefined;
     autoFocus?: boolean | undefined;
     placeholder?: string | undefined;
-    leftSide?: string | React.FC<import("../../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<import("../../../icons/Icon/Icon").Props, HTMLSpanElement>> | undefined;
-    rightSide?: string | React.FC<import("../../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<import("../../../icons/Icon/Icon").Props, HTMLSpanElement>> | undefined;
+    leftSide?: string | 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;
+    rightSide?: string | 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;
     readOnly?: boolean | undefined;
     required?: boolean | undefined;
     tabIndex?: number | undefined;

package/__internal__/src/components/DatePickerCanary/DatePickerFieldTypeDate/helpers.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IconProps, IconPropSize } from '../../../icons/Icon/Icon';
+import { IconComponent, IconPropSize } from '../../../icons/Icon/Icon';
 import { PropsWithHTMLAttributes } from '../../../utils/types/PropsWithHTMLAttributes';
 import { TextFieldPropForm, TextFieldPropSize, TextFieldPropStatus, TextFieldPropView, TextFieldPropWidth } from '../../TextField/TextField';
 import { DatePickerPropOnError } from '../helpers';
@@ -24,8 +24,8 @@ export declare type DatePickerFieldTypeDateProps = PropsWithHTMLAttributes<{
     onBlur?: React.FocusEventHandler<HTMLElement>;
     autoFocus?: boolean;
     placeholder?: string;
-    leftSide?: string | React.FC<IconProps>;
-    rightSide?: string | React.FC<IconProps>;
+    leftSide?: string | IconComponent;
+    rightSide?: string | IconComponent;
     readOnly?: boolean;
     required?: boolean;
     tabIndex?: number;