@sima-land/moleculas 16.0.0-alpha.17 → 16.0.0-alpha.19

package/common/components/badge/badge.d.ts

@@ -1,16 +1,5 @@
-import { AnchorHTMLAttributes } from 'react';
-export interface BadgeField {
-    type: 'text' | 'timer' | 'svg-url';
-    value: string;
-}
-export interface BadgeProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
-    /** Основной цвет, используется как цвет обводки, иконок и текста. */
-    color?: string;
-    /** Содержимое шильдика. */
-    fields: Array<BadgeField>;
-    /** Идентификатор для систем автоматизированного тестирования. */
-    'data-testid'?: string;
-}
+/// <reference types="react" />
+import type { BadgeProps } from './types';
 /**
  * Шильдик.
  * @param props Свойства.

package/common/components/badge/badge.js

@@ -15,9 +15,14 @@ const cx = bind_1.default.bind(badge_module_scss_1.default);
  * @param props Свойства.
  * @return Элемент.
  */
-exports.Badge = (0, react_1.forwardRef)(function Badge({ className, color, fields, href, style, 'data-testid': testId = 'badge', ...restProps }, ref) {
+exports.Badge = (0, react_1.forwardRef)(function Badge({ className, color, coloring = 'outline', fields, href, style, shape = 'unset', withHoverEffect = Boolean(href), 'data-testid': testId = 'badge', ...restProps }, ref) {
     const iconOnly = fields.length === 1 && fields[0].type === 'svg-url';
-    return ((0, jsx_runtime_1.jsx)("a", { ref: ref, ...restProps, "data-testid": testId, href: href, style: { ...style, '--badge-color': color }, className: cx('root', iconOnly && 'icon-only', href && 'interactive', className), children: iconOnly ? ((0, jsx_runtime_1.jsx)("img", { className: cx('icon'), src: fields[0].value, alt: '' })) : (
+    const rootClassName = cx('root', iconOnly && 'icon-only', withHoverEffect && 'with-hover-effect', shape === 'round' && 'shape-round', shape === 'pill' && 'shape-pill', shape !== 'pill' && !iconOnly && 'padding-x-default', shape === 'pill' && !iconOnly && 'padding-x-pill', coloring === 'outline' && 'coloring-outline', coloring === 'fill' && 'coloring-fill', className);
+    const rootStyle = {
+        '--badge-color': color,
+        ...style,
+    };
+    return ((0, jsx_runtime_1.jsx)("a", { ref: ref, ...restProps, "data-testid": testId, href: href, style: rootStyle, className: rootClassName, children: iconOnly ? ((0, jsx_runtime_1.jsx)("img", { className: cx('icon'), src: fields[0].value, alt: '' })) : (
         // вложенный span нужен для того чтобы объединить `display: inline-flex` и `text-overflow: ellipsis`
         (0, jsx_runtime_1.jsx)("span", { className: cx('content'), children: fields.reduce((acc, item, i) => {
                 let result = null;

package/common/components/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../src/common/components/badge/badge.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAAoE;AACpE,wDAAqD;AACrD,2DAAyC;AACzC,4EAAyC;AAkBzC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,2BAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACU,QAAA,KAAK,GAAG,IAAA,kBAAU,EAAgC,SAAS,KAAK,CAC3E,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,GAAG,OAAO,EAAE,GAAG,SAAS,EAAE,EACxF,GAAG;IAEH,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC;IAErE,OAAO,CACL,8BACE,GAAG,EAAE,GAAG,KACJ,SAAS,iBACA,MAAM,EACnB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,eAAe,EAAE,KAAK,EAAS,EAClD,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,QAAQ,IAAI,WAAW,EAAE,IAAI,IAAI,aAAa,EAAE,SAAS,CAAC,EAChF,QAAQ,EACN,QAAQ,CAAC,CAAC,CAAC,CACT,gCAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,EAAC,EAAE,GAAG,CAC5D,CAAC,CAAC,CAAC;QACF,oGAAoG;QACpG,iCAAM,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,YAC3B,MAAM,CAAC,MAAM,CAAc,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE;gBAC3C,IAAI,MAAM,GAAG,IAAI,CAAC;gBAElB,gGAAgG;gBAChG,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;oBAClB,KAAK,MAAM;wBACT,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;wBACpB,MAAM;oBACR,KAAK,OAAO;wBACV,MAAM,GAAG,CACP,uBAAC,aAAK,IAAS,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,GAAG,EAAE,EAAE,MAAM,EAAE,cAAc,IAA/D,CAAC,CAAkE,CAChF,CAAC;wBACF,MAAM;gBACV,CAAC;gBAED,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBAEjB,CAAC,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBAEvC,OAAO,GAAG,CAAC;YACb,CAAC,EAAE,EAAE,CAAC,GACD,CACR,GAEH,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH;;;;GAIG;AACH,MAAM,cAAc,GAAG,CAAC,EACtB,IAAI,EACJ,KAAK,EACL,OAAO,GAKR,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,KAAK,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAElF;;;;GAIG;AACH,MAAM,UAAU,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC"}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../src/common/components/badge/badge.tsx"],"names":[],"mappings":"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"}

package/common/components/badge/badge.module.scss

@@ -2,39 +2,80 @@ $badge-size: 20px;
 $icon-size: 14px;
 
 .root {
-  --badge-color: #aaa;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: $badge-size;
-  color: var(--badge-color);
-
-  // используем border т.к. на Safari box-shadow пропадает при уменьшении масштаба
-  border: 1px solid var(--badge-color);
-  padding: 0 5px; // учитываем border
   font-weight: bold;
   font-size: 12px;
   line-height: 16px;
   max-width: 100%;
   min-width: $badge-size;
   text-decoration: none;
-  &.interactive:hover {
-    cursor: pointer;
-    opacity: 0.72;
-  }
-  &.icon-only {
-    width: $badge-size;
-    padding: 0;
-  }
-  .content {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .icon {
-    display: inline-block;
-    width: $icon-size;
-    height: $icon-size;
-    line-height: $icon-size;
+}
+
+.padding-x-default {
+  // ВАЖНО: учитываем border
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.padding-x-pill {
+  // ВАЖНО: учитываем border
+  padding-left: 7px;
+  padding-right: 8px;
+}
+
+.shape-round {
+  border-radius: 4px;
+}
+
+.shape-pill {
+  border-radius: 99999px;
+}
+
+.with-hover-effect:hover {
+  position: relative;
+  cursor: pointer;
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #fff;
+    opacity: 0.16;
   }
 }
+
+.coloring-outline {
+  color: var(--badge-color, #aaa);
+
+  // ВАЖНО: используем border т.к. на Safari box-shadow пропадает при уменьшении масштаба
+  border: 1px solid var(--badge-border-color, var(--badge-color, #aaa));
+}
+
+.coloring-fill {
+  background: var(--badge-color, #aaa);
+  color: var(--badge-text-color, #fff);
+}
+
+.icon-only {
+  width: $badge-size;
+}
+
+// содержимое
+.content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.icon {
+  display: inline-block;
+  width: $icon-size;
+  height: $icon-size;
+  line-height: $icon-size;
+}

package/common/components/badge/index.d.ts

@@ -1 +1,2 @@
-export { type BadgeProps, type BadgeField, Badge } from './badge';
+export type { BadgeProps, BadgeField } from './types';
+export { Badge } from './badge';

package/common/components/badge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/common/components/badge/index.ts"],"names":[],"mappings":";;;AAAA,iCAAkE;AAAvB,8FAAA,KAAK,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/common/components/badge/index.ts"],"names":[],"mappings":";;;AACA,iCAAgC;AAAvB,8FAAA,KAAK,OAAA"}

package/common/components/badge/types.d.ts

@@ -0,0 +1,26 @@
+import type { AnchorHTMLAttributes, CSSProperties } from 'react';
+export interface BadgeField {
+    type: 'text' | 'timer' | 'svg-url';
+    value: string;
+}
+export interface BadgeStyle extends CSSProperties {
+    '--badge-color'?: string;
+    '--badge-text-color'?: string;
+    '--badge-border-color'?: string;
+}
+export interface BadgeProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
+    /** Основной цвет, используется как цвет обводки, иконок и текста. */
+    color?: string;
+    /** Как применится цвет. */
+    coloring?: 'fill' | 'outline' | 'unset';
+    /** Содержимое шильдика. */
+    fields: Array<BadgeField>;
+    /** Форма скруглений. */
+    shape?: 'round' | 'pill' | 'unset';
+    /** Нужен ли эффект при наведении. */
+    withHoverEffect?: boolean;
+    /** Стили. */
+    style?: BadgeStyle;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
+}

package/common/components/badge/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/common/components/badge/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/common/components/badge/types.ts"],"names":[],"mappings":""}

package/common/components/media-modal/parts/product-brief.d.ts

@@ -1,13 +1,15 @@
-import { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+import { HTMLAttributes, ImgHTMLAttributes, MouseEventHandler, ReactNode } from 'react';
 export interface ProductBriefProps extends HTMLAttributes<HTMLDivElement> {
     size?: 's' | 'l';
     title?: string;
     price?: string | number;
+    priceReplacer?: ReactNode;
     currency?: string;
     footer?: ReactNode;
     href?: string;
     onLinkClick?: MouseEventHandler<HTMLAnchorElement>;
     imageSrc?: string;
+    imageProps?: ImgHTMLAttributes<HTMLImageElement>;
     loading?: boolean;
 }
 /**
@@ -15,4 +17,4 @@ export interface ProductBriefProps extends HTMLAttributes<HTMLDivElement> {
  * @param props Свойства.
  * @return Элемент.
  */
-export declare function ProductBrief({ size: sizeProp, imageSrc, title, price, currency, footer, className, href, onLinkClick, loading, ...restProps }: ProductBriefProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductBrief({ size: sizeProp, imageSrc, imageProps, title, price, priceReplacer, currency, footer, className, href, onLinkClick, loading, ...restProps }: ProductBriefProps): import("react/jsx-runtime").JSX.Element;

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

@@ -18,14 +18,15 @@ const cx = bind_1.default.bind(product_brief_module_scss_1.default);
  * @param props Свойства.
  * @return Элемент.
  */
-function ProductBrief({ size: sizeProp, imageSrc, title, price, currency, footer, className, href, onLinkClick, loading, ...restProps }) {
+function ProductBrief({ size: sizeProp, imageSrc, imageProps, title, price, priceReplacer, currency, footer, className, href, onLinkClick, loading, ...restProps }) {
     const desktop = (0, hooks_1.useBreakpoint)('xs+');
     const { failed, handleError } = (0, hooks_2.useImageStub)(imageSrc);
     const size = (sizeProp !== null && sizeProp !== void 0 ? sizeProp : desktop) ? 'l' : 's';
+    const priceDefined = typeof price === 'number' || typeof price === 'string';
     if (loading) {
         return (0, jsx_runtime_1.jsx)(ProductBriefSkeleton, { size: size });
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: cx('root', `size-${size}`, className), ...restProps, children: [(0, jsx_runtime_1.jsx)("a", { className: product_brief_module_scss_1.default.image, href: href, onClick: onLinkClick, children: (0, jsx_runtime_1.jsxs)(image_overlay_1.ImageOverlay, { className: product_brief_module_scss_1.default.overlay, children: [failed && (0, jsx_runtime_1.jsx)(img_stub_1.ImgStub, { className: product_brief_module_scss_1.default.stub }), !failed && (0, jsx_runtime_1.jsx)("img", { src: imageSrc, onError: handleError })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: product_brief_module_scss_1.default.info, children: [(0, jsx_runtime_1.jsx)("a", { className: product_brief_module_scss_1.default.title, href: href, onClick: onLinkClick, children: title }), price && (0, jsx_runtime_1.jsx)(price_1.Price, { className: product_brief_module_scss_1.default.price, value: price, currencyGrapheme: currency })] }), footer && (0, jsx_runtime_1.jsx)("div", { className: product_brief_module_scss_1.default.footer, children: footer })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: cx('root', `size-${size}`, className), ...restProps, children: [(0, jsx_runtime_1.jsx)("a", { className: product_brief_module_scss_1.default.image, href: href, onClick: onLinkClick, children: (0, jsx_runtime_1.jsxs)(image_overlay_1.ImageOverlay, { className: product_brief_module_scss_1.default.overlay, children: [failed && (0, jsx_runtime_1.jsx)(img_stub_1.ImgStub, { className: product_brief_module_scss_1.default.stub }), !failed && (0, jsx_runtime_1.jsx)("img", { src: imageSrc, ...imageProps, onError: handleError })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: product_brief_module_scss_1.default.info, children: [(0, jsx_runtime_1.jsx)("a", { className: product_brief_module_scss_1.default.title, href: href, onClick: onLinkClick, children: title }), (priceDefined || priceReplacer) && ((0, jsx_runtime_1.jsx)("div", { className: product_brief_module_scss_1.default.price, children: priceDefined ? (0, jsx_runtime_1.jsx)(price_1.Price, { value: price, currencyGrapheme: currency }) : priceReplacer }))] }), footer && (0, jsx_runtime_1.jsx)("div", { className: product_brief_module_scss_1.default.footer, children: footer })] }));
 }
 exports.ProductBrief = ProductBrief;
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"product-brief.js","sourceRoot":"","sources":["../../../../../src/common/components/media-modal/parts/product-brief.tsx"],"names":[],"mappings":";;;;;;;AACA,yGAAqG;AACrG,wDAAqD;AACrD,wDAA6D;AAC7D,0CAA8C;AAC9C,2DAAyC;AACzC,4FAAiD;AACjD,6CAAyC;AAczC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,mCAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,YAAY,CAAC,EAC3B,IAAI,EAAE,QAAQ,EACd,QAAQ,EACR,KAAK,EACL,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,IAAI,EACJ,WAAW,EACX,OAAO,EACP,GAAG,SAAS,EACM;IAClB,MAAM,OAAO,GAAG,IAAA,qBAAa,EAAC,KAAK,CAAC,CAAC;IACrC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,oBAAY,EAAC,QAAQ,CAAC,CAAC;IACvD,MAAM,IAAI,GAAG,CAAA,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,OAAO,EAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;IAE7C,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,uBAAC,oBAAoB,IAAC,IAAI,EAAE,IAAI,GAAI,CAAC;IAC9C,CAAC;IAED,OAAO,CACL,iCAAK,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,QAAQ,IAAI,EAAE,EAAE,SAAS,CAAC,KAAM,SAAS,aAClE,8BAAG,SAAS,EAAE,mCAAM,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,YAC1D,wBAAC,4BAAY,IAAC,SAAS,EAAE,mCAAM,CAAC,OAAO,aACpC,MAAM,IAAI,uBAAC,kBAAO,IAAC,SAAS,EAAE,mCAAM,CAAC,IAAI,GAAI,EAC7C,CAAC,MAAM,IAAI,gCAAK,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,GAAI,IAC3C,GACb,EAEJ,iCAAK,SAAS,EAAE,mCAAM,CAAC,IAAI,aACzB,8BAAG,SAAS,EAAE,mCAAM,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,YACzD,KAAK,GACJ,EACH,KAAK,IAAI,uBAAC,aAAK,IAAC,SAAS,EAAE,mCAAM,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,QAAQ,GAAI,IAClF,EAEL,MAAM,IAAI,gCAAK,SAAS,EAAE,mCAAM,CAAC,MAAM,YAAG,MAAM,GAAO,IACpD,CACP,CAAC;AACJ,CAAC;AAxCD,oCAwCC;AAED;;;;GAIG;AACH,SAAS,oBAAoB,CAAC,EAAE,IAAI,EAAO;IACzC,OAAO,CACL,iCAAK,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,aAClC,iCAAW,EACX,iCAAW,EACX,iCAAW,IACP,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"product-brief.js","sourceRoot":"","sources":["../../../../../src/common/components/media-modal/parts/product-brief.tsx"],"names":[],"mappings":";;;;;;;AACA,yGAAqG;AACrG,wDAAqD;AACrD,wDAA6D;AAC7D,0CAA8C;AAC9C,2DAAyC;AACzC,4FAAiD;AACjD,6CAAyC;AAgBzC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,mCAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,YAAY,CAAC,EAC3B,IAAI,EAAE,QAAQ,EACd,QAAQ,EACR,UAAU,EACV,KAAK,EACL,KAAK,EACL,aAAa,EACb,QAAQ,EACR,MAAM,EACN,SAAS,EACT,IAAI,EACJ,WAAW,EACX,OAAO,EACP,GAAG,SAAS,EACM;IAClB,MAAM,OAAO,GAAG,IAAA,qBAAa,EAAC,KAAK,CAAC,CAAC;IACrC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,oBAAY,EAAC,QAAQ,CAAC,CAAC;IACvD,MAAM,IAAI,GAAG,CAAA,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,OAAO,EAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;IAC7C,MAAM,YAAY,GAAG,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC;IAE5E,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,uBAAC,oBAAoB,IAAC,IAAI,EAAE,IAAI,GAAI,CAAC;IAC9C,CAAC;IAED,OAAO,CACL,iCAAK,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,QAAQ,IAAI,EAAE,EAAE,SAAS,CAAC,KAAM,SAAS,aAClE,8BAAG,SAAS,EAAE,mCAAM,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,YAC1D,wBAAC,4BAAY,IAAC,SAAS,EAAE,mCAAM,CAAC,OAAO,aACpC,MAAM,IAAI,uBAAC,kBAAO,IAAC,SAAS,EAAE,mCAAM,CAAC,IAAI,GAAI,EAC7C,CAAC,MAAM,IAAI,gCAAK,GAAG,EAAE,QAAQ,KAAM,UAAU,EAAE,OAAO,EAAE,WAAW,GAAI,IAC3D,GACb,EAEJ,iCAAK,SAAS,EAAE,mCAAM,CAAC,IAAI,aACzB,8BAAG,SAAS,EAAE,mCAAM,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,YACzD,KAAK,GACJ,EACH,CAAC,YAAY,IAAI,aAAa,CAAC,IAAI,CAClC,gCAAK,SAAS,EAAE,mCAAM,CAAC,KAAK,YACzB,YAAY,CAAC,CAAC,CAAC,uBAAC,aAAK,IAAC,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,QAAQ,GAAI,CAAC,CAAC,CAAC,aAAa,GAC/E,CACP,IACG,EAEL,MAAM,IAAI,gCAAK,SAAS,EAAE,mCAAM,CAAC,MAAM,YAAG,MAAM,GAAO,IACpD,CACP,CAAC;AACJ,CAAC;AA/CD,oCA+CC;AAED;;;;GAIG;AACH,SAAS,oBAAoB,CAAC,EAAE,IAAI,EAAO;IACzC,OAAO,CACL,iCAAK,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,aAClC,iCAAW,EACX,iCAAW,EACX,iCAAW,IACP,CACP,CAAC;AACJ,CAAC"}

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

@@ -38,6 +38,10 @@
   font-weight: 600;
 }
 
+.title + .price {
+  margin-top: 4px;
+}
+
 .footer {
   display: flex;
 }
@@ -73,7 +77,7 @@
 
 .size-l {
   column-gap: 16px;
-  row-gap: 16px;
+  row-gap: 12px;
   grid-template-columns: 112px 1fr;
   .image {
     width: 112px;

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

@@ -1,4 +1,5 @@
 @use 'node_modules/@sima-land/ui-nucleons/colors';
+@use 'node_modules/@sima-land/ui-nucleons/breakpoints';
 
 .root {
   display: block;
@@ -18,6 +19,22 @@
     .info {
       width: 80px;
     }
+    &.loading {
+      --thumbnail-color: #{colors.$basic-gray4};
+      --thumbnail-border-size: 0;
+      .content {
+        background: colors.$basic-gray4;
+      }
+      .info {
+        width: 80px;
+        height: var(--thumbnail-content-size);
+        background: colors.$basic-gray4;
+        border-radius: 4px;
+        @include breakpoints.gte('xs') {
+          height: 34px;
+        }
+      }
+    }
   }
   &.size-l {
     max-width: 80px;
@@ -25,6 +42,19 @@
     .content + .info {
       margin-top: 2px;
     }
+    &.loading {
+      --thumbnail-color: #{colors.$basic-gray4};
+      --thumbnail-border-size: 0;
+      .content {
+        background: colors.$basic-gray4;
+      }
+      .info {
+        width: 80px;
+        height: 34px;
+        background: colors.$basic-gray4;
+        border-radius: 4px;
+      }
+    }
   }
   &.iconic {
     --thumbnail-border-size: 2px;
@@ -37,19 +67,6 @@
     cursor: pointer;
     --thumbnail-color: #{colors.$basic-gray38};
   }
-  &.loading {
-    --thumbnail-color: #{colors.$basic-gray4};
-    --thumbnail-border-size: 0;
-    .content {
-      background: colors.$basic-gray4;
-    }
-    .info {
-      width: 80px;
-      height: 34px;
-      background: colors.$basic-gray4;
-      border-radius: 4px;
-    }
-  }
 }
 
 .content {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sima-land/moleculas",
   "type": "commonjs",
-  "version": "16.0.0-alpha.17",
+  "version": "16.0.0-alpha.19",
   "repository": "ssh://git@github.com:sima-land/moleculas.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "classnames": "^2.3.2",
-    "date-fns": "^2.29.3",
+    "date-fns": "^3.3.1",
     "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
@@ -72,7 +72,7 @@
     "webpack": "^5.64.4"
   },
   "peerDependencies": {
-    "@sima-land/ui-nucleons": "^45.0.0-alpha.12",
+    "@sima-land/ui-nucleons": "^45.0.0-alpha.13",
     "@sima-land/ui-quarks": "^4.6.0",
     "react": "^17.0 || ^18.0"
   }