@vkontakte/vkui 5.2.4 → 5.3.1

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

@@ -1,128 +1,91 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["alt", "crossOrigin", "decoding", "loading", "referrerPolicy", "sizes", "src", "srcSet", "useMap", "getRef", "size", "width", "height", "style", "className", "getRootRef", "withBorder", "fallbackIcon", "children", "aria-label", "onClick", "onLoad", "onError"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { ImageBaseBadge } from './ImageBaseBadge/ImageBaseBadge';
 import { ImageBaseOverlay } from './ImageBaseOverlay/ImageBaseOverlay';
 import { ImageBaseContext } from './context';
 import { validateFallbackIcon, validateSize } from './validators';
-import "./ImageBase.module.css";
+import styles from './ImageBase.module.css';
 export { getBadgeIconSizeByImageBaseSize, getFallbackIconSizeByImageBaseSize, getOverlayIconSizeByImageBaseSize } from './helpers';
 export { ImageBaseContext };
 /**
  * @see https://vkcom.github.io/VKUI/#/ImageBase
- */
-export var ImageBase = function ImageBase(_ref) {
-  var alt = _ref.alt,
-    crossOrigin = _ref.crossOrigin,
-    decoding = _ref.decoding,
-    loading = _ref.loading,
-    referrerPolicy = _ref.referrerPolicy,
-    sizes = _ref.sizes,
-    src = _ref.src,
-    srcSet = _ref.srcSet,
-    useMap = _ref.useMap,
-    getRef = _ref.getRef,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 24 : _ref$size,
-    width = _ref.width,
-    height = _ref.height,
-    style = _ref.style,
-    className = _ref.className,
-    getRootRef = _ref.getRootRef,
-    _ref$withBorder = _ref.withBorder,
-    withBorder = _ref$withBorder === void 0 ? true : _ref$withBorder,
-    fallbackIconProp = _ref['fallbackIcon'],
-    children = _ref.children,
-    ariaLabel = _ref['aria-label'],
-    onClick = _ref.onClick,
-    onLoad = _ref.onLoad,
-    onError = _ref.onError,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    loaded = _React$useState2[0],
-    setLoaded = _React$useState2[1];
-  var _React$useState3 = React.useState(false),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    failed = _React$useState4[0],
-    setFailed = _React$useState4[1];
-  var hasSrc = src || srcSet;
-  var needShowFallbackIcon = (failed || !hasSrc) && /*#__PURE__*/React.isValidElement(fallbackIconProp);
-  var fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;
-  if (process.env.NODE_ENV === 'development') {
-    validateSize(size);
-    if (fallbackIcon) {
-      validateFallbackIcon(size, {
-        name: 'fallbackIcon',
-        value: fallbackIcon
-      });
+ */ export const ImageBase = ({ alt , crossOrigin , decoding , loading , referrerPolicy , sizes , src , srcSet , useMap , getRef , size =24 , width , height , style , className , getRootRef , withBorder =true , 'fallbackIcon': fallbackIconProp , children , 'aria-label': ariaLabel , onClick , onLoad , onError , ...restProps })=>{
+    const [loaded, setLoaded] = React.useState(false);
+    const [failed, setFailed] = React.useState(false);
+    const hasSrc = src || srcSet;
+    const needShowFallbackIcon = (failed || !hasSrc) && /*#__PURE__*/ React.isValidElement(fallbackIconProp);
+    const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;
+    if (process.env.NODE_ENV === 'development') {
+        validateSize(size);
+        if (fallbackIcon) {
+            validateFallbackIcon(size, {
+                name: 'fallbackIcon',
+                value: fallbackIcon
+            });
+        }
     }
-  }
-  var handleImageLoad = function handleImageLoad(event) {
-    setLoaded(true);
-    setFailed(false);
-    onLoad === null || onLoad === void 0 ? void 0 : onLoad(event);
-  };
-  var handleImageError = function handleImageError(event) {
-    setLoaded(false);
-    setFailed(true);
-    onError === null || onError === void 0 ? void 0 : onError(event);
-  };
-  return /*#__PURE__*/React.createElement(ImageBaseContext.Provider, {
-    value: {
-      size: size
-    }
-  }, /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    ref: getRootRef,
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      width: size,
-      height: size
-    }),
-    className: classNames(className, "vkuiImageBase", styles["ImageBase--size-".concat(size)], withBorder && "vkuiImageBase--withBorder", loaded && "vkuiImageBase--loaded"),
-    role: hasSrc ? 'img' : 'presentation',
-    "aria-label": ariaLabel,
-    onClick: onClick
-  }), hasSrc && /*#__PURE__*/React.createElement("img", {
-    ref: getRef,
-    alt: alt,
-    className: "vkuiImageBase__img",
-    crossOrigin: crossOrigin,
-    decoding: decoding,
-    loading: loading,
-    referrerPolicy: referrerPolicy,
-    sizes: sizes,
-    src: src,
-    srcSet: srcSet,
-    useMap: useMap,
-    width: width,
-    height: height,
-    onLoad: handleImageLoad,
-    onError: handleImageError
-  }), fallbackIcon && /*#__PURE__*/React.createElement("div", {
-    className: classNames("vkuiImageBase__fallback")
-  }, fallbackIcon), children));
+    const handleImageLoad = (event)=>{
+        setLoaded(true);
+        setFailed(false);
+        onLoad?.(event);
+    };
+    const handleImageError = (event)=>{
+        setLoaded(false);
+        setFailed(true);
+        onError?.(event);
+    };
+    const sizeClassName = (()=>{
+        switch(size){
+            case 28:
+                return styles['ImageBase--size-28'];
+            case 32:
+                return styles['ImageBase--size-32'];
+            case 40:
+                return styles['ImageBase--size-40'];
+            case 48:
+                return styles['ImageBase--size-48'];
+            case 72:
+                return styles['ImageBase--size-72'];
+        }
+        return null;
+    })();
+    return /*#__PURE__*/ React.createElement(ImageBaseContext.Provider, {
+        value: {
+            size
+        }
+    }, /*#__PURE__*/ React.createElement("div", {
+        ...restProps,
+        ref: getRootRef,
+        style: {
+            ...style,
+            width: size,
+            height: size
+        },
+        className: classNames(className, styles['ImageBase'], sizeClassName, withBorder && styles['ImageBase--withBorder'], loaded && styles['ImageBase--loaded']),
+        role: hasSrc ? 'img' : 'presentation',
+        "aria-label": ariaLabel,
+        onClick: onClick
+    }, hasSrc && /*#__PURE__*/ React.createElement("img", {
+        ref: getRef,
+        alt: alt,
+        className: styles['ImageBase__img'],
+        crossOrigin: crossOrigin,
+        decoding: decoding,
+        loading: loading,
+        referrerPolicy: referrerPolicy,
+        sizes: sizes,
+        src: src,
+        srcSet: srcSet,
+        useMap: useMap,
+        width: width,
+        height: height,
+        onLoad: handleImageLoad,
+        onError: handleImageError
+    }), fallbackIcon && /*#__PURE__*/ React.createElement("div", {
+        className: classNames(styles['ImageBase__fallback'])
+    }, fallbackIcon), children));
 };
 ImageBase.Badge = ImageBaseBadge;
 ImageBase.Overlay = ImageBaseOverlay;
-var styles = {
-  "ImageBase--size-16": "vkuiImageBase--size-16",
-  "ImageBase--size-20": "vkuiImageBase--size-20",
-  "ImageBase--size-24": "vkuiImageBase--size-24",
-  "ImageBase--size-28": "vkuiImageBase--size-28",
-  "ImageBase--size-32": "vkuiImageBase--size-32",
-  "ImageBase--size-36": "vkuiImageBase--size-36",
-  "ImageBase--size-40": "vkuiImageBase--size-40",
-  "ImageBase--size-44": "vkuiImageBase--size-44",
-  "ImageBase--size-48": "vkuiImageBase--size-48",
-  "ImageBase--size-56": "vkuiImageBase--size-56",
-  "ImageBase--size-64": "vkuiImageBase--size-64",
-  "ImageBase--size-72": "vkuiImageBase--size-72",
-  "ImageBase--size-80": "vkuiImageBase--size-80",
-  "ImageBase--size-88": "vkuiImageBase--size-88",
-  "ImageBase--size-96": "vkuiImageBase--size-96"
-};
+
 //# sourceMappingURL=ImageBase.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ImageBase.js","names":["React","classNames","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","getRef","size","width","height","style","className","getRootRef","withBorder","fallbackIconProp","children","ariaLabel","onClick","onLoad","onError","restProps","useState","loaded","setLoaded","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","fallbackIcon","process","env","NODE_ENV","name","value","handleImageLoad","event","handleImageError","styles","Badge","Overlay"],"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRef, HasRootRef } from '../../types';\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\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\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?: ImageBaseSize | number;\n  /**\n   * Включает или отключает обводку.\n   */\n  withBorder?: 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/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  getRef,\n  size = 24,\n  width,\n  height,\n  style,\n  className,\n  getRootRef,\n  withBorder = true,\n  'fallbackIcon': fallbackIconProp,\n  children,\n  'aria-label': ariaLabel,\n  onClick,\n  onLoad,\n  onError,\n  ...restProps\n}: ImageBaseProps) => {\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    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  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <div\n        {...restProps}\n        ref={getRootRef}\n        style={{ ...style, width: size, height: size }}\n        className={classNames(\n          className,\n          styles['ImageBase'],\n          styles[`ImageBase--size-${size as ImageBaseSize}`],\n          withBorder && styles['ImageBase--withBorder'],\n          loaded && styles['ImageBase--loaded'],\n        )}\n        role={hasSrc ? 'img' : 'presentation'}\n        aria-label={ariaLabel}\n        onClick={onClick}\n      >\n        {hasSrc && (\n          <img\n            ref={getRef}\n            alt={alt}\n            className={styles['ImageBase__img']}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={width}\n            height={height}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n          />\n        )}\n        {fallbackIcon && (\n          <div className={classNames(styles['ImageBase__fallback'])}>{fallbackIcon}</div>\n        )}\n        {children}\n      </div>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.Badge = ImageBaseBadge;\n\nImageBase.Overlay = ImageBaseOverlay;\n"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRef, HasRootRef } from '../../types';\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\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\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?: ImageBaseSize | number;\n  /**\n   * Включает или отключает обводку.\n   */\n  withBorder?: 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/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  getRef,\n  size = 24,\n  width,\n  height,\n  style,\n  className,\n  getRootRef,\n  withBorder = true,\n  'fallbackIcon': fallbackIconProp,\n  children,\n  'aria-label': ariaLabel,\n  onClick,\n  onLoad,\n  onError,\n  ...restProps\n}: ImageBaseProps) => {\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    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 sizeClassName = (() => {\n    switch (size) {\n      case 28:\n        return styles['ImageBase--size-28'];\n      case 32:\n        return styles['ImageBase--size-32'];\n      case 40:\n        return styles['ImageBase--size-40'];\n      case 48:\n        return styles['ImageBase--size-48'];\n      case 72:\n        return styles['ImageBase--size-72'];\n    }\n\n    return null;\n  })();\n\n  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <div\n        {...restProps}\n        ref={getRootRef}\n        style={{ ...style, width: size, height: size }}\n        className={classNames(\n          className,\n          styles['ImageBase'],\n          sizeClassName,\n          withBorder && styles['ImageBase--withBorder'],\n          loaded && styles['ImageBase--loaded'],\n        )}\n        role={hasSrc ? 'img' : 'presentation'}\n        aria-label={ariaLabel}\n        onClick={onClick}\n      >\n        {hasSrc && (\n          <img\n            ref={getRef}\n            alt={alt}\n            className={styles['ImageBase__img']}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={width}\n            height={height}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n          />\n        )}\n        {fallbackIcon && (\n          <div className={classNames(styles['ImageBase__fallback'])}>{fallbackIcon}</div>\n        )}\n        {children}\n      </div>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.Badge = ImageBaseBadge;\n\nImageBase.Overlay = ImageBaseOverlay;\n"],"names":["React","classNames","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","styles","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","getRef","size","width","height","style","className","getRootRef","withBorder","fallbackIconProp","children","ariaLabel","onClick","onLoad","onError","restProps","loaded","setLoaded","useState","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","fallbackIcon","process","env","NODE_ENV","name","value","handleImageLoad","event","handleImageError","sizeClassName","Provider","div","ref","role","aria-label","img","Badge","Overlay"],"mappings":"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"}

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

@@ -1 +1 @@
-.vkuiImageBase{align-items:center;background-color:#f5f5f5;background-color:var(--vkui--color_background_secondary);background-size:cover;box-sizing:border-box;color:#99a2ad;color:var(--vkui--color_icon_secondary);display:flex;flex-shrink:0;justify-content:center;position:relative}.vkuiImageBase--withBorder{box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);box-shadow:inset 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_image_border_alpha)}.vkuiImageBase__img{border:none;border-radius:inherit;display:block;height:100%;left:0;object-fit:cover;position:absolute;top:0;visibility:hidden;width:100%}.vkuiImageBase--loaded .vkuiImageBase__img{visibility:visible}.vkuiImageBase__fallback{left:auto;position:absolute;top:auto}.vkuiCellButton>.vkuiImageBase .vkuiIcon{color:#2688eb;color:var(--vkui--color_icon_accent)}.vkuiCellButton--mode-danger>.vkuiImageBase .vkuiIcon{color:#e64646;color:var(--vkui--color_icon_negative)}.vkuiPanelHeader__before .vkuiImageBase{margin-left:8px}.vkuiPanelHeader__after .vkuiImageBase{margin-right:8px}.vkuiSimpleCell>.vkuiImageBase{margin-right:12px}.vkuiSimpleCell>.vkuiImageBase--size-28,.vkuiSimpleCell>.vkuiImageBase--size-32{margin-bottom:10px;margin-top:10px}.vkuiSimpleCell>.vkuiImageBase--size-40{margin-bottom:4px;margin-top:4px}.vkuiSimpleCell>.vkuiImageBase--size-48,.vkuiSimpleCell>.vkuiImageBase--size-72{margin-bottom:6px;margin-top:6px}.vkuiSimpleCell--ios>.vkuiImageBase--size-28,.vkuiSimpleCell--ios>.vkuiImageBase--size-32{margin-left:4px}.vkuiSimpleCell--sizeY-compact>.vkuiImageBase--size-28,.vkuiSimpleCell--sizeY-compact>.vkuiImageBase--size-32{margin-bottom:8px;margin-top:8px}.vkuiSimpleCell--sizeY-compact>.vkuiImageBase--size-40{margin-bottom:2px;margin-top:2px}.vkuiSimpleCell--sizeY-compact>.vkuiImageBase--size-48{margin-bottom:4px;margin-top:4px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiSimpleCell--sizeY-none>.vkuiImageBase--size-28,.vkuiSimpleCell--sizeY-none>.vkuiImageBase--size-32{margin-bottom:8px;margin-top:8px}.vkuiSimpleCell--sizeY-none>.vkuiImageBase--size-40{margin-bottom:2px;margin-top:2px}.vkuiSimpleCell--sizeY-none>.vkuiImageBase--size-48{margin-bottom:4px;margin-top:4px}}
+.vkuiImageBase{align-items:center;background-color:#f5f5f5;background-color:var(--vkui--color_background_secondary);background-size:cover;box-sizing:border-box;color:#99a2ad;color:var(--vkui--color_icon_secondary);display:flex;flex-shrink:0;justify-content:center;position:relative}.vkuiImageBase--withBorder{box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);box-shadow:inset 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_image_border_alpha)}.vkuiImageBase__img{border:none;border-radius:inherit;display:block;height:100%;left:0;object-fit:cover;position:absolute;top:0;visibility:hidden;width:100%}.vkuiImageBase--loaded .vkuiImageBase__img{visibility:visible}.vkuiImageBase__fallback{left:auto;position:absolute;top:auto}.vkuiInternalCellButton>.vkuiImageBase .vkuiIcon{color:#2688eb;color:var(--vkui--color_icon_accent)}.vkuiInternalCellButton--mode-danger>.vkuiImageBase .vkuiIcon{color:#e64646;color:var(--vkui--color_icon_negative)}.vkuiInternalPanelHeader__before .vkuiImageBase{margin-left:8px}.vkuiInternalPanelHeader__after .vkuiImageBase{margin-right:8px}.vkuiInternalSimpleCell>.vkuiImageBase{margin-right:12px}.vkuiInternalSimpleCell>.vkuiImageBase--size-28,.vkuiInternalSimpleCell>.vkuiImageBase--size-32{margin-bottom:10px;margin-top:10px}.vkuiInternalSimpleCell>.vkuiImageBase--size-40{margin-bottom:4px;margin-top:4px}.vkuiInternalSimpleCell>.vkuiImageBase--size-48,.vkuiInternalSimpleCell>.vkuiImageBase--size-72{margin-bottom:6px;margin-top:6px}.vkuiInternalSimpleCell--ios>.vkuiImageBase--size-28,.vkuiInternalSimpleCell--ios>.vkuiImageBase--size-32{margin-left:4px}.vkuiInternalSimpleCell--sizeY-compact>.vkuiImageBase--size-28,.vkuiInternalSimpleCell--sizeY-compact>.vkuiImageBase--size-32{margin-bottom:8px;margin-top:8px}.vkuiInternalSimpleCell--sizeY-compact>.vkuiImageBase--size-40{margin-bottom:2px;margin-top:2px}.vkuiInternalSimpleCell--sizeY-compact>.vkuiImageBase--size-48{margin-bottom:4px;margin-top:4px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiInternalSimpleCell--sizeY-none>.vkuiImageBase--size-28,.vkuiInternalSimpleCell--sizeY-none>.vkuiImageBase--size-32{margin-bottom:8px;margin-top:8px}.vkuiInternalSimpleCell--sizeY-none>.vkuiImageBase--size-40{margin-bottom:2px;margin-top:2px}.vkuiInternalSimpleCell--sizeY-none>.vkuiImageBase--size-48{margin-bottom:4px;margin-top:4px}}

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

@@ -1,39 +1,31 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["background", "children", "className"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { ImageBaseContext } from '../context';
 import { validateBadgeIcon } from '../validators';
-import "./ImageBaseBadge.module.css";
-var backgroundStyles = {
-  stroke: "vkuiImageBaseBadge--background-stroke",
-  shadow: "vkuiImageBaseBadge--background-shadow"
+import styles from './ImageBaseBadge.module.css';
+const backgroundStyles = {
+    stroke: styles['ImageBaseBadge--background-stroke'],
+    shadow: styles['ImageBaseBadge--background-shadow']
 };
 /**
  * Бейдж в правом нижнем углу компонента.
  *
  * > Не используйте при `size < 24`
- */
-export var ImageBaseBadge = function ImageBaseBadge(_ref) {
-  var _ref$background = _ref.background,
-    background = _ref$background === void 0 ? 'shadow' : _ref$background,
-    children = _ref.children,
-    className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  if (process.env.NODE_ENV === 'development') {
-    if (children) {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      var _React$useContext = React.useContext(ImageBaseContext),
-        size = _React$useContext.size;
-      validateBadgeIcon(size, {
-        name: 'children',
-        value: children
-      });
+ */ export const ImageBaseBadge = ({ background ='shadow' , children , className , ...restProps })=>{
+    if (process.env.NODE_ENV === 'development') {
+        if (children) {
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            const { size  } = React.useContext(ImageBaseContext);
+            validateBadgeIcon(size, {
+                name: 'children',
+                value: children
+            });
+        }
     }
-  }
-  return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    className: classNames("vkuiImageBaseBadge", backgroundStyles[background], className)
-  }), children);
+    return /*#__PURE__*/ React.createElement("div", {
+        ...restProps,
+        className: classNames(styles['ImageBaseBadge'], backgroundStyles[background], className)
+    }, children);
 };
+
 //# sourceMappingURL=ImageBaseBadge.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ImageBaseBadge.js","names":["React","classNames","ImageBaseContext","validateBadgeIcon","backgroundStyles","stroke","shadow","ImageBaseBadge","background","children","className","restProps","process","env","NODE_ENV","useContext","size","name","value"],"sources":["../../../../../src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBaseContext } from '../context';\nimport type { ImageBaseExpectedIconProps } from '../types';\nimport { validateBadgeIcon } from '../validators';\nimport styles from './ImageBaseBadge.module.css';\n\nconst backgroundStyles = {\n  stroke: styles['ImageBaseBadge--background-stroke'],\n  shadow: styles['ImageBaseBadge--background-shadow'],\n};\n\nexport interface ImageBaseBadgeProps extends React.AriaAttributes {\n  /**\n   * Вид подложки под иконку.\n   *\n   * - `\"stroke\"` – имитирует вырез (⚠️ если фон под компонентом динамический, то ожидайте баг).\n   * - `\"shadow\"` – добавляет небольшую тень.\n   */\n  background?: 'stroke' | 'shadow';\n  /**\n   * Принимает иконку.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getBadgeIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   */\n  children: React.ReactElement<ImageBaseExpectedIconProps>;\n  className?: string;\n}\n\n/**\n * Бейдж в правом нижнем углу компонента.\n *\n * > Не используйте при `size < 24`\n */\nexport const ImageBaseBadge = ({\n  background = 'shadow',\n  children,\n  className,\n  ...restProps\n}: ImageBaseBadgeProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    if (children) {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const { size } = React.useContext(ImageBaseContext);\n      validateBadgeIcon(size, { name: 'children', value: children });\n    }\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(styles['ImageBaseBadge'], backgroundStyles[background], className)}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,gBAAgB,QAAQ,YAAY;AAE7C,SAASC,iBAAiB,QAAQ,eAAe;AAAC;AAGlD,IAAMC,gBAAgB,GAAG;EACvBC,MAAM,yCAA6C;EACnDC,MAAM;AACR,CAAC;AAyBD;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAc,OAKA;EAAA,2BAJzBC,UAAU;IAAVA,UAAU,gCAAG,QAAQ;IACrBC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAIL,QAAQ,EAAE;MACZ;MACA,wBAAiBT,KAAK,CAACe,UAAU,CAACb,gBAAgB,CAAC;QAA3Cc,IAAI,qBAAJA,IAAI;MACZb,iBAAiB,CAACa,IAAI,EAAE;QAAEC,IAAI,EAAE,UAAU;QAAEC,KAAK,EAAET;MAAS,CAAC,CAAC;IAChE;EACF;EAEA,oBACE,wCACME,SAAS;IACb,SAAS,EAAEV,UAAU,uBAA2BG,gBAAgB,CAACI,UAAU,CAAC,EAAEE,SAAS;EAAE,IAExFD,QAAQ,CACL;AAEV,CAAC"}
+{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBaseContext } from '../context';\nimport type { ImageBaseExpectedIconProps } from '../types';\nimport { validateBadgeIcon } from '../validators';\nimport styles from './ImageBaseBadge.module.css';\n\nconst backgroundStyles = {\n  stroke: styles['ImageBaseBadge--background-stroke'],\n  shadow: styles['ImageBaseBadge--background-shadow'],\n};\n\nexport interface ImageBaseBadgeProps extends React.AriaAttributes {\n  /**\n   * Вид подложки под иконку.\n   *\n   * - `\"stroke\"` – имитирует вырез (⚠️ если фон под компонентом динамический, то ожидайте баг).\n   * - `\"shadow\"` – добавляет небольшую тень.\n   */\n  background?: 'stroke' | 'shadow';\n  /**\n   * Принимает иконку.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getBadgeIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   */\n  children: React.ReactElement<ImageBaseExpectedIconProps>;\n  className?: string;\n}\n\n/**\n * Бейдж в правом нижнем углу компонента.\n *\n * > Не используйте при `size < 24`\n */\nexport const ImageBaseBadge = ({\n  background = 'shadow',\n  children,\n  className,\n  ...restProps\n}: ImageBaseBadgeProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    if (children) {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const { size } = React.useContext(ImageBaseContext);\n      validateBadgeIcon(size, { name: 'children', value: children });\n    }\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(styles['ImageBaseBadge'], backgroundStyles[background], className)}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","ImageBaseContext","validateBadgeIcon","styles","backgroundStyles","stroke","shadow","ImageBaseBadge","background","children","className","restProps","process","env","NODE_ENV","size","useContext","name","value","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,gBAAgB,QAAQ,aAAa;AAE9C,SAASC,iBAAiB,QAAQ,gBAAgB;AAClD,OAAOC,YAAY,8BAA8B;AAEjD,MAAMC,mBAAmB;IACvBC,QAAQF,MAAM,CAAC,oCAAoC;IACnDG,QAAQH,MAAM,CAAC,oCAAoC;AACrD;AAyBA;;;;CAIC,GACD,OAAO,MAAMI,iBAAiB,CAAC,EAC7BC,YAAa,SAAQ,EACrBC,SAAQ,EACRC,UAAS,EACT,GAAGC,WACiB,GAAK;IACzB,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIL,UAAU;YACZ,sDAAsD;YACtD,MAAM,EAAEM,KAAI,EAAE,GAAGhB,MAAMiB,UAAU,CAACf;YAClCC,kBAAkBa,MAAM;gBAAEE,MAAM;gBAAYC,OAAOT;YAAS;QAC9D,CAAC;IACH,CAAC;IAED,qBACE,oBAACU;QACE,GAAGR,SAAS;QACbD,WAAWV,WAAWG,MAAM,CAAC,iBAAiB,EAAEC,gBAAgB,CAACI,WAAW,EAAEE;OAE7ED;AAGP,EAAE"}

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

@@ -1 +1 @@
-.vkuiImageBaseBadge{border-radius:50%;bottom:0;padding:2px;position:absolute;right:0;transform:translate(2px,2px);z-index:1;z-index:var(--vkui_internal--z_index_image_base_badge)}.vkuiImageBaseBadge--background-stroke{background-color:#fff;background-color:var(--vkui--color_background_content)}.vkuiImageBaseBadge--background-shadow:before{border-radius:inherit;bottom:2px;box-shadow:0 0 2px rgba(0,0,0,.03),0 2px 2px rgba(0,0,0,.06);box-shadow:var(--vkui--elevation1);content:"";left:2px;margin:auto;position:absolute;right:2px;top:2px}
+.vkuiImageBaseBadge{border-radius:50%;bottom:0;padding:2px;position:absolute;right:0;transform:translate(2px,2px);z-index:1;z-index:var(--vkui_internal--z_index_image_base_badge)}.vkuiImageBaseBadge--background-stroke{background-color:#fff;background-color:var(--vkui_internal--background,var(--vkui--color_background_content))}.vkuiImageBaseBadge--background-shadow:before{border-radius:inherit;bottom:2px;box-shadow:0 0 2px rgba(0,0,0,.03),0 2px 2px rgba(0,0,0,.06);box-shadow:var(--vkui--elevation1);content:"";left:2px;margin:auto;position:absolute;right:2px;top:2px}

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

@@ -1,6 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "theme", "visibility", "children", "onClick"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';
@@ -8,41 +5,35 @@ import { useAppearance } from '../../../hooks/useAppearance';
 import { Tappable } from '../../Tappable/Tappable';
 import { ImageBaseContext } from '../context';
 import { validateOverlayIcon } from '../validators';
-import "./ImageBaseOverlay.module.css";
+import styles from './ImageBaseOverlay.module.css';
 /**
  * Интерактивный оверлей над картинкой.
- */
-export var ImageBaseOverlay = function ImageBaseOverlay(_ref) {
-  var className = _ref.className,
-    themeProp = _ref.theme,
-    visibilityProp = _ref.visibility,
-    children = _ref.children,
-    onClick = _ref.onClick,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var appearance = useAppearance();
-  var hasPointer = useAdaptivityHasPointer();
-  var theme = themeProp !== null && themeProp !== void 0 ? themeProp : appearance;
-  var visibility = visibilityProp !== null && visibilityProp !== void 0 ? visibilityProp : hasPointer ? 'on-hover' : 'always';
-  if (process.env.NODE_ENV === 'development') {
-    if (children) {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      var _React$useContext = React.useContext(ImageBaseContext),
-        size = _React$useContext.size;
-      validateOverlayIcon(size, {
-        name: 'children',
-        value: children
-      });
+ */ export const ImageBaseOverlay = ({ className , theme: themeProp , visibility: visibilityProp , children , onClick , ...restProps })=>{
+    const appearance = useAppearance();
+    const hasPointer = useAdaptivityHasPointer();
+    const theme = themeProp ?? appearance;
+    const visibility = visibilityProp ?? (hasPointer ? 'on-hover' : 'always');
+    if (process.env.NODE_ENV === 'development') {
+        if (children) {
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            const { size  } = React.useContext(ImageBaseContext);
+            validateOverlayIcon(size, {
+                name: 'children',
+                value: children
+            });
+        }
     }
-  }
-  return /*#__PURE__*/React.createElement(Tappable, _extends({}, restProps, {
-    type: "button",
-    Component: "button",
-    className: classNames("vkuiImageBaseOverlay", visibility === 'always' && "vkuiImageBaseOverlay--visible", theme === 'light' && "vkuiImageBaseOverlay--theme-light", theme === 'dark' && "vkuiImageBaseOverlay--theme-dark", className),
-    hasHover: visibility === 'on-hover',
-    hoverMode: visibility === 'on-hover' ? "vkuiImageBaseOverlay--visible" : undefined,
-    focusVisibleMode: "vkuiImageBaseOverlay--focus-visible",
-    hasActive: false,
-    onClick: onClick
-  }), children);
+    return /*#__PURE__*/ React.createElement(Tappable, {
+        ...restProps,
+        type: "button",
+        Component: "button",
+        className: classNames(styles['ImageBaseOverlay'], visibility === 'always' && styles['ImageBaseOverlay--visible'], theme === 'light' && styles['ImageBaseOverlay--theme-light'], theme === 'dark' && styles['ImageBaseOverlay--theme-dark'], className),
+        hasHover: visibility === 'on-hover',
+        hoverMode: visibility === 'on-hover' ? styles['ImageBaseOverlay--visible'] : undefined,
+        focusVisibleMode: styles['ImageBaseOverlay--focus-visible'],
+        hasActive: false,
+        onClick: onClick
+    }, children);
 };
+
 //# sourceMappingURL=ImageBaseOverlay.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ImageBaseOverlay.js","names":["React","classNames","useAdaptivityHasPointer","useAppearance","Tappable","ImageBaseContext","validateOverlayIcon","ImageBaseOverlay","className","themeProp","theme","visibilityProp","visibility","children","onClick","restProps","appearance","hasPointer","process","env","NODE_ENV","useContext","size","name","value","undefined"],"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';\nimport { useAppearance } from '../../../hooks/useAppearance';\nimport { Tappable } from '../../Tappable/Tappable';\nimport { ImageBaseContext } from '../context';\nimport type { ImageBaseExpectedIconProps } from '../types';\nimport { validateOverlayIcon } from '../validators';\nimport styles from './ImageBaseOverlay.module.css';\n\nexport interface ImageBaseOverlayProps extends React.AriaAttributes {\n  /**\n   * Задаёт тему оформления.\n   *\n   * > По умолчанию берётся из параметра `appearance` в `ConfigProvider`.\n   */\n  theme?: 'dark' | 'light';\n  /**\n   * Определяет каким образом должен показываться оверлей.\n   *\n   * - `\"on-hover\"` – на наведение указателя мыши.\n   * - `\"always\"` – всегда показывать.\n   *\n   * > По умолчанию определяется в зависимости от того, есть ли у пользователя мышь или нет.\n   */\n  visibility?: 'on-hover' | 'always';\n  /**\n   * Принимает иконку.\n   *\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getOverlayIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   */\n  children: React.ReactElement<ImageBaseExpectedIconProps>;\n  className?: string;\n  onClick?: React.MouseEventHandler<HTMLElement>;\n}\n\n/**\n * Интерактивный оверлей над картинкой.\n */\nexport const ImageBaseOverlay = ({\n  className,\n  theme: themeProp,\n  visibility: visibilityProp,\n  children,\n  onClick,\n  ...restProps\n}: ImageBaseOverlayProps) => {\n  const appearance = useAppearance();\n  const hasPointer = useAdaptivityHasPointer();\n  const theme = themeProp ?? appearance;\n  const visibility = visibilityProp ?? (hasPointer ? 'on-hover' : 'always');\n\n  if (process.env.NODE_ENV === 'development') {\n    if (children) {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const { size } = React.useContext(ImageBaseContext);\n      validateOverlayIcon(size, { name: 'children', value: children });\n    }\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      type=\"button\"\n      Component=\"button\"\n      className={classNames(\n        styles['ImageBaseOverlay'],\n        visibility === 'always' && styles['ImageBaseOverlay--visible'],\n        theme === 'light' && styles['ImageBaseOverlay--theme-light'],\n        theme === 'dark' && styles['ImageBaseOverlay--theme-dark'],\n        className,\n      )}\n      hasHover={visibility === 'on-hover'}\n      hoverMode={visibility === 'on-hover' ? styles['ImageBaseOverlay--visible'] : undefined}\n      focusVisibleMode={styles['ImageBaseOverlay--focus-visible']}\n      hasActive={false}\n      onClick={onClick}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,uBAAuB,QAAQ,wCAAwC;AAChF,SAASC,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,QAAQ,QAAQ,yBAAyB;AAClD,SAASC,gBAAgB,QAAQ,YAAY;AAE7C,SAASC,mBAAmB,QAAQ,eAAe;AAAC;AAoCpD;AACA;AACA;AACA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAOA;EAAA,IAN3BC,SAAS,QAATA,SAAS;IACFC,SAAS,QAAhBC,KAAK;IACOC,cAAc,QAA1BC,UAAU;IACVC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACJC,SAAS;EAEZ,IAAMC,UAAU,GAAGb,aAAa,EAAE;EAClC,IAAMc,UAAU,GAAGf,uBAAuB,EAAE;EAC5C,IAAMQ,KAAK,GAAGD,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIO,UAAU;EACrC,IAAMJ,UAAU,GAAGD,cAAc,aAAdA,cAAc,cAAdA,cAAc,GAAKM,UAAU,GAAG,UAAU,GAAG,QAAS;EAEzE,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAIP,QAAQ,EAAE;MACZ;MACA,wBAAiBb,KAAK,CAACqB,UAAU,CAAChB,gBAAgB,CAAC;QAA3CiB,IAAI,qBAAJA,IAAI;MACZhB,mBAAmB,CAACgB,IAAI,EAAE;QAAEC,IAAI,EAAE,UAAU;QAAEC,KAAK,EAAEX;MAAS,CAAC,CAAC;IAClE;EACF;EAEA,oBACE,oBAAC,QAAQ,eACHE,SAAS;IACb,IAAI,EAAC,QAAQ;IACb,SAAS,EAAC,QAAQ;IAClB,SAAS,EAAEd,UAAU,yBAEnBW,UAAU,KAAK,QAAQ,mCAAuC,EAC9DF,KAAK,KAAK,OAAO,uCAA2C,EAC5DA,KAAK,KAAK,MAAM,sCAA0C,EAC1DF,SAAS,CACT;IACF,QAAQ,EAAEI,UAAU,KAAK,UAAW;IACpC,SAAS,EAAEA,UAAU,KAAK,UAAU,qCAAyCa,SAAU;IACvF,gBAAgB,uCAA4C;IAC5D,SAAS,EAAE,KAAM;IACjB,OAAO,EAAEX;EAAQ,IAEhBD,QAAQ,CACA;AAEf,CAAC"}
+{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';\nimport { useAppearance } from '../../../hooks/useAppearance';\nimport { Tappable } from '../../Tappable/Tappable';\nimport { ImageBaseContext } from '../context';\nimport type { ImageBaseExpectedIconProps } from '../types';\nimport { validateOverlayIcon } from '../validators';\nimport styles from './ImageBaseOverlay.module.css';\n\nexport interface ImageBaseOverlayProps extends React.AriaAttributes {\n  /**\n   * Задаёт тему оформления.\n   *\n   * > По умолчанию берётся из параметра `appearance` в `ConfigProvider`.\n   */\n  theme?: 'dark' | 'light';\n  /**\n   * Определяет каким образом должен показываться оверлей.\n   *\n   * - `\"on-hover\"` – на наведение указателя мыши.\n   * - `\"always\"` – всегда показывать.\n   *\n   * > По умолчанию определяется в зависимости от того, есть ли у пользователя мышь или нет.\n   */\n  visibility?: 'on-hover' | 'always';\n  /**\n   * Принимает иконку.\n   *\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getOverlayIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   */\n  children: React.ReactElement<ImageBaseExpectedIconProps>;\n  className?: string;\n  onClick?: React.MouseEventHandler<HTMLElement>;\n}\n\n/**\n * Интерактивный оверлей над картинкой.\n */\nexport const ImageBaseOverlay = ({\n  className,\n  theme: themeProp,\n  visibility: visibilityProp,\n  children,\n  onClick,\n  ...restProps\n}: ImageBaseOverlayProps) => {\n  const appearance = useAppearance();\n  const hasPointer = useAdaptivityHasPointer();\n  const theme = themeProp ?? appearance;\n  const visibility = visibilityProp ?? (hasPointer ? 'on-hover' : 'always');\n\n  if (process.env.NODE_ENV === 'development') {\n    if (children) {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const { size } = React.useContext(ImageBaseContext);\n      validateOverlayIcon(size, { name: 'children', value: children });\n    }\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      type=\"button\"\n      Component=\"button\"\n      className={classNames(\n        styles['ImageBaseOverlay'],\n        visibility === 'always' && styles['ImageBaseOverlay--visible'],\n        theme === 'light' && styles['ImageBaseOverlay--theme-light'],\n        theme === 'dark' && styles['ImageBaseOverlay--theme-dark'],\n        className,\n      )}\n      hasHover={visibility === 'on-hover'}\n      hoverMode={visibility === 'on-hover' ? styles['ImageBaseOverlay--visible'] : undefined}\n      focusVisibleMode={styles['ImageBaseOverlay--focus-visible']}\n      hasActive={false}\n      onClick={onClick}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","useAdaptivityHasPointer","useAppearance","Tappable","ImageBaseContext","validateOverlayIcon","styles","ImageBaseOverlay","className","theme","themeProp","visibility","visibilityProp","children","onClick","restProps","appearance","hasPointer","process","env","NODE_ENV","size","useContext","name","value","type","Component","hasHover","hoverMode","undefined","focusVisibleMode","hasActive"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,uBAAuB,QAAQ,yCAAyC;AACjF,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,gBAAgB,QAAQ,aAAa;AAE9C,SAASC,mBAAmB,QAAQ,gBAAgB;AACpD,OAAOC,YAAY,gCAAgC;AAmCnD;;CAEC,GACD,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,UAAS,EACTC,OAAOC,UAAS,EAChBC,YAAYC,eAAc,EAC1BC,SAAQ,EACRC,QAAO,EACP,GAAGC,WACmB,GAAK;IAC3B,MAAMC,aAAad;IACnB,MAAMe,aAAahB;IACnB,MAAMQ,QAAQC,aAAaM;IAC3B,MAAML,aAAaC,kBAAmBK,CAAAA,aAAa,aAAa,QAAQ,AAAD;IAEvE,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIP,UAAU;YACZ,sDAAsD;YACtD,MAAM,EAAEQ,KAAI,EAAE,GAAGtB,MAAMuB,UAAU,CAAClB;YAClCC,oBAAoBgB,MAAM;gBAAEE,MAAM;gBAAYC,OAAOX;YAAS;QAChE,CAAC;IACH,CAAC;IAED,qBACE,oBAACV;QACE,GAAGY,SAAS;QACbU,MAAK;QACLC,WAAU;QACVlB,WAAWR,WACTM,MAAM,CAAC,mBAAmB,EAC1BK,eAAe,YAAYL,MAAM,CAAC,4BAA4B,EAC9DG,UAAU,WAAWH,MAAM,CAAC,gCAAgC,EAC5DG,UAAU,UAAUH,MAAM,CAAC,+BAA+B,EAC1DE;QAEFmB,UAAUhB,eAAe;QACzBiB,WAAWjB,eAAe,aAAaL,MAAM,CAAC,4BAA4B,GAAGuB,SAAS;QACtFC,kBAAkBxB,MAAM,CAAC,kCAAkC;QAC3DyB,WAAW,KAAK;QAChBjB,SAASA;OAERD;AAGP,EAAE"}

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export var ImageBaseContext = /*#__PURE__*/React.createContext({
-  size: 0
+export const ImageBaseContext = React.createContext({
+    size: 0
 });
+
 //# sourceMappingURL=context.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":["React","ImageBaseContext","createContext","size"],"sources":["../../../../src/components/ImageBase/context.ts"],"sourcesContent":["import * as React from 'react';\nimport { ImageBaseContextProps } from './types';\n\nexport const ImageBaseContext = React.createContext<ImageBaseContextProps>({\n  size: 0,\n});\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,OAAO,IAAMC,gBAAgB,gBAAGD,KAAK,CAACE,aAAa,CAAwB;EACzEC,IAAI,EAAE;AACR,CAAC,CAAC"}
+{"version":3,"sources":["../../../../src/components/ImageBase/context.ts"],"sourcesContent":["import * as React from 'react';\nimport { ImageBaseContextProps } from './types';\n\nexport const ImageBaseContext = React.createContext<ImageBaseContextProps>({\n  size: 0,\n});\n"],"names":["React","ImageBaseContext","createContext","size"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,mBAAmBD,MAAME,aAAa,CAAwB;IACzEC,MAAM;AACR,GAAG"}

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

@@ -1,55 +1,51 @@
 /**
  * Возвращает размер иконки основанный на дизайн-системы.
- */
-export function getFallbackIconSizeByImageBaseSize(imageSize) {
-  if (imageSize <= 20) {
-    return 12;
-  } else if (imageSize > 20 && imageSize <= 28) {
-    return 16;
-  } else if (imageSize > 28 && imageSize <= 32) {
-    return 20;
-  } else if (imageSize > 32 && imageSize <= 44) {
-    return 24;
-  } else if (imageSize > 44 && imageSize <= 64) {
-    return 28;
-  }
-  return getFallbackIconSizeByImageBaseSize.MAX_SIZE;
+ */ export function getFallbackIconSizeByImageBaseSize(imageSize) {
+    if (imageSize <= 20) {
+        return 12;
+    } else if (imageSize > 20 && imageSize <= 28) {
+        return 16;
+    } else if (imageSize > 28 && imageSize <= 32) {
+        return 20;
+    } else if (imageSize > 32 && imageSize <= 44) {
+        return 24;
+    } else if (imageSize > 44 && imageSize <= 64) {
+        return 28;
+    }
+    return getFallbackIconSizeByImageBaseSize.MAX_SIZE;
 }
 getFallbackIconSizeByImageBaseSize.MAX_SIZE = 36;
-
 /**
  * Возвращает размер иконки основанный на дизайн-системы.
- */
-export function getBadgeIconSizeByImageBaseSize(imageSize) {
-  if (imageSize <= 36) {
-    return 12;
-  } else if (imageSize > 36 && imageSize <= 48) {
-    return 16;
-  } else if (imageSize > 48 && imageSize <= 64) {
-    return 20;
-  }
-  return getBadgeIconSizeByImageBaseSize.MAX_SIZE;
+ */ export function getBadgeIconSizeByImageBaseSize(imageSize) {
+    if (imageSize <= 36) {
+        return 12;
+    } else if (imageSize > 36 && imageSize <= 48) {
+        return 16;
+    } else if (imageSize > 48 && imageSize <= 64) {
+        return 20;
+    }
+    return getBadgeIconSizeByImageBaseSize.MAX_SIZE;
 }
 getBadgeIconSizeByImageBaseSize.MAX_SIZE = 24;
-
 /**
  * Возвращает размер иконки основанный на дизайн-системы.
- */
-export function getOverlayIconSizeByImageBaseSize(imageSize) {
-  if (imageSize <= 20) {
-    return 12;
-  } else if (imageSize > 20 && imageSize <= 24) {
-    return 16;
-  } else if (imageSize > 24 && imageSize <= 28) {
-    return 18;
-  } else if (imageSize > 28 && imageSize <= 40) {
-    return 20;
-  } else if (imageSize > 40 && imageSize <= 48) {
-    return 24;
-  } else if (imageSize > 48 && imageSize <= 88) {
-    return 28;
-  }
-  return getOverlayIconSizeByImageBaseSize.MAX_SIZE;
+ */ export function getOverlayIconSizeByImageBaseSize(imageSize) {
+    if (imageSize <= 20) {
+        return 12;
+    } else if (imageSize > 20 && imageSize <= 24) {
+        return 16;
+    } else if (imageSize > 24 && imageSize <= 28) {
+        return 18;
+    } else if (imageSize > 28 && imageSize <= 40) {
+        return 20;
+    } else if (imageSize > 40 && imageSize <= 48) {
+        return 24;
+    } else if (imageSize > 48 && imageSize <= 88) {
+        return 28;
+    }
+    return getOverlayIconSizeByImageBaseSize.MAX_SIZE;
 }
 getOverlayIconSizeByImageBaseSize.MAX_SIZE = 32;
+
 //# sourceMappingURL=helpers.js.map