@vkontakte/vkui 4.23.0 → 4.24.0

package/dist/cjs/components/AppRoot/AppRootPortal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/AppRootPortal.tsx"],"names":["AppRootPortal","children","className","forcePortal","React","useContext","AppRootContext","portalRoot","mode"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEO,IAAMA,aAA+F,GAAG,SAAlGA,aAAkG,OAA0C;AAAA;;AAAA,MAAvCC,QAAuC,QAAvCA,QAAuC;AAAA,MAA7BC,SAA6B,QAA7BA,SAA6B;AAAA,MAAlBC,WAAkB,QAAlBA,WAAkB;;AACvJ,0BAA6BC,KAAK,CAACC,UAAN,CAAiBC,8BAAjB,CAA7B;AAAA,MAAQC,UAAR,qBAAQA,UAAR;AAAA,MAAoBC,IAApB,qBAAoBA,IAApB;;AAEAL,EAAAA,WAAW,mBAAGA,WAAH,uDAAkBK,IAAI,KAAK,MAAtC;AACA,SAAOD,UAAU,IAAIJ,WAAd,gBACH,4BAAc;AAAK,IAAA,SAAS,EAAED;AAAhB,KAA4BD,QAA5B,CAAd,EAA4DM,UAA5D,CADG,GAEH,qCAAC,KAAD,CAAO,QAAP,QAAiBN,QAAjB,CAFJ;AAGD,CAPM","sourcesContent":["import * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { AppRootContext } from './AppRootContext';\n\nexport const AppRootPortal: React.FC<React.PropsWithChildren<{ className?: string; forcePortal?: boolean }>> = ({ children, className, forcePortal }) => {\n  const { portalRoot, mode } = React.useContext(AppRootContext);\n\n  forcePortal = forcePortal ?? mode !== 'full';\n  return portalRoot && forcePortal\n    ? createPortal((<div className={className}>{children}</div>), portalRoot)\n    : <React.Fragment>{children}</React.Fragment>;\n};\n"],"file":"AppRootPortal.js"}
+{"version":3,"sources":["../../../../src/components/AppRoot/AppRootPortal.tsx"],"names":["AppRootPortal","children","className","forcePortal","React","useContext","AppRootContext","portalRoot","mode"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEO,IAAMA,aAEZ,GAAG,SAFSA,aAET,OAA0C;AAAA;;AAAA,MAAvCC,QAAuC,QAAvCA,QAAuC;AAAA,MAA7BC,SAA6B,QAA7BA,SAA6B;AAAA,MAAlBC,WAAkB,QAAlBA,WAAkB;;AAC5C,0BAA6BC,KAAK,CAACC,UAAN,CAAiBC,8BAAjB,CAA7B;AAAA,MAAQC,UAAR,qBAAQA,UAAR;AAAA,MAAoBC,IAApB,qBAAoBA,IAApB;;AAEAL,EAAAA,WAAW,mBAAGA,WAAH,uDAAkBK,IAAI,KAAK,MAAtC;AACA,SAAOD,UAAU,IAAIJ,WAAd,gBACL,4BAAa;AAAK,IAAA,SAAS,EAAED;AAAhB,KAA4BD,QAA5B,CAAb,EAA0DM,UAA1D,CADK,GAGL,qCAAC,KAAD,CAAO,QAAP,QAAiBN,QAAjB,CAHF;AAKD,CAXM","sourcesContent":["import * as React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { AppRootContext } from \"./AppRootContext\";\n\nexport const AppRootPortal: React.FC<\n  React.PropsWithChildren<{ className?: string; forcePortal?: boolean }>\n> = ({ children, className, forcePortal }) => {\n  const { portalRoot, mode } = React.useContext(AppRootContext);\n\n  forcePortal = forcePortal ?? mode !== \"full\";\n  return portalRoot && forcePortal ? (\n    createPortal(<div className={className}>{children}</div>, portalRoot)\n  ) : (\n    <React.Fragment>{children}</React.Fragment>\n  );\n};\n"],"file":"AppRootPortal.js"}

package/dist/cjs/components/AppRoot/ScrollContext.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 export interface ScrollContextInterface {
     getScroll(): {
         x: number;

package/dist/cjs/components/AppRoot/ScrollContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/ScrollContext.ts"],"names":["ScrollContext","React","createContext","getScroll","x","y","scrollTo","noop","globalScrollController","window","document","pageXOffset","pageYOffset","body","scrollWidth","innerWidth","scrollHeight","innerHeight","elementScrollController","elRef","current","scrollLeft","scrollTop","el","clientWidth","clientHeight"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAOO,IAAMA,aAAa,gBAAGC,KAAK,CAACC,aAAN,CAA4C;AACvEC,EAAAA,SAAS,EAAE;AAAA,WAAO;AAAEC,MAAAA,CAAC,EAAE,CAAL;AAAQC,MAAAA,CAAC,EAAE;AAAX,KAAP;AAAA,GAD4D;AAEvEC,EAAAA,QAAQ,EAAEC;AAF6D,CAA5C,CAAtB;;;AAKA,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACC,MAAD,EAAiBC,QAAjB;AAAA,SAA6C;AACjFP,IAAAA,SAAS,EAAE;AAAA,aAAO;AAAEC,QAAAA,CAAC,EAAEK,MAAM,CAACE,WAAZ;AAAyBN,QAAAA,CAAC,EAAEI,MAAM,CAACG;AAAnC,OAAP;AAAA,KADsE;AAEjFN,IAAAA,QAAQ,EAAE,oBAAkB;AAAA,UAAjBF,CAAiB,uEAAb,CAAa;AAAA,UAAVC,CAAU,uEAAN,CAAM;AAC1B;AACAI,MAAAA,MAAM,CAACH,QAAP,CACEF,CAAC,GAAG,iBAAMA,CAAN,EAAS,CAAT,EAAYM,QAAQ,CAACG,IAAT,CAAcC,WAAd,GAA4BL,MAAM,CAACM,UAA/C,CAAH,GAAgE,CADnE,EAEEV,CAAC,GAAG,iBAAMA,CAAN,EAAS,CAAT,EAAYK,QAAQ,CAACG,IAAT,CAAcG,YAAd,GAA6BP,MAAM,CAACQ,WAAhD,CAAH,GAAkE,CAFrE;AAGD;AAPgF,GAA7C;AAAA,CAA/B;;;;AAUA,IAAMC,uBAAuB,GAAG,SAA1BA,uBAA0B,CAACC,KAAD;AAAA,SAA0C;AAC/EhB,IAAAA,SAAS,EAAE;AAAA,aAAO;AAAEC,QAAAA,CAAC,EAAEe,KAAK,CAACC,OAAN,CAAcC,UAAnB;AAA+BhB,QAAAA,CAAC,EAAEc,KAAK,CAACC,OAAN,CAAcE;AAAhD,OAAP;AAAA,KADoE;AAE/EhB,IAAAA,QAAQ,EAAE,oBAAkB;AAAA,UAAjBF,CAAiB,uEAAb,CAAa;AAAA,UAAVC,CAAU,uEAAN,CAAM;AAC1B,UAAMkB,EAAE,GAAGJ,KAAK,CAACC,OAAjB,CAD0B,CAE1B;;AACAG,MAAAA,EAAE,CAACjB,QAAH,CACEF,CAAC,GAAG,iBAAMA,CAAN,EAAS,CAAT,EAAYmB,EAAE,CAACT,WAAH,GAAiBS,EAAE,CAACC,WAAhC,CAAH,GAAkD,CADrD,EAEEnB,CAAC,GAAG,iBAAMA,CAAN,EAAS,CAAT,EAAYkB,EAAE,CAACP,YAAH,GAAkBO,EAAE,CAACE,YAAjC,CAAH,GAAoD,CAFvD;AAGD;AAR8E,GAA1C;AAAA,CAAhC","sourcesContent":["import * as React from 'react';\nimport { noop } from '../../lib/utils';\nimport { clamp } from '../../helpers/math';\n\nexport interface ScrollContextInterface {\n  getScroll(): { x: number; y: number };\n  scrollTo(x?: number, y?: number): void;\n}\n\nexport const ScrollContext = React.createContext<ScrollContextInterface>({\n  getScroll: () => ({ x: 0, y: 0 }),\n  scrollTo: noop,\n});\n\nexport const globalScrollController = (window: Window, document: HTMLDocument) => ({\n  getScroll: () => ({ x: window.pageXOffset, y: window.pageYOffset }),\n  scrollTo: (x = 0, y = 0) => {\n    // Some iOS versions do not normalize scroll — do it manually.\n    window.scrollTo(\n      x ? clamp(x, 0, document.body.scrollWidth - window.innerWidth) : 0,\n      y ? clamp(y, 0, document.body.scrollHeight - window.innerHeight) : 0);\n  },\n});\n\nexport const elementScrollController = (elRef: React.RefObject<HTMLElement>) => ({\n  getScroll: () => ({ x: elRef.current.scrollLeft, y: elRef.current.scrollTop }),\n  scrollTo: (x = 0, y = 0) => {\n    const el = elRef.current;\n    // Some iOS versions do not normalize scroll — do it manually.\n    el.scrollTo(\n      x ? clamp(x, 0, el.scrollWidth - el.clientWidth) : 0,\n      y ? clamp(y, 0, el.scrollHeight - el.clientHeight) : 0);\n  },\n});\n"],"file":"ScrollContext.js"}
+{"version":3,"sources":["../../../../src/components/AppRoot/ScrollContext.ts"],"names":["ScrollContext","React","createContext","getScroll","x","y","scrollTo","noop","globalScrollController","window","document","pageXOffset","pageYOffset","body","scrollWidth","innerWidth","scrollHeight","innerHeight","elementScrollController","elRef","current","scrollLeft","scrollTop","el","clientWidth","clientHeight"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAOO,IAAMA,aAAa,gBAAGC,KAAK,CAACC,aAAN,CAA4C;AACvEC,EAAAA,SAAS,EAAE;AAAA,WAAO;AAAEC,MAAAA,CAAC,EAAE,CAAL;AAAQC,MAAAA,CAAC,EAAE;AAAX,KAAP;AAAA,GAD4D;AAEvEC,EAAAA,QAAQ,EAAEC;AAF6D,CAA5C,CAAtB;;;AAKA,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB,CACpCC,MADoC,EAEpCC,QAFoC;AAAA,SAGhC;AACJP,IAAAA,SAAS,EAAE;AAAA,aAAO;AAAEC,QAAAA,CAAC,EAAEK,MAAM,CAACE,WAAZ;AAAyBN,QAAAA,CAAC,EAAEI,MAAM,CAACG;AAAnC,OAAP;AAAA,KADP;AAEJN,IAAAA,QAAQ,EAAE,oBAAkB;AAAA,UAAjBF,CAAiB,uEAAb,CAAa;AAAA,UAAVC,CAAU,uEAAN,CAAM;AAC1B;AACAI,MAAAA,MAAM,CAACH,QAAP,CACEF,CAAC,GAAG,iBAAMA,CAAN,EAAS,CAAT,EAAYM,QAAQ,CAACG,IAAT,CAAcC,WAAd,GAA4BL,MAAM,CAACM,UAA/C,CAAH,GAAgE,CADnE,EAEEV,CAAC,GAAG,iBAAMA,CAAN,EAAS,CAAT,EAAYK,QAAQ,CAACG,IAAT,CAAcG,YAAd,GAA6BP,MAAM,CAACQ,WAAhD,CAAH,GAAkE,CAFrE;AAID;AARG,GAHgC;AAAA,CAA/B;;;;AAcA,IAAMC,uBAAuB,GAAG,SAA1BA,uBAA0B,CACrCC,KADqC;AAAA,SAEjC;AACJhB,IAAAA,SAAS,EAAE;AAAA,aAAO;AAChBC,QAAAA,CAAC,EAAEe,KAAK,CAACC,OAAN,CAAcC,UADD;AAEhBhB,QAAAA,CAAC,EAAEc,KAAK,CAACC,OAAN,CAAcE;AAFD,OAAP;AAAA,KADP;AAKJhB,IAAAA,QAAQ,EAAE,oBAAkB;AAAA,UAAjBF,CAAiB,uEAAb,CAAa;AAAA,UAAVC,CAAU,uEAAN,CAAM;AAC1B,UAAMkB,EAAE,GAAGJ,KAAK,CAACC,OAAjB,CAD0B,CAE1B;;AACAG,MAAAA,EAAE,CAACjB,QAAH,CACEF,CAAC,GAAG,iBAAMA,CAAN,EAAS,CAAT,EAAYmB,EAAE,CAACT,WAAH,GAAiBS,EAAE,CAACC,WAAhC,CAAH,GAAkD,CADrD,EAEEnB,CAAC,GAAG,iBAAMA,CAAN,EAAS,CAAT,EAAYkB,EAAE,CAACP,YAAH,GAAkBO,EAAE,CAACE,YAAjC,CAAH,GAAoD,CAFvD;AAID;AAZG,GAFiC;AAAA,CAAhC","sourcesContent":["import * as React from \"react\";\nimport { noop } from \"../../lib/utils\";\nimport { clamp } from \"../../helpers/math\";\n\nexport interface ScrollContextInterface {\n  getScroll(): { x: number; y: number };\n  scrollTo(x?: number, y?: number): void;\n}\n\nexport const ScrollContext = React.createContext<ScrollContextInterface>({\n  getScroll: () => ({ x: 0, y: 0 }),\n  scrollTo: noop,\n});\n\nexport const globalScrollController = (\n  window: Window,\n  document: HTMLDocument\n) => ({\n  getScroll: () => ({ x: window.pageXOffset, y: window.pageYOffset }),\n  scrollTo: (x = 0, y = 0) => {\n    // Some iOS versions do not normalize scroll — do it manually.\n    window.scrollTo(\n      x ? clamp(x, 0, document.body.scrollWidth - window.innerWidth) : 0,\n      y ? clamp(y, 0, document.body.scrollHeight - window.innerHeight) : 0\n    );\n  },\n});\n\nexport const elementScrollController = (\n  elRef: React.RefObject<HTMLElement>\n) => ({\n  getScroll: () => ({\n    x: elRef.current.scrollLeft,\n    y: elRef.current.scrollTop,\n  }),\n  scrollTo: (x = 0, y = 0) => {\n    const el = elRef.current;\n    // Some iOS versions do not normalize scroll — do it manually.\n    el.scrollTo(\n      x ? clamp(x, 0, el.scrollWidth - el.clientWidth) : 0,\n      y ? clamp(y, 0, el.scrollHeight - el.clientHeight) : 0\n    );\n  },\n});\n"],"file":"ScrollContext.js"}

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

@@ -1,13 +1,20 @@
-import * as React from 'react';
-import { HasRef, HasRootRef } from '../../types';
-import './Avatar.css';
+import * as React from "react";
+import { HasRef, HasRootRef } from "../../types";
+import "./Avatar.css";
 export interface AvatarProps extends React.ImgHTMLAttributes<HTMLElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLImageElement> {
     /**
      * Рекомендуемый сет значений: 96 | 88 | 80 | 72 | 64 | 56 | 48 | 44 | 40 | 36 | 32 | 28 | 24
      */
     size?: number;
-    mode?: 'default' | 'image' | 'app';
+    mode?: "default" | "image" | "app";
     shadow?: boolean;
+    badge?: "online" | "online-mobile" | JSX.Element;
+    overlayIcon?: JSX.Element;
+    overlayMode?: "dark" | "light";
+    /**
+     * Поведение показа overlay: "hover" - при наведении, "always" - всегда
+     */
+    overlayAction?: "hover" | "always";
 }
 declare const Avatar: React.FC<AvatarProps>;
 export declare const AVATAR_DEFAULT_SIZE = 48;

package/dist/cjs/components/Avatar/Avatar.js

@@ -21,13 +21,19 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var React = _interopRequireWildcard(require("react"));
 
+var _icons = require("@vkontakte/icons");
+
 var _getClassName = require("../../helpers/getClassName");
 
 var _classNames = require("../../lib/classNames");
 
 var _usePlatform = require("../../hooks/usePlatform");
 
-var _excluded = ["alt", "crossOrigin", "decoding", "height", "loading", "referrerPolicy", "sizes", "src", "srcSet", "useMap", "width", "getRef", "size", "shadow", "mode", "className", "children", "getRootRef", "style", "aria-label"];
+var _useAdaptivity2 = require("../../hooks/useAdaptivity");
+
+var _Tappable = _interopRequireDefault(require("../Tappable/Tappable"));
+
+var _excluded = ["alt", "crossOrigin", "decoding", "height", "loading", "referrerPolicy", "sizes", "src", "srcSet", "useMap", "width", "getRef", "size", "shadow", "mode", "className", "children", "getRootRef", "style", "aria-label", "badge", "overlayIcon", "overlayMode", "overlayAction", "onClick"];
 
 var Avatar = function Avatar(_ref) {
   var alt = _ref.alt,
@@ -49,15 +55,25 @@ var Avatar = function Avatar(_ref) {
       children = _ref.children,
       getRootRef = _ref.getRootRef,
       style = _ref.style,
-      ariaLabel = _ref['aria-label'],
+      ariaLabel = _ref["aria-label"],
+      badge = _ref.badge,
+      overlayIcon = _ref.overlayIcon,
+      overlayMode = _ref.overlayMode,
+      passedOverlayAction = _ref.overlayAction,
+      onClick = _ref.onClick,
       restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
 
+  var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
+      hasMouse = _useAdaptivity.hasMouse;
+
   var _React$useState = React.useState(false),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
       failedImage = _React$useState2[0],
       setFailedImage = _React$useState2[1];
 
+  var overlayAction = passedOverlayAction !== null && passedOverlayAction !== void 0 ? passedOverlayAction : hasMouse ? "hover" : "always";
+
   var onImageError = function onImageError() {
     setFailedImage(true);
   };
@@ -66,16 +82,16 @@ var Avatar = function Avatar(_ref) {
     setFailedImage(false);
   };
 
-  var borderRadius = '50%';
+  var borderRadius = "50%";
 
   switch (mode) {
-    case 'image':
+    case "image":
       size < 64 && (borderRadius = 4);
       size >= 64 && size < 96 && (borderRadius = 6);
       size >= 96 && (borderRadius = 8);
       break;
 
-    case 'app':
+    case "app":
       size <= 40 && (borderRadius = 8);
       size > 40 && size < 56 && (borderRadius = 10);
       size >= 56 && size < 64 && (borderRadius = 12);
@@ -89,14 +105,15 @@ var Avatar = function Avatar(_ref) {
 
   var hasSrc = src || srcSet;
   return (0, _jsxRuntime.createScopedElement)("div", (0, _extends2.default)({}, restProps, {
-    vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)('Avatar', platform), "Avatar--type-".concat(mode), "Avatar--sz-".concat(size), {
-      'Avatar--shadow': shadow,
-      'Avatar--failed': failedImage
+    vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)("Avatar", platform), "Avatar--type-".concat(mode), "Avatar--sz-".concat(size), {
+      "Avatar--shadow": shadow,
+      "Avatar--failed": failedImage
     }),
     className: className,
     ref: getRootRef,
-    role: hasSrc ? 'img' : 'presentation',
+    role: hasSrc ? "img" : "presentation",
     "aria-label": alt || ariaLabel,
+    onClick: !overlayIcon ? onClick : undefined,
     style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, style), {}, {
       width: size,
       height: size,
@@ -120,7 +137,33 @@ var Avatar = function Avatar(_ref) {
     alt: ""
   }), children && (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "Avatar__children"
-  }, children));
+  }, children), overlayIcon && (0, _jsxRuntime.createScopedElement)(_Tappable.default, {
+    Component: "button",
+    vkuiClass: (0, _classNames.classNames)("Avatar__overlay", {
+      "Avatar__overlay--visible": overlayAction === "always",
+      "Avatar__overlay--light": overlayMode === "light",
+      "Avatar__overlay--dark": overlayMode === "dark"
+    }),
+    hoverMode: "Avatar__overlay--visible",
+    focusVisibleMode: "Avatar__overlay--focus-visible",
+    hasActive: false,
+    onClick: onClick
+  }, overlayIcon), badge && (0, _jsxRuntime.createScopedElement)("div", {
+    vkuiClass: (0, _classNames.classNames)("Avatar__badge", {
+      "Avatar__badge--large": size >= 96,
+      "Avatar__badge--shadow": badge !== "online" && badge !== "online-mobile"
+    })
+  }, badge === "online" ? (0, _jsxRuntime.createScopedElement)("div", {
+    vkuiClass: "Avatar__badge-online"
+  }, (0, _jsxRuntime.createScopedElement)(_icons.Icon12Circle, {
+    width: size >= 72 ? 15 : 12,
+    height: size >= 72 ? 15 : 12
+  })) : badge === "online-mobile" ? (0, _jsxRuntime.createScopedElement)("div", {
+    vkuiClass: "Avatar__badge-online-mobile"
+  }, (0, _jsxRuntime.createScopedElement)(_icons.Icon12OnlineMobile, {
+    width: size >= 72 ? 9 : 8,
+    height: size >= 72 ? 15 : 12
+  })) : badge));
 };
 
 var AVATAR_DEFAULT_SIZE = 48;
@@ -129,8 +172,9 @@ var AVATAR_DEFAULT_SHADOW = true;
 exports.AVATAR_DEFAULT_SHADOW = AVATAR_DEFAULT_SHADOW;
 Avatar.defaultProps = {
   size: AVATAR_DEFAULT_SIZE,
-  mode: 'default',
-  shadow: AVATAR_DEFAULT_SHADOW
+  mode: "default",
+  shadow: AVATAR_DEFAULT_SHADOW,
+  overlayMode: "light"
 };
 var _default = Avatar;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Avatar/Avatar.tsx"],"names":["Avatar","alt","crossOrigin","decoding","height","loading","referrerPolicy","sizes","src","srcSet","useMap","width","getRef","size","shadow","mode","className","children","getRootRef","style","ariaLabel","restProps","platform","React","useState","failedImage","setFailedImage","onImageError","onImageLoad","borderRadius","hasSrc","AVATAR_DEFAULT_SIZE","AVATAR_DEFAULT_SHADOW","defaultProps"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasRef, HasRootRef } from '../../types';\nimport './Avatar.css';\n\nexport interface AvatarProps extends React.ImgHTMLAttributes<HTMLElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLImageElement> {\n  /**\n   * Рекомендуемый сет значений: 96 | 88 | 80 | 72 | 64 | 56 | 48 | 44 | 40 | 36 | 32 | 28 | 24\n   */\n  size?: number;\n  mode?: 'default' | 'image' | 'app';\n  shadow?: boolean;\n}\n\nconst Avatar: React.FC<AvatarProps> = ({\n  alt,\n  crossOrigin,\n  decoding,\n  height,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  width,\n  getRef,\n  size,\n  shadow,\n  mode,\n  className,\n  children,\n  getRootRef,\n  style,\n  'aria-label': ariaLabel,\n  ...restProps\n}: AvatarProps) => {\n  const platform = usePlatform();\n  const [failedImage, setFailedImage] = React.useState(false);\n\n  const onImageError = () => {\n    setFailedImage(true);\n  };\n\n  const onImageLoad = () => {\n    setFailedImage(false);\n  };\n\n  let borderRadius: string | number = '50%';\n\n  switch (mode) {\n    case 'image':\n      size < 64 && (borderRadius = 4);\n      size >= 64 && size < 96 && (borderRadius = 6);\n      size >= 96 && (borderRadius = 8);\n      break;\n    case 'app':\n      size <= 40 && (borderRadius = 8);\n      size > 40 && size < 56 && (borderRadius = 10);\n      size >= 56 && size < 64 && (borderRadius = 12);\n      size >= 64 && size < 84 && (borderRadius = 16);\n      size >= 84 && (borderRadius = 18);\n      break;\n    default:\n      break;\n  }\n\n  const hasSrc = src || srcSet;\n\n  return (\n    <div\n      {...restProps}\n      vkuiClass={classNames(getClassName('Avatar', platform), `Avatar--type-${mode}`, `Avatar--sz-${size}`, {\n        'Avatar--shadow': shadow,\n        'Avatar--failed': failedImage,\n      })}\n      className={className}\n      ref={getRootRef}\n      role={hasSrc ? 'img' : 'presentation'}\n      aria-label={alt || ariaLabel}\n      style={{ ...style, width: size, height: size, borderRadius }}\n    >\n      {hasSrc &&\n        <img\n          crossOrigin={crossOrigin}\n          decoding={decoding}\n          height={height}\n          loading={loading}\n          referrerPolicy={referrerPolicy}\n          sizes={sizes}\n          src={src}\n          srcSet={srcSet}\n          useMap={useMap}\n          width={width}\n          ref={getRef}\n          onError={onImageError}\n          onLoad={onImageLoad}\n          vkuiClass=\"Avatar__img\"\n          alt=\"\"\n        />\n      }\n      {children && <div vkuiClass=\"Avatar__children\">{children}</div>}\n    </div>\n  );\n};\n\nexport const AVATAR_DEFAULT_SIZE = 48;\nexport const AVATAR_DEFAULT_SHADOW = true;\n\nAvatar.defaultProps = {\n  size: AVATAR_DEFAULT_SIZE,\n  mode: 'default',\n  shadow: AVATAR_DEFAULT_SHADOW,\n};\n\nexport default Avatar;\n"],"file":"Avatar.js"}
+{"version":3,"sources":["../../../../src/components/Avatar/Avatar.tsx"],"names":["Avatar","alt","crossOrigin","decoding","height","loading","referrerPolicy","sizes","src","srcSet","useMap","width","getRef","size","shadow","mode","className","children","getRootRef","style","ariaLabel","badge","overlayIcon","overlayMode","passedOverlayAction","overlayAction","onClick","restProps","platform","hasMouse","React","useState","failedImage","setFailedImage","onImageError","onImageLoad","borderRadius","hasSrc","undefined","AVATAR_DEFAULT_SIZE","AVATAR_DEFAULT_SHADOW","defaultProps"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { Icon12Circle, Icon12OnlineMobile } from \"@vkontakte/icons\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport Tappable from \"../Tappable/Tappable\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport \"./Avatar.css\";\n\nexport interface AvatarProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLImageElement> {\n  /**\n   * Рекомендуемый сет значений: 96 | 88 | 80 | 72 | 64 | 56 | 48 | 44 | 40 | 36 | 32 | 28 | 24\n   */\n  size?: number;\n  mode?: \"default\" | \"image\" | \"app\";\n  shadow?: boolean;\n  badge?: \"online\" | \"online-mobile\" | JSX.Element;\n  overlayIcon?: JSX.Element;\n  overlayMode?: \"dark\" | \"light\";\n  /**\n   * Поведение показа overlay: \"hover\" - при наведении, \"always\" - всегда\n   */\n  overlayAction?: \"hover\" | \"always\";\n}\n\nconst Avatar: React.FC<AvatarProps> = ({\n  alt,\n  crossOrigin,\n  decoding,\n  height,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  width,\n  getRef,\n  size,\n  shadow,\n  mode,\n  className,\n  children,\n  getRootRef,\n  style,\n  \"aria-label\": ariaLabel,\n  badge,\n  overlayIcon,\n  overlayMode,\n  overlayAction: passedOverlayAction,\n  onClick,\n  ...restProps\n}: AvatarProps) => {\n  const platform = usePlatform();\n  const { hasMouse } = useAdaptivity();\n  const [failedImage, setFailedImage] = React.useState(false);\n\n  const overlayAction = passedOverlayAction ?? (hasMouse ? \"hover\" : \"always\");\n\n  const onImageError = () => {\n    setFailedImage(true);\n  };\n\n  const onImageLoad = () => {\n    setFailedImage(false);\n  };\n\n  let borderRadius: string | number = \"50%\";\n\n  switch (mode) {\n    case \"image\":\n      size < 64 && (borderRadius = 4);\n      size >= 64 && size < 96 && (borderRadius = 6);\n      size >= 96 && (borderRadius = 8);\n      break;\n    case \"app\":\n      size <= 40 && (borderRadius = 8);\n      size > 40 && size < 56 && (borderRadius = 10);\n      size >= 56 && size < 64 && (borderRadius = 12);\n      size >= 64 && size < 84 && (borderRadius = 16);\n      size >= 84 && (borderRadius = 18);\n      break;\n    default:\n      break;\n  }\n\n  const hasSrc = src || srcSet;\n\n  return (\n    <div\n      {...restProps}\n      vkuiClass={classNames(\n        getClassName(\"Avatar\", platform),\n        `Avatar--type-${mode}`,\n        `Avatar--sz-${size}`,\n        {\n          \"Avatar--shadow\": shadow,\n          \"Avatar--failed\": failedImage,\n        }\n      )}\n      className={className}\n      ref={getRootRef}\n      role={hasSrc ? \"img\" : \"presentation\"}\n      aria-label={alt || ariaLabel}\n      onClick={!overlayIcon ? onClick : undefined}\n      style={{ ...style, width: size, height: size, borderRadius }}\n    >\n      {hasSrc && (\n        <img\n          crossOrigin={crossOrigin}\n          decoding={decoding}\n          height={height}\n          loading={loading}\n          referrerPolicy={referrerPolicy}\n          sizes={sizes}\n          src={src}\n          srcSet={srcSet}\n          useMap={useMap}\n          width={width}\n          ref={getRef}\n          onError={onImageError}\n          onLoad={onImageLoad}\n          vkuiClass=\"Avatar__img\"\n          alt=\"\"\n        />\n      )}\n      {children && <div vkuiClass=\"Avatar__children\">{children}</div>}\n      {overlayIcon && (\n        <Tappable\n          Component=\"button\"\n          vkuiClass={classNames(\"Avatar__overlay\", {\n            \"Avatar__overlay--visible\": overlayAction === \"always\",\n            \"Avatar__overlay--light\": overlayMode === \"light\",\n            \"Avatar__overlay--dark\": overlayMode === \"dark\",\n          })}\n          hoverMode=\"Avatar__overlay--visible\"\n          focusVisibleMode=\"Avatar__overlay--focus-visible\"\n          hasActive={false}\n          onClick={onClick}\n        >\n          {overlayIcon}\n        </Tappable>\n      )}\n      {badge && (\n        <div\n          vkuiClass={classNames(\"Avatar__badge\", {\n            \"Avatar__badge--large\": size >= 96,\n            \"Avatar__badge--shadow\":\n              badge !== \"online\" && badge !== \"online-mobile\",\n          })}\n        >\n          {badge === \"online\" ? (\n            <div vkuiClass=\"Avatar__badge-online\">\n              <Icon12Circle\n                width={size >= 72 ? 15 : 12}\n                height={size >= 72 ? 15 : 12}\n              />\n            </div>\n          ) : badge === \"online-mobile\" ? (\n            <div vkuiClass=\"Avatar__badge-online-mobile\">\n              <Icon12OnlineMobile\n                width={size >= 72 ? 9 : 8}\n                height={size >= 72 ? 15 : 12}\n              />\n            </div>\n          ) : (\n            badge\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport const AVATAR_DEFAULT_SIZE = 48;\nexport const AVATAR_DEFAULT_SHADOW = true;\n\nAvatar.defaultProps = {\n  size: AVATAR_DEFAULT_SIZE,\n  mode: \"default\",\n  shadow: AVATAR_DEFAULT_SHADOW,\n  overlayMode: \"light\",\n};\n\nexport default Avatar;\n"],"file":"Avatar.js"}

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import './Badge.css';
+import * as React from "react";
+import "./Badge.css";
 export interface BadgeProps extends React.HTMLAttributes<HTMLElement> {
-    mode: 'new' | 'prominent';
+    mode: "new" | "prominent";
 }
 export declare const Badge: React.FunctionComponent<BadgeProps>;

package/dist/cjs/components/Badge/Badge.js

@@ -26,12 +26,12 @@ var Badge = function Badge(_ref) {
       restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
   return (0, _jsxRuntime.createScopedElement)("span", (0, _extends2.default)({
-    vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)('Badge', platform), "Badge--".concat(mode))
+    vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)("Badge", platform), "Badge--".concat(mode))
   }, restProps));
 };
 
 exports.Badge = Badge;
 Badge.defaultProps = {
-  mode: 'new'
+  mode: "new"
 };
 //# sourceMappingURL=Badge.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Badge/Badge.tsx"],"names":["Badge","mode","restProps","platform","defaultProps"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;;;AAOO,IAAMA,KAA0C,GAAG,SAA7CA,KAA6C,OAGxC;AAAA,MAFhBC,IAEgB,QAFhBA,IAEgB;AAAA,MADbC,SACa;AAChB,MAAMC,QAAQ,GAAG,+BAAjB;AAEA,SACE;AACE,IAAA,SAAS,EAAE,4BACT,gCAAa,OAAb,EAAsBA,QAAtB,CADS,mBAECF,IAFD;AADb,KAKMC,SALN,EADF;AASD,CAfM;;;AAiBPF,KAAK,CAACI,YAAN,GAAqB;AACnBH,EAAAA,IAAI,EAAE;AADa,CAArB","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport './Badge.css';\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLElement> {\n  mode: 'new' | 'prominent';\n}\n\nexport const Badge: React.FunctionComponent<BadgeProps> = ({\n  mode,\n  ...restProps\n}: BadgeProps) => {\n  const platform = usePlatform();\n\n  return (\n    <span\n      vkuiClass={classNames(\n        getClassName('Badge', platform),\n        `Badge--${mode}`,\n      )}\n      {...restProps}>\n    </span>\n  );\n};\n\nBadge.defaultProps = {\n  mode: 'new',\n};\n"],"file":"Badge.js"}
+{"version":3,"sources":["../../../../src/components/Badge/Badge.tsx"],"names":["Badge","mode","restProps","platform","defaultProps"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;;;AAOO,IAAMA,KAA0C,GAAG,SAA7CA,KAA6C,OAGxC;AAAA,MAFhBC,IAEgB,QAFhBA,IAEgB;AAAA,MADbC,SACa;AAChB,MAAMC,QAAQ,GAAG,+BAAjB;AAEA,SACE;AACE,IAAA,SAAS,EAAE,4BAAW,gCAAa,OAAb,EAAsBA,QAAtB,CAAX,mBAAsDF,IAAtD;AADb,KAEMC,SAFN,EADF;AAMD,CAZM;;;AAcPF,KAAK,CAACI,YAAN,GAAqB;AACnBH,EAAAA,IAAI,EAAE;AADa,CAArB","sourcesContent":["import * as React from \"react\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport \"./Badge.css\";\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLElement> {\n  mode: \"new\" | \"prominent\";\n}\n\nexport const Badge: React.FunctionComponent<BadgeProps> = ({\n  mode,\n  ...restProps\n}: BadgeProps) => {\n  const platform = usePlatform();\n\n  return (\n    <span\n      vkuiClass={classNames(getClassName(\"Badge\", platform), `Badge--${mode}`)}\n      {...restProps}\n    ></span>\n  );\n};\n\nBadge.defaultProps = {\n  mode: \"new\",\n};\n"],"file":"Badge.js"}

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

@@ -1,18 +1,18 @@
-import * as React from 'react';
-import './Banner.css';
+import * as React from "react";
+import "./Banner.css";
 export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Тип баннера.
      */
-    mode?: 'tint' | 'image';
-    size?: 's' | 'm';
+    mode?: "tint" | "image";
+    size?: "s" | "m";
     /**
      * Тип действия в правой части баннера.
      *
      * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.
      * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.
      */
-    asideMode?: 'dismiss' | 'expand';
+    asideMode?: "dismiss" | "expand";
     /**
      * Срабатывает при клике на иконку крестика при `asideMode="dismiss"`.
      */
@@ -46,7 +46,7 @@ export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
      * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.
      * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.
      */
-    imageTheme?: 'light' | 'dark';
+    imageTheme?: "light" | "dark";
     /**
      * При использовании `mode="image"`.
      *

package/dist/cjs/components/Banner/Banner.js

@@ -48,7 +48,7 @@ var _excluded = ["size"],
 var BannerHeader = function BannerHeader(_ref) {
   var size = _ref.size,
       restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return size === 'm' ? (0, _jsxRuntime.createScopedElement)(_Title.default, (0, _extends2.default)({
+  return size === "m" ? (0, _jsxRuntime.createScopedElement)(_Title.default, (0, _extends2.default)({
     level: "2",
     weight: "medium"
   }, restProps)) : (0, _jsxRuntime.createScopedElement)(_Headline.default, (0, _extends2.default)({
@@ -59,7 +59,7 @@ var BannerHeader = function BannerHeader(_ref) {
 var BannerSubheader = function BannerSubheader(_ref2) {
   var size = _ref2.size,
       restProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
-  return size === 'm' ? (0, _jsxRuntime.createScopedElement)(_Text.default, (0, _extends2.default)({
+  return size === "m" ? (0, _jsxRuntime.createScopedElement)(_Text.default, (0, _extends2.default)({
     weight: "regular"
   }, restProps)) : (0, _jsxRuntime.createScopedElement)(_Subhead.default, (0, _extends2.default)({
     weight: "regular"
@@ -83,15 +83,15 @@ var Banner = function Banner(props) {
       dismissLabel = props.dismissLabel,
       restProps = (0, _objectWithoutProperties2.default)(props, _excluded3);
   return (0, _jsxRuntime.createScopedElement)("section", (0, _extends2.default)({}, restProps, {
-    vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)('Banner', platform), "Banner--md-".concat(mode), "Banner--sz-".concat(size), {
-      'Banner--inverted': mode === 'image' && imageTheme === 'dark'
+    vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)("Banner", platform), "Banner--md-".concat(mode), "Banner--sz-".concat(size), {
+      "Banner--inverted": mode === "image" && imageTheme === "dark"
     })
   }), (0, _jsxRuntime.createScopedElement)(_Tappable.default, {
     vkuiClass: "Banner__in",
-    activeMode: platform === _platform.IOS ? 'opacity' : 'background',
-    disabled: asideMode !== 'expand',
-    role: asideMode === 'expand' ? 'button' : null
-  }, mode === 'image' && background && (0, _jsxRuntime.createScopedElement)("div", {
+    activeMode: platform === _platform.IOS ? "opacity" : "background",
+    disabled: asideMode !== "expand",
+    role: asideMode === "expand" ? "button" : null
+  }, mode === "image" && background && (0, _jsxRuntime.createScopedElement)("div", {
     "aria-hidden": "true",
     vkuiClass: "Banner__bg"
   }, background), before && (0, _jsxRuntime.createScopedElement)("div", {
@@ -113,20 +113,20 @@ var Banner = function Banner(props) {
     vkuiClass: "Banner__actions"
   }, actions)), !!asideMode && (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "Banner__aside"
-  }, asideMode === 'expand' && (0, _jsxRuntime.createScopedElement)(_icons.Icon24Chevron, null), asideMode === 'dismiss' && (0, _jsxRuntime.createScopedElement)(_IconButton.default, {
+  }, asideMode === "expand" && (0, _jsxRuntime.createScopedElement)(_icons.Icon24Chevron, null), asideMode === "dismiss" && (0, _jsxRuntime.createScopedElement)(_IconButton.default, {
     "aria-label": dismissLabel,
     vkuiClass: "Banner__dismiss",
     onClick: onDismiss,
     hoverMode: "opacity",
     hasActive: false
-  }, (platform === _platform.ANDROID || platform === _platform.VKCOM) && (0, _jsxRuntime.createScopedElement)(_icons.Icon24Cancel, null), platform === _platform.IOS && (mode === 'image' ? (0, _jsxRuntime.createScopedElement)(_icons.Icon24DismissDark, null) : (0, _jsxRuntime.createScopedElement)(_icons.Icon24DismissSubstract, null))))));
+  }, (platform === _platform.ANDROID || platform === _platform.VKCOM) && (0, _jsxRuntime.createScopedElement)(_icons.Icon24Cancel, null), platform === _platform.IOS && (mode === "image" ? (0, _jsxRuntime.createScopedElement)(_icons.Icon24DismissDark, null) : (0, _jsxRuntime.createScopedElement)(_icons.Icon24DismissSubstract, null))))));
 };
 
 Banner.defaultProps = {
-  dismissLabel: 'Скрыть',
-  mode: 'tint',
-  size: 's',
-  imageTheme: 'dark'
+  dismissLabel: "Скрыть",
+  mode: "tint",
+  size: "s",
+  imageTheme: "dark"
 };
 var _default = Banner;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"names":["BannerHeader","size","restProps","BannerSubheader","Banner","props","platform","mode","imageTheme","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","IOS","React","Children","count","ANDROID","VKCOM","defaultProps"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { HasComponent } from '../../types';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { ANDROID, IOS, VKCOM } from '../../lib/platform';\nimport { hasReactNode } from '../../lib/utils';\nimport { Icon24Chevron, Icon24DismissSubstract, Icon24DismissDark, Icon24Cancel } from '@vkontakte/icons';\nimport Tappable from '../Tappable/Tappable';\nimport IconButton from '../IconButton/IconButton';\nimport Headline from '../Typography/Headline/Headline';\nimport Subhead from '../Typography/Subhead/Subhead';\nimport Text from '../Typography/Text/Text';\nimport Title from '../Typography/Title/Title';\nimport './Banner.css';\n\nexport interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  asideMode?: 'dismiss' | 'expand';\n  /**\n   * Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * `aria-label` для кнопки при `asideMode=\"dismiss\". Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера. <br />\n   * Это свойство следует использовать без указания `header` и `subheader`.\n   */\n  text?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки, отображаемые в баннере.\n   *\n   * - В режиме `tint` или в `image` со светлым фоном рекомендуется использовать только `<Button mode=\"primary\" />` или `<Button mode=\"tertiary\" hasHover={false} />`.\n   * - В режиме `image` с тёмным фоном – `<Button mode=\"overlay_primary\" />`.\n   */\n  actions?: React.ReactNode;\n}\n\ntype BannerTypographyProps = Pick<BannerProps, 'size'> & HasComponent;\n\nconst BannerHeader: React.FC<BannerTypographyProps> = ({ size, ...restProps }) => {\n  return size === 'm'\n    ? <Title level=\"2\" weight=\"medium\" {...restProps} />\n    : <Headline weight=\"medium\" {...restProps} />;\n};\n\nconst BannerSubheader: React.FC<BannerTypographyProps> = ({ size, ...restProps }) => {\n  return size === 'm'\n    ? <Text weight=\"regular\" {...restProps} />\n    : <Subhead weight=\"regular\" {...restProps} />;\n};\n\nconst Banner: React.FC<BannerProps> = (props: BannerProps) => {\n  const platform = usePlatform();\n  const {\n    mode, imageTheme, size, before, asideMode, header, subheader, text, children, background, actions,\n    onDismiss, dismissLabel,\n    ...restProps\n  } = props;\n\n  return (\n    <section\n      {...restProps}\n      vkuiClass={classNames(\n        getClassName('Banner', platform),\n        `Banner--md-${mode}`,\n        `Banner--sz-${size}`,\n        {\n          'Banner--inverted': mode === 'image' && imageTheme === 'dark',\n        },\n      )}\n    >\n      <Tappable\n        vkuiClass=\"Banner__in\"\n        activeMode={platform === IOS ? 'opacity' : 'background'}\n        disabled={asideMode !== 'expand'}\n        role={asideMode === 'expand' ? 'button' : null}\n      >\n        {mode === 'image' && background &&\n          <div aria-hidden=\"true\" vkuiClass=\"Banner__bg\">\n            {background}\n          </div>\n        }\n\n        {before && <div vkuiClass=\"Banner__before\">{before}</div>}\n\n        <div vkuiClass=\"Banner__content\">\n          {hasReactNode(header) && (\n            <BannerHeader size={size} Component=\"span\" vkuiClass=\"Banner__header\">{header}</BannerHeader>\n          )}\n          {hasReactNode(subheader) && (\n            <BannerSubheader Component=\"span\" size={size} vkuiClass=\"Banner__subheader\">{subheader}</BannerSubheader>\n          )}\n          {hasReactNode(text) && <Text weight=\"regular\" vkuiClass=\"Banner__text\">{text}</Text>}\n          {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n            <div vkuiClass=\"Banner__actions\">{actions}</div>\n          )}\n        </div>\n\n        {!!asideMode && (\n          <div vkuiClass=\"Banner__aside\">\n            {asideMode === 'expand' && <Icon24Chevron />}\n\n            {asideMode === 'dismiss' && (\n              <IconButton\n                aria-label={dismissLabel}\n                vkuiClass=\"Banner__dismiss\"\n                onClick={onDismiss}\n                hoverMode=\"opacity\"\n                hasActive={false}\n              >\n                {(platform === ANDROID || platform === VKCOM) && <Icon24Cancel />}\n                {platform === IOS && (mode === 'image' ? <Icon24DismissDark /> : <Icon24DismissSubstract />)}\n              </IconButton>\n            )}\n          </div>\n        )}\n      </Tappable>\n    </section>\n  );\n};\n\nBanner.defaultProps = {\n  dismissLabel: 'Скрыть',\n  mode: 'tint',\n  size: 's',\n  imageTheme: 'dark',\n};\n\nexport default Banner;\n"],"file":"Banner.js"}
+{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"names":["BannerHeader","size","restProps","BannerSubheader","Banner","props","platform","mode","imageTheme","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","IOS","React","Children","count","ANDROID","VKCOM","defaultProps"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { HasComponent } from \"../../types\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { ANDROID, IOS, VKCOM } from \"../../lib/platform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport {\n  Icon24Chevron,\n  Icon24DismissSubstract,\n  Icon24DismissDark,\n  Icon24Cancel,\n} from \"@vkontakte/icons\";\nimport Tappable from \"../Tappable/Tappable\";\nimport IconButton from \"../IconButton/IconButton\";\nimport Headline from \"../Typography/Headline/Headline\";\nimport Subhead from \"../Typography/Subhead/Subhead\";\nimport Text from \"../Typography/Text/Text\";\nimport Title from \"../Typography/Title/Title\";\nimport \"./Banner.css\";\n\nexport interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Тип баннера.\n   */\n  mode?: \"tint\" | \"image\";\n  size?: \"s\" | \"m\";\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  asideMode?: \"dismiss\" | \"expand\";\n  /**\n   * Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * `aria-label` для кнопки при `asideMode=\"dismiss\". Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера. <br />\n   * Это свойство следует использовать без указания `header` и `subheader`.\n   */\n  text?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: \"light\" | \"dark\";\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки, отображаемые в баннере.\n   *\n   * - В режиме `tint` или в `image` со светлым фоном рекомендуется использовать только `<Button mode=\"primary\" />` или `<Button mode=\"tertiary\" hasHover={false} />`.\n   * - В режиме `image` с тёмным фоном – `<Button mode=\"overlay_primary\" />`.\n   */\n  actions?: React.ReactNode;\n}\n\ntype BannerTypographyProps = Pick<BannerProps, \"size\"> & HasComponent;\n\nconst BannerHeader: React.FC<BannerTypographyProps> = ({\n  size,\n  ...restProps\n}) => {\n  return size === \"m\" ? (\n    <Title level=\"2\" weight=\"medium\" {...restProps} />\n  ) : (\n    <Headline weight=\"medium\" {...restProps} />\n  );\n};\n\nconst BannerSubheader: React.FC<BannerTypographyProps> = ({\n  size,\n  ...restProps\n}) => {\n  return size === \"m\" ? (\n    <Text weight=\"regular\" {...restProps} />\n  ) : (\n    <Subhead weight=\"regular\" {...restProps} />\n  );\n};\n\nconst Banner: React.FC<BannerProps> = (props: BannerProps) => {\n  const platform = usePlatform();\n  const {\n    mode,\n    imageTheme,\n    size,\n    before,\n    asideMode,\n    header,\n    subheader,\n    text,\n    children,\n    background,\n    actions,\n    onDismiss,\n    dismissLabel,\n    ...restProps\n  } = props;\n\n  return (\n    <section\n      {...restProps}\n      vkuiClass={classNames(\n        getClassName(\"Banner\", platform),\n        `Banner--md-${mode}`,\n        `Banner--sz-${size}`,\n        {\n          \"Banner--inverted\": mode === \"image\" && imageTheme === \"dark\",\n        }\n      )}\n    >\n      <Tappable\n        vkuiClass=\"Banner__in\"\n        activeMode={platform === IOS ? \"opacity\" : \"background\"}\n        disabled={asideMode !== \"expand\"}\n        role={asideMode === \"expand\" ? \"button\" : null}\n      >\n        {mode === \"image\" && background && (\n          <div aria-hidden=\"true\" vkuiClass=\"Banner__bg\">\n            {background}\n          </div>\n        )}\n\n        {before && <div vkuiClass=\"Banner__before\">{before}</div>}\n\n        <div vkuiClass=\"Banner__content\">\n          {hasReactNode(header) && (\n            <BannerHeader\n              size={size}\n              Component=\"span\"\n              vkuiClass=\"Banner__header\"\n            >\n              {header}\n            </BannerHeader>\n          )}\n          {hasReactNode(subheader) && (\n            <BannerSubheader\n              Component=\"span\"\n              size={size}\n              vkuiClass=\"Banner__subheader\"\n            >\n              {subheader}\n            </BannerSubheader>\n          )}\n          {hasReactNode(text) && (\n            <Text weight=\"regular\" vkuiClass=\"Banner__text\">\n              {text}\n            </Text>\n          )}\n          {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n            <div vkuiClass=\"Banner__actions\">{actions}</div>\n          )}\n        </div>\n\n        {!!asideMode && (\n          <div vkuiClass=\"Banner__aside\">\n            {asideMode === \"expand\" && <Icon24Chevron />}\n\n            {asideMode === \"dismiss\" && (\n              <IconButton\n                aria-label={dismissLabel}\n                vkuiClass=\"Banner__dismiss\"\n                onClick={onDismiss}\n                hoverMode=\"opacity\"\n                hasActive={false}\n              >\n                {(platform === ANDROID || platform === VKCOM) && (\n                  <Icon24Cancel />\n                )}\n                {platform === IOS &&\n                  (mode === \"image\" ? (\n                    <Icon24DismissDark />\n                  ) : (\n                    <Icon24DismissSubstract />\n                  ))}\n              </IconButton>\n            )}\n          </div>\n        )}\n      </Tappable>\n    </section>\n  );\n};\n\nBanner.defaultProps = {\n  dismissLabel: \"Скрыть\",\n  mode: \"tint\",\n  size: \"s\",\n  imageTheme: \"dark\",\n};\n\nexport default Banner;\n"],"file":"Banner.js"}

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

@@ -1,16 +1,20 @@
-import * as React from 'react';
-import { TappableProps } from '../Tappable/Tappable';
-import { HasAlign } from '../../types';
-import './Button.css';
+import * as React from "react";
+import { TappableProps } from "../Tappable/Tappable";
+import { HasAlign } from "../../types";
+import "./Button.css";
 export interface VKUIButtonProps extends HasAlign {
-    mode?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'commerce' | 'destructive' | 'overlay_primary' | 'overlay_secondary' | 'overlay_outline';
-    size?: 's' | 'm' | 'l';
+    /**
+     Значения `commerce`, `destructive`, `overlay_...` будут упразднены в 5.0.0
+     */
+    mode?: "primary" | "secondary" | "tertiary" | "outline" | "commerce" | "destructive" | "overlay_primary" | "overlay_secondary" | "overlay_outline";
+    appearance?: "accent" | "positive" | "negative" | "neutral" | "overlay";
+    size?: "s" | "m" | "l";
     stretched?: boolean;
     before?: React.ReactNode;
     after?: React.ReactNode;
     loading?: boolean;
 }
-export interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProps {
+export interface ButtonProps extends Omit<TappableProps, "size">, VKUIButtonProps {
 }
 declare const _default: React.FC<ButtonProps>;
 export default _default;