@alfalab/core-components 48.31.0 → 48.32.0

package/icon-button/modern/inverted.css

@@ -89,76 +89,76 @@
     --icon-button-inverted-negative-disabled-color: var(
         --color-light-neutral-translucent-300-inverted
     );
-} .cc-icon-button.icon-button__primary_1s3ut {
+} .cc-icon-button.icon-button__primary_1i83m {
         color: var(--icon-button-inverted-primary-base-color)
-    } .cc-icon-button.icon-button__primary_1s3ut:hover {
+    } .cc-icon-button.icon-button__primary_1i83m:hover {
             color: var(--icon-button-inverted-primary-hover-color);
-        } .cc-icon-button.icon-button__primary_1s3ut:active {
+        } .cc-icon-button.icon-button__primary_1i83m:active {
             color: var(--icon-button-inverted-primary-active-color);
-        } .cc-icon-button.icon-button__secondary_1s3ut {
+        } .cc-icon-button.icon-button__secondary_1i83m {
         color: var(--icon-button-inverted-secondary-base-color)
-    } .cc-icon-button.icon-button__secondary_1s3ut:hover {
+    } .cc-icon-button.icon-button__secondary_1i83m:hover {
             color: var(--icon-button-inverted-secondary-hover-color);
-        } .cc-icon-button.icon-button__secondary_1s3ut:active {
+        } .cc-icon-button.icon-button__secondary_1i83m:active {
             color: var(--icon-button-inverted-secondary-active-color);
-        } .cc-icon-button.icon-button__transparent_1s3ut {
+        } .cc-icon-button.icon-button__transparent_1i83m {
         color: var(--icon-button-inverted-transparent-base-color)
-    } .cc-icon-button.icon-button__transparent_1s3ut:hover {
+    } .cc-icon-button.icon-button__transparent_1i83m:hover {
             color: var(--icon-button-inverted-transparent-hover-color);
-        } .cc-icon-button.icon-button__transparent_1s3ut:active {
+        } .cc-icon-button.icon-button__transparent_1i83m:active {
             color: var(--icon-button-inverted-transparent-active-color);
-        } .cc-icon-button.icon-button__negative_1s3ut {
+        } .cc-icon-button.icon-button__negative_1i83m {
         color: var(--icon-button-inverted-negative-base-color)
-    } .cc-icon-button.icon-button__negative_1s3ut:hover {
+    } .cc-icon-button.icon-button__negative_1i83m:hover {
             color: var(--icon-button-inverted-negative-hover-color);
-        } .cc-icon-button.icon-button__negative_1s3ut:active {
+        } .cc-icon-button.icon-button__negative_1i83m:active {
             color: var(--icon-button-inverted-negative-active-color);
-        } .cc-icon-button.icon-button__tertiary_1s3ut {
+        } .cc-icon-button.icon-button__tertiary_1i83m {
         color: var(--icon-button-inverted-tertiary-base-color)
-    } .cc-icon-button.icon-button__tertiary_1s3ut:hover {
+    } .cc-icon-button.icon-button__tertiary_1i83m:hover {
             color: var(--icon-button-inverted-tertiary-hover-color);
-        } .cc-icon-button.icon-button__tertiary_1s3ut:active {
+        } .cc-icon-button.icon-button__tertiary_1i83m:active {
             color: var(--icon-button-inverted-tertiary-active-color);
-        } .cc-icon-button.icon-button__transparentBg_1s3ut.icon-button__primary_1s3ut {
+        } .cc-icon-button.icon-button__transparentBg_1i83m.icon-button__primary_1i83m {
             color: var(--color-light-text-primary-inverted)
-        } .cc-icon-button.icon-button__transparentBg_1s3ut.icon-button__primary_1s3ut:hover {
+        } .cc-icon-button.icon-button__transparentBg_1i83m.icon-button__primary_1i83m:hover {
                 background: var(--color-light-transparent-default-inverted-hover);
-            } .cc-icon-button.icon-button__transparentBg_1s3ut.icon-button__primary_1s3ut:active {
+            } .cc-icon-button.icon-button__transparentBg_1i83m.icon-button__primary_1i83m:active {
                 background: var(--color-light-transparent-default-inverted-press);
-            } .cc-icon-button.icon-button__transparentBg_1s3ut.icon-button__secondary_1s3ut {
+            } .cc-icon-button.icon-button__transparentBg_1i83m.icon-button__secondary_1i83m {
             color: var(--color-light-text-secondary-inverted)
-        } .cc-icon-button.icon-button__transparentBg_1s3ut.icon-button__secondary_1s3ut:hover {
+        } .cc-icon-button.icon-button__transparentBg_1i83m.icon-button__secondary_1i83m:hover {
                 background: var(--color-light-transparent-default-inverted-hover);
-            } .cc-icon-button.icon-button__transparentBg_1s3ut.icon-button__secondary_1s3ut:active {
+            } .cc-icon-button.icon-button__transparentBg_1i83m.icon-button__secondary_1i83m:active {
                 background: var(--color-light-transparent-default-inverted-press);
-            } .cc-icon-button.icon-button__transparentBg_1s3ut.icon-button__negative_1s3ut {
+            } .cc-icon-button.icon-button__transparentBg_1i83m.icon-button__negative_1i83m {
             color: var(--color-light-text-negative-inverted)
-        } .cc-icon-button.icon-button__transparentBg_1s3ut.icon-button__negative_1s3ut:hover {
+        } .cc-icon-button.icon-button__transparentBg_1i83m.icon-button__negative_1i83m:hover {
                 background: var(--color-light-transparent-default-inverted-hover);
-            } .cc-icon-button.icon-button__transparentBg_1s3ut.icon-button__negative_1s3ut:active {
+            } .cc-icon-button.icon-button__transparentBg_1i83m.icon-button__negative_1i83m:active {
                 background: var(--color-light-transparent-default-inverted-press);
-            } .cc-icon-button.icon-button__transparentBg_1s3ut.icon-button__tertiary_1s3ut {
+            } .cc-icon-button.icon-button__transparentBg_1i83m.icon-button__tertiary_1i83m {
             color: var(--color-light-text-tertiary-inverted)
-        } .cc-icon-button.icon-button__transparentBg_1s3ut.icon-button__tertiary_1s3ut:hover {
+        } .cc-icon-button.icon-button__transparentBg_1i83m.icon-button__tertiary_1i83m:hover {
                 background: var(--color-light-transparent-default-inverted-hover);
-            } .cc-icon-button.icon-button__transparentBg_1s3ut.icon-button__tertiary_1s3ut:active {
+            } .cc-icon-button.icon-button__transparentBg_1i83m.icon-button__tertiary_1i83m:active {
                 background: var(--color-light-transparent-default-inverted-press);
-            } .cc-icon-button.icon-button__component_1s3ut:disabled.icon-button__primary_1s3ut {
+            } .cc-icon-button.icon-button__component_1i83m:disabled.icon-button__primary_1i83m {
             color: var(--icon-button-inverted-primary-disabled-color)
-        } .cc-icon-button.icon-button__component_1s3ut:disabled.icon-button__primary_1s3ut.icon-button__loader_1s3ut {
+        } .cc-icon-button.icon-button__component_1i83m:disabled.icon-button__primary_1i83m.icon-button__loader_1i83m {
                 color: var(--icon-button-inverted-primary-base-color);
-            } .cc-icon-button.icon-button__component_1s3ut:disabled.icon-button__secondary_1s3ut {
+            } .cc-icon-button.icon-button__component_1i83m:disabled.icon-button__secondary_1i83m {
             color: var(--icon-button-inverted-secondary-disabled-color)
-        } .cc-icon-button.icon-button__component_1s3ut:disabled.icon-button__secondary_1s3ut.icon-button__loader_1s3ut {
+        } .cc-icon-button.icon-button__component_1i83m:disabled.icon-button__secondary_1i83m.icon-button__loader_1i83m {
                 color: var(--icon-button-inverted-secondary-base-color);
-            } .cc-icon-button.icon-button__component_1s3ut:disabled.icon-button__negative_1s3ut {
+            } .cc-icon-button.icon-button__component_1i83m:disabled.icon-button__negative_1i83m {
             color: var(--icon-button-inverted-negative-disabled-color)
-        } .cc-icon-button.icon-button__component_1s3ut:disabled.icon-button__negative_1s3ut.icon-button__loader_1s3ut {
+        } .cc-icon-button.icon-button__component_1i83m:disabled.icon-button__negative_1i83m.icon-button__loader_1i83m {
                 color: var(--icon-button-inverted-negative-base-color);
-            } .cc-icon-button.icon-button__component_1s3ut:disabled.icon-button__tertiary_1s3ut {
+            } .cc-icon-button.icon-button__component_1i83m:disabled.icon-button__tertiary_1i83m {
             color: var(--icon-button-inverted-tertiary-disabled-color)
-        } .cc-icon-button.icon-button__component_1s3ut:disabled.icon-button__tertiary_1s3ut.icon-button__loader_1s3ut {
+        } .cc-icon-button.icon-button__component_1i83m:disabled.icon-button__tertiary_1i83m.icon-button__loader_1i83m {
                 color: var(--icon-button-inverted-tertiary-base-color);
-            } .cc-icon-button.icon-button__component_1s3ut:disabled.icon-button__transparentBg_1s3ut {
+            } .cc-icon-button.icon-button__component_1i83m:disabled.icon-button__transparentBg_1i83m {
             background: transparent;
         }

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

@@ -7,6 +7,7 @@ type Border = {
     color?: string;
     style?: 'solid' | 'dashed';
 };
+type ScaleType = 'fit' | 'fill';
 type TMainSize = 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 128;
 type BaseShapeProps = {
     /**
@@ -35,6 +36,13 @@ type BaseShapeProps = {
      * Фоновое изображение. Имеет приоритет над иконкой и заливкой
      */
     imageUrl?: string;
+    /**
+     * Режим масштабирования изображения
+     * 'fill' - изображение заполняет всё доступное пространство и может быть обрезано
+     * 'fit' - изображение вписывается полностью без обрезки
+     * @default 'fill'
+     */
+    scale?: ScaleType;
     /**
      * Фоновое svg. Имеет приоритет над иконкой и заливкой
      */
@@ -81,4 +89,4 @@ type BaseShapeProps = {
     mainSize?: TMainSize;
 };
 declare const BaseShape: React.ForwardRefExoticComponent<BaseShapeProps & React.RefAttributes<HTMLDivElement>>;
-export { TMainSize, BaseShapeProps, BaseShape };
+export { ScaleType, TMainSize, BaseShapeProps, BaseShape };

package/icon-view/components/base-shape/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 styles = {"componentWrapper":"icon-view__componentWrapper_19glp","component":"icon-view__component_19glp","bg":"icon-view__bg_19glp","border":"icon-view__border_19glp","text":"icon-view__text_19glp","children":"icon-view__children_19glp","addons":"icon-view__addons_19glp","wrapperSize_128":"icon-view__wrapperSize_128_19glp","topAddons":"icon-view__topAddons_19glp","bottomAddons":"icon-view__bottomAddons_19glp","wrapperSize_80":"icon-view__wrapperSize_80_19glp","indicator":"icon-view__indicator_19glp","wrapperSize_72":"icon-view__wrapperSize_72_19glp","wrapperSize_64":"icon-view__wrapperSize_64_19glp","wrapperSize_56":"icon-view__wrapperSize_56_19glp","wrapperSize_48":"icon-view__wrapperSize_48_19glp","wrapperSize_40":"icon-view__wrapperSize_40_19glp","wrapperSize_32":"icon-view__wrapperSize_32_19glp","wrapperSize_24":"icon-view__wrapperSize_24_19glp","wrapperSize_20":"icon-view__wrapperSize_20_19glp","wrapperSize_16":"icon-view__wrapperSize_16_19glp","childrenSize_16":"icon-view__childrenSize_16_19glp","childrenSize_20":"icon-view__childrenSize_20_19glp","childrenSize_24":"icon-view__childrenSize_24_19glp","childrenSize_32":"icon-view__childrenSize_32_19glp","childrenSize_40":"icon-view__childrenSize_40_19glp","childrenSize_48":"icon-view__childrenSize_48_19glp","childrenSize_56":"icon-view__childrenSize_56_19glp","childrenSize_64":"icon-view__childrenSize_64_19glp","childrenSize_72":"icon-view__childrenSize_72_19glp","childrenSize_80":"icon-view__childrenSize_80_19glp","childrenSize_128":"icon-view__childrenSize_128_19glp"};
+var styles = {"componentWrapper":"icon-view__componentWrapper_1i9fo","component":"icon-view__component_1i9fo","bg":"icon-view__bg_1i9fo","border":"icon-view__border_1i9fo","imageFit":"icon-view__imageFit_1i9fo","imageFill":"icon-view__imageFill_1i9fo","text":"icon-view__text_1i9fo","children":"icon-view__children_1i9fo","addons":"icon-view__addons_1i9fo","wrapperSize_128":"icon-view__wrapperSize_128_1i9fo","topAddons":"icon-view__topAddons_1i9fo","bottomAddons":"icon-view__bottomAddons_1i9fo","wrapperSize_80":"icon-view__wrapperSize_80_1i9fo","indicator":"icon-view__indicator_1i9fo","wrapperSize_72":"icon-view__wrapperSize_72_1i9fo","wrapperSize_64":"icon-view__wrapperSize_64_1i9fo","wrapperSize_56":"icon-view__wrapperSize_56_1i9fo","wrapperSize_48":"icon-view__wrapperSize_48_1i9fo","wrapperSize_40":"icon-view__wrapperSize_40_1i9fo","wrapperSize_32":"icon-view__wrapperSize_32_1i9fo","wrapperSize_24":"icon-view__wrapperSize_24_1i9fo","wrapperSize_20":"icon-view__wrapperSize_20_1i9fo","wrapperSize_16":"icon-view__wrapperSize_16_1i9fo","childrenSize_16":"icon-view__childrenSize_16_1i9fo","childrenSize_20":"icon-view__childrenSize_20_1i9fo","childrenSize_24":"icon-view__childrenSize_24_1i9fo","childrenSize_32":"icon-view__childrenSize_32_1i9fo","childrenSize_40":"icon-view__childrenSize_40_1i9fo","childrenSize_48":"icon-view__childrenSize_48_1i9fo","childrenSize_56":"icon-view__childrenSize_56_1i9fo","childrenSize_64":"icon-view__childrenSize_64_1i9fo","childrenSize_72":"icon-view__childrenSize_72_1i9fo","childrenSize_80":"icon-view__childrenSize_80_1i9fo","childrenSize_128":"icon-view__childrenSize_128_1i9fo"};
 require('./index.css');
 
 var BaseShape = React.forwardRef(function (_a, ref) {
-    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 _b, _c;
+    var _d = _a.size, size = _d === void 0 ? 64 : _d, _e = _a.border, border = _e === void 0 ? false : _e, backgroundColor = _a.backgroundColor, imageUrl = _a.imageUrl, _f = _a.scale, scale = _f === void 0 ? 'fill' : _f, 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 _g = typeof size === 'object' ? [size.width, size.height] : [size, size], width = _g[0], height = _g[1];
     var imageLoadingState = hooks.useImageLoadingState({ src: imageUrl || '' });
     var clipPathId = hooks.useId();
     var svgPatternId = hooks.useId();
@@ -31,6 +31,8 @@ var BaseShape = React.forwardRef(function (_a, ref) {
     });
     var shapeDPath = components_baseShape_utils.getPath(polygonName, maxDimension, pathsMap.shape);
     var borderDPath = components_baseShape_utils.getPath(polygonName, maxDimension, pathsMap.border);
+    var shouldContain = scale === 'fit';
+    var preserveAspectRatio = shouldContain ? 'xMidYMid meet' : 'xMidYMid slice';
     return (React__default.default.createElement("div", { className: cn__default.default(styles.componentWrapper, styles["wrapperSize_".concat(maxDimension)], className), ref: ref, "data-test-id": dataTestId },
         React__default.default.createElement("div", { className: styles.component, style: { width: width, height: height } },
             React__default.default.createElement("svg", { width: width, height: height, viewBox: "0 0 ".concat(width, " ").concat(height), xmlns: 'http://www.w3.org/2000/svg', focusable: false },
@@ -41,7 +43,10 @@ var BaseShape = React.forwardRef(function (_a, ref) {
                     React__default.default.createElement("defs", null,
                         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("image", { className: cn__default.default((_b = {},
+                            _b[styles.imageFit] = scale === 'fit',
+                            _b[styles.imageFill] = scale === 'fill',
+                            _b)), href: imageUrl, width: '100%', height: '100%', clipPath: "url(#".concat(clipPathId, ")"), preserveAspectRatio: preserveAspectRatio }),
                     React__default.default.createElement("path", { d: shapeDPath, fill: 'none' }))),
                 Icon && (React__default.default.createElement(React.Fragment, null,
                     React__default.default.createElement("defs", null,
@@ -57,7 +62,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, (_b = {}, _b[styles["childrenSize_".concat(mainSize)]] = mainSize, _b), iconContainerClassName) }, children))),
+            children && (React__default.default.createElement("div", { className: cn__default.default(styles.children, (_c = {}, _c[styles["childrenSize_".concat(mainSize)]] = mainSize, _c), 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/components/base-shape/index.css

@@ -38,26 +38,30 @@
 } /* сбрасывает синюю подсветку при нажатии */ :root {
     --icon-view-color: var(--color-light-neutral-translucent-700);
     --icon-view-bg-color: var(--color-light-neutral-100);
-} .icon-view__componentWrapper_19glp {
+} .icon-view__componentWrapper_1i9fo {
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-} .icon-view__component_19glp {
+} .icon-view__component_1i9fo {
     position: relative;
     overflow: hidden;
     width: 100%;
     height: 100%;
     color: var(--icon-view-color)
-} .icon-view__component_19glp > svg {
+} .icon-view__component_1i9fo > svg {
         vertical-align: top;
-    } .icon-view__bg_19glp {
+    } .icon-view__bg_1i9fo {
     fill: var(--icon-view-bg-color);
-} .icon-view__border_19glp {
+} .icon-view__border_1i9fo {
     stroke: var(--color-light-neutral-translucent-200);
     stroke-width: 1px;
     fill: transparent;
-} .icon-view__text_19glp {
+} .icon-view__imageFit_1i9fo {
+    object-fit: contain;
+} .icon-view__imageFill_1i9fo {
+    object-fit: cover;
+} .icon-view__text_1i9fo {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -68,7 +72,7 @@
     top: var(--gap-0);
     overflow: hidden;
     text-align: center;
-} .icon-view__children_19glp {
+} .icon-view__children_1i9fo {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -77,206 +81,206 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%)
-} .icon-view__children_19glp svg,
-    .icon-view__children_19glp .cc-cdn-icon {
+} .icon-view__children_1i9fo svg,
+    .icon-view__children_1i9fo .cc-cdn-icon {
         width: 100%;
         height: 100%;
-    } .icon-view__addons_19glp {
+    } .icon-view__addons_1i9fo {
     display: flex;
     align-items: center;
     flex-shrink: 0;
     position: absolute;
     line-height: 0;
-} .icon-view__wrapperSize_128_19glp {
+} .icon-view__wrapperSize_128_1i9fo {
     width: 128px;
     height: 128px
-} .icon-view__wrapperSize_128_19glp .icon-view__children_19glp {
+} .icon-view__wrapperSize_128_1i9fo .icon-view__children_1i9fo {
         width: 64px;
         height: 64px;
-    } .icon-view__wrapperSize_128_19glp .icon-view__addons_19glp {
+    } .icon-view__wrapperSize_128_1i9fo .icon-view__addons_1i9fo {
         width: 40px;
         height: 40px;
-    } .icon-view__wrapperSize_128_19glp .icon-view__topAddons_19glp {
+    } .icon-view__wrapperSize_128_1i9fo .icon-view__topAddons_1i9fo {
         top: var(--gap-8-neg);
         right: var(--gap-8-neg);
-    } .icon-view__wrapperSize_128_19glp .icon-view__bottomAddons_19glp {
+    } .icon-view__wrapperSize_128_1i9fo .icon-view__bottomAddons_1i9fo {
         bottom: var(--gap-8-neg);
         right: var(--gap-8-neg);
-    } .icon-view__wrapperSize_80_19glp {
+    } .icon-view__wrapperSize_80_1i9fo {
     width: 80px;
     height: 80px
-} .icon-view__wrapperSize_80_19glp .icon-view__children_19glp {
+} .icon-view__wrapperSize_80_1i9fo .icon-view__children_1i9fo {
         width: 48px;
         height: 48px;
-    } .icon-view__wrapperSize_80_19glp .icon-view__addons_19glp {
+    } .icon-view__wrapperSize_80_1i9fo .icon-view__addons_1i9fo {
         width: 24px;
         height: 24px;
-    } .icon-view__wrapperSize_80_19glp .icon-view__topAddons_19glp {
+    } .icon-view__wrapperSize_80_1i9fo .icon-view__topAddons_1i9fo {
         top: -3px;
         right: -3px;
-    } .icon-view__wrapperSize_80_19glp .icon-view__bottomAddons_19glp {
+    } .icon-view__wrapperSize_80_1i9fo .icon-view__bottomAddons_1i9fo {
         bottom: -3px;
         right: -3px;
-    } .icon-view__wrapperSize_80_19glp .icon-view__indicator_19glp {
+    } .icon-view__wrapperSize_80_1i9fo .icon-view__indicator_1i9fo {
         top: -6px;
         right: -14px;
-    } .icon-view__wrapperSize_72_19glp {
+    } .icon-view__wrapperSize_72_1i9fo {
     width: 72px;
     height: 72px
-} .icon-view__wrapperSize_72_19glp .icon-view__children_19glp {
+} .icon-view__wrapperSize_72_1i9fo .icon-view__children_1i9fo {
         width: 56px;
         height: 56px;
-    } .icon-view__wrapperSize_72_19glp .icon-view__addons_19glp {
+    } .icon-view__wrapperSize_72_1i9fo .icon-view__addons_1i9fo {
         width: 24px;
         height: 24px;
-    } .icon-view__wrapperSize_72_19glp .icon-view__topAddons_19glp {
+    } .icon-view__wrapperSize_72_1i9fo .icon-view__topAddons_1i9fo {
         top: -5px;
         right: -5px;
-    } .icon-view__wrapperSize_72_19glp .icon-view__bottomAddons_19glp {
+    } .icon-view__wrapperSize_72_1i9fo .icon-view__bottomAddons_1i9fo {
         bottom: -5px;
         right: -5px;
-    } .icon-view__wrapperSize_72_19glp .icon-view__indicator_19glp {
+    } .icon-view__wrapperSize_72_1i9fo .icon-view__indicator_1i9fo {
         top: -8px;
         right: -16px;
-    } .icon-view__wrapperSize_64_19glp {
+    } .icon-view__wrapperSize_64_1i9fo {
     width: 64px;
     height: 64px
-} .icon-view__wrapperSize_64_19glp .icon-view__children_19glp {
+} .icon-view__wrapperSize_64_1i9fo .icon-view__children_1i9fo {
         width: 32px;
         height: 32px;
-    } .icon-view__wrapperSize_64_19glp .icon-view__addons_19glp {
+    } .icon-view__wrapperSize_64_1i9fo .icon-view__addons_1i9fo {
         width: 24px;
         height: 24px;
-    } .icon-view__wrapperSize_64_19glp .icon-view__topAddons_19glp {
+    } .icon-view__wrapperSize_64_1i9fo .icon-view__topAddons_1i9fo {
         top: -7px;
         right: -7px;
-    } .icon-view__wrapperSize_64_19glp .icon-view__bottomAddons_19glp {
+    } .icon-view__wrapperSize_64_1i9fo .icon-view__bottomAddons_1i9fo {
         bottom: -7px;
         right: -7px;
-    } .icon-view__wrapperSize_64_19glp .icon-view__indicator_19glp {
+    } .icon-view__wrapperSize_64_1i9fo .icon-view__indicator_1i9fo {
         top: var(--gap-8-neg);
         right: var(--gap-16-neg);
-    } .icon-view__wrapperSize_56_19glp {
+    } .icon-view__wrapperSize_56_1i9fo {
     width: 56px;
     height: 56px
-} .icon-view__wrapperSize_56_19glp .icon-view__children_19glp {
+} .icon-view__wrapperSize_56_1i9fo .icon-view__children_1i9fo {
         width: 40px;
         height: 40px;
-    } .icon-view__wrapperSize_56_19glp .icon-view__addons_19glp {
+    } .icon-view__wrapperSize_56_1i9fo .icon-view__addons_1i9fo {
         width: 20px;
         height: 20px;
-    } .icon-view__wrapperSize_56_19glp .icon-view__topAddons_19glp {
+    } .icon-view__wrapperSize_56_1i9fo .icon-view__topAddons_1i9fo {
         top: var(--gap-8-neg);
         right: -6px;
-    } .icon-view__wrapperSize_56_19glp .icon-view__bottomAddons_19glp {
+    } .icon-view__wrapperSize_56_1i9fo .icon-view__bottomAddons_1i9fo {
         bottom: var(--gap-8-neg);
         right: -6px;
-    } .icon-view__wrapperSize_56_19glp .icon-view__indicator_19glp {
+    } .icon-view__wrapperSize_56_1i9fo .icon-view__indicator_1i9fo {
         top: -6px;
         right: var(--gap-12-neg);
-    } .icon-view__wrapperSize_48_19glp {
+    } .icon-view__wrapperSize_48_1i9fo {
     width: 48px;
     height: 48px
-} .icon-view__wrapperSize_48_19glp .icon-view__children_19glp {
+} .icon-view__wrapperSize_48_1i9fo .icon-view__children_1i9fo {
         width: 24px;
         height: 24px;
-    } .icon-view__wrapperSize_48_19glp .icon-view__addons_19glp {
+    } .icon-view__wrapperSize_48_1i9fo .icon-view__addons_1i9fo {
         width: 20px;
         height: 20px;
-    } .icon-view__wrapperSize_48_19glp .icon-view__topAddons_19glp {
+    } .icon-view__wrapperSize_48_1i9fo .icon-view__topAddons_1i9fo {
         top: -7px;
         right: -7px;
-    } .icon-view__wrapperSize_48_19glp .icon-view__bottomAddons_19glp {
+    } .icon-view__wrapperSize_48_1i9fo .icon-view__bottomAddons_1i9fo {
         bottom: -7px;
         right: -7px;
-    } .icon-view__wrapperSize_48_19glp .icon-view__indicator_19glp {
+    } .icon-view__wrapperSize_48_1i9fo .icon-view__indicator_1i9fo {
         top: -7px;
         right: -13px;
-    } .icon-view__wrapperSize_40_19glp {
+    } .icon-view__wrapperSize_40_1i9fo {
     width: 40px;
     height: 40px
-} .icon-view__wrapperSize_40_19glp .icon-view__children_19glp {
+} .icon-view__wrapperSize_40_1i9fo .icon-view__children_1i9fo {
         width: 24px;
         height: 24px;
-    } .icon-view__wrapperSize_40_19glp .icon-view__addons_19glp {
+    } .icon-view__wrapperSize_40_1i9fo .icon-view__addons_1i9fo {
         width: 20px;
         height: 20px;
-    } .icon-view__wrapperSize_40_19glp .icon-view__topAddons_19glp {
+    } .icon-view__wrapperSize_40_1i9fo .icon-view__topAddons_1i9fo {
         top: -7px;
         right: -7px;
-    } .icon-view__wrapperSize_40_19glp .icon-view__bottomAddons_19glp {
+    } .icon-view__wrapperSize_40_1i9fo .icon-view__bottomAddons_1i9fo {
         bottom: -7px;
         right: -7px;
-    } .icon-view__wrapperSize_40_19glp .icon-view__indicator_19glp {
+    } .icon-view__wrapperSize_40_1i9fo .icon-view__indicator_1i9fo {
         top: -7px;
         right: -13px;
-    } .icon-view__wrapperSize_32_19glp {
+    } .icon-view__wrapperSize_32_1i9fo {
     width: 32px;
     height: 32px
-} .icon-view__wrapperSize_32_19glp .icon-view__children_19glp {
+} .icon-view__wrapperSize_32_1i9fo .icon-view__children_1i9fo {
         width: 24px;
         height: 24px;
-    } .icon-view__wrapperSize_32_19glp .icon-view__indicator_19glp {
+    } .icon-view__wrapperSize_32_1i9fo .icon-view__indicator_1i9fo {
         top: var(--gap-2-neg);
         right: var(--gap-2-neg);
-    } .icon-view__wrapperSize_24_19glp {
+    } .icon-view__wrapperSize_24_1i9fo {
     width: 24px;
     height: 24px
-} .icon-view__wrapperSize_24_19glp .icon-view__children_19glp {
+} .icon-view__wrapperSize_24_1i9fo .icon-view__children_1i9fo {
         width: 24px;
         height: 24px;
-    } .icon-view__wrapperSize_24_19glp .icon-view__indicator_19glp {
+    } .icon-view__wrapperSize_24_1i9fo .icon-view__indicator_1i9fo {
         top: var(--gap-2-neg);
         right: var(--gap-2-neg);
-    } .icon-view__wrapperSize_20_19glp {
+    } .icon-view__wrapperSize_20_1i9fo {
     width: 20px;
     height: 20px
-} .icon-view__wrapperSize_20_19glp .icon-view__children_19glp {
+} .icon-view__wrapperSize_20_1i9fo .icon-view__children_1i9fo {
         width: 16px;
         height: 16px;
-    } .icon-view__wrapperSize_20_19glp .icon-view__indicator_19glp {
+    } .icon-view__wrapperSize_20_1i9fo .icon-view__indicator_1i9fo {
         top: -3px;
         right: -3px;
-    } .icon-view__wrapperSize_16_19glp {
+    } .icon-view__wrapperSize_16_1i9fo {
     width: 16px;
     height: 16px
-} .icon-view__wrapperSize_16_19glp .icon-view__children_19glp {
+} .icon-view__wrapperSize_16_1i9fo .icon-view__children_1i9fo {
         width: 16px;
         height: 16px;
-    } .icon-view__wrapperSize_16_19glp .icon-view__indicator_19glp {
+    } .icon-view__wrapperSize_16_1i9fo .icon-view__indicator_1i9fo {
         top: var(--gap-4-neg);
         right: var(--gap-4-neg);
-    } /* prettier-ignore */ .icon-view__children_19glp.icon-view__childrenSize_16_19glp {
+    } /* prettier-ignore */ .icon-view__children_1i9fo.icon-view__childrenSize_16_1i9fo {
             width: 16px;
             height: 16px;
-        } .icon-view__children_19glp.icon-view__childrenSize_20_19glp {
+        } .icon-view__children_1i9fo.icon-view__childrenSize_20_1i9fo {
             width: 20px;
             height: 20px;
-        } .icon-view__children_19glp.icon-view__childrenSize_24_19glp {
+        } .icon-view__children_1i9fo.icon-view__childrenSize_24_1i9fo {
             width: 24px;
             height: 24px;
-        } .icon-view__children_19glp.icon-view__childrenSize_32_19glp {
+        } .icon-view__children_1i9fo.icon-view__childrenSize_32_1i9fo {
             width: 32px;
             height: 32px;
-        } .icon-view__children_19glp.icon-view__childrenSize_40_19glp {
+        } .icon-view__children_1i9fo.icon-view__childrenSize_40_1i9fo {
             width: 40px;
             height: 40px;
-        } .icon-view__children_19glp.icon-view__childrenSize_48_19glp {
+        } .icon-view__children_1i9fo.icon-view__childrenSize_48_1i9fo {
             width: 48px;
             height: 48px;
-        } .icon-view__children_19glp.icon-view__childrenSize_56_19glp {
+        } .icon-view__children_1i9fo.icon-view__childrenSize_56_1i9fo {
             width: 56px;
             height: 56px;
-        } .icon-view__children_19glp.icon-view__childrenSize_64_19glp {
+        } .icon-view__children_1i9fo.icon-view__childrenSize_64_1i9fo {
             width: 64px;
             height: 64px;
-        } .icon-view__children_19glp.icon-view__childrenSize_72_19glp {
+        } .icon-view__children_1i9fo.icon-view__childrenSize_72_1i9fo {
             width: 72px;
             height: 72px;
-        } .icon-view__children_19glp.icon-view__childrenSize_80_19glp {
+        } .icon-view__children_1i9fo.icon-view__childrenSize_80_1i9fo {
             width: 80px;
             height: 80px;
-        } .icon-view__children_19glp.icon-view__childrenSize_128_19glp {
+        } .icon-view__children_1i9fo.icon-view__childrenSize_128_1i9fo {
             width: 128px;
             height: 128px;
         }

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

@@ -7,6 +7,7 @@ type Border = {
     color?: string;
     style?: 'solid' | 'dashed';
 };
+type ScaleType = 'fit' | 'fill';
 type TMainSize = 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 128;
 type BaseShapeProps = {
     /**
@@ -35,6 +36,13 @@ type BaseShapeProps = {
      * Фоновое изображение. Имеет приоритет над иконкой и заливкой
      */
     imageUrl?: string;
+    /**
+     * Режим масштабирования изображения
+     * 'fill' - изображение заполняет всё доступное пространство и может быть обрезано
+     * 'fit' - изображение вписывается полностью без обрезки
+     * @default 'fill'
+     */
+    scale?: ScaleType;
     /**
      * Фоновое svg. Имеет приоритет над иконкой и заливкой
      */
@@ -81,4 +89,4 @@ type BaseShapeProps = {
     mainSize?: TMainSize;
 };
 declare const BaseShape: React.ForwardRefExoticComponent<BaseShapeProps & React.RefAttributes<HTMLDivElement>>;
-export { TMainSize, BaseShapeProps, BaseShape };
+export { ScaleType, TMainSize, BaseShapeProps, BaseShape };

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

@@ -13,9 +13,9 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var BaseShape = React.forwardRef(function (_a, ref) {
-    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 _b, _c;
+    var _d = _a.size, size = _d === void 0 ? 64 : _d, _e = _a.border, border = _e === void 0 ? false : _e, backgroundColor = _a.backgroundColor, imageUrl = _a.imageUrl, _f = _a.scale, scale = _f === void 0 ? 'fill' : _f, 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 _g = typeof size === 'object' ? [size.width, size.height] : [size, size], width = _g[0], height = _g[1];
     var imageLoadingState = hooks.useImageLoadingState({ src: imageUrl || '' });
     var clipPathId = hooks.useId();
     var svgPatternId = hooks.useId();
@@ -30,6 +30,8 @@ var BaseShape = React.forwardRef(function (_a, ref) {
     });
     var shapeDPath = components_baseShape_utils.getPath(polygonName, maxDimension, pathsMap.shape);
     var borderDPath = components_baseShape_utils.getPath(polygonName, maxDimension, pathsMap.border);
+    var shouldContain = scale === 'fit';
+    var preserveAspectRatio = shouldContain ? 'xMidYMid meet' : 'xMidYMid slice';
     return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.componentWrapper, styles__default.default["wrapperSize_".concat(maxDimension)], className), ref: ref, "data-test-id": dataTestId },
         React__default.default.createElement("div", { className: styles__default.default.component, style: { width: width, height: height } },
             React__default.default.createElement("svg", { width: width, height: height, viewBox: "0 0 ".concat(width, " ").concat(height), xmlns: 'http://www.w3.org/2000/svg', focusable: false },
@@ -40,7 +42,10 @@ var BaseShape = React.forwardRef(function (_a, ref) {
                     React__default.default.createElement("defs", null,
                         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("image", { className: cn__default.default((_b = {},
+                            _b[styles__default.default.imageFit] = scale === 'fit',
+                            _b[styles__default.default.imageFill] = scale === 'fill',
+                            _b)), href: imageUrl, width: '100%', height: '100%', clipPath: "url(#".concat(clipPathId, ")"), preserveAspectRatio: preserveAspectRatio }),
                     React__default.default.createElement("path", { d: shapeDPath, fill: 'none' }))),
                 Icon && (React__default.default.createElement(React.Fragment, null,
                     React__default.default.createElement("defs", null,
@@ -56,7 +61,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, (_b = {}, _b[styles__default.default["childrenSize_".concat(mainSize)]] = mainSize, _b), iconContainerClassName) }, children))),
+            children && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.children, (_c = {}, _c[styles__default.default["childrenSize_".concat(mainSize)]] = mainSize, _c), 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/cssm/components/base-shape/index.module.css

@@ -56,6 +56,10 @@
     stroke: var(--color-light-neutral-translucent-200);
     stroke-width: 1px;
     fill: transparent;
+} .imageFit {
+    object-fit: contain;
+} .imageFill {
+    object-fit: cover;
 } .text {
     display: flex;
     justify-content: center;