@vkontakte/vkui 5.0.2 → 5.1.0

package/dist/cjs/components/Image/Image.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _ImageBase = require("../ImageBase/ImageBase");
 var _ImageBadge = require("./ImageBadge/ImageBadge");
 var _excluded = ["size", "borderRadius", "style", "className"];
@@ -23,13 +23,13 @@ var Image = function Image(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? IMAGE_DEFAULT_SIZE : _ref$size,
     _ref$borderRadius = _ref.borderRadius,
-    borderRadiusProp = _ref$borderRadius === void 0 ? "m" : _ref$borderRadius,
+    borderRadiusProp = _ref$borderRadius === void 0 ? 'm' : _ref$borderRadius,
     style = _ref.style,
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var borderRadius;
   switch (borderRadiusProp) {
-    case "s":
+    case 's':
       {
         if (size <= 32) {
           borderRadius = 2;
@@ -39,7 +39,7 @@ var Image = function Image(_ref) {
         borderRadius = 4;
         break;
       }
-    case "m":
+    case 'm':
       {
         if (size <= 32) {
           borderRadius = 3;
@@ -53,7 +53,7 @@ var Image = function Image(_ref) {
         borderRadius = 10;
         break;
       }
-    case "l":
+    case 'l':
       {
         if (size <= 16) {
           borderRadius = 4;
@@ -78,7 +78,7 @@ var Image = function Image(_ref) {
     style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, style), {}, {
       borderRadius: borderRadius
     }),
-    className: (0, _classNames.classNamesString)("vkuiImage", className)
+    className: (0, _vkjs.classNames)("vkuiImage", className)
   }));
 };
 exports.Image = Image;

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

@@ -1 +1 @@
-{"version":3,"file":"Image.js","names":["IMAGE_DEFAULT_SIZE","Image","size","borderRadius","borderRadiusProp","style","className","restProps","classNamesString","Badge","ImageBadge","Overlay","ImageBase"],"sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport {\n  type ImageBaseProps,\n  type ImageBaseOverlayProps,\n  ImageBase,\n} from \"../ImageBase/ImageBase\";\nimport { type ImageBadgeProps, ImageBadge } from \"./ImageBadge/ImageBadge\";\nimport styles from \"./Image.module.css\";\n\nexport type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };\n\nexport const IMAGE_DEFAULT_SIZE = 48;\n\nexport interface ImageProps extends Omit<ImageBaseProps, \"badge\"> {\n  /**\n   * Размер закругления.\n   */\n  borderRadius?: \"s\" | \"l\" | \"m\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Image\n */\nexport const Image = ({\n  size = IMAGE_DEFAULT_SIZE,\n  borderRadius: borderRadiusProp = \"m\",\n  style,\n  className,\n  ...restProps\n}: ImageProps) => {\n  let borderRadius: number;\n\n  switch (borderRadiusProp) {\n    case \"s\": {\n      if (size <= 32) {\n        borderRadius = 2;\n      } else if (size <= 56) {\n        borderRadius = 3;\n      }\n      borderRadius = 4;\n      break;\n    }\n    case \"m\": {\n      if (size <= 32) {\n        borderRadius = 3;\n      } else if (size <= 48) {\n        borderRadius = 4;\n      } else if (size <= 72) {\n        borderRadius = 6;\n      } else if (size <= 80) {\n        borderRadius = 8;\n      }\n      borderRadius = 10;\n      break;\n    }\n    case \"l\": {\n      if (size <= 16) {\n        borderRadius = 4;\n      } else if (size <= 20) {\n        borderRadius = 5;\n      } else if (size <= 32) {\n        borderRadius = 6;\n      } else if (size <= 40) {\n        borderRadius = 8;\n      } else if (size <= 48) {\n        borderRadius = 10;\n      } else if (size <= 56) {\n        borderRadius = 12;\n      } else if (size <= 64) {\n        borderRadius = 14;\n      }\n      borderRadius = 16;\n    }\n  }\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      style={{ ...style, borderRadius }}\n      className={classNamesString(styles[\"Image\"], className)}\n    />\n  );\n};\n\nImage.Badge = ImageBadge;\n\nImage.Overlay = ImageBase.Overlay;\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AAKA;AAA2E;AAKpE,IAAMA,kBAAkB,GAAG,EAAE;AAAC;AASrC;AACA;AACA;AACO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAMA;EAAA,qBALhBC,IAAI;IAAJA,IAAI,0BAAGF,kBAAkB;IAAA,yBACzBG,YAAY;IAAEC,gBAAgB,kCAAG,GAAG;IACpCC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAIJ,YAAoB;EAExB,QAAQC,gBAAgB;IACtB,KAAK,GAAG;MAAE;QACR,IAAIF,IAAI,IAAI,EAAE,EAAE;UACdC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB;QACAA,YAAY,GAAG,CAAC;QAChB;MACF;IACA,KAAK,GAAG;MAAE;QACR,IAAID,IAAI,IAAI,EAAE,EAAE;UACdC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB;QACAA,YAAY,GAAG,EAAE;QACjB;MACF;IACA,KAAK,GAAG;MAAE;QACR,IAAID,IAAI,IAAI,EAAE,EAAE;UACdC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,EAAE;QACnB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,EAAE;QACnB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,EAAE;QACnB;QACAA,YAAY,GAAG,EAAE;MACnB;EAAC;EAGH,oBACE,oBAAC,oBAAS,6BACJI,SAAS;IACb,IAAI,EAAEL,IAAK;IACX,KAAK,8DAAOG,KAAK;MAAEF,YAAY,EAAZA;IAAY,EAAG;IAClC,SAAS,EAAE,IAAAK,4BAAgB,eAAkBF,SAAS;EAAE,GACxD;AAEN,CAAC;AAAC;AAEFL,KAAK,CAACQ,KAAK,GAAGC,sBAAU;AAExBT,KAAK,CAACU,OAAO,GAAGC,oBAAS,CAACD,OAAO"}
+{"version":3,"file":"Image.js","names":["IMAGE_DEFAULT_SIZE","Image","size","borderRadius","borderRadiusProp","style","className","restProps","classNames","Badge","ImageBadge","Overlay","ImageBase"],"sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type ImageBaseProps, type ImageBaseOverlayProps, ImageBase } from '../ImageBase/ImageBase';\nimport { type ImageBadgeProps, ImageBadge } from './ImageBadge/ImageBadge';\nimport styles from './Image.module.css';\n\nexport type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };\n\nexport const IMAGE_DEFAULT_SIZE = 48;\n\nexport interface ImageProps extends Omit<ImageBaseProps, 'badge'> {\n  /**\n   * Размер закругления.\n   */\n  borderRadius?: 's' | 'l' | 'm';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Image\n */\nexport const Image = ({\n  size = IMAGE_DEFAULT_SIZE,\n  borderRadius: borderRadiusProp = 'm',\n  style,\n  className,\n  ...restProps\n}: ImageProps) => {\n  let borderRadius: number;\n\n  switch (borderRadiusProp) {\n    case 's': {\n      if (size <= 32) {\n        borderRadius = 2;\n      } else if (size <= 56) {\n        borderRadius = 3;\n      }\n      borderRadius = 4;\n      break;\n    }\n    case 'm': {\n      if (size <= 32) {\n        borderRadius = 3;\n      } else if (size <= 48) {\n        borderRadius = 4;\n      } else if (size <= 72) {\n        borderRadius = 6;\n      } else if (size <= 80) {\n        borderRadius = 8;\n      }\n      borderRadius = 10;\n      break;\n    }\n    case 'l': {\n      if (size <= 16) {\n        borderRadius = 4;\n      } else if (size <= 20) {\n        borderRadius = 5;\n      } else if (size <= 32) {\n        borderRadius = 6;\n      } else if (size <= 40) {\n        borderRadius = 8;\n      } else if (size <= 48) {\n        borderRadius = 10;\n      } else if (size <= 56) {\n        borderRadius = 12;\n      } else if (size <= 64) {\n        borderRadius = 14;\n      }\n      borderRadius = 16;\n    }\n  }\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      style={{ ...style, borderRadius }}\n      className={classNames(styles['Image'], className)}\n    />\n  );\n};\n\nImage.Badge = ImageBadge;\n\nImage.Overlay = ImageBase.Overlay;\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AAA2E;AAKpE,IAAMA,kBAAkB,GAAG,EAAE;AAAC;AASrC;AACA;AACA;AACO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAMA;EAAA,qBALhBC,IAAI;IAAJA,IAAI,0BAAGF,kBAAkB;IAAA,yBACzBG,YAAY;IAAEC,gBAAgB,kCAAG,GAAG;IACpCC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAIJ,YAAoB;EAExB,QAAQC,gBAAgB;IACtB,KAAK,GAAG;MAAE;QACR,IAAIF,IAAI,IAAI,EAAE,EAAE;UACdC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB;QACAA,YAAY,GAAG,CAAC;QAChB;MACF;IACA,KAAK,GAAG;MAAE;QACR,IAAID,IAAI,IAAI,EAAE,EAAE;UACdC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB;QACAA,YAAY,GAAG,EAAE;QACjB;MACF;IACA,KAAK,GAAG;MAAE;QACR,IAAID,IAAI,IAAI,EAAE,EAAE;UACdC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,EAAE;QACnB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,EAAE;QACnB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,EAAE;QACnB;QACAA,YAAY,GAAG,EAAE;MACnB;EAAC;EAGH,oBACE,oBAAC,oBAAS,6BACJI,SAAS;IACb,IAAI,EAAEL,IAAK;IACX,KAAK,8DAAOG,KAAK;MAAEF,YAAY,EAAZA;IAAY,EAAG;IAClC,SAAS,EAAE,IAAAK,gBAAU,eAAkBF,SAAS;EAAE,GAClD;AAEN,CAAC;AAAC;AAEFL,KAAK,CAACQ,KAAK,GAAGC,sBAAU;AAExBT,KAAK,CAACU,OAAO,GAAGC,oBAAS,CAACD,OAAO"}

package/dist/cjs/components/Image/ImageBadge/ImageBadge.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { type ImageBaseBadgeProps } from "../../ImageBase/ImageBase";
+import { type ImageBaseBadgeProps } from '../../ImageBase/ImageBase';
 export declare type ImageBadgeProps = ImageBaseBadgeProps;
 export declare const ImageBadge: ({ className, ...restProps }: ImageBadgeProps) => JSX.Element;

package/dist/cjs/components/Image/ImageBadge/ImageBadge.js

@@ -9,7 +9,7 @@ exports.ImageBadge = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _ImageBase = require("../../ImageBase/ImageBase");
 var _excluded = ["className"];
 var ImageBadge = function ImageBadge(_ref) {
@@ -18,7 +18,7 @@ var ImageBadge = function ImageBadge(_ref) {
   var _React$useContext = React.useContext(_ImageBase.ImageBaseContext),
     size = _React$useContext.size;
   return /*#__PURE__*/React.createElement(_ImageBase.ImageBase.Badge, (0, _extends2.default)({}, restProps, {
-    className: (0, _classNames.classNamesString)("vkuiImageBadge", size < 96 && "vkuiImageBadge--shifted", className)
+    className: (0, _vkjs.classNames)("vkuiImageBadge", size < 96 && "vkuiImageBadge--shifted", className)
   }));
 };
 exports.ImageBadge = ImageBadge;

package/dist/cjs/components/Image/ImageBadge/ImageBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageBadge.js","names":["ImageBadge","className","restProps","React","useContext","ImageBaseContext","size","classNamesString"],"sources":["../../../../../src/components/Image/ImageBadge/ImageBadge.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../../lib/classNames\";\nimport {\n  type ImageBaseBadgeProps,\n  ImageBase,\n  ImageBaseContext,\n} from \"../../ImageBase/ImageBase\";\nimport styles from \"./ImageBadge.module.css\";\n\nexport type ImageBadgeProps = ImageBaseBadgeProps;\n\nexport const ImageBadge = ({ className, ...restProps }: ImageBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNamesString(\n        styles[\"ImageBadge\"],\n        size < 96 && styles[\"ImageBadge--shifted\"],\n        className\n      )}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAImC;AAK5B,IAAMA,UAAU,GAAG,SAAbA,UAAU,OAAqD;EAAA,IAA/CC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAClD,wBAAiBC,KAAK,CAACC,UAAU,CAACC,2BAAgB,CAAC;IAA3CC,IAAI,qBAAJA,IAAI;EACZ,oBACE,oBAAC,oBAAS,CAAC,KAAK,6BACVJ,SAAS;IACb,SAAS,EAAE,IAAAK,4BAAgB,oBAEzBD,IAAI,GAAG,EAAE,6BAAiC,EAC1CL,SAAS;EACT,GACF;AAEN,CAAC;AAAC"}
+{"version":3,"file":"ImageBadge.js","names":["ImageBadge","className","restProps","React","useContext","ImageBaseContext","size","classNames"],"sources":["../../../../../src/components/Image/ImageBadge/ImageBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type ImageBaseBadgeProps, ImageBase, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './ImageBadge.module.css';\n\nexport type ImageBadgeProps = ImageBaseBadgeProps;\n\nexport const ImageBadge = ({ className, ...restProps }: ImageBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(\n        styles['ImageBadge'],\n        size < 96 && styles['ImageBadge--shifted'],\n        className,\n      )}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAAkG;AAK3F,IAAMA,UAAU,GAAG,SAAbA,UAAU,OAAqD;EAAA,IAA/CC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAClD,wBAAiBC,KAAK,CAACC,UAAU,CAACC,2BAAgB,CAAC;IAA3CC,IAAI,qBAAJA,IAAI;EACZ,oBACE,oBAAC,oBAAS,CAAC,KAAK,6BACVJ,SAAS;IACb,SAAS,EAAE,IAAAK,gBAAU,oBAEnBD,IAAI,GAAG,EAAE,6BAAiC,EAC1CL,SAAS;EACT,GACF;AAEN,CAAC;AAAC"}

package/dist/cjs/components/ImageBase/ImageBase.d.ts

@@ -1,11 +1,11 @@
-import * as React from "react";
-import type { HasRef, HasRootRef } from "../../types";
-import { type ImageBaseBadgeProps } from "./ImageBaseBadge/ImageBaseBadge";
-import { type ImageBaseOverlayProps } from "./ImageBaseOverlay/ImageBaseOverlay";
-import type { ImageBaseExpectedIconProps, ImageBaseSize, ImageBaseContextProps } from "./types";
-import { ImageBaseContext } from "./context";
+import * as React from 'react';
+import type { HasRef, HasRootRef } from '../../types';
+import { type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';
+import { type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';
+import type { ImageBaseExpectedIconProps, ImageBaseSize, ImageBaseContextProps } from './types';
+import { ImageBaseContext } from './context';
 export type { ImageBaseSize, ImageBaseExpectedIconProps, ImageBaseBadgeProps, ImageBaseOverlayProps, ImageBaseContextProps, };
-export { getBadgeIconSizeByImageBaseSize, getFallbackIconSizeByImageBaseSize, getOverlayIconSizeByImageBaseSize, } from "./helpers";
+export { getBadgeIconSizeByImageBaseSize, getFallbackIconSizeByImageBaseSize, getOverlayIconSizeByImageBaseSize, } from './helpers';
 export { ImageBaseContext };
 export interface ImageBaseProps extends React.ImgHTMLAttributes<HTMLElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLImageElement> {
     /**
@@ -39,7 +39,7 @@ export interface ImageBaseProps extends React.ImgHTMLAttributes<HTMLElement>, Ha
  * @see https://vkcom.github.io/VKUI/#/ImageBase
  */
 export declare const ImageBase: {
-    ({ alt, crossOrigin, decoding, loading, referrerPolicy, sizes, src, srcSet, useMap, getRef, size, width, height, style, className, getRootRef, withBorder, fallbackIcon: fallbackIconProp, children, "aria-label": ariaLabel, onClick, onLoad, onError, ...restProps }: ImageBaseProps): JSX.Element;
+    ({ alt, crossOrigin, decoding, loading, referrerPolicy, sizes, src, srcSet, useMap, getRef, size, width, height, style, className, getRootRef, withBorder, "fallbackIcon": fallbackIconProp, children, "aria-label": ariaLabel, onClick, onLoad, onError, ...restProps }: ImageBaseProps): JSX.Element;
     Badge: ({ background, children, className, ...restProps }: ImageBaseBadgeProps) => JSX.Element;
     Overlay: ({ className, theme: themeProp, visibility: visibilityProp, children, onClick, ...restProps }: ImageBaseOverlayProps) => JSX.Element;
 };

package/dist/cjs/components/ImageBase/ImageBase.js

@@ -35,7 +35,7 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/obje
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _ImageBaseBadge = require("./ImageBaseBadge/ImageBaseBadge");
 var _ImageBaseOverlay = require("./ImageBaseOverlay/ImageBaseOverlay");
 var _context = require("./context");
@@ -65,9 +65,9 @@ var ImageBase = function ImageBase(_ref) {
     getRootRef = _ref.getRootRef,
     _ref$withBorder = _ref.withBorder,
     withBorder = _ref$withBorder === void 0 ? true : _ref$withBorder,
-    fallbackIconProp = _ref.fallbackIcon,
+    fallbackIconProp = _ref['fallbackIcon'],
     children = _ref.children,
-    ariaLabel = _ref["aria-label"],
+    ariaLabel = _ref['aria-label'],
     onClick = _ref.onClick,
     onLoad = _ref.onLoad,
     onError = _ref.onError,
@@ -83,11 +83,11 @@ var ImageBase = function ImageBase(_ref) {
   var hasSrc = src || srcSet;
   var needShowFallbackIcon = (failed || !hasSrc) && /*#__PURE__*/React.isValidElement(fallbackIconProp);
   var fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;
-  if (process.env.NODE_ENV === "development") {
+  if (process.env.NODE_ENV === 'development') {
     (0, _validators.validateSize)(size);
     if (fallbackIcon) {
       (0, _validators.validateFallbackIcon)(size, {
-        name: "fallbackIcon",
+        name: 'fallbackIcon',
         value: fallbackIcon
       });
     }
@@ -112,8 +112,8 @@ var ImageBase = function ImageBase(_ref) {
       width: size,
       height: size
     }),
-    className: (0, _classNames.classNamesString)(className, "vkuiImageBase", styles["ImageBase--size-".concat(size)], withBorder && "vkuiImageBase--withBorder", loaded && "vkuiImageBase--loaded"),
-    role: hasSrc ? "img" : "presentation",
+    className: (0, _vkjs.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", {
@@ -133,7 +133,7 @@ var ImageBase = function ImageBase(_ref) {
     onLoad: handleImageLoad,
     onError: handleImageError
   }), fallbackIcon && /*#__PURE__*/React.createElement("div", {
-    className: (0, _classNames.classNamesString)("vkuiImageBase__fallback")
+    className: (0, _vkjs.classNames)("vkuiImageBase__fallback")
   }, fallbackIcon), children));
 };
 exports.ImageBase = ImageBase;

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

@@ -1 +1 @@
-{"version":3,"file":"ImageBase.js","names":["ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","getRef","size","width","height","style","className","getRootRef","withBorder","fallbackIconProp","fallbackIcon","children","ariaLabel","onClick","onLoad","onError","restProps","React","useState","loaded","setLoaded","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","process","env","NODE_ENV","validateSize","validateFallbackIcon","name","value","handleImageLoad","event","handleImageError","classNamesString","styles","Badge","ImageBaseBadge","Overlay","ImageBaseOverlay"],"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport type { HasRef, HasRootRef } from \"../../types\";\nimport {\n  type ImageBaseBadgeProps,\n  ImageBaseBadge,\n} from \"./ImageBaseBadge/ImageBaseBadge\";\nimport {\n  type ImageBaseOverlayProps,\n  ImageBaseOverlay,\n} from \"./ImageBaseOverlay/ImageBaseOverlay\";\nimport type {\n  ImageBaseExpectedIconProps,\n  ImageBaseSize,\n  ImageBaseContextProps,\n} from \"./types\";\nimport { ImageBaseContext } from \"./context\";\nimport { validateSize, validateFallbackIcon } 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 =\n    (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={classNamesString(\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={classNamesString(styles[\"ImageBase__fallback\"])}>\n            {fallbackIcon}\n          </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,"file":"ImageBase.js","names":["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","React","useState","loaded","setLoaded","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","fallbackIcon","process","env","NODE_ENV","validateSize","validateFallbackIcon","name","value","handleImageLoad","event","handleImageError","classNames","styles","Badge","ImageBaseBadge","Overlay","ImageBaseOverlay"],"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRef, HasRootRef } from '../../types';\nimport { type ImageBaseBadgeProps, ImageBaseBadge } from './ImageBaseBadge/ImageBaseBadge';\nimport { type ImageBaseOverlayProps, ImageBaseOverlay } from './ImageBaseOverlay/ImageBaseOverlay';\nimport type { ImageBaseExpectedIconProps, ImageBaseSize, ImageBaseContextProps } from './types';\nimport { ImageBaseContext } from './context';\nimport { validateSize, validateFallbackIcon } 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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"}

package/dist/cjs/components/ImageBase/ImageBaseBadge/ImageBaseBadge.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import type { ImageBaseExpectedIconProps } from "../types";
+import * as React from 'react';
+import type { ImageBaseExpectedIconProps } from '../types';
 export interface ImageBaseBadgeProps extends React.AriaAttributes {
     /**
      * Вид подложки под иконку.
@@ -7,7 +7,7 @@ export interface ImageBaseBadgeProps extends React.AriaAttributes {
      * - `"stroke"` – имитирует вырез (⚠️ если фон под компонентом динамический, то ожидайте баг).
      * - `"shadow"` – добавляет небольшую тень.
      */
-    background?: "stroke" | "shadow";
+    background?: 'stroke' | 'shadow';
     /**
      * Принимает иконку.
      *

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

@@ -9,7 +9,7 @@ exports.ImageBaseBadge = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _context = require("../context");
 var _validators = require("../validators");
 var _excluded = ["background", "children", "className"];
@@ -24,23 +24,23 @@ var backgroundStyles = {
  */
 var ImageBaseBadge = function ImageBaseBadge(_ref) {
   var _ref$background = _ref.background,
-    background = _ref$background === void 0 ? "shadow" : _ref$background,
+    background = _ref$background === void 0 ? 'shadow' : _ref$background,
     children = _ref.children,
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  if (process.env.NODE_ENV === "development") {
+  if (process.env.NODE_ENV === 'development') {
     if (children) {
       // eslint-disable-next-line react-hooks/rules-of-hooks
       var _React$useContext = React.useContext(_context.ImageBaseContext),
         size = _React$useContext.size;
       (0, _validators.validateBadgeIcon)(size, {
-        name: "children",
+        name: 'children',
         value: children
       });
     }
   }
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
-    className: (0, _classNames.classNamesString)("vkuiImageBaseBadge", backgroundStyles[background], className)
+    className: (0, _vkjs.classNames)("vkuiImageBaseBadge", backgroundStyles[background], className)
   }), children);
 };
 exports.ImageBaseBadge = ImageBaseBadge;

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

@@ -1 +1 @@
-{"version":3,"file":"ImageBaseBadge.js","names":["backgroundStyles","stroke","shadow","ImageBaseBadge","background","children","className","restProps","process","env","NODE_ENV","React","useContext","ImageBaseContext","size","validateBadgeIcon","name","value","classNamesString"],"sources":["../../../../../src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../../lib/classNames\";\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={classNamesString(\n        styles[\"ImageBaseBadge\"],\n        backgroundStyles[background],\n        className\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAEA;AAAkD;AAGlD,IAAMA,gBAAgB,GAAG;EACvBC,MAAM,yCAA6C;EACnDC,MAAM;AACR,CAAC;AAyBD;AACA;AACA;AACA;AACA;AACO,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,wBAAiBM,KAAK,CAACC,UAAU,CAACC,yBAAgB,CAAC;QAA3CC,IAAI,qBAAJA,IAAI;MACZ,IAAAC,6BAAiB,EAACD,IAAI,EAAE;QAAEE,IAAI,EAAE,UAAU;QAAEC,KAAK,EAAEZ;MAAS,CAAC,CAAC;IAChE;EACF;EAEA,oBACE,sDACME,SAAS;IACb,SAAS,EAAE,IAAAW,4BAAgB,wBAEzBlB,gBAAgB,CAACI,UAAU,CAAC,EAC5BE,SAAS;EACT,IAEDD,QAAQ,CACL;AAEV,CAAC;AAAC"}
+{"version":3,"file":"ImageBaseBadge.js","names":["backgroundStyles","stroke","shadow","ImageBaseBadge","background","children","className","restProps","process","env","NODE_ENV","React","useContext","ImageBaseContext","size","validateBadgeIcon","name","value","classNames"],"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;AACA;AACA;AAEA;AAAkD;AAGlD,IAAMA,gBAAgB,GAAG;EACvBC,MAAM,yCAA6C;EACnDC,MAAM;AACR,CAAC;AAyBD;AACA;AACA;AACA;AACA;AACO,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,wBAAiBM,KAAK,CAACC,UAAU,CAACC,yBAAgB,CAAC;QAA3CC,IAAI,qBAAJA,IAAI;MACZ,IAAAC,6BAAiB,EAACD,IAAI,EAAE;QAAEE,IAAI,EAAE,UAAU;QAAEC,KAAK,EAAEZ;MAAS,CAAC,CAAC;IAChE;EACF;EAEA,oBACE,sDACME,SAAS;IACb,SAAS,EAAE,IAAAW,gBAAU,wBAA2BlB,gBAAgB,CAACI,UAAU,CAAC,EAAEE,SAAS;EAAE,IAExFD,QAAQ,CACL;AAEV,CAAC;AAAC"}

package/dist/cjs/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.d.ts

@@ -1,12 +1,12 @@
-import * as React from "react";
-import type { ImageBaseExpectedIconProps } from "../types";
+import * as React from 'react';
+import type { ImageBaseExpectedIconProps } from '../types';
 export interface ImageBaseOverlayProps extends React.AriaAttributes {
     /**
      * Задаёт тему оформления.
      *
      * > По умолчанию берётся из параметра `appearance` в `ConfigProvider`.
      */
-    theme?: "dark" | "light";
+    theme?: 'dark' | 'light';
     /**
      * Определяет каким образом должен показываться оверлей.
      *
@@ -15,7 +15,7 @@ export interface ImageBaseOverlayProps extends React.AriaAttributes {
      *
      * > По умолчанию определяется в зависимости от того, есть ли у пользователя мышь или нет.
      */
-    visibility?: "on-hover" | "always";
+    visibility?: 'on-hover' | 'always';
     /**
      * Принимает иконку.
      *

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

@@ -9,7 +9,7 @@ exports.ImageBaseOverlay = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _useAppearance = require("../../../hooks/useAppearance");
 var _useAdaptivityHasPointer = require("../../../hooks/useAdaptivityHasPointer");
 var _Tappable = require("../../Tappable/Tappable");
@@ -29,14 +29,14 @@ var ImageBaseOverlay = function ImageBaseOverlay(_ref) {
   var appearance = (0, _useAppearance.useAppearance)();
   var hasPointer = (0, _useAdaptivityHasPointer.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") {
+  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(_context.ImageBaseContext),
         size = _React$useContext.size;
       (0, _validators.validateOverlayIcon)(size, {
-        name: "children",
+        name: 'children',
         value: children
       });
     }
@@ -44,9 +44,9 @@ var ImageBaseOverlay = function ImageBaseOverlay(_ref) {
   return /*#__PURE__*/React.createElement(_Tappable.Tappable, (0, _extends2.default)({}, restProps, {
     type: "button",
     Component: "button",
-    className: (0, _classNames.classNamesString)("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,
+    className: (0, _vkjs.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

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

@@ -1 +1 @@
-{"version":3,"file":"ImageBaseOverlay.js","names":["ImageBaseOverlay","className","themeProp","theme","visibilityProp","visibility","children","onClick","restProps","appearance","useAppearance","hasPointer","useAdaptivityHasPointer","process","env","NODE_ENV","React","useContext","ImageBaseContext","size","validateOverlayIcon","name","value","classNamesString","undefined"],"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../../lib/classNames\";\nimport { useAppearance } from \"../../../hooks/useAppearance\";\nimport { useAdaptivityHasPointer } from \"../../../hooks/useAdaptivityHasPointer\";\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={classNamesString(\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={\n        visibility === \"on-hover\"\n          ? styles[\"ImageBaseOverlay--visible\"]\n          : undefined\n      }\n      focusVisibleMode={styles[\"ImageBaseOverlay--focus-visible\"]}\n      hasActive={false}\n      onClick={onClick}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAoD;AAoCpD;AACA;AACA;AACO,IAAMA,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,GAAG,IAAAC,4BAAa,GAAE;EAClC,IAAMC,UAAU,GAAG,IAAAC,gDAAuB,GAAE;EAC5C,IAAMT,KAAK,GAAGD,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIO,UAAU;EACrC,IAAMJ,UAAU,GAAGD,cAAc,aAAdA,cAAc,cAAdA,cAAc,GAAKO,UAAU,GAAG,UAAU,GAAG,QAAS;EAEzE,IAAIE,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAIT,QAAQ,EAAE;MACZ;MACA,wBAAiBU,KAAK,CAACC,UAAU,CAACC,yBAAgB,CAAC;QAA3CC,IAAI,qBAAJA,IAAI;MACZ,IAAAC,+BAAmB,EAACD,IAAI,EAAE;QAAEE,IAAI,EAAE,UAAU;QAAEC,KAAK,EAAEhB;MAAS,CAAC,CAAC;IAClE;EACF;EAEA,oBACE,oBAAC,kBAAQ,6BACHE,SAAS;IACb,IAAI,EAAC,QAAQ;IACb,SAAS,EAAC,QAAQ;IAClB,SAAS,EAAE,IAAAe,4BAAgB,0BAEzBlB,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,EACPA,UAAU,KAAK,UAAU,qCAErBmB,SACL;IACD,gBAAgB,uCAA4C;IAC5D,SAAS,EAAE,KAAM;IACjB,OAAO,EAAEjB;EAAQ,IAEhBD,QAAQ,CACA;AAEf,CAAC;AAAC"}
+{"version":3,"file":"ImageBaseOverlay.js","names":["ImageBaseOverlay","className","themeProp","theme","visibilityProp","visibility","children","onClick","restProps","appearance","useAppearance","hasPointer","useAdaptivityHasPointer","process","env","NODE_ENV","React","useContext","ImageBaseContext","size","validateOverlayIcon","name","value","classNames","undefined"],"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAppearance } from '../../../hooks/useAppearance';\nimport { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';\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;AACA;AACA;AACA;AACA;AACA;AAEA;AAAoD;AAoCpD;AACA;AACA;AACO,IAAMA,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,GAAG,IAAAC,4BAAa,GAAE;EAClC,IAAMC,UAAU,GAAG,IAAAC,gDAAuB,GAAE;EAC5C,IAAMT,KAAK,GAAGD,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIO,UAAU;EACrC,IAAMJ,UAAU,GAAGD,cAAc,aAAdA,cAAc,cAAdA,cAAc,GAAKO,UAAU,GAAG,UAAU,GAAG,QAAS;EAEzE,IAAIE,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAIT,QAAQ,EAAE;MACZ;MACA,wBAAiBU,KAAK,CAACC,UAAU,CAACC,yBAAgB,CAAC;QAA3CC,IAAI,qBAAJA,IAAI;MACZ,IAAAC,+BAAmB,EAACD,IAAI,EAAE;QAAEE,IAAI,EAAE,UAAU;QAAEC,KAAK,EAAEhB;MAAS,CAAC,CAAC;IAClE;EACF;EAEA,oBACE,oBAAC,kBAAQ,6BACHE,SAAS;IACb,IAAI,EAAC,QAAQ;IACb,SAAS,EAAC,QAAQ;IAClB,SAAS,EAAE,IAAAe,gBAAU,0BAEnBlB,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,qCAAyCmB,SAAU;IACvF,gBAAgB,uCAA4C;IAC5D,SAAS,EAAE,KAAM;IACjB,OAAO,EAAEjB;EAAQ,IAEhBD,QAAQ,CACA;AAEf,CAAC;AAAC"}

package/dist/cjs/components/ImageBase/context.d.ts

@@ -1,3 +1,3 @@
-import * as React from "react";
-import { ImageBaseContextProps } from "./types";
+import * as React from 'react';
+import { ImageBaseContextProps } from './types';
 export declare const ImageBaseContext: React.Context<ImageBaseContextProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":["ImageBaseContext","React","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;AAGO,IAAMA,gBAAgB,gBAAGC,KAAK,CAACC,aAAa,CAAwB;EACzEC,IAAI,EAAE;AACR,CAAC,CAAC;AAAC"}
+{"version":3,"file":"context.js","names":["ImageBaseContext","React","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;AAGO,IAAMA,gBAAgB,gBAAGC,KAAK,CAACC,aAAa,CAAwB;EACzEC,IAAI,EAAE;AACR,CAAC,CAAC;AAAC"}

package/dist/cjs/components/ImageBase/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","names":["getFallbackIconSizeByImageBaseSize","imageSize","MAX_SIZE","getBadgeIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize"],"sources":["../../../../src/components/ImageBase/helpers.ts"],"sourcesContent":["/**\n * Возвращает размер иконки основанный на дизайн-системы.\n */\nexport function getFallbackIconSizeByImageBaseSize(\n  imageSize: number\n): 12 | 16 | 20 | 24 | 28 | 36 {\n  if (imageSize <= 20) {\n    return 12;\n  } else if (imageSize > 20 && imageSize <= 28) {\n    return 16;\n  } else if (imageSize > 28 && imageSize <= 32) {\n    return 20;\n  } else if (imageSize > 32 && imageSize <= 44) {\n    return 24;\n  } else if (imageSize > 44 && imageSize <= 64) {\n    return 28;\n  }\n  return getFallbackIconSizeByImageBaseSize.MAX_SIZE;\n}\n\ngetFallbackIconSizeByImageBaseSize.MAX_SIZE = 36 as const;\n\n/**\n * Возвращает размер иконки основанный на дизайн-системы.\n */\nexport function getBadgeIconSizeByImageBaseSize(\n  imageSize: number\n): 12 | 16 | 20 | 24 {\n  if (imageSize <= 36) {\n    return 12;\n  } else if (imageSize > 36 && imageSize <= 48) {\n    return 16;\n  } else if (imageSize > 48 && imageSize <= 64) {\n    return 20;\n  }\n  return getBadgeIconSizeByImageBaseSize.MAX_SIZE;\n}\n\ngetBadgeIconSizeByImageBaseSize.MAX_SIZE = 24 as const;\n\n/**\n * Возвращает размер иконки основанный на дизайн-системы.\n */\nexport function getOverlayIconSizeByImageBaseSize(\n  imageSize: number\n): 12 | 16 | 18 | 20 | 24 | 28 | 32 {\n  if (imageSize <= 20) {\n    return 12;\n  } else if (imageSize > 20 && imageSize <= 24) {\n    return 16;\n  } else if (imageSize > 24 && imageSize <= 28) {\n    return 18;\n  } else if (imageSize > 28 && imageSize <= 40) {\n    return 20;\n  } else if (imageSize > 40 && imageSize <= 48) {\n    return 24;\n  } else if (imageSize > 48 && imageSize <= 88) {\n    return 28;\n  }\n  return getOverlayIconSizeByImageBaseSize.MAX_SIZE;\n}\n\ngetOverlayIconSizeByImageBaseSize.MAX_SIZE = 32 as const;\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACO,SAASA,kCAAkC,CAChDC,SAAiB,EACY;EAC7B,IAAIA,SAAS,IAAI,EAAE,EAAE;IACnB,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX;EACA,OAAOD,kCAAkC,CAACE,QAAQ;AACpD;AAEAF,kCAAkC,CAACE,QAAQ,GAAG,EAAW;;AAEzD;AACA;AACA;AACO,SAASC,+BAA+B,CAC7CF,SAAiB,EACE;EACnB,IAAIA,SAAS,IAAI,EAAE,EAAE;IACnB,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX;EACA,OAAOE,+BAA+B,CAACD,QAAQ;AACjD;AAEAC,+BAA+B,CAACD,QAAQ,GAAG,EAAW;;AAEtD;AACA;AACA;AACO,SAASE,iCAAiC,CAC/CH,SAAiB,EACiB;EAClC,IAAIA,SAAS,IAAI,EAAE,EAAE;IACnB,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX;EACA,OAAOG,iCAAiC,CAACF,QAAQ;AACnD;AAEAE,iCAAiC,CAACF,QAAQ,GAAG,EAAW"}
+{"version":3,"file":"helpers.js","names":["getFallbackIconSizeByImageBaseSize","imageSize","MAX_SIZE","getBadgeIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize"],"sources":["../../../../src/components/ImageBase/helpers.ts"],"sourcesContent":["/**\n * Возвращает размер иконки основанный на дизайн-системы.\n */\nexport function getFallbackIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20 | 24 | 28 | 36 {\n  if (imageSize <= 20) {\n    return 12;\n  } else if (imageSize > 20 && imageSize <= 28) {\n    return 16;\n  } else if (imageSize > 28 && imageSize <= 32) {\n    return 20;\n  } else if (imageSize > 32 && imageSize <= 44) {\n    return 24;\n  } else if (imageSize > 44 && imageSize <= 64) {\n    return 28;\n  }\n  return getFallbackIconSizeByImageBaseSize.MAX_SIZE;\n}\n\ngetFallbackIconSizeByImageBaseSize.MAX_SIZE = 36 as const;\n\n/**\n * Возвращает размер иконки основанный на дизайн-системы.\n */\nexport function getBadgeIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20 | 24 {\n  if (imageSize <= 36) {\n    return 12;\n  } else if (imageSize > 36 && imageSize <= 48) {\n    return 16;\n  } else if (imageSize > 48 && imageSize <= 64) {\n    return 20;\n  }\n  return getBadgeIconSizeByImageBaseSize.MAX_SIZE;\n}\n\ngetBadgeIconSizeByImageBaseSize.MAX_SIZE = 24 as const;\n\n/**\n * Возвращает размер иконки основанный на дизайн-системы.\n */\nexport function getOverlayIconSizeByImageBaseSize(\n  imageSize: number,\n): 12 | 16 | 18 | 20 | 24 | 28 | 32 {\n  if (imageSize <= 20) {\n    return 12;\n  } else if (imageSize > 20 && imageSize <= 24) {\n    return 16;\n  } else if (imageSize > 24 && imageSize <= 28) {\n    return 18;\n  } else if (imageSize > 28 && imageSize <= 40) {\n    return 20;\n  } else if (imageSize > 40 && imageSize <= 48) {\n    return 24;\n  } else if (imageSize > 48 && imageSize <= 88) {\n    return 28;\n  }\n  return getOverlayIconSizeByImageBaseSize.MAX_SIZE;\n}\n\ngetOverlayIconSizeByImageBaseSize.MAX_SIZE = 32 as const;\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACO,SAASA,kCAAkC,CAACC,SAAiB,EAA+B;EACjG,IAAIA,SAAS,IAAI,EAAE,EAAE;IACnB,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX;EACA,OAAOD,kCAAkC,CAACE,QAAQ;AACpD;AAEAF,kCAAkC,CAACE,QAAQ,GAAG,EAAW;;AAEzD;AACA;AACA;AACO,SAASC,+BAA+B,CAACF,SAAiB,EAAqB;EACpF,IAAIA,SAAS,IAAI,EAAE,EAAE;IACnB,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX;EACA,OAAOE,+BAA+B,CAACD,QAAQ;AACjD;AAEAC,+BAA+B,CAACD,QAAQ,GAAG,EAAW;;AAEtD;AACA;AACA;AACO,SAASE,iCAAiC,CAC/CH,SAAiB,EACiB;EAClC,IAAIA,SAAS,IAAI,EAAE,EAAE;IACnB,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX;EACA,OAAOG,iCAAiC,CAACF,QAAQ;AACnD;AAEAE,iCAAiC,CAACF,QAAQ,GAAG,EAAW"}

package/dist/cjs/components/ImageBase/types.d.ts

@@ -1,4 +1,5 @@
-export declare type ImageBaseSize = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96;
+export declare const imageBaseSizes: readonly [16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 88, 96];
+export declare type ImageBaseSize = (typeof imageBaseSizes)[number];
 export declare type ImageBaseExpectedIconProps = {
     width?: number;
     height?: number;

package/dist/cjs/components/ImageBase/types.js

@@ -3,4 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.imageBaseSizes = void 0;
+var imageBaseSizes = [16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 88, 96];
+exports.imageBaseSizes = imageBaseSizes;
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/ImageBase/types.ts"],"sourcesContent":["export type ImageBaseSize =\n  | 16\n  | 20\n  | 24\n  | 28\n  | 32\n  | 36\n  | 40\n  | 44\n  | 48\n  | 56\n  | 64\n  | 72\n  | 80\n  | 88\n  | 96;\n\nexport type ImageBaseExpectedIconProps = {\n  width?: number;\n  height?: number;\n  className?: string;\n};\n\nexport interface ImageBaseContextProps {\n  size: ImageBaseSize | number;\n}\n"],"mappings":""}
+{"version":3,"file":"types.js","names":["imageBaseSizes"],"sources":["../../../../src/components/ImageBase/types.ts"],"sourcesContent":["export const imageBaseSizes = [16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 88, 96] as const;\n\nexport type ImageBaseSize = (typeof imageBaseSizes)[number];\n\nexport type ImageBaseExpectedIconProps = {\n  width?: number;\n  height?: number;\n  className?: string;\n};\n\nexport interface ImageBaseContextProps {\n  size: ImageBaseSize | number;\n}\n"],"mappings":";;;;;;AAAO,IAAMA,cAAc,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAU;AAAC"}

package/dist/cjs/components/ImageBase/validators.js

@@ -8,6 +8,7 @@ exports.validateFallbackIcon = validateFallbackIcon;
 exports.validateOverlayIcon = validateOverlayIcon;
 exports.validateSize = validateSize;
 var _warnOnce = require("../../lib/warnOnce");
+var _types = require("./types");
 var _helpers = require("./helpers");
 /**
  * Пример,
@@ -17,16 +18,16 @@ var _helpers = require("./helpers");
  * Icon12Circle2 -> 12
  */
 function parseIconSizeByDisplayName(displayName) {
-  if (typeof displayName !== "string") {
+  if (typeof displayName !== 'string') {
     return null;
   }
-  var rawSize = displayName.replace(/\d+$/g, "") // удаляем цифры в конце
-  .replace(/\D/g, ""); // удаляем всё, что не является числом
+  var rawSize = displayName.replace(/\d+$/g, '') // удаляем цифры в конце
+  .replace(/\D/g, ''); // удаляем всё, что не является числом
   var size = Number(rawSize);
   return size > 0 ? size : null;
 }
 function parseIconSizeByWidthProp(width) {
-  if (typeof width !== "string" && typeof width !== "number") {
+  if (typeof width !== 'string' && typeof width !== 'number') {
     return null;
   }
   var size = Number(width);
@@ -56,29 +57,13 @@ function validateIconComponentSizeByImageSize(imageSize, iconProp, selectorFn, l
   }
   var iconName = getElementDisplayName(iconProp.value);
   var propMessage = iconName ? "".concat(iconProp.name, "={<").concat(iconName, " />}") : iconProp.name;
-  logger("\u0420\u0430\u0437\u043C\u0435\u0440 `".concat(propMessage, "` \u043D\u0435 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u0438\u0437\u0430\u0439\u043D-\u0441\u0438\u0441\u0442\u0435\u043C\u0435. \u0414\u043B\u044F `size={").concat(imageSize, "}` \u0440\u0430\u0437\u043C\u0435\u0440 \u0438\u043A\u043E\u043D\u043A\u0438 \u0434\u043B\u044F `").concat(iconProp.name, "` \u0434\u043E\u043B\u0436\u0435\u043D \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043E\u0432\u0430\u0442\u044C <Icon").concat(result, "<name> />. \u0415\u0441\u043B\u0438 \u0442\u0430\u043A\u043E\u0433\u043E \u0440\u0430\u0437\u043C\u0435\u0440\u0430 \u043D\u0435\u0442, \u0442\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 <").concat(iconName, " width={").concat(result, "} height={").concat(result, "} />"), "log");
+  logger("\u0420\u0430\u0437\u043C\u0435\u0440 `".concat(propMessage, "` \u043D\u0435 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u0438\u0437\u0430\u0439\u043D-\u0441\u0438\u0441\u0442\u0435\u043C\u0435. \u0414\u043B\u044F `size={").concat(imageSize, "}` \u0440\u0430\u0437\u043C\u0435\u0440 \u0438\u043A\u043E\u043D\u043A\u0438 \u0434\u043B\u044F `").concat(iconProp.name, "` \u0434\u043E\u043B\u0436\u0435\u043D \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043E\u0432\u0430\u0442\u044C <Icon").concat(result, "<name> />. \u0415\u0441\u043B\u0438 \u0442\u0430\u043A\u043E\u0433\u043E \u0440\u0430\u0437\u043C\u0435\u0440\u0430 \u043D\u0435\u0442, \u0442\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 <").concat(iconName, " width={").concat(result, "} height={").concat(result, "} />"), 'log');
 }
-var warnImageBase = (0, _warnOnce.warnOnce)("ImageBase");
+var warnImageBase = (0, _warnOnce.warnOnce)('ImageBase');
 function validateFallbackIcon(imageSize, iconProp) {
   return validateIconComponentSizeByImageSize(imageSize, iconProp, _helpers.getFallbackIconSizeByImageBaseSize, warnImageBase);
 }
-var mapOfExpectedSize = {
-  16: true,
-  20: true,
-  24: true,
-  28: true,
-  32: true,
-  36: true,
-  40: true,
-  44: true,
-  48: true,
-  56: true,
-  64: true,
-  72: true,
-  80: true,
-  88: true,
-  96: true
-};
+var mapOfExpectedSize = new Set(_types.imageBaseSizes);
 var arrayOfSizes = Object.keys(mapOfExpectedSize).map(function (str) {
   return Number(str);
 });
@@ -86,19 +71,19 @@ var maxSize = arrayOfSizes.reduce(function (maxSize, size) {
   return size > maxSize ? size : maxSize;
 }, 0);
 function validateSize(imageSize) {
-  if (imageSize > maxSize || imageSize in mapOfExpectedSize) {
+  if (imageSize > maxSize || mapOfExpectedSize.has(imageSize)) {
     return;
   }
-  warnImageBase("`size={".concat(imageSize, "}` \u043D\u0435 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u0438\u0437\u0430\u0439\u043D-\u0441\u0438\u0441\u0442\u0435\u043C\u0435. \u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 \u043E\u0434\u0438\u043D \u0438\u0437 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0445 \u0432\u0430\u0440\u0438\u0430\u043D\u0442\u043E\u0432: ").concat(arrayOfSizes.join(" | ")), "log");
+  warnImageBase("`size={".concat(imageSize, "}` \u043D\u0435 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u0438\u0437\u0430\u0439\u043D-\u0441\u0438\u0441\u0442\u0435\u043C\u0435. \u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 \u043E\u0434\u0438\u043D \u0438\u0437 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0445 \u0432\u0430\u0440\u0438\u0430\u043D\u0442\u043E\u0432: ").concat(arrayOfSizes.join(' | ')), 'log');
 }
-var warnImageBaseBadge = (0, _warnOnce.warnOnce)("ImageBase.Badge");
+var warnImageBaseBadge = (0, _warnOnce.warnOnce)('ImageBase.Badge');
 function validateBadgeIcon(imageSize, iconProp) {
   if (imageSize < 24 && iconProp) {
-    return warnImageBaseBadge("Не используйте бейдж при `size < 24`.", "log");
+    return warnImageBaseBadge('Не используйте бейдж при `size < 24`.', 'log');
   }
   validateIconComponentSizeByImageSize(imageSize, iconProp, _helpers.getBadgeIconSizeByImageBaseSize, warnImageBaseBadge);
 }
-var warnImageBaseOverlay = (0, _warnOnce.warnOnce)("ImageBase.Overlay");
+var warnImageBaseOverlay = (0, _warnOnce.warnOnce)('ImageBase.Overlay');
 function validateOverlayIcon(imageSize, iconProp) {
   validateIconComponentSizeByImageSize(imageSize, iconProp, _helpers.getOverlayIconSizeByImageBaseSize, warnImageBaseOverlay);
 }