@vkontakte/vkui 7.0.0-dev-efd91c.2 → 7.0.0-dev-efd91c.4

package/dist/components/AppRoot/AppRootPortal.js

@@ -3,36 +3,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { useColorScheme } from "../../hooks/useColorScheme.js";
 import { createPortal } from "../../lib/createPortal.js";
-import { getDocumentBody } from "../../lib/dom.js";
+import { useDOM } from "../../lib/dom.js";
 import { isRefObject } from "../../lib/isRefObject.js";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
 import { ColorSchemeProvider } from "../ColorSchemeProvider/ColorSchemeProvider.js";
 import { AppRootContext } from "./AppRootContext.js";
 import { AppRootStyleContainer } from "./AppRootStyleContainer.js";
 export const AppRootPortal = ({ children, usePortal, className })=>{
-    const { setPortalRoot, appRoot, mode, disablePortal: disableCreatePortalInGlobalPortalRoot } = React.useContext(AppRootContext);
+    const { mode, disablePortal: disableCreatePortalInGlobalPortalRoot } = React.useContext(AppRootContext);
     const colorScheme = useColorScheme();
     const canUsePortal = shouldUsePortal(usePortal, mode, Boolean(disableCreatePortalInGlobalPortalRoot));
     const portalContainer = usePortalContainer(usePortal);
-    useIsomorphicLayoutEffect(// Создаём контейнер для портала по запросу один раз
-    // и пока приложение не размонтируется.
-    // Удаление созданной ноды происходит в AppRoot
-    function initializePortalRootIfNeeded() {
-        const shouldCreatePortalRoot = canUsePortal && portalContainer === null;
-        if (shouldCreatePortalRoot) {
-            const documentBody = getDocumentBody(appRoot.current);
-            const portal = documentBody.ownerDocument.createElement('div');
-            documentBody.appendChild(portal);
-            setPortalRoot(portal);
-        }
-    // Note:
-    // Очистка и удаление `portalRoot` делегируется `AppRoot`, т.к. экземпляров `AppRootPortal` может быть несколько и размонтирование одного из них удалит `portalRoot`, что сломает работу других экземпляров.
-    }, [
-        canUsePortal,
-        appRoot,
-        portalContainer,
-        setPortalRoot
-    ]);
     if (canUsePortal && portalContainer) {
         return createPortal(/*#__PURE__*/ _jsx(ColorSchemeProvider, {
             value: colorScheme,
@@ -54,14 +34,17 @@ function shouldUsePortal(usePortal, mode, disableCreatePortalInGlobalPortalRoot)
     return disableCreatePortalInGlobalPortalRoot === false && usePortal === true;
 }
 function usePortalContainer(usePortal) {
-    const { portalRoot, popoutModalRoot } = React.useContext(AppRootContext);
-    if (typeof usePortal === 'boolean' || usePortal === undefined) {
-        return portalRoot;
+    const { portalRoot: portalRootFromContext } = React.useContext(AppRootContext);
+    const { document } = useDOM();
+    if (usePortal && typeof usePortal !== 'boolean') {
+        return isRefObject(usePortal) ? usePortal.current : usePortal;
     }
-    if (usePortal === 'SplitLayout') {
-        return popoutModalRoot.current || portalRoot;
-    }
-    return isRefObject(usePortal) ? usePortal.current : usePortal;
+    const resolvedPortalFromContext = isRefObject(portalRootFromContext) ? portalRootFromContext.current : portalRootFromContext;
+    // если portalRoot не передали через AppRoot, то мы используем body
+    // мы можем использовать body как портал,
+    // так как все стили передаются вместе с AppRootStyleContainer
+    const portalRoot = resolvedPortalFromContext || (document === null || document === void 0 ? void 0 : document.body) || null;
+    return portalRoot;
 }
 
 //# sourceMappingURL=AppRootPortal.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AppRoot/AppRootPortal.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useColorScheme } from '../../hooks/useColorScheme';\nimport { createPortal } from '../../lib/createPortal';\nimport { getDocumentBody } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasChildren } from '../../types';\nimport { ColorSchemeProvider } from '../ColorSchemeProvider/ColorSchemeProvider';\nimport { AppRootContext, type AppRootContextInterface } from './AppRootContext';\nimport { AppRootStyleContainer } from './AppRootStyleContainer';\n\nexport interface AppRootPortalProps extends HasChildren {\n  /**\n   * - При передаче `true` будет использовать `portalRoot` из контекста `AppRoot`.\n   * - При передаче элемента будут игнорироваться `portalRoot` и `disablePortal` из контекста `AppRoot`.\n   * - При передаче `SplitLayout` будет использоваться контейнер внутри `SplitLayout`, сразу после контента приложения.\n   *   Если контейнера `SplitLayout` в приложении нет, то будет использован глобальный `portalRoot`, чаще всего\n   *   это последний дочерний элемент `body`.\n   */\n  usePortal?: boolean | HTMLElement | React.RefObject<HTMLElement> | null | 'SplitLayout';\n  className?: string;\n}\n\nexport const AppRootPortal = ({\n  children,\n  usePortal,\n  className,\n}: AppRootPortalProps): React.ReactNode => {\n  const {\n    setPortalRoot,\n    appRoot,\n    mode,\n    disablePortal: disableCreatePortalInGlobalPortalRoot,\n  } = React.useContext(AppRootContext);\n  const colorScheme = useColorScheme();\n\n  const canUsePortal = shouldUsePortal(\n    usePortal,\n    mode,\n    Boolean(disableCreatePortalInGlobalPortalRoot),\n  );\n  const portalContainer = usePortalContainer(usePortal);\n\n  useIsomorphicLayoutEffect(\n    // Создаём контейнер для портала по запросу один раз\n    // и пока приложение не размонтируется.\n    // Удаление созданной ноды происходит в AppRoot\n    function initializePortalRootIfNeeded() {\n      const shouldCreatePortalRoot = canUsePortal && portalContainer === null;\n      if (shouldCreatePortalRoot) {\n        const documentBody = getDocumentBody(appRoot.current);\n        const portal = documentBody.ownerDocument.createElement('div');\n        documentBody.appendChild(portal);\n\n        setPortalRoot(portal);\n      }\n\n      // Note:\n      // Очистка и удаление `portalRoot` делегируется `AppRoot`, т.к. экземпляров `AppRootPortal` может быть несколько и размонтирование одного из них удалит `portalRoot`, что сломает работу других экземпляров.\n    },\n    [canUsePortal, appRoot, portalContainer, setPortalRoot],\n  );\n\n  if (canUsePortal && portalContainer) {\n    return createPortal(\n      <ColorSchemeProvider value={colorScheme}>\n        <AppRootStyleContainer className={className}>{children}</AppRootStyleContainer>\n      </ColorSchemeProvider>,\n      portalContainer,\n    );\n  }\n\n  return children;\n};\n\nfunction shouldUsePortal(\n  usePortal: AppRootPortalProps['usePortal'],\n  mode: AppRootContextInterface['mode'],\n  disableCreatePortalInGlobalPortalRoot: boolean,\n) {\n  if (usePortal === undefined) {\n    return disableCreatePortalInGlobalPortalRoot === false && mode !== 'full';\n  }\n\n  if (typeof usePortal !== 'boolean') {\n    return true;\n  }\n\n  return disableCreatePortalInGlobalPortalRoot === false && usePortal === true;\n}\n\nfunction usePortalContainer(usePortal: AppRootPortalProps['usePortal']): HTMLElement | null {\n  const { portalRoot, popoutModalRoot } = React.useContext(AppRootContext);\n  if (typeof usePortal === 'boolean' || usePortal === undefined) {\n    return portalRoot;\n  }\n\n  if (usePortal === 'SplitLayout') {\n    return popoutModalRoot.current || portalRoot;\n  }\n\n  return isRefObject(usePortal) ? usePortal.current : usePortal;\n}\n"],"names":["React","useColorScheme","createPortal","getDocumentBody","isRefObject","useIsomorphicLayoutEffect","ColorSchemeProvider","AppRootContext","AppRootStyleContainer","AppRootPortal","children","usePortal","className","setPortalRoot","appRoot","mode","disablePortal","disableCreatePortalInGlobalPortalRoot","useContext","colorScheme","canUsePortal","shouldUsePortal","Boolean","portalContainer","usePortalContainer","initializePortalRootIfNeeded","shouldCreatePortalRoot","documentBody","current","portal","ownerDocument","createElement","appendChild","value","undefined","portalRoot","popoutModalRoot"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,gCAA6B;AAC5D,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,eAAe,QAAQ,mBAAgB;AAChD,SAASC,WAAW,QAAQ,2BAAwB;AACpD,SAASC,yBAAyB,QAAQ,yCAAsC;AAEhF,SAASC,mBAAmB,QAAQ,gDAA6C;AACjF,SAASC,cAAc,QAAsC,sBAAmB;AAChF,SAASC,qBAAqB,QAAQ,6BAA0B;AAchE,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,QAAQ,EACRC,SAAS,EACTC,SAAS,EACU;IACnB,MAAM,EACJC,aAAa,EACbC,OAAO,EACPC,IAAI,EACJC,eAAeC,qCAAqC,EACrD,GAAGjB,MAAMkB,UAAU,CAACX;IACrB,MAAMY,cAAclB;IAEpB,MAAMmB,eAAeC,gBACnBV,WACAI,MACAO,QAAQL;IAEV,MAAMM,kBAAkBC,mBAAmBb;IAE3CN,0BACE,oDAAoD;IACpD,uCAAuC;IACvC,+CAA+C;IAC/C,SAASoB;QACP,MAAMC,yBAAyBN,gBAAgBG,oBAAoB;QACnE,IAAIG,wBAAwB;YAC1B,MAAMC,eAAexB,gBAAgBW,QAAQc,OAAO;YACpD,MAAMC,SAASF,aAAaG,aAAa,CAACC,aAAa,CAAC;YACxDJ,aAAaK,WAAW,CAACH;YAEzBhB,cAAcgB;QAChB;IAEA,QAAQ;IACR,4MAA4M;IAC9M,GACA;QAACT;QAAcN;QAASS;QAAiBV;KAAc;IAGzD,IAAIO,gBAAgBG,iBAAiB;QACnC,OAAOrB,2BACL,KAACI;YAAoB2B,OAAOd;sBAC1B,cAAA,KAACX;gBAAsBI,WAAWA;0BAAYF;;YAEhDa;IAEJ;IAEA,OAAOb;AACT,EAAE;AAEF,SAASW,gBACPV,SAA0C,EAC1CI,IAAqC,EACrCE,qCAA8C;IAE9C,IAAIN,cAAcuB,WAAW;QAC3B,OAAOjB,0CAA0C,SAASF,SAAS;IACrE;IAEA,IAAI,OAAOJ,cAAc,WAAW;QAClC,OAAO;IACT;IAEA,OAAOM,0CAA0C,SAASN,cAAc;AAC1E;AAEA,SAASa,mBAAmBb,SAA0C;IACpE,MAAM,EAAEwB,UAAU,EAAEC,eAAe,EAAE,GAAGpC,MAAMkB,UAAU,CAACX;IACzD,IAAI,OAAOI,cAAc,aAAaA,cAAcuB,WAAW;QAC7D,OAAOC;IACT;IAEA,IAAIxB,cAAc,eAAe;QAC/B,OAAOyB,gBAAgBR,OAAO,IAAIO;IACpC;IAEA,OAAO/B,YAAYO,aAAaA,UAAUiB,OAAO,GAAGjB;AACtD"}
+{"version":3,"sources":["../../../src/components/AppRoot/AppRootPortal.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useColorScheme } from '../../hooks/useColorScheme';\nimport { createPortal } from '../../lib/createPortal';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport type { HasChildren } from '../../types';\nimport { ColorSchemeProvider } from '../ColorSchemeProvider/ColorSchemeProvider';\nimport { AppRootContext, type AppRootContextInterface } from './AppRootContext';\nimport { AppRootStyleContainer } from './AppRootStyleContainer';\n\nexport interface AppRootPortalProps extends HasChildren {\n  /**\n   * - При передаче `true` в качестве портала будет использован `portalRoot`\n   * из контекста `AppRoot` если он передан в `AppRoot`, иначе `document.body`.\n   * - При передаче элемента будут игнорироваться `portalRoot` и `disablePortal` из контекста `AppRoot`.\n   *\n   * По умолчанию в качестве портала будет использован `document.body`\n   */\n  usePortal?: boolean | HTMLElement | React.RefObject<HTMLElement> | null;\n  className?: string;\n}\n\nexport const AppRootPortal = ({\n  children,\n  usePortal,\n  className,\n}: AppRootPortalProps): React.ReactNode => {\n  const { mode, disablePortal: disableCreatePortalInGlobalPortalRoot } =\n    React.useContext(AppRootContext);\n  const colorScheme = useColorScheme();\n\n  const canUsePortal = shouldUsePortal(\n    usePortal,\n    mode,\n    Boolean(disableCreatePortalInGlobalPortalRoot),\n  );\n\n  const portalContainer = usePortalContainer(usePortal);\n\n  if (canUsePortal && portalContainer) {\n    return createPortal(\n      <ColorSchemeProvider value={colorScheme}>\n        <AppRootStyleContainer className={className}>{children}</AppRootStyleContainer>\n      </ColorSchemeProvider>,\n      portalContainer,\n    );\n  }\n\n  return children;\n};\n\nfunction shouldUsePortal(\n  usePortal: AppRootPortalProps['usePortal'],\n  mode: AppRootContextInterface['mode'],\n  disableCreatePortalInGlobalPortalRoot: boolean,\n) {\n  if (usePortal === undefined) {\n    return disableCreatePortalInGlobalPortalRoot === false && mode !== 'full';\n  }\n\n  if (typeof usePortal !== 'boolean') {\n    return true;\n  }\n\n  return disableCreatePortalInGlobalPortalRoot === false && usePortal === true;\n}\n\nfunction usePortalContainer(usePortal: AppRootPortalProps['usePortal']): HTMLElement | null {\n  const { portalRoot: portalRootFromContext } = React.useContext(AppRootContext);\n\n  const { document } = useDOM();\n\n  if (usePortal && typeof usePortal !== 'boolean') {\n    return isRefObject(usePortal) ? usePortal.current : usePortal;\n  }\n\n  const resolvedPortalFromContext = isRefObject(portalRootFromContext)\n    ? portalRootFromContext.current\n    : portalRootFromContext;\n  // если portalRoot не передали через AppRoot, то мы используем body\n  // мы можем использовать body как портал,\n  // так как все стили передаются вместе с AppRootStyleContainer\n  const portalRoot = resolvedPortalFromContext || document?.body || null;\n  return portalRoot;\n}\n"],"names":["React","useColorScheme","createPortal","useDOM","isRefObject","ColorSchemeProvider","AppRootContext","AppRootStyleContainer","AppRootPortal","children","usePortal","className","mode","disablePortal","disableCreatePortalInGlobalPortalRoot","useContext","colorScheme","canUsePortal","shouldUsePortal","Boolean","portalContainer","usePortalContainer","value","undefined","portalRoot","portalRootFromContext","document","current","resolvedPortalFromContext","body"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,gCAA6B;AAC5D,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,MAAM,QAAQ,mBAAgB;AACvC,SAASC,WAAW,QAAQ,2BAAwB;AAEpD,SAASC,mBAAmB,QAAQ,gDAA6C;AACjF,SAASC,cAAc,QAAsC,sBAAmB;AAChF,SAASC,qBAAqB,QAAQ,6BAA0B;AAchE,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,QAAQ,EACRC,SAAS,EACTC,SAAS,EACU;IACnB,MAAM,EAAEC,IAAI,EAAEC,eAAeC,qCAAqC,EAAE,GAClEd,MAAMe,UAAU,CAACT;IACnB,MAAMU,cAAcf;IAEpB,MAAMgB,eAAeC,gBACnBR,WACAE,MACAO,QAAQL;IAGV,MAAMM,kBAAkBC,mBAAmBX;IAE3C,IAAIO,gBAAgBG,iBAAiB;QACnC,OAAOlB,2BACL,KAACG;YAAoBiB,OAAON;sBAC1B,cAAA,KAACT;gBAAsBI,WAAWA;0BAAYF;;YAEhDW;IAEJ;IAEA,OAAOX;AACT,EAAE;AAEF,SAASS,gBACPR,SAA0C,EAC1CE,IAAqC,EACrCE,qCAA8C;IAE9C,IAAIJ,cAAca,WAAW;QAC3B,OAAOT,0CAA0C,SAASF,SAAS;IACrE;IAEA,IAAI,OAAOF,cAAc,WAAW;QAClC,OAAO;IACT;IAEA,OAAOI,0CAA0C,SAASJ,cAAc;AAC1E;AAEA,SAASW,mBAAmBX,SAA0C;IACpE,MAAM,EAAEc,YAAYC,qBAAqB,EAAE,GAAGzB,MAAMe,UAAU,CAACT;IAE/D,MAAM,EAAEoB,QAAQ,EAAE,GAAGvB;IAErB,IAAIO,aAAa,OAAOA,cAAc,WAAW;QAC/C,OAAON,YAAYM,aAAaA,UAAUiB,OAAO,GAAGjB;IACtD;IAEA,MAAMkB,4BAA4BxB,YAAYqB,yBAC1CA,sBAAsBE,OAAO,GAC7BF;IACJ,mEAAmE;IACnE,yCAAyC;IACzC,8DAA8D;IAC9D,MAAMD,aAAaI,8BAA6BF,qBAAAA,+BAAAA,SAAUG,IAAI,KAAI;IAClE,OAAOL;AACT"}

package/dist/components/AppRoot/helpers.d.ts

@@ -1,5 +1,4 @@
 import type { AppRootUserSelectMode, SafeAreaInsets } from './types';
-export declare const getParentElement: (el: HTMLElement | null) => HTMLElement | null;
 export declare const extractPortalRootByProp: (portalRootProp: HTMLElement | React.RefObject<HTMLElement>) => HTMLElement | null;
 export declare const CUSTOM_PROPERTY_INSET_PREFIX = "--vkui_internal--safe_area_inset_";
 export declare function getSafeAreaInsetsAsCssVariables(safeAreaInsets: SafeAreaInsets | undefined): Record<string, string>;

package/dist/components/AppRoot/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/components/AppRoot/helpers.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAGrE,eAAO,MAAM,gBAAgB,OAAQ,WAAW,GAAG,IAAI,KAAG,WAAW,GAAG,IAC1C,CAAC;AAE/B,eAAO,MAAM,uBAAuB,mBAClB,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,KACzD,WAAW,GAAG,IAA+E,CAAC;AAEjG,eAAO,MAAM,4BAA4B,sCAAsC,CAAC;AAEhF,wBAAgB,+BAA+B,CAC7C,cAAc,EAAE,cAAc,GAAG,SAAS,GACzC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAiBxB;AAED,wBAAgB,0BAA0B,CAAC,EACzC,cAAc,EACd,SAAS,EACT,UAAU,GACX,EAAE;IACD,cAAc,EAAE,qBAAqB,GAAG,SAAS,CAAC;IAClD,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,GAAG,SAAS,CAAC;CACjC,GAAG,MAAM,GAAG,IAAI,CAqBhB"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/components/AppRoot/helpers.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAGrE,eAAO,MAAM,uBAAuB,mBAClB,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,KACzD,WAAW,GAAG,IAA+E,CAAC;AAEjG,eAAO,MAAM,4BAA4B,sCAAsC,CAAC;AAEhF,wBAAgB,+BAA+B,CAC7C,cAAc,EAAE,cAAc,GAAG,SAAS,GACzC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAiBxB;AAED,wBAAgB,0BAA0B,CAAC,EACzC,cAAc,EACd,SAAS,EACT,UAAU,GACX,EAAE;IACD,cAAc,EAAE,qBAAqB,GAAG,SAAS,CAAC;IAClD,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,GAAG,SAAS,CAAC;CACjC,GAAG,MAAM,GAAG,IAAI,CAqBhB"}

package/dist/components/AppRoot/helpers.js

@@ -1,5 +1,4 @@
 import { isRefObject } from "../../lib/isRefObject.js";
-export const getParentElement = (el)=>el ? el.parentElement : null;
 export const extractPortalRootByProp = (portalRootProp)=>isRefObject(portalRootProp) ? portalRootProp.current : portalRootProp;
 export const CUSTOM_PROPERTY_INSET_PREFIX = `--vkui_internal--safe_area_inset_`;
 export function getSafeAreaInsetsAsCssVariables(safeAreaInsets) {

package/dist/components/AppRoot/helpers.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AppRoot/helpers.ts"],"sourcesContent":["import { isRefObject } from '../../lib/isRefObject';\nimport type { AppRootUserSelectMode, SafeAreaInsets } from './types';\nimport styles from './AppRoot.module.css';\n\nexport const getParentElement = (el: HTMLElement | null): HTMLElement | null =>\n  el ? el.parentElement : null;\n\nexport const extractPortalRootByProp = (\n  portalRootProp: HTMLElement | React.RefObject<HTMLElement>,\n): HTMLElement | null => (isRefObject(portalRootProp) ? portalRootProp.current : portalRootProp);\n\nexport const CUSTOM_PROPERTY_INSET_PREFIX = `--vkui_internal--safe_area_inset_`;\n\nexport function getSafeAreaInsetsAsCssVariables(\n  safeAreaInsets: SafeAreaInsets | undefined,\n): Record<string, string> {\n  if (!safeAreaInsets) {\n    return {};\n  }\n\n  const cssVariables: Record<string, string> = {};\n\n  for (const key in safeAreaInsets) {\n    if (safeAreaInsets.hasOwnProperty(key) && typeof safeAreaInsets[key] === 'number') {\n      const propertyKey = `${CUSTOM_PROPERTY_INSET_PREFIX}${key}`;\n      const propertyValue = safeAreaInsets[key];\n\n      cssVariables[propertyKey] = `${propertyValue}px`;\n    }\n  }\n\n  return cssVariables;\n}\n\nexport function getUserSelectModeClassName({\n  userSelectMode,\n  isWebView,\n  hasPointer,\n}: {\n  userSelectMode: AppRootUserSelectMode | undefined;\n  isWebView: boolean;\n  hasPointer: boolean | undefined;\n}): string | null {\n  switch (userSelectMode) {\n    case 'enabled-with-pointer': {\n      if (hasPointer) {\n        return null;\n      }\n\n      const enableByHasPointerMediaQuery = hasPointer === undefined;\n      if (enableByHasPointerMediaQuery) {\n        return styles.pointerNone;\n      }\n\n      return styles.userSelectNone;\n    }\n    case 'disabled':\n      return styles.userSelectNone;\n    case 'enabled':\n      return null;\n    default:\n      return isWebView ? styles.userSelectNone : null;\n  }\n}\n"],"names":["isRefObject","getParentElement","el","parentElement","extractPortalRootByProp","portalRootProp","current","CUSTOM_PROPERTY_INSET_PREFIX","getSafeAreaInsetsAsCssVariables","safeAreaInsets","cssVariables","key","hasOwnProperty","propertyKey","propertyValue","getUserSelectModeClassName","userSelectMode","isWebView","hasPointer","enableByHasPointerMediaQuery","undefined"],"mappings":"AAAA,SAASA,WAAW,QAAQ,2BAAwB;AAIpD,OAAO,MAAMC,mBAAmB,CAACC,KAC/BA,KAAKA,GAAGC,aAAa,GAAG,KAAK;AAE/B,OAAO,MAAMC,0BAA0B,CACrCC,iBACwBL,YAAYK,kBAAkBA,eAAeC,OAAO,GAAGD,eAAgB;AAEjG,OAAO,MAAME,+BAA+B,CAAC,iCAAiC,CAAC,CAAC;AAEhF,OAAO,SAASC,gCACdC,cAA0C;IAE1C,IAAI,CAACA,gBAAgB;QACnB,OAAO,CAAC;IACV;IAEA,MAAMC,eAAuC,CAAC;IAE9C,IAAK,MAAMC,OAAOF,eAAgB;QAChC,IAAIA,eAAeG,cAAc,CAACD,QAAQ,OAAOF,cAAc,CAACE,IAAI,KAAK,UAAU;YACjF,MAAME,cAAc,GAAGN,+BAA+BI,KAAK;YAC3D,MAAMG,gBAAgBL,cAAc,CAACE,IAAI;YAEzCD,YAAY,CAACG,YAAY,GAAG,GAAGC,cAAc,EAAE,CAAC;QAClD;IACF;IAEA,OAAOJ;AACT;AAEA,OAAO,SAASK,2BAA2B,EACzCC,cAAc,EACdC,SAAS,EACTC,UAAU,EAKX;IACC,OAAQF;QACN,KAAK;YAAwB;gBAC3B,IAAIE,YAAY;oBACd,OAAO;gBACT;gBAEA,MAAMC,+BAA+BD,eAAeE;gBACpD,IAAID,8BAA8B;oBAChC;gBACF;gBAEA;YACF;QACA,KAAK;YACH;QACF,KAAK;YACH,OAAO;QACT;YACE,OAAOF,4CAAoC;IAC/C;AACF"}
+{"version":3,"sources":["../../../src/components/AppRoot/helpers.ts"],"sourcesContent":["import { isRefObject } from '../../lib/isRefObject';\nimport type { AppRootUserSelectMode, SafeAreaInsets } from './types';\nimport styles from './AppRoot.module.css';\n\nexport const extractPortalRootByProp = (\n  portalRootProp: HTMLElement | React.RefObject<HTMLElement>,\n): HTMLElement | null => (isRefObject(portalRootProp) ? portalRootProp.current : portalRootProp);\n\nexport const CUSTOM_PROPERTY_INSET_PREFIX = `--vkui_internal--safe_area_inset_`;\n\nexport function getSafeAreaInsetsAsCssVariables(\n  safeAreaInsets: SafeAreaInsets | undefined,\n): Record<string, string> {\n  if (!safeAreaInsets) {\n    return {};\n  }\n\n  const cssVariables: Record<string, string> = {};\n\n  for (const key in safeAreaInsets) {\n    if (safeAreaInsets.hasOwnProperty(key) && typeof safeAreaInsets[key] === 'number') {\n      const propertyKey = `${CUSTOM_PROPERTY_INSET_PREFIX}${key}`;\n      const propertyValue = safeAreaInsets[key];\n\n      cssVariables[propertyKey] = `${propertyValue}px`;\n    }\n  }\n\n  return cssVariables;\n}\n\nexport function getUserSelectModeClassName({\n  userSelectMode,\n  isWebView,\n  hasPointer,\n}: {\n  userSelectMode: AppRootUserSelectMode | undefined;\n  isWebView: boolean;\n  hasPointer: boolean | undefined;\n}): string | null {\n  switch (userSelectMode) {\n    case 'enabled-with-pointer': {\n      if (hasPointer) {\n        return null;\n      }\n\n      const enableByHasPointerMediaQuery = hasPointer === undefined;\n      if (enableByHasPointerMediaQuery) {\n        return styles.pointerNone;\n      }\n\n      return styles.userSelectNone;\n    }\n    case 'disabled':\n      return styles.userSelectNone;\n    case 'enabled':\n      return null;\n    default:\n      return isWebView ? styles.userSelectNone : null;\n  }\n}\n"],"names":["isRefObject","extractPortalRootByProp","portalRootProp","current","CUSTOM_PROPERTY_INSET_PREFIX","getSafeAreaInsetsAsCssVariables","safeAreaInsets","cssVariables","key","hasOwnProperty","propertyKey","propertyValue","getUserSelectModeClassName","userSelectMode","isWebView","hasPointer","enableByHasPointerMediaQuery","undefined"],"mappings":"AAAA,SAASA,WAAW,QAAQ,2BAAwB;AAIpD,OAAO,MAAMC,0BAA0B,CACrCC,iBACwBF,YAAYE,kBAAkBA,eAAeC,OAAO,GAAGD,eAAgB;AAEjG,OAAO,MAAME,+BAA+B,CAAC,iCAAiC,CAAC,CAAC;AAEhF,OAAO,SAASC,gCACdC,cAA0C;IAE1C,IAAI,CAACA,gBAAgB;QACnB,OAAO,CAAC;IACV;IAEA,MAAMC,eAAuC,CAAC;IAE9C,IAAK,MAAMC,OAAOF,eAAgB;QAChC,IAAIA,eAAeG,cAAc,CAACD,QAAQ,OAAOF,cAAc,CAACE,IAAI,KAAK,UAAU;YACjF,MAAME,cAAc,GAAGN,+BAA+BI,KAAK;YAC3D,MAAMG,gBAAgBL,cAAc,CAACE,IAAI;YAEzCD,YAAY,CAACG,YAAY,GAAG,GAAGC,cAAc,EAAE,CAAC;QAClD;IACF;IAEA,OAAOJ;AACT;AAEA,OAAO,SAASK,2BAA2B,EACzCC,cAAc,EACdC,SAAS,EACTC,UAAU,EAKX;IACC,OAAQF;QACN,KAAK;YAAwB;gBAC3B,IAAIE,YAAY;oBACd,OAAO;gBACT;gBAEA,MAAMC,+BAA+BD,eAAeE;gBACpD,IAAID,8BAA8B;oBAChC;gBACF;gBAEA;YACF;QACA,KAAK;YACH;QACF,KAAK;YACH,OAAO;QACT;YACE,OAAOF,4CAAoC;IAC/C;AACF"}

package/dist/components/AspectRatio/AspectRatio.d.ts

@@ -17,5 +17,5 @@ export interface AspectRatioProps extends Omit<RootComponentProps<HTMLElement>,
  * @since 5.5.0
  * @see https://vkcom.github.io/VKUI/#/AspectRatio
  */
-export declare function AspectRatio({ ratio, mode, style: styleProp, ...props }: AspectRatioProps): JSX.Element;
+export declare function AspectRatio({ ratio, mode, ...props }: AspectRatioProps): JSX.Element;
 //# sourceMappingURL=AspectRatio.d.ts.map

package/dist/components/AspectRatio/AspectRatio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AspectRatio.d.ts","sourceRoot":"","sources":["../../../src/components/AspectRatio/AspectRatio.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGxF,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,kBAAkB,CAAC,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,IAAgB,EAChB,KAAK,EAAE,SAAS,EAChB,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAYhC"}
+{"version":3,"file":"AspectRatio.d.ts","sourceRoot":"","sources":["../../../src/components/AspectRatio/AspectRatio.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGxF,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,kBAAkB,CAAC,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,IAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAYhG"}

package/dist/components/AspectRatio/AspectRatio.js

@@ -11,17 +11,16 @@ import { RootComponent } from "../RootComponent/RootComponent.js";
  * @since 5.5.0
  * @see https://vkcom.github.io/VKUI/#/AspectRatio
  */ export function AspectRatio(_param) {
-    var { ratio, mode = 'stretch', style: styleProp } = _param, props = _object_without_properties(_param, [
+    var { ratio, mode = 'stretch' } = _param, props = _object_without_properties(_param, [
         "ratio",
-        "mode",
-        "style"
+        "mode"
     ]);
     const style = {
         '--vkui_internal--aspect_ratio': String(ratio)
     };
     return /*#__PURE__*/ _jsx(RootComponent, _object_spread({
         baseClassName: classNames("vkuiAspectRatio__host", mode === 'stretch' && "vkuiAspectRatio__modeStretch"),
-        style: _object_spread({}, styleProp, style)
+        baseStyle: style
     }, props));
 }
 

package/dist/components/AspectRatio/AspectRatio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AspectRatio/AspectRatio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { CSSCustomProperties } from '../../types';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport styles from './AspectRatio.module.css';\n\nexport interface AspectRatioProps extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'> {\n  className?: string;\n  /**\n   * По умолчанию, вложенный контент будет растягиваться и заполнять весь блок.\n   */\n  mode?: 'stretch' | 'none';\n  /**\n   * Например 16 / 9, 4 / 3, 1920 / 1080\n   */\n  ratio: number;\n}\n\n/**\n * `AspectRatio` позволяет поддерживать постоянное соотношение ширины и высоты.\n * Его можно использовать для отображения изображений, карт, видео и других медиафайлов.\n\n * @since 5.5.0\n * @see https://vkcom.github.io/VKUI/#/AspectRatio\n */\nexport function AspectRatio({\n  ratio,\n  mode = 'stretch',\n  style: styleProp,\n  ...props\n}: AspectRatioProps): JSX.Element {\n  const style: React.CSSProperties & CSSCustomProperties = {\n    '--vkui_internal--aspect_ratio': String(ratio),\n  };\n\n  return (\n    <RootComponent\n      baseClassName={classNames(styles.host, mode === 'stretch' && styles.modeStretch)}\n      style={{ ...styleProp, ...style }}\n      {...props}\n    />\n  );\n}\n"],"names":["React","classNames","RootComponent","AspectRatio","ratio","mode","style","styleProp","props","String","baseClassName"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAiC,oCAAiC;AAexF;;;;;;CAMC,GACD,OAAO,SAASC,YAAY;QAAA,EAC1BC,KAAK,EACLC,OAAO,SAAS,EAChBC,OAAOC,SAAS,EAEC,GALS,QAIvBC,mCAJuB;QAC1BJ;QACAC;QACAC;;IAGA,MAAMA,QAAmD;QACvD,iCAAiCG,OAAOL;IAC1C;IAEA,qBACE,KAACF;QACCQ,eAAeT,oCAAwBI,SAAS;QAChDC,OAAO,mBAAKC,WAAcD;OACtBE;AAGV"}
+{"version":3,"sources":["../../../src/components/AspectRatio/AspectRatio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { CSSCustomProperties } from '../../types';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport styles from './AspectRatio.module.css';\n\nexport interface AspectRatioProps extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'> {\n  className?: string;\n  /**\n   * По умолчанию, вложенный контент будет растягиваться и заполнять весь блок.\n   */\n  mode?: 'stretch' | 'none';\n  /**\n   * Например 16 / 9, 4 / 3, 1920 / 1080\n   */\n  ratio: number;\n}\n\n/**\n * `AspectRatio` позволяет поддерживать постоянное соотношение ширины и высоты.\n * Его можно использовать для отображения изображений, карт, видео и других медиафайлов.\n\n * @since 5.5.0\n * @see https://vkcom.github.io/VKUI/#/AspectRatio\n */\nexport function AspectRatio({ ratio, mode = 'stretch', ...props }: AspectRatioProps): JSX.Element {\n  const style: React.CSSProperties & CSSCustomProperties = {\n    '--vkui_internal--aspect_ratio': String(ratio),\n  };\n\n  return (\n    <RootComponent\n      baseClassName={classNames(styles.host, mode === 'stretch' && styles.modeStretch)}\n      baseStyle={style}\n      {...props}\n    />\n  );\n}\n"],"names":["React","classNames","RootComponent","AspectRatio","ratio","mode","props","style","String","baseClassName","baseStyle"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAiC,oCAAiC;AAexF;;;;;;CAMC,GACD,OAAO,SAASC,YAAY;QAAA,EAAEC,KAAK,EAAEC,OAAO,SAAS,EAA8B,GAAvD,QAA8BC,mCAA9B;QAAEF;QAAOC;;IACnC,MAAME,QAAmD;QACvD,iCAAiCC,OAAOJ;IAC1C;IAEA,qBACE,KAACF;QACCO,eAAeR,oCAAwBI,SAAS;QAChDK,WAAWH;OACPD;AAGV"}

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

@@ -1,4 +1,5 @@
-import { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';
+import { ImageBase, type ImageBaseProps } from '../ImageBase/ImageBase';
+import { type ImageBaseOverlayProps } from '../ImageBase/ImageBaseOverlay/ImageBaseOverlay';
 import { AvatarBadge, type AvatarBadgeProps } from './AvatarBadge/AvatarBadge';
 import { AvatarBadgeWithPreset, type AvatarBadgeWithPresetProps } from './AvatarBadge/AvatarBadgeWithPreset';
 import { getInitialsFontSize } from './helpers';

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,KAAK,qBAAqB,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACpG,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC/E,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,EAChC,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAGhD,YAAY,EACV,gBAAgB,EAChB,0BAA0B,EAC1B,qBAAqB,IAAI,kBAAkB,GAC5C,CAAC;AAIF,QAAA,MAAM,yBAAyB;;;;;;;CAOrB,CAAC;AAEX;;;GAGG;AACH,MAAM,MAAM,6BAA6B,GAAG,MAAM,OAAO,yBAAyB,CAAC;AAEnF,MAAM,MAAM,2BAA2B,GACnC,CAAC,OAAO,yBAAyB,CAAC,CAAC,6BAA6B,CAAC,GACjE,MAAM,CAAC;AAYX,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,EAAE,WAAW,GAAG,YAAY,CAAC;IACnF;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;;;;;OAcG;IACH,aAAa,CAAC,EAAE,6BAA6B,GAAG,2BAA2B,GAAG,QAAQ,CAAC;CACxF;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,GAAG;IAC3C,KAAK,EAAE,OAAO,WAAW,CAAC;IAC1B,eAAe,EAAE,OAAO,qBAAqB,CAAC;IAC9C,OAAO,EAAE,OAAO,SAAS,CAAC,OAAO,CAAC;IAClC,mBAAmB,EAAE,OAAO,mBAAmB,CAAC;CA0CjD,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,gDAAgD,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC/E,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,EAChC,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAGhD,YAAY,EACV,gBAAgB,EAChB,0BAA0B,EAC1B,qBAAqB,IAAI,kBAAkB,GAC5C,CAAC;AAIF,QAAA,MAAM,yBAAyB;;;;;;;CAOrB,CAAC;AAEX;;;GAGG;AACH,MAAM,MAAM,6BAA6B,GAAG,MAAM,OAAO,yBAAyB,CAAC;AAEnF,MAAM,MAAM,2BAA2B,GACnC,CAAC,OAAO,yBAAyB,CAAC,CAAC,6BAA6B,CAAC,GACjE,MAAM,CAAC;AAYX,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,EAAE,WAAW,GAAG,YAAY,CAAC;IACnF;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;;;;;OAcG;IACH,aAAa,CAAC,EAAE,6BAA6B,GAAG,2BAA2B,GAAG,QAAQ,CAAC;CACxF;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,GAAG;IAC3C,KAAK,EAAE,OAAO,WAAW,CAAC;IAC1B,eAAe,EAAE,OAAO,qBAAqB,CAAC;IAC9C,OAAO,EAAE,OAAO,SAAS,CAAC,OAAO,CAAC;IAClC,mBAAmB,EAAE,OAAO,mBAAmB,CAAC;CA0CjD,CAAC"}

package/dist/components/Avatar/Avatar.js

@@ -4,6 +4,7 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "@vkontakte/vkjs";
 import { ImageBase } from "../ImageBase/ImageBase.js";
+import { ImageBaseOverlay } from "../ImageBase/ImageBaseOverlay/ImageBaseOverlay.js";
 import { AvatarBadge } from "./AvatarBadge/AvatarBadge.js";
 import { AvatarBadgeWithPreset } from "./AvatarBadge/AvatarBadgeWithPreset.js";
 import { getInitialsFontSize } from "./helpers.js";
@@ -57,7 +58,7 @@ Avatar.Badge = AvatarBadge;
 Avatar.Badge.displayName = 'Avatar.Badge';
 Avatar.BadgeWithPreset = AvatarBadgeWithPreset;
 Avatar.BadgeWithPreset.displayName = 'Avatar.BadgeWithPreset';
-Avatar.Overlay = ImageBase.Overlay;
+Avatar.Overlay = ImageBaseOverlay;
 Avatar.Overlay.displayName = 'Avatar.Overlay';
 Avatar.getInitialsFontSize = getInitialsFontSize;
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { AvatarBadge, type AvatarBadgeProps } from './AvatarBadge/AvatarBadge';\nimport {\n  AvatarBadgeWithPreset,\n  type AvatarBadgeWithPresetProps,\n} from './AvatarBadge/AvatarBadgeWithPreset';\nimport { getInitialsFontSize } from './helpers';\nimport styles from './Avatar.module.css';\n\nexport type {\n  AvatarBadgeProps,\n  AvatarBadgeWithPresetProps,\n  ImageBaseOverlayProps as AvatarOverlayProps,\n};\n\nconst AVATAR_DEFAULT_SIZE = 48;\n\nconst COLORS_NUMBER_TO_TEXT_MAP = {\n  1: 'red',\n  2: 'orange',\n  3: 'yellow',\n  4: 'green',\n  5: 'l-blue',\n  6: 'violet',\n} as const;\n\n/**\n * Градиенты, которые можно использовать в алгоритме поиска градиентов по числовому идентификатору пользователя.\n * @example user.id % 6 + 1\n */\nexport type InitialsAvatarNumberGradients = keyof typeof COLORS_NUMBER_TO_TEXT_MAP;\n\nexport type InitialsAvatarTextGradients =\n  | (typeof COLORS_NUMBER_TO_TEXT_MAP)[InitialsAvatarNumberGradients]\n  | 'blue';\n\nconst gradientStyles = {\n  'red': styles.gradientRed,\n  'orange': styles.gradientOrange,\n  'yellow': styles.gradientYellow,\n  'green': styles.gradientGreen,\n  'blue': styles.gradientBlue,\n  'l-blue': styles.gradientLBlue,\n  'violet': styles.gradientViolet,\n};\n\nexport interface AvatarProps extends Omit<ImageBaseProps, 'widthSize' | 'heightSize'> {\n  /**\n   * Инициалы пользователя.\n   *\n   * > Note: Если аватарка не прогрузится, то пользователь увидит инициалы.\n   *\n   * > ⚠️ Перебивает `fallbackIcon`.\n   */\n  initials?: string;\n  /**\n   * Задаёт градиент для фона.\n   *\n   * Если передано число, то оно будет сконвертировано в строчное представление цвета по следующей схеме:\n   *\n   * 1: 'red'\n   * 2: 'orange'\n   * 3: 'yellow'\n   * 4: 'green'\n   * 5: 'l-blue'\n   * 6: 'violet'\n   *\n   * > Если необходимо задать свой градиент, то используйте значение `\"custom\"` и определите цвет градиента либо через\n   * > свой класс в `className`, либо через `style={{ backgroundImage: \"...\" }}`.\n   */\n  gradientColor?: InitialsAvatarNumberGradients | InitialsAvatarTextGradients | 'custom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Avatar\n */\nexport const Avatar: React.FC<AvatarProps> & {\n  Badge: typeof AvatarBadge;\n  BadgeWithPreset: typeof AvatarBadgeWithPreset;\n  Overlay: typeof ImageBase.Overlay;\n  getInitialsFontSize: typeof getInitialsFontSize;\n} = ({\n  size = AVATAR_DEFAULT_SIZE,\n  className,\n  gradientColor,\n  initials,\n  fallbackIcon: fallbackIconProp,\n  children,\n  ...restProps\n}: AvatarProps) => {\n  const gradientName =\n    typeof gradientColor === 'number' ? COLORS_NUMBER_TO_TEXT_MAP[gradientColor] : gradientColor;\n  const isGradientNotCustom = gradientName && gradientName !== 'custom';\n\n  const fallbackIcon = initials ? (\n    <div\n      className={styles.initials}\n      style={{\n        fontSize: getInitialsFontSize(size),\n      }}\n    >\n      {initials}\n    </div>\n  ) : (\n    fallbackIconProp\n  );\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      fallbackIcon={fallbackIcon}\n      className={classNames(\n        styles.host,\n        gradientName && styles.hasGradient,\n        isGradientNotCustom && gradientStyles[gradientName],\n        className,\n      )}\n    >\n      {children}\n    </ImageBase>\n  );\n};\n\nAvatar.displayName = 'Avatar';\n\nAvatar.Badge = AvatarBadge;\nAvatar.Badge.displayName = 'Avatar.Badge';\n\nAvatar.BadgeWithPreset = AvatarBadgeWithPreset;\nAvatar.BadgeWithPreset.displayName = 'Avatar.BadgeWithPreset';\n\nAvatar.Overlay = ImageBase.Overlay;\nAvatar.Overlay.displayName = 'Avatar.Overlay';\n\nAvatar.getInitialsFontSize = getInitialsFontSize;\n"],"names":["classNames","ImageBase","AvatarBadge","AvatarBadgeWithPreset","getInitialsFontSize","AVATAR_DEFAULT_SIZE","COLORS_NUMBER_TO_TEXT_MAP","gradientStyles","Avatar","size","className","gradientColor","initials","fallbackIcon","fallbackIconProp","children","restProps","gradientName","isGradientNotCustom","div","style","fontSize","displayName","Badge","BadgeWithPreset","Overlay"],"mappings":";;;;AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,QAAyD,4BAAyB;AACpG,SAASC,WAAW,QAA+B,+BAA4B;AAC/E,SACEC,qBAAqB,QAEhB,yCAAsC;AAC7C,SAASC,mBAAmB,QAAQ,eAAY;AAShD,MAAMC,sBAAsB;AAE5B,MAAMC,4BAA4B;IAChC,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;AACL;AAYA,MAAMC,iBAAiB;IACrB,KAAK;IACL,QAAQ;IACR,QAAQ;IACR,OAAO;IACP,MAAM;IACN,QAAQ;IACR,QAAQ;AACV;AA6BA;;CAEC,GACD,OAAO,MAAMC,SAKT;QAAC,EACHC,OAAOJ,mBAAmB,EAC1BK,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,cAAcC,gBAAgB,EAC9BC,QAAQ,EAEI,WADTC;QANHP;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,MAAME,eACJ,OAAON,kBAAkB,WAAWL,yBAAyB,CAACK,cAAc,GAAGA;IACjF,MAAMO,sBAAsBD,gBAAgBA,iBAAiB;IAE7D,MAAMJ,eAAeD,yBACnB,KAACO;QACCT,SAAS;QACTU,OAAO;YACLC,UAAUjB,oBAAoBK;QAChC;kBAECG;SAGHE;IAGF,qBACE,KAACb,mDACKe;QACJP,MAAMA;QACNI,cAAcA;QACdH,WAAWV,+BAETiB,2CACAC,uBAAuBX,cAAc,CAACU,aAAa,EACnDP;kBAGDK;;AAGP,EAAE;AAEFP,OAAOc,WAAW,GAAG;AAErBd,OAAOe,KAAK,GAAGrB;AACfM,OAAOe,KAAK,CAACD,WAAW,GAAG;AAE3Bd,OAAOgB,eAAe,GAAGrB;AACzBK,OAAOgB,eAAe,CAACF,WAAW,GAAG;AAErCd,OAAOiB,OAAO,GAAGxB,UAAUwB,OAAO;AAClCjB,OAAOiB,OAAO,CAACH,WAAW,GAAG;AAE7Bd,OAAOJ,mBAAmB,GAAGA"}
+{"version":3,"sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport {\n  ImageBaseOverlay,\n  type ImageBaseOverlayProps,\n} from '../ImageBase/ImageBaseOverlay/ImageBaseOverlay';\nimport { AvatarBadge, type AvatarBadgeProps } from './AvatarBadge/AvatarBadge';\nimport {\n  AvatarBadgeWithPreset,\n  type AvatarBadgeWithPresetProps,\n} from './AvatarBadge/AvatarBadgeWithPreset';\nimport { getInitialsFontSize } from './helpers';\nimport styles from './Avatar.module.css';\n\nexport type {\n  AvatarBadgeProps,\n  AvatarBadgeWithPresetProps,\n  ImageBaseOverlayProps as AvatarOverlayProps,\n};\n\nconst AVATAR_DEFAULT_SIZE = 48;\n\nconst COLORS_NUMBER_TO_TEXT_MAP = {\n  1: 'red',\n  2: 'orange',\n  3: 'yellow',\n  4: 'green',\n  5: 'l-blue',\n  6: 'violet',\n} as const;\n\n/**\n * Градиенты, которые можно использовать в алгоритме поиска градиентов по числовому идентификатору пользователя.\n * @example user.id % 6 + 1\n */\nexport type InitialsAvatarNumberGradients = keyof typeof COLORS_NUMBER_TO_TEXT_MAP;\n\nexport type InitialsAvatarTextGradients =\n  | (typeof COLORS_NUMBER_TO_TEXT_MAP)[InitialsAvatarNumberGradients]\n  | 'blue';\n\nconst gradientStyles = {\n  'red': styles.gradientRed,\n  'orange': styles.gradientOrange,\n  'yellow': styles.gradientYellow,\n  'green': styles.gradientGreen,\n  'blue': styles.gradientBlue,\n  'l-blue': styles.gradientLBlue,\n  'violet': styles.gradientViolet,\n};\n\nexport interface AvatarProps extends Omit<ImageBaseProps, 'widthSize' | 'heightSize'> {\n  /**\n   * Инициалы пользователя.\n   *\n   * > Note: Если аватарка не прогрузится, то пользователь увидит инициалы.\n   *\n   * > ⚠️ Перебивает `fallbackIcon`.\n   */\n  initials?: string;\n  /**\n   * Задаёт градиент для фона.\n   *\n   * Если передано число, то оно будет сконвертировано в строчное представление цвета по следующей схеме:\n   *\n   * 1: 'red'\n   * 2: 'orange'\n   * 3: 'yellow'\n   * 4: 'green'\n   * 5: 'l-blue'\n   * 6: 'violet'\n   *\n   * > Если необходимо задать свой градиент, то используйте значение `\"custom\"` и определите цвет градиента либо через\n   * > свой класс в `className`, либо через `style={{ backgroundImage: \"...\" }}`.\n   */\n  gradientColor?: InitialsAvatarNumberGradients | InitialsAvatarTextGradients | 'custom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Avatar\n */\nexport const Avatar: React.FC<AvatarProps> & {\n  Badge: typeof AvatarBadge;\n  BadgeWithPreset: typeof AvatarBadgeWithPreset;\n  Overlay: typeof ImageBase.Overlay;\n  getInitialsFontSize: typeof getInitialsFontSize;\n} = ({\n  size = AVATAR_DEFAULT_SIZE,\n  className,\n  gradientColor,\n  initials,\n  fallbackIcon: fallbackIconProp,\n  children,\n  ...restProps\n}: AvatarProps) => {\n  const gradientName =\n    typeof gradientColor === 'number' ? COLORS_NUMBER_TO_TEXT_MAP[gradientColor] : gradientColor;\n  const isGradientNotCustom = gradientName && gradientName !== 'custom';\n\n  const fallbackIcon = initials ? (\n    <div\n      className={styles.initials}\n      style={{\n        fontSize: getInitialsFontSize(size),\n      }}\n    >\n      {initials}\n    </div>\n  ) : (\n    fallbackIconProp\n  );\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      fallbackIcon={fallbackIcon}\n      className={classNames(\n        styles.host,\n        gradientName && styles.hasGradient,\n        isGradientNotCustom && gradientStyles[gradientName],\n        className,\n      )}\n    >\n      {children}\n    </ImageBase>\n  );\n};\n\nAvatar.displayName = 'Avatar';\n\nAvatar.Badge = AvatarBadge;\nAvatar.Badge.displayName = 'Avatar.Badge';\n\nAvatar.BadgeWithPreset = AvatarBadgeWithPreset;\nAvatar.BadgeWithPreset.displayName = 'Avatar.BadgeWithPreset';\n\nAvatar.Overlay = ImageBaseOverlay;\nAvatar.Overlay.displayName = 'Avatar.Overlay';\n\nAvatar.getInitialsFontSize = getInitialsFontSize;\n"],"names":["classNames","ImageBase","ImageBaseOverlay","AvatarBadge","AvatarBadgeWithPreset","getInitialsFontSize","AVATAR_DEFAULT_SIZE","COLORS_NUMBER_TO_TEXT_MAP","gradientStyles","Avatar","size","className","gradientColor","initials","fallbackIcon","fallbackIconProp","children","restProps","gradientName","isGradientNotCustom","div","style","fontSize","displayName","Badge","BadgeWithPreset","Overlay"],"mappings":";;;;AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,QAA6B,4BAAyB;AACxE,SACEC,gBAAgB,QAEX,oDAAiD;AACxD,SAASC,WAAW,QAA+B,+BAA4B;AAC/E,SACEC,qBAAqB,QAEhB,yCAAsC;AAC7C,SAASC,mBAAmB,QAAQ,eAAY;AAShD,MAAMC,sBAAsB;AAE5B,MAAMC,4BAA4B;IAChC,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;AACL;AAYA,MAAMC,iBAAiB;IACrB,KAAK;IACL,QAAQ;IACR,QAAQ;IACR,OAAO;IACP,MAAM;IACN,QAAQ;IACR,QAAQ;AACV;AA6BA;;CAEC,GACD,OAAO,MAAMC,SAKT;QAAC,EACHC,OAAOJ,mBAAmB,EAC1BK,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,cAAcC,gBAAgB,EAC9BC,QAAQ,EAEI,WADTC;QANHP;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,MAAME,eACJ,OAAON,kBAAkB,WAAWL,yBAAyB,CAACK,cAAc,GAAGA;IACjF,MAAMO,sBAAsBD,gBAAgBA,iBAAiB;IAE7D,MAAMJ,eAAeD,yBACnB,KAACO;QACCT,SAAS;QACTU,OAAO;YACLC,UAAUjB,oBAAoBK;QAChC;kBAECG;SAGHE;IAGF,qBACE,KAACd,mDACKgB;QACJP,MAAMA;QACNI,cAAcA;QACdH,WAAWX,+BAETkB,2CACAC,uBAAuBX,cAAc,CAACU,aAAa,EACnDP;kBAGDK;;AAGP,EAAE;AAEFP,OAAOc,WAAW,GAAG;AAErBd,OAAOe,KAAK,GAAGrB;AACfM,OAAOe,KAAK,CAACD,WAAW,GAAG;AAE3Bd,OAAOgB,eAAe,GAAGrB;AACzBK,OAAOgB,eAAe,CAACF,WAAW,GAAG;AAErCd,OAAOiB,OAAO,GAAGxB;AACjBO,OAAOiB,OAAO,CAACH,WAAW,GAAG;AAE7Bd,OAAOJ,mBAAmB,GAAGA"}

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

@@ -69,5 +69,5 @@ export interface BannerProps extends Omit<TappableProps, 'title' | 'size'> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Banner
  */
-export declare const Banner: ({ mode, imageTheme, size, before, after: afterProp, title, subtitle, extraSubtitle, children, background, actions, onDismiss, dismissLabel, className, Component, ...restProps }: BannerProps) => React.ReactNode;
+export declare const Banner: ({ mode, imageTheme, size, before, after: afterProp, title, subtitle, extraSubtitle, children, background, actions, onDismiss, dismissLabel, Component, ...restProps }: BannerProps) => React.ReactNode;
 //# sourceMappingURL=Banner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAOpE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,CAAC;IACxE;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;IAChD;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B;;;;OAIG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,qLAiBhB,WAAW,KAAG,KAAK,CAAC,SAkFtB,CAAC"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAOpE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,CAAC;IACxE;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;IAChD;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B;;;;OAIG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,0KAgBhB,WAAW,KAAG,KAAK,CAAC,SAiFtB,CAAC"}

package/dist/components/Banner/Banner.js

@@ -16,7 +16,7 @@ import { Title } from "../Typography/Title/Title.js";
 /**
  * @see https://vkcom.github.io/VKUI/#/Banner
  */ export const Banner = (_param)=>{
-    var { mode = 'tint', imageTheme = 'dark', size = 's', before, after: afterProp, title, subtitle, extraSubtitle, children, background, actions, onDismiss, dismissLabel = 'Скрыть', className, Component } = _param, restProps = _object_without_properties(_param, [
+    var { mode = 'tint', imageTheme = 'dark', size = 's', before, after: afterProp, title, subtitle, extraSubtitle, children, background, actions, onDismiss, dismissLabel = 'Скрыть', Component } = _param, restProps = _object_without_properties(_param, [
         "mode",
         "imageTheme",
         "size",
@@ -30,7 +30,6 @@ import { Title } from "../Typography/Title/Title.js";
         "actions",
         "onDismiss",
         "dismissLabel",
-        "className",
         "Component"
     ]);
     const platform = usePlatform();
@@ -96,7 +95,7 @@ import { Title } from "../Typography/Title/Title.js";
     return /*#__PURE__*/ _jsxs(Tappable, _object_spread_props(_object_spread({
         Component: Component || (!isClickable ? 'section' : undefined),
         activeMode: platform === 'ios' ? 'opacity' : 'background',
-        baseClassName: classNames("vkuiBanner__host", platform === 'ios' && "vkuiBanner__ios", mode === 'image' && "vkuiBanner__modeImage", size === 'm' && "vkuiBanner__sizeM", mode === 'image' && imageTheme === 'dark' && "vkuiBanner__inverted", className)
+        baseClassName: classNames("vkuiBanner__host", platform === 'ios' && "vkuiBanner__ios", mode === 'image' && "vkuiBanner__modeImage", size === 'm' && "vkuiBanner__sizeM", mode === 'image' && imageTheme === 'dark' && "vkuiBanner__inverted")
     }, restProps), {
         children: [
             content,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon24Cancel, Icon24Chevron, Icon24Dismiss, Icon24DismissDark } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Banner.module.css';\n\nexport interface BannerProps extends Omit<TappableProps, 'title' | 'size'> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `chevron` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  after?: 'dismiss' | 'chevron' | React.ReactNode;\n  /**\n   * Срабатывает при клике на иконку крестика при `after=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок.\n   */\n  title?: React.ReactNode;\n  /**\n   * Подзаголовок.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительный подзаголовок баннера.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button).\n   *\n   * - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:\n   *    - `mode=\"primary\"`\n   *    - `mode=\"secondary\"`\n   * - В режиме `image` с тёмным фоном используйте с параметрами:\n   *    - `appearance=\"overlay\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"m\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n  mode = 'tint',\n  imageTheme = 'dark',\n  size = 's',\n  before,\n  after: afterProp,\n  title,\n  subtitle,\n  extraSubtitle,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = 'Скрыть',\n  className,\n  Component,\n  ...restProps\n}: BannerProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  const HeaderTypography = size === 'm' ? Title : Headline;\n  const SubheadTypography = size === 'm' ? Text : Subhead;\n\n  const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24Dismiss;\n\n  const content = (\n    <>\n      {mode === 'image' && background && (\n        <div aria-hidden className={styles.bg}>\n          {background}\n        </div>\n      )}\n\n      {before && <div className={styles.before}>{before}</div>}\n\n      <div className={styles.content}>\n        {hasReactNode(title) && (\n          <HeaderTypography Component=\"div\" weight=\"2\" level={size === 'm' ? '2' : '1'}>\n            {title}\n          </HeaderTypography>\n        )}\n        {hasReactNode(subtitle) && (\n          <SubheadTypography Component=\"div\" className={styles.subtitle}>\n            {subtitle}\n          </SubheadTypography>\n        )}\n        {hasReactNode(extraSubtitle) && (\n          <Text Component=\"div\" className={styles.extraSubtitle}>\n            {extraSubtitle}\n          </Text>\n        )}\n        {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n          <div className={styles.actions}>{actions}</div>\n        )}\n      </div>\n    </>\n  );\n\n  const afterMap: Record<string, React.ReactNode> = {\n    chevron: <Icon24Chevron className={styles.chevron} />,\n    dismiss: (\n      <IconButton\n        label={dismissLabel}\n        className={styles.dismiss}\n        onClick={onDismiss}\n        hoverMode=\"opacity\"\n        hasActive={false}\n      >\n        {platform === 'ios' ? <IconDismissIOS /> : <Icon24Cancel />}\n      </IconButton>\n    ),\n  };\n\n  const after = afterProp && (\n    <div className={styles.after}>\n      {typeof afterProp === 'string' ? afterMap[afterProp] : afterProp}\n    </div>\n  );\n\n  const isClickable = restProps.onClick || restProps.onClickCapture || restProps.href;\n\n  return (\n    <Tappable\n      Component={Component || (!isClickable ? 'section' : undefined)}\n      activeMode={platform === 'ios' ? 'opacity' : 'background'}\n      baseClassName={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        mode === 'image' && styles.modeImage,\n        size === 'm' && styles.sizeM,\n        mode === 'image' && imageTheme === 'dark' && styles.inverted,\n        className,\n      )}\n      {...restProps}\n    >\n      {content}\n      {after}\n    </Tappable>\n  );\n};\n"],"names":["React","Icon24Cancel","Icon24Chevron","Icon24Dismiss","Icon24DismissDark","classNames","hasReactNode","usePlatform","IconButton","Tappable","Headline","Subhead","Text","Title","Banner","mode","imageTheme","size","before","after","afterProp","title","subtitle","extraSubtitle","children","background","actions","onDismiss","dismissLabel","className","Component","restProps","platform","HeaderTypography","SubheadTypography","IconDismissIOS","content","div","aria-hidden","weight","level","Children","count","afterMap","chevron","dismiss","label","onClick","hoverMode","hasActive","isClickable","onClickCapture","href","undefined","activeMode","baseClassName"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,EAAEC,aAAa,EAAEC,aAAa,EAAEC,iBAAiB,QAAQ,mBAAmB;AACjG,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,UAAU,QAAQ,8BAA2B;AACtD,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,SAASC,KAAK,QAAQ,+BAA4B;AAsElD;;CAEC,GACD,OAAO,MAAMC,SAAS;QAAC,EACrBC,OAAO,MAAM,EACbC,aAAa,MAAM,EACnBC,OAAO,GAAG,EACVC,MAAM,EACNC,OAAOC,SAAS,EAChBC,KAAK,EACLC,QAAQ,EACRC,aAAa,EACbC,QAAQ,EACRC,UAAU,EACVC,OAAO,EACPC,SAAS,EACTC,eAAe,QAAQ,EACvBC,SAAS,EACTC,SAAS,EAEG,WADTC;QAfHhB;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWzB;IAEjB,MAAM0B,mBAAmBhB,SAAS,MAAMJ,QAAQH;IAChD,MAAMwB,oBAAoBjB,SAAS,MAAML,OAAOD;IAEhD,MAAMwB,iBAAiBpB,SAAS,UAAUX,oBAAoBD;IAE9D,MAAMiC,wBACJ;;YACGrB,SAAS,WAAWU,4BACnB,KAACY;gBAAIC,aAAW;gBAACT,SAAS;0BACvBJ;;YAIJP,wBAAU,KAACmB;gBAAIR,SAAS;0BAAkBX;;0BAE3C,MAACmB;gBAAIR,SAAS;;oBACXvB,aAAae,wBACZ,KAACY;wBAAiBH,WAAU;wBAAMS,QAAO;wBAAIC,OAAOvB,SAAS,MAAM,MAAM;kCACtEI;;oBAGJf,aAAagB,2BACZ,KAACY;wBAAkBJ,WAAU;wBAAMD,SAAS;kCACzCP;;oBAGJhB,aAAaiB,gCACZ,KAACX;wBAAKkB,WAAU;wBAAMD,SAAS;kCAC5BN;;oBAGJjB,aAAaoB,YAAY1B,MAAMyC,QAAQ,CAACC,KAAK,CAAChB,WAAW,mBACxD,KAACW;wBAAIR,SAAS;kCAAmBH;;;;;;IAMzC,MAAMiB,WAA4C;QAChDC,uBAAS,KAAC1C;YAAc2B,SAAS;;QACjCgB,uBACE,KAACrC;YACCsC,OAAOlB;YACPC,SAAS;YACTkB,SAASpB;YACTqB,WAAU;YACVC,WAAW;sBAEVjB,aAAa,sBAAQ,KAACG,oCAAoB,KAAClC;;IAGlD;IAEA,MAAMkB,QAAQC,2BACZ,KAACiB;QAAIR,SAAS;kBACX,OAAOT,cAAc,WAAWuB,QAAQ,CAACvB,UAAU,GAAGA;;IAI3D,MAAM8B,cAAcnB,UAAUgB,OAAO,IAAIhB,UAAUoB,cAAc,IAAIpB,UAAUqB,IAAI;IAEnF,qBACE,MAAC3C;QACCqB,WAAWA,aAAc,CAAA,CAACoB,cAAc,YAAYG,SAAQ;QAC5DC,YAAYtB,aAAa,QAAQ,YAAY;QAC7CuB,eAAelD,+BAEb2B,aAAa,4BACbjB,SAAS,oCACTE,SAAS,4BACTF,SAAS,WAAWC,eAAe,kCACnCa;OAEEE;;YAEHK;YACAjB;;;AAGP,EAAE"}
+{"version":3,"sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon24Cancel, Icon24Chevron, Icon24Dismiss, Icon24DismissDark } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Banner.module.css';\n\nexport interface BannerProps extends Omit<TappableProps, 'title' | 'size'> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `chevron` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  after?: 'dismiss' | 'chevron' | React.ReactNode;\n  /**\n   * Срабатывает при клике на иконку крестика при `after=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок.\n   */\n  title?: React.ReactNode;\n  /**\n   * Подзаголовок.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительный подзаголовок баннера.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button).\n   *\n   * - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:\n   *    - `mode=\"primary\"`\n   *    - `mode=\"secondary\"`\n   * - В режиме `image` с тёмным фоном используйте с параметрами:\n   *    - `appearance=\"overlay\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"m\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n  mode = 'tint',\n  imageTheme = 'dark',\n  size = 's',\n  before,\n  after: afterProp,\n  title,\n  subtitle,\n  extraSubtitle,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = 'Скрыть',\n  Component,\n  ...restProps\n}: BannerProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  const HeaderTypography = size === 'm' ? Title : Headline;\n  const SubheadTypography = size === 'm' ? Text : Subhead;\n\n  const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24Dismiss;\n\n  const content = (\n    <>\n      {mode === 'image' && background && (\n        <div aria-hidden className={styles.bg}>\n          {background}\n        </div>\n      )}\n\n      {before && <div className={styles.before}>{before}</div>}\n\n      <div className={styles.content}>\n        {hasReactNode(title) && (\n          <HeaderTypography Component=\"div\" weight=\"2\" level={size === 'm' ? '2' : '1'}>\n            {title}\n          </HeaderTypography>\n        )}\n        {hasReactNode(subtitle) && (\n          <SubheadTypography Component=\"div\" className={styles.subtitle}>\n            {subtitle}\n          </SubheadTypography>\n        )}\n        {hasReactNode(extraSubtitle) && (\n          <Text Component=\"div\" className={styles.extraSubtitle}>\n            {extraSubtitle}\n          </Text>\n        )}\n        {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n          <div className={styles.actions}>{actions}</div>\n        )}\n      </div>\n    </>\n  );\n\n  const afterMap: Record<string, React.ReactNode> = {\n    chevron: <Icon24Chevron className={styles.chevron} />,\n    dismiss: (\n      <IconButton\n        label={dismissLabel}\n        className={styles.dismiss}\n        onClick={onDismiss}\n        hoverMode=\"opacity\"\n        hasActive={false}\n      >\n        {platform === 'ios' ? <IconDismissIOS /> : <Icon24Cancel />}\n      </IconButton>\n    ),\n  };\n\n  const after = afterProp && (\n    <div className={styles.after}>\n      {typeof afterProp === 'string' ? afterMap[afterProp] : afterProp}\n    </div>\n  );\n\n  const isClickable = restProps.onClick || restProps.onClickCapture || restProps.href;\n\n  return (\n    <Tappable\n      Component={Component || (!isClickable ? 'section' : undefined)}\n      activeMode={platform === 'ios' ? 'opacity' : 'background'}\n      baseClassName={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        mode === 'image' && styles.modeImage,\n        size === 'm' && styles.sizeM,\n        mode === 'image' && imageTheme === 'dark' && styles.inverted,\n      )}\n      {...restProps}\n    >\n      {content}\n      {after}\n    </Tappable>\n  );\n};\n"],"names":["React","Icon24Cancel","Icon24Chevron","Icon24Dismiss","Icon24DismissDark","classNames","hasReactNode","usePlatform","IconButton","Tappable","Headline","Subhead","Text","Title","Banner","mode","imageTheme","size","before","after","afterProp","title","subtitle","extraSubtitle","children","background","actions","onDismiss","dismissLabel","Component","restProps","platform","HeaderTypography","SubheadTypography","IconDismissIOS","content","div","aria-hidden","className","weight","level","Children","count","afterMap","chevron","dismiss","label","onClick","hoverMode","hasActive","isClickable","onClickCapture","href","undefined","activeMode","baseClassName"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,EAAEC,aAAa,EAAEC,aAAa,EAAEC,iBAAiB,QAAQ,mBAAmB;AACjG,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,UAAU,QAAQ,8BAA2B;AACtD,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,SAASC,KAAK,QAAQ,+BAA4B;AAsElD;;CAEC,GACD,OAAO,MAAMC,SAAS;QAAC,EACrBC,OAAO,MAAM,EACbC,aAAa,MAAM,EACnBC,OAAO,GAAG,EACVC,MAAM,EACNC,OAAOC,SAAS,EAChBC,KAAK,EACLC,QAAQ,EACRC,aAAa,EACbC,QAAQ,EACRC,UAAU,EACVC,OAAO,EACPC,SAAS,EACTC,eAAe,QAAQ,EACvBC,SAAS,EAEG,WADTC;QAdHf;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWxB;IAEjB,MAAMyB,mBAAmBf,SAAS,MAAMJ,QAAQH;IAChD,MAAMuB,oBAAoBhB,SAAS,MAAML,OAAOD;IAEhD,MAAMuB,iBAAiBnB,SAAS,UAAUX,oBAAoBD;IAE9D,MAAMgC,wBACJ;;YACGpB,SAAS,WAAWU,4BACnB,KAACW;gBAAIC,aAAW;gBAACC,SAAS;0BACvBb;;YAIJP,wBAAU,KAACkB;gBAAIE,SAAS;0BAAkBpB;;0BAE3C,MAACkB;gBAAIE,SAAS;;oBACXhC,aAAae,wBACZ,KAACW;wBAAiBH,WAAU;wBAAMU,QAAO;wBAAIC,OAAOvB,SAAS,MAAM,MAAM;kCACtEI;;oBAGJf,aAAagB,2BACZ,KAACW;wBAAkBJ,WAAU;wBAAMS,SAAS;kCACzChB;;oBAGJhB,aAAaiB,gCACZ,KAACX;wBAAKiB,WAAU;wBAAMS,SAAS;kCAC5Bf;;oBAGJjB,aAAaoB,YAAY1B,MAAMyC,QAAQ,CAACC,KAAK,CAAChB,WAAW,mBACxD,KAACU;wBAAIE,SAAS;kCAAmBZ;;;;;;IAMzC,MAAMiB,WAA4C;QAChDC,uBAAS,KAAC1C;YAAcoC,SAAS;;QACjCO,uBACE,KAACrC;YACCsC,OAAOlB;YACPU,SAAS;YACTS,SAASpB;YACTqB,WAAU;YACVC,WAAW;sBAEVlB,aAAa,sBAAQ,KAACG,oCAAoB,KAACjC;;IAGlD;IAEA,MAAMkB,QAAQC,2BACZ,KAACgB;QAAIE,SAAS;kBACX,OAAOlB,cAAc,WAAWuB,QAAQ,CAACvB,UAAU,GAAGA;;IAI3D,MAAM8B,cAAcpB,UAAUiB,OAAO,IAAIjB,UAAUqB,cAAc,IAAIrB,UAAUsB,IAAI;IAEnF,qBACE,MAAC3C;QACCoB,WAAWA,aAAc,CAAA,CAACqB,cAAc,YAAYG,SAAQ;QAC5DC,YAAYvB,aAAa,QAAQ,YAAY;QAC7CwB,eAAelD,+BAEb0B,aAAa,4BACbhB,SAAS,oCACTE,SAAS,4BACTF,SAAS,WAAWC,eAAe;OAEjCc;;YAEHK;YACAhB;;;AAGP,EAAE"}

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

@@ -19,5 +19,5 @@ export interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProp
 /**
  * @see https://vkcom.github.io/VKUI/#/Button
  */
-export declare const Button: ({ size, mode, appearance, stretched, align, children, before, after, getRootRef, loading, onClick, className, disableSpinnerAnimation, rounded, disabled, ...restProps }: ButtonProps) => React.ReactNode;
+export declare const Button: ({ size, mode, appearance, stretched, align, children, before, after, getRootRef, loading, onClick, disableSpinnerAnimation, rounded, disabled, ...restProps }: ButtonProps) => React.ReactNode;
 //# sourceMappingURL=Button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,iCAAiC,CAAC;AACzC,OAAO,+BAA+B,CAAC;AAoCvC,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;IACjE,UAAU,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,mBAAmB,CAAC;IAC9F,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,EAAE,eAAe;CAAG;AAEpF;;GAEG;AACH,eAAO,MAAM,MAAM,6KAiBhB,WAAW,KAAG,KAAK,CAAC,SAqEtB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,iCAAiC,CAAC;AACzC,OAAO,+BAA+B,CAAC;AAoCvC,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;IACjE,UAAU,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,mBAAmB,CAAC;IAC9F,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,EAAE,eAAe;CAAG;AAEpF;;GAEG;AACH,eAAO,MAAM,MAAM,kKAgBhB,WAAW,KAAG,KAAK,CAAC,SAoEtB,CAAC"}

package/dist/components/Button/Button.js

@@ -40,7 +40,7 @@ const sizeYClassNames = {
 /**
  * @see https://vkcom.github.io/VKUI/#/Button
  */ export const Button = (_param)=>{
-    var { size = 's', mode = 'primary', appearance = 'accent', stretched = false, align = 'center', children, before, after, getRootRef, loading, onClick, className, disableSpinnerAnimation, rounded, disabled } = _param, restProps = _object_without_properties(_param, [
+    var { size = 's', mode = 'primary', appearance = 'accent', stretched = false, align = 'center', children, before, after, getRootRef, loading, onClick, disableSpinnerAnimation, rounded, disabled } = _param, restProps = _object_without_properties(_param, [
         "size",
         "mode",
         "appearance",
@@ -52,7 +52,6 @@ const sizeYClassNames = {
         "getRootRef",
         "loading",
         "onClick",
-        "className",
         "disableSpinnerAnimation",
         "rounded",
         "disabled"
@@ -68,7 +67,7 @@ const sizeYClassNames = {
         disabled: loading || disabled
     }, restProps), {
         onClick: loading ? undefined : onClick,
-        className: classNames(className, "vkuiButton__host", stylesSize[size], stylesMode[mode], stylesAppearance[appearance], align !== 'center' && stylesAlign[align], sizeY !== 'compact' && sizeYClassNames[sizeY], platform === 'ios' && "vkuiButton__ios", stretched && "vkuiButton__stretched", hasIconOnly && !stretched && "vkuiButton__singleIcon", loading && "vkuiButton__loading", rounded && "vkuiButton__rounded", disabled && "vkuiButton__disabled"),
+        baseClassName: classNames("vkuiButton__host", stylesSize[size], stylesMode[mode], stylesAppearance[appearance], align !== 'center' && stylesAlign[align], sizeY !== 'compact' && sizeYClassNames[sizeY], platform === 'ios' && "vkuiButton__ios", stretched && "vkuiButton__stretched", hasIconOnly && !stretched && "vkuiButton__singleIcon", loading && "vkuiButton__loading", rounded && "vkuiButton__rounded", disabled && "vkuiButton__disabled"),
         getRootRef: getRootRef,
         children: [
             loading && /*#__PURE__*/ _jsx(Spinner, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasAlign } from '../../types';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport '../Tappable/Tappable.module.css';\nimport '../Spinner/Spinner.module.css';\nimport styles from './Button.module.css';\n\nconst stylesSize = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n};\n\nconst stylesMode = {\n  primary: styles.modePrimary,\n  secondary: styles.modeSecondary,\n  tertiary: styles.modeTertiary,\n  outline: styles.modeOutline,\n  link: styles.modeLink,\n};\n\nconst stylesAppearance = {\n  'accent': styles.appearanceAccent,\n  'positive': styles.appearancePositive,\n  'negative': styles.appearanceNegative,\n  'neutral': styles.appearanceNeutral,\n  'overlay': styles.appearanceOverlay,\n  'accent-invariable': styles.appearanceAccentInvariable,\n};\n\nconst stylesAlign = {\n  left: styles.alignLeft,\n  right: styles.alignRight,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  regular: styles.sizeYRegular,\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  disableSpinnerAnimation?: boolean;\n  rounded?: 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  loading,\n  onClick,\n  className,\n  disableSpinnerAnimation,\n  rounded,\n  disabled,\n  ...restProps\n}: ButtonProps): React.ReactNode => {\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.hover}\n      activeMode={styles.active}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      disabled={loading || disabled}\n      {...restProps}\n      onClick={loading ? undefined : onClick}\n      className={classNames(\n        className,\n        styles.host,\n        stylesSize[size],\n        stylesMode[mode],\n        stylesAppearance[appearance],\n        align !== 'center' && stylesAlign[align],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n        platform === 'ios' && styles.ios,\n        stretched && styles.stretched,\n        hasIconOnly && !stretched && styles.singleIcon,\n        loading && styles.loading,\n        rounded && styles.rounded,\n        disabled && styles.disabled,\n      )}\n      getRootRef={getRootRef}\n    >\n      {loading && (\n        <Spinner\n          size=\"s\"\n          className={styles.spinner}\n          disableAnimation={disableSpinnerAnimation}\n          noColor\n        />\n      )}\n      <span className={styles.in}>\n        {hasReactNode(before) && (\n          <span\n            className={styles.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.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.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"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","Spinner","Tappable","stylesSize","s","m","l","stylesMode","primary","secondary","tertiary","outline","link","stylesAppearance","stylesAlign","left","right","sizeYClassNames","none","regular","Button","size","mode","appearance","stretched","align","children","before","after","getRootRef","loading","onClick","className","disableSpinnerAnimation","rounded","disabled","restProps","hasIconOnly","Boolean","sizeY","platform","hoverMode","activeMode","Component","href","focusVisibleMode","undefined","disableAnimation","noColor","span","role","data-testid","process","env","NODE_ENV"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,OAAO,QAAQ,wBAAqB;AAC7C,SAASC,QAAQ,QAA4B,0BAAuB;AAKpE,MAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AAEA,MAAMC,aAAa;IACjBC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,OAAO;IACPC,IAAI;AACN;AAEA,MAAMC,mBAAmB;IACvB,QAAQ;IACR,UAAU;IACV,UAAU;IACV,SAAS;IACT,SAAS;IACT,mBAAmB;AACrB;AAEA,MAAMC,cAAc;IAClBC,IAAI;IACJC,KAAK;AACP;AAEA,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAgBA;;CAEC,GACD,OAAO,MAAMC,SAAS;QAAC,EACrBC,OAAO,GAAG,EACVC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,YAAY,KAAK,EACjBC,QAAQ,QAAQ,EAChBC,QAAQ,EACRC,MAAM,EACNC,KAAK,EACLC,UAAU,EACVC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,uBAAuB,EACvBC,OAAO,EACPC,QAAQ,EAEI,WADTC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,cAAc,CAACX,YAAYY,QAAQV,WAAWU,QAAQX;IAC5D,MAAM,EAAEY,QAAQ,MAAM,EAAE,GAAGxC;IAC3B,MAAMyC,WAAWxC;IAEjB,qBACE,MAACE;QACCuC,SAAS;QACTC,UAAU;QACVC,WAAWP,UAAUQ,IAAI,GAAG,MAAM;QAClCC,kBAAiB;QACjBV,UAAUL,WAAWK;OACjBC;QACJL,SAASD,UAAUgB,YAAYf;QAC/BC,WAAWnC,WACTmC,+BAEA7B,UAAU,CAACkB,KAAK,EAChBd,UAAU,CAACe,KAAK,EAChBT,gBAAgB,CAACU,WAAW,EAC5BE,UAAU,YAAYX,WAAW,CAACW,MAAM,EACxCc,UAAU,aAAatB,eAAe,CAACsB,MAAM,EAC7CC,aAAa,4BACbhB,sCACAa,eAAe,CAACb,uCAChBM,kCACAI,kCACAC;QAEFN,YAAYA;;YAEXC,yBACC,KAAC7B;gBACCoB,MAAK;gBACLW,SAAS;gBACTe,kBAAkBd;gBAClBe,OAAO;;0BAGX,MAACC;gBAAKjB,SAAS;;oBACZlC,aAAa6B,yBACZ,KAACsB;wBACCjB,SAAS;wBACTkB,MAAK;wBACLC,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,WAAWR;kCAEzDnB;;oBAGJ7B,aAAa4B,2BACZ,KAACuB;wBACCjB,SAAS;wBACTmB,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,aAAaR;kCAE3DpB;;oBAGJ5B,aAAa8B,wBACZ,KAACqB;wBACCjB,SAAS;wBACTkB,MAAK;wBACLC,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,UAAUR;kCAExDlB;;;;;;AAMb,EAAE"}
+{"version":3,"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasAlign } from '../../types';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport '../Tappable/Tappable.module.css';\nimport '../Spinner/Spinner.module.css';\nimport styles from './Button.module.css';\n\nconst stylesSize = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n};\n\nconst stylesMode = {\n  primary: styles.modePrimary,\n  secondary: styles.modeSecondary,\n  tertiary: styles.modeTertiary,\n  outline: styles.modeOutline,\n  link: styles.modeLink,\n};\n\nconst stylesAppearance = {\n  'accent': styles.appearanceAccent,\n  'positive': styles.appearancePositive,\n  'negative': styles.appearanceNegative,\n  'neutral': styles.appearanceNeutral,\n  'overlay': styles.appearanceOverlay,\n  'accent-invariable': styles.appearanceAccentInvariable,\n};\n\nconst stylesAlign = {\n  left: styles.alignLeft,\n  right: styles.alignRight,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  regular: styles.sizeYRegular,\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  disableSpinnerAnimation?: boolean;\n  rounded?: 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  loading,\n  onClick,\n  disableSpinnerAnimation,\n  rounded,\n  disabled,\n  ...restProps\n}: ButtonProps): React.ReactNode => {\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.hover}\n      activeMode={styles.active}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      disabled={loading || disabled}\n      {...restProps}\n      onClick={loading ? undefined : onClick}\n      baseClassName={classNames(\n        styles.host,\n        stylesSize[size],\n        stylesMode[mode],\n        stylesAppearance[appearance],\n        align !== 'center' && stylesAlign[align],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n        platform === 'ios' && styles.ios,\n        stretched && styles.stretched,\n        hasIconOnly && !stretched && styles.singleIcon,\n        loading && styles.loading,\n        rounded && styles.rounded,\n        disabled && styles.disabled,\n      )}\n      getRootRef={getRootRef}\n    >\n      {loading && (\n        <Spinner\n          size=\"s\"\n          className={styles.spinner}\n          disableAnimation={disableSpinnerAnimation}\n          noColor\n        />\n      )}\n      <span className={styles.in}>\n        {hasReactNode(before) && (\n          <span\n            className={styles.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.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.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"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","Spinner","Tappable","stylesSize","s","m","l","stylesMode","primary","secondary","tertiary","outline","link","stylesAppearance","stylesAlign","left","right","sizeYClassNames","none","regular","Button","size","mode","appearance","stretched","align","children","before","after","getRootRef","loading","onClick","disableSpinnerAnimation","rounded","disabled","restProps","hasIconOnly","Boolean","sizeY","platform","hoverMode","activeMode","Component","href","focusVisibleMode","undefined","baseClassName","className","disableAnimation","noColor","span","role","data-testid","process","env","NODE_ENV"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,OAAO,QAAQ,wBAAqB;AAC7C,SAASC,QAAQ,QAA4B,0BAAuB;AAKpE,MAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AAEA,MAAMC,aAAa;IACjBC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,OAAO;IACPC,IAAI;AACN;AAEA,MAAMC,mBAAmB;IACvB,QAAQ;IACR,UAAU;IACV,UAAU;IACV,SAAS;IACT,SAAS;IACT,mBAAmB;AACrB;AAEA,MAAMC,cAAc;IAClBC,IAAI;IACJC,KAAK;AACP;AAEA,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAgBA;;CAEC,GACD,OAAO,MAAMC,SAAS;QAAC,EACrBC,OAAO,GAAG,EACVC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,YAAY,KAAK,EACjBC,QAAQ,QAAQ,EAChBC,QAAQ,EACRC,MAAM,EACNC,KAAK,EACLC,UAAU,EACVC,OAAO,EACPC,OAAO,EACPC,uBAAuB,EACvBC,OAAO,EACPC,QAAQ,EAEI,WADTC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,cAAc,CAACV,YAAYW,QAAQT,WAAWS,QAAQV;IAC5D,MAAM,EAAEW,QAAQ,MAAM,EAAE,GAAGvC;IAC3B,MAAMwC,WAAWvC;IAEjB,qBACE,MAACE;QACCsC,SAAS;QACTC,UAAU;QACVC,WAAWP,UAAUQ,IAAI,GAAG,MAAM;QAClCC,kBAAiB;QACjBV,UAAUJ,WAAWI;OACjBC;QACJJ,SAASD,UAAUe,YAAYd;QAC/Be,eAAejD,+BAEbM,UAAU,CAACkB,KAAK,EAChBd,UAAU,CAACe,KAAK,EAChBT,gBAAgB,CAACU,WAAW,EAC5BE,UAAU,YAAYX,WAAW,CAACW,MAAM,EACxCa,UAAU,aAAarB,eAAe,CAACqB,MAAM,EAC7CC,aAAa,4BACbf,sCACAY,eAAe,CAACZ,uCAChBM,kCACAG,kCACAC;QAEFL,YAAYA;;YAEXC,yBACC,KAAC7B;gBACCoB,MAAK;gBACL0B,SAAS;gBACTC,kBAAkBhB;gBAClBiB,OAAO;;0BAGX,MAACC;gBAAKH,SAAS;;oBACZjD,aAAa6B,yBACZ,KAACuB;wBACCH,SAAS;wBACTI,MAAK;wBACLC,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,WAAWV;kCAEzDlB;;oBAGJ7B,aAAa4B,2BACZ,KAACwB;wBACCH,SAAS;wBACTK,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,aAAaV;kCAE3DnB;;oBAGJ5B,aAAa8B,wBACZ,KAACsB;wBACCH,SAAS;wBACTI,MAAK;wBACLC,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,UAAUV;kCAExDjB;;;;;;AAMb,EAAE"}

package/dist/components/CalendarDay/CalendarDay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarDay.d.ts","sourceRoot":"","sources":["../../../src/components/CalendarDay/CalendarDay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EACpC,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAC9C,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,MAAM,CAAC,CAAC;CAC3C,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,uBAAuB,EAAE,qBAAqB;IACtF,GAAG,EAAE,IAAI,CAAC;IACV,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IAEhC,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;CACnD;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAyGlD,CAAC"}
+{"version":3,"file":"CalendarDay.d.ts","sourceRoot":"","sources":["../../../src/components/CalendarDay/CalendarDay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EACpC,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAC9C,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,MAAM,CAAC,CAAC;CAC3C,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,uBAAuB,EAAE,qBAAqB;IACtF,GAAG,EAAE,IAAI,CAAC;IACV,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IAEhC,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;CACnD;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAwGlD,CAAC"}

package/dist/components/CalendarDay/CalendarDay.js

@@ -10,7 +10,7 @@ import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext.js";
 import { Tappable } from "../Tappable/Tappable.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 export const CalendarDay = /*#__PURE__*/ React.memo((_param)=>{
-    var { day, today, selected, onChange, hidden, disabled, active, selectionStart, selectionEnd, focused, onEnter, onLeave, hinted, hintedSelectionStart, hintedSelectionEnd, sameMonth, size, className, children, renderDayContent, testId } = _param, restProps = _object_without_properties(_param, [
+    var { day, today, selected, onChange, hidden, disabled, active, selectionStart, selectionEnd, focused, onEnter, onLeave, hinted, hintedSelectionStart, hintedSelectionEnd, sameMonth, size, children, renderDayContent, testId } = _param, restProps = _object_without_properties(_param, [
         "day",
         "today",
         "selected",
@@ -28,7 +28,6 @@ export const CalendarDay = /*#__PURE__*/ React.memo((_param)=>{
         "hintedSelectionEnd",
         "sameMonth",
         "size",
-        "className",
         "children",
         "renderDayContent",
         "testId"
@@ -91,7 +90,7 @@ export const CalendarDay = /*#__PURE__*/ React.memo((_param)=>{
         });
     }
     return /*#__PURE__*/ _jsx(Tappable, _object_spread_props(_object_spread({
-        className: classNames("vkuiCalendarDay__host", size === 's' && "vkuiCalendarDay__sizeS", className),
+        baseClassName: classNames("vkuiCalendarDay__host", size === 's' && "vkuiCalendarDay__sizeS"),
         hoverMode: "vkuiCalendarDay__hostHovered",
         activeMode: "vkuiCalendarDay__hostActivated",
         hasActive: false,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CalendarDay/CalendarDay.tsx"],"sourcesContent":["'use client';\n\nimport * 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 } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './CalendarDay.module.css';\n\nexport type CalendarDayElementProps = Omit<\n  React.AllHTMLAttributes<HTMLElement>,\n  'onChange' | 'size' | 'disabled' | 'selected'\n>;\n\nexport type CalendarDayTestsProps = {\n  testId?: string | ((day: Date) => string);\n};\n\nexport interface CalendarDayProps extends CalendarDayElementProps, CalendarDayTestsProps {\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  renderDayContent?: (day: Date) => React.ReactNode;\n}\n\nexport const CalendarDay: React.FC<CalendarDayProps> = 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    children,\n    renderDayContent,\n    testId,\n    ...restProps\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    const label = new Intl.DateTimeFormat(locale, {\n      weekday: 'long',\n      year: 'numeric',\n      month: 'long',\n      day: 'numeric',\n    }).format(day);\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    const content = React.useMemo(() => {\n      if (renderDayContent) {\n        return renderDayContent(day);\n      }\n      return (\n        <div className={styles.dayNumber}>\n          <VisuallyHidden>{children ?? label}</VisuallyHidden>\n          <span aria-hidden>{day.getDate()}</span>\n        </div>\n      );\n    }, [renderDayContent, day, children, label]);\n\n    if (hidden) {\n      return <div className={classNames(styles.hidden, size === 's' && styles.sizeS)} />;\n    }\n\n    return (\n      <Tappable\n        className={classNames(styles.host, size === 's' && styles.sizeS, className)}\n        hoverMode={styles.hostHovered}\n        activeMode={styles.hostActivated}\n        hasActive={false}\n        onClick={onClick}\n        disabled={disabled}\n        tabIndex={-1}\n        getRootRef={ref}\n        focusVisibleMode={active ? 'outside' : 'inside'}\n        onPointerEnter={handleEnter}\n        onPointerLeave={handleLeave}\n        data-testid={typeof testId === 'string' ? testId : testId?.(day)}\n        {...restProps}\n      >\n        <div\n          className={classNames(\n            styles.content,\n            size === 's' && styles.sizeS,\n            today && styles.today,\n            selected && !disabled && styles.selected,\n            selectionStart && styles.selectionStart,\n            selectionEnd && styles.selectionEnd,\n            disabled && styles.disabled,\n            !sameMonth && styles.notSameMonth,\n          )}\n        >\n          <div\n            className={classNames(\n              styles.hinted,\n              hinted && styles.hintedActive,\n              hintedSelectionStart && styles.hintedSelectionStart,\n              hintedSelectionEnd && styles.hintedSelectionEnd,\n            )}\n          >\n            <div className={classNames(styles.inner, active && !disabled && styles.innerActive)}>\n              {content}\n            </div>\n          </div>\n        </div>\n      </Tappable>\n    );\n  },\n);\n\nCalendarDay.displayName = 'CalendarDay';\n"],"names":["React","classNames","ENABLE_KEYBOARD_INPUT_EVENT_NAME","useConfigProvider","Tappable","VisuallyHidden","CalendarDay","memo","day","today","selected","onChange","hidden","disabled","active","selectionStart","selectionEnd","focused","onEnter","onLeave","hinted","hintedSelectionStart","hintedSelectionEnd","sameMonth","size","className","children","renderDayContent","testId","restProps","locale","ref","useRef","onClick","useCallback","handleEnter","handleLeave","label","Intl","DateTimeFormat","weekday","year","month","format","useEffect","current","dispatchEvent","Event","bubbles","focus","content","useMemo","div","span","aria-hidden","getDate","hoverMode","activeMode","hasActive","tabIndex","getRootRef","focusVisibleMode","onPointerEnter","onPointerLeave","data-testid","displayName"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,gCAAgC,QAAQ,yCAAsC;AACvF,SAASC,iBAAiB,QAAQ,6CAA0C;AAC5E,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,cAAc,QAAQ,sCAAmC;AAkClE,OAAO,MAAMC,4BAA0CN,MAAMO,IAAI,CAC/D;QAAC,EACCC,GAAG,EACHC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,MAAM,EACNC,QAAQ,EACRC,MAAM,EACNC,cAAc,EACdC,YAAY,EACZC,OAAO,EACPC,OAAO,EACPC,OAAO,EACPC,MAAM,EACNC,oBAAoB,EACpBC,kBAAkB,EAClBC,SAAS,EACTC,IAAI,EACJC,SAAS,EACTC,QAAQ,EACRC,gBAAgB,EAChBC,MAAM,EAEW,WADdC;QArBHrB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,MAAM,EAAE,GAAG3B;IACnB,MAAM4B,MAAM/B,MAAMgC,MAAM,CAAc;IACtC,MAAMC,UAAUjC,MAAMkC,WAAW,CAAC,IAAMvB,SAASH,MAAM;QAACA;QAAKG;KAAS;IACtE,MAAMwB,cAAcnC,MAAMkC,WAAW,CAAC,IAAMhB,oBAAAA,8BAAAA,QAAUV,MAAM;QAACA;QAAKU;KAAQ;IAC1E,MAAMkB,cAAcpC,MAAMkC,WAAW,CAAC,IAAMf,oBAAAA,8BAAAA,QAAUX,MAAM;QAACA;QAAKW;KAAQ;IAE1E,MAAMkB,QAAQ,IAAIC,KAAKC,cAAc,CAACT,QAAQ;QAC5CU,SAAS;QACTC,MAAM;QACNC,OAAO;QACPlC,KAAK;IACP,GAAGmC,MAAM,CAACnC;IAEVR,MAAM4C,SAAS,CAAC;QACd,IAAI3B,WAAWc,IAAIc,OAAO,EAAE;YAC1Bd,IAAIc,OAAO,CAACC,aAAa,CAAC,IAAIC,MAAM7C,kCAAkC;gBAAE8C,SAAS;YAAK;YACtFjB,IAAIc,OAAO,CAACI,KAAK;QACnB;IACF,GAAG;QAAChC;KAAQ;IAEZ,MAAMiC,UAAUlD,MAAMmD,OAAO,CAAC;QAC5B,IAAIxB,kBAAkB;YACpB,OAAOA,iBAAiBnB;QAC1B;QACA,qBACE,MAAC4C;YAAI3B,SAAS;;8BACZ,KAACpB;8BAAgBqB,qBAAAA,sBAAAA,WAAYW;;8BAC7B,KAACgB;oBAAKC,aAAW;8BAAE9C,IAAI+C,OAAO;;;;IAGpC,GAAG;QAAC5B;QAAkBnB;QAAKkB;QAAUW;KAAM;IAE3C,IAAIzB,QAAQ;QACV,qBAAO,KAACwC;YAAI3B,WAAWxB,sCAA0BuB,SAAS;;IAC5D;IAEA,qBACE,KAACpB;QACCqB,WAAWxB,oCAAwBuB,SAAS,iCAAqBC;QACjE+B,SAAS;QACTC,UAAU;QACVC,WAAW;QACXzB,SAASA;QACTpB,UAAUA;QACV8C,UAAU,CAAC;QACXC,YAAY7B;QACZ8B,kBAAkB/C,SAAS,YAAY;QACvCgD,gBAAgB3B;QAChB4B,gBAAgB3B;QAChB4B,eAAa,OAAOpC,WAAW,WAAWA,SAASA,mBAAAA,6BAAAA,OAASpB;OACxDqB;kBAEJ,cAAA,KAACuB;YACC3B,WAAWxB,uCAETuB,SAAS,iCACTf,mCACAC,YAAY,CAACG,yCACbE,qDACAC,iDACAH,yCACA,CAACU;sBAGH,cAAA,KAAC6B;gBACC3B,WAAWxB,sCAETmB,2CACAC,iEACAC;0BAGF,cAAA,KAAC8B;oBAAI3B,WAAWxB,qCAAyBa,UAAU,CAACD;8BACjDqC;;;;;AAMb,GACA;AAEF5C,YAAY2D,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/CalendarDay/CalendarDay.tsx"],"sourcesContent":["'use client';\n\nimport * 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 } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './CalendarDay.module.css';\n\nexport type CalendarDayElementProps = Omit<\n  React.AllHTMLAttributes<HTMLElement>,\n  'onChange' | 'size' | 'disabled' | 'selected'\n>;\n\nexport type CalendarDayTestsProps = {\n  testId?: string | ((day: Date) => string);\n};\n\nexport interface CalendarDayProps extends CalendarDayElementProps, CalendarDayTestsProps {\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  renderDayContent?: (day: Date) => React.ReactNode;\n}\n\nexport const CalendarDay: React.FC<CalendarDayProps> = 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    children,\n    renderDayContent,\n    testId,\n    ...restProps\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    const label = new Intl.DateTimeFormat(locale, {\n      weekday: 'long',\n      year: 'numeric',\n      month: 'long',\n      day: 'numeric',\n    }).format(day);\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    const content = React.useMemo(() => {\n      if (renderDayContent) {\n        return renderDayContent(day);\n      }\n      return (\n        <div className={styles.dayNumber}>\n          <VisuallyHidden>{children ?? label}</VisuallyHidden>\n          <span aria-hidden>{day.getDate()}</span>\n        </div>\n      );\n    }, [renderDayContent, day, children, label]);\n\n    if (hidden) {\n      return <div className={classNames(styles.hidden, size === 's' && styles.sizeS)} />;\n    }\n\n    return (\n      <Tappable\n        baseClassName={classNames(styles.host, size === 's' && styles.sizeS)}\n        hoverMode={styles.hostHovered}\n        activeMode={styles.hostActivated}\n        hasActive={false}\n        onClick={onClick}\n        disabled={disabled}\n        tabIndex={-1}\n        getRootRef={ref}\n        focusVisibleMode={active ? 'outside' : 'inside'}\n        onPointerEnter={handleEnter}\n        onPointerLeave={handleLeave}\n        data-testid={typeof testId === 'string' ? testId : testId?.(day)}\n        {...restProps}\n      >\n        <div\n          className={classNames(\n            styles.content,\n            size === 's' && styles.sizeS,\n            today && styles.today,\n            selected && !disabled && styles.selected,\n            selectionStart && styles.selectionStart,\n            selectionEnd && styles.selectionEnd,\n            disabled && styles.disabled,\n            !sameMonth && styles.notSameMonth,\n          )}\n        >\n          <div\n            className={classNames(\n              styles.hinted,\n              hinted && styles.hintedActive,\n              hintedSelectionStart && styles.hintedSelectionStart,\n              hintedSelectionEnd && styles.hintedSelectionEnd,\n            )}\n          >\n            <div className={classNames(styles.inner, active && !disabled && styles.innerActive)}>\n              {content}\n            </div>\n          </div>\n        </div>\n      </Tappable>\n    );\n  },\n);\n\nCalendarDay.displayName = 'CalendarDay';\n"],"names":["React","classNames","ENABLE_KEYBOARD_INPUT_EVENT_NAME","useConfigProvider","Tappable","VisuallyHidden","CalendarDay","memo","day","today","selected","onChange","hidden","disabled","active","selectionStart","selectionEnd","focused","onEnter","onLeave","hinted","hintedSelectionStart","hintedSelectionEnd","sameMonth","size","children","renderDayContent","testId","restProps","locale","ref","useRef","onClick","useCallback","handleEnter","handleLeave","label","Intl","DateTimeFormat","weekday","year","month","format","useEffect","current","dispatchEvent","Event","bubbles","focus","content","useMemo","div","className","span","aria-hidden","getDate","baseClassName","hoverMode","activeMode","hasActive","tabIndex","getRootRef","focusVisibleMode","onPointerEnter","onPointerLeave","data-testid","displayName"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,gCAAgC,QAAQ,yCAAsC;AACvF,SAASC,iBAAiB,QAAQ,6CAA0C;AAC5E,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,cAAc,QAAQ,sCAAmC;AAkClE,OAAO,MAAMC,4BAA0CN,MAAMO,IAAI,CAC/D;QAAC,EACCC,GAAG,EACHC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,MAAM,EACNC,QAAQ,EACRC,MAAM,EACNC,cAAc,EACdC,YAAY,EACZC,OAAO,EACPC,OAAO,EACPC,OAAO,EACPC,MAAM,EACNC,oBAAoB,EACpBC,kBAAkB,EAClBC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,gBAAgB,EAChBC,MAAM,EAEW,WADdC;QApBHpB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,MAAM,EAAE,GAAG1B;IACnB,MAAM2B,MAAM9B,MAAM+B,MAAM,CAAc;IACtC,MAAMC,UAAUhC,MAAMiC,WAAW,CAAC,IAAMtB,SAASH,MAAM;QAACA;QAAKG;KAAS;IACtE,MAAMuB,cAAclC,MAAMiC,WAAW,CAAC,IAAMf,oBAAAA,8BAAAA,QAAUV,MAAM;QAACA;QAAKU;KAAQ;IAC1E,MAAMiB,cAAcnC,MAAMiC,WAAW,CAAC,IAAMd,oBAAAA,8BAAAA,QAAUX,MAAM;QAACA;QAAKW;KAAQ;IAE1E,MAAMiB,QAAQ,IAAIC,KAAKC,cAAc,CAACT,QAAQ;QAC5CU,SAAS;QACTC,MAAM;QACNC,OAAO;QACPjC,KAAK;IACP,GAAGkC,MAAM,CAAClC;IAEVR,MAAM2C,SAAS,CAAC;QACd,IAAI1B,WAAWa,IAAIc,OAAO,EAAE;YAC1Bd,IAAIc,OAAO,CAACC,aAAa,CAAC,IAAIC,MAAM5C,kCAAkC;gBAAE6C,SAAS;YAAK;YACtFjB,IAAIc,OAAO,CAACI,KAAK;QACnB;IACF,GAAG;QAAC/B;KAAQ;IAEZ,MAAMgC,UAAUjD,MAAMkD,OAAO,CAAC;QAC5B,IAAIxB,kBAAkB;YACpB,OAAOA,iBAAiBlB;QAC1B;QACA,qBACE,MAAC2C;YAAIC,SAAS;;8BACZ,KAAC/C;8BAAgBoB,qBAAAA,sBAAAA,WAAYW;;8BAC7B,KAACiB;oBAAKC,aAAW;8BAAE9C,IAAI+C,OAAO;;;;IAGpC,GAAG;QAAC7B;QAAkBlB;QAAKiB;QAAUW;KAAM;IAE3C,IAAIxB,QAAQ;QACV,qBAAO,KAACuC;YAAIC,WAAWnD,sCAA0BuB,SAAS;;IAC5D;IAEA,qBACE,KAACpB;QACCoD,eAAevD,oCAAwBuB,SAAS;QAChDiC,SAAS;QACTC,UAAU;QACVC,WAAW;QACX3B,SAASA;QACTnB,UAAUA;QACV+C,UAAU,CAAC;QACXC,YAAY/B;QACZgC,kBAAkBhD,SAAS,YAAY;QACvCiD,gBAAgB7B;QAChB8B,gBAAgB7B;QAChB8B,eAAa,OAAOtC,WAAW,WAAWA,SAASA,mBAAAA,6BAAAA,OAASnB;OACxDoB;kBAEJ,cAAA,KAACuB;YACCC,WAAWnD,uCAETuB,SAAS,iCACTf,mCACAC,YAAY,CAACG,yCACbE,qDACAC,iDACAH,yCACA,CAACU;sBAGH,cAAA,KAAC4B;gBACCC,WAAWnD,sCAETmB,2CACAC,iEACAC;0BAGF,cAAA,KAAC6B;oBAAIC,WAAWnD,qCAAyBa,UAAU,CAACD;8BACjDoC;;;;;AAMb,GACA;AAEF3C,YAAY4D,WAAW,GAAG"}

package/dist/components/CalendarHeader/CalendarHeader.js

@@ -100,7 +100,7 @@ export const CalendarHeader = (_param)=>{
             !prevMonthHidden && /*#__PURE__*/ _jsx(AdaptivityProvider, {
                 sizeX: "regular",
                 children: /*#__PURE__*/ _jsxs(Tappable, _object_spread_props(_object_spread({
-                    className: classNames("vkuiCalendarHeader__navIcon", "vkuiCalendarHeader__navIconPrev", prevMonthClassName),
+                    baseClassName: classNames("vkuiCalendarHeader__navIcon", "vkuiCalendarHeader__navIconPrev", prevMonthClassName),
                     onClick: onPrevMonth,
                     "data-testid": prevMonthButtonTestId
                 }, restPrevMonthProps), {
@@ -168,7 +168,7 @@ export const CalendarHeader = (_param)=>{
             !nextMonthHidden && /*#__PURE__*/ _jsx(AdaptivityProvider, {
                 sizeX: "regular",
                 children: /*#__PURE__*/ _jsxs(Tappable, _object_spread_props(_object_spread({
-                    className: classNames("vkuiCalendarHeader__navIcon", "vkuiCalendarHeader__navIconNext", nextMonthClassName),
+                    baseClassName: classNames("vkuiCalendarHeader__navIcon", "vkuiCalendarHeader__navIconNext", nextMonthClassName),
                     onClick: onNextMonth,
                     "data-testid": nextMonthButtonTestId
                 }, restNextMonthProps), {