@alfalab/core-components 48.23.0-beta.0 → 48.23.0

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

@@ -7,7 +7,7 @@ var coreComponentsTypography = require('../../../typography');
 var context = require('../../context.js');
 var utils_utils = require('../../utils/utils.js');
 var utils_constants = require('../../utils/constants.js');
-var components_imageViewer_hooks = require('../../hooks-39acefec.js');
+var components_imageViewer_hooks = require('../../hooks-931c1aa3.js');
 var components_imageViewer_paths = require('./paths.js');
 var components_imageViewer_video_index = require('./video/index.js');
 

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var cn = require('classnames');
 var Hls = require('hls.js');
-var circle = require('@alfalab/core-components/icon-view/circle');
+var circle = require('../../../../icon-view/circle');
 var PlayCompactMIcon = require('@alfalab/icons-glyph/PlayCompactMIcon');
 var context = require('../../../context.js');
 var utils_constants = require('../../../utils/constants.js');

package/gallery/cssm/components/image-viewer/video/index.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var cn = require('classnames');
 var Hls = require('hls.js');
-var circle = require('@alfalab/core-components/icon-view/circle');
+var circle = require('../../../../../icon-view/cssm/circle');
 var PlayCompactMIcon = require('@alfalab/icons-glyph/PlayCompactMIcon');
 var context = require('../../../context.js');
 var utils_constants = require('../../../utils/constants.js');

package/gallery/esm/Component.js

@@ -11,7 +11,7 @@ import { ImageViewer } from './components/image-viewer/component.js';
 import { InfoBar } from './components/info-bar/Component.js';
 import { HeaderMobile } from './components/header-mobile/Component.js';
 import './utils/utils.js';
-import './hooks-62f2553f.js';
+import './hooks-37b45d6d.js';
 import 'element-closest';
 import './components/image-viewer/slide.js';
 import '../../spinner/esm';
@@ -20,7 +20,7 @@ import './utils/constants.js';
 import './components/image-viewer/paths.js';
 import './components/image-viewer/video/index.js';
 import 'hls.js';
-import '@alfalab/core-components/icon-view/circle';
+import '../../icon-view/esm/circle';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
 import './components/image-preview/Component.js';
 import './components/image-preview/paths.js';

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

@@ -9,7 +9,7 @@ import { ChevronForwardHeavyMIcon } from '@alfalab/icons-glyph/ChevronForwardHea
 import { GalleryContext } from '../../context.js';
 import { isVideo, getImageAlt, getImageKey } from '../../utils/utils.js';
 import { TestIds } from '../../utils/constants.js';
-import { u as useHandleImageViewer, s as styles } from '../../hooks-62f2553f.js';
+import { u as useHandleImageViewer, s as styles } from '../../hooks-37b45d6d.js';
 import { Slide } from './slide.js';
 import 'swiper/swiper.min.css';
 import 'element-closest';
@@ -18,7 +18,7 @@ import '../../../../typography/esm';
 import './paths.js';
 import './video/index.js';
 import 'hls.js';
-import '@alfalab/core-components/icon-view/circle';
+import '../../../../icon-view/esm/circle';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
 
 SwiperCore.use([EffectFade, A11y, Controller]);

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

@@ -1,4 +1,4 @@
 import 'react';
 import 'element-closest';
 import '../../context.js';
-export { u as useHandleImageViewer } from '../../hooks-62f2553f.js';
+export { u as useHandleImageViewer } from '../../hooks-37b45d6d.js';

package/gallery/esm/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 '../../hooks-62f2553f.js';
+import '../../hooks-37b45d6d.js';
 import 'element-closest';
 import './slide.js';
 import '../../../../spinner/esm';
@@ -18,6 +18,6 @@ import '../../../../typography/esm';
 import './paths.js';
 import './video/index.js';
 import 'hls.js';
-import '@alfalab/core-components/icon-view/circle';
+import '../../../../icon-view/esm/circle';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
 import 'swiper/swiper.min.css';

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

@@ -2,7 +2,7 @@ import React, { useContext, useRef } from 'react';
 import cn from 'classnames';
 import { GalleryContext } from '../../context.js';
 import { isVideo, getImageAlt } from '../../utils/utils.js';
-import { u as useHandleImageViewer, s as styles } from '../../hooks-62f2553f.js';
+import { u as useHandleImageViewer, s as styles } from '../../hooks-37b45d6d.js';
 import { Slide } from './slide.js';
 import 'element-closest';
 import '../../../../spinner/esm';
@@ -11,7 +11,7 @@ import '../../utils/constants.js';
 import './paths.js';
 import './video/index.js';
 import 'hls.js';
-import '@alfalab/core-components/icon-view/circle';
+import '../../../../icon-view/esm/circle';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
 
 var Single = function () {

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

@@ -5,12 +5,12 @@ import { Text } from '../../../../typography/esm';
 import { GalleryContext } from '../../context.js';
 import { isSmallImage, isVideo, getImageAlt } from '../../utils/utils.js';
 import { TestIds } from '../../utils/constants.js';
-import { u as useHandleImageViewer, s as styles } from '../../hooks-62f2553f.js';
+import { u as useHandleImageViewer, s as styles } from '../../hooks-37b45d6d.js';
 import { NoImagePaths } from './paths.js';
 import { Video } from './video/index.js';
 import 'element-closest';
 import 'hls.js';
-import '@alfalab/core-components/icon-view/circle';
+import '../../../../icon-view/esm/circle';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
 
 var SlideInner = function (_a) {

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

@@ -1,7 +1,7 @@
 import React, { useRef, useContext, useEffect } from 'react';
 import cn from 'classnames';
 import Hls from 'hls.js';
-import { Circle } from '@alfalab/core-components/icon-view/circle';
+import { Circle } from '../../../../../icon-view/esm/circle';
 import PlayCompactMIcon from '@alfalab/icons-glyph/PlayCompactMIcon';
 import { GalleryContext } from '../../../context.js';
 import { GALLERY_EVENTS } from '../../../utils/constants.js';

package/gallery/esm/components/index.js

@@ -31,12 +31,12 @@ import 'swiper';
 import 'swiper/react';
 import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
 import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
-import '../hooks-62f2553f.js';
+import '../hooks-37b45d6d.js';
 import 'element-closest';
 import './image-viewer/slide.js';
 import '../../../spinner/esm';
 import './image-viewer/paths.js';
 import './image-viewer/video/index.js';
 import 'hls.js';
-import '@alfalab/core-components/icon-view/circle';
+import '../../../icon-view/esm/circle';
 import 'swiper/swiper.min.css';

package/gallery/esm/index.js

@@ -7,7 +7,7 @@ import '../../mq/esm';
 import './components/image-viewer/single.js';
 import './context.js';
 import './utils/utils.js';
-import './hooks-62f2553f.js';
+import './hooks-37b45d6d.js';
 import 'element-closest';
 import './components/image-viewer/slide.js';
 import '../../spinner/esm';
@@ -15,7 +15,7 @@ import '../../typography/esm';
 import './components/image-viewer/paths.js';
 import './components/image-viewer/video/index.js';
 import 'hls.js';
-import '@alfalab/core-components/icon-view/circle';
+import '../../icon-view/esm/circle';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
 import './components/navigation-bar/Component.js';
 import './components/image-preview/Component.js';

package/gallery/modern/Component.js

@@ -11,7 +11,7 @@ import { ImageViewer } from './components/image-viewer/component.js';
 import { InfoBar } from './components/info-bar/Component.js';
 import { HeaderMobile } from './components/header-mobile/Component.js';
 import './utils/utils.js';
-import './hooks-b30860a1.js';
+import './hooks-4af7cd73.js';
 import 'element-closest';
 import './components/image-viewer/slide.js';
 import '../../spinner/modern';
@@ -20,7 +20,7 @@ import './utils/constants.js';
 import './components/image-viewer/paths.js';
 import './components/image-viewer/video/index.js';
 import 'hls.js';
-import '@alfalab/core-components/icon-view/circle';
+import '../../icon-view/modern/circle';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
 import './components/image-preview/Component.js';
 import './components/image-preview/paths.js';

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

@@ -8,7 +8,7 @@ import { ChevronForwardHeavyMIcon } from '@alfalab/icons-glyph/ChevronForwardHea
 import { GalleryContext } from '../../context.js';
 import { isVideo, getImageAlt, getImageKey } from '../../utils/utils.js';
 import { TestIds } from '../../utils/constants.js';
-import { u as useHandleImageViewer, s as styles } from '../../hooks-b30860a1.js';
+import { u as useHandleImageViewer, s as styles } from '../../hooks-4af7cd73.js';
 import { Slide } from './slide.js';
 import 'swiper/swiper.min.css';
 import 'element-closest';
@@ -17,7 +17,7 @@ import '../../../../typography/modern';
 import './paths.js';
 import './video/index.js';
 import 'hls.js';
-import '@alfalab/core-components/icon-view/circle';
+import '../../../../icon-view/modern/circle';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
 
 SwiperCore.use([EffectFade, A11y, Controller]);

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

@@ -1,4 +1,4 @@
 import 'react';
 import 'element-closest';
 import '../../context.js';
-export { u as useHandleImageViewer } from '../../hooks-b30860a1.js';
+export { u as useHandleImageViewer } from '../../hooks-4af7cd73.js';

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

@@ -9,7 +9,7 @@ import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
 import '../../context.js';
 import '../../utils/utils.js';
 import '../../utils/constants.js';
-import '../../hooks-b30860a1.js';
+import '../../hooks-4af7cd73.js';
 import 'element-closest';
 import './slide.js';
 import '../../../../spinner/modern';
@@ -17,6 +17,6 @@ import '../../../../typography/modern';
 import './paths.js';
 import './video/index.js';
 import 'hls.js';
-import '@alfalab/core-components/icon-view/circle';
+import '../../../../icon-view/modern/circle';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
 import 'swiper/swiper.min.css';

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

@@ -2,7 +2,7 @@ import React, { useContext, useRef } from 'react';
 import cn from 'classnames';
 import { GalleryContext } from '../../context.js';
 import { isVideo, getImageAlt } from '../../utils/utils.js';
-import { u as useHandleImageViewer, s as styles } from '../../hooks-b30860a1.js';
+import { u as useHandleImageViewer, s as styles } from '../../hooks-4af7cd73.js';
 import { Slide } from './slide.js';
 import 'element-closest';
 import '../../../../spinner/modern';
@@ -11,7 +11,7 @@ import '../../utils/constants.js';
 import './paths.js';
 import './video/index.js';
 import 'hls.js';
-import '@alfalab/core-components/icon-view/circle';
+import '../../../../icon-view/modern/circle';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
 
 const Single = () => {

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

@@ -5,12 +5,12 @@ import { Text } from '../../../../typography/modern';
 import { GalleryContext } from '../../context.js';
 import { isSmallImage, isVideo, getImageAlt } from '../../utils/utils.js';
 import { TestIds } from '../../utils/constants.js';
-import { u as useHandleImageViewer, s as styles } from '../../hooks-b30860a1.js';
+import { u as useHandleImageViewer, s as styles } from '../../hooks-4af7cd73.js';
 import { NoImagePaths } from './paths.js';
 import { Video } from './video/index.js';
 import 'element-closest';
 import 'hls.js';
-import '@alfalab/core-components/icon-view/circle';
+import '../../../../icon-view/modern/circle';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
 
 const SlideInner = ({ children, broken, loading, isVideoView }) => {

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

@@ -1,7 +1,7 @@
 import React, { useRef, useContext, useEffect } from 'react';
 import cn from 'classnames';
 import Hls from 'hls.js';
-import { Circle } from '@alfalab/core-components/icon-view/circle';
+import { Circle } from '../../../../../icon-view/modern/circle';
 import PlayCompactMIcon from '@alfalab/icons-glyph/PlayCompactMIcon';
 import { GalleryContext } from '../../../context.js';
 import { GALLERY_EVENTS } from '../../../utils/constants.js';

package/gallery/modern/components/index.js

@@ -30,12 +30,12 @@ import 'swiper';
 import 'swiper/react';
 import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
 import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
-import '../hooks-b30860a1.js';
+import '../hooks-4af7cd73.js';
 import 'element-closest';
 import './image-viewer/slide.js';
 import '../../../spinner/modern';
 import './image-viewer/paths.js';
 import './image-viewer/video/index.js';
 import 'hls.js';
-import '@alfalab/core-components/icon-view/circle';
+import '../../../icon-view/modern/circle';
 import 'swiper/swiper.min.css';

package/gallery/modern/index.js

@@ -7,7 +7,7 @@ import '../../mq/modern';
 import './components/image-viewer/single.js';
 import './context.js';
 import './utils/utils.js';
-import './hooks-b30860a1.js';
+import './hooks-4af7cd73.js';
 import 'element-closest';
 import './components/image-viewer/slide.js';
 import '../../spinner/modern';
@@ -15,7 +15,7 @@ import '../../typography/modern';
 import './components/image-viewer/paths.js';
 import './components/image-viewer/video/index.js';
 import 'hls.js';
-import '@alfalab/core-components/icon-view/circle';
+import '../../icon-view/modern/circle';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
 import './components/navigation-bar/Component.js';
 import './components/image-preview/Component.js';

package/gallery/moderncssm/Component.js

@@ -23,7 +23,7 @@ import './utils/constants.js';
 import './components/image-viewer/paths.js';
 import './components/image-viewer/video/index.js';
 import 'hls.js';
-import '@alfalab/core-components/icon-view/circle';
+import '../../icon-view/moderncssm/circle';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
 import './components/image-viewer/video/index.module.css';
 import './components/image-preview/Component.js';

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

@@ -18,7 +18,7 @@ import '../../../../typography/moderncssm';
 import './paths.js';
 import './video/index.js';
 import 'hls.js';
-import '@alfalab/core-components/icon-view/circle';
+import '../../../../icon-view/moderncssm/circle';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
 import './video/index.module.css';
 

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

@@ -18,7 +18,7 @@ import '../../../../typography/moderncssm';
 import './paths.js';
 import './video/index.js';
 import 'hls.js';
-import '@alfalab/core-components/icon-view/circle';
+import '../../../../icon-view/moderncssm/circle';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
 import './video/index.module.css';
 import 'swiper/swiper.min.css';

package/gallery/moderncssm/components/image-viewer/single.js

@@ -12,7 +12,7 @@ import '../../utils/constants.js';
 import './paths.js';
 import './video/index.js';
 import 'hls.js';
-import '@alfalab/core-components/icon-view/circle';
+import '../../../../icon-view/moderncssm/circle';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
 import './video/index.module.css';
 

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

@@ -11,7 +11,7 @@ import { Video } from './video/index.js';
 import styles from './index.module.css';
 import 'element-closest';
 import 'hls.js';
-import '@alfalab/core-components/icon-view/circle';
+import '../../../../icon-view/moderncssm/circle';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
 import './video/index.module.css';
 

package/gallery/moderncssm/components/image-viewer/video/index.js

@@ -1,7 +1,7 @@
 import React, { useRef, useContext, useEffect } from 'react';
 import cn from 'classnames';
 import Hls from 'hls.js';
-import { Circle } from '@alfalab/core-components/icon-view/circle';
+import { Circle } from '../../../../../icon-view/moderncssm/circle';
 import PlayCompactMIcon from '@alfalab/icons-glyph/PlayCompactMIcon';
 import { GalleryContext } from '../../../context.js';
 import { GALLERY_EVENTS } from '../../../utils/constants.js';

package/gallery/moderncssm/components/index.js

@@ -43,7 +43,7 @@ import '../../../spinner/moderncssm';
 import './image-viewer/paths.js';
 import './image-viewer/video/index.js';
 import 'hls.js';
-import '@alfalab/core-components/icon-view/circle';
+import '../../../icon-view/moderncssm/circle';
 import './image-viewer/video/index.module.css';
 import 'swiper/swiper.min.css';
 import './info-bar/index.module.css';

package/gallery/moderncssm/index.js

@@ -16,7 +16,7 @@ import '../../typography/moderncssm';
 import './components/image-viewer/paths.js';
 import './components/image-viewer/video/index.js';
 import 'hls.js';
-import '@alfalab/core-components/icon-view/circle';
+import '../../icon-view/moderncssm/circle';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
 import './components/image-viewer/video/index.module.css';
 import './components/navigation-bar/Component.js';

package/icon-view/components/base-shape/component.d.ts

@@ -11,6 +11,7 @@ type TMainSize = 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 128;
 type BaseShapeProps = {
     /**
      * Размер компонента
+     * @default 64
      */
     size?: TMainSize | number | {
         width: TMainSize | number;

package/icon-view/components/base-shape/component.js

@@ -14,10 +14,11 @@ var styles = {"componentWrapper":"icon-view__componentWrapper_qmvld","component"
 require('./index.css');
 
 var BaseShape = React.forwardRef(function (_a, ref) {
-    var _b = _a.size, size = _b === void 0 ? 64 : _b, _c = _a.border, border = _c === void 0 ? false : _c, backgroundColor = _a.backgroundColor, imageUrl = _a.imageUrl, Icon = _a.backgroundIcon, className = _a.className, shapeClassName = _a.shapeClassName, text = _a.text, children = _a.children, topAddons = _a.topAddons, bottomAddons = _a.bottomAddons, indicator = _a.indicator, pathsMap = _a.pathsMap, dataTestId = _a.dataTestId, mainSize = _a.mainSize, iconContainerClassName = _a.iconContainerClassName;
-    var _d = typeof size === 'object' ? [size.width, size.height] : [size, size], width = _d[0], height = _d[1];
+    var _b;
+    var _c = _a.size, size = _c === void 0 ? 64 : _c, _d = _a.border, border = _d === void 0 ? false : _d, backgroundColor = _a.backgroundColor, imageUrl = _a.imageUrl, Icon = _a.backgroundIcon, className = _a.className, shapeClassName = _a.shapeClassName, text = _a.text, children = _a.children, topAddons = _a.topAddons, bottomAddons = _a.bottomAddons, indicator = _a.indicator, pathsMap = _a.pathsMap, dataTestId = _a.dataTestId, mainSize = _a.mainSize, iconContainerClassName = _a.iconContainerClassName;
+    var _e = typeof size === 'object' ? [size.width, size.height] : [size, size], width = _e[0], height = _e[1];
     var imageLoadingState = hooks.useImageLoadingState({ src: imageUrl || '' });
-    var imagePatternId = hooks.useId();
+    var clipPathId = hooks.useId();
     var svgPatternId = hooks.useId();
     var hasTopAddons = Boolean(topAddons) && width > 32;
     var hasBottomAddons = Boolean(bottomAddons) && width > 32;
@@ -38,11 +39,10 @@ var BaseShape = React.forwardRef(function (_a, ref) {
                     }, d: shapeDPath }),
                 imageUrl && imageLoadingState !== 'error' && (React__default.default.createElement(React.Fragment, null,
                     React__default.default.createElement("defs", null,
-                        React__default.default.createElement("pattern", { id: imagePatternId, width: '100%', height: '100%' },
-                            React__default.default.createElement("image", { href: imageUrl, width: '100%', height: '100%', preserveAspectRatio: 'xMidYMid slice' }))),
-                    React__default.default.createElement("path", { style: {
-                            fill: "url(#".concat(imagePatternId, ")"),
-                        }, d: shapeDPath }))),
+                        React__default.default.createElement("clipPath", { id: clipPathId },
+                            React__default.default.createElement("path", { d: shapeDPath }))),
+                    React__default.default.createElement("image", { href: imageUrl, width: '100%', height: '100%', clipPath: "url(#".concat(clipPathId, ")"), preserveAspectRatio: 'xMidYMid slice' }),
+                    React__default.default.createElement("path", { d: shapeDPath, fill: 'none' }))),
                 Icon && (React__default.default.createElement(React.Fragment, null,
                     React__default.default.createElement("defs", null,
                         React__default.default.createElement("pattern", { id: svgPatternId, width: '100%', height: '100%' },
@@ -57,7 +57,7 @@ var BaseShape = React.forwardRef(function (_a, ref) {
                         }
                         : undefined, d: borderDPath }))),
             text && React__default.default.createElement("div", { className: styles.text }, text),
-            children && (React__default.default.createElement("div", { className: cn__default.default(styles.children, styles["childrenSize_".concat(mainSize)], iconContainerClassName) }, children))),
+            children && (React__default.default.createElement("div", { className: cn__default.default(styles.children, (_b = {}, _b[styles["childrenSize_".concat(mainSize)]] = mainSize, _b), iconContainerClassName) }, children))),
         hasTopAddons && (React__default.default.createElement("div", { className: cn__default.default(styles.addons, styles.topAddons) }, topAddons)),
         hasBottomAddons && (React__default.default.createElement("div", { className: cn__default.default(styles.addons, styles.bottomAddons) }, bottomAddons)),
         hasIndicator && !hasTopAddons && (React__default.default.createElement("div", { className: cn__default.default(styles.addons, styles.indicator) }, indicator))));

package/icon-view/cssm/components/base-shape/component.d.ts

@@ -11,6 +11,7 @@ type TMainSize = 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 128;
 type BaseShapeProps = {
     /**
      * Размер компонента
+     * @default 64
      */
     size?: TMainSize | number | {
         width: TMainSize | number;

package/icon-view/cssm/components/base-shape/component.js

@@ -13,10 +13,11 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var BaseShape = React.forwardRef(function (_a, ref) {
-    var _b = _a.size, size = _b === void 0 ? 64 : _b, _c = _a.border, border = _c === void 0 ? false : _c, backgroundColor = _a.backgroundColor, imageUrl = _a.imageUrl, Icon = _a.backgroundIcon, className = _a.className, shapeClassName = _a.shapeClassName, text = _a.text, children = _a.children, topAddons = _a.topAddons, bottomAddons = _a.bottomAddons, indicator = _a.indicator, pathsMap = _a.pathsMap, dataTestId = _a.dataTestId, mainSize = _a.mainSize, iconContainerClassName = _a.iconContainerClassName;
-    var _d = typeof size === 'object' ? [size.width, size.height] : [size, size], width = _d[0], height = _d[1];
+    var _b;
+    var _c = _a.size, size = _c === void 0 ? 64 : _c, _d = _a.border, border = _d === void 0 ? false : _d, backgroundColor = _a.backgroundColor, imageUrl = _a.imageUrl, Icon = _a.backgroundIcon, className = _a.className, shapeClassName = _a.shapeClassName, text = _a.text, children = _a.children, topAddons = _a.topAddons, bottomAddons = _a.bottomAddons, indicator = _a.indicator, pathsMap = _a.pathsMap, dataTestId = _a.dataTestId, mainSize = _a.mainSize, iconContainerClassName = _a.iconContainerClassName;
+    var _e = typeof size === 'object' ? [size.width, size.height] : [size, size], width = _e[0], height = _e[1];
     var imageLoadingState = hooks.useImageLoadingState({ src: imageUrl || '' });
-    var imagePatternId = hooks.useId();
+    var clipPathId = hooks.useId();
     var svgPatternId = hooks.useId();
     var hasTopAddons = Boolean(topAddons) && width > 32;
     var hasBottomAddons = Boolean(bottomAddons) && width > 32;
@@ -37,11 +38,10 @@ var BaseShape = React.forwardRef(function (_a, ref) {
                     }, d: shapeDPath }),
                 imageUrl && imageLoadingState !== 'error' && (React__default.default.createElement(React.Fragment, null,
                     React__default.default.createElement("defs", null,
-                        React__default.default.createElement("pattern", { id: imagePatternId, width: '100%', height: '100%' },
-                            React__default.default.createElement("image", { href: imageUrl, width: '100%', height: '100%', preserveAspectRatio: 'xMidYMid slice' }))),
-                    React__default.default.createElement("path", { style: {
-                            fill: "url(#".concat(imagePatternId, ")"),
-                        }, d: shapeDPath }))),
+                        React__default.default.createElement("clipPath", { id: clipPathId },
+                            React__default.default.createElement("path", { d: shapeDPath }))),
+                    React__default.default.createElement("image", { href: imageUrl, width: '100%', height: '100%', clipPath: "url(#".concat(clipPathId, ")"), preserveAspectRatio: 'xMidYMid slice' }),
+                    React__default.default.createElement("path", { d: shapeDPath, fill: 'none' }))),
                 Icon && (React__default.default.createElement(React.Fragment, null,
                     React__default.default.createElement("defs", null,
                         React__default.default.createElement("pattern", { id: svgPatternId, width: '100%', height: '100%' },
@@ -56,7 +56,7 @@ var BaseShape = React.forwardRef(function (_a, ref) {
                         }
                         : undefined, d: borderDPath }))),
             text && React__default.default.createElement("div", { className: styles__default.default.text }, text),
-            children && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.children, styles__default.default["childrenSize_".concat(mainSize)], iconContainerClassName) }, children))),
+            children && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.children, (_b = {}, _b[styles__default.default["childrenSize_".concat(mainSize)]] = mainSize, _b), iconContainerClassName) }, children))),
         hasTopAddons && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.addons, styles__default.default.topAddons) }, topAddons)),
         hasBottomAddons && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.addons, styles__default.default.bottomAddons) }, bottomAddons)),
         hasIndicator && !hasTopAddons && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.addons, styles__default.default.indicator) }, indicator))));

package/icon-view/esm/components/base-shape/component.d.ts

@@ -11,6 +11,7 @@ type TMainSize = 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 128;
 type BaseShapeProps = {
     /**
      * Размер компонента
+     * @default 64
      */
     size?: TMainSize | number | {
         width: TMainSize | number;

package/icon-view/esm/components/base-shape/component.js

@@ -7,10 +7,11 @@ var styles = {"componentWrapper":"icon-view__componentWrapper_qmvld","component"
 require('./index.css');
 
 var BaseShape = forwardRef(function (_a, ref) {
-    var _b = _a.size, size = _b === void 0 ? 64 : _b, _c = _a.border, border = _c === void 0 ? false : _c, backgroundColor = _a.backgroundColor, imageUrl = _a.imageUrl, Icon = _a.backgroundIcon, className = _a.className, shapeClassName = _a.shapeClassName, text = _a.text, children = _a.children, topAddons = _a.topAddons, bottomAddons = _a.bottomAddons, indicator = _a.indicator, pathsMap = _a.pathsMap, dataTestId = _a.dataTestId, mainSize = _a.mainSize, iconContainerClassName = _a.iconContainerClassName;
-    var _d = typeof size === 'object' ? [size.width, size.height] : [size, size], width = _d[0], height = _d[1];
+    var _b;
+    var _c = _a.size, size = _c === void 0 ? 64 : _c, _d = _a.border, border = _d === void 0 ? false : _d, backgroundColor = _a.backgroundColor, imageUrl = _a.imageUrl, Icon = _a.backgroundIcon, className = _a.className, shapeClassName = _a.shapeClassName, text = _a.text, children = _a.children, topAddons = _a.topAddons, bottomAddons = _a.bottomAddons, indicator = _a.indicator, pathsMap = _a.pathsMap, dataTestId = _a.dataTestId, mainSize = _a.mainSize, iconContainerClassName = _a.iconContainerClassName;
+    var _e = typeof size === 'object' ? [size.width, size.height] : [size, size], width = _e[0], height = _e[1];
     var imageLoadingState = useImageLoadingState({ src: imageUrl || '' });
-    var imagePatternId = useId();
+    var clipPathId = useId();
     var svgPatternId = useId();
     var hasTopAddons = Boolean(topAddons) && width > 32;
     var hasBottomAddons = Boolean(bottomAddons) && width > 32;
@@ -31,11 +32,10 @@ var BaseShape = forwardRef(function (_a, ref) {
                     }, d: shapeDPath }),
                 imageUrl && imageLoadingState !== 'error' && (React.createElement(Fragment, null,
                     React.createElement("defs", null,
-                        React.createElement("pattern", { id: imagePatternId, width: '100%', height: '100%' },
-                            React.createElement("image", { href: imageUrl, width: '100%', height: '100%', preserveAspectRatio: 'xMidYMid slice' }))),
-                    React.createElement("path", { style: {
-                            fill: "url(#".concat(imagePatternId, ")"),
-                        }, d: shapeDPath }))),
+                        React.createElement("clipPath", { id: clipPathId },
+                            React.createElement("path", { d: shapeDPath }))),
+                    React.createElement("image", { href: imageUrl, width: '100%', height: '100%', clipPath: "url(#".concat(clipPathId, ")"), preserveAspectRatio: 'xMidYMid slice' }),
+                    React.createElement("path", { d: shapeDPath, fill: 'none' }))),
                 Icon && (React.createElement(Fragment, null,
                     React.createElement("defs", null,
                         React.createElement("pattern", { id: svgPatternId, width: '100%', height: '100%' },
@@ -50,7 +50,7 @@ var BaseShape = forwardRef(function (_a, ref) {
                         }
                         : undefined, d: borderDPath }))),
             text && React.createElement("div", { className: styles.text }, text),
-            children && (React.createElement("div", { className: cn(styles.children, styles["childrenSize_".concat(mainSize)], iconContainerClassName) }, children))),
+            children && (React.createElement("div", { className: cn(styles.children, (_b = {}, _b[styles["childrenSize_".concat(mainSize)]] = mainSize, _b), iconContainerClassName) }, children))),
         hasTopAddons && (React.createElement("div", { className: cn(styles.addons, styles.topAddons) }, topAddons)),
         hasBottomAddons && (React.createElement("div", { className: cn(styles.addons, styles.bottomAddons) }, bottomAddons)),
         hasIndicator && !hasTopAddons && (React.createElement("div", { className: cn(styles.addons, styles.indicator) }, indicator))));

package/icon-view/modern/components/base-shape/component.d.ts

@@ -11,6 +11,7 @@ type TMainSize = 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 128;
 type BaseShapeProps = {
     /**
      * Размер компонента
+     * @default 64
      */
     size?: TMainSize | number | {
         width: TMainSize | number;

package/icon-view/modern/components/base-shape/component.js

@@ -9,7 +9,7 @@ require('./index.css');
 const BaseShape = forwardRef(({ size = 64, border = false, backgroundColor, imageUrl, backgroundIcon: Icon, className, shapeClassName, text, children, topAddons, bottomAddons, indicator, pathsMap, dataTestId, mainSize, iconContainerClassName, }, ref) => {
     const [width, height] = typeof size === 'object' ? [size.width, size.height] : [size, size];
     const imageLoadingState = useImageLoadingState({ src: imageUrl || '' });
-    const imagePatternId = useId();
+    const clipPathId = useId();
     const svgPatternId = useId();
     const hasTopAddons = Boolean(topAddons) && width > 32;
     const hasBottomAddons = Boolean(bottomAddons) && width > 32;
@@ -30,11 +30,10 @@ const BaseShape = forwardRef(({ size = 64, border = false, backgroundColor, imag
                     }, d: shapeDPath }),
                 imageUrl && imageLoadingState !== 'error' && (React.createElement(Fragment, null,
                     React.createElement("defs", null,
-                        React.createElement("pattern", { id: imagePatternId, width: '100%', height: '100%' },
-                            React.createElement("image", { href: imageUrl, width: '100%', height: '100%', preserveAspectRatio: 'xMidYMid slice' }))),
-                    React.createElement("path", { style: {
-                            fill: `url(#${imagePatternId})`,
-                        }, d: shapeDPath }))),
+                        React.createElement("clipPath", { id: clipPathId },
+                            React.createElement("path", { d: shapeDPath }))),
+                    React.createElement("image", { href: imageUrl, width: '100%', height: '100%', clipPath: `url(#${clipPathId})`, preserveAspectRatio: 'xMidYMid slice' }),
+                    React.createElement("path", { d: shapeDPath, fill: 'none' }))),
                 Icon && (React.createElement(Fragment, null,
                     React.createElement("defs", null,
                         React.createElement("pattern", { id: svgPatternId, width: '100%', height: '100%' },
@@ -49,7 +48,7 @@ const BaseShape = forwardRef(({ size = 64, border = false, backgroundColor, imag
                         }
                         : undefined, d: borderDPath }))),
             text && React.createElement("div", { className: styles.text }, text),
-            children && (React.createElement("div", { className: cn(styles.children, styles[`childrenSize_${mainSize}`], iconContainerClassName) }, children))),
+            children && (React.createElement("div", { className: cn(styles.children, { [styles[`childrenSize_${mainSize}`]]: mainSize }, iconContainerClassName) }, children))),
         hasTopAddons && (React.createElement("div", { className: cn(styles.addons, styles.topAddons) }, topAddons)),
         hasBottomAddons && (React.createElement("div", { className: cn(styles.addons, styles.bottomAddons) }, bottomAddons)),
         hasIndicator && !hasTopAddons && (React.createElement("div", { className: cn(styles.addons, styles.indicator) }, indicator))));