@consta/uikit 3.17.3 → 3.18.0

package/__internal__/cjs-src/components/ThemeToggler/types.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+import { IconComponent } from '../../icons/Icon/Icon';
+import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
+import { Direction } from '../Popover/Popover';
+export declare const themeTogglerPropSize: readonly ["m", "l", "s", "xs"];
+export declare type ThemeTogglerPropSize = typeof themeTogglerPropSize[number];
+export declare const themeTogglerPropSizeDefault: ThemeTogglerPropSize;
+export declare type ThemeTogglerPropSetValue<ITEM> = (props: {
+    e: React.MouseEvent;
+    value: ITEM;
+}) => void;
+export declare type ThemeTogglerPropGetItemKey<ITEM> = (item: ITEM) => string | number;
+export declare type ThemeTogglerPropGetItemLabel<ITEM> = (item: ITEM) => string;
+export declare type ThemeTogglerPropGetItemIcon<ITEM> = (item: ITEM) => IconComponent;
+export declare type ThemeTogglerItemDefault = {
+    key: string;
+    label: string;
+    icon: IconComponent;
+};
+export declare type ThemeTogglerProps<ITEM = ThemeTogglerItemDefault> = PropsWithHTMLAttributesAndRef<{
+    size?: ThemeTogglerPropSize;
+    className?: string;
+    items: ITEM[];
+    value: ITEM;
+    onChange: ThemeTogglerPropSetValue<ITEM>;
+    getItemKey?: ThemeTogglerPropGetItemKey<ITEM>;
+    getItemLabel?: ThemeTogglerPropGetItemLabel<ITEM>;
+    getItemIcon?: ThemeTogglerPropGetItemIcon<ITEM>;
+    direction?: Direction;
+    possibleDirections?: readonly Direction[];
+    children?: never;
+}, HTMLButtonElement> & (ITEM extends {
+    key: ThemeTogglerItemDefault['key'];
+} ? {} : {
+    getItemKey: ThemeTogglerPropGetItemLabel<ITEM>;
+}) & (ITEM extends {
+    label: ThemeTogglerItemDefault['label'];
+} ? {} : {
+    getItemLabel: ThemeTogglerPropGetItemLabel<ITEM>;
+}) & (ITEM extends {
+    icon: ThemeTogglerItemDefault['icon'];
+} ? {} : {
+    getItemIcon: ThemeTogglerPropGetItemIcon<ITEM>;
+});
+export declare type ThemeTogglerComponent = <ITEM>(props: ThemeTogglerProps<ITEM>) => React.ReactElement | null;

package/__internal__/cjs-src/components/ThemeToggler/types.js

@@ -0,0 +1,5 @@
+"use strict";
+exports.__esModule = true;
+exports.themeTogglerPropSizeDefault = exports.themeTogglerPropSize = void 0;
+exports.themeTogglerPropSize = ['m', 'l', 's', 'xs'];
+exports.themeTogglerPropSizeDefault = exports.themeTogglerPropSize[0];

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

@@ -1,10 +1,7 @@
 .Tooltip {
   --tooltip-bg-color: var(--color-bg-default);
+  --popover-arrow-bg-color: var(--tooltip-bg-color);
   --tooltip-bg-opacity: 0.9;
-
-  /* Задаются через js */
-  --tooltip-arrow-size: 0;
-  --tooltip-arrow-offset: 0;
 }
 
   .Tooltip_status_alert {
@@ -67,89 +64,5 @@
     }
 
   .Tooltip-Arrow {
-    position: absolute;
-    border: var(--tooltip-arrow-size) solid transparent;
     opacity: var(--tooltip-bg-opacity);
   }
-
-  .Tooltip-Arrow_direction_upLeft,
-    .Tooltip-Arrow_direction_upCenter,
-    .Tooltip-Arrow_direction_upRight,
-    .Tooltip-Arrow_direction_upStartLeft,
-    .Tooltip-Arrow_direction_upStartRight {
-      bottom: 0;
-      border-top-color: var(--tooltip-bg-color);
-      -webkit-transform: translateY(100%);
-              transform: translateY(100%);
-    }
-
-  .Tooltip-Arrow_direction_upLeft,
-    .Tooltip-Arrow_direction_downLeft,
-    .Tooltip-Arrow_direction_downStartRight,
-    .Tooltip-Arrow_direction_upStartRight {
-      right: var(--tooltip-arrow-offset);
-    }
-
-  .Tooltip-Arrow_direction_upCenter,
-    .Tooltip-Arrow_direction_downCenter {
-      left: calc(50% - var(--tooltip-arrow-size));
-    }
-
-  .Tooltip-Arrow_direction_upRight,
-    .Tooltip-Arrow_direction_downRight,
-    .Tooltip-Arrow_direction_downStartLeft,
-    .Tooltip-Arrow_direction_upStartLeft {
-      left: var(--tooltip-arrow-offset);
-    }
-
-  .Tooltip-Arrow_direction_downLeft,
-    .Tooltip-Arrow_direction_downCenter,
-    .Tooltip-Arrow_direction_downRight,
-    .Tooltip-Arrow_direction_downStartLeft,
-    .Tooltip-Arrow_direction_downStartRight {
-      top: 0;
-      border-bottom-color: var(--tooltip-bg-color);
-      -webkit-transform: translateY(-100%);
-              transform: translateY(-100%);
-    }
-
-  .Tooltip-Arrow_direction_rightUp,
-    .Tooltip-Arrow_direction_rightCenter,
-    .Tooltip-Arrow_direction_rightDown,
-    .Tooltip-Arrow_direction_rightStartUp,
-    .Tooltip-Arrow_direction_rightStartDown {
-      left: 0;
-      border-right-color: var(--tooltip-bg-color);
-      -webkit-transform: translateX(-100%);
-              transform: translateX(-100%);
-    }
-
-  .Tooltip-Arrow_direction_rightUp,
-    .Tooltip-Arrow_direction_leftUp,
-    .Tooltip-Arrow_direction_leftStartDown,
-    .Tooltip-Arrow_direction_rightStartDown {
-      bottom: var(--tooltip-arrow-offset);
-    }
-
-  .Tooltip-Arrow_direction_rightCenter,
-    .Tooltip-Arrow_direction_leftCenter {
-      top: calc(50% - var(--tooltip-arrow-size));
-    }
-
-  .Tooltip-Arrow_direction_rightDown,
-    .Tooltip-Arrow_direction_leftDown,
-    .Tooltip-Arrow_direction_leftStartUp,
-    .Tooltip-Arrow_direction_rightStartUp {
-      top: var(--tooltip-arrow-offset);
-    }
-
-  .Tooltip-Arrow_direction_leftUp,
-    .Tooltip-Arrow_direction_leftCenter,
-    .Tooltip-Arrow_direction_leftDown,
-    .Tooltip-Arrow_direction_leftStartUp,
-    .Tooltip-Arrow_direction_leftStartDown {
-      right: 0;
-      border-left-color: var(--tooltip-bg-color);
-      -webkit-transform: translateX(100%);
-              transform: translateX(100%);
-    }

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

@@ -4,6 +4,7 @@ exports.Tooltip = exports.tooltipPropStatus = exports.tooltipPropSizesDefault =
 var tslib_1 = require("tslib");
 require("./Tooltip.css");
 var react_1 = tslib_1.__importStar(require("react"));
+var MixPopoverArrow_1 = require("../../mixs/MixPopoverArrow/MixPopoverArrow");
 var bem_1 = require("../../utils/bem");
 var Popover_1 = require("../Popover/Popover");
 var Text_1 = require("../Text/Text");
@@ -38,8 +39,8 @@ exports.Tooltip = react_1["default"].forwardRef(function (props, ref) {
         setDirection(direction);
     };
     return (react_1["default"].createElement(Theme_1.ThemeContext.Provider, { value: { theme: tooltipTheme, themeClassNames: tooltipThemeClassNames } },
-        react_1["default"].createElement(Popover_1.Popover, tslib_1.__assign({}, rest, { arrowOffset: ARROW_OFFSET + ARROW_SIZE, offset: ARROW_SIZE + 4, onSetDirection: onSetDirection, ref: ref, className: cnTooltip({ status: status }, [className]), style: tslib_1.__assign((_a = {}, _a['--tooltip-arrow-size'] = ARROW_SIZE + "px", _a['--tooltip-arrow-offset'] = ARROW_OFFSET + "px", _a), style) }),
+        react_1["default"].createElement(Popover_1.Popover, tslib_1.__assign({}, rest, { arrowOffset: ARROW_OFFSET + ARROW_SIZE, offset: ARROW_SIZE + 4, onSetDirection: onSetDirection, ref: ref, className: cnTooltip({ status: status }, [className]), style: tslib_1.__assign((_a = {}, _a['--popover-arrow-size'] = ARROW_SIZE + "px", _a['--popover-arrow-offset'] = ARROW_OFFSET + "px", _a), style) }),
             react_1["default"].createElement("div", { className: cnTooltip('Background') }),
-            react_1["default"].createElement("div", { className: cnTooltip('Arrow', { direction: direction }) }),
+            react_1["default"].createElement("div", { className: cnTooltip('Arrow', [MixPopoverArrow_1.cnMixPopoverArrow({ direction: direction })]) }),
             react_1["default"].createElement("div", { className: cnTooltip('Content', { size: size }) }, renderChildren(children)))));
 });

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

@@ -0,0 +1,88 @@
+.MixPopoverArrow {
+  --popover-arrow-size: 10px;
+  --popover-arrow-offset: 6px;
+  position: absolute;
+  border: var(--popover-arrow-size) solid transparent;
+}
+
+  .MixPopoverArrow_direction_upLeft,
+  .MixPopoverArrow_direction_upCenter,
+  .MixPopoverArrow_direction_upRight,
+  .MixPopoverArrow_direction_upStartLeft,
+  .MixPopoverArrow_direction_upStartRight {
+    bottom: 0;
+    border-top-color: var(--popover-arrow-bg-color);
+    -webkit-transform: translateY(100%);
+            transform: translateY(100%);
+  }
+
+  .MixPopoverArrow_direction_upLeft,
+  .MixPopoverArrow_direction_downLeft,
+  .MixPopoverArrow_direction_downStartRight,
+  .MixPopoverArrow_direction_upStartRight {
+    right: var(--popover-arrow-offset);
+  }
+
+  .MixPopoverArrow_direction_upCenter,
+  .MixPopoverArrow_direction_downCenter {
+    left: calc(50% - var(--popover-arrow-size));
+  }
+
+  .MixPopoverArrow_direction_upRight,
+  .MixPopoverArrow_direction_downRight,
+  .MixPopoverArrow_direction_downStartLeft,
+  .MixPopoverArrow_direction_upStartLeft {
+    left: var(--popover-arrow-offset);
+  }
+
+  .MixPopoverArrow_direction_downLeft,
+  .MixPopoverArrow_direction_downCenter,
+  .MixPopoverArrow_direction_downRight,
+  .MixPopoverArrow_direction_downStartLeft,
+  .MixPopoverArrow_direction_downStartRight {
+    top: 0;
+    border-bottom-color: var(--popover-arrow-bg-color);
+    -webkit-transform: translateY(-100%);
+            transform: translateY(-100%);
+  }
+
+  .MixPopoverArrow_direction_rightUp,
+  .MixPopoverArrow_direction_rightCenter,
+  .MixPopoverArrow_direction_rightDown,
+  .MixPopoverArrow_direction_rightStartUp,
+  .MixPopoverArrow_direction_rightStartDown {
+    left: 0;
+    border-right-color: var(--popover-arrow-bg-color);
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+  }
+
+  .MixPopoverArrow_direction_rightUp,
+  .MixPopoverArrow_direction_leftUp,
+  .MixPopoverArrow_direction_leftStartDown,
+  .MixPopoverArrow_direction_rightStartDown {
+    bottom: var(--popover-arrow-offset);
+  }
+
+  .MixPopoverArrow_direction_rightCenter,
+  .MixPopoverArrow_direction_leftCenter {
+    top: calc(50% - var(--popover-arrow-size));
+  }
+
+  .MixPopoverArrow_direction_rightDown,
+  .MixPopoverArrow_direction_leftDown,
+  .MixPopoverArrow_direction_leftStartUp,
+  .MixPopoverArrow_direction_rightStartUp {
+    top: var(--popover-arrow-offset);
+  }
+
+  .MixPopoverArrow_direction_leftUp,
+  .MixPopoverArrow_direction_leftCenter,
+  .MixPopoverArrow_direction_leftDown,
+  .MixPopoverArrow_direction_leftStartUp,
+  .MixPopoverArrow_direction_leftStartDown {
+    right: 0;
+    border-left-color: var(--popover-arrow-bg-color);
+    -webkit-transform: translateX(100%);
+            transform: translateX(100%);
+  }

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

@@ -0,0 +1,8 @@
+import './MixPopoverArrow.css';
+import { Direction } from '../../components/Popover/Popover';
+declare type Props = {
+    direction?: Direction;
+};
+declare type CnMixPopoverArrow = (elemNameOrBlockMods?: Props | string | null, elemModsOrBlockMix?: Props | Array<string | undefined> | null, elemMix?: Array<string | undefined>) => string;
+export declare const cnMixPopoverArrow: CnMixPopoverArrow;
+export {};

package/__internal__/cjs-src/mixs/MixPopoverArrow/MixPopoverArrow.js

@@ -0,0 +1,6 @@
+"use strict";
+exports.__esModule = true;
+exports.cnMixPopoverArrow = void 0;
+require("./MixPopoverArrow.css");
+var bem_1 = require("../../utils/bem");
+exports.cnMixPopoverArrow = bem_1.cn('MixPopoverArrow');

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

@@ -14,5 +14,6 @@ export declare type Props = {
     shadow?: boolean;
     children?: React.ReactNode;
 };
+export declare const COMPONENT_NAME: "Card";
 export declare const cnCard: import("@bem-react/classname").ClassNameFormatter;
 export declare const Card: import("../../utils/types/PropsWithAsAttributes").ComponentWithAs<Props, "div">;

package/__internal__/src/components/Card/Card.js

@@ -1,17 +1,21 @@
 import { __assign, __rest } from "tslib";
-import React from 'react';
+import React, { useRef } from 'react';
+import { useForkRef } from '../../hooks/useForkRef/useForkRef';
 import { cnMixCard } from '../../mixs/MixCard/MixCard';
 import { cn } from '../../utils/bem';
 import { forwardRefWithAs } from '../../utils/types/PropsWithAsAttributes';
+import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
 export var cardPropForm = ['round', 'square'];
 export var cardPropFormDefault = cardPropForm[0];
 export var cardPropSpace = ['m', 'xs', 's', 'l', 'xl', '2xl', '3xl', '4xl', '5xl'];
 export var cardPropStatus = ['alert', 'success', 'warning'];
+export var COMPONENT_NAME = 'Card';
 export var cnCard = cn('Card');
 export var Card = forwardRefWithAs(function (props, ref) {
-    var verticalSpace = props.verticalSpace, horizontalSpace = props.horizontalSpace, status = props.status, _a = props.form, form = _a === void 0 ? cardPropFormDefault : _a, _b = props.shadow, shadow = _b === void 0 ? true : _b, children = props.children, tabIndex = props.tabIndex, className = props.className, _c = props.as, as = _c === void 0 ? 'div' : _c, otherProps = __rest(props, ["verticalSpace", "horizontalSpace", "status", "form", "shadow", "children", "tabIndex", "className", "as"]);
+    var cardRef = useRef(null);
+    var _a = usePropsHandler(COMPONENT_NAME, props, cardRef), verticalSpace = _a.verticalSpace, horizontalSpace = _a.horizontalSpace, status = _a.status, _b = _a.form, form = _b === void 0 ? cardPropFormDefault : _b, _c = _a.shadow, shadow = _c === void 0 ? true : _c, children = _a.children, tabIndex = _a.tabIndex, className = _a.className, _d = _a.as, as = _d === void 0 ? 'div' : _d, otherProps = __rest(_a, ["verticalSpace", "horizontalSpace", "status", "form", "shadow", "children", "tabIndex", "className", "as"]);
     var Tag = as;
-    return (React.createElement(Tag, __assign({ tabIndex: tabIndex, ref: ref, className: cnCard(null, [
+    return (React.createElement(Tag, __assign({ tabIndex: tabIndex, ref: useForkRef([cardRef, ref]), className: cnCard(null, [
             cnMixCard({ verticalSpace: verticalSpace, horizontalSpace: horizontalSpace, shadow: shadow, form: form, status: status }),
             className,
         ]) }, otherProps), children));

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

@@ -0,0 +1,18 @@
+.ContextMenuCanary-Level {
+    pointer-events: none;
+  }
+
+    .ContextMenuCanary-Level.MixPopoverAnimate_animate_entered {
+      pointer-events: auto;
+    }
+
+    .ContextMenuCanary-Level_playAnimation.MixPopoverAnimate {
+      opacity: 0 !important;
+      pointer-events: none;
+      -webkit-transition: opacity 0.2s, -webkit-transform 0.2s !important;
+      transition: opacity 0.2s, -webkit-transform 0.2s !important;
+      transition: opacity 0.2s, transform 0.2s !important;
+      transition: opacity 0.2s, transform 0.2s, -webkit-transform 0.2s !important;
+      -webkit-transform: var(--mix-dropdown-animate-transform) !important;
+              transform: var(--mix-dropdown-animate-transform) !important;
+    }

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

@@ -0,0 +1,4 @@
+import './ContextMenu.css';
+import { ContextMenuComponent } from './types';
+export declare const ContextMenu: ContextMenuComponent;
+export * from './types';

package/__internal__/src/components/ContextMenuCanary/ContextMenuCanary.js

@@ -0,0 +1,27 @@
+import { __assign, __read, __rest } from "tslib";
+import './ContextMenu.css';
+import React, { useRef, useState } from 'react';
+import { Transition } from 'react-transition-group';
+import { useFlag } from '../../hooks/useFlag/useFlag';
+import { useForkRef } from '../../hooks/useForkRef/useForkRef';
+import { animateTimeout, cnMixPopoverAnimate, } from '../../mixs/MixPopoverAnimate/MixPopoverAnimate';
+import { cn } from '../../utils/bem';
+import { ContextMenuLevels } from './ContextMenuLevels/ContextMenuLevels';
+var cnContextMenu = cn('ContextMenuCanary');
+function ContextMenuRender(props, ref) {
+    var isOpen = props.isOpen, className = props.className, onSetDirection = props.onSetDirection, otherProps = __rest(props, ["isOpen", "className", "onSetDirection"]);
+    var _a = __read(useFlag(), 2), playAnimation = _a[0], setPlayAnimation = _a[1];
+    var _b = __read(useState(props.direction), 2), direction = _b[0], setDirection = _b[1];
+    var nodeRef = useRef(null);
+    var levelRef = useForkRef([ref, nodeRef]);
+    var handleSetDirection = function (d) {
+        setDirection(d);
+        onSetDirection === null || onSetDirection === void 0 ? void 0 : onSetDirection(d);
+    };
+    return (React.createElement(Transition, { "in": isOpen, unmountOnExit: true, timeout: animateTimeout, onEnter: setPlayAnimation.off, onExit: setPlayAnimation.on, nodeRef: nodeRef }, function (animate) { return (React.createElement(ContextMenuLevels, __assign({}, otherProps, { ref: levelRef, onSetDirection: handleSetDirection, className: cnContextMenu('Level', { playAnimation: playAnimation }, [
+            className,
+            cnMixPopoverAnimate({ animate: animate, direction: direction }),
+        ]) }))); }));
+}
+export var ContextMenu = React.forwardRef(ContextMenuRender);
+export * from './types';

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

@@ -0,0 +1,74 @@
+.ContextMenuItemCanary {
+  --vertical-space: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -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-color 0.2s;
+  transition: background-color 0.2s;
+  gap: var(--space-xs);
+}
+
+  .ContextMenuItemCanary:hover,
+  .ContextMenuItemCanary_active {
+    background: var(--color-control-bg-clear-hover);
+  }
+
+  .ContextMenuItemCanary_size_xs {
+      --vertical-space: var(--space-2xs);
+    }
+
+  .ContextMenuItemCanary_size_s {
+      --vertical-space: var(--space-xs);
+    }
+
+  .ContextMenuItemCanary_size_m {
+      --vertical-space: var(--space-s);
+    }
+
+  .ContextMenuItemCanary_size_l {
+      --vertical-space: var(--space-m);
+    }
+
+  .ContextMenuItemCanary-Label {
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+  }
+
+  .ContextMenuItemCanary_disabled.Text {
+    color: var(--color-control-typo-disable);
+    cursor: default;
+  }
+
+  .ContextMenuItemCanary_disabled.Text:hover {
+      background: transparent;
+    }
+
+  .ContextMenuItemCanary-Slot {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+  }
+
+  .ContextMenuItemCanary-Slot_position_left,
+      .ContextMenuItemCanary-Slot_position_right {
+        -webkit-box-flex: 0;
+            -ms-flex: 0;
+                flex: 0;
+      }
+
+  .ContextMenuItemCanary-Slot_position_center {
+        -webkit-box-flex: 1;
+            -ms-flex: 1;
+                flex: 1;
+      }

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

@@ -0,0 +1,3 @@
+import './ContextMenuItem.css';
+import { ContextMenuItemComponent } from '../types';
+export declare const ContextMenuItem: ContextMenuItemComponent;

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

@@ -0,0 +1,42 @@
+import { __assign, __read, __rest, __spread } from "tslib";
+import './ContextMenuItem.css';
+import React from 'react';
+import { IconArrowRight } from '../../../icons/IconArrowRight/IconArrowRight';
+import { cn } from '../../../utils/bem';
+import { getByMap } from '../../../utils/getByMap';
+import { Text } from '../../Text/Text';
+import { sizeMapIcon } from '../helper';
+import { contextMenuDefaultSize, } from '../types';
+var cnContextMenuItem = cn('ContextMenuItemCanary');
+function renderSide(side, position, withArrow, size, icon) {
+    var sides = side ? __spread((Array.isArray(side) ? side : [side])) : [];
+    if (icon) {
+        var Icon = icon;
+        var render = React.createElement(Icon, { size: getByMap(sizeMapIcon, size) });
+        if (position === 'left') {
+            sides.unshift(render);
+        }
+        if (position === 'right') {
+            sides.push(render);
+        }
+    }
+    if (withArrow) {
+        sides.push(React.createElement(IconArrowRight, { size: "xs", view: "secondary" }));
+    }
+    var sidesRender = sides.map(function (item, index) { return (React.createElement("div", { className: cnContextMenuItem('Slot', {
+            position: position
+        }), key: cnContextMenuItem('Slot', {
+            position: position,
+            index: index
+        }) }, item)); });
+    return sidesRender;
+}
+function ContextMenuItemRender(props, ref) {
+    var label = props.label, rightSide = props.rightSide, leftSide = props.leftSide, _a = props.size, size = _a === void 0 ? contextMenuDefaultSize : _a, _b = props.as, as = _b === void 0 ? 'div' : _b, disabled = props.disabled, status = props.status, withSubMenu = props.withSubMenu, className = props.className, active = props.active, leftIcon = props.leftIcon, rightIcon = props.rightIcon, otherProps = __rest(props, ["label", "rightSide", "leftSide", "size", "as", "disabled", "status", "withSubMenu", "className", "active", "leftIcon", "rightIcon"]);
+    var view = (disabled ? undefined : status) || 'primary';
+    return (React.createElement(Text, __assign({ className: cnContextMenuItem({ size: size, active: active, disabled: disabled }, [className]), as: as, size: size, view: view, lineHeight: "xs", ref: ref }, otherProps),
+        renderSide(leftSide, 'left', false, size, leftIcon),
+        !rightSide && !leftSide && !withSubMenu && !leftIcon && !rightIcon ? (label) : (React.createElement("div", { className: cnContextMenuItem('Slot', { position: 'center' }), key: "center" }, label)),
+        renderSide(rightSide, 'right', withSubMenu, size, rightIcon)));
+}
+export var ContextMenuItem = React.forwardRef(ContextMenuItemRender);

package/__internal__/src/components/ContextMenuCanary/ContextMenuLevel/ContextMenuLevel.css

@@ -0,0 +1,73 @@
+.ContextMenuLevelCanary {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 240px;
+  padding: var(--space-xs) 0;
+  background: var(--color-bg-default);
+  border: var(--control-border-width) solid var(--color-control-bg-border-default);
+  border-radius: var(--control-radius);
+  -webkit-box-shadow: var(--shadow-layer);
+          box-shadow: var(--shadow-layer);
+}
+
+  .ContextMenuLevelCanary:not(.ContextMenuLevelCanary_firstLevel).ContextMenuLevelCanary_direction_rightStartUp,
+    .ContextMenuLevelCanary:not(.ContextMenuLevelCanary_firstLevel).ContextMenuLevelCanary_direction_leftStartUp {
+      -webkit-transform: translateY(calc(-1 * (var(--space-xs) + 1px)));
+              transform: translateY(calc(-1 * (var(--space-xs) + 1px)));
+    }
+
+  .ContextMenuLevelCanary:not(.ContextMenuLevelCanary_firstLevel).ContextMenuLevelCanary_direction_rightStartDown,
+    .ContextMenuLevelCanary:not(.ContextMenuLevelCanary_firstLevel).ContextMenuLevelCanary_direction_leftStartDown {
+      -webkit-transform: translateY(calc(var(--space-xs) + 1px));
+              transform: translateY(calc(var(--space-xs) + 1px));
+    }
+
+  .ContextMenuLevelCanary-Divider {
+    --vertical-space: 0;
+    height: var(--control-border-width);
+    margin: var(--vertical-space) var(--space-s);
+    background: var(--color-control-bg-border-default);
+  }
+
+  .ContextMenuLevelCanary-Divider_size_l {
+        --vertical-space: var(--space-xs);
+      }
+
+  .ContextMenuLevelCanary-Divider_size_m,
+      .ContextMenuLevelCanary-Divider_size_s,
+      .ContextMenuLevelCanary-Divider_size_xs {
+        --vertical-space: var(--space-2xs);
+      }
+
+  .ContextMenuLevelCanary-Group_size_xs > .ContextMenuLevel-Item:not(:last-child) {
+      margin-bottom: var(--space-2xs);
+    }
+
+  .ContextMenuLevelCanary-Header {
+    --top-space: 0;
+    --bottom-space: 0;
+    margin: 0 var(--space-s);
+    padding: var(--top-space) 0 var(--bottom-space) 0;
+    border-bottom: solid var(--control-border-width) var(--color-control-bg-border-default);
+    letter-spacing: 0.05em;
+  }
+
+  .ContextMenuLevelCanary-Header_size_xs,
+      .ContextMenuLevelCanary-Header_size_s {
+        --top-space: var(--space-xs);
+        --bottom-space: var(--space-2xs);
+      }
+
+  .ContextMenuLevelCanary-Header_size_m {
+        --top-space: var(--space-s);
+        --bottom-space: var(--space-xs);
+      }
+
+  .ContextMenuLevelCanary-Header_size_l {
+        --top-space: var(--space-s);
+        --bottom-space: var(--space-s);
+      }
+
+  .ContextMenuLevelCanary-Header_first {
+      padding: calc(var(--top-space) - var(--space-xs)) 0 var(--bottom-space) 0;
+    }

package/__internal__/src/components/ContextMenuCanary/ContextMenuLevel/ContextMenuLevel.d.ts

@@ -0,0 +1,4 @@
+import './ContextMenuLevel.css';
+import { ContextMenuLevelComponent } from '../types';
+export declare const cnContextMenuLevel: import("@bem-react/classname").ClassNameFormatter;
+export declare const ContextMenuLevel: ContextMenuLevelComponent;