@consta/uikit 3.12.1 → 3.13.0

package/ResponsesImageEmptyPockets/package.json

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

package/ResponsesImageNothingFound/package.json

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

package/ResponsesImageSuccess/package.json

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

package/ResponsesNothingFound/package.json

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

package/ResponsesSuccess/package.json

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

package/Select/package.json

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

package/Sidebar/package.json

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

package/Skeleton/package.json

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

package/SliderCanary/package.json

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

package/SnackBar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/SnackBar",
-  "version": "3.12.1",
+  "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.1",
+  "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.1",
+  "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.1",
+  "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.1",
+  "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.1",
+  "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.1",
+  "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.1",
+  "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.1",
+  "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.1",
+  "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.1",
+  "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.1",
+  "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.1",
+  "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.1",
+  "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.1",
+  "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.1",
+  "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.1",
+  "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/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/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 })));
 });