@vkontakte/vkui 5.5.4 → 5.6.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/AppRootPortal.tsx"],"sourcesContent":["import * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { HasChildren } from '../../types';\nimport { AppearanceProvider } from '../AppearanceProvider/AppearanceProvider';\nimport { AppRootContext } from './AppRootContext';\n\nexport interface AppRootPortalProps extends HasChildren {\n  className?: string;\n  forcePortal?: boolean;\n  /**\n   * Кастомный root-элемент портала.\n   * При передаче вместе с `forcePorta=true` игнорируется `portalRoot` и `disablePortal`\n   * из контекста `AppRoot`.\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n}\n\nexport const AppRootPortal = ({\n  children,\n  className,\n  forcePortal: forcePortalProp,\n  portalRoot: portalRootProp = null,\n}: AppRootPortalProps) => {\n  const { portalRoot, mode, disablePortal } = React.useContext(AppRootContext);\n  const appearance = useAppearance();\n\n  const isClient = useIsClient();\n  if (!isClient) {\n    return null;\n  }\n\n  const forcePortal = forcePortalProp ?? mode !== 'full';\n\n  const portalContainer = getPortalContainer(portalRootProp, portalRoot);\n\n  const ignoreDisablePortalFlagFromContext = portalRootProp && forcePortal;\n  const shouldUsePortal = ignoreDisablePortalFlagFromContext\n    ? true\n    : !disablePortal && portalContainer && forcePortal;\n\n  return shouldUsePortal && portalContainer ? (\n    createPortal(\n      <AppearanceProvider appearance={appearance}>\n        <div className={className}>{children}</div>\n      </AppearanceProvider>,\n      portalContainer,\n    )\n  ) : (\n    <React.Fragment>{children}</React.Fragment>\n  );\n};\n\n/**\n * Получает из кастомного пропа `partialRootProp` и `partialRoot` контекста\n * контейнер-элемент для портала.\n * `partialRootProp` может быть ref элементом.\n *\n */\nfunction getPortalContainer(\n  portalRootProp?: HTMLElement | React.RefObject<HTMLElement> | null,\n  portalRoot?: HTMLElement | null,\n) {\n  if (!portalRootProp) {\n    return portalRoot;\n  }\n\n  return isRefObject(portalRootProp) ? portalRootProp.current : portalRootProp;\n}\n"],"names":["React","createPortal","useAppearance","useIsClient","isRefObject","AppearanceProvider","AppRootContext","AppRootPortal","children","className","forcePortal","forcePortalProp","portalRoot","portalRootProp","mode","disablePortal","useContext","appearance","isClient","portalContainer","getPortalContainer","ignoreDisablePortalFlagFromContext","shouldUsePortal","div","Fragment","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,YAAY;AACzC,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,WAAW,QAAQ,wBAAwB;AAEpD,SAASC,kBAAkB,QAAQ,2CAA2C;AAC9E,SAASC,cAAc,QAAQ,mBAAmB;AAalD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,SAAQ,EACRC,UAAS,EACTC,aAAaC,gBAAe,EAC5BC,YAAYC,iBAAiB,IAAI,CAAA,EACd;IACnB,MAAM,EAAED,WAAU,EAAEE,KAAI,EAAEC,cAAa,EAAE,GAAGf,MAAMgB,WAAWV;IAC7D,MAAMW,aAAaf;IAEnB,MAAMgB,WAAWf;IACjB,IAAI,CAACe,UAAU;QACb,OAAO;IACT;IAEA,MAAMR,cAAcC,mBAAmBG,SAAS;IAEhD,MAAMK,kBAAkBC,mBAAmBP,gBAAgBD;IAE3D,MAAMS,qCAAqCR,kBAAkBH;IAC7D,MAAMY,kBAAkBD,qCACpB,OACA,CAACN,iBAAiBI,mBAAmBT;IAEzC,OAAOY,mBAAmBH,gCACxBlB,2BACE,oBAACI;QAAmBY,YAAYA;qBAC9B,oBAACM;QAAId,WAAWA;OAAYD,YAE9BW,iCAGF,oBAACnB,MAAMwB,gBAAUhB;AAErB,EAAE;AAEF;;;;;CAKC,GACD,SAASY,mBACPP,cAAkE,EAClED,UAA+B;IAE/B,IAAI,CAACC,gBAAgB;QACnB,OAAOD;IACT;IAEA,OAAOR,YAAYS,kBAAkBA,eAAeY,UAAUZ;AAChE"}
+{"version":3,"sources":["../../../../src/components/AppRoot/AppRootPortal.tsx"],"sourcesContent":["import * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { HasChildren } from '../../types';\nimport { AppearanceProvider } from '../AppearanceProvider/AppearanceProvider';\nimport { AppRootContext } from './AppRootContext';\n\nexport interface AppRootPortalProps extends HasChildren {\n  className?: string;\n  forcePortal?: boolean;\n  /**\n   * Кастомный root-элемент портала.\n   * При передаче вместе с `forcePorta=true` игнорируется `portalRoot` и `disablePortal`\n   * из контекста `AppRoot`.\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n}\n\nexport const AppRootPortal = ({\n  children,\n  className,\n  forcePortal: forcePortalProp,\n  portalRoot: portalRootProp = null,\n}: AppRootPortalProps) => {\n  const { portalRoot, mode, disablePortal } = React.useContext(AppRootContext);\n  const appearance = useAppearance();\n\n  const isClient = useIsClient();\n  if (!isClient) {\n    return null;\n  }\n\n  const forcePortal = forcePortalProp ?? mode !== 'full';\n\n  const portalContainer = getPortalContainer(portalRootProp, portalRoot);\n\n  const ignoreDisablePortalFlagFromContext = portalRootProp && forcePortal;\n  const shouldUsePortal = ignoreDisablePortalFlagFromContext\n    ? true\n    : !disablePortal && portalContainer && forcePortal;\n\n  return shouldUsePortal && portalContainer ? (\n    createPortal(\n      <AppearanceProvider appearance={appearance}>\n        <div className={className}>{children}</div>\n      </AppearanceProvider>,\n      portalContainer,\n    )\n  ) : (\n    <React.Fragment>{children}</React.Fragment>\n  );\n};\n\n/**\n * Получает из кастомного пропа `partialRootProp` и `partialRoot` контекста\n * контейнер-элемент для портала.\n * `partialRootProp` может быть ref элементом.\n *\n */\nfunction getPortalContainer(\n  portalRootProp?: HTMLElement | React.RefObject<HTMLElement> | null,\n  portalRoot?: HTMLElement | null,\n) {\n  if (!portalRootProp) {\n    return portalRoot;\n  }\n\n  return isRefObject(portalRootProp) ? portalRootProp.current : portalRootProp;\n}\n"],"names":["React","createPortal","useAppearance","useIsClient","isRefObject","AppearanceProvider","AppRootContext","AppRootPortal","children","className","forcePortal","forcePortalProp","portalRoot","portalRootProp","mode","disablePortal","useContext","appearance","isClient","portalContainer","getPortalContainer","ignoreDisablePortalFlagFromContext","shouldUsePortal","div","Fragment","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,YAAY;AACzC,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,WAAW,QAAQ,wBAAwB;AAEpD,SAASC,kBAAkB,QAAQ,2CAA2C;AAC9E,SAASC,cAAc,QAAQ,mBAAmB;AAalD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,QAAQ,EACRC,SAAS,EACTC,aAAaC,eAAe,EAC5BC,YAAYC,iBAAiB,IAAI,EACd;IACnB,MAAM,EAAED,UAAU,EAAEE,IAAI,EAAEC,aAAa,EAAE,GAAGf,MAAMgB,UAAU,CAACV;IAC7D,MAAMW,aAAaf;IAEnB,MAAMgB,WAAWf;IACjB,IAAI,CAACe,UAAU;QACb,OAAO;IACT;IAEA,MAAMR,cAAcC,mBAAmBG,SAAS;IAEhD,MAAMK,kBAAkBC,mBAAmBP,gBAAgBD;IAE3D,MAAMS,qCAAqCR,kBAAkBH;IAC7D,MAAMY,kBAAkBD,qCACpB,OACA,CAACN,iBAAiBI,mBAAmBT;IAEzC,OAAOY,mBAAmBH,gCACxBlB,2BACE,oBAACI;QAAmBY,YAAYA;qBAC9B,oBAACM;QAAId,WAAWA;OAAYD,YAE9BW,iCAGF,oBAACnB,MAAMwB,QAAQ,QAAEhB;AAErB,EAAE;AAEF;;;;;CAKC,GACD,SAASY,mBACPP,cAAkE,EAClED,UAA+B;IAE/B,IAAI,CAACC,gBAAgB;QACnB,OAAOD;IACT;IAEA,OAAOR,YAAYS,kBAAkBA,eAAeY,OAAO,GAAGZ;AAChE"}

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

@@ -31,8 +31,8 @@ export const ScrollContext = /*#__PURE__*/ React.createContext({
     disableScrollLock: noop
 });
 export const useScroll = ()=>React.useContext(ScrollContext);
-export const GlobalScrollController = ({ children  })=>{
-    const { window , document  } = useDOM();
+export const GlobalScrollController = ({ children })=>{
+    const { window, document } = useDOM();
     const [isScrollLock, setScrollLock] = React.useState(false);
     const beforeScrollLockFnSetRef = React.useRef(new Set());
     const getScroll = React.useCallback(()=>({
@@ -97,7 +97,7 @@ export const GlobalScrollController = ({ children  })=>{
         value: scrollController
     }, children);
 };
-export const ElementScrollController = ({ elRef , children  })=>{
+export const ElementScrollController = ({ elRef, children })=>{
     const [isScrollLock, setScrollLock] = React.useState(false);
     const beforeScrollLockFnSetRef = React.useRef(new Set());
     const getScroll = React.useCallback(()=>({
@@ -174,7 +174,7 @@ export const ElementScrollController = ({ elRef , children  })=>{
  * @param deps effect обновится только при изменении значений в списке.
  */ export const useScrollLockEffect = (effect, deps)=>{
     const destructorRef = React.useRef(noop);
-    const { isScrollLock , beforeScrollLockFnSetRef  } = useScroll();
+    const { isScrollLock, beforeScrollLockFnSetRef } = useScroll();
     // Изменяем effectCallback только при изменении deps
     const effectCallback = React.useCallback(()=>{
         destructorRef.current = effect();
@@ -205,7 +205,7 @@ export const ElementScrollController = ({ elRef , children  })=>{
     ]);
 };
 export const useScrollLock = (enabled = true)=>{
-    const { enableScrollLock , disableScrollLock  } = useScroll();
+    const { enableScrollLock, disableScrollLock } = useScroll();
     useIsomorphicLayoutEffect(()=>{
         if (enabled) {
             enableScrollLock();

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/ScrollContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasChildren } from '../../types';\n\nconst clearDisableScrollStyle = (node: HTMLElement) => {\n  Object.assign(node.style, {\n    position: '',\n    top: '',\n    left: '',\n    right: '',\n    overflowY: '',\n    overflowX: '',\n  });\n};\n\nconst getPageYOffsetWithoutKeyboardHeight = (window: Window) => {\n  // Note: здесь расчёт на то, что `clientHeight` равен `window.innerHeight`.\n  //  Это достигается тем, что тегу `html` задали`height: 100%` и у него нет отступов сверху и снизу. Если есть отступы,\n  //  то надо задать `box-sizing: border-box`, чтобы они не учитывались.\n  const diffOfClientHeightAndViewportHeight =\n    window.document.documentElement.clientHeight - window.innerHeight;\n  return window.pageYOffset - diffOfClientHeightAndViewportHeight;\n};\n\nexport interface ScrollContextInterface {\n  getScroll(this: void): { x: number; y: number };\n  scrollTo(this: void, x?: number, y?: number): void;\n  isScrollLock: boolean;\n  enableScrollLock(this: void): void;\n  disableScrollLock(this: void): void;\n  beforeScrollLockFnSetRef?: React.RefObject<Set<() => void>>;\n}\n\nexport const ScrollContext = React.createContext<ScrollContextInterface>({\n  getScroll: () => ({ x: 0, y: 0 }),\n  scrollTo: noop,\n  isScrollLock: false,\n  enableScrollLock: noop,\n  disableScrollLock: noop,\n});\n\nexport const useScroll = () => React.useContext(ScrollContext);\n\nexport interface ScrollControllerProps extends HasChildren {\n  elRef: React.RefObject<HTMLElement>;\n}\n\nexport const GlobalScrollController = ({ children }: ScrollControllerProps) => {\n  const { window, document } = useDOM();\n  const [isScrollLock, setScrollLock] = React.useState(false);\n  const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());\n\n  const getScroll = React.useCallback<ScrollContextInterface['getScroll']>(\n    () => ({\n      x: window!.pageXOffset,\n      y: getPageYOffsetWithoutKeyboardHeight(window!),\n    }),\n    [window],\n  );\n  const scrollTo = React.useCallback<ScrollContextInterface['scrollTo']>(\n    (x = 0, y = 0) => {\n      // Some iOS versions do not normalize scroll — do it manually.\n      window!.scrollTo(\n        x ? clamp(x, 0, document!.body.scrollWidth - window!.innerWidth) : 0,\n        y ? clamp(y, 0, document!.body.scrollHeight - window!.innerHeight) : 0,\n      );\n    },\n    [document, window],\n  );\n\n  const enableScrollLock = React.useCallback<ScrollContextInterface['enableScrollLock']>(() => {\n    beforeScrollLockFnSetRef.current.forEach((fn) => {\n      fn();\n    });\n\n    const scrollY = window!.pageYOffset;\n    const scrollX = window!.pageXOffset;\n    const overflowY = window!.innerWidth > document!.documentElement.clientWidth ? 'scroll' : '';\n    const overflowX = window!.innerHeight > document!.documentElement.clientHeight ? 'scroll' : '';\n\n    Object.assign(document!.body.style, {\n      position: 'fixed',\n      top: `-${scrollY}px`,\n      left: `-${scrollX}px`,\n      right: '0',\n      overflowY,\n      overflowX,\n    });\n    setScrollLock(true);\n  }, [document, window]);\n\n  const disableScrollLock = React.useCallback<ScrollContextInterface['disableScrollLock']>(() => {\n    const scrollY = document!.body.style.top;\n    const scrollX = document!.body.style.left;\n\n    clearDisableScrollStyle(document!.body);\n    window!.scrollTo(-parseInt(scrollX || '0'), -parseInt(scrollY || '0'));\n    setScrollLock(false);\n  }, [document, window]);\n\n  const scrollController = React.useMemo<ScrollContextInterface>(\n    () => ({\n      getScroll,\n      scrollTo,\n      isScrollLock,\n      disableScrollLock,\n      enableScrollLock,\n\n      beforeScrollLockFnSetRef: beforeScrollLockFnSetRef,\n    }),\n    [getScroll, scrollTo, isScrollLock, disableScrollLock, enableScrollLock],\n  );\n\n  return <ScrollContext.Provider value={scrollController}>{children}</ScrollContext.Provider>;\n};\n\nexport const ElementScrollController = ({ elRef, children }: ScrollControllerProps) => {\n  const [isScrollLock, setScrollLock] = React.useState(false);\n  const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());\n\n  const getScroll = React.useCallback<ScrollContextInterface['getScroll']>(\n    () => ({\n      x: elRef.current?.scrollLeft ?? 0,\n      y: elRef.current?.scrollTop ?? 0,\n    }),\n    [elRef],\n  );\n  const scrollTo = React.useCallback<ScrollContextInterface['scrollTo']>(\n    (x = 0, y = 0) => {\n      const el = elRef.current;\n      // Some iOS versions do not normalize scroll — do it manually.\n      el?.scrollTo(\n        x ? clamp(x, 0, el.scrollWidth - el.clientWidth) : 0,\n        y ? clamp(y, 0, el.scrollHeight - el.clientHeight) : 0,\n      );\n    },\n    [elRef],\n  );\n\n  const enableScrollLock = React.useCallback<ScrollContextInterface['enableScrollLock']>(() => {\n    const el = elRef.current;\n    if (!el) {\n      return;\n    }\n    beforeScrollLockFnSetRef.current.forEach((fn) => {\n      fn();\n    });\n\n    const scrollY = el.scrollTop;\n    const scrollX = el.scrollLeft;\n    const overflowY = el.scrollWidth > el.clientWidth ? 'scroll' : '';\n    const overflowX = el.scrollHeight > el.clientHeight ? 'scroll' : '';\n\n    Object.assign(el.style, {\n      position: 'absolute',\n      top: `-${scrollY}px`,\n      left: `-${scrollX}px`,\n      right: '0',\n      overflowY,\n      overflowX,\n    });\n    setScrollLock(true);\n  }, [elRef]);\n\n  const disableScrollLock = React.useCallback<ScrollContextInterface['disableScrollLock']>(() => {\n    const el = elRef.current;\n    if (!el) {\n      return;\n    }\n\n    const scrollY = el.style.top;\n    const scrollX = el.style.left;\n\n    clearDisableScrollStyle(el);\n    el.scrollTo(-parseInt(scrollX || '0'), -parseInt(scrollY || '0'));\n    setScrollLock(false);\n  }, [elRef]);\n\n  const scrollController = React.useMemo<ScrollContextInterface>(\n    () => ({\n      getScroll,\n      scrollTo,\n      isScrollLock,\n      disableScrollLock,\n      enableScrollLock,\n      beforeScrollLockFnSetRef,\n    }),\n    [getScroll, scrollTo, isScrollLock, disableScrollLock, enableScrollLock],\n  );\n\n  return <ScrollContext.Provider value={scrollController}>{children}</ScrollContext.Provider>;\n};\n\n/**\n * Вызывает функцию effect, до блокировки прокрутки\n * @param effect функция, которая может возвращать функцию очистки\n * @param deps effect обновится только при изменении значений в списке.\n */\nexport const useScrollLockEffect = (effect: React.EffectCallback, deps: React.DependencyList) => {\n  const destructorRef = React.useRef<ReturnType<React.EffectCallback>>(noop);\n  const { isScrollLock, beforeScrollLockFnSetRef } = useScroll();\n\n  // Изменяем effectCallback только при изменении deps\n  const effectCallback = React.useCallback(() => {\n    destructorRef.current = effect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n\n  // Добавляем effectCallback в список функций, которые необходимо вызвать\n  // до блокировки\n  React.useEffect(() => {\n    const beforeSet = beforeScrollLockFnSetRef?.current;\n    if (!beforeSet) {\n      return noop;\n    }\n\n    beforeSet.add(effectCallback);\n\n    return () => {\n      beforeSet.delete(effectCallback);\n    };\n  }, [beforeScrollLockFnSetRef, effectCallback]);\n\n  // Вызываем сбрасывающую функцию, после отключения блокировки\n  React.useEffect(() => {\n    if (!isScrollLock && destructorRef.current) {\n      destructorRef.current();\n    }\n  }, [isScrollLock]);\n};\n\nexport const useScrollLock = (enabled = true) => {\n  const { enableScrollLock, disableScrollLock } = useScroll();\n  useIsomorphicLayoutEffect(() => {\n    if (enabled) {\n      enableScrollLock();\n      return disableScrollLock;\n    }\n    return noop;\n  }, [enableScrollLock, disableScrollLock, enabled]);\n};\n"],"names":["React","noop","clamp","useDOM","useIsomorphicLayoutEffect","clearDisableScrollStyle","node","Object","assign","style","position","top","left","right","overflowY","overflowX","getPageYOffsetWithoutKeyboardHeight","window","diffOfClientHeightAndViewportHeight","document","documentElement","clientHeight","innerHeight","pageYOffset","ScrollContext","createContext","getScroll","x","y","scrollTo","isScrollLock","enableScrollLock","disableScrollLock","useScroll","useContext","GlobalScrollController","children","setScrollLock","useState","beforeScrollLockFnSetRef","useRef","Set","useCallback","pageXOffset","body","scrollWidth","innerWidth","scrollHeight","current","forEach","fn","scrollY","scrollX","clientWidth","parseInt","scrollController","useMemo","Provider","value","ElementScrollController","elRef","scrollLeft","scrollTop","el","useScrollLockEffect","effect","deps","destructorRef","effectCallback","useEffect","beforeSet","add","delete","useScrollLock","enabled"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/AppRoot/ScrollContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasChildren } from '../../types';\n\nconst clearDisableScrollStyle = (node: HTMLElement) => {\n  Object.assign(node.style, {\n    position: '',\n    top: '',\n    left: '',\n    right: '',\n    overflowY: '',\n    overflowX: '',\n  });\n};\n\nconst getPageYOffsetWithoutKeyboardHeight = (window: Window) => {\n  // Note: здесь расчёт на то, что `clientHeight` равен `window.innerHeight`.\n  //  Это достигается тем, что тегу `html` задали`height: 100%` и у него нет отступов сверху и снизу. Если есть отступы,\n  //  то надо задать `box-sizing: border-box`, чтобы они не учитывались.\n  const diffOfClientHeightAndViewportHeight =\n    window.document.documentElement.clientHeight - window.innerHeight;\n  return window.pageYOffset - diffOfClientHeightAndViewportHeight;\n};\n\nexport interface ScrollContextInterface {\n  getScroll(this: void): { x: number; y: number };\n  scrollTo(this: void, x?: number, y?: number): void;\n  isScrollLock: boolean;\n  enableScrollLock(this: void): void;\n  disableScrollLock(this: void): void;\n  beforeScrollLockFnSetRef?: React.RefObject<Set<() => void>>;\n}\n\nexport const ScrollContext = React.createContext<ScrollContextInterface>({\n  getScroll: () => ({ x: 0, y: 0 }),\n  scrollTo: noop,\n  isScrollLock: false,\n  enableScrollLock: noop,\n  disableScrollLock: noop,\n});\n\nexport const useScroll = () => React.useContext(ScrollContext);\n\nexport interface ScrollControllerProps extends HasChildren {\n  elRef: React.RefObject<HTMLElement>;\n}\n\nexport const GlobalScrollController = ({ children }: ScrollControllerProps) => {\n  const { window, document } = useDOM();\n  const [isScrollLock, setScrollLock] = React.useState(false);\n  const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());\n\n  const getScroll = React.useCallback<ScrollContextInterface['getScroll']>(\n    () => ({\n      x: window!.pageXOffset,\n      y: getPageYOffsetWithoutKeyboardHeight(window!),\n    }),\n    [window],\n  );\n  const scrollTo = React.useCallback<ScrollContextInterface['scrollTo']>(\n    (x = 0, y = 0) => {\n      // Some iOS versions do not normalize scroll — do it manually.\n      window!.scrollTo(\n        x ? clamp(x, 0, document!.body.scrollWidth - window!.innerWidth) : 0,\n        y ? clamp(y, 0, document!.body.scrollHeight - window!.innerHeight) : 0,\n      );\n    },\n    [document, window],\n  );\n\n  const enableScrollLock = React.useCallback<ScrollContextInterface['enableScrollLock']>(() => {\n    beforeScrollLockFnSetRef.current.forEach((fn) => {\n      fn();\n    });\n\n    const scrollY = window!.pageYOffset;\n    const scrollX = window!.pageXOffset;\n    const overflowY = window!.innerWidth > document!.documentElement.clientWidth ? 'scroll' : '';\n    const overflowX = window!.innerHeight > document!.documentElement.clientHeight ? 'scroll' : '';\n\n    Object.assign(document!.body.style, {\n      position: 'fixed',\n      top: `-${scrollY}px`,\n      left: `-${scrollX}px`,\n      right: '0',\n      overflowY,\n      overflowX,\n    });\n    setScrollLock(true);\n  }, [document, window]);\n\n  const disableScrollLock = React.useCallback<ScrollContextInterface['disableScrollLock']>(() => {\n    const scrollY = document!.body.style.top;\n    const scrollX = document!.body.style.left;\n\n    clearDisableScrollStyle(document!.body);\n    window!.scrollTo(-parseInt(scrollX || '0'), -parseInt(scrollY || '0'));\n    setScrollLock(false);\n  }, [document, window]);\n\n  const scrollController = React.useMemo<ScrollContextInterface>(\n    () => ({\n      getScroll,\n      scrollTo,\n      isScrollLock,\n      disableScrollLock,\n      enableScrollLock,\n\n      beforeScrollLockFnSetRef: beforeScrollLockFnSetRef,\n    }),\n    [getScroll, scrollTo, isScrollLock, disableScrollLock, enableScrollLock],\n  );\n\n  return <ScrollContext.Provider value={scrollController}>{children}</ScrollContext.Provider>;\n};\n\nexport const ElementScrollController = ({ elRef, children }: ScrollControllerProps) => {\n  const [isScrollLock, setScrollLock] = React.useState(false);\n  const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());\n\n  const getScroll = React.useCallback<ScrollContextInterface['getScroll']>(\n    () => ({\n      x: elRef.current?.scrollLeft ?? 0,\n      y: elRef.current?.scrollTop ?? 0,\n    }),\n    [elRef],\n  );\n  const scrollTo = React.useCallback<ScrollContextInterface['scrollTo']>(\n    (x = 0, y = 0) => {\n      const el = elRef.current;\n      // Some iOS versions do not normalize scroll — do it manually.\n      el?.scrollTo(\n        x ? clamp(x, 0, el.scrollWidth - el.clientWidth) : 0,\n        y ? clamp(y, 0, el.scrollHeight - el.clientHeight) : 0,\n      );\n    },\n    [elRef],\n  );\n\n  const enableScrollLock = React.useCallback<ScrollContextInterface['enableScrollLock']>(() => {\n    const el = elRef.current;\n    if (!el) {\n      return;\n    }\n    beforeScrollLockFnSetRef.current.forEach((fn) => {\n      fn();\n    });\n\n    const scrollY = el.scrollTop;\n    const scrollX = el.scrollLeft;\n    const overflowY = el.scrollWidth > el.clientWidth ? 'scroll' : '';\n    const overflowX = el.scrollHeight > el.clientHeight ? 'scroll' : '';\n\n    Object.assign(el.style, {\n      position: 'absolute',\n      top: `-${scrollY}px`,\n      left: `-${scrollX}px`,\n      right: '0',\n      overflowY,\n      overflowX,\n    });\n    setScrollLock(true);\n  }, [elRef]);\n\n  const disableScrollLock = React.useCallback<ScrollContextInterface['disableScrollLock']>(() => {\n    const el = elRef.current;\n    if (!el) {\n      return;\n    }\n\n    const scrollY = el.style.top;\n    const scrollX = el.style.left;\n\n    clearDisableScrollStyle(el);\n    el.scrollTo(-parseInt(scrollX || '0'), -parseInt(scrollY || '0'));\n    setScrollLock(false);\n  }, [elRef]);\n\n  const scrollController = React.useMemo<ScrollContextInterface>(\n    () => ({\n      getScroll,\n      scrollTo,\n      isScrollLock,\n      disableScrollLock,\n      enableScrollLock,\n      beforeScrollLockFnSetRef,\n    }),\n    [getScroll, scrollTo, isScrollLock, disableScrollLock, enableScrollLock],\n  );\n\n  return <ScrollContext.Provider value={scrollController}>{children}</ScrollContext.Provider>;\n};\n\n/**\n * Вызывает функцию effect, до блокировки прокрутки\n * @param effect функция, которая может возвращать функцию очистки\n * @param deps effect обновится только при изменении значений в списке.\n */\nexport const useScrollLockEffect = (effect: React.EffectCallback, deps: React.DependencyList) => {\n  const destructorRef = React.useRef<ReturnType<React.EffectCallback>>(noop);\n  const { isScrollLock, beforeScrollLockFnSetRef } = useScroll();\n\n  // Изменяем effectCallback только при изменении deps\n  const effectCallback = React.useCallback(() => {\n    destructorRef.current = effect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n\n  // Добавляем effectCallback в список функций, которые необходимо вызвать\n  // до блокировки\n  React.useEffect(() => {\n    const beforeSet = beforeScrollLockFnSetRef?.current;\n    if (!beforeSet) {\n      return noop;\n    }\n\n    beforeSet.add(effectCallback);\n\n    return () => {\n      beforeSet.delete(effectCallback);\n    };\n  }, [beforeScrollLockFnSetRef, effectCallback]);\n\n  // Вызываем сбрасывающую функцию, после отключения блокировки\n  React.useEffect(() => {\n    if (!isScrollLock && destructorRef.current) {\n      destructorRef.current();\n    }\n  }, [isScrollLock]);\n};\n\nexport const useScrollLock = (enabled = true) => {\n  const { enableScrollLock, disableScrollLock } = useScroll();\n  useIsomorphicLayoutEffect(() => {\n    if (enabled) {\n      enableScrollLock();\n      return disableScrollLock;\n    }\n    return noop;\n  }, [enableScrollLock, disableScrollLock, enabled]);\n};\n"],"names":["React","noop","clamp","useDOM","useIsomorphicLayoutEffect","clearDisableScrollStyle","node","Object","assign","style","position","top","left","right","overflowY","overflowX","getPageYOffsetWithoutKeyboardHeight","window","diffOfClientHeightAndViewportHeight","document","documentElement","clientHeight","innerHeight","pageYOffset","ScrollContext","createContext","getScroll","x","y","scrollTo","isScrollLock","enableScrollLock","disableScrollLock","useScroll","useContext","GlobalScrollController","children","setScrollLock","useState","beforeScrollLockFnSetRef","useRef","Set","useCallback","pageXOffset","body","scrollWidth","innerWidth","scrollHeight","current","forEach","fn","scrollY","scrollX","clientWidth","parseInt","scrollController","useMemo","Provider","value","ElementScrollController","elRef","scrollLeft","scrollTop","el","useScrollLockEffect","effect","deps","destructorRef","effectCallback","useEffect","beforeSet","add","delete","useScrollLock","enabled"],"mappings":"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"}

package/dist/cssm/components/AppearanceProvider/AppearanceProvider.js

@@ -4,7 +4,7 @@ import { TokensClassProvider } from '../../lib/tokensClassProvider';
 import { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';
 /**
  * @see https://vkcom.github.io/VKUI/#/AppearanceProvider
- */ export const AppearanceProvider = ({ appearance , children  })=>{
+ */ export const AppearanceProvider = ({ appearance, children })=>{
     const platform = usePlatform();
     return /*#__PURE__*/ React.createElement(ConfigProviderOverride, {
         appearance: appearance

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppearanceProvider/AppearanceProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AppearanceType } from '@vkontakte/vk-bridge';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { TokensClassProvider } from '../../lib/tokensClassProvider';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface AppearanceProviderProps {\n  appearance: AppearanceType;\n  children: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppearanceProvider\n */\nexport const AppearanceProvider = ({ appearance, children }: AppearanceProviderProps) => {\n  const platform = usePlatform();\n\n  return (\n    <ConfigProviderOverride appearance={appearance}>\n      <TokensClassProvider platform={platform} appearance={appearance}>\n        {children}\n      </TokensClassProvider>\n    </ConfigProviderOverride>\n  );\n};\n"],"names":["React","usePlatform","TokensClassProvider","ConfigProviderOverride","AppearanceProvider","appearance","children","platform"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,SAASC,sBAAsB,QAAQ,2CAA2C;AAOlF;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAAC,EAAEC,WAAU,EAAEC,SAAQ,EAA2B;IAClF,MAAMC,WAAWN;IAEjB,qBACE,oBAACE;QAAuBE,YAAYA;qBAClC,oBAACH;QAAoBK,UAAUA;QAAUF,YAAYA;OAClDC;AAIT,EAAE"}
+{"version":3,"sources":["../../../../src/components/AppearanceProvider/AppearanceProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AppearanceType } from '@vkontakte/vk-bridge';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { TokensClassProvider } from '../../lib/tokensClassProvider';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface AppearanceProviderProps {\n  appearance: AppearanceType;\n  children: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppearanceProvider\n */\nexport const AppearanceProvider = ({ appearance, children }: AppearanceProviderProps) => {\n  const platform = usePlatform();\n\n  return (\n    <ConfigProviderOverride appearance={appearance}>\n      <TokensClassProvider platform={platform} appearance={appearance}>\n        {children}\n      </TokensClassProvider>\n    </ConfigProviderOverride>\n  );\n};\n"],"names":["React","usePlatform","TokensClassProvider","ConfigProviderOverride","AppearanceProvider","appearance","children","platform"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,SAASC,sBAAsB,QAAQ,2CAA2C;AAOlF;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAAC,EAAEC,UAAU,EAAEC,QAAQ,EAA2B;IAClF,MAAMC,WAAWN;IAEjB,qBACE,oBAACE;QAAuBE,YAAYA;qBAClC,oBAACH;QAAoBK,UAAUA;QAAUF,YAAYA;OAClDC;AAIT,EAAE"}

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

@@ -7,7 +7,7 @@ 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', className, getRootRef, style: styleProp, ...props }) {
     const style = {
         ['--vkui_internal--aspect_ratio']: String(ratio)
     };

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,MAAK,EACLC,SAAQ,EACRC,MAAO,UAAS,EAChBC,UAAS,EACTC,WAAU,EACVC,OAAOC,UAAS,EAChB,GAAGC,OACc;IACjB,MAAMF,QAAmD;QACvD,CAAC,gCAAgC,EAAEG,OAAOR;IAC5C;IAEA,qBACE,oBAACS;QACCN,WAAWN,WACTC,OAAOC,aACPG,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, 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"}

package/dist/cssm/components/Avatar/Avatar.js

@@ -25,7 +25,7 @@ const gradientStyles = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Avatar
- */ export const Avatar = ({ size =AVATAR_DEFAULT_SIZE , className , gradientColor , initials , fallbackIcon , children , ...restProps })=>{
+ */ export const Avatar = ({ size = AVATAR_DEFAULT_SIZE, className, gradientColor, initials, fallbackIcon, children, ...restProps })=>{
     const gradientName = typeof gradientColor === 'number' ? COLORS_NUMBER_TO_TEXT_MAP[gradientColor] : gradientColor;
     const isGradientNotCustom = gradientName && gradientName !== 'custom';
     const rewrittenFallbackIcon = initials ? undefined : fallbackIcon;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { 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\nexport const 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['Avatar--gradient-red'],\n  'orange': styles['Avatar--gradient-orange'],\n  'yellow': styles['Avatar--gradient-yellow'],\n  'green': styles['Avatar--gradient-green'],\n  'blue': styles['Avatar--gradient-blue'],\n  'l-blue': styles['Avatar--gradient-l-blue'],\n  'violet': styles['Avatar--gradient-violet'],\n};\n\nexport interface AvatarProps extends ImageBaseProps {\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 = ({\n  size = AVATAR_DEFAULT_SIZE,\n  className,\n  gradientColor,\n  initials,\n  fallbackIcon,\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  const rewrittenFallbackIcon = initials ? undefined : fallbackIcon;\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      fallbackIcon={rewrittenFallbackIcon}\n      className={classNames(\n        styles['Avatar'],\n        gradientName && styles['Avatar--has-gradient'],\n        isGradientNotCustom && gradientStyles[gradientName],\n        className,\n      )}\n    >\n      {initials && (\n        <div\n          className={styles['Avatar__initials']}\n          style={{\n            fontSize: getInitialsFontSize(size),\n          }}\n        >\n          {initials}\n        </div>\n      )}\n      {children}\n    </ImageBase>\n  );\n};\n\nAvatar.Badge = AvatarBadge;\n\nAvatar.BadgeWithPreset = AvatarBadgeWithPreset;\n\nAvatar.Overlay = ImageBase.Overlay;\n"],"names":["React","classNames","ImageBase","AvatarBadge","AvatarBadgeWithPreset","getInitialsFontSize","styles","AVATAR_DEFAULT_SIZE","COLORS_NUMBER_TO_TEXT_MAP","gradientStyles","Avatar","size","className","gradientColor","initials","fallbackIcon","children","restProps","gradientName","isGradientNotCustom","rewrittenFallbackIcon","undefined","div","style","fontSize","Badge","BadgeWithPreset","Overlay"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,QAAyD,yBAAyB;AACpG,SAASC,WAAW,QAA+B,4BAA4B;AAC/E,SACEC,qBAAqB,QAEhB,sCAAsC;AAC7C,SAASC,mBAAmB,QAAQ,YAAY;AAChD,OAAOC,YAAY,sBAAsB;AAQzC,OAAO,MAAMC,sBAAsB,GAAG;AAEtC,MAAMC,4BAA4B;IAChC,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;AACL;AAYA,MAAMC,iBAAiB;IACrB,OAAOH,MAAM,CAAC,uBAAuB;IACrC,UAAUA,MAAM,CAAC,0BAA0B;IAC3C,UAAUA,MAAM,CAAC,0BAA0B;IAC3C,SAASA,MAAM,CAAC,yBAAyB;IACzC,QAAQA,MAAM,CAAC,wBAAwB;IACvC,UAAUA,MAAM,CAAC,0BAA0B;IAC3C,UAAUA,MAAM,CAAC,0BAA0B;AAC7C;AA6BA;;CAEC,GACD,OAAO,MAAMI,SAAS,CAAC,EACrBC,MAAOJ,oBAAmB,EAC1BK,UAAS,EACTC,cAAa,EACbC,SAAQ,EACRC,aAAY,EACZC,SAAQ,EACR,GAAGC,WACS;IACZ,MAAMC,eACJ,OAAOL,kBAAkB,WAAWL,yBAAyB,CAACK,cAAc,GAAGA;IACjF,MAAMM,sBAAsBD,gBAAgBA,iBAAiB;IAC7D,MAAME,wBAAwBN,WAAWO,YAAYN;IAErD,qBACE,oBAACb;QACE,GAAGe,SAAS;QACbN,MAAMA;QACNI,cAAcK;QACdR,WAAWX,WACTK,MAAM,CAAC,SAAS,EAChBY,gBAAgBZ,MAAM,CAAC,uBAAuB,EAC9Ca,uBAAuBV,cAAc,CAACS,aAAa,EACnDN;OAGDE,0BACC,oBAACQ;QACCV,WAAWN,MAAM,CAAC,mBAAmB;QACrCiB,OAAO;YACLC,UAAUnB,oBAAoBM;QAChC;OAECG,WAGJE;AAGP,EAAE;AAEFN,OAAOe,QAAQtB;AAEfO,OAAOgB,kBAAkBtB;AAEzBM,OAAOiB,UAAUzB,UAAUyB"}
+{"version":3,"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { 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\nexport const 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['Avatar--gradient-red'],\n  'orange': styles['Avatar--gradient-orange'],\n  'yellow': styles['Avatar--gradient-yellow'],\n  'green': styles['Avatar--gradient-green'],\n  'blue': styles['Avatar--gradient-blue'],\n  'l-blue': styles['Avatar--gradient-l-blue'],\n  'violet': styles['Avatar--gradient-violet'],\n};\n\nexport interface AvatarProps extends ImageBaseProps {\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 = ({\n  size = AVATAR_DEFAULT_SIZE,\n  className,\n  gradientColor,\n  initials,\n  fallbackIcon,\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  const rewrittenFallbackIcon = initials ? undefined : fallbackIcon;\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      fallbackIcon={rewrittenFallbackIcon}\n      className={classNames(\n        styles['Avatar'],\n        gradientName && styles['Avatar--has-gradient'],\n        isGradientNotCustom && gradientStyles[gradientName],\n        className,\n      )}\n    >\n      {initials && (\n        <div\n          className={styles['Avatar__initials']}\n          style={{\n            fontSize: getInitialsFontSize(size),\n          }}\n        >\n          {initials}\n        </div>\n      )}\n      {children}\n    </ImageBase>\n  );\n};\n\nAvatar.Badge = AvatarBadge;\n\nAvatar.BadgeWithPreset = AvatarBadgeWithPreset;\n\nAvatar.Overlay = ImageBase.Overlay;\n"],"names":["React","classNames","ImageBase","AvatarBadge","AvatarBadgeWithPreset","getInitialsFontSize","styles","AVATAR_DEFAULT_SIZE","COLORS_NUMBER_TO_TEXT_MAP","gradientStyles","Avatar","size","className","gradientColor","initials","fallbackIcon","children","restProps","gradientName","isGradientNotCustom","rewrittenFallbackIcon","undefined","div","style","fontSize","Badge","BadgeWithPreset","Overlay"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,QAAyD,yBAAyB;AACpG,SAASC,WAAW,QAA+B,4BAA4B;AAC/E,SACEC,qBAAqB,QAEhB,sCAAsC;AAC7C,SAASC,mBAAmB,QAAQ,YAAY;AAChD,OAAOC,YAAY,sBAAsB;AAQzC,OAAO,MAAMC,sBAAsB,GAAG;AAEtC,MAAMC,4BAA4B;IAChC,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;AACL;AAYA,MAAMC,iBAAiB;IACrB,OAAOH,MAAM,CAAC,uBAAuB;IACrC,UAAUA,MAAM,CAAC,0BAA0B;IAC3C,UAAUA,MAAM,CAAC,0BAA0B;IAC3C,SAASA,MAAM,CAAC,yBAAyB;IACzC,QAAQA,MAAM,CAAC,wBAAwB;IACvC,UAAUA,MAAM,CAAC,0BAA0B;IAC3C,UAAUA,MAAM,CAAC,0BAA0B;AAC7C;AA6BA;;CAEC,GACD,OAAO,MAAMI,SAAS,CAAC,EACrBC,OAAOJ,mBAAmB,EAC1BK,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,YAAY,EACZC,QAAQ,EACR,GAAGC,WACS;IACZ,MAAMC,eACJ,OAAOL,kBAAkB,WAAWL,yBAAyB,CAACK,cAAc,GAAGA;IACjF,MAAMM,sBAAsBD,gBAAgBA,iBAAiB;IAC7D,MAAME,wBAAwBN,WAAWO,YAAYN;IAErD,qBACE,oBAACb;QACE,GAAGe,SAAS;QACbN,MAAMA;QACNI,cAAcK;QACdR,WAAWX,WACTK,MAAM,CAAC,SAAS,EAChBY,gBAAgBZ,MAAM,CAAC,uBAAuB,EAC9Ca,uBAAuBV,cAAc,CAACS,aAAa,EACnDN;OAGDE,0BACC,oBAACQ;QACCV,WAAWN,MAAM,CAAC,mBAAmB;QACrCiB,OAAO;YACLC,UAAUnB,oBAAoBM;QAChC;OAECG,WAGJE;AAGP,EAAE;AAEFN,OAAOe,KAAK,GAAGtB;AAEfO,OAAOgB,eAAe,GAAGtB;AAEzBM,OAAOiB,OAAO,GAAGzB,UAAUyB,OAAO"}

package/dist/cssm/components/Avatar/AvatarBadge/AvatarBadge.js

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { ImageBase, ImageBaseContext } from '../../ImageBase/ImageBase';
 import styles from './AvatarBadge.module.css';
-export const AvatarBadge = ({ className , ...restProps })=>{
-    const { size  } = React.useContext(ImageBaseContext);
+export const AvatarBadge = ({ className, ...restProps })=>{
+    const { size } = React.useContext(ImageBaseContext);
     return /*#__PURE__*/ React.createElement(ImageBase.Badge, {
         ...restProps,
         className: classNames(styles['AvatarBadge'], size < 96 && styles['AvatarBadge--shifted'], className)

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Avatar/AvatarBadge/AvatarBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseBadgeProps, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './AvatarBadge.module.css';\n\nexport type AvatarBadgeProps = ImageBaseBadgeProps;\n\nexport const AvatarBadge = ({ className, ...restProps }: AvatarBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(\n        styles['AvatarBadge'],\n        size < 96 && styles['AvatarBadge--shifted'],\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","ImageBase","ImageBaseContext","styles","AvatarBadge","className","restProps","size","useContext","Badge"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAA4BC,gBAAgB,QAAQ,4BAA4B;AAClG,OAAOC,YAAY,2BAA2B;AAI9C,OAAO,MAAMC,cAAc,CAAC,EAAEC,UAAS,EAAE,GAAGC,WAA6B;IACvE,MAAM,EAAEC,KAAI,EAAE,GAAGR,MAAMS,WAAWN;IAClC,qBACE,oBAACD,UAAUQ;QACR,GAAGH,SAAS;QACbD,WAAWL,WACTG,MAAM,CAAC,cAAc,EACrBI,OAAO,MAAMJ,MAAM,CAAC,uBAAuB,EAC3CE;;AAIR,EAAE"}
+{"version":3,"sources":["../../../../../src/components/Avatar/AvatarBadge/AvatarBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseBadgeProps, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './AvatarBadge.module.css';\n\nexport type AvatarBadgeProps = ImageBaseBadgeProps;\n\nexport const AvatarBadge = ({ className, ...restProps }: AvatarBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(\n        styles['AvatarBadge'],\n        size < 96 && styles['AvatarBadge--shifted'],\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","ImageBase","ImageBaseContext","styles","AvatarBadge","className","restProps","size","useContext","Badge"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAA4BC,gBAAgB,QAAQ,4BAA4B;AAClG,OAAOC,YAAY,2BAA2B;AAI9C,OAAO,MAAMC,cAAc,CAAC,EAAEC,SAAS,EAAE,GAAGC,WAA6B;IACvE,MAAM,EAAEC,IAAI,EAAE,GAAGR,MAAMS,UAAU,CAACN;IAClC,qBACE,oBAACD,UAAUQ,KAAK;QACb,GAAGH,SAAS;QACbD,WAAWL,WACTG,MAAM,CAAC,cAAc,EACrBI,OAAO,MAAMJ,MAAM,CAAC,uBAAuB,EAC3CE;;AAIR,EAAE"}

package/dist/cssm/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.js

@@ -3,8 +3,8 @@ import { classNames } from '@vkontakte/vkjs';
 import { getBadgeIconSizeByImageBaseSize, ImageBase, ImageBaseContext } from '../../ImageBase/ImageBase';
 import { Icon12Circle, Icon12OnlineMobile } from './icons';
 import styles from './AvatarBadge.module.css';
-export const AvatarBadgeWithPreset = ({ preset ='online' , className , ...restProps })=>{
-    const { size  } = React.useContext(ImageBaseContext);
+export const AvatarBadgeWithPreset = ({ preset = 'online', className, ...restProps })=>{
+    const { size } = React.useContext(ImageBaseContext);
     const badgeSize = getBadgeIconSizeByImageBaseSize(size);
     const isOnlinePreset = preset === 'online';
     const presetClassName = isOnlinePreset ? styles['AvatarBadge--preset-online'] : styles['AvatarBadge--preset-onlineMobile'];

package/dist/cssm/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  getBadgeIconSizeByImageBaseSize,\n  ImageBase,\n  type ImageBaseBadgeProps,\n  ImageBaseContext,\n} from '../../ImageBase/ImageBase';\nimport { Icon12Circle, Icon12OnlineMobile } from './icons';\nimport styles from './AvatarBadge.module.css';\n\nexport interface AvatarBadgeWithPresetProps\n  extends Omit<ImageBaseBadgeProps, 'background' | 'children'> {\n  /**\n   * Использует предзаданные настройки.\n   *\n   * За каждым пресетом закреплена своя иконка и стили.\n   */\n  preset?: 'online' | 'online-mobile';\n}\n\nexport const AvatarBadgeWithPreset = ({\n  preset = 'online',\n  className,\n  ...restProps\n}: AvatarBadgeWithPresetProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  const badgeSize = getBadgeIconSizeByImageBaseSize(size);\n  const isOnlinePreset = preset === 'online';\n  const presetClassName = isOnlinePreset\n    ? styles['AvatarBadge--preset-online']\n    : styles['AvatarBadge--preset-onlineMobile'];\n  const Icon = isOnlinePreset ? Icon12Circle : Icon12OnlineMobile;\n\n  return (\n    <ImageBase.Badge\n      background=\"stroke\"\n      className={classNames(styles['AvatarBadge'], presetClassName, className)}\n      {...restProps}\n    >\n      <Icon width={badgeSize} height={badgeSize} />\n    </ImageBase.Badge>\n  );\n};\n"],"names":["React","classNames","getBadgeIconSizeByImageBaseSize","ImageBase","ImageBaseContext","Icon12Circle","Icon12OnlineMobile","styles","AvatarBadgeWithPreset","preset","className","restProps","size","useContext","badgeSize","isOnlinePreset","presetClassName","Icon","Badge","background","width","height"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,+BAA+B,EAC/BC,SAAS,EAETC,gBAAgB,QACX,4BAA4B;AACnC,SAASC,YAAY,EAAEC,kBAAkB,QAAQ,UAAU;AAC3D,OAAOC,YAAY,2BAA2B;AAY9C,OAAO,MAAMC,wBAAwB,CAAC,EACpCC,QAAS,SAAQ,EACjBC,UAAS,EACT,GAAGC,WACwB;IAC3B,MAAM,EAAEC,KAAI,EAAE,GAAGZ,MAAMa,WAAWT;IAClC,MAAMU,YAAYZ,gCAAgCU;IAClD,MAAMG,iBAAiBN,WAAW;IAClC,MAAMO,kBAAkBD,iBACpBR,MAAM,CAAC,6BAA6B,GACpCA,MAAM,CAAC,mCAAmC;IAC9C,MAAMU,OAAOF,iBAAiBV,eAAeC;IAE7C,qBACE,oBAACH,UAAUe;QACTC,YAAW;QACXT,WAAWT,WAAWM,MAAM,CAAC,cAAc,EAAES,iBAAiBN;QAC7D,GAAGC,SAAS;qBAEb,oBAACM;QAAKG,OAAON;QAAWO,QAAQP;;AAGtC,EAAE"}
+{"version":3,"sources":["../../../../../src/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  getBadgeIconSizeByImageBaseSize,\n  ImageBase,\n  type ImageBaseBadgeProps,\n  ImageBaseContext,\n} from '../../ImageBase/ImageBase';\nimport { Icon12Circle, Icon12OnlineMobile } from './icons';\nimport styles from './AvatarBadge.module.css';\n\nexport interface AvatarBadgeWithPresetProps\n  extends Omit<ImageBaseBadgeProps, 'background' | 'children'> {\n  /**\n   * Использует предзаданные настройки.\n   *\n   * За каждым пресетом закреплена своя иконка и стили.\n   */\n  preset?: 'online' | 'online-mobile';\n}\n\nexport const AvatarBadgeWithPreset = ({\n  preset = 'online',\n  className,\n  ...restProps\n}: AvatarBadgeWithPresetProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  const badgeSize = getBadgeIconSizeByImageBaseSize(size);\n  const isOnlinePreset = preset === 'online';\n  const presetClassName = isOnlinePreset\n    ? styles['AvatarBadge--preset-online']\n    : styles['AvatarBadge--preset-onlineMobile'];\n  const Icon = isOnlinePreset ? Icon12Circle : Icon12OnlineMobile;\n\n  return (\n    <ImageBase.Badge\n      background=\"stroke\"\n      className={classNames(styles['AvatarBadge'], presetClassName, className)}\n      {...restProps}\n    >\n      <Icon width={badgeSize} height={badgeSize} />\n    </ImageBase.Badge>\n  );\n};\n"],"names":["React","classNames","getBadgeIconSizeByImageBaseSize","ImageBase","ImageBaseContext","Icon12Circle","Icon12OnlineMobile","styles","AvatarBadgeWithPreset","preset","className","restProps","size","useContext","badgeSize","isOnlinePreset","presetClassName","Icon","Badge","background","width","height"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,+BAA+B,EAC/BC,SAAS,EAETC,gBAAgB,QACX,4BAA4B;AACnC,SAASC,YAAY,EAAEC,kBAAkB,QAAQ,UAAU;AAC3D,OAAOC,YAAY,2BAA2B;AAY9C,OAAO,MAAMC,wBAAwB,CAAC,EACpCC,SAAS,QAAQ,EACjBC,SAAS,EACT,GAAGC,WACwB;IAC3B,MAAM,EAAEC,IAAI,EAAE,GAAGZ,MAAMa,UAAU,CAACT;IAClC,MAAMU,YAAYZ,gCAAgCU;IAClD,MAAMG,iBAAiBN,WAAW;IAClC,MAAMO,kBAAkBD,iBACpBR,MAAM,CAAC,6BAA6B,GACpCA,MAAM,CAAC,mCAAmC;IAC9C,MAAMU,OAAOF,iBAAiBV,eAAeC;IAE7C,qBACE,oBAACH,UAAUe,KAAK;QACdC,YAAW;QACXT,WAAWT,WAAWM,MAAM,CAAC,cAAc,EAAES,iBAAiBN;QAC7D,GAAGC,SAAS;qBAEb,oBAACM;QAAKG,OAAON;QAAWO,QAAQP;;AAGtC,EAAE"}

package/dist/cssm/components/Avatar/AvatarBadge/icons.js

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { Icon12Circle as Icon12CircleLib, Icon12OnlineMobile as Icon12OnlineMobileLib } from '@vkontakte/icons';
-export const Icon12Circle = ({ width =12 , height =12 , ...restProps })=>{
+export const Icon12Circle = ({ width = 12, height = 12, ...restProps })=>{
     return /*#__PURE__*/ React.createElement(Icon12CircleLib, {
         ...restProps,
         width: width >= 24 ? 15 : 12,
         height: height >= 24 ? 15 : 12
     });
 };
-export const Icon12OnlineMobile = ({ width =8 , height =12 , ...restProps })=>{
+export const Icon12OnlineMobile = ({ width = 8, height = 12, ...restProps })=>{
     return /*#__PURE__*/ React.createElement(Icon12OnlineMobileLib, {
         ...restProps,
         width: width >= 24 ? 9 : 8,

package/dist/cssm/components/Avatar/AvatarBadge/icons.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Avatar/AvatarBadge/icons.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon12Circle as Icon12CircleLib,\n  Icon12OnlineMobile as Icon12OnlineMobileLib,\n} from '@vkontakte/icons';\n\nexport const Icon12Circle = ({\n  width = 12,\n  height = 12,\n  ...restProps\n}: React.ComponentProps<typeof Icon12CircleLib>) => {\n  return (\n    <Icon12CircleLib {...restProps} width={width >= 24 ? 15 : 12} height={height >= 24 ? 15 : 12} />\n  );\n};\n\nexport const Icon12OnlineMobile = ({\n  width = 8,\n  height = 12,\n  ...restProps\n}: React.ComponentProps<typeof Icon12OnlineMobileLib>) => {\n  return (\n    <Icon12OnlineMobileLib\n      {...restProps}\n      width={width >= 24 ? 9 : 8}\n      height={height >= 24 ? 15 : 12}\n    />\n  );\n};\n"],"names":["React","Icon12Circle","Icon12CircleLib","Icon12OnlineMobile","Icon12OnlineMobileLib","width","height","restProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,gBAAgBC,eAAe,EAC/BC,sBAAsBC,qBAAqB,QACtC,mBAAmB;AAE1B,OAAO,MAAMH,eAAe,CAAC,EAC3BI,OAAQ,GAAE,EACVC,QAAS,GAAE,EACX,GAAGC,WAC0C;IAC7C,qBACE,oBAACL;QAAiB,GAAGK,SAAS;QAAEF,OAAOA,SAAS,KAAK,KAAK;QAAIC,QAAQA,UAAU,KAAK,KAAK;;AAE9F,EAAE;AAEF,OAAO,MAAMH,qBAAqB,CAAC,EACjCE,OAAQ,EAAC,EACTC,QAAS,GAAE,EACX,GAAGC,WACgD;IACnD,qBACE,oBAACH;QACE,GAAGG,SAAS;QACbF,OAAOA,SAAS,KAAK,IAAI;QACzBC,QAAQA,UAAU,KAAK,KAAK;;AAGlC,EAAE"}
+{"version":3,"sources":["../../../../../src/components/Avatar/AvatarBadge/icons.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon12Circle as Icon12CircleLib,\n  Icon12OnlineMobile as Icon12OnlineMobileLib,\n} from '@vkontakte/icons';\n\nexport const Icon12Circle = ({\n  width = 12,\n  height = 12,\n  ...restProps\n}: React.ComponentProps<typeof Icon12CircleLib>) => {\n  return (\n    <Icon12CircleLib {...restProps} width={width >= 24 ? 15 : 12} height={height >= 24 ? 15 : 12} />\n  );\n};\n\nexport const Icon12OnlineMobile = ({\n  width = 8,\n  height = 12,\n  ...restProps\n}: React.ComponentProps<typeof Icon12OnlineMobileLib>) => {\n  return (\n    <Icon12OnlineMobileLib\n      {...restProps}\n      width={width >= 24 ? 9 : 8}\n      height={height >= 24 ? 15 : 12}\n    />\n  );\n};\n"],"names":["React","Icon12Circle","Icon12CircleLib","Icon12OnlineMobile","Icon12OnlineMobileLib","width","height","restProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,gBAAgBC,eAAe,EAC/BC,sBAAsBC,qBAAqB,QACtC,mBAAmB;AAE1B,OAAO,MAAMH,eAAe,CAAC,EAC3BI,QAAQ,EAAE,EACVC,SAAS,EAAE,EACX,GAAGC,WAC0C;IAC7C,qBACE,oBAACL;QAAiB,GAAGK,SAAS;QAAEF,OAAOA,SAAS,KAAK,KAAK;QAAIC,QAAQA,UAAU,KAAK,KAAK;;AAE9F,EAAE;AAEF,OAAO,MAAMH,qBAAqB,CAAC,EACjCE,QAAQ,CAAC,EACTC,SAAS,EAAE,EACX,GAAGC,WACgD;IACnD,qBACE,oBAACH;QACE,GAAGG,SAAS;QACbF,OAAOA,SAAS,KAAK,IAAI;QACzBC,QAAQA,UAAU,KAAK,KAAK;;AAGlC,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Avatar/helpers.ts"],"sourcesContent":["import type { ImageBaseSize } from '../ImageBase/ImageBase';\n\nconst MAX_FONT_SIZE = 30;\nconst MAX_IMAGE_BASE_SIZE: ImageBaseSize = 96;\nconst RELATIVE_SIZE = MAX_FONT_SIZE / MAX_IMAGE_BASE_SIZE;\n\n/**\n * По возможности выставляем размеры по дизайн-системе. Иначе высчитываем.\n */\nexport function getInitialsFontSize(avatarSize: number): number {\n  if (avatarSize <= 16) {\n    return 5;\n  } else if (avatarSize <= 24) {\n    return 8;\n  } else if (avatarSize <= 32) {\n    return 10;\n  } else if (avatarSize <= 36) {\n    return 13;\n  } else if (avatarSize <= 44) {\n    return 14;\n  } else if (avatarSize <= 48) {\n    return 17;\n  } else if (avatarSize < 56) {\n    return 18;\n  } else if (avatarSize <= 64) {\n    return 21;\n  } else if (avatarSize <= 88) {\n    return 26;\n  } else if (avatarSize <= MAX_IMAGE_BASE_SIZE) {\n    return MAX_FONT_SIZE;\n  }\n\n  const calculatedFontSize = Math.ceil(avatarSize * RELATIVE_SIZE);\n  const evenFix = calculatedFontSize % 2;\n  return calculatedFontSize + evenFix;\n}\n"],"names":["MAX_FONT_SIZE","MAX_IMAGE_BASE_SIZE","RELATIVE_SIZE","getInitialsFontSize","avatarSize","calculatedFontSize","Math","ceil","evenFix"],"mappings":"AAEA,MAAMA,gBAAgB;AACtB,MAAMC,sBAAqC;AAC3C,MAAMC,gBAAgBF,gBAAgBC;AAEtC;;CAEC,GACD,OAAO,SAASE,oBAAoBC,UAAkB;IACpD,IAAIA,cAAc,IAAI;QACpB,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,aAAa,IAAI;QAC1B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAcH,qBAAqB;QAC5C,OAAOD;IACT;IAEA,MAAMK,qBAAqBC,KAAKC,KAAKH,aAAaF;IAClD,MAAMM,UAAUH,qBAAqB;IACrC,OAAOA,qBAAqBG;AAC9B"}
+{"version":3,"sources":["../../../../src/components/Avatar/helpers.ts"],"sourcesContent":["import type { ImageBaseSize } from '../ImageBase/ImageBase';\n\nconst MAX_FONT_SIZE = 30;\nconst MAX_IMAGE_BASE_SIZE: ImageBaseSize = 96;\nconst RELATIVE_SIZE = MAX_FONT_SIZE / MAX_IMAGE_BASE_SIZE;\n\n/**\n * По возможности выставляем размеры по дизайн-системе. Иначе высчитываем.\n */\nexport function getInitialsFontSize(avatarSize: number): number {\n  if (avatarSize <= 16) {\n    return 5;\n  } else if (avatarSize <= 24) {\n    return 8;\n  } else if (avatarSize <= 32) {\n    return 10;\n  } else if (avatarSize <= 36) {\n    return 13;\n  } else if (avatarSize <= 44) {\n    return 14;\n  } else if (avatarSize <= 48) {\n    return 17;\n  } else if (avatarSize < 56) {\n    return 18;\n  } else if (avatarSize <= 64) {\n    return 21;\n  } else if (avatarSize <= 88) {\n    return 26;\n  } else if (avatarSize <= MAX_IMAGE_BASE_SIZE) {\n    return MAX_FONT_SIZE;\n  }\n\n  const calculatedFontSize = Math.ceil(avatarSize * RELATIVE_SIZE);\n  const evenFix = calculatedFontSize % 2;\n  return calculatedFontSize + evenFix;\n}\n"],"names":["MAX_FONT_SIZE","MAX_IMAGE_BASE_SIZE","RELATIVE_SIZE","getInitialsFontSize","avatarSize","calculatedFontSize","Math","ceil","evenFix"],"mappings":"AAEA,MAAMA,gBAAgB;AACtB,MAAMC,sBAAqC;AAC3C,MAAMC,gBAAgBF,gBAAgBC;AAEtC;;CAEC,GACD,OAAO,SAASE,oBAAoBC,UAAkB;IACpD,IAAIA,cAAc,IAAI;QACpB,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,aAAa,IAAI;QAC1B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAcH,qBAAqB;QAC5C,OAAOD;IACT;IAEA,MAAMK,qBAAqBC,KAAKC,IAAI,CAACH,aAAaF;IAClD,MAAMM,UAAUH,qBAAqB;IACrC,OAAOA,qBAAqBG;AAC9B"}

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

@@ -3,7 +3,7 @@ import { classNames } from '@vkontakte/vkjs';
 import styles from './Badge.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Badge
- */ export const Badge = ({ mode ='new' , className , ...restProps })=>/*#__PURE__*/ React.createElement("span", {
+ */ 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']

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,MAAO,MAAK,EAAEC,UAAS,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 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"}

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

@@ -65,8 +65,12 @@ export interface BannerProps extends React.HTMLAttributes<HTMLDivElement>, HasRo
      * - `gap="m" mode="vertical" stretched`
      */
     actions?: React.ReactNode;
+    /**
+     * Удаляет отступы у компонента
+     */
+    noPadding?: boolean;
 }
 /**
  * @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, ...restProps }: BannerProps) => React.JSX.Element;
+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;

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

@@ -12,7 +12,7 @@ import { Title } from '../Typography/Title/Title';
 import styles from './Banner.module.css';
 /**
  * @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 , ...restProps })=>{
+ */ export const Banner = ({ mode = 'tint', imageTheme = 'dark', size = 's', before, asideMode, header, subheader, text, children, background, actions, onDismiss, dismissLabel = 'Скрыть', className, getRootRef, noPadding, ...restProps })=>{
     const platform = usePlatform();
     const HeaderTypography = size === 'm' ? Title : Headline;
     const SubheaderTypography = size === 'm' ? Text : Subhead;
@@ -39,7 +39,7 @@ import styles from './Banner.module.css';
     }, actions)));
     return /*#__PURE__*/ React.createElement("section", {
         ...restProps,
-        className: classNames(styles['Banner'], platform === Platform.IOS && styles['Banner--ios'], mode === 'image' && styles['Banner--mode-image'], {
+        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),

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 * @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  ...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        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","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":"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"}
+{"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"}

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

@@ -1,8 +1,13 @@
 .Banner {
   isolation: isolate;
+  color: var(--vkui--color_text_primary);
+}
+
+/* TODO [>=6]: удалить или прийти к padding*/
+
+.Banner--withPadding {
   margin: 12px 0;
   padding: 0 var(--vkui--size_base_padding_horizontal--regular);
-  color: var(--vkui--color_text_primary);
 }
 
 .Banner__in {

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

@@ -26,13 +26,13 @@ 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 })=>{
+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 slidesStore = React.useRef({});
     const layoutState = React.useRef(LAYOUT_DEFAULT_STATE);
     const [shiftState, setShiftState] = React.useState(SHIFT_DEFAULT_STATE);
     const rootRef = useExternRef(getRootRef);
     const viewportRef = useExternRef(getRef);
-    const { window  } = useDOM();
+    const { window } = useDOM();
     const hasPointer = useAdaptivityHasPointer();
     const isCenterWithCustomWidth = slideWidth === 'custom' && align === 'center';
     const validateIndent = (value)=>{
@@ -53,7 +53,7 @@ export const BaseGallery = ({ bullets =false , getRootRef , children , slideWidt
         }
         const targetSlide = layoutState.current.slides?.length ? layoutState.current.slides[targetIndex] : null;
         if (targetSlide) {
-            const { coordX , width  } = targetSlide;
+            const { coordX, width } = targetSlide;
             if (isCenterWithCustomWidth) {
                 const viewportWidth = layoutState.current.viewportOffsetWidth ?? 0;
                 return viewportWidth / 2 - coordX - width / 2;