@vkontakte/vkui 7.2.1 → 7.3.1

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/AppRootPortal.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useColorScheme } from '../../hooks/useColorScheme';\nimport { createPortal } from '../../lib/createPortal';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport type { HasChildren } from '../../types';\nimport { ColorSchemeProvider } from '../ColorSchemeProvider/ColorSchemeProvider';\nimport { AppRootContext, type AppRootContextInterface } from './AppRootContext';\nimport { AppRootStyleContainer } from './AppRootStyleContainer/AppRootStyleContainer';\n\nexport interface AppRootPortalProps extends HasChildren {\n  /**\n   * - При передаче `true` в качестве портала будет использован `portalRoot`\n   * из контекста `AppRoot` если он передан в `AppRoot`, иначе `document.body`.\n   * - При передаче элемента будут игнорироваться `portalRoot` и `disablePortal` из контекста `AppRoot`.\n   *\n   * По умолчанию в качестве портала будет использован `document.body`\n   */\n  usePortal?: boolean | HTMLElement | React.RefObject<HTMLElement | null> | null;\n  className?: string;\n}\n\nexport const AppRootPortal = ({\n  children,\n  usePortal,\n  className,\n}: AppRootPortalProps): React.ReactNode => {\n  const { mode, disablePortal: disableCreatePortalInGlobalPortalRoot } =\n    React.useContext(AppRootContext);\n  const colorScheme = useColorScheme();\n\n  const canUsePortal = shouldUsePortal(\n    usePortal,\n    mode,\n    Boolean(disableCreatePortalInGlobalPortalRoot),\n  );\n\n  const portalContainer = usePortalContainer(usePortal);\n\n  if (canUsePortal && portalContainer) {\n    return createPortal(\n      <ColorSchemeProvider value={colorScheme}>\n        <AppRootStyleContainer className={className}>{children}</AppRootStyleContainer>\n      </ColorSchemeProvider>,\n      portalContainer,\n    );\n  }\n\n  return children;\n};\n\nfunction shouldUsePortal(\n  usePortal: AppRootPortalProps['usePortal'],\n  mode: AppRootContextInterface['mode'],\n  disableCreatePortalInGlobalPortalRoot: boolean,\n) {\n  if (usePortal === undefined) {\n    return disableCreatePortalInGlobalPortalRoot === false && mode !== 'full';\n  }\n\n  if (typeof usePortal !== 'boolean') {\n    return true;\n  }\n\n  return disableCreatePortalInGlobalPortalRoot === false && usePortal === true;\n}\n\nfunction usePortalContainer(usePortal: AppRootPortalProps['usePortal']): HTMLElement | null {\n  const { portalRoot: portalRootFromContext } = React.useContext(AppRootContext);\n\n  const { document } = useDOM();\n\n  if (usePortal && typeof usePortal !== 'boolean') {\n    return isRefObject(usePortal) ? usePortal.current : usePortal;\n  }\n\n  const resolvedPortalFromContext = isRefObject(portalRootFromContext)\n    ? portalRootFromContext.current\n    : portalRootFromContext;\n  // если portalRoot не передали через AppRoot, то мы используем body\n  // мы можем использовать body как портал,\n  // так как все стили передаются вместе с AppRootStyleContainer\n  const portalRoot = resolvedPortalFromContext || document?.body || null;\n  return portalRoot;\n}\n"],"names":["React","useColorScheme","createPortal","useDOM","isRefObject","ColorSchemeProvider","AppRootContext","AppRootStyleContainer","AppRootPortal","children","usePortal","className","mode","disablePortal","disableCreatePortalInGlobalPortalRoot","useContext","colorScheme","canUsePortal","shouldUsePortal","Boolean","portalContainer","usePortalContainer","value","undefined","portalRoot","portalRootFromContext","document","current","resolvedPortalFromContext","body"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,gCAA6B;AAC5D,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,MAAM,QAAQ,mBAAgB;AACvC,SAASC,WAAW,QAAQ,2BAAwB;AAEpD,SAASC,mBAAmB,QAAQ,gDAA6C;AACjF,SAASC,cAAc,QAAsC,sBAAmB;AAChF,SAASC,qBAAqB,QAAQ,mDAAgD;AActF,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,QAAQ,EACRC,SAAS,EACTC,SAAS,EACU;IACnB,MAAM,EAAEC,IAAI,EAAEC,eAAeC,qCAAqC,EAAE,GAClEd,MAAMe,UAAU,CAACT;IACnB,MAAMU,cAAcf;IAEpB,MAAMgB,eAAeC,gBACnBR,WACAE,MACAO,QAAQL;IAGV,MAAMM,kBAAkBC,mBAAmBX;IAE3C,IAAIO,gBAAgBG,iBAAiB;QACnC,OAAOlB,2BACL,KAACG;YAAoBiB,OAAON;sBAC1B,cAAA,KAACT;gBAAsBI,WAAWA;0BAAYF;;YAEhDW;IAEJ;IAEA,OAAOX;AACT,EAAE;AAEF,SAASS,gBACPR,SAA0C,EAC1CE,IAAqC,EACrCE,qCAA8C;IAE9C,IAAIJ,cAAca,WAAW;QAC3B,OAAOT,0CAA0C,SAASF,SAAS;IACrE;IAEA,IAAI,OAAOF,cAAc,WAAW;QAClC,OAAO;IACT;IAEA,OAAOI,0CAA0C,SAASJ,cAAc;AAC1E;AAEA,SAASW,mBAAmBX,SAA0C;IACpE,MAAM,EAAEc,YAAYC,qBAAqB,EAAE,GAAGzB,MAAMe,UAAU,CAACT;IAE/D,MAAM,EAAEoB,QAAQ,EAAE,GAAGvB;IAErB,IAAIO,aAAa,OAAOA,cAAc,WAAW;QAC/C,OAAON,YAAYM,aAAaA,UAAUiB,OAAO,GAAGjB;IACtD;IAEA,MAAMkB,4BAA4BxB,YAAYqB,yBAC1CA,sBAAsBE,OAAO,GAC7BF;IACJ,mEAAmE;IACnE,yCAAyC;IACzC,8DAA8D;IAC9D,MAAMD,aAAaI,6BAA6BF,UAAUG,QAAQ;IAClE,OAAOL;AACT"}
+{"version":3,"sources":["../../../../src/components/AppRoot/AppRootPortal.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useColorScheme } from '../../hooks/useColorScheme';\nimport { createPortal } from '../../lib/createPortal';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport type { HasChildren } from '../../types';\nimport { ColorSchemeProvider } from '../ColorSchemeProvider/ColorSchemeProvider';\nimport { AppRootContext, type AppRootContextInterface } from './AppRootContext';\nimport { AppRootStyleContainer } from './AppRootStyleContainer/AppRootStyleContainer';\n\nexport interface AppRootPortalProps extends HasChildren {\n  /**\n   * Настройка портала для рендеринга компонента.\n   *\n   * `true` - использует `portalRoot` из контекста `AppRoot` (если доступен) или `document.body`;\n   * `false` - отключает использование портала;\n   * `HTMLElement` - указывает конкретный DOM-элемент для использования в качестве портала;\n   * `React.RefObject<HTMLElement | null>` - ссылка на DOM-элемент для использования в качестве портала;\n   * `null` - эквивалентно `false`, отключает использование портала.\n   *\n   * @default true (использует `document.body` как портал по умолчанию)\n   */\n  usePortal?: boolean | HTMLElement | React.RefObject<HTMLElement | null> | null;\n  /**\n   * `className` для контейнера портала.\n   */\n  className?: string;\n}\n\nexport const AppRootPortal = ({\n  children,\n  usePortal,\n  className,\n}: AppRootPortalProps): React.ReactNode => {\n  const { mode, disablePortal: disableCreatePortalInGlobalPortalRoot } =\n    React.useContext(AppRootContext);\n  const colorScheme = useColorScheme();\n\n  const canUsePortal = shouldUsePortal(\n    usePortal,\n    mode,\n    Boolean(disableCreatePortalInGlobalPortalRoot),\n  );\n\n  const portalContainer = usePortalContainer(usePortal);\n\n  if (canUsePortal && portalContainer) {\n    return createPortal(\n      <ColorSchemeProvider value={colorScheme}>\n        <AppRootStyleContainer className={className}>{children}</AppRootStyleContainer>\n      </ColorSchemeProvider>,\n      portalContainer,\n    );\n  }\n\n  return children;\n};\n\nfunction shouldUsePortal(\n  usePortal: AppRootPortalProps['usePortal'],\n  mode: AppRootContextInterface['mode'],\n  disableCreatePortalInGlobalPortalRoot: boolean,\n) {\n  if (usePortal === undefined) {\n    return disableCreatePortalInGlobalPortalRoot === false && mode !== 'full';\n  }\n\n  if (typeof usePortal !== 'boolean') {\n    return true;\n  }\n\n  return disableCreatePortalInGlobalPortalRoot === false && usePortal === true;\n}\n\nfunction usePortalContainer(usePortal: AppRootPortalProps['usePortal']): HTMLElement | null {\n  const { portalRoot: portalRootFromContext } = React.useContext(AppRootContext);\n\n  const { document } = useDOM();\n\n  if (usePortal && typeof usePortal !== 'boolean') {\n    return isRefObject(usePortal) ? usePortal.current : usePortal;\n  }\n\n  const resolvedPortalFromContext = isRefObject(portalRootFromContext)\n    ? portalRootFromContext.current\n    : portalRootFromContext;\n  // если portalRoot не передали через AppRoot, то мы используем body\n  // мы можем использовать body как портал,\n  // так как все стили передаются вместе с AppRootStyleContainer\n  const portalRoot = resolvedPortalFromContext || document?.body || null;\n  return portalRoot;\n}\n"],"names":["React","useColorScheme","createPortal","useDOM","isRefObject","ColorSchemeProvider","AppRootContext","AppRootStyleContainer","AppRootPortal","children","usePortal","className","mode","disablePortal","disableCreatePortalInGlobalPortalRoot","useContext","colorScheme","canUsePortal","shouldUsePortal","Boolean","portalContainer","usePortalContainer","value","undefined","portalRoot","portalRootFromContext","document","current","resolvedPortalFromContext","body"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,gCAA6B;AAC5D,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,MAAM,QAAQ,mBAAgB;AACvC,SAASC,WAAW,QAAQ,2BAAwB;AAEpD,SAASC,mBAAmB,QAAQ,gDAA6C;AACjF,SAASC,cAAc,QAAsC,sBAAmB;AAChF,SAASC,qBAAqB,QAAQ,mDAAgD;AAqBtF,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,QAAQ,EACRC,SAAS,EACTC,SAAS,EACU;IACnB,MAAM,EAAEC,IAAI,EAAEC,eAAeC,qCAAqC,EAAE,GAClEd,MAAMe,UAAU,CAACT;IACnB,MAAMU,cAAcf;IAEpB,MAAMgB,eAAeC,gBACnBR,WACAE,MACAO,QAAQL;IAGV,MAAMM,kBAAkBC,mBAAmBX;IAE3C,IAAIO,gBAAgBG,iBAAiB;QACnC,OAAOlB,2BACL,KAACG;YAAoBiB,OAAON;sBAC1B,cAAA,KAACT;gBAAsBI,WAAWA;0BAAYF;;YAEhDW;IAEJ;IAEA,OAAOX;AACT,EAAE;AAEF,SAASS,gBACPR,SAA0C,EAC1CE,IAAqC,EACrCE,qCAA8C;IAE9C,IAAIJ,cAAca,WAAW;QAC3B,OAAOT,0CAA0C,SAASF,SAAS;IACrE;IAEA,IAAI,OAAOF,cAAc,WAAW;QAClC,OAAO;IACT;IAEA,OAAOI,0CAA0C,SAASJ,cAAc;AAC1E;AAEA,SAASW,mBAAmBX,SAA0C;IACpE,MAAM,EAAEc,YAAYC,qBAAqB,EAAE,GAAGzB,MAAMe,UAAU,CAACT;IAE/D,MAAM,EAAEoB,QAAQ,EAAE,GAAGvB;IAErB,IAAIO,aAAa,OAAOA,cAAc,WAAW;QAC/C,OAAON,YAAYM,aAAaA,UAAUiB,OAAO,GAAGjB;IACtD;IAEA,MAAMkB,4BAA4BxB,YAAYqB,yBAC1CA,sBAAsBE,OAAO,GAC7BF;IACJ,mEAAmE;IACnE,yCAAyC;IACzC,8DAA8D;IAC9D,MAAMD,aAAaI,6BAA6BF,UAAUG,QAAQ;IAClE,OAAOL;AACT"}

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

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
+/* eslint-disable jsdoc/require-jsdoc */ import * as React from "react";
 import { noop } from "@vkontakte/vkjs";
 import { clamp } from "../../helpers/math.js";
 import { useDOM } from "../../lib/dom.js";
@@ -34,7 +34,7 @@ export const ScrollContext = /*#__PURE__*/ React.createContext({
 export const useScroll = ()=>React.useContext(ScrollContext);
 /**
  * Управляет блокировкой окна в зависимости от внутреннего счетчика.
- * Если счетчик больше нуля, требуется заблокировать прокрутку
+ * Если счетчик больше нуля, требуется заблокировать прокрутку.
  */ function useScrollLockController(enableScrollLock, disableScrollLock) {
     const countRef = React.useRef(0);
     const updateScrollLock = React.useCallback(()=>{
@@ -297,9 +297,9 @@ export const ElementScrollController = ({ elRef, children })=>{
     });
 };
 /**
- * Блокирует прокрутку окна
+ * Блокирует прокрутку окна.
  *
- * @param enabled - если false то не будет блокировать
+ * @param enabled - Если false то не будет блокировать.
  */ export const useScrollLock = (enabled = true)=>{
     const { incrementScrollLockCounter, decrementScrollLockCounter } = useScroll();
     React.useEffect(()=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/ScrollContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useDOM } from '../../lib/dom';\nimport type { HasChildren } from '../../types';\n\nconst clearDisableScrollStyle = (node: HTMLElement) => {\n  Object.assign(node.style, {\n    position: '',\n    top: '',\n    left: '',\n    right: '',\n    overscrollBehavior: '',\n    overflowY: '',\n    overflowX: '',\n  });\n};\n\nconst getPageYOffsetWithoutKeyboardHeight = (window: Window, scrollTop: number) => {\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 scrollTop - diffOfClientHeightAndViewportHeight;\n};\n\nexport type GetScrollOptions = {\n  compensateKeyboardHeight?: boolean;\n};\n\nexport interface ScrollContextInterface {\n  getScroll: (this: void, options?: GetScrollOptions) => { x: number; y: number };\n  scrollTo: (this: void, x?: number, y?: number) => void;\n  /**\n   * Увеличивает счетчик блокировки прокрутки\n   */\n  incrementScrollLockCounter: (this: void) => void;\n  /**\n   * Уменьшает счетчик блокировки прокрутки\n   */\n  decrementScrollLockCounter: (this: void) => void;\n  beforeScrollLockFnSetRef?: React.RefObject<Set<() => void>>;\n}\n\nexport const ScrollContext: React.Context<ScrollContextInterface> =\n  React.createContext<ScrollContextInterface>({\n    getScroll: () => ({ x: 0, y: 0 }),\n    scrollTo: noop,\n    incrementScrollLockCounter: noop,\n    decrementScrollLockCounter: noop,\n  });\n\nexport const useScroll = (): ScrollContextInterface => React.useContext(ScrollContext);\n\n/**\n * Управляет блокировкой окна в зависимости от внутреннего счетчика.\n * Если счетчик больше нуля, требуется заблокировать прокрутку\n */\nfunction useScrollLockController(enableScrollLock: () => void, disableScrollLock: () => void) {\n  const countRef = React.useRef(0);\n\n  const updateScrollLock = React.useCallback(() => {\n    if (countRef.current > 0) {\n      enableScrollLock();\n    } else {\n      disableScrollLock();\n    }\n  }, [enableScrollLock, disableScrollLock]);\n\n  const incrementScrollLockCounter = React.useCallback(() => {\n    countRef.current += 1;\n    updateScrollLock();\n  }, [updateScrollLock]);\n\n  const decrementScrollLockCounter = React.useCallback(() => {\n    countRef.current -= 1;\n    updateScrollLock();\n  }, [updateScrollLock]);\n\n  return [incrementScrollLockCounter, decrementScrollLockCounter];\n}\n\nexport function useManualScroll(): Pick<ScrollContextInterface, 'scrollTo' | 'getScroll'> {\n  const { scrollTo, getScroll } = React.useContext(ScrollContext);\n  return React.useMemo(\n    () => ({\n      scrollTo,\n      getScroll,\n    }),\n    [getScroll, scrollTo],\n  );\n}\n\nexport interface ScrollControllerProps extends HasChildren {\n  elRef: React.RefObject<HTMLElement | null>;\n}\n\nconst _scrollTo = ({\n  x,\n  y,\n  scrollWidth,\n  clientWidth,\n  scrollHeight,\n  clientHeight,\n  scrollLockEnabled,\n  lockedElement,\n  elementToScroll,\n}: {\n  x: number;\n  y: number;\n  scrollWidth: number;\n  clientWidth: number;\n  scrollHeight: number;\n  clientHeight: number;\n  scrollLockEnabled: boolean;\n  lockedElement: HTMLElement;\n  elementToScroll: Window | HTMLElement;\n}) => {\n  // Some iOS versions do not normalize scroll — do it manually.\n  const left = x ? clamp(x, 0, scrollWidth - clientWidth) : 0;\n  const top = y ? clamp(y, 0, scrollHeight - clientHeight) : 0;\n\n  if (scrollLockEnabled) {\n    Object.assign(lockedElement.style, {\n      left: `-${left}px`,\n      top: `-${top}px`,\n    });\n  } else {\n    elementToScroll.scrollTo({\n      left,\n      top,\n    });\n  }\n};\n\nconst _getScroll = ({\n  xOffset,\n  yOffset,\n  element,\n  scrollLockEnabled,\n  customCalcY = (v) => v,\n}: {\n  xOffset: number;\n  yOffset: number;\n  element: HTMLElement;\n  scrollLockEnabled: boolean;\n  customCalcY?: (scrollTop: number) => number;\n}) => {\n  const elementStyles = element.style;\n  const [scrollLeft, scrollTop] = scrollLockEnabled\n    ? [-parseFloat(elementStyles.left || '0'), -parseFloat(elementStyles.top || '0')]\n    : [xOffset, yOffset];\n  return {\n    x: scrollLeft,\n    y: customCalcY(scrollTop),\n  };\n};\n\nexport const GlobalScrollController = ({ children }: ScrollControllerProps): React.ReactNode => {\n  const { window, document } = useDOM();\n  const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());\n  const scrollLockEnabledRef = React.useRef(false);\n\n  const getScroll = React.useCallback<ScrollContextInterface['getScroll']>(\n    (options = { compensateKeyboardHeight: true }) => {\n      if (!window || !document) {\n        return { x: 0, y: 0 };\n      }\n      return _getScroll({\n        xOffset: window.pageXOffset,\n        yOffset: window.pageYOffset,\n        element: document.documentElement,\n        scrollLockEnabled: scrollLockEnabledRef.current,\n        customCalcY: (scrollTop) =>\n          options.compensateKeyboardHeight\n            ? getPageYOffsetWithoutKeyboardHeight(window, scrollTop)\n            : scrollTop,\n      });\n    },\n    [document, window],\n  );\n  const scrollTo = React.useCallback<ScrollContextInterface['scrollTo']>(\n    (x = 0, y = 0) => {\n      if (!window || !document) {\n        return;\n      }\n      _scrollTo({\n        x,\n        y,\n\n        scrollWidth: document.body.scrollWidth,\n        clientWidth: window.innerWidth,\n\n        scrollHeight: document.body.scrollHeight,\n        clientHeight: window.innerHeight,\n\n        scrollLockEnabled: scrollLockEnabledRef.current,\n        lockedElement: document.documentElement,\n        elementToScroll: window,\n      });\n    },\n    [document, window],\n  );\n\n  const enableScrollLock = React.useCallback(() => {\n    beforeScrollLockFnSetRef.current.forEach((fn) => {\n      fn();\n    });\n    const { x: scrollX, y: scrollY } = getScroll({ compensateKeyboardHeight: false });\n    const overflowY = window!.innerWidth > document!.documentElement.clientWidth ? 'scroll' : '';\n    const overflowX = window!.innerHeight > document!.documentElement.clientHeight ? 'scroll' : '';\n\n    Object.assign(document!.documentElement.style, {\n      position: 'fixed',\n      right: '0',\n      overscrollBehavior: 'none',\n      overflowY,\n      overflowX,\n    });\n\n    scrollLockEnabledRef.current = true;\n\n    scrollTo(scrollX, scrollY);\n  }, [document, getScroll, scrollTo, window]);\n\n  const disableScrollLock = React.useCallback(() => {\n    const scrollData = getScroll({ compensateKeyboardHeight: false });\n    clearDisableScrollStyle(document!.documentElement);\n    scrollLockEnabledRef.current = false;\n\n    scrollTo(scrollData.x, scrollData.y);\n  }, [document, getScroll, scrollTo]);\n\n  const [incrementScrollLockCounter, decrementScrollLockCounter] = useScrollLockController(\n    enableScrollLock,\n    disableScrollLock,\n  );\n\n  const scrollController = React.useMemo<ScrollContextInterface>(\n    () => ({\n      getScroll,\n      scrollTo,\n      incrementScrollLockCounter,\n      decrementScrollLockCounter,\n      beforeScrollLockFnSetRef: beforeScrollLockFnSetRef,\n    }),\n    [getScroll, scrollTo, incrementScrollLockCounter, decrementScrollLockCounter],\n  );\n\n  return <ScrollContext.Provider value={scrollController}>{children}</ScrollContext.Provider>;\n};\n\nexport const ElementScrollController = ({\n  elRef,\n  children,\n}: ScrollControllerProps): React.ReactNode => {\n  const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());\n  const scrollLockEnabledRef = React.useRef(false);\n\n  const getScroll = React.useCallback<ScrollContextInterface['getScroll']>(() => {\n    const element = elRef.current;\n    if (!element) {\n      return { x: 0, y: 0 };\n    }\n    return _getScroll({\n      xOffset: element.scrollLeft,\n      yOffset: element.scrollTop,\n      element: element,\n      scrollLockEnabled: scrollLockEnabledRef.current,\n    });\n  }, [elRef]);\n\n  const scrollTo = React.useCallback<ScrollContextInterface['scrollTo']>(\n    (x = 0, y = 0) => {\n      const el = elRef.current;\n      if (!el) {\n        return;\n      }\n      _scrollTo({\n        x,\n        y,\n\n        scrollWidth: el.scrollWidth,\n        clientWidth: el.clientWidth,\n\n        scrollHeight: el.scrollHeight,\n        clientHeight: el.clientHeight,\n\n        scrollLockEnabled: scrollLockEnabledRef.current,\n        lockedElement: el,\n        elementToScroll: el,\n      });\n    },\n    [elRef],\n  );\n\n  const enableScrollLock = React.useCallback(() => {\n    const el = elRef.current;\n    if (!el) {\n      return;\n    }\n    beforeScrollLockFnSetRef.current.forEach((fn) => {\n      fn();\n    });\n\n    const { x: scrollX, y: scrollY } = getScroll();\n\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      right: '0',\n      overflowY,\n      overflowX,\n    });\n    scrollLockEnabledRef.current = true;\n\n    scrollTo(scrollX, scrollY);\n  }, [elRef, getScroll, scrollTo]);\n\n  const disableScrollLock = React.useCallback(() => {\n    const el = elRef.current;\n    if (!el) {\n      return;\n    }\n\n    const scrollData = getScroll();\n    clearDisableScrollStyle(el);\n    scrollLockEnabledRef.current = false;\n\n    scrollTo(scrollData.x, scrollData.y);\n  }, [elRef, getScroll, scrollTo]);\n\n  const [incrementScrollLockCounter, decrementScrollLockCounter] = useScrollLockController(\n    enableScrollLock,\n    disableScrollLock,\n  );\n\n  const scrollController = React.useMemo<ScrollContextInterface>(\n    () => ({\n      getScroll,\n      scrollTo,\n      incrementScrollLockCounter,\n      decrementScrollLockCounter,\n      beforeScrollLockFnSetRef,\n    }),\n    [getScroll, scrollTo, incrementScrollLockCounter, decrementScrollLockCounter],\n  );\n\n  return <ScrollContext.Provider value={scrollController}>{children}</ScrollContext.Provider>;\n};\n\n/**\n * Блокирует прокрутку окна\n *\n * @param enabled - если false то не будет блокировать\n */\nexport const useScrollLock = (enabled = true): void => {\n  const { incrementScrollLockCounter, decrementScrollLockCounter } = useScroll();\n\n  React.useEffect(() => {\n    if (enabled) {\n      incrementScrollLockCounter();\n      return decrementScrollLockCounter;\n    }\n\n    return noop;\n  }, [enabled, incrementScrollLockCounter, decrementScrollLockCounter]);\n};\n"],"names":["React","noop","clamp","useDOM","clearDisableScrollStyle","node","Object","assign","style","position","top","left","right","overscrollBehavior","overflowY","overflowX","getPageYOffsetWithoutKeyboardHeight","window","scrollTop","diffOfClientHeightAndViewportHeight","document","documentElement","clientHeight","innerHeight","ScrollContext","createContext","getScroll","x","y","scrollTo","incrementScrollLockCounter","decrementScrollLockCounter","useScroll","useContext","useScrollLockController","enableScrollLock","disableScrollLock","countRef","useRef","updateScrollLock","useCallback","current","useManualScroll","useMemo","_scrollTo","scrollWidth","clientWidth","scrollHeight","scrollLockEnabled","lockedElement","elementToScroll","_getScroll","xOffset","yOffset","element","customCalcY","v","elementStyles","scrollLeft","parseFloat","GlobalScrollController","children","beforeScrollLockFnSetRef","Set","scrollLockEnabledRef","options","compensateKeyboardHeight","pageXOffset","pageYOffset","body","innerWidth","forEach","fn","scrollX","scrollY","scrollData","scrollController","Provider","value","ElementScrollController","elRef","el","useScrollLock","enabled","useEffect"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/AppRoot/ScrollContext.tsx"],"sourcesContent":["'use client';\n/* eslint-disable jsdoc/require-jsdoc */\n\nimport * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useDOM } from '../../lib/dom';\nimport type { HasChildren } from '../../types';\n\nconst clearDisableScrollStyle = (node: HTMLElement) => {\n  Object.assign(node.style, {\n    position: '',\n    top: '',\n    left: '',\n    right: '',\n    overscrollBehavior: '',\n    overflowY: '',\n    overflowX: '',\n  });\n};\n\nconst getPageYOffsetWithoutKeyboardHeight = (window: Window, scrollTop: number) => {\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 scrollTop - diffOfClientHeightAndViewportHeight;\n};\n\nexport type GetScrollOptions = {\n  compensateKeyboardHeight?: boolean;\n};\n\nexport interface ScrollContextInterface {\n  getScroll: (this: void, options?: GetScrollOptions) => { x: number; y: number };\n  scrollTo: (this: void, x?: number, y?: number) => void;\n  /**\n   * Увеличивает счетчик блокировки прокрутки.\n   */\n  incrementScrollLockCounter: (this: void) => void;\n  /**\n   * Уменьшает счетчик блокировки прокрутки.\n   */\n  decrementScrollLockCounter: (this: void) => void;\n  beforeScrollLockFnSetRef?: React.RefObject<Set<() => void>>;\n}\n\nexport const ScrollContext: React.Context<ScrollContextInterface> =\n  React.createContext<ScrollContextInterface>({\n    getScroll: () => ({ x: 0, y: 0 }),\n    scrollTo: noop,\n    incrementScrollLockCounter: noop,\n    decrementScrollLockCounter: noop,\n  });\n\nexport const useScroll = (): ScrollContextInterface => React.useContext(ScrollContext);\n\n/**\n * Управляет блокировкой окна в зависимости от внутреннего счетчика.\n * Если счетчик больше нуля, требуется заблокировать прокрутку.\n */\nfunction useScrollLockController(enableScrollLock: () => void, disableScrollLock: () => void) {\n  const countRef = React.useRef(0);\n\n  const updateScrollLock = React.useCallback(() => {\n    if (countRef.current > 0) {\n      enableScrollLock();\n    } else {\n      disableScrollLock();\n    }\n  }, [enableScrollLock, disableScrollLock]);\n\n  const incrementScrollLockCounter = React.useCallback(() => {\n    countRef.current += 1;\n    updateScrollLock();\n  }, [updateScrollLock]);\n\n  const decrementScrollLockCounter = React.useCallback(() => {\n    countRef.current -= 1;\n    updateScrollLock();\n  }, [updateScrollLock]);\n\n  return [incrementScrollLockCounter, decrementScrollLockCounter];\n}\n\nexport function useManualScroll(): Pick<ScrollContextInterface, 'scrollTo' | 'getScroll'> {\n  const { scrollTo, getScroll } = React.useContext(ScrollContext);\n  return React.useMemo(\n    () => ({\n      scrollTo,\n      getScroll,\n    }),\n    [getScroll, scrollTo],\n  );\n}\n\nexport interface ScrollControllerProps extends HasChildren {\n  elRef: React.RefObject<HTMLElement | null>;\n}\n\nconst _scrollTo = ({\n  x,\n  y,\n  scrollWidth,\n  clientWidth,\n  scrollHeight,\n  clientHeight,\n  scrollLockEnabled,\n  lockedElement,\n  elementToScroll,\n}: {\n  x: number;\n  y: number;\n  scrollWidth: number;\n  clientWidth: number;\n  scrollHeight: number;\n  clientHeight: number;\n  scrollLockEnabled: boolean;\n  lockedElement: HTMLElement;\n  elementToScroll: Window | HTMLElement;\n}) => {\n  // Some iOS versions do not normalize scroll — do it manually.\n  const left = x ? clamp(x, 0, scrollWidth - clientWidth) : 0;\n  const top = y ? clamp(y, 0, scrollHeight - clientHeight) : 0;\n\n  if (scrollLockEnabled) {\n    Object.assign(lockedElement.style, {\n      left: `-${left}px`,\n      top: `-${top}px`,\n    });\n  } else {\n    elementToScroll.scrollTo({\n      left,\n      top,\n    });\n  }\n};\n\nconst _getScroll = ({\n  xOffset,\n  yOffset,\n  element,\n  scrollLockEnabled,\n  customCalcY = (v) => v,\n}: {\n  xOffset: number;\n  yOffset: number;\n  element: HTMLElement;\n  scrollLockEnabled: boolean;\n  customCalcY?: (scrollTop: number) => number;\n}) => {\n  const elementStyles = element.style;\n  const [scrollLeft, scrollTop] = scrollLockEnabled\n    ? [-parseFloat(elementStyles.left || '0'), -parseFloat(elementStyles.top || '0')]\n    : [xOffset, yOffset];\n  return {\n    x: scrollLeft,\n    y: customCalcY(scrollTop),\n  };\n};\n\nexport const GlobalScrollController = ({ children }: ScrollControllerProps): React.ReactNode => {\n  const { window, document } = useDOM();\n  const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());\n  const scrollLockEnabledRef = React.useRef(false);\n\n  const getScroll = React.useCallback<ScrollContextInterface['getScroll']>(\n    (options = { compensateKeyboardHeight: true }) => {\n      if (!window || !document) {\n        return { x: 0, y: 0 };\n      }\n      return _getScroll({\n        xOffset: window.pageXOffset,\n        yOffset: window.pageYOffset,\n        element: document.documentElement,\n        scrollLockEnabled: scrollLockEnabledRef.current,\n        customCalcY: (scrollTop) =>\n          options.compensateKeyboardHeight\n            ? getPageYOffsetWithoutKeyboardHeight(window, scrollTop)\n            : scrollTop,\n      });\n    },\n    [document, window],\n  );\n  const scrollTo = React.useCallback<ScrollContextInterface['scrollTo']>(\n    (x = 0, y = 0) => {\n      if (!window || !document) {\n        return;\n      }\n      _scrollTo({\n        x,\n        y,\n\n        scrollWidth: document.body.scrollWidth,\n        clientWidth: window.innerWidth,\n\n        scrollHeight: document.body.scrollHeight,\n        clientHeight: window.innerHeight,\n\n        scrollLockEnabled: scrollLockEnabledRef.current,\n        lockedElement: document.documentElement,\n        elementToScroll: window,\n      });\n    },\n    [document, window],\n  );\n\n  const enableScrollLock = React.useCallback(() => {\n    beforeScrollLockFnSetRef.current.forEach((fn) => {\n      fn();\n    });\n    const { x: scrollX, y: scrollY } = getScroll({ compensateKeyboardHeight: false });\n    const overflowY = window!.innerWidth > document!.documentElement.clientWidth ? 'scroll' : '';\n    const overflowX = window!.innerHeight > document!.documentElement.clientHeight ? 'scroll' : '';\n\n    Object.assign(document!.documentElement.style, {\n      position: 'fixed',\n      right: '0',\n      overscrollBehavior: 'none',\n      overflowY,\n      overflowX,\n    });\n\n    scrollLockEnabledRef.current = true;\n\n    scrollTo(scrollX, scrollY);\n  }, [document, getScroll, scrollTo, window]);\n\n  const disableScrollLock = React.useCallback(() => {\n    const scrollData = getScroll({ compensateKeyboardHeight: false });\n    clearDisableScrollStyle(document!.documentElement);\n    scrollLockEnabledRef.current = false;\n\n    scrollTo(scrollData.x, scrollData.y);\n  }, [document, getScroll, scrollTo]);\n\n  const [incrementScrollLockCounter, decrementScrollLockCounter] = useScrollLockController(\n    enableScrollLock,\n    disableScrollLock,\n  );\n\n  const scrollController = React.useMemo<ScrollContextInterface>(\n    () => ({\n      getScroll,\n      scrollTo,\n      incrementScrollLockCounter,\n      decrementScrollLockCounter,\n      beforeScrollLockFnSetRef: beforeScrollLockFnSetRef,\n    }),\n    [getScroll, scrollTo, incrementScrollLockCounter, decrementScrollLockCounter],\n  );\n\n  return <ScrollContext.Provider value={scrollController}>{children}</ScrollContext.Provider>;\n};\n\nexport const ElementScrollController = ({\n  elRef,\n  children,\n}: ScrollControllerProps): React.ReactNode => {\n  const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());\n  const scrollLockEnabledRef = React.useRef(false);\n\n  const getScroll = React.useCallback<ScrollContextInterface['getScroll']>(() => {\n    const element = elRef.current;\n    if (!element) {\n      return { x: 0, y: 0 };\n    }\n    return _getScroll({\n      xOffset: element.scrollLeft,\n      yOffset: element.scrollTop,\n      element: element,\n      scrollLockEnabled: scrollLockEnabledRef.current,\n    });\n  }, [elRef]);\n\n  const scrollTo = React.useCallback<ScrollContextInterface['scrollTo']>(\n    (x = 0, y = 0) => {\n      const el = elRef.current;\n      if (!el) {\n        return;\n      }\n      _scrollTo({\n        x,\n        y,\n\n        scrollWidth: el.scrollWidth,\n        clientWidth: el.clientWidth,\n\n        scrollHeight: el.scrollHeight,\n        clientHeight: el.clientHeight,\n\n        scrollLockEnabled: scrollLockEnabledRef.current,\n        lockedElement: el,\n        elementToScroll: el,\n      });\n    },\n    [elRef],\n  );\n\n  const enableScrollLock = React.useCallback(() => {\n    const el = elRef.current;\n    if (!el) {\n      return;\n    }\n    beforeScrollLockFnSetRef.current.forEach((fn) => {\n      fn();\n    });\n\n    const { x: scrollX, y: scrollY } = getScroll();\n\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      right: '0',\n      overflowY,\n      overflowX,\n    });\n    scrollLockEnabledRef.current = true;\n\n    scrollTo(scrollX, scrollY);\n  }, [elRef, getScroll, scrollTo]);\n\n  const disableScrollLock = React.useCallback(() => {\n    const el = elRef.current;\n    if (!el) {\n      return;\n    }\n\n    const scrollData = getScroll();\n    clearDisableScrollStyle(el);\n    scrollLockEnabledRef.current = false;\n\n    scrollTo(scrollData.x, scrollData.y);\n  }, [elRef, getScroll, scrollTo]);\n\n  const [incrementScrollLockCounter, decrementScrollLockCounter] = useScrollLockController(\n    enableScrollLock,\n    disableScrollLock,\n  );\n\n  const scrollController = React.useMemo<ScrollContextInterface>(\n    () => ({\n      getScroll,\n      scrollTo,\n      incrementScrollLockCounter,\n      decrementScrollLockCounter,\n      beforeScrollLockFnSetRef,\n    }),\n    [getScroll, scrollTo, incrementScrollLockCounter, decrementScrollLockCounter],\n  );\n\n  return <ScrollContext.Provider value={scrollController}>{children}</ScrollContext.Provider>;\n};\n\n/**\n * Блокирует прокрутку окна.\n *\n * @param enabled - Если false то не будет блокировать.\n */\nexport const useScrollLock = (enabled = true): void => {\n  const { incrementScrollLockCounter, decrementScrollLockCounter } = useScroll();\n\n  React.useEffect(() => {\n    if (enabled) {\n      incrementScrollLockCounter();\n      return decrementScrollLockCounter;\n    }\n\n    return noop;\n  }, [enabled, incrementScrollLockCounter, decrementScrollLockCounter]);\n};\n"],"names":["React","noop","clamp","useDOM","clearDisableScrollStyle","node","Object","assign","style","position","top","left","right","overscrollBehavior","overflowY","overflowX","getPageYOffsetWithoutKeyboardHeight","window","scrollTop","diffOfClientHeightAndViewportHeight","document","documentElement","clientHeight","innerHeight","ScrollContext","createContext","getScroll","x","y","scrollTo","incrementScrollLockCounter","decrementScrollLockCounter","useScroll","useContext","useScrollLockController","enableScrollLock","disableScrollLock","countRef","useRef","updateScrollLock","useCallback","current","useManualScroll","useMemo","_scrollTo","scrollWidth","clientWidth","scrollHeight","scrollLockEnabled","lockedElement","elementToScroll","_getScroll","xOffset","yOffset","element","customCalcY","v","elementStyles","scrollLeft","parseFloat","GlobalScrollController","children","beforeScrollLockFnSetRef","Set","scrollLockEnabledRef","options","compensateKeyboardHeight","pageXOffset","pageYOffset","body","innerWidth","forEach","fn","scrollX","scrollY","scrollData","scrollController","Provider","value","ElementScrollController","elRef","el","useScrollLock","enabled","useEffect"],"mappings":"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"}

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

@@ -1,3 +1,3 @@
-export { };
+/* eslint-disable jsdoc/require-jsdoc */ export { };
 
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/types.ts"],"sourcesContent":["export type SafeAreaInsets = {\n  top?: number;\n  right?: number;\n  bottom?: number;\n  left?: number;\n};\n\nexport type AppRootMode = 'partial' | 'embedded' | 'full';\n\nexport type AppRootLayout = 'card' | 'plain';\n\nexport type AppRootScroll = 'global' | 'contain';\n\nexport type AppRootUserSelectMode = 'enabled' | 'enabled-with-pointer' | 'disabled';\n"],"names":[],"mappings":"AAaA,WAAoF"}
+{"version":3,"sources":["../../../../src/components/AppRoot/types.ts"],"sourcesContent":["/* eslint-disable jsdoc/require-jsdoc */\n\nexport type SafeAreaInsets = {\n  top?: number;\n  right?: number;\n  bottom?: number;\n  left?: number;\n};\n\nexport type AppRootMode = 'partial' | 'embedded' | 'full';\n\nexport type AppRootLayout = 'card' | 'plain';\n\nexport type AppRootScroll = 'global' | 'contain';\n\nexport type AppRootUserSelectMode = 'enabled' | 'enabled-with-pointer' | 'disabled';\n"],"names":[],"mappings":"AAAA,sCAAsC,GAetC,WAAoF"}

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 type { CSSCustomProperties } from '../../types';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport styles from './AspectRatio.module.css';\n\nexport interface AspectRatioProps extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'> {\n  className?: string;\n  /**\n   * По умолчанию, вложенный контент будет растягиваться и заполнять весь блок.\n   */\n  mode?: 'stretch' | 'none';\n  /**\n   * Например:\n   * - в виде числа: 16 / 9, 4 / 3, 1920 / 1080,\n   * - в виде css переменной: `var(--css-aspect-ratio-var)`\n   * - в виде сложного выражения: `calc(<какие-то вычисления>)`\n   */\n  ratio: number | string;\n}\n\n/**\n * `AspectRatio` позволяет поддерживать постоянное соотношение ширины и высоты.\n * Его можно использовать для отображения изображений, карт, видео и других медиафайлов.\n\n * @since 5.5.0\n * @see https://vkcom.github.io/VKUI/#/AspectRatio\n */\nexport function AspectRatio({\n  ratio,\n  mode = 'stretch',\n  ...props\n}: AspectRatioProps): React.JSX.Element {\n  const style: React.CSSProperties & CSSCustomProperties = {\n    '--vkui_internal--aspect_ratio': typeof ratio === 'number' ? String(ratio) : ratio,\n  };\n\n  return (\n    <RootComponent\n      baseClassName={classNames(styles.host, mode === 'stretch' && styles.modeStretch)}\n      baseStyle={style}\n      {...props}\n    />\n  );\n}\n"],"names":["React","classNames","RootComponent","styles","AspectRatio","ratio","mode","props","style","String","baseClassName","host","modeStretch","baseStyle"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAiC,oCAAiC;AACxF,OAAOC,YAAY,2BAA2B;AAiB9C;;;;;;CAMC,GACD,OAAO,SAASC,YAAY,EAC1BC,KAAK,EACLC,OAAO,SAAS,EAChB,GAAGC,OACc;IACjB,MAAMC,QAAmD;QACvD,iCAAiC,OAAOH,UAAU,WAAWI,OAAOJ,SAASA;IAC/E;IAEA,qBACE,KAACH;QACCQ,eAAeT,WAAWE,OAAOQ,IAAI,EAAEL,SAAS,aAAaH,OAAOS,WAAW;QAC/EC,WAAWL;QACV,GAAGD,KAAK;;AAGf"}
+{"version":3,"sources":["../../../../src/components/AspectRatio/AspectRatio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { CSSCustomProperties } from '../../types';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport styles from './AspectRatio.module.css';\n\nexport interface AspectRatioProps extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'> {\n  /**\n   * `className` для компонента.\n   */\n  className?: string;\n  /**\n   * По умолчанию, вложенный контент будет растягиваться и заполнять весь блок.\n   */\n  mode?: 'stretch' | 'none';\n  /**\n   * Например:\n   * - в виде числа: 16 / 9, 4 / 3, 1920 / 1080,\n   * - в виде css переменной: `var(--css-aspect-ratio-var)`\n   * - в виде сложного выражения: `calc(<какие-то вычисления>)`.\n   */\n  ratio: number | string;\n}\n\n/**\n * `AspectRatio` позволяет поддерживать постоянное соотношение ширины и высоты.\n * Его можно использовать для отображения изображений, карт, видео и других медиафайлов.\n\n * @since 5.5.0\n * @see https://vkcom.github.io/VKUI/#/AspectRatio\n */\nexport function AspectRatio({\n  ratio,\n  mode = 'stretch',\n  ...props\n}: AspectRatioProps): React.JSX.Element {\n  const style: React.CSSProperties & CSSCustomProperties = {\n    '--vkui_internal--aspect_ratio': typeof ratio === 'number' ? String(ratio) : ratio,\n  };\n\n  return (\n    <RootComponent\n      baseClassName={classNames(styles.host, mode === 'stretch' && styles.modeStretch)}\n      baseStyle={style}\n      {...props}\n    />\n  );\n}\n"],"names":["React","classNames","RootComponent","styles","AspectRatio","ratio","mode","props","style","String","baseClassName","host","modeStretch","baseStyle"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAiC,oCAAiC;AACxF,OAAOC,YAAY,2BAA2B;AAoB9C;;;;;;CAMC,GACD,OAAO,SAASC,YAAY,EAC1BC,KAAK,EACLC,OAAO,SAAS,EAChB,GAAGC,OACc;IACjB,MAAMC,QAAmD;QACvD,iCAAiC,OAAOH,UAAU,WAAWI,OAAOJ,SAASA;IAC/E;IAEA,qBACE,KAACH;QACCQ,eAAeT,WAAWE,OAAOQ,IAAI,EAAEL,SAAS,aAAaH,OAAOS,WAAW;QAC/EC,WAAWL;QACV,GAAGD,KAAK;;AAGf"}

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "@vkontakte/vkjs";
+import { defineComponentDisplayNames } from "../../lib/react/defineComponentDisplayNames.js";
 import { ImageBase } from "../ImageBase/ImageBase.js";
 import { ImageBaseOverlay } from "../ImageBase/ImageBaseOverlay/ImageBaseOverlay.js";
 import { AvatarBadge } from "./AvatarBadge/AvatarBadge.js";
@@ -44,13 +45,14 @@ const gradientStyles = {
         children: children
     });
 };
-Avatar.displayName = 'Avatar';
 Avatar.Badge = AvatarBadge;
-Avatar.Badge.displayName = 'Avatar.Badge';
 Avatar.BadgeWithPreset = AvatarBadgeWithPreset;
-Avatar.BadgeWithPreset.displayName = 'Avatar.BadgeWithPreset';
 Avatar.Overlay = ImageBaseOverlay;
-Avatar.Overlay.displayName = 'Avatar.Overlay';
 Avatar.getInitialsFontSize = getInitialsFontSize;
+if (process.env.NODE_ENV !== 'production') {
+    defineComponentDisplayNames(Avatar.Badge, 'Avatar.Badge');
+    defineComponentDisplayNames(Avatar.BadgeWithPreset, 'Avatar.BadgeWithPreset');
+    defineComponentDisplayNames(Avatar.Overlay, 'Avatar.Overlay');
+}
 
 //# sourceMappingURL=Avatar.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport {\n  ImageBaseOverlay,\n  type ImageBaseOverlayProps,\n} from '../ImageBase/ImageBaseOverlay/ImageBaseOverlay';\nimport { AvatarBadge, type AvatarBadgeProps } from './AvatarBadge/AvatarBadge';\nimport {\n  AvatarBadgeWithPreset,\n  type AvatarBadgeWithPresetProps,\n} from './AvatarBadge/AvatarBadgeWithPreset';\nimport { getInitialsFontSize } from './helpers';\nimport styles from './Avatar.module.css';\n\nexport type {\n  AvatarBadgeProps,\n  AvatarBadgeWithPresetProps,\n  ImageBaseOverlayProps as AvatarOverlayProps,\n};\n\nconst AVATAR_DEFAULT_SIZE = 48;\n\nconst COLORS_NUMBER_TO_TEXT_MAP = {\n  1: 'red',\n  2: 'orange',\n  3: 'yellow',\n  4: 'green',\n  5: 'l-blue',\n  6: 'violet',\n} as const;\n\n/**\n * Градиенты, которые можно использовать в алгоритме поиска градиентов по числовому идентификатору пользователя.\n * @example user.id % 6 + 1\n */\nexport type InitialsAvatarNumberGradients = keyof typeof COLORS_NUMBER_TO_TEXT_MAP;\n\nexport type InitialsAvatarTextGradients =\n  | (typeof COLORS_NUMBER_TO_TEXT_MAP)[InitialsAvatarNumberGradients]\n  | 'blue';\n\nconst gradientStyles = {\n  'red': styles.gradientRed,\n  'orange': styles.gradientOrange,\n  'yellow': styles.gradientYellow,\n  'green': styles.gradientGreen,\n  'blue': styles.gradientBlue,\n  'l-blue': styles.gradientLBlue,\n  'violet': styles.gradientViolet,\n};\n\nexport interface AvatarProps extends Omit<ImageBaseProps, 'widthSize' | 'heightSize'> {\n  /**\n   * Инициалы пользователя.\n   *\n   * > Note: Если аватарка не прогрузится, то пользователь увидит инициалы.\n   *\n   * > ⚠️ Перебивает `fallbackIcon`.\n   */\n  initials?: string;\n  /**\n   * Задаёт градиент для фона.\n   *\n   * Если передано число, то оно будет сконвертировано в строчное представление цвета по следующей схеме:\n   *\n   * 1: 'red'\n   * 2: 'orange'\n   * 3: 'yellow'\n   * 4: 'green'\n   * 5: 'l-blue'\n   * 6: 'violet'\n   *\n   * > Если необходимо задать свой градиент, то используйте значение `\"custom\"` и определите цвет градиента либо через\n   * > свой класс в `className`, либо через `style={{ backgroundImage: \"...\" }}`.\n   */\n  gradientColor?: InitialsAvatarNumberGradients | InitialsAvatarTextGradients | 'custom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Avatar\n */\nexport const Avatar: React.FC<AvatarProps> & {\n  Badge: typeof AvatarBadge;\n  BadgeWithPreset: typeof AvatarBadgeWithPreset;\n  Overlay: typeof ImageBase.Overlay;\n  getInitialsFontSize: typeof getInitialsFontSize;\n} = ({\n  size = AVATAR_DEFAULT_SIZE,\n  className,\n  gradientColor,\n  initials,\n  fallbackIcon: fallbackIconProp,\n  children,\n  ...restProps\n}: AvatarProps) => {\n  const gradientName =\n    typeof gradientColor === 'number' ? COLORS_NUMBER_TO_TEXT_MAP[gradientColor] : gradientColor;\n  const isGradientNotCustom = gradientName && gradientName !== 'custom';\n\n  const fallbackIcon = initials ? (\n    <div\n      className={styles.initials}\n      style={{\n        fontSize: getInitialsFontSize(size),\n      }}\n    >\n      {initials}\n    </div>\n  ) : (\n    fallbackIconProp\n  );\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      fallbackIcon={fallbackIcon}\n      className={classNames(\n        styles.host,\n        gradientName && styles.hasGradient,\n        isGradientNotCustom && gradientStyles[gradientName],\n        className,\n      )}\n    >\n      {children}\n    </ImageBase>\n  );\n};\n\nAvatar.displayName = 'Avatar';\n\nAvatar.Badge = AvatarBadge;\nAvatar.Badge.displayName = 'Avatar.Badge';\n\nAvatar.BadgeWithPreset = AvatarBadgeWithPreset;\nAvatar.BadgeWithPreset.displayName = 'Avatar.BadgeWithPreset';\n\nAvatar.Overlay = ImageBaseOverlay;\nAvatar.Overlay.displayName = 'Avatar.Overlay';\n\nAvatar.getInitialsFontSize = getInitialsFontSize;\n"],"names":["classNames","ImageBase","ImageBaseOverlay","AvatarBadge","AvatarBadgeWithPreset","getInitialsFontSize","styles","AVATAR_DEFAULT_SIZE","COLORS_NUMBER_TO_TEXT_MAP","gradientStyles","gradientRed","gradientOrange","gradientYellow","gradientGreen","gradientBlue","gradientLBlue","gradientViolet","Avatar","size","className","gradientColor","initials","fallbackIcon","fallbackIconProp","children","restProps","gradientName","isGradientNotCustom","div","style","fontSize","host","hasGradient","displayName","Badge","BadgeWithPreset","Overlay"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,QAA6B,4BAAyB;AACxE,SACEC,gBAAgB,QAEX,oDAAiD;AACxD,SAASC,WAAW,QAA+B,+BAA4B;AAC/E,SACEC,qBAAqB,QAEhB,yCAAsC;AAC7C,SAASC,mBAAmB,QAAQ,eAAY;AAChD,OAAOC,YAAY,sBAAsB;AAQzC,MAAMC,sBAAsB;AAE5B,MAAMC,4BAA4B;IAChC,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;AACL;AAYA,MAAMC,iBAAiB;IACrB,OAAOH,OAAOI,WAAW;IACzB,UAAUJ,OAAOK,cAAc;IAC/B,UAAUL,OAAOM,cAAc;IAC/B,SAASN,OAAOO,aAAa;IAC7B,QAAQP,OAAOQ,YAAY;IAC3B,UAAUR,OAAOS,aAAa;IAC9B,UAAUT,OAAOU,cAAc;AACjC;AA6BA;;CAEC,GACD,OAAO,MAAMC,SAKT,CAAC,EACHC,OAAOX,mBAAmB,EAC1BY,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,cAAcC,gBAAgB,EAC9BC,QAAQ,EACR,GAAGC,WACS;IACZ,MAAMC,eACJ,OAAON,kBAAkB,WAAWZ,yBAAyB,CAACY,cAAc,GAAGA;IACjF,MAAMO,sBAAsBD,gBAAgBA,iBAAiB;IAE7D,MAAMJ,eAAeD,yBACnB,KAACO;QACCT,WAAWb,OAAOe,QAAQ;QAC1BQ,OAAO;YACLC,UAAUzB,oBAAoBa;QAChC;kBAECG;SAGHE;IAGF,qBACE,KAACtB;QACE,GAAGwB,SAAS;QACbP,MAAMA;QACNI,cAAcA;QACdH,WAAWnB,WACTM,OAAOyB,IAAI,EACXL,gBAAgBpB,OAAO0B,WAAW,EAClCL,uBAAuBlB,cAAc,CAACiB,aAAa,EACnDP;kBAGDK;;AAGP,EAAE;AAEFP,OAAOgB,WAAW,GAAG;AAErBhB,OAAOiB,KAAK,GAAG/B;AACfc,OAAOiB,KAAK,CAACD,WAAW,GAAG;AAE3BhB,OAAOkB,eAAe,GAAG/B;AACzBa,OAAOkB,eAAe,CAACF,WAAW,GAAG;AAErChB,OAAOmB,OAAO,GAAGlC;AACjBe,OAAOmB,OAAO,CAACH,WAAW,GAAG;AAE7BhB,OAAOZ,mBAAmB,GAAGA"}
+{"version":3,"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport { ImageBase, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport {\n  ImageBaseOverlay,\n  type ImageBaseOverlayProps,\n} from '../ImageBase/ImageBaseOverlay/ImageBaseOverlay';\nimport { AvatarBadge, type AvatarBadgeProps } from './AvatarBadge/AvatarBadge';\nimport {\n  AvatarBadgeWithPreset,\n  type AvatarBadgeWithPresetProps,\n} from './AvatarBadge/AvatarBadgeWithPreset';\nimport { getInitialsFontSize } from './helpers';\nimport styles from './Avatar.module.css';\n\nexport type {\n  AvatarBadgeProps,\n  AvatarBadgeWithPresetProps,\n  ImageBaseOverlayProps as AvatarOverlayProps,\n};\n\nconst AVATAR_DEFAULT_SIZE = 48;\n\nconst COLORS_NUMBER_TO_TEXT_MAP = {\n  1: 'red',\n  2: 'orange',\n  3: 'yellow',\n  4: 'green',\n  5: 'l-blue',\n  6: 'violet',\n} as const;\n\n/**\n * Градиенты, которые можно использовать в алгоритме поиска градиентов по числовому идентификатору пользователя.\n * @example user.id % 6 + 1\n */\nexport type InitialsAvatarNumberGradients = keyof typeof COLORS_NUMBER_TO_TEXT_MAP;\n\nexport type InitialsAvatarTextGradients =\n  | (typeof COLORS_NUMBER_TO_TEXT_MAP)[InitialsAvatarNumberGradients]\n  | 'blue';\n\nconst gradientStyles = {\n  'red': styles.gradientRed,\n  'orange': styles.gradientOrange,\n  'yellow': styles.gradientYellow,\n  'green': styles.gradientGreen,\n  'blue': styles.gradientBlue,\n  'l-blue': styles.gradientLBlue,\n  'violet': styles.gradientViolet,\n};\n\nexport interface AvatarProps extends Omit<ImageBaseProps, 'widthSize' | 'heightSize'> {\n  /**\n   * Инициалы пользователя.\n   *\n   * > Note: Если аватарка не прогрузится, то пользователь увидит инициалы.\n   *\n   * > ⚠️ Перебивает `fallbackIcon`.\n   */\n  initials?: string;\n  /**\n   * Задаёт градиент для фона.\n   *\n   * Если передано число, то оно будет сконвертировано в строчное представление цвета по следующей схеме:\n   *\n   * 1: 'red'\n   * 2: 'orange'\n   * 3: 'yellow'\n   * 4: 'green'\n   * 5: 'l-blue'\n   * 6: 'violet'.\n   *\n   * > Если необходимо задать свой градиент, то используйте значение `\"custom\"` и определите цвет градиента либо через\n   * > свой класс в `className`, либо через `style={{ backgroundImage: \"...\" }}`.\n   */\n  gradientColor?: InitialsAvatarNumberGradients | InitialsAvatarTextGradients | 'custom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Avatar\n */\nexport const Avatar: React.FC<AvatarProps> & {\n  Badge: typeof AvatarBadge;\n  BadgeWithPreset: typeof AvatarBadgeWithPreset;\n  Overlay: typeof ImageBase.Overlay;\n  getInitialsFontSize: typeof getInitialsFontSize;\n} = ({\n  size = AVATAR_DEFAULT_SIZE,\n  className,\n  gradientColor,\n  initials,\n  fallbackIcon: fallbackIconProp,\n  children,\n  ...restProps\n}: AvatarProps) => {\n  const gradientName =\n    typeof gradientColor === 'number' ? COLORS_NUMBER_TO_TEXT_MAP[gradientColor] : gradientColor;\n  const isGradientNotCustom = gradientName && gradientName !== 'custom';\n\n  const fallbackIcon = initials ? (\n    <div\n      className={styles.initials}\n      style={{\n        fontSize: getInitialsFontSize(size),\n      }}\n    >\n      {initials}\n    </div>\n  ) : (\n    fallbackIconProp\n  );\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      fallbackIcon={fallbackIcon}\n      className={classNames(\n        styles.host,\n        gradientName && styles.hasGradient,\n        isGradientNotCustom && gradientStyles[gradientName],\n        className,\n      )}\n    >\n      {children}\n    </ImageBase>\n  );\n};\n\nAvatar.Badge = AvatarBadge;\nAvatar.BadgeWithPreset = AvatarBadgeWithPreset;\nAvatar.Overlay = ImageBaseOverlay;\nAvatar.getInitialsFontSize = getInitialsFontSize;\n\nif (process.env.NODE_ENV !== 'production') {\n  defineComponentDisplayNames(Avatar.Badge, 'Avatar.Badge');\n  defineComponentDisplayNames(Avatar.BadgeWithPreset, 'Avatar.BadgeWithPreset');\n  defineComponentDisplayNames(Avatar.Overlay, 'Avatar.Overlay');\n}\n"],"names":["classNames","defineComponentDisplayNames","ImageBase","ImageBaseOverlay","AvatarBadge","AvatarBadgeWithPreset","getInitialsFontSize","styles","AVATAR_DEFAULT_SIZE","COLORS_NUMBER_TO_TEXT_MAP","gradientStyles","gradientRed","gradientOrange","gradientYellow","gradientGreen","gradientBlue","gradientLBlue","gradientViolet","Avatar","size","className","gradientColor","initials","fallbackIcon","fallbackIconProp","children","restProps","gradientName","isGradientNotCustom","div","style","fontSize","host","hasGradient","Badge","BadgeWithPreset","Overlay","process","env","NODE_ENV"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,2BAA2B,QAAQ,iDAA8C;AAC1F,SAASC,SAAS,QAA6B,4BAAyB;AACxE,SACEC,gBAAgB,QAEX,oDAAiD;AACxD,SAASC,WAAW,QAA+B,+BAA4B;AAC/E,SACEC,qBAAqB,QAEhB,yCAAsC;AAC7C,SAASC,mBAAmB,QAAQ,eAAY;AAChD,OAAOC,YAAY,sBAAsB;AAQzC,MAAMC,sBAAsB;AAE5B,MAAMC,4BAA4B;IAChC,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;AACL;AAYA,MAAMC,iBAAiB;IACrB,OAAOH,OAAOI,WAAW;IACzB,UAAUJ,OAAOK,cAAc;IAC/B,UAAUL,OAAOM,cAAc;IAC/B,SAASN,OAAOO,aAAa;IAC7B,QAAQP,OAAOQ,YAAY;IAC3B,UAAUR,OAAOS,aAAa;IAC9B,UAAUT,OAAOU,cAAc;AACjC;AA6BA;;CAEC,GACD,OAAO,MAAMC,SAKT,CAAC,EACHC,OAAOX,mBAAmB,EAC1BY,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,cAAcC,gBAAgB,EAC9BC,QAAQ,EACR,GAAGC,WACS;IACZ,MAAMC,eACJ,OAAON,kBAAkB,WAAWZ,yBAAyB,CAACY,cAAc,GAAGA;IACjF,MAAMO,sBAAsBD,gBAAgBA,iBAAiB;IAE7D,MAAMJ,eAAeD,yBACnB,KAACO;QACCT,WAAWb,OAAOe,QAAQ;QAC1BQ,OAAO;YACLC,UAAUzB,oBAAoBa;QAChC;kBAECG;SAGHE;IAGF,qBACE,KAACtB;QACE,GAAGwB,SAAS;QACbP,MAAMA;QACNI,cAAcA;QACdH,WAAWpB,WACTO,OAAOyB,IAAI,EACXL,gBAAgBpB,OAAO0B,WAAW,EAClCL,uBAAuBlB,cAAc,CAACiB,aAAa,EACnDP;kBAGDK;;AAGP,EAAE;AAEFP,OAAOgB,KAAK,GAAG9B;AACfc,OAAOiB,eAAe,GAAG9B;AACzBa,OAAOkB,OAAO,GAAGjC;AACjBe,OAAOZ,mBAAmB,GAAGA;AAE7B,IAAI+B,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzCtC,4BAA4BiB,OAAOgB,KAAK,EAAE;IAC1CjC,4BAA4BiB,OAAOiB,eAAe,EAAE;IACpDlC,4BAA4BiB,OAAOkB,OAAO,EAAE;AAC9C"}

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

@@ -11,6 +11,5 @@ export const AvatarBadge = ({ className, ...restProps })=>{
         className: classNames(styles.host, size < 96 && styles.shifted, className)
     });
 };
-AvatarBadge.displayName = 'Avatar.Badge';
 
 //# sourceMappingURL=AvatarBadge.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Avatar/AvatarBadge/AvatarBadge.tsx"],"sourcesContent":["'use client';\n\nimport * 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: React.FC<AvatarBadgeProps> = ({\n  className,\n  ...restProps\n}: AvatarBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(styles.host, size < 96 && styles.shifted, className)}\n    />\n  );\n};\n\nAvatarBadge.displayName = 'Avatar.Badge';\n"],"names":["React","classNames","ImageBase","ImageBaseContext","styles","AvatarBadge","className","restProps","size","useContext","Badge","host","shifted","displayName"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAA4BC,gBAAgB,QAAQ,+BAA4B;AAClG,OAAOC,YAAY,2BAA2B;AAI9C,OAAO,MAAMC,cAA0C,CAAC,EACtDC,SAAS,EACT,GAAGC,WACc;IACjB,MAAM,EAAEC,IAAI,EAAE,GAAGR,MAAMS,UAAU,CAACN;IAClC,qBACE,KAACD,UAAUQ,KAAK;QACb,GAAGH,SAAS;QACbD,WAAWL,WAAWG,OAAOO,IAAI,EAAEH,OAAO,MAAMJ,OAAOQ,OAAO,EAAEN;;AAGtE,EAAE;AAEFD,YAAYQ,WAAW,GAAG"}
+{"version":3,"sources":["../../../../../src/components/Avatar/AvatarBadge/AvatarBadge.tsx"],"sourcesContent":["'use client';\n\nimport * 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(styles.host, size < 96 && styles.shifted, className)}\n    />\n  );\n};\n"],"names":["React","classNames","ImageBase","ImageBaseContext","styles","AvatarBadge","className","restProps","size","useContext","Badge","host","shifted"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAA4BC,gBAAgB,QAAQ,+BAA4B;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,KAACD,UAAUQ,KAAK;QACb,GAAGH,SAAS;QACbD,WAAWL,WAAWG,OAAOO,IAAI,EAAEH,OAAO,MAAMJ,OAAOQ,OAAO,EAAEN;;AAGtE,EAAE"}

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

@@ -24,6 +24,5 @@ export const AvatarBadgeWithPreset = ({ preset = 'online', className, ...restPro
         })
     });
 };
-AvatarBadgeWithPreset.displayName = 'Avatar.BadgeWithPreset';
 
 //# sourceMappingURL=AvatarBadgeWithPreset.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../../hooks/useConfigDirection';\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: React.FC<AvatarBadgeWithPresetProps> = ({\n  preset = 'online',\n  className,\n  ...restProps\n}: AvatarBadgeWithPresetProps) => {\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n  const { size } = React.useContext(ImageBaseContext);\n  const badgeSize = getBadgeIconSizeByImageBaseSize(size);\n  const isOnlinePreset = preset === 'online';\n  const presetClassName = isOnlinePreset ? styles.presetOnline : styles.presetOnlineMobile;\n  const Icon = isOnlinePreset ? Icon12Circle : Icon12OnlineMobile;\n\n  return (\n    <ImageBase.Badge\n      background=\"stroke\"\n      className={classNames(styles.host, isRtl && styles.rtl, presetClassName, className)}\n      {...restProps}\n    >\n      <Icon width={badgeSize} height={badgeSize} />\n    </ImageBase.Badge>\n  );\n};\n\nAvatarBadgeWithPreset.displayName = 'Avatar.BadgeWithPreset';\n"],"names":["React","classNames","useConfigDirection","getBadgeIconSizeByImageBaseSize","ImageBase","ImageBaseContext","Icon12Circle","Icon12OnlineMobile","styles","AvatarBadgeWithPreset","preset","className","restProps","direction","isRtl","size","useContext","badgeSize","isOnlinePreset","presetClassName","presetOnline","presetOnlineMobile","Icon","Badge","background","host","rtl","width","height","displayName"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAAQ,uCAAoC;AACvE,SACEC,+BAA+B,EAC/BC,SAAS,EAETC,gBAAgB,QACX,+BAA4B;AACnC,SAASC,YAAY,EAAEC,kBAAkB,QAAQ,aAAU;AAC3D,OAAOC,YAAY,2BAA2B;AAY9C,OAAO,MAAMC,wBAA8D,CAAC,EAC1EC,SAAS,QAAQ,EACjBC,SAAS,EACT,GAAGC,WACwB;IAC3B,MAAMC,YAAYX;IAClB,MAAMY,QAAQD,cAAc;IAC5B,MAAM,EAAEE,IAAI,EAAE,GAAGf,MAAMgB,UAAU,CAACX;IAClC,MAAMY,YAAYd,gCAAgCY;IAClD,MAAMG,iBAAiBR,WAAW;IAClC,MAAMS,kBAAkBD,iBAAiBV,OAAOY,YAAY,GAAGZ,OAAOa,kBAAkB;IACxF,MAAMC,OAAOJ,iBAAiBZ,eAAeC;IAE7C,qBACE,KAACH,UAAUmB,KAAK;QACdC,YAAW;QACXb,WAAWV,WAAWO,OAAOiB,IAAI,EAAEX,SAASN,OAAOkB,GAAG,EAAEP,iBAAiBR;QACxE,GAAGC,SAAS;kBAEb,cAAA,KAACU;YAAKK,OAAOV;YAAWW,QAAQX;;;AAGtC,EAAE;AAEFR,sBAAsBoB,WAAW,GAAG"}
+{"version":3,"sources":["../../../../../src/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../../hooks/useConfigDirection';\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 direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n  const { size } = React.useContext(ImageBaseContext);\n  const badgeSize = getBadgeIconSizeByImageBaseSize(size);\n  const isOnlinePreset = preset === 'online';\n  const presetClassName = isOnlinePreset ? styles.presetOnline : styles.presetOnlineMobile;\n  const Icon = isOnlinePreset ? Icon12Circle : Icon12OnlineMobile;\n\n  return (\n    <ImageBase.Badge\n      background=\"stroke\"\n      className={classNames(styles.host, isRtl && styles.rtl, presetClassName, className)}\n      {...restProps}\n    >\n      <Icon width={badgeSize} height={badgeSize} />\n    </ImageBase.Badge>\n  );\n};\n"],"names":["React","classNames","useConfigDirection","getBadgeIconSizeByImageBaseSize","ImageBase","ImageBaseContext","Icon12Circle","Icon12OnlineMobile","styles","AvatarBadgeWithPreset","preset","className","restProps","direction","isRtl","size","useContext","badgeSize","isOnlinePreset","presetClassName","presetOnline","presetOnlineMobile","Icon","Badge","background","host","rtl","width","height"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAAQ,uCAAoC;AACvE,SACEC,+BAA+B,EAC/BC,SAAS,EAETC,gBAAgB,QACX,+BAA4B;AACnC,SAASC,YAAY,EAAEC,kBAAkB,QAAQ,aAAU;AAC3D,OAAOC,YAAY,2BAA2B;AAY9C,OAAO,MAAMC,wBAAwB,CAAC,EACpCC,SAAS,QAAQ,EACjBC,SAAS,EACT,GAAGC,WACwB;IAC3B,MAAMC,YAAYX;IAClB,MAAMY,QAAQD,cAAc;IAC5B,MAAM,EAAEE,IAAI,EAAE,GAAGf,MAAMgB,UAAU,CAACX;IAClC,MAAMY,YAAYd,gCAAgCY;IAClD,MAAMG,iBAAiBR,WAAW;IAClC,MAAMS,kBAAkBD,iBAAiBV,OAAOY,YAAY,GAAGZ,OAAOa,kBAAkB;IACxF,MAAMC,OAAOJ,iBAAiBZ,eAAeC;IAE7C,qBACE,KAACH,UAAUmB,KAAK;QACdC,YAAW;QACXb,WAAWV,WAAWO,OAAOiB,IAAI,EAAEX,SAASN,OAAOkB,GAAG,EAAEP,iBAAiBR;QACxE,GAAGC,SAAS;kBAEb,cAAA,KAACU;YAAKK,OAAOV;YAAWW,QAAQX;;;AAGtC,EAAE"}

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable jsdoc/require-jsdoc */ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Icon12Circle as Icon12CircleLib, Icon12OnlineMobile as Icon12OnlineMobileLib } from "@vkontakte/icons";
 export const Icon12Circle = ({ width, height, ...restProps })=>{

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\ntype IconsProps = Omit<React.ComponentProps<typeof Icon12CircleLib>, 'width' | 'height'> & {\n  width: number;\n  height: number;\n};\n\nexport const Icon12Circle = ({ width, height, ...restProps }: IconsProps): React.ReactNode => {\n  return (\n    <Icon12CircleLib {...restProps} width={width >= 24 ? 15 : 12} height={height >= 24 ? 15 : 12} />\n  );\n};\n\nexport const Icon12OnlineMobile = ({\n  width,\n  height,\n  ...restProps\n}: IconsProps): React.ReactNode => {\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;AAO1B,OAAO,MAAMH,eAAe,CAAC,EAAEI,KAAK,EAAEC,MAAM,EAAE,GAAGC,WAAuB;IACtE,qBACE,KAACL;QAAiB,GAAGK,SAAS;QAAEF,OAAOA,SAAS,KAAK,KAAK;QAAIC,QAAQA,UAAU,KAAK,KAAK;;AAE9F,EAAE;AAEF,OAAO,MAAMH,qBAAqB,CAAC,EACjCE,KAAK,EACLC,MAAM,EACN,GAAGC,WACQ;IACX,qBACE,KAACH;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":["/* eslint-disable jsdoc/require-jsdoc */\n\nimport * as React from 'react';\nimport {\n  Icon12Circle as Icon12CircleLib,\n  Icon12OnlineMobile as Icon12OnlineMobileLib,\n} from '@vkontakte/icons';\n\ntype IconsProps = Omit<React.ComponentProps<typeof Icon12CircleLib>, 'width' | 'height'> & {\n  width: number;\n  height: number;\n};\n\nexport const Icon12Circle = ({ width, height, ...restProps }: IconsProps): React.ReactNode => {\n  return (\n    <Icon12CircleLib {...restProps} width={width >= 24 ? 15 : 12} height={height >= 24 ? 15 : 12} />\n  );\n};\n\nexport const Icon12OnlineMobile = ({\n  width,\n  height,\n  ...restProps\n}: IconsProps): React.ReactNode => {\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,sCAAsC;AAEtC,YAAYA,WAAW,QAAQ;AAC/B,SACEC,gBAAgBC,eAAe,EAC/BC,sBAAsBC,qBAAqB,QACtC,mBAAmB;AAO1B,OAAO,MAAMH,eAAe,CAAC,EAAEI,KAAK,EAAEC,MAAM,EAAE,GAAGC,WAAuB;IACtE,qBACE,KAACL;QAAiB,GAAGK,SAAS;QAAEF,OAAOA,SAAS,KAAK,KAAK;QAAIC,QAAQA,UAAU,KAAK,KAAK;;AAE9F,EAAE;AAEF,OAAO,MAAMH,qBAAqB,CAAC,EACjCE,KAAK,EACLC,MAAM,EACN,GAAGC,WACQ;IACX,qBACE,KAACH;QACE,GAAGG,SAAS;QACbF,OAAOA,SAAS,KAAK,IAAI;QACzBC,QAAQA,UAAU,KAAK,KAAK;;AAGlC,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Badge.module.css';\n\nconst stylesMode = {\n  new: styles.modeNew,\n  prominent: styles.modeProminent,\n};\n\nexport interface BadgeProps extends RootComponentProps<HTMLSpanElement> {\n  mode?: 'new' | 'prominent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Badge\n */\nexport const Badge = ({ mode = 'new', children, ...restProps }: BadgeProps): React.ReactNode => (\n  <RootComponent\n    Component=\"span\"\n    baseClassName={classNames(styles.host, 'vkuiInternalBadge', stylesMode[mode])}\n    {...restProps}\n  >\n    {children && <VisuallyHidden>{children}</VisuallyHidden>}\n  </RootComponent>\n);\n"],"names":["classNames","RootComponent","VisuallyHidden","styles","stylesMode","new","modeNew","prominent","modeProminent","Badge","mode","children","restProps","Component","baseClassName","host"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAiC,oCAAiC;AACxF,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,aAAa;IACjBC,KAAKF,OAAOG,OAAO;IACnBC,WAAWJ,OAAOK,aAAa;AACjC;AAMA;;CAEC,GACD,OAAO,MAAMC,QAAQ,CAAC,EAAEC,OAAO,KAAK,EAAEC,QAAQ,EAAE,GAAGC,WAAuB,iBACxE,KAACX;QACCY,WAAU;QACVC,eAAed,WAAWG,OAAOY,IAAI,EAAE,qBAAqBX,UAAU,CAACM,KAAK;QAC3E,GAAGE,SAAS;kBAEZD,0BAAY,KAACT;sBAAgBS;;OAEhC"}
+{"version":3,"sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Badge.module.css';\n\nconst stylesMode = {\n  new: styles.modeNew,\n  prominent: styles.modeProminent,\n};\n\nexport interface BadgeProps extends RootComponentProps<HTMLSpanElement> {\n  /**\n   * Режим отображения компонента.\n   */\n  mode?: 'new' | 'prominent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Badge\n */\nexport const Badge = ({ mode = 'new', children, ...restProps }: BadgeProps): React.ReactNode => (\n  <RootComponent\n    Component=\"span\"\n    baseClassName={classNames(styles.host, 'vkuiInternalBadge', stylesMode[mode])}\n    {...restProps}\n  >\n    {children && <VisuallyHidden>{children}</VisuallyHidden>}\n  </RootComponent>\n);\n"],"names":["classNames","RootComponent","VisuallyHidden","styles","stylesMode","new","modeNew","prominent","modeProminent","Badge","mode","children","restProps","Component","baseClassName","host"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAiC,oCAAiC;AACxF,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,aAAa;IACjBC,KAAKF,OAAOG,OAAO;IACnBC,WAAWJ,OAAOK,aAAa;AACjC;AASA;;CAEC,GACD,OAAO,MAAMC,QAAQ,CAAC,EAAEC,OAAO,KAAK,EAAEC,QAAQ,EAAE,GAAGC,WAAuB,iBACxE,KAACX;QACCY,WAAU;QACVC,eAAed,WAAWG,OAAOY,IAAI,EAAE,qBAAqBX,UAAU,CAACM,KAAK;QAC3E,GAAGE,SAAS;kBAEZD,0BAAY,KAACT;sBAAgBS;;OAEhC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon24Cancel, Icon24Chevron, Icon24Dismiss, Icon24DismissDark } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Banner.module.css';\n\nexport interface BannerProps extends Omit<TappableProps, 'title' | 'size'> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `chevron` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  after?: 'dismiss' | 'chevron' | React.ReactNode;\n  /**\n   * Срабатывает при клике на иконку крестика при `after=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок.\n   */\n  title?: React.ReactNode;\n  /**\n   * Подзаголовок.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительный подзаголовок баннера.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button).\n   *\n   * - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:\n   *    - `mode=\"primary\"`\n   *    - `mode=\"secondary\"`\n   * - В режиме `image` с тёмным фоном используйте с параметрами:\n   *    - `appearance=\"overlay\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"m\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n  mode = 'tint',\n  imageTheme = 'dark',\n  size = 's',\n  before,\n  after: afterProp,\n  title,\n  subtitle,\n  extraSubtitle,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = 'Скрыть',\n  Component,\n  ...restProps\n}: BannerProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  const HeaderTypography = size === 'm' ? Title : Headline;\n  const SubheadTypography = size === 'm' ? Text : Subhead;\n\n  const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24Dismiss;\n\n  const content = (\n    <>\n      {mode === 'image' && background && (\n        <div aria-hidden className={styles.bg}>\n          {background}\n        </div>\n      )}\n\n      {before && <div className={styles.before}>{before}</div>}\n\n      <div className={styles.content}>\n        {hasReactNode(title) && (\n          <HeaderTypography Component=\"div\" weight=\"2\" level={size === 'm' ? '2' : '1'}>\n            {title}\n          </HeaderTypography>\n        )}\n        {hasReactNode(subtitle) && (\n          <SubheadTypography Component=\"div\" className={styles.subtitle}>\n            {subtitle}\n          </SubheadTypography>\n        )}\n        {hasReactNode(extraSubtitle) && (\n          <Text Component=\"div\" className={styles.extraSubtitle}>\n            {extraSubtitle}\n          </Text>\n        )}\n        {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n          <div className={styles.actions}>{actions}</div>\n        )}\n      </div>\n    </>\n  );\n\n  const afterMap: Record<string, React.ReactNode> = {\n    chevron: <Icon24Chevron className={styles.chevron} />,\n    dismiss: (\n      <IconButton\n        label={dismissLabel}\n        className={styles.dismiss}\n        onClick={onDismiss}\n        hoverMode=\"opacity\"\n        hasActive={false}\n      >\n        {platform === 'ios' ? <IconDismissIOS /> : <Icon24Cancel />}\n      </IconButton>\n    ),\n  };\n\n  const after = afterProp && (\n    <div className={styles.after}>\n      {typeof afterProp === 'string' ? afterMap[afterProp] : afterProp}\n    </div>\n  );\n\n  const isClickable = restProps.onClick || restProps.onClickCapture || restProps.href;\n\n  return (\n    <Tappable\n      Component={Component || (!isClickable ? 'section' : undefined)}\n      activeMode={platform === 'ios' ? 'opacity' : 'background'}\n      baseClassName={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        mode === 'image' && styles.modeImage,\n        size === 'm' && styles.sizeM,\n        mode === 'image' && imageTheme === 'dark' && styles.inverted,\n      )}\n      {...restProps}\n    >\n      {content}\n      {after}\n    </Tappable>\n  );\n};\n"],"names":["React","Icon24Cancel","Icon24Chevron","Icon24Dismiss","Icon24DismissDark","classNames","hasReactNode","usePlatform","IconButton","Tappable","Headline","Subhead","Text","Title","styles","Banner","mode","imageTheme","size","before","after","afterProp","title","subtitle","extraSubtitle","children","background","actions","onDismiss","dismissLabel","Component","restProps","platform","HeaderTypography","SubheadTypography","IconDismissIOS","content","div","aria-hidden","className","bg","weight","level","Children","count","afterMap","chevron","dismiss","label","onClick","hoverMode","hasActive","isClickable","onClickCapture","href","undefined","activeMode","baseClassName","host","ios","modeImage","sizeM","inverted"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,EAAEC,aAAa,EAAEC,aAAa,EAAEC,iBAAiB,QAAQ,mBAAmB;AACjG,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,UAAU,QAAQ,8BAA2B;AACtD,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,SAASC,KAAK,QAAQ,+BAA4B;AAClD,OAAOC,YAAY,sBAAsB;AAqEzC;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EACrBC,OAAO,MAAM,EACbC,aAAa,MAAM,EACnBC,OAAO,GAAG,EACVC,MAAM,EACNC,OAAOC,SAAS,EAChBC,KAAK,EACLC,QAAQ,EACRC,aAAa,EACbC,QAAQ,EACRC,UAAU,EACVC,OAAO,EACPC,SAAS,EACTC,eAAe,QAAQ,EACvBC,SAAS,EACT,GAAGC,WACS;IACZ,MAAMC,WAAWzB;IAEjB,MAAM0B,mBAAmBf,SAAS,MAAML,QAAQH;IAChD,MAAMwB,oBAAoBhB,SAAS,MAAMN,OAAOD;IAEhD,MAAMwB,iBAAiBnB,SAAS,UAAUZ,oBAAoBD;IAE9D,MAAMiC,wBACJ;;YACGpB,SAAS,WAAWU,4BACnB,KAACW;gBAAIC,aAAW;gBAACC,WAAWzB,OAAO0B,EAAE;0BAClCd;;YAIJP,wBAAU,KAACkB;gBAAIE,WAAWzB,OAAOK,MAAM;0BAAGA;;0BAE3C,MAACkB;gBAAIE,WAAWzB,OAAOsB,OAAO;;oBAC3B9B,aAAagB,wBACZ,KAACW;wBAAiBH,WAAU;wBAAMW,QAAO;wBAAIC,OAAOxB,SAAS,MAAM,MAAM;kCACtEI;;oBAGJhB,aAAaiB,2BACZ,KAACW;wBAAkBJ,WAAU;wBAAMS,WAAWzB,OAAOS,QAAQ;kCAC1DA;;oBAGJjB,aAAakB,gCACZ,KAACZ;wBAAKkB,WAAU;wBAAMS,WAAWzB,OAAOU,aAAa;kCAClDA;;oBAGJlB,aAAaqB,YAAY3B,MAAM2C,QAAQ,CAACC,KAAK,CAACjB,WAAW,mBACxD,KAACU;wBAAIE,WAAWzB,OAAOa,OAAO;kCAAGA;;;;;;IAMzC,MAAMkB,WAA4C;QAChDC,uBAAS,KAAC5C;YAAcqC,WAAWzB,OAAOgC,OAAO;;QACjDC,uBACE,KAACvC;YACCwC,OAAOnB;YACPU,WAAWzB,OAAOiC,OAAO;YACzBE,SAASrB;YACTsB,WAAU;YACVC,WAAW;sBAEVnB,aAAa,sBAAQ,KAACG,oCAAoB,KAAClC;;IAGlD;IAEA,MAAMmB,QAAQC,2BACZ,KAACgB;QAAIE,WAAWzB,OAAOM,KAAK;kBACzB,OAAOC,cAAc,WAAWwB,QAAQ,CAACxB,UAAU,GAAGA;;IAI3D,MAAM+B,cAAcrB,UAAUkB,OAAO,IAAIlB,UAAUsB,cAAc,IAAItB,UAAUuB,IAAI;IAEnF,qBACE,MAAC7C;QACCqB,WAAWA,aAAc,CAAA,CAACsB,cAAc,YAAYG,SAAQ;QAC5DC,YAAYxB,aAAa,QAAQ,YAAY;QAC7CyB,eAAepD,WACbS,OAAO4C,IAAI,EACX1B,aAAa,SAASlB,OAAO6C,GAAG,EAChC3C,SAAS,WAAWF,OAAO8C,SAAS,EACpC1C,SAAS,OAAOJ,OAAO+C,KAAK,EAC5B7C,SAAS,WAAWC,eAAe,UAAUH,OAAOgD,QAAQ;QAE7D,GAAG/B,SAAS;;YAEZK;YACAhB;;;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon24Cancel, Icon24Chevron, Icon24Dismiss, Icon24DismissDark } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Banner.module.css';\n\nexport interface BannerProps extends Omit<TappableProps, 'title' | 'size'> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  /**\n   * Размер баннера.\n   */\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при нажатии на неё сработает свойство `onDismiss`.\n   * - `chevron` – отображается иконка шеврона, которая подразумевает, что при нажатии на баннер можно куда-то перейти.\n   */\n  after?: 'dismiss' | 'chevron' | React.ReactNode;\n  /**\n   * Срабатывает при нажатии на иконку крестика при `after=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий.\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок.\n   */\n  title?: React.ReactNode;\n  /**\n   * Подзаголовок.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительный подзаголовок баннера.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button).\n   *\n   * - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:\n   *    - `mode=\"primary\"`\n   *    - `mode=\"secondary\"`\n   * - В режиме `image` с тёмным фоном используйте с параметрами:\n   *    - `appearance=\"overlay\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"m\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`.\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n  mode = 'tint',\n  imageTheme = 'dark',\n  size = 's',\n  before,\n  after: afterProp,\n  title,\n  subtitle,\n  extraSubtitle,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = 'Скрыть',\n  Component,\n  ...restProps\n}: BannerProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  const HeaderTypography = size === 'm' ? Title : Headline;\n  const SubheadTypography = size === 'm' ? Text : Subhead;\n\n  const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24Dismiss;\n\n  const content = (\n    <>\n      {mode === 'image' && background && (\n        <div aria-hidden className={styles.bg}>\n          {background}\n        </div>\n      )}\n\n      {before && <div className={styles.before}>{before}</div>}\n\n      <div className={styles.content}>\n        {hasReactNode(title) && (\n          <HeaderTypography Component=\"div\" weight=\"2\" level={size === 'm' ? '2' : '1'}>\n            {title}\n          </HeaderTypography>\n        )}\n        {hasReactNode(subtitle) && (\n          <SubheadTypography Component=\"div\" className={styles.subtitle}>\n            {subtitle}\n          </SubheadTypography>\n        )}\n        {hasReactNode(extraSubtitle) && (\n          <Text Component=\"div\" className={styles.extraSubtitle}>\n            {extraSubtitle}\n          </Text>\n        )}\n        {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n          <div className={styles.actions}>{actions}</div>\n        )}\n      </div>\n    </>\n  );\n\n  const afterMap: Record<string, React.ReactNode> = {\n    chevron: <Icon24Chevron className={styles.chevron} />,\n    dismiss: (\n      <IconButton\n        label={dismissLabel}\n        className={styles.dismiss}\n        onClick={onDismiss}\n        hoverMode=\"opacity\"\n        hasActive={false}\n      >\n        {platform === 'ios' ? <IconDismissIOS /> : <Icon24Cancel />}\n      </IconButton>\n    ),\n  };\n\n  const after = afterProp && (\n    <div className={styles.after}>\n      {typeof afterProp === 'string' ? afterMap[afterProp] : afterProp}\n    </div>\n  );\n\n  const isClickable = restProps.onClick || restProps.onClickCapture || restProps.href;\n\n  return (\n    <Tappable\n      Component={Component || (!isClickable ? 'section' : undefined)}\n      activeMode={platform === 'ios' ? 'opacity' : 'background'}\n      baseClassName={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        mode === 'image' && styles.modeImage,\n        size === 'm' && styles.sizeM,\n        mode === 'image' && imageTheme === 'dark' && styles.inverted,\n      )}\n      {...restProps}\n    >\n      {content}\n      {after}\n    </Tappable>\n  );\n};\n"],"names":["React","Icon24Cancel","Icon24Chevron","Icon24Dismiss","Icon24DismissDark","classNames","hasReactNode","usePlatform","IconButton","Tappable","Headline","Subhead","Text","Title","styles","Banner","mode","imageTheme","size","before","after","afterProp","title","subtitle","extraSubtitle","children","background","actions","onDismiss","dismissLabel","Component","restProps","platform","HeaderTypography","SubheadTypography","IconDismissIOS","content","div","aria-hidden","className","bg","weight","level","Children","count","afterMap","chevron","dismiss","label","onClick","hoverMode","hasActive","isClickable","onClickCapture","href","undefined","activeMode","baseClassName","host","ios","modeImage","sizeM","inverted"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,EAAEC,aAAa,EAAEC,aAAa,EAAEC,iBAAiB,QAAQ,mBAAmB;AACjG,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,UAAU,QAAQ,8BAA2B;AACtD,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,SAASC,KAAK,QAAQ,+BAA4B;AAClD,OAAOC,YAAY,sBAAsB;AAwEzC;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EACrBC,OAAO,MAAM,EACbC,aAAa,MAAM,EACnBC,OAAO,GAAG,EACVC,MAAM,EACNC,OAAOC,SAAS,EAChBC,KAAK,EACLC,QAAQ,EACRC,aAAa,EACbC,QAAQ,EACRC,UAAU,EACVC,OAAO,EACPC,SAAS,EACTC,eAAe,QAAQ,EACvBC,SAAS,EACT,GAAGC,WACS;IACZ,MAAMC,WAAWzB;IAEjB,MAAM0B,mBAAmBf,SAAS,MAAML,QAAQH;IAChD,MAAMwB,oBAAoBhB,SAAS,MAAMN,OAAOD;IAEhD,MAAMwB,iBAAiBnB,SAAS,UAAUZ,oBAAoBD;IAE9D,MAAMiC,wBACJ;;YACGpB,SAAS,WAAWU,4BACnB,KAACW;gBAAIC,aAAW;gBAACC,WAAWzB,OAAO0B,EAAE;0BAClCd;;YAIJP,wBAAU,KAACkB;gBAAIE,WAAWzB,OAAOK,MAAM;0BAAGA;;0BAE3C,MAACkB;gBAAIE,WAAWzB,OAAOsB,OAAO;;oBAC3B9B,aAAagB,wBACZ,KAACW;wBAAiBH,WAAU;wBAAMW,QAAO;wBAAIC,OAAOxB,SAAS,MAAM,MAAM;kCACtEI;;oBAGJhB,aAAaiB,2BACZ,KAACW;wBAAkBJ,WAAU;wBAAMS,WAAWzB,OAAOS,QAAQ;kCAC1DA;;oBAGJjB,aAAakB,gCACZ,KAACZ;wBAAKkB,WAAU;wBAAMS,WAAWzB,OAAOU,aAAa;kCAClDA;;oBAGJlB,aAAaqB,YAAY3B,MAAM2C,QAAQ,CAACC,KAAK,CAACjB,WAAW,mBACxD,KAACU;wBAAIE,WAAWzB,OAAOa,OAAO;kCAAGA;;;;;;IAMzC,MAAMkB,WAA4C;QAChDC,uBAAS,KAAC5C;YAAcqC,WAAWzB,OAAOgC,OAAO;;QACjDC,uBACE,KAACvC;YACCwC,OAAOnB;YACPU,WAAWzB,OAAOiC,OAAO;YACzBE,SAASrB;YACTsB,WAAU;YACVC,WAAW;sBAEVnB,aAAa,sBAAQ,KAACG,oCAAoB,KAAClC;;IAGlD;IAEA,MAAMmB,QAAQC,2BACZ,KAACgB;QAAIE,WAAWzB,OAAOM,KAAK;kBACzB,OAAOC,cAAc,WAAWwB,QAAQ,CAACxB,UAAU,GAAGA;;IAI3D,MAAM+B,cAAcrB,UAAUkB,OAAO,IAAIlB,UAAUsB,cAAc,IAAItB,UAAUuB,IAAI;IAEnF,qBACE,MAAC7C;QACCqB,WAAWA,aAAc,CAAA,CAACsB,cAAc,YAAYG,SAAQ;QAC5DC,YAAYxB,aAAa,QAAQ,YAAY;QAC7CyB,eAAepD,WACbS,OAAO4C,IAAI,EACX1B,aAAa,SAASlB,OAAO6C,GAAG,EAChC3C,SAAS,WAAWF,OAAO8C,SAAS,EACpC1C,SAAS,OAAOJ,OAAO+C,KAAK,EAC5B7C,SAAS,WAAWC,eAAe,UAAUH,OAAOgD,QAAQ;QAE7D,GAAG/B,SAAS;;YAEZK;YACAhB;;;AAGP,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasAlign } from '../../types';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport '../Tappable/Tappable.module.css';\nimport '../Spinner/Spinner.module.css';\nimport styles from './Button.module.css';\n\nconst stylesSize = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n};\n\nconst stylesMode = {\n  primary: styles.modePrimary,\n  secondary: styles.modeSecondary,\n  tertiary: styles.modeTertiary,\n  outline: styles.modeOutline,\n  link: styles.modeLink,\n};\n\nconst stylesAppearance = {\n  'accent': styles.appearanceAccent,\n  'positive': styles.appearancePositive,\n  'negative': styles.appearanceNegative,\n  'neutral': styles.appearanceNeutral,\n  'overlay': styles.appearanceOverlay,\n  'accent-invariable': styles.appearanceAccentInvariable,\n};\n\nconst stylesAlign = {\n  left: styles.alignLeft,\n  right: styles.alignRight,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  regular: styles.sizeYRegular,\n};\n\nexport interface VKUIButtonProps extends HasAlign {\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'link';\n  appearance?: 'accent' | 'positive' | 'negative' | 'neutral' | 'overlay' | 'accent-invariable';\n  size?: 's' | 'm' | 'l';\n  stretched?: boolean;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  loading?: boolean;\n  disableSpinnerAnimation?: boolean;\n  rounded?: boolean;\n}\n\nexport interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Button\n */\nexport const Button = ({\n  size = 's',\n  mode = 'primary',\n  appearance = 'accent',\n  stretched = false,\n  align = 'center',\n  children,\n  before,\n  after,\n  getRootRef,\n  loading,\n  onClick,\n  disableSpinnerAnimation,\n  rounded,\n  disabled,\n  ...restProps\n}: ButtonProps): React.ReactNode => {\n  const hasIconOnly = !children && Boolean(after) !== Boolean(before);\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  return (\n    <Tappable\n      hoverMode={styles.hover}\n      activeMode={styles.active}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      disabled={loading || disabled}\n      {...restProps}\n      onClick={loading ? undefined : onClick}\n      baseClassName={classNames(\n        styles.host,\n        stylesSize[size],\n        stylesMode[mode],\n        stylesAppearance[appearance],\n        align !== 'center' && stylesAlign[align],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n        platform === 'ios' && styles.ios,\n        stretched && styles.stretched,\n        hasIconOnly && !stretched && styles.singleIcon,\n        loading && styles.loading,\n        rounded && styles.rounded,\n        disabled && styles.disabled,\n      )}\n      getRootRef={getRootRef}\n    >\n      {loading && (\n        <Spinner\n          size=\"s\"\n          className={styles.spinner}\n          disableAnimation={disableSpinnerAnimation}\n          noColor\n        />\n      )}\n      <span className={styles.in}>\n        {hasReactNode(before) && (\n          <span\n            className={styles.before}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'before' : undefined}\n          >\n            {before}\n          </span>\n        )}\n        {hasReactNode(children) && (\n          <span\n            className={styles.content}\n            data-testid={process.env.NODE_ENV === 'test' ? 'children' : undefined}\n          >\n            {children}\n          </span>\n        )}\n        {hasReactNode(after) && (\n          <span\n            className={styles.after}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'after' : undefined}\n          >\n            {after}\n          </span>\n        )}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","Spinner","Tappable","styles","stylesSize","s","sizeS","m","sizeM","l","sizeL","stylesMode","primary","modePrimary","secondary","modeSecondary","tertiary","modeTertiary","outline","modeOutline","link","modeLink","stylesAppearance","appearanceAccent","appearancePositive","appearanceNegative","appearanceNeutral","appearanceOverlay","appearanceAccentInvariable","stylesAlign","left","alignLeft","right","alignRight","sizeYClassNames","none","sizeYNone","regular","sizeYRegular","Button","size","mode","appearance","stretched","align","children","before","after","getRootRef","loading","onClick","disableSpinnerAnimation","rounded","disabled","restProps","hasIconOnly","Boolean","sizeY","platform","hoverMode","hover","activeMode","active","Component","href","focusVisibleMode","undefined","baseClassName","host","ios","singleIcon","className","spinner","disableAnimation","noColor","span","in","role","data-testid","process","env","NODE_ENV","content"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasAlign } from '../../types';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport '../Tappable/Tappable.module.css';\nimport '../Spinner/Spinner.module.css';\nimport styles from './Button.module.css';\n\nconst stylesSize = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n};\n\nconst stylesMode = {\n  primary: styles.modePrimary,\n  secondary: styles.modeSecondary,\n  tertiary: styles.modeTertiary,\n  outline: styles.modeOutline,\n  link: styles.modeLink,\n};\n\nconst stylesAppearance = {\n  'accent': styles.appearanceAccent,\n  'positive': styles.appearancePositive,\n  'negative': styles.appearanceNegative,\n  'neutral': styles.appearanceNeutral,\n  'overlay': styles.appearanceOverlay,\n  'accent-invariable': styles.appearanceAccentInvariable,\n};\n\nconst stylesAlign = {\n  left: styles.alignLeft,\n  right: styles.alignRight,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  regular: styles.sizeYRegular,\n};\n\nexport interface VKUIButtonProps extends HasAlign {\n  /**\n   * Режим отображения кнопки.\n   */\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'link';\n  /**\n   * Цветовая схема кнопки.\n   */\n  appearance?: 'accent' | 'positive' | 'negative' | 'neutral' | 'overlay' | 'accent-invariable';\n  /**\n   * Размер кнопки.\n   */\n  size?: 's' | 'm' | 'l';\n  /**\n   * Растягивает кнопку на всю ширину контейнера.\n   */\n  stretched?: boolean;\n  /**\n   * Контент, отображаемый перед основным содержимым кнопки.\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент, отображаемый после основного содержимого кнопки.\n   */\n  after?: React.ReactNode;\n  /**\n   * Включает состояние загрузки (отображает спиннер).\n   */\n  loading?: boolean;\n  /**\n   * Отключает анимацию спиннера загрузки.\n   */\n  disableSpinnerAnimation?: boolean;\n  /**\n   * Добавляет скругленные углы кнопке.\n   */\n  rounded?: boolean;\n}\n\nexport interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Button\n */\nexport const Button = ({\n  size = 's',\n  mode = 'primary',\n  appearance = 'accent',\n  stretched = false,\n  align = 'center',\n  children,\n  before,\n  after,\n  getRootRef,\n  loading,\n  onClick,\n  disableSpinnerAnimation,\n  rounded,\n  disabled,\n  ...restProps\n}: ButtonProps): React.ReactNode => {\n  const hasIconOnly = !children && Boolean(after) !== Boolean(before);\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  return (\n    <Tappable\n      hoverMode={styles.hover}\n      activeMode={styles.active}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      disabled={loading || disabled}\n      {...restProps}\n      onClick={loading ? undefined : onClick}\n      baseClassName={classNames(\n        styles.host,\n        stylesSize[size],\n        stylesMode[mode],\n        stylesAppearance[appearance],\n        align !== 'center' && stylesAlign[align],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n        platform === 'ios' && styles.ios,\n        stretched && styles.stretched,\n        hasIconOnly && !stretched && styles.singleIcon,\n        loading && styles.loading,\n        rounded && styles.rounded,\n        disabled && styles.disabled,\n      )}\n      getRootRef={getRootRef}\n    >\n      {loading && (\n        <Spinner\n          size=\"s\"\n          className={styles.spinner}\n          disableAnimation={disableSpinnerAnimation}\n          noColor\n        />\n      )}\n      <span className={styles.in}>\n        {hasReactNode(before) && (\n          <span\n            className={styles.before}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'before' : undefined}\n          >\n            {before}\n          </span>\n        )}\n        {hasReactNode(children) && (\n          <span\n            className={styles.content}\n            data-testid={process.env.NODE_ENV === 'test' ? 'children' : undefined}\n          >\n            {children}\n          </span>\n        )}\n        {hasReactNode(after) && (\n          <span\n            className={styles.after}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'after' : undefined}\n          >\n            {after}\n          </span>\n        )}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","Spinner","Tappable","styles","stylesSize","s","sizeS","m","sizeM","l","sizeL","stylesMode","primary","modePrimary","secondary","modeSecondary","tertiary","modeTertiary","outline","modeOutline","link","modeLink","stylesAppearance","appearanceAccent","appearancePositive","appearanceNegative","appearanceNeutral","appearanceOverlay","appearanceAccentInvariable","stylesAlign","left","alignLeft","right","alignRight","sizeYClassNames","none","sizeYNone","regular","sizeYRegular","Button","size","mode","appearance","stretched","align","children","before","after","getRootRef","loading","onClick","disableSpinnerAnimation","rounded","disabled","restProps","hasIconOnly","Boolean","sizeY","platform","hoverMode","hover","activeMode","active","Component","href","focusVisibleMode","undefined","baseClassName","host","ios","singleIcon","className","spinner","disableAnimation","noColor","span","in","role","data-testid","process","env","NODE_ENV","content"],"mappings":"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"}

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

@@ -25,6 +25,5 @@ const stylesAlign = {
         ...restProps
     });
 };
-ButtonGroup.displayName = 'ButtonGroup';
 
 //# sourceMappingURL=ButtonGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport type { AlignType, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './ButtonGroup.module.css';\n\nconst stylesMode = {\n  vertical: styles.modeVertical,\n  horizontal: styles.modeHorizontal,\n};\n\nconst stylesGap = {\n  space: styles.gapSpace,\n  s: styles.gapS,\n  m: styles.gapM,\n};\n\nconst stylesAlign = {\n  left: styles.alignLeft,\n  center: styles.alignCenter,\n  right: styles.alignRight,\n};\n\nexport interface ButtonGroupProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Задает расположение элементов внутри группы, вертикальное или горизонтальное.\n   */\n  mode?: 'vertical' | 'horizontal';\n  /**\n   * Выставляет в зависимости от `mode` отступ по вертикали или горизонтали.\n   */\n  gap?: 'none' | 'space' | 's' | 'm';\n  /**\n   * Растягивает компонент на всю ширину контейнера.\n   *\n   * Note: Для потомков соответствующее поведение нужно определять самостоятельно, где это необходимо.\n   */\n  stretched?: boolean;\n  /**\n   * Горизонтальное выравнивание элементов внутри группы.\n   */\n  align?: AlignType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ButtonGroup\n */\nexport const ButtonGroup = ({\n  mode = 'horizontal',\n  gap = 'm',\n  stretched = false,\n  align = 'left' /* NOTE: Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */,\n  ...restProps\n}: ButtonGroupProps): React.ReactNode => {\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        styles.host,\n        stylesMode[mode],\n        gap !== 'none' && stylesGap[gap],\n        stretched && styles.stretched,\n        stylesAlign[align],\n      )}\n      role=\"group\"\n      {...restProps}\n    />\n  );\n};\n\nButtonGroup.displayName = 'ButtonGroup';\n"],"names":["classNames","RootComponent","styles","stylesMode","vertical","modeVertical","horizontal","modeHorizontal","stylesGap","space","gapSpace","s","gapS","m","gapM","stylesAlign","left","alignLeft","center","alignCenter","right","alignRight","ButtonGroup","mode","gap","stretched","align","restProps","baseClassName","host","role","displayName"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,aAAa;IACjBC,UAAUF,OAAOG,YAAY;IAC7BC,YAAYJ,OAAOK,cAAc;AACnC;AAEA,MAAMC,YAAY;IAChBC,OAAOP,OAAOQ,QAAQ;IACtBC,GAAGT,OAAOU,IAAI;IACdC,GAAGX,OAAOY,IAAI;AAChB;AAEA,MAAMC,cAAc;IAClBC,MAAMd,OAAOe,SAAS;IACtBC,QAAQhB,OAAOiB,WAAW;IAC1BC,OAAOlB,OAAOmB,UAAU;AAC1B;AAuBA;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,OAAO,YAAY,EACnBC,MAAM,GAAG,EACTC,YAAY,KAAK,EACjBC,QAAQ,OAAO,4EAA4E,GAA7E,EACd,GAAGC,WACc;IACjB,qBACE,KAAC1B;QACC2B,eAAe5B,WACbE,OAAO2B,IAAI,EACX1B,UAAU,CAACoB,KAAK,EAChBC,QAAQ,UAAUhB,SAAS,CAACgB,IAAI,EAChCC,aAAavB,OAAOuB,SAAS,EAC7BV,WAAW,CAACW,MAAM;QAEpBI,MAAK;QACJ,GAAGH,SAAS;;AAGnB,EAAE;AAEFL,YAAYS,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport type { AlignType, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './ButtonGroup.module.css';\n\nconst stylesMode = {\n  vertical: styles.modeVertical,\n  horizontal: styles.modeHorizontal,\n};\n\nconst stylesGap = {\n  space: styles.gapSpace,\n  s: styles.gapS,\n  m: styles.gapM,\n};\n\nconst stylesAlign = {\n  left: styles.alignLeft,\n  center: styles.alignCenter,\n  right: styles.alignRight,\n};\n\nexport interface ButtonGroupProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Задает расположение элементов внутри группы, вертикальное или горизонтальное.\n   */\n  mode?: 'vertical' | 'horizontal';\n  /**\n   * Выставляет в зависимости от `mode` отступ по вертикали или горизонтали.\n   */\n  gap?: 'none' | 'space' | 's' | 'm';\n  /**\n   * Растягивает компонент на всю ширину контейнера.\n   *\n   * Note: Для потомков соответствующее поведение нужно определять самостоятельно, где это необходимо.\n   */\n  stretched?: boolean;\n  /**\n   * Горизонтальное выравнивание элементов внутри группы.\n   */\n  align?: AlignType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ButtonGroup\n */\nexport const ButtonGroup = ({\n  mode = 'horizontal',\n  gap = 'm',\n  stretched = false,\n  align = 'left' /* NOTE: Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */,\n  ...restProps\n}: ButtonGroupProps): React.ReactNode => {\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        styles.host,\n        stylesMode[mode],\n        gap !== 'none' && stylesGap[gap],\n        stretched && styles.stretched,\n        stylesAlign[align],\n      )}\n      role=\"group\"\n      {...restProps}\n    />\n  );\n};\n"],"names":["classNames","RootComponent","styles","stylesMode","vertical","modeVertical","horizontal","modeHorizontal","stylesGap","space","gapSpace","s","gapS","m","gapM","stylesAlign","left","alignLeft","center","alignCenter","right","alignRight","ButtonGroup","mode","gap","stretched","align","restProps","baseClassName","host","role"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,aAAa;IACjBC,UAAUF,OAAOG,YAAY;IAC7BC,YAAYJ,OAAOK,cAAc;AACnC;AAEA,MAAMC,YAAY;IAChBC,OAAOP,OAAOQ,QAAQ;IACtBC,GAAGT,OAAOU,IAAI;IACdC,GAAGX,OAAOY,IAAI;AAChB;AAEA,MAAMC,cAAc;IAClBC,MAAMd,OAAOe,SAAS;IACtBC,QAAQhB,OAAOiB,WAAW;IAC1BC,OAAOlB,OAAOmB,UAAU;AAC1B;AAuBA;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,OAAO,YAAY,EACnBC,MAAM,GAAG,EACTC,YAAY,KAAK,EACjBC,QAAQ,OAAO,4EAA4E,GAA7E,EACd,GAAGC,WACc;IACjB,qBACE,KAAC1B;QACC2B,eAAe5B,WACbE,OAAO2B,IAAI,EACX1B,UAAU,CAACoB,KAAK,EAChBC,QAAQ,UAAUhB,SAAS,CAACgB,IAAI,EAChCC,aAAavB,OAAOuB,SAAS,EAC7BV,WAAW,CAACW,MAAM;QAEpBI,MAAK;QACJ,GAAGH,SAAS;;AAGnB,EAAE"}