@vkontakte/vkui 5.8.0-beta.0 → 5.8.1-alpha.0

package/dist/cssm/components/AppRoot/AppRoot.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { IconSettingsProvider } from '@vkontakte/icons';
 import { classNames, noop } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useAppearance } from '../../hooks/useAppearance';
@@ -18,10 +17,24 @@ const vkuiSizeXClassNames = {
     none: 'vkui--sizeX-none',
     [SizeType.REGULAR]: 'vkui--sizeX-regular'
 };
+const vkuiLayoutClassNames = {
+    card: 'vkui--layout-card',
+    plain: 'vkui--layout-plain'
+};
+function containerClassNames(layout, sizeX) {
+    const classNames = [];
+    if (layout) {
+        classNames.push(vkuiLayoutClassNames[layout]);
+    }
+    if (sizeX !== SizeType.COMPACT) {
+        classNames.push(vkuiSizeXClassNames[sizeX]);
+    }
+    return classNames;
+}
 const INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;
 /**
  * @see https://vkcom.github.io/VKUI/#/AppRoot
- */ export const AppRoot = ({ children, mode = 'full', scroll = 'global', portalRoot: portalRootProp = null, disablePortal, className, safeAreaInsets, ...props })=>{
+ */ export const AppRoot = ({ children, mode = 'full', scroll = 'global', portalRoot: portalRootProp = null, disablePortal, disableParentTransformForPositionFixedElements, className, safeAreaInsets, layout, ...props })=>{
     const isKeyboardInputActive = useKeyboardInputTracker();
     const rootRef = React.useRef(null);
     const [portalRoot, setPortalRoot] = React.useState(null);
@@ -68,11 +81,23 @@ const INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;
         const classes = [
             'vkui__root'
         ].concat(mode === 'embedded' ? 'vkui__root--embedded' : []);
-        parent?.classList.add(...classes);
+        if (parent) {
+            if (mode === 'embedded' && !disableParentTransformForPositionFixedElements) {
+                parent.style.transform = 'translate3d(0, 0, 0)';
+            }
+            parent.classList.add(...classes);
+        }
         return ()=>{
-            parent?.classList.remove(...classes);
+            if (parent) {
+                if (mode === 'embedded' && !disableParentTransformForPositionFixedElements) {
+                    parent.style.transform = '';
+                }
+                parent.classList.remove(...classes);
+            }
         };
-    }, []);
+    }, [
+        disableParentTransformForPositionFixedElements
+    ]);
     useIsomorphicLayoutEffect(()=>{
         if (mode === 'full') {
             document.documentElement.classList.add('vkui');
@@ -117,17 +142,18 @@ const INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;
         if (mode === 'partial') {
             return noop;
         }
-        const className = sizeX !== SizeType.COMPACT ? vkuiSizeXClassNames[sizeX] : null;
+        const classNames = containerClassNames(layout, sizeX);
         const container = mode === 'embedded' ? rootRef.current?.parentElement : document.body;
-        if (className === null || !container) {
+        if (!classNames.length || !container) {
             return noop;
         }
-        container.classList.add(className);
+        container.classList.add(...classNames);
         return ()=>{
-            container.classList.remove(className);
+            container.classList.remove(...classNames);
         };
     }, [
-        sizeX
+        sizeX,
+        layout
     ]);
     useIsomorphicLayoutEffect(()=>{
         if (mode !== 'full' || appearance === undefined) {
@@ -148,13 +174,12 @@ const INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;
             embedded: mode === 'embedded',
             keyboardInput: isKeyboardInputActive,
             mode,
-            disablePortal
+            disablePortal,
+            layout
         }
     }, /*#__PURE__*/ React.createElement(ScrollController, {
         elRef: rootRef
-    }, /*#__PURE__*/ React.createElement(IconSettingsProvider, {
-        classPrefix: "vkui"
-    }, children)));
+    }, children));
     return mode === 'partial' ? content : /*#__PURE__*/ React.createElement("div", {
         ref: rootRef,
         className: classNames(styles['AppRoot'], hasPointer === undefined ? styles['AppRoot--pointer-none'] : !hasPointer && styles['AppRoot--pointer-has-not'], className),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconSettingsProvider } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useInsets } from '../../hooks/useInsets';\nimport { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { AppRootContext } from './AppRootContext';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\nimport styles from './AppRoot.module.css';\n\nconst warn = warnOnce('AppRoot');\n\nexport type SafeAreaInsets = {\n  top?: number;\n  right?: number;\n  bottom?: number;\n  left?: number;\n};\n\nconst vkuiSizeXClassNames = {\n  none: 'vkui--sizeX-none',\n  [SizeType.REGULAR]: 'vkui--sizeX-regular',\n};\n\nconst INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;\n\n// Используйте classList, но будьте осторожны\n/* eslint-disable no-restricted-properties */\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Режим встраивания */\n  mode?: 'partial' | 'embedded' | 'full';\n  window?: Window;\n  scroll?: 'global' | 'contain';\n  safeAreaInsets?: SafeAreaInsets;\n  /**\n   * Кастомный root-элемент портала\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /** Disable portal for components */\n  disablePortal?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppRoot\n */\nexport const AppRoot = ({\n  children,\n  mode = 'full',\n  scroll = 'global',\n  portalRoot: portalRootProp = null,\n  disablePortal,\n  className,\n  safeAreaInsets,\n  ...props\n}: AppRootProps) => {\n  const isKeyboardInputActive = useKeyboardInputTracker();\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const [portalRoot, setPortalRoot] = React.useState<HTMLElement | null>(null);\n  const { document } = useDOM();\n  const deprecatedInsets = useInsets(!safeAreaInsets);\n  const insets = safeAreaInsets ? safeAreaInsets : deprecatedInsets;\n  const appearance = useAppearance();\n\n  const { hasPointer, sizeX = 'none' } = useAdaptivity();\n\n  if (process.env.NODE_ENVIRONMENT === 'development') {\n    if (!safeAreaInsets) {\n      // TODO [>=6]: удалить warn\n      warn(\"[@vkontakte/vk-bridge] Интеграция VKUI с @vkontakte/vk-bridge устарела и будет удалена в v6. Используйте хук `useInsets()` из @vkontakte/vk-bridge-react и результат передайте в параметр `safeAreaInsets` (см. https://github.com/VKCOM/VKUI/issues/5049)\"); // prettier-ignore\n    }\n  }\n\n  // setup portal\n  useIsomorphicLayoutEffect(() => {\n    let portal: HTMLElement | null = null;\n    if (portalRootProp) {\n      if (isRefObject(portalRootProp)) {\n        portal = portalRootProp.current;\n      } else {\n        portal = portalRootProp;\n      }\n    }\n    if (!portal) {\n      portal = document!.createElement('div');\n      document!.body.appendChild(portal);\n    }\n    setPortalRoot(portal);\n    return () => {\n      if (!portalRootProp) {\n        portal?.parentElement?.removeChild(portal);\n      }\n    };\n  }, [portalRootProp]);\n\n  // setup root classes\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n\n    const parent = rootRef.current?.parentElement;\n    const classes = ['vkui__root'].concat(mode === 'embedded' ? 'vkui__root--embedded' : []);\n    parent?.classList.add(...classes);\n\n    return () => {\n      parent?.classList.remove(...classes);\n    };\n  }, []);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'full') {\n      document!.documentElement.classList.add('vkui');\n\n      return () => {\n        document!.documentElement.classList.remove('vkui');\n      };\n    }\n\n    return undefined;\n  }, [document, mode]);\n\n  // setup insets\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial' || !rootRef.current?.parentElement) {\n      return noop;\n    }\n\n    const parent = rootRef.current.parentElement;\n\n    let key: keyof SafeAreaInsets;\n    for (key in insets) {\n      if (insets.hasOwnProperty(key) && typeof insets[key] === 'number') {\n        const inset = insets[key];\n        parent.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n        portalRoot &&\n          portalRoot.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n      }\n    }\n\n    return () => {\n      let key: keyof SafeAreaInsets;\n      for (key in insets) {\n        if (insets.hasOwnProperty(key)) {\n          parent.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n          portalRoot && portalRoot.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n        }\n      }\n    };\n  }, [insets, portalRoot]);\n\n  // adaptivity handler\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n    const className = sizeX !== SizeType.COMPACT ? vkuiSizeXClassNames[sizeX] : null;\n    const container = mode === 'embedded' ? rootRef.current?.parentElement : document!.body;\n\n    if (className === null || !container) {\n      return noop;\n    }\n\n    container.classList.add(className);\n    return () => {\n      container.classList.remove(className);\n    };\n  }, [sizeX]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode !== 'full' || appearance === undefined) {\n      return noop;\n    }\n    document!.documentElement.style.setProperty('color-scheme', appearance);\n\n    return () => document!.documentElement.style.removeProperty('color-scheme');\n  }, [appearance]);\n\n  const ScrollController = React.useMemo(\n    () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),\n    [scroll],\n  );\n\n  const content = (\n    <AppRootContext.Provider\n      value={{\n        appRoot: rootRef,\n        portalRoot,\n        embedded: mode === 'embedded',\n        keyboardInput: isKeyboardInputActive,\n        mode,\n        disablePortal,\n      }}\n    >\n      <ScrollController elRef={rootRef}>\n        <IconSettingsProvider classPrefix=\"vkui\">{children}</IconSettingsProvider>\n      </ScrollController>\n    </AppRootContext.Provider>\n  );\n\n  return mode === 'partial' ? (\n    content\n  ) : (\n    <div\n      ref={rootRef}\n      className={classNames(\n        styles['AppRoot'],\n        hasPointer === undefined\n          ? styles['AppRoot--pointer-none']\n          : !hasPointer && styles['AppRoot--pointer-has-not'],\n        className,\n      )}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n};\n"],"names":["React","IconSettingsProvider","classNames","noop","useAdaptivity","useAppearance","useInsets","useKeyboardInputTracker","SizeType","useDOM","isRefObject","useIsomorphicLayoutEffect","warnOnce","AppRootContext","ElementScrollController","GlobalScrollController","styles","warn","vkuiSizeXClassNames","none","REGULAR","INSET_CUSTOM_PROPERTY_PREFIX","AppRoot","children","mode","scroll","portalRoot","portalRootProp","disablePortal","className","safeAreaInsets","props","isKeyboardInputActive","rootRef","useRef","setPortalRoot","useState","document","deprecatedInsets","insets","appearance","hasPointer","sizeX","process","env","NODE_ENVIRONMENT","portal","current","createElement","body","appendChild","parentElement","removeChild","parent","classes","concat","classList","add","remove","documentElement","undefined","key","hasOwnProperty","inset","style","setProperty","removeProperty","COMPACT","container","ScrollController","useMemo","content","Provider","value","appRoot","embedded","keyboardInput","elRef","classPrefix","div","ref"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useInsets } from '../../hooks/useInsets';\nimport { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { AppRootContext } from './AppRootContext';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\nimport styles from './AppRoot.module.css';\n\nconst warn = warnOnce('AppRoot');\n\nexport type SafeAreaInsets = {\n  top?: number;\n  right?: number;\n  bottom?: number;\n  left?: number;\n};\n\nconst vkuiSizeXClassNames = {\n  none: 'vkui--sizeX-none',\n  [SizeType.REGULAR]: 'vkui--sizeX-regular',\n};\n\nconst vkuiLayoutClassNames = {\n  card: 'vkui--layout-card',\n  plain: 'vkui--layout-plain',\n};\n\nfunction containerClassNames(layout: AppRootProps['layout'], sizeX: SizeType | 'none'): string[] {\n  const classNames: string[] = [];\n\n  if (layout) {\n    classNames.push(vkuiLayoutClassNames[layout]);\n  }\n\n  if (sizeX !== SizeType.COMPACT) {\n    classNames.push(vkuiSizeXClassNames[sizeX]);\n  }\n\n  return classNames;\n}\n\nconst INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;\n\n// Используйте classList, но будьте осторожны\n/* eslint-disable no-restricted-properties */\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Режим встраивания */\n  mode?: 'partial' | 'embedded' | 'full';\n  window?: Window;\n  scroll?: 'global' | 'contain';\n  safeAreaInsets?: SafeAreaInsets;\n  /**\n   * Кастомный root-элемент портала\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /**\n   * Отключает рендер всплывающих компонентов в отдельном контейнере\n   */\n  disablePortal?: boolean;\n  /**\n   * По умолчанию, mode=\"embedded\" переносит систему координат элементов с `position: fixed` на\n   * свой контейнер через `transform: translate3d(0, 0, 0)`.\n   *\n   * Это поведение можно отключить с помощью этого параметра.\n   */\n  disableParentTransformForPositionFixedElements?: boolean;\n  layout?: 'card' | 'plain';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppRoot\n */\nexport const AppRoot = ({\n  children,\n  mode = 'full',\n  scroll = 'global',\n  portalRoot: portalRootProp = null,\n  disablePortal,\n  disableParentTransformForPositionFixedElements,\n  className,\n  safeAreaInsets,\n  layout,\n  ...props\n}: AppRootProps) => {\n  const isKeyboardInputActive = useKeyboardInputTracker();\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const [portalRoot, setPortalRoot] = React.useState<HTMLElement | null>(null);\n  const { document } = useDOM();\n  const deprecatedInsets = useInsets(!safeAreaInsets);\n  const insets = safeAreaInsets ? safeAreaInsets : deprecatedInsets;\n  const appearance = useAppearance();\n\n  const { hasPointer, sizeX = 'none' } = useAdaptivity();\n\n  if (process.env.NODE_ENVIRONMENT === 'development') {\n    if (!safeAreaInsets) {\n      // TODO [>=6]: удалить warn\n      warn(\"[@vkontakte/vk-bridge] Интеграция VKUI с @vkontakte/vk-bridge устарела и будет удалена в v6. Используйте хук `useInsets()` из @vkontakte/vk-bridge-react и результат передайте в параметр `safeAreaInsets` (см. https://github.com/VKCOM/VKUI/issues/5049)\"); // prettier-ignore\n    }\n  }\n\n  // setup portal\n  useIsomorphicLayoutEffect(() => {\n    let portal: HTMLElement | null = null;\n    if (portalRootProp) {\n      if (isRefObject(portalRootProp)) {\n        portal = portalRootProp.current;\n      } else {\n        portal = portalRootProp;\n      }\n    }\n    if (!portal) {\n      portal = document!.createElement('div');\n      document!.body.appendChild(portal);\n    }\n    setPortalRoot(portal);\n    return () => {\n      if (!portalRootProp) {\n        portal?.parentElement?.removeChild(portal);\n      }\n    };\n  }, [portalRootProp]);\n\n  // setup root classes\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n\n    const parent = rootRef.current?.parentElement;\n    const classes = ['vkui__root'].concat(mode === 'embedded' ? 'vkui__root--embedded' : []);\n    if (parent) {\n      if (mode === 'embedded' && !disableParentTransformForPositionFixedElements) {\n        parent.style.transform = 'translate3d(0, 0, 0)';\n      }\n      parent.classList.add(...classes);\n    }\n\n    return () => {\n      if (parent) {\n        if (mode === 'embedded' && !disableParentTransformForPositionFixedElements) {\n          parent.style.transform = '';\n        }\n        parent.classList.remove(...classes);\n      }\n    };\n  }, [disableParentTransformForPositionFixedElements]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'full') {\n      document!.documentElement.classList.add('vkui');\n\n      return () => {\n        document!.documentElement.classList.remove('vkui');\n      };\n    }\n\n    return undefined;\n  }, [document, mode]);\n\n  // setup insets\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial' || !rootRef.current?.parentElement) {\n      return noop;\n    }\n\n    const parent = rootRef.current.parentElement;\n\n    let key: keyof SafeAreaInsets;\n    for (key in insets) {\n      if (insets.hasOwnProperty(key) && typeof insets[key] === 'number') {\n        const inset = insets[key];\n        parent.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n        portalRoot &&\n          portalRoot.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n      }\n    }\n\n    return () => {\n      let key: keyof SafeAreaInsets;\n      for (key in insets) {\n        if (insets.hasOwnProperty(key)) {\n          parent.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n          portalRoot && portalRoot.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n        }\n      }\n    };\n  }, [insets, portalRoot]);\n\n  // adaptivity handler\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n\n    const classNames = containerClassNames(layout, sizeX);\n\n    const container = mode === 'embedded' ? rootRef.current?.parentElement : document!.body;\n\n    if (!classNames.length || !container) {\n      return noop;\n    }\n\n    container.classList.add(...classNames);\n    return () => {\n      container.classList.remove(...classNames);\n    };\n  }, [sizeX, layout]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode !== 'full' || appearance === undefined) {\n      return noop;\n    }\n    document!.documentElement.style.setProperty('color-scheme', appearance);\n\n    return () => document!.documentElement.style.removeProperty('color-scheme');\n  }, [appearance]);\n\n  const ScrollController = React.useMemo(\n    () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),\n    [scroll],\n  );\n\n  const content = (\n    <AppRootContext.Provider\n      value={{\n        appRoot: rootRef,\n        portalRoot,\n        embedded: mode === 'embedded',\n        keyboardInput: isKeyboardInputActive,\n        mode,\n        disablePortal,\n        layout,\n      }}\n    >\n      <ScrollController elRef={rootRef}>{children}</ScrollController>\n    </AppRootContext.Provider>\n  );\n\n  return mode === 'partial' ? (\n    content\n  ) : (\n    <div\n      ref={rootRef}\n      className={classNames(\n        styles['AppRoot'],\n        hasPointer === undefined\n          ? styles['AppRoot--pointer-none']\n          : !hasPointer && styles['AppRoot--pointer-has-not'],\n        className,\n      )}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivity","useAppearance","useInsets","useKeyboardInputTracker","SizeType","useDOM","isRefObject","useIsomorphicLayoutEffect","warnOnce","AppRootContext","ElementScrollController","GlobalScrollController","styles","warn","vkuiSizeXClassNames","none","REGULAR","vkuiLayoutClassNames","card","plain","containerClassNames","layout","sizeX","push","COMPACT","INSET_CUSTOM_PROPERTY_PREFIX","AppRoot","children","mode","scroll","portalRoot","portalRootProp","disablePortal","disableParentTransformForPositionFixedElements","className","safeAreaInsets","props","isKeyboardInputActive","rootRef","useRef","setPortalRoot","useState","document","deprecatedInsets","insets","appearance","hasPointer","process","env","NODE_ENVIRONMENT","portal","current","createElement","body","appendChild","parentElement","removeChild","parent","classes","concat","style","transform","classList","add","remove","documentElement","undefined","key","hasOwnProperty","inset","setProperty","removeProperty","container","length","ScrollController","useMemo","content","Provider","value","appRoot","embedded","keyboardInput","elRef","div","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,SAAS,QAAQ,wBAAwB;AAClD,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,WAAW,QAAQ,wBAAwB;AACpD,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,uBAAuB,EAAEC,sBAAsB,QAAQ,kBAAkB;AAClF,OAAOC,YAAY,uBAAuB;AAE1C,MAAMC,OAAOL,SAAS;AAStB,MAAMM,sBAAsB;IAC1BC,MAAM;IACN,CAACX,SAASY,OAAO,CAAC,EAAE;AACtB;AAEA,MAAMC,uBAAuB;IAC3BC,MAAM;IACNC,OAAO;AACT;AAEA,SAASC,oBAAoBC,MAA8B,EAAEC,KAAwB;IACnF,MAAMxB,aAAuB,EAAE;IAE/B,IAAIuB,QAAQ;QACVvB,WAAWyB,IAAI,CAACN,oBAAoB,CAACI,OAAO;IAC9C;IAEA,IAAIC,UAAUlB,SAASoB,OAAO,EAAE;QAC9B1B,WAAWyB,IAAI,CAACT,mBAAmB,CAACQ,MAAM;IAC5C;IAEA,OAAOxB;AACT;AAEA,MAAM2B,+BAA+B,CAAC,iCAAiC,CAAC;AA6BxE;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EACtBC,QAAQ,EACRC,OAAO,MAAM,EACbC,SAAS,QAAQ,EACjBC,YAAYC,iBAAiB,IAAI,EACjCC,aAAa,EACbC,8CAA8C,EAC9CC,SAAS,EACTC,cAAc,EACdd,MAAM,EACN,GAAGe,OACU;IACb,MAAMC,wBAAwBlC;IAC9B,MAAMmC,UAAUzC,MAAM0C,MAAM,CAAwB;IACpD,MAAM,CAACT,YAAYU,cAAc,GAAG3C,MAAM4C,QAAQ,CAAqB;IACvE,MAAM,EAAEC,QAAQ,EAAE,GAAGrC;IACrB,MAAMsC,mBAAmBzC,UAAU,CAACiC;IACpC,MAAMS,SAAST,iBAAiBA,iBAAiBQ;IACjD,MAAME,aAAa5C;IAEnB,MAAM,EAAE6C,UAAU,EAAExB,QAAQ,MAAM,EAAE,GAAGtB;IAEvC,IAAI+C,QAAQC,GAAG,CAACC,gBAAgB,KAAK,eAAe;QAClD,IAAI,CAACd,gBAAgB;YACnB,2BAA2B;YAC3BtB,KAAK,+PAA+P,kBAAkB;QACxR;IACF;IAEA,eAAe;IACfN,0BAA0B;QACxB,IAAI2C,SAA6B;QACjC,IAAInB,gBAAgB;YAClB,IAAIzB,YAAYyB,iBAAiB;gBAC/BmB,SAASnB,eAAeoB,OAAO;YACjC,OAAO;gBACLD,SAASnB;YACX;QACF;QACA,IAAI,CAACmB,QAAQ;YACXA,SAASR,SAAUU,aAAa,CAAC;YACjCV,SAAUW,IAAI,CAACC,WAAW,CAACJ;QAC7B;QACAV,cAAcU;QACd,OAAO;YACL,IAAI,CAACnB,gBAAgB;gBACnBmB,QAAQK,eAAeC,YAAYN;YACrC;QACF;IACF,GAAG;QAACnB;KAAe;IAEnB,qBAAqB;IACrBxB,0BAA0B;QACxB,IAAIqB,SAAS,WAAW;YACtB,OAAO7B;QACT;QAEA,MAAM0D,SAASnB,QAAQa,OAAO,EAAEI;QAChC,MAAMG,UAAU;YAAC;SAAa,CAACC,MAAM,CAAC/B,SAAS,aAAa,yBAAyB,EAAE;QACvF,IAAI6B,QAAQ;YACV,IAAI7B,SAAS,cAAc,CAACK,gDAAgD;gBAC1EwB,OAAOG,KAAK,CAACC,SAAS,GAAG;YAC3B;YACAJ,OAAOK,SAAS,CAACC,GAAG,IAAIL;QAC1B;QAEA,OAAO;YACL,IAAID,QAAQ;gBACV,IAAI7B,SAAS,cAAc,CAACK,gDAAgD;oBAC1EwB,OAAOG,KAAK,CAACC,SAAS,GAAG;gBAC3B;gBACAJ,OAAOK,SAAS,CAACE,MAAM,IAAIN;YAC7B;QACF;IACF,GAAG;QAACzB;KAA+C;IAEnD1B,0BAA0B;QACxB,IAAIqB,SAAS,QAAQ;YACnBc,SAAUuB,eAAe,CAACH,SAAS,CAACC,GAAG,CAAC;YAExC,OAAO;gBACLrB,SAAUuB,eAAe,CAACH,SAAS,CAACE,MAAM,CAAC;YAC7C;QACF;QAEA,OAAOE;IACT,GAAG;QAACxB;QAAUd;KAAK;IAEnB,eAAe;IACfrB,0BAA0B;QACxB,IAAIqB,SAAS,aAAa,CAACU,QAAQa,OAAO,EAAEI,eAAe;YACzD,OAAOxD;QACT;QAEA,MAAM0D,SAASnB,QAAQa,OAAO,CAACI,aAAa;QAE5C,IAAIY;QACJ,IAAKA,OAAOvB,OAAQ;YAClB,IAAIA,OAAOwB,cAAc,CAACD,QAAQ,OAAOvB,MAAM,CAACuB,IAAI,KAAK,UAAU;gBACjE,MAAME,QAAQzB,MAAM,CAACuB,IAAI;gBACzBV,OAAOG,KAAK,CAACU,WAAW,CAAC7C,+BAA+B0C,KAAK,CAAC,EAAEE,MAAM,EAAE,CAAC;gBACzEvC,cACEA,WAAW8B,KAAK,CAACU,WAAW,CAAC7C,+BAA+B0C,KAAK,CAAC,EAAEE,MAAM,EAAE,CAAC;YACjF;QACF;QAEA,OAAO;YACL,IAAIF;YACJ,IAAKA,OAAOvB,OAAQ;gBAClB,IAAIA,OAAOwB,cAAc,CAACD,MAAM;oBAC9BV,OAAOG,KAAK,CAACW,cAAc,CAAC9C,+BAA+B0C;oBAC3DrC,cAAcA,WAAW8B,KAAK,CAACW,cAAc,CAAC9C,+BAA+B0C;gBAC/E;YACF;QACF;IACF,GAAG;QAACvB;QAAQd;KAAW;IAEvB,qBAAqB;IACrBvB,0BAA0B;QACxB,IAAIqB,SAAS,WAAW;YACtB,OAAO7B;QACT;QAEA,MAAMD,aAAasB,oBAAoBC,QAAQC;QAE/C,MAAMkD,YAAY5C,SAAS,aAAaU,QAAQa,OAAO,EAAEI,gBAAgBb,SAAUW,IAAI;QAEvF,IAAI,CAACvD,WAAW2E,MAAM,IAAI,CAACD,WAAW;YACpC,OAAOzE;QACT;QAEAyE,UAAUV,SAAS,CAACC,GAAG,IAAIjE;QAC3B,OAAO;YACL0E,UAAUV,SAAS,CAACE,MAAM,IAAIlE;QAChC;IACF,GAAG;QAACwB;QAAOD;KAAO;IAElBd,0BAA0B;QACxB,IAAIqB,SAAS,UAAUiB,eAAeqB,WAAW;YAC/C,OAAOnE;QACT;QACA2C,SAAUuB,eAAe,CAACL,KAAK,CAACU,WAAW,CAAC,gBAAgBzB;QAE5D,OAAO,IAAMH,SAAUuB,eAAe,CAACL,KAAK,CAACW,cAAc,CAAC;IAC9D,GAAG;QAAC1B;KAAW;IAEf,MAAM6B,mBAAmB7E,MAAM8E,OAAO,CACpC,IAAO9C,WAAW,YAAYnB,0BAA0BC,wBACxD;QAACkB;KAAO;IAGV,MAAM+C,wBACJ,oBAACnE,eAAeoE,QAAQ;QACtBC,OAAO;YACLC,SAASzC;YACTR;YACAkD,UAAUpD,SAAS;YACnBqD,eAAe5C;YACfT;YACAI;YACAX;QACF;qBAEA,oBAACqD;QAAiBQ,OAAO5C;OAAUX;IAIvC,OAAOC,SAAS,YACdgD,wBAEA,oBAACO;QACCC,KAAK9C;QACLJ,WAAWpC,WACTc,MAAM,CAAC,UAAU,EACjBkC,eAAeoB,YACXtD,MAAM,CAAC,wBAAwB,GAC/B,CAACkC,cAAclC,MAAM,CAAC,2BAA2B,EACrDsB;QAED,GAAGE,KAAK;OAERwC;AAGP,EAAE"}

package/dist/cssm/components/AppRoot/AppRootContext.d.ts

@@ -6,5 +6,6 @@ export interface AppRootContextInterface {
     mode?: 'partial' | 'embedded' | 'full';
     keyboardInput?: boolean;
     disablePortal?: boolean;
+    layout?: 'card' | 'plain';
 }
 export declare const AppRootContext: React.Context<AppRootContextInterface>;

package/dist/cssm/components/AppRoot/AppRootContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/AppRootContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface AppRootContextInterface {\n  appRoot?: React.RefObject<HTMLDivElement>;\n  portalRoot?: HTMLElement | null;\n  embedded?: boolean;\n  mode?: 'partial' | 'embedded' | 'full';\n  keyboardInput?: boolean;\n  disablePortal?: boolean;\n}\n\nexport const AppRootContext = React.createContext<AppRootContextInterface>({\n  portalRoot: null,\n});\n"],"names":["React","AppRootContext","createContext","portalRoot"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAW/B,OAAO,MAAMC,iBAAiBD,MAAME,aAAa,CAA0B;IACzEC,YAAY;AACd,GAAG"}
+{"version":3,"sources":["../../../../src/components/AppRoot/AppRootContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface AppRootContextInterface {\n  appRoot?: React.RefObject<HTMLDivElement>;\n  portalRoot?: HTMLElement | null;\n  embedded?: boolean;\n  mode?: 'partial' | 'embedded' | 'full';\n  keyboardInput?: boolean;\n  disablePortal?: boolean;\n  layout?: 'card' | 'plain';\n}\n\nexport const AppRootContext = React.createContext<AppRootContextInterface>({\n  portalRoot: null,\n});\n"],"names":["React","AppRootContext","createContext","portalRoot"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAY/B,OAAO,MAAMC,iBAAiBD,MAAME,aAAa,CAA0B;IACzEC,YAAY;AACd,GAAG"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
-export interface AspectRatioProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface AspectRatioProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     className?: string;
     /**
      * По умолчанию, вложенный контент будет растягиваться и заполнять весь блок.
@@ -19,4 +19,4 @@ export interface AspectRatioProps extends React.HTMLAttributes<HTMLDivElement>,
  * @since 5.5.0
  * @see https://vkcom.github.io/VKUI/#/AspectRatio
  */
-export declare function AspectRatio({ ratio, children, mode, className, getRootRef, style: styleProp, ...props }: AspectRatioProps): JSX.Element;
+export declare function AspectRatio({ ratio, children, mode, style: styleProp, ...props }: AspectRatioProps): JSX.Element;

package/dist/cssm/components/AspectRatio/AspectRatio.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './AspectRatio.module.css';
 /**
  * `AspectRatio` позволяет поддерживать постоянное соотношение ширины и высоты.
@@ -7,19 +8,18 @@ import styles from './AspectRatio.module.css';
  
  * @since 5.5.0
  * @see https://vkcom.github.io/VKUI/#/AspectRatio
- */ export function AspectRatio({ ratio, children, mode = 'stretch', className, getRootRef, style: styleProp, ...props }) {
+ */ export function AspectRatio({ ratio, children, mode = 'stretch', style: styleProp, ...props }) {
     const style = {
         ['--vkui_internal--aspect_ratio']: String(ratio)
     };
-    return /*#__PURE__*/ React.createElement("div", {
-        className: classNames(styles.AspectRatio, mode === 'stretch' && styles['AspectRatio--mode-stretch'], className),
+    return /*#__PURE__*/ React.createElement(RootComponent, {
+        baseClassName: classNames(styles.AspectRatio, mode === 'stretch' && styles['AspectRatio--mode-stretch']),
         style: {
             ...styleProp,
             ...style
         },
-        ref: getRootRef,
         ...props
-    }, children);
+    });
 }
 
 //# sourceMappingURL=AspectRatio.js.map

package/dist/cssm/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 { CSSCustomProperties, HasRootRef } from '../../types';\nimport styles from './AspectRatio.module.css';\n\nexport interface AspectRatioProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  className?: string;\n  /**\n   * По умолчанию, вложенный контент будет растягиваться и заполнять весь блок.\n   */\n  mode?: 'stretch' | 'none';\n  children: React.ReactNode;\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  children,\n  mode = 'stretch',\n  className,\n  getRootRef,\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    <div\n      className={classNames(\n        styles.AspectRatio,\n        mode === 'stretch' && styles['AspectRatio--mode-stretch'],\n        className,\n      )}\n      style={{ ...styleProp, ...style }}\n      ref={getRootRef}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["React","classNames","styles","AspectRatio","ratio","children","mode","className","getRootRef","style","styleProp","props","String","div","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,2BAA2B;AAiB9C;;;;;;CAMC,GACD,OAAO,SAASC,YAAY,EAC1BC,KAAK,EACLC,QAAQ,EACRC,OAAO,SAAS,EAChBC,SAAS,EACTC,UAAU,EACVC,OAAOC,SAAS,EAChB,GAAGC,OACc;IACjB,MAAMF,QAAmD;QACvD,CAAC,gCAAgC,EAAEG,OAAOR;IAC5C;IAEA,qBACE,oBAACS;QACCN,WAAWN,WACTC,OAAOC,WAAW,EAClBG,SAAS,aAAaJ,MAAM,CAAC,4BAA4B,EACzDK;QAEFE,OAAO;YAAE,GAAGC,SAAS;YAAE,GAAGD,KAAK;QAAC;QAChCK,KAAKN;QACJ,GAAGG,KAAK;OAERN;AAGP"}
+{"version":3,"sources":["../../../../src/components/AspectRatio/AspectRatio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './AspectRatio.module.css';\n\nexport interface AspectRatioProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  className?: string;\n  /**\n   * По умолчанию, вложенный контент будет растягиваться и заполнять весь блок.\n   */\n  mode?: 'stretch' | 'none';\n  children: React.ReactNode;\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  children,\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(\n        styles.AspectRatio,\n        mode === 'stretch' && styles['AspectRatio--mode-stretch'],\n      )}\n      style={{ ...styleProp, ...style }}\n      {...props}\n    />\n  );\n}\n"],"names":["React","classNames","RootComponent","styles","AspectRatio","ratio","children","mode","style","styleProp","props","String","baseClassName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,2BAA2B;AAe9C;;;;;;CAMC,GACD,OAAO,SAASC,YAAY,EAC1BC,KAAK,EACLC,QAAQ,EACRC,OAAO,SAAS,EAChBC,OAAOC,SAAS,EAChB,GAAGC,OACc;IACjB,MAAMF,QAAmD;QACvD,CAAC,gCAAgC,EAAEG,OAAON;IAC5C;IAEA,qBACE,oBAACH;QACCU,eAAeX,WACbE,OAAOC,WAAW,EAClBG,SAAS,aAAaJ,MAAM,CAAC,4BAA4B;QAE3DK,OAAO;YAAE,GAAGC,SAAS;YAAE,GAAGD,KAAK;QAAC;QAC/B,GAAGE,KAAK;;AAGf"}

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

@@ -12,17 +12,23 @@
   padding-bottom: calc((1 / var(--vkui_internal--aspect_ratio, 1)) * 100%);
 }
 
+/* stylelint-disable-next-line selector-max-universal */
+
 .AspectRatio > * {
   position: absolute;
   top: 0;
   left: 0;
 }
 
+/* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-universal */
+
 .AspectRatio--mode-stretch > * {
   width: 100%;
   height: 100%;
 }
 
+/* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-type */
+
 .AspectRatio--mode-stretch > img,
 .AspectRatio--mode-stretch > video {
   object-fit: cover;

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
-export interface BadgeProps extends React.HTMLAttributes<HTMLElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface BadgeProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {
     mode: 'new' | 'prominent';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Badge
  */
-export declare const Badge: ({ mode, className, ...restProps }: BadgeProps) => React.JSX.Element;
+export declare const Badge: ({ mode, ...restProps }: BadgeProps) => React.JSX.Element;

package/dist/cssm/components/Badge/Badge.js

@@ -1,13 +1,16 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Badge.module.css';
+const stylesMode = {
+    new: styles['Badge--mode-new'],
+    prominent: styles['Badge--mode-prominent']
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/Badge
- */ export const Badge = ({ mode = 'new', className, ...restProps })=>/*#__PURE__*/ React.createElement("span", {
-        className: classNames(styles['Badge'], {
-            new: styles['Badge--mode-new'],
-            prominent: styles['Badge--mode-prominent']
-        }[mode], className),
+ */ export const Badge = ({ mode = 'new', ...restProps })=>/*#__PURE__*/ React.createElement(RootComponent, {
+        Component: "span",
+        baseClassName: classNames(styles['Badge'], stylesMode[mode]),
         ...restProps
     });
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Badge.module.css';\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLElement> {\n  mode: 'new' | 'prominent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Badge\n */\nexport const Badge = ({ mode = 'new', className, ...restProps }: BadgeProps) => (\n  <span\n    className={classNames(\n      styles['Badge'],\n      {\n        new: styles['Badge--mode-new'],\n        prominent: styles['Badge--mode-prominent'],\n      }[mode],\n      className,\n    )}\n    {...restProps}\n  />\n);\n"],"names":["React","classNames","styles","Badge","mode","className","restProps","span","new","prominent"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,qBAAqB;AAMxC;;CAEC,GACD,OAAO,MAAMC,QAAQ,CAAC,EAAEC,OAAO,KAAK,EAAEC,SAAS,EAAE,GAAGC,WAAuB,iBACzE,oBAACC;QACCF,WAAWJ,WACTC,MAAM,CAAC,QAAQ,EACf;YACEM,KAAKN,MAAM,CAAC,kBAAkB;YAC9BO,WAAWP,MAAM,CAAC,wBAAwB;QAC5C,CAAC,CAACE,KAAK,EACPC;QAED,GAAGC,SAAS;OAEf"}
+{"version":3,"sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Badge.module.css';\n\nconst stylesMode = {\n  new: styles['Badge--mode-new'],\n  prominent: styles['Badge--mode-prominent'],\n};\n\nexport interface BadgeProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {\n  mode: 'new' | 'prominent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Badge\n */\nexport const Badge = ({ mode = 'new', ...restProps }: BadgeProps) => (\n  <RootComponent\n    Component=\"span\"\n    baseClassName={classNames(styles['Badge'], stylesMode[mode])}\n    {...restProps}\n  />\n);\n"],"names":["React","classNames","RootComponent","styles","stylesMode","new","prominent","Badge","mode","restProps","Component","baseClassName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,aAAa;IACjBC,KAAKF,MAAM,CAAC,kBAAkB;IAC9BG,WAAWH,MAAM,CAAC,wBAAwB;AAC5C;AAMA;;CAEC,GACD,OAAO,MAAMI,QAAQ,CAAC,EAAEC,OAAO,KAAK,EAAE,GAAGC,WAAuB,iBAC9D,oBAACP;QACCQ,WAAU;QACVC,eAAeV,WAAWE,MAAM,CAAC,QAAQ,EAAEC,UAAU,CAACI,KAAK;QAC1D,GAAGC,SAAS;OAEf"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
-export interface BannerProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface BannerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * Тип баннера.
      */
@@ -73,4 +73,4 @@ export interface BannerProps extends React.HTMLAttributes<HTMLDivElement>, HasRo
 /**
  * @see https://vkcom.github.io/VKUI/#/Banner
  */
-export declare const Banner: ({ mode, imageTheme, size, before, asideMode, header, subheader, text, children, background, actions, onDismiss, dismissLabel, className, getRootRef, noPadding, ...restProps }: BannerProps) => React.JSX.Element;
+export declare const Banner: ({ mode, imageTheme, size, before, asideMode, header, subheader, text, children, background, actions, onDismiss, dismissLabel, noPadding, ...restProps }: BannerProps) => React.JSX.Element;

package/dist/cssm/components/Banner/Banner.js

@@ -1,22 +1,27 @@
 import * as React from 'react';
-import { Icon24Cancel, Icon24Chevron, Icon24DismissDark, Icon24DismissSubstract } from '@vkontakte/icons';
+import { Icon24Cancel, Icon24Chevron, Icon24Dismiss, Icon24DismissDark } from '@vkontakte/icons';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';
 import { Platform } from '../../lib/platform';
 import { IconButton } from '../IconButton/IconButton';
+import { RootComponent } from '../RootComponent/RootComponent';
 import { Tappable } from '../Tappable/Tappable';
 import { Headline } from '../Typography/Headline/Headline';
 import { Subhead } from '../Typography/Subhead/Subhead';
 import { Text } from '../Typography/Text/Text';
 import { Title } from '../Typography/Title/Title';
 import styles from './Banner.module.css';
+const stylesSize = {
+    s: styles['Banner--size-s'],
+    m: styles['Banner--size-m']
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/Banner
- */ export const Banner = ({ mode = 'tint', imageTheme = 'dark', size = 's', before, asideMode, header, subheader, text, children, background, actions, onDismiss, dismissLabel = 'Скрыть', className, getRootRef, noPadding, ...restProps })=>{
+ */ export const Banner = ({ mode = 'tint', imageTheme = 'dark', size = 's', before, asideMode, header, subheader, text, children, background, actions, onDismiss, dismissLabel = 'Скрыть', noPadding, ...restProps })=>{
     const platform = usePlatform();
     const HeaderTypography = size === 'm' ? Title : Headline;
     const SubheaderTypography = size === 'm' ? Text : Subhead;
-    const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24DismissSubstract;
+    const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24Dismiss;
     const content = /*#__PURE__*/ React.createElement(React.Fragment, null, mode === 'image' && background && /*#__PURE__*/ React.createElement("div", {
         "aria-hidden": true,
         className: styles['Banner__bg']
@@ -37,13 +42,10 @@ import styles from './Banner.module.css';
     }, text), hasReactNode(actions) && React.Children.count(actions) > 0 && /*#__PURE__*/ React.createElement("div", {
         className: styles['Banner__actions']
     }, actions)));
-    return /*#__PURE__*/ React.createElement("section", {
+    return /*#__PURE__*/ React.createElement(RootComponent, {
+        Component: "section",
         ...restProps,
-        className: classNames(styles['Banner'], !noPadding && styles['Banner--withPadding'], platform === Platform.IOS && styles['Banner--ios'], mode === 'image' && styles['Banner--mode-image'], {
-            s: styles['Banner--size-s'],
-            m: styles['Banner--size-m']
-        }[size], mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'], className),
-        ref: getRootRef
+        baseClassName: classNames(styles['Banner'], !noPadding && styles['Banner--withPadding'], platform === Platform.IOS && styles['Banner--ios'], mode === 'image' && styles['Banner--mode-image'], stylesSize[size], mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'])
     }, asideMode === 'expand' ? /*#__PURE__*/ React.createElement(Tappable, {
         className: styles['Banner__in'],
         activeMode: platform === Platform.IOS ? 'opacity' : 'background',

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24Cancel,\n  Icon24Chevron,\n  Icon24DismissDark,\n  Icon24DismissSubstract,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } 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 React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLElement> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  asideMode?: 'dismiss' | 'expand';\n  /**\n   * Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * `aria-label` для кнопки при `asideMode=\"dismiss\". Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера.\n   */\n  text?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`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  noPadding?: boolean;\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  asideMode,\n  header,\n  subheader,\n  text,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = 'Скрыть',\n  className,\n  getRootRef,\n  noPadding,\n  ...restProps\n}: BannerProps) => {\n  const platform = usePlatform();\n\n  const HeaderTypography = size === 'm' ? Title : Headline;\n  const SubheaderTypography = size === 'm' ? Text : Subhead;\n\n  const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24DismissSubstract;\n\n  const content = (\n    <>\n      {mode === 'image' && background && (\n        <div aria-hidden className={styles['Banner__bg']}>\n          {background}\n        </div>\n      )}\n\n      {before && <div className={styles['Banner__before']}>{before}</div>}\n\n      <div className={styles['Banner__content']}>\n        {hasReactNode(header) && (\n          <HeaderTypography Component=\"p\" weight=\"2\" level={size === 'm' ? '2' : '1'}>\n            {header}\n          </HeaderTypography>\n        )}\n        {hasReactNode(subheader) && (\n          <SubheaderTypography Component=\"p\" className={styles['Banner__subheader']}>\n            {subheader}\n          </SubheaderTypography>\n        )}\n        {hasReactNode(text) && (\n          <Text Component=\"p\" className={styles['Banner__text']}>\n            {text}\n          </Text>\n        )}\n        {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n          <div className={styles['Banner__actions']}>{actions}</div>\n        )}\n      </div>\n    </>\n  );\n\n  return (\n    <section\n      {...restProps}\n      className={classNames(\n        styles['Banner'],\n        !noPadding && styles['Banner--withPadding'],\n        platform === Platform.IOS && styles['Banner--ios'],\n        mode === 'image' && styles['Banner--mode-image'],\n        {\n          s: styles['Banner--size-s'],\n          m: styles['Banner--size-m'],\n        }[size],\n        mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      {asideMode === 'expand' ? (\n        <Tappable\n          className={styles['Banner__in']}\n          activeMode={platform === Platform.IOS ? 'opacity' : 'background'}\n          role=\"button\"\n        >\n          {content}\n\n          <div className={styles['Banner__aside']}>\n            <Icon24Chevron className={styles['Banner__expand']} />\n          </div>\n        </Tappable>\n      ) : (\n        <div className={styles['Banner__in']}>\n          {content}\n\n          {asideMode === 'dismiss' && (\n            <div className={styles['Banner__aside']}>\n              <IconButton\n                aria-label={dismissLabel}\n                className={styles['Banner__dismiss']}\n                onClick={onDismiss}\n                hoverMode=\"opacity\"\n                hasActive={false}\n              >\n                {platform === Platform.IOS ? <IconDismissIOS /> : <Icon24Cancel />}\n              </IconButton>\n            </div>\n          )}\n        </div>\n      )}\n    </section>\n  );\n};\n"],"names":["React","Icon24Cancel","Icon24Chevron","Icon24DismissDark","Icon24DismissSubstract","classNames","hasReactNode","usePlatform","Platform","IconButton","Tappable","Headline","Subhead","Text","Title","styles","Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","className","getRootRef","noPadding","restProps","platform","HeaderTypography","SubheaderTypography","IconDismissIOS","content","div","aria-hidden","Component","weight","level","Children","count","section","IOS","s","m","ref","activeMode","role","aria-label","onClick","hoverMode","hasActive"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,YAAY,EACZC,aAAa,EACbC,iBAAiB,EACjBC,sBAAsB,QACjB,mBAAmB;AAC1B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,KAAK,QAAQ,4BAA4B;AAClD,OAAOC,YAAY,sBAAsB;AAyEzC;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EACrBC,OAAO,MAAM,EACbC,aAAa,MAAM,EACnBC,OAAO,GAAG,EACVC,MAAM,EACNC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,UAAU,EACVC,OAAO,EACPC,SAAS,EACTC,eAAe,QAAQ,EACvBC,SAAS,EACTC,UAAU,EACVC,SAAS,EACT,GAAGC,WACS;IACZ,MAAMC,WAAW3B;IAEjB,MAAM4B,mBAAmBhB,SAAS,MAAML,QAAQH;IAChD,MAAMyB,sBAAsBjB,SAAS,MAAMN,OAAOD;IAElD,MAAMyB,iBAAiBpB,SAAS,UAAUd,oBAAoBC;IAE9D,MAAMkC,wBACJ,0CACGrB,SAAS,WAAWS,4BACnB,oBAACa;QAAIC,eAAAA;QAAYV,WAAWf,MAAM,CAAC,aAAa;OAC7CW,aAIJN,wBAAU,oBAACmB;QAAIT,WAAWf,MAAM,CAAC,iBAAiB;OAAGK,uBAEtD,oBAACmB;QAAIT,WAAWf,MAAM,CAAC,kBAAkB;OACtCT,aAAagB,yBACZ,oBAACa;QAAiBM,WAAU;QAAIC,QAAO;QAAIC,OAAOxB,SAAS,MAAM,MAAM;OACpEG,SAGJhB,aAAaiB,4BACZ,oBAACa;QAAoBK,WAAU;QAAIX,WAAWf,MAAM,CAAC,oBAAoB;OACtEQ,YAGJjB,aAAakB,uBACZ,oBAACX;QAAK4B,WAAU;QAAIX,WAAWf,MAAM,CAAC,eAAe;OAClDS,OAGJlB,aAAaqB,YAAY3B,MAAM4C,QAAQ,CAACC,KAAK,CAAClB,WAAW,mBACxD,oBAACY;QAAIT,WAAWf,MAAM,CAAC,kBAAkB;OAAGY;IAMpD,qBACE,oBAACmB;QACE,GAAGb,SAAS;QACbH,WAAWzB,WACTU,MAAM,CAAC,SAAS,EAChB,CAACiB,aAAajB,MAAM,CAAC,sBAAsB,EAC3CmB,aAAa1B,SAASuC,GAAG,IAAIhC,MAAM,CAAC,cAAc,EAClDE,SAAS,WAAWF,MAAM,CAAC,qBAAqB,EAChD;YACEiC,GAAGjC,MAAM,CAAC,iBAAiB;YAC3BkC,GAAGlC,MAAM,CAAC,iBAAiB;QAC7B,CAAC,CAACI,KAAK,EACPF,SAAS,WAAWC,eAAe,UAAUH,MAAM,CAAC,mBAAmB,EACvEe;QAEFoB,KAAKnB;OAEJV,cAAc,yBACb,oBAACX;QACCoB,WAAWf,MAAM,CAAC,aAAa;QAC/BoC,YAAYjB,aAAa1B,SAASuC,GAAG,GAAG,YAAY;QACpDK,MAAK;OAEJd,uBAED,oBAACC;QAAIT,WAAWf,MAAM,CAAC,gBAAgB;qBACrC,oBAACb;QAAc4B,WAAWf,MAAM,CAAC,iBAAiB;yBAItD,oBAACwB;QAAIT,WAAWf,MAAM,CAAC,aAAa;OACjCuB,SAEAjB,cAAc,2BACb,oBAACkB;QAAIT,WAAWf,MAAM,CAAC,gBAAgB;qBACrC,oBAACN;QACC4C,cAAYxB;QACZC,WAAWf,MAAM,CAAC,kBAAkB;QACpCuC,SAAS1B;QACT2B,WAAU;QACVC,WAAW;OAEVtB,aAAa1B,SAASuC,GAAG,iBAAG,oBAACV,sCAAoB,oBAACpC;AAQnE,EAAE"}
+{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel, Icon24Chevron, Icon24Dismiss, Icon24DismissDark } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } 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\nconst stylesSize = {\n  s: styles['Banner--size-s'],\n  m: styles['Banner--size-m'],\n};\n\nexport interface BannerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  asideMode?: 'dismiss' | 'expand';\n  /**\n   * Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * `aria-label` для кнопки при `asideMode=\"dismiss\". Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера.\n   */\n  text?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`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  noPadding?: boolean;\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  asideMode,\n  header,\n  subheader,\n  text,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = 'Скрыть',\n  noPadding,\n  ...restProps\n}: BannerProps) => {\n  const platform = usePlatform();\n\n  const HeaderTypography = size === 'm' ? Title : Headline;\n  const SubheaderTypography = 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['Banner__bg']}>\n          {background}\n        </div>\n      )}\n\n      {before && <div className={styles['Banner__before']}>{before}</div>}\n\n      <div className={styles['Banner__content']}>\n        {hasReactNode(header) && (\n          <HeaderTypography Component=\"p\" weight=\"2\" level={size === 'm' ? '2' : '1'}>\n            {header}\n          </HeaderTypography>\n        )}\n        {hasReactNode(subheader) && (\n          <SubheaderTypography Component=\"p\" className={styles['Banner__subheader']}>\n            {subheader}\n          </SubheaderTypography>\n        )}\n        {hasReactNode(text) && (\n          <Text Component=\"p\" className={styles['Banner__text']}>\n            {text}\n          </Text>\n        )}\n        {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n          <div className={styles['Banner__actions']}>{actions}</div>\n        )}\n      </div>\n    </>\n  );\n\n  return (\n    <RootComponent\n      Component=\"section\"\n      {...restProps}\n      baseClassName={classNames(\n        styles['Banner'],\n        !noPadding && styles['Banner--withPadding'],\n        platform === Platform.IOS && styles['Banner--ios'],\n        mode === 'image' && styles['Banner--mode-image'],\n        stylesSize[size],\n        mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'],\n      )}\n    >\n      {asideMode === 'expand' ? (\n        <Tappable\n          className={styles['Banner__in']}\n          activeMode={platform === Platform.IOS ? 'opacity' : 'background'}\n          role=\"button\"\n        >\n          {content}\n\n          <div className={styles['Banner__aside']}>\n            <Icon24Chevron className={styles['Banner__expand']} />\n          </div>\n        </Tappable>\n      ) : (\n        <div className={styles['Banner__in']}>\n          {content}\n\n          {asideMode === 'dismiss' && (\n            <div className={styles['Banner__aside']}>\n              <IconButton\n                aria-label={dismissLabel}\n                className={styles['Banner__dismiss']}\n                onClick={onDismiss}\n                hoverMode=\"opacity\"\n                hasActive={false}\n              >\n                {platform === Platform.IOS ? <IconDismissIOS /> : <Icon24Cancel />}\n              </IconButton>\n            </div>\n          )}\n        </div>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon24Cancel","Icon24Chevron","Icon24Dismiss","Icon24DismissDark","classNames","hasReactNode","usePlatform","Platform","IconButton","RootComponent","Tappable","Headline","Subhead","Text","Title","styles","stylesSize","s","m","Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","noPadding","restProps","platform","HeaderTypography","SubheaderTypography","IconDismissIOS","content","div","aria-hidden","className","Component","weight","level","Children","count","baseClassName","IOS","activeMode","role","aria-label","onClick","hoverMode","hasActive"],"mappings":"AAAA,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,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,KAAK,QAAQ,4BAA4B;AAClD,OAAOC,YAAY,sBAAsB;AAEzC,MAAMC,aAAa;IACjBC,GAAGF,MAAM,CAAC,iBAAiB;IAC3BG,GAAGH,MAAM,CAAC,iBAAiB;AAC7B;AAyEA;;CAEC,GACD,OAAO,MAAMI,SAAS,CAAC,EACrBC,OAAO,MAAM,EACbC,aAAa,MAAM,EACnBC,OAAO,GAAG,EACVC,MAAM,EACNC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,UAAU,EACVC,OAAO,EACPC,SAAS,EACTC,eAAe,QAAQ,EACvBC,SAAS,EACT,GAAGC,WACS;IACZ,MAAMC,WAAW7B;IAEjB,MAAM8B,mBAAmBd,SAAS,MAAMR,QAAQH;IAChD,MAAM0B,sBAAsBf,SAAS,MAAMT,OAAOD;IAElD,MAAM0B,iBAAiBlB,SAAS,UAAUjB,oBAAoBD;IAE9D,MAAMqC,wBACJ,0CACGnB,SAAS,WAAWS,4BACnB,oBAACW;QAAIC,eAAAA;QAAYC,WAAW3B,MAAM,CAAC,aAAa;OAC7Cc,aAIJN,wBAAU,oBAACiB;QAAIE,WAAW3B,MAAM,CAAC,iBAAiB;OAAGQ,uBAEtD,oBAACiB;QAAIE,WAAW3B,MAAM,CAAC,kBAAkB;OACtCV,aAAaoB,yBACZ,oBAACW;QAAiBO,WAAU;QAAIC,QAAO;QAAIC,OAAOvB,SAAS,MAAM,MAAM;OACpEG,SAGJpB,aAAaqB,4BACZ,oBAACW;QAAoBM,WAAU;QAAID,WAAW3B,MAAM,CAAC,oBAAoB;OACtEW,YAGJrB,aAAasB,uBACZ,oBAACd;QAAK8B,WAAU;QAAID,WAAW3B,MAAM,CAAC,eAAe;OAClDY,OAGJtB,aAAayB,YAAY/B,MAAM+C,QAAQ,CAACC,KAAK,CAACjB,WAAW,mBACxD,oBAACU;QAAIE,WAAW3B,MAAM,CAAC,kBAAkB;OAAGe;IAMpD,qBACE,oBAACrB;QACCkC,WAAU;QACT,GAAGT,SAAS;QACbc,eAAe5C,WACbW,MAAM,CAAC,SAAS,EAChB,CAACkB,aAAalB,MAAM,CAAC,sBAAsB,EAC3CoB,aAAa5B,SAAS0C,GAAG,IAAIlC,MAAM,CAAC,cAAc,EAClDK,SAAS,WAAWL,MAAM,CAAC,qBAAqB,EAChDC,UAAU,CAACM,KAAK,EAChBF,SAAS,WAAWC,eAAe,UAAUN,MAAM,CAAC,mBAAmB;OAGxES,cAAc,yBACb,oBAACd;QACCgC,WAAW3B,MAAM,CAAC,aAAa;QAC/BmC,YAAYf,aAAa5B,SAAS0C,GAAG,GAAG,YAAY;QACpDE,MAAK;OAEJZ,uBAED,oBAACC;QAAIE,WAAW3B,MAAM,CAAC,gBAAgB;qBACrC,oBAACd;QAAcyC,WAAW3B,MAAM,CAAC,iBAAiB;yBAItD,oBAACyB;QAAIE,WAAW3B,MAAM,CAAC,aAAa;OACjCwB,SAEAf,cAAc,2BACb,oBAACgB;QAAIE,WAAW3B,MAAM,CAAC,gBAAgB;qBACrC,oBAACP;QACC4C,cAAYpB;QACZU,WAAW3B,MAAM,CAAC,kBAAkB;QACpCsC,SAAStB;QACTuB,WAAU;QACVC,WAAW;OAEVpB,aAAa5B,SAAS0C,GAAG,iBAAG,oBAACX,sCAAoB,oBAACtC;AAQnE,EAAE"}

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

@@ -64,6 +64,8 @@
   z-index: var(--vkui_internal--z_index_banner_background);
 }
 
+/* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-universal */
+
 .Banner__bg,
 .Banner__bg > * {
   width: 100%;
@@ -77,7 +79,7 @@
   align-items: center;
   justify-content: flex-end;
   width: 28px;
-  color: var(--vkui--color_icon_tertiary);
+  color: var(--vkui--color_icon_secondary);
 }
 
 .Banner__dismiss {
@@ -144,7 +146,7 @@
 
 .Banner--ios .Banner__dismiss,
 .Banner--ios.Banner--mode-image .Banner__dismiss {
-  color: var(--vkui--color_icon_tertiary);
+  color: var(--vkui--color_icon_secondary);
 }
 
 /**

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

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { BaseGalleryProps } from './types';
-export declare const BaseGallery: ({ bullets, getRootRef, children, slideWidth, slideIndex, isDraggable: isDraggableProp, onDragStart, onDragEnd, onChange, onPrevClick, onNextClick, align, showArrows, getRef, className, arrowSize, ...restProps }: BaseGalleryProps) => React.JSX.Element;
+export declare const BaseGallery: ({ bullets, getRootRef, children, slideWidth, slideIndex, isDraggable: isDraggableProp, onDragStart, onDragEnd, onChange, onPrevClick, onNextClick, align, showArrows, getRef, arrowSize, ...restProps }: BaseGalleryProps) => React.JSX.Element;

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

@@ -5,6 +5,7 @@ import { useExternRef } from '../../hooks/useExternRef';
 import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
 import { useDOM } from '../../lib/dom';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { RootComponent } from '../RootComponent/RootComponent';
 import { ScrollArrow } from '../ScrollArrow/ScrollArrow';
 import { Touch } from '../Touch/Touch';
 import { calcMax, calcMin } from './helpers';
@@ -26,7 +27,11 @@ const SHIFT_DEFAULT_STATE = {
     deltaX: 0,
     indent: 0
 };
-export const BaseGallery = ({ bullets = false, getRootRef, children, slideWidth = '100%', slideIndex = 0, isDraggable: isDraggableProp = true, onDragStart, onDragEnd, onChange, onPrevClick, onNextClick, align = 'left', showArrows, getRef, className, arrowSize = 'l', ...restProps })=>{
+const stylesBullets = {
+    dark: styles['BaseGallery__bullets--dark'],
+    light: styles['BaseGallery__bullets--light']
+};
+export const BaseGallery = ({ bullets = false, getRootRef, children, slideWidth = '100%', slideIndex = 0, isDraggable: isDraggableProp = true, onDragStart, onDragEnd, onChange, onPrevClick, onNextClick, align = 'left', showArrows, getRef, arrowSize = 'l', ...restProps })=>{
     const slidesStore = React.useRef({});
     const layoutState = React.useRef(LAYOUT_DEFAULT_STATE);
     const [shiftState, setShiftState] = React.useState(SHIFT_DEFAULT_STATE);
@@ -230,10 +235,10 @@ export const BaseGallery = ({ bullets = false, getRootRef, children, slideWidth
     (align === 'left' && layoutState.current.containerWidth - shiftState.shiftX < (layoutState.current.layerWidth ?? 0) || // otherwise we need to check current slide index (align = right or align = center)
     align !== 'left' && slideIndex < layoutState.current.slides.length - 1);
     const isDraggable = isDraggableProp && !layoutState.current.isFullyVisible;
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ React.createElement(RootComponent, {
         ...restProps,
-        className: classNames(styles['BaseGallery'], align === 'center' && styles['BaseGallery--align-center'], slideWidth === 'custom' && styles['BaseGallery--custom-width'], isDraggable && styles['BaseGallery--draggable'], className),
-        ref: rootRef
+        baseClassName: classNames(styles['BaseGallery'], align === 'center' && styles['BaseGallery--align-center'], slideWidth === 'custom' && styles['BaseGallery--custom-width'], isDraggable && styles['BaseGallery--draggable']),
+        getRootRef: rootRef
     }, /*#__PURE__*/ React.createElement(Touch, {
         className: styles['BaseGallery__viewport'],
         onStartX: onStart,
@@ -253,10 +258,7 @@ export const BaseGallery = ({ bullets = false, getRootRef, children, slideWidth
             ref: (el)=>setSlideRef(el, i)
         }, item)))), bullets && /*#__PURE__*/ React.createElement("div", {
         "aria-hidden": true,
-        className: classNames(styles['BaseGallery__bullets'], {
-            dark: styles['BaseGallery__bullets--dark'],
-            light: styles['BaseGallery__bullets--light']
-        }[bullets])
+        className: classNames(styles['BaseGallery__bullets'], stylesBullets[bullets])
     }, React.Children.map(children, (_item, index)=>/*#__PURE__*/ React.createElement("div", {
             className: classNames(styles['BaseGallery__bullet'], index === slideIndex && styles['BaseGallery__bullet--active']),
             key: index