@vkontakte/vkui 5.1.2 → 5.2.1

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

@@ -1,15 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["size", "mode", "appearance", "stretched", "align", "children", "before", "after", "getRootRef", "Component", "loading", "onClick", "stopPropagation", "className"];
+var _sizeYClassNames;
 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 { SizeType } from '../../lib/adaptivity';
+import { Platform } from '../../lib/platform';
+import { Spinner } from '../Spinner/Spinner';
+import { Tappable } from '../Tappable/Tappable';
 import "./Button.module.css";
+var sizeYClassNames = (_sizeYClassNames = {
+  none: "vkuiButton--sizeY-none"
+}, _defineProperty(_sizeYClassNames, SizeType.COMPACT, "vkuiButton--sizeY-compact"), _defineProperty(_sizeYClassNames, SizeType.REGULAR, "vkuiButton--sizeY-regular"), _sizeYClassNames);
 /**
  * @see https://vkcom.github.io/VKUI/#/Button
  */
@@ -39,7 +44,8 @@ export var Button = function Button(_ref) {
   var hasIcons = Boolean(before || after);
   var hasIconOnly = !children && Boolean(after) !== Boolean(before);
   var _useAdaptivity = useAdaptivity(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   var platform = usePlatform();
   return /*#__PURE__*/React.createElement(Tappable, _extends({
     hoverMode: "vkuiButton--hover",
@@ -49,7 +55,7 @@ export var Button = function Button(_ref) {
     onClick: loading ? undefined : onClick,
     focusVisibleMode: "outside",
     stopPropagation: stopPropagation,
-    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"),
+    className: classNames(className, "vkuiButton", styles["Button--size-".concat(size)], styles["Button--mode-".concat(mode)], styles["Button--appearance-".concat(appearance)], styles["Button--align-".concat(align)], sizeYClassNames[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",

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

@@ -1 +1 @@
-{"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":"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"}
+{"version":3,"file":"Button.js","names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","Spinner","Tappable","sizeYClassNames","none","COMPACT","REGULAR","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 { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasAlign } from '../../types';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport styles from './Button.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Button--sizeY-none'],\n  [SizeType.COMPACT]: styles['Button--sizeY-compact'],\n  [SizeType.REGULAR]: styles['Button--sizeY-regular'],\n};\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 = 'none' } = 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        sizeYClassNames[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":"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"}

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

@@ -1 +1 @@
-.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)}}
+.vkuiButton{border:none;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;display:inline-block;font-family:-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 (max-width:767.9px) 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:-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 (max-width:767.9px) 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 (max-width:767.9px) 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 (max-width:767.9px) 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 (max-width:767.9px) 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 (max-width:767.9px) 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 (max-width:767.9px) 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 (max-width:767.9px) 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 (max-width:767.9px) 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 (max-width:767.9px) 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,5 +1,5 @@
 import * as React from 'react';
-import type { HasRootRef, AlignType } from '../../types';
+import type { AlignType, HasRootRef } from '../../types';
 export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
     /**
      * Задает расположение элементов внутри группы, вертикальное или горизонтальное.

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

@@ -1 +1 @@
-{"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"}
+{"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 { AlignType, HasRootRef } 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/Calendar/Calendar.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';
+import { HasRootRef } from '../../types';
 import { CalendarDaysProps } from '../CalendarDays/CalendarDays';
+import { CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';
 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;

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

@@ -2,15 +2,15 @@ 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 { classNames } from '@vkontakte/vkjs';
+import { useCalendar } from '../../hooks/useCalendar';
+import { isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';
+import { isSameDay, isSameMonth } from '../../lib/date';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { warnOnce } from '../../lib/warnOnce';
+import { CalendarDays } from '../CalendarDays/CalendarDays';
+import { CalendarHeader } from '../CalendarHeader/CalendarHeader';
+import { CalendarTime } from '../CalendarTime/CalendarTime';
 import "./Calendar.module.css";
 var warn = warnOnce('Calendar');
 

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","names":["React","isSameMonth","isSameDay","CalendarHeader","CalendarDays","CalendarTime","useIsomorphicLayoutEffect","navigateDate","setTimeEqual","isFirstDay","isLastDay","useCalendar","classNames","warnOnce","warn","Calendar","value","onChange","disablePast","disableFuture","shouldDisableDate","onClose","enableTime","doneButtonText","weekStartsOn","getRootRef","disablePickers","changeHoursAriaLabel","changeMinutesAriaLabel","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","showNeighboringMonth","changeDayAriaLabel","size","externalViewDate","viewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","prevMonthProps","nextMonthProps","dayProps","className","listenDayChangesForUpdate","props","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","process","env","NODE_ENV","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","onDayChange","date","isDayActive","day","Boolean","styles"],"sources":["../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isSameMonth, isSameDay } from '../../lib/date';\nimport { CalendarHeader, CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';\nimport { CalendarDays, CalendarDaysProps } from '../CalendarDays/CalendarDays';\nimport { CalendarTime, CalendarTimeProps } from '../CalendarTime/CalendarTime';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { navigateDate, setTimeEqual, isFirstDay, isLastDay } from '../../lib/calendar';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { HasRootRef } from '../../types';\nimport { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport styles from './Calendar.module.css';\n\nexport interface CalendarProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,\n    Pick<CalendarTimeProps, 'changeHoursAriaLabel' | 'changeMinutesAriaLabel'>,\n    Pick<\n      CalendarHeaderProps,\n      | 'prevMonthAriaLabel'\n      | 'nextMonthAriaLabel'\n      | 'changeMonthAriaLabel'\n      | 'changeYearAriaLabel'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n      | 'prevMonthProps'\n      | 'nextMonthProps'\n    >,\n    Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate'>,\n    HasRootRef<HTMLDivElement> {\n  value?: Date;\n  disablePast?: boolean;\n  disableFuture?: boolean;\n  enableTime?: boolean;\n  disablePickers?: boolean;\n  doneButtonText?: string;\n  changeDayAriaLabel?: string;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  showNeighboringMonth?: boolean;\n  size?: 's' | 'm';\n  onChange?(value?: Date): void;\n  shouldDisableDate?(value: Date): boolean;\n  onClose?(): void;\n  /**\n   * Дата отображаемого месяца.\n   * При использовании обновление даты должно происходить вне компонента.\n   */\n  viewDate?: Date;\n  /**\n   * Изменение даты в шапке календаря.\n   */\n  onHeaderChange?(value: Date): void;\n}\n\nconst warn = warnOnce('Calendar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Calendar\n */\nexport const Calendar = ({\n  value,\n  onChange,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  onClose,\n  enableTime = false,\n  doneButtonText,\n  weekStartsOn = 1,\n  getRootRef,\n  disablePickers,\n  changeHoursAriaLabel,\n  changeMinutesAriaLabel,\n  prevMonthAriaLabel,\n  nextMonthAriaLabel,\n  changeMonthAriaLabel,\n  changeYearAriaLabel,\n  showNeighboringMonth,\n  changeDayAriaLabel = 'Изменить день',\n  size = 'm',\n  viewDate: externalViewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  prevMonthProps,\n  nextMonthProps,\n  dayProps,\n  className,\n  listenDayChangesForUpdate,\n  ...props\n}: CalendarProps) => {\n  const {\n    viewDate,\n    setViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    isDayFocused,\n    isDayDisabled,\n    resetSelectedDay,\n  } = useCalendar({\n    value,\n    disableFuture,\n    disablePast,\n    shouldDisableDate,\n    onHeaderChange,\n    onNextMonth,\n    onPrevMonth,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    if (value) {\n      setViewDate(value);\n    }\n  }, [value]);\n\n  if (process.env.NODE_ENV === 'development' && !disablePickers && size === 's') {\n    warn(\"Нельзя включить селекты выбора месяца/года, если размер календаря 's'\", 'error');\n  }\n\n  if (process.env.NODE_ENV === 'development' && enableTime && size === 's') {\n    warn(\"Нельзя включить выбор времени, если размер календаря 's'\", 'error');\n  }\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n        event.preventDefault();\n      }\n\n      const newFocusedDay = navigateDate(focusedDay ?? value, event.key);\n\n      if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate)) {\n        setViewDate(newFocusedDay);\n      }\n      setFocusedDay(newFocusedDay);\n    },\n    [focusedDay, setFocusedDay, setViewDate, value, viewDate],\n  );\n\n  const onDayChange = React.useCallback(\n    (date: Date) => {\n      onChange?.(setTimeEqual(date, value as Date | undefined | null));\n    },\n    [value, onChange],\n  );\n\n  const isDayActive = React.useCallback(\n    (day: Date) => Boolean(value && isSameDay(day, value)),\n    [value],\n  );\n\n  return (\n    <div\n      {...props}\n      ref={getRootRef}\n      className={classNames(styles['Calendar'], styles[`Calendar--size-${size}`], className)}\n    >\n      <CalendarHeader\n        viewDate={externalViewDate || viewDate}\n        onChange={setViewDate}\n        onNextMonth={setNextMonth}\n        onPrevMonth={setPrevMonth}\n        disablePickers={disablePickers || size === 's'}\n        className={styles['Calendar__header']}\n        prevMonthAriaLabel={prevMonthAriaLabel}\n        nextMonthAriaLabel={nextMonthAriaLabel}\n        changeMonthAriaLabel={changeMonthAriaLabel}\n        changeYearAriaLabel={changeYearAriaLabel}\n        prevMonthIcon={prevMonthIcon}\n        nextMonthIcon={nextMonthIcon}\n        prevMonthProps={prevMonthProps}\n        nextMonthProps={nextMonthProps}\n      />\n      <CalendarDays\n        viewDate={externalViewDate || viewDate}\n        value={value}\n        weekStartsOn={weekStartsOn}\n        isDayFocused={isDayFocused}\n        tabIndex={0}\n        aria-label={changeDayAriaLabel}\n        onKeyDown={handleKeyDown}\n        onDayChange={onDayChange}\n        isDayActive={isDayActive}\n        isDaySelectionStart={isFirstDay}\n        isDaySelectionEnd={isLastDay}\n        isDayDisabled={isDayDisabled}\n        onBlur={resetSelectedDay}\n        showNeighboringMonth={showNeighboringMonth}\n        size={size}\n        dayProps={dayProps}\n        listenDayChangesForUpdate={listenDayChangesForUpdate}\n      />\n      {enableTime && value && size !== 's' && (\n        <div className={styles['Calendar__time']}>\n          <CalendarTime\n            value={value}\n            onChange={onChange}\n            onClose={onClose}\n            doneButtonText={doneButtonText}\n            changeHoursAriaLabel={changeHoursAriaLabel}\n            changeMinutesAriaLabel={changeMinutesAriaLabel}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Calendar.js","names":["React","classNames","useCalendar","isFirstDay","isLastDay","navigateDate","setTimeEqual","isSameDay","isSameMonth","useIsomorphicLayoutEffect","warnOnce","CalendarDays","CalendarHeader","CalendarTime","warn","Calendar","value","onChange","disablePast","disableFuture","shouldDisableDate","onClose","enableTime","doneButtonText","weekStartsOn","getRootRef","disablePickers","changeHoursAriaLabel","changeMinutesAriaLabel","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","showNeighboringMonth","changeDayAriaLabel","size","externalViewDate","viewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","prevMonthProps","nextMonthProps","dayProps","className","listenDayChangesForUpdate","props","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","process","env","NODE_ENV","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","onDayChange","date","isDayActive","day","Boolean","styles"],"sources":["../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';\nimport { isSameDay, isSameMonth } from '../../lib/date';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { CalendarDays, CalendarDaysProps } from '../CalendarDays/CalendarDays';\nimport { CalendarHeader, CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';\nimport { CalendarTime, CalendarTimeProps } from '../CalendarTime/CalendarTime';\nimport styles from './Calendar.module.css';\n\nexport interface CalendarProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,\n    Pick<CalendarTimeProps, 'changeHoursAriaLabel' | 'changeMinutesAriaLabel'>,\n    Pick<\n      CalendarHeaderProps,\n      | 'prevMonthAriaLabel'\n      | 'nextMonthAriaLabel'\n      | 'changeMonthAriaLabel'\n      | 'changeYearAriaLabel'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n      | 'prevMonthProps'\n      | 'nextMonthProps'\n    >,\n    Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate'>,\n    HasRootRef<HTMLDivElement> {\n  value?: Date;\n  disablePast?: boolean;\n  disableFuture?: boolean;\n  enableTime?: boolean;\n  disablePickers?: boolean;\n  doneButtonText?: string;\n  changeDayAriaLabel?: string;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  showNeighboringMonth?: boolean;\n  size?: 's' | 'm';\n  onChange?(value?: Date): void;\n  shouldDisableDate?(value: Date): boolean;\n  onClose?(): void;\n  /**\n   * Дата отображаемого месяца.\n   * При использовании обновление даты должно происходить вне компонента.\n   */\n  viewDate?: Date;\n  /**\n   * Изменение даты в шапке календаря.\n   */\n  onHeaderChange?(value: Date): void;\n}\n\nconst warn = warnOnce('Calendar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Calendar\n */\nexport const Calendar = ({\n  value,\n  onChange,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  onClose,\n  enableTime = false,\n  doneButtonText,\n  weekStartsOn = 1,\n  getRootRef,\n  disablePickers,\n  changeHoursAriaLabel,\n  changeMinutesAriaLabel,\n  prevMonthAriaLabel,\n  nextMonthAriaLabel,\n  changeMonthAriaLabel,\n  changeYearAriaLabel,\n  showNeighboringMonth,\n  changeDayAriaLabel = 'Изменить день',\n  size = 'm',\n  viewDate: externalViewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  prevMonthProps,\n  nextMonthProps,\n  dayProps,\n  className,\n  listenDayChangesForUpdate,\n  ...props\n}: CalendarProps) => {\n  const {\n    viewDate,\n    setViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    isDayFocused,\n    isDayDisabled,\n    resetSelectedDay,\n  } = useCalendar({\n    value,\n    disableFuture,\n    disablePast,\n    shouldDisableDate,\n    onHeaderChange,\n    onNextMonth,\n    onPrevMonth,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    if (value) {\n      setViewDate(value);\n    }\n  }, [value]);\n\n  if (process.env.NODE_ENV === 'development' && !disablePickers && size === 's') {\n    warn(\"Нельзя включить селекты выбора месяца/года, если размер календаря 's'\", 'error');\n  }\n\n  if (process.env.NODE_ENV === 'development' && enableTime && size === 's') {\n    warn(\"Нельзя включить выбор времени, если размер календаря 's'\", 'error');\n  }\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n        event.preventDefault();\n      }\n\n      const newFocusedDay = navigateDate(focusedDay ?? value, event.key);\n\n      if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate)) {\n        setViewDate(newFocusedDay);\n      }\n      setFocusedDay(newFocusedDay);\n    },\n    [focusedDay, setFocusedDay, setViewDate, value, viewDate],\n  );\n\n  const onDayChange = React.useCallback(\n    (date: Date) => {\n      onChange?.(setTimeEqual(date, value as Date | undefined | null));\n    },\n    [value, onChange],\n  );\n\n  const isDayActive = React.useCallback(\n    (day: Date) => Boolean(value && isSameDay(day, value)),\n    [value],\n  );\n\n  return (\n    <div\n      {...props}\n      ref={getRootRef}\n      className={classNames(styles['Calendar'], styles[`Calendar--size-${size}`], className)}\n    >\n      <CalendarHeader\n        viewDate={externalViewDate || viewDate}\n        onChange={setViewDate}\n        onNextMonth={setNextMonth}\n        onPrevMonth={setPrevMonth}\n        disablePickers={disablePickers || size === 's'}\n        className={styles['Calendar__header']}\n        prevMonthAriaLabel={prevMonthAriaLabel}\n        nextMonthAriaLabel={nextMonthAriaLabel}\n        changeMonthAriaLabel={changeMonthAriaLabel}\n        changeYearAriaLabel={changeYearAriaLabel}\n        prevMonthIcon={prevMonthIcon}\n        nextMonthIcon={nextMonthIcon}\n        prevMonthProps={prevMonthProps}\n        nextMonthProps={nextMonthProps}\n      />\n      <CalendarDays\n        viewDate={externalViewDate || viewDate}\n        value={value}\n        weekStartsOn={weekStartsOn}\n        isDayFocused={isDayFocused}\n        tabIndex={0}\n        aria-label={changeDayAriaLabel}\n        onKeyDown={handleKeyDown}\n        onDayChange={onDayChange}\n        isDayActive={isDayActive}\n        isDaySelectionStart={isFirstDay}\n        isDaySelectionEnd={isLastDay}\n        isDayDisabled={isDayDisabled}\n        onBlur={resetSelectedDay}\n        showNeighboringMonth={showNeighboringMonth}\n        size={size}\n        dayProps={dayProps}\n        listenDayChangesForUpdate={listenDayChangesForUpdate}\n      />\n      {enableTime && value && size !== 's' && (\n        <div className={styles['Calendar__time']}>\n          <CalendarTime\n            value={value}\n            onChange={onChange}\n            onClose={onClose}\n            doneButtonText={doneButtonText}\n            changeHoursAriaLabel={changeHoursAriaLabel}\n            changeMinutesAriaLabel={changeMinutesAriaLabel}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/cssm/components/CalendarDay/CalendarDay.js

@@ -3,9 +3,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["day", "today", "selected", "onChange", "hidden", "disabled", "active", "selectionStart", "selectionEnd", "focused", "onEnter", "onLeave", "hinted", "hintedSelectionStart", "hintedSelectionEnd", "sameMonth", "size", "className"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { Tappable } from '../Tappable/Tappable';
 import { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from '../../hooks/useKeyboardInputTracker';
 import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
+import { Tappable } from '../Tappable/Tappable';
 import "./CalendarDay.module.css";
 export var CalendarDay = /*#__PURE__*/React.memo(function (_ref) {
   var day = _ref.day,

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

@@ -1 +1 @@
-{"version":3,"file":"CalendarDay.js","names":["React","classNames","Tappable","ENABLE_KEYBOARD_INPUT_EVENT_NAME","useConfigProvider","CalendarDay","memo","day","today","selected","onChange","hidden","disabled","active","selectionStart","selectionEnd","focused","onEnter","onLeave","hinted","hintedSelectionStart","hintedSelectionEnd","sameMonth","size","className","props","locale","ref","useRef","onClick","useCallback","handleEnter","handleLeave","useEffect","current","dispatchEvent","Event","bubbles","focus","styles","Intl","DateTimeFormat","weekday","year","month","format","getDate","displayName"],"sources":["../../../../src/components/CalendarDay/CalendarDay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable, TappableElementProps } from '../Tappable/Tappable';\nimport { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from '../../hooks/useKeyboardInputTracker';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport styles from './CalendarDay.module.css';\n\nexport type CalendarDayElementProps = Omit<\n  TappableElementProps,\n  'onChange' | 'size' | 'disabled' | 'selected'\n>;\n\nexport interface CalendarDayProps extends CalendarDayElementProps {\n  day: Date;\n  today?: boolean;\n  selected?: boolean;\n  selectionStart?: boolean;\n  selectionEnd?: boolean;\n  hintedSelectionStart?: boolean;\n  hintedSelectionEnd?: boolean;\n  active?: boolean;\n  hidden?: boolean;\n  disabled?: boolean;\n  focused?: boolean;\n  hinted?: boolean;\n  sameMonth?: boolean;\n  size?: 's' | 'm';\n  onChange(value: Date): void;\n  onEnter?(value: Date): void;\n  onLeave?(value: Date): void;\n}\n\nexport const CalendarDay = React.memo(\n  ({\n    day,\n    today,\n    selected,\n    onChange,\n    hidden,\n    disabled,\n    active,\n    selectionStart,\n    selectionEnd,\n    focused,\n    onEnter,\n    onLeave,\n    hinted,\n    hintedSelectionStart,\n    hintedSelectionEnd,\n    sameMonth,\n    size,\n    className,\n    ...props\n  }: CalendarDayProps) => {\n    const { locale } = useConfigProvider();\n    const ref = React.useRef<HTMLElement>(null);\n    const onClick = React.useCallback(() => onChange(day), [day, onChange]);\n    const handleEnter = React.useCallback(() => onEnter?.(day), [day, onEnter]);\n    const handleLeave = React.useCallback(() => onLeave?.(day), [day, onLeave]);\n\n    React.useEffect(() => {\n      if (focused && ref.current) {\n        ref.current.dispatchEvent(new Event(ENABLE_KEYBOARD_INPUT_EVENT_NAME, { bubbles: true }));\n        ref.current.focus();\n      }\n    }, [focused]);\n\n    if (hidden) {\n      return <div className={styles['CalendarDay__hidden']}></div>;\n    }\n\n    return (\n      <Tappable\n        className={classNames(\n          styles['CalendarDay'],\n          size && styles[`CalendarDay--size-${size}`],\n          today && styles['CalendarDay--today'],\n          selected && !disabled && styles['CalendarDay--selected'],\n          active && !disabled && styles['CalendarDay--active'],\n          selectionStart && styles['CalendarDay--selection-start'],\n          selectionEnd && styles['CalendarDay--selection-end'],\n          disabled && styles['CalendarDay--disabled'],\n          !sameMonth && styles['CalendarDay--not-same-month'],\n          className,\n        )}\n        hoverMode={active ? styles['CalendarDay--active-hover'] : styles['CalendarDay--hover']}\n        hasActive={false}\n        onClick={onClick}\n        disabled={disabled}\n        aria-label={new Intl.DateTimeFormat(locale, {\n          weekday: 'long',\n          year: 'numeric',\n          month: 'long',\n          day: 'numeric',\n        }).format(day)}\n        tabIndex={-1}\n        getRootRef={ref}\n        focusVisibleMode={active ? 'outside' : 'inside'}\n        onEnter={handleEnter}\n        onLeave={handleLeave}\n        {...props}\n      >\n        <div\n          className={classNames(\n            styles['CalendarDay__hinted'],\n            hinted && styles['CalendarDay__hinted--active'],\n            hintedSelectionStart && styles['CalendarDay__hinted--selection-start'],\n            hintedSelectionEnd && styles['CalendarDay__hinted--selection-end'],\n          )}\n        >\n          <div\n            className={classNames(\n              styles['CalendarDay__inner'],\n              active && !disabled && styles['CalendarDay__inner--active'],\n            )}\n          >\n            <div className={styles['CalendarDay__day-number']}>{day.getDate()}</div>\n          </div>\n        </div>\n      </Tappable>\n    );\n  },\n);\n\nCalendarDay.displayName = 'CalendarDay';\n"],"mappings":"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"}
+{"version":3,"file":"CalendarDay.js","names":["React","classNames","ENABLE_KEYBOARD_INPUT_EVENT_NAME","useConfigProvider","Tappable","CalendarDay","memo","day","today","selected","onChange","hidden","disabled","active","selectionStart","selectionEnd","focused","onEnter","onLeave","hinted","hintedSelectionStart","hintedSelectionEnd","sameMonth","size","className","props","locale","ref","useRef","onClick","useCallback","handleEnter","handleLeave","useEffect","current","dispatchEvent","Event","bubbles","focus","styles","Intl","DateTimeFormat","weekday","year","month","format","getDate","displayName"],"sources":["../../../../src/components/CalendarDay/CalendarDay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from '../../hooks/useKeyboardInputTracker';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { Tappable, TappableElementProps } from '../Tappable/Tappable';\nimport styles from './CalendarDay.module.css';\n\nexport type CalendarDayElementProps = Omit<\n  TappableElementProps,\n  'onChange' | 'size' | 'disabled' | 'selected'\n>;\n\nexport interface CalendarDayProps extends CalendarDayElementProps {\n  day: Date;\n  today?: boolean;\n  selected?: boolean;\n  selectionStart?: boolean;\n  selectionEnd?: boolean;\n  hintedSelectionStart?: boolean;\n  hintedSelectionEnd?: boolean;\n  active?: boolean;\n  hidden?: boolean;\n  disabled?: boolean;\n  focused?: boolean;\n  hinted?: boolean;\n  sameMonth?: boolean;\n  size?: 's' | 'm';\n  onChange(value: Date): void;\n  onEnter?(value: Date): void;\n  onLeave?(value: Date): void;\n}\n\nexport const CalendarDay = React.memo(\n  ({\n    day,\n    today,\n    selected,\n    onChange,\n    hidden,\n    disabled,\n    active,\n    selectionStart,\n    selectionEnd,\n    focused,\n    onEnter,\n    onLeave,\n    hinted,\n    hintedSelectionStart,\n    hintedSelectionEnd,\n    sameMonth,\n    size,\n    className,\n    ...props\n  }: CalendarDayProps) => {\n    const { locale } = useConfigProvider();\n    const ref = React.useRef<HTMLElement>(null);\n    const onClick = React.useCallback(() => onChange(day), [day, onChange]);\n    const handleEnter = React.useCallback(() => onEnter?.(day), [day, onEnter]);\n    const handleLeave = React.useCallback(() => onLeave?.(day), [day, onLeave]);\n\n    React.useEffect(() => {\n      if (focused && ref.current) {\n        ref.current.dispatchEvent(new Event(ENABLE_KEYBOARD_INPUT_EVENT_NAME, { bubbles: true }));\n        ref.current.focus();\n      }\n    }, [focused]);\n\n    if (hidden) {\n      return <div className={styles['CalendarDay__hidden']}></div>;\n    }\n\n    return (\n      <Tappable\n        className={classNames(\n          styles['CalendarDay'],\n          size && styles[`CalendarDay--size-${size}`],\n          today && styles['CalendarDay--today'],\n          selected && !disabled && styles['CalendarDay--selected'],\n          active && !disabled && styles['CalendarDay--active'],\n          selectionStart && styles['CalendarDay--selection-start'],\n          selectionEnd && styles['CalendarDay--selection-end'],\n          disabled && styles['CalendarDay--disabled'],\n          !sameMonth && styles['CalendarDay--not-same-month'],\n          className,\n        )}\n        hoverMode={active ? styles['CalendarDay--active-hover'] : styles['CalendarDay--hover']}\n        hasActive={false}\n        onClick={onClick}\n        disabled={disabled}\n        aria-label={new Intl.DateTimeFormat(locale, {\n          weekday: 'long',\n          year: 'numeric',\n          month: 'long',\n          day: 'numeric',\n        }).format(day)}\n        tabIndex={-1}\n        getRootRef={ref}\n        focusVisibleMode={active ? 'outside' : 'inside'}\n        onEnter={handleEnter}\n        onLeave={handleLeave}\n        {...props}\n      >\n        <div\n          className={classNames(\n            styles['CalendarDay__hinted'],\n            hinted && styles['CalendarDay__hinted--active'],\n            hintedSelectionStart && styles['CalendarDay__hinted--selection-start'],\n            hintedSelectionEnd && styles['CalendarDay__hinted--selection-end'],\n          )}\n        >\n          <div\n            className={classNames(\n              styles['CalendarDay__inner'],\n              active && !disabled && styles['CalendarDay__inner--active'],\n            )}\n          >\n            <div className={styles['CalendarDay__day-number']}>{day.getDate()}</div>\n          </div>\n        </div>\n      </Tappable>\n    );\n  },\n);\n\nCalendarDay.displayName = 'CalendarDay';\n"],"mappings":"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"}

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

@@ -1 +1 @@
-.vkuiCalendarDay{border-radius:0;color:#000;color:var(--vkui--color_text_primary);font-family:VK Sans Text,-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);font-size:14px}.vkuiCalendarDay,.vkuiCalendarDay__hidden{flex-basis:calc(100% / 7);flex-grow:0;height:36px}.vkuiCalendarDay--size-s,.vkuiCalendarDay__hidden--size-s{height:34px}.vkuiCalendarDay--disabled,.vkuiCalendarDay--not-same-month{color:#99a2ad;color:var(--vkui--color_text_tertiary)}.vkuiCalendarDay--selected{background-color:#f5f5f5;background-color:var(--vkui--color_background_secondary)}.vkuiCalendarDay--selection-start.vkuiCalendarDay--selected,.vkuiCalendarDay__hinted--selection-start{border-bottom-left-radius:8px;border-top-left-radius:8px}.vkuiCalendarDay--selection-end.vkuiCalendarDay--selected,.vkuiCalendarDay__hinted--selection-end{border-bottom-right-radius:8px;border-top-right-radius:8px}.vkuiCalendarDay__day-number{text-align:center}.vkuiCalendarDay--today{font-weight:600}.vkuiCalendarDay--today .vkuiCalendarDay__day-number:after{border-bottom:2px solid #2688eb;border-bottom:2px solid var(--vkui--color_stroke_accent);content:"";display:block;left:50%;position:relative;transform:translateX(-50%);width:16px}.vkuiCalendarDay--today .vkuiCalendarDay__inner--active .vkuiCalendarDay__day-number:after{border-bottom-color:#fff;border-bottom-color:var(--vkui--color_stroke_contrast)}.vkuiCalendarDay__hinted,.vkuiCalendarDay__inner{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.vkuiCalendarDay__inner{border-radius:8px}.vkuiCalendarDay--hover :not(.vkuiCalendarDay__hinted--active) .vkuiCalendarDay__inner,.vkuiCalendarDay__hinted--active{background-color:rgba(0,0,0,.08);background-color:var(--vkui--color_background_secondary_alpha--hover)}.vkuiCalendarDay__inner--active{background-color:#2688eb;background-color:var(--vkui--color_background_accent);color:#fff;color:var(--vkui--color_text_contrast)}
+.vkuiCalendarDay{border-radius:0;color:#000;color:var(--vkui--color_text_primary);font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);font-size:14px}.vkuiCalendarDay,.vkuiCalendarDay__hidden{flex-basis:calc(100% / 7);flex-grow:0;height:36px}.vkuiCalendarDay--size-s,.vkuiCalendarDay__hidden--size-s{height:34px}.vkuiCalendarDay--disabled,.vkuiCalendarDay--not-same-month{color:#99a2ad;color:var(--vkui--color_text_tertiary)}.vkuiCalendarDay--selected{background-color:#f5f5f5;background-color:var(--vkui--color_background_secondary)}.vkuiCalendarDay--selection-start.vkuiCalendarDay--selected,.vkuiCalendarDay__hinted--selection-start{border-bottom-left-radius:8px;border-top-left-radius:8px}.vkuiCalendarDay--selection-end.vkuiCalendarDay--selected,.vkuiCalendarDay__hinted--selection-end{border-bottom-right-radius:8px;border-top-right-radius:8px}.vkuiCalendarDay__day-number{text-align:center}.vkuiCalendarDay--today{font-weight:600}.vkuiCalendarDay--today .vkuiCalendarDay__day-number:after{border-bottom:2px solid #2688eb;border-bottom:2px solid var(--vkui--color_stroke_accent);content:"";display:block;left:50%;position:relative;transform:translateX(-50%);width:16px}.vkuiCalendarDay--today .vkuiCalendarDay__inner--active .vkuiCalendarDay__day-number:after{border-bottom-color:#fff;border-bottom-color:var(--vkui--color_stroke_contrast)}.vkuiCalendarDay__hinted,.vkuiCalendarDay__inner{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.vkuiCalendarDay__inner{border-radius:8px}.vkuiCalendarDay--hover :not(.vkuiCalendarDay__hinted--active) .vkuiCalendarDay__inner,.vkuiCalendarDay__hinted--active{background-color:rgba(0,0,0,.08);background-color:var(--vkui--color_background_secondary_alpha--hover)}.vkuiCalendarDay__inner--active{background-color:#2688eb;background-color:var(--vkui--color_background_accent);color:#fff;color:var(--vkui--color_text_contrast)}

package/dist/cssm/components/CalendarDays/CalendarDays.js

@@ -2,13 +2,13 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["viewDate", "value", "weekStartsOn", "onDayChange", "isDaySelected", "isDayActive", "isDaySelectionEnd", "isDaySelectionStart", "onDayEnter", "onDayLeave", "isDayHinted", "isHintedDaySelectionStart", "isHintedDaySelectionEnd", "isDayFocused", "isDayDisabled", "size", "showNeighboringMonth", "dayProps", "className", "listenDayChangesForUpdate"];
 import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { useTodayDate } from '../../hooks/useTodayDate';
+import { getDaysNames, getWeeks } from '../../lib/calendar';
 import { isSameDay, isSameMonth } from '../../lib/date';
 import { CalendarDay } from '../CalendarDay/CalendarDay';
-import { getDaysNames, getWeeks } from '../../lib/calendar';
 import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
-import { classNames } from '@vkontakte/vkjs';
 import { Footnote } from '../Typography/Footnote/Footnote';
-import { useTodayDate } from '../../hooks/useTodayDate';
 import "./CalendarDays.module.css";
 export var CalendarDays = function CalendarDays(_ref) {
   var viewDate = _ref.viewDate,

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

@@ -1 +1 @@
-{"version":3,"file":"CalendarDays.js","names":["React","isSameDay","isSameMonth","CalendarDay","getDaysNames","getWeeks","useConfigProvider","classNames","Footnote","useTodayDate","CalendarDays","viewDate","value","weekStartsOn","onDayChange","isDaySelected","isDayActive","isDaySelectionEnd","isDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","isHintedDaySelectionStart","isHintedDaySelectionEnd","isDayFocused","isDayDisabled","size","showNeighboringMonth","dayProps","className","listenDayChangesForUpdate","props","locale","ref","useRef","now","weeks","useMemo","daysNames","handleDayChange","useCallback","date","current","focus","styles","map","dayName","week","i","day","sameMonth","toISOString"],"sources":["../../../../src/components/CalendarDays/CalendarDays.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isSameDay, isSameMonth } from '../../lib/date';\nimport { CalendarDay, CalendarDayElementProps } from '../CalendarDay/CalendarDay';\nimport { getDaysNames, getWeeks } from '../../lib/calendar';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { useTodayDate } from '../../hooks/useTodayDate';\nimport styles from './CalendarDays.module.css';\n\nexport interface CalendarDaysProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  value?: Date | Array<Date | null>;\n  viewDate: Date;\n  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  showNeighboringMonth?: boolean;\n  size?: 's' | 'm';\n  dayProps?: CalendarDayElementProps;\n  listenDayChangesForUpdate?: boolean;\n  onDayChange(value: Date): void;\n  isDayDisabled(value: Date): boolean;\n  isDaySelectionStart(value: Date, dayOfWeek: number): boolean;\n  isDaySelectionEnd(value: Date, dayOfWeek: number): boolean;\n  isHintedDaySelectionStart?(value: Date, dayOfWeek: number): boolean;\n  isHintedDaySelectionEnd?(value: Date, dayOfWeek: number): boolean;\n  isDayActive(value: Date): boolean;\n  isDayHinted?(value: Date): boolean;\n  isDaySelected?(value: Date): boolean;\n  isDayFocused(value: Date): boolean;\n  onDayEnter?(value: Date): void;\n  onDayLeave?(value: Date): void;\n}\n\nexport const CalendarDays = ({\n  viewDate,\n  value,\n  weekStartsOn,\n  onDayChange,\n  isDaySelected,\n  isDayActive,\n  isDaySelectionEnd,\n  isDaySelectionStart,\n  onDayEnter,\n  onDayLeave,\n  isDayHinted,\n  isHintedDaySelectionStart,\n  isHintedDaySelectionEnd,\n  isDayFocused,\n  isDayDisabled,\n  size,\n  showNeighboringMonth = false,\n  dayProps,\n  className,\n  listenDayChangesForUpdate = false,\n  ...props\n}: CalendarDaysProps) => {\n  const { locale } = useConfigProvider();\n  const ref = React.useRef<HTMLDivElement>(null);\n  const now = useTodayDate(listenDayChangesForUpdate);\n\n  const weeks = React.useMemo(() => getWeeks(viewDate, weekStartsOn), [weekStartsOn, viewDate]);\n\n  const daysNames = React.useMemo(\n    () => getDaysNames(now, weekStartsOn, locale),\n    [locale, now, weekStartsOn],\n  );\n\n  const handleDayChange = React.useCallback(\n    (date: Date) => {\n      onDayChange(date);\n\n      ref.current?.focus();\n    },\n    [onDayChange],\n  );\n\n  return (\n    <div {...props} className={classNames(styles['CalendarDays'], className)} ref={ref}>\n      <div\n        className={classNames(\n          styles['CalendarDays__row'],\n          size && styles[`CalendarDays__row--size-${size}`],\n        )}\n      >\n        {daysNames.map((dayName) => (\n          <Footnote key={dayName} className={styles['CalendarDays__weekday']}>\n            {dayName}\n          </Footnote>\n        ))}\n      </div>\n\n      {weeks.map((week, i) => (\n        <div\n          className={classNames(\n            styles['CalendarDays__row'],\n            size && styles[`CalendarDays__row--size-${size}`],\n          )}\n          key={i}\n        >\n          {week.map((day, i) => {\n            const sameMonth = isSameMonth(day, viewDate);\n            return (\n              <CalendarDay\n                key={day.toISOString()}\n                day={day}\n                today={isSameDay(day, now)}\n                active={isDayActive(day)}\n                onChange={handleDayChange}\n                hidden={!showNeighboringMonth && !sameMonth}\n                disabled={isDayDisabled(day)}\n                selectionStart={isDaySelectionStart(day, i)}\n                selectionEnd={isDaySelectionEnd(day, i)}\n                hintedSelectionStart={isHintedDaySelectionStart?.(day, i)}\n                hintedSelectionEnd={isHintedDaySelectionEnd?.(day, i)}\n                selected={isDaySelected?.(day)}\n                focused={isDayFocused(day)}\n                onEnter={onDayEnter}\n                onLeave={onDayLeave}\n                hinted={isDayHinted?.(day)}\n                sameMonth={sameMonth}\n                size={size}\n                {...dayProps}\n              />\n            );\n          })}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"CalendarDays.js","names":["React","classNames","useTodayDate","getDaysNames","getWeeks","isSameDay","isSameMonth","CalendarDay","useConfigProvider","Footnote","CalendarDays","viewDate","value","weekStartsOn","onDayChange","isDaySelected","isDayActive","isDaySelectionEnd","isDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","isHintedDaySelectionStart","isHintedDaySelectionEnd","isDayFocused","isDayDisabled","size","showNeighboringMonth","dayProps","className","listenDayChangesForUpdate","props","locale","ref","useRef","now","weeks","useMemo","daysNames","handleDayChange","useCallback","date","current","focus","styles","map","dayName","week","i","day","sameMonth","toISOString"],"sources":["../../../../src/components/CalendarDays/CalendarDays.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useTodayDate } from '../../hooks/useTodayDate';\nimport { getDaysNames, getWeeks } from '../../lib/calendar';\nimport { isSameDay, isSameMonth } from '../../lib/date';\nimport { CalendarDay, CalendarDayElementProps } from '../CalendarDay/CalendarDay';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './CalendarDays.module.css';\n\nexport interface CalendarDaysProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  value?: Date | Array<Date | null>;\n  viewDate: Date;\n  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  showNeighboringMonth?: boolean;\n  size?: 's' | 'm';\n  dayProps?: CalendarDayElementProps;\n  listenDayChangesForUpdate?: boolean;\n  onDayChange(value: Date): void;\n  isDayDisabled(value: Date): boolean;\n  isDaySelectionStart(value: Date, dayOfWeek: number): boolean;\n  isDaySelectionEnd(value: Date, dayOfWeek: number): boolean;\n  isHintedDaySelectionStart?(value: Date, dayOfWeek: number): boolean;\n  isHintedDaySelectionEnd?(value: Date, dayOfWeek: number): boolean;\n  isDayActive(value: Date): boolean;\n  isDayHinted?(value: Date): boolean;\n  isDaySelected?(value: Date): boolean;\n  isDayFocused(value: Date): boolean;\n  onDayEnter?(value: Date): void;\n  onDayLeave?(value: Date): void;\n}\n\nexport const CalendarDays = ({\n  viewDate,\n  value,\n  weekStartsOn,\n  onDayChange,\n  isDaySelected,\n  isDayActive,\n  isDaySelectionEnd,\n  isDaySelectionStart,\n  onDayEnter,\n  onDayLeave,\n  isDayHinted,\n  isHintedDaySelectionStart,\n  isHintedDaySelectionEnd,\n  isDayFocused,\n  isDayDisabled,\n  size,\n  showNeighboringMonth = false,\n  dayProps,\n  className,\n  listenDayChangesForUpdate = false,\n  ...props\n}: CalendarDaysProps) => {\n  const { locale } = useConfigProvider();\n  const ref = React.useRef<HTMLDivElement>(null);\n  const now = useTodayDate(listenDayChangesForUpdate);\n\n  const weeks = React.useMemo(() => getWeeks(viewDate, weekStartsOn), [weekStartsOn, viewDate]);\n\n  const daysNames = React.useMemo(\n    () => getDaysNames(now, weekStartsOn, locale),\n    [locale, now, weekStartsOn],\n  );\n\n  const handleDayChange = React.useCallback(\n    (date: Date) => {\n      onDayChange(date);\n\n      ref.current?.focus();\n    },\n    [onDayChange],\n  );\n\n  return (\n    <div {...props} className={classNames(styles['CalendarDays'], className)} ref={ref}>\n      <div\n        className={classNames(\n          styles['CalendarDays__row'],\n          size && styles[`CalendarDays__row--size-${size}`],\n        )}\n      >\n        {daysNames.map((dayName) => (\n          <Footnote key={dayName} className={styles['CalendarDays__weekday']}>\n            {dayName}\n          </Footnote>\n        ))}\n      </div>\n\n      {weeks.map((week, i) => (\n        <div\n          className={classNames(\n            styles['CalendarDays__row'],\n            size && styles[`CalendarDays__row--size-${size}`],\n          )}\n          key={i}\n        >\n          {week.map((day, i) => {\n            const sameMonth = isSameMonth(day, viewDate);\n            return (\n              <CalendarDay\n                key={day.toISOString()}\n                day={day}\n                today={isSameDay(day, now)}\n                active={isDayActive(day)}\n                onChange={handleDayChange}\n                hidden={!showNeighboringMonth && !sameMonth}\n                disabled={isDayDisabled(day)}\n                selectionStart={isDaySelectionStart(day, i)}\n                selectionEnd={isDaySelectionEnd(day, i)}\n                hintedSelectionStart={isHintedDaySelectionStart?.(day, i)}\n                hintedSelectionEnd={isHintedDaySelectionEnd?.(day, i)}\n                selected={isDaySelected?.(day)}\n                focused={isDayFocused(day)}\n                onEnter={onDayEnter}\n                onLeave={onDayLeave}\n                hinted={isDayHinted?.(day)}\n                sameMonth={sameMonth}\n                size={size}\n                {...dayProps}\n              />\n            );\n          })}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/cssm/components/CalendarHeader/CalendarHeader.js

@@ -3,16 +3,16 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["className"],
   _excluded2 = ["className"];
 import * as React from 'react';
-import { setMonth, setYear, subMonths, addMonths } from '../../lib/date';
-import { Icon20ChevronLeftOutline, Icon20ChevronRightOutline, Icon12Dropdown } from '@vkontakte/icons';
-import { Tappable } from '../Tappable/Tappable';
+import { Icon12Dropdown, Icon20ChevronLeftOutline, Icon20ChevronRightOutline } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
-import { CustomSelect } from '../CustomSelect/CustomSelect';
 import { SizeType } from '../../lib/adaptivity';
 import { getMonths, getYears } from '../../lib/calendar';
+import { addMonths, setMonth, setYear, subMonths } from '../../lib/date';
+import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';
 import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
+import { CustomSelect } from '../CustomSelect/CustomSelect';
+import { Tappable } from '../Tappable/Tappable';
 import { Paragraph } from '../Typography/Paragraph/Paragraph';
-import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';
 import "./CalendarHeader.module.css";
 export var CalendarHeader = function CalendarHeader(_ref) {
   var viewDate = _ref.viewDate,

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

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeader.js","names":["React","setMonth","setYear","subMonths","addMonths","Icon20ChevronLeftOutline","Icon20ChevronRightOutline","Icon12Dropdown","Tappable","classNames","CustomSelect","SizeType","getMonths","getYears","useConfigProvider","Paragraph","AdaptivityProvider","CalendarHeader","viewDate","onChange","prevMonth","nextMonth","disablePickers","onNextMonth","onPrevMonth","className","prevMonthProps","nextMonthProps","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","prevMonthIcon","nextMonthIcon","locale","onMonthsChange","useCallback","event","Number","target","value","onYearChange","months","useMemo","map","label","currentYear","getFullYear","years","formatter","Intl","DateTimeFormat","year","month","prevMonthClassName","restPrevMonthProps","nextMonthClassName","restNextMonthProps","REGULAR","format","COMPACT","getMonth"],"sources":["../../../../src/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { setMonth, setYear, subMonths, addMonths } from '../../lib/date';\nimport {\n  Icon20ChevronLeftOutline,\n  Icon20ChevronRightOutline,\n  Icon12Dropdown,\n} from '@vkontakte/icons';\nimport { Tappable, TappableElementProps } from '../Tappable/Tappable';\nimport { classNames } from '@vkontakte/vkjs';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getMonths, getYears } from '../../lib/calendar';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport styles from './CalendarHeader.module.css';\n\ntype ArrowMonthProps = Omit<TappableElementProps, 'onClick' | 'aria-label'>;\n\nexport interface CalendarHeaderProps\n  extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className'> {\n  viewDate: Date;\n  prevMonth?: boolean;\n  nextMonth?: boolean;\n  disablePickers?: boolean;\n  prevMonthAriaLabel?: string;\n  nextMonthAriaLabel?: string;\n  changeMonthAriaLabel?: string;\n  changeYearAriaLabel?: string;\n  prevMonthIcon?: React.ReactNode;\n  nextMonthIcon?: React.ReactNode;\n  prevMonthProps?: ArrowMonthProps;\n  nextMonthProps?: ArrowMonthProps;\n  onChange(viewDate: Date): void;\n  /**\n   * Нажатие на кнопку переключения на следующий месяц.\n   */\n  onNextMonth?(): void;\n  /**\n   * Нажатие на кнопку переключения на предыдущий месяц.\n   */\n  onPrevMonth?(): void;\n}\n\nexport const CalendarHeader = ({\n  viewDate,\n  onChange,\n  prevMonth = true,\n  nextMonth = true,\n  disablePickers = false,\n  onNextMonth,\n  onPrevMonth,\n  className,\n  prevMonthProps = {},\n  nextMonthProps = {},\n  prevMonthAriaLabel = 'Предыдущий месяц',\n  nextMonthAriaLabel = 'Следующий месяц',\n  changeMonthAriaLabel = 'Изменить месяц',\n  changeYearAriaLabel = 'Изменить год',\n  prevMonthIcon = (\n    <Icon20ChevronLeftOutline\n      className={styles['CalendarHeader__nav-icon--accent']}\n      width={30}\n      height={30}\n    />\n  ),\n  nextMonthIcon = (\n    <Icon20ChevronRightOutline\n      className={styles['CalendarHeader__nav-icon--accent']}\n      width={30}\n      height={30}\n    />\n  ),\n}: CalendarHeaderProps) => {\n  const { locale } = useConfigProvider();\n  const onMonthsChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange(setMonth(viewDate, Number(event.target.value))),\n    [onChange, viewDate],\n  );\n  const onYearChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange(setYear(viewDate, Number(event.target.value))),\n    [onChange, viewDate],\n  );\n\n  const months = React.useMemo(\n    () =>\n      getMonths(locale).map(({ value, label }) => ({\n        value,\n        label: <span className={styles['CalendarHeader__month']}>{label}</span>,\n      })),\n    [locale],\n  );\n\n  const currentYear = viewDate.getFullYear();\n\n  const years = React.useMemo(() => getYears(currentYear, 100), [currentYear]);\n\n  const formatter = new Intl.DateTimeFormat(locale, {\n    year: 'numeric',\n    month: 'long',\n  });\n\n  const { className: prevMonthClassName, ...restPrevMonthProps } = prevMonthProps;\n  const { className: nextMonthClassName, ...restNextMonthProps } = nextMonthProps;\n\n  return (\n    <div className={classNames(styles['CalendarHeader'], className)}>\n      {prevMonth && (\n        <AdaptivityProvider sizeX={SizeType.REGULAR}>\n          <Tappable\n            className={classNames(\n              styles['CalendarHeader__nav-icon'],\n              styles['CalendarHeader__nav-icon-prev'],\n              prevMonthClassName,\n            )}\n            onClick={onPrevMonth}\n            aria-label={`${prevMonthAriaLabel}, ${formatter.format(subMonths(viewDate, 1))}`}\n            {...restPrevMonthProps}\n          >\n            {prevMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n      {disablePickers ? (\n        <Paragraph className={styles['CalendarHeader__pickers']} weight=\"2\">\n          <span className={styles['CalendarHeader__month']}>\n            {new Intl.DateTimeFormat(locale, {\n              month: 'long',\n            }).format(viewDate)}\n          </span>\n          &nbsp;\n          {new Intl.DateTimeFormat(locale, {\n            year: 'numeric',\n          }).format(viewDate)}\n        </Paragraph>\n      ) : (\n        <AdaptivityProvider sizeY={SizeType.COMPACT}>\n          <div className={styles['CalendarHeader__pickers']}>\n            <CustomSelect\n              className={styles['CalendarHeader__picker']}\n              value={viewDate.getMonth()}\n              options={months}\n              dropdownOffsetDistance={4}\n              fixDropdownWidth={false}\n              icon={<Icon12Dropdown />}\n              onChange={onMonthsChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeMonthAriaLabel}\n            />\n            <CustomSelect\n              className={styles['CalendarHeader__picker']}\n              value={viewDate.getFullYear()}\n              options={years}\n              dropdownOffsetDistance={4}\n              fixDropdownWidth={false}\n              icon={<Icon12Dropdown />}\n              onChange={onYearChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeYearAriaLabel}\n            />\n          </div>\n        </AdaptivityProvider>\n      )}\n      {nextMonth && (\n        <AdaptivityProvider sizeX={SizeType.REGULAR}>\n          <Tappable\n            className={classNames(\n              styles['CalendarHeader__nav-icon'],\n              styles['CalendarHeader__nav-icon-next'],\n              nextMonthClassName,\n            )}\n            onClick={onNextMonth}\n            aria-label={`${nextMonthAriaLabel}, ${formatter.format(addMonths(viewDate, 1))}`}\n            {...restNextMonthProps}\n          >\n            {nextMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,EAAEC,OAAO,EAAEC,SAAS,EAAEC,SAAS,QAAQ,gBAAgB;AACxE,SACEC,wBAAwB,EACxBC,yBAAyB,EACzBC,cAAc,QACT,kBAAkB;AACzB,SAASC,QAAQ,QAA8B,sBAAsB;AACrE,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,SAAS,EAAEC,QAAQ,QAAQ,oBAAoB;AACxD,SAASC,iBAAiB,QAAQ,yCAAyC;AAC3E,SAASC,SAAS,QAAQ,mCAAmC;AAC7D,SAASC,kBAAkB,QAAQ,0CAA0C;AAAC;AA8B9E,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAc,OA6BA;EAAA,IA5BzBC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IAAA,sBACRC,SAAS;IAATA,SAAS,+BAAG,IAAI;IAAA,sBAChBC,SAAS;IAATA,SAAS,+BAAG,IAAI;IAAA,2BAChBC,cAAc;IAAdA,cAAc,oCAAG,KAAK;IACtBC,WAAW,QAAXA,WAAW;IACXC,WAAW,QAAXA,WAAW;IACXC,SAAS,QAATA,SAAS;IAAA,2BACTC,cAAc;IAAdA,cAAc,oCAAG,CAAC,CAAC;IAAA,2BACnBC,cAAc;IAAdA,cAAc,oCAAG,CAAC,CAAC;IAAA,6BACnBC,kBAAkB;IAAlBA,kBAAkB,sCAAG,kBAAkB;IAAA,6BACvCC,kBAAkB;IAAlBA,kBAAkB,sCAAG,iBAAiB;IAAA,6BACtCC,oBAAoB;IAApBA,oBAAoB,sCAAG,gBAAgB;IAAA,6BACvCC,mBAAmB;IAAnBA,mBAAmB,sCAAG,cAAc;IAAA,0BACpCC,aAAa;IAAbA,aAAa,gDACX,oBAAC,wBAAwB;MACvB,SAAS,wCAA6C;MACtD,KAAK,EAAE,EAAG;MACV,MAAM,EAAE;IAAG,EACX;IAAA,0BAEJC,aAAa;IAAbA,aAAa,gDACX,oBAAC,yBAAyB;MACxB,SAAS,wCAA6C;MACtD,KAAK,EAAE,EAAG;MACV,MAAM,EAAE;IAAG,EACX;EAGJ,yBAAmBnB,iBAAiB,EAAE;IAA9BoB,MAAM,sBAANA,MAAM;EACd,IAAMC,cAAc,GAAGnC,KAAK,CAACoC,WAAW,CACtC,UAACC,KAA2C;IAAA,OAC1ClB,QAAQ,CAAClB,QAAQ,CAACiB,QAAQ,EAAEoB,MAAM,CAACD,KAAK,CAACE,MAAM,CAACC,KAAK,CAAC,CAAC,CAAC;EAAA,GAC1D,CAACrB,QAAQ,EAAED,QAAQ,CAAC,CACrB;EACD,IAAMuB,YAAY,GAAGzC,KAAK,CAACoC,WAAW,CACpC,UAACC,KAA2C;IAAA,OAC1ClB,QAAQ,CAACjB,OAAO,CAACgB,QAAQ,EAAEoB,MAAM,CAACD,KAAK,CAACE,MAAM,CAACC,KAAK,CAAC,CAAC,CAAC;EAAA,GACzD,CAACrB,QAAQ,EAAED,QAAQ,CAAC,CACrB;EAED,IAAMwB,MAAM,GAAG1C,KAAK,CAAC2C,OAAO,CAC1B;IAAA,OACE/B,SAAS,CAACsB,MAAM,CAAC,CAACU,GAAG,CAAC;MAAA,IAAGJ,KAAK,SAALA,KAAK;QAAEK,KAAK,SAALA,KAAK;MAAA,OAAQ;QAC3CL,KAAK,EAALA,KAAK;QACLK,KAAK,eAAE;UAAM,SAAS;QAAkC,GAAEA,KAAK;MACjE,CAAC;IAAA,CAAC,CAAC;EAAA,GACL,CAACX,MAAM,CAAC,CACT;EAED,IAAMY,WAAW,GAAG5B,QAAQ,CAAC6B,WAAW,EAAE;EAE1C,IAAMC,KAAK,GAAGhD,KAAK,CAAC2C,OAAO,CAAC;IAAA,OAAM9B,QAAQ,CAACiC,WAAW,EAAE,GAAG,CAAC;EAAA,GAAE,CAACA,WAAW,CAAC,CAAC;EAE5E,IAAMG,SAAS,GAAG,IAAIC,IAAI,CAACC,cAAc,CAACjB,MAAM,EAAE;IAChDkB,IAAI,EAAE,SAAS;IACfC,KAAK,EAAE;EACT,CAAC,CAAC;EAEF,IAAmBC,kBAAkB,GAA4B5B,cAAc,CAAvED,SAAS;IAAyB8B,kBAAkB,4BAAK7B,cAAc;EAC/E,IAAmB8B,kBAAkB,GAA4B7B,cAAc,CAAvEF,SAAS;IAAyBgC,kBAAkB,4BAAK9B,cAAc;EAE/E,oBACE;IAAK,SAAS,EAAElB,UAAU,uBAA2BgB,SAAS;EAAE,GAC7DL,SAAS,iBACR,oBAAC,kBAAkB;IAAC,KAAK,EAAET,QAAQ,CAAC+C;EAAQ,gBAC1C,oBAAC,QAAQ;IACP,SAAS,EAAEjD,UAAU,sEAGnB6C,kBAAkB,CAClB;IACF,OAAO,EAAE9B,WAAY;IACrB,wBAAeI,kBAAkB,eAAKqB,SAAS,CAACU,MAAM,CAACxD,SAAS,CAACe,QAAQ,EAAE,CAAC,CAAC,CAAC;EAAG,GAC7EqC,kBAAkB,GAErBvB,aAAa,CACL,CAEd,EACAV,cAAc,gBACb,oBAAC,SAAS;IAAC,SAAS,+BAAoC;IAAC,MAAM,EAAC;EAAG,gBACjE;IAAM,SAAS;EAAkC,GAC9C,IAAI4B,IAAI,CAACC,cAAc,CAACjB,MAAM,EAAE;IAC/BmB,KAAK,EAAE;EACT,CAAC,CAAC,CAACM,MAAM,CAACzC,QAAQ,CAAC,CACd,QAEP,EAAC,IAAIgC,IAAI,CAACC,cAAc,CAACjB,MAAM,EAAE;IAC/BkB,IAAI,EAAE;EACR,CAAC,CAAC,CAACO,MAAM,CAACzC,QAAQ,CAAC,CACT,gBAEZ,oBAAC,kBAAkB;IAAC,KAAK,EAAEP,QAAQ,CAACiD;EAAQ,gBAC1C;IAAK,SAAS;EAAoC,gBAChD,oBAAC,YAAY;IACX,SAAS,8BAAmC;IAC5C,KAAK,EAAE1C,QAAQ,CAAC2C,QAAQ,EAAG;IAC3B,OAAO,EAAEnB,MAAO;IAChB,sBAAsB,EAAE,CAAE;IAC1B,gBAAgB,EAAE,KAAM;IACxB,IAAI,eAAE,oBAAC,cAAc,OAAI;IACzB,QAAQ,EAAEP,cAAe;IACzB,mBAAmB,EAAE,KAAM;IAC3B,UAAU,EAAC,QAAQ;IACnB,cAAYL;EAAqB,EACjC,eACF,oBAAC,YAAY;IACX,SAAS,8BAAmC;IAC5C,KAAK,EAAEZ,QAAQ,CAAC6B,WAAW,EAAG;IAC9B,OAAO,EAAEC,KAAM;IACf,sBAAsB,EAAE,CAAE;IAC1B,gBAAgB,EAAE,KAAM;IACxB,IAAI,eAAE,oBAAC,cAAc,OAAI;IACzB,QAAQ,EAAEP,YAAa;IACvB,mBAAmB,EAAE,KAAM;IAC3B,UAAU,EAAC,QAAQ;IACnB,cAAYV;EAAoB,EAChC,CACE,CAET,EACAV,SAAS,iBACR,oBAAC,kBAAkB;IAAC,KAAK,EAAEV,QAAQ,CAAC+C;EAAQ,gBAC1C,oBAAC,QAAQ;IACP,SAAS,EAAEjD,UAAU,sEAGnB+C,kBAAkB,CAClB;IACF,OAAO,EAAEjC,WAAY;IACrB,wBAAeM,kBAAkB,eAAKoB,SAAS,CAACU,MAAM,CAACvD,SAAS,CAACc,QAAQ,EAAE,CAAC,CAAC,CAAC;EAAG,GAC7EuC,kBAAkB,GAErBxB,aAAa,CACL,CAEd,CACG;AAEV,CAAC"}
+{"version":3,"file":"CalendarHeader.js","names":["React","Icon12Dropdown","Icon20ChevronLeftOutline","Icon20ChevronRightOutline","classNames","SizeType","getMonths","getYears","addMonths","setMonth","setYear","subMonths","AdaptivityProvider","useConfigProvider","CustomSelect","Tappable","Paragraph","CalendarHeader","viewDate","onChange","prevMonth","nextMonth","disablePickers","onNextMonth","onPrevMonth","className","prevMonthProps","nextMonthProps","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","prevMonthIcon","nextMonthIcon","locale","onMonthsChange","useCallback","event","Number","target","value","onYearChange","months","useMemo","map","label","currentYear","getFullYear","years","formatter","Intl","DateTimeFormat","year","month","prevMonthClassName","restPrevMonthProps","nextMonthClassName","restNextMonthProps","REGULAR","format","COMPACT","getMonth"],"sources":["../../../../src/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon12Dropdown,\n  Icon20ChevronLeftOutline,\n  Icon20ChevronRightOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getMonths, getYears } from '../../lib/calendar';\nimport { addMonths, setMonth, setYear, subMonths } from '../../lib/date';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport { Tappable, TappableElementProps } from '../Tappable/Tappable';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport styles from './CalendarHeader.module.css';\n\ntype ArrowMonthProps = Omit<TappableElementProps, 'onClick' | 'aria-label'>;\n\nexport interface CalendarHeaderProps\n  extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className'> {\n  viewDate: Date;\n  prevMonth?: boolean;\n  nextMonth?: boolean;\n  disablePickers?: boolean;\n  prevMonthAriaLabel?: string;\n  nextMonthAriaLabel?: string;\n  changeMonthAriaLabel?: string;\n  changeYearAriaLabel?: string;\n  prevMonthIcon?: React.ReactNode;\n  nextMonthIcon?: React.ReactNode;\n  prevMonthProps?: ArrowMonthProps;\n  nextMonthProps?: ArrowMonthProps;\n  onChange(viewDate: Date): void;\n  /**\n   * Нажатие на кнопку переключения на следующий месяц.\n   */\n  onNextMonth?(): void;\n  /**\n   * Нажатие на кнопку переключения на предыдущий месяц.\n   */\n  onPrevMonth?(): void;\n}\n\nexport const CalendarHeader = ({\n  viewDate,\n  onChange,\n  prevMonth = true,\n  nextMonth = true,\n  disablePickers = false,\n  onNextMonth,\n  onPrevMonth,\n  className,\n  prevMonthProps = {},\n  nextMonthProps = {},\n  prevMonthAriaLabel = 'Предыдущий месяц',\n  nextMonthAriaLabel = 'Следующий месяц',\n  changeMonthAriaLabel = 'Изменить месяц',\n  changeYearAriaLabel = 'Изменить год',\n  prevMonthIcon = (\n    <Icon20ChevronLeftOutline\n      className={styles['CalendarHeader__nav-icon--accent']}\n      width={30}\n      height={30}\n    />\n  ),\n  nextMonthIcon = (\n    <Icon20ChevronRightOutline\n      className={styles['CalendarHeader__nav-icon--accent']}\n      width={30}\n      height={30}\n    />\n  ),\n}: CalendarHeaderProps) => {\n  const { locale } = useConfigProvider();\n  const onMonthsChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange(setMonth(viewDate, Number(event.target.value))),\n    [onChange, viewDate],\n  );\n  const onYearChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange(setYear(viewDate, Number(event.target.value))),\n    [onChange, viewDate],\n  );\n\n  const months = React.useMemo(\n    () =>\n      getMonths(locale).map(({ value, label }) => ({\n        value,\n        label: <span className={styles['CalendarHeader__month']}>{label}</span>,\n      })),\n    [locale],\n  );\n\n  const currentYear = viewDate.getFullYear();\n\n  const years = React.useMemo(() => getYears(currentYear, 100), [currentYear]);\n\n  const formatter = new Intl.DateTimeFormat(locale, {\n    year: 'numeric',\n    month: 'long',\n  });\n\n  const { className: prevMonthClassName, ...restPrevMonthProps } = prevMonthProps;\n  const { className: nextMonthClassName, ...restNextMonthProps } = nextMonthProps;\n\n  return (\n    <div className={classNames(styles['CalendarHeader'], className)}>\n      {prevMonth && (\n        <AdaptivityProvider sizeX={SizeType.REGULAR}>\n          <Tappable\n            className={classNames(\n              styles['CalendarHeader__nav-icon'],\n              styles['CalendarHeader__nav-icon-prev'],\n              prevMonthClassName,\n            )}\n            onClick={onPrevMonth}\n            aria-label={`${prevMonthAriaLabel}, ${formatter.format(subMonths(viewDate, 1))}`}\n            {...restPrevMonthProps}\n          >\n            {prevMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n      {disablePickers ? (\n        <Paragraph className={styles['CalendarHeader__pickers']} weight=\"2\">\n          <span className={styles['CalendarHeader__month']}>\n            {new Intl.DateTimeFormat(locale, {\n              month: 'long',\n            }).format(viewDate)}\n          </span>\n          &nbsp;\n          {new Intl.DateTimeFormat(locale, {\n            year: 'numeric',\n          }).format(viewDate)}\n        </Paragraph>\n      ) : (\n        <AdaptivityProvider sizeY={SizeType.COMPACT}>\n          <div className={styles['CalendarHeader__pickers']}>\n            <CustomSelect\n              className={styles['CalendarHeader__picker']}\n              value={viewDate.getMonth()}\n              options={months}\n              dropdownOffsetDistance={4}\n              fixDropdownWidth={false}\n              icon={<Icon12Dropdown />}\n              onChange={onMonthsChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeMonthAriaLabel}\n            />\n            <CustomSelect\n              className={styles['CalendarHeader__picker']}\n              value={viewDate.getFullYear()}\n              options={years}\n              dropdownOffsetDistance={4}\n              fixDropdownWidth={false}\n              icon={<Icon12Dropdown />}\n              onChange={onYearChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeYearAriaLabel}\n            />\n          </div>\n        </AdaptivityProvider>\n      )}\n      {nextMonth && (\n        <AdaptivityProvider sizeX={SizeType.REGULAR}>\n          <Tappable\n            className={classNames(\n              styles['CalendarHeader__nav-icon'],\n              styles['CalendarHeader__nav-icon-next'],\n              nextMonthClassName,\n            )}\n            onClick={onNextMonth}\n            aria-label={`${nextMonthAriaLabel}, ${formatter.format(addMonths(viewDate, 1))}`}\n            {...restNextMonthProps}\n          >\n            {nextMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';
-import { CalendarDaysProps } from '../CalendarDays/CalendarDays';
 import { HasRootRef } from '../../types';
+import { CalendarDaysProps } from '../CalendarDays/CalendarDays';
+import { CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';
 export interface CalendarRangeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, Pick<CalendarHeaderProps, 'prevMonthAriaLabel' | 'nextMonthAriaLabel' | 'changeMonthAriaLabel' | 'changeYearAriaLabel' | 'prevMonthIcon' | 'nextMonthIcon'>, Pick<CalendarDaysProps, 'listenDayChangesForUpdate'>, HasRootRef<HTMLDivElement> {
     value?: Array<Date | null>;
     disablePast?: boolean;

package/dist/cssm/components/CalendarRange/CalendarRange.js

@@ -4,11 +4,11 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["value", "onChange", "disablePast", "disableFuture", "shouldDisableDate", "onClose", "weekStartsOn", "getRootRef", "disablePickers", "prevMonthAriaLabel", "nextMonthAriaLabel", "changeMonthAriaLabel", "changeYearAriaLabel", "changeDayAriaLabel", "prevMonthIcon", "nextMonthIcon", "className", "listenDayChangesForUpdate"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { addMonths, isSameMonth, isSameDay, isBefore, isAfter, startOfDay, endOfDay, isWithinInterval } from '../../lib/date';
-import { CalendarHeader } from '../CalendarHeader/CalendarHeader';
-import { CalendarDays } from '../CalendarDays/CalendarDays';
-import { navigateDate, setTimeEqual, isLastDay, isFirstDay } from '../../lib/calendar';
 import { useCalendar } from '../../hooks/useCalendar';
+import { isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';
+import { addMonths, endOfDay, isAfter, isBefore, isSameDay, isSameMonth, isWithinInterval, startOfDay } from '../../lib/date';
+import { CalendarDays } from '../CalendarDays/CalendarDays';
+import { CalendarHeader } from '../CalendarHeader/CalendarHeader';
 import "./CalendarRange.module.css";
 var getIsDaySelected = function getIsDaySelected(day, value) {
   if (!(value !== null && value !== void 0 && value[0]) || !value[1]) {