@vkontakte/vkui 7.2.1 → 7.3.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Gallery/Gallery.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { CarouselBase } from '../CarouselBase/CarouselBase';\nimport type { BaseGalleryProps } from '../CarouselBase/types';\nimport { useAutoPlay } from './hooks';\n\nexport interface GalleryProps extends BaseGalleryProps {\n  initialSlideIndex?: number;\n  timeout?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gallery\n */\nexport const Gallery = ({\n  initialSlideIndex = 0,\n  children,\n  timeout = 0,\n  onChange,\n  bullets,\n  onDragStart,\n  onDragEnd,\n  ...props\n}: GalleryProps): React.ReactNode => {\n  const [localSlideIndex, setSlideIndex] = React.useState(initialSlideIndex);\n  const isControlled = typeof props.slideIndex === 'number';\n  const slideIndex = isControlled ? (props.slideIndex ?? 0) : localSlideIndex;\n  const slides = React.useMemo(\n    () => React.Children.toArray(children).filter((item) => Boolean(item)),\n    [children],\n  );\n  const childCount = slides.length;\n  const isClient = useIsClient();\n\n  const handleChange: GalleryProps['onChange'] = React.useCallback(\n    (current: number) => {\n      if (current === slideIndex) {\n        return;\n      }\n      !isControlled && setSlideIndex(current);\n      onChange && onChange(current);\n    },\n    [isControlled, onChange, slideIndex],\n  );\n\n  const autoPlayControls = useAutoPlay({\n    timeout,\n    slideIndex,\n    onNext: () => handleChange((slideIndex + 1) % childCount),\n  });\n\n  // prevent invalid slideIndex\n  // any slide index is invalid with no slides, just keep it as is\n  const safeSlideIndex = childCount > 0 ? clamp(slideIndex, 0, childCount - 1) : slideIndex;\n  // notify parent in controlled mode\n  React.useEffect(() => {\n    if (onChange && safeSlideIndex !== slideIndex) {\n      onChange(safeSlideIndex);\n    }\n    setSlideIndex(safeSlideIndex);\n  }, [onChange, safeSlideIndex, slideIndex]);\n\n  if (!isClient) {\n    return null;\n  }\n\n  return (\n    <CarouselBase\n      dragDisabled={isControlled && !onChange}\n      {...props}\n      onDragStart={callMultiple(onDragStart, autoPlayControls.pause)}\n      onDragEnd={callMultiple(onDragEnd, autoPlayControls.resume)}\n      bullets={childCount > 0 && bullets}\n      slideIndex={safeSlideIndex}\n      onChange={handleChange}\n    >\n      {slides}\n    </CarouselBase>\n  );\n};\n"],"names":["React","clamp","useIsClient","callMultiple","CarouselBase","useAutoPlay","Gallery","initialSlideIndex","children","timeout","onChange","bullets","onDragStart","onDragEnd","props","localSlideIndex","setSlideIndex","useState","isControlled","slideIndex","slides","useMemo","Children","toArray","filter","item","Boolean","childCount","length","isClient","handleChange","useCallback","current","autoPlayControls","onNext","safeSlideIndex","useEffect","dragDisabled","pause","resume"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,wBAAqB;AAC3C,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,YAAY,QAAQ,kCAA+B;AAE5D,SAASC,WAAW,QAAQ,aAAU;AAOtC;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EACtBC,oBAAoB,CAAC,EACrBC,QAAQ,EACRC,UAAU,CAAC,EACXC,QAAQ,EACRC,OAAO,EACPC,WAAW,EACXC,SAAS,EACT,GAAGC,OACU;IACb,MAAM,CAACC,iBAAiBC,cAAc,GAAGhB,MAAMiB,QAAQ,CAACV;IACxD,MAAMW,eAAe,OAAOJ,MAAMK,UAAU,KAAK;IACjD,MAAMA,aAAaD,eAAgBJ,MAAMK,UAAU,IAAI,IAAKJ;IAC5D,MAAMK,SAASpB,MAAMqB,OAAO,CAC1B,IAAMrB,MAAMsB,QAAQ,CAACC,OAAO,CAACf,UAAUgB,MAAM,CAAC,CAACC,OAASC,QAAQD,QAChE;QAACjB;KAAS;IAEZ,MAAMmB,aAAaP,OAAOQ,MAAM;IAChC,MAAMC,WAAW3B;IAEjB,MAAM4B,eAAyC9B,MAAM+B,WAAW,CAC9D,CAACC;QACC,IAAIA,YAAYb,YAAY;YAC1B;QACF;QACA,CAACD,gBAAgBF,cAAcgB;QAC/BtB,YAAYA,SAASsB;IACvB,GACA;QAACd;QAAcR;QAAUS;KAAW;IAGtC,MAAMc,mBAAmB5B,YAAY;QACnCI;QACAU;QACAe,QAAQ,IAAMJ,aAAa,AAACX,CAAAA,aAAa,CAAA,IAAKQ;IAChD;IAEA,6BAA6B;IAC7B,gEAAgE;IAChE,MAAMQ,iBAAiBR,aAAa,IAAI1B,MAAMkB,YAAY,GAAGQ,aAAa,KAAKR;IAC/E,mCAAmC;IACnCnB,MAAMoC,SAAS,CAAC;QACd,IAAI1B,YAAYyB,mBAAmBhB,YAAY;YAC7CT,SAASyB;QACX;QACAnB,cAAcmB;IAChB,GAAG;QAACzB;QAAUyB;QAAgBhB;KAAW;IAEzC,IAAI,CAACU,UAAU;QACb,OAAO;IACT;IAEA,qBACE,KAACzB;QACCiC,cAAcnB,gBAAgB,CAACR;QAC9B,GAAGI,KAAK;QACTF,aAAaT,aAAaS,aAAaqB,iBAAiBK,KAAK;QAC7DzB,WAAWV,aAAaU,WAAWoB,iBAAiBM,MAAM;QAC1D5B,SAASgB,aAAa,KAAKhB;QAC3BQ,YAAYgB;QACZzB,UAAUoB;kBAETV;;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/Gallery/Gallery.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { CarouselBase } from '../CarouselBase/CarouselBase';\nimport type { BaseGalleryProps } from '../CarouselBase/types';\nimport { useAutoPlay } from './hooks';\n\nexport interface GalleryProps extends BaseGalleryProps {\n  /**\n   * Индекс слайда по умолчанию.\n   */\n  initialSlideIndex?: number;\n  /**\n   * При передаче происходит автоматический переход к следующему слайду через переданное время в ms.\n   */\n  timeout?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gallery\n */\nexport const Gallery = ({\n  initialSlideIndex = 0,\n  children,\n  timeout = 0,\n  onChange,\n  bullets,\n  onDragStart,\n  onDragEnd,\n  ...props\n}: GalleryProps): React.ReactNode => {\n  const [localSlideIndex, setSlideIndex] = React.useState(initialSlideIndex);\n  const isControlled = typeof props.slideIndex === 'number';\n  const slideIndex = isControlled ? (props.slideIndex ?? 0) : localSlideIndex;\n  const slides = React.useMemo(\n    () => React.Children.toArray(children).filter((item) => Boolean(item)),\n    [children],\n  );\n  const childCount = slides.length;\n  const isClient = useIsClient();\n\n  const handleChange: GalleryProps['onChange'] = React.useCallback(\n    (current: number) => {\n      if (current === slideIndex) {\n        return;\n      }\n      !isControlled && setSlideIndex(current);\n      onChange && onChange(current);\n    },\n    [isControlled, onChange, slideIndex],\n  );\n\n  const autoPlayControls = useAutoPlay({\n    timeout,\n    slideIndex,\n    onNext: () => handleChange((slideIndex + 1) % childCount),\n  });\n\n  // prevent invalid slideIndex\n  // any slide index is invalid with no slides, just keep it as is\n  const safeSlideIndex = childCount > 0 ? clamp(slideIndex, 0, childCount - 1) : slideIndex;\n  // notify parent in controlled mode\n  React.useEffect(() => {\n    if (onChange && safeSlideIndex !== slideIndex) {\n      onChange(safeSlideIndex);\n    }\n    setSlideIndex(safeSlideIndex);\n  }, [onChange, safeSlideIndex, slideIndex]);\n\n  if (!isClient) {\n    return null;\n  }\n\n  return (\n    <CarouselBase\n      dragDisabled={isControlled && !onChange}\n      {...props}\n      onDragStart={callMultiple(onDragStart, autoPlayControls.pause)}\n      onDragEnd={callMultiple(onDragEnd, autoPlayControls.resume)}\n      bullets={childCount > 0 && bullets}\n      slideIndex={safeSlideIndex}\n      onChange={handleChange}\n    >\n      {slides}\n    </CarouselBase>\n  );\n};\n"],"names":["React","clamp","useIsClient","callMultiple","CarouselBase","useAutoPlay","Gallery","initialSlideIndex","children","timeout","onChange","bullets","onDragStart","onDragEnd","props","localSlideIndex","setSlideIndex","useState","isControlled","slideIndex","slides","useMemo","Children","toArray","filter","item","Boolean","childCount","length","isClient","handleChange","useCallback","current","autoPlayControls","onNext","safeSlideIndex","useEffect","dragDisabled","pause","resume"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,wBAAqB;AAC3C,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,YAAY,QAAQ,kCAA+B;AAE5D,SAASC,WAAW,QAAQ,aAAU;AAatC;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EACtBC,oBAAoB,CAAC,EACrBC,QAAQ,EACRC,UAAU,CAAC,EACXC,QAAQ,EACRC,OAAO,EACPC,WAAW,EACXC,SAAS,EACT,GAAGC,OACU;IACb,MAAM,CAACC,iBAAiBC,cAAc,GAAGhB,MAAMiB,QAAQ,CAACV;IACxD,MAAMW,eAAe,OAAOJ,MAAMK,UAAU,KAAK;IACjD,MAAMA,aAAaD,eAAgBJ,MAAMK,UAAU,IAAI,IAAKJ;IAC5D,MAAMK,SAASpB,MAAMqB,OAAO,CAC1B,IAAMrB,MAAMsB,QAAQ,CAACC,OAAO,CAACf,UAAUgB,MAAM,CAAC,CAACC,OAASC,QAAQD,QAChE;QAACjB;KAAS;IAEZ,MAAMmB,aAAaP,OAAOQ,MAAM;IAChC,MAAMC,WAAW3B;IAEjB,MAAM4B,eAAyC9B,MAAM+B,WAAW,CAC9D,CAACC;QACC,IAAIA,YAAYb,YAAY;YAC1B;QACF;QACA,CAACD,gBAAgBF,cAAcgB;QAC/BtB,YAAYA,SAASsB;IACvB,GACA;QAACd;QAAcR;QAAUS;KAAW;IAGtC,MAAMc,mBAAmB5B,YAAY;QACnCI;QACAU;QACAe,QAAQ,IAAMJ,aAAa,AAACX,CAAAA,aAAa,CAAA,IAAKQ;IAChD;IAEA,6BAA6B;IAC7B,gEAAgE;IAChE,MAAMQ,iBAAiBR,aAAa,IAAI1B,MAAMkB,YAAY,GAAGQ,aAAa,KAAKR;IAC/E,mCAAmC;IACnCnB,MAAMoC,SAAS,CAAC;QACd,IAAI1B,YAAYyB,mBAAmBhB,YAAY;YAC7CT,SAASyB;QACX;QACAnB,cAAcmB;IAChB,GAAG;QAACzB;QAAUyB;QAAgBhB;KAAW;IAEzC,IAAI,CAACU,UAAU;QACb,OAAO;IACT;IAEA,qBACE,KAACzB;QACCiC,cAAcnB,gBAAgB,CAACR;QAC9B,GAAGI,KAAK;QACTF,aAAaT,aAAaS,aAAaqB,iBAAiBK,KAAK;QAC7DzB,WAAWV,aAAaU,WAAWoB,iBAAiBM,MAAM;QAC1D5B,SAASgB,aAAa,KAAKhB;QAC3BQ,YAAYgB;QACZzB,UAAUoB;kBAETV;;AAGP,EAAE"}

package/dist/cssm/components/Gallery/hooks.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+/* eslint-disable jsdoc/require-jsdoc */ import * as React from "react";
 import { useStableCallback } from "../../hooks/useStableCallback.js";
 import { useDOM } from "../../lib/dom.js";
 export function useAutoPlay({ timeout, slideIndex, onNext }) {

package/dist/cssm/components/Gallery/hooks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Gallery/hooks.ts"],"sourcesContent":["import * as React from 'react';\nimport { useStableCallback } from '../../hooks/useStableCallback';\nimport { useDOM } from '../../lib/dom';\nimport type { TimeoutId } from '../../types';\n\nexport interface AutoPlayConfig {\n  timeout: number;\n  slideIndex: number;\n  onNext: VoidFunction;\n}\n\nexport function useAutoPlay({ timeout, slideIndex, onNext }: AutoPlayConfig): {\n  pause: VoidFunction;\n  resume: VoidFunction;\n} {\n  const { document } = useDOM();\n  const [paused, setPaused] = React.useState(false);\n  const timeoutRef = React.useRef<TimeoutId>(null);\n  const callbackFn = useStableCallback(onNext);\n\n  const pause = React.useCallback(() => setPaused(true), []);\n  const resume = React.useCallback(() => setPaused(false), []);\n\n  // Выносим функции очистки и старта таймера в отдельные функции\n  const clearAutoPlayTimeout = React.useCallback(() => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n  }, []);\n\n  const startAutoPlayTimeout = React.useCallback(() => {\n    if (!document || !timeout || paused) {\n      return;\n    }\n\n    if (document.visibilityState === 'visible') {\n      clearAutoPlayTimeout();\n      timeoutRef.current = setTimeout(callbackFn, timeout);\n    } else {\n      clearAutoPlayTimeout();\n    }\n  }, [document, timeout, paused, clearAutoPlayTimeout, callbackFn]);\n\n  // Основной эффект для управления автопроигрыванием\n  React.useEffect(\n    function initializeAutoPlay() {\n      if (!document || !timeout || paused) {\n        return;\n      }\n\n      startAutoPlayTimeout();\n      document.addEventListener('visibilitychange', startAutoPlayTimeout);\n\n      return () => {\n        clearAutoPlayTimeout();\n        document.removeEventListener('visibilitychange', startAutoPlayTimeout);\n      };\n    },\n    [document, timeout, slideIndex, startAutoPlayTimeout, clearAutoPlayTimeout, paused],\n  );\n\n  return {\n    resume,\n    pause,\n  };\n}\n"],"names":["React","useStableCallback","useDOM","useAutoPlay","timeout","slideIndex","onNext","document","paused","setPaused","useState","timeoutRef","useRef","callbackFn","pause","useCallback","resume","clearAutoPlayTimeout","current","clearTimeout","startAutoPlayTimeout","visibilityState","setTimeout","useEffect","initializeAutoPlay","addEventListener","removeEventListener"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,mCAAgC;AAClE,SAASC,MAAM,QAAQ,mBAAgB;AASvC,OAAO,SAASC,YAAY,EAAEC,OAAO,EAAEC,UAAU,EAAEC,MAAM,EAAkB;IAIzE,MAAM,EAAEC,QAAQ,EAAE,GAAGL;IACrB,MAAM,CAACM,QAAQC,UAAU,GAAGT,MAAMU,QAAQ,CAAC;IAC3C,MAAMC,aAAaX,MAAMY,MAAM,CAAY;IAC3C,MAAMC,aAAaZ,kBAAkBK;IAErC,MAAMQ,QAAQd,MAAMe,WAAW,CAAC,IAAMN,UAAU,OAAO,EAAE;IACzD,MAAMO,SAAShB,MAAMe,WAAW,CAAC,IAAMN,UAAU,QAAQ,EAAE;IAE3D,+DAA+D;IAC/D,MAAMQ,uBAAuBjB,MAAMe,WAAW,CAAC;QAC7C,IAAIJ,WAAWO,OAAO,EAAE;YACtBC,aAAaR,WAAWO,OAAO;YAC/BP,WAAWO,OAAO,GAAG;QACvB;IACF,GAAG,EAAE;IAEL,MAAME,uBAAuBpB,MAAMe,WAAW,CAAC;QAC7C,IAAI,CAACR,YAAY,CAACH,WAAWI,QAAQ;YACnC;QACF;QAEA,IAAID,SAASc,eAAe,KAAK,WAAW;YAC1CJ;YACAN,WAAWO,OAAO,GAAGI,WAAWT,YAAYT;QAC9C,OAAO;YACLa;QACF;IACF,GAAG;QAACV;QAAUH;QAASI;QAAQS;QAAsBJ;KAAW;IAEhE,mDAAmD;IACnDb,MAAMuB,SAAS,CACb,SAASC;QACP,IAAI,CAACjB,YAAY,CAACH,WAAWI,QAAQ;YACnC;QACF;QAEAY;QACAb,SAASkB,gBAAgB,CAAC,oBAAoBL;QAE9C,OAAO;YACLH;YACAV,SAASmB,mBAAmB,CAAC,oBAAoBN;QACnD;IACF,GACA;QAACb;QAAUH;QAASC;QAAYe;QAAsBH;QAAsBT;KAAO;IAGrF,OAAO;QACLQ;QACAF;IACF;AACF"}
+{"version":3,"sources":["../../../../src/components/Gallery/hooks.ts"],"sourcesContent":["/* eslint-disable jsdoc/require-jsdoc */\n\nimport * as React from 'react';\nimport { useStableCallback } from '../../hooks/useStableCallback';\nimport { useDOM } from '../../lib/dom';\nimport type { TimeoutId } from '../../types';\n\nexport interface AutoPlayConfig {\n  timeout: number;\n  slideIndex: number;\n  onNext: VoidFunction;\n}\n\nexport function useAutoPlay({ timeout, slideIndex, onNext }: AutoPlayConfig): {\n  pause: VoidFunction;\n  resume: VoidFunction;\n} {\n  const { document } = useDOM();\n  const [paused, setPaused] = React.useState(false);\n  const timeoutRef = React.useRef<TimeoutId>(null);\n  const callbackFn = useStableCallback(onNext);\n\n  const pause = React.useCallback(() => setPaused(true), []);\n  const resume = React.useCallback(() => setPaused(false), []);\n\n  // Выносим функции очистки и старта таймера в отдельные функции\n  const clearAutoPlayTimeout = React.useCallback(() => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n  }, []);\n\n  const startAutoPlayTimeout = React.useCallback(() => {\n    if (!document || !timeout || paused) {\n      return;\n    }\n\n    if (document.visibilityState === 'visible') {\n      clearAutoPlayTimeout();\n      timeoutRef.current = setTimeout(callbackFn, timeout);\n    } else {\n      clearAutoPlayTimeout();\n    }\n  }, [document, timeout, paused, clearAutoPlayTimeout, callbackFn]);\n\n  // Основной эффект для управления автопроигрыванием\n  React.useEffect(\n    function initializeAutoPlay() {\n      if (!document || !timeout || paused) {\n        return;\n      }\n\n      startAutoPlayTimeout();\n      document.addEventListener('visibilitychange', startAutoPlayTimeout);\n\n      return () => {\n        clearAutoPlayTimeout();\n        document.removeEventListener('visibilitychange', startAutoPlayTimeout);\n      };\n    },\n    [document, timeout, slideIndex, startAutoPlayTimeout, clearAutoPlayTimeout, paused],\n  );\n\n  return {\n    resume,\n    pause,\n  };\n}\n"],"names":["React","useStableCallback","useDOM","useAutoPlay","timeout","slideIndex","onNext","document","paused","setPaused","useState","timeoutRef","useRef","callbackFn","pause","useCallback","resume","clearAutoPlayTimeout","current","clearTimeout","startAutoPlayTimeout","visibilityState","setTimeout","useEffect","initializeAutoPlay","addEventListener","removeEventListener"],"mappings":"AAAA,sCAAsC,GAEtC,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,mCAAgC;AAClE,SAASC,MAAM,QAAQ,mBAAgB;AASvC,OAAO,SAASC,YAAY,EAAEC,OAAO,EAAEC,UAAU,EAAEC,MAAM,EAAkB;IAIzE,MAAM,EAAEC,QAAQ,EAAE,GAAGL;IACrB,MAAM,CAACM,QAAQC,UAAU,GAAGT,MAAMU,QAAQ,CAAC;IAC3C,MAAMC,aAAaX,MAAMY,MAAM,CAAY;IAC3C,MAAMC,aAAaZ,kBAAkBK;IAErC,MAAMQ,QAAQd,MAAMe,WAAW,CAAC,IAAMN,UAAU,OAAO,EAAE;IACzD,MAAMO,SAAShB,MAAMe,WAAW,CAAC,IAAMN,UAAU,QAAQ,EAAE;IAE3D,+DAA+D;IAC/D,MAAMQ,uBAAuBjB,MAAMe,WAAW,CAAC;QAC7C,IAAIJ,WAAWO,OAAO,EAAE;YACtBC,aAAaR,WAAWO,OAAO;YAC/BP,WAAWO,OAAO,GAAG;QACvB;IACF,GAAG,EAAE;IAEL,MAAME,uBAAuBpB,MAAMe,WAAW,CAAC;QAC7C,IAAI,CAACR,YAAY,CAACH,WAAWI,QAAQ;YACnC;QACF;QAEA,IAAID,SAASc,eAAe,KAAK,WAAW;YAC1CJ;YACAN,WAAWO,OAAO,GAAGI,WAAWT,YAAYT;QAC9C,OAAO;YACLa;QACF;IACF,GAAG;QAACV;QAAUH;QAASI;QAAQS;QAAsBJ;KAAW;IAEhE,mDAAmD;IACnDb,MAAMuB,SAAS,CACb,SAASC;QACP,IAAI,CAACjB,YAAY,CAACH,WAAWI,QAAQ;YACnC;QACF;QAEAY;QACAb,SAASkB,gBAAgB,CAAC,oBAAoBL;QAE9C,OAAO;YACLH;YACAV,SAASmB,mBAAmB,CAAC,oBAAoBN;QACnD;IACF,GACA;QAACb;QAAUH;QAASC;QAAYe;QAAsBH;QAAsBT;KAAO;IAGrF,OAAO;QACLQ;QACAF;IACF;AACF"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Gradient/Gradient.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Gradient.module.css';\n\nconst modeStyles = {\n  overlay: styles.modeOverlay,\n  tint: styles.modeTint,\n};\n\nexport interface GradientProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Тип градиента\n   */\n  mode?: 'tint' | 'default' | 'overlay';\n  /**\n   * Направление градиента\n   */\n  to?: 'top' | 'bottom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gradient\n */\nexport const Gradient = ({\n  mode = 'default',\n  to = 'top',\n  ...restProps\n}: GradientProps): React.ReactNode => {\n  return (\n    <RootComponent\n      role=\"presentation\"\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        mode !== 'default' && modeStyles[mode],\n        to === 'bottom' && styles.toBottom,\n      )}\n    />\n  );\n};\n"],"names":["classNames","RootComponent","styles","modeStyles","overlay","modeOverlay","tint","modeTint","Gradient","mode","to","restProps","role","baseClassName","host","toBottom"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,aAAa;IACjBC,SAASF,OAAOG,WAAW;IAC3BC,MAAMJ,OAAOK,QAAQ;AACvB;AAaA;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,OAAO,SAAS,EAChBC,KAAK,KAAK,EACV,GAAGC,WACW;IACd,qBACE,KAACV;QACCW,MAAK;QACJ,GAAGD,SAAS;QACbE,eAAeb,WACbE,OAAOY,IAAI,EACXL,SAAS,aAAaN,UAAU,CAACM,KAAK,EACtCC,OAAO,YAAYR,OAAOa,QAAQ;;AAI1C,EAAE"}
+{"version":3,"sources":["../../../../src/components/Gradient/Gradient.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Gradient.module.css';\n\nconst modeStyles = {\n  overlay: styles.modeOverlay,\n  tint: styles.modeTint,\n};\n\nexport interface GradientProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Тип градиента.\n   */\n  mode?: 'tint' | 'default' | 'overlay';\n  /**\n   * Направление градиента.\n   */\n  to?: 'top' | 'bottom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gradient\n */\nexport const Gradient = ({\n  mode = 'default',\n  to = 'top',\n  ...restProps\n}: GradientProps): React.ReactNode => {\n  return (\n    <RootComponent\n      role=\"presentation\"\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        mode !== 'default' && modeStyles[mode],\n        to === 'bottom' && styles.toBottom,\n      )}\n    />\n  );\n};\n"],"names":["classNames","RootComponent","styles","modeStyles","overlay","modeOverlay","tint","modeTint","Gradient","mode","to","restProps","role","baseClassName","host","toBottom"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,aAAa;IACjBC,SAASF,OAAOG,WAAW;IAC3BC,MAAMJ,OAAOK,QAAQ;AACvB;AAaA;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,OAAO,SAAS,EAChBC,KAAK,KAAK,EACV,GAAGC,WACW;IACd,qBACE,KAACV;QACCW,MAAK;QACJ,GAAGD,SAAS;QACbE,eAAeb,WACbE,OAAOY,IAAI,EACXL,SAAS,aAAaN,UAAU,CAACM,KAAK,EACtCC,OAAO,YAAYR,OAAOa,QAAQ;;AAI1C,EAAE"}

package/dist/cssm/components/Group/Group.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { hasReactNode } from "@vkontakte/vkjs";
+import { defineComponentDisplayNames } from "../../lib/react/defineComponentDisplayNames.js";
 import { GroupContainer } from "./GroupContainer.js";
 import { GroupDescription } from "./GroupDescription.js";
 import { GroupExpandedContent } from "./GroupExpandedContent.js";
@@ -21,14 +22,15 @@ import { GroupHeader } from "./GroupHeader.js";
         ]
     });
 };
-Group.displayName = 'Group';
 Group.Container = GroupContainer;
-Group.Container.displayName = 'Group.Container';
 Group.Header = GroupHeader;
-Group.Header.displayName = 'Group.Header';
 Group.Description = GroupDescription;
-Group.Description.displayName = 'Group.Description';
 Group.ExpandedContent = GroupExpandedContent;
-Group.ExpandedContent.displayName = 'Group.ExpandedContent';
+if (process.env.NODE_ENV !== 'production') {
+    defineComponentDisplayNames(Group.Container, 'Group.Container');
+    defineComponentDisplayNames(Group.Header, 'Group.Header');
+    defineComponentDisplayNames(Group.Description, 'Group.Description');
+    defineComponentDisplayNames(Group.ExpandedContent, 'Group.ExpandedContent');
+}
 
 //# sourceMappingURL=Group.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { GroupContainer, type GroupContainerProps } from './GroupContainer';\nimport { GroupDescription } from './GroupDescription';\nimport { GroupExpandedContent } from './GroupExpandedContent';\nimport { GroupHeader } from './GroupHeader';\n\nexport interface GroupProps extends GroupContainerProps {\n  header?: React.ReactNode;\n  description?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Group\n */\nexport const Group: React.FC<GroupProps> & {\n  Container: typeof GroupContainer;\n  Header: typeof GroupHeader;\n  Description: typeof GroupDescription;\n  ExpandedContent: typeof GroupExpandedContent;\n} = ({ header, description, children, ...restProps }: GroupProps): React.ReactNode => {\n  return (\n    <GroupContainer {...restProps}>\n      {hasReactNode(header) && <GroupHeader>{header}</GroupHeader>}\n      {children}\n      {hasReactNode(description) && <GroupDescription>{description}</GroupDescription>}\n    </GroupContainer>\n  );\n};\n\nGroup.displayName = 'Group';\nGroup.Container = GroupContainer;\nGroup.Container.displayName = 'Group.Container';\nGroup.Header = GroupHeader;\nGroup.Header.displayName = 'Group.Header';\nGroup.Description = GroupDescription;\nGroup.Description.displayName = 'Group.Description';\nGroup.ExpandedContent = GroupExpandedContent;\nGroup.ExpandedContent.displayName = 'Group.ExpandedContent';\n"],"names":["React","hasReactNode","GroupContainer","GroupDescription","GroupExpandedContent","GroupHeader","Group","header","description","children","restProps","displayName","Container","Header","Description","ExpandedContent"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,cAAc,QAAkC,sBAAmB;AAC5E,SAASC,gBAAgB,QAAQ,wBAAqB;AACtD,SAASC,oBAAoB,QAAQ,4BAAyB;AAC9D,SAASC,WAAW,QAAQ,mBAAgB;AAO5C;;CAEC,GACD,OAAO,MAAMC,QAKT,CAAC,EAAEC,MAAM,EAAEC,WAAW,EAAEC,QAAQ,EAAE,GAAGC,WAAuB;IAC9D,qBACE,MAACR;QAAgB,GAAGQ,SAAS;;YAC1BT,aAAaM,yBAAW,KAACF;0BAAaE;;YACtCE;YACAR,aAAaO,8BAAgB,KAACL;0BAAkBK;;;;AAGvD,EAAE;AAEFF,MAAMK,WAAW,GAAG;AACpBL,MAAMM,SAAS,GAAGV;AAClBI,MAAMM,SAAS,CAACD,WAAW,GAAG;AAC9BL,MAAMO,MAAM,GAAGR;AACfC,MAAMO,MAAM,CAACF,WAAW,GAAG;AAC3BL,MAAMQ,WAAW,GAAGX;AACpBG,MAAMQ,WAAW,CAACH,WAAW,GAAG;AAChCL,MAAMS,eAAe,GAAGX;AACxBE,MAAMS,eAAe,CAACJ,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport { GroupContainer, type GroupContainerProps } from './GroupContainer';\nimport { GroupDescription } from './GroupDescription';\nimport { GroupExpandedContent } from './GroupExpandedContent';\nimport { GroupHeader } from './GroupHeader';\n\nexport interface GroupProps extends GroupContainerProps {\n  /**\n   * Элемент заголовка группы.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подпись под содержимым.\n   */\n  description?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Group\n */\nexport const Group: React.FC<GroupProps> & {\n  Container: typeof GroupContainer;\n  Header: typeof GroupHeader;\n  Description: typeof GroupDescription;\n  ExpandedContent: typeof GroupExpandedContent;\n} = ({ header, description, children, ...restProps }: GroupProps): React.ReactNode => {\n  return (\n    <GroupContainer {...restProps}>\n      {hasReactNode(header) && <GroupHeader>{header}</GroupHeader>}\n      {children}\n      {hasReactNode(description) && <GroupDescription>{description}</GroupDescription>}\n    </GroupContainer>\n  );\n};\n\nGroup.Container = GroupContainer;\nGroup.Header = GroupHeader;\nGroup.Description = GroupDescription;\nGroup.ExpandedContent = GroupExpandedContent;\n\nif (process.env.NODE_ENV !== 'production') {\n  defineComponentDisplayNames(Group.Container, 'Group.Container');\n  defineComponentDisplayNames(Group.Header, 'Group.Header');\n  defineComponentDisplayNames(Group.Description, 'Group.Description');\n  defineComponentDisplayNames(Group.ExpandedContent, 'Group.ExpandedContent');\n}\n"],"names":["React","hasReactNode","defineComponentDisplayNames","GroupContainer","GroupDescription","GroupExpandedContent","GroupHeader","Group","header","description","children","restProps","Container","Header","Description","ExpandedContent","process","env","NODE_ENV"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,2BAA2B,QAAQ,iDAA8C;AAC1F,SAASC,cAAc,QAAkC,sBAAmB;AAC5E,SAASC,gBAAgB,QAAQ,wBAAqB;AACtD,SAASC,oBAAoB,QAAQ,4BAAyB;AAC9D,SAASC,WAAW,QAAQ,mBAAgB;AAa5C;;CAEC,GACD,OAAO,MAAMC,QAKT,CAAC,EAAEC,MAAM,EAAEC,WAAW,EAAEC,QAAQ,EAAE,GAAGC,WAAuB;IAC9D,qBACE,MAACR;QAAgB,GAAGQ,SAAS;;YAC1BV,aAAaO,yBAAW,KAACF;0BAAaE;;YACtCE;YACAT,aAAaQ,8BAAgB,KAACL;0BAAkBK;;;;AAGvD,EAAE;AAEFF,MAAMK,SAAS,GAAGT;AAClBI,MAAMM,MAAM,GAAGP;AACfC,MAAMO,WAAW,GAAGV;AACpBG,MAAMQ,eAAe,GAAGV;AAExB,IAAIW,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzChB,4BAA4BK,MAAMK,SAAS,EAAE;IAC7CV,4BAA4BK,MAAMM,MAAM,EAAE;IAC1CX,4BAA4BK,MAAMO,WAAW,EAAE;IAC/CZ,4BAA4BK,MAAMQ,eAAe,EAAE;AACrD"}

package/dist/cssm/components/Group/GroupContainer.js

@@ -78,6 +78,5 @@ export const GroupContainer = ({ children, separator = 'auto', mode: modeProps,
         ]
     });
 };
-GroupContainer.displayName = 'GroupContainer';
 
 //# sourceMappingURL=GroupContainer.js.map

package/dist/cssm/components/Group/GroupContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Group/GroupContainer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useModalContext } from '../../context/ModalContext';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { SizeTypeValues } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Group.module.css';\n\nconst sizeXClassNames = {\n  none: classNames(styles.sizeXNone, 'vkuiInternalGroup--sizeX-none'),\n  regular: styles.sizeXRegular,\n  compact: styles.sizeXCompact,\n};\n\nconst stylesMode = {\n  none: classNames(styles.modeNone, 'vkuiInternalGroup--mode-none'),\n  plain: classNames(styles.modePlain, 'vkuiInternalGroup--mode-plain'),\n  card: classNames(styles.modeCard, 'vkuiInternalGroup--mode-card'),\n};\n\nconst stylesPadding = {\n  s: styles.paddingS,\n  m: styles.paddingM,\n};\n\ntype GroupMode = 'plain' | 'card' | 'none';\n\n/**\n * Вычисляем mode для Group.\n */\nfunction useGroupMode(\n  forcedMode: GroupContainerProps['mode'],\n  sizeX: SizeTypeValues | 'none',\n  isInsideModal: boolean,\n): GroupMode {\n  const { layout } = React.useContext(AppRootContext);\n\n  if (forcedMode) {\n    return forcedMode;\n  }\n\n  if (isInsideModal) {\n    return 'plain';\n  }\n\n  if (layout) {\n    return layout;\n  }\n\n  if (sizeX !== 'none') {\n    return sizeX === 'regular' ? 'card' : 'plain';\n  }\n\n  return 'none';\n}\n\nexport type GroupContainerProps = HTMLAttributesWithRootRef<HTMLElement> &\n  HasComponent & {\n    /**\n    `show` (только для `mode=\"plain\"`) - разделитель всегда показывается\n    `hide` - разделитель всегда спрятан,\n    `auto` - разделитель рисуется автоматически между соседними группами.\n   */\n    separator?: 'show' | 'hide' | 'auto';\n    /**\n     * Режим отображения. Если установлен `card`, выглядит как карточка c\n     * обводкой и внешними отступами. Если `plain` — без отступов и обводки.\n     * По умолчанию режим отображения зависит от `sizeX` (`mode=card` при `sizeX=REGULAR` и `mode=plain` при `sizeX=COMPACT`)\n     * В модальных окнах по умолчанию `plain`.\n     */\n    mode?: 'plain' | 'card';\n    /**\n     * Отвечает за отступы вокруг контента в режиме `card`.\n     */\n    padding?: 's' | 'm';\n  };\n\nconst warn = warnOnce('Group');\n\nexport const GroupContainer: React.FC<GroupContainerProps> = ({\n  children,\n  separator = 'auto',\n  mode: modeProps,\n  padding = 'm',\n  tabIndex: tabIndexProp,\n  ...restProps\n}: GroupContainerProps) => {\n  const isInsideModal = useModalContext().id !== null;\n  const { sizeX = 'none' } = useAdaptivity();\n\n  const mode = useGroupMode(modeProps, sizeX, isInsideModal);\n\n  const isTabPanel = restProps.role === 'tabpanel';\n\n  if (\n    process.env.NODE_ENV === 'development' &&\n    isTabPanel &&\n    (!restProps['aria-controls'] || !restProps['id'])\n  ) {\n    warn(\n      'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"',\n    );\n  }\n\n  const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n  let siblingSeparatorElement: React.ReactNode = null;\n  switch (separator) {\n    case 'auto':\n      siblingSeparatorElement = <div className={styles.separatorSibling} />;\n      break;\n    case 'show':\n      siblingSeparatorElement = (\n        <div\n          className={classNames(\n            styles.separatorSibling,\n            mode === 'plain' || mode === 'none' ? styles.separatorSiblingForced : undefined,\n          )}\n        />\n      );\n      break;\n    case 'hide':\n      break;\n  }\n  return (\n    <>\n      <RootComponent\n        Component=\"section\"\n        {...restProps}\n        tabIndex={tabIndex}\n        baseClassName={classNames(\n          'vkuiInternalGroup',\n          styles.host,\n          sizeXClassNames[sizeX],\n          mode === 'plain' && isInsideModal && styles.modePlainInsideModal,\n          stylesMode[mode],\n          stylesPadding[padding],\n        )}\n      >\n        {children}\n      </RootComponent>\n      {siblingSeparatorElement}\n    </>\n  );\n};\nGroupContainer.displayName = 'GroupContainer';\n"],"names":["React","classNames","useModalContext","useAdaptivity","warnOnce","AppRootContext","RootComponent","styles","sizeXClassNames","none","sizeXNone","regular","sizeXRegular","compact","sizeXCompact","stylesMode","modeNone","plain","modePlain","card","modeCard","stylesPadding","s","paddingS","m","paddingM","useGroupMode","forcedMode","sizeX","isInsideModal","layout","useContext","warn","GroupContainer","children","separator","mode","modeProps","padding","tabIndex","tabIndexProp","restProps","id","isTabPanel","role","process","env","NODE_ENV","undefined","siblingSeparatorElement","div","className","separatorSibling","separatorSiblingForced","Component","baseClassName","host","modePlainInsideModal","displayName"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,eAAe,QAAQ,gCAA6B;AAC7D,SAASC,aAAa,QAAQ,+BAA4B;AAE1D,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SAASC,cAAc,QAAQ,+BAA4B;AAC3D,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMR,WAAWM,OAAOG,SAAS,EAAE;IACnCC,SAASJ,OAAOK,YAAY;IAC5BC,SAASN,OAAOO,YAAY;AAC9B;AAEA,MAAMC,aAAa;IACjBN,MAAMR,WAAWM,OAAOS,QAAQ,EAAE;IAClCC,OAAOhB,WAAWM,OAAOW,SAAS,EAAE;IACpCC,MAAMlB,WAAWM,OAAOa,QAAQ,EAAE;AACpC;AAEA,MAAMC,gBAAgB;IACpBC,GAAGf,OAAOgB,QAAQ;IAClBC,GAAGjB,OAAOkB,QAAQ;AACpB;AAIA;;CAEC,GACD,SAASC,aACPC,UAAuC,EACvCC,KAA8B,EAC9BC,aAAsB;IAEtB,MAAM,EAAEC,MAAM,EAAE,GAAG9B,MAAM+B,UAAU,CAAC1B;IAEpC,IAAIsB,YAAY;QACd,OAAOA;IACT;IAEA,IAAIE,eAAe;QACjB,OAAO;IACT;IAEA,IAAIC,QAAQ;QACV,OAAOA;IACT;IAEA,IAAIF,UAAU,QAAQ;QACpB,OAAOA,UAAU,YAAY,SAAS;IACxC;IAEA,OAAO;AACT;AAuBA,MAAMI,OAAO5B,SAAS;AAEtB,OAAO,MAAM6B,iBAAgD,CAAC,EAC5DC,QAAQ,EACRC,YAAY,MAAM,EAClBC,MAAMC,SAAS,EACfC,UAAU,GAAG,EACbC,UAAUC,YAAY,EACtB,GAAGC,WACiB;IACpB,MAAMZ,gBAAgB3B,kBAAkBwC,EAAE,KAAK;IAC/C,MAAM,EAAEd,QAAQ,MAAM,EAAE,GAAGzB;IAE3B,MAAMiC,OAAOV,aAAaW,WAAWT,OAAOC;IAE5C,MAAMc,aAAaF,UAAUG,IAAI,KAAK;IAEtC,IACEC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBACzBJ,cACC,CAAA,CAACF,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAT,KACE;IAEJ;IAEA,MAAMO,WAAWI,cAAcH,iBAAiBQ,YAAY,IAAIR;IAEhE,IAAIS,0BAA2C;IAC/C,OAAQd;QACN,KAAK;YACHc,wCAA0B,KAACC;gBAAIC,WAAW5C,OAAO6C,gBAAgB;;YACjE;QACF,KAAK;YACHH,wCACE,KAACC;gBACCC,WAAWlD,WACTM,OAAO6C,gBAAgB,EACvBhB,SAAS,WAAWA,SAAS,SAAS7B,OAAO8C,sBAAsB,GAAGL;;YAI5E;QACF,KAAK;YACH;IACJ;IACA,qBACE;;0BACE,KAAC1C;gBACCgD,WAAU;gBACT,GAAGb,SAAS;gBACbF,UAAUA;gBACVgB,eAAetD,WACb,qBACAM,OAAOiD,IAAI,EACXhD,eAAe,CAACoB,MAAM,EACtBQ,SAAS,WAAWP,iBAAiBtB,OAAOkD,oBAAoB,EAChE1C,UAAU,CAACqB,KAAK,EAChBf,aAAa,CAACiB,QAAQ;0BAGvBJ;;YAEFe;;;AAGP,EAAE;AACFhB,eAAeyB,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Group/GroupContainer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useModalContext } from '../../context/ModalContext';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { SizeTypeValues } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Group.module.css';\n\nconst sizeXClassNames = {\n  none: classNames(styles.sizeXNone, 'vkuiInternalGroup--sizeX-none'),\n  regular: styles.sizeXRegular,\n  compact: styles.sizeXCompact,\n};\n\nconst stylesMode = {\n  none: classNames(styles.modeNone, 'vkuiInternalGroup--mode-none'),\n  plain: classNames(styles.modePlain, 'vkuiInternalGroup--mode-plain'),\n  card: classNames(styles.modeCard, 'vkuiInternalGroup--mode-card'),\n};\n\nconst stylesPadding = {\n  s: styles.paddingS,\n  m: styles.paddingM,\n};\n\ntype GroupMode = 'plain' | 'card' | 'none';\n\n/**\n * Вычисляем mode для Group.\n */\nfunction useGroupMode(\n  forcedMode: GroupContainerProps['mode'],\n  sizeX: SizeTypeValues | 'none',\n  isInsideModal: boolean,\n): GroupMode {\n  const { layout } = React.useContext(AppRootContext);\n\n  if (forcedMode) {\n    return forcedMode;\n  }\n\n  if (isInsideModal) {\n    return 'plain';\n  }\n\n  if (layout) {\n    return layout;\n  }\n\n  if (sizeX !== 'none') {\n    return sizeX === 'regular' ? 'card' : 'plain';\n  }\n\n  return 'none';\n}\n\nexport type GroupContainerProps = HTMLAttributesWithRootRef<HTMLElement> &\n  HasComponent & {\n    /**\n    `show` (только для `mode=\"plain\"`) - разделитель всегда показывается\n    `hide` - разделитель всегда спрятан,\n    `auto` - разделитель рисуется автоматически между соседними группами.\n   */\n    separator?: 'show' | 'hide' | 'auto';\n    /**\n     * Режим отображения. Если установлен `card`, выглядит как карточка c\n     * обводкой и внешними отступами. Если `plain` — без отступов и обводки.\n     * По умолчанию режим отображения зависит от `sizeX` (`mode=card` при `sizeX=REGULAR` и `mode=plain` при `sizeX=COMPACT`)\n     * В модальных окнах по умолчанию `plain`.\n     */\n    mode?: 'plain' | 'card';\n    /**\n     * Отвечает за отступы вокруг контента в режиме `card`.\n     */\n    padding?: 's' | 'm';\n  };\n\nconst warn = warnOnce('Group');\n\nexport const GroupContainer = ({\n  children,\n  separator = 'auto',\n  mode: modeProps,\n  padding = 'm',\n  tabIndex: tabIndexProp,\n  ...restProps\n}: GroupContainerProps) => {\n  const isInsideModal = useModalContext().id !== null;\n  const { sizeX = 'none' } = useAdaptivity();\n\n  const mode = useGroupMode(modeProps, sizeX, isInsideModal);\n\n  const isTabPanel = restProps.role === 'tabpanel';\n\n  if (\n    process.env.NODE_ENV === 'development' &&\n    isTabPanel &&\n    (!restProps['aria-controls'] || !restProps['id'])\n  ) {\n    warn(\n      'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"',\n    );\n  }\n\n  const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n  let siblingSeparatorElement: React.ReactNode = null;\n  switch (separator) {\n    case 'auto':\n      siblingSeparatorElement = <div className={styles.separatorSibling} />;\n      break;\n    case 'show':\n      siblingSeparatorElement = (\n        <div\n          className={classNames(\n            styles.separatorSibling,\n            mode === 'plain' || mode === 'none' ? styles.separatorSiblingForced : undefined,\n          )}\n        />\n      );\n      break;\n    case 'hide':\n      break;\n  }\n  return (\n    <>\n      <RootComponent\n        Component=\"section\"\n        {...restProps}\n        tabIndex={tabIndex}\n        baseClassName={classNames(\n          'vkuiInternalGroup',\n          styles.host,\n          sizeXClassNames[sizeX],\n          mode === 'plain' && isInsideModal && styles.modePlainInsideModal,\n          stylesMode[mode],\n          stylesPadding[padding],\n        )}\n      >\n        {children}\n      </RootComponent>\n      {siblingSeparatorElement}\n    </>\n  );\n};\n"],"names":["React","classNames","useModalContext","useAdaptivity","warnOnce","AppRootContext","RootComponent","styles","sizeXClassNames","none","sizeXNone","regular","sizeXRegular","compact","sizeXCompact","stylesMode","modeNone","plain","modePlain","card","modeCard","stylesPadding","s","paddingS","m","paddingM","useGroupMode","forcedMode","sizeX","isInsideModal","layout","useContext","warn","GroupContainer","children","separator","mode","modeProps","padding","tabIndex","tabIndexProp","restProps","id","isTabPanel","role","process","env","NODE_ENV","undefined","siblingSeparatorElement","div","className","separatorSibling","separatorSiblingForced","Component","baseClassName","host","modePlainInsideModal"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,eAAe,QAAQ,gCAA6B;AAC7D,SAASC,aAAa,QAAQ,+BAA4B;AAE1D,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SAASC,cAAc,QAAQ,+BAA4B;AAC3D,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMR,WAAWM,OAAOG,SAAS,EAAE;IACnCC,SAASJ,OAAOK,YAAY;IAC5BC,SAASN,OAAOO,YAAY;AAC9B;AAEA,MAAMC,aAAa;IACjBN,MAAMR,WAAWM,OAAOS,QAAQ,EAAE;IAClCC,OAAOhB,WAAWM,OAAOW,SAAS,EAAE;IACpCC,MAAMlB,WAAWM,OAAOa,QAAQ,EAAE;AACpC;AAEA,MAAMC,gBAAgB;IACpBC,GAAGf,OAAOgB,QAAQ;IAClBC,GAAGjB,OAAOkB,QAAQ;AACpB;AAIA;;CAEC,GACD,SAASC,aACPC,UAAuC,EACvCC,KAA8B,EAC9BC,aAAsB;IAEtB,MAAM,EAAEC,MAAM,EAAE,GAAG9B,MAAM+B,UAAU,CAAC1B;IAEpC,IAAIsB,YAAY;QACd,OAAOA;IACT;IAEA,IAAIE,eAAe;QACjB,OAAO;IACT;IAEA,IAAIC,QAAQ;QACV,OAAOA;IACT;IAEA,IAAIF,UAAU,QAAQ;QACpB,OAAOA,UAAU,YAAY,SAAS;IACxC;IAEA,OAAO;AACT;AAuBA,MAAMI,OAAO5B,SAAS;AAEtB,OAAO,MAAM6B,iBAAiB,CAAC,EAC7BC,QAAQ,EACRC,YAAY,MAAM,EAClBC,MAAMC,SAAS,EACfC,UAAU,GAAG,EACbC,UAAUC,YAAY,EACtB,GAAGC,WACiB;IACpB,MAAMZ,gBAAgB3B,kBAAkBwC,EAAE,KAAK;IAC/C,MAAM,EAAEd,QAAQ,MAAM,EAAE,GAAGzB;IAE3B,MAAMiC,OAAOV,aAAaW,WAAWT,OAAOC;IAE5C,MAAMc,aAAaF,UAAUG,IAAI,KAAK;IAEtC,IACEC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBACzBJ,cACC,CAAA,CAACF,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAT,KACE;IAEJ;IAEA,MAAMO,WAAWI,cAAcH,iBAAiBQ,YAAY,IAAIR;IAEhE,IAAIS,0BAA2C;IAC/C,OAAQd;QACN,KAAK;YACHc,wCAA0B,KAACC;gBAAIC,WAAW5C,OAAO6C,gBAAgB;;YACjE;QACF,KAAK;YACHH,wCACE,KAACC;gBACCC,WAAWlD,WACTM,OAAO6C,gBAAgB,EACvBhB,SAAS,WAAWA,SAAS,SAAS7B,OAAO8C,sBAAsB,GAAGL;;YAI5E;QACF,KAAK;YACH;IACJ;IACA,qBACE;;0BACE,KAAC1C;gBACCgD,WAAU;gBACT,GAAGb,SAAS;gBACbF,UAAUA;gBACVgB,eAAetD,WACb,qBACAM,OAAOiD,IAAI,EACXhD,eAAe,CAACoB,MAAM,EACtBQ,SAAS,WAAWP,iBAAiBtB,OAAOkD,oBAAoB,EAChE1C,UAAU,CAACqB,KAAK,EAChBf,aAAa,CAACiB,QAAQ;0BAGvBJ;;YAEFe;;;AAGP,EAAE"}

package/dist/cssm/components/Group/GroupDescription.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { Footnote } from "../Typography/Footnote/Footnote.js";
 import styles from "./Group.module.css";
@@ -7,6 +6,5 @@ export const GroupDescription = ({ className, ...restProps })=>/*#__PURE__*/ _js
         className: classNames(className, styles.description),
         ...restProps
     });
-GroupDescription.displayName = 'GroupDescription';
 
 //# sourceMappingURL=GroupDescription.js.map

package/dist/cssm/components/Group/GroupDescription.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Group/GroupDescription.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Group.module.css';\n\nexport type GroupDescriptionProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;\nexport const GroupDescription: React.FC<GroupDescriptionProps> = ({\n  className,\n  ...restProps\n}: GroupDescriptionProps): React.ReactNode => (\n  <Footnote className={classNames(className, styles.description)} {...restProps} />\n);\nGroupDescription.displayName = 'GroupDescription';\n"],"names":["React","classNames","Footnote","styles","GroupDescription","className","restProps","description","displayName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,OAAOC,YAAY,qBAAqB;AAGxC,OAAO,MAAMC,mBAAoD,CAAC,EAChEC,SAAS,EACT,GAAGC,WACmB,iBACtB,KAACJ;QAASG,WAAWJ,WAAWI,WAAWF,OAAOI,WAAW;QAAI,GAAGD,SAAS;OAC7E;AACFF,iBAAiBI,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Group/GroupDescription.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Group.module.css';\n\nexport type GroupDescriptionProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;\n\nexport const GroupDescription = ({ className, ...restProps }: GroupDescriptionProps) => (\n  <Footnote className={classNames(className, styles.description)} {...restProps} />\n);\n"],"names":["classNames","Footnote","styles","GroupDescription","className","restProps","description"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,OAAOC,YAAY,qBAAqB;AAIxC,OAAO,MAAMC,mBAAmB,CAAC,EAAEC,SAAS,EAAE,GAAGC,WAAkC,iBACjF,KAACJ;QAASG,WAAWJ,WAAWI,WAAWF,OAAOI,WAAW;QAAI,GAAGD,SAAS;OAC7E"}

package/dist/cssm/components/Group/GroupExpandedContent.js

@@ -1,6 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { classNames } from "@vkontakte/vkjs";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 import styles from "./Group.module.css";
 const stylesDirection = {
@@ -11,7 +9,7 @@ export const GroupExpandedContent = ({ direction = 'inline', ...restProps })=>{
     return /*#__PURE__*/ _jsx(RootComponent, {
         Component: "div",
         ...restProps,
-        baseClassName: classNames(styles.expandedContent, stylesDirection[direction])
+        baseClassName: stylesDirection[direction]
     });
 };
 

package/dist/cssm/components/Group/GroupExpandedContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Group/GroupExpandedContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Group.module.css';\n\nconst stylesDirection = {\n  inline: styles.expandedContentInline,\n  block: styles.expandedContentBlock,\n};\n\nexport type GroupExpandedContentProps = HTMLAttributesWithRootRef<HTMLElement> &\n  HasComponent & {\n    direction?: 'inline' | 'block';\n  };\nexport const GroupExpandedContent: React.FC<GroupExpandedContentProps> = ({\n  direction = 'inline',\n  ...restProps\n}: GroupExpandedContentProps) => {\n  return (\n    <RootComponent\n      Component=\"div\"\n      {...restProps}\n      baseClassName={classNames(styles.expandedContent, stylesDirection[direction])}\n    />\n  );\n};\n"],"names":["React","classNames","RootComponent","styles","stylesDirection","inline","expandedContentInline","block","expandedContentBlock","GroupExpandedContent","direction","restProps","Component","baseClassName","expandedContent"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,QAAQF,OAAOG,qBAAqB;IACpCC,OAAOJ,OAAOK,oBAAoB;AACpC;AAMA,OAAO,MAAMC,uBAA4D,CAAC,EACxEC,YAAY,QAAQ,EACpB,GAAGC,WACuB;IAC1B,qBACE,KAACT;QACCU,WAAU;QACT,GAAGD,SAAS;QACbE,eAAeZ,WAAWE,OAAOW,eAAe,EAAEV,eAAe,CAACM,UAAU;;AAGlF,EAAE"}
+{"version":3,"sources":["../../../../src/components/Group/GroupExpandedContent.tsx"],"sourcesContent":["import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Group.module.css';\n\nconst stylesDirection = {\n  inline: styles.expandedContentInline,\n  block: styles.expandedContentBlock,\n};\n\nexport type GroupExpandedContentProps = HTMLAttributesWithRootRef<HTMLElement> &\n  HasComponent & {\n    /**\n     * Направление отображения контента.\n     */\n    direction?: 'inline' | 'block';\n  };\nexport const GroupExpandedContent = ({\n  direction = 'inline',\n  ...restProps\n}: GroupExpandedContentProps) => {\n  return (\n    <RootComponent Component=\"div\" {...restProps} baseClassName={stylesDirection[direction]} />\n  );\n};\n"],"names":["RootComponent","styles","stylesDirection","inline","expandedContentInline","block","expandedContentBlock","GroupExpandedContent","direction","restProps","Component","baseClassName"],"mappings":";AACA,SAASA,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,QAAQF,OAAOG,qBAAqB;IACpCC,OAAOJ,OAAOK,oBAAoB;AACpC;AASA,OAAO,MAAMC,uBAAuB,CAAC,EACnCC,YAAY,QAAQ,EACpB,GAAGC,WACuB;IAC1B,qBACE,KAACT;QAAcU,WAAU;QAAO,GAAGD,SAAS;QAAEE,eAAeT,eAAe,CAACM,UAAU;;AAE3F,EAAE"}

package/dist/cssm/components/Group/GroupHeader.js

@@ -1,11 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import styles from "./Group.module.css";
 export const GroupHeader = ({ className, ...restProps })=>/*#__PURE__*/ _jsx("div", {
         className: classNames(className, styles.header),
         ...restProps
     });
-GroupHeader.displayName = 'GroupHeader';
 
 //# sourceMappingURL=GroupHeader.js.map

package/dist/cssm/components/Group/GroupHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Group/GroupHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport styles from './Group.module.css';\n\nexport type GroupHeaderProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;\nexport const GroupHeader: React.FC<GroupHeaderProps> = ({\n  className,\n  ...restProps\n}: GroupHeaderProps): React.ReactNode => (\n  <div className={classNames(className, styles.header)} {...restProps} />\n);\nGroupHeader.displayName = 'GroupHeader';\n"],"names":["React","classNames","styles","GroupHeader","className","restProps","div","header","displayName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,qBAAqB;AAGxC,OAAO,MAAMC,cAA0C,CAAC,EACtDC,SAAS,EACT,GAAGC,WACc,iBACjB,KAACC;QAAIF,WAAWH,WAAWG,WAAWF,OAAOK,MAAM;QAAI,GAAGF,SAAS;OACnE;AACFF,YAAYK,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Group/GroupHeader.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport styles from './Group.module.css';\n\nexport type GroupHeaderProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;\nexport const GroupHeader = ({ className, ...restProps }: GroupHeaderProps) => (\n  <div className={classNames(className, styles.header)} {...restProps} />\n);\n"],"names":["classNames","styles","GroupHeader","className","restProps","div","header"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,qBAAqB;AAGxC,OAAO,MAAMC,cAAc,CAAC,EAAEC,SAAS,EAAE,GAAGC,WAA6B,iBACvE,KAACC;QAAIF,WAAWH,WAAWG,WAAWF,OAAOK,MAAM;QAAI,GAAGF,SAAS;OACnE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Header.module.css';\n\nexport interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement>, HasComponent {\n  size?: 's' | 'm' | 'l' | 'xl';\n  subtitle?: React.ReactNode;\n  /* Позволяет задать тип элемента в который будет обёрнут subtitle */\n  subtitleComponent?: React.ElementType;\n  /**\n   * Допускаются иконки, текст, Link\n   */\n  after?: React.ReactNode;\n  /**\n   * Допускаются текст, Indicator\n   */\n  indicator?: React.ReactNode;\n  multiline?: boolean;\n  /**\n   * Иконка слева (рекомендуется использовать размер 28px)\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка слева от title (рекомендуется использовать размер 16px)\n   */\n  beforeTitle?: React.ReactNode;\n  /**\n   * Иконка справа от title (рекомендуется использовать размер 16px)\n   */\n  afterTitle?: React.ReactNode;\n  /**\n   * Иконка слева от subtitle (рекомендуется использовать размер 12px)\n   */\n  beforeSubtitle?: React.ReactNode;\n  /**\n   * Иконка справа от subtitle (рекомендуется использовать размер 12px)\n   */\n  afterSubtitle?: React.ReactNode;\n}\n\nconst sizeClassNames: Record<Exclude<HeaderProps['size'], undefined>, string> = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n  xl: styles.sizeXl,\n};\n\ntype HeaderContentProps = Pick<HeaderProps, 'children' | 'size' | 'className'> & HasComponent;\n\nconst HeaderContent = ({ size, ...restProps }: HeaderContentProps) => {\n  switch (size) {\n    case 'xl':\n      return <Title level=\"2\" weight=\"1\" {...restProps} />;\n    case 'l':\n      return <Title level=\"3\" weight=\"1\" {...restProps} />;\n    case 'm':\n      return <Headline {...restProps} />;\n    case 's':\n      return <Footnote caps weight=\"1\" {...restProps} />;\n  }\n\n  return null;\n};\n\nconst Subtitle: React.FC<\n  Pick<HeaderProps, 'multiline' | 'subtitleComponent' | 'size'> & { children: React.ReactNode }\n> = ({ subtitleComponent, children, multiline, size }) => {\n  const SubtitleElement = size === 'm' || size === 's' ? Caption : Subhead;\n  return (\n    <SubtitleElement\n      className={classNames(styles.subtitle, multiline && styles.contentMultiline)}\n      Component={subtitleComponent}\n    >\n      {children}\n    </SubtitleElement>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n  size = 'm',\n  Component = 'h2',\n  children,\n  subtitle,\n  subtitleComponent = 'span',\n  indicator,\n  after,\n  multiline,\n  before,\n  beforeTitle,\n  afterTitle,\n  beforeSubtitle,\n  afterSubtitle,\n  ...restProps\n}: HeaderProps): React.ReactNode => {\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        sizeClassNames[size],\n        isPrimitiveReactNode(indicator) && styles.pi,\n      )}\n    >\n      {before && (\n        <div className={classNames(styles.before, subtitle && styles.beforeWithSubtitle)}>\n          {before}\n        </div>\n      )}\n      <div className={styles.main}>\n        <HeaderContent className={styles.content} Component={Component} size={size}>\n          {beforeTitle && <div className={styles.contentBefore}>{beforeTitle}</div>}\n          <span className={classNames(styles.contentIn, multiline && styles.contentMultiline)}>\n            {children}\n          </span>\n          {afterTitle && <div className={styles.contentAfter}>{afterTitle}</div>}\n          {hasReactNode(indicator) && (\n            <Footnote className={styles.indicator} weight=\"2\">\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n        {hasReactNode(subtitle) && (\n          <div className={styles.subtitleWrapper}>\n            {beforeSubtitle && <div className={styles.subtitleBefore}>{beforeSubtitle}</div>}\n            <Subtitle multiline={multiline} subtitleComponent={subtitleComponent} size={size}>\n              {subtitle}\n            </Subtitle>\n            {afterSubtitle && <div className={styles.subtitleAfter}>{afterSubtitle}</div>}\n          </div>\n        )}\n      </div>\n\n      {hasReactNode(after) && (\n        <Paragraph className={styles.after} Component=\"span\">\n          {after}\n        </Paragraph>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","RootComponent","Caption","Footnote","Headline","Paragraph","Subhead","Title","styles","sizeClassNames","s","sizeS","m","sizeM","l","sizeL","xl","sizeXl","HeaderContent","size","restProps","level","weight","caps","Subtitle","subtitleComponent","children","multiline","SubtitleElement","className","subtitle","contentMultiline","Component","Header","indicator","after","before","beforeTitle","afterTitle","beforeSubtitle","afterSubtitle","baseClassName","host","pi","div","beforeWithSubtitle","main","content","contentBefore","span","contentIn","contentAfter","subtitleWrapper","subtitleBefore","subtitleAfter"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Header.module.css';\n\nexport interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement>, HasComponent {\n  /**\n   * Размер компонента.\n   */\n  size?: 's' | 'm' | 'l' | 'xl';\n  /**\n   * Подпись под основным текстом.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Позволяет задать тип элемента в который будет обёрнут subtitle.\n   */\n  subtitleComponent?: React.ElementType;\n  /**\n   * Допускаются иконки, текст, Link.\n   */\n  after?: React.ReactNode;\n  /**\n   * Допускаются текст, Indicator.\n   */\n  indicator?: React.ReactNode;\n  /**\n   * Возможность отображения текста в несколько строк.\n   */\n  multiline?: boolean;\n  /**\n   * Иконка слева (рекомендуется использовать размер 28px).\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка слева от title (рекомендуется использовать размер 16px).\n   */\n  beforeTitle?: React.ReactNode;\n  /**\n   * Иконка справа от title (рекомендуется использовать размер 16px).\n   */\n  afterTitle?: React.ReactNode;\n  /**\n   * Иконка слева от subtitle (рекомендуется использовать размер 12px).\n   */\n  beforeSubtitle?: React.ReactNode;\n  /**\n   * Иконка справа от subtitle (рекомендуется использовать размер 12px).\n   */\n  afterSubtitle?: React.ReactNode;\n}\n\nconst sizeClassNames: Record<Exclude<HeaderProps['size'], undefined>, string> = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n  xl: styles.sizeXl,\n};\n\ntype HeaderContentProps = Pick<HeaderProps, 'children' | 'size' | 'className'> & HasComponent;\n\nconst HeaderContent = ({ size, ...restProps }: HeaderContentProps) => {\n  switch (size) {\n    case 'xl':\n      return <Title level=\"2\" weight=\"1\" {...restProps} />;\n    case 'l':\n      return <Title level=\"3\" weight=\"1\" {...restProps} />;\n    case 'm':\n      return <Headline {...restProps} />;\n    case 's':\n      return <Footnote caps weight=\"1\" {...restProps} />;\n  }\n\n  return null;\n};\n\nconst Subtitle: React.FC<\n  Pick<HeaderProps, 'multiline' | 'subtitleComponent' | 'size'> & { children: React.ReactNode }\n> = ({ subtitleComponent, children, multiline, size }) => {\n  const SubtitleElement = size === 'm' || size === 's' ? Caption : Subhead;\n  return (\n    <SubtitleElement\n      className={classNames(styles.subtitle, multiline && styles.contentMultiline)}\n      Component={subtitleComponent}\n    >\n      {children}\n    </SubtitleElement>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n  size = 'm',\n  Component = 'h2',\n  children,\n  subtitle,\n  subtitleComponent = 'span',\n  indicator,\n  after,\n  multiline,\n  before,\n  beforeTitle,\n  afterTitle,\n  beforeSubtitle,\n  afterSubtitle,\n  ...restProps\n}: HeaderProps): React.ReactNode => {\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        sizeClassNames[size],\n        isPrimitiveReactNode(indicator) && styles.pi,\n      )}\n    >\n      {before && (\n        <div className={classNames(styles.before, subtitle && styles.beforeWithSubtitle)}>\n          {before}\n        </div>\n      )}\n      <div className={styles.main}>\n        <HeaderContent className={styles.content} Component={Component} size={size}>\n          {beforeTitle && <div className={styles.contentBefore}>{beforeTitle}</div>}\n          <span className={classNames(styles.contentIn, multiline && styles.contentMultiline)}>\n            {children}\n          </span>\n          {afterTitle && <div className={styles.contentAfter}>{afterTitle}</div>}\n          {hasReactNode(indicator) && (\n            <Footnote className={styles.indicator} weight=\"2\">\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n        {hasReactNode(subtitle) && (\n          <div className={styles.subtitleWrapper}>\n            {beforeSubtitle && <div className={styles.subtitleBefore}>{beforeSubtitle}</div>}\n            <Subtitle multiline={multiline} subtitleComponent={subtitleComponent} size={size}>\n              {subtitle}\n            </Subtitle>\n            {afterSubtitle && <div className={styles.subtitleAfter}>{afterSubtitle}</div>}\n          </div>\n        )}\n      </div>\n\n      {hasReactNode(after) && (\n        <Paragraph className={styles.after} Component=\"span\">\n          {after}\n        </Paragraph>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","RootComponent","Caption","Footnote","Headline","Paragraph","Subhead","Title","styles","sizeClassNames","s","sizeS","m","sizeM","l","sizeL","xl","sizeXl","HeaderContent","size","restProps","level","weight","caps","Subtitle","subtitleComponent","children","multiline","SubtitleElement","className","subtitle","contentMultiline","Component","Header","indicator","after","before","beforeTitle","afterTitle","beforeSubtitle","afterSubtitle","baseClassName","host","pi","div","beforeWithSubtitle","main","content","contentBefore","span","contentIn","contentAfter","subtitleWrapper","subtitleBefore","subtitleAfter"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport type { CSSCustomProperties, HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCell.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH = '--vkui_internal--cell_width';\n\nconst stylesSize = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n  xl: styles.sizeXL,\n  auto: styles.sizeAuto,\n};\n\nconst textAlignClassNames = {\n  center: styles.textAlignCenter,\n  end: styles.textAlignEnd,\n};\n\ntype HorizontalCellSizes = 's' | 'm' | 'l' | 'xl' | 'auto';\n\nexport interface HorizontalCellProps\n  extends Omit<TappableProps, 'size' | 'getRootRef' | 'title' | 'borderRadiusMode'>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Ширина компонента\n   *\n   * Значения `'s' | 'm' | 'l' | 'xl'` определяются дизайн-системой.\n   * Значение `auto` позволяет задать динамическую ширину, определяемую контентом.\n   * Пользовательскую ширину можно задать через числовое значение.\n   */\n  size?: LiteralUnion<HorizontalCellSizes, number>;\n  /**\n   * Заголовок\n   */\n  title?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Задает выравнивание типографики. По умолчанию `center` для `size=s`, иначе `start`\n   */\n  textAlign?: 'start' | 'center' | 'end';\n  /**\n   * Отключает формирование отступов у крайних элементов\n   *\n   * Актуально для использования в многострочных списках\n   */\n  noPadding?: boolean;\n  /**\n   * Позволяет передать типографический компонент, используемый для `title`.\n   * По умолчанию `Caption` для `size=s`, иначе `Subhead`.\n   */\n  TitleComponent?: React.ElementType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n  className,\n  title,\n  style,\n  subtitle,\n  size = 's',\n  children = <Avatar size={56} />,\n  getRootRef,\n  getRef,\n  extraSubtitle,\n  textAlign = size === 's' ? 'center' : 'start',\n  noPadding = false,\n  TitleComponent = size === 's' ? Caption : Subhead,\n  ...restProps\n}: HorizontalCellProps): React.ReactNode => {\n  const hasTypography =\n    hasReactNode(title) || hasReactNode(subtitle) || hasReactNode(extraSubtitle);\n\n  const customProperties: CSSCustomProperties | undefined =\n    typeof size === 'number' ? { [CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH]: `${size}px` } : undefined;\n\n  return (\n    <div\n      ref={getRootRef}\n      style={mergeStyle(customProperties, style)}\n      className={classNames(\n        styles.host,\n        typeof size === 'string' && stylesSize[size],\n        size !== 'auto' && styles.sized,\n        typeof size === 'number' && styles.customSize,\n        noPadding && styles.noPadding,\n        className,\n      )}\n    >\n      <Tappable className={styles.body} getRootRef={getRef} {...restProps}>\n        {hasReactNode(children) && <div className={styles.image}>{children}</div>}\n        {hasTypography && (\n          <div\n            className={classNames(\n              styles.content,\n              textAlign !== 'start' && textAlignClassNames[textAlign],\n            )}\n          >\n            {hasReactNode(title) && <TitleComponent>{title}</TitleComponent>}\n            {hasReactNode(subtitle) && <Footnote className={styles.subtitle}>{subtitle}</Footnote>}\n            {hasReactNode(extraSubtitle) && (\n              <Footnote className={styles.subtitle}>{extraSubtitle}</Footnote>\n            )}\n          </div>\n        )}\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["React","classNames","hasReactNode","mergeStyle","Avatar","Tappable","Caption","Footnote","Subhead","styles","CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH","stylesSize","s","sizeS","m","sizeM","l","sizeL","xl","sizeXL","auto","sizeAuto","textAlignClassNames","center","textAlignCenter","end","textAlignEnd","HorizontalCell","className","title","style","subtitle","size","children","getRootRef","getRef","extraSubtitle","textAlign","noPadding","TitleComponent","restProps","hasTypography","customProperties","undefined","div","ref","host","sized","customSize","body","image","content"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,UAAU,QAAQ,8BAA2B;AAEtD,SAASC,MAAM,QAAQ,sBAAmB;AAC1C,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,OAAO,QAAQ,mCAAgC;AACxD,OAAOC,YAAY,8BAA8B;AAEjD,OAAO,MAAMC,kCAAkC,8BAA8B;AAE7E,MAAMC,aAAa;IACjBC,GAAGH,OAAOI,KAAK;IACfC,GAAGL,OAAOM,KAAK;IACfC,GAAGP,OAAOQ,KAAK;IACfC,IAAIT,OAAOU,MAAM;IACjBC,MAAMX,OAAOY,QAAQ;AACvB;AAEA,MAAMC,sBAAsB;IAC1BC,QAAQd,OAAOe,eAAe;IAC9BC,KAAKhB,OAAOiB,YAAY;AAC1B;AA6CA;;CAEC,GACD,OAAO,MAAMC,iBAAiB,CAAC,EAC7BC,SAAS,EACTC,KAAK,EACLC,KAAK,EACLC,QAAQ,EACRC,OAAO,GAAG,EACVC,yBAAW,KAAC7B;IAAO4B,MAAM;EAAM,EAC/BE,UAAU,EACVC,MAAM,EACNC,aAAa,EACbC,YAAYL,SAAS,MAAM,WAAW,OAAO,EAC7CM,YAAY,KAAK,EACjBC,iBAAiBP,SAAS,MAAM1B,UAAUE,OAAO,EACjD,GAAGgC,WACiB;IACpB,MAAMC,gBACJvC,aAAa2B,UAAU3B,aAAa6B,aAAa7B,aAAakC;IAEhE,MAAMM,mBACJ,OAAOV,SAAS,WAAW;QAAE,CAACtB,gCAAgC,EAAE,GAAGsB,KAAK,EAAE,CAAC;IAAC,IAAIW;IAElF,qBACE,KAACC;QACCC,KAAKX;QACLJ,OAAO3B,WAAWuC,kBAAkBZ;QACpCF,WAAW3B,WACTQ,OAAOqC,IAAI,EACX,OAAOd,SAAS,YAAYrB,UAAU,CAACqB,KAAK,EAC5CA,SAAS,UAAUvB,OAAOsC,KAAK,EAC/B,OAAOf,SAAS,YAAYvB,OAAOuC,UAAU,EAC7CV,aAAa7B,OAAO6B,SAAS,EAC7BV;kBAGF,cAAA,MAACvB;YAASuB,WAAWnB,OAAOwC,IAAI;YAAEf,YAAYC;YAAS,GAAGK,SAAS;;gBAChEtC,aAAa+B,2BAAa,KAACW;oBAAIhB,WAAWnB,OAAOyC,KAAK;8BAAGjB;;gBACzDQ,+BACC,MAACG;oBACChB,WAAW3B,WACTQ,OAAO0C,OAAO,EACdd,cAAc,WAAWf,mBAAmB,CAACe,UAAU;;wBAGxDnC,aAAa2B,wBAAU,KAACU;sCAAgBV;;wBACxC3B,aAAa6B,2BAAa,KAACxB;4BAASqB,WAAWnB,OAAOsB,QAAQ;sCAAGA;;wBACjE7B,aAAakC,gCACZ,KAAC7B;4BAASqB,WAAWnB,OAAOsB,QAAQ;sCAAGK;;;;;;;AAOrD,EAAE"}
+{"version":3,"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport type { CSSCustomProperties, HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCell.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH = '--vkui_internal--cell_width';\n\nconst stylesSize = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n  xl: styles.sizeXL,\n  auto: styles.sizeAuto,\n};\n\nconst textAlignClassNames = {\n  center: styles.textAlignCenter,\n  end: styles.textAlignEnd,\n};\n\ntype HorizontalCellSizes = 's' | 'm' | 'l' | 'xl' | 'auto';\n\nexport interface HorizontalCellProps\n  extends Omit<TappableProps, 'size' | 'getRootRef' | 'title' | 'borderRadiusMode'>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Ширина компонента.\n   *\n   * Значения `'s' | 'm' | 'l' | 'xl'` определяются дизайн-системой.\n   * Значение `auto` позволяет задать динамическую ширину, определяемую контентом.\n   * Пользовательскую ширину можно задать через числовое значение.\n   */\n  size?: LiteralUnion<HorizontalCellSizes, number>;\n  /**\n   * Заголовок.\n   */\n  title?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Задает выравнивание типографики. По умолчанию `center` для `size=s`, иначе `start`.\n   */\n  textAlign?: 'start' | 'center' | 'end';\n  /**\n   * Отключает формирование отступов у крайних элементов.\n   *\n   * Актуально для использования в многострочных списках.\n   */\n  noPadding?: boolean;\n  /**\n   * Позволяет передать типографический компонент, используемый для `title`.\n   * По умолчанию `Caption` для `size=s`, иначе `Subhead`.\n   */\n  TitleComponent?: React.ElementType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n  className,\n  title,\n  style,\n  subtitle,\n  size = 's',\n  children = <Avatar size={56} />,\n  getRootRef,\n  getRef,\n  extraSubtitle,\n  textAlign = size === 's' ? 'center' : 'start',\n  noPadding = false,\n  TitleComponent = size === 's' ? Caption : Subhead,\n  ...restProps\n}: HorizontalCellProps): React.ReactNode => {\n  const hasTypography =\n    hasReactNode(title) || hasReactNode(subtitle) || hasReactNode(extraSubtitle);\n\n  const customProperties: CSSCustomProperties | undefined =\n    typeof size === 'number' ? { [CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH]: `${size}px` } : undefined;\n\n  return (\n    <div\n      ref={getRootRef}\n      style={mergeStyle(customProperties, style)}\n      className={classNames(\n        styles.host,\n        typeof size === 'string' && stylesSize[size],\n        size !== 'auto' && styles.sized,\n        typeof size === 'number' && styles.customSize,\n        noPadding && styles.noPadding,\n        className,\n      )}\n    >\n      <Tappable className={styles.body} getRootRef={getRef} {...restProps}>\n        {hasReactNode(children) && <div className={styles.image}>{children}</div>}\n        {hasTypography && (\n          <div\n            className={classNames(\n              styles.content,\n              textAlign !== 'start' && textAlignClassNames[textAlign],\n            )}\n          >\n            {hasReactNode(title) && <TitleComponent>{title}</TitleComponent>}\n            {hasReactNode(subtitle) && <Footnote className={styles.subtitle}>{subtitle}</Footnote>}\n            {hasReactNode(extraSubtitle) && (\n              <Footnote className={styles.subtitle}>{extraSubtitle}</Footnote>\n            )}\n          </div>\n        )}\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["React","classNames","hasReactNode","mergeStyle","Avatar","Tappable","Caption","Footnote","Subhead","styles","CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH","stylesSize","s","sizeS","m","sizeM","l","sizeL","xl","sizeXL","auto","sizeAuto","textAlignClassNames","center","textAlignCenter","end","textAlignEnd","HorizontalCell","className","title","style","subtitle","size","children","getRootRef","getRef","extraSubtitle","textAlign","noPadding","TitleComponent","restProps","hasTypography","customProperties","undefined","div","ref","host","sized","customSize","body","image","content"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,UAAU,QAAQ,8BAA2B;AAEtD,SAASC,MAAM,QAAQ,sBAAmB;AAC1C,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,OAAO,QAAQ,mCAAgC;AACxD,OAAOC,YAAY,8BAA8B;AAEjD,OAAO,MAAMC,kCAAkC,8BAA8B;AAE7E,MAAMC,aAAa;IACjBC,GAAGH,OAAOI,KAAK;IACfC,GAAGL,OAAOM,KAAK;IACfC,GAAGP,OAAOQ,KAAK;IACfC,IAAIT,OAAOU,MAAM;IACjBC,MAAMX,OAAOY,QAAQ;AACvB;AAEA,MAAMC,sBAAsB;IAC1BC,QAAQd,OAAOe,eAAe;IAC9BC,KAAKhB,OAAOiB,YAAY;AAC1B;AA6CA;;CAEC,GACD,OAAO,MAAMC,iBAAiB,CAAC,EAC7BC,SAAS,EACTC,KAAK,EACLC,KAAK,EACLC,QAAQ,EACRC,OAAO,GAAG,EACVC,yBAAW,KAAC7B;IAAO4B,MAAM;EAAM,EAC/BE,UAAU,EACVC,MAAM,EACNC,aAAa,EACbC,YAAYL,SAAS,MAAM,WAAW,OAAO,EAC7CM,YAAY,KAAK,EACjBC,iBAAiBP,SAAS,MAAM1B,UAAUE,OAAO,EACjD,GAAGgC,WACiB;IACpB,MAAMC,gBACJvC,aAAa2B,UAAU3B,aAAa6B,aAAa7B,aAAakC;IAEhE,MAAMM,mBACJ,OAAOV,SAAS,WAAW;QAAE,CAACtB,gCAAgC,EAAE,GAAGsB,KAAK,EAAE,CAAC;IAAC,IAAIW;IAElF,qBACE,KAACC;QACCC,KAAKX;QACLJ,OAAO3B,WAAWuC,kBAAkBZ;QACpCF,WAAW3B,WACTQ,OAAOqC,IAAI,EACX,OAAOd,SAAS,YAAYrB,UAAU,CAACqB,KAAK,EAC5CA,SAAS,UAAUvB,OAAOsC,KAAK,EAC/B,OAAOf,SAAS,YAAYvB,OAAOuC,UAAU,EAC7CV,aAAa7B,OAAO6B,SAAS,EAC7BV;kBAGF,cAAA,MAACvB;YAASuB,WAAWnB,OAAOwC,IAAI;YAAEf,YAAYC;YAAS,GAAGK,SAAS;;gBAChEtC,aAAa+B,2BAAa,KAACW;oBAAIhB,WAAWnB,OAAOyC,KAAK;8BAAGjB;;gBACzDQ,+BACC,MAACG;oBACChB,WAAW3B,WACTQ,OAAO0C,OAAO,EACdd,cAAc,WAAWf,mBAAmB,CAACe,UAAU;;wBAGxDnC,aAAa2B,wBAAU,KAACU;sCAAgBV;;wBACxC3B,aAAa6B,2BAAa,KAACxB;4BAASqB,WAAWnB,OAAOsB,QAAQ;sCAAGA;;wBACjE7B,aAAakC,gCACZ,KAAC7B;4BAASqB,WAAWnB,OAAOsB,QAAQ;sCAAGK;;;;;;;AAOrD,EAAE"}

package/dist/cssm/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.js

@@ -24,8 +24,7 @@ export const HorizontalCellShowMore = ({ className, style, getRef, getRootRef, h
             ...restProps,
             children: [
                 /*#__PURE__*/ _jsx(Icon28ChevronRightCircle, {
-                    className: styles.icon,
-                    fill: "currentColor"
+                    className: styles.icon
                 }),
                 /*#__PURE__*/ _jsx(Subhead, {
                     className: styles.text,

package/dist/cssm/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.tsx"],"sourcesContent":["import { Icon28ChevronRightCircle } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRef, HasRootRef, LiteralUnion } from '../../../types';\nimport type { ImageBaseSize } from '../../ImageBase/ImageBase';\nimport { Tappable, type TappableProps } from '../../Tappable/Tappable';\nimport { Subhead, type SubheadProps } from '../../Typography/Subhead/Subhead';\nimport styles from './HorizontalCellShowMore.module.css';\n\nconst sizeClassNames = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n};\n\nexport interface HorizontalCellShowMoreProps\n  extends Omit<TappableProps, 'getRootRef' | 'size' | 'borderRadiusMode'>,\n    HasRef<HTMLElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Задаёт высоту компонента. Должeн соответствовать размеру картинок\n   * внутри соседних `HorizontalCell` компонентов.\n   *\n   * Используйте размеры, заданные дизайн-системой (см. типы).\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   *\n   * Игнорируется, если `size='s'`.\n   */\n  height?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Задаёт размер компонента.\n   *\n   * Значение `s` применяется для `<HorizontalCell size=\"s\"`, в остальных случаях рекомендуется `m`.\n   */\n  size?: 's' | 'm';\n  /**\n   * Предназначен для отрисовки текста.\n   * По умолчанию для `size='s'` содержит текст `Все`, для `size='m'` - `Показать все`.\n   * */\n  children?: SubheadProps['children'];\n  /**\n   * Выравнивание по центру относительно родителя\n   */\n  centered?: boolean;\n}\n\nexport const HorizontalCellShowMore = ({\n  className,\n  style,\n  getRef,\n  getRootRef,\n  height,\n  size = 's',\n  children = size === 's' ? 'Все' : 'Показать все',\n  centered = false,\n  ...restProps\n}: HorizontalCellShowMoreProps): React.ReactNode => {\n  return (\n    <div\n      style={style}\n      className={classNames(\n        styles.host,\n        centered && styles.centered,\n        sizeClassNames[size],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      <Tappable\n        style={size === 's' ? undefined : { height }}\n        className={styles.body}\n        getRootRef={getRef}\n        activeMode=\"opacity\"\n        hoverMode=\"opacity\"\n        {...restProps}\n      >\n        <Icon28ChevronRightCircle className={styles.icon} fill=\"currentColor\" />\n\n        <Subhead className={styles.text} weight=\"2\">\n          {children}\n        </Subhead>\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["Icon28ChevronRightCircle","classNames","Tappable","Subhead","styles","sizeClassNames","s","sizeS","m","sizeM","HorizontalCellShowMore","className","style","getRef","getRootRef","height","size","children","centered","restProps","div","host","ref","undefined","body","activeMode","hoverMode","icon","fill","text","weight"],"mappings":";AAAA,SAASA,wBAAwB,QAAQ,mBAAmB;AAC5D,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,QAAQ,QAA4B,6BAA0B;AACvE,SAASC,OAAO,QAA2B,sCAAmC;AAC9E,OAAOC,YAAY,sCAAsC;AAEzD,MAAMC,iBAAiB;IACrBC,GAAGF,OAAOG,KAAK;IACfC,GAAGJ,OAAOK,KAAK;AACjB;AAkCA,OAAO,MAAMC,yBAAyB,CAAC,EACrCC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,MAAM,EACNC,OAAO,GAAG,EACVC,WAAWD,SAAS,MAAM,QAAQ,cAAc,EAChDE,WAAW,KAAK,EAChB,GAAGC,WACyB;IAC5B,qBACE,KAACC;QACCR,OAAOA;QACPD,WAAWV,WACTG,OAAOiB,IAAI,EACXH,YAAYd,OAAOc,QAAQ,EAC3Bb,cAAc,CAACW,KAAK,EACpBL;QAEFW,KAAKR;kBAEL,cAAA,MAACZ;YACCU,OAAOI,SAAS,MAAMO,YAAY;gBAAER;YAAO;YAC3CJ,WAAWP,OAAOoB,IAAI;YACtBV,YAAYD;YACZY,YAAW;YACXC,WAAU;YACT,GAAGP,SAAS;;8BAEb,KAACnB;oBAAyBW,WAAWP,OAAOuB,IAAI;oBAAEC,MAAK;;8BAEvD,KAACzB;oBAAQQ,WAAWP,OAAOyB,IAAI;oBAAEC,QAAO;8BACrCb;;;;;AAKX,EAAE"}
+{"version":3,"sources":["../../../../../src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.tsx"],"sourcesContent":["import { Icon28ChevronRightCircle } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRef, HasRootRef, LiteralUnion } from '../../../types';\nimport type { ImageBaseSize } from '../../ImageBase/ImageBase';\nimport { Tappable, type TappableProps } from '../../Tappable/Tappable';\nimport { Subhead, type SubheadProps } from '../../Typography/Subhead/Subhead';\nimport styles from './HorizontalCellShowMore.module.css';\n\nconst sizeClassNames = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n};\n\nexport interface HorizontalCellShowMoreProps\n  extends Omit<TappableProps, 'getRootRef' | 'size' | 'borderRadiusMode'>,\n    HasRef<HTMLElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Задаёт высоту компонента. Должeн соответствовать размеру картинок\n   * внутри соседних `HorizontalCell` компонентов.\n   *\n   * Используйте размеры, заданные дизайн-системой (смотри типы).\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   *\n   * Игнорируется, если `size='s'`.\n   */\n  height?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Задаёт размер компонента.\n   *\n   * Значение `s` применяется для `<HorizontalCell size=\"s\"`, в остальных случаях рекомендуется `m`.\n   */\n  size?: 's' | 'm';\n  /**\n   * Предназначен для отрисовки текста.\n   * По умолчанию для `size='s'` содержит текст `Все`, для `size='m'` - `Показать все`.\n   * */\n  children?: SubheadProps['children'];\n  /**\n   * Выравнивание по центру относительно родителя.\n   */\n  centered?: boolean;\n}\n\nexport const HorizontalCellShowMore = ({\n  className,\n  style,\n  getRef,\n  getRootRef,\n  height,\n  size = 's',\n  children = size === 's' ? 'Все' : 'Показать все',\n  centered = false,\n  ...restProps\n}: HorizontalCellShowMoreProps): React.ReactNode => {\n  return (\n    <div\n      style={style}\n      className={classNames(\n        styles.host,\n        centered && styles.centered,\n        sizeClassNames[size],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      <Tappable\n        style={size === 's' ? undefined : { height }}\n        className={styles.body}\n        getRootRef={getRef}\n        activeMode=\"opacity\"\n        hoverMode=\"opacity\"\n        {...restProps}\n      >\n        <Icon28ChevronRightCircle className={styles.icon} />\n\n        <Subhead className={styles.text} weight=\"2\">\n          {children}\n        </Subhead>\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["Icon28ChevronRightCircle","classNames","Tappable","Subhead","styles","sizeClassNames","s","sizeS","m","sizeM","HorizontalCellShowMore","className","style","getRef","getRootRef","height","size","children","centered","restProps","div","host","ref","undefined","body","activeMode","hoverMode","icon","text","weight"],"mappings":";AAAA,SAASA,wBAAwB,QAAQ,mBAAmB;AAC5D,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,QAAQ,QAA4B,6BAA0B;AACvE,SAASC,OAAO,QAA2B,sCAAmC;AAC9E,OAAOC,YAAY,sCAAsC;AAEzD,MAAMC,iBAAiB;IACrBC,GAAGF,OAAOG,KAAK;IACfC,GAAGJ,OAAOK,KAAK;AACjB;AAkCA,OAAO,MAAMC,yBAAyB,CAAC,EACrCC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,MAAM,EACNC,OAAO,GAAG,EACVC,WAAWD,SAAS,MAAM,QAAQ,cAAc,EAChDE,WAAW,KAAK,EAChB,GAAGC,WACyB;IAC5B,qBACE,KAACC;QACCR,OAAOA;QACPD,WAAWV,WACTG,OAAOiB,IAAI,EACXH,YAAYd,OAAOc,QAAQ,EAC3Bb,cAAc,CAACW,KAAK,EACpBL;QAEFW,KAAKR;kBAEL,cAAA,MAACZ;YACCU,OAAOI,SAAS,MAAMO,YAAY;gBAAER;YAAO;YAC3CJ,WAAWP,OAAOoB,IAAI;YACtBV,YAAYD;YACZY,YAAW;YACXC,WAAU;YACT,GAAGP,SAAS;;8BAEb,KAACnB;oBAAyBW,WAAWP,OAAOuB,IAAI;;8BAEhD,KAACxB;oBAAQQ,WAAWP,OAAOwB,IAAI;oBAAEC,QAAO;8BACrCZ;;;;;AAKX,EAAE"}

package/dist/cssm/components/HorizontalScroll/HorizontalScroll.js

@@ -11,12 +11,12 @@ import { RootComponent } from "../RootComponent/RootComponent.js";
 import { ScrollArrow } from "../ScrollArrow/ScrollArrow.js";
 import styles from "./HorizontalScroll.module.css";
 /**
- * timing method
+ * Timing method.
  */ function now() {
     return performance && performance.now ? performance.now() : Date.now();
 }
 /**
- * Округление к большему по модулю
+ * Округление к большему по модулю.
  *
  * ## Пример
  *
@@ -31,11 +31,11 @@ import styles from "./HorizontalScroll.module.css";
 }
 /**
  * Округляем el.scrollLeft
- * https://github.com/VKCOM/VKUI/pull/2445
+ * https://github.com/VKCOM/VKUI/pull/2445.
  */ const roundUpElementScrollLeft = (el)=>roundingAwayFromZero(el.scrollLeft);
 /**
  * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll
- * Константа взята из полифила (468), на дизайн-ревью уточнили до 250
+ * Константа взята из полифила (468), на дизайн-ревью уточнили до 250.
  * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла
  */ const SCROLL_ONE_FRAME_TIME = 250;
 function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollToEndBorder, onScrollEnd, onScrollStart, initialScrollWidth, scrollAnimationDuration, textDirection }) {
@@ -43,7 +43,7 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
         return;
     }
     /**
-   * крайнее значение сдвига
+   * Крайнее значение сдвига.
    */ const extremeScrollLeft = (textDirection === 'ltr' ? 1 : -1) * (initialScrollWidth - scrollElement.offsetWidth);
     const startScrollLeft = roundUpElementScrollLeft(scrollElement);
     const remappedStartScrollLeft = startScrollLeft * (textDirection === 'rtl' ? -1 : 1);
@@ -54,7 +54,7 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
     }
     onScrollStart();
     /**
-   * Если окончание прокрутки вышло за ноль
+   * Если окончание прокрутки вышло за ноль.
    */ if (startScrollLeft * endScrollLeft < 0) {
         endScrollLeft = 0;
     }
@@ -154,7 +154,7 @@ ContentWrapperComponent = 'div', contentWrapperRef, contentWrapperClassName, ...
             return noop;
         }
         /**
-       * Прокрутка с помощью любого колеса мыши
+       * Прокрутка с помощью любого колеса мыши.
        */ const onWheel = (e)=>{
             scrollerRef.current.scrollBy({
                 left: e.deltaX + e.deltaY,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow, type ScrollArrowProps } from '../ScrollArrow/ScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\ninterface ScrollContext {\n  scrollElement: HTMLElement | null;\n  scrollAnimationDuration: number;\n  animationQueue: VoidFunction[];\n  getScrollPosition: (currentPosition: number) => number;\n  onScrollToEndBorder: VoidFunction;\n  onScrollEnd: VoidFunction;\n  onScrollStart: VoidFunction;\n  /**\n   * Начальная ширина прокрутки.\n   * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n   */\n  initialScrollWidth: number;\n  textDirection: 'ltr' | 'rtl';\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Функция для расчета величины прокрутки при клике на левую стрелку.\n   */\n  getScrollToLeft?: ScrollPositionHandler;\n  /**\n   * Функция для расчета величины прокрутки при клике на правую стрелку.\n   */\n  getScrollToRight?: ScrollPositionHandler;\n  arrowSize?: ScrollArrowProps['size'];\n  /**\n   * Смещает иконки кнопок навигации по вертикали.\n   */\n  arrowOffsetY?: number | string;\n  showArrows?: boolean | 'always';\n  scrollAnimationDuration?: number;\n  /**\n   * Добавляет возможность прокручивать контент на любое колесо мыши.\n   * По умолчанию прокручивается как любой горизонтальный контент через shift.\n   */\n  scrollOnAnyWheel?: boolean;\n  /**\n   * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении предыдущего элемента\n   */\n  prevButtonTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении следующего элемента\n   */\n  nextButtonTestId?: string;\n  /**\n   * Позволяет поменять тег используемый для обертки над контентом, прокинутым в `children`\n   */\n  ContentWrapperComponent?: React.ElementType;\n  /**\n   * `ref` для обертки над контентом, прокинутым в `children`\n   */\n  contentWrapperRef?: React.Ref<HTMLElement>;\n  /**\n   * Специфичный `className` для обертки над контентом, прокинутым в `children`\n   */\n  contentWrapperClassName?: string;\n}\n\n/**\n * timing method\n */\nfunction now() {\n  return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округление к большему по модулю\n *\n * ## Пример\n *\n * ```ts\n * import { strict as assert } from 'node:assert';\n *\n * assert.equal(roundingAwayFromZero(5.1), 6)\n * assert.equal(roundingAwayFromZero(-5.1), -6)\n * ```\n */\nfunction roundingAwayFromZero(value: number): number {\n  return value > 0 ? Math.ceil(value) : Math.floor(value);\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => roundingAwayFromZero(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n  scrollElement,\n  getScrollPosition,\n  animationQueue,\n  onScrollToEndBorder,\n  onScrollEnd,\n  onScrollStart,\n  initialScrollWidth,\n  scrollAnimationDuration,\n  textDirection,\n}: ScrollContext) {\n  if (!scrollElement || !getScrollPosition) {\n    return;\n  }\n\n  /**\n   * крайнее значение сдвига\n   */\n  const extremeScrollLeft =\n    (textDirection === 'ltr' ? 1 : -1) * (initialScrollWidth - scrollElement.offsetWidth);\n\n  const startScrollLeft = roundUpElementScrollLeft(scrollElement);\n  const remappedStartScrollLeft = startScrollLeft * (textDirection === 'rtl' ? -1 : 1);\n\n  let endScrollLeft = getScrollPosition(remappedStartScrollLeft);\n\n  const diff = endScrollLeft - remappedStartScrollLeft;\n  if (textDirection === 'rtl') {\n    endScrollLeft = startScrollLeft - diff;\n  }\n\n  onScrollStart();\n\n  /**\n   * Если окончание прокрутки вышло за ноль\n   */\n  if (startScrollLeft * endScrollLeft < 0) {\n    endScrollLeft = 0;\n  }\n\n  if (Math.abs(endScrollLeft) >= Math.abs(extremeScrollLeft)) {\n    onScrollToEndBorder();\n    endScrollLeft = extremeScrollLeft;\n  }\n\n  const startTime = now();\n\n  (function scroll() {\n    const time = now();\n    const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n    const value = easeInOutSine(elapsed);\n\n    const currentScrollLeft = startScrollLeft + (endScrollLeft - startScrollLeft) * value;\n    scrollElement.scrollLeft = roundingAwayFromZero(currentScrollLeft);\n\n    const scrollEnd =\n      textDirection === 'ltr' ? Math.max(0, endScrollLeft) : Math.min(0, endScrollLeft);\n    if (roundUpElementScrollLeft(scrollElement) !== scrollEnd && elapsed !== 1) {\n      requestAnimationFrame(scroll);\n      return;\n    }\n\n    onScrollEnd();\n    animationQueue.shift();\n    if (animationQueue.length > 0) {\n      animationQueue[0]();\n    }\n  })();\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n */\nexport const HorizontalScroll = ({\n  children,\n  getScrollToLeft,\n  getScrollToRight,\n  showArrows = true,\n  arrowSize = 'm',\n  arrowOffsetY,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  scrollOnAnyWheel = false,\n  prevButtonTestId,\n  nextButtonTestId,\n  // ContentWrapper\n  ContentWrapperComponent = 'div',\n  contentWrapperRef,\n  contentWrapperClassName,\n  ...restProps\n}: HorizontalScrollProps): React.ReactNode => {\n  const [canScrollStart, setCanScrollStart] = React.useState(false);\n  const [canScrollEnd, setCanScrollEnd] = React.useState(false);\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n\n  const isCustomScrollingRef = React.useRef(false);\n\n  const scrollerRef = useExternRef(getRef);\n\n  const animationQueue = React.useRef<VoidFunction[]>([]);\n\n  const hasPointer = useAdaptivityHasPointer();\n\n  const scrollTo = React.useCallback(\n    (getScrollPosition: ScrollPositionHandler) => {\n      const scrollElement = scrollerRef.current;\n\n      animationQueue.current.push(() =>\n        doScroll({\n          scrollElement,\n          getScrollPosition,\n          animationQueue: animationQueue.current,\n          onScrollToEndBorder: () => setCanScrollEnd(false),\n          onScrollEnd: () => (isCustomScrollingRef.current = false),\n          onScrollStart: () => (isCustomScrollingRef.current = true),\n          initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,\n          scrollAnimationDuration,\n          textDirection: direction,\n        }),\n      );\n      if (animationQueue.current.length === 1) {\n        animationQueue.current[0]();\n      }\n    },\n    [scrollerRef, scrollAnimationDuration, direction, setCanScrollEnd],\n  );\n\n  const scrollToStart = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n  const scrollToEnd = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToRight, scrollTo, scrollerRef]);\n\n  const calculateArrowsVisibility = React.useCallback(() => {\n    if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {\n      const scrollElement = scrollerRef.current;\n      const scrollLeft = scrollElement.scrollLeft;\n\n      setCanScrollStart(isRtl ? scrollLeft < 0 : scrollLeft > 0);\n      setCanScrollEnd(\n        Math.abs(roundUpElementScrollLeft(scrollElement)) + scrollElement.offsetWidth <\n          scrollElement.scrollWidth,\n      );\n    }\n  }, [showArrows, hasPointer, scrollerRef, isRtl]);\n\n  React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);\n\n  useIsomorphicLayoutEffect(\n    function addWheelEventHandler() {\n      const scrollEl = scrollerRef.current;\n      if (!scrollEl) {\n        return noop;\n      }\n      /**\n       * Прокрутка с помощью любого колеса мыши\n       */\n      const onWheel = (e: WheelEvent) => {\n        scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n        e.preventDefault();\n      };\n\n      const listenerOptions = { passive: false };\n\n      if (scrollOnAnyWheel) {\n        scrollEl.addEventListener('wheel', onWheel, listenerOptions);\n      }\n      scrollEl.addEventListener('scroll', calculateArrowsVisibility, listenerOptions);\n\n      return () => {\n        if (scrollOnAnyWheel) {\n          // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для wheel нет passive свойства\n          scrollEl.removeEventListener('wheel', onWheel, listenerOptions);\n        }\n        // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для scroll нет passive свойства\n        scrollEl.removeEventListener('scroll', calculateArrowsVisibility, listenerOptions);\n      };\n    },\n    [scrollOnAnyWheel, calculateArrowsVisibility, scrollerRef],\n  );\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalHorizontalScroll',\n        showArrows === 'always' && styles.withConstArrows,\n        isRtl && styles.rtl,\n      )}\n      onMouseEnter={calculateArrowsVisibility}\n    >\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollStart && (\n        <ScrollArrow\n          data-testid={prevButtonTestId}\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"left\"\n          aria-hidden\n          tabIndex={-1}\n          className={classNames(styles.arrow, styles.arrowLeft)}\n          onClick={scrollToStart}\n        />\n      )}\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollEnd && (\n        <ScrollArrow\n          data-testid={nextButtonTestId}\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"right\"\n          aria-hidden\n          tabIndex={-1}\n          className={classNames(styles.arrow, styles.arrowRight)}\n          onClick={scrollToEnd}\n        />\n      )}\n      <div className={styles.in} ref={scrollerRef}>\n        <ContentWrapperComponent\n          className={classNames(styles.inWrapper, contentWrapperClassName)}\n          ref={contentWrapperRef}\n        >\n          {children}\n        </ContentWrapperComponent>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useConfigDirection","useExternRef","easeInOutSine","useIsomorphicLayoutEffect","RootComponent","ScrollArrow","styles","now","performance","Date","roundingAwayFromZero","value","Math","ceil","floor","roundUpElementScrollLeft","el","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToEndBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","textDirection","extremeScrollLeft","offsetWidth","startScrollLeft","remappedStartScrollLeft","endScrollLeft","diff","abs","startTime","scroll","time","elapsed","min","currentScrollLeft","scrollEnd","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","scrollOnAnyWheel","prevButtonTestId","nextButtonTestId","ContentWrapperComponent","contentWrapperRef","contentWrapperClassName","restProps","canScrollStart","setCanScrollStart","useState","canScrollEnd","setCanScrollEnd","direction","isRtl","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToStart","i","scrollToEnd","calculateArrowsVisibility","useEffect","addWheelEventHandler","scrollEl","onWheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","listenerOptions","passive","addEventListener","removeEventListener","baseClassName","host","withConstArrows","rtl","onMouseEnter","undefined","data-testid","size","offsetY","aria-hidden","tabIndex","className","arrow","arrowLeft","onClick","arrowRight","div","in","ref","inWrapper"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow, type ScrollArrowProps } from '../ScrollArrow/ScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\n/* eslint-disable jsdoc/require-jsdoc */\ninterface ScrollContext {\n  scrollElement: HTMLElement | null;\n  scrollAnimationDuration: number;\n  animationQueue: VoidFunction[];\n  getScrollPosition: (currentPosition: number) => number;\n  onScrollToEndBorder: VoidFunction;\n  onScrollEnd: VoidFunction;\n  onScrollStart: VoidFunction;\n  /**\n   * Начальная ширина прокрутки.\n   * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate.\n   */\n  initialScrollWidth: number;\n  textDirection: 'ltr' | 'rtl';\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Функция для расчета величины прокрутки при нажатии на левую стрелку.\n   */\n  getScrollToLeft?: ScrollPositionHandler;\n  /**\n   * Функция для расчета величины прокрутки при нажатии на правую стрелку.\n   */\n  getScrollToRight?: ScrollPositionHandler;\n  /**\n   * Размер стрелок.\n   */\n  arrowSize?: ScrollArrowProps['size'];\n  /**\n   * Смещает иконки кнопок навигации по вертикали.\n   */\n  arrowOffsetY?: number | string;\n  /**\n   * Показывать ли стрелки.\n   */\n  showArrows?: boolean | 'always';\n  /**\n   * Длительность анимации скролла.\n   */\n  scrollAnimationDuration?: number;\n  /**\n   * Добавляет возможность прокручивать контент на любое колесо мыши.\n   * По умолчанию прокручивается как любой горизонтальный контент через shift.\n   */\n  scrollOnAnyWheel?: boolean;\n  /**\n   * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении предыдущего элемента.\n   */\n  prevButtonTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении следующего элемента.\n   */\n  nextButtonTestId?: string;\n  /**\n   * Позволяет поменять тег используемый для обертки над контентом, прокинутым в `children`.\n   */\n  ContentWrapperComponent?: React.ElementType;\n  /**\n   * `ref` для обертки над контентом, прокинутым в `children`.\n   */\n  contentWrapperRef?: React.Ref<HTMLElement>;\n  /**\n   * Специфичный `className` для обертки над контентом, прокинутым в `children`.\n   */\n  contentWrapperClassName?: string;\n}\n\n/**\n * Timing method.\n */\nfunction now() {\n  return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округление к большему по модулю.\n *\n * ## Пример\n *\n * ```ts\n * import { strict as assert } from 'node:assert';\n *\n * assert.equal(roundingAwayFromZero(5.1), 6)\n * assert.equal(roundingAwayFromZero(-5.1), -6)\n * ```\n */\nfunction roundingAwayFromZero(value: number): number {\n  return value > 0 ? Math.ceil(value) : Math.floor(value);\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445.\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => roundingAwayFromZero(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250.\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n  scrollElement,\n  getScrollPosition,\n  animationQueue,\n  onScrollToEndBorder,\n  onScrollEnd,\n  onScrollStart,\n  initialScrollWidth,\n  scrollAnimationDuration,\n  textDirection,\n}: ScrollContext) {\n  if (!scrollElement || !getScrollPosition) {\n    return;\n  }\n\n  /**\n   * Крайнее значение сдвига.\n   */\n  const extremeScrollLeft =\n    (textDirection === 'ltr' ? 1 : -1) * (initialScrollWidth - scrollElement.offsetWidth);\n\n  const startScrollLeft = roundUpElementScrollLeft(scrollElement);\n  const remappedStartScrollLeft = startScrollLeft * (textDirection === 'rtl' ? -1 : 1);\n\n  let endScrollLeft = getScrollPosition(remappedStartScrollLeft);\n\n  const diff = endScrollLeft - remappedStartScrollLeft;\n  if (textDirection === 'rtl') {\n    endScrollLeft = startScrollLeft - diff;\n  }\n\n  onScrollStart();\n\n  /**\n   * Если окончание прокрутки вышло за ноль.\n   */\n  if (startScrollLeft * endScrollLeft < 0) {\n    endScrollLeft = 0;\n  }\n\n  if (Math.abs(endScrollLeft) >= Math.abs(extremeScrollLeft)) {\n    onScrollToEndBorder();\n    endScrollLeft = extremeScrollLeft;\n  }\n\n  const startTime = now();\n\n  (function scroll() {\n    const time = now();\n    const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n    const value = easeInOutSine(elapsed);\n\n    const currentScrollLeft = startScrollLeft + (endScrollLeft - startScrollLeft) * value;\n    scrollElement.scrollLeft = roundingAwayFromZero(currentScrollLeft);\n\n    const scrollEnd =\n      textDirection === 'ltr' ? Math.max(0, endScrollLeft) : Math.min(0, endScrollLeft);\n    if (roundUpElementScrollLeft(scrollElement) !== scrollEnd && elapsed !== 1) {\n      requestAnimationFrame(scroll);\n      return;\n    }\n\n    onScrollEnd();\n    animationQueue.shift();\n    if (animationQueue.length > 0) {\n      animationQueue[0]();\n    }\n  })();\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n */\nexport const HorizontalScroll = ({\n  children,\n  getScrollToLeft,\n  getScrollToRight,\n  showArrows = true,\n  arrowSize = 'm',\n  arrowOffsetY,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  scrollOnAnyWheel = false,\n  prevButtonTestId,\n  nextButtonTestId,\n  // ContentWrapper\n  ContentWrapperComponent = 'div',\n  contentWrapperRef,\n  contentWrapperClassName,\n  ...restProps\n}: HorizontalScrollProps): React.ReactNode => {\n  const [canScrollStart, setCanScrollStart] = React.useState(false);\n  const [canScrollEnd, setCanScrollEnd] = React.useState(false);\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n\n  const isCustomScrollingRef = React.useRef(false);\n\n  const scrollerRef = useExternRef(getRef);\n\n  const animationQueue = React.useRef<VoidFunction[]>([]);\n\n  const hasPointer = useAdaptivityHasPointer();\n\n  const scrollTo = React.useCallback(\n    (getScrollPosition: ScrollPositionHandler) => {\n      const scrollElement = scrollerRef.current;\n\n      animationQueue.current.push(() =>\n        doScroll({\n          scrollElement,\n          getScrollPosition,\n          animationQueue: animationQueue.current,\n          onScrollToEndBorder: () => setCanScrollEnd(false),\n          onScrollEnd: () => (isCustomScrollingRef.current = false),\n          onScrollStart: () => (isCustomScrollingRef.current = true),\n          initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,\n          scrollAnimationDuration,\n          textDirection: direction,\n        }),\n      );\n      if (animationQueue.current.length === 1) {\n        animationQueue.current[0]();\n      }\n    },\n    [scrollerRef, scrollAnimationDuration, direction, setCanScrollEnd],\n  );\n\n  const scrollToStart = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n  const scrollToEnd = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToRight, scrollTo, scrollerRef]);\n\n  const calculateArrowsVisibility = React.useCallback(() => {\n    if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {\n      const scrollElement = scrollerRef.current;\n      const scrollLeft = scrollElement.scrollLeft;\n\n      setCanScrollStart(isRtl ? scrollLeft < 0 : scrollLeft > 0);\n      setCanScrollEnd(\n        Math.abs(roundUpElementScrollLeft(scrollElement)) + scrollElement.offsetWidth <\n          scrollElement.scrollWidth,\n      );\n    }\n  }, [showArrows, hasPointer, scrollerRef, isRtl]);\n\n  React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);\n\n  useIsomorphicLayoutEffect(\n    function addWheelEventHandler() {\n      const scrollEl = scrollerRef.current;\n      if (!scrollEl) {\n        return noop;\n      }\n      /**\n       * Прокрутка с помощью любого колеса мыши.\n       */\n      const onWheel = (e: WheelEvent) => {\n        scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n        e.preventDefault();\n      };\n\n      const listenerOptions = { passive: false };\n\n      if (scrollOnAnyWheel) {\n        scrollEl.addEventListener('wheel', onWheel, listenerOptions);\n      }\n      scrollEl.addEventListener('scroll', calculateArrowsVisibility, listenerOptions);\n\n      return () => {\n        if (scrollOnAnyWheel) {\n          // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для wheel нет passive свойства\n          scrollEl.removeEventListener('wheel', onWheel, listenerOptions);\n        }\n        // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для scroll нет passive свойства\n        scrollEl.removeEventListener('scroll', calculateArrowsVisibility, listenerOptions);\n      };\n    },\n    [scrollOnAnyWheel, calculateArrowsVisibility, scrollerRef],\n  );\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalHorizontalScroll',\n        showArrows === 'always' && styles.withConstArrows,\n        isRtl && styles.rtl,\n      )}\n      onMouseEnter={calculateArrowsVisibility}\n    >\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollStart && (\n        <ScrollArrow\n          data-testid={prevButtonTestId}\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"left\"\n          aria-hidden\n          tabIndex={-1}\n          className={classNames(styles.arrow, styles.arrowLeft)}\n          onClick={scrollToStart}\n        />\n      )}\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollEnd && (\n        <ScrollArrow\n          data-testid={nextButtonTestId}\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"right\"\n          aria-hidden\n          tabIndex={-1}\n          className={classNames(styles.arrow, styles.arrowRight)}\n          onClick={scrollToEnd}\n        />\n      )}\n      <div className={styles.in} ref={scrollerRef}>\n        <ContentWrapperComponent\n          className={classNames(styles.inWrapper, contentWrapperClassName)}\n          ref={contentWrapperRef}\n        >\n          {children}\n        </ContentWrapperComponent>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useConfigDirection","useExternRef","easeInOutSine","useIsomorphicLayoutEffect","RootComponent","ScrollArrow","styles","now","performance","Date","roundingAwayFromZero","value","Math","ceil","floor","roundUpElementScrollLeft","el","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToEndBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","textDirection","extremeScrollLeft","offsetWidth","startScrollLeft","remappedStartScrollLeft","endScrollLeft","diff","abs","startTime","scroll","time","elapsed","min","currentScrollLeft","scrollEnd","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","scrollOnAnyWheel","prevButtonTestId","nextButtonTestId","ContentWrapperComponent","contentWrapperRef","contentWrapperClassName","restProps","canScrollStart","setCanScrollStart","useState","canScrollEnd","setCanScrollEnd","direction","isRtl","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToStart","i","scrollToEnd","calculateArrowsVisibility","useEffect","addWheelEventHandler","scrollEl","onWheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","listenerOptions","passive","addEventListener","removeEventListener","baseClassName","host","withConstArrows","rtl","onMouseEnter","undefined","data-testid","size","offsetY","aria-hidden","tabIndex","className","arrow","arrowLeft","onClick","arrowRight","div","in","ref","inWrapper"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './IconButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n} as const;\n\nexport interface IconButtonProps extends TappableProps {\n  /**\n   * Текст кнопки-иконки. Делает ее доступной для ассистивных технологий\n   */\n  label?: string;\n}\n\nconst warn = warnOnce('IconButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/IconButton\n */\nexport const IconButton = ({ label, children, ...restProps }: IconButtonProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  if (process.env.NODE_ENV === 'development') {\n    /* istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n    const isAccessible = hasAccessibleName({\n      children: [children, label],\n      ...restProps,\n    });\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      activeEffectDelay={200}\n      activeMode=\"background\"\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        platform === 'ios' && styles.ios,\n      )}\n    >\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["classNames","useAdaptivity","usePlatform","hasAccessibleName","COMMON_WARNINGS","warnOnce","Tappable","VisuallyHidden","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","warn","IconButton","label","children","restProps","platform","sizeY","process","env","NODE_ENV","isAccessible","a11y","href","activeEffectDelay","activeMode","Component","baseClassName","host","ios"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,6BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAC/D,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AASA,MAAMC,OAAOT,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMU,aAAa,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGC,WAA4B;IAC3E,MAAMC,WAAWjB;IACjB,MAAM,EAAEkB,QAAQ,MAAM,EAAE,GAAGnB;IAE3B,IAAIoB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAerB,kBAAkB;YACrCc,UAAU;gBAACA;gBAAUD;aAAM;YAC3B,GAAGE,SAAS;QACd;QAEA,IAAI,CAACM,cAAc;YACjBV,KAAKV,gBAAgBqB,IAAI,CAACP,UAAUQ,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IAEA,qBACE,MAACpB;QACCqB,mBAAmB;QACnBC,YAAW;QACXC,WAAWX,UAAUQ,IAAI,GAAG,MAAM;QACjC,GAAGR,SAAS;QACbY,eAAe9B,WACbQ,OAAOuB,IAAI,EACXX,UAAU,aAAaX,eAAe,CAACW,MAAM,EAC7CD,aAAa,SAASX,OAAOwB,GAAG;;YAGjChB,uBAAS,KAACT;0BAAgBS;;YAC1BC;;;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './IconButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n} as const;\n\nexport interface IconButtonProps extends TappableProps {\n  /**\n   * Текст кнопки-иконки. Делает ее доступной для ассистивных технологий.\n   */\n  label?: string;\n}\n\nconst warn = warnOnce('IconButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/IconButton\n */\nexport const IconButton = ({ label, children, ...restProps }: IconButtonProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  if (process.env.NODE_ENV === 'development') {\n    /* istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n    const isAccessible = hasAccessibleName({\n      children: [children, label],\n      ...restProps,\n    });\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      activeEffectDelay={200}\n      activeMode=\"background\"\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        platform === 'ios' && styles.ios,\n      )}\n    >\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["classNames","useAdaptivity","usePlatform","hasAccessibleName","COMMON_WARNINGS","warnOnce","Tappable","VisuallyHidden","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","warn","IconButton","label","children","restProps","platform","sizeY","process","env","NODE_ENV","isAccessible","a11y","href","activeEffectDelay","activeMode","Component","baseClassName","host","ios"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,6BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAC/D,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AASA,MAAMC,OAAOT,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMU,aAAa,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGC,WAA4B;IAC3E,MAAMC,WAAWjB;IACjB,MAAM,EAAEkB,QAAQ,MAAM,EAAE,GAAGnB;IAE3B,IAAIoB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAerB,kBAAkB;YACrCc,UAAU;gBAACA;gBAAUD;aAAM;YAC3B,GAAGE,SAAS;QACd;QAEA,IAAI,CAACM,cAAc;YACjBV,KAAKV,gBAAgBqB,IAAI,CAACP,UAAUQ,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IAEA,qBACE,MAACpB;QACCqB,mBAAmB;QACnBC,YAAW;QACXC,WAAWX,UAAUQ,IAAI,GAAG,MAAM;QACjC,GAAGR,SAAS;QACbY,eAAe9B,WACbQ,OAAOuB,IAAI,EACXX,UAAU,aAAaX,eAAe,CAACW,MAAM,EAC7CD,aAAa,SAASX,OAAOwB,GAAG;;YAGjChB,uBAAS,KAACT;0BAAgBS;;YAC1BC;;;AAGP,EAAE"}

package/dist/cssm/components/Image/Image.js

@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { mergeStyle } from "../../helpers/mergeStyle.js";
+import { defineComponentDisplayNames } from "../../lib/react/defineComponentDisplayNames.js";
 import { ImageBase } from "../ImageBase/ImageBase.js";
 import { ImageBadge } from "./ImageBadge/ImageBadge.js";
 import styles from "./Image.module.css";
@@ -93,12 +94,13 @@ const getBorderRadiusBySizeInPx = (size, borderRadius)=>{
         className: classNames(className, styles.host, borderStartStartRadius && styles.borderStartStartRadius, borderStartEndRadius && styles.borderStartEndRadius, borderEndStartRadius && styles.borderEndStartRadius, borderEndEndRadius && styles.borderEndEndRadius)
     });
 };
-Image.displayName = 'Image';
 Image.Badge = ImageBadge;
-Image.Badge.displayName = 'Image.Badge';
 Image.Overlay = ImageBase.Overlay;
-Image.Overlay.displayName = 'Image.Overlay';
 Image.FloatElement = ImageBase.FloatElement;
-Image.FloatElement.displayName = 'Image.FloatElement';
+if (process.env.NODE_ENV !== 'production') {
+    defineComponentDisplayNames(Image.Badge, 'Image.Badge');
+    defineComponentDisplayNames(Image.Overlay, 'Image.Overlay');
+    defineComponentDisplayNames(Image.FloatElement, 'Image.FloatElement');
+}
 
 //# sourceMappingURL=Image.js.map