@consta/uikit 3.12.1 → 3.12.2

package/Tabs/package.json

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

package/Tag/package.json

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

package/TagBase/package.json

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

package/Text/package.json

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

package/TextField/package.json

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

package/Theme/package.json

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

package/ThemeToggler/package.json

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

package/Timer/package.json

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

package/Tooltip/package.json

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

package/User/package.json

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

package/UserSelect/package.json

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

package/UserSelectDeprecated/package.json

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

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

@@ -7,74 +7,18 @@
   cursor: pointer;
 }
 
-  .Checkbox-Input {
-    position: relative;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-    width: var(--box-size);
-    height: var(--box-size);
-    margin: 0;
-    background-color: transparent;
-    border: var(--control-border-width) solid var(--color-control-bg-border-default);
-    border-radius: var(--control-radius);
-    cursor: pointer;
-    -webkit-transition: border-color 0.15s, background-color 0.15s;
-    transition: border-color 0.15s, background-color 0.15s;
-    -ms-flex-negative: 0;
-        flex-shrink: 0;
-    -webkit-appearance: none;
-  }
-
-  .Checkbox-Input::before {
-      content: '';
-      position: absolute;
-      z-index: 1;
-      -webkit-box-sizing: border-box;
-              box-sizing: border-box;
-      width: calc(var(--box-size) * 0.6);
-      height: calc(var(--box-size) * 0.35);
-      background-color: var(--color-control-bg-affect);
-      border-left: 2px solid var(--checkbox-checked-check);
-      border-bottom: 2px solid var(--checkbox-checked-check);
-      opacity: 0;
-      -webkit-transition: opacity 0.15s, background-color 0.08s, -webkit-transform 0.15s;
-      transition: opacity 0.15s, background-color 0.08s, -webkit-transform 0.15s;
-      transition: opacity 0.15s, transform 0.15s, background-color 0.08s;
-      transition: opacity 0.15s, transform 0.15s, background-color 0.08s, -webkit-transform 0.15s;
-      -webkit-transform: rotate(-50deg) scale(0, 1);
-              transform: rotate(-50deg) scale(0, 1);
-      -webkit-transform-origin: 0 0;
-              transform-origin: 0 0;
-    }
-
-  .Checkbox-Label {
-    margin-left: var(--offset);
-    color: var(--color-control-typo-default);
-    font-size: var(--checkbox-font-size);
-  }
-
   .Checkbox_size_m {
       --checkbox-font-size: var(--control-text-size-m);
-      --box-size: var(--control-box-size-m);
-      --offset: var(--space-xs);
+      --checkbox-size: var(--control-box-size-m);
+      --checkbox-offset: var(--space-xs);
     }
 
-  .Checkbox_size_m .Checkbox-Input::before {
-          top: 0.55em;
-          left: 0.15em;
-        }
-
   .Checkbox_size_l {
       --checkbox-font-size: var(--control-text-size-l);
-      --box-size: var(--control-box-size-l);
-      --offset: var(--space-s);
+      --checkbox-size: var(--control-box-size-l);
+      --checkbox-offset: var(--space-s);
     }
 
-  .Checkbox_size_l .Checkbox-Input::before {
-          top: 0.7em;
-          left: 0.2em;
-        }
-
   .Checkbox_view_primary {
       --checkbox-checked-border: var(--color-control-bg-primary);
       --checkbox-checked-background: var(--color-control-bg-primary);
@@ -91,26 +35,6 @@
       --checkbox-checked-background-hover: var(--color-control-bg-ghost-hover);
     }
 
-  .Checkbox-Input:checked {
-    background-color: var(--checkbox-checked-background);
-    border-color: var(--checkbox-checked-border);
-  }
-
-  .Checkbox-Input:checked::before {
-      opacity: 1;
-      -webkit-transform: rotate(-50deg) scale(1, 1);
-              transform: rotate(-50deg) scale(1, 1);
-    }
-
-  .Checkbox:hover .Checkbox-Input {
-    border-color: var(--color-control-bg-border-default-hover);
-  }
-
-  .Checkbox:hover .Checkbox-Input:checked {
-      background-color: var(--checkbox-checked-background-hover);
-      border-color: var(--checkbox-checked-border-hover);
-    }
-
   .Checkbox_intermediate .Checkbox-Input,
     .Checkbox_intermediate .Checkbox-Input:checked,
     .Checkbox_intermediate:hover .Checkbox-Input,
@@ -121,6 +45,7 @@
 
   .Checkbox_intermediate .Checkbox-Input::before, .Checkbox_intermediate .Checkbox-Input:checked::before, .Checkbox_intermediate:hover .Checkbox-Input::before, .Checkbox_intermediate:hover .Checkbox-Input:checked::before {
         background-color: var(--checkbox-checked-check);
+        border: none;
         opacity: 1;
         -webkit-transition: opacity 0.15s, background-color 0.08s 0.04s, -webkit-transform 0.15s;
         transition: opacity 0.15s, background-color 0.08s 0.04s, -webkit-transform 0.15s;
@@ -166,3 +91,72 @@
   .Checkbox_align_top .Checkbox-Input {
         margin-top: var(--space-3xs);
       }
+
+  .Checkbox-Label {
+    margin-left: var(--checkbox-offset);
+    color: var(--color-control-typo-default);
+    font-size: var(--checkbox-font-size);
+  }
+
+  .Checkbox-Input {
+    position: relative;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    width: var(--checkbox-size);
+    height: var(--checkbox-size);
+    margin: 0;
+    padding: 0;
+    background-color: transparent;
+    border: var(--control-border-width) solid var(--color-control-bg-border-default);
+    border-radius: var(--control-radius);
+    cursor: pointer;
+    -webkit-transition: border-color 0.15s, background-color 0.15s;
+    transition: border-color 0.15s, background-color 0.15s;
+    -ms-flex-negative: 0;
+        flex-shrink: 0;
+    -webkit-appearance: none;
+  }
+
+  .Checkbox-Input::before {
+      content: '';
+      position: absolute;
+      z-index: 1;
+      top: calc(var(--checkbox-size) / 2 - 1px);
+      left: calc(var(--checkbox-size) / 5 - 1px);
+      -webkit-box-sizing: border-box;
+              box-sizing: border-box;
+      width: calc(var(--checkbox-size) * 0.6);
+      height: calc(var(--checkbox-size) * 0.35);
+      background-color: var(--color-control-bg-affect);
+      border-left: 2px solid var(--checkbox-checked-check);
+      border-bottom: 2px solid var(--checkbox-checked-check);
+      opacity: 0;
+      -webkit-transition: opacity 0.15s, background-color 0.08s, -webkit-transform 0.15s;
+      transition: opacity 0.15s, background-color 0.08s, -webkit-transform 0.15s;
+      transition: opacity 0.15s, transform 0.15s, background-color 0.08s;
+      transition: opacity 0.15s, transform 0.15s, background-color 0.08s, -webkit-transform 0.15s;
+      -webkit-transform: rotate(-50deg) scale(0, 1);
+              transform: rotate(-50deg) scale(0, 1);
+      -webkit-transform-origin: 0 0;
+              transform-origin: 0 0;
+    }
+
+  .Checkbox-Input:checked {
+    background-color: var(--checkbox-checked-background);
+    border-color: var(--checkbox-checked-border);
+  }
+
+  .Checkbox-Input:checked::before {
+      opacity: 1;
+      -webkit-transform: rotate(-50deg) scale(1, 1);
+              transform: rotate(-50deg) scale(1, 1);
+    }
+
+  .Checkbox:hover .Checkbox-Input {
+    border-color: var(--color-control-bg-border-default-hover);
+  }
+
+  .Checkbox:hover .Checkbox-Input:checked {
+      background-color: var(--checkbox-checked-background-hover);
+      border-color: var(--checkbox-checked-border-hover);
+    }

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

@@ -71,7 +71,8 @@ function ProgressStepBarRender(props, ref) {
             position: helpers_1.getItemPosition(index, steps.length),
             pointRef: stepsRef[index],
             direction: direction,
-            onClick: onClick || onItemClickHandler
+            onClick: onClick || onItemClickHandler,
+            key: helpers_1.cnProgressStepBar({ index: index })
         };
     };
     var isOverflow = useOverflow_1.useOverflow({ currentRef: listRef });

package/__internal__/cjs-src/components/ProgressStepBarCanary/ProgressStepBarItem/ProgressStepBarItem.js

@@ -29,11 +29,11 @@ var renderPointContent = function (point, size, progress) {
         return react_1["default"].createElement(ProgressSpin_1.ProgressSpin, { size: size });
     if (!point)
         return null;
-    if (typeof point === 'function') {
-        var Icon = point;
-        return react_1["default"].createElement(Icon, { size: "xs" });
+    if (typeof point === 'number') {
+        return (react_1["default"].createElement(Text_1.Text, { className: cnProgressStepBarItem('PointText'), size: size === 's' ? '2xs' : 'xs', weight: "bold" }, point));
     }
-    return (react_1["default"].createElement(Text_1.Text, { className: cnProgressStepBarItem('PointText'), size: size === 's' ? '2xs' : 'xs', weight: "bold" }, point));
+    var Icon = point;
+    return react_1["default"].createElement(Icon, { size: "xs" });
 };
 exports.ProgressStepBarItem = react_1["default"].forwardRef(function (props, ref) {
     var content = props.content, tooltipContent = props.tooltipContent, label = props.label, point = props.point, status = props.status, progress = props.progress, direction = props.direction, size = props.size, pointRef = props.pointRef, onClick = props.onClick, _a = props.position, position = _a === void 0 ? helpers_1.propPositionDefault : _a, otherProps = tslib_1.__rest(props, ["content", "tooltipContent", "label", "point", "status", "progress", "direction", "size", "pointRef", "onClick", "position"]);

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

@@ -1,8 +1,11 @@
 import '../../Theme/_color/Theme_color_gpnDark.css';
 import './SnackBar-Item.css';
 import React from 'react';
+import { PropsWithHTMLAttributesAndRef } from '../../../utils/types/PropsWithHTMLAttributes';
 import { Item } from '../SnackBar';
 export declare type SnackBarItemProps = {
     item: Item;
 };
-export declare const SnackBarItem: React.FC<SnackBarItemProps>;
+declare type SnackBarItemComponent = (props: PropsWithHTMLAttributesAndRef<SnackBarItemProps, HTMLDivElement>) => React.ReactElement | null;
+export declare const SnackBarItem: SnackBarItemComponent;
+export {};

package/__internal__/cjs-src/components/SnackBar/Item/SnackBar-Item.js

@@ -5,6 +5,7 @@ var tslib_1 = require("tslib");
 require("../../Theme/_color/Theme_color_gpnDark.css");
 require("./SnackBar-Item.css");
 var react_1 = tslib_1.__importStar(require("react"));
+var useFlag_1 = require("../../../hooks/useFlag/useFlag");
 var IconClose_1 = require("../../../icons/IconClose/IconClose");
 var type_guards_1 = require("../../../utils/type-guards");
 var Button_1 = require("../../Button/Button");
@@ -23,17 +24,17 @@ var getAutoCloseTime = function (autoClose) {
     }
     return false;
 };
-exports.SnackBarItem = function (props) {
+exports.SnackBarItem = react_1["default"].forwardRef(function (props, ref) {
     var item = props.item;
     var onClose = item.onClose, autoClose = item.autoClose, showProgress = item.showProgress, Icon = item.icon, message = item.message, actions = item.actions, _a = item.status, status = _a === void 0 ? SnackBar_1.snackBarItemStatusDefault : _a, onAutoCloseProp = item.onAutoClose;
     var _b = tslib_1.__read(react_1.useState(null), 2), timerFunctions = _b[0], setTimerFunctions = _b[1];
-    var _c = tslib_1.__read(react_1.useState(false), 2), hover = _c[0], setHover = _c[1];
-    var _d = tslib_1.__read(react_1.useState(false), 2), timeIsOver = _d[0], setTimeIsOver = _d[1];
+    var _c = tslib_1.__read(useFlag_1.useFlag(false), 2), hover = _c[0], _d = _c[1], onHover = _d.on, offHover = _d.off;
+    var _e = tslib_1.__read(useFlag_1.useFlag(false), 2), timeIsOver = _e[0], onTimeIsOver = _e[1].on;
     var handleMountTimer = function (timerFunctions) {
         return setTimerFunctions(timerFunctions);
     };
-    var handleMouseEnter = function () { return setHover(true); };
-    var handleMouseLeave = function () { return setHover(false); };
+    var handleMouseEnter = function () { return onHover(); };
+    var handleMouseLeave = function () { return offHover(); };
     var autoCloseTime = getAutoCloseTime(autoClose);
     var hideAutoCloseTimer = showProgress === undefined || !(type_guards_1.isNumber(autoCloseTime) && autoCloseTime > 0);
     var onAutoClose = function (item) {
@@ -55,15 +56,15 @@ exports.SnackBarItem = function (props) {
         }
     }, [hover, timeIsOver, timerFunctions]);
     var handleTimeIsOver = function () {
-        setTimeIsOver(true);
+        onTimeIsOver();
         onAutoClose(item);
     };
     var handleClose = onClose ? function () { return onClose(item); } : undefined;
-    return (react_1["default"].createElement("div", { className: SnackBar_1.cnSnackBarItem({ status: status }, [Theme_1.cnTheme({ color: 'gpnDark' })]), onMouseEnter: autoCloseTime ? handleMouseEnter : undefined, onMouseLeave: autoCloseTime ? handleMouseLeave : undefined },
+    return (react_1["default"].createElement("div", { ref: ref, className: SnackBar_1.cnSnackBarItem({ status: status }, [Theme_1.cnTheme({ color: 'gpnDark' })]), onMouseEnter: autoCloseTime ? handleMouseEnter : undefined, onMouseLeave: autoCloseTime ? handleMouseLeave : undefined },
         autoCloseTime && (react_1["default"].createElement(SnackBar_Timer_1.SnackBarTimer, { onMount: handleMountTimer, onTimeIsOver: handleTimeIsOver, startTime: autoCloseTime, hidden: hideAutoCloseTimer })),
         hideAutoCloseTimer && Icon && react_1["default"].createElement(Icon, { className: SnackBar_1.cnSnackBar('Icon'), size: "m" }),
         react_1["default"].createElement("div", { className: SnackBar_1.cnSnackBar('Content') },
             type_guards_1.isString(message) || type_guards_1.isNumber(message) ? (react_1["default"].createElement(Text_1.Text, { className: SnackBar_1.cnSnackBar('Message'), lineHeight: "s" }, message)) : (react_1["default"].createElement(react_1["default"].Fragment, null, message)),
             actions && react_1["default"].createElement(SnackBar_ActionButton_1.SnackBarActionButton, { actions: actions })),
         onClose && (react_1["default"].createElement(Button_1.Button, { className: SnackBar_1.cnSnackBar('CloseButton'), view: "clear", iconLeft: IconClose_1.IconClose, form: "round", size: "xs", onClick: handleClose }))));
-};
+});

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

@@ -3,7 +3,7 @@ exports.__esModule = true;
 exports.SnackBar = exports.cnSnackBarItem = exports.cnSnackBar = exports.COMPONENT_NAME = exports.snackBarItemStatusDefault = exports.snackBarItemStatus = void 0;
 var tslib_1 = require("tslib");
 require("./SnackBar.css");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
 var react_transition_group_1 = require("react-transition-group");
 var bem_1 = require("../../utils/bem");
 var cnForCssTransition_1 = require("../../utils/cnForCssTransition");
@@ -17,8 +17,15 @@ exports.cnSnackBarItem = bem_1.cn(exports.COMPONENT_NAME, 'Item');
 var cssTransitionClassNames = cnForCssTransition_1.cnForCssTransition(exports.cnSnackBarItem);
 exports.SnackBar = function (props) {
     var _a = usePropsHandler_1.usePropsHandler(exports.COMPONENT_NAME, props), items = _a.items, className = _a.className, otherProps = tslib_1.__rest(_a, ["items", "className"]);
-    return (react_1["default"].createElement(react_transition_group_1.TransitionGroup, tslib_1.__assign({}, otherProps, { className: exports.cnSnackBar(null, [className]), appear: true, enter: true, exit: true }), items.map(function (item) {
-        return (react_1["default"].createElement(react_transition_group_1.CSSTransition, { classNames: cssTransitionClassNames, key: item.key, timeout: 200 },
-            react_1["default"].createElement(SnackBar_Item_1.SnackBarItem, { item: item })));
+    var refs = react_1.useMemo(function () {
+        var refArray = [];
+        for (var i = 0; i < items.length; i++) {
+            refArray[i] = react_1.createRef();
+        }
+        return refArray;
+    }, [items]);
+    return (react_1["default"].createElement(react_transition_group_1.TransitionGroup, tslib_1.__assign({}, otherProps, { className: exports.cnSnackBar(null, [className]), appear: true, enter: true, exit: true }), items.map(function (item, index) {
+        return (react_1["default"].createElement(react_transition_group_1.CSSTransition, { nodeRef: refs[index], classNames: cssTransitionClassNames, key: item.key, timeout: 200 },
+            react_1["default"].createElement(SnackBar_Item_1.SnackBarItem, { item: item, ref: refs[index] })));
     })));
 };

package/__internal__/cjs-src/components/Theme/_size/Theme_size_gpnDefault.css

@@ -13,7 +13,7 @@
   --size-text-6xl: 96px;
 
   /* Межстрочный интервал */
-  --line-height-text-2xs: 1em;
+  --line-height-text-2xs: 1.1em;
   --line-height-text-xs: 1.2em;
   --line-height-text-s: 1.4em;
   --line-height-text-m: 1.5em;

package/__internal__/src/components/Checkbox/Checkbox.css

@@ -7,74 +7,18 @@
   cursor: pointer;
 }
 
-  .Checkbox-Input {
-    position: relative;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-    width: var(--box-size);
-    height: var(--box-size);
-    margin: 0;
-    background-color: transparent;
-    border: var(--control-border-width) solid var(--color-control-bg-border-default);
-    border-radius: var(--control-radius);
-    cursor: pointer;
-    -webkit-transition: border-color 0.15s, background-color 0.15s;
-    transition: border-color 0.15s, background-color 0.15s;
-    -ms-flex-negative: 0;
-        flex-shrink: 0;
-    -webkit-appearance: none;
-  }
-
-  .Checkbox-Input::before {
-      content: '';
-      position: absolute;
-      z-index: 1;
-      -webkit-box-sizing: border-box;
-              box-sizing: border-box;
-      width: calc(var(--box-size) * 0.6);
-      height: calc(var(--box-size) * 0.35);
-      background-color: var(--color-control-bg-affect);
-      border-left: 2px solid var(--checkbox-checked-check);
-      border-bottom: 2px solid var(--checkbox-checked-check);
-      opacity: 0;
-      -webkit-transition: opacity 0.15s, background-color 0.08s, -webkit-transform 0.15s;
-      transition: opacity 0.15s, background-color 0.08s, -webkit-transform 0.15s;
-      transition: opacity 0.15s, transform 0.15s, background-color 0.08s;
-      transition: opacity 0.15s, transform 0.15s, background-color 0.08s, -webkit-transform 0.15s;
-      -webkit-transform: rotate(-50deg) scale(0, 1);
-              transform: rotate(-50deg) scale(0, 1);
-      -webkit-transform-origin: 0 0;
-              transform-origin: 0 0;
-    }
-
-  .Checkbox-Label {
-    margin-left: var(--offset);
-    color: var(--color-control-typo-default);
-    font-size: var(--checkbox-font-size);
-  }
-
   .Checkbox_size_m {
       --checkbox-font-size: var(--control-text-size-m);
-      --box-size: var(--control-box-size-m);
-      --offset: var(--space-xs);
+      --checkbox-size: var(--control-box-size-m);
+      --checkbox-offset: var(--space-xs);
     }
 
-  .Checkbox_size_m .Checkbox-Input::before {
-          top: 0.55em;
-          left: 0.15em;
-        }
-
   .Checkbox_size_l {
       --checkbox-font-size: var(--control-text-size-l);
-      --box-size: var(--control-box-size-l);
-      --offset: var(--space-s);
+      --checkbox-size: var(--control-box-size-l);
+      --checkbox-offset: var(--space-s);
     }
 
-  .Checkbox_size_l .Checkbox-Input::before {
-          top: 0.7em;
-          left: 0.2em;
-        }
-
   .Checkbox_view_primary {
       --checkbox-checked-border: var(--color-control-bg-primary);
       --checkbox-checked-background: var(--color-control-bg-primary);
@@ -91,26 +35,6 @@
       --checkbox-checked-background-hover: var(--color-control-bg-ghost-hover);
     }
 
-  .Checkbox-Input:checked {
-    background-color: var(--checkbox-checked-background);
-    border-color: var(--checkbox-checked-border);
-  }
-
-  .Checkbox-Input:checked::before {
-      opacity: 1;
-      -webkit-transform: rotate(-50deg) scale(1, 1);
-              transform: rotate(-50deg) scale(1, 1);
-    }
-
-  .Checkbox:hover .Checkbox-Input {
-    border-color: var(--color-control-bg-border-default-hover);
-  }
-
-  .Checkbox:hover .Checkbox-Input:checked {
-      background-color: var(--checkbox-checked-background-hover);
-      border-color: var(--checkbox-checked-border-hover);
-    }
-
   .Checkbox_intermediate .Checkbox-Input,
     .Checkbox_intermediate .Checkbox-Input:checked,
     .Checkbox_intermediate:hover .Checkbox-Input,
@@ -121,6 +45,7 @@
 
   .Checkbox_intermediate .Checkbox-Input::before, .Checkbox_intermediate .Checkbox-Input:checked::before, .Checkbox_intermediate:hover .Checkbox-Input::before, .Checkbox_intermediate:hover .Checkbox-Input:checked::before {
         background-color: var(--checkbox-checked-check);
+        border: none;
         opacity: 1;
         -webkit-transition: opacity 0.15s, background-color 0.08s 0.04s, -webkit-transform 0.15s;
         transition: opacity 0.15s, background-color 0.08s 0.04s, -webkit-transform 0.15s;
@@ -166,3 +91,72 @@
   .Checkbox_align_top .Checkbox-Input {
         margin-top: var(--space-3xs);
       }
+
+  .Checkbox-Label {
+    margin-left: var(--checkbox-offset);
+    color: var(--color-control-typo-default);
+    font-size: var(--checkbox-font-size);
+  }
+
+  .Checkbox-Input {
+    position: relative;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    width: var(--checkbox-size);
+    height: var(--checkbox-size);
+    margin: 0;
+    padding: 0;
+    background-color: transparent;
+    border: var(--control-border-width) solid var(--color-control-bg-border-default);
+    border-radius: var(--control-radius);
+    cursor: pointer;
+    -webkit-transition: border-color 0.15s, background-color 0.15s;
+    transition: border-color 0.15s, background-color 0.15s;
+    -ms-flex-negative: 0;
+        flex-shrink: 0;
+    -webkit-appearance: none;
+  }
+
+  .Checkbox-Input::before {
+      content: '';
+      position: absolute;
+      z-index: 1;
+      top: calc(var(--checkbox-size) / 2 - 1px);
+      left: calc(var(--checkbox-size) / 5 - 1px);
+      -webkit-box-sizing: border-box;
+              box-sizing: border-box;
+      width: calc(var(--checkbox-size) * 0.6);
+      height: calc(var(--checkbox-size) * 0.35);
+      background-color: var(--color-control-bg-affect);
+      border-left: 2px solid var(--checkbox-checked-check);
+      border-bottom: 2px solid var(--checkbox-checked-check);
+      opacity: 0;
+      -webkit-transition: opacity 0.15s, background-color 0.08s, -webkit-transform 0.15s;
+      transition: opacity 0.15s, background-color 0.08s, -webkit-transform 0.15s;
+      transition: opacity 0.15s, transform 0.15s, background-color 0.08s;
+      transition: opacity 0.15s, transform 0.15s, background-color 0.08s, -webkit-transform 0.15s;
+      -webkit-transform: rotate(-50deg) scale(0, 1);
+              transform: rotate(-50deg) scale(0, 1);
+      -webkit-transform-origin: 0 0;
+              transform-origin: 0 0;
+    }
+
+  .Checkbox-Input:checked {
+    background-color: var(--checkbox-checked-background);
+    border-color: var(--checkbox-checked-border);
+  }
+
+  .Checkbox-Input:checked::before {
+      opacity: 1;
+      -webkit-transform: rotate(-50deg) scale(1, 1);
+              transform: rotate(-50deg) scale(1, 1);
+    }
+
+  .Checkbox:hover .Checkbox-Input {
+    border-color: var(--color-control-bg-border-default-hover);
+  }
+
+  .Checkbox:hover .Checkbox-Input:checked {
+      background-color: var(--checkbox-checked-background-hover);
+      border-color: var(--checkbox-checked-border-hover);
+    }

package/__internal__/src/components/ProgressStepBarCanary/ProgressStepBarCanary.js

@@ -68,7 +68,8 @@ function ProgressStepBarRender(props, ref) {
             position: getItemPosition(index, steps.length),
             pointRef: stepsRef[index],
             direction: direction,
-            onClick: onClick || onItemClickHandler
+            onClick: onClick || onItemClickHandler,
+            key: cnProgressStepBar({ index: index })
         };
     };
     var isOverflow = useOverflow({ currentRef: listRef });

package/__internal__/src/components/ProgressStepBarCanary/ProgressStepBarItem/ProgressStepBarItem.js

@@ -26,11 +26,11 @@ var renderPointContent = function (point, size, progress) {
         return React.createElement(ProgressSpin, { size: size });
     if (!point)
         return null;
-    if (typeof point === 'function') {
-        var Icon = point;
-        return React.createElement(Icon, { size: "xs" });
+    if (typeof point === 'number') {
+        return (React.createElement(Text, { className: cnProgressStepBarItem('PointText'), size: size === 's' ? '2xs' : 'xs', weight: "bold" }, point));
     }
-    return (React.createElement(Text, { className: cnProgressStepBarItem('PointText'), size: size === 's' ? '2xs' : 'xs', weight: "bold" }, point));
+    var Icon = point;
+    return React.createElement(Icon, { size: "xs" });
 };
 export var ProgressStepBarItem = React.forwardRef(function (props, ref) {
     var content = props.content, tooltipContent = props.tooltipContent, label = props.label, point = props.point, status = props.status, progress = props.progress, direction = props.direction, size = props.size, pointRef = props.pointRef, onClick = props.onClick, _a = props.position, position = _a === void 0 ? propPositionDefault : _a, otherProps = __rest(props, ["content", "tooltipContent", "label", "point", "status", "progress", "direction", "size", "pointRef", "onClick", "position"]);

package/__internal__/src/components/SnackBar/Item/SnackBar-Item.d.ts

@@ -1,8 +1,11 @@
 import '../../Theme/_color/Theme_color_gpnDark.css';
 import './SnackBar-Item.css';
 import React from 'react';
+import { PropsWithHTMLAttributesAndRef } from '../../../utils/types/PropsWithHTMLAttributes';
 import { Item } from '../SnackBar';
 export declare type SnackBarItemProps = {
     item: Item;
 };
-export declare const SnackBarItem: React.FC<SnackBarItemProps>;
+declare type SnackBarItemComponent = (props: PropsWithHTMLAttributesAndRef<SnackBarItemProps, HTMLDivElement>) => React.ReactElement | null;
+export declare const SnackBarItem: SnackBarItemComponent;
+export {};