@vkontakte/vkui 5.2.4 → 5.3.1

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

@@ -1,87 +1,91 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    IMAGE_DEFAULT_SIZE: function() {
+        return IMAGE_DEFAULT_SIZE;
+    },
+    Image: function() {
+        return Image;
+    }
 });
-exports.Image = exports.IMAGE_DEFAULT_SIZE = void 0;
-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 _vkjs = require("@vkontakte/vkjs");
-var _ImageBase = require("../ImageBase/ImageBase");
-var _ImageBadge = require("./ImageBadge/ImageBadge");
-var _excluded = ["size", "borderRadius", "style", "className"];
+var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
+var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
+var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _imageBase = require("../ImageBase/ImageBase");
+var _imageBadge = require("./ImageBadge/ImageBadge");
 var IMAGE_DEFAULT_SIZE = 48;
-exports.IMAGE_DEFAULT_SIZE = IMAGE_DEFAULT_SIZE;
-/**
- * @see https://vkcom.github.io/VKUI/#/Image
- */
-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,
-    style = _ref.style,
-    className = _ref.className,
-    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var borderRadius;
-  switch (borderRadiusProp) {
-    case 's':
-      {
-        if (size <= 32) {
-          borderRadius = 2;
-        } else if (size <= 56) {
-          borderRadius = 3;
-        }
-        borderRadius = 4;
-        break;
-      }
-    case 'm':
-      {
-        if (size <= 32) {
-          borderRadius = 3;
-        } else if (size <= 48) {
-          borderRadius = 4;
-        } else if (size <= 72) {
-          borderRadius = 6;
-        } else if (size <= 80) {
-          borderRadius = 8;
-        }
-        borderRadius = 10;
-        break;
-      }
-    case 'l':
-      {
-        if (size <= 16) {
-          borderRadius = 4;
-        } else if (size <= 20) {
-          borderRadius = 5;
-        } else if (size <= 32) {
-          borderRadius = 6;
-        } else if (size <= 40) {
-          borderRadius = 8;
-        } else if (size <= 48) {
-          borderRadius = 10;
-        } else if (size <= 56) {
-          borderRadius = 12;
-        } else if (size <= 64) {
-          borderRadius = 14;
-        }
-        borderRadius = 16;
-      }
-  }
-  return /*#__PURE__*/React.createElement(_ImageBase.ImageBase, (0, _extends2.default)({}, restProps, {
-    size: size,
-    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, style), {}, {
-      borderRadius: borderRadius
-    }),
-    className: (0, _vkjs.classNames)("vkuiImage", className)
-  }));
+var Image = function(_param) {
+    var _param_size = _param.size, size = _param_size === void 0 ? IMAGE_DEFAULT_SIZE : _param_size, tmp = _param.borderRadius, borderRadiusProp = tmp === void 0 ? "m" : tmp, style = _param.style, className = _param.className, restProps = _objectWithoutProperties(_param, [
+        "size",
+        "borderRadius",
+        "style",
+        "className"
+    ]);
+    var borderRadius;
+    switch(borderRadiusProp){
+        case "s":
+            {
+                if (size <= 32) {
+                    borderRadius = 2;
+                } else if (size <= 56) {
+                    borderRadius = 3;
+                }
+                borderRadius = 4;
+                break;
+            }
+        case "m":
+            {
+                if (size <= 32) {
+                    borderRadius = 3;
+                } else if (size <= 48) {
+                    borderRadius = 4;
+                } else if (size <= 72) {
+                    borderRadius = 6;
+                } else if (size <= 80) {
+                    borderRadius = 8;
+                }
+                borderRadius = 10;
+                break;
+            }
+        case "l":
+            {
+                if (size <= 16) {
+                    borderRadius = 4;
+                } else if (size <= 20) {
+                    borderRadius = 5;
+                } else if (size <= 32) {
+                    borderRadius = 6;
+                } else if (size <= 40) {
+                    borderRadius = 8;
+                } else if (size <= 48) {
+                    borderRadius = 10;
+                } else if (size <= 56) {
+                    borderRadius = 12;
+                } else if (size <= 64) {
+                    borderRadius = 14;
+                }
+                borderRadius = 16;
+            }
+    }
+    return /*#__PURE__*/ _react.createElement(_imageBase.ImageBase, _objectSpreadProps(_objectSpread({}, restProps), {
+        size: size,
+        style: _objectSpreadProps(_objectSpread({}, style), {
+            borderRadius: borderRadius
+        }),
+        className: className
+    }));
 };
-exports.Image = Image;
-Image.Badge = _ImageBadge.ImageBadge;
-Image.Overlay = _ImageBase.ImageBase.Overlay;
+Image.Badge = _imageBadge.ImageBadge;
+Image.Overlay = _imageBase.ImageBase.Overlay;
+
 //# sourceMappingURL=Image.js.map

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","classNames","Badge","ImageBadge","Overlay","ImageBase"],"sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { ImageBadge, type ImageBadgeProps } from './ImageBadge/ImageBadge';\nimport styles from './Image.module.css';\n\nexport type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };\n\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"}
+{"version":3,"sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { ImageBadge, type ImageBadgeProps } from './ImageBadge/ImageBadge';\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={className}\n    />\n  );\n};\n\nImage.Badge = ImageBadge;\n\nImage.Overlay = ImageBase.Overlay;\n"],"names":["IMAGE_DEFAULT_SIZE","Image","size","borderRadiusProp","borderRadius","style","className","restProps","ImageBase","Badge","ImageBadge","Overlay"],"mappings":";;;;;;;;;;;IAMaA,kBAAkB;eAAlBA;;IAYAC,KAAK;eAALA;;;;;;;2DAlBU;yBACoD;0BAC1B;AAI1C,IAAMD,qBAAqB;AAY3B,IAAMC,QAAQ,iBAMH;6BALhBC,MAAAA,gCAAOF,kCACOG,aAAdC,cAAcD,mBAAAA,iBAAmB,MAAnBA,KACdE,eAAAA,OACAC,mBAAAA,WACGC;QAJHL;QACAE;QACAC;QACAC;;IAGA,IAAIF;IAEJ,OAAQD;QACN,KAAK;YAAK;gBACR,IAAID,QAAQ,IAAI;oBACdE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,CAAC;gBACDA,eAAe;gBACf,KAAM;YACR;QACA,KAAK;YAAK;gBACR,IAAIF,QAAQ,IAAI;oBACdE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,CAAC;gBACDA,eAAe;gBACf,KAAM;YACR;QACA,KAAK;YAAK;gBACR,IAAIF,QAAQ,IAAI;oBACdE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,OAAO,IAAIF,QAAQ,IAAI;oBACrBE,eAAe;gBACjB,CAAC;gBACDA,eAAe;YACjB;IACF;IAEA,qBACE,qBAACI,oBAAS,uCACJD;QACJL,MAAMA;QACNG,OAAO,qCAAKA;YAAOD,cAAAA;;QACnBE,WAAWA;;AAGjB;AAEAL,MAAMQ,KAAK,GAAGC,sBAAU;AAExBT,MAAMU,OAAO,GAAGH,oBAAS,CAACG,OAAO"}

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

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

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

@@ -1,25 +1,28 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "ImageBadge", {
+    enumerable: true,
+    get: function() {
+        return ImageBadge;
+    }
 });
-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 _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
+var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
+var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _ImageBase = require("../../ImageBase/ImageBase");
-var _excluded = ["className"];
-var ImageBadge = function ImageBadge(_ref) {
-  var className = _ref.className,
-    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _React$useContext = React.useContext(_ImageBase.ImageBaseContext),
-    size = _React$useContext.size;
-  return /*#__PURE__*/React.createElement(_ImageBase.ImageBase.Badge, (0, _extends2.default)({}, restProps, {
-    className: (0, _vkjs.classNames)("vkuiImageBadge", size < 96 && "vkuiImageBadge--shifted", className)
-  }));
+var _imageBase = require("../../ImageBase/ImageBase");
+var ImageBadge = function(_param) {
+    var className = _param.className, restProps = _objectWithoutProperties(_param, [
+        "className"
+    ]);
+    var size = _react.useContext(_imageBase.ImageBaseContext).size;
+    return /*#__PURE__*/ _react.createElement(_imageBase.ImageBase.Badge, _objectSpreadProps(_objectSpread({}, restProps), {
+        className: (0, _vkjs.classNames)("vkuiImageBadge", size < 96 && "vkuiImageBadge--shifted", className)
+    }));
 };
-exports.ImageBadge = ImageBadge;
+
 //# sourceMappingURL=ImageBadge.js.map

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

@@ -1 +1 @@
-{"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 { ImageBase, type ImageBaseBadgeProps, 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"}
+{"version":3,"sources":["../../../../../src/components/Image/ImageBadge/ImageBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseBadgeProps, 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"],"names":["ImageBadge","className","restProps","size","React","useContext","ImageBaseContext","ImageBase","Badge","classNames"],"mappings":";;;;+BAOaA;;;eAAAA;;;;;;;2DAPU;oBACI;yBAC2C;AAK/D,IAAMA,aAAa,iBAAkD;QAA/CC,mBAAAA,WAAcC;QAAdD;;IAC3B,IAAM,AAAEE,OAASC,OAAMC,UAAU,CAACC,2BAAgB,EAA1CH;IACR,qBACE,qBAACI,oBAAS,CAACC,KAAK,uCACVN;QACJD,WAAWQ,IAAAA,gBAAU,oBAEnBN,OAAO,iCACPF;;AAIR"}

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

@@ -1,159 +1,142 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ImageBase = void 0;
-Object.defineProperty(exports, "ImageBaseContext", {
-  enumerable: true,
-  get: function get() {
-    return _context.ImageBaseContext;
-  }
-});
-Object.defineProperty(exports, "getBadgeIconSizeByImageBaseSize", {
-  enumerable: true,
-  get: function get() {
-    return _helpers.getBadgeIconSizeByImageBaseSize;
-  }
-});
-Object.defineProperty(exports, "getFallbackIconSizeByImageBaseSize", {
-  enumerable: true,
-  get: function get() {
-    return _helpers.getFallbackIconSizeByImageBaseSize;
-  }
+    value: true
 });
-Object.defineProperty(exports, "getOverlayIconSizeByImageBaseSize", {
-  enumerable: true,
-  get: function get() {
-    return _helpers.getOverlayIconSizeByImageBaseSize;
-  }
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    getBadgeIconSizeByImageBaseSize: function() {
+        return _helpers.getBadgeIconSizeByImageBaseSize;
+    },
+    getFallbackIconSizeByImageBaseSize: function() {
+        return _helpers.getFallbackIconSizeByImageBaseSize;
+    },
+    getOverlayIconSizeByImageBaseSize: function() {
+        return _helpers.getOverlayIconSizeByImageBaseSize;
+    },
+    ImageBaseContext: function() {
+        return _context.ImageBaseContext;
+    },
+    ImageBase: function() {
+        return ImageBase;
+    }
 });
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var React = _interopRequireWildcard(require("react"));
+var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
+var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
+var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
+var _slicedToArray = require("@swc/helpers/lib/_sliced_to_array.js").default;
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _ImageBaseBadge = require("./ImageBaseBadge/ImageBaseBadge");
-var _ImageBaseOverlay = require("./ImageBaseOverlay/ImageBaseOverlay");
+var _imageBaseBadge = require("./ImageBaseBadge/ImageBaseBadge");
+var _imageBaseOverlay = require("./ImageBaseOverlay/ImageBaseOverlay");
 var _context = require("./context");
 var _validators = require("./validators");
 var _helpers = require("./helpers");
-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"];
-/**
- * @see https://vkcom.github.io/VKUI/#/ImageBase
- */
-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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _React$useState = React.useState(false),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    loaded = _React$useState2[0],
-    setLoaded = _React$useState2[1];
-  var _React$useState3 = React.useState(false),
-    _React$useState4 = (0, _slicedToArray2.default)(_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') {
-    (0, _validators.validateSize)(size);
-    if (fallbackIcon) {
-      (0, _validators.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(_context.ImageBaseContext.Provider, {
-    value: {
-      size: size
+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 = _objectWithoutProperties(_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 = _slicedToArray(_react.useState(false), 2), loaded = _React_useState[0], setLoaded = _React_useState[1];
+    var _React_useState1 = _slicedToArray(_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") {
+        (0, _validators.validateSize)(size);
+        if (fallbackIcon) {
+            (0, _validators.validateFallbackIcon)(size, {
+                name: "fallbackIcon",
+                value: fallbackIcon
+            });
+        }
     }
-  }, /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
-    ref: getRootRef,
-    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, style), {}, {
-      width: size,
-      height: size
-    }),
-    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", {
-    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: (0, _vkjs.classNames)("vkuiImageBase__fallback")
-  }, fallbackIcon), children));
-};
-exports.ImageBase = ImageBase;
-ImageBase.Badge = _ImageBaseBadge.ImageBaseBadge;
-ImageBase.Overlay = _ImageBaseOverlay.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"
+    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(_context.ImageBaseContext.Provider, {
+        value: {
+            size: size
+        }
+    }, /*#__PURE__*/ _react.createElement("div", _objectSpreadProps(_objectSpread({}, restProps), {
+        ref: getRootRef,
+        style: _objectSpreadProps(_objectSpread({}, style), {
+            width: size,
+            height: size
+        }),
+        className: (0, _vkjs.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: (0, _vkjs.classNames)("vkuiImageBase__fallback")
+    }, fallbackIcon), children));
 };
+ImageBase.Badge = _imageBaseBadge.ImageBaseBadge;
+ImageBase.Overlay = _imageBaseOverlay.ImageBaseOverlay;
+
 //# sourceMappingURL=ImageBase.js.map

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","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 { 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":["getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","ImageBaseContext","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","sizeClassName","Provider","div","ref","classNames","role","aria-label","img","Badge","ImageBaseBadge","Overlay","ImageBaseOverlay"],"mappings":"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"}