@alfalab/core-components 44.3.0 → 44.4.0-beta.0

package/icon-button/esm/Component.js

@@ -3,26 +3,36 @@ import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { Button } from '../../button/esm';
 
-var defaultColors = {"primary":"icon-button__primary_1ffo3","secondary":"icon-button__secondary_1ffo3","transparent":"icon-button__transparent_1ffo3","negative":"icon-button__negative_1ffo3","tertiary":"icon-button__tertiary_1ffo3","component":"icon-button__component_1ffo3","loader":"icon-button__loader_1ffo3"};
+var defaultColors = {"primary":"icon-button__primary_44s3i","secondary":"icon-button__secondary_44s3i","transparent":"icon-button__transparent_44s3i","negative":"icon-button__negative_44s3i","tertiary":"icon-button__tertiary_44s3i","component":"icon-button__component_44s3i","loader":"icon-button__loader_44s3i"};
 require('./default.css');
 
-var styles = {"xxs":"icon-button__xxs_13qrr","xs":"icon-button__xs_13qrr","s":"icon-button__s_13qrr","iconWrapper":"icon-button__iconWrapper_13qrr","center":"icon-button__center_13qrr","left":"icon-button__left_13qrr","right":"icon-button__right_13qrr","icon":"icon-button__icon_13qrr"};
+var styles = {"size-24":"icon-button__size-24_q6lsd","size-32":"icon-button__size-32_q6lsd","size-40":"icon-button__size-40_q6lsd","size-48":"icon-button__size-48_q6lsd","size-56":"icon-button__size-56_q6lsd","iconWrapper":"icon-button__iconWrapper_q6lsd","center":"icon-button__center_q6lsd","left":"icon-button__left_q6lsd","right":"icon-button__right_q6lsd","icon":"icon-button__icon_q6lsd"};
 require('./index.css');
 
-var invertedColors = {"primary":"icon-button__primary_1r6pe","secondary":"icon-button__secondary_1r6pe","transparent":"icon-button__transparent_1r6pe","negative":"icon-button__negative_1r6pe","tertiary":"icon-button__tertiary_1r6pe","component":"icon-button__component_1r6pe","loader":"icon-button__loader_1r6pe"};
+var invertedColors = {"primary":"icon-button__primary_fvtdu","secondary":"icon-button__secondary_fvtdu","transparent":"icon-button__transparent_fvtdu","negative":"icon-button__negative_fvtdu","tertiary":"icon-button__tertiary_fvtdu","component":"icon-button__component_fvtdu","loader":"icon-button__loader_fvtdu"};
 require('./inverted.css');
 
 var colorStyles = {
     default: defaultColors,
     inverted: invertedColors,
 };
+var SIZE_TO_CLASSNAME_MAP = {
+    xxs: 'size-24',
+    xs: 'size-32',
+    s: 'size-48',
+    24: 'size-24',
+    32: 'size-32',
+    40: 'size-40',
+    48: 'size-48',
+    56: 'size-56',
+};
 var IconButton = forwardRef(function (_a, ref) {
     var _b;
-    var className = _a.className, Icon = _a.icon, _c = _a.view, view = _c === void 0 ? 'primary' : _c, _d = _a.size, size = _d === void 0 ? 's' : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, _f = _a.alignIcon, alignIcon = _f === void 0 ? 'center' : _f, restProps = __rest(_a, ["className", "icon", "view", "size", "colors", "alignIcon"]);
+    var className = _a.className, Icon = _a.icon, _c = _a.view, view = _c === void 0 ? 'primary' : _c, _d = _a.size, size = _d === void 0 ? 48 : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, _f = _a.alignIcon, alignIcon = _f === void 0 ? 'center' : _f, restProps = __rest(_a, ["className", "icon", "view", "size", "colors", "alignIcon"]);
     return (React.createElement(Button, __assign({}, restProps, { ref: ref, view: 'ghost', className: cn('cc-icon-button', className, colorStyles[colors][view], colorStyles[colors].component, (_b = {},
             _b[colorStyles[colors].loader] = restProps.loading,
             _b)), size: 's' }),
-        React.createElement("span", { className: cn(styles.iconWrapper, styles[size], styles[alignIcon]) }, React.isValidElement(Icon) ? (React.cloneElement(Icon, { className: cn(styles.icon, Icon.props.className) })) : (React.createElement(Icon, { className: styles.icon })))));
+        React.createElement("span", { className: cn(styles.iconWrapper, styles[SIZE_TO_CLASSNAME_MAP[size]], styles[alignIcon]) }, React.isValidElement(Icon) ? (React.cloneElement(Icon, { className: cn(styles.icon, Icon.props.className) })) : (React.createElement(Icon, { className: styles.icon })))));
 });
 
 export { IconButton };

package/icon-button/esm/default.css

@@ -1,4 +1,4 @@
-/* hash: ps3hx */
+/* hash: 1yl1l */
 :root {
 } /* deprecated */ :root {
     --color-light-neutral-1500: #0e0e0e;
@@ -59,50 +59,50 @@
     --icon-button-negative-hover-color: var(--color-light-status-negative-hover);
     --icon-button-negative-active-color: var(--color-light-status-negative-press);
     --icon-button-negative-disabled-color: var(--color-light-neutral-translucent-300);
-} .cc-icon-button.icon-button__primary_1ffo3 {
+} .cc-icon-button.icon-button__primary_44s3i {
         color: var(--icon-button-primary-base-color)
-    } .cc-icon-button.icon-button__primary_1ffo3:hover {
+    } .cc-icon-button.icon-button__primary_44s3i:hover {
             color: var(--icon-button-primary-hover-color);
-        } .cc-icon-button.icon-button__primary_1ffo3:active {
+        } .cc-icon-button.icon-button__primary_44s3i:active {
             color: var(--icon-button-primary-active-color);
-        } .cc-icon-button.icon-button__secondary_1ffo3 {
+        } .cc-icon-button.icon-button__secondary_44s3i {
         color: var(--icon-button-secondary-base-color)
-    } .cc-icon-button.icon-button__secondary_1ffo3:hover {
+    } .cc-icon-button.icon-button__secondary_44s3i:hover {
             color: var(--icon-button-secondary-hover-color);
-        } .cc-icon-button.icon-button__secondary_1ffo3:active {
+        } .cc-icon-button.icon-button__secondary_44s3i:active {
             color: var(--icon-button-secondary-active-color);
-        } .cc-icon-button.icon-button__transparent_1ffo3 {
+        } .cc-icon-button.icon-button__transparent_44s3i {
         color: var(--icon-button-transparent-base-color)
-    } .cc-icon-button.icon-button__transparent_1ffo3:hover {
+    } .cc-icon-button.icon-button__transparent_44s3i:hover {
             color: var(--icon-button-transparent-hover-color);
-        } .cc-icon-button.icon-button__transparent_1ffo3:active {
+        } .cc-icon-button.icon-button__transparent_44s3i:active {
             color: var(--icon-button-transparent-active-color);
-        } .cc-icon-button.icon-button__negative_1ffo3 {
+        } .cc-icon-button.icon-button__negative_44s3i {
         color: var(--icon-button-negative-base-color)
-    } .cc-icon-button.icon-button__negative_1ffo3:hover {
+    } .cc-icon-button.icon-button__negative_44s3i:hover {
             color: var(--icon-button-negative-hover-color);
-        } .cc-icon-button.icon-button__negative_1ffo3:active {
+        } .cc-icon-button.icon-button__negative_44s3i:active {
             color: var(--icon-button-negative-active-color);
-        } .cc-icon-button.icon-button__tertiary_1ffo3 {
+        } .cc-icon-button.icon-button__tertiary_44s3i {
         color: var(--icon-button-tertiary-base-color)
-    } .cc-icon-button.icon-button__tertiary_1ffo3:hover {
+    } .cc-icon-button.icon-button__tertiary_44s3i:hover {
             color: var(--icon-button-tertiary-hover-color);
-        } .cc-icon-button.icon-button__tertiary_1ffo3:active {
+        } .cc-icon-button.icon-button__tertiary_44s3i:active {
             color: var(--icon-button-tertiary-active-color);
-        } .cc-icon-button.icon-button__component_1ffo3:disabled.icon-button__primary_1ffo3 {
+        } .cc-icon-button.icon-button__component_44s3i:disabled.icon-button__primary_44s3i {
             color: var(--icon-button-primary-disabled-color)
-        } .cc-icon-button.icon-button__component_1ffo3:disabled.icon-button__primary_1ffo3.icon-button__loader_1ffo3 {
+        } .cc-icon-button.icon-button__component_44s3i:disabled.icon-button__primary_44s3i.icon-button__loader_44s3i {
                 color: var(--icon-button-primary-base-color);
-            } .cc-icon-button.icon-button__component_1ffo3:disabled.icon-button__secondary_1ffo3 {
+            } .cc-icon-button.icon-button__component_44s3i:disabled.icon-button__secondary_44s3i {
             color: var(--icon-button-secondary-disabled-color)
-        } .cc-icon-button.icon-button__component_1ffo3:disabled.icon-button__secondary_1ffo3.icon-button__loader_1ffo3 {
+        } .cc-icon-button.icon-button__component_44s3i:disabled.icon-button__secondary_44s3i.icon-button__loader_44s3i {
                 color: var(--icon-button-secondary-base-color);
-            } .cc-icon-button.icon-button__component_1ffo3:disabled.icon-button__negative_1ffo3 {
+            } .cc-icon-button.icon-button__component_44s3i:disabled.icon-button__negative_44s3i {
             color: var(--icon-button-negative-disabled-color)
-        } .cc-icon-button.icon-button__component_1ffo3:disabled.icon-button__negative_1ffo3.icon-button__loader_1ffo3 {
+        } .cc-icon-button.icon-button__component_44s3i:disabled.icon-button__negative_44s3i.icon-button__loader_44s3i {
                 color: var(--icon-button-negative-base-color);
-            } .cc-icon-button.icon-button__component_1ffo3:disabled.icon-button__tertiary_1ffo3 {
+            } .cc-icon-button.icon-button__component_44s3i:disabled.icon-button__tertiary_44s3i {
             color: var(--icon-button-tertiary-disabled-color)
-        } .cc-icon-button.icon-button__component_1ffo3:disabled.icon-button__tertiary_1ffo3.icon-button__loader_1ffo3 {
+        } .cc-icon-button.icon-button__component_44s3i:disabled.icon-button__tertiary_44s3i.icon-button__loader_44s3i {
                 color: var(--icon-button-tertiary-base-color);
             }

package/icon-button/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1g1xt */
+/* hash: 1pm4e */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -17,28 +17,36 @@
 } :root {
     --icon-button-xxs-size: 24px;
     --icon-button-xs-size: 32px;
+    --icon-button-40-size: 40px;
     --icon-button-s-size: 48px;
-} .icon-button__xxs_13qrr {
+    --icon-button-56-size: 56px;
+} .icon-button__size-24_q6lsd {
     width: var(--icon-button-xxs-size);
     height: var(--icon-button-xxs-size);
-} .icon-button__xs_13qrr {
+} .icon-button__size-32_q6lsd {
     width: var(--icon-button-xs-size);
     height: var(--icon-button-xs-size);
-} .icon-button__s_13qrr {
+} .icon-button__size-40_q6lsd {
+    width: var(--icon-button-40-size);
+    height: var(--icon-button-40-size);
+} .icon-button__size-48_q6lsd {
     width: var(--icon-button-s-size);
     height: var(--icon-button-s-size);
-} .icon-button__iconWrapper_13qrr {
+} .icon-button__size-56_q6lsd {
+    width: var(--icon-button-56-size);
+    height: var(--icon-button-56-size);
+} .icon-button__iconWrapper_q6lsd {
     display: flex;
     align-items: center
-} .icon-button__iconWrapper_13qrr.icon-button__center_13qrr {
+} .icon-button__iconWrapper_q6lsd.icon-button__center_q6lsd {
         justify-content: center;
-    } .icon-button__iconWrapper_13qrr.icon-button__left_13qrr {
+    } .icon-button__iconWrapper_q6lsd.icon-button__left_q6lsd {
         justify-content: left;
-    } .icon-button__iconWrapper_13qrr.icon-button__right_13qrr {
+    } .icon-button__iconWrapper_q6lsd.icon-button__right_q6lsd {
         justify-content: right;
-    } .icon-button__icon_13qrr {
+    } .icon-button__icon_q6lsd {
     max-width: 100%;
     max-height: 100%;
-} /* Для иконок с заливкой (icons-classic) */ .icon-button__icon_13qrr *[fill-rule] {
+} /* Для иконок с заливкой (icons-classic) */ .icon-button__icon_q6lsd *[fill-rule] {
     fill: currentColor;
 }

package/icon-button/esm/inverted.css

@@ -1,4 +1,4 @@
-/* hash: 1ftfm */
+/* hash: pl9o7 */
 :root {
 } /* deprecated */ :root {
     --color-light-neutral-1500-inverted: #fff;
@@ -74,50 +74,50 @@
     --icon-button-inverted-negative-disabled-color: var(
         --color-light-neutral-translucent-300-inverted
     );
-} .cc-icon-button.icon-button__primary_1r6pe {
+} .cc-icon-button.icon-button__primary_fvtdu {
         color: var(--icon-button-inverted-primary-base-color)
-    } .cc-icon-button.icon-button__primary_1r6pe:hover {
+    } .cc-icon-button.icon-button__primary_fvtdu:hover {
             color: var(--icon-button-inverted-primary-hover-color);
-        } .cc-icon-button.icon-button__primary_1r6pe:active {
+        } .cc-icon-button.icon-button__primary_fvtdu:active {
             color: var(--icon-button-inverted-primary-active-color);
-        } .cc-icon-button.icon-button__secondary_1r6pe {
+        } .cc-icon-button.icon-button__secondary_fvtdu {
         color: var(--icon-button-inverted-secondary-base-color)
-    } .cc-icon-button.icon-button__secondary_1r6pe:hover {
+    } .cc-icon-button.icon-button__secondary_fvtdu:hover {
             color: var(--icon-button-inverted-secondary-hover-color);
-        } .cc-icon-button.icon-button__secondary_1r6pe:active {
+        } .cc-icon-button.icon-button__secondary_fvtdu:active {
             color: var(--icon-button-inverted-secondary-active-color);
-        } .cc-icon-button.icon-button__transparent_1r6pe {
+        } .cc-icon-button.icon-button__transparent_fvtdu {
         color: var(--icon-button-inverted-transparent-base-color)
-    } .cc-icon-button.icon-button__transparent_1r6pe:hover {
+    } .cc-icon-button.icon-button__transparent_fvtdu:hover {
             color: var(--icon-button-inverted-transparent-hover-color);
-        } .cc-icon-button.icon-button__transparent_1r6pe:active {
+        } .cc-icon-button.icon-button__transparent_fvtdu:active {
             color: var(--icon-button-inverted-transparent-active-color);
-        } .cc-icon-button.icon-button__negative_1r6pe {
+        } .cc-icon-button.icon-button__negative_fvtdu {
         color: var(--icon-button-inverted-negative-base-color)
-    } .cc-icon-button.icon-button__negative_1r6pe:hover {
+    } .cc-icon-button.icon-button__negative_fvtdu:hover {
             color: var(--icon-button-inverted-negative-hover-color);
-        } .cc-icon-button.icon-button__negative_1r6pe:active {
+        } .cc-icon-button.icon-button__negative_fvtdu:active {
             color: var(--icon-button-inverted-negative-active-color);
-        } .cc-icon-button.icon-button__tertiary_1r6pe {
+        } .cc-icon-button.icon-button__tertiary_fvtdu {
         color: var(--icon-button-inverted-tertiary-base-color)
-    } .cc-icon-button.icon-button__tertiary_1r6pe:hover {
+    } .cc-icon-button.icon-button__tertiary_fvtdu:hover {
             color: var(--icon-button-inverted-tertiary-hover-color);
-        } .cc-icon-button.icon-button__tertiary_1r6pe:active {
+        } .cc-icon-button.icon-button__tertiary_fvtdu:active {
             color: var(--icon-button-inverted-tertiary-active-color);
-        } .cc-icon-button.icon-button__component_1r6pe:disabled.icon-button__primary_1r6pe {
+        } .cc-icon-button.icon-button__component_fvtdu:disabled.icon-button__primary_fvtdu {
             color: var(--icon-button-inverted-primary-disabled-color)
-        } .cc-icon-button.icon-button__component_1r6pe:disabled.icon-button__primary_1r6pe.icon-button__loader_1r6pe {
+        } .cc-icon-button.icon-button__component_fvtdu:disabled.icon-button__primary_fvtdu.icon-button__loader_fvtdu {
                 color: var(--icon-button-inverted-primary-base-color);
-            } .cc-icon-button.icon-button__component_1r6pe:disabled.icon-button__secondary_1r6pe {
+            } .cc-icon-button.icon-button__component_fvtdu:disabled.icon-button__secondary_fvtdu {
             color: var(--icon-button-inverted-secondary-disabled-color)
-        } .cc-icon-button.icon-button__component_1r6pe:disabled.icon-button__secondary_1r6pe.icon-button__loader_1r6pe {
+        } .cc-icon-button.icon-button__component_fvtdu:disabled.icon-button__secondary_fvtdu.icon-button__loader_fvtdu {
                 color: var(--icon-button-inverted-secondary-base-color);
-            } .cc-icon-button.icon-button__component_1r6pe:disabled.icon-button__negative_1r6pe {
+            } .cc-icon-button.icon-button__component_fvtdu:disabled.icon-button__negative_fvtdu {
             color: var(--icon-button-inverted-negative-disabled-color)
-        } .cc-icon-button.icon-button__component_1r6pe:disabled.icon-button__negative_1r6pe.icon-button__loader_1r6pe {
+        } .cc-icon-button.icon-button__component_fvtdu:disabled.icon-button__negative_fvtdu.icon-button__loader_fvtdu {
                 color: var(--icon-button-inverted-negative-base-color);
-            } .cc-icon-button.icon-button__component_1r6pe:disabled.icon-button__tertiary_1r6pe {
+            } .cc-icon-button.icon-button__component_fvtdu:disabled.icon-button__tertiary_fvtdu {
             color: var(--icon-button-inverted-tertiary-disabled-color)
-        } .cc-icon-button.icon-button__component_1r6pe:disabled.icon-button__tertiary_1r6pe.icon-button__loader_1r6pe {
+        } .cc-icon-button.icon-button__component_fvtdu:disabled.icon-button__tertiary_fvtdu.icon-button__loader_fvtdu {
                 color: var(--icon-button-inverted-tertiary-base-color);
             }

package/icon-button/index.css

@@ -1,4 +1,4 @@
-/* hash: 1g1xt */
+/* hash: 1pm4e */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -17,28 +17,36 @@
 } :root {
     --icon-button-xxs-size: 24px;
     --icon-button-xs-size: 32px;
+    --icon-button-40-size: 40px;
     --icon-button-s-size: 48px;
-} .icon-button__xxs_13qrr {
+    --icon-button-56-size: 56px;
+} .icon-button__size-24_q6lsd {
     width: var(--icon-button-xxs-size);
     height: var(--icon-button-xxs-size);
-} .icon-button__xs_13qrr {
+} .icon-button__size-32_q6lsd {
     width: var(--icon-button-xs-size);
     height: var(--icon-button-xs-size);
-} .icon-button__s_13qrr {
+} .icon-button__size-40_q6lsd {
+    width: var(--icon-button-40-size);
+    height: var(--icon-button-40-size);
+} .icon-button__size-48_q6lsd {
     width: var(--icon-button-s-size);
     height: var(--icon-button-s-size);
-} .icon-button__iconWrapper_13qrr {
+} .icon-button__size-56_q6lsd {
+    width: var(--icon-button-56-size);
+    height: var(--icon-button-56-size);
+} .icon-button__iconWrapper_q6lsd {
     display: flex;
     align-items: center
-} .icon-button__iconWrapper_13qrr.icon-button__center_13qrr {
+} .icon-button__iconWrapper_q6lsd.icon-button__center_q6lsd {
         justify-content: center;
-    } .icon-button__iconWrapper_13qrr.icon-button__left_13qrr {
+    } .icon-button__iconWrapper_q6lsd.icon-button__left_q6lsd {
         justify-content: left;
-    } .icon-button__iconWrapper_13qrr.icon-button__right_13qrr {
+    } .icon-button__iconWrapper_q6lsd.icon-button__right_q6lsd {
         justify-content: right;
-    } .icon-button__icon_13qrr {
+    } .icon-button__icon_q6lsd {
     max-width: 100%;
     max-height: 100%;
-} /* Для иконок с заливкой (icons-classic) */ .icon-button__icon_13qrr *[fill-rule] {
+} /* Для иконок с заливкой (icons-classic) */ .icon-button__icon_q6lsd *[fill-rule] {
     fill: currentColor;
 }

package/icon-button/inverted.css

@@ -1,4 +1,4 @@
-/* hash: 1ftfm */
+/* hash: pl9o7 */
 :root {
 } /* deprecated */ :root {
     --color-light-neutral-1500-inverted: #fff;
@@ -74,50 +74,50 @@
     --icon-button-inverted-negative-disabled-color: var(
         --color-light-neutral-translucent-300-inverted
     );
-} .cc-icon-button.icon-button__primary_1r6pe {
+} .cc-icon-button.icon-button__primary_fvtdu {
         color: var(--icon-button-inverted-primary-base-color)
-    } .cc-icon-button.icon-button__primary_1r6pe:hover {
+    } .cc-icon-button.icon-button__primary_fvtdu:hover {
             color: var(--icon-button-inverted-primary-hover-color);
-        } .cc-icon-button.icon-button__primary_1r6pe:active {
+        } .cc-icon-button.icon-button__primary_fvtdu:active {
             color: var(--icon-button-inverted-primary-active-color);
-        } .cc-icon-button.icon-button__secondary_1r6pe {
+        } .cc-icon-button.icon-button__secondary_fvtdu {
         color: var(--icon-button-inverted-secondary-base-color)
-    } .cc-icon-button.icon-button__secondary_1r6pe:hover {
+    } .cc-icon-button.icon-button__secondary_fvtdu:hover {
             color: var(--icon-button-inverted-secondary-hover-color);
-        } .cc-icon-button.icon-button__secondary_1r6pe:active {
+        } .cc-icon-button.icon-button__secondary_fvtdu:active {
             color: var(--icon-button-inverted-secondary-active-color);
-        } .cc-icon-button.icon-button__transparent_1r6pe {
+        } .cc-icon-button.icon-button__transparent_fvtdu {
         color: var(--icon-button-inverted-transparent-base-color)
-    } .cc-icon-button.icon-button__transparent_1r6pe:hover {
+    } .cc-icon-button.icon-button__transparent_fvtdu:hover {
             color: var(--icon-button-inverted-transparent-hover-color);
-        } .cc-icon-button.icon-button__transparent_1r6pe:active {
+        } .cc-icon-button.icon-button__transparent_fvtdu:active {
             color: var(--icon-button-inverted-transparent-active-color);
-        } .cc-icon-button.icon-button__negative_1r6pe {
+        } .cc-icon-button.icon-button__negative_fvtdu {
         color: var(--icon-button-inverted-negative-base-color)
-    } .cc-icon-button.icon-button__negative_1r6pe:hover {
+    } .cc-icon-button.icon-button__negative_fvtdu:hover {
             color: var(--icon-button-inverted-negative-hover-color);
-        } .cc-icon-button.icon-button__negative_1r6pe:active {
+        } .cc-icon-button.icon-button__negative_fvtdu:active {
             color: var(--icon-button-inverted-negative-active-color);
-        } .cc-icon-button.icon-button__tertiary_1r6pe {
+        } .cc-icon-button.icon-button__tertiary_fvtdu {
         color: var(--icon-button-inverted-tertiary-base-color)
-    } .cc-icon-button.icon-button__tertiary_1r6pe:hover {
+    } .cc-icon-button.icon-button__tertiary_fvtdu:hover {
             color: var(--icon-button-inverted-tertiary-hover-color);
-        } .cc-icon-button.icon-button__tertiary_1r6pe:active {
+        } .cc-icon-button.icon-button__tertiary_fvtdu:active {
             color: var(--icon-button-inverted-tertiary-active-color);
-        } .cc-icon-button.icon-button__component_1r6pe:disabled.icon-button__primary_1r6pe {
+        } .cc-icon-button.icon-button__component_fvtdu:disabled.icon-button__primary_fvtdu {
             color: var(--icon-button-inverted-primary-disabled-color)
-        } .cc-icon-button.icon-button__component_1r6pe:disabled.icon-button__primary_1r6pe.icon-button__loader_1r6pe {
+        } .cc-icon-button.icon-button__component_fvtdu:disabled.icon-button__primary_fvtdu.icon-button__loader_fvtdu {
                 color: var(--icon-button-inverted-primary-base-color);
-            } .cc-icon-button.icon-button__component_1r6pe:disabled.icon-button__secondary_1r6pe {
+            } .cc-icon-button.icon-button__component_fvtdu:disabled.icon-button__secondary_fvtdu {
             color: var(--icon-button-inverted-secondary-disabled-color)
-        } .cc-icon-button.icon-button__component_1r6pe:disabled.icon-button__secondary_1r6pe.icon-button__loader_1r6pe {
+        } .cc-icon-button.icon-button__component_fvtdu:disabled.icon-button__secondary_fvtdu.icon-button__loader_fvtdu {
                 color: var(--icon-button-inverted-secondary-base-color);
-            } .cc-icon-button.icon-button__component_1r6pe:disabled.icon-button__negative_1r6pe {
+            } .cc-icon-button.icon-button__component_fvtdu:disabled.icon-button__negative_fvtdu {
             color: var(--icon-button-inverted-negative-disabled-color)
-        } .cc-icon-button.icon-button__component_1r6pe:disabled.icon-button__negative_1r6pe.icon-button__loader_1r6pe {
+        } .cc-icon-button.icon-button__component_fvtdu:disabled.icon-button__negative_fvtdu.icon-button__loader_fvtdu {
                 color: var(--icon-button-inverted-negative-base-color);
-            } .cc-icon-button.icon-button__component_1r6pe:disabled.icon-button__tertiary_1r6pe {
+            } .cc-icon-button.icon-button__component_fvtdu:disabled.icon-button__tertiary_fvtdu {
             color: var(--icon-button-inverted-tertiary-disabled-color)
-        } .cc-icon-button.icon-button__component_1r6pe:disabled.icon-button__tertiary_1r6pe.icon-button__loader_1r6pe {
+        } .cc-icon-button.icon-button__component_fvtdu:disabled.icon-button__tertiary_fvtdu.icon-button__loader_fvtdu {
                 color: var(--icon-button-inverted-tertiary-base-color);
             }

package/icon-button/modern/Component.d.ts

@@ -15,8 +15,9 @@ type IconButtonProps = {
     view?: 'primary' | 'secondary' | 'transparent' | 'tertiary' | 'negative';
     /**
      * Размер компонента
+     * @description xxs, xs, s deprecated, используйте вместо них 24, 32, 40 соответственно
      */
-    size?: 'xxs' | 'xs' | 's';
+    size?: 'xxs' | 'xs' | 's' | 24 | 32 | 40 | 48 | 56;
     /**
      * Дополнительный класс
      */
@@ -48,8 +49,9 @@ declare const IconButton: React.ForwardRefExoticComponent<{
     view?: "primary" | "secondary" | "tertiary" | "negative" | "transparent" | undefined;
     /**
      * Размер компонента
+     * @description xxs, xs, s deprecated, используйте вместо них 24, 32, 40 соответственно
      */
-    size?: "s" | "xs" | "xxs" | undefined;
+    size?: "s" | "xs" | 24 | 48 | "xxs" | 32 | 40 | 56 | undefined;
     /**
      * Дополнительный класс
      */

package/icon-button/modern/Component.js

@@ -2,22 +2,32 @@ import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { Button } from '../../button/modern';
 
-const defaultColors = {"primary":"icon-button__primary_1ffo3","secondary":"icon-button__secondary_1ffo3","transparent":"icon-button__transparent_1ffo3","negative":"icon-button__negative_1ffo3","tertiary":"icon-button__tertiary_1ffo3","component":"icon-button__component_1ffo3","loader":"icon-button__loader_1ffo3"};
+const defaultColors = {"primary":"icon-button__primary_44s3i","secondary":"icon-button__secondary_44s3i","transparent":"icon-button__transparent_44s3i","negative":"icon-button__negative_44s3i","tertiary":"icon-button__tertiary_44s3i","component":"icon-button__component_44s3i","loader":"icon-button__loader_44s3i"};
 require('./default.css');
 
-const styles = {"xxs":"icon-button__xxs_13qrr","xs":"icon-button__xs_13qrr","s":"icon-button__s_13qrr","iconWrapper":"icon-button__iconWrapper_13qrr","center":"icon-button__center_13qrr","left":"icon-button__left_13qrr","right":"icon-button__right_13qrr","icon":"icon-button__icon_13qrr"};
+const styles = {"size-24":"icon-button__size-24_q6lsd","size-32":"icon-button__size-32_q6lsd","size-40":"icon-button__size-40_q6lsd","size-48":"icon-button__size-48_q6lsd","size-56":"icon-button__size-56_q6lsd","iconWrapper":"icon-button__iconWrapper_q6lsd","center":"icon-button__center_q6lsd","left":"icon-button__left_q6lsd","right":"icon-button__right_q6lsd","icon":"icon-button__icon_q6lsd"};
 require('./index.css');
 
-const invertedColors = {"primary":"icon-button__primary_1r6pe","secondary":"icon-button__secondary_1r6pe","transparent":"icon-button__transparent_1r6pe","negative":"icon-button__negative_1r6pe","tertiary":"icon-button__tertiary_1r6pe","component":"icon-button__component_1r6pe","loader":"icon-button__loader_1r6pe"};
+const invertedColors = {"primary":"icon-button__primary_fvtdu","secondary":"icon-button__secondary_fvtdu","transparent":"icon-button__transparent_fvtdu","negative":"icon-button__negative_fvtdu","tertiary":"icon-button__tertiary_fvtdu","component":"icon-button__component_fvtdu","loader":"icon-button__loader_fvtdu"};
 require('./inverted.css');
 
 const colorStyles = {
     default: defaultColors,
     inverted: invertedColors,
 };
-const IconButton = forwardRef(({ className, icon: Icon, view = 'primary', size = 's', colors = 'default', alignIcon = 'center', ...restProps }, ref) => (React.createElement(Button, { ...restProps, ref: ref, view: 'ghost', className: cn('cc-icon-button', className, colorStyles[colors][view], colorStyles[colors].component, {
+const SIZE_TO_CLASSNAME_MAP = {
+    xxs: 'size-24',
+    xs: 'size-32',
+    s: 'size-48',
+    24: 'size-24',
+    32: 'size-32',
+    40: 'size-40',
+    48: 'size-48',
+    56: 'size-56',
+};
+const IconButton = forwardRef(({ className, icon: Icon, view = 'primary', size = 48, colors = 'default', alignIcon = 'center', ...restProps }, ref) => (React.createElement(Button, { ...restProps, ref: ref, view: 'ghost', className: cn('cc-icon-button', className, colorStyles[colors][view], colorStyles[colors].component, {
         [colorStyles[colors].loader]: restProps.loading,
     }), size: 's' },
-    React.createElement("span", { className: cn(styles.iconWrapper, styles[size], styles[alignIcon]) }, React.isValidElement(Icon) ? (React.cloneElement(Icon, { className: cn(styles.icon, Icon.props.className) })) : (React.createElement(Icon, { className: styles.icon }))))));
+    React.createElement("span", { className: cn(styles.iconWrapper, styles[SIZE_TO_CLASSNAME_MAP[size]], styles[alignIcon]) }, React.isValidElement(Icon) ? (React.cloneElement(Icon, { className: cn(styles.icon, Icon.props.className) })) : (React.createElement(Icon, { className: styles.icon }))))));
 
 export { IconButton };

package/icon-button/modern/default.css

@@ -1,4 +1,4 @@
-/* hash: ps3hx */
+/* hash: 1yl1l */
 :root {
 } /* deprecated */ :root {
     --color-light-neutral-1500: #0e0e0e;
@@ -59,50 +59,50 @@
     --icon-button-negative-hover-color: var(--color-light-status-negative-hover);
     --icon-button-negative-active-color: var(--color-light-status-negative-press);
     --icon-button-negative-disabled-color: var(--color-light-neutral-translucent-300);
-} .cc-icon-button.icon-button__primary_1ffo3 {
+} .cc-icon-button.icon-button__primary_44s3i {
         color: var(--icon-button-primary-base-color)
-    } .cc-icon-button.icon-button__primary_1ffo3:hover {
+    } .cc-icon-button.icon-button__primary_44s3i:hover {
             color: var(--icon-button-primary-hover-color);
-        } .cc-icon-button.icon-button__primary_1ffo3:active {
+        } .cc-icon-button.icon-button__primary_44s3i:active {
             color: var(--icon-button-primary-active-color);
-        } .cc-icon-button.icon-button__secondary_1ffo3 {
+        } .cc-icon-button.icon-button__secondary_44s3i {
         color: var(--icon-button-secondary-base-color)
-    } .cc-icon-button.icon-button__secondary_1ffo3:hover {
+    } .cc-icon-button.icon-button__secondary_44s3i:hover {
             color: var(--icon-button-secondary-hover-color);
-        } .cc-icon-button.icon-button__secondary_1ffo3:active {
+        } .cc-icon-button.icon-button__secondary_44s3i:active {
             color: var(--icon-button-secondary-active-color);
-        } .cc-icon-button.icon-button__transparent_1ffo3 {
+        } .cc-icon-button.icon-button__transparent_44s3i {
         color: var(--icon-button-transparent-base-color)
-    } .cc-icon-button.icon-button__transparent_1ffo3:hover {
+    } .cc-icon-button.icon-button__transparent_44s3i:hover {
             color: var(--icon-button-transparent-hover-color);
-        } .cc-icon-button.icon-button__transparent_1ffo3:active {
+        } .cc-icon-button.icon-button__transparent_44s3i:active {
             color: var(--icon-button-transparent-active-color);
-        } .cc-icon-button.icon-button__negative_1ffo3 {
+        } .cc-icon-button.icon-button__negative_44s3i {
         color: var(--icon-button-negative-base-color)
-    } .cc-icon-button.icon-button__negative_1ffo3:hover {
+    } .cc-icon-button.icon-button__negative_44s3i:hover {
             color: var(--icon-button-negative-hover-color);
-        } .cc-icon-button.icon-button__negative_1ffo3:active {
+        } .cc-icon-button.icon-button__negative_44s3i:active {
             color: var(--icon-button-negative-active-color);
-        } .cc-icon-button.icon-button__tertiary_1ffo3 {
+        } .cc-icon-button.icon-button__tertiary_44s3i {
         color: var(--icon-button-tertiary-base-color)
-    } .cc-icon-button.icon-button__tertiary_1ffo3:hover {
+    } .cc-icon-button.icon-button__tertiary_44s3i:hover {
             color: var(--icon-button-tertiary-hover-color);
-        } .cc-icon-button.icon-button__tertiary_1ffo3:active {
+        } .cc-icon-button.icon-button__tertiary_44s3i:active {
             color: var(--icon-button-tertiary-active-color);
-        } .cc-icon-button.icon-button__component_1ffo3:disabled.icon-button__primary_1ffo3 {
+        } .cc-icon-button.icon-button__component_44s3i:disabled.icon-button__primary_44s3i {
             color: var(--icon-button-primary-disabled-color)
-        } .cc-icon-button.icon-button__component_1ffo3:disabled.icon-button__primary_1ffo3.icon-button__loader_1ffo3 {
+        } .cc-icon-button.icon-button__component_44s3i:disabled.icon-button__primary_44s3i.icon-button__loader_44s3i {
                 color: var(--icon-button-primary-base-color);
-            } .cc-icon-button.icon-button__component_1ffo3:disabled.icon-button__secondary_1ffo3 {
+            } .cc-icon-button.icon-button__component_44s3i:disabled.icon-button__secondary_44s3i {
             color: var(--icon-button-secondary-disabled-color)
-        } .cc-icon-button.icon-button__component_1ffo3:disabled.icon-button__secondary_1ffo3.icon-button__loader_1ffo3 {
+        } .cc-icon-button.icon-button__component_44s3i:disabled.icon-button__secondary_44s3i.icon-button__loader_44s3i {
                 color: var(--icon-button-secondary-base-color);
-            } .cc-icon-button.icon-button__component_1ffo3:disabled.icon-button__negative_1ffo3 {
+            } .cc-icon-button.icon-button__component_44s3i:disabled.icon-button__negative_44s3i {
             color: var(--icon-button-negative-disabled-color)
-        } .cc-icon-button.icon-button__component_1ffo3:disabled.icon-button__negative_1ffo3.icon-button__loader_1ffo3 {
+        } .cc-icon-button.icon-button__component_44s3i:disabled.icon-button__negative_44s3i.icon-button__loader_44s3i {
                 color: var(--icon-button-negative-base-color);
-            } .cc-icon-button.icon-button__component_1ffo3:disabled.icon-button__tertiary_1ffo3 {
+            } .cc-icon-button.icon-button__component_44s3i:disabled.icon-button__tertiary_44s3i {
             color: var(--icon-button-tertiary-disabled-color)
-        } .cc-icon-button.icon-button__component_1ffo3:disabled.icon-button__tertiary_1ffo3.icon-button__loader_1ffo3 {
+        } .cc-icon-button.icon-button__component_44s3i:disabled.icon-button__tertiary_44s3i.icon-button__loader_44s3i {
                 color: var(--icon-button-tertiary-base-color);
             }

package/icon-button/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1g1xt */
+/* hash: 1pm4e */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -17,28 +17,36 @@
 } :root {
     --icon-button-xxs-size: 24px;
     --icon-button-xs-size: 32px;
+    --icon-button-40-size: 40px;
     --icon-button-s-size: 48px;
-} .icon-button__xxs_13qrr {
+    --icon-button-56-size: 56px;
+} .icon-button__size-24_q6lsd {
     width: var(--icon-button-xxs-size);
     height: var(--icon-button-xxs-size);
-} .icon-button__xs_13qrr {
+} .icon-button__size-32_q6lsd {
     width: var(--icon-button-xs-size);
     height: var(--icon-button-xs-size);
-} .icon-button__s_13qrr {
+} .icon-button__size-40_q6lsd {
+    width: var(--icon-button-40-size);
+    height: var(--icon-button-40-size);
+} .icon-button__size-48_q6lsd {
     width: var(--icon-button-s-size);
     height: var(--icon-button-s-size);
-} .icon-button__iconWrapper_13qrr {
+} .icon-button__size-56_q6lsd {
+    width: var(--icon-button-56-size);
+    height: var(--icon-button-56-size);
+} .icon-button__iconWrapper_q6lsd {
     display: flex;
     align-items: center
-} .icon-button__iconWrapper_13qrr.icon-button__center_13qrr {
+} .icon-button__iconWrapper_q6lsd.icon-button__center_q6lsd {
         justify-content: center;
-    } .icon-button__iconWrapper_13qrr.icon-button__left_13qrr {
+    } .icon-button__iconWrapper_q6lsd.icon-button__left_q6lsd {
         justify-content: left;
-    } .icon-button__iconWrapper_13qrr.icon-button__right_13qrr {
+    } .icon-button__iconWrapper_q6lsd.icon-button__right_q6lsd {
         justify-content: right;
-    } .icon-button__icon_13qrr {
+    } .icon-button__icon_q6lsd {
     max-width: 100%;
     max-height: 100%;
-} /* Для иконок с заливкой (icons-classic) */ .icon-button__icon_13qrr *[fill-rule] {
+} /* Для иконок с заливкой (icons-classic) */ .icon-button__icon_q6lsd *[fill-rule] {
     fill: currentColor;
 }