@vkontakte/vkui 5.0.3 → 5.1.2

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

@@ -1 +1 @@
-.vkuiBaseGallery{overflow:hidden;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vkuiBaseGallery__viewport{height:100%;margin:0;position:relative}.vkuiBaseGallery--mode-center .vkuiBaseGallery__viewport{margin:0 auto}.vkuiBaseGallery__layer{align-items:stretch;display:flex;height:100%;min-height:100px;width:100%}.vkuiBaseGallery--draggable .vkuiBaseGallery__layer{cursor:-webkit-grab;cursor:grab}.vkuiBaseGallery__layer:empty{min-height:0}.vkuiBaseGallery__slide{flex:0 0 auto;max-width:100%;overflow:hidden;width:100%}.vkuiBaseGallery--custom-width .vkuiBaseGallery__slide{width:auto}.vkuiBaseGallery__slide>*{min-height:100%;width:100%}.vkuiBaseGallery__bullets{align-items:center;bottom:10px;display:flex;height:6px;justify-content:center;left:0;position:absolute;width:100%}.vkuiBaseGallery__bullets--dark .vkuiBaseGallery__bullet{background-color:var(--vkui--color_icon_primary_invariably)}.vkuiBaseGallery__bullets--light .vkuiBaseGallery__bullet{background-color:var(--vkui--color_icon_contrast)}.vkuiBaseGallery__bullet{border-radius:50%;height:6px;margin:0 3px;opacity:var(--vkui--opacity_disable_accessibility);width:6px}.vkuiBaseGallery__bullet--active{opacity:1}
+.vkuiBaseGallery{overflow:hidden;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vkuiBaseGallery__viewport{height:100%;margin:0;position:relative}.vkuiBaseGallery--align-center .vkuiBaseGallery__viewport{margin:0 auto}.vkuiBaseGallery__layer{align-items:stretch;display:flex;height:100%;min-height:100px;width:100%}.vkuiBaseGallery--draggable .vkuiBaseGallery__layer{cursor:-webkit-grab;cursor:grab}.vkuiBaseGallery__layer:empty{min-height:0}.vkuiBaseGallery__slide{flex:0 0 auto;max-width:100%;overflow:hidden;width:100%}.vkuiBaseGallery--custom-width .vkuiBaseGallery__slide{width:auto}.vkuiBaseGallery__slide>*{min-height:100%;width:100%}.vkuiBaseGallery__bullets{align-items:center;bottom:10px;display:flex;height:6px;justify-content:center;left:0;position:absolute;width:100%}.vkuiBaseGallery__bullets--dark .vkuiBaseGallery__bullet{background-color:#2c2d2e;background-color:var(--vkui--color_icon_primary_invariably)}.vkuiBaseGallery__bullets--light .vkuiBaseGallery__bullet{background-color:#fff;background-color:var(--vkui--color_icon_contrast)}.vkuiBaseGallery__bullet{border-radius:50%;height:6px;margin:0 3px;opacity:.64;opacity:var(--vkui--opacity_disable_accessibility);width:6px}.vkuiBaseGallery__bullet--active{opacity:1}

package/dist/cssm/components/BaseGallery/helpers.d.ts

@@ -1,8 +1,8 @@
-import { LayoutState } from "./types";
-import { HasAlign } from "../../types";
+import { LayoutState } from './types';
+import { HasAlign } from '../../types';
 interface CalcMin extends Partial<LayoutState> {
     isCenterWithCustomWidth: boolean;
-    align: HasAlign["align"];
+    align: HasAlign['align'];
 }
 export declare const calcMin: ({ containerWidth, layerWidth, slides, viewportOffsetWidth, align, isCenterWithCustomWidth, }: CalcMin) => number | undefined;
 interface CalcMax extends Partial<LayoutState> {

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

@@ -10,11 +10,11 @@ export var calcMin = function calcMin(_ref) {
     align = _ref.align,
     isCenterWithCustomWidth = _ref.isCenterWithCustomWidth;
   switch (align) {
-    case "left":
+    case 'left':
       return containerWidth - layerWidth;
-    case "right":
+    case 'right':
       return viewportOffsetWidth - layerWidth;
-    case "center":
+    case 'center':
       if (isCenterWithCustomWidth && slides.length) {
         var _slides = slides[slides.length - 1],
           coordX = _slides.coordX,

package/dist/cssm/components/BaseGallery/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","names":["calcMin","containerWidth","layerWidth","slides","viewportOffsetWidth","align","isCenterWithCustomWidth","length","coordX","width","undefined","calcMax"],"sources":["../../../../src/components/BaseGallery/helpers.ts"],"sourcesContent":["import { LayoutState } from \"./types\";\nimport { HasAlign } from \"../../types\";\n\ninterface CalcMin extends Partial<LayoutState> {\n  isCenterWithCustomWidth: boolean;\n  align: HasAlign[\"align\"];\n}\n\nexport const calcMin = ({\n  containerWidth = 0,\n  layerWidth = 0,\n  slides = [],\n  viewportOffsetWidth = 0,\n  align,\n  isCenterWithCustomWidth,\n}: CalcMin) => {\n  switch (align) {\n    case \"left\":\n      return containerWidth - layerWidth;\n    case \"right\":\n      return viewportOffsetWidth - layerWidth;\n    case \"center\":\n      if (isCenterWithCustomWidth && slides.length) {\n        const { coordX, width } = slides[slides.length - 1];\n        return viewportOffsetWidth / 2 - coordX - width / 2;\n      } else {\n        return (\n          viewportOffsetWidth -\n          (containerWidth - viewportOffsetWidth) / 2 -\n          layerWidth\n        );\n      }\n  }\n  return undefined;\n};\n\ninterface CalcMax extends Partial<LayoutState> {\n  isCenterWithCustomWidth: boolean;\n}\n\nexport const calcMax = ({\n  slides = [],\n  viewportOffsetWidth = 0,\n  isCenterWithCustomWidth,\n}: CalcMax) => {\n  if (isCenterWithCustomWidth && slides.length) {\n    const { width, coordX } = slides[0];\n    return viewportOffsetWidth / 2 - coordX - width / 2;\n  }\n  return 0;\n};\n"],"mappings":"AAQA,OAAO,IAAMA,OAAO,GAAG,SAAVA,OAAO,OAOL;EAAA,+BANbC,cAAc;IAAdA,cAAc,oCAAG,CAAC;IAAA,uBAClBC,UAAU;IAAVA,UAAU,gCAAG,CAAC;IAAA,mBACdC,MAAM;IAANA,MAAM,4BAAG,EAAE;IAAA,6BACXC,mBAAmB;IAAnBA,mBAAmB,sCAAG,CAAC;IACvBC,KAAK,QAALA,KAAK;IACLC,uBAAuB,QAAvBA,uBAAuB;EAEvB,QAAQD,KAAK;IACX,KAAK,MAAM;MACT,OAAOJ,cAAc,GAAGC,UAAU;IACpC,KAAK,OAAO;MACV,OAAOE,mBAAmB,GAAGF,UAAU;IACzC,KAAK,QAAQ;MACX,IAAII,uBAAuB,IAAIH,MAAM,CAACI,MAAM,EAAE;QAC5C,cAA0BJ,MAAM,CAACA,MAAM,CAACI,MAAM,GAAG,CAAC,CAAC;UAA3CC,MAAM,WAANA,MAAM;UAAEC,KAAK,WAALA,KAAK;QACrB,OAAOL,mBAAmB,GAAG,CAAC,GAAGI,MAAM,GAAGC,KAAK,GAAG,CAAC;MACrD,CAAC,MAAM;QACL,OACEL,mBAAmB,GACnB,CAACH,cAAc,GAAGG,mBAAmB,IAAI,CAAC,GAC1CF,UAAU;MAEd;EAAC;EAEL,OAAOQ,SAAS;AAClB,CAAC;AAMD,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAO,QAIL;EAAA,yBAHbR,MAAM;IAANA,MAAM,6BAAG,EAAE;IAAA,8BACXC,mBAAmB;IAAnBA,mBAAmB,sCAAG,CAAC;IACvBE,uBAAuB,SAAvBA,uBAAuB;EAEvB,IAAIA,uBAAuB,IAAIH,MAAM,CAACI,MAAM,EAAE;IAC5C,eAA0BJ,MAAM,CAAC,CAAC,CAAC;MAA3BM,KAAK,YAALA,KAAK;MAAED,MAAM,YAANA,MAAM;IACrB,OAAOJ,mBAAmB,GAAG,CAAC,GAAGI,MAAM,GAAGC,KAAK,GAAG,CAAC;EACrD;EACA,OAAO,CAAC;AACV,CAAC"}
+{"version":3,"file":"helpers.js","names":["calcMin","containerWidth","layerWidth","slides","viewportOffsetWidth","align","isCenterWithCustomWidth","length","coordX","width","undefined","calcMax"],"sources":["../../../../src/components/BaseGallery/helpers.ts"],"sourcesContent":["import { LayoutState } from './types';\nimport { HasAlign } from '../../types';\n\ninterface CalcMin extends Partial<LayoutState> {\n  isCenterWithCustomWidth: boolean;\n  align: HasAlign['align'];\n}\n\nexport const calcMin = ({\n  containerWidth = 0,\n  layerWidth = 0,\n  slides = [],\n  viewportOffsetWidth = 0,\n  align,\n  isCenterWithCustomWidth,\n}: CalcMin) => {\n  switch (align) {\n    case 'left':\n      return containerWidth - layerWidth;\n    case 'right':\n      return viewportOffsetWidth - layerWidth;\n    case 'center':\n      if (isCenterWithCustomWidth && slides.length) {\n        const { coordX, width } = slides[slides.length - 1];\n        return viewportOffsetWidth / 2 - coordX - width / 2;\n      } else {\n        return viewportOffsetWidth - (containerWidth - viewportOffsetWidth) / 2 - layerWidth;\n      }\n  }\n  return undefined;\n};\n\ninterface CalcMax extends Partial<LayoutState> {\n  isCenterWithCustomWidth: boolean;\n}\n\nexport const calcMax = ({\n  slides = [],\n  viewportOffsetWidth = 0,\n  isCenterWithCustomWidth,\n}: CalcMax) => {\n  if (isCenterWithCustomWidth && slides.length) {\n    const { width, coordX } = slides[0];\n    return viewportOffsetWidth / 2 - coordX - width / 2;\n  }\n  return 0;\n};\n"],"mappings":"AAQA,OAAO,IAAMA,OAAO,GAAG,SAAVA,OAAO,OAOL;EAAA,+BANbC,cAAc;IAAdA,cAAc,oCAAG,CAAC;IAAA,uBAClBC,UAAU;IAAVA,UAAU,gCAAG,CAAC;IAAA,mBACdC,MAAM;IAANA,MAAM,4BAAG,EAAE;IAAA,6BACXC,mBAAmB;IAAnBA,mBAAmB,sCAAG,CAAC;IACvBC,KAAK,QAALA,KAAK;IACLC,uBAAuB,QAAvBA,uBAAuB;EAEvB,QAAQD,KAAK;IACX,KAAK,MAAM;MACT,OAAOJ,cAAc,GAAGC,UAAU;IACpC,KAAK,OAAO;MACV,OAAOE,mBAAmB,GAAGF,UAAU;IACzC,KAAK,QAAQ;MACX,IAAII,uBAAuB,IAAIH,MAAM,CAACI,MAAM,EAAE;QAC5C,cAA0BJ,MAAM,CAACA,MAAM,CAACI,MAAM,GAAG,CAAC,CAAC;UAA3CC,MAAM,WAANA,MAAM;UAAEC,KAAK,WAALA,KAAK;QACrB,OAAOL,mBAAmB,GAAG,CAAC,GAAGI,MAAM,GAAGC,KAAK,GAAG,CAAC;MACrD,CAAC,MAAM;QACL,OAAOL,mBAAmB,GAAG,CAACH,cAAc,GAAGG,mBAAmB,IAAI,CAAC,GAAGF,UAAU;MACtF;EAAC;EAEL,OAAOQ,SAAS;AAClB,CAAC;AAMD,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAO,QAIL;EAAA,yBAHbR,MAAM;IAANA,MAAM,6BAAG,EAAE;IAAA,8BACXC,mBAAmB;IAAnBA,mBAAmB,sCAAG,CAAC;IACvBE,uBAAuB,SAAvBA,uBAAuB;EAEvB,IAAIA,uBAAuB,IAAIH,MAAM,CAACI,MAAM,EAAE;IAC5C,eAA0BJ,MAAM,CAAC,CAAC,CAAC;MAA3BM,KAAK,YAALA,KAAK;MAAED,MAAM,YAANA,MAAM;IACrB,OAAOJ,mBAAmB,GAAG,CAAC,GAAGI,MAAM,GAAGC,KAAK,GAAG,CAAC;EACrD;EACA,OAAO,CAAC;AACV,CAAC"}

package/dist/cssm/components/BaseGallery/types.d.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { HasAlign, HasRef, HasRootRef } from "../../types";
-import { TouchEvent, TouchEventHandler } from "../Touch/Touch";
-import { HorizontalScrollArrowProps } from "../HorizontalScroll/HorizontalScrollArrow";
+import * as React from 'react';
+import { HasAlign, HasRef, HasRootRef } from '../../types';
+import { TouchEvent, TouchEventHandler } from '../Touch/Touch';
+import { HorizontalScrollArrowProps } from '../HorizontalScroll/HorizontalScrollArrow';
 export interface GallerySlidesState {
     coordX: number;
     width: number;
@@ -21,7 +21,7 @@ export interface LayoutState {
     slides: GallerySlidesState[];
     isFullyVisible: boolean;
 }
-export interface BaseGalleryProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "onDragStart" | "onDragEnd">, HasAlign, HasRootRef<HTMLDivElement>, HasRef<HTMLElement> {
+export interface BaseGalleryProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onDragStart' | 'onDragEnd'>, HasAlign, HasRootRef<HTMLDivElement>, HasRef<HTMLElement> {
     slideWidth?: string | number;
     slideIndex?: number;
     onDragStart?: TouchEventHandler;
@@ -35,9 +35,9 @@ export interface BaseGalleryProps extends Omit<React.HTMLAttributes<HTMLDivEleme
      * Будет вызвано при клике на кнопку-стрелку вправо
      */
     onNextClick?(event: React.MouseEvent): void;
-    bullets?: "dark" | "light" | false;
+    bullets?: 'dark' | 'light' | false;
     isDraggable?: boolean;
     showArrows?: boolean;
     hasPointer?: boolean;
-    arrowSize?: HorizontalScrollArrowProps["size"];
+    arrowSize?: HorizontalScrollArrowProps['size'];
 }

package/dist/cssm/components/BaseGallery/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/BaseGallery/types.ts"],"sourcesContent":["import * as React from \"react\";\nimport { HasAlign, HasRef, HasRootRef } from \"../../types\";\nimport { TouchEvent, TouchEventHandler } from \"../Touch/Touch\";\nimport { HorizontalScrollArrowProps } from \"../HorizontalScroll/HorizontalScrollArrow\";\n\nexport interface GallerySlidesState {\n  coordX: number;\n  width: number;\n}\n\nexport interface ShiftingState {\n  deltaX: number;\n  shiftX: number;\n  animation?: boolean;\n  dragging: boolean;\n}\n\nexport interface LayoutState {\n  containerWidth: number;\n  viewportOffsetWidth: number;\n  layerWidth: number;\n  min?: number;\n  max: number;\n  slides: GallerySlidesState[];\n  isFullyVisible: boolean;\n}\n\nexport interface BaseGalleryProps\n  extends Omit<\n      React.HTMLAttributes<HTMLDivElement>,\n      \"onChange\" | \"onDragStart\" | \"onDragEnd\"\n    >,\n    HasAlign,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLElement> {\n  slideWidth?: string | number;\n  slideIndex?: number;\n  onDragStart?: TouchEventHandler;\n  onDragEnd?(e: TouchEvent, targetIndex: number): void;\n  onChange?(current: number): void;\n  /**\n   * Будет вызвано при клике на кнопку-стрелку влево\n   */\n  onPrevClick?(event: React.MouseEvent): void;\n  /**\n   * Будет вызвано при клике на кнопку-стрелку вправо\n   */\n  onNextClick?(event: React.MouseEvent): void;\n  bullets?: \"dark\" | \"light\" | false;\n  isDraggable?: boolean;\n  showArrows?: boolean;\n  hasPointer?: boolean;\n  arrowSize?: HorizontalScrollArrowProps[\"size\"];\n}\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/BaseGallery/types.ts"],"sourcesContent":["import * as React from 'react';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { TouchEvent, TouchEventHandler } from '../Touch/Touch';\nimport { HorizontalScrollArrowProps } from '../HorizontalScroll/HorizontalScrollArrow';\n\nexport interface GallerySlidesState {\n  coordX: number;\n  width: number;\n}\n\nexport interface ShiftingState {\n  deltaX: number;\n  shiftX: number;\n  animation?: boolean;\n  dragging: boolean;\n}\n\nexport interface LayoutState {\n  containerWidth: number;\n  viewportOffsetWidth: number;\n  layerWidth: number;\n  min?: number;\n  max: number;\n  slides: GallerySlidesState[];\n  isFullyVisible: boolean;\n}\n\nexport interface BaseGalleryProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onDragStart' | 'onDragEnd'>,\n    HasAlign,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLElement> {\n  slideWidth?: string | number;\n  slideIndex?: number;\n  onDragStart?: TouchEventHandler;\n  onDragEnd?(e: TouchEvent, targetIndex: number): void;\n  onChange?(current: number): void;\n  /**\n   * Будет вызвано при клике на кнопку-стрелку влево\n   */\n  onPrevClick?(event: React.MouseEvent): void;\n  /**\n   * Будет вызвано при клике на кнопку-стрелку вправо\n   */\n  onNextClick?(event: React.MouseEvent): void;\n  bullets?: 'dark' | 'light' | false;\n  isDraggable?: boolean;\n  showArrows?: boolean;\n  hasPointer?: boolean;\n  arrowSize?: HorizontalScrollArrowProps['size'];\n}\n"],"mappings":""}

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

@@ -1,16 +1,16 @@
-import * as React from "react";
-import { TappableProps } from "../Tappable/Tappable";
-import { HasAlign } from "../../types";
+import * as React from 'react';
+import { TappableProps } from '../Tappable/Tappable';
+import { HasAlign } from '../../types';
 export interface VKUIButtonProps extends HasAlign {
-    mode?: "primary" | "secondary" | "tertiary" | "outline" | "link";
-    appearance?: "accent" | "positive" | "negative" | "neutral" | "overlay" | "accent-invariable";
-    size?: "s" | "m" | "l";
+    mode?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'link';
+    appearance?: 'accent' | 'positive' | 'negative' | 'neutral' | 'overlay' | 'accent-invariable';
+    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 {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Button

package/dist/cssm/components/Button/Button.js

@@ -1,35 +1,35 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["size", "mode", "appearance", "stretched", "align", "children", "before", "after", "getRootRef", "Component", "loading", "onClick", "stopPropagation", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { Platform } from "../../lib/platform";
-import { Tappable } from "../Tappable/Tappable";
-import { Spinner } from "../Spinner/Spinner";
-import { getSizeYClassName } from "../../helpers/getSizeYClassName";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { usePlatform } from "../../hooks/usePlatform";
+import * as React from 'react';
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { Platform } from '../../lib/platform';
+import { Tappable } from '../Tappable/Tappable';
+import { Spinner } from '../Spinner/Spinner';
+import { getSizeYClassName } from '../../helpers/getSizeYClassName';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { usePlatform } from '../../hooks/usePlatform';
 import "./Button.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/Button
  */
 export var Button = function Button(_ref) {
   var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? "s" : _ref$size,
+    size = _ref$size === void 0 ? 's' : _ref$size,
     _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? "primary" : _ref$mode,
+    mode = _ref$mode === void 0 ? 'primary' : _ref$mode,
     _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? "accent" : _ref$appearance,
+    appearance = _ref$appearance === void 0 ? 'accent' : _ref$appearance,
     _ref$stretched = _ref.stretched,
     stretched = _ref$stretched === void 0 ? false : _ref$stretched,
     _ref$align = _ref.align,
-    align = _ref$align === void 0 ? "center" : _ref$align,
+    align = _ref$align === void 0 ? 'center' : _ref$align,
     children = _ref.children,
     before = _ref.before,
     after = _ref.after,
     getRootRef = _ref.getRootRef,
     _ref$Component = _ref.Component,
-    Component = _ref$Component === void 0 ? "button" : _ref$Component,
+    Component = _ref$Component === void 0 ? 'button' : _ref$Component,
     loading = _ref.loading,
     onClick = _ref.onClick,
     _ref$stopPropagation = _ref.stopPropagation,
@@ -45,25 +45,28 @@ export var Button = function Button(_ref) {
     hoverMode: "vkuiButton--hover",
     activeMode: "vkuiButton--active"
   }, restProps, {
-    Component: restProps.href ? "a" : Component,
+    Component: restProps.href ? 'a' : Component,
     onClick: loading ? undefined : onClick,
     focusVisibleMode: "outside",
     stopPropagation: stopPropagation,
-    className: classNamesString(className, "vkuiButton", styles["Button--size-".concat(size)], styles["Button--mode-".concat(mode)], styles["Button--appearance-".concat(appearance)], styles["Button--align-".concat(align)], getSizeYClassName("vkuiButton", sizeY), platform === Platform.ANDROID && "vkuiButton--android", platform === Platform.IOS && "vkuiButton--ios", stretched && "vkuiButton--stretched", hasIcons && "vkuiButton--with-icon", hasIconOnly && "vkuiButton--singleIcon", loading && "vkuiButton--loading"),
+    className: classNames(className, "vkuiButton", styles["Button--size-".concat(size)], styles["Button--mode-".concat(mode)], styles["Button--appearance-".concat(appearance)], styles["Button--align-".concat(align)], getSizeYClassName("vkuiButton", sizeY), platform === Platform.ANDROID && "vkuiButton--android", platform === Platform.IOS && "vkuiButton--ios", stretched && "vkuiButton--stretched", hasIcons && "vkuiButton--with-icon", hasIconOnly && !stretched && "vkuiButton--singleIcon", loading && "vkuiButton--loading"),
     getRootRef: getRootRef
   }), loading && /*#__PURE__*/React.createElement(Spinner, {
     size: "small",
     className: "vkuiButton__spinner"
   }), /*#__PURE__*/React.createElement("span", {
     className: "vkuiButton__in"
-  }, before && /*#__PURE__*/React.createElement("span", {
+  }, hasReactNode(before) && /*#__PURE__*/React.createElement("span", {
     className: "vkuiButton__before",
-    role: "presentation"
-  }, before), children && /*#__PURE__*/React.createElement("span", {
-    className: "vkuiButton__content"
-  }, children), after && /*#__PURE__*/React.createElement("span", {
+    role: "presentation",
+    "data-testid": process.env.NODE_ENV === 'test' ? 'before' : undefined
+  }, before), hasReactNode(children) && /*#__PURE__*/React.createElement("span", {
+    className: "vkuiButton__content",
+    "data-testid": process.env.NODE_ENV === 'test' ? 'children' : undefined
+  }, children), hasReactNode(after) && /*#__PURE__*/React.createElement("span", {
     className: "vkuiButton__after",
-    role: "presentation"
+    role: "presentation",
+    "data-testid": process.env.NODE_ENV === 'test' ? 'after' : undefined
   }, after)));
 };
 var styles = {

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["React","classNamesString","Platform","Tappable","Spinner","getSizeYClassName","useAdaptivity","usePlatform","Button","size","mode","appearance","stretched","align","children","before","after","getRootRef","Component","loading","onClick","stopPropagation","className","restProps","hasIcons","Boolean","hasIconOnly","sizeY","platform","href","undefined","styles","ANDROID","IOS"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Platform } from \"../../lib/platform\";\nimport { TappableProps, Tappable } from \"../Tappable/Tappable\";\nimport { HasAlign } from \"../../types\";\nimport { Spinner } from \"../Spinner/Spinner\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport styles from \"./Button.module.css\";\n\nexport interface VKUIButtonProps extends HasAlign {\n  mode?: \"primary\" | \"secondary\" | \"tertiary\" | \"outline\" | \"link\";\n  appearance?:\n    | \"accent\"\n    | \"positive\"\n    | \"negative\"\n    | \"neutral\"\n    | \"overlay\"\n    | \"accent-invariable\";\n  size?: \"s\" | \"m\" | \"l\";\n  stretched?: boolean;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  loading?: boolean;\n}\n\nexport interface ButtonProps\n  extends Omit<TappableProps, \"size\">,\n    VKUIButtonProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Button\n */\nexport const Button = ({\n  size = \"s\",\n  mode = \"primary\",\n  appearance = \"accent\",\n  stretched = false,\n  align = \"center\",\n  children,\n  before,\n  after,\n  getRootRef,\n  Component = \"button\",\n  loading,\n  onClick,\n  stopPropagation = true,\n  className,\n  ...restProps\n}: ButtonProps) => {\n  const hasIcons = Boolean(before || after);\n  const hasIconOnly = !children && Boolean(after) !== Boolean(before);\n  const { sizeY } = useAdaptivity();\n  const platform = usePlatform();\n\n  return (\n    <Tappable\n      hoverMode={styles[\"Button--hover\"]}\n      activeMode={styles[\"Button--active\"]}\n      {...restProps}\n      Component={restProps.href ? \"a\" : Component}\n      onClick={loading ? undefined : onClick}\n      focusVisibleMode=\"outside\"\n      stopPropagation={stopPropagation}\n      className={classNamesString(\n        className,\n        styles.Button,\n        styles[`Button--size-${size}`],\n        styles[`Button--mode-${mode}`],\n        styles[`Button--appearance-${appearance}`],\n        styles[`Button--align-${align}`],\n        getSizeYClassName(styles[\"Button\"], sizeY),\n        platform === Platform.ANDROID && styles[`Button--android`],\n        platform === Platform.IOS && styles[`Button--ios`],\n        stretched && styles[\"Button--stretched\"],\n        hasIcons && styles[\"Button--with-icon\"],\n        hasIconOnly && styles[\"Button--singleIcon\"],\n        loading && styles[\"Button--loading\"]\n      )}\n      getRootRef={getRootRef}\n    >\n      {loading && <Spinner size=\"small\" className={styles.Button__spinner} />}\n      <span className={styles.Button__in}>\n        {before && (\n          <span className={styles.Button__before} role=\"presentation\">\n            {before}\n          </span>\n        )}\n        {children && <span className={styles.Button__content}>{children}</span>}\n        {after && (\n          <span className={styles.Button__after} role=\"presentation\">\n            {after}\n          </span>\n        )}\n      </span>\n    </Tappable>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAAwBC,QAAQ,QAAQ,sBAAsB;AAE9D,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,yBAAyB;AAAC;AAuBtD;AACA;AACA;AACA,OAAO,IAAMC,MAAM,GAAG,SAATA,MAAM,OAgBA;EAAA,qBAfjBC,IAAI;IAAJA,IAAI,0BAAG,GAAG;IAAA,iBACVC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAAA,uBAChBC,UAAU;IAAVA,UAAU,gCAAG,QAAQ;IAAA,sBACrBC,SAAS;IAATA,SAAS,+BAAG,KAAK;IAAA,kBACjBC,KAAK;IAALA,KAAK,2BAAG,QAAQ;IAChBC,QAAQ,QAARA,QAAQ;IACRC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IAAA,sBACVC,SAAS;IAATA,SAAS,+BAAG,QAAQ;IACpBC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IAAA,4BACPC,eAAe;IAAfA,eAAe,qCAAG,IAAI;IACtBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGC,OAAO,CAACV,MAAM,IAAIC,KAAK,CAAC;EACzC,IAAMU,WAAW,GAAG,CAACZ,QAAQ,IAAIW,OAAO,CAACT,KAAK,CAAC,KAAKS,OAAO,CAACV,MAAM,CAAC;EACnE,qBAAkBT,aAAa,EAAE;IAAzBqB,KAAK,kBAALA,KAAK;EACb,IAAMC,QAAQ,GAAGrB,WAAW,EAAE;EAE9B,oBACE,oBAAC,QAAQ;IACP,SAAS,qBAA0B;IACnC,UAAU;EAA2B,GACjCgB,SAAS;IACb,SAAS,EAAEA,SAAS,CAACM,IAAI,GAAG,GAAG,GAAGX,SAAU;IAC5C,OAAO,EAAEC,OAAO,GAAGW,SAAS,GAAGV,OAAQ;IACvC,gBAAgB,EAAC,SAAS;IAC1B,eAAe,EAAEC,eAAgB;IACjC,SAAS,EAAEpB,gBAAgB,CACzBqB,SAAS,gBAETS,MAAM,wBAAiBtB,IAAI,EAAG,EAC9BsB,MAAM,wBAAiBrB,IAAI,EAAG,EAC9BqB,MAAM,8BAAuBpB,UAAU,EAAG,EAC1CoB,MAAM,yBAAkBlB,KAAK,EAAG,EAChCR,iBAAiB,eAAmBsB,KAAK,CAAC,EAC1CC,QAAQ,KAAK1B,QAAQ,CAAC8B,OAAO,yBAA6B,EAC1DJ,QAAQ,KAAK1B,QAAQ,CAAC+B,GAAG,qBAAyB,EAClDrB,SAAS,2BAA+B,EACxCY,QAAQ,2BAA+B,EACvCE,WAAW,4BAAgC,EAC3CP,OAAO,yBAA6B,CACpC;IACF,UAAU,EAAEF;EAAW,IAEtBE,OAAO,iBAAI,oBAAC,OAAO;IAAC,IAAI,EAAC,OAAO;IAAC,SAAS;EAAyB,EAAG,eACvE;IAAM,SAAS;EAAoB,GAChCJ,MAAM,iBACL;IAAM,SAAS,sBAAwB;IAAC,IAAI,EAAC;EAAc,GACxDA,MAAM,CAEV,EACAD,QAAQ,iBAAI;IAAM,SAAS;EAAyB,GAAEA,QAAQ,CAAQ,EACtEE,KAAK,iBACJ;IAAM,SAAS,qBAAuB;IAAC,IAAI,EAAC;EAAc,GACvDA,KAAK,CAET,CACI,CACE;AAEf,CAAC;AAAC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"Button.js","names":["React","classNames","hasReactNode","Platform","Tappable","Spinner","getSizeYClassName","useAdaptivity","usePlatform","Button","size","mode","appearance","stretched","align","children","before","after","getRootRef","Component","loading","onClick","stopPropagation","className","restProps","hasIcons","Boolean","hasIconOnly","sizeY","platform","href","undefined","styles","ANDROID","IOS","process","env","NODE_ENV"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { TappableProps, Tappable } from '../Tappable/Tappable';\nimport { HasAlign } from '../../types';\nimport { Spinner } from '../Spinner/Spinner';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport styles from './Button.module.css';\n\nexport interface VKUIButtonProps extends HasAlign {\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'link';\n  appearance?: 'accent' | 'positive' | 'negative' | 'neutral' | 'overlay' | 'accent-invariable';\n  size?: 's' | 'm' | 'l';\n  stretched?: boolean;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  loading?: boolean;\n}\n\nexport interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Button\n */\nexport const Button = ({\n  size = 's',\n  mode = 'primary',\n  appearance = 'accent',\n  stretched = false,\n  align = 'center',\n  children,\n  before,\n  after,\n  getRootRef,\n  Component = 'button',\n  loading,\n  onClick,\n  stopPropagation = true,\n  className,\n  ...restProps\n}: ButtonProps) => {\n  const hasIcons = Boolean(before || after);\n  const hasIconOnly = !children && Boolean(after) !== Boolean(before);\n  const { sizeY } = useAdaptivity();\n  const platform = usePlatform();\n\n  return (\n    <Tappable\n      hoverMode={styles['Button--hover']}\n      activeMode={styles['Button--active']}\n      {...restProps}\n      Component={restProps.href ? 'a' : Component}\n      onClick={loading ? undefined : onClick}\n      focusVisibleMode=\"outside\"\n      stopPropagation={stopPropagation}\n      className={classNames(\n        className,\n        styles.Button,\n        styles[`Button--size-${size}`],\n        styles[`Button--mode-${mode}`],\n        styles[`Button--appearance-${appearance}`],\n        styles[`Button--align-${align}`],\n        getSizeYClassName(styles['Button'], sizeY),\n        platform === Platform.ANDROID && styles[`Button--android`],\n        platform === Platform.IOS && styles[`Button--ios`],\n        stretched && styles['Button--stretched'],\n        hasIcons && styles['Button--with-icon'],\n        hasIconOnly && !stretched && styles['Button--singleIcon'],\n        loading && styles['Button--loading'],\n      )}\n      getRootRef={getRootRef}\n    >\n      {loading && <Spinner size=\"small\" className={styles.Button__spinner} />}\n      <span className={styles.Button__in}>\n        {hasReactNode(before) && (\n          <span\n            className={styles.Button__before}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'before' : undefined}\n          >\n            {before}\n          </span>\n        )}\n        {hasReactNode(children) && (\n          <span\n            className={styles.Button__content}\n            data-testid={process.env.NODE_ENV === 'test' ? 'children' : undefined}\n          >\n            {children}\n          </span>\n        )}\n        {hasReactNode(after) && (\n          <span\n            className={styles.Button__after}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'after' : undefined}\n          >\n            {after}\n          </span>\n        )}\n      </span>\n    </Tappable>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAAwBC,QAAQ,QAAQ,sBAAsB;AAE9D,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,yBAAyB;AAAC;AAetD;AACA;AACA;AACA,OAAO,IAAMC,MAAM,GAAG,SAATA,MAAM,OAgBA;EAAA,qBAfjBC,IAAI;IAAJA,IAAI,0BAAG,GAAG;IAAA,iBACVC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAAA,uBAChBC,UAAU;IAAVA,UAAU,gCAAG,QAAQ;IAAA,sBACrBC,SAAS;IAATA,SAAS,+BAAG,KAAK;IAAA,kBACjBC,KAAK;IAALA,KAAK,2BAAG,QAAQ;IAChBC,QAAQ,QAARA,QAAQ;IACRC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IAAA,sBACVC,SAAS;IAATA,SAAS,+BAAG,QAAQ;IACpBC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IAAA,4BACPC,eAAe;IAAfA,eAAe,qCAAG,IAAI;IACtBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGC,OAAO,CAACV,MAAM,IAAIC,KAAK,CAAC;EACzC,IAAMU,WAAW,GAAG,CAACZ,QAAQ,IAAIW,OAAO,CAACT,KAAK,CAAC,KAAKS,OAAO,CAACV,MAAM,CAAC;EACnE,qBAAkBT,aAAa,EAAE;IAAzBqB,KAAK,kBAALA,KAAK;EACb,IAAMC,QAAQ,GAAGrB,WAAW,EAAE;EAE9B,oBACE,oBAAC,QAAQ;IACP,SAAS,qBAA0B;IACnC,UAAU;EAA2B,GACjCgB,SAAS;IACb,SAAS,EAAEA,SAAS,CAACM,IAAI,GAAG,GAAG,GAAGX,SAAU;IAC5C,OAAO,EAAEC,OAAO,GAAGW,SAAS,GAAGV,OAAQ;IACvC,gBAAgB,EAAC,SAAS;IAC1B,eAAe,EAAEC,eAAgB;IACjC,SAAS,EAAErB,UAAU,CACnBsB,SAAS,gBAETS,MAAM,wBAAiBtB,IAAI,EAAG,EAC9BsB,MAAM,wBAAiBrB,IAAI,EAAG,EAC9BqB,MAAM,8BAAuBpB,UAAU,EAAG,EAC1CoB,MAAM,yBAAkBlB,KAAK,EAAG,EAChCR,iBAAiB,eAAmBsB,KAAK,CAAC,EAC1CC,QAAQ,KAAK1B,QAAQ,CAAC8B,OAAO,yBAA6B,EAC1DJ,QAAQ,KAAK1B,QAAQ,CAAC+B,GAAG,qBAAyB,EAClDrB,SAAS,2BAA+B,EACxCY,QAAQ,2BAA+B,EACvCE,WAAW,IAAI,CAACd,SAAS,4BAAgC,EACzDO,OAAO,yBAA6B,CACpC;IACF,UAAU,EAAEF;EAAW,IAEtBE,OAAO,iBAAI,oBAAC,OAAO;IAAC,IAAI,EAAC,OAAO;IAAC,SAAS;EAAyB,EAAG,eACvE;IAAM,SAAS;EAAoB,GAChClB,YAAY,CAACc,MAAM,CAAC,iBACnB;IACE,SAAS,sBAAwB;IACjC,IAAI,EAAC,cAAc;IACnB,eAAamB,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,MAAM,GAAG,QAAQ,GAAGN;EAAU,GAEnEf,MAAM,CAEV,EACAd,YAAY,CAACa,QAAQ,CAAC,iBACrB;IACE,SAAS,uBAAyB;IAClC,eAAaoB,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,MAAM,GAAG,UAAU,GAAGN;EAAU,GAErEhB,QAAQ,CAEZ,EACAb,YAAY,CAACe,KAAK,CAAC,iBAClB;IACE,SAAS,qBAAuB;IAChC,IAAI,EAAC,cAAc;IACnB,eAAakB,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,MAAM,GAAG,OAAO,GAAGN;EAAU,GAElEd,KAAK,CAET,CACI,CACE;AAEf,CAAC;AAAC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

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

@@ -1,37 +1 @@
-.vkuiButton{border:none;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;display:inline-block;font-family:var(--vkui--font_family_base);margin:0;max-width:100%;min-height:var(--vkui--size_button_small_height--compact);min-width:var(--vkui--size_button_minimum_width--regular);padding:0;position:relative;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vkuiButton--loading{cursor:progress}.vkuiButton--singleIcon{min-width:var(--vkui--size_button_small_height--compact)}.vkuiButton--sizeY-regular.vkuiButton--singleIcon{width:var(--vkui--size_button_small_height--regular)}@media (max-width:767px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiButton--sizeY-none.vkuiButton--singleIcon{width:var(--vkui--size_button_small_height--regular)}}.vkuiButton--stretched{display:block;flex-basis:0;flex-grow:1;width:100%}.vkuiButton__in{align-items:center;box-sizing:border-box;display:flex;font-family:var(--vkui--font_family_base);justify-content:center;min-height:inherit;text-align:center;width:100%}.vkuiButton--align-left .vkuiButton__in{justify-content:flex-start;text-align:left}.vkuiButton--align-right .vkuiButton__in{justify-content:flex-end;text-align:right}.vkuiButton[disabled]{opacity:var(--vkui--opacity_disable)}.vkuiButton--mode-outline[disabled]:not(.vkuiButton--appearance-overlay),.vkuiButton--mode-primary[disabled]:not(.vkuiButton--appearance-overlay):not(.vkuiButton--appearance-negative):not(.vkuiButton--appearance-positive),.vkuiButton--mode-secondary[disabled]:not(.vkuiButton--appearance-overlay),.vkuiButton--mode-tertiary[disabled]:not(.vkuiButton--appearance-overlay){opacity:.64}.vkuiButton__content{font-weight:var(--vkui--font_weight_accent2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiButton--size-s .vkuiButton__content:first-child{padding-left:var(--vkui--size_button_base_small_padding_horizontal--regular)}.vkuiButton--size-s .vkuiButton__after,.vkuiButton--size-s .vkuiButton__content:last-child{padding-right:var(
-    --vkui--size_button_base_small_padding_horizontal--regular
-  )}.vkuiButton--size-m .vkuiButton__content:first-child{padding-left:var(
-    --vkui--size_button_base_medium_padding_horizontal--regular
-  )}.vkuiButton--size-m .vkuiButton__after,.vkuiButton--size-m .vkuiButton__content:last-child{padding-right:var(
-    --vkui--size_button_base_medium_padding_horizontal--regular
-  )}.vkuiButton--size-l .vkuiButton__content:first-child{padding-left:var(--vkui--size_button_base_large_padding_horizontal--regular)}.vkuiButton--size-l .vkuiButton__after,.vkuiButton--size-l .vkuiButton__content:last-child{padding-right:var(
-    --vkui--size_button_base_large_padding_horizontal--regular
-  )}.vkuiButton--size-s .vkuiButton__before{padding-left:var(
-    --vkui--size_button_base_small_padding_horizontal_icon--regular
-  )}.vkuiButton--size-m .vkuiButton__before{padding-left:var(
-    --vkui--size_button_base_medium_padding_horizontal_icon--regular
-  )}.vkuiButton--size-l .vkuiButton__before{padding-left:var(
-    --vkui--size_button_base_large_padding_horizontal_icon--regular
-  )}.vkuiButton--mode-tertiary.vkuiButton--size-s .vkuiButton__content:first-child{padding-left:var(
-    --vkui--size_button_tertiary_small_padding_horizontal--regular
-  )}.vkuiButton--mode-tertiary.vkuiButton--size-s .vkuiButton__after,.vkuiButton--mode-tertiary.vkuiButton--size-s .vkuiButton__content:last-child{padding-right:var(
-    --vkui--size_button_tertiary_small_padding_horizontal--regular
-  )}.vkuiButton--mode-tertiary.vkuiButton--size-m .vkuiButton__content:first-child{padding-left:var(
-    --vkui--size_button_tertiary_medium_padding_horizontal--regular
-  )}.vkuiButton--mode-tertiary.vkuiButton--size-m .vkuiButton__after,.vkuiButton--mode-tertiary.vkuiButton--size-m .vkuiButton__content:last-child{padding-right:var(
-    --vkui--size_button_tertiary_medium_padding_horizontal--regular
-  )}.vkuiButton--mode-tertiary.vkuiButton--size-l .vkuiButton__content:first-child{padding-left:var(
-    --vkui--size_button_tertiary_large_padding_horizontal--regular
-  )}.vkuiButton--mode-tertiary.vkuiButton--size-l .vkuiButton__after,.vkuiButton--mode-tertiary.vkuiButton--size-l .vkuiButton__content:last-child{padding-right:var(
-    --vkui--size_button_tertiary_large_padding_horizontal--regular
-  )}.vkuiButton--mode-tertiary.vkuiButton--size-s .vkuiButton__before{padding-left:var(
-    --vkui--size_button_tertiary_small_padding_horizontal_icon--regular
-  )}.vkuiButton--mode-tertiary.vkuiButton--size-m .vkuiButton__before{padding-left:var(
-    --vkui--size_button_tertiary_medium_padding_horizontal_icon--regular
-  )}.vkuiButton--mode-tertiary.vkuiButton--size-l .vkuiButton__before{padding-left:var(
-    --vkui--size_button_tertiary_large_padding_horizontal_icon--regular
-  )}.vkuiButton--mode-tertiary.vkuiButton--singleIcon .vkuiButton__after,.vkuiButton--mode-tertiary.vkuiButton--singleIcon .vkuiButton__before,.vkuiButton--singleIcon .vkuiButton__after,.vkuiButton--singleIcon .vkuiButton__before{margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}.vkuiButton--mode-link{background:none;min-width:auto}.vkuiButton--mode-link .vkuiButton__after,.vkuiButton--mode-link .vkuiButton__before,.vkuiButton--mode-link .vkuiButton__content:first-child,.vkuiButton--mode-link .vkuiButton__content:last-child{padding-left:0;padding-right:0}.vkuiButton__spinner{bottom:0;left:0;position:absolute;right:0;top:0}.vkuiButton__spinner+.vkuiButton__in{visibility:hidden}.vkuiButton--mode-primary.vkuiButton--appearance-accent{background-color:var(--vkui--color_background_accent_themed)}.vkuiButton--mode-primary.vkuiButton--appearance-accent.vkuiButton--hover{background-color:var(--vkui--color_background_accent_themed--hover)}.vkuiButton--mode-primary.vkuiButton--appearance-accent.vkuiButton--active{background-color:var(--vkui--color_background_accent_themed--active)}.vkuiButton--mode-primary.vkuiButton--appearance-positive{background-color:var(--vkui--color_background_positive)}.vkuiButton--mode-primary.vkuiButton--appearance-positive.vkuiButton--hover{background-color:var(--vkui--color_background_positive--hover)}.vkuiButton--mode-primary.vkuiButton--appearance-positive.vkuiButton--active{background-color:var(--vkui--color_background_positive--active)}.vkuiButton--mode-primary.vkuiButton--appearance-negative{background-color:var(--vkui--color_background_negative)}.vkuiButton--mode-primary.vkuiButton--appearance-negative.vkuiButton--hover{background-color:var(--vkui--color_background_negative--hover)}.vkuiButton--mode-primary.vkuiButton--appearance-negative.vkuiButton--active{background-color:var(--vkui--color_background_negative--active)}.vkuiButton--mode-primary.vkuiButton--appearance-neutral{background-color:var(--vkui--color_background_secondary)}.vkuiButton--mode-primary.vkuiButton--appearance-neutral.vkuiButton--hover{background-color:var(--vkui--color_background_secondary--hover)}.vkuiButton--mode-primary.vkuiButton--appearance-neutral.vkuiButton--active{background-color:var(--vkui--color_background_secondary--active)}.vkuiButton--mode-primary.vkuiButton--appearance-accent-invariable{background-color:var(--vkui--color_background_accent)}.vkuiButton--mode-primary.vkuiButton--appearance-accent-invariable.vkuiButton--hover{background-color:var(--vkui--color_background_accent--hover)}.vkuiButton--mode-primary.vkuiButton--appearance-accent-invariable.vkuiButton--active{background-color:var(--vkui--color_background_accent--active)}.vkuiButton--mode-secondary{background-color:var(--vkui--color_background_secondary_alpha)}.vkuiButton--mode-secondary.vkuiButton--hover{background-color:var(--vkui--color_background_secondary_alpha--hover)}.vkuiButton--mode-secondary.vkuiButton--active{background-color:var(--vkui--color_background_secondary_alpha--active)}.vkuiButton--mode-outline,.vkuiButton--mode-tertiary{background-color:var(--vkui--color_transparent)}.vkuiButton--mode-outline.vkuiButton--hover,.vkuiButton--mode-tertiary.vkuiButton--hover{background-color:var(--vkui--color_transparent--hover)}.vkuiButton--mode-outline.vkuiButton--active,.vkuiButton--mode-tertiary.vkuiButton--active{background-color:var(--vkui--color_transparent--active)}.vkuiButton.vkuiButton--appearance-accent{color:var(--vkui--color_text_accent_themed)}.vkuiButton.vkuiButton--appearance-positive{color:var(--vkui--color_text_positive)}.vkuiButton.vkuiButton--appearance-negative{color:var(--vkui--color_text_negative)}.vkuiButton.vkuiButton--appearance-neutral{color:var(--vkui--color_text_primary)}.vkuiButton.vkuiButton--appearance-accent-invariable{color:var(--vkui--color_text_accent)}.vkuiButton--mode-primary.vkuiButton--appearance-accent{color:var(--vkui--color_text_contrast_themed)}.vkuiButton--mode-primary.vkuiButton--appearance-accent-invariable,.vkuiButton--mode-primary.vkuiButton--appearance-negative,.vkuiButton--mode-primary.vkuiButton--appearance-positive{color:var(--vkui--color_text_contrast)}.vkuiButton--mode-link.vkuiButton--hover{opacity:.8}.vkuiButton--mode-link.vkuiButton--active{opacity:.7}.vkuiButton--mode-outline.vkuiButton--appearance-accent,.vkuiButton--mode-outline.vkuiButton--appearance-accent.vkuiButton--active,.vkuiButton--mode-outline.vkuiButton--appearance-accent.vkuiButton--hover{box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_accent_themed)}.vkuiButton--mode-outline.vkuiButton--appearance-positive{box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_positive)}.vkuiButton--mode-outline.vkuiButton--appearance-positive.vkuiButton--hover{box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_positive--hover)}.vkuiButton--mode-outline.vkuiButton--appearance-positive.vkuiButton--active{box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_positive--active)}.vkuiButton--mode-outline.vkuiButton--appearance-negative{box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_negative)}.vkuiButton--mode-outline.vkuiButton--appearance-negative.vkuiButton--hover{box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_negative--hover)}.vkuiButton--mode-outline.vkuiButton--appearance-negative.vkuiButton--active{box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_negative--active)}.vkuiButton--mode-outline.vkuiButton--appearance-neutral{box-shadow:inset 0 0 0 1px var(--vkui--color_field_border_alpha)}.vkuiButton--mode-outline.vkuiButton--appearance-neutral.vkuiButton--hover{background-color:var(--vkui--color_background_secondary--hover);box-shadow:unset}.vkuiButton--mode-outline.vkuiButton--appearance-neutral.vkuiButton--active{background-color:var(--vkui--color_background_secondary--active);box-shadow:unset}.vkuiButton--mode-outline.vkuiButton--appearance-accent-invariable{box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_accent)}.vkuiButton--mode-primary.vkuiButton--appearance-overlay{background-color:var(--vkui--color_background_contrast)}.vkuiButton--mode-primary.vkuiButton--appearance-overlay.vkuiButton--hover{background-color:var(--vkui--color_background_contrast--hover)}.vkuiButton--mode-primary.vkuiButton--appearance-overlay.vkuiButton--active{background-color:var(--vkui--color_background_contrast--active)}.vkuiButton--mode-secondary.vkuiButton--appearance-overlay{background-color:var(--vkui--color_background_contrast_secondary_alpha)}.vkuiButton--mode-outline.vkuiButton--appearance-overlay.vkuiButton--hover,.vkuiButton--mode-secondary.vkuiButton--appearance-overlay.vkuiButton--hover,.vkuiButton--mode-tertiary.vkuiButton--appearance-overlay.vkuiButton--hover{background-color:var(
-    --vkui--color_background_contrast_secondary_alpha--hover
-  )}.vkuiButton--mode-outline.vkuiButton--appearance-overlay.vkuiButton--active,.vkuiButton--mode-secondary.vkuiButton--appearance-overlay.vkuiButton--active,.vkuiButton--mode-tertiary.vkuiButton--appearance-overlay.vkuiButton--active{background-color:var(
-    --vkui--color_background_contrast_secondary_alpha--active
-  )}.vkuiButton--mode-primary.vkuiButton--appearance-overlay{color:var(--vkui--color_text_primary_invariably)}.vkuiButton--mode-primary.vkuiButton--appearance-overlay.vkuiButton--hover{color:var(--vkui--color_text_primary_invariably--hover)}.vkuiButton--mode-primary.vkuiButton--appearance-overlay.vkuiButton--active{color:var(--vkui--color_text_primary_invariably--active)}.vkuiButton--mode-link.vkuiButton--appearance-overlay,.vkuiButton--mode-outline.vkuiButton--appearance-overlay,.vkuiButton--mode-secondary.vkuiButton--appearance-overlay,.vkuiButton--mode-tertiary.vkuiButton--appearance-overlay{color:var(--vkui--color_text_contrast)}.vkuiButton--mode-outline.vkuiButton--appearance-overlay{box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_contrast)}.vkuiButton--mode-outline.vkuiButton--appearance-overlay.vkuiButton--hover{box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_contrast--hover)}.vkuiButton--mode-outline.vkuiButton--appearance-overlay.vkuiButton--active{box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_contrast--active)}.vkuiButton__after:not(:first-child),.vkuiButton__before:not(:last-child)+.vkuiButton__content{margin-left:6px}.vkuiButton--size-l .vkuiButton__after:not(:first-child),.vkuiButton--size-l .vkuiButton__before:not(:last-child)+.vkuiButton__content{margin-left:8px}.vkuiButton--size-s .vkuiButton__content{font-size:var(--vkui--font_subhead--font_size--compact);line-height:var(--vkui--font_subhead--line_height--compact)}.vkuiButton--sizeY-regular.vkuiButton--size-s .vkuiButton__content{font-size:var(--vkui--font_subhead--font_size--regular);line-height:var(--vkui--font_subhead--line_height--regular)}@media (max-width:767px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiButton--sizeY-none.vkuiButton--size-s .vkuiButton__content{font-size:var(--vkui--font_subhead--font_size--regular);line-height:var(--vkui--font_subhead--line_height--regular)}}.vkuiButton--size-m .vkuiButton__content{font-size:var(--vkui--font_headline2--font_size--compact);line-height:var(--vkui--font_headline2--line_height--compact)}.vkuiButton--sizeY-regular.vkuiButton--size-m .vkuiButton__content{font-size:var(--vkui--font_headline2--font_size--regular);line-height:var(--vkui--font_headline2--line_height--regular)}@media (max-width:767px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiButton--sizeY-none.vkuiButton--size-m .vkuiButton__content{font-size:var(--vkui--font_headline2--font_size--regular);line-height:var(--vkui--font_headline2--line_height--regular)}}.vkuiButton--size-l .vkuiButton__content{font-size:var(--vkui--font_headline1--font_size--compact);line-height:var(--vkui--font_headline1--line_height--compact)}.vkuiButton--sizeY-regular.vkuiButton--size-l.vkuiButton--android .vkuiButton__content{font-size:var(--vkui--font_headline1--font_size--regular);line-height:var(--vkui--font_headline1--line_height--regular)}@media (max-width:767px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiButton--sizeY-none.vkuiButton--size-l.vkuiButton--android .vkuiButton__content{font-size:var(--vkui--font_headline1--font_size--regular);line-height:var(--vkui--font_headline1--line_height--regular)}}.vkuiButton--sizeY-regular.vkuiButton--size-l.vkuiButton--ios .vkuiButton__content{font-size:var(--vkui--font_title3--font_size--regular);line-height:var(--vkui--font_title3--line_height--regular)}@media (max-width:767px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiButton--sizeY-none.vkuiButton--size-l.vkuiButton--ios .vkuiButton__content{font-size:var(--vkui--font_title3--font_size--regular);line-height:var(--vkui--font_title3--line_height--regular)}}.vkuiButton--size-m{min-height:var(--vkui--size_button_medium_height--compact)}.vkuiButton--sizeY-regular.vkuiButton--size-m{min-height:var(--vkui--size_button_medium_height--regular)}@media (max-width:767px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiButton--sizeY-none.vkuiButton--size-m{min-height:var(--vkui--size_button_medium_height--regular)}}.vkuiButton--size-m.vkuiButton--singleIcon{width:var(--vkui--size_button_medium_height--compact)}.vkuiButton--sizeY-regular.vkuiButton--size-m.vkuiButton--singleIcon{width:var(--vkui--size_button_medium_height--regular)}@media (max-width:767px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiButton--sizeY-none.vkuiButton--size-m.vkuiButton--singleIcon{width:var(--vkui--size_button_medium_height--regular)}}.vkuiButton--size-l{min-height:var(--vkui--size_button_large_height--compact)}.vkuiButton--sizeY-regular.vkuiButton--size-l{min-height:var(--vkui--size_button_large_height--regular)}@media (max-width:767px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiButton--sizeY-none.vkuiButton--size-l{min-height:var(--vkui--size_button_large_height--regular)}}.vkuiButton--size-l.vkuiButton--singleIcon{width:var(--vkui--size_button_large_height--compact)}.vkuiButton--sizeY-regular.vkuiButton--size-l.vkuiButton--singleIcon{width:var(--vkui--size_button_large_height--regular)}@media (max-width:767px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiButton--sizeY-none.vkuiButton--size-l.vkuiButton--singleIcon{width:var(--vkui--size_button_large_height--regular)}}.vkuiButton--sizeY-regular{min-height:var(--vkui--size_button_small_height--regular)}@media (max-width:767px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiButton--sizeY-none{min-height:var(--vkui--size_button_small_height--regular)}}
+.vkuiButton{border:none;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;display:inline-block;font-family:VK Sans Text,-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);margin:0;max-width:100%;min-height:28px;min-height:var(--vkui--size_button_small_height--compact);min-width:80px;min-width:var(--vkui--size_button_minimum_width--regular);padding:0;position:relative;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vkuiButton--loading{cursor:progress}.vkuiButton--singleIcon{min-width:auto;width:28px;width:var(--vkui--size_button_small_height--compact)}.vkuiButton--sizeY-regular.vkuiButton--singleIcon{width:30px;width:var(--vkui--size_button_small_height--regular)}@media (not (min-width:768px)) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiButton--sizeY-none.vkuiButton--singleIcon{width:30px;width:var(--vkui--size_button_small_height--regular)}}.vkuiButton--stretched{display:block;flex-basis:0;flex-grow:1;width:100%}.vkuiButton__in{align-items:center;box-sizing:border-box;display:flex;font-family:VK Sans Text,-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);justify-content:center;min-height:inherit;text-align:center;width:100%}.vkuiButton--align-left .vkuiButton__in{justify-content:flex-start;text-align:left}.vkuiButton--align-right .vkuiButton__in{justify-content:flex-end;text-align:right}.vkuiButton[disabled]{opacity:.4;opacity:var(--vkui--opacity_disable)}.vkuiButton--mode-outline[disabled]:not(.vkuiButton--appearance-overlay),.vkuiButton--mode-primary[disabled]:not(.vkuiButton--appearance-overlay):not(.vkuiButton--appearance-negative):not(.vkuiButton--appearance-positive),.vkuiButton--mode-secondary[disabled]:not(.vkuiButton--appearance-overlay),.vkuiButton--mode-tertiary[disabled]:not(.vkuiButton--appearance-overlay){opacity:.64}.vkuiButton__content{font-weight:500;font-weight:var(--vkui--font_weight_accent2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiButton--size-s .vkuiButton__content:first-child{padding-left:16px;padding-left:var(--vkui--size_button_base_small_padding_horizontal--regular)}.vkuiButton--size-s .vkuiButton__after,.vkuiButton--size-s .vkuiButton__content:last-child{padding-right:16px;padding-right:var(--vkui--size_button_base_small_padding_horizontal--regular)}.vkuiButton--size-m .vkuiButton__content:first-child{padding-left:16px;padding-left:var(--vkui--size_button_base_medium_padding_horizontal--regular)}.vkuiButton--size-m .vkuiButton__after,.vkuiButton--size-m .vkuiButton__content:last-child{padding-right:16px;padding-right:var(--vkui--size_button_base_medium_padding_horizontal--regular)}.vkuiButton--size-l .vkuiButton__content:first-child{padding-left:20px;padding-left:var(--vkui--size_button_base_large_padding_horizontal--regular)}.vkuiButton--size-l .vkuiButton__after,.vkuiButton--size-l .vkuiButton__content:last-child{padding-right:20px;padding-right:var(--vkui--size_button_base_large_padding_horizontal--regular)}.vkuiButton--size-s .vkuiButton__before{padding-left:12px;padding-left:var(--vkui--size_button_base_small_padding_horizontal_icon--regular)}.vkuiButton--size-m .vkuiButton__before{padding-left:12px;padding-left:var(--vkui--size_button_base_medium_padding_horizontal_icon--regular)}.vkuiButton--size-l .vkuiButton__before{padding-left:16px;padding-left:var(--vkui--size_button_base_large_padding_horizontal_icon--regular)}.vkuiButton--mode-tertiary.vkuiButton--size-s .vkuiButton__content:first-child{padding-left:12px;padding-left:var(--vkui--size_button_tertiary_small_padding_horizontal--regular)}.vkuiButton--mode-tertiary.vkuiButton--size-s .vkuiButton__after,.vkuiButton--mode-tertiary.vkuiButton--size-s .vkuiButton__content:last-child{padding-right:12px;padding-right:var(--vkui--size_button_tertiary_small_padding_horizontal--regular)}.vkuiButton--mode-tertiary.vkuiButton--size-m .vkuiButton__content:first-child{padding-left:12px;padding-left:var(--vkui--size_button_tertiary_medium_padding_horizontal--regular)}.vkuiButton--mode-tertiary.vkuiButton--size-m .vkuiButton__after,.vkuiButton--mode-tertiary.vkuiButton--size-m .vkuiButton__content:last-child{padding-right:12px;padding-right:var(--vkui--size_button_tertiary_medium_padding_horizontal--regular)}.vkuiButton--mode-tertiary.vkuiButton--size-l .vkuiButton__content:first-child{padding-left:16px;padding-left:var(--vkui--size_button_tertiary_large_padding_horizontal--regular)}.vkuiButton--mode-tertiary.vkuiButton--size-l .vkuiButton__after,.vkuiButton--mode-tertiary.vkuiButton--size-l .vkuiButton__content:last-child{padding-right:16px;padding-right:var(--vkui--size_button_tertiary_large_padding_horizontal--regular)}.vkuiButton--mode-tertiary.vkuiButton--size-s .vkuiButton__before{padding-left:8px;padding-left:var(--vkui--size_button_tertiary_small_padding_horizontal_icon--regular)}.vkuiButton--mode-tertiary.vkuiButton--size-m .vkuiButton__before{padding-left:8px;padding-left:var(--vkui--size_button_tertiary_medium_padding_horizontal_icon--regular)}.vkuiButton--mode-tertiary.vkuiButton--size-l .vkuiButton__before{padding-left:12px;padding-left:var(--vkui--size_button_tertiary_large_padding_horizontal_icon--regular)}.vkuiButton--mode-tertiary.vkuiButton--singleIcon .vkuiButton__after,.vkuiButton--mode-tertiary.vkuiButton--singleIcon .vkuiButton__before,.vkuiButton--singleIcon .vkuiButton__after,.vkuiButton--singleIcon .vkuiButton__before{margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}.vkuiButton--mode-link{background:none;min-width:auto}.vkuiButton--mode-link .vkuiButton__after,.vkuiButton--mode-link .vkuiButton__before,.vkuiButton--mode-link .vkuiButton__content:first-child,.vkuiButton--mode-link .vkuiButton__content:last-child{padding-left:0;padding-right:0}.vkuiButton__spinner{bottom:0;left:0;position:absolute;right:0;top:0}.vkuiButton__spinner+.vkuiButton__in{visibility:hidden}.vkuiButton--mode-primary.vkuiButton--appearance-accent{background-color:#2688eb;background-color:var(--vkui--color_background_accent_themed)}.vkuiButton--mode-primary.vkuiButton--appearance-accent.vkuiButton--hover{background-color:#2483e4;background-color:var(--vkui--color_background_accent_themed--hover)}.vkuiButton--mode-primary.vkuiButton--appearance-accent.vkuiButton--active{background-color:#237edd;background-color:var(--vkui--color_background_accent_themed--active)}.vkuiButton--mode-primary.vkuiButton--appearance-positive{background-color:#4bb34b;background-color:var(--vkui--color_background_positive)}.vkuiButton--mode-primary.vkuiButton--appearance-positive.vkuiButton--hover{background-color:#48ac4a;background-color:var(--vkui--color_background_positive--hover)}.vkuiButton--mode-primary.vkuiButton--appearance-positive.vkuiButton--active{background-color:#45a64a;background-color:var(--vkui--color_background_positive--active)}.vkuiButton--mode-primary.vkuiButton--appearance-negative{background-color:#e64646;background-color:var(--vkui--color_background_negative)}.vkuiButton--mode-primary.vkuiButton--appearance-negative.vkuiButton--hover{background-color:#dd4446;background-color:var(--vkui--color_background_negative--hover)}.vkuiButton--mode-primary.vkuiButton--appearance-negative.vkuiButton--active{background-color:#d44245;background-color:var(--vkui--color_background_negative--active)}.vkuiButton--mode-primary.vkuiButton--appearance-neutral{background-color:#f5f5f5;background-color:var(--vkui--color_background_secondary)}.vkuiButton--mode-primary.vkuiButton--appearance-neutral.vkuiButton--hover{background-color:#ebecee;background-color:var(--vkui--color_background_secondary--hover)}.vkuiButton--mode-primary.vkuiButton--appearance-neutral.vkuiButton--active{background-color:#e1e3e6;background-color:var(--vkui--color_background_secondary--active)}.vkuiButton--mode-primary.vkuiButton--appearance-accent-invariable{background-color:#2688eb;background-color:var(--vkui--color_background_accent)}.vkuiButton--mode-primary.vkuiButton--appearance-accent-invariable.vkuiButton--hover{background-color:#2483e4;background-color:var(--vkui--color_background_accent--hover)}.vkuiButton--mode-primary.vkuiButton--appearance-accent-invariable.vkuiButton--active{background-color:#237edd;background-color:var(--vkui--color_background_accent--active)}.vkuiButton--mode-secondary{background-color:rgba(0,0,0,.04);background-color:var(--vkui--color_background_secondary_alpha)}.vkuiButton--mode-secondary.vkuiButton--hover{background-color:rgba(0,0,0,.08);background-color:var(--vkui--color_background_secondary_alpha--hover)}.vkuiButton--mode-secondary.vkuiButton--active{background-color:rgba(0,0,0,.12);background-color:var(--vkui--color_background_secondary_alpha--active)}.vkuiButton--mode-outline,.vkuiButton--mode-tertiary{background-color:initial;background-color:var(--vkui--color_transparent)}.vkuiButton--mode-outline.vkuiButton--hover,.vkuiButton--mode-tertiary.vkuiButton--hover{background-color:rgba(0,16,61,.04);background-color:var(--vkui--color_transparent--hover)}.vkuiButton--mode-outline.vkuiButton--active,.vkuiButton--mode-tertiary.vkuiButton--active{background-color:rgba(0,16,61,.08);background-color:var(--vkui--color_transparent--active)}.vkuiButton.vkuiButton--appearance-accent{color:#2688eb;color:var(--vkui--color_text_accent_themed)}.vkuiButton.vkuiButton--appearance-positive{color:#4bb34b;color:var(--vkui--color_text_positive)}.vkuiButton.vkuiButton--appearance-negative{color:#e64646;color:var(--vkui--color_text_negative)}.vkuiButton.vkuiButton--appearance-neutral{color:#000;color:var(--vkui--color_text_primary)}.vkuiButton.vkuiButton--appearance-accent-invariable{color:#2688eb;color:var(--vkui--color_text_accent)}.vkuiButton--mode-primary.vkuiButton--appearance-accent{color:#fff;color:var(--vkui--color_text_contrast_themed)}.vkuiButton--mode-primary.vkuiButton--appearance-accent-invariable,.vkuiButton--mode-primary.vkuiButton--appearance-negative,.vkuiButton--mode-primary.vkuiButton--appearance-positive{color:#fff;color:var(--vkui--color_text_contrast)}.vkuiButton--mode-link.vkuiButton--hover{opacity:.8}.vkuiButton--mode-link.vkuiButton--active{opacity:.7}.vkuiButton--mode-outline.vkuiButton--appearance-accent,.vkuiButton--mode-outline.vkuiButton--appearance-accent.vkuiButton--active,.vkuiButton--mode-outline.vkuiButton--appearance-accent.vkuiButton--hover{box-shadow:inset 0 0 0 1px #2688eb;box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_accent_themed)}.vkuiButton--mode-outline.vkuiButton--appearance-positive{box-shadow:inset 0 0 0 1px #4bb34b;box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_positive)}.vkuiButton--mode-outline.vkuiButton--appearance-positive.vkuiButton--hover{box-shadow:inset 0 0 0 1px #48ac4a;box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_positive--hover)}.vkuiButton--mode-outline.vkuiButton--appearance-positive.vkuiButton--active{box-shadow:inset 0 0 0 1px #45a64a;box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_positive--active)}.vkuiButton--mode-outline.vkuiButton--appearance-negative{box-shadow:inset 0 0 0 1px #e64646;box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_negative)}.vkuiButton--mode-outline.vkuiButton--appearance-negative.vkuiButton--hover{box-shadow:inset 0 0 0 1px #dd4446;box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_negative--hover)}.vkuiButton--mode-outline.vkuiButton--appearance-negative.vkuiButton--active{box-shadow:inset 0 0 0 1px #d44245;box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_negative--active)}.vkuiButton--mode-outline.vkuiButton--appearance-neutral{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);box-shadow:inset 0 0 0 1px var(--vkui--color_field_border_alpha)}.vkuiButton--mode-outline.vkuiButton--appearance-neutral.vkuiButton--hover{background-color:#ebecee;background-color:var(--vkui--color_background_secondary--hover);box-shadow:unset}.vkuiButton--mode-outline.vkuiButton--appearance-neutral.vkuiButton--active{background-color:#e1e3e6;background-color:var(--vkui--color_background_secondary--active);box-shadow:unset}.vkuiButton--mode-outline.vkuiButton--appearance-accent-invariable{box-shadow:inset 0 0 0 1px #2688eb;box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_accent)}.vkuiButton--mode-primary.vkuiButton--appearance-overlay{background-color:#fff;background-color:var(--vkui--color_background_contrast)}.vkuiButton--mode-primary.vkuiButton--appearance-overlay.vkuiButton--hover{background-color:#f5f5f7;background-color:var(--vkui--color_background_contrast--hover)}.vkuiButton--mode-primary.vkuiButton--appearance-overlay.vkuiButton--active{background-color:#ebecef;background-color:var(--vkui--color_background_contrast--active)}.vkuiButton--mode-secondary.vkuiButton--appearance-overlay{background-color:hsla(0,0%,100%,.2);background-color:var(--vkui--color_background_contrast_secondary_alpha)}.vkuiButton--mode-outline.vkuiButton--appearance-overlay.vkuiButton--hover,.vkuiButton--mode-secondary.vkuiButton--appearance-overlay.vkuiButton--hover,.vkuiButton--mode-tertiary.vkuiButton--appearance-overlay.vkuiButton--hover{background-color:hsla(0,0%,100%,.24);background-color:var(--vkui--color_background_contrast_secondary_alpha--hover)}.vkuiButton--mode-outline.vkuiButton--appearance-overlay.vkuiButton--active,.vkuiButton--mode-secondary.vkuiButton--appearance-overlay.vkuiButton--active,.vkuiButton--mode-tertiary.vkuiButton--appearance-overlay.vkuiButton--active{background-color:hsla(0,0%,100%,.28);background-color:var(--vkui--color_background_contrast_secondary_alpha--active)}.vkuiButton--mode-primary.vkuiButton--appearance-overlay{color:#000;color:var(--vkui--color_text_primary_invariably)}.vkuiButton--mode-primary.vkuiButton--appearance-overlay.vkuiButton--hover{color:#000102;color:var(--vkui--color_text_primary_invariably--hover)}.vkuiButton--mode-primary.vkuiButton--appearance-overlay.vkuiButton--active{color:#000105;color:var(--vkui--color_text_primary_invariably--active)}.vkuiButton--mode-link.vkuiButton--appearance-overlay,.vkuiButton--mode-outline.vkuiButton--appearance-overlay,.vkuiButton--mode-secondary.vkuiButton--appearance-overlay,.vkuiButton--mode-tertiary.vkuiButton--appearance-overlay{color:#fff;color:var(--vkui--color_text_contrast)}.vkuiButton--mode-outline.vkuiButton--appearance-overlay{box-shadow:inset 0 0 0 1px #fff;box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_contrast)}.vkuiButton--mode-outline.vkuiButton--appearance-overlay.vkuiButton--hover{box-shadow:inset 0 0 0 1px #f5f5f7;box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_contrast--hover)}.vkuiButton--mode-outline.vkuiButton--appearance-overlay.vkuiButton--active{box-shadow:inset 0 0 0 1px #ebecef;box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_contrast--active)}.vkuiButton__after:not(:first-child),.vkuiButton__before:not(:last-child)+.vkuiButton__content{margin-left:6px}.vkuiButton--size-l .vkuiButton__after:not(:first-child),.vkuiButton--size-l .vkuiButton__before:not(:last-child)+.vkuiButton__content{margin-left:8px}.vkuiButton--size-s .vkuiButton__content{font-size:13px;font-size:var(--vkui--font_subhead--font_size--compact);line-height:16px;line-height:var(--vkui--font_subhead--line_height--compact)}.vkuiButton--sizeY-regular.vkuiButton--size-s .vkuiButton__content{font-size:14px;font-size:var(--vkui--font_subhead--font_size--regular);line-height:18px;line-height:var(--vkui--font_subhead--line_height--regular)}@media (not (min-width:768px)) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiButton--sizeY-none.vkuiButton--size-s .vkuiButton__content{font-size:14px;font-size:var(--vkui--font_subhead--font_size--regular);line-height:18px;line-height:var(--vkui--font_subhead--line_height--regular)}}.vkuiButton--size-m .vkuiButton__content{font-size:14px;font-size:var(--vkui--font_headline2--font_size--compact);line-height:20px;line-height:var(--vkui--font_headline2--line_height--compact)}.vkuiButton--sizeY-regular.vkuiButton--size-m .vkuiButton__content{font-size:15px;font-size:var(--vkui--font_headline2--font_size--regular);line-height:20px;line-height:var(--vkui--font_headline2--line_height--regular)}@media (not (min-width:768px)) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiButton--sizeY-none.vkuiButton--size-m .vkuiButton__content{font-size:15px;font-size:var(--vkui--font_headline2--font_size--regular);line-height:20px;line-height:var(--vkui--font_headline2--line_height--regular)}}.vkuiButton--size-l .vkuiButton__content{font-size:15px;font-size:var(--vkui--font_headline1--font_size--compact);line-height:20px;line-height:var(--vkui--font_headline1--line_height--compact)}.vkuiButton--sizeY-regular.vkuiButton--size-l.vkuiButton--android .vkuiButton__content{font-size:16px;font-size:var(--vkui--font_headline1--font_size--regular);line-height:20px;line-height:var(--vkui--font_headline1--line_height--regular)}@media (not (min-width:768px)) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiButton--sizeY-none.vkuiButton--size-l.vkuiButton--android .vkuiButton__content{font-size:16px;font-size:var(--vkui--font_headline1--font_size--regular);line-height:20px;line-height:var(--vkui--font_headline1--line_height--regular)}}.vkuiButton--sizeY-regular.vkuiButton--size-l.vkuiButton--ios .vkuiButton__content{font-size:17px;font-size:var(--vkui--font_title3--font_size--regular);line-height:22px;line-height:var(--vkui--font_title3--line_height--regular)}@media (not (min-width:768px)) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiButton--sizeY-none.vkuiButton--size-l.vkuiButton--ios .vkuiButton__content{font-size:17px;font-size:var(--vkui--font_title3--font_size--regular);line-height:22px;line-height:var(--vkui--font_title3--line_height--regular)}}.vkuiButton--size-m{min-height:32px;min-height:var(--vkui--size_button_medium_height--compact)}.vkuiButton--sizeY-regular.vkuiButton--size-m{min-height:36px;min-height:var(--vkui--size_button_medium_height--regular)}@media (not (min-width:768px)) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiButton--sizeY-none.vkuiButton--size-m{min-height:36px;min-height:var(--vkui--size_button_medium_height--regular)}}.vkuiButton--size-m.vkuiButton--singleIcon{width:32px;width:var(--vkui--size_button_medium_height--compact)}.vkuiButton--sizeY-regular.vkuiButton--size-m.vkuiButton--singleIcon{width:36px;width:var(--vkui--size_button_medium_height--regular)}@media (not (min-width:768px)) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiButton--sizeY-none.vkuiButton--size-m.vkuiButton--singleIcon{width:36px;width:var(--vkui--size_button_medium_height--regular)}}.vkuiButton--size-l{min-height:36px;min-height:var(--vkui--size_button_large_height--compact)}.vkuiButton--sizeY-regular.vkuiButton--size-l{min-height:44px;min-height:var(--vkui--size_button_large_height--regular)}@media (not (min-width:768px)) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiButton--sizeY-none.vkuiButton--size-l{min-height:44px;min-height:var(--vkui--size_button_large_height--regular)}}.vkuiButton--size-l.vkuiButton--singleIcon{width:36px;width:var(--vkui--size_button_large_height--compact)}.vkuiButton--sizeY-regular.vkuiButton--size-l.vkuiButton--singleIcon{width:44px;width:var(--vkui--size_button_large_height--regular)}@media (not (min-width:768px)) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiButton--sizeY-none.vkuiButton--size-l.vkuiButton--singleIcon{width:44px;width:var(--vkui--size_button_large_height--regular)}}.vkuiButton--sizeY-regular{min-height:30px;min-height:var(--vkui--size_button_small_height--regular)}@media (not (min-width:768px)) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiButton--sizeY-none{min-height:30px;min-height:var(--vkui--size_button_small_height--regular)}}

package/dist/cssm/components/ButtonGroup/ButtonGroup.d.ts

@@ -1,14 +1,14 @@
-import * as React from "react";
-import type { HasRootRef, AlignType } from "../../types";
+import * as React from 'react';
+import type { HasRootRef, AlignType } from '../../types';
 export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
     /**
      * Задает расположение элементов внутри группы, вертикальное или горизонтальное.
      */
-    mode?: "vertical" | "horizontal";
+    mode?: 'vertical' | 'horizontal';
     /**
      * Выставляет в зависимости от `mode` отступ по вертикали или горизонтали.
      */
-    gap?: "none" | "space" | "s" | "m";
+    gap?: 'none' | 'space' | 's' | 'm';
     /**
      * Растягивает компонент на всю ширину контейнера.
      *

package/dist/cssm/components/ButtonGroup/ButtonGroup.js

@@ -1,27 +1,27 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["mode", "gap", "stretched", "align", "getRootRef", "className", "children"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
 import "./ButtonGroup.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/ButtonGroup
  */
 export var ButtonGroup = function ButtonGroup(_ref) {
   var _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? "horizontal" : _ref$mode,
+    mode = _ref$mode === void 0 ? 'horizontal' : _ref$mode,
     _ref$gap = _ref.gap,
-    gap = _ref$gap === void 0 ? "m" : _ref$gap,
+    gap = _ref$gap === void 0 ? 'm' : _ref$gap,
     _ref$stretched = _ref.stretched,
     stretched = _ref$stretched === void 0 ? false : _ref$stretched,
     _ref$align = _ref.align,
-    align = _ref$align === void 0 ? "left" : _ref$align,
+    align = _ref$align === void 0 ? 'left' : _ref$align,
     getRootRef = _ref.getRootRef,
     className = _ref.className,
     children = _ref.children,
     restProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNamesString(className, "vkuiButtonGroup", styles["ButtonGroup--mode-".concat(mode)], gap !== "none" && styles["ButtonGroup--gap-".concat(gap)], stretched && "vkuiButtonGroup--stretched", align && styles["ButtonGroup--align-".concat(align)]),
+    className: classNames(className, "vkuiButtonGroup", styles["ButtonGroup--mode-".concat(mode)], gap !== 'none' && styles["ButtonGroup--gap-".concat(gap)], stretched && "vkuiButtonGroup--stretched", align && styles["ButtonGroup--align-".concat(align)]),
     role: "group",
     ref: getRootRef
   }, restProps), children);

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.js","names":["React","classNamesString","ButtonGroup","mode","gap","stretched","align","getRootRef","className","children","restProps","styles"],"sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport type { HasRootRef, AlignType } from \"../../types\";\nimport styles from \"./ButtonGroup.module.css\";\n\nexport interface ButtonGroupProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Задает расположение элементов внутри группы, вертикальное или горизонтальное.\n   */\n  mode?: \"vertical\" | \"horizontal\";\n  /**\n   * Выставляет в зависимости от `mode` отступ по вертикали или горизонтали.\n   */\n  gap?: \"none\" | \"space\" | \"s\" | \"m\";\n  /**\n   * Растягивает компонент на всю ширину контейнера.\n   *\n   * Note: Для потомков соответствующее поведение нужно определять самостоятельно, где это необходимо.\n   */\n  stretched?: boolean;\n  /**\n   * Горизонтальное выравнивание элементов внутри группы. Работает только с mode=\"vertical\".\n   */\n  align?: AlignType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ButtonGroup\n */\nexport const ButtonGroup = ({\n  mode = \"horizontal\",\n  gap = \"m\",\n  stretched = false,\n  align = \"left\" /* NOTE: Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */,\n  getRootRef,\n  className,\n  children,\n  ...restProps\n}: ButtonGroupProps) => {\n  return (\n    <div\n      className={classNamesString(\n        className,\n        styles.ButtonGroup,\n        styles[`ButtonGroup--mode-${mode}`],\n        gap !== \"none\" && styles[`ButtonGroup--gap-${gap}`],\n        stretched && styles[\"ButtonGroup--stretched\"],\n        align && styles[`ButtonGroup--align-${align}`]\n      )}\n      role=\"group\"\n      ref={getRootRef}\n      {...restProps}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AAAC;AA2BxD;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OASA;EAAA,qBARtBC,IAAI;IAAJA,IAAI,0BAAG,YAAY;IAAA,gBACnBC,GAAG;IAAHA,GAAG,yBAAG,GAAG;IAAA,sBACTC,SAAS;IAATA,SAAS,+BAAG,KAAK;IAAA,kBACjBC,KAAK;IAALA,KAAK,2BAAG,MAAM;IACdC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACLC,SAAS;EAEZ,oBACE;IACE,SAAS,EAAET,gBAAgB,CACzBO,SAAS,qBAETG,MAAM,6BAAsBR,IAAI,EAAG,EACnCC,GAAG,KAAK,MAAM,IAAIO,MAAM,4BAAqBP,GAAG,EAAG,EACnDC,SAAS,gCAAoC,EAC7CC,KAAK,IAAIK,MAAM,8BAAuBL,KAAK,EAAG,CAC9C;IACF,IAAI,EAAC,OAAO;IACZ,GAAG,EAAEC;EAAW,GACZG,SAAS,GAEZD,QAAQ,CACL;AAEV,CAAC;AAAC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"ButtonGroup.js","names":["React","classNames","ButtonGroup","mode","gap","stretched","align","getRootRef","className","children","restProps","styles"],"sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRootRef, AlignType } from '../../types';\nimport styles from './ButtonGroup.module.css';\n\nexport interface ButtonGroupProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Задает расположение элементов внутри группы, вертикальное или горизонтальное.\n   */\n  mode?: 'vertical' | 'horizontal';\n  /**\n   * Выставляет в зависимости от `mode` отступ по вертикали или горизонтали.\n   */\n  gap?: 'none' | 'space' | 's' | 'm';\n  /**\n   * Растягивает компонент на всю ширину контейнера.\n   *\n   * Note: Для потомков соответствующее поведение нужно определять самостоятельно, где это необходимо.\n   */\n  stretched?: boolean;\n  /**\n   * Горизонтальное выравнивание элементов внутри группы. Работает только с mode=\"vertical\".\n   */\n  align?: AlignType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ButtonGroup\n */\nexport const ButtonGroup = ({\n  mode = 'horizontal',\n  gap = 'm',\n  stretched = false,\n  align = 'left' /* NOTE: Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */,\n  getRootRef,\n  className,\n  children,\n  ...restProps\n}: ButtonGroupProps) => {\n  return (\n    <div\n      className={classNames(\n        className,\n        styles.ButtonGroup,\n        styles[`ButtonGroup--mode-${mode}`],\n        gap !== 'none' && styles[`ButtonGroup--gap-${gap}`],\n        stretched && styles['ButtonGroup--stretched'],\n        align && styles[`ButtonGroup--align-${align}`],\n      )}\n      role=\"group\"\n      ref={getRootRef}\n      {...restProps}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAAC;AA2B7C;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OASA;EAAA,qBARtBC,IAAI;IAAJA,IAAI,0BAAG,YAAY;IAAA,gBACnBC,GAAG;IAAHA,GAAG,yBAAG,GAAG;IAAA,sBACTC,SAAS;IAATA,SAAS,+BAAG,KAAK;IAAA,kBACjBC,KAAK;IAALA,KAAK,2BAAG,MAAM;IACdC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACLC,SAAS;EAEZ,oBACE;IACE,SAAS,EAAET,UAAU,CACnBO,SAAS,qBAETG,MAAM,6BAAsBR,IAAI,EAAG,EACnCC,GAAG,KAAK,MAAM,IAAIO,MAAM,4BAAqBP,GAAG,EAAG,EACnDC,SAAS,gCAAoC,EAC7CC,KAAK,IAAIK,MAAM,8BAAuBL,KAAK,EAAG,CAC9C;IACF,IAAI,EAAC,OAAO;IACZ,GAAG,EAAEC;EAAW,GACZG,SAAS,GAEZD,QAAQ,CACL;AAEV,CAAC;AAAC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

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

@@ -1 +1 @@
-.vkuiButtonGroup{display:inline-flex;max-width:100%}.vkuiButtonGroup--stretched{display:flex;width:100%}.vkuiButtonGroup--mode-vertical{flex-direction:column}.vkuiButtonGroup--mode-horizontal{flex-direction:row}.vkuiButtonGroup--mode-vertical.vkuiButtonGroup--gap-space>:not(:first-child){margin-top:var(--vkui--size_button_group_gap_space--regular)}.vkuiButtonGroup--mode-vertical.vkuiButtonGroup--gap-s>:not(:first-child){margin-top:var(--vkui--size_button_group_gap_small--regular)}.vkuiButtonGroup--mode-vertical.vkuiButtonGroup--gap-m>:not(:first-child){margin-top:var(--vkui--size_button_group_gap_medium--regular)}.vkuiButtonGroup--mode-horizontal>:not(.vkuiButtonGroup){min-width:0}.vkuiButtonGroup--mode-horizontal.vkuiButtonGroup--gap-space>:not(:last-child){margin-right:var(--vkui--size_button_group_gap_space--regular)}.vkuiButtonGroup--mode-horizontal.vkuiButtonGroup--gap-s>:not(:last-child){margin-right:var(--vkui--size_button_group_gap_small--regular)}.vkuiButtonGroup--mode-horizontal.vkuiButtonGroup--gap-m>:not(:last-child){margin-right:var(--vkui--size_button_group_gap_medium--regular)}.vkuiButtonGroup--align-left{align-items:flex-start}.vkuiButtonGroup--align-center{align-items:center}.vkuiButtonGroup--align-right{align-items:flex-end}
+.vkuiButtonGroup{display:inline-flex;max-width:100%}.vkuiButtonGroup--stretched{display:flex;width:100%}.vkuiButtonGroup--mode-vertical{flex-direction:column}.vkuiButtonGroup--mode-horizontal{flex-direction:row}.vkuiButtonGroup--mode-vertical.vkuiButtonGroup--gap-space>:not(:first-child){margin-top:1px;margin-top:var(--vkui--size_button_group_gap_space--regular)}.vkuiButtonGroup--mode-vertical.vkuiButtonGroup--gap-s>:not(:first-child){margin-top:8px;margin-top:var(--vkui--size_button_group_gap_small--regular)}.vkuiButtonGroup--mode-vertical.vkuiButtonGroup--gap-m>:not(:first-child){margin-top:12px;margin-top:var(--vkui--size_button_group_gap_medium--regular)}.vkuiButtonGroup--mode-horizontal>:not(.vkuiButtonGroup){min-width:0}.vkuiButtonGroup--mode-horizontal.vkuiButtonGroup--gap-space>:not(:last-child){margin-right:1px;margin-right:var(--vkui--size_button_group_gap_space--regular)}.vkuiButtonGroup--mode-horizontal.vkuiButtonGroup--gap-s>:not(:last-child){margin-right:8px;margin-right:var(--vkui--size_button_group_gap_small--regular)}.vkuiButtonGroup--mode-horizontal.vkuiButtonGroup--gap-m>:not(:last-child){margin-right:12px;margin-right:var(--vkui--size_button_group_gap_medium--regular)}.vkuiButtonGroup--align-left{align-items:flex-start}.vkuiButtonGroup--align-center{align-items:center}.vkuiButtonGroup--align-right{align-items:flex-end}

package/dist/cssm/components/Calendar/Calendar.d.ts

@@ -1,9 +1,9 @@
-import * as React from "react";
-import { CalendarHeaderProps } from "../CalendarHeader/CalendarHeader";
-import { CalendarDaysProps } from "../CalendarDays/CalendarDays";
-import { CalendarTimeProps } from "../CalendarTime/CalendarTime";
-import { HasRootRef } from "../../types";
-export interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">, Pick<CalendarTimeProps, "changeHoursAriaLabel" | "changeMinutesAriaLabel">, Pick<CalendarHeaderProps, "prevMonthAriaLabel" | "nextMonthAriaLabel" | "changeMonthAriaLabel" | "changeYearAriaLabel" | "onNextMonth" | "onPrevMonth" | "prevMonthIcon" | "nextMonthIcon" | "prevMonthProps" | "nextMonthProps">, Pick<CalendarDaysProps, "dayProps" | "listenDayChangesForUpdate">, HasRootRef<HTMLDivElement> {
+import * as React from 'react';
+import { CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';
+import { CalendarDaysProps } from '../CalendarDays/CalendarDays';
+import { CalendarTimeProps } from '../CalendarTime/CalendarTime';
+import { HasRootRef } from '../../types';
+export interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, Pick<CalendarTimeProps, 'changeHoursAriaLabel' | 'changeMinutesAriaLabel'>, Pick<CalendarHeaderProps, 'prevMonthAriaLabel' | 'nextMonthAriaLabel' | 'changeMonthAriaLabel' | 'changeYearAriaLabel' | 'onNextMonth' | 'onPrevMonth' | 'prevMonthIcon' | 'nextMonthIcon' | 'prevMonthProps' | 'nextMonthProps'>, Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate'>, HasRootRef<HTMLDivElement> {
     value?: Date;
     disablePast?: boolean;
     disableFuture?: boolean;
@@ -13,7 +13,7 @@ export interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     changeDayAriaLabel?: string;
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
     showNeighboringMonth?: boolean;
-    size?: "s" | "m";
+    size?: 's' | 'm';
     onChange?(value?: Date): void;
     shouldDisableDate?(value: Date): boolean;
     onClose?(): void;

package/dist/cssm/components/Calendar/Calendar.js

@@ -1,18 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["value", "onChange", "disablePast", "disableFuture", "shouldDisableDate", "onClose", "enableTime", "doneButtonText", "weekStartsOn", "getRootRef", "disablePickers", "changeHoursAriaLabel", "changeMinutesAriaLabel", "prevMonthAriaLabel", "nextMonthAriaLabel", "changeMonthAriaLabel", "changeYearAriaLabel", "showNeighboringMonth", "changeDayAriaLabel", "size", "viewDate", "onHeaderChange", "onNextMonth", "onPrevMonth", "prevMonthIcon", "nextMonthIcon", "prevMonthProps", "nextMonthProps", "dayProps", "className", "listenDayChangesForUpdate"];
-import * as React from "react";
-import { isSameMonth, isSameDay } from "../../lib/date";
-import { CalendarHeader } from "../CalendarHeader/CalendarHeader";
-import { CalendarDays } from "../CalendarDays/CalendarDays";
-import { CalendarTime } from "../CalendarTime/CalendarTime";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
-import { navigateDate, setTimeEqual, isFirstDay, isLastDay } from "../../lib/calendar";
-import { useCalendar } from "../../hooks/useCalendar";
-import { classNamesString } from "../../lib/classNames";
-import { warnOnce } from "../../lib/warnOnce";
+import * as React from 'react';
+import { isSameMonth, isSameDay } from '../../lib/date';
+import { CalendarHeader } from '../CalendarHeader/CalendarHeader';
+import { CalendarDays } from '../CalendarDays/CalendarDays';
+import { CalendarTime } from '../CalendarTime/CalendarTime';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { navigateDate, setTimeEqual, isFirstDay, isLastDay } from '../../lib/calendar';
+import { useCalendar } from '../../hooks/useCalendar';
+import { classNames } from '@vkontakte/vkjs';
+import { warnOnce } from '../../lib/warnOnce';
 import "./Calendar.module.css";
-var warn = warnOnce("Calendar");
+var warn = warnOnce('Calendar');
 
 /**
  * @see https://vkcom.github.io/VKUI/#/Calendar
@@ -39,9 +39,9 @@ export var Calendar = function Calendar(_ref) {
     changeYearAriaLabel = _ref.changeYearAriaLabel,
     showNeighboringMonth = _ref.showNeighboringMonth,
     _ref$changeDayAriaLab = _ref.changeDayAriaLabel,
-    changeDayAriaLabel = _ref$changeDayAriaLab === void 0 ? "Изменить день" : _ref$changeDayAriaLab,
+    changeDayAriaLabel = _ref$changeDayAriaLab === void 0 ? 'Изменить день' : _ref$changeDayAriaLab,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? "m" : _ref$size,
+    size = _ref$size === void 0 ? 'm' : _ref$size,
     externalViewDate = _ref.viewDate,
     onHeaderChange = _ref.onHeaderChange,
     onNextMonth = _ref.onNextMonth,
@@ -77,14 +77,14 @@ export var Calendar = function Calendar(_ref) {
       setViewDate(value);
     }
   }, [value]);
-  if (process.env.NODE_ENV === "development" && !disablePickers && size === "s") {
-    warn("Нельзя включить селекты выбора месяца/года, если размер календаря 's'", "error");
+  if (process.env.NODE_ENV === 'development' && !disablePickers && size === 's') {
+    warn("Нельзя включить селекты выбора месяца/года, если размер календаря 's'", 'error');
   }
-  if (process.env.NODE_ENV === "development" && enableTime && size === "s") {
-    warn("Нельзя включить выбор времени, если размер календаря 's'", "error");
+  if (process.env.NODE_ENV === 'development' && enableTime && size === 's') {
+    warn("Нельзя включить выбор времени, если размер календаря 's'", 'error');
   }
   var handleKeyDown = React.useCallback(function (event) {
-    if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(event.key)) {
+    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
       event.preventDefault();
     }
     var newFocusedDay = navigateDate(focusedDay !== null && focusedDay !== void 0 ? focusedDay : value, event.key);
@@ -101,13 +101,13 @@ export var Calendar = function Calendar(_ref) {
   }, [value]);
   return /*#__PURE__*/React.createElement("div", _extends({}, props, {
     ref: getRootRef,
-    className: classNamesString("vkuiCalendar", styles["Calendar--size-".concat(size)], className)
+    className: classNames("vkuiCalendar", styles["Calendar--size-".concat(size)], className)
   }), /*#__PURE__*/React.createElement(CalendarHeader, {
     viewDate: externalViewDate || viewDate,
     onChange: setViewDate,
     onNextMonth: setNextMonth,
     onPrevMonth: setPrevMonth,
-    disablePickers: disablePickers || size === "s",
+    disablePickers: disablePickers || size === 's',
     className: "vkuiCalendar__header",
     prevMonthAriaLabel: prevMonthAriaLabel,
     nextMonthAriaLabel: nextMonthAriaLabel,
@@ -135,7 +135,7 @@ export var Calendar = function Calendar(_ref) {
     size: size,
     dayProps: dayProps,
     listenDayChangesForUpdate: listenDayChangesForUpdate
-  }), enableTime && value && size !== "s" && /*#__PURE__*/React.createElement("div", {
+  }), enableTime && value && size !== 's' && /*#__PURE__*/React.createElement("div", {
     className: "vkuiCalendar__time"
   }, /*#__PURE__*/React.createElement(CalendarTime, {
     value: value,