@consta/uikit 3.17.1 → 3.18.0

package/ResponsesEmptyPockets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesEmptyPockets",
-  "version": "3.17.1",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesExit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesExit",
-  "version": "3.17.1",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImage/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImage",
-  "version": "3.17.1",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImage403/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImage403",
-  "version": "3.17.1",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImage404/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImage404",
-  "version": "3.17.1",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImage500/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImage500",
-  "version": "3.17.1",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImage503/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImage503",
-  "version": "3.17.1",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImageConnectionError/package.json

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

package/ResponsesImageDeleted/package.json

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

package/ResponsesImageEmptyBox/package.json

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

package/ResponsesImageEmptyPockets/package.json

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

package/ResponsesImageNothingFound/package.json

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

package/ResponsesImageSuccess/package.json

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

package/ResponsesNothingFound/package.json

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

package/ResponsesSuccess/package.json

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

package/Select/package.json

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

package/Sidebar/package.json

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

package/Skeleton/package.json

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

package/SliderCanary/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/SliderCanary",
-  "version": "3.17.1",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/SnackBar/package.json

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

package/Steps/package.json

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

package/Switch/package.json

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

package/SwitchGroup/package.json

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

package/Table/package.json

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

package/Tabs/package.json

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

package/Tag/package.json

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

package/TagBase/package.json

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

package/Text/package.json

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

package/TextField/package.json

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

package/Theme/package.json

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

package/ThemeToggler/package.json

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

package/Timer/package.json

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

package/Tooltip/package.json

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

package/User/package.json

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

package/UserSelect/package.json

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

package/UserSelectDeprecated/package.json

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

package/__internal__/cjs-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__/cjs-src/components/Card/Card.js

@@ -1,20 +1,24 @@
 "use strict";
 exports.__esModule = true;
-exports.Card = exports.cnCard = exports.cardPropStatus = exports.cardPropSpace = exports.cardPropFormDefault = exports.cardPropForm = void 0;
+exports.Card = exports.cnCard = exports.COMPONENT_NAME = exports.cardPropStatus = exports.cardPropSpace = exports.cardPropFormDefault = exports.cardPropForm = void 0;
 var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
+var useForkRef_1 = require("../../hooks/useForkRef/useForkRef");
 var MixCard_1 = require("../../mixs/MixCard/MixCard");
 var bem_1 = require("../../utils/bem");
 var PropsWithAsAttributes_1 = require("../../utils/types/PropsWithAsAttributes");
+var usePropsHandler_1 = require("../EventInterceptor/usePropsHandler");
 exports.cardPropForm = ['round', 'square'];
 exports.cardPropFormDefault = exports.cardPropForm[0];
 exports.cardPropSpace = ['m', 'xs', 's', 'l', 'xl', '2xl', '3xl', '4xl', '5xl'];
 exports.cardPropStatus = ['alert', 'success', 'warning'];
+exports.COMPONENT_NAME = 'Card';
 exports.cnCard = bem_1.cn('Card');
 exports.Card = PropsWithAsAttributes_1.forwardRefWithAs(function (props, ref) {
-    var verticalSpace = props.verticalSpace, horizontalSpace = props.horizontalSpace, status = props.status, _a = props.form, form = _a === void 0 ? exports.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 = tslib_1.__rest(props, ["verticalSpace", "horizontalSpace", "status", "form", "shadow", "children", "tabIndex", "className", "as"]);
+    var cardRef = react_1.useRef(null);
+    var _a = usePropsHandler_1.usePropsHandler(exports.COMPONENT_NAME, props, cardRef), verticalSpace = _a.verticalSpace, horizontalSpace = _a.horizontalSpace, status = _a.status, _b = _a.form, form = _b === void 0 ? exports.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 = tslib_1.__rest(_a, ["verticalSpace", "horizontalSpace", "status", "form", "shadow", "children", "tabIndex", "className", "as"]);
     var Tag = as;
-    return (react_1["default"].createElement(Tag, tslib_1.__assign({ tabIndex: tabIndex, ref: ref, className: exports.cnCard(null, [
+    return (react_1["default"].createElement(Tag, tslib_1.__assign({ tabIndex: tabIndex, ref: useForkRef_1.useForkRef([cardRef, ref]), className: exports.cnCard(null, [
             MixCard_1.cnMixCard({ verticalSpace: verticalSpace, horizontalSpace: horizontalSpace, shadow: shadow, form: form, status: status }),
             className,
         ]) }, otherProps), children));

package/__internal__/cjs-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__/cjs-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__/cjs-src/components/ContextMenuCanary/ContextMenuCanary.js

@@ -0,0 +1,30 @@
+"use strict";
+exports.__esModule = true;
+exports.ContextMenu = void 0;
+var tslib_1 = require("tslib");
+require("./ContextMenu.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var react_transition_group_1 = require("react-transition-group");
+var useFlag_1 = require("../../hooks/useFlag/useFlag");
+var useForkRef_1 = require("../../hooks/useForkRef/useForkRef");
+var MixPopoverAnimate_1 = require("../../mixs/MixPopoverAnimate/MixPopoverAnimate");
+var bem_1 = require("../../utils/bem");
+var ContextMenuLevels_1 = require("./ContextMenuLevels/ContextMenuLevels");
+var cnContextMenu = bem_1.cn('ContextMenuCanary');
+function ContextMenuRender(props, ref) {
+    var isOpen = props.isOpen, className = props.className, onSetDirection = props.onSetDirection, otherProps = tslib_1.__rest(props, ["isOpen", "className", "onSetDirection"]);
+    var _a = tslib_1.__read(useFlag_1.useFlag(), 2), playAnimation = _a[0], setPlayAnimation = _a[1];
+    var _b = tslib_1.__read(react_1.useState(props.direction), 2), direction = _b[0], setDirection = _b[1];
+    var nodeRef = react_1.useRef(null);
+    var levelRef = useForkRef_1.useForkRef([ref, nodeRef]);
+    var handleSetDirection = function (d) {
+        setDirection(d);
+        onSetDirection === null || onSetDirection === void 0 ? void 0 : onSetDirection(d);
+    };
+    return (react_1["default"].createElement(react_transition_group_1.Transition, { "in": isOpen, unmountOnExit: true, timeout: MixPopoverAnimate_1.animateTimeout, onEnter: setPlayAnimation.off, onExit: setPlayAnimation.on, nodeRef: nodeRef }, function (animate) { return (react_1["default"].createElement(ContextMenuLevels_1.ContextMenuLevels, tslib_1.__assign({}, otherProps, { ref: levelRef, onSetDirection: handleSetDirection, className: cnContextMenu('Level', { playAnimation: playAnimation }, [
+            className,
+            MixPopoverAnimate_1.cnMixPopoverAnimate({ animate: animate, direction: direction }),
+        ]) }))); }));
+}
+exports.ContextMenu = react_1["default"].forwardRef(ContextMenuRender);
+tslib_1.__exportStar(require("./types"), exports);

package/__internal__/cjs-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__/cjs-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__/cjs-src/components/ContextMenuCanary/ContextMenuItem/ContextMenuItem.js

@@ -0,0 +1,45 @@
+"use strict";
+exports.__esModule = true;
+exports.ContextMenuItem = void 0;
+var tslib_1 = require("tslib");
+require("./ContextMenuItem.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var IconArrowRight_1 = require("../../../icons/IconArrowRight/IconArrowRight");
+var bem_1 = require("../../../utils/bem");
+var getByMap_1 = require("../../../utils/getByMap");
+var Text_1 = require("../../Text/Text");
+var helper_1 = require("../helper");
+var types_1 = require("../types");
+var cnContextMenuItem = bem_1.cn('ContextMenuItemCanary');
+function renderSide(side, position, withArrow, size, icon) {
+    var sides = side ? tslib_1.__spread((Array.isArray(side) ? side : [side])) : [];
+    if (icon) {
+        var Icon = icon;
+        var render = react_1["default"].createElement(Icon, { size: getByMap_1.getByMap(helper_1.sizeMapIcon, size) });
+        if (position === 'left') {
+            sides.unshift(render);
+        }
+        if (position === 'right') {
+            sides.push(render);
+        }
+    }
+    if (withArrow) {
+        sides.push(react_1["default"].createElement(IconArrowRight_1.IconArrowRight, { size: "xs", view: "secondary" }));
+    }
+    var sidesRender = sides.map(function (item, index) { return (react_1["default"].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 ? types_1.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 = tslib_1.__rest(props, ["label", "rightSide", "leftSide", "size", "as", "disabled", "status", "withSubMenu", "className", "active", "leftIcon", "rightIcon"]);
+    var view = (disabled ? undefined : status) || 'primary';
+    return (react_1["default"].createElement(Text_1.Text, tslib_1.__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_1["default"].createElement("div", { className: cnContextMenuItem('Slot', { position: 'center' }), key: "center" }, label)),
+        renderSide(rightSide, 'right', withSubMenu, size, rightIcon)));
+}
+exports.ContextMenuItem = react_1["default"].forwardRef(ContextMenuItemRender);

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