@alfalab/core-components 47.13.0-beta.1 → 47.14.0-beta.0

package/checkbox/Component.js

@@ -6,7 +6,7 @@ var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
 var coreComponentsShared = require('../shared');
 var hooks = require('@alfalab/hooks');
-var CheckmarkCompactMIcon = require('@alfalab/icons-glyph/CheckmarkCompactMIcon');
+var utils_getIcon = require('./utils/getIcon.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -14,7 +14,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"checkbox__component_kt05b","start":"checkbox__start_kt05b","center":"checkbox__center_kt05b","addons":"checkbox__addons_kt05b","block":"checkbox__block_kt05b","box":"checkbox__box_kt05b","checkedIcon":"checkbox__checkedIcon_kt05b","size-20":"checkbox__size-20_kt05b","disabled":"checkbox__disabled_kt05b","checked":"checkbox__checked_kt05b","indeterminate":"checkbox__indeterminate_kt05b","indeterminateLine":"checkbox__indeterminateLine_kt05b","label":"checkbox__label_kt05b","hint":"checkbox__hint_kt05b","focused":"checkbox__focused_kt05b","content":"checkbox__content_kt05b","errorMessage":"checkbox__errorMessage_kt05b"};
+var styles = {"component":"checkbox__component_kt05b","start":"checkbox__start_kt05b","center":"checkbox__center_kt05b","addons":"checkbox__addons_kt05b","block":"checkbox__block_kt05b","box":"checkbox__box_kt05b","size-20":"checkbox__size-20_kt05b","disabled":"checkbox__disabled_kt05b","checked":"checkbox__checked_kt05b","indeterminate":"checkbox__indeterminate_kt05b","indeterminateLine":"checkbox__indeterminateLine_kt05b","label":"checkbox__label_kt05b","hint":"checkbox__hint_kt05b","focused":"checkbox__focused_kt05b","content":"checkbox__content_kt05b","errorMessage":"checkbox__errorMessage_kt05b"};
 require('./index.css');
 
 var SIZE_TO_CLASSNAME_MAP = {
@@ -43,7 +43,7 @@ var Checkbox = React.forwardRef(function (_a, ref) {
             _b)), ref: mergeRefs__default.default([labelRef, ref, labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref]) }),
         !hiddenInput && (React__default.default.createElement("input", tslib.__assign({ type: 'checkbox', onChange: handleChange, disabled: disabled || inactive, checked: checked, "data-test-id": dataTestId, ref: inputRef }, restProps))),
         React__default.default.createElement("span", { className: cn__default.default(styles.box, boxClassName) },
-            checked && React__default.default.createElement(CheckmarkCompactMIcon.CheckmarkCompactMIcon, { className: styles.checkedIcon }),
+            checked && utils_getIcon.getIcon(size),
             indeterminate && !checked && React__default.default.createElement("span", { className: styles.indeterminateLine })),
         (label || hint || errorMessage) && (React__default.default.createElement("span", { className: cn__default.default(styles.content, contentClassName) },
             label && React__default.default.createElement("span", { className: styles.label }, label),

package/checkbox/cssm/Component.js

@@ -6,7 +6,7 @@ var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
 var coreComponentsShared = require('../../shared/cssm');
 var hooks = require('@alfalab/hooks');
-var CheckmarkCompactMIcon = require('@alfalab/icons-glyph/CheckmarkCompactMIcon');
+var utils_getIcon = require('./utils/getIcon.js');
 var styles = require('./index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -42,7 +42,7 @@ var Checkbox = React.forwardRef(function (_a, ref) {
             _b)), ref: mergeRefs__default.default([labelRef, ref, labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref]) }),
         !hiddenInput && (React__default.default.createElement("input", tslib.__assign({ type: 'checkbox', onChange: handleChange, disabled: disabled || inactive, checked: checked, "data-test-id": dataTestId, ref: inputRef }, restProps))),
         React__default.default.createElement("span", { className: cn__default.default(styles__default.default.box, boxClassName) },
-            checked && React__default.default.createElement(CheckmarkCompactMIcon.CheckmarkCompactMIcon, { className: styles__default.default.checkedIcon }),
+            checked && utils_getIcon.getIcon(size),
             indeterminate && !checked && React__default.default.createElement("span", { className: styles__default.default.indeterminateLine })),
         (label || hint || errorMessage) && (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.content, contentClassName) },
             label && React__default.default.createElement("span", { className: styles__default.default.label }, label),

package/checkbox/cssm/icons/icon-check-20.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import React from 'react';
+declare const IconCheck20: () => React.JSX.Element;
+export { IconCheck20 };

package/checkbox/cssm/icons/icon-check-20.js

@@ -0,0 +1,12 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var IconCheck20 = function () { return (React__default.default.createElement("svg", { width: '10', height: '8', fill: 'currentColor', xmlns: 'http://www.w3.org/2000/svg' },
+    React__default.default.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M10 1.5 3.5 8 0 4.5 1.5 3l2 2 5-5L10 1.5Z', fillOpacity: '.94' }))); };
+
+exports.IconCheck20 = IconCheck20;

package/checkbox/cssm/icons/icon-check-24.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import React from 'react';
+declare const IconCheck24: () => React.JSX.Element;
+export { IconCheck24 };

package/checkbox/cssm/icons/icon-check-24.js

@@ -0,0 +1,12 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var IconCheck24 = function () { return (React__default.default.createElement("svg", { width: '10', height: '8', fill: 'currentColor', xmlns: 'http://www.w3.org/2000/svg' },
+    React__default.default.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M10 1.5 3.5 8 0 4.5 1.5 3l2 2 5-5L10 1.5Z', fillOpacity: '.94' }))); };
+
+exports.IconCheck24 = IconCheck24;

package/checkbox/cssm/index.module.css

@@ -103,14 +103,12 @@
     border-radius: var(--border-radius-s);
     transition: background-color 0.2s ease, border-color 0.2s ease;
     box-sizing: border-box;
-    overflow: hidden;
-} .checkedIcon {
-    position: absolute;
-    color: var(--checkbox-icon-color);
-} .size-20 .box {
+    overflow: hidden
+} .box svg {
+        color: var(--checkbox-icon-color);
+    } .size-20 .box {
     width: 16px;
     height: 16px;
-    margin: var(--gap-2xs) var(--gap-3xs);
 } .component:hover:not(.disabled) .box {
     background-color: var(--checkbox-hover-bg-color);
     border-color: var(--checkbox-hover-border-color);
@@ -143,7 +141,7 @@
 } .disabled.checked .box {
     background-color: var(--checkbox-checked-disabled-bg-color);
     border-color: var(--checkbox-checked-disabled-border-color)
-} .disabled.checked .box .checkedIcon {
+} .disabled.checked .box svg {
         color: var(--checkbox-icon-disabled-color);
     } .disabled.indeterminate .box {
     background-color: var(--checkbox-checked-disabled-bg-color);
@@ -161,8 +159,12 @@
     flex-grow: 1;
     margin-left: var(--gap-s);
 } .size-20 .content {
-    margin-left: var(--gap-xs);
-} .label {
+    margin-left: var(--gap-xs)
+} .size-20 .content .label {
+        font-size: 16px;
+        line-height: 20px;
+        font-weight: 400;
+    } .label {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -174,10 +176,11 @@
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
+    display: block;
     color: var(--checkbox-error-color);
 } .hint {
     font-size: 14px;
-    line-height: 20px;
+    line-height: 18px;
     font-weight: 400;
     display: block;
     color: var(--checkbox-hint-color);

package/checkbox/cssm/utils/getIcon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import React from 'react';
+declare const getIcon: (size: 's' | 'm' | 20 | 24) => React.JSX.Element;
+export { getIcon };

package/checkbox/cssm/utils/getIcon.js

@@ -0,0 +1,25 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var coreComponentsShared = require('../../../shared/cssm');
+var icons_iconCheck20 = require('../icons/icon-check-20.js');
+var icons_iconCheck24 = require('../icons/icon-check-24.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var getIcon = function (size) {
+    switch (size) {
+        case 's':
+        case 20:
+            return React__default.default.createElement(icons_iconCheck20.IconCheck20, null);
+        case 'm':
+        case 24:
+            return React__default.default.createElement(icons_iconCheck24.IconCheck24, null);
+        default:
+            return coreComponentsShared.exhaustiveCheck(size);
+    }
+};
+
+exports.getIcon = getIcon;

package/checkbox/esm/Component.js

@@ -4,9 +4,11 @@ import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import { dom } from '../../shared/esm';
 import { useFocus } from '@alfalab/hooks';
-import { CheckmarkCompactMIcon } from '@alfalab/icons-glyph/CheckmarkCompactMIcon';
+import { getIcon } from './utils/getIcon.js';
+import './icons/icon-check-20.js';
+import './icons/icon-check-24.js';
 
-var styles = {"component":"checkbox__component_kt05b","start":"checkbox__start_kt05b","center":"checkbox__center_kt05b","addons":"checkbox__addons_kt05b","block":"checkbox__block_kt05b","box":"checkbox__box_kt05b","checkedIcon":"checkbox__checkedIcon_kt05b","size-20":"checkbox__size-20_kt05b","disabled":"checkbox__disabled_kt05b","checked":"checkbox__checked_kt05b","indeterminate":"checkbox__indeterminate_kt05b","indeterminateLine":"checkbox__indeterminateLine_kt05b","label":"checkbox__label_kt05b","hint":"checkbox__hint_kt05b","focused":"checkbox__focused_kt05b","content":"checkbox__content_kt05b","errorMessage":"checkbox__errorMessage_kt05b"};
+var styles = {"component":"checkbox__component_kt05b","start":"checkbox__start_kt05b","center":"checkbox__center_kt05b","addons":"checkbox__addons_kt05b","block":"checkbox__block_kt05b","box":"checkbox__box_kt05b","size-20":"checkbox__size-20_kt05b","disabled":"checkbox__disabled_kt05b","checked":"checkbox__checked_kt05b","indeterminate":"checkbox__indeterminate_kt05b","indeterminateLine":"checkbox__indeterminateLine_kt05b","label":"checkbox__label_kt05b","hint":"checkbox__hint_kt05b","focused":"checkbox__focused_kt05b","content":"checkbox__content_kt05b","errorMessage":"checkbox__errorMessage_kt05b"};
 require('./index.css');
 
 var SIZE_TO_CLASSNAME_MAP = {
@@ -35,7 +37,7 @@ var Checkbox = forwardRef(function (_a, ref) {
             _b)), ref: mergeRefs([labelRef, ref, labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref]) }),
         !hiddenInput && (React.createElement("input", __assign({ type: 'checkbox', onChange: handleChange, disabled: disabled || inactive, checked: checked, "data-test-id": dataTestId, ref: inputRef }, restProps))),
         React.createElement("span", { className: cn(styles.box, boxClassName) },
-            checked && React.createElement(CheckmarkCompactMIcon, { className: styles.checkedIcon }),
+            checked && getIcon(size),
             indeterminate && !checked && React.createElement("span", { className: styles.indeterminateLine })),
         (label || hint || errorMessage) && (React.createElement("span", { className: cn(styles.content, contentClassName) },
             label && React.createElement("span", { className: styles.label }, label),

package/checkbox/esm/icons/icon-check-20.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import React from 'react';
+declare const IconCheck20: () => React.JSX.Element;
+export { IconCheck20 };

package/checkbox/esm/icons/icon-check-20.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+var IconCheck20 = function () { return (React.createElement("svg", { width: '10', height: '8', fill: 'currentColor', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M10 1.5 3.5 8 0 4.5 1.5 3l2 2 5-5L10 1.5Z', fillOpacity: '.94' }))); };
+
+export { IconCheck20 };

package/checkbox/esm/icons/icon-check-24.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import React from 'react';
+declare const IconCheck24: () => React.JSX.Element;
+export { IconCheck24 };

package/checkbox/esm/icons/icon-check-24.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+var IconCheck24 = function () { return (React.createElement("svg", { width: '10', height: '8', fill: 'currentColor', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M10 1.5 3.5 8 0 4.5 1.5 3l2 2 5-5L10 1.5Z', fillOpacity: '.94' }))); };
+
+export { IconCheck24 };

package/checkbox/esm/index.css

@@ -104,14 +104,12 @@
     border-radius: var(--border-radius-s);
     transition: background-color 0.2s ease, border-color 0.2s ease;
     box-sizing: border-box;
-    overflow: hidden;
-} .checkbox__checkedIcon_kt05b {
-    position: absolute;
-    color: var(--checkbox-icon-color);
-} .checkbox__size-20_kt05b .checkbox__box_kt05b {
+    overflow: hidden
+} .checkbox__box_kt05b svg {
+        color: var(--checkbox-icon-color);
+    } .checkbox__size-20_kt05b .checkbox__box_kt05b {
     width: 16px;
     height: 16px;
-    margin: var(--gap-2xs) var(--gap-3xs);
 } .checkbox__component_kt05b:hover:not(.checkbox__disabled_kt05b) .checkbox__box_kt05b {
     background-color: var(--checkbox-hover-bg-color);
     border-color: var(--checkbox-hover-border-color);
@@ -144,7 +142,7 @@
 } .checkbox__disabled_kt05b.checkbox__checked_kt05b .checkbox__box_kt05b {
     background-color: var(--checkbox-checked-disabled-bg-color);
     border-color: var(--checkbox-checked-disabled-border-color)
-} .checkbox__disabled_kt05b.checkbox__checked_kt05b .checkbox__box_kt05b .checkbox__checkedIcon_kt05b {
+} .checkbox__disabled_kt05b.checkbox__checked_kt05b .checkbox__box_kt05b svg {
         color: var(--checkbox-icon-disabled-color);
     } .checkbox__disabled_kt05b.checkbox__indeterminate_kt05b .checkbox__box_kt05b {
     background-color: var(--checkbox-checked-disabled-bg-color);
@@ -162,8 +160,12 @@
     flex-grow: 1;
     margin-left: var(--gap-s);
 } .checkbox__size-20_kt05b .checkbox__content_kt05b {
-    margin-left: var(--gap-xs);
-} .checkbox__label_kt05b {
+    margin-left: var(--gap-xs)
+} .checkbox__size-20_kt05b .checkbox__content_kt05b .checkbox__label_kt05b {
+        font-size: 16px;
+        line-height: 20px;
+        font-weight: 400;
+    } .checkbox__label_kt05b {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -175,10 +177,11 @@
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
+    display: block;
     color: var(--checkbox-error-color);
 } .checkbox__hint_kt05b {
     font-size: 14px;
-    line-height: 20px;
+    line-height: 18px;
     font-weight: 400;
     display: block;
     color: var(--checkbox-hint-color);

package/checkbox/esm/index.js

@@ -5,4 +5,6 @@ import 'react-merge-refs';
 import 'classnames';
 import '../../shared/esm';
 import '@alfalab/hooks';
-import '@alfalab/icons-glyph/CheckmarkCompactMIcon';
+import './utils/getIcon.js';
+import './icons/icon-check-20.js';
+import './icons/icon-check-24.js';

package/checkbox/esm/utils/getIcon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import React from 'react';
+declare const getIcon: (size: 's' | 'm' | 20 | 24) => React.JSX.Element;
+export { getIcon };

package/checkbox/esm/utils/getIcon.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { exhaustiveCheck } from '../../../shared/esm';
+import { IconCheck20 } from '../icons/icon-check-20.js';
+import { IconCheck24 } from '../icons/icon-check-24.js';
+
+var getIcon = function (size) {
+    switch (size) {
+        case 's':
+        case 20:
+            return React.createElement(IconCheck20, null);
+        case 'm':
+        case 24:
+            return React.createElement(IconCheck24, null);
+        default:
+            return exhaustiveCheck(size);
+    }
+};
+
+export { getIcon };

package/checkbox/icons/icon-check-20.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import React from 'react';
+declare const IconCheck20: () => React.JSX.Element;
+export { IconCheck20 };

package/checkbox/icons/icon-check-20.js

@@ -0,0 +1,12 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var IconCheck20 = function () { return (React__default.default.createElement("svg", { width: '10', height: '8', fill: 'currentColor', xmlns: 'http://www.w3.org/2000/svg' },
+    React__default.default.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M10 1.5 3.5 8 0 4.5 1.5 3l2 2 5-5L10 1.5Z', fillOpacity: '.94' }))); };
+
+exports.IconCheck20 = IconCheck20;

package/checkbox/icons/icon-check-24.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import React from 'react';
+declare const IconCheck24: () => React.JSX.Element;
+export { IconCheck24 };

package/checkbox/icons/icon-check-24.js

@@ -0,0 +1,12 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var IconCheck24 = function () { return (React__default.default.createElement("svg", { width: '10', height: '8', fill: 'currentColor', xmlns: 'http://www.w3.org/2000/svg' },
+    React__default.default.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M10 1.5 3.5 8 0 4.5 1.5 3l2 2 5-5L10 1.5Z', fillOpacity: '.94' }))); };
+
+exports.IconCheck24 = IconCheck24;

package/checkbox/index.css

@@ -104,14 +104,12 @@
     border-radius: var(--border-radius-s);
     transition: background-color 0.2s ease, border-color 0.2s ease;
     box-sizing: border-box;
-    overflow: hidden;
-} .checkbox__checkedIcon_kt05b {
-    position: absolute;
-    color: var(--checkbox-icon-color);
-} .checkbox__size-20_kt05b .checkbox__box_kt05b {
+    overflow: hidden
+} .checkbox__box_kt05b svg {
+        color: var(--checkbox-icon-color);
+    } .checkbox__size-20_kt05b .checkbox__box_kt05b {
     width: 16px;
     height: 16px;
-    margin: var(--gap-2xs) var(--gap-3xs);
 } .checkbox__component_kt05b:hover:not(.checkbox__disabled_kt05b) .checkbox__box_kt05b {
     background-color: var(--checkbox-hover-bg-color);
     border-color: var(--checkbox-hover-border-color);
@@ -144,7 +142,7 @@
 } .checkbox__disabled_kt05b.checkbox__checked_kt05b .checkbox__box_kt05b {
     background-color: var(--checkbox-checked-disabled-bg-color);
     border-color: var(--checkbox-checked-disabled-border-color)
-} .checkbox__disabled_kt05b.checkbox__checked_kt05b .checkbox__box_kt05b .checkbox__checkedIcon_kt05b {
+} .checkbox__disabled_kt05b.checkbox__checked_kt05b .checkbox__box_kt05b svg {
         color: var(--checkbox-icon-disabled-color);
     } .checkbox__disabled_kt05b.checkbox__indeterminate_kt05b .checkbox__box_kt05b {
     background-color: var(--checkbox-checked-disabled-bg-color);
@@ -162,8 +160,12 @@
     flex-grow: 1;
     margin-left: var(--gap-s);
 } .checkbox__size-20_kt05b .checkbox__content_kt05b {
-    margin-left: var(--gap-xs);
-} .checkbox__label_kt05b {
+    margin-left: var(--gap-xs)
+} .checkbox__size-20_kt05b .checkbox__content_kt05b .checkbox__label_kt05b {
+        font-size: 16px;
+        line-height: 20px;
+        font-weight: 400;
+    } .checkbox__label_kt05b {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -175,10 +177,11 @@
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
+    display: block;
     color: var(--checkbox-error-color);
 } .checkbox__hint_kt05b {
     font-size: 14px;
-    line-height: 20px;
+    line-height: 18px;
     font-weight: 400;
     display: block;
     color: var(--checkbox-hint-color);

package/checkbox/modern/Component.js

@@ -3,9 +3,11 @@ import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import { dom } from '../../shared/modern';
 import { useFocus } from '@alfalab/hooks';
-import { CheckmarkCompactMIcon } from '@alfalab/icons-glyph/CheckmarkCompactMIcon';
+import { getIcon } from './utils/getIcon.js';
+import './icons/icon-check-20.js';
+import './icons/icon-check-24.js';
 
-const styles = {"component":"checkbox__component_kt05b","start":"checkbox__start_kt05b","center":"checkbox__center_kt05b","addons":"checkbox__addons_kt05b","block":"checkbox__block_kt05b","box":"checkbox__box_kt05b","checkedIcon":"checkbox__checkedIcon_kt05b","size-20":"checkbox__size-20_kt05b","disabled":"checkbox__disabled_kt05b","checked":"checkbox__checked_kt05b","indeterminate":"checkbox__indeterminate_kt05b","indeterminateLine":"checkbox__indeterminateLine_kt05b","label":"checkbox__label_kt05b","hint":"checkbox__hint_kt05b","focused":"checkbox__focused_kt05b","content":"checkbox__content_kt05b","errorMessage":"checkbox__errorMessage_kt05b"};
+const styles = {"component":"checkbox__component_kt05b","start":"checkbox__start_kt05b","center":"checkbox__center_kt05b","addons":"checkbox__addons_kt05b","block":"checkbox__block_kt05b","box":"checkbox__box_kt05b","size-20":"checkbox__size-20_kt05b","disabled":"checkbox__disabled_kt05b","checked":"checkbox__checked_kt05b","indeterminate":"checkbox__indeterminate_kt05b","indeterminateLine":"checkbox__indeterminateLine_kt05b","label":"checkbox__label_kt05b","hint":"checkbox__hint_kt05b","focused":"checkbox__focused_kt05b","content":"checkbox__content_kt05b","errorMessage":"checkbox__errorMessage_kt05b"};
 require('./index.css');
 
 const SIZE_TO_CLASSNAME_MAP = {
@@ -32,7 +34,7 @@ const Checkbox = forwardRef(({ checked, label, hint, size = 20, boxClassName, co
         }), ref: mergeRefs([labelRef, ref, labelProps?.ref]) },
         !hiddenInput && (React.createElement("input", { type: 'checkbox', onChange: handleChange, disabled: disabled || inactive, checked: checked, "data-test-id": dataTestId, ref: inputRef, ...restProps })),
         React.createElement("span", { className: cn(styles.box, boxClassName) },
-            checked && React.createElement(CheckmarkCompactMIcon, { className: styles.checkedIcon }),
+            checked && getIcon(size),
             indeterminate && !checked && React.createElement("span", { className: styles.indeterminateLine })),
         (label || hint || errorMessage) && (React.createElement("span", { className: cn(styles.content, contentClassName) },
             label && React.createElement("span", { className: styles.label }, label),

package/checkbox/modern/icons/icon-check-20.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import React from 'react';
+declare const IconCheck20: () => React.JSX.Element;
+export { IconCheck20 };

package/checkbox/modern/icons/icon-check-20.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+const IconCheck20 = () => (React.createElement("svg", { width: '10', height: '8', fill: 'currentColor', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M10 1.5 3.5 8 0 4.5 1.5 3l2 2 5-5L10 1.5Z', fillOpacity: '.94' })));
+
+export { IconCheck20 };

package/checkbox/modern/icons/icon-check-24.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import React from 'react';
+declare const IconCheck24: () => React.JSX.Element;
+export { IconCheck24 };

package/checkbox/modern/icons/icon-check-24.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+const IconCheck24 = () => (React.createElement("svg", { width: '10', height: '8', fill: 'currentColor', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M10 1.5 3.5 8 0 4.5 1.5 3l2 2 5-5L10 1.5Z', fillOpacity: '.94' })));
+
+export { IconCheck24 };

package/checkbox/modern/index.css

@@ -104,14 +104,12 @@
     border-radius: var(--border-radius-s);
     transition: background-color 0.2s ease, border-color 0.2s ease;
     box-sizing: border-box;
-    overflow: hidden;
-} .checkbox__checkedIcon_kt05b {
-    position: absolute;
-    color: var(--checkbox-icon-color);
-} .checkbox__size-20_kt05b .checkbox__box_kt05b {
+    overflow: hidden
+} .checkbox__box_kt05b svg {
+        color: var(--checkbox-icon-color);
+    } .checkbox__size-20_kt05b .checkbox__box_kt05b {
     width: 16px;
     height: 16px;
-    margin: var(--gap-2xs) var(--gap-3xs);
 } .checkbox__component_kt05b:hover:not(.checkbox__disabled_kt05b) .checkbox__box_kt05b {
     background-color: var(--checkbox-hover-bg-color);
     border-color: var(--checkbox-hover-border-color);
@@ -144,7 +142,7 @@
 } .checkbox__disabled_kt05b.checkbox__checked_kt05b .checkbox__box_kt05b {
     background-color: var(--checkbox-checked-disabled-bg-color);
     border-color: var(--checkbox-checked-disabled-border-color)
-} .checkbox__disabled_kt05b.checkbox__checked_kt05b .checkbox__box_kt05b .checkbox__checkedIcon_kt05b {
+} .checkbox__disabled_kt05b.checkbox__checked_kt05b .checkbox__box_kt05b svg {
         color: var(--checkbox-icon-disabled-color);
     } .checkbox__disabled_kt05b.checkbox__indeterminate_kt05b .checkbox__box_kt05b {
     background-color: var(--checkbox-checked-disabled-bg-color);
@@ -162,8 +160,12 @@
     flex-grow: 1;
     margin-left: var(--gap-s);
 } .checkbox__size-20_kt05b .checkbox__content_kt05b {
-    margin-left: var(--gap-xs);
-} .checkbox__label_kt05b {
+    margin-left: var(--gap-xs)
+} .checkbox__size-20_kt05b .checkbox__content_kt05b .checkbox__label_kt05b {
+        font-size: 16px;
+        line-height: 20px;
+        font-weight: 400;
+    } .checkbox__label_kt05b {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -175,10 +177,11 @@
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
+    display: block;
     color: var(--checkbox-error-color);
 } .checkbox__hint_kt05b {
     font-size: 14px;
-    line-height: 20px;
+    line-height: 18px;
     font-weight: 400;
     display: block;
     color: var(--checkbox-hint-color);

package/checkbox/modern/index.js

@@ -4,4 +4,6 @@ import 'react-merge-refs';
 import 'classnames';
 import '../../shared/modern';
 import '@alfalab/hooks';
-import '@alfalab/icons-glyph/CheckmarkCompactMIcon';
+import './utils/getIcon.js';
+import './icons/icon-check-20.js';
+import './icons/icon-check-24.js';

package/checkbox/modern/utils/getIcon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import React from 'react';
+declare const getIcon: (size: 's' | 'm' | 20 | 24) => React.JSX.Element;
+export { getIcon };

package/checkbox/modern/utils/getIcon.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { exhaustiveCheck } from '../../../shared/modern';
+import { IconCheck20 } from '../icons/icon-check-20.js';
+import { IconCheck24 } from '../icons/icon-check-24.js';
+
+const getIcon = (size) => {
+    switch (size) {
+        case 's':
+        case 20:
+            return React.createElement(IconCheck20, null);
+        case 'm':
+        case 24:
+            return React.createElement(IconCheck24, null);
+        default:
+            return exhaustiveCheck(size);
+    }
+};
+
+export { getIcon };

package/checkbox/utils/getIcon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import React from 'react';
+declare const getIcon: (size: 's' | 'm' | 20 | 24) => React.JSX.Element;
+export { getIcon };

package/checkbox/utils/getIcon.js

@@ -0,0 +1,25 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var coreComponentsShared = require('../../shared');
+var icons_iconCheck20 = require('../icons/icon-check-20.js');
+var icons_iconCheck24 = require('../icons/icon-check-24.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var getIcon = function (size) {
+    switch (size) {
+        case 's':
+        case 20:
+            return React__default.default.createElement(icons_iconCheck20.IconCheck20, null);
+        case 'm':
+        case 24:
+            return React__default.default.createElement(icons_iconCheck24.IconCheck24, null);
+        default:
+            return coreComponentsShared.exhaustiveCheck(size);
+    }
+};
+
+exports.getIcon = getIcon;

package/confirmation/components/screens/initial/component.js

@@ -10,7 +10,7 @@ var coreComponentsTypography = require('../../../../typography');
 var hooks = require('@alfalab/hooks');
 var context = require('../../../context.js');
 var components_header_component = require('../../header/component.js');
-var components_screens_initial_countdownSection = require('../../../countdown-section-56ade321.js');
+var components_screens_initial_countdownSection = require('../../../countdown-section-89091815.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/confirmation/components/screens/initial/countdown-section.js

@@ -7,7 +7,7 @@ require('../../../../spinner');
 require('../../../../typography');
 require('../../../context.js');
 require('../../../utils.js');
-var components_screens_initial_countdownSection = require('../../../countdown-section-56ade321.js');
+var components_screens_initial_countdownSection = require('../../../countdown-section-89091815.js');
 
 
 

package/confirmation/esm/component.responsive.js

@@ -16,7 +16,7 @@ import '../../code-input/esm/mobile';
 import '../../link/esm';
 import '../../typography/esm';
 import './components/header/component.js';
-import './countdown-section-65279d9a.js';
+import './countdown-section-5abc2e57.js';
 import '../../button/esm';
 import '../../spinner/esm';
 import './components/screens/hint/component.js';