@vkontakte/vkui 6.2.2 → 6.3.0

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

@@ -15,15 +15,40 @@ export { ImageBaseContext };
 /**
  * Размер по умолчанию.
  */ const defaultSize = 24;
+const getObjectFitClassName = (objectFit)=>{
+    switch(objectFit){
+        case 'contain':
+            return styles['ImageBase__img--objectFit-contain'];
+        case 'cover':
+            return styles['ImageBase__img--objectFit-cover'];
+        case 'none':
+            return styles['ImageBase__img--objectFit-none'];
+        case 'scale-down':
+            return styles['ImageBase__img--objectFit-scaleDown'];
+    }
+    return undefined;
+};
+const parsePx = (value)=>{
+    if (value.endsWith('px')) {
+        return parseInt(value);
+    }
+    return undefined;
+};
+const sizeToNumber = (size)=>{
+    if (typeof size === 'string') {
+        return parsePx(size);
+    }
+    return size;
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/ImageBase
- */ export const ImageBase = ({ alt, crossOrigin, decoding, loading, referrerPolicy, sizes, src, srcSet, useMap, fetchPriority, getRef, size: sizeProp, width: widthImg, height: heightImg, widthSize, heightSize, style, noBorder = false, fallbackIcon: fallbackIconProp, children, onLoad, onError, withTransparentBackground, ...restProps })=>{
+ */ export const ImageBase = ({ alt, crossOrigin, decoding, loading, referrerPolicy, sizes, src, srcSet, useMap, fetchPriority, getRef, size: sizeProp, width: widthImg, height: heightImg, widthSize, heightSize, style, noBorder = false, fallbackIcon: fallbackIconProp, children, onLoad, onError, withTransparentBackground, objectFit = 'cover', keepAspectRatio = false, ...restProps })=>{
     const size = sizeProp ?? minOr([
-        widthSize,
-        heightSize
+        sizeToNumber(widthSize),
+        sizeToNumber(heightSize)
     ], defaultSize);
-    const width = widthSize ?? size;
-    const height = heightSize ?? size;
+    const width = widthSize ?? (keepAspectRatio ? undefined : size);
+    const height = heightSize ?? (keepAspectRatio ? undefined : size);
     const [loaded, setLoaded] = React.useState(false);
     const [failed, setFailed] = React.useState(false);
     const hasSrc = src || srcSet;
@@ -82,11 +107,15 @@ export { ImageBaseContext };
                 hasSrc && /*#__PURE__*/ _jsx("img", {
                     ref: imgRef,
                     alt: alt,
-                    className: styles['ImageBase__img'],
+                    className: classNames(styles['ImageBase__img'], getObjectFitClassName(objectFit), keepAspectRatio && styles['ImageBase__img--keepRatio']),
                     crossOrigin: crossOrigin,
                     decoding: decoding,
                     loading: loading,
                     referrerPolicy: referrerPolicy,
+                    style: keepAspectRatio ? {
+                        width: widthImg || width,
+                        height: heightImg || height
+                    } : undefined,
                     sizes: sizes,
                     src: src,
                     srcSet: srcSet,

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"],"mappings":"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"}
+{"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 | string;\n  /**\n   * Высота изображения\n   */\n  heightSize?: number | string;\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   * Пользовательское значения стиля object-fit\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit)\n   */\n  objectFit?: React.CSSProperties['objectFit'];\n  /**\n   * Флаг для сохранения пропорций картинки.\n   * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки\n   */\n  keepAspectRatio?: boolean;\n}\n\nconst getObjectFitClassName = (objectFit: React.CSSProperties['objectFit']) => {\n  switch (objectFit) {\n    case 'contain':\n      return styles['ImageBase__img--objectFit-contain'];\n    case 'cover':\n      return styles['ImageBase__img--objectFit-cover'];\n    case 'none':\n      return styles['ImageBase__img--objectFit-none'];\n    case 'scale-down':\n      return styles['ImageBase__img--objectFit-scaleDown'];\n  }\n  return undefined;\n};\n\nconst parsePx = (value: string): number | undefined => {\n  if (value.endsWith('px')) {\n    return parseInt(value);\n  }\n  return undefined;\n};\n\nconst sizeToNumber = (size: number | string | undefined): number | undefined => {\n  if (typeof size === 'string') {\n    return parsePx(size);\n  }\n  return size;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase: React.FC<ImageBaseProps> & {\n  Badge: typeof ImageBaseBadge;\n  Overlay: typeof ImageBaseOverlay;\n} = ({\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  objectFit = 'cover',\n  keepAspectRatio = false,\n  ...restProps\n}: ImageBaseProps) => {\n  const size = sizeProp ?? minOr([sizeToNumber(widthSize), sizeToNumber(heightSize)], defaultSize);\n\n  const width = widthSize ?? (keepAspectRatio ? undefined : size);\n  const height = heightSize ?? (keepAspectRatio ? undefined : 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={classNames(\n              styles['ImageBase__img'],\n              getObjectFitClassName(objectFit),\n              keepAspectRatio && styles['ImageBase__img--keepRatio'],\n            )}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            style={\n              keepAspectRatio\n                ? {\n                    width: widthImg || width,\n                    height: heightImg || height,\n                  }\n                : undefined\n            }\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","getObjectFitClassName","objectFit","undefined","parsePx","value","endsWith","parseInt","sizeToNumber","size","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","fetchPriority","getRef","sizeProp","width","widthImg","height","heightImg","widthSize","heightSize","style","noBorder","fallbackIcon","fallbackIconProp","children","onLoad","onError","withTransparentBackground","keepAspectRatio","restProps","loaded","setLoaded","useState","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","process","env","NODE_ENV","name","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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"}

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

@@ -40,10 +40,30 @@
   block-size: 100%;
   border: 0;
   border-radius: inherit;
-  object-fit: cover;
   visibility: hidden;
 }
 
+.ImageBase__img--keepRatio {
+  inline-size: auto;
+  block-size: auto;
+}
+
+.ImageBase__img--objectFit-contain {
+  object-fit: contain;
+}
+
+.ImageBase__img--objectFit-cover {
+  object-fit: cover;
+}
+
+.ImageBase__img--objectFit-none {
+  object-fit: none;
+}
+
+.ImageBase__img--objectFit-scaleDown {
+  object-fit: scale-down;
+}
+
 .ImageBase--loaded .ImageBase__img {
   visibility: visible;
 }

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

@@ -27,8 +27,5 @@ export interface ImageBaseBadgeProps extends HTMLAttributesWithRootRef<HTMLDivEl
  *
  * > Не используйте при `size < 24`
  */
-export declare const ImageBaseBadge: {
-    ({ background, ...restProps }: ImageBaseBadgeProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const ImageBaseBadge: React.FC<ImageBaseBadgeProps>;
 //# sourceMappingURL=ImageBaseBadge.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ImageBaseBadge.d.ts","sourceRoot":"","sources":["../../../../../src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAG3D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAS3D,MAAM,WAAW,mBAAoB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACpF;;;;;OAKG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;;;;;;;;;OAUG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;CAC1D;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc;mCAA6C,mBAAmB;;CAe1F,CAAC"}
+{"version":3,"file":"ImageBaseBadge.d.ts","sourceRoot":"","sources":["../../../../../src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAG3D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAmB3D,MAAM,WAAW,mBAAoB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACpF;;;;;OAKG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;;;;;;;;;OAUG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;CAC1D;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAexD,CAAC"}

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

@@ -1,10 +1,20 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { RootComponent } from '../../RootComponent/RootComponent';
 import { ImageBaseContext } from '../context';
 import { validateBadgeIcon } from '../validators';
 import styles from './ImageBaseBadge.module.css';
+function DevelopmentCheck({ children }) {
+    const { size } = React.useContext(ImageBaseContext);
+    if (children) {
+        validateBadgeIcon(size, {
+            name: 'children',
+            value: children
+        });
+    }
+    return null;
+}
 const backgroundStyles = {
     stroke: styles['ImageBaseBadge--background-stroke'],
     shadow: styles['ImageBaseBadge--background-shadow']
@@ -14,19 +24,16 @@ const backgroundStyles = {
  *
  * > Не используйте при `size < 24`
  */ export const ImageBaseBadge = ({ background = 'shadow', ...restProps })=>{
-    if (process.env.NODE_ENV === 'development') {
-        if (restProps.children) {
-            // eslint-disable-next-line react-hooks/rules-of-hooks
-            const { size } = React.useContext(ImageBaseContext);
-            validateBadgeIcon(size, {
-                name: 'children',
-                value: restProps.children
-            });
-        }
-    }
-    return /*#__PURE__*/ _jsx(RootComponent, {
-        ...restProps,
-        baseClassName: classNames(styles['ImageBaseBadge'], backgroundStyles[background])
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(RootComponent, {
+                ...restProps,
+                baseClassName: classNames(styles['ImageBaseBadge'], backgroundStyles[background])
+            }),
+            process.env.NODE_ENV === 'development' && /*#__PURE__*/ _jsx(DevelopmentCheck, {
+                children: restProps.children
+            })
+        ]
     });
 };
 ImageBaseBadge.displayName = 'ImageBaseBadge';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { ImageBaseContext } from '../context';\nimport type { ImageBaseExpectedIconProps } from '../types';\nimport { validateBadgeIcon } from '../validators';\nimport styles from './ImageBaseBadge.module.css';\n\nconst backgroundStyles = {\n  stroke: styles['ImageBaseBadge--background-stroke'],\n  shadow: styles['ImageBaseBadge--background-shadow'],\n};\n\nexport interface ImageBaseBadgeProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Вид подложки под иконку.\n   *\n   * - `\"stroke\"` – имитирует вырез (⚠️ если фон под компонентом динамический, то ожидайте баг).\n   * - `\"shadow\"` – добавляет небольшую тень.\n   */\n  background?: 'stroke' | 'shadow';\n  /**\n   * Принимает иконку.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getBadgeIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   */\n  children: React.ReactElement<ImageBaseExpectedIconProps>;\n}\n\n/**\n * Бейдж в правом нижнем углу компонента.\n *\n * > Не используйте при `size < 24`\n */\nexport const ImageBaseBadge = ({ background = 'shadow', ...restProps }: ImageBaseBadgeProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    if (restProps.children) {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const { size } = React.useContext(ImageBaseContext);\n      validateBadgeIcon(size, { name: 'children', value: restProps.children });\n    }\n  }\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(styles['ImageBaseBadge'], backgroundStyles[background])}\n    />\n  );\n};\n\nImageBaseBadge.displayName = 'ImageBaseBadge';\n"],"names":["React","classNames","RootComponent","ImageBaseContext","validateBadgeIcon","styles","backgroundStyles","stroke","shadow","ImageBaseBadge","background","restProps","process","env","NODE_ENV","children","size","useContext","name","value","baseClassName","displayName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAoC;AAClE,SAASC,gBAAgB,QAAQ,aAAa;AAE9C,SAASC,iBAAiB,QAAQ,gBAAgB;AAClD,OAAOC,YAAY,8BAA8B;AAEjD,MAAMC,mBAAmB;IACvBC,QAAQF,MAAM,CAAC,oCAAoC;IACnDG,QAAQH,MAAM,CAAC,oCAAoC;AACrD;AAwBA;;;;CAIC,GACD,OAAO,MAAMI,iBAAiB,CAAC,EAAEC,aAAa,QAAQ,EAAE,GAAGC,WAAgC;IACzF,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIH,UAAUI,QAAQ,EAAE;YACtB,sDAAsD;YACtD,MAAM,EAAEC,IAAI,EAAE,GAAGhB,MAAMiB,UAAU,CAACd;YAClCC,kBAAkBY,MAAM;gBAAEE,MAAM;gBAAYC,OAAOR,UAAUI,QAAQ;YAAC;QACxE;IACF;IAEA,qBACE,KAACb;QACE,GAAGS,SAAS;QACbS,eAAenB,WAAWI,MAAM,CAAC,iBAAiB,EAAEC,gBAAgB,CAACI,WAAW;;AAGtF,EAAE;AAEFD,eAAeY,WAAW,GAAG"}
+{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { ImageBaseContext } from '../context';\nimport type { ImageBaseExpectedIconProps } from '../types';\nimport { validateBadgeIcon } from '../validators';\nimport styles from './ImageBaseBadge.module.css';\n\nfunction DevelopmentCheck({ children }: Pick<ImageBaseBadgeProps, 'children'>) {\n  const { size } = React.useContext(ImageBaseContext);\n\n  if (children) {\n    validateBadgeIcon(size, { name: 'children', value: children });\n  }\n\n  return null;\n}\n\nconst backgroundStyles = {\n  stroke: styles['ImageBaseBadge--background-stroke'],\n  shadow: styles['ImageBaseBadge--background-shadow'],\n};\n\nexport interface ImageBaseBadgeProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Вид подложки под иконку.\n   *\n   * - `\"stroke\"` – имитирует вырез (⚠️ если фон под компонентом динамический, то ожидайте баг).\n   * - `\"shadow\"` – добавляет небольшую тень.\n   */\n  background?: 'stroke' | 'shadow';\n  /**\n   * Принимает иконку.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getBadgeIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   */\n  children: React.ReactElement<ImageBaseExpectedIconProps>;\n}\n\n/**\n * Бейдж в правом нижнем углу компонента.\n *\n * > Не используйте при `size < 24`\n */\nexport const ImageBaseBadge: React.FC<ImageBaseBadgeProps> = ({\n  background = 'shadow',\n  ...restProps\n}: ImageBaseBadgeProps) => {\n  return (\n    <>\n      <RootComponent\n        {...restProps}\n        baseClassName={classNames(styles['ImageBaseBadge'], backgroundStyles[background])}\n      />\n      {process.env.NODE_ENV === 'development' && (\n        <DevelopmentCheck>{restProps.children}</DevelopmentCheck>\n      )}\n    </>\n  );\n};\n\nImageBaseBadge.displayName = 'ImageBaseBadge';\n"],"names":["React","classNames","RootComponent","ImageBaseContext","validateBadgeIcon","styles","DevelopmentCheck","children","size","useContext","name","value","backgroundStyles","stroke","shadow","ImageBaseBadge","background","restProps","baseClassName","process","env","NODE_ENV","displayName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAoC;AAClE,SAASC,gBAAgB,QAAQ,aAAa;AAE9C,SAASC,iBAAiB,QAAQ,gBAAgB;AAClD,OAAOC,YAAY,8BAA8B;AAEjD,SAASC,iBAAiB,EAAEC,QAAQ,EAAyC;IAC3E,MAAM,EAAEC,IAAI,EAAE,GAAGR,MAAMS,UAAU,CAACN;IAElC,IAAII,UAAU;QACZH,kBAAkBI,MAAM;YAAEE,MAAM;YAAYC,OAAOJ;QAAS;IAC9D;IAEA,OAAO;AACT;AAEA,MAAMK,mBAAmB;IACvBC,QAAQR,MAAM,CAAC,oCAAoC;IACnDS,QAAQT,MAAM,CAAC,oCAAoC;AACrD;AAwBA;;;;CAIC,GACD,OAAO,MAAMU,iBAAgD,CAAC,EAC5DC,aAAa,QAAQ,EACrB,GAAGC,WACiB;IACpB,qBACE;;0BACE,KAACf;gBACE,GAAGe,SAAS;gBACbC,eAAejB,WAAWI,MAAM,CAAC,iBAAiB,EAAEO,gBAAgB,CAACI,WAAW;;YAEjFG,QAAQC,GAAG,CAACC,QAAQ,KAAK,+BACxB,KAACf;0BAAkBW,UAAUV,QAAQ;;;;AAI7C,EAAE;AAEFQ,eAAeO,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"file":"ImageBaseOverlay.d.ts","sourceRoot":"","sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EACV,gCAAgC,EAChC,mCAAmC,EACpC,MAAM,SAAS,CAAC;AAGjB,MAAM,MAAM,qBAAqB,GAC7B,gCAAgC,GAChC,mCAAmC,CAAC;AAiExC;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA6B5D,CAAC"}
+{"version":3,"file":"ImageBaseOverlay.d.ts","sourceRoot":"","sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EACV,gCAAgC,EAChC,mCAAmC,EACpC,MAAM,SAAS,CAAC;AAejB,MAAM,MAAM,qBAAqB,GAC7B,gCAAgC,GAChC,mCAAmC,CAAC;AA4DxC;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA6B5D,CAAC"}

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useKeyboard } from '../../../components/Clickable/useKeyboard';
@@ -11,32 +11,41 @@ import { ImageBaseContext } from '../context';
 import { validateOverlayIcon } from '../validators';
 import { useNonInteractiveOverlayProps } from './hooks';
 import styles from './ImageBaseOverlay.module.css';
-const ImageBaseOverlayInteractive = ({ children, className, getRootRef, disableInteractive, overlayShown, ...restProps })=>{
-    const { focusVisible, ...focusEvents } = useFocusVisible();
-    const focusVisibleClassNames = useFocusVisibleClassName({
-        focusVisible,
-        mode: 'inside'
-    });
-    const keyboardHandlers = useKeyboard();
+function DevelopmentCheck({ children }) {
+    const { size } = React.useContext(ImageBaseContext);
     if (process.env.NODE_ENV === 'development') {
         if (children) {
-            // eslint-disable-next-line react-hooks/rules-of-hooks
-            const { size } = React.useContext(ImageBaseContext);
             validateOverlayIcon(size, {
                 name: 'children',
                 value: children
             });
         }
     }
-    return /*#__PURE__*/ _jsx("div", {
-        ...restProps,
-        tabIndex: 0,
-        role: "button",
-        className: classNames(styles['ImageBaseOverlay--clickable'], (focusVisible || overlayShown) && styles['ImageBaseOverlay--visible'], focusVisibleClassNames, className),
-        ref: getRootRef,
-        ...focusEvents,
-        ...keyboardHandlers,
-        children: children
+    return null;
+}
+const ImageBaseOverlayInteractive = ({ children, className, getRootRef, disableInteractive, overlayShown, ...restProps })=>{
+    const { focusVisible, ...focusEvents } = useFocusVisible();
+    const focusVisibleClassNames = useFocusVisibleClassName({
+        focusVisible,
+        mode: 'inside'
+    });
+    const keyboardHandlers = useKeyboard();
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                ...restProps,
+                tabIndex: 0,
+                role: "button",
+                className: classNames(styles['ImageBaseOverlay--clickable'], (focusVisible || overlayShown) && styles['ImageBaseOverlay--visible'], focusVisibleClassNames, className),
+                ref: getRootRef,
+                ...focusEvents,
+                ...keyboardHandlers,
+                children: children
+            }),
+            process.env.NODE_ENV === 'development' && /*#__PURE__*/ _jsx(DevelopmentCheck, {
+                children: children
+            })
+        ]
     });
 };
 const ImageBaseOverlayNonInteractive = ({ className, getRootRef, disableInteractive, overlayShown: overlayShownProps, ...restProps })=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useKeyboard } from '../../../components/Clickable/useKeyboard';\nimport { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';\nimport { useAppearance } from '../../../hooks/useAppearance';\nimport { useExternRef } from '../../../hooks/useExternRef';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport { ImageBaseContext } from '../context';\nimport { validateOverlayIcon } from '../validators';\nimport { useNonInteractiveOverlayProps } from './hooks';\nimport type {\n  ImageBaseOverlayInteractiveProps,\n  ImageBaseOverlayNonInteractiveProps,\n} from './types';\nimport styles from './ImageBaseOverlay.module.css';\n\nexport type ImageBaseOverlayProps =\n  | ImageBaseOverlayInteractiveProps\n  | ImageBaseOverlayNonInteractiveProps;\n\nconst ImageBaseOverlayInteractive = ({\n  children,\n  className,\n  getRootRef,\n  disableInteractive,\n  overlayShown,\n  ...restProps\n}: ImageBaseOverlayInteractiveProps & { overlayShown?: boolean }) => {\n  const { focusVisible, ...focusEvents } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: 'inside' });\n  const keyboardHandlers = useKeyboard();\n\n  if (process.env.NODE_ENV === 'development') {\n    if (children) {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const { size } = React.useContext(ImageBaseContext);\n      validateOverlayIcon(size, { name: 'children', value: children });\n    }\n  }\n\n  return (\n    <div\n      {...restProps}\n      tabIndex={0}\n      role=\"button\"\n      className={classNames(\n        styles['ImageBaseOverlay--clickable'],\n        (focusVisible || overlayShown) && styles['ImageBaseOverlay--visible'],\n        focusVisibleClassNames,\n        className,\n      )}\n      ref={getRootRef}\n      {...focusEvents}\n      {...keyboardHandlers}\n    >\n      {children}\n    </div>\n  );\n};\n\nconst ImageBaseOverlayNonInteractive = ({\n  className,\n  getRootRef,\n  disableInteractive,\n  overlayShown: overlayShownProps,\n  ...restProps\n}: ImageBaseOverlayNonInteractiveProps & { overlayShown?: boolean }) => {\n  const rootRef = useExternRef(getRootRef);\n  const { shown: overlayShown, onClick: onOverlayClick } = useNonInteractiveOverlayProps(rootRef);\n\n  return (\n    <div\n      {...restProps}\n      ref={rootRef}\n      className={classNames(\n        (overlayShown || overlayShownProps) && styles['ImageBaseOverlay--visible'],\n        className,\n      )}\n      onClick={onOverlayClick}\n    />\n  );\n};\n\n/**\n * Оверлей над картинкой.\n */\nexport const ImageBaseOverlay: React.FC<ImageBaseOverlayProps> = ({\n  className,\n  theme: themeProp,\n  visibility: visibilityProp,\n  ...restProps\n}: ImageBaseOverlayProps) => {\n  const appearance = useAppearance();\n  const hasPointer = useAdaptivityHasPointer();\n  const theme = themeProp ?? appearance;\n  const visibility = visibilityProp ?? (hasPointer ? 'on-hover' : 'always');\n\n  const commonClassNames = classNames(\n    styles['ImageBaseOverlay'],\n    theme === 'light' && styles['ImageBaseOverlay--theme-light'],\n    theme === 'dark' && styles['ImageBaseOverlay--theme-dark'],\n    className,\n  );\n\n  const commonProps = {\n    className: commonClassNames,\n    overlayShown: visibility === 'always',\n  };\n\n  // Не делаем деструктуризацию пропа, потому что Typescript не вывозит\n  if (restProps.disableInteractive) {\n    return <ImageBaseOverlayNonInteractive {...restProps} {...commonProps} />;\n  }\n\n  return <ImageBaseOverlayInteractive {...restProps} {...commonProps} />;\n};\n\nImageBaseOverlay.displayName = 'ImageBaseOverlay';\n"],"names":["React","classNames","useKeyboard","useAdaptivityHasPointer","useAppearance","useExternRef","useFocusVisible","useFocusVisibleClassName","ImageBaseContext","validateOverlayIcon","useNonInteractiveOverlayProps","styles","ImageBaseOverlayInteractive","children","className","getRootRef","disableInteractive","overlayShown","restProps","focusVisible","focusEvents","focusVisibleClassNames","mode","keyboardHandlers","process","env","NODE_ENV","size","useContext","name","value","div","tabIndex","role","ref","ImageBaseOverlayNonInteractive","overlayShownProps","rootRef","shown","onClick","onOverlayClick","ImageBaseOverlay","theme","themeProp","visibility","visibilityProp","appearance","hasPointer","commonClassNames","commonProps","displayName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,4CAA4C;AACxE,SAASC,uBAAuB,QAAQ,yCAAyC;AACjF,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,SAASC,eAAe,QAAQ,iCAAiC;AACjE,SAASC,wBAAwB,QAAQ,0CAA0C;AACnF,SAASC,gBAAgB,QAAQ,aAAa;AAC9C,SAASC,mBAAmB,QAAQ,gBAAgB;AACpD,SAASC,6BAA6B,QAAQ,UAAU;AAKxD,OAAOC,YAAY,gCAAgC;AAMnD,MAAMC,8BAA8B,CAAC,EACnCC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,kBAAkB,EAClBC,YAAY,EACZ,GAAGC,WAC2D;IAC9D,MAAM,EAAEC,YAAY,EAAE,GAAGC,aAAa,GAAGd;IACzC,MAAMe,yBAAyBd,yBAAyB;QAAEY;QAAcG,MAAM;IAAS;IACvF,MAAMC,mBAAmBrB;IAEzB,IAAIsB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIb,UAAU;YACZ,sDAAsD;YACtD,MAAM,EAAEc,IAAI,EAAE,GAAG3B,MAAM4B,UAAU,CAACpB;YAClCC,oBAAoBkB,MAAM;gBAAEE,MAAM;gBAAYC,OAAOjB;YAAS;QAChE;IACF;IAEA,qBACE,KAACkB;QACE,GAAGb,SAAS;QACbc,UAAU;QACVC,MAAK;QACLnB,WAAWb,WACTU,MAAM,CAAC,8BAA8B,EACrC,AAACQ,CAAAA,gBAAgBF,YAAW,KAAMN,MAAM,CAAC,4BAA4B,EACrEU,wBACAP;QAEFoB,KAAKnB;QACJ,GAAGK,WAAW;QACd,GAAGG,gBAAgB;kBAEnBV;;AAGP;AAEA,MAAMsB,iCAAiC,CAAC,EACtCrB,SAAS,EACTC,UAAU,EACVC,kBAAkB,EAClBC,cAAcmB,iBAAiB,EAC/B,GAAGlB,WAC8D;IACjE,MAAMmB,UAAUhC,aAAaU;IAC7B,MAAM,EAAEuB,OAAOrB,YAAY,EAAEsB,SAASC,cAAc,EAAE,GAAG9B,8BAA8B2B;IAEvF,qBACE,KAACN;QACE,GAAGb,SAAS;QACbgB,KAAKG;QACLvB,WAAWb,WACT,AAACgB,CAAAA,gBAAgBmB,iBAAgB,KAAMzB,MAAM,CAAC,4BAA4B,EAC1EG;QAEFyB,SAASC;;AAGf;AAEA;;CAEC,GACD,OAAO,MAAMC,mBAAoD,CAAC,EAChE3B,SAAS,EACT4B,OAAOC,SAAS,EAChBC,YAAYC,cAAc,EAC1B,GAAG3B,WACmB;IACtB,MAAM4B,aAAa1C;IACnB,MAAM2C,aAAa5C;IACnB,MAAMuC,QAAQC,aAAaG;IAC3B,MAAMF,aAAaC,kBAAmBE,CAAAA,aAAa,aAAa,QAAO;IAEvE,MAAMC,mBAAmB/C,WACvBU,MAAM,CAAC,mBAAmB,EAC1B+B,UAAU,WAAW/B,MAAM,CAAC,gCAAgC,EAC5D+B,UAAU,UAAU/B,MAAM,CAAC,+BAA+B,EAC1DG;IAGF,MAAMmC,cAAc;QAClBnC,WAAWkC;QACX/B,cAAc2B,eAAe;IAC/B;IAEA,qEAAqE;IACrE,IAAI1B,UAAUF,kBAAkB,EAAE;QAChC,qBAAO,KAACmB;YAAgC,GAAGjB,SAAS;YAAG,GAAG+B,WAAW;;IACvE;IAEA,qBAAO,KAACrC;QAA6B,GAAGM,SAAS;QAAG,GAAG+B,WAAW;;AACpE,EAAE;AAEFR,iBAAiBS,WAAW,GAAG"}
+{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useKeyboard } from '../../../components/Clickable/useKeyboard';\nimport { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';\nimport { useAppearance } from '../../../hooks/useAppearance';\nimport { useExternRef } from '../../../hooks/useExternRef';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport { ImageBaseContext } from '../context';\nimport { validateOverlayIcon } from '../validators';\nimport { useNonInteractiveOverlayProps } from './hooks';\nimport type {\n  ImageBaseOverlayInteractiveProps,\n  ImageBaseOverlayNonInteractiveProps,\n} from './types';\nimport styles from './ImageBaseOverlay.module.css';\n\nfunction DevelopmentCheck({ children }: Pick<ImageBaseOverlayInteractiveProps, 'children'>) {\n  const { size } = React.useContext(ImageBaseContext);\n\n  if (process.env.NODE_ENV === 'development') {\n    if (children) {\n      validateOverlayIcon(size, { name: 'children', value: children });\n    }\n  }\n\n  return null;\n}\n\nexport type ImageBaseOverlayProps =\n  | ImageBaseOverlayInteractiveProps\n  | ImageBaseOverlayNonInteractiveProps;\n\nconst ImageBaseOverlayInteractive = ({\n  children,\n  className,\n  getRootRef,\n  disableInteractive,\n  overlayShown,\n  ...restProps\n}: ImageBaseOverlayInteractiveProps & { overlayShown?: boolean }) => {\n  const { focusVisible, ...focusEvents } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: 'inside' });\n  const keyboardHandlers = useKeyboard();\n\n  return (\n    <>\n      <div\n        {...restProps}\n        tabIndex={0}\n        role=\"button\"\n        className={classNames(\n          styles['ImageBaseOverlay--clickable'],\n          (focusVisible || overlayShown) && styles['ImageBaseOverlay--visible'],\n          focusVisibleClassNames,\n          className,\n        )}\n        ref={getRootRef}\n        {...focusEvents}\n        {...keyboardHandlers}\n      >\n        {children}\n      </div>\n      {process.env.NODE_ENV === 'development' && <DevelopmentCheck>{children}</DevelopmentCheck>}\n    </>\n  );\n};\n\nconst ImageBaseOverlayNonInteractive = ({\n  className,\n  getRootRef,\n  disableInteractive,\n  overlayShown: overlayShownProps,\n  ...restProps\n}: ImageBaseOverlayNonInteractiveProps & { overlayShown?: boolean }) => {\n  const rootRef = useExternRef(getRootRef);\n  const { shown: overlayShown, onClick: onOverlayClick } = useNonInteractiveOverlayProps(rootRef);\n\n  return (\n    <div\n      {...restProps}\n      ref={rootRef}\n      className={classNames(\n        (overlayShown || overlayShownProps) && styles['ImageBaseOverlay--visible'],\n        className,\n      )}\n      onClick={onOverlayClick}\n    />\n  );\n};\n\n/**\n * Оверлей над картинкой.\n */\nexport const ImageBaseOverlay: React.FC<ImageBaseOverlayProps> = ({\n  className,\n  theme: themeProp,\n  visibility: visibilityProp,\n  ...restProps\n}: ImageBaseOverlayProps) => {\n  const appearance = useAppearance();\n  const hasPointer = useAdaptivityHasPointer();\n  const theme = themeProp ?? appearance;\n  const visibility = visibilityProp ?? (hasPointer ? 'on-hover' : 'always');\n\n  const commonClassNames = classNames(\n    styles['ImageBaseOverlay'],\n    theme === 'light' && styles['ImageBaseOverlay--theme-light'],\n    theme === 'dark' && styles['ImageBaseOverlay--theme-dark'],\n    className,\n  );\n\n  const commonProps = {\n    className: commonClassNames,\n    overlayShown: visibility === 'always',\n  };\n\n  // Не делаем деструктуризацию пропа, потому что Typescript не вывозит\n  if (restProps.disableInteractive) {\n    return <ImageBaseOverlayNonInteractive {...restProps} {...commonProps} />;\n  }\n\n  return <ImageBaseOverlayInteractive {...restProps} {...commonProps} />;\n};\n\nImageBaseOverlay.displayName = 'ImageBaseOverlay';\n"],"names":["React","classNames","useKeyboard","useAdaptivityHasPointer","useAppearance","useExternRef","useFocusVisible","useFocusVisibleClassName","ImageBaseContext","validateOverlayIcon","useNonInteractiveOverlayProps","styles","DevelopmentCheck","children","size","useContext","process","env","NODE_ENV","name","value","ImageBaseOverlayInteractive","className","getRootRef","disableInteractive","overlayShown","restProps","focusVisible","focusEvents","focusVisibleClassNames","mode","keyboardHandlers","div","tabIndex","role","ref","ImageBaseOverlayNonInteractive","overlayShownProps","rootRef","shown","onClick","onOverlayClick","ImageBaseOverlay","theme","themeProp","visibility","visibilityProp","appearance","hasPointer","commonClassNames","commonProps","displayName"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEhD,eAAO,MAAM,gBAAgB,sCAE3B,CAAC"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEhD,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,OAAO,CAAC,qBAAqB,CAG9D,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ImageBase/context.ts"],"sourcesContent":["import * as React from 'react';\nimport { ImageBaseContextProps } from './types';\n\nexport const ImageBaseContext = React.createContext<ImageBaseContextProps>({\n  size: 0,\n});\n"],"names":["React","ImageBaseContext","createContext","size"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,mBAAmBD,MAAME,aAAa,CAAwB;IACzEC,MAAM;AACR,GAAG"}
+{"version":3,"sources":["../../../../src/components/ImageBase/context.ts"],"sourcesContent":["import * as React from 'react';\nimport { ImageBaseContextProps } from './types';\n\nexport const ImageBaseContext: React.Context<ImageBaseContextProps> =\n  React.createContext<ImageBaseContextProps>({\n    size: 0,\n  });\n"],"names":["React","ImageBaseContext","createContext","size"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,mBACXD,MAAME,aAAa,CAAwB;IACzCC,MAAM;AACR,GAAG"}

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

@@ -5,7 +5,7 @@
  */
 export declare function getFallbackIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20 | 24 | 28 | 36;
 export declare namespace getFallbackIconSizeByImageBaseSize {
-    var MAX_SIZE: 36;
+    let MAX_SIZE: 36;
 }
 /**
  * Возвращает размер иконки основанный на дизайн-системы.
@@ -14,7 +14,7 @@ export declare namespace getFallbackIconSizeByImageBaseSize {
  */
 export declare function getBadgeIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20 | 24;
 export declare namespace getBadgeIconSizeByImageBaseSize {
-    var MAX_SIZE: 24;
+    let MAX_SIZE: 24;
 }
 /**
  * Возвращает размер иконки основанный на дизайн-системы.
@@ -23,6 +23,6 @@ export declare namespace getBadgeIconSizeByImageBaseSize {
  */
 export declare function getOverlayIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 18 | 20 | 24 | 28 | 32;
 export declare namespace getOverlayIconSizeByImageBaseSize {
-    var MAX_SIZE: 32;
+    let MAX_SIZE: 32;
 }
 //# sourceMappingURL=helpers.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/helpers.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,kCAAkC,CAAC,SAAS,EAAE,MAAM,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAajG;yBAbe,kCAAkC;;;AAiBlD;;;;GAIG;AACH,wBAAgB,+BAA+B,CAAC,SAAS,EAAE,MAAM,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CASpF;yBATe,+BAA+B;;;AAa/C;;;;GAIG;AACH,wBAAgB,iCAAiC,CAC/C,SAAS,EAAE,MAAM,GAChB,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAelC;yBAjBe,iCAAiC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/helpers.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,kCAAkC,CAAC,SAAS,EAAE,MAAM,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAajG;AACD,MAAM,CAAC,OAAO,WAAW,kCAAkC,CAAC;IACnD,IAAI,QAAQ,EAAE,EAAE,CAAC;CACzB;AAID;;;;GAIG;AACH,wBAAgB,+BAA+B,CAAC,SAAS,EAAE,MAAM,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CASpF;AACD,MAAM,CAAC,OAAO,WAAW,+BAA+B,CAAC;IAChD,IAAI,QAAQ,EAAE,EAAE,CAAC;CACzB;AAID;;;;GAIG;AACH,wBAAgB,iCAAiC,CAC/C,SAAS,EAAE,MAAM,GAChB,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAelC;AACD,MAAM,CAAC,OAAO,WAAW,iCAAiC,CAAC;IAClD,IAAI,QAAQ,EAAE,EAAE,CAAC;CACzB"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ImageBase/helpers.ts"],"sourcesContent":["/**\n * Возвращает размер иконки основанный на дизайн-системы.\n *\n * @param imageSize наименьшая сторона изображения\n */\nexport function getFallbackIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20 | 24 | 28 | 36 {\n  if (imageSize <= 20) {\n    return 12;\n  } else if (imageSize > 20 && imageSize <= 28) {\n    return 16;\n  } else if (imageSize > 28 && imageSize <= 32) {\n    return 20;\n  } else if (imageSize > 32 && imageSize <= 44) {\n    return 24;\n  } else if (imageSize > 44 && imageSize <= 64) {\n    return 28;\n  }\n  return getFallbackIconSizeByImageBaseSize.MAX_SIZE;\n}\n\ngetFallbackIconSizeByImageBaseSize.MAX_SIZE = 36 as const;\n\n/**\n * Возвращает размер иконки основанный на дизайн-системы.\n *\n * @param imageSize наименьшая сторона изображения\n */\nexport function getBadgeIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20 | 24 {\n  if (imageSize <= 36) {\n    return 12;\n  } else if (imageSize > 36 && imageSize <= 48) {\n    return 16;\n  } else if (imageSize > 48 && imageSize <= 64) {\n    return 20;\n  }\n  return getBadgeIconSizeByImageBaseSize.MAX_SIZE;\n}\n\ngetBadgeIconSizeByImageBaseSize.MAX_SIZE = 24 as const;\n\n/**\n * Возвращает размер иконки основанный на дизайн-системы.\n *\n * @param imageSize наименьшая сторона изображения\n */\nexport function getOverlayIconSizeByImageBaseSize(\n  imageSize: number,\n): 12 | 16 | 18 | 20 | 24 | 28 | 32 {\n  if (imageSize <= 20) {\n    return 12;\n  } else if (imageSize > 20 && imageSize <= 24) {\n    return 16;\n  } else if (imageSize > 24 && imageSize <= 28) {\n    return 18;\n  } else if (imageSize > 28 && imageSize <= 40) {\n    return 20;\n  } else if (imageSize > 40 && imageSize <= 48) {\n    return 24;\n  } else if (imageSize > 48 && imageSize <= 88) {\n    return 28;\n  }\n  return getOverlayIconSizeByImageBaseSize.MAX_SIZE;\n}\n\ngetOverlayIconSizeByImageBaseSize.MAX_SIZE = 32 as const;\n"],"names":["getFallbackIconSizeByImageBaseSize","imageSize","MAX_SIZE","getBadgeIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize"],"mappings":"AAAA;;;;CAIC,GACD,OAAO,SAASA,mCAAmCC,SAAiB;IAClE,IAAIA,aAAa,IAAI;QACnB,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT;IACA,OAAOD,mCAAmCE,QAAQ;AACpD;AAEAF,mCAAmCE,QAAQ,GAAG;AAE9C;;;;CAIC,GACD,OAAO,SAASC,gCAAgCF,SAAiB;IAC/D,IAAIA,aAAa,IAAI;QACnB,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT;IACA,OAAOE,gCAAgCD,QAAQ;AACjD;AAEAC,gCAAgCD,QAAQ,GAAG;AAE3C;;;;CAIC,GACD,OAAO,SAASE,kCACdH,SAAiB;IAEjB,IAAIA,aAAa,IAAI;QACnB,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT;IACA,OAAOG,kCAAkCF,QAAQ;AACnD;AAEAE,kCAAkCF,QAAQ,GAAG"}
+{"version":3,"sources":["../../../../src/components/ImageBase/helpers.ts"],"sourcesContent":["/**\n * Возвращает размер иконки основанный на дизайн-системы.\n *\n * @param imageSize наименьшая сторона изображения\n */\nexport function getFallbackIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20 | 24 | 28 | 36 {\n  if (imageSize <= 20) {\n    return 12;\n  } else if (imageSize > 20 && imageSize <= 28) {\n    return 16;\n  } else if (imageSize > 28 && imageSize <= 32) {\n    return 20;\n  } else if (imageSize > 32 && imageSize <= 44) {\n    return 24;\n  } else if (imageSize > 44 && imageSize <= 64) {\n    return 28;\n  }\n  return getFallbackIconSizeByImageBaseSize.MAX_SIZE;\n}\nexport declare namespace getFallbackIconSizeByImageBaseSize {\n  export let MAX_SIZE: 36;\n}\n\ngetFallbackIconSizeByImageBaseSize.MAX_SIZE = 36;\n\n/**\n * Возвращает размер иконки основанный на дизайн-системы.\n *\n * @param imageSize наименьшая сторона изображения\n */\nexport function getBadgeIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20 | 24 {\n  if (imageSize <= 36) {\n    return 12;\n  } else if (imageSize > 36 && imageSize <= 48) {\n    return 16;\n  } else if (imageSize > 48 && imageSize <= 64) {\n    return 20;\n  }\n  return getBadgeIconSizeByImageBaseSize.MAX_SIZE;\n}\nexport declare namespace getBadgeIconSizeByImageBaseSize {\n  export let MAX_SIZE: 24;\n}\n\ngetBadgeIconSizeByImageBaseSize.MAX_SIZE = 24 as const;\n\n/**\n * Возвращает размер иконки основанный на дизайн-системы.\n *\n * @param imageSize наименьшая сторона изображения\n */\nexport function getOverlayIconSizeByImageBaseSize(\n  imageSize: number,\n): 12 | 16 | 18 | 20 | 24 | 28 | 32 {\n  if (imageSize <= 20) {\n    return 12;\n  } else if (imageSize > 20 && imageSize <= 24) {\n    return 16;\n  } else if (imageSize > 24 && imageSize <= 28) {\n    return 18;\n  } else if (imageSize > 28 && imageSize <= 40) {\n    return 20;\n  } else if (imageSize > 40 && imageSize <= 48) {\n    return 24;\n  } else if (imageSize > 48 && imageSize <= 88) {\n    return 28;\n  }\n  return getOverlayIconSizeByImageBaseSize.MAX_SIZE;\n}\nexport declare namespace getOverlayIconSizeByImageBaseSize {\n  export let MAX_SIZE: 32;\n}\n\ngetOverlayIconSizeByImageBaseSize.MAX_SIZE = 32 as const;\n"],"names":["getFallbackIconSizeByImageBaseSize","imageSize","MAX_SIZE","getBadgeIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize"],"mappings":"AAAA;;;;CAIC,GACD,OAAO,SAASA,mCAAmCC,SAAiB;IAClE,IAAIA,aAAa,IAAI;QACnB,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT;IACA,OAAOD,mCAAmCE,QAAQ;AACpD;AAKAF,mCAAmCE,QAAQ,GAAG;AAE9C;;;;CAIC,GACD,OAAO,SAASC,gCAAgCF,SAAiB;IAC/D,IAAIA,aAAa,IAAI;QACnB,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT;IACA,OAAOE,gCAAgCD,QAAQ;AACjD;AAKAC,gCAAgCD,QAAQ,GAAG;AAE3C;;;;CAIC,GACD,OAAO,SAASE,kCACdH,SAAiB;IAEjB,IAAIA,aAAa,IAAI;QACnB,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT;IACA,OAAOG,kCAAkCF,QAAQ;AACnD;AAKAE,kCAAkCF,QAAQ,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"file":"validators.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/validators.ts"],"names":[],"mappings":"AAgDA,UAAU,QAAQ;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC;CACpB;AAoCD,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,QAOzE;AAOD,wBAAgB,YAAY,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAUpD;AAID,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAU7E;AAID,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAO/E"}
+{"version":3,"file":"validators.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/validators.ts"],"names":[],"mappings":"AAgDA,UAAU,QAAQ;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC;CACpB;AAoCD,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAOhF;AAOD,wBAAgB,YAAY,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAUpD;AAID,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAU7E;AAID,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAO/E"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ImageBase/validators.ts"],"sourcesContent":["import { warnOnce } from '../../lib/warnOnce';\nimport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\nimport { imageBaseSizes } from './types';\n\n/**\n * Пример,\n *\n * Icon28User -> 28\n * Icon12Circle1 -> 12\n * Icon12Circle2 -> 12\n * Icon20TextHeading1Outline -> 20\n */\nfunction parseIconSizeByDisplayName(displayName: unknown): number | null {\n  if (typeof displayName !== 'string') {\n    return null;\n  }\n\n  const match = /Icon(\\d+)/.exec(displayName);\n\n  return match ? Number(match[1]) : null;\n}\n\nfunction parseIconSizeByWidthProp(width: unknown): number | null {\n  if (typeof width !== 'string' && typeof width !== 'number') {\n    return null;\n  }\n  const size = Number(width);\n  return size > 0 ? size : null;\n}\n\nfunction getElementDisplayName(element: JSX.Element): string | null {\n  return element.type.displayName ?? null;\n}\n\nfunction getElementWidthProp(element: JSX.Element): number | string | null {\n  return element.props.width ?? null;\n}\n\nfunction getIconSizeByElement(element: JSX.Element): number | null {\n  const sizeByDisplayName = parseIconSizeByDisplayName(getElementDisplayName(element));\n  const sizeByWidth = parseIconSizeByWidthProp(getElementWidthProp(element));\n  return sizeByWidth ? sizeByWidth : sizeByDisplayName;\n}\n\ninterface IconProp {\n  name: string;\n  value: JSX.Element;\n}\n\ninterface SelectorFn {\n  (imageSize: number): number;\n  MAX_SIZE: number;\n}\n\nfunction validateIconComponentSizeByImageSize(\n  imageSize: number,\n  iconProp: IconProp,\n  selectorFn: SelectorFn,\n  logger: ReturnType<typeof warnOnce>,\n) {\n  const iconSize = getIconSizeByElement(iconProp.value);\n\n  if (iconSize === null) {\n    return;\n  }\n\n  const result = selectorFn(imageSize);\n\n  if (result === iconSize || (result === selectorFn.MAX_SIZE && iconSize >= result)) {\n    return;\n  }\n\n  const iconName = getElementDisplayName(iconProp.value);\n  const propMessage = iconName ? `${iconProp.name}={<${iconName} />}` : iconProp.name;\n\n  logger(\n    `Размер \\`${propMessage}\\` не соответствует дизайн-системе. Для \\`size={${imageSize}}\\` размер иконки для \\`${iconProp.name}\\` должен соответствовать <Icon${result}<name> />. Если такого размера нет, то используйте <${iconName} width={${result}} height={${result}} />`,\n    'log',\n  );\n}\n\nconst warnImageBase = warnOnce('ImageBase');\n\nexport function validateFallbackIcon(imageSize: number, iconProp: IconProp) {\n  return validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getFallbackIconSizeByImageBaseSize,\n    warnImageBase,\n  );\n}\n\nconst mapOfExpectedSize = new Set<number>(imageBaseSizes);\n\nconst arrayOfSizes = Object.keys(mapOfExpectedSize).map((str) => Number(str));\nconst maxSize = arrayOfSizes.reduce((maxSize, size) => (size > maxSize ? size : maxSize), 0);\n\nexport function validateSize(imageSize: number): void {\n  if (imageSize > maxSize || mapOfExpectedSize.has(imageSize)) {\n    return;\n  }\n  warnImageBase(\n    `\\`size={${imageSize}}\\` не соответствует дизайн-системе. Пожалуйста, используйте один из следующих вариантов: ${arrayOfSizes.join(\n      ' | ',\n    )}`,\n    'log',\n  );\n}\n\nconst warnImageBaseBadge = warnOnce('ImageBase.Badge');\n\nexport function validateBadgeIcon(imageSize: number, iconProp: IconProp): void {\n  if (imageSize < 24 && iconProp) {\n    return warnImageBaseBadge('Не используйте бейдж при `size < 24`.', 'log');\n  }\n  validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getBadgeIconSizeByImageBaseSize,\n    warnImageBaseBadge,\n  );\n}\n\nconst warnImageBaseOverlay = warnOnce('ImageBase.Overlay');\n\nexport function validateOverlayIcon(imageSize: number, iconProp: IconProp): void {\n  validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getOverlayIconSizeByImageBaseSize,\n    warnImageBaseOverlay,\n  );\n}\n"],"names":["warnOnce","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","imageBaseSizes","parseIconSizeByDisplayName","displayName","match","exec","Number","parseIconSizeByWidthProp","width","size","getElementDisplayName","element","type","getElementWidthProp","props","getIconSizeByElement","sizeByDisplayName","sizeByWidth","validateIconComponentSizeByImageSize","imageSize","iconProp","selectorFn","logger","iconSize","value","result","MAX_SIZE","iconName","propMessage","name","warnImageBase","validateFallbackIcon","mapOfExpectedSize","Set","arrayOfSizes","Object","keys","map","str","maxSize","reduce","validateSize","has","join","warnImageBaseBadge","validateBadgeIcon","warnImageBaseOverlay","validateOverlayIcon"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,qBAAqB;AAC9C,SACEC,+BAA+B,EAC/BC,kCAAkC,EAClCC,iCAAiC,QAC5B,YAAY;AACnB,SAASC,cAAc,QAAQ,UAAU;AAEzC;;;;;;;CAOC,GACD,SAASC,2BAA2BC,WAAoB;IACtD,IAAI,OAAOA,gBAAgB,UAAU;QACnC,OAAO;IACT;IAEA,MAAMC,QAAQ,YAAYC,IAAI,CAACF;IAE/B,OAAOC,QAAQE,OAAOF,KAAK,CAAC,EAAE,IAAI;AACpC;AAEA,SAASG,yBAAyBC,KAAc;IAC9C,IAAI,OAAOA,UAAU,YAAY,OAAOA,UAAU,UAAU;QAC1D,OAAO;IACT;IACA,MAAMC,OAAOH,OAAOE;IACpB,OAAOC,OAAO,IAAIA,OAAO;AAC3B;AAEA,SAASC,sBAAsBC,OAAoB;IACjD,OAAOA,QAAQC,IAAI,CAACT,WAAW,IAAI;AACrC;AAEA,SAASU,oBAAoBF,OAAoB;IAC/C,OAAOA,QAAQG,KAAK,CAACN,KAAK,IAAI;AAChC;AAEA,SAASO,qBAAqBJ,OAAoB;IAChD,MAAMK,oBAAoBd,2BAA2BQ,sBAAsBC;IAC3E,MAAMM,cAAcV,yBAAyBM,oBAAoBF;IACjE,OAAOM,cAAcA,cAAcD;AACrC;AAYA,SAASE,qCACPC,SAAiB,EACjBC,QAAkB,EAClBC,UAAsB,EACtBC,MAAmC;IAEnC,MAAMC,WAAWR,qBAAqBK,SAASI,KAAK;IAEpD,IAAID,aAAa,MAAM;QACrB;IACF;IAEA,MAAME,SAASJ,WAAWF;IAE1B,IAAIM,WAAWF,YAAaE,WAAWJ,WAAWK,QAAQ,IAAIH,YAAYE,QAAS;QACjF;IACF;IAEA,MAAME,WAAWjB,sBAAsBU,SAASI,KAAK;IACrD,MAAMI,cAAcD,WAAW,CAAC,EAAEP,SAASS,IAAI,CAAC,GAAG,EAAEF,SAAS,IAAI,CAAC,GAAGP,SAASS,IAAI;IAEnFP,OACE,CAAC,SAAS,EAAEM,YAAY,gDAAgD,EAAET,UAAU,wBAAwB,EAAEC,SAASS,IAAI,CAAC,+BAA+B,EAAEJ,OAAO,oDAAoD,EAAEE,SAAS,QAAQ,EAAEF,OAAO,UAAU,EAAEA,OAAO,IAAI,CAAC,EAC5Q;AAEJ;AAEA,MAAMK,gBAAgBjC,SAAS;AAE/B,OAAO,SAASkC,qBAAqBZ,SAAiB,EAAEC,QAAkB;IACxE,OAAOF,qCACLC,WACAC,UACArB,oCACA+B;AAEJ;AAEA,MAAME,oBAAoB,IAAIC,IAAYhC;AAE1C,MAAMiC,eAAeC,OAAOC,IAAI,CAACJ,mBAAmBK,GAAG,CAAC,CAACC,MAAQhC,OAAOgC;AACxE,MAAMC,UAAUL,aAAaM,MAAM,CAAC,CAACD,SAAS9B,OAAUA,OAAO8B,UAAU9B,OAAO8B,SAAU;AAE1F,OAAO,SAASE,aAAatB,SAAiB;IAC5C,IAAIA,YAAYoB,WAAWP,kBAAkBU,GAAG,CAACvB,YAAY;QAC3D;IACF;IACAW,cACE,CAAC,QAAQ,EAAEX,UAAU,0FAA0F,EAAEe,aAAaS,IAAI,CAChI,OACA,CAAC,EACH;AAEJ;AAEA,MAAMC,qBAAqB/C,SAAS;AAEpC,OAAO,SAASgD,kBAAkB1B,SAAiB,EAAEC,QAAkB;IACrE,IAAID,YAAY,MAAMC,UAAU;QAC9B,OAAOwB,mBAAmB,yCAAyC;IACrE;IACA1B,qCACEC,WACAC,UACAtB,iCACA8C;AAEJ;AAEA,MAAME,uBAAuBjD,SAAS;AAEtC,OAAO,SAASkD,oBAAoB5B,SAAiB,EAAEC,QAAkB;IACvEF,qCACEC,WACAC,UACApB,mCACA8C;AAEJ"}
+{"version":3,"sources":["../../../../src/components/ImageBase/validators.ts"],"sourcesContent":["import { warnOnce } from '../../lib/warnOnce';\nimport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\nimport { imageBaseSizes } from './types';\n\n/**\n * Пример,\n *\n * Icon28User -> 28\n * Icon12Circle1 -> 12\n * Icon12Circle2 -> 12\n * Icon20TextHeading1Outline -> 20\n */\nfunction parseIconSizeByDisplayName(displayName: unknown): number | null {\n  if (typeof displayName !== 'string') {\n    return null;\n  }\n\n  const match = /Icon(\\d+)/.exec(displayName);\n\n  return match ? Number(match[1]) : null;\n}\n\nfunction parseIconSizeByWidthProp(width: unknown): number | null {\n  if (typeof width !== 'string' && typeof width !== 'number') {\n    return null;\n  }\n  const size = Number(width);\n  return size > 0 ? size : null;\n}\n\nfunction getElementDisplayName(element: JSX.Element): string | null {\n  return element.type.displayName ?? null;\n}\n\nfunction getElementWidthProp(element: JSX.Element): number | string | null {\n  return element.props.width ?? null;\n}\n\nfunction getIconSizeByElement(element: JSX.Element): number | null {\n  const sizeByDisplayName = parseIconSizeByDisplayName(getElementDisplayName(element));\n  const sizeByWidth = parseIconSizeByWidthProp(getElementWidthProp(element));\n  return sizeByWidth ? sizeByWidth : sizeByDisplayName;\n}\n\ninterface IconProp {\n  name: string;\n  value: JSX.Element;\n}\n\ninterface SelectorFn {\n  (imageSize: number): number;\n  MAX_SIZE: number;\n}\n\nfunction validateIconComponentSizeByImageSize(\n  imageSize: number,\n  iconProp: IconProp,\n  selectorFn: SelectorFn,\n  logger: ReturnType<typeof warnOnce>,\n) {\n  const iconSize = getIconSizeByElement(iconProp.value);\n\n  if (iconSize === null) {\n    return;\n  }\n\n  const result = selectorFn(imageSize);\n\n  if (result === iconSize || (result === selectorFn.MAX_SIZE && iconSize >= result)) {\n    return;\n  }\n\n  const iconName = getElementDisplayName(iconProp.value);\n  const propMessage = iconName ? `${iconProp.name}={<${iconName} />}` : iconProp.name;\n\n  logger(\n    `Размер \\`${propMessage}\\` не соответствует дизайн-системе. Для \\`size={${imageSize}}\\` размер иконки для \\`${iconProp.name}\\` должен соответствовать <Icon${result}<name> />. Если такого размера нет, то используйте <${iconName} width={${result}} height={${result}} />`,\n    'log',\n  );\n}\n\nconst warnImageBase = warnOnce('ImageBase');\n\nexport function validateFallbackIcon(imageSize: number, iconProp: IconProp): void {\n  return validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getFallbackIconSizeByImageBaseSize,\n    warnImageBase,\n  );\n}\n\nconst mapOfExpectedSize = new Set<number>(imageBaseSizes);\n\nconst arrayOfSizes = Object.keys(mapOfExpectedSize).map((str) => Number(str));\nconst maxSize = arrayOfSizes.reduce((maxSize, size) => (size > maxSize ? size : maxSize), 0);\n\nexport function validateSize(imageSize: number): void {\n  if (imageSize > maxSize || mapOfExpectedSize.has(imageSize)) {\n    return;\n  }\n  warnImageBase(\n    `\\`size={${imageSize}}\\` не соответствует дизайн-системе. Пожалуйста, используйте один из следующих вариантов: ${arrayOfSizes.join(\n      ' | ',\n    )}`,\n    'log',\n  );\n}\n\nconst warnImageBaseBadge = warnOnce('ImageBase.Badge');\n\nexport function validateBadgeIcon(imageSize: number, iconProp: IconProp): void {\n  if (imageSize < 24 && iconProp) {\n    return warnImageBaseBadge('Не используйте бейдж при `size < 24`.', 'log');\n  }\n  validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getBadgeIconSizeByImageBaseSize,\n    warnImageBaseBadge,\n  );\n}\n\nconst warnImageBaseOverlay = warnOnce('ImageBase.Overlay');\n\nexport function validateOverlayIcon(imageSize: number, iconProp: IconProp): void {\n  validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getOverlayIconSizeByImageBaseSize,\n    warnImageBaseOverlay,\n  );\n}\n"],"names":["warnOnce","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","imageBaseSizes","parseIconSizeByDisplayName","displayName","match","exec","Number","parseIconSizeByWidthProp","width","size","getElementDisplayName","element","type","getElementWidthProp","props","getIconSizeByElement","sizeByDisplayName","sizeByWidth","validateIconComponentSizeByImageSize","imageSize","iconProp","selectorFn","logger","iconSize","value","result","MAX_SIZE","iconName","propMessage","name","warnImageBase","validateFallbackIcon","mapOfExpectedSize","Set","arrayOfSizes","Object","keys","map","str","maxSize","reduce","validateSize","has","join","warnImageBaseBadge","validateBadgeIcon","warnImageBaseOverlay","validateOverlayIcon"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,qBAAqB;AAC9C,SACEC,+BAA+B,EAC/BC,kCAAkC,EAClCC,iCAAiC,QAC5B,YAAY;AACnB,SAASC,cAAc,QAAQ,UAAU;AAEzC;;;;;;;CAOC,GACD,SAASC,2BAA2BC,WAAoB;IACtD,IAAI,OAAOA,gBAAgB,UAAU;QACnC,OAAO;IACT;IAEA,MAAMC,QAAQ,YAAYC,IAAI,CAACF;IAE/B,OAAOC,QAAQE,OAAOF,KAAK,CAAC,EAAE,IAAI;AACpC;AAEA,SAASG,yBAAyBC,KAAc;IAC9C,IAAI,OAAOA,UAAU,YAAY,OAAOA,UAAU,UAAU;QAC1D,OAAO;IACT;IACA,MAAMC,OAAOH,OAAOE;IACpB,OAAOC,OAAO,IAAIA,OAAO;AAC3B;AAEA,SAASC,sBAAsBC,OAAoB;IACjD,OAAOA,QAAQC,IAAI,CAACT,WAAW,IAAI;AACrC;AAEA,SAASU,oBAAoBF,OAAoB;IAC/C,OAAOA,QAAQG,KAAK,CAACN,KAAK,IAAI;AAChC;AAEA,SAASO,qBAAqBJ,OAAoB;IAChD,MAAMK,oBAAoBd,2BAA2BQ,sBAAsBC;IAC3E,MAAMM,cAAcV,yBAAyBM,oBAAoBF;IACjE,OAAOM,cAAcA,cAAcD;AACrC;AAYA,SAASE,qCACPC,SAAiB,EACjBC,QAAkB,EAClBC,UAAsB,EACtBC,MAAmC;IAEnC,MAAMC,WAAWR,qBAAqBK,SAASI,KAAK;IAEpD,IAAID,aAAa,MAAM;QACrB;IACF;IAEA,MAAME,SAASJ,WAAWF;IAE1B,IAAIM,WAAWF,YAAaE,WAAWJ,WAAWK,QAAQ,IAAIH,YAAYE,QAAS;QACjF;IACF;IAEA,MAAME,WAAWjB,sBAAsBU,SAASI,KAAK;IACrD,MAAMI,cAAcD,WAAW,CAAC,EAAEP,SAASS,IAAI,CAAC,GAAG,EAAEF,SAAS,IAAI,CAAC,GAAGP,SAASS,IAAI;IAEnFP,OACE,CAAC,SAAS,EAAEM,YAAY,gDAAgD,EAAET,UAAU,wBAAwB,EAAEC,SAASS,IAAI,CAAC,+BAA+B,EAAEJ,OAAO,oDAAoD,EAAEE,SAAS,QAAQ,EAAEF,OAAO,UAAU,EAAEA,OAAO,IAAI,CAAC,EAC5Q;AAEJ;AAEA,MAAMK,gBAAgBjC,SAAS;AAE/B,OAAO,SAASkC,qBAAqBZ,SAAiB,EAAEC,QAAkB;IACxE,OAAOF,qCACLC,WACAC,UACArB,oCACA+B;AAEJ;AAEA,MAAME,oBAAoB,IAAIC,IAAYhC;AAE1C,MAAMiC,eAAeC,OAAOC,IAAI,CAACJ,mBAAmBK,GAAG,CAAC,CAACC,MAAQhC,OAAOgC;AACxE,MAAMC,UAAUL,aAAaM,MAAM,CAAC,CAACD,SAAS9B,OAAUA,OAAO8B,UAAU9B,OAAO8B,SAAU;AAE1F,OAAO,SAASE,aAAatB,SAAiB;IAC5C,IAAIA,YAAYoB,WAAWP,kBAAkBU,GAAG,CAACvB,YAAY;QAC3D;IACF;IACAW,cACE,CAAC,QAAQ,EAAEX,UAAU,0FAA0F,EAAEe,aAAaS,IAAI,CAChI,OACA,CAAC,EACH;AAEJ;AAEA,MAAMC,qBAAqB/C,SAAS;AAEpC,OAAO,SAASgD,kBAAkB1B,SAAiB,EAAEC,QAAkB;IACrE,IAAID,YAAY,MAAMC,UAAU;QAC9B,OAAOwB,mBAAmB,yCAAyC;IACrE;IACA1B,qCACEC,WACAC,UACAtB,iCACA8C;AAEJ;AAEA,MAAME,uBAAuBjD,SAAS;AAEtC,OAAO,SAASkD,oBAAoB5B,SAAiB,EAAEC,QAAkB;IACvEF,qCACEC,WACAC,UACApB,mCACA8C;AAEJ"}

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

@@ -6,5 +6,5 @@ export interface InfoRowProps extends HTMLAttributesWithRootRef<HTMLDivElement>
 /**
  * @see https://vkcom.github.io/VKUI/#/InfoRow
  */
-export declare const InfoRow: ({ header, children, className, ...restProps }: InfoRowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InfoRow: ({ header, children, className, ...restProps }: InfoRowProps) => React.ReactNode;
 //# sourceMappingURL=InfoRow.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"InfoRow.d.ts","sourceRoot":"","sources":["../../../../src/components/InfoRow/InfoRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAMxD,MAAM,WAAW,YAAa,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC7E,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,kDAAmD,YAAY,4CAelF,CAAC"}
+{"version":3,"file":"InfoRow.d.ts","sourceRoot":"","sources":["../../../../src/components/InfoRow/InfoRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAMxD,MAAM,WAAW,YAAa,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC7E,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,kDAKjB,YAAY,KAAG,KAAK,CAAC,SAevB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/InfoRow/InfoRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './InfoRow.module.css';\n\nexport interface InfoRowProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  header: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/InfoRow\n */\nexport const InfoRow = ({ header, children, className, ...restProps }: InfoRowProps) => (\n  <Headline\n    {...restProps}\n    Component=\"span\"\n    className={classNames(styles['InfoRow'], className)}\n    weight=\"3\"\n  >\n    {hasReactNode(header) && (\n      <Subhead Component=\"strong\" className={styles['InfoRow__header']}>\n        {header}\n        <VisuallyHidden>&nbsp;</VisuallyHidden>\n      </Subhead>\n    )}\n    {children}\n  </Headline>\n);\n"],"names":["React","classNames","hasReactNode","Headline","Subhead","VisuallyHidden","styles","InfoRow","header","children","className","restProps","Component","weight"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,uBAAuB;AAM1C;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAAyB,iBACjF,MAACR;QACE,GAAGQ,SAAS;QACbC,WAAU;QACVF,WAAWT,WAAWK,MAAM,CAAC,UAAU,EAAEI;QACzCG,QAAO;;YAENX,aAAaM,yBACZ,MAACJ;gBAAQQ,WAAU;gBAASF,WAAWJ,MAAM,CAAC,kBAAkB;;oBAC7DE;kCACD,KAACH;kCAAe;;;;YAGnBI;;OAEH"}
+{"version":3,"sources":["../../../../src/components/InfoRow/InfoRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './InfoRow.module.css';\n\nexport interface InfoRowProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  header: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/InfoRow\n */\nexport const InfoRow = ({\n  header,\n  children,\n  className,\n  ...restProps\n}: InfoRowProps): React.ReactNode => (\n  <Headline\n    {...restProps}\n    Component=\"span\"\n    className={classNames(styles['InfoRow'], className)}\n    weight=\"3\"\n  >\n    {hasReactNode(header) && (\n      <Subhead Component=\"strong\" className={styles['InfoRow__header']}>\n        {header}\n        <VisuallyHidden>&nbsp;</VisuallyHidden>\n      </Subhead>\n    )}\n    {children}\n  </Headline>\n);\n"],"names":["React","classNames","hasReactNode","Headline","Subhead","VisuallyHidden","styles","InfoRow","header","children","className","restProps","Component","weight"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,uBAAuB;AAM1C;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EACtBC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACT,GAAGC,WACU,iBACb,MAACR;QACE,GAAGQ,SAAS;QACbC,WAAU;QACVF,WAAWT,WAAWK,MAAM,CAAC,UAAU,EAAEI;QACzCG,QAAO;;YAENX,aAAaM,yBACZ,MAACJ;gBAAQQ,WAAU;gBAASF,WAAWJ,MAAM,CAAC,kBAAkB;;oBAC7DE;kCACD,KAACH;kCAAe;;;;YAGnBI;;OAEH"}

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

@@ -6,5 +6,5 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>,
 /**
  * @see https://vkcom.github.io/VKUI/#/Input
  */
-export declare const Input: ({ type, align, getRef, className, getRootRef, style, before, after, status, mode, ...restProps }: InputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Input: ({ type, align, getRef, className, getRootRef, style, before, after, status, mode, ...restProps }: InputProps) => React.ReactNode;
 //# sourceMappingURL=Input.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AASnE,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,MAAM,CAAC,gBAAgB,CAAC,EACxB,UAAU,CAAC,cAAc,CAAC,EAC1B,QAAQ,EACR,cAAc;CAAG;AAErB;;GAEG;AACH,eAAO,MAAM,KAAK,qGAYf,UAAU,4CA+BZ,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AASnE,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,MAAM,CAAC,gBAAgB,CAAC,EACxB,UAAU,CAAC,cAAc,CAAC,EAC1B,QAAQ,EACR,cAAc;CAAG;AAErB;;GAEG;AACH,eAAO,MAAM,KAAK,qGAYf,UAAU,KAAG,KAAK,CAAC,SA+BrB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';\nimport styles from './Input.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Input--sizeY-none'],\n  ['compact']: styles['Input--sizeY-compact'],\n};\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign,\n    FormFieldProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Input\n */\nexport const Input = ({\n  type = 'text',\n  align = 'left',\n  getRef,\n  className,\n  getRootRef,\n  style,\n  before,\n  after,\n  status,\n  mode,\n  ...restProps\n}: InputProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(\n        styles['Input'],\n        align === 'right' && styles['Input--align-right'],\n        align === 'center' && styles['Input--align-center'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        before && styles['Input--hasBefore'],\n        after && styles['Input--hasAfter'],\n        className,\n      )}\n      getRootRef={getRootRef}\n      before={before}\n      after={after}\n      disabled={restProps.disabled}\n      mode={mode}\n      status={status}\n    >\n      <UnstyledTextField\n        {...restProps}\n        as=\"input\"\n        type={type}\n        className={styles['Input__el']}\n        getRootRef={getRef}\n      />\n    </FormField>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","FormField","UnstyledTextField","styles","sizeYClassNames","none","Input","type","align","getRef","className","getRootRef","style","before","after","status","mode","restProps","sizeY","disabled","as"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,iBAAiB,QAAQ,yCAAyC;AAC3E,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAAC,UAAU,EAAEA,MAAM,CAAC,uBAAuB;AAC7C;AASA;;CAEC,GACD,OAAO,MAAMG,QAAQ,CAAC,EACpBC,OAAO,MAAM,EACbC,QAAQ,MAAM,EACdC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,KAAK,EACLC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EACJ,GAAGC,WACQ;IACX,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGlB;IAE3B,qBACE,KAACC;QACCW,OAAOA;QACPF,WAAWX,WACTI,MAAM,CAAC,QAAQ,EACfK,UAAU,WAAWL,MAAM,CAAC,qBAAqB,EACjDK,UAAU,YAAYL,MAAM,CAAC,sBAAsB,EACnDe,UAAU,aAAad,eAAe,CAACc,MAAM,EAC7CL,UAAUV,MAAM,CAAC,mBAAmB,EACpCW,SAASX,MAAM,CAAC,kBAAkB,EAClCO;QAEFC,YAAYA;QACZE,QAAQA;QACRC,OAAOA;QACPK,UAAUF,UAAUE,QAAQ;QAC5BH,MAAMA;QACND,QAAQA;kBAER,cAAA,KAACb;YACE,GAAGe,SAAS;YACbG,IAAG;YACHb,MAAMA;YACNG,WAAWP,MAAM,CAAC,YAAY;YAC9BQ,YAAYF;;;AAIpB,EAAE"}
+{"version":3,"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';\nimport styles from './Input.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Input--sizeY-none'],\n  ['compact']: styles['Input--sizeY-compact'],\n};\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign,\n    FormFieldProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Input\n */\nexport const Input = ({\n  type = 'text',\n  align = 'left',\n  getRef,\n  className,\n  getRootRef,\n  style,\n  before,\n  after,\n  status,\n  mode,\n  ...restProps\n}: InputProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(\n        styles['Input'],\n        align === 'right' && styles['Input--align-right'],\n        align === 'center' && styles['Input--align-center'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        before && styles['Input--hasBefore'],\n        after && styles['Input--hasAfter'],\n        className,\n      )}\n      getRootRef={getRootRef}\n      before={before}\n      after={after}\n      disabled={restProps.disabled}\n      mode={mode}\n      status={status}\n    >\n      <UnstyledTextField\n        {...restProps}\n        as=\"input\"\n        type={type}\n        className={styles['Input__el']}\n        getRootRef={getRef}\n      />\n    </FormField>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","FormField","UnstyledTextField","styles","sizeYClassNames","none","Input","type","align","getRef","className","getRootRef","style","before","after","status","mode","restProps","sizeY","disabled","as"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,iBAAiB,QAAQ,yCAAyC;AAC3E,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAAC,UAAU,EAAEA,MAAM,CAAC,uBAAuB;AAC7C;AASA;;CAEC,GACD,OAAO,MAAMG,QAAQ,CAAC,EACpBC,OAAO,MAAM,EACbC,QAAQ,MAAM,EACdC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,KAAK,EACLC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EACJ,GAAGC,WACQ;IACX,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGlB;IAE3B,qBACE,KAACC;QACCW,OAAOA;QACPF,WAAWX,WACTI,MAAM,CAAC,QAAQ,EACfK,UAAU,WAAWL,MAAM,CAAC,qBAAqB,EACjDK,UAAU,YAAYL,MAAM,CAAC,sBAAsB,EACnDe,UAAU,aAAad,eAAe,CAACc,MAAM,EAC7CL,UAAUV,MAAM,CAAC,mBAAmB,EACpCW,SAASX,MAAM,CAAC,kBAAkB,EAClCO;QAEFC,YAAYA;QACZE,QAAQA;QACRC,OAAOA;QACPK,UAAUF,UAAUE,QAAQ;QAC5BH,MAAMA;QACND,QAAQA;kBAER,cAAA,KAACb;YACE,GAAGe,SAAS;YACbG,IAAG;YACHb,MAAMA;YACNG,WAAWP,MAAM,CAAC,YAAY;YAC9BQ,YAAYF;;;AAIpB,EAAE"}

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

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { type RootComponentProps } from '../RootComponent/RootComponent';
 export interface InputLikeProps extends RootComponentProps<HTMLSpanElement> {
     length: number;
@@ -6,8 +7,5 @@ export interface InputLikeProps extends RootComponentProps<HTMLSpanElement> {
     label?: string;
     onElementSelect?: (index: number) => void;
 }
-export declare const InputLike: {
-    ({ value, length, index, onElementSelect, onClick, onFocus, label, ...restProps }: InputLikeProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const InputLike: React.FC<InputLikeProps>;
 //# sourceMappingURL=InputLike.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputLike.d.ts","sourceRoot":"","sources":["../../../../src/components/InputLike/InputLike.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAIxF,MAAM,WAAW,cAAe,SAAQ,kBAAkB,CAAC,eAAe,CAAC;IACzE,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAgBD,eAAO,MAAM,SAAS;uFASnB,cAAc;;CA4BhB,CAAC"}
+{"version":3,"file":"InputLike.d.ts","sourceRoot":"","sources":["../../../../src/components/InputLike/InputLike.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAIxF,MAAM,WAAW,cAAe,SAAQ,kBAAkB,CAAC,eAAe,CAAC;IACzE,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAgBD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAqC9C,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/InputLike/InputLike.tsx"],"sourcesContent":["import * as React from 'react';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { stopPropagation } from '../../lib/utils';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './InputLike.module.css';\n\nexport interface InputLikeProps extends RootComponentProps<HTMLSpanElement> {\n  length: number;\n  index: number;\n  value?: string;\n  label?: string;\n  onElementSelect?: (index: number) => void;\n}\n\nconst MASK_SYMBOL = String.fromCharCode(0x2007);\n\nfunction getMaskElements(length: number) {\n  const result = [];\n  for (let index = 0; index < length; index += 1) {\n    result.push(\n      <span key={index} className={styles['InputLike__mask']}>\n        {MASK_SYMBOL}\n      </span>,\n    );\n  }\n  return result;\n}\n\nexport const InputLike = ({\n  value,\n  length,\n  index,\n  onElementSelect,\n  onClick,\n  onFocus,\n  label,\n  ...restProps\n}: InputLikeProps) => {\n  const handleElementSelect = React.useCallback(\n    (event: React.MouseEvent<HTMLSpanElement>) => {\n      stopPropagation(event);\n      onElementSelect?.(index);\n    },\n    [index, onElementSelect],\n  );\n\n  return (\n    <RootComponent\n      Component=\"span\"\n      baseClassName={value?.length === length ? styles['InputLike--full'] : undefined}\n      tabIndex={0}\n      onClick={callMultiple(onClick, handleElementSelect)}\n      onFocus={callMultiple(stopPropagation, onFocus)}\n      {...restProps}\n    >\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n      {value?.slice(0, length - 1)}\n      {value?.slice(length - 1) && (\n        <span key={index} className={styles['InputLike__last_character']}>\n          {value.slice(length - 1)}\n        </span>\n      )}\n      {getMaskElements(length - (value?.length ?? 0))}\n    </RootComponent>\n  );\n};\n\nInputLike.displayName = 'InputLike';\n"],"names":["React","callMultiple","stopPropagation","RootComponent","VisuallyHidden","styles","MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","span","className","InputLike","value","onElementSelect","onClick","onFocus","label","restProps","handleElementSelect","useCallback","event","Component","baseClassName","undefined","tabIndex","slice","displayName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,eAAe,QAAQ,kBAAkB;AAClD,SAASC,aAAa,QAAiC,iCAAiC;AACxF,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,yBAAyB;AAU5C,MAAMC,cAAcC,OAAOC,YAAY,CAAC;AAExC,SAASC,gBAAgBC,MAAc;IACrC,MAAMC,SAAS,EAAE;IACjB,IAAK,IAAIC,QAAQ,GAAGA,QAAQF,QAAQE,SAAS,EAAG;QAC9CD,OAAOE,IAAI,eACT,KAACC;YAAiBC,WAAWV,MAAM,CAAC,kBAAkB;sBACnDC;WADQM;IAIf;IACA,OAAOD;AACT;AAEA,OAAO,MAAMK,YAAY,CAAC,EACxBC,KAAK,EACLP,MAAM,EACNE,KAAK,EACLM,eAAe,EACfC,OAAO,EACPC,OAAO,EACPC,KAAK,EACL,GAAGC,WACY;IACf,MAAMC,sBAAsBvB,MAAMwB,WAAW,CAC3C,CAACC;QACCvB,gBAAgBuB;QAChBP,kBAAkBN;IACpB,GACA;QAACA;QAAOM;KAAgB;IAG1B,qBACE,MAACf;QACCuB,WAAU;QACVC,eAAeV,OAAOP,WAAWA,SAASL,MAAM,CAAC,kBAAkB,GAAGuB;QACtEC,UAAU;QACVV,SAASlB,aAAakB,SAASI;QAC/BH,SAASnB,aAAaC,iBAAiBkB;QACtC,GAAGE,SAAS;;YAEZD,uBAAS,KAACjB;0BAAgBiB;;YAC1BJ,OAAOa,MAAM,GAAGpB,SAAS;YACzBO,OAAOa,MAAMpB,SAAS,oBACrB,KAACI;gBAAiBC,WAAWV,MAAM,CAAC,4BAA4B;0BAC7DY,MAAMa,KAAK,CAACpB,SAAS;eADbE;YAIZH,gBAAgBC,SAAUO,CAAAA,OAAOP,UAAU,CAAA;;;AAGlD,EAAE;AAEFM,UAAUe,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/InputLike/InputLike.tsx"],"sourcesContent":["import * as React from 'react';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { stopPropagation } from '../../lib/utils';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './InputLike.module.css';\n\nexport interface InputLikeProps extends RootComponentProps<HTMLSpanElement> {\n  length: number;\n  index: number;\n  value?: string;\n  label?: string;\n  onElementSelect?: (index: number) => void;\n}\n\nconst MASK_SYMBOL = String.fromCharCode(0x2007);\n\nfunction getMaskElements(length: number) {\n  const result = [];\n  for (let index = 0; index < length; index += 1) {\n    result.push(\n      <span key={index} className={styles['InputLike__mask']}>\n        {MASK_SYMBOL}\n      </span>,\n    );\n  }\n  return result;\n}\n\nexport const InputLike: React.FC<InputLikeProps> = ({\n  value,\n  length,\n  index,\n  onElementSelect,\n  onClick,\n  onFocus,\n  label,\n  ...restProps\n}: InputLikeProps) => {\n  const handleElementSelect = React.useCallback(\n    (event: React.MouseEvent<HTMLSpanElement>) => {\n      stopPropagation(event);\n      onElementSelect?.(index);\n    },\n    [index, onElementSelect],\n  );\n\n  return (\n    <RootComponent\n      Component=\"span\"\n      baseClassName={value?.length === length ? styles['InputLike--full'] : undefined}\n      tabIndex={0}\n      onClick={callMultiple(onClick, handleElementSelect)}\n      onFocus={callMultiple(stopPropagation, onFocus)}\n      {...restProps}\n    >\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n      {value?.slice(0, length - 1)}\n      {value?.slice(length - 1) && (\n        <span key={index} className={styles['InputLike__last_character']}>\n          {value.slice(length - 1)}\n        </span>\n      )}\n      {getMaskElements(length - (value?.length ?? 0))}\n    </RootComponent>\n  );\n};\n\nInputLike.displayName = 'InputLike';\n"],"names":["React","callMultiple","stopPropagation","RootComponent","VisuallyHidden","styles","MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","span","className","InputLike","value","onElementSelect","onClick","onFocus","label","restProps","handleElementSelect","useCallback","event","Component","baseClassName","undefined","tabIndex","slice","displayName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,eAAe,QAAQ,kBAAkB;AAClD,SAASC,aAAa,QAAiC,iCAAiC;AACxF,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,yBAAyB;AAU5C,MAAMC,cAAcC,OAAOC,YAAY,CAAC;AAExC,SAASC,gBAAgBC,MAAc;IACrC,MAAMC,SAAS,EAAE;IACjB,IAAK,IAAIC,QAAQ,GAAGA,QAAQF,QAAQE,SAAS,EAAG;QAC9CD,OAAOE,IAAI,eACT,KAACC;YAAiBC,WAAWV,MAAM,CAAC,kBAAkB;sBACnDC;WADQM;IAIf;IACA,OAAOD;AACT;AAEA,OAAO,MAAMK,YAAsC,CAAC,EAClDC,KAAK,EACLP,MAAM,EACNE,KAAK,EACLM,eAAe,EACfC,OAAO,EACPC,OAAO,EACPC,KAAK,EACL,GAAGC,WACY;IACf,MAAMC,sBAAsBvB,MAAMwB,WAAW,CAC3C,CAACC;QACCvB,gBAAgBuB;QAChBP,kBAAkBN;IACpB,GACA;QAACA;QAAOM;KAAgB;IAG1B,qBACE,MAACf;QACCuB,WAAU;QACVC,eAAeV,OAAOP,WAAWA,SAASL,MAAM,CAAC,kBAAkB,GAAGuB;QACtEC,UAAU;QACVV,SAASlB,aAAakB,SAASI;QAC/BH,SAASnB,aAAaC,iBAAiBkB;QACtC,GAAGE,SAAS;;YAEZD,uBAAS,KAACjB;0BAAgBiB;;YAC1BJ,OAAOa,MAAM,GAAGpB,SAAS;YACzBO,OAAOa,MAAMpB,SAAS,oBACrB,KAACI;gBAAiBC,WAAWV,MAAM,CAAC,4BAA4B;0BAC7DY,MAAMa,KAAK,CAACpB,SAAS;eADbE;YAIZH,gBAAgBC,SAAUO,CAAAA,OAAOP,UAAU,CAAA;;;AAGlD,EAAE;AAEFM,UAAUe,WAAW,GAAG"}

package/dist/cssm/components/InputLike/InputLikeDivider.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-export declare const InputLikeDivider: ({ children, className, ...props }: React.InputHTMLAttributes<HTMLSpanElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const InputLikeDivider: ({ children, className, ...props }: React.InputHTMLAttributes<HTMLSpanElement>) => React.ReactNode;
 //# sourceMappingURL=InputLikeDivider.d.ts.map