@consta/uikit 3.12.4 → 3.13.0

package/SnackBar/package.json

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

package/Steps/package.json

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

package/Switch/package.json

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

package/SwitchGroup/package.json

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

package/Table/package.json

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

package/Tabs/package.json

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

package/Tag/package.json

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

package/TagBase/package.json

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

package/Text/package.json

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

package/TextField/package.json

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

package/Theme/package.json

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

package/ThemeToggler/package.json

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

package/Timer/package.json

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

package/Tooltip/package.json

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

package/User/package.json

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

package/UserSelect/package.json

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

package/UserSelectDeprecated/package.json

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

package/__internal__/cjs-src/components/BreadcrumbsCanary/Breadcrumbs.css

@@ -0,0 +1,75 @@
+.Breadcrumbs {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: var(--color-typo-secondary);
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+
+  .Breadcrumbs_size_xs {
+      --delimiter-space: var(--space-xs);
+      font-size: var(--control-text-size-xs);
+    }
+
+  .Breadcrumbs_size_s {
+      --delimiter-space: var(--space-s);
+      font-size: var(--control-text-size-s);
+    }
+
+  .Breadcrumbs_size_m {
+      --delimiter-space: var(--space-m);
+      font-size: var(--control-text-size-m);
+    }
+
+  .Breadcrumbs_size_l {
+      --delimiter-space: var(--space-l);
+      font-size: var(--control-text-size-l);
+    }
+
+  .Breadcrumbs-Item {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+  }
+
+  .Breadcrumbs-Link {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    color: var(--color-typo-secondary);
+    text-decoration: none;
+    -webkit-transition: color 0.2s;
+    transition: color 0.2s;
+  }
+
+  .Breadcrumbs-Link_active {
+      color: var(--color-typo-primary);
+      pointer-events: none;
+    }
+
+  .Breadcrumbs-Link:hover {
+      color: var(--color-typo-link-hover);
+    }
+
+  .Breadcrumbs-Icon {
+    margin-right: var(--space-xs);
+  }
+
+  .Breadcrumbs-Delimiter {
+    margin: 0 var(--delimiter-space);
+    color: var(--color-typo-ghost);
+  }
+
+  .Breadcrumbs-More {
+    color: var(--color-control-typo-clear);
+  }

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

@@ -0,0 +1,5 @@
+import './Breadcrumbs.css';
+import { BreadcrumbsComponent } from './types';
+export declare const cnBreadcrumbs: import("@bem-react/classname").ClassNameFormatter;
+export declare const Breadcrumbs: BreadcrumbsComponent;
+export * from './types';

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

@@ -0,0 +1,57 @@
+"use strict";
+exports.__esModule = true;
+exports.Breadcrumbs = exports.cnBreadcrumbs = void 0;
+var tslib_1 = require("tslib");
+require("./Breadcrumbs.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var IconArrowRight_1 = require("../../icons/IconArrowRight/IconArrowRight");
+var bem_1 = require("../../utils/bem");
+var getByMap_1 = require("../../utils/getByMap");
+var Button_1 = require("../Button/Button");
+var helpers_1 = require("./helpers");
+var types_1 = require("./types");
+exports.cnBreadcrumbs = bem_1.cn('Breadcrumbs');
+var sizeMap = {
+    xs: 'xs',
+    s: 'xs',
+    m: 'xs',
+    l: 'm'
+};
+var BreadcrumbsRender = function (props, ref) {
+    var _a = helpers_1.withDefaultGetters(props), items = _a.items, getItemHref = _a.getItemHref, getItemLabel = _a.getItemLabel, getItemActive = _a.getItemActive, getItemIcon = _a.getItemIcon, getItemOnClick = _a.getItemOnClick, onItemClick = _a.onItemClick, _b = _a.size, size = _b === void 0 ? types_1.breadcrumbPropSizeDefault : _b, _c = _a.maxCount, maxCount = _c === void 0 ? 0 : _c, _d = _a.onlyIconRoot, onlyIconRoot = _d === void 0 ? false : _d, className = _a.className, restProps = tslib_1.__rest(_a, ["items", "getItemHref", "getItemLabel", "getItemActive", "getItemIcon", "getItemOnClick", "onItemClick", "size", "maxCount", "onlyIconRoot", "className"]);
+    var iconSize = getByMap_1.getByMap(sizeMap, size);
+    var _e = react_1.useMemo(function () {
+        var rest = items.slice();
+        var head = rest.splice(0, 1);
+        var tail = rest.splice(2 - maxCount);
+        return {
+            head: head,
+            tail: tail,
+            rest: rest
+        };
+    }, [items, maxCount]), head = _e.head, tail = _e.tail, rest = _e.rest;
+    var renderPages = function (items, isFirst) {
+        if (isFirst === void 0) { isFirst = false; }
+        return items.map(function (item, index) {
+            var Icon = getItemIcon(item);
+            var label = getItemLabel(item);
+            var href = getItemHref(item);
+            var active = getItemActive(item);
+            var onClick = helpers_1.getItemClick(item, getItemOnClick, onItemClick);
+            return (react_1["default"].createElement("li", { className: exports.cnBreadcrumbs('Item'), key: exports.cnBreadcrumbs('Item', { index: index, href: href }) },
+                !isFirst && react_1["default"].createElement(IconArrowRight_1.IconArrowRight, { className: exports.cnBreadcrumbs('Delimiter'), size: iconSize }),
+                react_1["default"].createElement("a", { className: exports.cnBreadcrumbs('Link', { active: active }), onClick: onClick, href: href },
+                    Icon &&
+                        (onlyIconRoot && isFirst ? (react_1["default"].createElement(Button_1.Button, { view: "clear", onlyIcon: true, iconLeft: Icon, size: iconSize })) : (react_1["default"].createElement(Icon, { className: exports.cnBreadcrumbs('Icon'), size: iconSize }))),
+                    (!isFirst || !onlyIconRoot) && react_1["default"].createElement("span", { className: exports.cnBreadcrumbs('Label') }, label))));
+        });
+    };
+    return (react_1["default"].createElement("ul", tslib_1.__assign({ className: exports.cnBreadcrumbs({ size: size }, [className]), ref: ref }, restProps),
+        renderPages(head, true),
+        maxCount && rest.length > 1 ? (react_1["default"].createElement("li", { className: exports.cnBreadcrumbs('Item') },
+            react_1["default"].createElement(IconArrowRight_1.IconArrowRight, { className: exports.cnBreadcrumbs('Delimiter'), size: iconSize }),
+            react_1["default"].createElement("span", { className: exports.cnBreadcrumbs('More') }, "..."))) : (renderPages(rest)),
+        renderPages(tail)));
+};
+exports.Breadcrumbs = react_1.forwardRef(BreadcrumbsRender);
+tslib_1.__exportStar(require("./types"), exports);

package/__internal__/cjs-src/components/BreadcrumbsCanary/helpers.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { BreadcrumbsPropGetItemActive, BreadcrumbsPropGetItemHref, BreadcrumbsPropGetItemIcon, BreadcrumbsPropGetItemLabel, BreadcrumbsPropGetItemOnClick, BreadcrumbsPropOnItemClick, BreadcrumbsProps, DefaultItem } from './types';
+export declare function withDefaultGetters<ITEM>(props: BreadcrumbsProps<ITEM>): {
+    getItemLabel: BreadcrumbsPropGetItemLabel<DefaultItem> | BreadcrumbsPropGetItemLabel<ITEM>;
+    getItemActive: BreadcrumbsPropGetItemActive<DefaultItem> | BreadcrumbsPropGetItemActive<ITEM>;
+    getItemHref: BreadcrumbsPropGetItemHref<DefaultItem> | BreadcrumbsPropGetItemHref<ITEM>;
+    getItemOnClick: BreadcrumbsPropGetItemOnClick<DefaultItem> | BreadcrumbsPropGetItemOnClick<ITEM>;
+    getItemIcon: BreadcrumbsPropGetItemIcon<DefaultItem> | BreadcrumbsPropGetItemIcon<ITEM>;
+    items: ITEM[];
+    onItemClick?: BreadcrumbsPropOnItemClick<ITEM> | undefined;
+    size?: "xs" | "s" | "m" | "l" | undefined;
+    maxCount?: number | undefined;
+    onlyIconRoot?: boolean | undefined;
+    className?: string | undefined;
+};
+export declare function getItemClick<ITEM>(item: ITEM, getItemOnClick: BreadcrumbsPropGetItemOnClick<ITEM>, onItemClick?: BreadcrumbsPropOnItemClick<ITEM>): React.MouseEventHandler;

package/__internal__/cjs-src/components/BreadcrumbsCanary/helpers.js

@@ -0,0 +1,21 @@
+"use strict";
+exports.__esModule = true;
+exports.getItemClick = exports.withDefaultGetters = void 0;
+var tslib_1 = require("tslib");
+var defaultGetItemLabel = function (item) { return item.label; };
+var defaultGetItemIcon = function (item) { return item.icon; };
+var defaultGetItemActive = function (item) { return item.active; };
+var defaultGetItemHref = function (item) { return item.href; };
+var defaultGetItemOnClick = function (item) { return item.onClick; };
+function withDefaultGetters(props) {
+    return tslib_1.__assign(tslib_1.__assign({}, props), { getItemLabel: props.getItemLabel || defaultGetItemLabel, getItemActive: props.getItemActive || defaultGetItemActive, getItemHref: props.getItemHref || defaultGetItemHref, getItemOnClick: props.getItemOnClick || defaultGetItemOnClick, getItemIcon: props.getItemIcon || defaultGetItemIcon });
+}
+exports.withDefaultGetters = withDefaultGetters;
+function getItemClick(item, getItemOnClick, onItemClick) {
+    return function (e) {
+        var _a;
+        onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick({ e: e, item: item });
+        (_a = getItemOnClick(item)) === null || _a === void 0 ? void 0 : _a(e);
+    };
+}
+exports.getItemClick = getItemClick;

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

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+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];
+export declare const breadcrumbPropSizeDefault: "m";
+export declare type BreadcrumbsPropGetItemLabel<ITEM> = (item: ITEM) => string | React.ReactNode;
+export declare type BreadcrumbsPropGetItemActive<ITEM> = (item: ITEM) => boolean | undefined;
+export declare type BreadcrumbsPropGetItemHref<ITEM> = (item: ITEM) => string | undefined;
+export declare type BreadcrumbsPropGetItemIcon<ITEM> = (item: ITEM) => IconComponent | undefined;
+export declare type BreadcrumbsPropGetItemOnClick<ITEM> = (item: ITEM) => React.MouseEventHandler | undefined;
+export declare type BreadcrumbsPropOnItemClick<ITEM> = (props: {
+    item: ITEM;
+    e: React.MouseEvent;
+}) => void;
+export declare type DefaultItem = {
+    label: string;
+    active?: boolean;
+    icon?: IconComponent;
+    href?: string;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+};
+export declare type BreadcrumbsProps<ITEM = DefaultItem> = {
+    items: ITEM[];
+    getItemLabel?: BreadcrumbsPropGetItemLabel<ITEM>;
+    getItemActive?: BreadcrumbsPropGetItemActive<ITEM>;
+    getItemHref?: BreadcrumbsPropGetItemHref<ITEM>;
+    getItemIcon?: BreadcrumbsPropGetItemIcon<ITEM>;
+    getItemOnClick?: BreadcrumbsPropGetItemOnClick<ITEM>;
+    onItemClick?: BreadcrumbsPropOnItemClick<ITEM>;
+    size?: BreadcrumbPropSize;
+    maxCount?: number;
+    onlyIconRoot?: boolean;
+    className?: string;
+};
+export declare type BreadcrumbsComponent = <ITEM>(props: PropsWithHTMLAttributesAndRef<BreadcrumbsProps<ITEM>, HTMLUListElement>) => React.ReactElement | null;

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

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

package/__internal__/cjs-src/components/DatePickerCanary/DatePickerFieldTypeDate/DatePickerFieldTypeDate.js

@@ -140,5 +140,5 @@ exports.DatePickerFieldTypeDate = react_1["default"].forwardRef(function (props,
         var _a;
         (_a = imaskRef.current) === null || _a === void 0 ? void 0 : _a.updateValue();
     }, [stringValue]);
-    return (react_1["default"].createElement(TextField_1.TextField, tslib_1.__assign({}, otherProps, { type: "text", ref: ref, inputRef: useForkRef_1.useForkRef([inputRef, inputRefProp]), value: stringValue, placeholder: placeholder })));
+    return (react_1["default"].createElement(TextField_1.TextField, tslib_1.__assign({}, otherProps, { type: "text", inputContainerRef: ref, inputRef: useForkRef_1.useForkRef([inputRef, inputRefProp]), value: stringValue, placeholder: placeholder })));
 });

package/__internal__/cjs-src/components/EventInterceptor/eventInterceptorMap.d.ts

@@ -62,6 +62,7 @@ export declare const eventInterceptorMap: {
         required?: boolean | undefined;
         step?: string | number | undefined;
         tabIndex?: number | undefined;
+        inputContainerRef?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
         inputRef?: ((instance: HTMLInputElement | HTMLTextAreaElement | null) => void) | import("react").RefObject<HTMLInputElement | HTMLTextAreaElement> | null | undefined;
         ariaLabel?: string | undefined;
         iconSize?: "xs" | "s" | "m" | undefined;

package/__internal__/cjs-src/components/EventInterceptor/propsHandlers/useTextFieldEventsHandler.d.ts

@@ -71,6 +71,7 @@ export declare const useTextFieldEventsHandler: <P extends {
     required?: boolean | undefined;
     step?: string | number | undefined;
     tabIndex?: number | undefined;
+    inputContainerRef?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
     inputRef?: ((instance: HTMLInputElement | HTMLTextAreaElement | null) => void) | React.RefObject<HTMLInputElement | HTMLTextAreaElement> | null | undefined;
     ariaLabel?: string | undefined;
     iconSize?: "xs" | "s" | "m" | undefined;

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

@@ -20,7 +20,7 @@ exports.cnTextField = bem_1.cn(exports.COMPONENT_NAME);
 function TextFieldRender(props, ref) {
     var textFieldRef = react_1["default"].useRef(null);
     var inputRef = react_1["default"].useRef(null);
-    var _a = usePropsHandler_1.usePropsHandler(exports.COMPONENT_NAME, props, textFieldRef), className = _a.className, _b = _a.type, type = _b === void 0 ? 'text' : _b, value = _a.value, onChange = _a.onChange, id = _a.id, name = _a.name, rows = _a.rows, cols = _a.cols, minRows = _a.minRows, maxRows = _a.maxRows, inputRefProp = _a.inputRef, maxLength = _a.maxLength, disabled = _a.disabled, _c = _a.size, size = _c === void 0 ? helpers_1.textFieldPropSizeDefault : _c, _d = _a.view, view = _d === void 0 ? helpers_1.textFieldPropViewDefault : _d, _e = _a.form, form = _e === void 0 ? helpers_1.textFieldPropFormDefault : _e, state = _a.state, status = _a.status, _f = _a.width, width = _f === void 0 ? helpers_1.textFieldPropWidthDefault : _f, onBlur = _a.onBlur, onFocus = _a.onFocus, _g = _a.autoFocus, autoFocus = _g === void 0 ? false : _g, placeholder = _a.placeholder, leftSide = _a.leftSide, rightSide = _a.rightSide, autoComplete = _a.autoComplete, withClearButton = _a.withClearButton, max = _a.max, min = _a.min, readOnly = _a.readOnly, required = _a.required, _h = _a.step, step = _h === void 0 ? 1 : _h, tabIndex = _a.tabIndex, ariaLabel = _a.ariaLabel, label = _a.label, _j = _a.labelPosition, labelPosition = _j === void 0 ? 'top' : _j, caption = _a.caption, iconSizeProp = _a.iconSize, focused = _a.focused, onClick = _a.onClick, otherProps = tslib_1.__rest(_a, ["className", "type", "value", "onChange", "id", "name", "rows", "cols", "minRows", "maxRows", "inputRef", "maxLength", "disabled", "size", "view", "form", "state", "status", "width", "onBlur", "onFocus", "autoFocus", "placeholder", "leftSide", "rightSide", "autoComplete", "withClearButton", "max", "min", "readOnly", "required", "step", "tabIndex", "ariaLabel", "label", "labelPosition", "caption", "iconSize", "focused", "onClick"]);
+    var _a = usePropsHandler_1.usePropsHandler(exports.COMPONENT_NAME, props, textFieldRef), className = _a.className, _b = _a.type, type = _b === void 0 ? 'text' : _b, value = _a.value, onChange = _a.onChange, id = _a.id, name = _a.name, rows = _a.rows, cols = _a.cols, minRows = _a.minRows, maxRows = _a.maxRows, inputRefProp = _a.inputRef, maxLength = _a.maxLength, disabled = _a.disabled, _c = _a.size, size = _c === void 0 ? helpers_1.textFieldPropSizeDefault : _c, _d = _a.view, view = _d === void 0 ? helpers_1.textFieldPropViewDefault : _d, _e = _a.form, form = _e === void 0 ? helpers_1.textFieldPropFormDefault : _e, state = _a.state, status = _a.status, _f = _a.width, width = _f === void 0 ? helpers_1.textFieldPropWidthDefault : _f, onBlur = _a.onBlur, onFocus = _a.onFocus, _g = _a.autoFocus, autoFocus = _g === void 0 ? false : _g, placeholder = _a.placeholder, leftSide = _a.leftSide, rightSide = _a.rightSide, autoComplete = _a.autoComplete, withClearButton = _a.withClearButton, max = _a.max, min = _a.min, readOnly = _a.readOnly, required = _a.required, _h = _a.step, step = _h === void 0 ? 1 : _h, tabIndex = _a.tabIndex, ariaLabel = _a.ariaLabel, label = _a.label, inputContainerRef = _a.inputContainerRef, _j = _a.labelPosition, labelPosition = _j === void 0 ? 'top' : _j, caption = _a.caption, iconSizeProp = _a.iconSize, focused = _a.focused, onClick = _a.onClick, otherProps = tslib_1.__rest(_a, ["className", "type", "value", "onChange", "id", "name", "rows", "cols", "minRows", "maxRows", "inputRef", "maxLength", "disabled", "size", "view", "form", "state", "status", "width", "onBlur", "onFocus", "autoFocus", "placeholder", "leftSide", "rightSide", "autoComplete", "withClearButton", "max", "min", "readOnly", "required", "step", "tabIndex", "ariaLabel", "label", "inputContainerRef", "labelPosition", "caption", "iconSize", "focused", "onClick"]);
     var _k = tslib_1.__read(react_1.useState(autoFocus), 2), focus = _k[0], setFocus = _k[1];
     var textarea = type === 'textarea';
     var LeftIcon = leftSide;
@@ -116,7 +116,7 @@ function TextFieldRender(props, ref) {
     return (react_1["default"].createElement("div", tslib_1.__assign({ className: exports.cnTextField({ labelPosition: labelPosition, size: size, view: view, width: width }, [className]), ref: useForkRef_1.useForkRef([ref, textFieldRef]) }, rootProps, otherProps),
         label && (react_1["default"].createElement(FieldLabel_1.FieldLabel, { required: required, className: exports.cnTextField('Label', { labelPosition: labelPosition }), size: size }, label)),
         react_1["default"].createElement("div", { className: exports.cnTextField('Body') },
-            react_1["default"].createElement("div", { className: exports.cnTextField('InputContainer', {
+            react_1["default"].createElement("div", { ref: inputContainerRef, className: exports.cnTextField('InputContainer', {
                     view: view,
                     form: form,
                     status: status || state,

package/__internal__/cjs-src/components/TextField/helpers.d.ts

@@ -74,6 +74,7 @@ export declare type TextFieldProps<TYPE extends string> = PropsWithHTMLAttribute
     required?: boolean;
     step?: number | string;
     tabIndex?: number;
+    inputContainerRef?: React.Ref<HTMLDivElement>;
     inputRef?: React.Ref<HTMLTextAreaElement | HTMLInputElement>;
     ariaLabel?: string;
     iconSize?: IconPropSize;

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

@@ -8,104 +8,6 @@
             box-shadow: var(--shadow-group);
   }
 
-  .MixCard_verticalSpace_xs,
-    .MixCard_verticalSpace_s,
-    .MixCard_verticalSpace_m,
-    .MixCard_verticalSpace_l,
-    .MixCard_verticalSpace_xl,
-    .MixCard_verticalSpace_2xl,
-    .MixCard_verticalSpace_3xl,
-    .MixCard_verticalSpace_4xl,
-    .MixCard_verticalSpace_5xl {
-      padding-top: var(--vertical-space);
-      padding-bottom: var(--vertical-space);
-    }
-
-  .MixCard_verticalSpace_xs {
-      --vertical-space: var(--space-xs);
-    }
-
-  .MixCard_verticalSpace_s {
-      --vertical-space: var(--space-s);
-    }
-
-  .MixCard_verticalSpace_m {
-      --vertical-space: var(--space-m);
-    }
-
-  .MixCard_verticalSpace_l {
-      --vertical-space: var(--space-l);
-    }
-
-  .MixCard_verticalSpace_xl {
-      --vertical-space: var(--space-xl);
-    }
-
-  .MixCard_verticalSpace_2xl {
-      --vertical-space: var(--space-2xl);
-    }
-
-  .MixCard_verticalSpace_3xl {
-      --vertical-space: var(--space-3xl);
-    }
-
-  .MixCard_verticalSpace_4xl {
-      --vertical-space: var(--space-4xl);
-    }
-
-  .MixCard_verticalSpace_5xl {
-      --vertical-space: var(--space-5xl);
-    }
-
-  .MixCard_horizontalSpace_xs,
-    .MixCard_horizontalSpace_s,
-    .MixCard_horizontalSpace_m,
-    .MixCard_horizontalSpace_l,
-    .MixCard_horizontalSpace_xl,
-    .MixCard_horizontalSpace_2xl,
-    .MixCard_horizontalSpace_3xl,
-    .MixCard_horizontalSpace_4xl,
-    .MixCard_horizontalSpace_5xl {
-      padding-right: var(--horizontal-space);
-      padding-left: var(--horizontal-space);
-    }
-
-  .MixCard_horizontalSpace_xs {
-      --horizontal-space: var(--space-xs);
-    }
-
-  .MixCard_horizontalSpace_s {
-      --horizontal-space: var(--space-s);
-    }
-
-  .MixCard_horizontalSpace_m {
-      --horizontal-space: var(--space-m);
-    }
-
-  .MixCard_horizontalSpace_l {
-      --horizontal-space: var(--space-l);
-    }
-
-  .MixCard_horizontalSpace_xl {
-      --horizontal-space: var(--space-xl);
-    }
-
-  .MixCard_horizontalSpace_2xl {
-      --horizontal-space: var(--space-2xl);
-    }
-
-  .MixCard_horizontalSpace_3xl {
-      --horizontal-space: var(--space-3xl);
-    }
-
-  .MixCard_horizontalSpace_4xl {
-      --horizontal-space: var(--space-4xl);
-    }
-
-  .MixCard_horizontalSpace_5xl {
-      --horizontal-space: var(--space-5xl);
-    }
-
   .MixCard_form_round,
     .MixCard_form_square {
       border-radius: var(--border-radius);

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

@@ -11,6 +11,6 @@ declare type Props = {
     form?: FormMap;
     status?: CardStatus;
 };
-declare type CnCard = (elemNameOrBlockMods?: Props | string | null, elemModsOrBlockMix?: Props | Array<string | undefined> | null, elemMix?: Array<string | undefined>) => string;
+declare type CnCard = (props: Props, classNames?: Array<string | undefined>) => string;
 export declare const cnMixCard: CnCard;
 export {};

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

@@ -1,8 +1,17 @@
 "use strict";
 exports.__esModule = true;
 exports.cnMixCard = void 0;
+var tslib_1 = require("tslib");
 require("./MixCard.css");
 var bem_1 = require("../../utils/bem");
+var MixSpace_1 = require("../MixSpace/MixSpace");
 var formMap = ['round', 'square'];
 var cardStatus = ['alert', 'success', 'warning'];
-exports.cnMixCard = bem_1.cn('MixCard');
+var cnCard = bem_1.cn('MixCard');
+exports.cnMixCard = function (props, classNames) {
+    if (classNames === void 0) { classNames = []; }
+    var verticalSpace = props.verticalSpace, horizontalSpace = props.horizontalSpace, otherProps = tslib_1.__rest(props, ["verticalSpace", "horizontalSpace"]);
+    return cnCard(tslib_1.__assign({}, otherProps), tslib_1.__spread([
+        MixSpace_1.cnMixSpace({ pV: verticalSpace, pH: horizontalSpace })
+    ], classNames));
+};

package/__internal__/src/components/BreadcrumbsCanary/Breadcrumbs.css

@@ -0,0 +1,75 @@
+.Breadcrumbs {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: var(--color-typo-secondary);
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+
+  .Breadcrumbs_size_xs {
+      --delimiter-space: var(--space-xs);
+      font-size: var(--control-text-size-xs);
+    }
+
+  .Breadcrumbs_size_s {
+      --delimiter-space: var(--space-s);
+      font-size: var(--control-text-size-s);
+    }
+
+  .Breadcrumbs_size_m {
+      --delimiter-space: var(--space-m);
+      font-size: var(--control-text-size-m);
+    }
+
+  .Breadcrumbs_size_l {
+      --delimiter-space: var(--space-l);
+      font-size: var(--control-text-size-l);
+    }
+
+  .Breadcrumbs-Item {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+  }
+
+  .Breadcrumbs-Link {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    color: var(--color-typo-secondary);
+    text-decoration: none;
+    -webkit-transition: color 0.2s;
+    transition: color 0.2s;
+  }
+
+  .Breadcrumbs-Link_active {
+      color: var(--color-typo-primary);
+      pointer-events: none;
+    }
+
+  .Breadcrumbs-Link:hover {
+      color: var(--color-typo-link-hover);
+    }
+
+  .Breadcrumbs-Icon {
+    margin-right: var(--space-xs);
+  }
+
+  .Breadcrumbs-Delimiter {
+    margin: 0 var(--delimiter-space);
+    color: var(--color-typo-ghost);
+  }
+
+  .Breadcrumbs-More {
+    color: var(--color-control-typo-clear);
+  }