@vkontakte/vkui 5.2.4 → 5.3.1

package/dist/components/ImageBase/ImageBase.js

@@ -1,127 +1,117 @@
-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';
-export { getBadgeIconSizeByImageBaseSize, getFallbackIconSizeByImageBaseSize, getOverlayIconSizeByImageBaseSize } from './helpers';
+import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
+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";
+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 var ImageBase = function(_param) {
+    var alt = _param.alt, crossOrigin = _param.crossOrigin, decoding = _param.decoding, loading = _param.loading, referrerPolicy = _param.referrerPolicy, sizes = _param.sizes, src = _param.src, srcSet = _param.srcSet, useMap = _param.useMap, getRef = _param.getRef, _param_size = _param.size, size = _param_size === void 0 ? 24 : _param_size, width = _param.width, height = _param.height, style = _param.style, className = _param.className, getRootRef = _param.getRootRef, _param_withBorder = _param.withBorder, withBorder = _param_withBorder === void 0 ? true : _param_withBorder, fallbackIconProp = _param["fallbackIcon"], children = _param.children, ariaLabel = _param["aria-label"], onClick = _param.onClick, onLoad = _param.onLoad, onError = _param.onError, restProps = _object_without_properties(_param, [
+        "alt",
+        "crossOrigin",
+        "decoding",
+        "loading",
+        "referrerPolicy",
+        "sizes",
+        "src",
+        "srcSet",
+        "useMap",
+        "getRef",
+        "size",
+        "width",
+        "height",
+        "style",
+        "className",
+        "getRootRef",
+        "withBorder",
+        "fallbackIcon",
+        "children",
+        "aria-label",
+        "onClick",
+        "onLoad",
+        "onError"
+    ]);
+    var _React_useState = _sliced_to_array(React.useState(false), 2), loaded = _React_useState[0], setLoaded = _React_useState[1];
+    var _React_useState1 = _sliced_to_array(React.useState(false), 2), failed = _React_useState1[0], setFailed = _React_useState1[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
+            });
+        }
     }
-  }
-  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));
+    var handleImageLoad = function(event) {
+        setLoaded(true);
+        setFailed(false);
+        onLoad === null || onLoad === void 0 ? void 0 : onLoad(event);
+    };
+    var handleImageError = function(event) {
+        setLoaded(false);
+        setFailed(true);
+        onError === null || onError === void 0 ? void 0 : onError(event);
+    };
+    var sizeClassName = function() {
+        switch(size){
+            case 28:
+                return "vkuiImageBase--size-28";
+            case 32:
+                return "vkuiImageBase--size-32";
+            case 40:
+                return "vkuiImageBase--size-40";
+            case 48:
+                return "vkuiImageBase--size-48";
+            case 72:
+                return "vkuiImageBase--size-72";
+        }
+        return null;
+    }();
+    return /*#__PURE__*/ React.createElement(ImageBaseContext.Provider, {
+        value: {
+            size: size
+        }
+    }, /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
+        ref: getRootRef,
+        style: _object_spread_props(_object_spread({}, style), {
+            width: size,
+            height: size
+        }),
+        className: classNames(className, "vkuiImageBase", sizeClassName, 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));
 };
 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/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","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","sizeClassName","Provider","div","ref","role","aria-label","img","Badge","Overlay"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,cAAc,QAAkC,kCAAkC;AAC3F,SAASC,gBAAgB,QAAoC,sCAAsC;AACnG,SAASC,gBAAgB,QAAQ,YAAY;AAE7C,SAASC,oBAAoB,EAAEC,YAAY,QAAQ,eAAe;AAWlE,SACEC,+BAA+B,EAC/BC,kCAAkC,EAClCC,iCAAiC,QAC5B,YAAY;AAEnB,SAASL,gBAAgB,GAAG;AAkC5B;;CAEC,GACD,OAAO,IAAMM,YAAY,iBAyBH;QAxBpBC,aAAAA,KACAC,qBAAAA,aACAC,kBAAAA,UACAC,iBAAAA,SACAC,wBAAAA,gBACAC,eAAAA,OACAC,aAAAA,KACAC,gBAAAA,QACAC,gBAAAA,QACAC,gBAAAA,6BACAC,MAAAA,gCAAO,kBACPC,eAAAA,OACAC,gBAAAA,QACAC,eAAAA,OACAC,mBAAAA,WACAC,oBAAAA,uCACAC,YAAAA,4CAAa,IAAI,sBACjB,AAAgBC,0BAAhB,iBACAC,kBAAAA,UACA,AAAcC,mBAAd,eACAC,iBAAAA,SACAC,gBAAAA,QACAC,iBAAAA,SACGC;QAvBHvB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACA;QACAE;QACA;QACAE;QACAC;QACAC;;IAGA,IAA4BjC,mCAAAA,MAAMmC,QAAQ,CAAC,KAAK,OAAzCC,SAAqBpC,oBAAbqC,YAAarC;IAC5B,IAA4BA,oCAAAA,MAAMmC,QAAQ,CAAC,KAAK,OAAzCG,SAAqBtC,qBAAbuC,YAAavC;IAE5B,IAAMwC,SAASvB,OAAOC;IACtB,IAAMuB,uBAAuB,AAACH,CAAAA,UAAU,CAACE,MAAK,mBAAMxC,MAAM0C,cAAc,CAACd;IAEzE,IAAMe,eAAeF,uBAAuBb,mBAAmB,IAAI;IAEnE,IAAIgB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1CxC,aAAae;QACb,IAAIsB,cAAc;YAChBtC,qBAAqBgB,MAAM;gBAAE0B,MAAM;gBAAgBC,OAAOL;YAAa;QACzE,CAAC;IACH,CAAC;IAED,IAAMM,kBAAkB,SAACC,OAAkD;QACzEb,UAAU,IAAI;QACdE,UAAU,KAAK;QACfP,mBAAAA,oBAAAA,KAAAA,IAAAA,OAASkB;IACX;IAEA,IAAMC,mBAAmB,SAACD,OAAkD;QAC1Eb,UAAU,KAAK;QACfE,UAAU,IAAI;QACdN,oBAAAA,qBAAAA,KAAAA,IAAAA,QAAUiB;IACZ;IAEA,IAAME,gBAAgB,AAAC,WAAM;QAC3B,OAAQ/B;YACN,KAAK;gBACH;YACF,KAAK;gBACH;YACF,KAAK;gBACH;YACF,KAAK;gBACH;YACF,KAAK;gBACH;QACJ;QAEA,OAAO,IAAI;IACb;IAEA,qBACE,oBAACjB,iBAAiBiD,QAAQ;QAACL,OAAO;YAAE3B,MAAAA;QAAK;qBACvC,oBAACiC,+CACKpB;QACJqB,KAAK7B;QACLF,OAAO,wCAAKA;YAAOF,OAAOD;YAAME,QAAQF;;QACxCI,WAAWxB,WACTwB,4BAEA2B,eACAzB,2CACAS;QAEFoB,MAAMhB,SAAS,QAAQ,cAAc;QACrCiB,cAAY3B;QACZC,SAASA;QAERS,wBACC,oBAACkB;QACCH,KAAKnC;QACLT,KAAKA;QACLc,SAAS;QACTb,aAAaA;QACbC,UAAUA;QACVC,SAASA;QACTC,gBAAgBA;QAChBC,OAAOA;QACPC,KAAKA;QACLC,QAAQA;QACRC,QAAQA;QACRG,OAAOA;QACPC,QAAQA;QACRS,QAAQiB;QACRhB,SAASkB;QAGZR,8BACC,oBAACW;QAAI7B,WAAWxB;OAA4C0C,eAE7Dd;AAIT,EAAE;AAEFnB,UAAUiD,KAAK,GAAGzD;AAElBQ,UAAUkD,OAAO,GAAGzD"}

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

@@ -1,38 +1,37 @@
-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 _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import * as React from "react";
+import { classNames } from "@vkontakte/vkjs";
+import { ImageBaseContext } from "../context";
+import { validateBadgeIcon } from "../validators";
 var backgroundStyles = {
-  stroke: "vkuiImageBaseBadge--background-stroke",
-  shadow: "vkuiImageBaseBadge--background-shadow"
+    stroke: "vkuiImageBaseBadge--background-stroke",
+    shadow: "vkuiImageBaseBadge--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 var ImageBaseBadge = function(_param) {
+    var _param_background = _param.background, background = _param_background === void 0 ? "shadow" : _param_background, children = _param.children, className = _param.className, restProps = _object_without_properties(_param, [
+        "background",
+        "children",
+        "className"
+    ]);
+    if (process.env.NODE_ENV === "development") {
+        if (children) {
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            var size = React.useContext(ImageBaseContext).size;
+            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", _object_spread_props(_object_spread({}, restProps), {
+        className: classNames("vkuiImageBaseBadge", backgroundStyles[background], className)
+    }), children);
 };
+
 //# sourceMappingURL=ImageBaseBadge.js.map

package/dist/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;AAGjD,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","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;AAGlD,IAAMC,mBAAmB;IACvBC,MAAM;IACNC,MAAM;AACR;AAyBA;;;;CAIC,GACD,OAAO,IAAMC,iBAAiB,iBAKH;mCAJzBC,YAAAA,4CAAa,8BACbC,kBAAAA,UACAC,mBAAAA,WACGC;QAHHH;QACAC;QACAC;;IAGA,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIL,UAAU;YACZ,sDAAsD;YACtD,IAAM,AAAEM,OAASf,MAAMgB,UAAU,CAACd,kBAA1Ba;YACRZ,kBAAkBY,MAAM;gBAAEE,MAAM;gBAAYC,OAAOT;YAAS;QAC9D,CAAC;IACH,CAAC;IAED,qBACE,oBAACU,+CACKR;QACJD,WAAWT,iCAAqCG,gBAAgB,CAACI,WAAW,EAAEE;QAE7ED;AAGP,EAAE"}

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

@@ -1,47 +1,47 @@
-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';
-import { useAppearance } from '../../../hooks/useAppearance';
-import { Tappable } from '../../Tappable/Tappable';
-import { ImageBaseContext } from '../context';
-import { validateOverlayIcon } from '../validators';
+import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import * as React from "react";
+import { classNames } from "@vkontakte/vkjs";
+import { useAdaptivityHasPointer } from "../../../hooks/useAdaptivityHasPointer";
+import { useAppearance } from "../../../hooks/useAppearance";
+import { Tappable } from "../../Tappable/Tappable";
+import { ImageBaseContext } from "../context";
+import { validateOverlayIcon } from "../validators";
 /**
  * Интерактивный оверлей над картинкой.
- */
-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 var ImageBaseOverlay = function(_param) {
+    var className = _param.className, themeProp = _param.theme, visibilityProp = _param.visibility, children = _param.children, onClick = _param.onClick, restProps = _object_without_properties(_param, [
+        "className",
+        "theme",
+        "visibility",
+        "children",
+        "onClick"
+    ]);
+    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 size = React.useContext(ImageBaseContext).size;
+            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, _object_spread_props(_object_spread({}, 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);
 };
+
 //# sourceMappingURL=ImageBaseOverlay.js.map

package/dist/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;AAoCnD;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","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;AAoCpD;;CAEC,GACD,OAAO,IAAMC,mBAAmB,iBAOH;QAN3BC,mBAAAA,WACAC,AAAOC,mBAAPD,OACAE,AAAYC,wBAAZD,YACAE,kBAAAA,UACAC,iBAAAA,SACGC;QALHP;QACAC;QACAE;QACAE;QACAC;;IAGA,IAAME,aAAab;IACnB,IAAMc,aAAaf;IACnB,IAAMO,QAAQC,sBAAAA,uBAAAA,YAAaM,UAAU;IACrC,IAAML,aAAaC,2BAAAA,4BAAAA,iBAAmBK,aAAa,aAAa,QAAQ,AAAC;IAEzE,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIP,UAAU;YACZ,sDAAsD;YACtD,IAAM,AAAEQ,OAASrB,MAAMsB,UAAU,CAACjB,kBAA1BgB;YACRf,oBAAoBe,MAAM;gBAAEE,MAAM;gBAAYC,OAAOX;YAAS;QAChE,CAAC;IACH,CAAC;IAED,qBACE,oBAACT,kDACKW;QACJU,MAAK;QACLC,WAAU;QACVlB,WAAWP,mCAETU,eAAe,6CACfF,UAAU,gDACVA,UAAU,8CACVD;QAEFmB,UAAUhB,eAAe;QACzBiB,WAAWjB,eAAe,+CAAmDkB,SAAS;QACtFC,gBAAgB;QAChBC,WAAW,KAAK;QAChBjB,SAASA;QAERD;AAGP,EAAE"}

package/dist/components/ImageBase/context.js

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

package/dist/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,IAAMC,mBAAmBD,MAAME,aAAa,CAAwB;IACzEC,MAAM;AACR,GAAG"}