@alfalab/core-components 47.0.0-beta.0 → 47.0.0-beta.2

package/gallery/esm/components/image-viewer/component.js

@@ -10,7 +10,7 @@ import { ChevronForwardHeavyMIcon } from '@alfalab/icons-glyph/ChevronForwardHea
 import { GalleryContext } from '../../context.js';
 import { getImageAlt, getImageKey } from '../../utils/utils.js';
 import { TestIds } from '../../utils/constants.js';
-import { s as styles, S as Slide } from '../../slide-a8f6ccc1.js';
+import { s as styles, S as Slide } from '../../slide-cb44c8ba.js';
 import 'swiper/swiper.min.css';
 import '../../../../typography/esm';
 import './paths.js';

package/gallery/esm/components/image-viewer/index.js

@@ -11,7 +11,7 @@ import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
 import '../../context.js';
 import '../../utils/utils.js';
 import '../../utils/constants.js';
-import '../../slide-a8f6ccc1.js';
+import '../../slide-cb44c8ba.js';
 import '../../../../typography/esm';
 import './paths.js';
 import 'swiper/swiper.min.css';

package/gallery/esm/components/image-viewer/slide.js

@@ -1,7 +1,7 @@
 import 'react';
 import 'classnames';
 import '../../../../typography/esm';
-export { S as Slide } from '../../slide-a8f6ccc1.js';
+export { S as Slide } from '../../slide-cb44c8ba.js';
 import '../../utils/utils.js';
 import '../../utils/constants.js';
 import './paths.js';

package/gallery/esm/components/index.js

@@ -22,10 +22,10 @@ import 'swiper/react';
 import '@alfalab/hooks';
 import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
 import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
-import '../slide-a8f6ccc1.js';
+import '../slide-cb44c8ba.js';
 import './image-viewer/paths.js';
 import 'swiper/swiper.min.css';
 import './image-preview/paths.js';
 import './header-info-block/Component.js';
 import '../utils/split-filename.js';
-import '../buttons-eabdb51b.js';
+import '../buttons-fb317559.js';

package/gallery/esm/components/navigation-bar/Component.js

@@ -20,7 +20,7 @@ import 'swiper/react';
 import '@alfalab/hooks';
 import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
 import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
-import '../../slide-a8f6ccc1.js';
+import '../../slide-cb44c8ba.js';
 import '../image-viewer/paths.js';
 import 'swiper/swiper.min.css';
 import '../image-preview/paths.js';

package/gallery/esm/components/navigation-bar/index.js

@@ -21,7 +21,7 @@ import 'swiper/react';
 import '@alfalab/hooks';
 import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
 import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
-import '../../slide-a8f6ccc1.js';
+import '../../slide-cb44c8ba.js';
 import '../image-viewer/paths.js';
 import 'swiper/swiper.min.css';
 import '../image-preview/paths.js';

package/gallery/esm/index.js

@@ -23,10 +23,10 @@ import 'swiper/react';
 import '@alfalab/hooks';
 import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
 import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
-import './slide-a8f6ccc1.js';
+import './slide-cb44c8ba.js';
 import './components/image-viewer/paths.js';
 import 'swiper/swiper.min.css';
 import './components/image-preview/paths.js';
 import './components/header/Component.js';
 import './components/header-info-block/Component.js';
-import './buttons-eabdb51b.js';
+import './buttons-fb317559.js';

package/gallery/modern/Component.js

@@ -19,13 +19,13 @@ import '@alfalab/icons-glyph/PointerDownMIcon';
 import './components/image-preview/paths.js';
 import './components/header-info-block/Component.js';
 import './utils/split-filename.js';
-import './buttons-062ff167.js';
+import './buttons-0d4c9cc6.js';
 import 'element-closest';
 import 'swiper';
 import 'swiper/react';
 import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
 import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
-import './slide-b5566e19.js';
+import './slide-3771e01f.js';
 import './components/image-viewer/paths.js';
 import 'swiper/swiper.min.css';
 

package/gallery/modern/components/header/Component.js

@@ -3,7 +3,7 @@ import { GalleryContext } from '../../context.js';
 import { isSmallImage } from '../../utils/utils.js';
 import { TestIds } from '../../utils/constants.js';
 import { HeaderInfoBlock } from '../header-info-block/Component.js';
-import { s as styles, D as Download, E as Exit, a as ExitFullscreen, F as Fullscreen } from '../../buttons-062ff167.js';
+import { s as styles, D as Download, E as Exit, a as ExitFullscreen, F as Fullscreen } from '../../buttons-0d4c9cc6.js';
 import '../../../../typography/modern';
 import '../../utils/split-filename.js';
 import '../../../../icon-button/modern';

package/gallery/modern/components/header/buttons.js

@@ -5,4 +5,4 @@ import '@alfalab/icons-glyph/ArrowsInwardMIcon';
 import '@alfalab/icons-glyph/ArrowsOutwardMIcon';
 import '@alfalab/icons-glyph/CrossMIcon';
 import '@alfalab/icons-glyph/PointerDownMIcon';
-export { D as Download, E as Exit, a as ExitFullscreen, F as Fullscreen } from '../../buttons-062ff167.js';
+export { D as Download, E as Exit, a as ExitFullscreen, F as Fullscreen } from '../../buttons-0d4c9cc6.js';

package/gallery/modern/components/header/index.js

@@ -6,7 +6,7 @@ import '../../utils/constants.js';
 import '../header-info-block/Component.js';
 import '../../../../typography/modern';
 import '../../utils/split-filename.js';
-import '../../buttons-062ff167.js';
+import '../../buttons-0d4c9cc6.js';
 import '../../../../icon-button/modern';
 import '../../../../tooltip/modern/desktop';
 import '@alfalab/icons-glyph/ArrowsInwardMIcon';

package/gallery/modern/components/image-preview/Component.js

@@ -19,7 +19,7 @@ import 'swiper/react';
 import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
 import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
 import '../../utils/constants.js';
-import '../../slide-b5566e19.js';
+import '../../slide-3771e01f.js';
 import '../image-viewer/paths.js';
 import 'swiper/swiper.min.css';
 

package/gallery/modern/components/image-preview/index.js

@@ -19,7 +19,7 @@ import '@alfalab/hooks';
 import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
 import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
 import '../../utils/constants.js';
-import '../../slide-b5566e19.js';
+import '../../slide-3771e01f.js';
 import '../image-viewer/paths.js';
 import 'swiper/swiper.min.css';
 import './paths.js';

package/gallery/modern/components/image-viewer/component.js

@@ -9,7 +9,7 @@ import { ChevronForwardHeavyMIcon } from '@alfalab/icons-glyph/ChevronForwardHea
 import { GalleryContext } from '../../context.js';
 import { getImageAlt, getImageKey } from '../../utils/utils.js';
 import { TestIds } from '../../utils/constants.js';
-import { s as styles, S as Slide } from '../../slide-b5566e19.js';
+import { s as styles, S as Slide } from '../../slide-3771e01f.js';
 import 'swiper/swiper.min.css';
 import '../../../../typography/modern';
 import './paths.js';

package/gallery/modern/components/image-viewer/index.js

@@ -10,7 +10,7 @@ import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
 import '../../context.js';
 import '../../utils/utils.js';
 import '../../utils/constants.js';
-import '../../slide-b5566e19.js';
+import '../../slide-3771e01f.js';
 import '../../../../typography/modern';
 import './paths.js';
 import 'swiper/swiper.min.css';

package/gallery/modern/components/image-viewer/slide.js

@@ -1,7 +1,7 @@
 import 'react';
 import 'classnames';
 import '../../../../typography/modern';
-export { S as Slide } from '../../slide-b5566e19.js';
+export { S as Slide } from '../../slide-3771e01f.js';
 import '../../utils/utils.js';
 import '../../utils/constants.js';
 import './paths.js';

package/gallery/modern/components/index.js

@@ -21,10 +21,10 @@ import 'swiper/react';
 import '@alfalab/hooks';
 import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
 import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
-import '../slide-b5566e19.js';
+import '../slide-3771e01f.js';
 import './image-viewer/paths.js';
 import 'swiper/swiper.min.css';
 import './image-preview/paths.js';
 import './header-info-block/Component.js';
 import '../utils/split-filename.js';
-import '../buttons-062ff167.js';
+import '../buttons-0d4c9cc6.js';

package/gallery/modern/components/navigation-bar/Component.js

@@ -19,7 +19,7 @@ import 'swiper/react';
 import '@alfalab/hooks';
 import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
 import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
-import '../../slide-b5566e19.js';
+import '../../slide-3771e01f.js';
 import '../image-viewer/paths.js';
 import 'swiper/swiper.min.css';
 import '../image-preview/paths.js';

package/gallery/modern/components/navigation-bar/index.js

@@ -20,7 +20,7 @@ import 'swiper/react';
 import '@alfalab/hooks';
 import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
 import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
-import '../../slide-b5566e19.js';
+import '../../slide-3771e01f.js';
 import '../image-viewer/paths.js';
 import 'swiper/swiper.min.css';
 import '../image-preview/paths.js';

package/gallery/modern/index.js

@@ -22,10 +22,10 @@ import 'swiper/react';
 import '@alfalab/hooks';
 import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
 import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
-import './slide-b5566e19.js';
+import './slide-3771e01f.js';
 import './components/image-viewer/paths.js';
 import 'swiper/swiper.min.css';
 import './components/image-preview/paths.js';
 import './components/header/Component.js';
 import './components/header-info-block/Component.js';
-import './buttons-062ff167.js';
+import './buttons-0d4c9cc6.js';

package/gap/Component.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 import React from 'react';
-type Size = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | 0 | 1 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 64 | 72 | 96 | 128 | 256;
+type Size = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | 0 | 1 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 26 | 28 | 32 | 40 | 48 | 64 | 72 | 96 | 128 | 256;
 type GapProps = {
     /**
      * Размер отступа
      * @description 3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl deprecated,
-     * используйте 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 72, 96, 128, 256
+     * используйте 2, 4, 8, 12, 16, 20, 24, 26, 28, 32, 40, 48, 64, 72, 96, 128, 256
      */
     size: Size;
     /**

package/gap/Component.js

@@ -35,6 +35,8 @@ var SIZE_TO_CLASSNAME_MAP = {
     16: 'size-16',
     20: 'size-20',
     24: 'size-24',
+    26: 'size-26',
+    28: 'size-28',
     32: 'size-32',
     40: 'size-40',
     48: 'size-48',

package/gap/cssm/Component.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 import React from 'react';
-type Size = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | 0 | 1 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 64 | 72 | 96 | 128 | 256;
+type Size = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | 0 | 1 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 26 | 28 | 32 | 40 | 48 | 64 | 72 | 96 | 128 | 256;
 type GapProps = {
     /**
      * Размер отступа
      * @description 3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl deprecated,
-     * используйте 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 72, 96, 128, 256
+     * используйте 2, 4, 8, 12, 16, 20, 24, 26, 28, 32, 40, 48, 64, 72, 96, 128, 256
      */
     size: Size;
     /**

package/gap/cssm/Component.js

@@ -34,6 +34,8 @@ var SIZE_TO_CLASSNAME_MAP = {
     16: 'size-16',
     20: 'size-20',
     24: 'size-24',
+    26: 'size-26',
+    28: 'size-28',
     32: 'size-32',
     40: 'size-40',
     48: 'size-48',

package/gap/cssm/index.module.css

@@ -39,6 +39,10 @@
         height: 20px;
     } .vertical.gap[data-gap-size='size-24'] {
         height: 24px;
+    } .vertical.gap[data-gap-size='size-26'] {
+        height: 26px;
+    } .vertical.gap[data-gap-size='size-28'] {
+        height: 28px;
     } .vertical.gap[data-gap-size='size-32'] {
         height: 32px;
     } .vertical.gap[data-gap-size='size-40'] {
@@ -73,6 +77,10 @@
         width: 20px;
     } .horizontal.gap[data-gap-size='size-24'] {
         width: 24px;
+    } .horizontal.gap[data-gap-size='size-26'] {
+        width: 26px;
+    } .horizontal.gap[data-gap-size='size-28'] {
+        width: 28px;
     } .horizontal.gap[data-gap-size='size-32'] {
         width: 32px;
     } .horizontal.gap[data-gap-size='size-40'] {

package/gap/esm/Component.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 import React from 'react';
-type Size = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | 0 | 1 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 64 | 72 | 96 | 128 | 256;
+type Size = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | 0 | 1 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 26 | 28 | 32 | 40 | 48 | 64 | 72 | 96 | 128 | 256;
 type GapProps = {
     /**
      * Размер отступа
      * @description 3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl deprecated,
-     * используйте 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 72, 96, 128, 256
+     * используйте 2, 4, 8, 12, 16, 20, 24, 26, 28, 32, 40, 48, 64, 72, 96, 128, 256
      */
     size: Size;
     /**

package/gap/esm/Component.js

@@ -28,6 +28,8 @@ var SIZE_TO_CLASSNAME_MAP = {
     16: 'size-16',
     20: 'size-20',
     24: 'size-24',
+    26: 'size-26',
+    28: 'size-28',
     32: 'size-32',
     40: 'size-40',
     48: 'size-48',

package/gap/esm/index.css

@@ -40,6 +40,10 @@
         height: 20px;
     } .gap__vertical_1mppy.gap__gap_1mppy[data-gap-size='size-24'] {
         height: 24px;
+    } .gap__vertical_1mppy.gap__gap_1mppy[data-gap-size='size-26'] {
+        height: 26px;
+    } .gap__vertical_1mppy.gap__gap_1mppy[data-gap-size='size-28'] {
+        height: 28px;
     } .gap__vertical_1mppy.gap__gap_1mppy[data-gap-size='size-32'] {
         height: 32px;
     } .gap__vertical_1mppy.gap__gap_1mppy[data-gap-size='size-40'] {
@@ -74,6 +78,10 @@
         width: 20px;
     } .gap__horizontal_1mppy.gap__gap_1mppy[data-gap-size='size-24'] {
         width: 24px;
+    } .gap__horizontal_1mppy.gap__gap_1mppy[data-gap-size='size-26'] {
+        width: 26px;
+    } .gap__horizontal_1mppy.gap__gap_1mppy[data-gap-size='size-28'] {
+        width: 28px;
     } .gap__horizontal_1mppy.gap__gap_1mppy[data-gap-size='size-32'] {
         width: 32px;
     } .gap__horizontal_1mppy.gap__gap_1mppy[data-gap-size='size-40'] {

package/gap/index.css

@@ -40,6 +40,10 @@
         height: 20px;
     } .gap__vertical_1mppy.gap__gap_1mppy[data-gap-size='size-24'] {
         height: 24px;
+    } .gap__vertical_1mppy.gap__gap_1mppy[data-gap-size='size-26'] {
+        height: 26px;
+    } .gap__vertical_1mppy.gap__gap_1mppy[data-gap-size='size-28'] {
+        height: 28px;
     } .gap__vertical_1mppy.gap__gap_1mppy[data-gap-size='size-32'] {
         height: 32px;
     } .gap__vertical_1mppy.gap__gap_1mppy[data-gap-size='size-40'] {
@@ -74,6 +78,10 @@
         width: 20px;
     } .gap__horizontal_1mppy.gap__gap_1mppy[data-gap-size='size-24'] {
         width: 24px;
+    } .gap__horizontal_1mppy.gap__gap_1mppy[data-gap-size='size-26'] {
+        width: 26px;
+    } .gap__horizontal_1mppy.gap__gap_1mppy[data-gap-size='size-28'] {
+        width: 28px;
     } .gap__horizontal_1mppy.gap__gap_1mppy[data-gap-size='size-32'] {
         width: 32px;
     } .gap__horizontal_1mppy.gap__gap_1mppy[data-gap-size='size-40'] {

package/gap/modern/Component.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 import React from 'react';
-type Size = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | 0 | 1 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 64 | 72 | 96 | 128 | 256;
+type Size = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | 0 | 1 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 26 | 28 | 32 | 40 | 48 | 64 | 72 | 96 | 128 | 256;
 type GapProps = {
     /**
      * Размер отступа
      * @description 3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl deprecated,
-     * используйте 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 72, 96, 128, 256
+     * используйте 2, 4, 8, 12, 16, 20, 24, 26, 28, 32, 40, 48, 64, 72, 96, 128, 256
      */
     size: Size;
     /**

package/gap/modern/Component.js

@@ -28,6 +28,8 @@ const SIZE_TO_CLASSNAME_MAP = {
     16: 'size-16',
     20: 'size-20',
     24: 'size-24',
+    26: 'size-26',
+    28: 'size-28',
     32: 'size-32',
     40: 'size-40',
     48: 'size-48',

package/gap/modern/index.css

@@ -40,6 +40,10 @@
         height: 20px;
     } .gap__vertical_1mppy.gap__gap_1mppy[data-gap-size='size-24'] {
         height: 24px;
+    } .gap__vertical_1mppy.gap__gap_1mppy[data-gap-size='size-26'] {
+        height: 26px;
+    } .gap__vertical_1mppy.gap__gap_1mppy[data-gap-size='size-28'] {
+        height: 28px;
     } .gap__vertical_1mppy.gap__gap_1mppy[data-gap-size='size-32'] {
         height: 32px;
     } .gap__vertical_1mppy.gap__gap_1mppy[data-gap-size='size-40'] {
@@ -74,6 +78,10 @@
         width: 20px;
     } .gap__horizontal_1mppy.gap__gap_1mppy[data-gap-size='size-24'] {
         width: 24px;
+    } .gap__horizontal_1mppy.gap__gap_1mppy[data-gap-size='size-26'] {
+        width: 26px;
+    } .gap__horizontal_1mppy.gap__gap_1mppy[data-gap-size='size-28'] {
+        width: 28px;
     } .gap__horizontal_1mppy.gap__gap_1mppy[data-gap-size='size-32'] {
         width: 32px;
     } .gap__horizontal_1mppy.gap__gap_1mppy[data-gap-size='size-40'] {

package/icon-button/Component.d.ts

@@ -22,6 +22,11 @@ type IconButtonProps = {
      * Дополнительный класс
      */
     className?: string;
+    /**
+     * Включает прозрачный фон
+     * @default false
+     */
+    transparentBg?: boolean;
     /**
      * Выравнивание иконки
      * @default 'center'
@@ -56,6 +61,11 @@ declare const IconButton: React.ForwardRefExoticComponent<{
      * Дополнительный класс
      */
     className?: string | undefined;
+    /**
+     * Включает прозрачный фон
+     * @default false
+     */
+    transparentBg?: boolean | undefined;
     /**
      * Выравнивание иконки
      * @default 'center'

package/icon-button/Component.js

@@ -10,13 +10,13 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var defaultColors = {"primary":"icon-button__primary_4tbui","secondary":"icon-button__secondary_4tbui","transparent":"icon-button__transparent_4tbui","negative":"icon-button__negative_4tbui","tertiary":"icon-button__tertiary_4tbui","component":"icon-button__component_4tbui","loader":"icon-button__loader_4tbui"};
+var defaultColors = {"primary":"icon-button__primary_4tbui","secondary":"icon-button__secondary_4tbui","transparent":"icon-button__transparent_4tbui","negative":"icon-button__negative_4tbui","tertiary":"icon-button__tertiary_4tbui","transparentBg":"icon-button__transparentBg_4tbui","component":"icon-button__component_4tbui","loader":"icon-button__loader_4tbui"};
 require('./default.css');
 
 var styles = {"size-24":"icon-button__size-24_1s5jk","size-32":"icon-button__size-32_1s5jk","size-40":"icon-button__size-40_1s5jk","size-48":"icon-button__size-48_1s5jk","size-56":"icon-button__size-56_1s5jk","iconWrapper":"icon-button__iconWrapper_1s5jk","center":"icon-button__center_1s5jk","left":"icon-button__left_1s5jk","right":"icon-button__right_1s5jk","icon":"icon-button__icon_1s5jk"};
 require('./index.css');
 
-var invertedColors = {"primary":"icon-button__primary_gkd4v","secondary":"icon-button__secondary_gkd4v","transparent":"icon-button__transparent_gkd4v","negative":"icon-button__negative_gkd4v","tertiary":"icon-button__tertiary_gkd4v","component":"icon-button__component_gkd4v","loader":"icon-button__loader_gkd4v"};
+var invertedColors = {"primary":"icon-button__primary_gkd4v","secondary":"icon-button__secondary_gkd4v","transparent":"icon-button__transparent_gkd4v","negative":"icon-button__negative_gkd4v","tertiary":"icon-button__tertiary_gkd4v","transparentBg":"icon-button__transparentBg_gkd4v","component":"icon-button__component_gkd4v","loader":"icon-button__loader_gkd4v"};
 require('./inverted.css');
 
 var colorStyles = {
@@ -35,9 +35,10 @@ var SIZE_TO_CLASSNAME_MAP = {
 };
 var IconButton = React.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 ? 48 : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, _f = _a.alignIcon, alignIcon = _f === void 0 ? 'center' : _f, restProps = tslib.__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, _g = _a.transparentBg, transparentBg = _g === void 0 ? false : _g, restProps = tslib.__rest(_a, ["className", "icon", "view", "size", "colors", "alignIcon", "transparentBg"]);
     return (React__default.default.createElement(coreComponentsButton.Button, tslib.__assign({}, restProps, { ref: ref, view: 'text', className: cn__default.default('cc-icon-button', className, colorStyles[colors][view], colorStyles[colors].component, (_b = {},
             _b[colorStyles[colors].loader] = restProps.loading,
+            _b[colorStyles[colors].transparentBg] = transparentBg,
             _b)), size: 's' }),
         React__default.default.createElement("span", { className: cn__default.default(styles.iconWrapper, styles[SIZE_TO_CLASSNAME_MAP[size]], styles[alignIcon]) }, React__default.default.isValidElement(Icon) ? (React__default.default.cloneElement(Icon, { className: cn__default.default(styles.icon, Icon.props.className) })) : (React__default.default.createElement(Icon, { className: styles.icon })))));
 });

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

@@ -22,6 +22,11 @@ type IconButtonProps = {
      * Дополнительный класс
      */
     className?: string;
+    /**
+     * Включает прозрачный фон
+     * @default false
+     */
+    transparentBg?: boolean;
     /**
      * Выравнивание иконки
      * @default 'center'
@@ -56,6 +61,11 @@ declare const IconButton: React.ForwardRefExoticComponent<{
      * Дополнительный класс
      */
     className?: string | undefined;
+    /**
+     * Включает прозрачный фон
+     * @default false
+     */
+    transparentBg?: boolean | undefined;
     /**
      * Выравнивание иконки
      * @default 'center'

package/icon-button/cssm/Component.js

@@ -32,9 +32,10 @@ var SIZE_TO_CLASSNAME_MAP = {
 };
 var IconButton = React.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 ? 48 : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, _f = _a.alignIcon, alignIcon = _f === void 0 ? 'center' : _f, restProps = tslib.__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, _g = _a.transparentBg, transparentBg = _g === void 0 ? false : _g, restProps = tslib.__rest(_a, ["className", "icon", "view", "size", "colors", "alignIcon", "transparentBg"]);
     return (React__default.default.createElement(coreComponentsButton.Button, tslib.__assign({}, restProps, { ref: ref, view: 'text', className: cn__default.default('cc-icon-button', className, colorStyles[colors][view], colorStyles[colors].component, (_b = {},
             _b[colorStyles[colors].loader] = restProps.loading,
+            _b[colorStyles[colors].transparentBg] = transparentBg,
             _b)), size: 's' }),
         React__default.default.createElement("span", { className: cn__default.default(styles__default.default.iconWrapper, styles__default.default[SIZE_TO_CLASSNAME_MAP[size]], styles__default.default[alignIcon]) }, React__default.default.isValidElement(Icon) ? (React__default.default.cloneElement(Icon, { className: cn__default.default(styles__default.default.icon, Icon.props.className) })) : (React__default.default.createElement(Icon, { className: styles__default.default.icon })))));
 });

package/icon-button/cssm/default.module.css

@@ -12,7 +12,13 @@
     --color-light-neutral-translucent-700-press: rgba(1, 1, 12, 0.63);
     --color-light-status-negative: #ff4837;
     --color-light-status-negative-hover: #ec2d20;
-    --color-light-status-negative-press: #c7241f; /* 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 */
+    --color-light-status-negative-press: #c7241f;
+    --color-light-text-negative: #ec2d20;
+    --color-light-text-primary: rgba(3, 3, 6, 0.88);
+    --color-light-text-secondary: rgba(4, 4, 19, 0.55);
+    --color-light-text-tertiary: rgba(5, 8, 29, 0.38);
+    --color-light-transparent-default-hover: rgba(38, 55, 88, 0.06);
+    --color-light-transparent-default-press: rgba(30, 43, 68, 0.08); /* 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 */
     --color-light-graphic-primary-alpha-30: rgba(14, 14, 14, 0.3);
     --color-light-graphic-primary-alpha-40: rgba(14, 14, 14, 0.4);
     --color-light-graphic-primary-alpha-50: rgba(14, 14, 14, 0.5);
@@ -88,7 +94,31 @@
             color: var(--icon-button-tertiary-hover-color);
         } :global(.cc-icon-button).tertiary:active {
             color: var(--icon-button-tertiary-active-color);
-        } :global(.cc-icon-button).component:disabled.primary {
+        } :global(.cc-icon-button).transparentBg.primary {
+            color: var(--color-light-text-primary)
+        } :global(.cc-icon-button).transparentBg.primary:hover {
+                background: var(--color-light-transparent-default-hover);
+            } :global(.cc-icon-button).transparentBg.primary:active {
+                background: var(--color-light-transparent-default-press);
+            } :global(.cc-icon-button).transparentBg.secondary {
+            color: var(--color-light-text-secondary)
+        } :global(.cc-icon-button).transparentBg.secondary:hover {
+                background: var(--color-light-transparent-default-hover);
+            } :global(.cc-icon-button).transparentBg.secondary:active {
+                background: var(--color-light-transparent-default-press);
+            } :global(.cc-icon-button).transparentBg.negative {
+            color: var(--color-light-text-negative)
+        } :global(.cc-icon-button).transparentBg.negative:hover {
+                background: var(--color-light-transparent-default-hover);
+            } :global(.cc-icon-button).transparentBg.negative:active {
+                background: var(--color-light-transparent-default-press);
+            } :global(.cc-icon-button).transparentBg.tertiary {
+            color: var(--color-light-text-tertiary)
+        } :global(.cc-icon-button).transparentBg.tertiary:hover {
+                background: var(--color-light-transparent-default-hover);
+            } :global(.cc-icon-button).transparentBg.tertiary:active {
+                background: var(--color-light-transparent-default-press);
+            } :global(.cc-icon-button).component:disabled.primary {
             color: var(--icon-button-primary-disabled-color)
         } :global(.cc-icon-button).component:disabled.primary.loader {
                 color: var(--icon-button-primary-base-color);
@@ -104,4 +134,6 @@
             color: var(--icon-button-tertiary-disabled-color)
         } :global(.cc-icon-button).component:disabled.tertiary.loader {
                 color: var(--icon-button-tertiary-base-color);
-            }
+            } :global(.cc-icon-button).component:disabled.transparentBg {
+            background: transparent;
+        }