@vkontakte/vkui 7.0.1 → 7.1.0

package/dist/cssm/components/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { type CSSCustomProperties } from '../../types';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { ImageBadge, type ImageBadgeProps } from './ImageBadge/ImageBadge';\nimport styles from './Image.module.css';\n\nexport type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };\n\nconst IMAGE_DEFAULT_SIZE = 48;\n\nexport interface ImageProps extends Omit<ImageBaseProps, 'badge'> {\n  /**\n   * Размер закругления.\n   */\n  borderRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между сторонами начала блока и строки\n   */\n  borderStartStartRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между стороной начала блока и стороной конца строки\n   */\n  borderStartEndRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между стороной конца блока и стороной начала строки\n   */\n  borderEndStartRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между сторонами конца блока и строки\n   */\n  borderEndEndRadius?: 's' | 'l' | 'm';\n}\n\nconst getBorderRadiusBySize = (\n  size: Exclude<ImageBaseProps['size'], undefined>,\n  borderRadius: Exclude<ImageProps['borderRadius'], undefined>,\n) => {\n  switch (borderRadius) {\n    case 's': {\n      if (size <= 32) {\n        return 2;\n      }\n      if (size <= 56) {\n        return 3;\n      }\n      return 4;\n    }\n    case 'm': {\n      if (size <= 32) {\n        return 3;\n      }\n      if (size <= 48) {\n        return 4;\n      }\n      if (size <= 72) {\n        return 6;\n      }\n      if (size <= 80) {\n        return 8;\n      }\n      return 10;\n    }\n    case 'l': {\n      if (size <= 16) {\n        return 4;\n      }\n      if (size <= 20) {\n        return 5;\n      }\n      if (size <= 32) {\n        return 6;\n      }\n      if (size <= 40) {\n        return 8;\n      }\n      if (size <= 48) {\n        return 10;\n      }\n      if (size <= 56) {\n        return 12;\n      }\n      if (size <= 64) {\n        return 14;\n      }\n      return 16;\n    }\n  }\n};\n\nconst getBorderRadiusBySizeInPx = (\n  size: Exclude<ImageBaseProps['size'], undefined>,\n  borderRadius: ImageProps['borderRadius'],\n) => {\n  if (!borderRadius) {\n    return undefined;\n  }\n\n  return `${getBorderRadiusBySize(size, borderRadius)}px`;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Image\n */\nexport const Image: React.FC<ImageProps> & {\n  Badge: typeof ImageBadge;\n  Overlay: typeof ImageBase.Overlay;\n} = ({\n  size = IMAGE_DEFAULT_SIZE,\n  borderRadius = 'm',\n  borderStartStartRadius,\n  borderStartEndRadius,\n  borderEndStartRadius,\n  borderEndEndRadius,\n  style,\n  className,\n  objectFit = 'cover',\n  ...restProps\n}: ImageProps) => {\n  const borderStyles: CSSCustomProperties<string | undefined> = React.useMemo(\n    () => ({\n      '--vkui_internal--Image_border_radius': getBorderRadiusBySizeInPx(size, borderRadius),\n      '--vkui_internal--Image_border_start_start_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderStartStartRadius,\n      ),\n      '--vkui_internal--Image_border_start_end_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderStartEndRadius,\n      ),\n      '--vkui_internal--Image_border_end_start_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderEndStartRadius,\n      ),\n      '--vkui_internal--Image_border_end_end_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderEndEndRadius,\n      ),\n    }),\n    [\n      borderRadius,\n      borderStartStartRadius,\n      borderStartEndRadius,\n      borderEndStartRadius,\n      borderEndEndRadius,\n      size,\n    ],\n  );\n\n  return (\n    <ImageBase\n      {...restProps}\n      objectFit={objectFit}\n      size={size}\n      style={mergeStyle(borderStyles, style)}\n      className={classNames(\n        className,\n        styles.host,\n        borderStartStartRadius && styles.borderStartStartRadius,\n        borderStartEndRadius && styles.borderStartEndRadius,\n        borderEndStartRadius && styles.borderEndStartRadius,\n        borderEndEndRadius && styles.borderEndEndRadius,\n      )}\n    />\n  );\n};\n\nImage.displayName = 'Image';\n\nImage.Badge = ImageBadge;\nImage.Badge.displayName = 'Image.Badge';\n\nImage.Overlay = ImageBase.Overlay;\nImage.Overlay.displayName = 'Image.Overlay';\n"],"names":["React","classNames","mergeStyle","ImageBase","ImageBadge","styles","IMAGE_DEFAULT_SIZE","getBorderRadiusBySize","size","borderRadius","getBorderRadiusBySizeInPx","undefined","Image","borderStartStartRadius","borderStartEndRadius","borderEndStartRadius","borderEndEndRadius","style","className","objectFit","restProps","borderStyles","useMemo","host","displayName","Badge","Overlay"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,8BAA2B;AAEtD,SAASC,SAAS,QAAyD,4BAAyB;AACpG,SAASC,UAAU,QAA8B,6BAA0B;AAC3E,OAAOC,YAAY,qBAAqB;AAIxC,MAAMC,qBAAqB;AAyB3B,MAAMC,wBAAwB,CAC5BC,MACAC;IAEA,OAAQA;QACN,KAAK;YAAK;gBACR,IAAID,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;QACA,KAAK;YAAK;gBACR,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;QACA,KAAK;YAAK;gBACR,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;IACF;AACF;AAEA,MAAME,4BAA4B,CAChCF,MACAC;IAEA,IAAI,CAACA,cAAc;QACjB,OAAOE;IACT;IAEA,OAAO,GAAGJ,sBAAsBC,MAAMC,cAAc,EAAE,CAAC;AACzD;AAEA;;CAEC,GACD,OAAO,MAAMG,QAGT,CAAC,EACHJ,OAAOF,kBAAkB,EACzBG,eAAe,GAAG,EAClBI,sBAAsB,EACtBC,oBAAoB,EACpBC,oBAAoB,EACpBC,kBAAkB,EAClBC,KAAK,EACLC,SAAS,EACTC,YAAY,OAAO,EACnB,GAAGC,WACQ;IACX,MAAMC,eAAwDrB,MAAMsB,OAAO,CACzE,IAAO,CAAA;YACL,wCAAwCZ,0BAA0BF,MAAMC;YACxE,oDAAoDC,0BAClDF,MACAK;YAEF,kDAAkDH,0BAChDF,MACAM;YAEF,kDAAkDJ,0BAChDF,MACAO;YAEF,gDAAgDL,0BAC9CF,MACAQ;QAEJ,CAAA,GACA;QACEP;QACAI;QACAC;QACAC;QACAC;QACAR;KACD;IAGH,qBACE,KAACL;QACE,GAAGiB,SAAS;QACbD,WAAWA;QACXX,MAAMA;QACNS,OAAOf,WAAWmB,cAAcJ;QAChCC,WAAWjB,WACTiB,WACAb,OAAOkB,IAAI,EACXV,0BAA0BR,OAAOQ,sBAAsB,EACvDC,wBAAwBT,OAAOS,oBAAoB,EACnDC,wBAAwBV,OAAOU,oBAAoB,EACnDC,sBAAsBX,OAAOW,kBAAkB;;AAIvD,EAAE;AAEFJ,MAAMY,WAAW,GAAG;AAEpBZ,MAAMa,KAAK,GAAGrB;AACdQ,MAAMa,KAAK,CAACD,WAAW,GAAG;AAE1BZ,MAAMc,OAAO,GAAGvB,UAAUuB,OAAO;AACjCd,MAAMc,OAAO,CAACF,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { type CSSCustomProperties } from '../../types';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { ImageBadge, type ImageBadgeProps } from './ImageBadge/ImageBadge';\nimport styles from './Image.module.css';\n\nexport type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };\n\nconst IMAGE_DEFAULT_SIZE = 48;\n\nexport interface ImageProps extends Omit<ImageBaseProps, 'badge'> {\n  /**\n   * Размер закругления.\n   */\n  borderRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между сторонами начала блока и строки\n   */\n  borderStartStartRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между стороной начала блока и стороной конца строки\n   */\n  borderStartEndRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между стороной конца блока и стороной начала строки\n   */\n  borderEndStartRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между сторонами конца блока и строки\n   */\n  borderEndEndRadius?: 's' | 'l' | 'm';\n}\n\nconst getBorderRadiusBySize = (\n  size: Exclude<ImageBaseProps['size'], undefined>,\n  borderRadius: Exclude<ImageProps['borderRadius'], undefined>,\n) => {\n  switch (borderRadius) {\n    case 's': {\n      if (size <= 32) {\n        return 2;\n      }\n      if (size <= 56) {\n        return 3;\n      }\n      return 4;\n    }\n    case 'm': {\n      if (size <= 32) {\n        return 3;\n      }\n      if (size <= 48) {\n        return 4;\n      }\n      if (size <= 72) {\n        return 6;\n      }\n      if (size <= 80) {\n        return 8;\n      }\n      return 10;\n    }\n    case 'l': {\n      if (size <= 16) {\n        return 4;\n      }\n      if (size <= 20) {\n        return 5;\n      }\n      if (size <= 32) {\n        return 6;\n      }\n      if (size <= 40) {\n        return 8;\n      }\n      if (size <= 48) {\n        return 10;\n      }\n      if (size <= 56) {\n        return 12;\n      }\n      if (size <= 64) {\n        return 14;\n      }\n      return 16;\n    }\n  }\n};\n\nconst getBorderRadiusBySizeInPx = (\n  size: Exclude<ImageBaseProps['size'], undefined>,\n  borderRadius: ImageProps['borderRadius'],\n) => {\n  if (!borderRadius) {\n    return undefined;\n  }\n\n  return `${getBorderRadiusBySize(size, borderRadius)}px`;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Image\n */\nexport const Image: React.FC<ImageProps> & {\n  Badge: typeof ImageBadge;\n  Overlay: typeof ImageBase.Overlay;\n  FloatElement: typeof ImageBase.FloatElement;\n} = ({\n  size = IMAGE_DEFAULT_SIZE,\n  borderRadius = 'm',\n  borderStartStartRadius,\n  borderStartEndRadius,\n  borderEndStartRadius,\n  borderEndEndRadius,\n  style,\n  className,\n  objectFit = 'cover',\n  ...restProps\n}: ImageProps) => {\n  const borderStyles: CSSCustomProperties<string | undefined> = React.useMemo(\n    () => ({\n      '--vkui_internal--Image_border_radius': getBorderRadiusBySizeInPx(size, borderRadius),\n      '--vkui_internal--Image_border_start_start_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderStartStartRadius,\n      ),\n      '--vkui_internal--Image_border_start_end_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderStartEndRadius,\n      ),\n      '--vkui_internal--Image_border_end_start_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderEndStartRadius,\n      ),\n      '--vkui_internal--Image_border_end_end_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderEndEndRadius,\n      ),\n    }),\n    [\n      borderRadius,\n      borderStartStartRadius,\n      borderStartEndRadius,\n      borderEndStartRadius,\n      borderEndEndRadius,\n      size,\n    ],\n  );\n\n  return (\n    <ImageBase\n      {...restProps}\n      objectFit={objectFit}\n      size={size}\n      style={mergeStyle(borderStyles, style)}\n      className={classNames(\n        className,\n        styles.host,\n        borderStartStartRadius && styles.borderStartStartRadius,\n        borderStartEndRadius && styles.borderStartEndRadius,\n        borderEndStartRadius && styles.borderEndStartRadius,\n        borderEndEndRadius && styles.borderEndEndRadius,\n      )}\n    />\n  );\n};\n\nImage.displayName = 'Image';\n\nImage.Badge = ImageBadge;\nImage.Badge.displayName = 'Image.Badge';\n\nImage.Overlay = ImageBase.Overlay;\nImage.Overlay.displayName = 'Image.Overlay';\n\nImage.FloatElement = ImageBase.FloatElement;\nImage.FloatElement.displayName = 'Image.FloatElement';\n"],"names":["React","classNames","mergeStyle","ImageBase","ImageBadge","styles","IMAGE_DEFAULT_SIZE","getBorderRadiusBySize","size","borderRadius","getBorderRadiusBySizeInPx","undefined","Image","borderStartStartRadius","borderStartEndRadius","borderEndStartRadius","borderEndEndRadius","style","className","objectFit","restProps","borderStyles","useMemo","host","displayName","Badge","Overlay","FloatElement"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,8BAA2B;AAEtD,SAASC,SAAS,QAAyD,4BAAyB;AACpG,SAASC,UAAU,QAA8B,6BAA0B;AAC3E,OAAOC,YAAY,qBAAqB;AAIxC,MAAMC,qBAAqB;AAyB3B,MAAMC,wBAAwB,CAC5BC,MACAC;IAEA,OAAQA;QACN,KAAK;YAAK;gBACR,IAAID,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;QACA,KAAK;YAAK;gBACR,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;QACA,KAAK;YAAK;gBACR,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;IACF;AACF;AAEA,MAAME,4BAA4B,CAChCF,MACAC;IAEA,IAAI,CAACA,cAAc;QACjB,OAAOE;IACT;IAEA,OAAO,GAAGJ,sBAAsBC,MAAMC,cAAc,EAAE,CAAC;AACzD;AAEA;;CAEC,GACD,OAAO,MAAMG,QAIT,CAAC,EACHJ,OAAOF,kBAAkB,EACzBG,eAAe,GAAG,EAClBI,sBAAsB,EACtBC,oBAAoB,EACpBC,oBAAoB,EACpBC,kBAAkB,EAClBC,KAAK,EACLC,SAAS,EACTC,YAAY,OAAO,EACnB,GAAGC,WACQ;IACX,MAAMC,eAAwDrB,MAAMsB,OAAO,CACzE,IAAO,CAAA;YACL,wCAAwCZ,0BAA0BF,MAAMC;YACxE,oDAAoDC,0BAClDF,MACAK;YAEF,kDAAkDH,0BAChDF,MACAM;YAEF,kDAAkDJ,0BAChDF,MACAO;YAEF,gDAAgDL,0BAC9CF,MACAQ;QAEJ,CAAA,GACA;QACEP;QACAI;QACAC;QACAC;QACAC;QACAR;KACD;IAGH,qBACE,KAACL;QACE,GAAGiB,SAAS;QACbD,WAAWA;QACXX,MAAMA;QACNS,OAAOf,WAAWmB,cAAcJ;QAChCC,WAAWjB,WACTiB,WACAb,OAAOkB,IAAI,EACXV,0BAA0BR,OAAOQ,sBAAsB,EACvDC,wBAAwBT,OAAOS,oBAAoB,EACnDC,wBAAwBV,OAAOU,oBAAoB,EACnDC,sBAAsBX,OAAOW,kBAAkB;;AAIvD,EAAE;AAEFJ,MAAMY,WAAW,GAAG;AAEpBZ,MAAMa,KAAK,GAAGrB;AACdQ,MAAMa,KAAK,CAACD,WAAW,GAAG;AAE1BZ,MAAMc,OAAO,GAAGvB,UAAUuB,OAAO;AACjCd,MAAMc,OAAO,CAACF,WAAW,GAAG;AAE5BZ,MAAMe,YAAY,GAAGxB,UAAUwB,YAAY;AAC3Cf,MAAMe,YAAY,CAACH,WAAW,GAAG"}

package/dist/cssm/components/ImageBase/ImageBase.js

@@ -1,12 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { mergeStyle } from "../../helpers/mergeStyle.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
 import { minOr } from "../../lib/comparing.js";
 import { getFetchPriorityProp } from "../../lib/utils.js";
 import { Clickable } from "../Clickable/Clickable.js";
 import { ImageBaseBadge } from "./ImageBaseBadge/ImageBaseBadge.js";
+import { ImageBaseFloatElement } from "./ImageBaseFloatElement/ImageBaseFloatElement.js";
 import { ImageBaseOverlay } from "./ImageBaseOverlay/ImageBaseOverlay.js";
 import { ImageBaseContext } from "./context.js";
 import { validateFallbackIcon, validateSize } from "./validators.js";
@@ -43,15 +46,18 @@ const sizeToNumber = (size)=>{
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/ImageBase
- */ export const ImageBase = ({ alt, crossOrigin, decoding, loading, referrerPolicy, sizes, src, srcSet, useMap, fetchPriority, getRef, size: sizeProp, width: widthImg, height: heightImg, widthSize, heightSize, noBorder = false, fallbackIcon: fallbackIconProp, children, onLoad, onError, withTransparentBackground, objectFit = 'cover', keepAspectRatio = false, ...restProps })=>{
+ */ export const ImageBase = ({ alt, crossOrigin, decoding, loading, referrerPolicy, sizes, src, srcSet, useMap, fetchPriority, getRef, size: sizeProp, width: widthImg, height: heightImg, widthSize, heightSize, noBorder = false, fallbackIcon: fallbackIconProp, children, onLoad, onError, withTransparentBackground, objectFit = 'cover', objectPosition, keepAspectRatio = false, getRootRef, ...restProps })=>{
     const size = sizeProp ?? minOr([
         sizeToNumber(widthSize),
         sizeToNumber(heightSize)
     ], defaultSize);
+    const wrapperRef = useExternRef(getRootRef);
     const width = widthSize ?? (keepAspectRatio ? undefined : size);
     const height = heightSize ?? (keepAspectRatio ? undefined : size);
     const [loaded, setLoaded] = React.useState(false);
     const [failed, setFailed] = React.useState(false);
+    const mouseOverHandlersRef = useRef([]);
+    const mouseOutHandlersRef = useRef([]);
     const hasSrc = src || srcSet;
     const needShowFallbackIcon = (failed || !hasSrc) && /*#__PURE__*/ React.isValidElement(fallbackIconProp);
     const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;
@@ -92,30 +98,48 @@ const sizeToNumber = (size)=>{
         imgRef,
         loaded
     ]);
+    const onMouseOver = ()=>{
+        mouseOverHandlersRef.current.forEach((fn)=>fn());
+    };
+    const onMouseOut = ()=>{
+        mouseOutHandlersRef.current.forEach((fn)=>fn());
+    };
+    const contextValue = React.useMemo(()=>({
+            size,
+            onMouseOverHandlers: mouseOverHandlersRef.current,
+            onMouseOutHandlers: mouseOutHandlersRef.current
+        }), [
+        size
+    ]);
+    const imgStyles = objectPosition ? {
+        '--vkui_internal--ImageBase_object_position': objectPosition
+    } : undefined;
+    const keepAspectRationStyles = keepAspectRatio ? {
+        width: widthImg || width,
+        height: heightImg || height
+    } : undefined;
     return /*#__PURE__*/ _jsx(ImageBaseContext.Provider, {
-        value: {
-            size
-        },
+        value: contextValue,
         children: /*#__PURE__*/ _jsxs(Clickable, {
             baseStyle: {
                 width,
                 height
             },
             baseClassName: classNames(styles.host, loaded && styles.loaded, withTransparentBackground && styles.transparentBackground),
+            getRootRef: wrapperRef,
+            onMouseOver: onMouseOver,
+            onMouseOut: onMouseOut,
             ...restProps,
             children: [
                 hasSrc && /*#__PURE__*/ _jsx("img", {
                     ref: imgRef,
                     alt: alt,
-                    className: classNames(styles.img, getObjectFitClassName(objectFit), keepAspectRatio && styles.imgKeepRatio),
+                    className: classNames(styles.img, getObjectFitClassName(objectFit), objectPosition && styles.withObjectPosition, keepAspectRatio && styles.imgKeepRatio),
                     crossOrigin: crossOrigin,
                     decoding: decoding,
                     loading: loading,
                     referrerPolicy: referrerPolicy,
-                    style: keepAspectRatio ? {
-                        width: widthImg || width,
-                        height: heightImg || height
-                    } : undefined,
+                    style: mergeStyle(keepAspectRationStyles, imgStyles),
                     sizes: sizes,
                     src: src,
                     srcSet: srcSet,
@@ -147,5 +171,7 @@ ImageBase.Badge = ImageBaseBadge;
 ImageBase.Badge.displayName = 'ImageBase.Badge';
 ImageBase.Overlay = ImageBaseOverlay;
 ImageBase.Overlay.displayName = 'ImageBase.Overlay';
+ImageBase.FloatElement = ImageBaseFloatElement;
+ImageBase.FloatElement.displayName = 'ImageBase.FloatElement';
 
 //# sourceMappingURL=ImageBase.js.map

package/dist/cssm/components/ImageBase/ImageBase.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { minOr } from '../../lib/comparing';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type { AnchorHTMLAttributesOnly, HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { Clickable } from '../Clickable/Clickable';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n  ImageBaseSize,\n  ImageBaseExpectedIconProps,\n  ImageBaseBadgeProps,\n  ImageBaseOverlayProps,\n  ImageBaseContextProps,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\n/**\n * Размер по умолчанию.\n */\nconst defaultSize = 24;\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLImageElement> {\n  /**\n   * Задаёт размер картинки.\n   *\n   * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   */\n  size?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Ширина изображения\n   */\n  widthSize?: number | string;\n  /**\n   * Высота изображения\n   */\n  heightSize?: number | string;\n  /**\n   * Отключает обводку.\n   */\n  noBorder?: boolean;\n  /**\n   * Фолбек на случай, если картинка не прогрузилась.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   *\n   * > ⚠️ Может перекрывать `children`.\n   */\n  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n  /**\n   * Отключает фон, заданный по умолчанию. Полезен для отображения картинок с прозрачностью.\n   * @since 5.10.0\n   */\n  withTransparentBackground?: boolean;\n  /**\n   * Пользовательское значения стиля object-fit\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit)\n   */\n  objectFit?: React.CSSProperties['objectFit'];\n  /**\n   * Флаг для сохранения пропорций картинки.\n   * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки\n   */\n  keepAspectRatio?: boolean;\n}\n\nconst getObjectFitClassName = (objectFit: React.CSSProperties['objectFit']) => {\n  switch (objectFit) {\n    case 'contain':\n      return styles.imgObjectFitContain;\n    case 'cover':\n      return styles.imgObjectFitCover;\n    case 'none':\n      return styles.imgObjectFitNone;\n    case 'scale-down':\n      return styles.imgObjectFitScaleDown;\n  }\n  return undefined;\n};\n\nconst parsePx = (value: string): number | undefined => {\n  if (value.endsWith('px')) {\n    return parseInt(value);\n  }\n  return undefined;\n};\n\nconst sizeToNumber = (size: number | string | undefined): number | undefined => {\n  if (typeof size === 'string') {\n    return parsePx(size);\n  }\n  return size;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase: React.FC<ImageBaseProps> & {\n  Badge: typeof ImageBaseBadge;\n  Overlay: typeof ImageBaseOverlay;\n} = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  fetchPriority,\n  getRef,\n  size: sizeProp,\n  width: widthImg,\n  height: heightImg,\n  widthSize,\n  heightSize,\n  noBorder = false,\n  fallbackIcon: fallbackIconProp,\n  children,\n  onLoad,\n  onError,\n  withTransparentBackground,\n  objectFit = 'cover',\n  keepAspectRatio = false,\n  ...restProps\n}: ImageBaseProps) => {\n  const size = sizeProp ?? minOr([sizeToNumber(widthSize), sizeToNumber(heightSize)], defaultSize);\n\n  const width = widthSize ?? (keepAspectRatio ? undefined : size);\n  const height = heightSize ?? (keepAspectRatio ? undefined : size);\n\n  const [loaded, setLoaded] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n\n  const hasSrc = src || srcSet;\n  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (fallbackIcon) {\n      validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n    }\n  }\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    if (loaded) {\n      return;\n    }\n\n    setLoaded(true);\n    setFailed(false);\n    onLoad?.(event);\n  };\n\n  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(false);\n    setFailed(true);\n    onError?.(event);\n  };\n\n  const imgRef = useExternRef(getRef);\n  const isOnLoadStatusCheckedRef = React.useRef(false);\n  React.useEffect(\n    function dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater() {\n      if (isOnLoadStatusCheckedRef.current) {\n        return;\n      }\n      isOnLoadStatusCheckedRef.current = true;\n\n      if (imgRef.current && imgRef.current.complete && !loaded) {\n        const event = new Event('load');\n        imgRef.current.dispatchEvent(event);\n      }\n    },\n    [imgRef, loaded],\n  );\n\n  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <Clickable\n        baseStyle={{ width, height }}\n        baseClassName={classNames(\n          styles.host,\n          loaded && styles.loaded,\n          withTransparentBackground && styles.transparentBackground,\n        )}\n        {...restProps}\n      >\n        {hasSrc && (\n          <img\n            ref={imgRef}\n            alt={alt}\n            className={classNames(\n              styles.img,\n              getObjectFitClassName(objectFit),\n              keepAspectRatio && styles.imgKeepRatio,\n            )}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            style={\n              keepAspectRatio\n                ? {\n                    width: widthImg || width,\n                    height: heightImg || height,\n                  }\n                : undefined\n            }\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={widthImg}\n            height={heightImg}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n            {...getFetchPriorityProp(fetchPriority)}\n          />\n        )}\n        {fallbackIcon && <div className={styles.fallback}>{fallbackIcon}</div>}\n        {children && <div className={styles.children}>{children}</div>}\n        {!noBorder && <div aria-hidden className={styles.border} />}\n      </Clickable>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.displayName = 'ImageBase';\n\nImageBase.Badge = ImageBaseBadge;\nImageBase.Badge.displayName = 'ImageBase.Badge';\n\nImageBase.Overlay = ImageBaseOverlay;\nImageBase.Overlay.displayName = 'ImageBase.Overlay';\n"],"names":["React","classNames","useExternRef","minOr","getFetchPriorityProp","Clickable","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","styles","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","defaultSize","getObjectFitClassName","objectFit","imgObjectFitContain","imgObjectFitCover","imgObjectFitNone","imgObjectFitScaleDown","undefined","parsePx","value","endsWith","parseInt","sizeToNumber","size","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","fetchPriority","getRef","sizeProp","width","widthImg","height","heightImg","widthSize","heightSize","noBorder","fallbackIcon","fallbackIconProp","children","onLoad","onError","withTransparentBackground","keepAspectRatio","restProps","loaded","setLoaded","useState","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","process","env","NODE_ENV","name","handleImageLoad","event","handleImageError","imgRef","isOnLoadStatusCheckedRef","useRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","Provider","baseStyle","baseClassName","host","transparentBackground","img","ref","className","imgKeepRatio","style","div","fallback","aria-hidden","border","displayName","Badge","Overlay"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["'use client';\n\nimport { useRef } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { minOr } from '../../lib/comparing';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type {\n  AnchorHTMLAttributesOnly,\n  CSSCustomProperties,\n  HasRef,\n  HasRootRef,\n  LiteralUnion,\n} from '../../types';\nimport { Clickable } from '../Clickable/Clickable';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport {\n  type FloatElementIndentation,\n  type FloatElementPlacement,\n  ImageBaseFloatElement,\n  type ImageBaseFloatElementProps,\n} from './ImageBaseFloatElement/ImageBaseFloatElement';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n  ImageBaseSize,\n  ImageBaseExpectedIconProps,\n  ImageBaseBadgeProps,\n  ImageBaseOverlayProps,\n  ImageBaseContextProps,\n  ImageBaseFloatElementProps,\n  FloatElementPlacement,\n  FloatElementIndentation,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\n/**\n * Размер по умолчанию.\n */\nconst defaultSize = 24;\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLImageElement> {\n  /**\n   * Задаёт размер картинки.\n   *\n   * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   */\n  size?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Ширина изображения\n   */\n  widthSize?: number | string;\n  /**\n   * Высота изображения\n   */\n  heightSize?: number | string;\n  /**\n   * Отключает обводку.\n   */\n  noBorder?: boolean;\n  /**\n   * Фолбек на случай, если картинка не прогрузилась.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   *\n   * > ⚠️ Может перекрывать `children`.\n   */\n  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n  /**\n   * Отключает фон, заданный по умолчанию. Полезен для отображения картинок с прозрачностью.\n   * @since 5.10.0\n   */\n  withTransparentBackground?: boolean;\n  /**\n   * Пользовательское значения стиля object-fit\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit)\n   */\n  objectFit?: React.CSSProperties['objectFit'];\n  /**\n   * Пользовательское значения стиля object-position\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-position)\n   */\n  objectPosition?: React.CSSProperties['objectPosition'];\n  /**\n   * Флаг для сохранения пропорций картинки.\n   * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки\n   */\n  keepAspectRatio?: boolean;\n}\n\nconst getObjectFitClassName = (objectFit: React.CSSProperties['objectFit']) => {\n  switch (objectFit) {\n    case 'contain':\n      return styles.imgObjectFitContain;\n    case 'cover':\n      return styles.imgObjectFitCover;\n    case 'none':\n      return styles.imgObjectFitNone;\n    case 'scale-down':\n      return styles.imgObjectFitScaleDown;\n  }\n  return undefined;\n};\n\nconst parsePx = (value: string): number | undefined => {\n  if (value.endsWith('px')) {\n    return parseInt(value);\n  }\n  return undefined;\n};\n\nconst sizeToNumber = (size: number | string | undefined): number | undefined => {\n  if (typeof size === 'string') {\n    return parsePx(size);\n  }\n  return size;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase: React.FC<ImageBaseProps> & {\n  Badge: typeof ImageBaseBadge;\n  Overlay: typeof ImageBaseOverlay;\n  FloatElement: typeof ImageBaseFloatElement;\n} = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  fetchPriority,\n  getRef,\n  size: sizeProp,\n  width: widthImg,\n  height: heightImg,\n  widthSize,\n  heightSize,\n  noBorder = false,\n  fallbackIcon: fallbackIconProp,\n  children,\n  onLoad,\n  onError,\n  withTransparentBackground,\n  objectFit = 'cover',\n  objectPosition,\n  keepAspectRatio = false,\n  getRootRef,\n  ...restProps\n}: ImageBaseProps) => {\n  const size = sizeProp ?? minOr([sizeToNumber(widthSize), sizeToNumber(heightSize)], defaultSize);\n  const wrapperRef = useExternRef(getRootRef);\n\n  const width = widthSize ?? (keepAspectRatio ? undefined : size);\n  const height = heightSize ?? (keepAspectRatio ? undefined : size);\n\n  const [loaded, setLoaded] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n\n  const mouseOverHandlersRef = useRef<VoidFunction[]>([]);\n  const mouseOutHandlersRef = useRef<VoidFunction[]>([]);\n\n  const hasSrc = src || srcSet;\n  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (fallbackIcon) {\n      validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n    }\n  }\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    if (loaded) {\n      return;\n    }\n\n    setLoaded(true);\n    setFailed(false);\n    onLoad?.(event);\n  };\n\n  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(false);\n    setFailed(true);\n    onError?.(event);\n  };\n\n  const imgRef = useExternRef(getRef);\n  const isOnLoadStatusCheckedRef = React.useRef(false);\n  React.useEffect(\n    function dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater() {\n      if (isOnLoadStatusCheckedRef.current) {\n        return;\n      }\n      isOnLoadStatusCheckedRef.current = true;\n\n      if (imgRef.current && imgRef.current.complete && !loaded) {\n        const event = new Event('load');\n        imgRef.current.dispatchEvent(event);\n      }\n    },\n    [imgRef, loaded],\n  );\n\n  const onMouseOver = () => {\n    mouseOverHandlersRef.current.forEach((fn) => fn());\n  };\n\n  const onMouseOut = () => {\n    mouseOutHandlersRef.current.forEach((fn) => fn());\n  };\n\n  const contextValue = React.useMemo(\n    () => ({\n      size,\n      onMouseOverHandlers: mouseOverHandlersRef.current,\n      onMouseOutHandlers: mouseOutHandlersRef.current,\n    }),\n    [size],\n  );\n\n  const imgStyles: CSSCustomProperties<string | number> | undefined = objectPosition\n    ? {\n        '--vkui_internal--ImageBase_object_position': objectPosition,\n      }\n    : undefined;\n\n  const keepAspectRationStyles = keepAspectRatio\n    ? {\n        width: widthImg || width,\n        height: heightImg || height,\n      }\n    : undefined;\n\n  return (\n    <ImageBaseContext.Provider value={contextValue}>\n      <Clickable\n        baseStyle={{ width, height }}\n        baseClassName={classNames(\n          styles.host,\n          loaded && styles.loaded,\n          withTransparentBackground && styles.transparentBackground,\n        )}\n        getRootRef={wrapperRef}\n        onMouseOver={onMouseOver}\n        onMouseOut={onMouseOut}\n        {...restProps}\n      >\n        {hasSrc && (\n          <img\n            ref={imgRef}\n            alt={alt}\n            className={classNames(\n              styles.img,\n              getObjectFitClassName(objectFit),\n              objectPosition && styles.withObjectPosition,\n              keepAspectRatio && styles.imgKeepRatio,\n            )}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            style={mergeStyle(keepAspectRationStyles, imgStyles)}\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={widthImg}\n            height={heightImg}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n            {...getFetchPriorityProp(fetchPriority)}\n          />\n        )}\n        {fallbackIcon && <div className={styles.fallback}>{fallbackIcon}</div>}\n        {children && <div className={styles.children}>{children}</div>}\n        {!noBorder && <div aria-hidden className={styles.border} />}\n      </Clickable>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.displayName = 'ImageBase';\n\nImageBase.Badge = ImageBaseBadge;\nImageBase.Badge.displayName = 'ImageBase.Badge';\n\nImageBase.Overlay = ImageBaseOverlay;\nImageBase.Overlay.displayName = 'ImageBase.Overlay';\n\nImageBase.FloatElement = ImageBaseFloatElement;\nImageBase.FloatElement.displayName = 'ImageBase.FloatElement';\n"],"names":["useRef","React","classNames","mergeStyle","useExternRef","minOr","getFetchPriorityProp","Clickable","ImageBaseBadge","ImageBaseFloatElement","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","styles","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","defaultSize","getObjectFitClassName","objectFit","imgObjectFitContain","imgObjectFitCover","imgObjectFitNone","imgObjectFitScaleDown","undefined","parsePx","value","endsWith","parseInt","sizeToNumber","size","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","fetchPriority","getRef","sizeProp","width","widthImg","height","heightImg","widthSize","heightSize","noBorder","fallbackIcon","fallbackIconProp","children","onLoad","onError","withTransparentBackground","objectPosition","keepAspectRatio","getRootRef","restProps","wrapperRef","loaded","setLoaded","useState","failed","setFailed","mouseOverHandlersRef","mouseOutHandlersRef","hasSrc","needShowFallbackIcon","isValidElement","process","env","NODE_ENV","name","handleImageLoad","event","handleImageError","imgRef","isOnLoadStatusCheckedRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","onMouseOver","forEach","fn","onMouseOut","contextValue","useMemo","onMouseOverHandlers","onMouseOutHandlers","imgStyles","keepAspectRationStyles","Provider","baseStyle","baseClassName","host","transparentBackground","img","ref","className","withObjectPosition","imgKeepRatio","style","div","fallback","aria-hidden","border","displayName","Badge","Overlay","FloatElement"],"mappings":"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"}

package/dist/cssm/components/ImageBase/ImageBase.module.css

@@ -71,6 +71,15 @@
   object-fit: scale-down;
 }
 
+.withObjectPosition {
+  --vkui_internal--ImageBase_object_position_default: 50% 50%;
+
+  object-position: var(
+    --vkui_internal--ImageBase_object_position,
+    var(--vkui_internal--ImageBase_object_position_default)
+  );
+}
+
 .loaded .img {
   visibility: visible;
 }

package/dist/cssm/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.js

@@ -0,0 +1,91 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { classNames } from "@vkontakte/vkjs";
+import { useIsomorphicLayoutEffect } from "../../../lib/useIsomorphicLayoutEffect.js";
+import { RootComponent } from "../../RootComponent/RootComponent.js";
+import { ImageBaseContext } from "../context.js";
+import { mutableRemoveElement, resolveIndent } from "./helpers.js";
+import styles from "./ImageBaseFloatElement.module.css";
+const positionPlacementClassNames = {
+    'top-start': styles.placementTopStart,
+    'top': styles.placementTop,
+    'top-end': styles.placementTopEnd,
+    'bottom-start': styles.placementBottomStart,
+    'bottom': styles.placementBottom,
+    'bottom-end': styles.placementBottomEnd,
+    'middle-start': styles.placementMiddleStart,
+    'middle': styles.placementMiddle,
+    'middle-end': styles.placementMiddleEnd
+};
+const inlineIndentClassNames = {
+    '2xs': styles.inlineIndent2xs,
+    'xs': styles.inlineIndentXs,
+    's': styles.inlineIndentS,
+    'm': styles.inlineIndentM,
+    'l': styles.inlineIndentL,
+    'xl': styles.inlineIndentXl,
+    '2xl': styles.inlineIndent2xl,
+    '3xl': styles.inlineIndent3xl,
+    '4xl': styles.inlineIndent4xl
+};
+const blockIndentClassNames = {
+    '2xs': styles.blockIndent2xs,
+    'xs': styles.blockIndentXs,
+    's': styles.blockIndentS,
+    'm': styles.blockIndentM,
+    'l': styles.blockIndentL,
+    'xl': styles.blockIndentXl,
+    '2xl': styles.blockIndent2xl,
+    '3xl': styles.blockIndent3xl,
+    '4xl': styles.blockIndent4xl
+};
+export const ImageBaseFloatElement = ({ placement, visibility = 'always', style, className, inlineIndent, blockIndent, ...restProps })=>{
+    const [hidden, setHidden] = React.useState(visibility !== 'always');
+    const { onMouseOverHandlers, onMouseOutHandlers } = React.useContext(ImageBaseContext);
+    useIsomorphicLayoutEffect(function resetHidden() {
+        setHidden(visibility === 'on-hover');
+    }, [
+        visibility
+    ]);
+    useIsomorphicLayoutEffect(function addMouseHandlers() {
+        if (visibility === 'on-hover') {
+            const onMouseOver = ()=>setHidden(false);
+            const onMouseOut = ()=>setHidden(true);
+            onMouseOverHandlers.push(onMouseOver);
+            onMouseOutHandlers.push(onMouseOut);
+            return ()=>{
+                mutableRemoveElement(onMouseOverHandlers, onMouseOver);
+                mutableRemoveElement(onMouseOutHandlers, onMouseOut);
+            };
+        }
+        return;
+    }, [
+        visibility
+    ]);
+    const [inlineIndentStyle, blockIndentStyle, inlineIndentClassName, blockIndentClassName] = React.useMemo(()=>{
+        const [inlineIndentStyle, inlineIndentClassName] = resolveIndent(inlineIndent, '--vkui_internal--FloatElement_horizontal_indent', inlineIndentClassNames);
+        const [blockIndentStyle, blockIndentClassName] = resolveIndent(blockIndent, '--vkui_internal--FloatElement_vertical_indent', blockIndentClassNames);
+        return [
+            inlineIndentStyle,
+            blockIndentStyle,
+            inlineIndentClassName,
+            blockIndentClassName
+        ];
+    }, [
+        inlineIndent,
+        blockIndent
+    ]);
+    return /*#__PURE__*/ _jsx(RootComponent, {
+        ...restProps,
+        style: {
+            ...style,
+            ...inlineIndentStyle,
+            ...blockIndentStyle
+        },
+        className: classNames(styles.host, hidden && styles.hidden, positionPlacementClassNames[placement], inlineIndentClassName, blockIndentClassName, className)
+    });
+};
+ImageBaseFloatElement.displayName = 'ImageBaseFloatElement';
+
+//# sourceMappingURL=ImageBaseFloatElement.js.map

package/dist/cssm/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';\nimport { type HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { ImageBaseContext } from '../context';\nimport { mutableRemoveElement, resolveIndent } from './helpers';\nimport styles from './ImageBaseFloatElement.module.css';\n\nexport type FloatElementPlacement =\n  | 'top-start'\n  | 'top'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom'\n  | 'bottom-end'\n  | 'middle-start'\n  | 'middle'\n  | 'middle-end';\n\nexport type FloatElementIndentation =\n  | '2xs'\n  | 'xs'\n  | 's'\n  | 'm'\n  | 'l'\n  | 'xl'\n  | '2xl'\n  | '3xl'\n  | '4xl'\n  | number\n  | string;\n\nconst positionPlacementClassNames = {\n  'top-start': styles.placementTopStart,\n  'top': styles.placementTop,\n  'top-end': styles.placementTopEnd,\n  'bottom-start': styles.placementBottomStart,\n  'bottom': styles.placementBottom,\n  'bottom-end': styles.placementBottomEnd,\n  'middle-start': styles.placementMiddleStart,\n  'middle': styles.placementMiddle,\n  'middle-end': styles.placementMiddleEnd,\n};\n\nconst inlineIndentClassNames = {\n  '2xs': styles.inlineIndent2xs,\n  'xs': styles.inlineIndentXs,\n  's': styles.inlineIndentS,\n  'm': styles.inlineIndentM,\n  'l': styles.inlineIndentL,\n  'xl': styles.inlineIndentXl,\n  '2xl': styles.inlineIndent2xl,\n  '3xl': styles.inlineIndent3xl,\n  '4xl': styles.inlineIndent4xl,\n};\n\nconst blockIndentClassNames = {\n  '2xs': styles.blockIndent2xs,\n  'xs': styles.blockIndentXs,\n  's': styles.blockIndentS,\n  'm': styles.blockIndentM,\n  'l': styles.blockIndentL,\n  'xl': styles.blockIndentXl,\n  '2xl': styles.blockIndent2xl,\n  '3xl': styles.blockIndent3xl,\n  '4xl': styles.blockIndent4xl,\n};\n\nexport interface ImageBaseFloatElementProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Позиция компонента относительно родителя\n   */\n  placement: FloatElementPlacement;\n  /**\n   * Отступ компонента от края контейнера по горизонтали\n   */\n  inlineIndent?: FloatElementIndentation;\n  /**\n   * Отступ компонента от края контейнера по вертикали\n   */\n  blockIndent?: FloatElementIndentation;\n  /**\n   * Режим отображения компонента:\n   *\n   * - `\"always\"`: Всегда\n   * - `\"on-hover\"`: При наведении на картинку\n   */\n  visibility?: 'always' | 'on-hover';\n}\n\nexport const ImageBaseFloatElement = ({\n  placement,\n  visibility = 'always',\n  style,\n  className,\n  inlineIndent,\n  blockIndent,\n  ...restProps\n}: ImageBaseFloatElementProps) => {\n  const [hidden, setHidden] = React.useState(visibility !== 'always');\n  const { onMouseOverHandlers, onMouseOutHandlers } = React.useContext(ImageBaseContext);\n\n  useIsomorphicLayoutEffect(\n    function resetHidden() {\n      setHidden(visibility === 'on-hover');\n    },\n    [visibility],\n  );\n\n  useIsomorphicLayoutEffect(\n    function addMouseHandlers() {\n      if (visibility === 'on-hover') {\n        const onMouseOver = () => setHidden(false);\n        const onMouseOut = () => setHidden(true);\n\n        onMouseOverHandlers.push(onMouseOver);\n        onMouseOutHandlers.push(onMouseOut);\n\n        return () => {\n          mutableRemoveElement(onMouseOverHandlers, onMouseOver);\n          mutableRemoveElement(onMouseOutHandlers, onMouseOut);\n        };\n      }\n      return;\n    },\n    [visibility],\n  );\n\n  const [inlineIndentStyle, blockIndentStyle, inlineIndentClassName, blockIndentClassName] =\n    React.useMemo(() => {\n      const [inlineIndentStyle, inlineIndentClassName] = resolveIndent(\n        inlineIndent,\n        '--vkui_internal--FloatElement_horizontal_indent',\n        inlineIndentClassNames,\n      );\n      const [blockIndentStyle, blockIndentClassName] = resolveIndent(\n        blockIndent,\n        '--vkui_internal--FloatElement_vertical_indent',\n        blockIndentClassNames,\n      );\n\n      return [inlineIndentStyle, blockIndentStyle, inlineIndentClassName, blockIndentClassName];\n    }, [inlineIndent, blockIndent]);\n\n  return (\n    <RootComponent\n      {...restProps}\n      style={{\n        ...style,\n        ...inlineIndentStyle,\n        ...blockIndentStyle,\n      }}\n      className={classNames(\n        styles.host,\n        hidden && styles.hidden,\n        positionPlacementClassNames[placement],\n        inlineIndentClassName,\n        blockIndentClassName,\n        className,\n      )}\n    />\n  );\n};\n\nImageBaseFloatElement.displayName = 'ImageBaseFloatElement';\n"],"names":["React","classNames","useIsomorphicLayoutEffect","RootComponent","ImageBaseContext","mutableRemoveElement","resolveIndent","styles","positionPlacementClassNames","placementTopStart","placementTop","placementTopEnd","placementBottomStart","placementBottom","placementBottomEnd","placementMiddleStart","placementMiddle","placementMiddleEnd","inlineIndentClassNames","inlineIndent2xs","inlineIndentXs","inlineIndentS","inlineIndentM","inlineIndentL","inlineIndentXl","inlineIndent2xl","inlineIndent3xl","inlineIndent4xl","blockIndentClassNames","blockIndent2xs","blockIndentXs","blockIndentS","blockIndentM","blockIndentL","blockIndentXl","blockIndent2xl","blockIndent3xl","blockIndent4xl","ImageBaseFloatElement","placement","visibility","style","className","inlineIndent","blockIndent","restProps","hidden","setHidden","useState","onMouseOverHandlers","onMouseOutHandlers","useContext","resetHidden","addMouseHandlers","onMouseOver","onMouseOut","push","inlineIndentStyle","blockIndentStyle","inlineIndentClassName","blockIndentClassName","useMemo","host","displayName"],"mappings":"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"}

package/dist/cssm/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.module.css

@@ -0,0 +1,134 @@
+.host {
+  position: absolute;
+  z-index: var(--vkui_internal--z_index_image_base_positioned_element);
+  transition: opacity 0.3s ease-in-out;
+
+  --vkui_internal--FloatElement_horizontal_indent: 0;
+  --vkui_internal--FloatElement_vertical_indent: 0;
+}
+
+.inlineIndent2xs {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_2xs);
+}
+
+.inlineIndentXs {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_xs);
+}
+
+.inlineIndentS {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_s);
+}
+
+.inlineIndentM {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_m);
+}
+
+.inlineIndentL {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_l);
+}
+
+.inlineIndentXl {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_xl);
+}
+
+.inlineIndent2xl {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_2xl);
+}
+
+.inlineIndent3xl {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_3xl);
+}
+
+.inlineIndent4xl {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_4xl);
+}
+
+.blockIndent2xs {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_2xs);
+}
+
+.blockIndentXs {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_xs);
+}
+
+.blockIndentS {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_s);
+}
+
+.blockIndentM {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_m);
+}
+
+.blockIndentL {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_l);
+}
+
+.blockIndentXl {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_xl);
+}
+
+.blockIndent2xl {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_2xl);
+}
+
+.blockIndent3xl {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_3xl);
+}
+
+.blockIndent4xl {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_4xl);
+}
+
+.hidden {
+  opacity: 0;
+}
+
+.placementTopStart {
+  inset-inline-start: var(--vkui_internal--FloatElement_horizontal_indent);
+  inset-block-start: var(--vkui_internal--FloatElement_vertical_indent);
+}
+
+.placementTop {
+  inset-inline-start: 50%;
+  inset-block-start: var(--vkui_internal--FloatElement_vertical_indent);
+  transform: translateX(-50%);
+}
+
+.placementTopEnd {
+  inset-inline-end: var(--vkui_internal--FloatElement_horizontal_indent);
+  inset-block-start: var(--vkui_internal--FloatElement_vertical_indent);
+}
+
+.placementBottomStart {
+  inset-inline-start: var(--vkui_internal--FloatElement_horizontal_indent);
+  inset-block-end: var(--vkui_internal--FloatElement_vertical_indent);
+}
+
+.placementBottom {
+  inset-inline-start: 50%;
+  inset-block-end: var(--vkui_internal--FloatElement_vertical_indent);
+  transform: translateX(-50%);
+}
+
+.placementBottomEnd {
+  inset-block-end: var(--vkui_internal--FloatElement_vertical_indent);
+  inset-inline-end: var(--vkui_internal--FloatElement_horizontal_indent);
+}
+
+.placementMiddleStart {
+  inset-inline-start: var(--vkui_internal--FloatElement_horizontal_indent);
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+}
+
+.placementMiddle {
+  inset-inline-start: 50%;
+  inset-block-start: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.placementMiddleEnd {
+  inset-inline-end: var(--vkui_internal--FloatElement_horizontal_indent);
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+}

package/dist/cssm/components/ImageBase/ImageBaseFloatElement/helpers.js

@@ -0,0 +1,35 @@
+function isIndentSizeConstant(indent) {
+    return indent === '2xs' || indent === 'xs' || indent === 's' || indent === 'm' || indent === 'l' || indent === 'xl' || indent === '2xl' || indent === '3xl' || indent === '4xl';
+}
+function calculateIndent(indent) {
+    if (isIndentSizeConstant(indent)) {
+        return;
+    }
+    return typeof indent === 'string' ? indent : `${indent}px`;
+}
+export const resolveIndent = (indent, cssProperty, classNames)=>{
+    if (!indent) {
+        return [
+            undefined,
+            undefined
+        ];
+    }
+    const calculatedIndent = calculateIndent(indent);
+    if (calculatedIndent) {
+        return [
+            {
+                [cssProperty]: calculatedIndent
+            },
+            undefined
+        ];
+    }
+    return [
+        undefined,
+        classNames[indent]
+    ];
+};
+export const mutableRemoveElement = (arr, element)=>{
+    arr.splice(arr.indexOf(element), 1);
+};
+
+//# sourceMappingURL=helpers.js.map

package/dist/cssm/components/ImageBase/ImageBaseFloatElement/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseFloatElement/helpers.ts"],"sourcesContent":["import { type FloatElementIndentation } from './ImageBaseFloatElement';\n\nfunction isIndentSizeConstant(indent: FloatElementIndentation) {\n  return (\n    indent === '2xs' ||\n    indent === 'xs' ||\n    indent === 's' ||\n    indent === 'm' ||\n    indent === 'l' ||\n    indent === 'xl' ||\n    indent === '2xl' ||\n    indent === '3xl' ||\n    indent === '4xl'\n  );\n}\n\nfunction calculateIndent(indent: FloatElementIndentation) {\n  if (isIndentSizeConstant(indent)) {\n    return;\n  }\n  return typeof indent === 'string' ? indent : `${indent}px`;\n}\n\nexport const resolveIndent = (\n  indent: FloatElementIndentation | undefined,\n  cssProperty: string,\n  classNames: Record<string, string>,\n): [React.CSSProperties | undefined, string | undefined] => {\n  if (!indent) {\n    return [undefined, undefined];\n  }\n\n  const calculatedIndent = calculateIndent(indent);\n\n  if (calculatedIndent) {\n    return [{ [cssProperty]: calculatedIndent }, undefined];\n  }\n\n  return [undefined, classNames[indent]];\n};\n\nexport const mutableRemoveElement = <T>(arr: T[], element: T) => {\n  arr.splice(arr.indexOf(element), 1);\n};\n"],"names":["isIndentSizeConstant","indent","calculateIndent","resolveIndent","cssProperty","classNames","undefined","calculatedIndent","mutableRemoveElement","arr","element","splice","indexOf"],"mappings":"AAEA,SAASA,qBAAqBC,MAA+B;IAC3D,OACEA,WAAW,SACXA,WAAW,QACXA,WAAW,OACXA,WAAW,OACXA,WAAW,OACXA,WAAW,QACXA,WAAW,SACXA,WAAW,SACXA,WAAW;AAEf;AAEA,SAASC,gBAAgBD,MAA+B;IACtD,IAAID,qBAAqBC,SAAS;QAChC;IACF;IACA,OAAO,OAAOA,WAAW,WAAWA,SAAS,GAAGA,OAAO,EAAE,CAAC;AAC5D;AAEA,OAAO,MAAME,gBAAgB,CAC3BF,QACAG,aACAC;IAEA,IAAI,CAACJ,QAAQ;QACX,OAAO;YAACK;YAAWA;SAAU;IAC/B;IAEA,MAAMC,mBAAmBL,gBAAgBD;IAEzC,IAAIM,kBAAkB;QACpB,OAAO;YAAC;gBAAE,CAACH,YAAY,EAAEG;YAAiB;YAAGD;SAAU;IACzD;IAEA,OAAO;QAACA;QAAWD,UAAU,CAACJ,OAAO;KAAC;AACxC,EAAE;AAEF,OAAO,MAAMO,uBAAuB,CAAIC,KAAUC;IAChDD,IAAIE,MAAM,CAACF,IAAIG,OAAO,CAACF,UAAU;AACnC,EAAE"}

package/dist/cssm/components/ImageBase/ImageBaseOverlay/hooks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/hooks.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFocusWithin } from '../../../hooks/useFocusWithin';\nimport { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';\n\nexport function useNonInteractiveOverlayProps(rootRef: React.MutableRefObject<HTMLElement | null>) {\n  const focusWithin = useFocusWithin(rootRef);\n  const [nonInteractiveFocusShown, setNonInteractiveFocusShown] = React.useState(false);\n\n  function onClick(event: React.MouseEvent) {\n    if (event.detail > 0) {\n      // Если мы попали на вложенный в оверлей элемент через focus,\n      // то при клике мышкой мы должны начать реагировать на hover-состояние,\n      // даже если фокус всё ещё остался на вложенном элементе (был по нему клик)\n      setNonInteractiveFocusShown(false);\n    }\n  }\n\n  useIsomorphicLayoutEffect(() => {\n    setNonInteractiveFocusShown(focusWithin);\n  }, [focusWithin]);\n\n  return {\n    shown: nonInteractiveFocusShown && focusWithin,\n    onClick,\n  };\n}\n"],"names":["React","useFocusWithin","useIsomorphicLayoutEffect","useNonInteractiveOverlayProps","rootRef","focusWithin","nonInteractiveFocusShown","setNonInteractiveFocusShown","useState","onClick","event","detail","shown"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,mCAAgC;AAC/D,SAASC,yBAAyB,QAAQ,4CAAyC;AAEnF,OAAO,SAASC,8BAA8BC,OAAmD;IAC/F,MAAMC,cAAcJ,eAAeG;IACnC,MAAM,CAACE,0BAA0BC,4BAA4B,GAAGP,MAAMQ,QAAQ,CAAC;IAE/E,SAASC,QAAQC,KAAuB;QACtC,IAAIA,MAAMC,MAAM,GAAG,GAAG;YACpB,6DAA6D;YAC7D,uEAAuE;YACvE,2EAA2E;YAC3EJ,4BAA4B;QAC9B;IACF;IAEAL,0BAA0B;QACxBK,4BAA4BF;IAC9B,GAAG;QAACA;KAAY;IAEhB,OAAO;QACLO,OAAON,4BAA4BD;QACnCI;IACF;AACF"}
+{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/hooks.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFocusWithin } from '../../../hooks/useFocusWithin';\nimport { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';\n\nexport function useNonInteractiveOverlayProps(rootRef: React.RefObject<HTMLElement | null>) {\n  const focusWithin = useFocusWithin(rootRef);\n  const [nonInteractiveFocusShown, setNonInteractiveFocusShown] = React.useState(false);\n\n  function onClick(event: React.MouseEvent) {\n    if (event.detail > 0) {\n      // Если мы попали на вложенный в оверлей элемент через focus,\n      // то при клике мышкой мы должны начать реагировать на hover-состояние,\n      // даже если фокус всё ещё остался на вложенном элементе (был по нему клик)\n      setNonInteractiveFocusShown(false);\n    }\n  }\n\n  useIsomorphicLayoutEffect(() => {\n    setNonInteractiveFocusShown(focusWithin);\n  }, [focusWithin]);\n\n  return {\n    shown: nonInteractiveFocusShown && focusWithin,\n    onClick,\n  };\n}\n"],"names":["React","useFocusWithin","useIsomorphicLayoutEffect","useNonInteractiveOverlayProps","rootRef","focusWithin","nonInteractiveFocusShown","setNonInteractiveFocusShown","useState","onClick","event","detail","shown"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,mCAAgC;AAC/D,SAASC,yBAAyB,QAAQ,4CAAyC;AAEnF,OAAO,SAASC,8BAA8BC,OAA4C;IACxF,MAAMC,cAAcJ,eAAeG;IACnC,MAAM,CAACE,0BAA0BC,4BAA4B,GAAGP,MAAMQ,QAAQ,CAAC;IAE/E,SAASC,QAAQC,KAAuB;QACtC,IAAIA,MAAMC,MAAM,GAAG,GAAG;YACpB,6DAA6D;YAC7D,uEAAuE;YACvE,2EAA2E;YAC3EJ,4BAA4B;QAC9B;IACF;IAEAL,0BAA0B;QACxBK,4BAA4BF;IAC9B,GAAG;QAACA;KAAY;IAEhB,OAAO;QACLO,OAAON,4BAA4BD;QACnCI;IACF;AACF"}

package/dist/cssm/components/ImageBase/context.js

@@ -1,6 +1,8 @@
 import * as React from "react";
 export const ImageBaseContext = React.createContext({
-    size: 0
+    size: 0,
+    onMouseOverHandlers: [],
+    onMouseOutHandlers: []
 });
 
 //# sourceMappingURL=context.js.map

package/dist/cssm/components/ImageBase/context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ImageBase/context.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ImageBaseContextProps } from './types';\n\nexport const ImageBaseContext: React.Context<ImageBaseContextProps> =\n  React.createContext<ImageBaseContextProps>({\n    size: 0,\n  });\n"],"names":["React","ImageBaseContext","createContext","size"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,mBACXD,MAAME,aAAa,CAAwB;IACzCC,MAAM;AACR,GAAG"}
+{"version":3,"sources":["../../../../src/components/ImageBase/context.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ImageBaseContextProps } from './types';\n\nexport const ImageBaseContext: React.Context<ImageBaseContextProps> =\n  React.createContext<ImageBaseContextProps>({\n    size: 0,\n    onMouseOverHandlers: [],\n    onMouseOutHandlers: [],\n  });\n"],"names":["React","ImageBaseContext","createContext","size","onMouseOverHandlers","onMouseOutHandlers"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,mBACXD,MAAME,aAAa,CAAwB;IACzCC,MAAM;IACNC,qBAAqB,EAAE;IACvBC,oBAAoB,EAAE;AACxB,GAAG"}

package/dist/cssm/components/ImageBase/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ImageBase/types.ts"],"sourcesContent":["export const imageBaseSizes = [16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 88, 96] as const;\n\nexport type ImageBaseSize = (typeof imageBaseSizes)[number];\n\nexport type ImageBaseExpectedIconProps = {\n  width?: number;\n  height?: number;\n  className?: string;\n};\n\nexport interface ImageBaseContextProps {\n  size: ImageBaseSize | number;\n}\n"],"names":["imageBaseSizes"],"mappings":"AAAA,OAAO,MAAMA,iBAAiB;IAAC;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;CAAG,CAAU"}
+{"version":3,"sources":["../../../../src/components/ImageBase/types.ts"],"sourcesContent":["export const imageBaseSizes = [16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 88, 96] as const;\n\nexport type ImageBaseSize = (typeof imageBaseSizes)[number];\n\nexport type ImageBaseExpectedIconProps = {\n  width?: number;\n  height?: number;\n  className?: string;\n};\n\nexport interface ImageBaseContextProps {\n  size: ImageBaseSize | number;\n  onMouseOverHandlers: VoidFunction[];\n  onMouseOutHandlers: VoidFunction[];\n}\n"],"names":["imageBaseSizes"],"mappings":"AAAA,OAAO,MAAMA,iBAAiB;IAAC;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;CAAG,CAAU"}

package/dist/cssm/components/ImageBase/validators.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ImageBase/validators.ts"],"sourcesContent":["import { warnOnce } from '../../lib/warnOnce';\nimport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\nimport { imageBaseSizes } from './types';\n\n/**\n * Пример,\n *\n * Icon28User -> 28\n * Icon12Circle1 -> 12\n * Icon12Circle2 -> 12\n * Icon20TextHeading1Outline -> 20\n */\nfunction parseIconSizeByDisplayName(displayName: unknown): number | null {\n  if (typeof displayName !== 'string') {\n    return null;\n  }\n\n  const match = /Icon(\\d+)/.exec(displayName);\n\n  return match ? Number(match[1]) : null;\n}\n\nfunction parseIconSizeByWidthProp(width: unknown): number | null {\n  if (typeof width !== 'string' && typeof width !== 'number') {\n    return null;\n  }\n  const size = Number(width);\n  return size > 0 ? size : null;\n}\n\nfunction getElementDisplayName(element: JSX.Element): string | null {\n  return element.type.displayName ?? null;\n}\n\nfunction getElementWidthProp(element: JSX.Element): number | string | null {\n  return element.props.width ?? null;\n}\n\nfunction getIconSizeByElement(element: JSX.Element): number | null {\n  const sizeByDisplayName = parseIconSizeByDisplayName(getElementDisplayName(element));\n  const sizeByWidth = parseIconSizeByWidthProp(getElementWidthProp(element));\n  return sizeByWidth ? sizeByWidth : sizeByDisplayName;\n}\n\ninterface IconProp {\n  name: string;\n  value: JSX.Element;\n}\n\ninterface SelectorFn {\n  (imageSize: number): number;\n  MAX_SIZE: number;\n}\n\nfunction validateIconComponentSizeByImageSize(\n  imageSize: number,\n  iconProp: IconProp,\n  selectorFn: SelectorFn,\n  logger: ReturnType<typeof warnOnce>,\n) {\n  const iconSize = getIconSizeByElement(iconProp.value);\n\n  if (iconSize === null) {\n    return;\n  }\n\n  const result = selectorFn(imageSize);\n\n  if (result === iconSize || (result === selectorFn.MAX_SIZE && iconSize >= result)) {\n    return;\n  }\n\n  const iconName = getElementDisplayName(iconProp.value);\n  const propMessage = iconName ? `${iconProp.name}={<${iconName} />}` : iconProp.name;\n\n  logger(\n    `Размер \\`${propMessage}\\` не соответствует дизайн-системе. Для \\`size={${imageSize}}\\` размер иконки для \\`${iconProp.name}\\` должен соответствовать <Icon${result}<name> />. Если такого размера нет, то используйте <${iconName} width={${result}} height={${result}} />`,\n    'log',\n  );\n}\n\nconst warnImageBase = warnOnce('ImageBase');\n\nexport function validateFallbackIcon(imageSize: number, iconProp: IconProp): void {\n  return validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getFallbackIconSizeByImageBaseSize,\n    warnImageBase,\n  );\n}\n\nconst mapOfExpectedSize = new Set<number>(imageBaseSizes);\n\nconst arrayOfSizes = Array.from(mapOfExpectedSize).map((str) => Number(str));\nconst maxSize = arrayOfSizes.reduce((maxSize, size) => (size > maxSize ? size : maxSize), 0);\n\nexport function validateSize(imageSize: number): void {\n  if (imageSize > maxSize || mapOfExpectedSize.has(imageSize)) {\n    return;\n  }\n  warnImageBase(\n    `\\`size={${imageSize}}\\` не соответствует дизайн-системе. Пожалуйста, используйте один из следующих вариантов: ${arrayOfSizes.join(\n      ' | ',\n    )}`,\n    'log',\n  );\n}\n\nconst warnImageBaseBadge = warnOnce('ImageBase.Badge');\n\nexport function validateBadgeIcon(imageSize: number, iconProp: IconProp): void {\n  if (imageSize < 24 && iconProp) {\n    return warnImageBaseBadge('Не используйте бейдж при `size < 24`.', 'log');\n  }\n  validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getBadgeIconSizeByImageBaseSize,\n    warnImageBaseBadge,\n  );\n}\n\nconst warnImageBaseOverlay = warnOnce('ImageBase.Overlay');\n\nexport function validateOverlayIcon(imageSize: number, iconProp: IconProp): void {\n  validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getOverlayIconSizeByImageBaseSize,\n    warnImageBaseOverlay,\n  );\n}\n"],"names":["warnOnce","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","imageBaseSizes","parseIconSizeByDisplayName","displayName","match","exec","Number","parseIconSizeByWidthProp","width","size","getElementDisplayName","element","type","getElementWidthProp","props","getIconSizeByElement","sizeByDisplayName","sizeByWidth","validateIconComponentSizeByImageSize","imageSize","iconProp","selectorFn","logger","iconSize","value","result","MAX_SIZE","iconName","propMessage","name","warnImageBase","validateFallbackIcon","mapOfExpectedSize","Set","arrayOfSizes","Array","from","map","str","maxSize","reduce","validateSize","has","join","warnImageBaseBadge","validateBadgeIcon","warnImageBaseOverlay","validateOverlayIcon"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,wBAAqB;AAC9C,SACEC,+BAA+B,EAC/BC,kCAAkC,EAClCC,iCAAiC,QAC5B,eAAY;AACnB,SAASC,cAAc,QAAQ,aAAU;AAEzC;;;;;;;CAOC,GACD,SAASC,2BAA2BC,WAAoB;IACtD,IAAI,OAAOA,gBAAgB,UAAU;QACnC,OAAO;IACT;IAEA,MAAMC,QAAQ,YAAYC,IAAI,CAACF;IAE/B,OAAOC,QAAQE,OAAOF,KAAK,CAAC,EAAE,IAAI;AACpC;AAEA,SAASG,yBAAyBC,KAAc;IAC9C,IAAI,OAAOA,UAAU,YAAY,OAAOA,UAAU,UAAU;QAC1D,OAAO;IACT;IACA,MAAMC,OAAOH,OAAOE;IACpB,OAAOC,OAAO,IAAIA,OAAO;AAC3B;AAEA,SAASC,sBAAsBC,OAAoB;IACjD,OAAOA,QAAQC,IAAI,CAACT,WAAW,IAAI;AACrC;AAEA,SAASU,oBAAoBF,OAAoB;IAC/C,OAAOA,QAAQG,KAAK,CAACN,KAAK,IAAI;AAChC;AAEA,SAASO,qBAAqBJ,OAAoB;IAChD,MAAMK,oBAAoBd,2BAA2BQ,sBAAsBC;IAC3E,MAAMM,cAAcV,yBAAyBM,oBAAoBF;IACjE,OAAOM,cAAcA,cAAcD;AACrC;AAYA,SAASE,qCACPC,SAAiB,EACjBC,QAAkB,EAClBC,UAAsB,EACtBC,MAAmC;IAEnC,MAAMC,WAAWR,qBAAqBK,SAASI,KAAK;IAEpD,IAAID,aAAa,MAAM;QACrB;IACF;IAEA,MAAME,SAASJ,WAAWF;IAE1B,IAAIM,WAAWF,YAAaE,WAAWJ,WAAWK,QAAQ,IAAIH,YAAYE,QAAS;QACjF;IACF;IAEA,MAAME,WAAWjB,sBAAsBU,SAASI,KAAK;IACrD,MAAMI,cAAcD,WAAW,GAAGP,SAASS,IAAI,CAAC,GAAG,EAAEF,SAAS,IAAI,CAAC,GAAGP,SAASS,IAAI;IAEnFP,OACE,CAAC,SAAS,EAAEM,YAAY,gDAAgD,EAAET,UAAU,wBAAwB,EAAEC,SAASS,IAAI,CAAC,+BAA+B,EAAEJ,OAAO,oDAAoD,EAAEE,SAAS,QAAQ,EAAEF,OAAO,UAAU,EAAEA,OAAO,IAAI,CAAC,EAC5Q;AAEJ;AAEA,MAAMK,gBAAgBjC,SAAS;AAE/B,OAAO,SAASkC,qBAAqBZ,SAAiB,EAAEC,QAAkB;IACxE,OAAOF,qCACLC,WACAC,UACArB,oCACA+B;AAEJ;AAEA,MAAME,oBAAoB,IAAIC,IAAYhC;AAE1C,MAAMiC,eAAeC,MAAMC,IAAI,CAACJ,mBAAmBK,GAAG,CAAC,CAACC,MAAQhC,OAAOgC;AACvE,MAAMC,UAAUL,aAAaM,MAAM,CAAC,CAACD,SAAS9B,OAAUA,OAAO8B,UAAU9B,OAAO8B,SAAU;AAE1F,OAAO,SAASE,aAAatB,SAAiB;IAC5C,IAAIA,YAAYoB,WAAWP,kBAAkBU,GAAG,CAACvB,YAAY;QAC3D;IACF;IACAW,cACE,CAAC,QAAQ,EAAEX,UAAU,0FAA0F,EAAEe,aAAaS,IAAI,CAChI,QACC,EACH;AAEJ;AAEA,MAAMC,qBAAqB/C,SAAS;AAEpC,OAAO,SAASgD,kBAAkB1B,SAAiB,EAAEC,QAAkB;IACrE,IAAID,YAAY,MAAMC,UAAU;QAC9B,OAAOwB,mBAAmB,yCAAyC;IACrE;IACA1B,qCACEC,WACAC,UACAtB,iCACA8C;AAEJ;AAEA,MAAME,uBAAuBjD,SAAS;AAEtC,OAAO,SAASkD,oBAAoB5B,SAAiB,EAAEC,QAAkB;IACvEF,qCACEC,WACAC,UACApB,mCACA8C;AAEJ"}
+{"version":3,"sources":["../../../../src/components/ImageBase/validators.ts"],"sourcesContent":["import type * as React from 'react';\nimport { warnOnce } from '../../lib/warnOnce';\nimport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\nimport { imageBaseSizes } from './types';\n\n/**\n * Пример,\n *\n * Icon28User -> 28\n * Icon12Circle1 -> 12\n * Icon12Circle2 -> 12\n * Icon20TextHeading1Outline -> 20\n */\nfunction parseIconSizeByDisplayName(displayName: unknown): number | null {\n  if (typeof displayName !== 'string') {\n    return null;\n  }\n\n  const match = /Icon(\\d+)/.exec(displayName);\n\n  return match ? Number(match[1]) : null;\n}\n\nfunction parseIconSizeByWidthProp(width: unknown): number | null {\n  if (typeof width !== 'string' && typeof width !== 'number') {\n    return null;\n  }\n  const size = Number(width);\n  return size > 0 ? size : null;\n}\n\nfunction getElementDisplayName(element: React.JSX.Element): string | null {\n  return element.type.displayName ?? null;\n}\n\nfunction getElementWidthProp(element: React.JSX.Element): number | string | null {\n  return element.props.width ?? null;\n}\n\nfunction getIconSizeByElement(element: React.JSX.Element): number | null {\n  const sizeByDisplayName = parseIconSizeByDisplayName(getElementDisplayName(element));\n  const sizeByWidth = parseIconSizeByWidthProp(getElementWidthProp(element));\n  return sizeByWidth ? sizeByWidth : sizeByDisplayName;\n}\n\ninterface IconProp {\n  name: string;\n  value: React.JSX.Element;\n}\n\ninterface SelectorFn {\n  (imageSize: number): number;\n  MAX_SIZE: number;\n}\n\nfunction validateIconComponentSizeByImageSize(\n  imageSize: number,\n  iconProp: IconProp,\n  selectorFn: SelectorFn,\n  logger: ReturnType<typeof warnOnce>,\n) {\n  const iconSize = getIconSizeByElement(iconProp.value);\n\n  if (iconSize === null) {\n    return;\n  }\n\n  const result = selectorFn(imageSize);\n\n  if (result === iconSize || (result === selectorFn.MAX_SIZE && iconSize >= result)) {\n    return;\n  }\n\n  const iconName = getElementDisplayName(iconProp.value);\n  const propMessage = iconName ? `${iconProp.name}={<${iconName} />}` : iconProp.name;\n\n  logger(\n    `Размер \\`${propMessage}\\` не соответствует дизайн-системе. Для \\`size={${imageSize}}\\` размер иконки для \\`${iconProp.name}\\` должен соответствовать <Icon${result}<name> />. Если такого размера нет, то используйте <${iconName} width={${result}} height={${result}} />`,\n    'log',\n  );\n}\n\nconst warnImageBase = warnOnce('ImageBase');\n\nexport function validateFallbackIcon(imageSize: number, iconProp: IconProp): void {\n  return validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getFallbackIconSizeByImageBaseSize,\n    warnImageBase,\n  );\n}\n\nconst mapOfExpectedSize = new Set<number>(imageBaseSizes);\n\nconst arrayOfSizes = Array.from(mapOfExpectedSize).map((str) => Number(str));\nconst maxSize = arrayOfSizes.reduce((maxSize, size) => (size > maxSize ? size : maxSize), 0);\n\nexport function validateSize(imageSize: number): void {\n  if (imageSize > maxSize || mapOfExpectedSize.has(imageSize)) {\n    return;\n  }\n  warnImageBase(\n    `\\`size={${imageSize}}\\` не соответствует дизайн-системе. Пожалуйста, используйте один из следующих вариантов: ${arrayOfSizes.join(\n      ' | ',\n    )}`,\n    'log',\n  );\n}\n\nconst warnImageBaseBadge = warnOnce('ImageBase.Badge');\n\nexport function validateBadgeIcon(imageSize: number, iconProp: IconProp): void {\n  if (imageSize < 24 && iconProp) {\n    return warnImageBaseBadge('Не используйте бейдж при `size < 24`.', 'log');\n  }\n  validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getBadgeIconSizeByImageBaseSize,\n    warnImageBaseBadge,\n  );\n}\n\nconst warnImageBaseOverlay = warnOnce('ImageBase.Overlay');\n\nexport function validateOverlayIcon(imageSize: number, iconProp: IconProp): void {\n  validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getOverlayIconSizeByImageBaseSize,\n    warnImageBaseOverlay,\n  );\n}\n"],"names":["warnOnce","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","imageBaseSizes","parseIconSizeByDisplayName","displayName","match","exec","Number","parseIconSizeByWidthProp","width","size","getElementDisplayName","element","type","getElementWidthProp","props","getIconSizeByElement","sizeByDisplayName","sizeByWidth","validateIconComponentSizeByImageSize","imageSize","iconProp","selectorFn","logger","iconSize","value","result","MAX_SIZE","iconName","propMessage","name","warnImageBase","validateFallbackIcon","mapOfExpectedSize","Set","arrayOfSizes","Array","from","map","str","maxSize","reduce","validateSize","has","join","warnImageBaseBadge","validateBadgeIcon","warnImageBaseOverlay","validateOverlayIcon"],"mappings":"AACA,SAASA,QAAQ,QAAQ,wBAAqB;AAC9C,SACEC,+BAA+B,EAC/BC,kCAAkC,EAClCC,iCAAiC,QAC5B,eAAY;AACnB,SAASC,cAAc,QAAQ,aAAU;AAEzC;;;;;;;CAOC,GACD,SAASC,2BAA2BC,WAAoB;IACtD,IAAI,OAAOA,gBAAgB,UAAU;QACnC,OAAO;IACT;IAEA,MAAMC,QAAQ,YAAYC,IAAI,CAACF;IAE/B,OAAOC,QAAQE,OAAOF,KAAK,CAAC,EAAE,IAAI;AACpC;AAEA,SAASG,yBAAyBC,KAAc;IAC9C,IAAI,OAAOA,UAAU,YAAY,OAAOA,UAAU,UAAU;QAC1D,OAAO;IACT;IACA,MAAMC,OAAOH,OAAOE;IACpB,OAAOC,OAAO,IAAIA,OAAO;AAC3B;AAEA,SAASC,sBAAsBC,OAA0B;IACvD,OAAOA,QAAQC,IAAI,CAACT,WAAW,IAAI;AACrC;AAEA,SAASU,oBAAoBF,OAA0B;IACrD,OAAOA,QAAQG,KAAK,CAACN,KAAK,IAAI;AAChC;AAEA,SAASO,qBAAqBJ,OAA0B;IACtD,MAAMK,oBAAoBd,2BAA2BQ,sBAAsBC;IAC3E,MAAMM,cAAcV,yBAAyBM,oBAAoBF;IACjE,OAAOM,cAAcA,cAAcD;AACrC;AAYA,SAASE,qCACPC,SAAiB,EACjBC,QAAkB,EAClBC,UAAsB,EACtBC,MAAmC;IAEnC,MAAMC,WAAWR,qBAAqBK,SAASI,KAAK;IAEpD,IAAID,aAAa,MAAM;QACrB;IACF;IAEA,MAAME,SAASJ,WAAWF;IAE1B,IAAIM,WAAWF,YAAaE,WAAWJ,WAAWK,QAAQ,IAAIH,YAAYE,QAAS;QACjF;IACF;IAEA,MAAME,WAAWjB,sBAAsBU,SAASI,KAAK;IACrD,MAAMI,cAAcD,WAAW,GAAGP,SAASS,IAAI,CAAC,GAAG,EAAEF,SAAS,IAAI,CAAC,GAAGP,SAASS,IAAI;IAEnFP,OACE,CAAC,SAAS,EAAEM,YAAY,gDAAgD,EAAET,UAAU,wBAAwB,EAAEC,SAASS,IAAI,CAAC,+BAA+B,EAAEJ,OAAO,oDAAoD,EAAEE,SAAS,QAAQ,EAAEF,OAAO,UAAU,EAAEA,OAAO,IAAI,CAAC,EAC5Q;AAEJ;AAEA,MAAMK,gBAAgBjC,SAAS;AAE/B,OAAO,SAASkC,qBAAqBZ,SAAiB,EAAEC,QAAkB;IACxE,OAAOF,qCACLC,WACAC,UACArB,oCACA+B;AAEJ;AAEA,MAAME,oBAAoB,IAAIC,IAAYhC;AAE1C,MAAMiC,eAAeC,MAAMC,IAAI,CAACJ,mBAAmBK,GAAG,CAAC,CAACC,MAAQhC,OAAOgC;AACvE,MAAMC,UAAUL,aAAaM,MAAM,CAAC,CAACD,SAAS9B,OAAUA,OAAO8B,UAAU9B,OAAO8B,SAAU;AAE1F,OAAO,SAASE,aAAatB,SAAiB;IAC5C,IAAIA,YAAYoB,WAAWP,kBAAkBU,GAAG,CAACvB,YAAY;QAC3D;IACF;IACAW,cACE,CAAC,QAAQ,EAAEX,UAAU,0FAA0F,EAAEe,aAAaS,IAAI,CAChI,QACC,EACH;AAEJ;AAEA,MAAMC,qBAAqB/C,SAAS;AAEpC,OAAO,SAASgD,kBAAkB1B,SAAiB,EAAEC,QAAkB;IACrE,IAAID,YAAY,MAAMC,UAAU;QAC9B,OAAOwB,mBAAmB,yCAAyC;IACrE;IACA1B,qCACEC,WACAC,UACAtB,iCACA8C;AAEJ;AAEA,MAAME,uBAAuBjD,SAAS;AAEtC,OAAO,SAASkD,oBAAoB5B,SAAiB,EAAEC,QAAkB;IACvEF,qCACEC,WACAC,UACApB,mCACA8C;AAEJ"}