@sima-land/moleculas 16.0.0-alpha.5 → 16.0.0-alpha.6

package/common/components/media-modal/__mocks__/index.js

@@ -92,6 +92,7 @@ exports.mixed = [
         type: 'video',
         data: {
             src: 'https://cdn2.static1-sima-land.com/flv/3404953.mp4',
+            thumbnail: 'https://loremflickr.com/240/240?random=16',
         },
     },
     {

package/common/components/media-modal/parts/all-round-view.js

@@ -42,7 +42,7 @@ const react_1 = __importStar(require("react"));
 const breakpoint_1 = require("@sima-land/ui-nucleons/hooks/breakpoint");
 const all_round_view_1 = require("../../../../desktop/components/gallery-modal/components/all-round-view");
 const utils_1 = require("../utils");
-const touch_x_svg_1 = __importDefault(require("../../../icons/touch-x.svg"));
+const TouchScrollX_1 = __importDefault(require("@sima-land/ui-quarks/icons/64x64/Colorful/TouchScrollX"));
 const all_round_view_module_scss_1 = __importDefault(require("./all-round-view.module.scss"));
 /**
  * Просмотр 360.
@@ -73,6 +73,6 @@ function AfterMount(_a) {
     }, []);
     return (react_1.default.createElement("div", { className: all_round_view_module_scss_1.default.root },
         !desktop && tutorial && (react_1.default.createElement("div", { className: all_round_view_module_scss_1.default.tutorial, onPointerUp: acceptTutorial },
-            react_1.default.createElement(touch_x_svg_1.default, null))),
+            react_1.default.createElement(TouchScrollX_1.default, null))),
         react_1.default.createElement(all_round_view_1.AllRoundView, Object.assign({}, props, { controls: desktop, state: state, onStateChange: setState }))));
 }

package/common/components/media-modal/parts/index.js

@@ -10,11 +10,11 @@ const define_slots_1 = require("@sima-land/ui-nucleons/helpers/define-slots");
 const breakpoint_1 = require("@sima-land/ui-nucleons/hooks/breakpoint");
 const utils_1 = require("../utils");
 const scroll_section_1 = require("./scroll-section");
-const left_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/left"));
+const Left_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/Left"));
 const parts_module_scss_1 = __importDefault(require("./parts.module.scss"));
 exports.Preset = {
     headerTabs: (userProps) => (Object.assign({ view: 'clean-underline' }, userProps)),
-    headerButton: (userProps) => (Object.assign({ size: 's', startIcon: left_1.default, iconGutter: 4, className: parts_module_scss_1.default['header-button'], children: 'Вернуться к основному товару' }, userProps)),
+    headerButton: (userProps) => (Object.assign({ size: 's', startIcon: Left_1.default, iconGutter: 4, className: parts_module_scss_1.default['header-button'], children: 'Вернуться к основному товару' }, userProps)),
 };
 /**
  * Формирует layout для шапки модального окна медиа.

package/common/components/media-modal/parts/media-content.d.ts

@@ -1,10 +1,12 @@
 import { ReactNode } from 'react';
 import { MediaData } from '../types';
 export interface MediaContentProps {
-    items: MediaData[];
+    children?: ReactNode;
     targetIndex?: number;
     onChangeTargetIndex?: (newIndex: number) => void;
     loading?: boolean;
+    /** @deprecated */
+    items?: MediaData[];
 }
 export interface FitSquareProps {
     children?: ReactNode;

package/common/components/media-modal/parts/media-content.js

@@ -50,26 +50,28 @@ exports.MediaContent = MediaContent;
  * @param props Свойства.
  * @return Элемент.
  */
-function MediaCarousel({ items, targetIndex, onChangeTargetIndex, loading }) {
+function MediaCarousel({ items: itemsProp, children, targetIndex, onChangeTargetIndex, loading, }) {
     const ref = (0, react_1.useRef)(null);
     const area = (0, utils_1.useClientRect)(ref);
+    const items = toViewPropsList(itemsProp, children);
     return (react_1.default.createElement("div", { ref: ref, className: media_content_module_scss_1.default.carousel }, area.ready && (react_1.default.createElement(carousel_1.Carousel, { infinite: false, targetIndex: targetIndex, onChangeTargetIndex: onChangeTargetIndex, draggable: true, containerProps: {
             className: media_content_module_scss_1.default.carousel,
             // в случае если будет работать некорректно - дать возможность задавать пропсы для Carousel
             [page_scroll_lock_1.BSL_IGNORE_ATTR]: true,
-        }, withControls: false, items: items, renderItem: data => (react_1.default.createElement("div", { className: media_content_module_scss_1.default['carousel-item'] },
+        }, withControls: false, items: items, renderItem: (props) => (react_1.default.createElement("div", { className: media_content_module_scss_1.default['carousel-item'] },
             react_1.default.createElement(FitSquare, Object.assign({}, area),
-                react_1.default.createElement(media_view_1.MediaView, { media: data, loading: loading })))) }))));
+                react_1.default.createElement(media_view_1.MediaView, Object.assign({ loading: loading }, props))))) }))));
 }
 /**
  * Отображает медиа-контент в виде слайдера.
  * @param props Свойства.
  * @return Элемент.
  */
-function MediaSlider({ items, targetIndex, onChangeTargetIndex, loading }) {
+function MediaSlider({ items: itemsProp, children, targetIndex, onChangeTargetIndex, loading, }) {
     const [position, setPosition] = (0, react_1.useState)(0);
     const ref = (0, react_1.useRef)(null);
     const area = (0, utils_1.useClientRect)(ref);
+    const items = toViewPropsList(itemsProp, children);
     const total = items.length;
     const controls = total > 1;
     const correction = controls ? -(2 * (56 + 24)) : 0;
@@ -85,13 +87,26 @@ function MediaSlider({ items, targetIndex, onChangeTargetIndex, loading }) {
                 onChangeTargetIndex === null || onChangeTargetIndex === void 0 ? void 0 : onChangeTargetIndex(next);
             } })),
         react_1.default.createElement(FitSquare, { width: area.width + correction, height: area.height },
-            react_1.default.createElement(media_view_1.MediaView, { media: items[position], loading: loading })),
+            react_1.default.createElement(media_view_1.MediaView, Object.assign({ loading: loading }, items[position]))),
         controls && (react_1.default.createElement(arrow_button_1.ArrowButton, { direction: 'right', onClick: () => {
                 const next = (position + 1) % total;
                 setPosition(next);
                 onChangeTargetIndex === null || onChangeTargetIndex === void 0 ? void 0 : onChangeTargetIndex(next);
             } }))))));
 }
+/**
+ * Получив пропсы items и children вернет массив пропсов для MediaView.
+ * @param items Проп items.
+ * @param children Проп children.
+ * @return Массив пропсов для MediaVuew.
+ */
+function toViewPropsList(items, children) {
+    var _a;
+    return ((_a = items === null || items === void 0 ? void 0 : items.map(media => ({ media }))) !== null && _a !== void 0 ? _a : react_1.Children.toArray(children).reduce((acc, item) => {
+        (0, react_1.isValidElement)(item) && item.type === media_view_1.MediaView && acc.push(item.props);
+        return acc;
+    }, []));
+}
 /**
  * Вписывает квадрат в заданную прямоугольную область.
  * @param props Свойства.

package/common/components/media-modal/parts/media-view.js

@@ -30,9 +30,11 @@ exports.MediaView = void 0;
 const react_1 = __importStar(require("react"));
 const image_overlay_1 = require("../../../../desktop/components/gallery-modal/components/image-overlay");
 const breakpoint_1 = require("@sima-land/ui-nucleons/hooks/breakpoint");
-const media_view_module_scss_1 = __importDefault(require("./media-view.module.scss"));
 const classnames_1 = __importDefault(require("classnames"));
 const all_round_view_1 = require("./all-round-view");
+const image_broken_svg_1 = __importDefault(require("../../../icons/image-broken.svg"));
+const media_view_module_scss_1 = __importDefault(require("./media-view.module.scss"));
+const hooks_1 = require("../../../hooks");
 /**
  * Отображает медиа-контент - 360, видео или изображение.
  * @param props Свойства.
@@ -40,6 +42,14 @@ const all_round_view_1 = require("./all-round-view");
  */
 function MediaView({ media, loading, videoProps }) {
     const desktop = (0, breakpoint_1.useBreakpoint)('xs+');
+    let imageSrc = undefined;
+    if ((media === null || media === void 0 ? void 0 : media.type) === 'image') {
+        imageSrc = media.data.src;
+    }
+    else if ((media === null || media === void 0 ? void 0 : media.type) === 'video') {
+        imageSrc = media.data.thumbnail;
+    }
+    const { failed, handleError } = (0, hooks_1.useImageStub)(imageSrc);
     const videoRef = (0, react_1.useRef)(null);
     const videoSrc = (media === null || media === void 0 ? void 0 : media.type) === 'video' ? media.data.src : null;
     (0, react_1.useEffect)(() => {
@@ -54,7 +64,8 @@ function MediaView({ media, loading, videoProps }) {
     }
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)(media_view_module_scss_1.default.root) },
         (media === null || media === void 0 ? void 0 : media.type) === 'image' && (react_1.default.createElement(image_overlay_1.ImageOverlay, { className: media_view_module_scss_1.default.image },
-            react_1.default.createElement("img", { src: media.data.src, alt: media.data.alt || '' }))),
+            failed && react_1.default.createElement(image_broken_svg_1.default, null),
+            !failed && react_1.default.createElement("img", { src: media.data.src, alt: media.data.alt || '', onError: handleError }))),
         (media === null || media === void 0 ? void 0 : media.type) === 'video' && (react_1.default.createElement("video", Object.assign({ autoPlay: false, controls: true, controlsList: 'nodownload' }, videoProps, { ref: videoRef }),
             react_1.default.createElement("source", { src: media.data.src }))),
         (media === null || media === void 0 ? void 0 : media.type) === '360' && react_1.default.createElement(all_round_view_1.AllRoundView, { photos: media.data.photos, controls: desktop })));

package/common/components/media-modal/parts/media-view.module.scss

@@ -27,4 +27,9 @@
     height: 100%;
     object-fit: contain;
   }
+  .image svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
 }

package/common/components/media-modal/parts/product-brief.js

@@ -18,9 +18,11 @@ exports.ProductBrief = void 0;
 const react_1 = __importDefault(require("react"));
 const image_overlay_1 = require("../../../../desktop/components/gallery-modal/components/image-overlay");
 const price_1 = require("@sima-land/ui-nucleons/price");
+const breakpoint_1 = require("@sima-land/ui-nucleons/hooks/breakpoint");
+const hooks_1 = require("../../../hooks");
 const bind_1 = __importDefault(require("classnames/bind"));
+const image_broken_svg_1 = __importDefault(require("../../../icons/image-broken.svg"));
 const product_brief_module_scss_1 = __importDefault(require("./product-brief.module.scss"));
-const breakpoint_1 = require("@sima-land/ui-nucleons/hooks/breakpoint");
 const cx = bind_1.default.bind(product_brief_module_scss_1.default);
 /**
  * Блок товара-рекомендации.
@@ -30,6 +32,7 @@ const cx = bind_1.default.bind(product_brief_module_scss_1.default);
 function ProductBrief(_a) {
     var { size: sizeProp, imageSrc, title, price, currency, footer, className, href, onLinkClick, loading } = _a, restProps = __rest(_a, ["size", "imageSrc", "title", "price", "currency", "footer", "className", "href", "onLinkClick", "loading"]);
     const desktop = (0, breakpoint_1.useBreakpoint)('xs+');
+    const { failed, handleError } = (0, hooks_1.useImageStub)(imageSrc);
     const size = (sizeProp !== null && sizeProp !== void 0 ? sizeProp : desktop) ? 'l' : 's';
     if (loading) {
         return react_1.default.createElement(ProductBriefSkeleton, { size: size });
@@ -37,7 +40,8 @@ function ProductBrief(_a) {
     return (react_1.default.createElement("div", Object.assign({ className: cx('root', `size-${size}`, className) }, restProps),
         react_1.default.createElement("a", { className: product_brief_module_scss_1.default.image, href: href, onClick: onLinkClick },
             react_1.default.createElement(image_overlay_1.ImageOverlay, { className: product_brief_module_scss_1.default.overlay },
-                react_1.default.createElement("img", { src: imageSrc }))),
+                failed && react_1.default.createElement(image_broken_svg_1.default, null),
+                !failed && react_1.default.createElement("img", { src: imageSrc, onError: handleError }))),
         react_1.default.createElement("div", { className: product_brief_module_scss_1.default.info },
             react_1.default.createElement("a", { className: product_brief_module_scss_1.default.title, href: href, onClick: onLinkClick }, title),
             price && react_1.default.createElement(price_1.Price, { className: product_brief_module_scss_1.default.price, value: price, currencyGrapheme: currency })),

package/common/components/media-modal/parts/product-brief.module.scss

@@ -15,6 +15,11 @@
       height: 100%;
       object-fit: contain;
     }
+    > svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
   }
 }
 

package/common/components/media-modal/parts/thumbnail.js

@@ -29,11 +29,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Thumbnail = exports.ThumbnailContext = void 0;
 const react_1 = __importStar(require("react"));
 const image_overlay_1 = require("../../../../desktop/components/gallery-modal/components/image-overlay");
-const play_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Filled/play"));
+const Play_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Filled/Play"));
 const _360_svg_1 = __importDefault(require("../../../../desktop/components/gallery-modal/icons/360.svg"));
+const price_1 = require("@sima-land/ui-nucleons/price");
+const hooks_1 = require("../../../hooks");
 const bind_1 = __importDefault(require("classnames/bind"));
+const image_broken_svg_1 = __importDefault(require("../../../icons/image-broken.svg"));
 const thumbnail_module_scss_1 = __importDefault(require("./thumbnail.module.scss"));
-const price_1 = require("@sima-land/ui-nucleons/price");
 exports.ThumbnailContext = (0, react_1.createContext)({});
 const cx = bind_1.default.bind(thumbnail_module_scss_1.default);
 /**
@@ -44,6 +46,7 @@ const cx = bind_1.default.bind(thumbnail_module_scss_1.default);
 function Thumbnail({ size: sizeFromProps, type, src, alt, checked, onClick, className, loading, title, price, currency, }) {
     var _a;
     const { size: sizeFromContext } = (0, react_1.useContext)(exports.ThumbnailContext);
+    const { failed, handleError } = (0, hooks_1.useImageStub)(src);
     const size = (_a = sizeFromProps !== null && sizeFromProps !== void 0 ? sizeFromProps : sizeFromContext) !== null && _a !== void 0 ? _a : 'l';
     const rootClassName = cx('root', `size-${size}`, (type === null || type === void 0 ? void 0 : type.startsWith('icon-')) && 'iconic', checked && 'checked', loading && 'loading', className);
     if (loading) {
@@ -54,10 +57,11 @@ function Thumbnail({ size: sizeFromProps, type, src, alt, checked, onClick, clas
     return (react_1.default.createElement("button", { className: rootClassName, onClick: onClick, "data-testid": 'thumbnail' },
         react_1.default.createElement("span", { className: cx('content') },
             (type === null || type === void 0 ? void 0 : type.startsWith('preview-')) && (react_1.default.createElement(image_overlay_1.ImageOverlay, { className: cx('image') },
-                react_1.default.createElement("img", { src: src, alt: alt }))),
-            type === 'preview-video' && react_1.default.createElement("span", { className: cx('play') }),
+                failed && react_1.default.createElement(image_broken_svg_1.default, null),
+                !failed && react_1.default.createElement("img", { src: src, alt: alt, onError: handleError }))),
+            !failed && type === 'preview-video' && react_1.default.createElement("span", { className: cx('play') }),
             type === 'icon-360' && react_1.default.createElement(_360_svg_1.default, { fill: 'currentColor' }),
-            type === 'icon-video' && react_1.default.createElement(play_1.default, { width: 32, height: 32, fill: 'currentColor' })),
+            type === 'icon-video' && react_1.default.createElement(Play_1.default, { width: 32, height: 32, fill: 'currentColor' })),
         (title || price) && (react_1.default.createElement("span", { className: cx('info') },
             title && react_1.default.createElement("span", { className: cx('title') }, title),
             price && react_1.default.createElement(price_1.Price, { className: cx('price'), value: price, currencyGrapheme: currency })))));

package/common/components/media-modal/parts/thumbnail.module.scss

@@ -98,6 +98,11 @@
       height: 100%;
       object-fit: contain;
     }
+    > svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
   }
   &::after {
     content: '';

package/common/components/modifier/index.js

@@ -40,8 +40,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MoreButton = exports.Modifier = void 0;
 const react_1 = __importStar(require("react"));
 const hint_1 = require("@sima-land/ui-nucleons/hint");
+const ImageBroken_1 = __importDefault(require("@sima-land/ui-quarks/icons/40x40/Stroked/ImageBroken"));
 const bind_1 = __importDefault(require("classnames/bind"));
 const modifiers_module_scss_1 = __importDefault(require("./modifiers.module.scss"));
+const hooks_1 = require("../../hooks");
 const cx = bind_1.default.bind(modifiers_module_scss_1.default);
 /**
  * Кнопка модификатора (аналога товара).
@@ -74,7 +76,7 @@ function Modifier(_a) {
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("a", Object.assign({}, props, { className: cx('root', `size-${size}`, { active, disabled }, className), "data-testid": testId }),
             content.type === 'color' && (react_1.default.createElement("span", { className: cx('color'), role: 'banner', style: { background: content.color } })),
-            content.type === 'image' && (react_1.default.createElement("span", { className: cx('image'), role: 'banner', style: { backgroundImage: `url(${content.src})` } })),
+            content.type === 'image' && react_1.default.createElement(Image, { src: content.src }),
             content.type === 'text' && (react_1.default.createElement("span", Object.assign({ ref: refs.setReference, className: cx('text') }, getReferenceProps()), content.text)),
             typeof count === 'number' && (react_1.default.createElement("span", { className: cx('counter') }, count > 99 ? '99+' : count)),
             crossedOut && (react_1.default.createElement("svg", { width: '100%', height: '100%', className: cx('diagonal') },
@@ -83,6 +85,18 @@ function Modifier(_a) {
         hint && (react_1.default.createElement(hint_1.Hint, Object.assign({ open: open, hintRef: refs.setFloating, arrowRef: refs.setArrow }, getFloatingProps()), hint))));
 }
 exports.Modifier = Modifier;
+/**
+ * Картинка с заглушкой в случае ошибки загрузки.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Image(_a) {
+    var { src, onError } = _a, rest = __rest(_a, ["src", "onError"]);
+    const { failed, handleError } = (0, hooks_1.useImageStub)(src, onError);
+    return (react_1.default.createElement("span", { className: cx('image-wrapper', { fail: failed }) },
+        failed && react_1.default.createElement(ImageBroken_1.default, null),
+        react_1.default.createElement("img", Object.assign({ className: cx('image') }, rest, { src: src, onError: handleError }))));
+}
 /**
  * Кнопка "+N" для показа полного списка модификаторов.
  * @param props Свойства.

package/common/components/modifier/modifiers.module.scss

@@ -97,6 +97,27 @@
   background-size: cover;
 }
 
+.image-wrapper {
+  border-radius: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: colors.$basic-gray4;
+  &.fail {
+    --modifier-media-opacity: 0;
+  }
+  > svg {
+    width: calc(48%);
+    height: calc(48%);
+    fill: colors.$basic-gray24;
+  }
+}
+
 .text {
   padding: var(--modifier-padding);
   display: block;

package/common/components/product-info/parts.js

@@ -47,7 +47,7 @@ const image_overlay_1 = require("../../../desktop/components/gallery-modal/compo
 const badge_list_1 = require("../badge-list");
 const utils_1 = require("./utils");
 const rating_counter_1 = require("../rating-counter");
-const eighteen_plus_svg_1 = __importDefault(require("../../icons/eighteen-plus.svg"));
+const EighteenPlus_1 = __importDefault(require("@sima-land/ui-quarks/icons/64x64/Stroked/EighteenPlus"));
 const image_broken_svg_1 = __importDefault(require("../../icons/image-broken.svg"));
 const bind_1 = __importDefault(require("classnames/bind"));
 const product_info_module_scss_1 = __importDefault(require("./product-info.module.scss"));
@@ -81,7 +81,7 @@ const Image = ({ src, alt, href, onClick, children, opacity }) => {
     (0, react_1.useEffect)(() => setBroken(false), [src]);
     return (react_1.default.createElement(image_overlay_1.ImageOverlay, { className: cx('image-overlay') }, restriction === 'adult' ? (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("img", { onError: () => setBroken(true), alt: alt, src: src, className: cx('image', 'adult', { broken }), "data-testid": 'product-info:adult-image' }),
-        react_1.default.createElement(eighteen_plus_svg_1.default, { className: cx('adult-icon') }))) : (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(EighteenPlus_1.default, { className: cx('adult-icon') }))) : (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("a", { href: href, className: cx('image-link'), onClick: onClick, "data-testid": 'product-info:image-link' },
             react_1.default.createElement("img", { onError: () => setBroken(true), alt: alt, src: src, className: cx('image', { broken }), style: { opacity: typeof opacity === 'number' ? opacity : defaultOpacity }, "data-testid": 'product-info:image' }),
             broken && react_1.default.createElement(image_broken_svg_1.default, { className: cx('broken-icon') })),

package/common/components/rating-counter/index.d.ts

@@ -1,5 +1,13 @@
-import { HTMLAttributes } from 'react';
+import { CSSProperties, HTMLAttributes } from 'react';
 export type RatingCounterSize = 's' | 'm' | 'unset';
+export interface RatingCounterStyle extends CSSProperties {
+    '--rating-icon-size'?: string;
+    '--rating-value-size'?: string;
+    '--rating-value-height'?: string;
+    '--rating-count-gutter'?: string;
+    '--rating-count-size'?: string;
+    '--rating-count-height'?: string;
+}
 interface CustomProps {
     /**
      * Размер.
@@ -12,6 +20,8 @@ interface CustomProps {
     reviewCount: number;
     /** Нужно ли отключить эффект при наведении. */
     hoverDisabled?: boolean;
+    /** Стили корневого элемента. */
+    style?: RatingCounterStyle;
     /** Идентификатор для систем автоматизированного тестирования. */
     'data-testid'?: string;
 }

package/common/components/rating-counter/index.js

@@ -16,8 +16,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RatingCounter = void 0;
 const react_1 = __importDefault(require("react"));
-const star_svg_1 = __importDefault(require("./star.svg"));
-const get_declination_1 = __importDefault(require("@sima-land/ui-nucleons/helpers/get-declination"));
+const Star_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Filled/Star"));
+const get_declination_1 = require("@sima-land/ui-nucleons/helpers/get-declination");
 const bind_1 = __importDefault(require("classnames/bind"));
 const rating_counter_module_scss_1 = __importDefault(require("./rating-counter.module.scss"));
 const cx = bind_1.default.bind(rating_counter_module_scss_1.default);
@@ -29,10 +29,10 @@ const cx = bind_1.default.bind(rating_counter_module_scss_1.default);
 function RatingCounter(_a) {
     var { size = 's', value, reviewCount, className, hoverDisabled, 'data-testid': testId = 'rating-counter' } = _a, restProps = __rest(_a, ["size", "value", "reviewCount", "className", "hoverDisabled", 'data-testid']);
     return (react_1.default.createElement("div", Object.assign({ className: cx('root', `size-${size}`, !(value > 0) && 'empty', hoverDisabled && 'hover-disabled', className), "data-testid": testId }, restProps),
-        react_1.default.createElement(star_svg_1.default, { className: cx('star') }),
+        react_1.default.createElement(Star_1.default, { className: cx('star') }),
         value > 0 && react_1.default.createElement("span", { className: cx('value') }, String(value).replace('.', ',')),
         react_1.default.createElement("span", { className: cx('count') }, reviewCount > 0
-            ? `${reviewCount} ${(0, get_declination_1.default)(reviewCount, ['отзыв', 'отзыва', 'отзывов'])}`
+            ? `${reviewCount} ${(0, get_declination_1.getDeclination)(reviewCount, ['отзыв', 'отзыва', 'отзывов'])}`
             : 'Нет отзывов')));
 }
 exports.RatingCounter = RatingCounter;

package/common/components/rating-counter/rating-counter-util.scss

@@ -11,7 +11,7 @@
   --rating-icon-size: 24px;
   --rating-value-size: 16px;
   --rating-value-height: 24px;
-  --rating-count-gutter: 8px;
+  --rating-count-gutter: 12px;
   --rating-count-size: 14px;
   --rating-count-height: 20px;
 }

package/common/hooks/index.d.ts

@@ -0,0 +1,12 @@
+import { ReactEventHandler } from 'react';
+/**
+ * Хук состояния ошибки загрузки изображения.
+ * @param src Ссылка на картинку.
+ * @param onError Обработчик ошибки.
+ * @return Управление состоянием.
+ */
+export declare function useImageStub(src?: string, onError?: ReactEventHandler<HTMLImageElement>): {
+    failed: boolean;
+    setFailed: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    handleError: ReactEventHandler<HTMLImageElement>;
+};

package/common/hooks/index.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useImageStub = void 0;
+const hooks_1 = require("@sima-land/ui-nucleons/hooks");
+const react_1 = require("react");
+/**
+ * Хук состояния ошибки загрузки изображения.
+ * @param src Ссылка на картинку.
+ * @param onError Обработчик ошибки.
+ * @return Управление состоянием.
+ */
+function useImageStub(src, onError) {
+    const [failed, setFailed] = (0, react_1.useState)(false);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        setFailed(false);
+    }, [src]);
+    const handleError = (0, react_1.useCallback)(event => {
+        setFailed(true);
+        onError === null || onError === void 0 ? void 0 : onError(event);
+    }, [onError]);
+    return { failed, setFailed, handleError };
+}
+exports.useImageStub = useImageStub;

package/desktop/components/gallery-modal/components/all-round-view.js

@@ -38,6 +38,7 @@ const _360_svg_1 = __importDefault(require("../icons/360.svg"));
 const pause_svg_1 = __importDefault(require("../icons/pause.svg"));
 const turn_left_svg_1 = __importDefault(require("../icons/turn-left.svg"));
 const turn_right_svg_1 = __importDefault(require("../icons/turn-right.svg"));
+const image_broken_svg_1 = __importDefault(require("../../../../common/icons/image-broken.svg"));
 const cx = bind_1.default.bind(all_round_view_module_scss_1.default);
 /**
  * 3д-просмотр.
@@ -55,23 +56,28 @@ const AllRoundView = ({ photos, controls = true, state: stateProp = 'autoplay',
     const ChangeState = (bindState) => () => setState(bindState);
     const [index, setIndex] = (0, react_1.useState)(0);
     const indexRef = (0, identity_1.useIdentityRef)(index);
-    const photosReady = (0, utils_1.useImagesLoad)(photos);
+    const imagesStatus = (0, utils_1.useImagesLoad)(photos);
+    const ready = imagesStatus === 'done';
+    const failed = imagesStatus === 'fail';
     // запуск/остановка вращения
     (0, react_1.useEffect)(() => {
-        if (state !== 'default' && photosReady) {
+        if (state !== 'default' && ready) {
             const timerId = window.setInterval(() => {
                 const increment = state === 'turn-left' ? -1 : 1;
                 setIndex((photos.length + (indexRef.current + increment)) % photos.length);
             }, 1000 / 30);
             return () => window.clearInterval(timerId);
         }
-    }, [state, photosReady]);
+    }, [state, ready]);
     // перетаскивание
     (0, react_1.useEffect)(() => {
         // переданное число всегда замениться на такое, которое будет в промежутке от 0 до количества фото
         // eslint-disable-next-line require-jsdoc
         const wrap = (value) => (photos.length + value) % photos.length;
         const image = imageRef.current;
+        if (!image) {
+            return;
+        }
         const offList = [
             (0, on_1.default)(image, 'pointerdown', e => {
                 e.preventDefault();
@@ -101,7 +107,7 @@ const AllRoundView = ({ photos, controls = true, state: stateProp = 'autoplay',
             }),
         ];
         return () => offList.forEach(fn => fn());
-    }, [photos.length]);
+    }, [photos.length, failed]);
     const HINT = (react_1.default.createElement(react_1.default.Fragment, null,
         "\u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0432\u0440\u0430\u0449\u0430\u0442\u044C \u0442\u043E\u0432\u0430\u0440,",
         react_1.default.createElement("br", null),
@@ -109,8 +115,9 @@ const AllRoundView = ({ photos, controls = true, state: stateProp = 'autoplay',
         react_1.default.createElement("br", null),
         "\u043C\u044B\u0448\u0438 \u043D\u0430 \u0444\u043E\u0442\u043E\u0433\u0440\u0430\u0444\u0438\u0438"));
     return (react_1.default.createElement("div", { className: cx('root') },
-        react_1.default.createElement("img", { "data-testid": 'gallery-modal:360-current-photo', ref: imageRef, src: photos[index] }),
-        controls && (react_1.default.createElement("div", { className: cx('controls') },
+        failed && react_1.default.createElement(image_broken_svg_1.default, { className: cx('stub') }),
+        !failed && (react_1.default.createElement("img", { "data-testid": 'gallery-modal:360-current-photo', ref: imageRef, src: photos[index] })),
+        !failed && controls && (react_1.default.createElement("div", { className: cx('controls') },
             react_1.default.createElement("button", { className: cx('control', 'turn'), disabled: autoplay, onPointerDown: ChangeState('turn-left'), onPointerUp: ChangeState('default'), onPointerLeave: ChangeState('default'), "data-testid": 'gallery-modal:360-turn-left-button' },
                 react_1.default.createElement(turn_right_svg_1.default, null)),
             react_1.default.createElement(with_hint_1.WithHint, { hint: HINT }, (ref, toggleHint) => (react_1.default.createElement("button", { ref: ref, className: cx('control', 'primary', autoplay && 'pause'), onClick: () => {

package/desktop/components/gallery-modal/components/all-round-view.module.scss

@@ -11,6 +11,11 @@
     width: 100%;
     height: 100%;
   }
+  .stub {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
 }
 
 .controls {

package/desktop/components/gallery-modal/components/thumbnail.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Thumbnail = void 0;
 const react_1 = __importDefault(require("react"));
 const image_overlay_1 = require("./image-overlay");
-const play_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Filled/play"));
+const Play_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Filled/Play"));
 const bind_1 = __importDefault(require("classnames/bind"));
 const thumbnail_module_scss_1 = __importDefault(require("./thumbnail.module.scss"));
 const _360_svg_1 = __importDefault(require("../icons/360.svg"));
@@ -18,7 +18,7 @@ const cx = bind_1.default.bind(thumbnail_module_scss_1.default);
  */
 const Thumbnail = ({ type, src, alt, checked, onClick, className }) => (react_1.default.createElement("button", { className: cx('root', type !== 'image' && 'iconic', checked && 'checked', className), onClick: onClick, "data-testid": 'gallery-modal:thumbnail' },
     type === '360' && react_1.default.createElement(_360_svg_1.default, { fill: 'currentColor' }),
-    type === 'video' && react_1.default.createElement(play_1.default, { width: 32, height: 32, fill: 'currentColor' }),
+    type === 'video' && react_1.default.createElement(Play_1.default, { width: 32, height: 32, fill: 'currentColor' }),
     src && (react_1.default.createElement(image_overlay_1.ImageOverlay, { className: cx('image-overlay') },
         react_1.default.createElement("img", { src: src, alt: alt })))));
 exports.Thumbnail = Thumbnail;

package/desktop/components/gallery-modal/utils.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
+type Status = 'load' | 'done' | 'fail';
 /**
  * Хук, вернет true когда все фото будут загружен.
  * @param srcList Список адресов фото.
  * @return Загружены ли все фото.
  */
-export declare const useImagesLoad: (srcList: string[]) => boolean;
+export declare function useImagesLoad(srcList: string[]): Status;
 /**
  * Хук, вернет размер квадрата вписанного в область окна галереи фото по макетам.
  * @param areaRef Реф с элементом.
@@ -14,3 +15,4 @@ export declare const useImagesLoad: (srcList: string[]) => boolean;
 export declare const useSquareFit: (areaRef: React.RefObject<HTMLDivElement | null>, { hasReview }: {
     hasReview: boolean;
 }) => number | null;
+export {};

package/desktop/components/gallery-modal/utils.js

@@ -6,23 +6,35 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSquareFit = exports.useImagesLoad = void 0;
 const react_1 = require("react");
 const on_1 = __importDefault(require("@sima-land/ui-nucleons/helpers/on"));
+const hooks_1 = require("@sima-land/ui-nucleons/hooks");
 /**
  * Хук, вернет true когда все фото будут загружен.
  * @param srcList Список адресов фото.
  * @return Загружены ли все фото.
  */
-const useImagesLoad = (srcList) => {
+function useImagesLoad(srcList) {
+    const [failed, setFailed] = (0, react_1.useState)(false);
     const [loadedCount, setLoadedCount] = (0, react_1.useState)(0);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        setFailed(false);
+    }, srcList);
     (0, react_1.useEffect)(() => {
         srcList.forEach(src => {
             const image = new Image();
             image.onload = () => setLoadedCount(c => c + 1);
+            image.onerror = () => setFailed(true);
             image.src = src;
         });
         return () => setLoadedCount(0);
     }, srcList);
-    return loadedCount === srcList.length;
-};
+    if (loadedCount === srcList.length) {
+        return 'done';
+    }
+    if (failed) {
+        return 'fail';
+    }
+    return 'load';
+}
 exports.useImagesLoad = useImagesLoad;
 /**
  * Хук, вернет размер квадрата вписанного в область окна галереи фото по макетам.

package/desktop/components/promotion-card/index.js

@@ -41,7 +41,7 @@ exports.PromotionCard = void 0;
 const react_1 = __importStar(require("react"));
 const banner_title_1 = require("./banner-title");
 const estimate_1 = require("./estimate");
-const watch_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/watch"));
+const Watch_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Watch"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_module_scss_1 = __importDefault(require("./index.module.scss"));
 const placeholder_1 = require("./placeholder");
@@ -77,7 +77,7 @@ const PromotionCard = (_a) => {
                     subtitle && react_1.default.createElement("p", { className: index_module_scss_1.default.subtitle }, subtitle)),
                 react_1.default.createElement("div", { className: index_module_scss_1.default.footer },
                     mounted && (react_1.default.createElement("time", { className: index_module_scss_1.default.timer, "data-testid": 'promotion-card:due-date' },
-                        react_1.default.createElement(watch_1.default, { className: index_module_scss_1.default['timer-svg'] }),
+                        react_1.default.createElement(Watch_1.default, { className: index_module_scss_1.default['timer-svg'] }),
                         react_1.default.createElement(estimate_1.Estimate, { dueDate: dueDate }))),
                     postfix && (react_1.default.createElement("div", { "data-testid": 'promotion-card:postfix', className: index_module_scss_1.default.postfix }, postfix)))))));
 };

package/mobile/components/modifiers-list/index.js

@@ -7,7 +7,7 @@ exports.ModifiersList = void 0;
 const react_1 = __importDefault(require("react"));
 const modifier_item_1 = require("./modifier-item");
 const link_1 = require("@sima-land/ui-nucleons/link");
-const statement_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/statement"));
+const Statement_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/Statement"));
 const modifiers_list_module_scss_1 = __importDefault(require("./modifiers-list.module.scss"));
 const bind_1 = __importDefault(require("classnames/bind"));
 const cx = bind_1.default.bind(modifiers_list_module_scss_1.default);
@@ -20,6 +20,6 @@ const ModifiersList = ({ items, currencyGrapheme, sizesTableUrl, wrapperProps, i
     sizesTableUrl && (react_1.default.createElement("div", { className: cx('sizes-table-wrapper') },
         react_1.default.createElement(link_1.Link, { className: cx('sizes-table-link'), href: sizesTableUrl },
             "\u0422\u0430\u0431\u043B\u0438\u0446\u0430 \u0440\u0430\u0437\u043C\u0435\u0440\u043E\u0432",
-            react_1.default.createElement(statement_1.default, { role: 'presentation', className: cx('sizes-table-icon') })))),
+            react_1.default.createElement(Statement_1.default, { role: 'presentation', className: cx('sizes-table-icon') })))),
     Array.isArray(items) && (react_1.default.createElement("div", Object.assign({}, itemsContainerProps), items.map((item, index) => (react_1.default.createElement(modifier_item_1.ModifierItem, Object.assign({ key: index }, item, { onClick: () => onItemClick && onItemClick(item), currencyGrapheme: currencyGrapheme }))))))));
 exports.ModifiersList = ModifiersList;

package/mobile/components/modifiers-list/modifier-item/index.js

@@ -9,7 +9,7 @@ const modifier_item_module_scss_1 = __importDefault(require("./modifier-item.mod
 const bind_1 = __importDefault(require("classnames/bind"));
 const price_1 = require("@sima-land/ui-nucleons/price");
 const text_1 = require("@sima-land/ui-nucleons/text");
-const check_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/check"));
+const Check_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/Check"));
 const constants_1 = require("../../../../common/constants");
 exports.cx = bind_1.default.bind(modifier_item_module_scss_1.default);
 /**
@@ -34,5 +34,5 @@ const ModifierItem = ({ name, selected, type = 'text', color, image, price, curr
         Boolean(price) && (react_1.default.createElement(price_1.Price, { value: price, currencyGrapheme: currencyGrapheme, className: (0, exports.cx)('price', additionalText && 'additional') })),
         Boolean(additionalText) && (react_1.default.createElement(text_1.Text, { color: 'basic-gray38', children: additionalText, size: 12, lineHeight: 16 }))),
     react_1.default.createElement("div", { className: (0, exports.cx)('icon-wrapper') }, selected && (react_1.default.createElement("div", { className: (0, exports.cx)('icon') },
-        react_1.default.createElement(check_1.default, { fill: '#fff', role: 'presentation' }))))));
+        react_1.default.createElement(Check_1.default, { fill: '#fff', role: 'presentation' }))))));
 exports.ModifierItem = ModifierItem;

package/mobile/components/person-info/index.js

@@ -10,10 +10,10 @@ const user_1 = require("@sima-land/ui-nucleons/avatar/user");
 const box_1 = require("@sima-land/ui-nucleons/box");
 const text_1 = require("@sima-land/ui-nucleons/text");
 const borders_1 = require("@sima-land/ui-nucleons/styling/borders");
-const mail_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/mail"));
-const skype_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/skype"));
-const phone_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/phone"));
-const mobile_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Filled/mobile"));
+const Mail_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/Mail"));
+const Skype_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/Skype"));
+const Phone_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/Phone"));
+const Mobile_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Filled/Mobile"));
 const person_info_module_scss_1 = __importDefault(require("./person-info.module.scss"));
 const cx = bind_1.default.bind(person_info_module_scss_1.default);
 /**
@@ -31,10 +31,10 @@ function PersonInfo({ name, appointment, photoUrl, email, skype, phoneHref, phon
         Boolean(appointment) && react_1.default.createElement("span", { className: cx('appointment') }, appointment),
         arbitraryLinkProps && (react_1.default.createElement("div", { className: cx('profile-url'), children: react_1.default.createElement("a", Object.assign({ className: cx('link') }, arbitraryLinkProps)) })),
         react_1.default.createElement("div", { className: cx('items', borders_1.InnerBorder.bottom) },
-            Boolean(email) && (react_1.default.createElement(CommunicateLink, { href: `mailto:${email}`, primaryText: email, secondaryText: '\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430', icon: react_1.default.createElement(mail_1.default, null) })),
-            Boolean(skype) && (react_1.default.createElement(CommunicateLink, { href: `skype:${skype}?chat`, primaryText: skype, secondaryText: 'Skype', icon: react_1.default.createElement(skype_1.default, null) })),
-            Boolean(phoneText) && (react_1.default.createElement(CommunicateLink, { href: phoneHref, primaryText: phoneText, secondaryText: '\u0420\u0430\u0431\u043E\u0447\u0438\u0439', icon: react_1.default.createElement(phone_1.default, null) })),
-            Boolean(secondPhoneText) && (react_1.default.createElement(CommunicateLink, { href: secondPhoneHref, primaryText: secondPhoneText, secondaryText: '\u0421\u043E\u0442\u043E\u0432\u044B\u0439', icon: react_1.default.createElement(mobile_1.default, null) })))));
+            Boolean(email) && (react_1.default.createElement(CommunicateLink, { href: `mailto:${email}`, primaryText: email, secondaryText: '\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430', icon: react_1.default.createElement(Mail_1.default, null) })),
+            Boolean(skype) && (react_1.default.createElement(CommunicateLink, { href: `skype:${skype}?chat`, primaryText: skype, secondaryText: 'Skype', icon: react_1.default.createElement(Skype_1.default, null) })),
+            Boolean(phoneText) && (react_1.default.createElement(CommunicateLink, { href: phoneHref, primaryText: phoneText, secondaryText: '\u0420\u0430\u0431\u043E\u0447\u0438\u0439', icon: react_1.default.createElement(Phone_1.default, null) })),
+            Boolean(secondPhoneText) && (react_1.default.createElement(CommunicateLink, { href: secondPhoneHref, primaryText: secondPhoneText, secondaryText: '\u0421\u043E\u0442\u043E\u0432\u044B\u0439', icon: react_1.default.createElement(Mobile_1.default, null) })))));
 }
 exports.PersonInfo = PersonInfo;
 /**

package/mobile/components/product-row/index.js

@@ -7,14 +7,14 @@ exports.ProductRow = void 0;
 const react_1 = __importDefault(require("react"));
 const product_row_module_scss_1 = __importDefault(require("./product-row.module.scss"));
 const bind_1 = __importDefault(require("classnames/bind"));
-const more_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Filled/more"));
 const link_1 = require("@sima-land/ui-nucleons/link");
 const price_1 = require("@sima-land/ui-nucleons/price");
 const box_1 = require("@sima-land/ui-nucleons/box");
 const text_1 = require("@sima-land/ui-nucleons/text");
 const stroked_svg_1 = require("@sima-land/ui-nucleons/stroked-svg");
-const favorite_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Filled/favorite"));
-const favorite_2 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/favorite"));
+const More_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Filled/More"));
+const Favorite_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Filled/Favorite"));
+const Favorite_2 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/Favorite"));
 const colors_1 = require("@sima-land/ui-nucleons/colors");
 const cx = bind_1.default.bind(product_row_module_scss_1.default);
 /**
@@ -27,7 +27,7 @@ function ProductRow({ itemUrl, imageUrl, name, sid, isWished, count, unit, initi
         react_1.default.createElement("div", { className: cx('image-wrapper') },
             react_1.default.createElement(link_1.Link, { href: itemUrl },
                 react_1.default.createElement("img", { src: imageUrl, className: cx('image') })),
-            onWishButtonClick && (react_1.default.createElement(stroked_svg_1.StrokedSVG, { className: cx('wish-button'), fill: isWished ? colors_1.COLORS.get('additional-red') : undefined, component: isWished ? favorite_1.default : favorite_2.default, onClick: isFetchingWishItems ? undefined : onWishButtonClick }))),
+            onWishButtonClick && (react_1.default.createElement(stroked_svg_1.StrokedSVG, { className: cx('wish-button'), fill: isWished ? colors_1.COLORS.get('additional-red') : undefined, component: isWished ? Favorite_1.default : Favorite_2.default, onClick: isFetchingWishItems ? undefined : onWishButtonClick }))),
         react_1.default.createElement("div", { className: cx('info-column') },
             react_1.default.createElement(link_1.Link, { href: itemUrl, className: cx('link'), color: 'basic-gray87' },
                 react_1.default.createElement(text_1.Text, { weight: 600 }, name)),
@@ -54,6 +54,6 @@ function ProductRow({ itemUrl, imageUrl, name, sid, isWished, count, unit, initi
             notInStock && (react_1.default.createElement(box_1.Box, { marginTop: 2 },
                 react_1.default.createElement(text_1.Text, { element: 'div', color: 'basic-gray38' }, "\u041D\u0435\u0442 \u043D\u0430 \u0441\u043A\u043B\u0430\u0434\u0435")))),
         react_1.default.createElement("div", { className: cx('action-button') },
-            react_1.default.createElement(more_1.default, { onClick: onActionsClick }))));
+            react_1.default.createElement(More_1.default, { onClick: onActionsClick }))));
 }
 exports.ProductRow = ProductRow;

package/mobile/components/pseudo-input/index.js

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PseudoInput = void 0;
 const react_1 = __importDefault(require("react"));
 const bind_1 = __importDefault(require("classnames/bind"));
-const search_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/search"));
+const Search_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/Search"));
 const pseudo_input_module_scss_1 = __importDefault(require("./pseudo-input.module.scss"));
 const cx = bind_1.default.bind(pseudo_input_module_scss_1.default);
 /**
@@ -28,7 +28,7 @@ const cx = bind_1.default.bind(pseudo_input_module_scss_1.default);
 const PseudoInput = (_a) => {
     var { text, className } = _a, rest = __rest(_a, ["text", "className"]);
     return (react_1.default.createElement("div", Object.assign({}, rest, { role: 'button', className: cx('input', className) }),
-        react_1.default.createElement(search_1.default, { className: cx('icon'), "aria-hidden": 'true' }),
+        react_1.default.createElement(Search_1.default, { className: cx('icon'), "aria-hidden": 'true' }),
         react_1.default.createElement("span", { className: cx('text') }, text)));
 };
 exports.PseudoInput = PseudoInput;

package/mobile/components/search-bar/index.js

@@ -34,9 +34,9 @@ const dropdown_1 = require("@sima-land/ui-nucleons/dropdown");
 const dropdown_item_1 = require("@sima-land/ui-nucleons/dropdown-item");
 const hooks_1 = require("@sima-land/ui-nucleons/hooks/");
 const on_1 = __importDefault(require("@sima-land/ui-nucleons/helpers/on"));
-const cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Filled/cross"));
-const search_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/search"));
-const more_vert_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Filled/more-vert"));
+const Cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Filled/Cross"));
+const Search_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/Search"));
+const MoreVert_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Filled/MoreVert"));
 const bind_1 = __importDefault(require("classnames/bind"));
 const search_bar_module_scss_1 = __importDefault(require("./search-bar.module.scss"));
 exports.cx = bind_1.default.bind(search_bar_module_scss_1.default);
@@ -72,19 +72,19 @@ const SearchBar = ({ value, onChange, inputMode, placeholder = 'Поиск', onC
             react_1.default.createElement("div", { className: (0, exports.cx)('buttons-container') }, startButtons.map((props, index) => (react_1.default.createElement(Button, Object.assign({}, props, { key: index }))))))),
         react_1.default.createElement("label", { className: (0, exports.cx)('input-wrapper'), onMouseDown: preventFieldBlur, "data-testid": 'search-bar:input-wrapper' },
             withSearchIcon && (react_1.default.createElement("span", { className: (0, exports.cx)('search-icon') },
-                react_1.default.createElement(search_1.default, { fill: colors_1.COLORS.get('basic-gray38'), "aria-hidden": true }))),
+                react_1.default.createElement(Search_1.default, { fill: colors_1.COLORS.get('basic-gray38'), "aria-hidden": true }))),
             react_1.default.createElement("div", { className: (0, exports.cx)('input-container') },
                 react_1.default.createElement("input", { ref: inputRef, value: value, onChange: onChange, className: (0, exports.cx)('search-field'), placeholder: placeholder, autoFocus: autoFocus, "data-testid": 'search-bar-input', type: 'text', inputMode: inputMode, tabIndex: 0 }),
                 description && (react_1.default.createElement("div", { className: (0, exports.cx)('description-container') },
                     react_1.default.createElement("span", { className: (0, exports.cx)('description') }, description)))),
             value && onClear && (react_1.default.createElement("button", { onClick: onClear, "aria-label": '\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C', "data-testid": 'search-bar:clear-icon', className: (0, exports.cx)('clear-button') },
-                react_1.default.createElement(cross_1.default, { fill: colors_1.COLORS.get('basic-gray38'), "aria-hidden": true })))),
+                react_1.default.createElement(Cross_1.default, { fill: colors_1.COLORS.get('basic-gray38'), "aria-hidden": true })))),
         Boolean(endButtons.length) && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("div", { className: (0, exports.cx)('after-field', needHideEndButtons && 'wide-screen') },
                 react_1.default.createElement("div", { className: (0, exports.cx)('buttons-container') }, endButtons.map((props, index) => (react_1.default.createElement(Button, Object.assign({}, props, { key: index })))))),
             needHideEndButtons && (react_1.default.createElement("div", { className: (0, exports.cx)('after-field', 'narrow-screen') },
                 react_1.default.createElement("div", { className: (0, exports.cx)('buttons-container') },
-                    react_1.default.createElement(Button, { text: '\u0411\u043E\u043B\u044C\u0448\u0435', ref: dropdownOpenerRef, icon: more_vert_1.default, onClick: () => toggleDropdown(!shownDropdown) })),
+                    react_1.default.createElement(Button, { text: '\u0411\u043E\u043B\u044C\u0448\u0435', ref: dropdownOpenerRef, icon: MoreVert_1.default, onClick: () => toggleDropdown(!shownDropdown) })),
                 shownDropdown && (react_1.default.createElement("div", { ref: dropdownRef, className: (0, exports.cx)('dropdown-container') },
                     react_1.default.createElement(dropdown_1.Dropdown, null, endButtons.map(({ text, onClick }, index) => (react_1.default.createElement(dropdown_item_1.DropdownItem, { size: 's', key: index, onClick: event => {
                             onClick(event);

package/mobile/components/select-screen/index.js

@@ -40,7 +40,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectScreenOption = exports.SelectScreenLayout = void 0;
 const react_1 = __importStar(require("react"));
 const layout_1 = require("@sima-land/ui-nucleons/layout");
-const check_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/check"));
+const Check_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/Check"));
 const classnames_1 = __importDefault(require("classnames"));
 const select_screen_module_scss_1 = __importDefault(require("./select-screen.module.scss"));
 /**
@@ -63,6 +63,6 @@ const SelectScreenOption = (_a) => {
     var { children, className, selected, withSelectedIcon = selected, size = 'm' } = _a, props = __rest(_a, ["children", "className", "selected", "withSelectedIcon", "size"]);
     return (react_1.default.createElement("button", Object.assign({}, props, { type: 'button', className: (0, classnames_1.default)(select_screen_module_scss_1.default.item, className, select_screen_module_scss_1.default[`size-${size}`]), "data-testid": 'select-screen:option' }),
         children,
-        selected && withSelectedIcon && react_1.default.createElement(check_1.default, { role: 'presentation', className: select_screen_module_scss_1.default.icon })));
+        selected && withSelectedIcon && react_1.default.createElement(Check_1.default, { role: 'presentation', className: select_screen_module_scss_1.default.icon })));
 };
 exports.SelectScreenOption = SelectScreenOption;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/moleculas",
-  "version": "16.0.0-alpha.5",
+  "version": "16.0.0-alpha.6",
   "repository": "ssh://git@github.com:sima-land/moleculas.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",
@@ -32,7 +32,7 @@
   },
   "peerDependencies": {
     "@sima-land/ui-nucleons": "^45.0.0-alpha.3",
-    "@sima-land/ui-quarks": "^3.6.0",
+    "@sima-land/ui-quarks": "^4.2.0",
     "react": ">=17",
     "react-dom": ">=17"
   },

package/common/components/rating-counter/star.svg

@@ -1,5 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M7.53601 1.54543C7.70396 1.12719 8.29603 1.12719 8.46398 1.54543L10.1755 5.80741L14.7577 6.11811C15.2074 6.1486 15.3904 6.71169 15.0445 7.00066L11.52 9.94542L12.6405 14.3994C12.7505 14.8365 12.2715 15.1845 11.8897 14.9449L7.99999 12.5028L4.11024 14.9449C3.72853 15.1845 3.24953 14.8365 3.35949 14.3994L4.47999 9.94542L0.955488 7.00067C0.609623 6.71169 0.792582 6.1486 1.24225 6.11811L5.82451 5.80741L7.53601 1.54543Z"
-    fill="#000" />
-</svg>

package/common/icons/eighteen-plus.svg

@@ -1,5 +0,0 @@
-<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd"
-    d="M106.163 37.2641H101.212V23.2372H87.1854V18.2862H101.212V4.2587H106.163V18.2862H120.191V23.2372H106.163V37.2641ZM70.2788 52.7828C71.5464 54.2213 73.8876 55.6569 77.3059 57.0961C80.3783 55.7891 82.5529 54.3858 83.831 52.8827C85.1099 51.3788 85.7497 49.6254 85.7497 47.6209C85.7497 45.4231 84.9714 43.6746 83.4134 42.3782C81.8561 41.0824 79.7118 40.4356 76.9846 40.4356C74.2968 40.4356 72.1918 41.088 70.6662 42.3943C69.1412 43.7006 68.3777 45.4442 68.3777 47.6209C68.3777 49.6254 69.0104 51.3472 70.2788 52.7828ZM69.0217 66.3583C67.5832 68.0449 66.8633 70.0648 66.8633 72.4166C66.8633 75.0306 67.759 77.0667 69.5532 78.5269C71.3467 79.9872 73.8658 80.7142 77.1119 80.7142C80.315 80.7142 82.8053 79.9549 84.5883 78.4299C86.3719 76.905 87.2655 74.8148 87.2655 72.1558C87.2655 70.0438 86.4282 68.1652 84.7507 66.5221C83.0739 64.8762 80.1526 63.2817 75.9848 61.7349C72.7824 63.1277 70.4616 64.6688 69.0217 66.3583ZM65.0585 54.0083C63.7698 52.039 63.1237 49.8328 63.1237 47.3917C63.1237 43.9298 64.3857 41.1689 66.9111 39.1103C69.4358 37.0524 72.814 36.0225 77.0479 36.0225C81.3464 36.0225 84.7507 37.0356 87.2655 39.0618C89.7797 41.088 91.0368 43.8869 91.0368 47.4592C91.0368 49.8117 90.3168 51.9553 88.8762 53.8951C87.4378 55.8327 85.1388 57.5967 81.9792 59.1863C85.8031 61.0368 88.5226 62.9822 90.1333 65.019C91.7469 67.0557 92.5519 69.4131 92.5519 72.0911C92.5519 76.0564 91.1858 79.2188 88.4586 81.5825C85.7286 83.9448 81.989 85.1273 77.2426 85.1273C72.2136 85.1273 68.3461 84.0094 65.6378 81.7786C62.9296 79.545 61.5762 76.3826 61.5762 72.2872C61.5762 66.8216 64.8645 62.5617 71.4395 59.5126C68.474 57.8154 66.3472 55.9804 65.0585 54.0083ZM62.0185 123.903C27.8404 123.903 0.133301 96.1964 0.133301 62.0183C0.133301 27.8402 27.8404 0.133118 62.0185 0.133118C69.2333 0.133118 76.1606 1.3677 82.5986 3.63789C82.6471 4.73608 82.6471 8.81386 82.6471 8.79698C76.2274 6.28845 69.3261 5.0841 62.0185 5.0841C30.5746 5.0841 5.08428 30.5744 5.08428 62.0183C5.08428 93.4621 30.5746 118.952 62.0185 118.952C93.4623 118.952 118.953 93.4621 118.953 62.0183C118.953 54.7296 117.583 47.7608 115.087 41.3552C117.817 41.3897 119.9 41.3897 120.38 41.3833C122.662 47.8368 123.904 54.7823 123.904 62.0183C123.904 96.1964 96.1966 123.903 62.0185 123.903ZM32.6789 50.2019L29.8434 46.4791L42.3165 36.7101H46.8273V84.4728H41.6071V50.4311C41.6071 47.5991 41.6922 44.9212 41.8651 42.3943C41.413 42.852 40.9082 43.3322 40.35 43.8335C39.7918 44.3341 37.2347 46.4573 32.6789 50.2019Z"
-    transform="matrix(0.2903226,0,0,0.2903226,0,0)" />
-</svg>

package/common/icons/touch-x.svg

@@ -1,6 +0,0 @@
-<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M24.0009 16V44L18.9954 38.6608C17.6116 37.1847 15.2993 37.0924 13.8022 38.4534C12.2651 39.8507 12.1776 42.2387 13.6084 43.7447L25.7344 56.509C28.4585 59.3765 32.2403 61 36.1954 61H37.181C43.1567 61 48.0009 56.1558 48.0009 50.1801V39.75C48.0009 36.4363 45.3146 33.75 42.0009 33.75C42.0009 31.6789 40.322 30 38.2509 30H36.0009C36.0009 27.6528 34.0981 25.75 31.7509 25.75H30.0009V16C30.0009 14.3431 28.6577 13 27.0009 13C25.344 13 24.0009 14.3431 24.0009 16Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M27.0009 14C25.8963 14 25.0009 14.8954 25.0009 16V44C25.0009 44.4103 24.7502 44.779 24.3686 44.9299C23.987 45.0808 23.552 44.9833 23.2714 44.6839L18.2659 39.3447C17.2557 38.2672 15.5677 38.1998 14.4748 39.1933C13.3528 40.2134 13.2889 41.9566 14.3334 43.0559L26.4594 55.8202C28.9947 58.489 32.5144 60 36.1954 60H37.181C42.6044 60 47.0009 55.6035 47.0009 50.1801V39.75C47.0009 37.331 45.2831 35.3133 43.0009 34.85V39.5C43.0009 40.0523 42.5532 40.5 42.0009 40.5C41.4486 40.5 41.0009 40.0523 41.0009 39.5V33.75C41.0009 32.2312 39.7697 31 38.2509 31H37.0009V39C37.0009 39.5523 36.5532 40 36.0009 40C35.4486 40 35.0009 39.5523 35.0009 39V30C35.0009 28.2051 33.5458 26.75 31.7509 26.75H31.0009V39C31.0009 39.5523 30.5532 40 30.0009 40C29.4486 40 29.0009 39.5523 29.0009 39V16C29.0009 14.8954 28.1055 14 27.0009 14ZM31.0009 24.75V16C31.0009 13.7909 29.21 12 27.0009 12C24.7918 12 23.0009 13.7909 23.0009 16V41.4712L19.7249 37.9769C17.9675 36.1022 15.0308 35.985 13.1295 37.7135C11.1774 39.4881 11.0663 42.5208 12.8834 44.4334L25.0094 57.1977C27.9223 60.2639 31.9662 62 36.1954 62H37.181C43.709 62 49.0009 56.7081 49.0009 50.1801V39.75C49.0009 36.1912 46.3452 33.2528 42.9075 32.8082C42.4706 30.636 40.5518 29 38.2509 29H36.9058C36.4388 26.5788 34.3084 24.75 31.7509 24.75H31.0009Z" fill="#212121"/>
-<path d="M12.4142 9.58548L11.8284 8.9997H52.1716L51.5858 9.58548C51.1575 10.0137 50.9626 10.5565 51.0037 11.1017C51.0428 11.6195 51.2877 12.0696 51.6089 12.3908C51.9301 12.712 52.3802 12.9569 52.898 12.996C53.4432 13.0371 53.986 12.8421 54.4142 12.4139L55.5866 11.2413C56.721 10.1066 58.1401 8.68713 58.4119 8.41626C59.1895 7.64104 59.1921 6.36338 58.4142 5.58549L54.4142 1.58548C53.986 1.15724 53.4432 0.962315 52.898 1.00342C52.3802 1.04246 51.9301 1.28741 51.6089 1.60862C51.2877 1.92984 51.0428 2.37985 51.0037 2.89768C50.9626 3.4429 51.1575 3.98567 51.5858 4.41391L52.1716 4.9997H11.8284L12.4142 4.41391C12.8425 3.98567 13.0374 3.4429 12.9963 2.89769C12.9572 2.37985 12.7123 1.92984 12.3911 1.60863C12.0699 1.28741 11.6198 1.04246 11.102 1.00342C10.5568 0.962315 10.014 1.15725 9.58579 1.58548L5.58579 5.58548C4.80474 6.36653 4.80474 7.63286 5.58579 8.41391L9.58579 12.4139C10.014 12.8421 10.5568 13.0371 11.102 12.996C11.6198 12.9569 12.0699 12.712 12.3911 12.3908C12.7123 12.0696 12.9572 11.6195 12.9963 11.1017C13.0374 10.5565 12.8424 10.0137 12.4142 9.58548Z" fill="white"/>
-<path d="M52.2929 3.70711C51.9024 3.31658 51.9024 2.68342 52.2929 2.29289C52.6834 1.90237 53.3166 1.90237 53.7071 2.29289L57.7071 6.29289C57.9024 6.48815 58 6.74408 58 7C58 7.26609 57.9025 7.50588 57.718 7.69609C56.4022 9.05287 55.0435 10.3707 53.7071 11.7071C53.3166 12.0976 52.6834 12.0976 52.2929 11.7071C51.9024 11.3166 51.9024 10.6834 52.2929 10.2929L54.5858 8H9.41421L11.7071 10.2929C12.0976 10.6834 12.0976 11.3166 11.7071 11.7071C11.3166 12.0976 10.6834 12.0976 10.2929 11.7071L6.29289 7.70711C5.90237 7.31658 5.90237 6.68342 6.29289 6.29289L10.2929 2.29289C10.6834 1.90237 11.3166 1.90237 11.7071 2.29289C12.0976 2.68342 12.0976 3.31658 11.7071 3.70711L9.41421 6H54.5858L52.2929 3.70711Z" fill="#212121"/>
-</svg>