@vkontakte/vkui 6.1.2 → 6.2.1

package/dist/cssm/components/Gallery/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../src/components/Gallery/hooks.ts"],"names":[],"mappings":"AAIA,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,QAkCxF"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../src/components/Gallery/hooks.ts"],"names":[],"mappings":"AAKA,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,cAAc,EAAE,YAAY,QAyC5F"}

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

@@ -1,38 +1,41 @@
 import * as React from 'react';
-import { useTimeout } from '../../hooks/useTimeout';
+import { useStableCallback } from '../../hooks/useStableCallback';
 import { useDOM } from '../../lib/dom';
-export function useAutoPlay(timeout, slideIndex, callbackFn) {
-    const { clear: clearAutoPlay, set: setAutoPlay } = useTimeout(callbackFn, timeout);
+export function useAutoPlay(timeout, slideIndex, callbackFnProp) {
     const { document } = useDOM();
-    React.useEffect(()=>timeout ? setAutoPlay() : clearAutoPlay(), [
-        timeout,
-        slideIndex,
-        clearAutoPlay,
-        setAutoPlay
-    ]);
-    // Отключаем прокрутку слайдов при неактивной вкладке
-    React.useEffect(function preventSlideChange() {
+    const callbackFn = useStableCallback(callbackFnProp);
+    React.useEffect(function initializeAutoPlay() {
         if (!document || !timeout) {
             return;
         }
-        const changeAutoPlay = ()=>{
-            if (document.visibilityState === 'visible') {
-                clearAutoPlay();
-                setAutoPlay();
+        let timeoutId = null;
+        const stop = ()=>{
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+                timeoutId = null;
             }
-            if (document.visibilityState === 'hidden') {
-                clearAutoPlay();
+        };
+        const start = ()=>{
+            switch(document.visibilityState){
+                case 'visible':
+                    stop();
+                    timeoutId = setTimeout(callbackFn, timeout);
+                    break;
+                case 'hidden':
+                    stop();
             }
         };
-        document.addEventListener('visibilitychange', changeAutoPlay);
+        start();
+        document.addEventListener('visibilitychange', start);
         return ()=>{
-            document.removeEventListener('visibilitychange', changeAutoPlay);
+            stop();
+            document.removeEventListener('visibilitychange', start);
         };
     }, [
         document,
         timeout,
-        clearAutoPlay,
-        setAutoPlay
+        slideIndex,
+        callbackFn
     ]);
 }
 

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 { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\n\nexport function useAutoPlay(timeout: number, slideIndex: number, callbackFn: VoidFunction) {\n  const { clear: clearAutoPlay, set: setAutoPlay } = useTimeout(callbackFn, timeout);\n  const { document } = useDOM();\n\n  React.useEffect(\n    () => (timeout ? setAutoPlay() : clearAutoPlay()),\n    [timeout, slideIndex, clearAutoPlay, setAutoPlay],\n  );\n\n  // Отключаем прокрутку слайдов при неактивной вкладке\n  React.useEffect(\n    function preventSlideChange() {\n      if (!document || !timeout) {\n        return;\n      }\n\n      const changeAutoPlay = () => {\n        if (document.visibilityState === 'visible') {\n          clearAutoPlay();\n          setAutoPlay();\n        }\n        if (document.visibilityState === 'hidden') {\n          clearAutoPlay();\n        }\n      };\n\n      document.addEventListener('visibilitychange', changeAutoPlay);\n\n      return () => {\n        document.removeEventListener('visibilitychange', changeAutoPlay);\n      };\n    },\n    [document, timeout, clearAutoPlay, setAutoPlay],\n  );\n}\n"],"names":["React","useTimeout","useDOM","useAutoPlay","timeout","slideIndex","callbackFn","clear","clearAutoPlay","set","setAutoPlay","document","useEffect","preventSlideChange","changeAutoPlay","visibilityState","addEventListener","removeEventListener"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,MAAM,QAAQ,gBAAgB;AAEvC,OAAO,SAASC,YAAYC,OAAe,EAAEC,UAAkB,EAAEC,UAAwB;IACvF,MAAM,EAAEC,OAAOC,aAAa,EAAEC,KAAKC,WAAW,EAAE,GAAGT,WAAWK,YAAYF;IAC1E,MAAM,EAAEO,QAAQ,EAAE,GAAGT;IAErBF,MAAMY,SAAS,CACb,IAAOR,UAAUM,gBAAgBF,iBACjC;QAACJ;QAASC;QAAYG;QAAeE;KAAY;IAGnD,qDAAqD;IACrDV,MAAMY,SAAS,CACb,SAASC;QACP,IAAI,CAACF,YAAY,CAACP,SAAS;YACzB;QACF;QAEA,MAAMU,iBAAiB;YACrB,IAAIH,SAASI,eAAe,KAAK,WAAW;gBAC1CP;gBACAE;YACF;YACA,IAAIC,SAASI,eAAe,KAAK,UAAU;gBACzCP;YACF;QACF;QAEAG,SAASK,gBAAgB,CAAC,oBAAoBF;QAE9C,OAAO;YACLH,SAASM,mBAAmB,CAAC,oBAAoBH;QACnD;IACF,GACA;QAACH;QAAUP;QAASI;QAAeE;KAAY;AAEnD"}
+{"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 { TimeoutId } from '../../types';\n\nexport function useAutoPlay(timeout: number, slideIndex: number, callbackFnProp: VoidFunction) {\n  const { document } = useDOM();\n  const callbackFn = useStableCallback(callbackFnProp);\n\n  React.useEffect(\n    function initializeAutoPlay() {\n      if (!document || !timeout) {\n        return;\n      }\n\n      let timeoutId: TimeoutId = null;\n\n      const stop = () => {\n        if (timeoutId) {\n          clearTimeout(timeoutId);\n          timeoutId = null;\n        }\n      };\n\n      const start = () => {\n        switch (document.visibilityState) {\n          case 'visible':\n            stop();\n            timeoutId = setTimeout(callbackFn, timeout);\n            break;\n          case 'hidden':\n            stop();\n        }\n      };\n\n      start();\n\n      document.addEventListener('visibilitychange', start);\n\n      return () => {\n        stop();\n        document.removeEventListener('visibilitychange', start);\n      };\n    },\n    [document, timeout, slideIndex, callbackFn],\n  );\n}\n"],"names":["React","useStableCallback","useDOM","useAutoPlay","timeout","slideIndex","callbackFnProp","document","callbackFn","useEffect","initializeAutoPlay","timeoutId","stop","clearTimeout","start","visibilityState","setTimeout","addEventListener","removeEventListener"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,MAAM,QAAQ,gBAAgB;AAGvC,OAAO,SAASC,YAAYC,OAAe,EAAEC,UAAkB,EAAEC,cAA4B;IAC3F,MAAM,EAAEC,QAAQ,EAAE,GAAGL;IACrB,MAAMM,aAAaP,kBAAkBK;IAErCN,MAAMS,SAAS,CACb,SAASC;QACP,IAAI,CAACH,YAAY,CAACH,SAAS;YACzB;QACF;QAEA,IAAIO,YAAuB;QAE3B,MAAMC,OAAO;YACX,IAAID,WAAW;gBACbE,aAAaF;gBACbA,YAAY;YACd;QACF;QAEA,MAAMG,QAAQ;YACZ,OAAQP,SAASQ,eAAe;gBAC9B,KAAK;oBACHH;oBACAD,YAAYK,WAAWR,YAAYJ;oBACnC;gBACF,KAAK;oBACHQ;YACJ;QACF;QAEAE;QAEAP,SAASU,gBAAgB,CAAC,oBAAoBH;QAE9C,OAAO;YACLF;YACAL,SAASW,mBAAmB,CAAC,oBAAoBJ;QACnD;IACF,GACA;QAACP;QAAUH;QAASC;QAAYG;KAAW;AAE/C"}

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 { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Gradient.module.css';\n\nexport interface GradientProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Тип градиента\n   */\n  mode?: 'tint' | 'default';\n  /**\n   * Направление градиента\n   */\n  to?: 'top' | 'bottom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gradient\n */\nexport const Gradient = ({ mode = 'default', to = 'top', ...restProps }: GradientProps) => {\n  return (\n    <RootComponent\n      role=\"presentation\"\n      {...restProps}\n      baseClassName={classNames(\n        styles['Gradient'],\n        mode !== 'default' && styles['Gradient--mode-tint'],\n        to === 'bottom' && styles['Gradient--to-bottom'],\n      )}\n    />\n  );\n};\n"],"names":["classNames","RootComponent","styles","Gradient","mode","to","restProps","role","baseClassName"],"rangeMappings":";;;;;;;;;;;;","mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,wBAAwB;AAa3C;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EAAEC,OAAO,SAAS,EAAEC,KAAK,KAAK,EAAE,GAAGC,WAA0B;IACpF,qBACE,KAACL;QACCM,MAAK;QACJ,GAAGD,SAAS;QACbE,eAAeR,WACbE,MAAM,CAAC,WAAW,EAClBE,SAAS,aAAaF,MAAM,CAAC,sBAAsB,EACnDG,OAAO,YAAYH,MAAM,CAAC,sBAAsB;;AAIxD,EAAE"}
+{"version":3,"sources":["../../../../src/components/Gradient/Gradient.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Gradient.module.css';\n\nexport interface GradientProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Тип градиента\n   */\n  mode?: 'tint' | 'default';\n  /**\n   * Направление градиента\n   */\n  to?: 'top' | 'bottom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gradient\n */\nexport const Gradient = ({ mode = 'default', to = 'top', ...restProps }: GradientProps) => {\n  return (\n    <RootComponent\n      role=\"presentation\"\n      {...restProps}\n      baseClassName={classNames(\n        styles['Gradient'],\n        mode !== 'default' && styles['Gradient--mode-tint'],\n        to === 'bottom' && styles['Gradient--to-bottom'],\n      )}\n    />\n  );\n};\n"],"names":["classNames","RootComponent","styles","Gradient","mode","to","restProps","role","baseClassName"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,wBAAwB;AAa3C;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EAAEC,OAAO,SAAS,EAAEC,KAAK,KAAK,EAAE,GAAGC,WAA0B;IACpF,qBACE,KAACL;QACCM,MAAK;QACJ,GAAGD,SAAS;QACbE,eAAeR,WACbE,MAAM,CAAC,WAAW,EAClBE,SAAS,aAAaF,MAAM,CAAC,sBAAsB,EACnDG,OAAO,YAAYH,MAAM,CAAC,sBAAsB;;AAIxD,EAAE"}

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

@@ -14,6 +14,6 @@ export interface GridAvatarProps extends Omit<ImageBaseProps, 'src' | 'fallbackI
  */
 export declare const GridAvatar: {
     ({ src, size, className, children, ...restProps }: GridAvatarProps): import("react/jsx-runtime").JSX.Element;
-    Badge: ({ className, ...restProps }: import("../ImageBase/ImageBase").ImageBaseBadgeProps) => import("react/jsx-runtime").JSX.Element;
+    Badge: ({ className, ...restProps }: GridAvatarBadgeProps) => import("react/jsx-runtime").JSX.Element;
 };
 //# sourceMappingURL=GridAvatar.d.ts.map

package/dist/cssm/components/GridAvatar/GridAvatar.js

@@ -28,7 +28,7 @@ const warn = warnOnce('GridAvatar');
                         style: {
                             backgroundImage: `url(${url})`
                         }
-                    }, url) : null)
+                    }, index) : null)
             }),
             children
         ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/GridAvatar/GridAvatar.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ImageBase, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { GridAvatarBadge, type GridAvatarBadgeProps } from './GridAvatarBadge/GridAvatarBadge';\nimport styles from './GridAvatar.module.css';\n\nexport { GridAvatarBadgeProps };\n\nexport const GRID_AVATAR_DEFAULT_SIZE = 48;\n\nexport const MAX_GRID_LENGTH = 4;\n\nexport interface GridAvatarProps extends Omit<ImageBaseProps, 'src' | 'fallbackIcon'> {\n  /**\n   * Массив со ссылками. От 1 до 4 элементов.\n   */\n  src?: string[];\n}\n\nconst warn = warnOnce('GridAvatar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/GridAvatar\n */\nexport const GridAvatar = ({\n  src = [],\n  size = GRID_AVATAR_DEFAULT_SIZE,\n  className,\n  children,\n  ...restProps\n}: GridAvatarProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    if (src.length > MAX_GRID_LENGTH) {\n      warn(`Длина массива src (${src.length}) больше максимальной (${MAX_GRID_LENGTH})`, 'error');\n    }\n  }\n\n  return (\n    <ImageBase {...restProps} size={size} className={classNames(styles['GridAvatar'], className)}>\n      <div className={styles['GridAvatar__in']} aria-hidden>\n        {src.map((url, index) =>\n          index < MAX_GRID_LENGTH ? (\n            <div\n              key={url}\n              className={styles['GridAvatar__item']}\n              style={{ backgroundImage: `url(${url})` }}\n            />\n          ) : null,\n        )}\n      </div>\n      {children}\n    </ImageBase>\n  );\n};\n\nGridAvatar.Badge = GridAvatarBadge;\n"],"names":["classNames","warnOnce","ImageBase","GridAvatarBadge","styles","GRID_AVATAR_DEFAULT_SIZE","MAX_GRID_LENGTH","warn","GridAvatar","src","size","className","children","restProps","process","env","NODE_ENV","length","div","aria-hidden","map","url","index","style","backgroundImage","Badge"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,SAAS,QAA6B,yBAAyB;AACxE,SAASC,eAAe,QAAmC,oCAAoC;AAC/F,OAAOC,YAAY,0BAA0B;AAI7C,OAAO,MAAMC,2BAA2B,GAAG;AAE3C,OAAO,MAAMC,kBAAkB,EAAE;AASjC,MAAMC,OAAON,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMO,aAAa,CAAC,EACzBC,MAAM,EAAE,EACRC,OAAOL,wBAAwB,EAC/BM,SAAS,EACTC,QAAQ,EACR,GAAGC,WACa;IAChB,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIP,IAAIQ,MAAM,GAAGX,iBAAiB;YAChCC,KAAK,CAAC,mBAAmB,EAAEE,IAAIQ,MAAM,CAAC,uBAAuB,EAAEX,gBAAgB,CAAC,CAAC,EAAE;QACrF;IACF;IAEA,qBACE,MAACJ;QAAW,GAAGW,SAAS;QAAEH,MAAMA;QAAMC,WAAWX,WAAWI,MAAM,CAAC,aAAa,EAAEO;;0BAChF,KAACO;gBAAIP,WAAWP,MAAM,CAAC,iBAAiB;gBAAEe,aAAW;0BAClDV,IAAIW,GAAG,CAAC,CAACC,KAAKC,QACbA,QAAQhB,gCACN,KAACY;wBAECP,WAAWP,MAAM,CAAC,mBAAmB;wBACrCmB,OAAO;4BAAEC,iBAAiB,CAAC,IAAI,EAAEH,IAAI,CAAC,CAAC;wBAAC;uBAFnCA,OAIL;;YAGPT;;;AAGP,EAAE;AAEFJ,WAAWiB,KAAK,GAAGtB"}
+{"version":3,"sources":["../../../../src/components/GridAvatar/GridAvatar.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ImageBase, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { GridAvatarBadge, type GridAvatarBadgeProps } from './GridAvatarBadge/GridAvatarBadge';\nimport styles from './GridAvatar.module.css';\n\nexport { GridAvatarBadgeProps };\n\nexport const GRID_AVATAR_DEFAULT_SIZE = 48;\n\nexport const MAX_GRID_LENGTH = 4;\n\nexport interface GridAvatarProps extends Omit<ImageBaseProps, 'src' | 'fallbackIcon'> {\n  /**\n   * Массив со ссылками. От 1 до 4 элементов.\n   */\n  src?: string[];\n}\n\nconst warn = warnOnce('GridAvatar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/GridAvatar\n */\nexport const GridAvatar = ({\n  src = [],\n  size = GRID_AVATAR_DEFAULT_SIZE,\n  className,\n  children,\n  ...restProps\n}: GridAvatarProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    if (src.length > MAX_GRID_LENGTH) {\n      warn(`Длина массива src (${src.length}) больше максимальной (${MAX_GRID_LENGTH})`, 'error');\n    }\n  }\n\n  return (\n    <ImageBase {...restProps} size={size} className={classNames(styles['GridAvatar'], className)}>\n      <div className={styles['GridAvatar__in']} aria-hidden>\n        {src.map((url, index) =>\n          index < MAX_GRID_LENGTH ? (\n            <div\n              key={index}\n              className={styles['GridAvatar__item']}\n              style={{ backgroundImage: `url(${url})` }}\n            />\n          ) : null,\n        )}\n      </div>\n      {children}\n    </ImageBase>\n  );\n};\n\nGridAvatar.Badge = GridAvatarBadge;\n"],"names":["classNames","warnOnce","ImageBase","GridAvatarBadge","styles","GRID_AVATAR_DEFAULT_SIZE","MAX_GRID_LENGTH","warn","GridAvatar","src","size","className","children","restProps","process","env","NODE_ENV","length","div","aria-hidden","map","url","index","style","backgroundImage","Badge"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,SAAS,QAA6B,yBAAyB;AACxE,SAASC,eAAe,QAAmC,oCAAoC;AAC/F,OAAOC,YAAY,0BAA0B;AAI7C,OAAO,MAAMC,2BAA2B,GAAG;AAE3C,OAAO,MAAMC,kBAAkB,EAAE;AASjC,MAAMC,OAAON,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMO,aAAa,CAAC,EACzBC,MAAM,EAAE,EACRC,OAAOL,wBAAwB,EAC/BM,SAAS,EACTC,QAAQ,EACR,GAAGC,WACa;IAChB,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIP,IAAIQ,MAAM,GAAGX,iBAAiB;YAChCC,KAAK,CAAC,mBAAmB,EAAEE,IAAIQ,MAAM,CAAC,uBAAuB,EAAEX,gBAAgB,CAAC,CAAC,EAAE;QACrF;IACF;IAEA,qBACE,MAACJ;QAAW,GAAGW,SAAS;QAAEH,MAAMA;QAAMC,WAAWX,WAAWI,MAAM,CAAC,aAAa,EAAEO;;0BAChF,KAACO;gBAAIP,WAAWP,MAAM,CAAC,iBAAiB;gBAAEe,aAAW;0BAClDV,IAAIW,GAAG,CAAC,CAACC,KAAKC,QACbA,QAAQhB,gCACN,KAACY;wBAECP,WAAWP,MAAM,CAAC,mBAAmB;wBACrCmB,OAAO;4BAAEC,iBAAiB,CAAC,IAAI,EAAEH,IAAI,CAAC,CAAC;wBAAC;uBAFnCC,SAIL;;YAGPV;;;AAGP,EAAE;AAEFJ,WAAWiB,KAAK,GAAGtB"}

package/dist/cssm/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseBadgeProps, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './GridAvatarBadge.module.css';\n\nexport type GridAvatarBadgeProps = ImageBaseBadgeProps;\n\nexport const GridAvatarBadge = ({ className, ...restProps }: GridAvatarBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(\n        styles['GridAvatarBadge'],\n        size < 96 && styles['GridAvatarBadge--shifted'],\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","ImageBase","ImageBaseContext","styles","GridAvatarBadge","className","restProps","size","useContext","Badge"],"rangeMappings":";;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAA4BC,gBAAgB,QAAQ,4BAA4B;AAClG,OAAOC,YAAY,+BAA+B;AAIlD,OAAO,MAAMC,kBAAkB,CAAC,EAAEC,SAAS,EAAE,GAAGC,WAAiC;IAC/E,MAAM,EAAEC,IAAI,EAAE,GAAGR,MAAMS,UAAU,CAACN;IAClC,qBACE,KAACD,UAAUQ,KAAK;QACb,GAAGH,SAAS;QACbD,WAAWL,WACTG,MAAM,CAAC,kBAAkB,EACzBI,OAAO,MAAMJ,MAAM,CAAC,2BAA2B,EAC/CE;;AAIR,EAAE"}
+{"version":3,"sources":["../../../../../src/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseBadgeProps, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './GridAvatarBadge.module.css';\n\nexport type GridAvatarBadgeProps = ImageBaseBadgeProps;\n\nexport const GridAvatarBadge = ({ className, ...restProps }: GridAvatarBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(\n        styles['GridAvatarBadge'],\n        size < 96 && styles['GridAvatarBadge--shifted'],\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","ImageBase","ImageBaseContext","styles","GridAvatarBadge","className","restProps","size","useContext","Badge"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAA4BC,gBAAgB,QAAQ,4BAA4B;AAClG,OAAOC,YAAY,+BAA+B;AAIlD,OAAO,MAAMC,kBAAkB,CAAC,EAAEC,SAAS,EAAE,GAAGC,WAAiC;IAC/E,MAAM,EAAEC,IAAI,EAAE,GAAGR,MAAMS,UAAU,CAACN;IAClC,qBACE,KAACD,UAAUQ,KAAK;QACb,GAAGH,SAAS;QACbD,WAAWL,WACTG,MAAM,CAAC,kBAAkB,EACzBI,OAAO,MAAMJ,MAAM,CAAC,2BAA2B,EAC/CE;;AAIR,EAAE"}

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 { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeTypeValues } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Separator } from '../Separator/Separator';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Group.module.css';\n\nconst sizeXClassNames = {\n  none: classNames(styles['Group--sizeX-none'], 'vkuiInternalGroup--sizeX-none'),\n  ['compact']: styles['Group--sizeX-compact'],\n};\n\nconst stylesMode = {\n  none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),\n  plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),\n  card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card'),\n};\n\nconst stylesPadding = {\n  s: styles['Group--padding-s'],\n  m: styles['Group--padding-m'],\n};\n\n/**\n * Вычисляем mode для Group.\n */\nfunction useGroupMode(\n  forcedMode: GroupProps['mode'],\n  sizeX: SizeTypeValues | 'none',\n  isInsideModal: boolean,\n): 'plain' | 'card' | 'none' {\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 interface GroupProps extends HTMLAttributesWithRootRef<HTMLElement> {\n  header?: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n    `show` - разделитель всегда показывается,\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/**\n * @see https://vkcom.github.io/VKUI/#/Group\n */\nexport const Group = ({\n  header,\n  description,\n  children,\n  separator = 'auto',\n  mode: modeProps,\n  padding = 'm',\n  tabIndex: tabIndexProp,\n  ...restProps\n}: GroupProps) => {\n  const { isInsideModal } = React.useContext(ModalRootContext);\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  return (\n    <>\n      <RootComponent\n        Component=\"section\"\n        {...restProps}\n        tabIndex={tabIndex}\n        baseClassName={classNames(\n          'vkuiInternalGroup',\n          styles['Group'],\n          isInsideModal && styles['Group--inside-modal'],\n          sizeX !== 'regular' && sizeXClassNames[sizeX],\n          mode && stylesMode[mode],\n          stylesPadding[padding],\n        )}\n      >\n        {hasReactNode(header) && <div className={styles['Group__header']}>{header}</div>}\n        {children}\n        {hasReactNode(description) && (\n          <Footnote className={styles['Group__description']}>{description}</Footnote>\n        )}\n      </RootComponent>\n\n      {separator !== 'hide' && (\n        <React.Fragment>\n          <div\n            className={classNames(styles['Group__separator'], styles['Group__separator--spacing'])}\n          />\n          <Separator\n            className={classNames(\n              styles['Group__separator'],\n              styles['Group__separator--separator'],\n              separator === 'show' && styles['Group__separator--force'],\n            )}\n          />\n        </React.Fragment>\n      )}\n    </>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","warnOnce","AppRootContext","ModalRootContext","RootComponent","Separator","Footnote","styles","sizeXClassNames","none","stylesMode","plain","card","stylesPadding","s","m","useGroupMode","forcedMode","sizeX","isInsideModal","layout","useContext","warn","Group","header","description","children","separator","mode","modeProps","padding","tabIndex","tabIndexProp","restProps","isTabPanel","role","process","env","NODE_ENV","undefined","Component","baseClassName","div","className","Fragment"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeTypeValues } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Separator } from '../Separator/Separator';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Group.module.css';\n\nconst sizeXClassNames = {\n  none: classNames(styles['Group--sizeX-none'], 'vkuiInternalGroup--sizeX-none'),\n  ['compact']: styles['Group--sizeX-compact'],\n};\n\nconst stylesMode = {\n  none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),\n  plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),\n  card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card'),\n};\n\nconst stylesPadding = {\n  s: styles['Group--padding-s'],\n  m: styles['Group--padding-m'],\n};\n\n/**\n * Вычисляем mode для Group.\n */\nfunction useGroupMode(\n  forcedMode: GroupProps['mode'],\n  sizeX: SizeTypeValues | 'none',\n  isInsideModal: boolean,\n): 'plain' | 'card' | 'none' {\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 interface GroupProps extends HTMLAttributesWithRootRef<HTMLElement> {\n  header?: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n    `show` - разделитель всегда показывается,\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/**\n * @see https://vkcom.github.io/VKUI/#/Group\n */\nexport const Group = ({\n  header,\n  description,\n  children,\n  separator = 'auto',\n  mode: modeProps,\n  padding = 'm',\n  tabIndex: tabIndexProp,\n  ...restProps\n}: GroupProps) => {\n  const { isInsideModal } = React.useContext(ModalRootContext);\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  return (\n    <>\n      <RootComponent\n        Component=\"section\"\n        {...restProps}\n        tabIndex={tabIndex}\n        baseClassName={classNames(\n          'vkuiInternalGroup',\n          styles['Group'],\n          isInsideModal && styles['Group--inside-modal'],\n          sizeX !== 'regular' && sizeXClassNames[sizeX],\n          mode && stylesMode[mode],\n          stylesPadding[padding],\n        )}\n      >\n        {hasReactNode(header) && <div className={styles['Group__header']}>{header}</div>}\n        {children}\n        {hasReactNode(description) && (\n          <Footnote className={styles['Group__description']}>{description}</Footnote>\n        )}\n      </RootComponent>\n\n      {separator !== 'hide' && (\n        <React.Fragment>\n          <div\n            className={classNames(styles['Group__separator'], styles['Group__separator--spacing'])}\n          />\n          <Separator\n            className={classNames(\n              styles['Group__separator'],\n              styles['Group__separator--separator'],\n              separator === 'show' && styles['Group__separator--force'],\n            )}\n          />\n        </React.Fragment>\n      )}\n    </>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","warnOnce","AppRootContext","ModalRootContext","RootComponent","Separator","Footnote","styles","sizeXClassNames","none","stylesMode","plain","card","stylesPadding","s","m","useGroupMode","forcedMode","sizeX","isInsideModal","layout","useContext","warn","Group","header","description","children","separator","mode","modeProps","padding","tabIndex","tabIndexProp","restProps","isTabPanel","role","process","env","NODE_ENV","undefined","Component","baseClassName","div","className","Fragment"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\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  mode?: 'primary' | 'secondary' | 'tertiary';\n  size?: 'regular' | 'large';\n  subtitle?: React.ReactNode;\n  /* Позволяет задать тип элемента в который будет обёрнут subtitle */\n  subtitleComponent?: React.ElementType;\n  /**\n   * Допускаются иконки, текст, Link\n   */\n  aside?: React.ReactNode;\n  /**\n   * Допускаются текст, Indicator\n   */\n  indicator?: React.ReactNode;\n  multiline?: boolean;\n}\n\ntype HeaderContentProps = Pick<HeaderProps, 'children' | 'mode' | 'size' | 'className'> &\n  HasComponent;\n\nconst HeaderContent = ({ mode, size, ...restProps }: HeaderContentProps) => {\n  const isLarge = size === 'large';\n\n  const platform = usePlatform();\n  if (platform === 'ios') {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"2\" {...restProps} />\n        ) : (\n          <Title weight=\"1\" level=\"3\" {...restProps} />\n        );\n      case 'secondary':\n        return <Footnote weight=\"1\" caps {...restProps} />;\n      case 'tertiary':\n        return <Title weight=\"1\" level=\"3\" {...restProps} />;\n    }\n  }\n\n  switch (mode) {\n    case 'primary':\n      return isLarge ? (\n        <Title level=\"2\" weight=\"2\" {...restProps} />\n      ) : (\n        <Headline weight=\"2\" {...restProps} />\n      );\n    case 'secondary':\n      return <Footnote weight=\"1\" caps {...restProps} />;\n    case 'tertiary':\n      return <Headline weight=\"2\" {...restProps} />;\n  }\n\n  return null;\n};\n\nconst stylesMode = {\n  primary: styles['Header--mode-primary'],\n  secondary: styles['Header--mode-secondary'],\n  tertiary: styles['Header--mode-tertiary'],\n};\n/**\n * @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n  mode = 'primary',\n  size = 'regular',\n  Component = 'h2',\n  children,\n  subtitle,\n  subtitleComponent = 'span',\n  indicator,\n  aside,\n  multiline,\n  ...restProps\n}: HeaderProps) => {\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['Header'],\n        stylesMode[mode],\n        size === 'large' && styles['Header--large'],\n        isPrimitiveReactNode(indicator) && styles['Header--pi'],\n        hasReactNode(subtitle) && styles['Header--with-subtitle'],\n      )}\n    >\n      <div className={styles['Header__main']}>\n        <HeaderContent\n          className={styles['Header__content']}\n          Component={Component}\n          mode={mode}\n          size={size}\n        >\n          <span\n            className={classNames(\n              styles['Header__content-in'],\n              multiline && styles['Header__content--multiline'],\n            )}\n          >\n            {children}\n          </span>\n          {hasReactNode(indicator) && (\n            <Footnote className={styles['Header__indicator']} weight=\"2\">\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n\n        {hasReactNode(subtitle) && (\n          <Subhead\n            className={classNames(\n              styles['Header__subtitle'],\n              multiline && styles['Header__content--multiline'],\n            )}\n            Component={subtitleComponent}\n          >\n            {subtitle}\n          </Subhead>\n        )}\n      </div>\n\n      {hasReactNode(aside) && (\n        <Paragraph className={styles['Header__aside']} Component=\"span\">\n          {aside}\n        </Paragraph>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","usePlatform","RootComponent","Footnote","Headline","Paragraph","Subhead","Title","styles","HeaderContent","mode","size","restProps","isLarge","platform","level","weight","caps","stylesMode","primary","secondary","tertiary","Header","Component","children","subtitle","subtitleComponent","indicator","aside","multiline","baseClassName","div","className","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,oBAAoB,QAAQ,kBAAkB;AACjF,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,SAAS,QAAQ,oCAAoC;AAC9D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,KAAK,QAAQ,4BAA4B;AAClD,OAAOC,YAAY,sBAAsB;AAsBzC,MAAMC,gBAAgB,CAAC,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGC,WAA+B;IACrE,MAAMC,UAAUF,SAAS;IAEzB,MAAMG,WAAWb;IACjB,IAAIa,aAAa,OAAO;QACtB,OAAQJ;YACN,KAAK;gBACH,OAAOG,wBACL,KAACN;oBAAMQ,OAAM;oBAAIC,QAAO;oBAAK,GAAGJ,SAAS;mCAEzC,KAACL;oBAAMS,QAAO;oBAAID,OAAM;oBAAK,GAAGH,SAAS;;YAE7C,KAAK;gBACH,qBAAO,KAACT;oBAASa,QAAO;oBAAIC,IAAI;oBAAE,GAAGL,SAAS;;YAChD,KAAK;gBACH,qBAAO,KAACL;oBAAMS,QAAO;oBAAID,OAAM;oBAAK,GAAGH,SAAS;;QACpD;IACF;IAEA,OAAQF;QACN,KAAK;YACH,OAAOG,wBACL,KAACN;gBAAMQ,OAAM;gBAAIC,QAAO;gBAAK,GAAGJ,SAAS;+BAEzC,KAACR;gBAASY,QAAO;gBAAK,GAAGJ,SAAS;;QAEtC,KAAK;YACH,qBAAO,KAACT;gBAASa,QAAO;gBAAIC,IAAI;gBAAE,GAAGL,SAAS;;QAChD,KAAK;YACH,qBAAO,KAACR;gBAASY,QAAO;gBAAK,GAAGJ,SAAS;;IAC7C;IAEA,OAAO;AACT;AAEA,MAAMM,aAAa;IACjBC,SAASX,MAAM,CAAC,uBAAuB;IACvCY,WAAWZ,MAAM,CAAC,yBAAyB;IAC3Ca,UAAUb,MAAM,CAAC,wBAAwB;AAC3C;AACA;;CAEC,GACD,OAAO,MAAMc,SAAS,CAAC,EACrBZ,OAAO,SAAS,EAChBC,OAAO,SAAS,EAChBY,YAAY,IAAI,EAChBC,QAAQ,EACRC,QAAQ,EACRC,oBAAoB,MAAM,EAC1BC,SAAS,EACTC,KAAK,EACLC,SAAS,EACT,GAAGjB,WACS;IACZ,qBACE,MAACV;QACE,GAAGU,SAAS;QACbkB,eAAehC,WACbU,MAAM,CAAC,SAAS,EAChBU,UAAU,CAACR,KAAK,EAChBC,SAAS,WAAWH,MAAM,CAAC,gBAAgB,EAC3CR,qBAAqB2B,cAAcnB,MAAM,CAAC,aAAa,EACvDT,aAAa0B,aAAajB,MAAM,CAAC,wBAAwB;;0BAG3D,MAACuB;gBAAIC,WAAWxB,MAAM,CAAC,eAAe;;kCACpC,MAACC;wBACCuB,WAAWxB,MAAM,CAAC,kBAAkB;wBACpCe,WAAWA;wBACXb,MAAMA;wBACNC,MAAMA;;0CAEN,KAACsB;gCACCD,WAAWlC,WACTU,MAAM,CAAC,qBAAqB,EAC5BqB,aAAarB,MAAM,CAAC,6BAA6B;0CAGlDgB;;4BAEFzB,aAAa4B,4BACZ,KAACxB;gCAAS6B,WAAWxB,MAAM,CAAC,oBAAoB;gCAAEQ,QAAO;0CACtDW;;;;oBAKN5B,aAAa0B,2BACZ,KAACnB;wBACC0B,WAAWlC,WACTU,MAAM,CAAC,mBAAmB,EAC1BqB,aAAarB,MAAM,CAAC,6BAA6B;wBAEnDe,WAAWG;kCAEVD;;;;YAKN1B,aAAa6B,wBACZ,KAACvB;gBAAU2B,WAAWxB,MAAM,CAAC,gBAAgB;gBAAEe,WAAU;0BACtDK;;;;AAKX,EAAE"}
+{"version":3,"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\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  mode?: 'primary' | 'secondary' | 'tertiary';\n  size?: 'regular' | 'large';\n  subtitle?: React.ReactNode;\n  /* Позволяет задать тип элемента в который будет обёрнут subtitle */\n  subtitleComponent?: React.ElementType;\n  /**\n   * Допускаются иконки, текст, Link\n   */\n  aside?: React.ReactNode;\n  /**\n   * Допускаются текст, Indicator\n   */\n  indicator?: React.ReactNode;\n  multiline?: boolean;\n}\n\ntype HeaderContentProps = Pick<HeaderProps, 'children' | 'mode' | 'size' | 'className'> &\n  HasComponent;\n\nconst HeaderContent = ({ mode, size, ...restProps }: HeaderContentProps) => {\n  const isLarge = size === 'large';\n\n  const platform = usePlatform();\n  if (platform === 'ios') {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"2\" {...restProps} />\n        ) : (\n          <Title weight=\"1\" level=\"3\" {...restProps} />\n        );\n      case 'secondary':\n        return <Footnote weight=\"1\" caps {...restProps} />;\n      case 'tertiary':\n        return <Title weight=\"1\" level=\"3\" {...restProps} />;\n    }\n  }\n\n  switch (mode) {\n    case 'primary':\n      return isLarge ? (\n        <Title level=\"2\" weight=\"2\" {...restProps} />\n      ) : (\n        <Headline weight=\"2\" {...restProps} />\n      );\n    case 'secondary':\n      return <Footnote weight=\"1\" caps {...restProps} />;\n    case 'tertiary':\n      return <Headline weight=\"2\" {...restProps} />;\n  }\n\n  return null;\n};\n\nconst stylesMode = {\n  primary: styles['Header--mode-primary'],\n  secondary: styles['Header--mode-secondary'],\n  tertiary: styles['Header--mode-tertiary'],\n};\n/**\n * @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n  mode = 'primary',\n  size = 'regular',\n  Component = 'h2',\n  children,\n  subtitle,\n  subtitleComponent = 'span',\n  indicator,\n  aside,\n  multiline,\n  ...restProps\n}: HeaderProps) => {\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['Header'],\n        stylesMode[mode],\n        size === 'large' && styles['Header--large'],\n        isPrimitiveReactNode(indicator) && styles['Header--pi'],\n        hasReactNode(subtitle) && styles['Header--with-subtitle'],\n      )}\n    >\n      <div className={styles['Header__main']}>\n        <HeaderContent\n          className={styles['Header__content']}\n          Component={Component}\n          mode={mode}\n          size={size}\n        >\n          <span\n            className={classNames(\n              styles['Header__content-in'],\n              multiline && styles['Header__content--multiline'],\n            )}\n          >\n            {children}\n          </span>\n          {hasReactNode(indicator) && (\n            <Footnote className={styles['Header__indicator']} weight=\"2\">\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n\n        {hasReactNode(subtitle) && (\n          <Subhead\n            className={classNames(\n              styles['Header__subtitle'],\n              multiline && styles['Header__content--multiline'],\n            )}\n            Component={subtitleComponent}\n          >\n            {subtitle}\n          </Subhead>\n        )}\n      </div>\n\n      {hasReactNode(aside) && (\n        <Paragraph className={styles['Header__aside']} Component=\"span\">\n          {aside}\n        </Paragraph>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","usePlatform","RootComponent","Footnote","Headline","Paragraph","Subhead","Title","styles","HeaderContent","mode","size","restProps","isLarge","platform","level","weight","caps","stylesMode","primary","secondary","tertiary","Header","Component","children","subtitle","subtitleComponent","indicator","aside","multiline","baseClassName","div","className","span"],"mappings":"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"}

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

@@ -3,10 +3,6 @@
   align-items: flex-start;
   padding: 0;
   padding-inline: var(--vkui--size_base_padding_horizontal--regular);
-  -webkit-user-select: text;
-     -moz-user-select: text;
-      -ms-user-select: text;
-          user-select: text;
   font-family: var(--vkui--font_family_base);
 }
 

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 { HasRef, HasRootRef, HTMLAttributesWithRootRef } 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\nconst stylesSize = {\n  s: styles['HorizontalCell--size-s'],\n  m: styles['HorizontalCell--size-m'],\n  l: styles['HorizontalCell--size-l'],\n};\n\ninterface CellTypographyProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  size: HorizontalCellProps['size'];\n}\n\nconst CellTypography = ({ size, children, ...restProps }: CellTypographyProps) => {\n  return size === 's' ? (\n    <Caption {...restProps}>{children}</Caption>\n  ) : (\n    <Subhead {...restProps}>{children}</Subhead>\n  );\n};\n\nexport interface HorizontalCellProps\n  extends Omit<TappableProps, 'size' | 'getRootRef'>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  size?: 's' | 'm' | 'l';\n  /**\n   * Заголовок\n   */\n  header?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n  className,\n  header,\n  style,\n  subtitle,\n  size = 's',\n  children = <Avatar size={56} />,\n  getRootRef,\n  getRef,\n  extraSubtitle,\n  ...restProps\n}: HorizontalCellProps) => {\n  return (\n    <div\n      ref={getRootRef}\n      style={style}\n      className={classNames(styles['HorizontalCell'], stylesSize[size], className)}\n    >\n      <Tappable className={styles['HorizontalCell__body']} getRootRef={getRef} {...restProps}>\n        {hasReactNode(children) && (\n          <div className={styles['HorizontalCell__image']}>{children}</div>\n        )}\n        {(header || subtitle || extraSubtitle) && (\n          <div className={styles['HorizontalCell__content']}>\n            {hasReactNode(header) && <CellTypography size={size}>{header}</CellTypography>}\n            {hasReactNode(subtitle) && (\n              <Footnote className={styles['HorizontalCell__subtitle']}>{subtitle}</Footnote>\n            )}\n            {hasReactNode(extraSubtitle) && (\n              <Footnote className={styles['HorizontalCell__subtitle']}>{extraSubtitle}</Footnote>\n            )}\n          </div>\n        )}\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["React","classNames","hasReactNode","Avatar","Tappable","Caption","Footnote","Subhead","styles","stylesSize","s","m","l","CellTypography","size","children","restProps","HorizontalCell","className","header","style","subtitle","getRootRef","getRef","extraSubtitle","div","ref"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,QAAQ,QAA4B,uBAAuB;AACpE,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,8BAA8B;AAEjD,MAAMC,aAAa;IACjBC,GAAGF,MAAM,CAAC,yBAAyB;IACnCG,GAAGH,MAAM,CAAC,yBAAyB;IACnCI,GAAGJ,MAAM,CAAC,yBAAyB;AACrC;AAMA,MAAMK,iBAAiB,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,WAAgC;IAC3E,OAAOF,SAAS,oBACd,KAACT;QAAS,GAAGW,SAAS;kBAAGD;uBAEzB,KAACR;QAAS,GAAGS,SAAS;kBAAGD;;AAE7B;AAqBA;;CAEC,GACD,OAAO,MAAME,iBAAiB,CAAC,EAC7BC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRP,OAAO,GAAG,EACVC,yBAAW,KAACZ;IAAOW,MAAM;EAAM,EAC/BQ,UAAU,EACVC,MAAM,EACNC,aAAa,EACb,GAAGR,WACiB;IACpB,qBACE,KAACS;QACCC,KAAKJ;QACLF,OAAOA;QACPF,WAAWjB,WAAWO,MAAM,CAAC,iBAAiB,EAAEC,UAAU,CAACK,KAAK,EAAEI;kBAElE,cAAA,MAACd;YAASc,WAAWV,MAAM,CAAC,uBAAuB;YAAEc,YAAYC;YAAS,GAAGP,SAAS;;gBACnFd,aAAaa,2BACZ,KAACU;oBAAIP,WAAWV,MAAM,CAAC,wBAAwB;8BAAGO;;gBAElDI,CAAAA,UAAUE,YAAYG,aAAY,mBAClC,MAACC;oBAAIP,WAAWV,MAAM,CAAC,0BAA0B;;wBAC9CN,aAAaiB,yBAAW,KAACN;4BAAeC,MAAMA;sCAAOK;;wBACrDjB,aAAamB,2BACZ,KAACf;4BAASY,WAAWV,MAAM,CAAC,2BAA2B;sCAAGa;;wBAE3DnB,aAAasB,gCACZ,KAAClB;4BAASY,WAAWV,MAAM,CAAC,2BAA2B;sCAAGgB;;;;;;;AAOxE,EAAE"}
+{"version":3,"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasRef, HasRootRef, HTMLAttributesWithRootRef } 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\nconst stylesSize = {\n  s: styles['HorizontalCell--size-s'],\n  m: styles['HorizontalCell--size-m'],\n  l: styles['HorizontalCell--size-l'],\n};\n\ninterface CellTypographyProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  size: HorizontalCellProps['size'];\n}\n\nconst CellTypography = ({ size, children, ...restProps }: CellTypographyProps) => {\n  return size === 's' ? (\n    <Caption {...restProps}>{children}</Caption>\n  ) : (\n    <Subhead {...restProps}>{children}</Subhead>\n  );\n};\n\nexport interface HorizontalCellProps\n  extends Omit<TappableProps, 'size' | 'getRootRef'>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  size?: 's' | 'm' | 'l';\n  /**\n   * Заголовок\n   */\n  header?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n  className,\n  header,\n  style,\n  subtitle,\n  size = 's',\n  children = <Avatar size={56} />,\n  getRootRef,\n  getRef,\n  extraSubtitle,\n  ...restProps\n}: HorizontalCellProps) => {\n  return (\n    <div\n      ref={getRootRef}\n      style={style}\n      className={classNames(styles['HorizontalCell'], stylesSize[size], className)}\n    >\n      <Tappable className={styles['HorizontalCell__body']} getRootRef={getRef} {...restProps}>\n        {hasReactNode(children) && (\n          <div className={styles['HorizontalCell__image']}>{children}</div>\n        )}\n        {(header || subtitle || extraSubtitle) && (\n          <div className={styles['HorizontalCell__content']}>\n            {hasReactNode(header) && <CellTypography size={size}>{header}</CellTypography>}\n            {hasReactNode(subtitle) && (\n              <Footnote className={styles['HorizontalCell__subtitle']}>{subtitle}</Footnote>\n            )}\n            {hasReactNode(extraSubtitle) && (\n              <Footnote className={styles['HorizontalCell__subtitle']}>{extraSubtitle}</Footnote>\n            )}\n          </div>\n        )}\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["React","classNames","hasReactNode","Avatar","Tappable","Caption","Footnote","Subhead","styles","stylesSize","s","m","l","CellTypography","size","children","restProps","HorizontalCell","className","header","style","subtitle","getRootRef","getRef","extraSubtitle","div","ref"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,QAAQ,QAA4B,uBAAuB;AACpE,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,8BAA8B;AAEjD,MAAMC,aAAa;IACjBC,GAAGF,MAAM,CAAC,yBAAyB;IACnCG,GAAGH,MAAM,CAAC,yBAAyB;IACnCI,GAAGJ,MAAM,CAAC,yBAAyB;AACrC;AAMA,MAAMK,iBAAiB,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,WAAgC;IAC3E,OAAOF,SAAS,oBACd,KAACT;QAAS,GAAGW,SAAS;kBAAGD;uBAEzB,KAACR;QAAS,GAAGS,SAAS;kBAAGD;;AAE7B;AAqBA;;CAEC,GACD,OAAO,MAAME,iBAAiB,CAAC,EAC7BC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRP,OAAO,GAAG,EACVC,yBAAW,KAACZ;IAAOW,MAAM;EAAM,EAC/BQ,UAAU,EACVC,MAAM,EACNC,aAAa,EACb,GAAGR,WACiB;IACpB,qBACE,KAACS;QACCC,KAAKJ;QACLF,OAAOA;QACPF,WAAWjB,WAAWO,MAAM,CAAC,iBAAiB,EAAEC,UAAU,CAACK,KAAK,EAAEI;kBAElE,cAAA,MAACd;YAASc,WAAWV,MAAM,CAAC,uBAAuB;YAAEc,YAAYC;YAAS,GAAGP,SAAS;;gBACnFd,aAAaa,2BACZ,KAACU;oBAAIP,WAAWV,MAAM,CAAC,wBAAwB;8BAAGO;;gBAElDI,CAAAA,UAAUE,YAAYG,aAAY,mBAClC,MAACC;oBAAIP,WAAWV,MAAM,CAAC,0BAA0B;;wBAC9CN,aAAaiB,yBAAW,KAACN;4BAAeC,MAAMA;sCAAOK;;wBACrDjB,aAAamB,2BACZ,KAACf;4BAASY,WAAWV,MAAM,CAAC,2BAA2B;sCAAGa;;wBAE3DnB,aAAasB,gCACZ,KAAClB;4BAASY,WAAWV,MAAM,CAAC,2BAA2B;sCAAGgB;;;;;;;AAOxE,EAAE"}

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 { HasRef, HasRootRef, LiteralUnion } from '../../../types';\nimport type { ImageBaseSize } from '../../ImageBase/ImageBase';\nimport { Tappable, TappableProps } from '../../Tappable/Tappable';\nimport { Subhead, SubheadProps } from '../../Typography/Subhead/Subhead';\nimport styles from './HorizontalCellShowMore.module.css';\n\nconst sizeClassNames = {\n  s: styles['HorizontalCellShowMore--size-s'],\n  m: styles['HorizontalCellShowMore--size-m'],\n  l: styles['HorizontalCellShowMore--size-l'],\n};\n\nexport interface HorizontalCellShowMoreProps\n  extends Omit<TappableProps, 'getRootRef' | 'size'>,\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   * Задаёт размер компонента. Аналогичен такому же пропу у [HorizontalCell](https://vkcom.github.io/VKUI/#/HorizontalCellShowMore?id=props).\n   * Должен соответствовать значению пропа `size` соседних `HorizontalCell`.\n   */\n  size?: 's' | 'm' | 'l';\n  /**\n   * Предназначен для отрисовки текста.\n   * По умолчанию для `size='s'` содержит текст `Все` для других размеров `Показать все`.\n   * */\n  children?: SubheadProps['children'];\n  /**\n   * Позволяет компенсировать особый правый отступ у предшевствующего элементa `HorizontalCell`,\n   * в том случае, если тот элемент последний в родителе.\n   * Если `HorizontalCellShowMore` находится на одном уровне с остальными `HorizontalCell`, то этот проп использовать не нужно.\n   */\n  compensateLastCellIndent?: boolean;\n}\n\nexport const HorizontalCellShowMore = ({\n  className,\n  style,\n  getRef,\n  getRootRef,\n  compensateLastCellIndent,\n  height,\n  size = 's',\n  children = size === 's' ? 'Все' : 'Показать все',\n  ...restProps\n}: HorizontalCellShowMoreProps) => {\n  return (\n    <div\n      style={style}\n      className={classNames(\n        styles['HorizontalCellShowMore'],\n        compensateLastCellIndent && styles['HorizontalCellShowMore--compensate-last-cell-indent'],\n        sizeClassNames[size],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      <Tappable\n        style={size === 's' ? undefined : { height }}\n        className={styles['HorizontalCellShowMore__body']}\n        getRootRef={getRef}\n        activeMode=\"opacity\"\n        hoverMode=\"opacity\"\n        {...restProps}\n      >\n        <Icon28ChevronRightCircle\n          className={styles['HorizontalCellShowMore__icon']}\n          fill=\"currentColor\"\n        />\n\n        <Subhead className={styles['HorizontalCellShowMore__text']} weight=\"2\">\n          {children}\n        </Subhead>\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["Icon28ChevronRightCircle","classNames","Tappable","Subhead","styles","sizeClassNames","s","m","l","HorizontalCellShowMore","className","style","getRef","getRootRef","compensateLastCellIndent","height","size","children","restProps","div","ref","undefined","activeMode","hoverMode","fill","weight"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,wBAAwB,QAAQ,mBAAmB;AAC5D,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,QAAQ,QAAuB,0BAA0B;AAClE,SAASC,OAAO,QAAsB,mCAAmC;AACzE,OAAOC,YAAY,sCAAsC;AAEzD,MAAMC,iBAAiB;IACrBC,GAAGF,MAAM,CAAC,iCAAiC;IAC3CG,GAAGH,MAAM,CAAC,iCAAiC;IAC3CI,GAAGJ,MAAM,CAAC,iCAAiC;AAC7C;AAmCA,OAAO,MAAMK,yBAAyB,CAAC,EACrCC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,wBAAwB,EACxBC,MAAM,EACNC,OAAO,GAAG,EACVC,WAAWD,SAAS,MAAM,QAAQ,cAAc,EAChD,GAAGE,WACyB;IAC5B,qBACE,KAACC;QACCR,OAAOA;QACPD,WAAWT,WACTG,MAAM,CAAC,yBAAyB,EAChCU,4BAA4BV,MAAM,CAAC,sDAAsD,EACzFC,cAAc,CAACW,KAAK,EACpBN;QAEFU,KAAKP;kBAEL,cAAA,MAACX;YACCS,OAAOK,SAAS,MAAMK,YAAY;gBAAEN;YAAO;YAC3CL,WAAWN,MAAM,CAAC,+BAA+B;YACjDS,YAAYD;YACZU,YAAW;YACXC,WAAU;YACT,GAAGL,SAAS;;8BAEb,KAAClB;oBACCU,WAAWN,MAAM,CAAC,+BAA+B;oBACjDoB,MAAK;;8BAGP,KAACrB;oBAAQO,WAAWN,MAAM,CAAC,+BAA+B;oBAAEqB,QAAO;8BAChER;;;;;AAKX,EAAE"}
+{"version":3,"sources":["../../../../../src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.tsx"],"sourcesContent":["import { Icon28ChevronRightCircle } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRef, HasRootRef, LiteralUnion } from '../../../types';\nimport type { ImageBaseSize } from '../../ImageBase/ImageBase';\nimport { Tappable, TappableProps } from '../../Tappable/Tappable';\nimport { Subhead, SubheadProps } from '../../Typography/Subhead/Subhead';\nimport styles from './HorizontalCellShowMore.module.css';\n\nconst sizeClassNames = {\n  s: styles['HorizontalCellShowMore--size-s'],\n  m: styles['HorizontalCellShowMore--size-m'],\n  l: styles['HorizontalCellShowMore--size-l'],\n};\n\nexport interface HorizontalCellShowMoreProps\n  extends Omit<TappableProps, 'getRootRef' | 'size'>,\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   * Задаёт размер компонента. Аналогичен такому же пропу у [HorizontalCell](https://vkcom.github.io/VKUI/#/HorizontalCellShowMore?id=props).\n   * Должен соответствовать значению пропа `size` соседних `HorizontalCell`.\n   */\n  size?: 's' | 'm' | 'l';\n  /**\n   * Предназначен для отрисовки текста.\n   * По умолчанию для `size='s'` содержит текст `Все` для других размеров `Показать все`.\n   * */\n  children?: SubheadProps['children'];\n  /**\n   * Позволяет компенсировать особый правый отступ у предшевствующего элементa `HorizontalCell`,\n   * в том случае, если тот элемент последний в родителе.\n   * Если `HorizontalCellShowMore` находится на одном уровне с остальными `HorizontalCell`, то этот проп использовать не нужно.\n   */\n  compensateLastCellIndent?: boolean;\n}\n\nexport const HorizontalCellShowMore = ({\n  className,\n  style,\n  getRef,\n  getRootRef,\n  compensateLastCellIndent,\n  height,\n  size = 's',\n  children = size === 's' ? 'Все' : 'Показать все',\n  ...restProps\n}: HorizontalCellShowMoreProps) => {\n  return (\n    <div\n      style={style}\n      className={classNames(\n        styles['HorizontalCellShowMore'],\n        compensateLastCellIndent && styles['HorizontalCellShowMore--compensate-last-cell-indent'],\n        sizeClassNames[size],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      <Tappable\n        style={size === 's' ? undefined : { height }}\n        className={styles['HorizontalCellShowMore__body']}\n        getRootRef={getRef}\n        activeMode=\"opacity\"\n        hoverMode=\"opacity\"\n        {...restProps}\n      >\n        <Icon28ChevronRightCircle\n          className={styles['HorizontalCellShowMore__icon']}\n          fill=\"currentColor\"\n        />\n\n        <Subhead className={styles['HorizontalCellShowMore__text']} weight=\"2\">\n          {children}\n        </Subhead>\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["Icon28ChevronRightCircle","classNames","Tappable","Subhead","styles","sizeClassNames","s","m","l","HorizontalCellShowMore","className","style","getRef","getRootRef","compensateLastCellIndent","height","size","children","restProps","div","ref","undefined","activeMode","hoverMode","fill","weight"],"mappings":";AAAA,SAASA,wBAAwB,QAAQ,mBAAmB;AAC5D,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,QAAQ,QAAuB,0BAA0B;AAClE,SAASC,OAAO,QAAsB,mCAAmC;AACzE,OAAOC,YAAY,sCAAsC;AAEzD,MAAMC,iBAAiB;IACrBC,GAAGF,MAAM,CAAC,iCAAiC;IAC3CG,GAAGH,MAAM,CAAC,iCAAiC;IAC3CI,GAAGJ,MAAM,CAAC,iCAAiC;AAC7C;AAmCA,OAAO,MAAMK,yBAAyB,CAAC,EACrCC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,wBAAwB,EACxBC,MAAM,EACNC,OAAO,GAAG,EACVC,WAAWD,SAAS,MAAM,QAAQ,cAAc,EAChD,GAAGE,WACyB;IAC5B,qBACE,KAACC;QACCR,OAAOA;QACPD,WAAWT,WACTG,MAAM,CAAC,yBAAyB,EAChCU,4BAA4BV,MAAM,CAAC,sDAAsD,EACzFC,cAAc,CAACW,KAAK,EACpBN;QAEFU,KAAKP;kBAEL,cAAA,MAACX;YACCS,OAAOK,SAAS,MAAMK,YAAY;gBAAEN;YAAO;YAC3CL,WAAWN,MAAM,CAAC,+BAA+B;YACjDS,YAAYD;YACZU,YAAW;YACXC,WAAU;YACT,GAAGL,SAAS;;8BAEb,KAAClB;oBACCU,WAAWN,MAAM,CAAC,+BAA+B;oBACjDoB,MAAK;;8BAGP,KAACrB;oBAAQO,WAAWN,MAAM,CAAC,+BAA+B;oBAAEqB,QAAO;8BAChER;;;;;AAKX,EAAE"}

package/dist/cssm/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.module.css

@@ -41,11 +41,11 @@
 }
 
 .HorizontalCellShowMore__icon {
-  color: var(--vkui--color_icon_accent);
+  color: var(--vkui--color_icon_secondary);
 }
 
 .HorizontalCellShowMore__text {
   -webkit-padding-before: 8px;
           padding-block-start: 8px;
-  color: var(--vkui--color_text_accent);
+  color: var(--vkui--color_text_secondary);
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useDirection } from '../../hooks/useDirection';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow } 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?: 'm' | 'l';\n  /**\n   * Смещает иконки кнопок навигации по вертикали.\n   */\n  arrowOffsetY?: number | string;\n  showArrows?: boolean | 'always';\n  scrollAnimationDuration?: number;\n  /**\n   * Добавляет возможность прокручивать контент на любое колесо мыши.\n   * По умолчанию прокручивается как любой горизонтальный контент через shift.\n   */\n  scrollOnAnyWheel?: boolean;\n  /**\n   * Задает потомкам инлайновое положение (горизонально)\n   *\n   * TODO [>=7]: Сделать по умолчанию `true` (или удалить, применяя стили всегда)\n   */\n  inline?: boolean;\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 = SCROLL_ONE_FRAME_TIME,\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  let startScrollLeft = roundUpElementScrollLeft(scrollElement);\n  let endScrollLeft = getScrollPosition(startScrollLeft);\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    if (!scrollElement) {\n      onScrollEnd();\n      return;\n    }\n\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 = 'l',\n  arrowOffsetY,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  scrollOnAnyWheel = false,\n  inline = false,\n  ...restProps\n}: HorizontalScrollProps) => {\n  const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n  const [canScrollRight, setCanScrollRight] = React.useState(false);\n  const [directionRef, textDirection = 'ltr'] = useDirection<HTMLDivElement>();\n\n  const setCanScrollStart = textDirection === 'ltr' ? setCanScrollLeft : setCanScrollRight;\n  const setCanScrollEnd = textDirection === 'ltr' ? setCanScrollRight : setCanScrollLeft;\n\n  const isCustomScrollingRef = React.useRef(false);\n\n  const scrollerRef = useExternRef(getRef, directionRef);\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,\n        }),\n      );\n      if (animationQueue.current.length === 1) {\n        animationQueue.current[0]();\n      }\n    },\n    [scrollerRef, scrollAnimationDuration, textDirection, setCanScrollEnd],\n  );\n\n  const scrollToLeft = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n  const scrollToRight = 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\n      setCanScrollStart(scrollElement.scrollLeft !== 0);\n      setCanScrollEnd(\n        Math.abs(roundUpElementScrollLeft(scrollElement)) + scrollElement.offsetWidth <\n          scrollElement.scrollWidth,\n      );\n    }\n  }, [showArrows, hasPointer, scrollerRef, setCanScrollStart, setCanScrollEnd]);\n\n  const scrollEvent = useEventListener('scroll', calculateArrowsVisibility);\n  React.useEffect(\n    function addScrollerRefToScrollEvent() {\n      if (!scrollerRef.current) {\n        return noop;\n      }\n\n      scrollEvent.add(scrollerRef.current);\n      return scrollEvent.remove;\n    },\n    [scrollEvent, scrollerRef],\n  );\n\n  React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);\n\n  /**\n   * Прокрутка с помощью любого колеса мыши\n   */\n  const onwheel = React.useCallback(\n    (e: WheelEvent) => {\n      scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n      e.preventDefault();\n    },\n    [scrollerRef],\n  );\n\n  const wheelEvent = useEventListener('wheel', onwheel);\n  React.useEffect(\n    function addScrollerRefToWheelEvent() {\n      if (!scrollerRef.current || !scrollOnAnyWheel) {\n        return noop;\n      }\n\n      wheelEvent.add(scrollerRef.current);\n\n      return wheelEvent.remove;\n    },\n    [wheelEvent, scrollerRef, scrollOnAnyWheel],\n  );\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['HorizontalScroll'],\n        'vkuiInternalHorizontalScroll',\n        showArrows === 'always' && styles['HorizontalScroll--withConstArrows'],\n        inline && styles['HorizontalScroll--inline'],\n      )}\n      onMouseEnter={calculateArrowsVisibility}\n    >\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (\n        <ScrollArrow\n          data-testid={process.env.NODE_ENV === 'test' ? 'ScrollArrow' : undefined}\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"left\"\n          aria-hidden\n          tabIndex={-1}\n          className={classNames(\n            styles['HorizontalScroll__arrow'],\n            styles['HorizontalScroll__arrowLeft'],\n          )}\n          onClick={scrollToLeft}\n        />\n      )}\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (\n        <ScrollArrow\n          data-testid={process.env.NODE_ENV === 'test' ? 'ScrollArrow' : undefined}\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"right\"\n          aria-hidden\n          tabIndex={-1}\n          className={classNames(\n            styles['HorizontalScroll__arrow'],\n            styles['HorizontalScroll__arrowRight'],\n          )}\n          onClick={scrollToRight}\n        />\n      )}\n      <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>\n        <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useDirection","useEventListener","useExternRef","easeInOutSine","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","endScrollLeft","abs","startTime","scroll","time","elapsed","min","currentScrollLeft","scrollEnd","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","scrollOnAnyWheel","inline","restProps","canScrollLeft","setCanScrollLeft","useState","canScrollRight","setCanScrollRight","directionRef","setCanScrollStart","setCanScrollEnd","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","calculateArrowsVisibility","scrollEvent","useEffect","addScrollerRefToScrollEvent","add","remove","onwheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","wheelEvent","addScrollerRefToWheelEvent","baseClassName","onMouseEnter","undefined","data-testid","process","env","NODE_ENV","size","offsetY","direction","aria-hidden","tabIndex","className","onClick","div","ref"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useDirection } from '../../hooks/useDirection';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow } 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?: 'm' | 'l';\n  /**\n   * Смещает иконки кнопок навигации по вертикали.\n   */\n  arrowOffsetY?: number | string;\n  showArrows?: boolean | 'always';\n  scrollAnimationDuration?: number;\n  /**\n   * Добавляет возможность прокручивать контент на любое колесо мыши.\n   * По умолчанию прокручивается как любой горизонтальный контент через shift.\n   */\n  scrollOnAnyWheel?: boolean;\n  /**\n   * Задает потомкам инлайновое положение (горизонально)\n   *\n   * TODO [>=7]: Сделать по умолчанию `true` (или удалить, применяя стили всегда)\n   */\n  inline?: boolean;\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 = SCROLL_ONE_FRAME_TIME,\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  let startScrollLeft = roundUpElementScrollLeft(scrollElement);\n  let endScrollLeft = getScrollPosition(startScrollLeft);\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    if (!scrollElement) {\n      onScrollEnd();\n      return;\n    }\n\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 = 'l',\n  arrowOffsetY,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  scrollOnAnyWheel = false,\n  inline = false,\n  ...restProps\n}: HorizontalScrollProps) => {\n  const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n  const [canScrollRight, setCanScrollRight] = React.useState(false);\n  const [directionRef, textDirection = 'ltr'] = useDirection<HTMLDivElement>();\n\n  const setCanScrollStart = textDirection === 'ltr' ? setCanScrollLeft : setCanScrollRight;\n  const setCanScrollEnd = textDirection === 'ltr' ? setCanScrollRight : setCanScrollLeft;\n\n  const isCustomScrollingRef = React.useRef(false);\n\n  const scrollerRef = useExternRef(getRef, directionRef);\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,\n        }),\n      );\n      if (animationQueue.current.length === 1) {\n        animationQueue.current[0]();\n      }\n    },\n    [scrollerRef, scrollAnimationDuration, textDirection, setCanScrollEnd],\n  );\n\n  const scrollToLeft = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n  const scrollToRight = 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\n      setCanScrollStart(scrollElement.scrollLeft !== 0);\n      setCanScrollEnd(\n        Math.abs(roundUpElementScrollLeft(scrollElement)) + scrollElement.offsetWidth <\n          scrollElement.scrollWidth,\n      );\n    }\n  }, [showArrows, hasPointer, scrollerRef, setCanScrollStart, setCanScrollEnd]);\n\n  const scrollEvent = useEventListener('scroll', calculateArrowsVisibility);\n  React.useEffect(\n    function addScrollerRefToScrollEvent() {\n      if (!scrollerRef.current) {\n        return noop;\n      }\n\n      scrollEvent.add(scrollerRef.current);\n      return scrollEvent.remove;\n    },\n    [scrollEvent, scrollerRef],\n  );\n\n  React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);\n\n  /**\n   * Прокрутка с помощью любого колеса мыши\n   */\n  const onwheel = React.useCallback(\n    (e: WheelEvent) => {\n      scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n      e.preventDefault();\n    },\n    [scrollerRef],\n  );\n\n  const wheelEvent = useEventListener('wheel', onwheel);\n  React.useEffect(\n    function addScrollerRefToWheelEvent() {\n      if (!scrollerRef.current || !scrollOnAnyWheel) {\n        return noop;\n      }\n\n      wheelEvent.add(scrollerRef.current);\n\n      return wheelEvent.remove;\n    },\n    [wheelEvent, scrollerRef, scrollOnAnyWheel],\n  );\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['HorizontalScroll'],\n        'vkuiInternalHorizontalScroll',\n        showArrows === 'always' && styles['HorizontalScroll--withConstArrows'],\n        inline && styles['HorizontalScroll--inline'],\n      )}\n      onMouseEnter={calculateArrowsVisibility}\n    >\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (\n        <ScrollArrow\n          data-testid={process.env.NODE_ENV === 'test' ? 'ScrollArrow' : undefined}\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"left\"\n          aria-hidden\n          tabIndex={-1}\n          className={classNames(\n            styles['HorizontalScroll__arrow'],\n            styles['HorizontalScroll__arrowLeft'],\n          )}\n          onClick={scrollToLeft}\n        />\n      )}\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (\n        <ScrollArrow\n          data-testid={process.env.NODE_ENV === 'test' ? 'ScrollArrow' : undefined}\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"right\"\n          aria-hidden\n          tabIndex={-1}\n          className={classNames(\n            styles['HorizontalScroll__arrow'],\n            styles['HorizontalScroll__arrowRight'],\n          )}\n          onClick={scrollToRight}\n        />\n      )}\n      <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>\n        <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useDirection","useEventListener","useExternRef","easeInOutSine","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","endScrollLeft","abs","startTime","scroll","time","elapsed","min","currentScrollLeft","scrollEnd","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","scrollOnAnyWheel","inline","restProps","canScrollLeft","setCanScrollLeft","useState","canScrollRight","setCanScrollRight","directionRef","setCanScrollStart","setCanScrollEnd","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","calculateArrowsVisibility","scrollEvent","useEffect","addScrollerRefToScrollEvent","add","remove","onwheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","wheelEvent","addScrollerRefToWheelEvent","baseClassName","onMouseEnter","undefined","data-testid","process","env","NODE_ENV","size","offsetY","direction","aria-hidden","tabIndex","className","onClick","div","ref"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { 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, TappableProps } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './IconButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles['IconButton--sizeY-none'],\n  compact: styles['IconButton--sizeY-compact'],\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, className, ...restProps }: IconButtonProps) => {\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      className={classNames(\n        styles['IconButton'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        platform === 'ios' && styles['IconButton--ios'],\n        className,\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","compact","warn","IconButton","label","children","className","restProps","platform","sizeY","process","env","NODE_ENV","isAccessible","a11y","href","activeEffectDelay","activeMode","Component"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,qBAAqB;AAC/D,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,yBAAyB;IACtCG,SAASH,MAAM,CAAC,4BAA4B;AAC9C;AASA,MAAMI,OAAOP,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMQ,aAAa,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAA4B;IACtF,MAAMC,WAAWhB;IACjB,MAAM,EAAEiB,QAAQ,MAAM,EAAE,GAAGlB;IAE3B,IAAImB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAepB,kBAAkB;YACrCY,UAAU;gBAACA;gBAAUD;aAAM;YAC3B,GAAGG,SAAS;QACd;QAEA,IAAI,CAACM,cAAc;YACjBX,KAAKR,gBAAgBoB,IAAI,CAACP,UAAUQ,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IAEA,qBACE,MAACnB;QACCoB,mBAAmB;QACnBC,YAAW;QACXC,WAAWX,UAAUQ,IAAI,GAAG,MAAM;QACjC,GAAGR,SAAS;QACbD,WAAWhB,WACTQ,MAAM,CAAC,aAAa,EACpBW,UAAU,aAAaV,eAAe,CAACU,MAAM,EAC7CD,aAAa,SAASV,MAAM,CAAC,kBAAkB,EAC/CQ;;YAGDF,uBAAS,KAACP;0BAAgBO;;YAC1BC;;;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { 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, TappableProps } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './IconButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles['IconButton--sizeY-none'],\n  compact: styles['IconButton--sizeY-compact'],\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, className, ...restProps }: IconButtonProps) => {\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      className={classNames(\n        styles['IconButton'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        platform === 'ios' && styles['IconButton--ios'],\n        className,\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","compact","warn","IconButton","label","children","className","restProps","platform","sizeY","process","env","NODE_ENV","isAccessible","a11y","href","activeEffectDelay","activeMode","Component"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,qBAAqB;AAC/D,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,yBAAyB;IACtCG,SAASH,MAAM,CAAC,4BAA4B;AAC9C;AASA,MAAMI,OAAOP,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMQ,aAAa,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAA4B;IACtF,MAAMC,WAAWhB;IACjB,MAAM,EAAEiB,QAAQ,MAAM,EAAE,GAAGlB;IAE3B,IAAImB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAepB,kBAAkB;YACrCY,UAAU;gBAACA;gBAAUD;aAAM;YAC3B,GAAGG,SAAS;QACd;QAEA,IAAI,CAACM,cAAc;YACjBX,KAAKR,gBAAgBoB,IAAI,CAACP,UAAUQ,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IAEA,qBACE,MAACnB;QACCoB,mBAAmB;QACnBC,YAAW;QACXC,WAAWX,UAAUQ,IAAI,GAAG,MAAM;QACjC,GAAGR,SAAS;QACbD,WAAWhB,WACTQ,MAAM,CAAC,aAAa,EACpBW,UAAU,aAAaV,eAAe,CAACU,MAAM,EAC7CD,aAAa,SAASV,MAAM,CAAC,kBAAkB,EAC/CQ;;YAGDF,uBAAS,KAACP;0BAAgBO;;YAC1BC;;;AAGP,EAAE"}

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

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';
 import { type ImageBadgeProps } from './ImageBadge/ImageBadge';
 export type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };
@@ -15,12 +16,9 @@ export declare const Image: {
     ({ size, borderRadius: borderRadiusProp, style, className, ...restProps }: ImageProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
     Badge: {
-        ({ className, ...restProps }: import("../ImageBase/ImageBase").ImageBaseBadgeProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Overlay: {
-        ({ className, theme: themeProp, visibility: visibilityProp, children, onClick: onClickProp, ...restProps }: ImageBaseOverlayProps): import("react/jsx-runtime").JSX.Element;
+        ({ className, ...restProps }: ImageBadgeProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
+    Overlay: React.FC<ImageBaseOverlayProps>;
 };
 //# sourceMappingURL=Image.d.ts.map

package/dist/cssm/components/Image/Image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,KAAK,qBAAqB,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACpG,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE3E,YAAY,EAAE,eAAe,EAAE,qBAAqB,IAAI,iBAAiB,EAAE,CAAC;AAE5E,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IAC/D;;OAEG;IACH,YAAY,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CAChC;AA0DD;;GAEG;AACH,eAAO,MAAM,KAAK;+EAMf,UAAU;;;;;;;;;;CAcZ,CAAC"}
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAa,KAAK,qBAAqB,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACpG,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE3E,YAAY,EAAE,eAAe,EAAE,qBAAqB,IAAI,iBAAiB,EAAE,CAAC;AAE5E,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IAC/D;;OAEG;IACH,YAAY,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CAChC;AA0DD;;GAEG;AACH,eAAO,MAAM,KAAK;+EAMf,UAAU;;;;;;;CAcZ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { ImageBadge, type ImageBadgeProps } from './ImageBadge/ImageBadge';\n\nexport type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };\n\nexport const IMAGE_DEFAULT_SIZE = 48;\n\nexport interface ImageProps extends Omit<ImageBaseProps, 'badge'> {\n  /**\n   * Размер закругления.\n   */\n  borderRadius?: 's' | 'l' | 'm';\n}\n\nconst getBorderRadiusBySize = (\n  size: Exclude<ImageBaseProps['size'], undefined>,\n  borderRadius: Exclude<ImageProps['borderRadius'], undefined>,\n) => {\n  switch (borderRadius) {\n    case 's': {\n      if (size <= 32) {\n        return 2;\n      }\n      if (size <= 56) {\n        return 3;\n      }\n      return 4;\n    }\n    case 'm': {\n      if (size <= 32) {\n        return 3;\n      }\n      if (size <= 48) {\n        return 4;\n      }\n      if (size <= 72) {\n        return 6;\n      }\n      if (size <= 80) {\n        return 8;\n      }\n      return 10;\n    }\n    case 'l': {\n      if (size <= 16) {\n        return 4;\n      }\n      if (size <= 20) {\n        return 5;\n      }\n      if (size <= 32) {\n        return 6;\n      }\n      if (size <= 40) {\n        return 8;\n      }\n      if (size <= 48) {\n        return 10;\n      }\n      if (size <= 56) {\n        return 12;\n      }\n      if (size <= 64) {\n        return 14;\n      }\n      return 16;\n    }\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Image\n */\nexport const Image = ({\n  size = IMAGE_DEFAULT_SIZE,\n  borderRadius: borderRadiusProp = 'm',\n  style,\n  className,\n  ...restProps\n}: ImageProps) => {\n  const borderRadius = React.useMemo(\n    () => getBorderRadiusBySize(size, borderRadiusProp),\n    [size, borderRadiusProp],\n  );\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      style={{ ...style, borderRadius }}\n      className={className}\n    />\n  );\n};\n\nImage.displayName = 'Image';\n\nImage.Badge = ImageBadge;\nImage.Badge.displayName = 'Image.Badge';\n\nImage.Overlay = ImageBase.Overlay;\nImage.Overlay.displayName = 'Image.Overlay';\n"],"names":["React","ImageBase","ImageBadge","IMAGE_DEFAULT_SIZE","getBorderRadiusBySize","size","borderRadius","Image","borderRadiusProp","style","className","restProps","useMemo","displayName","Badge","Overlay"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,SAAS,QAAyD,yBAAyB;AACpG,SAASC,UAAU,QAA8B,0BAA0B;AAI3E,OAAO,MAAMC,qBAAqB,GAAG;AASrC,MAAMC,wBAAwB,CAC5BC,MACAC;IAEA,OAAQA;QACN,KAAK;YAAK;gBACR,IAAID,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;QACA,KAAK;YAAK;gBACR,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;QACA,KAAK;YAAK;gBACR,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,QAAQ,CAAC,EACpBF,OAAOF,kBAAkB,EACzBG,cAAcE,mBAAmB,GAAG,EACpCC,KAAK,EACLC,SAAS,EACT,GAAGC,WACQ;IACX,MAAML,eAAeN,MAAMY,OAAO,CAChC,IAAMR,sBAAsBC,MAAMG,mBAClC;QAACH;QAAMG;KAAiB;IAG1B,qBACE,KAACP;QACE,GAAGU,SAAS;QACbN,MAAMA;QACNI,OAAO;YAAE,GAAGA,KAAK;YAAEH;QAAa;QAChCI,WAAWA;;AAGjB,EAAE;AAEFH,MAAMM,WAAW,GAAG;AAEpBN,MAAMO,KAAK,GAAGZ;AACdK,MAAMO,KAAK,CAACD,WAAW,GAAG;AAE1BN,MAAMQ,OAAO,GAAGd,UAAUc,OAAO;AACjCR,MAAMQ,OAAO,CAACF,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { ImageBadge, type ImageBadgeProps } from './ImageBadge/ImageBadge';\n\nexport type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };\n\nexport const IMAGE_DEFAULT_SIZE = 48;\n\nexport interface ImageProps extends Omit<ImageBaseProps, 'badge'> {\n  /**\n   * Размер закругления.\n   */\n  borderRadius?: 's' | 'l' | 'm';\n}\n\nconst getBorderRadiusBySize = (\n  size: Exclude<ImageBaseProps['size'], undefined>,\n  borderRadius: Exclude<ImageProps['borderRadius'], undefined>,\n) => {\n  switch (borderRadius) {\n    case 's': {\n      if (size <= 32) {\n        return 2;\n      }\n      if (size <= 56) {\n        return 3;\n      }\n      return 4;\n    }\n    case 'm': {\n      if (size <= 32) {\n        return 3;\n      }\n      if (size <= 48) {\n        return 4;\n      }\n      if (size <= 72) {\n        return 6;\n      }\n      if (size <= 80) {\n        return 8;\n      }\n      return 10;\n    }\n    case 'l': {\n      if (size <= 16) {\n        return 4;\n      }\n      if (size <= 20) {\n        return 5;\n      }\n      if (size <= 32) {\n        return 6;\n      }\n      if (size <= 40) {\n        return 8;\n      }\n      if (size <= 48) {\n        return 10;\n      }\n      if (size <= 56) {\n        return 12;\n      }\n      if (size <= 64) {\n        return 14;\n      }\n      return 16;\n    }\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Image\n */\nexport const Image = ({\n  size = IMAGE_DEFAULT_SIZE,\n  borderRadius: borderRadiusProp = 'm',\n  style,\n  className,\n  ...restProps\n}: ImageProps) => {\n  const borderRadius = React.useMemo(\n    () => getBorderRadiusBySize(size, borderRadiusProp),\n    [size, borderRadiusProp],\n  );\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      style={{ ...style, borderRadius }}\n      className={className}\n    />\n  );\n};\n\nImage.displayName = 'Image';\n\nImage.Badge = ImageBadge;\nImage.Badge.displayName = 'Image.Badge';\n\nImage.Overlay = ImageBase.Overlay;\nImage.Overlay.displayName = 'Image.Overlay';\n"],"names":["React","ImageBase","ImageBadge","IMAGE_DEFAULT_SIZE","getBorderRadiusBySize","size","borderRadius","Image","borderRadiusProp","style","className","restProps","useMemo","displayName","Badge","Overlay"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,SAAS,QAAyD,yBAAyB;AACpG,SAASC,UAAU,QAA8B,0BAA0B;AAI3E,OAAO,MAAMC,qBAAqB,GAAG;AASrC,MAAMC,wBAAwB,CAC5BC,MACAC;IAEA,OAAQA;QACN,KAAK;YAAK;gBACR,IAAID,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;QACA,KAAK;YAAK;gBACR,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;QACA,KAAK;YAAK;gBACR,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,QAAQ,CAAC,EACpBF,OAAOF,kBAAkB,EACzBG,cAAcE,mBAAmB,GAAG,EACpCC,KAAK,EACLC,SAAS,EACT,GAAGC,WACQ;IACX,MAAML,eAAeN,MAAMY,OAAO,CAChC,IAAMR,sBAAsBC,MAAMG,mBAClC;QAACH;QAAMG;KAAiB;IAG1B,qBACE,KAACP;QACE,GAAGU,SAAS;QACbN,MAAMA;QACNI,OAAO;YAAE,GAAGA,KAAK;YAAEH;QAAa;QAChCI,WAAWA;;AAGjB,EAAE;AAEFH,MAAMM,WAAW,GAAG;AAEpBN,MAAMO,KAAK,GAAGZ;AACdK,MAAMO,KAAK,CAACD,WAAW,GAAG;AAE1BN,MAAMQ,OAAO,GAAGd,UAAUc,OAAO;AACjCR,MAAMQ,OAAO,CAACF,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Image/ImageBadge/ImageBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseBadgeProps, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './ImageBadge.module.css';\n\nexport type ImageBadgeProps = ImageBaseBadgeProps;\n\nexport const ImageBadge = ({ className, ...restProps }: ImageBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(\n        styles['ImageBadge'],\n        size < 96 && styles['ImageBadge--shifted'],\n        className,\n      )}\n    />\n  );\n};\n\nImageBadge.displayName = 'ImageBadge';\n"],"names":["React","classNames","ImageBase","ImageBaseContext","styles","ImageBadge","className","restProps","size","useContext","Badge","displayName"],"rangeMappings":";;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAA4BC,gBAAgB,QAAQ,4BAA4B;AAClG,OAAOC,YAAY,0BAA0B;AAI7C,OAAO,MAAMC,aAAa,CAAC,EAAEC,SAAS,EAAE,GAAGC,WAA4B;IACrE,MAAM,EAAEC,IAAI,EAAE,GAAGR,MAAMS,UAAU,CAACN;IAClC,qBACE,KAACD,UAAUQ,KAAK;QACb,GAAGH,SAAS;QACbD,WAAWL,WACTG,MAAM,CAAC,aAAa,EACpBI,OAAO,MAAMJ,MAAM,CAAC,sBAAsB,EAC1CE;;AAIR,EAAE;AAEFD,WAAWM,WAAW,GAAG"}
+{"version":3,"sources":["../../../../../src/components/Image/ImageBadge/ImageBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseBadgeProps, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './ImageBadge.module.css';\n\nexport type ImageBadgeProps = ImageBaseBadgeProps;\n\nexport const ImageBadge = ({ className, ...restProps }: ImageBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(\n        styles['ImageBadge'],\n        size < 96 && styles['ImageBadge--shifted'],\n        className,\n      )}\n    />\n  );\n};\n\nImageBadge.displayName = 'ImageBadge';\n"],"names":["React","classNames","ImageBase","ImageBaseContext","styles","ImageBadge","className","restProps","size","useContext","Badge","displayName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAA4BC,gBAAgB,QAAQ,4BAA4B;AAClG,OAAOC,YAAY,0BAA0B;AAI7C,OAAO,MAAMC,aAAa,CAAC,EAAEC,SAAS,EAAE,GAAGC,WAA4B;IACrE,MAAM,EAAEC,IAAI,EAAE,GAAGR,MAAMS,UAAU,CAACN;IAClC,qBACE,KAACD,UAAUQ,KAAK;QACb,GAAGH,SAAS;QACbD,WAAWL,WACTG,MAAM,CAAC,aAAa,EACpBI,OAAO,MAAMJ,MAAM,CAAC,sBAAsB,EAC1CE;;AAIR,EAAE;AAEFD,WAAWM,WAAW,GAAG"}

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

@@ -58,9 +58,6 @@ export declare const ImageBase: {
         ({ background, ...restProps }: ImageBaseBadgeProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
-    Overlay: {
-        ({ className, theme: themeProp, visibility: visibilityProp, children, onClick: onClickProp, ...restProps }: ImageBaseOverlayProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
+    Overlay: React.FC<ImageBaseOverlayProps>;
 };
 //# sourceMappingURL=ImageBase.d.ts.map

package/dist/cssm/components/ImageBase/ImageBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageBase.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE9F,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAC3F,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACnG,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAE,qBAAqB,EAAE,0BAA0B,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIhG,YAAY,EACV,aAAa,EACb,0BAA0B,EAC1B,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,GACtB,CAAC;AAEF,OAAO,EACL,+BAA+B,EAC/B,kCAAkC,EAClC,iCAAiC,GAClC,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAO5B,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,wBAAwB,EACxB,UAAU,CAAC,cAAc,CAAC,EAC1B,MAAM,CAAC,gBAAgB,CAAC;IAC1B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC3C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;;;OAYG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;IAC9D;;;OAGG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAED;;GAEG;AACH,eAAO,MAAM,SAAS;iTAyBnB,cAAc;;;;;;;;;;CA2FhB,CAAC"}
+{"version":3,"file":"ImageBase.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE9F,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAC3F,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACnG,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAE,qBAAqB,EAAE,0BAA0B,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIhG,YAAY,EACV,aAAa,EACb,0BAA0B,EAC1B,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,GACtB,CAAC;AAEF,OAAO,EACL,+BAA+B,EAC/B,kCAAkC,EAClC,iCAAiC,GAClC,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAO5B,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,wBAAwB,EACxB,UAAU,CAAC,cAAc,CAAC,EAC1B,MAAM,CAAC,gBAAgB,CAAC;IAC1B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC3C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;;;OAYG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;IAC9D;;;OAGG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAED;;GAEG;AACH,eAAO,MAAM,SAAS;iTAyBnB,cAAc;;;;;;;CA2FhB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { minOr } from '../../lib/comparing';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type { AnchorHTMLAttributesOnly, HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { Clickable } from '../Clickable/Clickable';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n  ImageBaseSize,\n  ImageBaseExpectedIconProps,\n  ImageBaseBadgeProps,\n  ImageBaseOverlayProps,\n  ImageBaseContextProps,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\n/**\n * Размер по умолчанию.\n */\nconst defaultSize = 24;\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLImageElement> {\n  /**\n   * Задаёт размер картинки.\n   *\n   * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   */\n  size?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Ширина изображения\n   */\n  widthSize?: number;\n  /**\n   * Высота изображения\n   */\n  heightSize?: number;\n  /**\n   * Отключает обводку.\n   */\n  noBorder?: boolean;\n  /**\n   * Фолбек на случай, если картинка не прогрузилась.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   *\n   * > ⚠️ Может перекрывать `children`.\n   */\n  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n  /**\n   * Отключает фон, заданный по умолчанию. Полезен для отображения картинок с прозрачностью.\n   * @since 5.10.0\n   */\n  withTransparentBackground?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  fetchPriority,\n  getRef,\n  size: sizeProp,\n  width: widthImg,\n  height: heightImg,\n  widthSize,\n  heightSize,\n  style,\n  noBorder = false,\n  fallbackIcon: fallbackIconProp,\n  children,\n  onLoad,\n  onError,\n  withTransparentBackground,\n  ...restProps\n}: ImageBaseProps) => {\n  const size = sizeProp ?? minOr([widthSize, heightSize], defaultSize);\n\n  const width = widthSize ?? size;\n  const height = heightSize ?? size;\n\n  const [loaded, setLoaded] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n\n  const hasSrc = src || srcSet;\n  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (fallbackIcon) {\n      validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n    }\n  }\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    if (loaded) {\n      return;\n    }\n\n    setLoaded(true);\n    setFailed(false);\n    onLoad?.(event);\n  };\n\n  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(false);\n    setFailed(true);\n    onError?.(event);\n  };\n\n  const imgRef = useExternRef(getRef);\n  const isOnLoadStatusCheckedRef = React.useRef(false);\n  React.useEffect(\n    function dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater() {\n      if (isOnLoadStatusCheckedRef.current) {\n        return;\n      }\n      isOnLoadStatusCheckedRef.current = true;\n\n      if (imgRef.current && imgRef.current.complete && !loaded) {\n        const event = new Event('load');\n        imgRef.current.dispatchEvent(event);\n      }\n    },\n    [imgRef, loaded],\n  );\n\n  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <Clickable\n        style={{ width, height, ...style }}\n        baseClassName={classNames(\n          styles['ImageBase'],\n          loaded && styles['ImageBase--loaded'],\n          withTransparentBackground && styles['ImageBase--transparent-background'],\n        )}\n        {...restProps}\n      >\n        {hasSrc && (\n          <img\n            ref={imgRef}\n            alt={alt}\n            className={styles['ImageBase__img']}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={widthImg}\n            height={heightImg}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n            {...getFetchPriorityProp(fetchPriority)}\n          />\n        )}\n        {fallbackIcon && <div className={styles['ImageBase__fallback']}>{fallbackIcon}</div>}\n        {children}\n        {!noBorder && <div aria-hidden className={styles['ImageBase__border']} />}\n      </Clickable>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.displayName = 'ImageBase';\n\nImageBase.Badge = ImageBaseBadge;\nImageBase.Badge.displayName = 'ImageBase.Badge';\n\nImageBase.Overlay = ImageBaseOverlay;\nImageBase.Overlay.displayName = 'ImageBase.Overlay';\n"],"names":["React","classNames","useExternRef","minOr","getFetchPriorityProp","Clickable","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","styles","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","defaultSize","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","fetchPriority","getRef","size","sizeProp","width","widthImg","height","heightImg","widthSize","heightSize","style","noBorder","fallbackIcon","fallbackIconProp","children","onLoad","onError","withTransparentBackground","restProps","loaded","setLoaded","useState","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","process","env","NODE_ENV","name","value","handleImageLoad","event","handleImageError","imgRef","isOnLoadStatusCheckedRef","useRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","Provider","baseClassName","img","ref","className","div","aria-hidden","displayName","Badge","Overlay"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,KAAK,QAAQ,sBAAsB;AAC5C,SAASC,oBAAoB,QAAQ,kBAAkB;AAEvD,SAASC,SAAS,QAAQ,yBAAyB;AACnD,SAASC,cAAc,QAAkC,kCAAkC;AAC3F,SAASC,gBAAgB,QAAoC,sCAAsC;AACnG,SAASC,gBAAgB,QAAQ,YAAY;AAE7C,SAASC,oBAAoB,EAAEC,YAAY,QAAQ,eAAe;AAClE,OAAOC,YAAY,yBAAyB;AAU5C,SACEC,+BAA+B,EAC/BC,kCAAkC,EAClCC,iCAAiC,QAC5B,YAAY;AAEnB,SAASN,gBAAgB,GAAG;AAE5B;;CAEC,GACD,MAAMO,cAAc;AAgDpB;;CAEC,GACD,OAAO,MAAMC,YAAY,CAAC,EACxBC,GAAG,EACHC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,cAAc,EACdC,KAAK,EACLC,GAAG,EACHC,MAAM,EACNC,MAAM,EACNC,aAAa,EACbC,MAAM,EACNC,MAAMC,QAAQ,EACdC,OAAOC,QAAQ,EACfC,QAAQC,SAAS,EACjBC,SAAS,EACTC,UAAU,EACVC,KAAK,EACLC,WAAW,KAAK,EAChBC,cAAcC,gBAAgB,EAC9BC,QAAQ,EACRC,MAAM,EACNC,OAAO,EACPC,yBAAyB,EACzB,GAAGC,WACY;IACf,MAAMhB,OAAOC,YAAY1B,MAAM;QAAC+B;QAAWC;KAAW,EAAEpB;IAExD,MAAMe,QAAQI,aAAaN;IAC3B,MAAMI,SAASG,cAAcP;IAE7B,MAAM,CAACiB,QAAQC,UAAU,GAAG9C,MAAM+C,QAAQ,CAAC;IAC3C,MAAM,CAACC,QAAQC,UAAU,GAAGjD,MAAM+C,QAAQ,CAAC;IAE3C,MAAMG,SAAS3B,OAAOC;IACtB,MAAM2B,uBAAuB,AAACH,CAAAA,UAAU,CAACE,MAAK,mBAAMlD,MAAMoD,cAAc,CAACb;IAEzE,MAAMD,eAAea,uBAAuBZ,mBAAmB;IAE/D,IAAIc,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C7C,aAAakB;QACb,IAAIU,cAAc;YAChB7B,qBAAqBmB,MAAM;gBAAE4B,MAAM;gBAAgBC,OAAOnB;YAAa;QACzE;IACF;IAEA,MAAMoB,kBAAkB,CAACC;QACvB,IAAId,QAAQ;YACV;QACF;QAEAC,UAAU;QACVG,UAAU;QACVR,SAASkB;IACX;IAEA,MAAMC,mBAAmB,CAACD;QACxBb,UAAU;QACVG,UAAU;QACVP,UAAUiB;IACZ;IAEA,MAAME,SAAS3D,aAAayB;IAC5B,MAAMmC,2BAA2B9D,MAAM+D,MAAM,CAAC;IAC9C/D,MAAMgE,SAAS,CACb,SAASC;QACP,IAAIH,yBAAyBI,OAAO,EAAE;YACpC;QACF;QACAJ,yBAAyBI,OAAO,GAAG;QAEnC,IAAIL,OAAOK,OAAO,IAAIL,OAAOK,OAAO,CAACC,QAAQ,IAAI,CAACtB,QAAQ;YACxD,MAAMc,QAAQ,IAAIS,MAAM;YACxBP,OAAOK,OAAO,CAACG,aAAa,CAACV;QAC/B;IACF,GACA;QAACE;QAAQhB;KAAO;IAGlB,qBACE,KAACrC,iBAAiB8D,QAAQ;QAACb,OAAO;YAAE7B;QAAK;kBACvC,cAAA,MAACvB;YACC+B,OAAO;gBAAEN;gBAAOE;gBAAQ,GAAGI,KAAK;YAAC;YACjCmC,eAAetE,WACbU,MAAM,CAAC,YAAY,EACnBkC,UAAUlC,MAAM,CAAC,oBAAoB,EACrCgC,6BAA6BhC,MAAM,CAAC,oCAAoC;YAEzE,GAAGiC,SAAS;;gBAEZM,wBACC,KAACsB;oBACCC,KAAKZ;oBACL5C,KAAKA;oBACLyD,WAAW/D,MAAM,CAAC,iBAAiB;oBACnCO,aAAaA;oBACbC,UAAUA;oBACVC,SAASA;oBACTC,gBAAgBA;oBAChBC,OAAOA;oBACPC,KAAKA;oBACLC,QAAQA;oBACRC,QAAQA;oBACRK,OAAOC;oBACPC,QAAQC;oBACRQ,QAAQiB;oBACRhB,SAASkB;oBACR,GAAGxD,qBAAqBsB,cAAc;;gBAG1CY,8BAAgB,KAACqC;oBAAID,WAAW/D,MAAM,CAAC,sBAAsB;8BAAG2B;;gBAChEE;gBACA,CAACH,0BAAY,KAACsC;oBAAIC,aAAW;oBAACF,WAAW/D,MAAM,CAAC,oBAAoB;;;;;AAI7E,EAAE;AAEFK,UAAU6D,WAAW,GAAG;AAExB7D,UAAU8D,KAAK,GAAGxE;AAClBU,UAAU8D,KAAK,CAACD,WAAW,GAAG;AAE9B7D,UAAU+D,OAAO,GAAGxE;AACpBS,UAAU+D,OAAO,CAACF,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { minOr } from '../../lib/comparing';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type { AnchorHTMLAttributesOnly, HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { Clickable } from '../Clickable/Clickable';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n  ImageBaseSize,\n  ImageBaseExpectedIconProps,\n  ImageBaseBadgeProps,\n  ImageBaseOverlayProps,\n  ImageBaseContextProps,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\n/**\n * Размер по умолчанию.\n */\nconst defaultSize = 24;\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLImageElement> {\n  /**\n   * Задаёт размер картинки.\n   *\n   * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   */\n  size?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Ширина изображения\n   */\n  widthSize?: number;\n  /**\n   * Высота изображения\n   */\n  heightSize?: number;\n  /**\n   * Отключает обводку.\n   */\n  noBorder?: boolean;\n  /**\n   * Фолбек на случай, если картинка не прогрузилась.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   *\n   * > ⚠️ Может перекрывать `children`.\n   */\n  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n  /**\n   * Отключает фон, заданный по умолчанию. Полезен для отображения картинок с прозрачностью.\n   * @since 5.10.0\n   */\n  withTransparentBackground?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  fetchPriority,\n  getRef,\n  size: sizeProp,\n  width: widthImg,\n  height: heightImg,\n  widthSize,\n  heightSize,\n  style,\n  noBorder = false,\n  fallbackIcon: fallbackIconProp,\n  children,\n  onLoad,\n  onError,\n  withTransparentBackground,\n  ...restProps\n}: ImageBaseProps) => {\n  const size = sizeProp ?? minOr([widthSize, heightSize], defaultSize);\n\n  const width = widthSize ?? size;\n  const height = heightSize ?? size;\n\n  const [loaded, setLoaded] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n\n  const hasSrc = src || srcSet;\n  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (fallbackIcon) {\n      validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n    }\n  }\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    if (loaded) {\n      return;\n    }\n\n    setLoaded(true);\n    setFailed(false);\n    onLoad?.(event);\n  };\n\n  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(false);\n    setFailed(true);\n    onError?.(event);\n  };\n\n  const imgRef = useExternRef(getRef);\n  const isOnLoadStatusCheckedRef = React.useRef(false);\n  React.useEffect(\n    function dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater() {\n      if (isOnLoadStatusCheckedRef.current) {\n        return;\n      }\n      isOnLoadStatusCheckedRef.current = true;\n\n      if (imgRef.current && imgRef.current.complete && !loaded) {\n        const event = new Event('load');\n        imgRef.current.dispatchEvent(event);\n      }\n    },\n    [imgRef, loaded],\n  );\n\n  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <Clickable\n        style={{ width, height, ...style }}\n        baseClassName={classNames(\n          styles['ImageBase'],\n          loaded && styles['ImageBase--loaded'],\n          withTransparentBackground && styles['ImageBase--transparent-background'],\n        )}\n        {...restProps}\n      >\n        {hasSrc && (\n          <img\n            ref={imgRef}\n            alt={alt}\n            className={styles['ImageBase__img']}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={widthImg}\n            height={heightImg}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n            {...getFetchPriorityProp(fetchPriority)}\n          />\n        )}\n        {fallbackIcon && <div className={styles['ImageBase__fallback']}>{fallbackIcon}</div>}\n        {children}\n        {!noBorder && <div aria-hidden className={styles['ImageBase__border']} />}\n      </Clickable>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.displayName = 'ImageBase';\n\nImageBase.Badge = ImageBaseBadge;\nImageBase.Badge.displayName = 'ImageBase.Badge';\n\nImageBase.Overlay = ImageBaseOverlay;\nImageBase.Overlay.displayName = 'ImageBase.Overlay';\n"],"names":["React","classNames","useExternRef","minOr","getFetchPriorityProp","Clickable","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","styles","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","defaultSize","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","fetchPriority","getRef","size","sizeProp","width","widthImg","height","heightImg","widthSize","heightSize","style","noBorder","fallbackIcon","fallbackIconProp","children","onLoad","onError","withTransparentBackground","restProps","loaded","setLoaded","useState","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","process","env","NODE_ENV","name","value","handleImageLoad","event","handleImageError","imgRef","isOnLoadStatusCheckedRef","useRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","Provider","baseClassName","img","ref","className","div","aria-hidden","displayName","Badge","Overlay"],"mappings":"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"}