@alfalab/core-components 44.5.1-beta.4 → 44.6.0

package/date-input/esm/Component.js

@@ -1,8 +1,8 @@
 import { __rest, __assign } from 'tslib';
-import React, { forwardRef, useRef, useState, useCallback, useEffect } from 'react';
+import React, { forwardRef, useRef, useState, useEffect } from 'react';
 import mergeRefs from 'react-merge-refs';
 import { Input } from '../../input/esm';
-import { format, parseDateString, isCompleteDateInput, isValid, formatDate, NATIVE_DATE_FORMAT } from './utils/format.js';
+import { format, parseDateString, isCompleteDateInput, isValid, NATIVE_DATE_FORMAT, formatDate } from './utils/format.js';
 import { isInputDateSupported } from './utils/native-supports.js';
 import 'date-fns/format';
 import 'date-fns/isValid';
@@ -20,20 +20,41 @@ var DateInput = forwardRef(function (_a, ref) {
     var inputRef = useRef(null);
     var _d = useState(false), shouldRenderNative = _d[0], setShouldRenderNative = _d[1];
     var _e = useState(propValue || defaultValue), value = _e[0], setValue = _e[1];
-    var handleChange = useCallback(function (event) {
+    var moveCaretTo = function (pos) {
+        requestAnimationFrame(function () {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(pos, pos);
+        });
+    };
+    var handleChange = function (event) {
         var newValue = event.target.value;
+        var caretPos = event.target.selectionStart || 0;
         // Позволяем вводить только цифры и точки
         if (/[^\d.]/.test(newValue)) {
+            moveCaretTo(caretPos - 1);
             return;
         }
-        var dots = newValue.match(/\./g);
         // Не даем вводить больше, чем 2 точки
-        if (dots && dots.length > 2) {
+        if (getDotsCount(newValue) > 2) {
+            moveCaretTo(caretPos - 1);
             return;
         }
         // Форматируем введенное значение (добавляем точки)
         var formattedValue = format(newValue);
         var date = parseDateString(formattedValue);
+        // Управляем кареткой, если она находится не в конце инпута
+        if (caretPos !== newValue.length) {
+            if (formattedValue === value) {
+                moveCaretTo(caretPos);
+            }
+            else if (newValue.length - formattedValue.length === 1) {
+                moveCaretTo(caretPos);
+            }
+            else if (formattedValue.length - newValue.length === 1 &&
+                getDotsCount(formattedValue) > getDotsCount(newValue)) {
+                moveCaretTo(caretPos);
+            }
+        }
         setValue(formattedValue);
         if (onChange)
             onChange(event, { date: date, value: formattedValue });
@@ -44,8 +65,8 @@ var DateInput = forwardRef(function (_a, ref) {
             if (onComplete)
                 onComplete(event, { date: date, value: formattedValue });
         }
-    }, [onChange, onComplete]);
-    var handleNativeInputChange = useCallback(function (event) {
+    };
+    var handleNativeInputChange = function (event) {
         var newDate = parseDateString(event.target.value, NATIVE_DATE_FORMAT);
         var newValue = event.target.value === '' ? '' : formatDate(newDate);
         setValue(newValue);
@@ -53,11 +74,11 @@ var DateInput = forwardRef(function (_a, ref) {
             onComplete(event, { date: newDate, value: newValue });
         if (onChange)
             onChange(event, { date: newDate, value: newValue });
-    }, [onComplete, onChange]);
-    var handleBlur = useCallback(function (event) {
+    };
+    var handleBlur = function (event) {
         if (onBlur)
             onBlur(event);
-    }, [onBlur]);
+    };
     useEffect(function () {
         if (mobileMode === 'native' && isInputDateSupported()) {
             setShouldRenderNative(true);
@@ -73,5 +94,8 @@ var DateInput = forwardRef(function (_a, ref) {
             rightAddons,
             shouldRenderNative && (React.createElement("input", { type: 'date', ref: ref, defaultValue: defaultValue, onChange: handleNativeInputChange, className: styles.nativeInput }))) })));
 });
+function getDotsCount(value) {
+    return (value.match(/\./g) || []).length;
+}
 
 export { DateInput };

package/date-input/modern/Component.js

@@ -1,7 +1,7 @@
-import React, { forwardRef, useRef, useState, useCallback, useEffect } from 'react';
+import React, { forwardRef, useRef, useState, useEffect } from 'react';
 import mergeRefs from 'react-merge-refs';
 import { Input } from '../../input/modern';
-import { format, parseDateString, isCompleteDateInput, isValid, formatDate, NATIVE_DATE_FORMAT } from './utils/format.js';
+import { format, parseDateString, isCompleteDateInput, isValid, NATIVE_DATE_FORMAT, formatDate } from './utils/format.js';
 import { isInputDateSupported } from './utils/native-supports.js';
 import 'date-fns/format';
 import 'date-fns/isValid';
@@ -18,20 +18,40 @@ const DateInput = forwardRef(({ mobileMode = 'input', defaultValue = '', rightAd
     const inputRef = useRef(null);
     const [shouldRenderNative, setShouldRenderNative] = useState(false);
     const [value, setValue] = useState(propValue || defaultValue);
-    const handleChange = useCallback((event) => {
+    const moveCaretTo = (pos) => {
+        requestAnimationFrame(() => {
+            inputRef.current?.setSelectionRange(pos, pos);
+        });
+    };
+    const handleChange = (event) => {
         const { value: newValue } = event.target;
+        const caretPos = event.target.selectionStart || 0;
         // Позволяем вводить только цифры и точки
         if (/[^\d.]/.test(newValue)) {
+            moveCaretTo(caretPos - 1);
             return;
         }
-        const dots = newValue.match(/\./g);
         // Не даем вводить больше, чем 2 точки
-        if (dots && dots.length > 2) {
+        if (getDotsCount(newValue) > 2) {
+            moveCaretTo(caretPos - 1);
             return;
         }
         // Форматируем введенное значение (добавляем точки)
         const formattedValue = format(newValue);
         const date = parseDateString(formattedValue);
+        // Управляем кареткой, если она находится не в конце инпута
+        if (caretPos !== newValue.length) {
+            if (formattedValue === value) {
+                moveCaretTo(caretPos);
+            }
+            else if (newValue.length - formattedValue.length === 1) {
+                moveCaretTo(caretPos);
+            }
+            else if (formattedValue.length - newValue.length === 1 &&
+                getDotsCount(formattedValue) > getDotsCount(newValue)) {
+                moveCaretTo(caretPos);
+            }
+        }
         setValue(formattedValue);
         if (onChange)
             onChange(event, { date, value: formattedValue });
@@ -42,8 +62,8 @@ const DateInput = forwardRef(({ mobileMode = 'input', defaultValue = '', rightAd
             if (onComplete)
                 onComplete(event, { date, value: formattedValue });
         }
-    }, [onChange, onComplete]);
-    const handleNativeInputChange = useCallback((event) => {
+    };
+    const handleNativeInputChange = (event) => {
         const newDate = parseDateString(event.target.value, NATIVE_DATE_FORMAT);
         const newValue = event.target.value === '' ? '' : formatDate(newDate);
         setValue(newValue);
@@ -51,11 +71,11 @@ const DateInput = forwardRef(({ mobileMode = 'input', defaultValue = '', rightAd
             onComplete(event, { date: newDate, value: newValue });
         if (onChange)
             onChange(event, { date: newDate, value: newValue });
-    }, [onComplete, onChange]);
-    const handleBlur = useCallback((event) => {
+    };
+    const handleBlur = (event) => {
         if (onBlur)
             onBlur(event);
-    }, [onBlur]);
+    };
     useEffect(() => {
         if (mobileMode === 'native' && isInputDateSupported()) {
             setShouldRenderNative(true);
@@ -71,5 +91,8 @@ const DateInput = forwardRef(({ mobileMode = 'input', defaultValue = '', rightAd
             rightAddons,
             shouldRenderNative && (React.createElement("input", { type: 'date', ref: ref, defaultValue: defaultValue, onChange: handleNativeInputChange, className: styles.nativeInput }))) }));
 });
+function getDotsCount(value) {
+    return (value.match(/\./g) || []).length;
+}
 
 export { DateInput };

package/form-control/cssm/shared/index.d.ts

@@ -0,0 +1 @@
+export { getFormControlTestIds } from "../utils";

package/form-control/cssm/shared/index.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('../utils.js');
+
+
+
+exports.getFormControlTestIds = utils.getFormControlTestIds;

package/form-control/cssm/utils.d.ts

@@ -0,0 +1,9 @@
+declare function getFormControlTestIds(dataTestId: string): {
+    inputWrapper: string;
+    inputWrapperInner: string;
+    leftAddons: string;
+    rightAddons: string;
+    error: string;
+    hint: string;
+};
+export { getFormControlTestIds };

package/form-control/cssm/utils.js

@@ -0,0 +1,16 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var coreComponentsShared = require('../../shared/cssm');
+
+function getFormControlTestIds(dataTestId) {
+    return {
+        inputWrapper: dataTestId,
+        inputWrapperInner: coreComponentsShared.getDataTestId(dataTestId, 'inner'),
+        leftAddons: coreComponentsShared.getDataTestId(dataTestId, 'left-addons'),
+        rightAddons: coreComponentsShared.getDataTestId(dataTestId, 'right-addons'),
+        error: coreComponentsShared.getDataTestId(dataTestId, 'error-message'),
+        hint: coreComponentsShared.getDataTestId(dataTestId, 'hint'),
+    };
+}
+
+exports.getFormControlTestIds = getFormControlTestIds;

package/form-control/esm/shared/index.d.ts

@@ -0,0 +1 @@
+export { getFormControlTestIds } from "../utils";

package/form-control/esm/shared/index.js

@@ -0,0 +1,2 @@
+export { getFormControlTestIds } from '../utils.js';
+import '../../../shared/esm';

package/form-control/esm/utils.d.ts

@@ -0,0 +1,9 @@
+declare function getFormControlTestIds(dataTestId: string): {
+    inputWrapper: string;
+    inputWrapperInner: string;
+    leftAddons: string;
+    rightAddons: string;
+    error: string;
+    hint: string;
+};
+export { getFormControlTestIds };

package/form-control/esm/utils.js

@@ -0,0 +1,14 @@
+import { getDataTestId } from '../../shared/esm';
+
+function getFormControlTestIds(dataTestId) {
+    return {
+        inputWrapper: dataTestId,
+        inputWrapperInner: getDataTestId(dataTestId, 'inner'),
+        leftAddons: getDataTestId(dataTestId, 'left-addons'),
+        rightAddons: getDataTestId(dataTestId, 'right-addons'),
+        error: getDataTestId(dataTestId, 'error-message'),
+        hint: getDataTestId(dataTestId, 'hint'),
+    };
+}
+
+export { getFormControlTestIds };

package/form-control/modern/shared/index.d.ts

@@ -0,0 +1 @@
+export { getFormControlTestIds } from "../utils";

package/form-control/modern/shared/index.js

@@ -0,0 +1,2 @@
+export { getFormControlTestIds } from '../utils.js';
+import '../../../shared/modern';

package/form-control/modern/utils.d.ts

@@ -0,0 +1,9 @@
+declare function getFormControlTestIds(dataTestId: string): {
+    inputWrapper: string;
+    inputWrapperInner: string;
+    leftAddons: string;
+    rightAddons: string;
+    error: string;
+    hint: string;
+};
+export { getFormControlTestIds };

package/form-control/modern/utils.js

@@ -0,0 +1,14 @@
+import { getDataTestId } from '../../shared/modern';
+
+function getFormControlTestIds(dataTestId) {
+    return {
+        inputWrapper: dataTestId,
+        inputWrapperInner: getDataTestId(dataTestId, 'inner'),
+        leftAddons: getDataTestId(dataTestId, 'left-addons'),
+        rightAddons: getDataTestId(dataTestId, 'right-addons'),
+        error: getDataTestId(dataTestId, 'error-message'),
+        hint: getDataTestId(dataTestId, 'hint'),
+    };
+}
+
+export { getFormControlTestIds };

package/form-control/shared/index.d.ts

@@ -0,0 +1 @@
+export { getFormControlTestIds } from "../utils";

package/form-control/shared/index.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('../utils.js');
+
+
+
+exports.getFormControlTestIds = utils.getFormControlTestIds;

package/form-control/shared/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/shared/index.js"
+}

package/form-control/utils.d.ts

@@ -0,0 +1,9 @@
+declare function getFormControlTestIds(dataTestId: string): {
+    inputWrapper: string;
+    inputWrapperInner: string;
+    leftAddons: string;
+    rightAddons: string;
+    error: string;
+    hint: string;
+};
+export { getFormControlTestIds };

package/form-control/utils.js

@@ -0,0 +1,16 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var coreComponentsShared = require('../shared');
+
+function getFormControlTestIds(dataTestId) {
+    return {
+        inputWrapper: dataTestId,
+        inputWrapperInner: coreComponentsShared.getDataTestId(dataTestId, 'inner'),
+        leftAddons: coreComponentsShared.getDataTestId(dataTestId, 'left-addons'),
+        rightAddons: coreComponentsShared.getDataTestId(dataTestId, 'right-addons'),
+        error: coreComponentsShared.getDataTestId(dataTestId, 'error-message'),
+        hint: coreComponentsShared.getDataTestId(dataTestId, 'hint'),
+    };
+}
+
+exports.getFormControlTestIds = getFormControlTestIds;

package/gallery/components/header/Component.js

@@ -5,7 +5,7 @@ var context = require('../../context.js');
 var utils_utils = require('../../utils/utils.js');
 var utils_constants = require('../../utils/constants.js');
 var components_headerInfoBlock_Component = require('../header-info-block/Component.js');
-var components_header_buttons = require('../../buttons-41386a83.js');
+var components_header_buttons = require('../../buttons-82f484be.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/gallery/components/header/buttons.js

@@ -8,7 +8,7 @@ require('@alfalab/icons-glyph/ArrowsInwardMIcon');
 require('@alfalab/icons-glyph/ArrowsOutwardMIcon');
 require('@alfalab/icons-glyph/CrossMIcon');
 require('@alfalab/icons-glyph/PointerDownMIcon');
-var components_header_buttons = require('../../buttons-41386a83.js');
+var components_header_buttons = require('../../buttons-82f484be.js');
 
 
 

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

@@ -2,8 +2,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var cn = require('classnames');
-var hooks = require('@alfalab/hooks');
+require('../../../base-modal');
 var context = require('../../context.js');
+var utils_utils = require('../../utils/utils.js');
+require('../../../typography');
+require('tslib');
+require('../../../icon-button');
+require('../../../tooltip/desktop');
+require('@alfalab/icons-glyph/ArrowsInwardMIcon');
+require('@alfalab/icons-glyph/ArrowsOutwardMIcon');
+require('@alfalab/icons-glyph/CrossMIcon');
+require('@alfalab/icons-glyph/PointerDownMIcon');
+require('../image-viewer/component.js');
+var hooks = require('@alfalab/hooks');
 var components_imagePreview_paths = require('./paths.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -36,9 +47,9 @@ var ImagePreview = function (_a) {
                 React__default.default.createElement("rect", { width: '40', height: '40', fill: 'none' }),
                 React__default.default.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: components_imagePreview_paths.NoImagePaths.baseImage, fill: '#89898A' }),
                 React__default.default.createElement("path", { d: components_imagePreview_paths.NoImagePaths.triangleImage, fill: '#89898A' }))))) : (React__default.default.createElement("div", { className: cn__default.default(styles.preview, styles.image, (_c = {},
-            _c[styles.broken] = isBroken,
             _c[styles.loading] = !meta,
-            _c)), style: { backgroundImage: "url(".concat(image.src, ")") } }))));
+            _c)) },
+        React__default.default.createElement("img", { src: image.src, alt: utils_utils.getImageAlt(image, index) })))));
 };
 
 exports.ImagePreview = ImagePreview;

package/gallery/components/image-preview/index.css

@@ -44,12 +44,17 @@
     -webkit-user-select: none;
             user-select: none;
 } .gallery__image_or3oo {
-    background-color: var(--color-light-bg-primary);
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
     transition: opacity 0.15s ease-in-out
-} .gallery__image_or3oo:hover {
+} .gallery__image_or3oo > img {
+        display: block;
+        background-color: var(--color-light-bg-primary);
+        width: 100%;
+        height: 100%;
+        border-radius: inherit;
+        object-fit: cover;
+        overflow: clip;
+        overflow-clip-margin: border-box;
+    } .gallery__image_or3oo:hover {
         opacity: 0.7;
     } .gallery__loading_or3oo {
     background-color: var(--color-static-bg-secondary-dark)

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

@@ -12,7 +12,7 @@ var ChevronForwardHeavyMIcon = require('@alfalab/icons-glyph/ChevronForwardHeavy
 var context = require('../../context.js');
 var utils_utils = require('../../utils/utils.js');
 var utils_constants = require('../../utils/constants.js');
-var components_imageViewer_slide = require('../../slide-86569661.js');
+var components_imageViewer_slide = require('../../slide-df0a615a.js');
 require('swiper/swiper.min.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

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

@@ -6,7 +6,7 @@ require('../../../typography');
 require('../../utils/utils.js');
 require('../../utils/constants.js');
 require('./paths.js');
-var components_imageViewer_slide = require('../../slide-86569661.js');
+var components_imageViewer_slide = require('../../slide-df0a615a.js');
 
 
 

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

@@ -2,8 +2,23 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var cn = require('classnames');
-var hooks = require('@alfalab/hooks');
+require('../../../../base-modal/cssm');
 var context = require('../../context.js');
+var utils_utils = require('../../utils/utils.js');
+require('../navigation-bar/index.module.css');
+require('../../../../typography/cssm');
+require('../header-info-block/index.module.css');
+require('tslib');
+require('../../../../icon-button/cssm');
+require('../../../../tooltip/cssm/desktop');
+require('@alfalab/icons-glyph/ArrowsInwardMIcon');
+require('@alfalab/icons-glyph/ArrowsOutwardMIcon');
+require('@alfalab/icons-glyph/CrossMIcon');
+require('@alfalab/icons-glyph/PointerDownMIcon');
+require('../header/index.module.css');
+require('../image-viewer/component.js');
+require('../../index.module.css');
+var hooks = require('@alfalab/hooks');
 var components_imagePreview_paths = require('./paths.js');
 var styles = require('./index.module.css');
 
@@ -35,9 +50,9 @@ var ImagePreview = function (_a) {
                 React__default.default.createElement("rect", { width: '40', height: '40', fill: 'none' }),
                 React__default.default.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: components_imagePreview_paths.NoImagePaths.baseImage, fill: '#89898A' }),
                 React__default.default.createElement("path", { d: components_imagePreview_paths.NoImagePaths.triangleImage, fill: '#89898A' }))))) : (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.preview, styles__default.default.image, (_c = {},
-            _c[styles__default.default.broken] = isBroken,
             _c[styles__default.default.loading] = !meta,
-            _c)), style: { backgroundImage: "url(".concat(image.src, ")") } }))));
+            _c)) },
+        React__default.default.createElement("img", { src: image.src, alt: utils_utils.getImageAlt(image, index) })))));
 };
 
 exports.ImagePreview = ImagePreview;

package/gallery/cssm/components/image-preview/index.module.css

@@ -43,12 +43,17 @@
     -webkit-user-select: none;
             user-select: none;
 } .image {
-    background-color: var(--color-light-bg-primary);
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
     transition: opacity 0.15s ease-in-out
-} .image:hover {
+} .image > img {
+        display: block;
+        background-color: var(--color-light-bg-primary);
+        width: 100%;
+        height: 100%;
+        border-radius: inherit;
+        object-fit: cover;
+        overflow: clip;
+        overflow-clip-margin: border-box;
+    } .image:hover {
         opacity: 0.7;
     } .loading {
     background-color: var(--color-static-bg-secondary-dark)

package/gallery/esm/Component.js

@@ -9,11 +9,7 @@ import { ImageViewer } from './components/image-viewer/component.js';
 import './utils/utils.js';
 import './utils/constants.js';
 import './components/image-preview/Component.js';
-import './components/image-preview/paths.js';
-import './components/header-info-block/Component.js';
 import '../../typography/esm';
-import './utils/split-filename.js';
-import './buttons-a16b76b3.js';
 import 'tslib';
 import '../../icon-button/esm';
 import '../../tooltip/esm/desktop';
@@ -21,12 +17,16 @@ import '@alfalab/icons-glyph/ArrowsInwardMIcon';
 import '@alfalab/icons-glyph/ArrowsOutwardMIcon';
 import '@alfalab/icons-glyph/CrossMIcon';
 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-39caa328.js';
 import 'element-closest';
 import 'swiper';
 import 'swiper/react';
 import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
 import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
-import './slide-61ee79e5.js';
+import './slide-b0b55054.js';
 import './components/image-viewer/paths.js';
 import 'swiper/swiper.min.css';
 

package/gallery/esm/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-a16b76b3.js';
+import { s as styles, D as Download, E as Exit, a as ExitFullscreen, F as Fullscreen } from '../../buttons-39caa328.js';
 import '../../../../typography/esm';
 import '../../utils/split-filename.js';
 import 'tslib';

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

@@ -6,4 +6,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-a16b76b3.js';
+export { D as Download, E as Exit, a as ExitFullscreen, F as Fullscreen } from '../../buttons-39caa328.js';

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

@@ -6,7 +6,7 @@ import '../../utils/constants.js';
 import '../header-info-block/Component.js';
 import '../../../../typography/esm';
 import '../../utils/split-filename.js';
-import '../../buttons-a16b76b3.js';
+import '../../buttons-39caa328.js';
 import 'tslib';
 import '../../../../icon-button/esm';
 import '../../../../tooltip/esm/desktop';

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

@@ -1,8 +1,28 @@
 import React, { useContext, useRef } from 'react';
 import cn from 'classnames';
-import { useFocus } from '@alfalab/hooks';
+import '../../../../base-modal/esm';
 import { GalleryContext } from '../../context.js';
+import { getImageAlt } from '../../utils/utils.js';
+import '../../../../typography/esm';
+import 'tslib';
+import '../../../../icon-button/esm';
+import '../../../../tooltip/esm/desktop';
+import '@alfalab/icons-glyph/ArrowsInwardMIcon';
+import '@alfalab/icons-glyph/ArrowsOutwardMIcon';
+import '@alfalab/icons-glyph/CrossMIcon';
+import '@alfalab/icons-glyph/PointerDownMIcon';
+import '../image-viewer/component.js';
+import { useFocus } from '@alfalab/hooks';
 import { NoImagePaths } from './paths.js';
+import 'element-closest';
+import 'swiper';
+import 'swiper/react';
+import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
+import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
+import '../../utils/constants.js';
+import '../../slide-b0b55054.js';
+import '../image-viewer/paths.js';
+import 'swiper/swiper.min.css';
 
 var styles = {"component":"gallery__component_or3oo","active":"gallery__active_or3oo","image":"gallery__image_or3oo","preview":"gallery__preview_or3oo","loading":"gallery__loading_or3oo","brokenImageWrapper":"gallery__brokenImageWrapper_or3oo","brokenIcon":"gallery__brokenIcon_or3oo","focused":"gallery__focused_or3oo"};
 require('./index.css');
@@ -29,9 +49,9 @@ var ImagePreview = function (_a) {
                 React.createElement("rect", { width: '40', height: '40', fill: 'none' }),
                 React.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: NoImagePaths.baseImage, fill: '#89898A' }),
                 React.createElement("path", { d: NoImagePaths.triangleImage, fill: '#89898A' }))))) : (React.createElement("div", { className: cn(styles.preview, styles.image, (_c = {},
-            _c[styles.broken] = isBroken,
             _c[styles.loading] = !meta,
-            _c)), style: { backgroundImage: "url(".concat(image.src, ")") } }))));
+            _c)) },
+        React.createElement("img", { src: image.src, alt: getImageAlt(image, index) })))));
 };
 
 export { ImagePreview };

package/gallery/esm/components/image-preview/index.css

@@ -44,12 +44,17 @@
     -webkit-user-select: none;
             user-select: none;
 } .gallery__image_or3oo {
-    background-color: var(--color-light-bg-primary);
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
     transition: opacity 0.15s ease-in-out
-} .gallery__image_or3oo:hover {
+} .gallery__image_or3oo > img {
+        display: block;
+        background-color: var(--color-light-bg-primary);
+        width: 100%;
+        height: 100%;
+        border-radius: inherit;
+        object-fit: cover;
+        overflow: clip;
+        overflow-clip-margin: border-box;
+    } .gallery__image_or3oo:hover {
         opacity: 0.7;
     } .gallery__loading_or3oo {
     background-color: var(--color-static-bg-secondary-dark)