@vkontakte/vkui 5.4.3 → 5.5.1

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasChildren } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport styles from './IconButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles['IconButton--sizeY-none'],\n  [SizeType.COMPACT]: styles['IconButton--sizeY-compact'],\n};\n\nexport interface IconButtonProps extends TappableProps, HasChildren {}\n\nconst warn = warnOnce('IconButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/IconButton\n */\nexport const IconButton = ({ children, className, ...restProps }: IconButtonProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  if (process.env.NODE_ENV === 'development') {\n    const isAccessible = restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      activeEffectDelay={200}\n      activeMode=\"background\"\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      className={classNames(\n        styles['IconButton'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        platform === Platform.IOS && styles['IconButton--ios'],\n        className,\n      )}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","usePlatform","SizeType","Platform","COMMON_WARNINGS","warnOnce","Tappable","styles","sizeYClassNames","none","COMPACT","warn","IconButton","children","className","restProps","platform","sizeY","process","env","NODE_ENV","isAccessible","a11y","href","activeEffectDelay","activeMode","Component","REGULAR","IOS"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,eAAe,EAAEC,QAAQ,QAAQ,qBAAqB;AAE/D,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,yBAAyB;IACtC,CAACL,SAASQ,OAAO,CAAC,EAAEH,MAAM,CAAC,4BAA4B;AACzD;AAIA,MAAMI,OAAON,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMO,aAAa,CAAC,EAAEC,SAAQ,EAAEC,UAAS,EAAE,GAAGC,WAA4B,GAAK;IACpF,MAAMC,WAAWf;IACjB,MAAM,EAAEgB,OAAQ,OAAM,EAAE,GAAGjB;IAE3B,IAAIkB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,eAAeN,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAE5E,IAAI,CAACM,cAAc;YACjBV,KAAKP,gBAAgBkB,IAAI,CAACP,UAAUQ,IAAI,GAAG,cAAc,aAAa,CAAC,EAAE;QAC3E,CAAC;IACH,CAAC;IAED,qBACE,oBAACjB;QACCkB,mBAAmB;QACnBC,YAAW;QACXC,WAAWX,UAAUQ,IAAI,GAAG,MAAM,QAAQ;QACzC,GAAGR,SAAS;QACbD,WAAWf,WACTQ,MAAM,CAAC,aAAa,EACpBU,UAAUf,SAASyB,OAAO,IAAInB,eAAe,CAACS,MAAM,EACpDD,aAAab,SAASyB,GAAG,IAAIrB,MAAM,CAAC,kBAAkB,EACtDO;OAGDD;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasChildren } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport styles from './IconButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles['IconButton--sizeY-none'],\n  [SizeType.COMPACT]: styles['IconButton--sizeY-compact'],\n};\n\nexport interface IconButtonProps extends TappableProps, HasChildren {}\n\nconst warn = warnOnce('IconButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/IconButton\n */\nexport const IconButton = ({ children, className, ...restProps }: IconButtonProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  if (process.env.NODE_ENV === 'development') {\n    const isAccessible = restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      activeEffectDelay={200}\n      activeMode=\"background\"\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      className={classNames(\n        styles['IconButton'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        platform === Platform.IOS && styles['IconButton--ios'],\n        className,\n      )}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","usePlatform","SizeType","Platform","COMMON_WARNINGS","warnOnce","Tappable","styles","sizeYClassNames","none","COMPACT","warn","IconButton","children","className","restProps","platform","sizeY","process","env","NODE_ENV","isAccessible","a11y","href","activeEffectDelay","activeMode","Component","REGULAR","IOS"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,eAAe,EAAEC,QAAQ,QAAQ,qBAAqB;AAE/D,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,yBAAyB;IACtC,CAACL,SAASQ,QAAQ,EAAEH,MAAM,CAAC,4BAA4B;AACzD;AAIA,MAAMI,OAAON,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMO,aAAa,CAAC,EAAEC,SAAQ,EAAEC,UAAS,EAAE,GAAGC,WAA4B;IAC/E,MAAMC,WAAWf;IACjB,MAAM,EAAEgB,OAAQ,OAAM,EAAE,GAAGjB;IAE3B,IAAIkB,QAAQC,IAAIC,aAAa,eAAe;QAC1C,MAAMC,eAAeN,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAE5E,IAAI,CAACM,cAAc;YACjBV,KAAKP,gBAAgBkB,IAAI,CAACP,UAAUQ,OAAO,cAAc,cAAc,EAAE;QAC3E;IACF;IAEA,qBACE,oBAACjB;QACCkB,mBAAmB;QACnBC,YAAW;QACXC,WAAWX,UAAUQ,OAAO,MAAM;QACjC,GAAGR,SAAS;QACbD,WAAWf,WACTQ,MAAM,CAAC,aAAa,EACpBU,UAAUf,SAASyB,WAAWnB,eAAe,CAACS,MAAM,EACpDD,aAAab,SAASyB,OAAOrB,MAAM,CAAC,kBAAkB,EACtDO;OAGDD;AAGP,EAAE"}

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

@@ -3,7 +3,7 @@
      -moz-appearance: none;
           appearance: none;
   background: none;
-  border: none;
+  border: 0;
   box-shadow: none;
   display: block;
   color: currentColor;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';
 import { type ImageBadgeProps } from './ImageBadge/ImageBadge';
 export type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };
@@ -13,7 +13,7 @@ export interface ImageProps extends Omit<ImageBaseProps, 'badge'> {
  * @see https://vkcom.github.io/VKUI/#/Image
  */
 export declare const Image: {
-    ({ size, borderRadius: borderRadiusProp, style, className, ...restProps }: ImageProps): JSX.Element;
-    Badge: ({ className, ...restProps }: import("../ImageBase/ImageBase").ImageBaseBadgeProps) => JSX.Element;
-    Overlay: ({ className, theme: themeProp, visibility: visibilityProp, children, onClick, ...restProps }: ImageBaseOverlayProps) => JSX.Element;
+    ({ size, borderRadius: borderRadiusProp, style, className, ...restProps }: ImageProps): React.JSX.Element;
+    Badge: ({ className, ...restProps }: import("../ImageBase/ImageBase").ImageBaseBadgeProps) => React.JSX.Element;
+    Overlay: ({ className, theme: themeProp, visibility: visibilityProp, children, onClick, ...restProps }: ImageBaseOverlayProps) => React.JSX.Element;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { ImageBadge, type ImageBadgeProps } from './ImageBadge/ImageBadge';\n\nexport type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };\n\nexport const IMAGE_DEFAULT_SIZE = 48;\n\nexport interface ImageProps extends Omit<ImageBaseProps, 'badge'> {\n  /**\n   * Размер закругления.\n   */\n  borderRadius?: 's' | 'l' | 'm';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Image\n */\nexport const Image = ({\n  size = IMAGE_DEFAULT_SIZE,\n  borderRadius: borderRadiusProp = 'm',\n  style,\n  className,\n  ...restProps\n}: ImageProps) => {\n  let borderRadius: number;\n\n  switch (borderRadiusProp) {\n    case 's': {\n      if (size <= 32) {\n        borderRadius = 2;\n      } else if (size <= 56) {\n        borderRadius = 3;\n      }\n      borderRadius = 4;\n      break;\n    }\n    case 'm': {\n      if (size <= 32) {\n        borderRadius = 3;\n      } else if (size <= 48) {\n        borderRadius = 4;\n      } else if (size <= 72) {\n        borderRadius = 6;\n      } else if (size <= 80) {\n        borderRadius = 8;\n      }\n      borderRadius = 10;\n      break;\n    }\n    case 'l': {\n      if (size <= 16) {\n        borderRadius = 4;\n      } else if (size <= 20) {\n        borderRadius = 5;\n      } else if (size <= 32) {\n        borderRadius = 6;\n      } else if (size <= 40) {\n        borderRadius = 8;\n      } else if (size <= 48) {\n        borderRadius = 10;\n      } else if (size <= 56) {\n        borderRadius = 12;\n      } else if (size <= 64) {\n        borderRadius = 14;\n      }\n      borderRadius = 16;\n    }\n  }\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      style={{ ...style, borderRadius }}\n      className={className}\n    />\n  );\n};\n\nImage.Badge = ImageBadge;\n\nImage.Overlay = ImageBase.Overlay;\n"],"names":["React","ImageBase","ImageBadge","IMAGE_DEFAULT_SIZE","Image","size","borderRadius","borderRadiusProp","style","className","restProps","Badge","Overlay"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,SAAS,QAAyD,yBAAyB;AACpG,SAASC,UAAU,QAA8B,0BAA0B;AAI3E,OAAO,MAAMC,qBAAqB,GAAG;AASrC;;CAEC,GACD,OAAO,MAAMC,QAAQ,CAAC,EACpBC,MAAOF,mBAAkB,EACzBG,cAAcC,mBAAmB,GAAG,CAAA,EACpCC,MAAK,EACLC,UAAS,EACT,GAAGC,WACQ,GAAK;IAChB,IAAIJ;IAEJ,OAAQC;QACN,KAAK;YAAK;gBACR,IAAIF,QAAQ,IAAI;oBACdC,eAAe;gBACjB,OAAO,IAAID,QAAQ,IAAI;oBACrBC,eAAe;gBACjB,CAAC;gBACDA,eAAe;gBACf,KAAM;YACR;QACA,KAAK;YAAK;gBACR,IAAID,QAAQ,IAAI;oBACdC,eAAe;gBACjB,OAAO,IAAID,QAAQ,IAAI;oBACrBC,eAAe;gBACjB,OAAO,IAAID,QAAQ,IAAI;oBACrBC,eAAe;gBACjB,OAAO,IAAID,QAAQ,IAAI;oBACrBC,eAAe;gBACjB,CAAC;gBACDA,eAAe;gBACf,KAAM;YACR;QACA,KAAK;YAAK;gBACR,IAAID,QAAQ,IAAI;oBACdC,eAAe;gBACjB,OAAO,IAAID,QAAQ,IAAI;oBACrBC,eAAe;gBACjB,OAAO,IAAID,QAAQ,IAAI;oBACrBC,eAAe;gBACjB,OAAO,IAAID,QAAQ,IAAI;oBACrBC,eAAe;gBACjB,OAAO,IAAID,QAAQ,IAAI;oBACrBC,eAAe;gBACjB,OAAO,IAAID,QAAQ,IAAI;oBACrBC,eAAe;gBACjB,OAAO,IAAID,QAAQ,IAAI;oBACrBC,eAAe;gBACjB,CAAC;gBACDA,eAAe;YACjB;IACF;IAEA,qBACE,oBAACL;QACE,GAAGS,SAAS;QACbL,MAAMA;QACNG,OAAO;YAAE,GAAGA,KAAK;YAAEF;QAAa;QAChCG,WAAWA;;AAGjB,EAAE;AAEFL,MAAMO,KAAK,GAAGT;AAEdE,MAAMQ,OAAO,GAAGX,UAAUW,OAAO"}
+{"version":3,"sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { ImageBadge, type ImageBadgeProps } from './ImageBadge/ImageBadge';\n\nexport type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };\n\nexport const IMAGE_DEFAULT_SIZE = 48;\n\nexport interface ImageProps extends Omit<ImageBaseProps, 'badge'> {\n  /**\n   * Размер закругления.\n   */\n  borderRadius?: 's' | 'l' | 'm';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Image\n */\nexport const Image = ({\n  size = IMAGE_DEFAULT_SIZE,\n  borderRadius: borderRadiusProp = 'm',\n  style,\n  className,\n  ...restProps\n}: ImageProps) => {\n  let borderRadius: number;\n\n  switch (borderRadiusProp) {\n    case 's': {\n      if (size <= 32) {\n        borderRadius = 2;\n      } else if (size <= 56) {\n        borderRadius = 3;\n      }\n      borderRadius = 4;\n      break;\n    }\n    case 'm': {\n      if (size <= 32) {\n        borderRadius = 3;\n      } else if (size <= 48) {\n        borderRadius = 4;\n      } else if (size <= 72) {\n        borderRadius = 6;\n      } else if (size <= 80) {\n        borderRadius = 8;\n      }\n      borderRadius = 10;\n      break;\n    }\n    case 'l': {\n      if (size <= 16) {\n        borderRadius = 4;\n      } else if (size <= 20) {\n        borderRadius = 5;\n      } else if (size <= 32) {\n        borderRadius = 6;\n      } else if (size <= 40) {\n        borderRadius = 8;\n      } else if (size <= 48) {\n        borderRadius = 10;\n      } else if (size <= 56) {\n        borderRadius = 12;\n      } else if (size <= 64) {\n        borderRadius = 14;\n      }\n      borderRadius = 16;\n    }\n  }\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      style={{ ...style, borderRadius }}\n      className={className}\n    />\n  );\n};\n\nImage.Badge = ImageBadge;\n\nImage.Overlay = ImageBase.Overlay;\n"],"names":["React","ImageBase","ImageBadge","IMAGE_DEFAULT_SIZE","Image","size","borderRadius","borderRadiusProp","style","className","restProps","Badge","Overlay"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,SAAS,QAAyD,yBAAyB;AACpG,SAASC,UAAU,QAA8B,0BAA0B;AAI3E,OAAO,MAAMC,qBAAqB,GAAG;AASrC;;CAEC,GACD,OAAO,MAAMC,QAAQ,CAAC,EACpBC,MAAOF,mBAAkB,EACzBG,cAAcC,mBAAmB,GAAG,CAAA,EACpCC,MAAK,EACLC,UAAS,EACT,GAAGC,WACQ;IACX,IAAIJ;IAEJ,OAAQC;QACN,KAAK;YAAK;gBACR,IAAIF,QAAQ,IAAI;oBACdC,eAAe;gBACjB,OAAO,IAAID,QAAQ,IAAI;oBACrBC,eAAe;gBACjB;gBACAA,eAAe;gBACf;YACF;QACA,KAAK;YAAK;gBACR,IAAID,QAAQ,IAAI;oBACdC,eAAe;gBACjB,OAAO,IAAID,QAAQ,IAAI;oBACrBC,eAAe;gBACjB,OAAO,IAAID,QAAQ,IAAI;oBACrBC,eAAe;gBACjB,OAAO,IAAID,QAAQ,IAAI;oBACrBC,eAAe;gBACjB;gBACAA,eAAe;gBACf;YACF;QACA,KAAK;YAAK;gBACR,IAAID,QAAQ,IAAI;oBACdC,eAAe;gBACjB,OAAO,IAAID,QAAQ,IAAI;oBACrBC,eAAe;gBACjB,OAAO,IAAID,QAAQ,IAAI;oBACrBC,eAAe;gBACjB,OAAO,IAAID,QAAQ,IAAI;oBACrBC,eAAe;gBACjB,OAAO,IAAID,QAAQ,IAAI;oBACrBC,eAAe;gBACjB,OAAO,IAAID,QAAQ,IAAI;oBACrBC,eAAe;gBACjB,OAAO,IAAID,QAAQ,IAAI;oBACrBC,eAAe;gBACjB;gBACAA,eAAe;YACjB;IACF;IAEA,qBACE,oBAACL;QACE,GAAGS,SAAS;QACbL,MAAMA;QACNG,OAAO;YAAE,GAAGA,KAAK;YAAEF;QAAa;QAChCG,WAAWA;;AAGjB,EAAE;AAEFL,MAAMO,QAAQT;AAEdE,MAAMQ,UAAUX,UAAUW"}

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { type ImageBaseBadgeProps } from '../../ImageBase/ImageBase';
 export type ImageBadgeProps = ImageBaseBadgeProps;
-export declare const ImageBadge: ({ className, ...restProps }: ImageBadgeProps) => JSX.Element;
+export declare const ImageBadge: ({ className, ...restProps }: ImageBadgeProps) => React.JSX.Element;

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

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

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

@@ -39,7 +39,7 @@ export interface ImageBaseProps extends React.ImgHTMLAttributes<HTMLElement>, Ha
  * @see https://vkcom.github.io/VKUI/#/ImageBase
  */
 export declare const ImageBase: {
-    ({ alt, crossOrigin, decoding, loading, referrerPolicy, sizes, src, srcSet, useMap, getRef, size, width, height, style, className, getRootRef, withBorder, "fallbackIcon": fallbackIconProp, children, "aria-label": ariaLabel, onClick, onLoad, onError, ...restProps }: ImageBaseProps): JSX.Element;
-    Badge: ({ background, children, className, ...restProps }: ImageBaseBadgeProps) => JSX.Element;
-    Overlay: ({ className, theme: themeProp, visibility: visibilityProp, children, onClick, ...restProps }: ImageBaseOverlayProps) => JSX.Element;
+    ({ alt, crossOrigin, decoding, loading, referrerPolicy, sizes, src, srcSet, useMap, getRef, size, width, height, style, className, getRootRef, withBorder, "fallbackIcon": fallbackIconProp, children, "aria-label": ariaLabel, onClick, onLoad, onError, ...restProps }: ImageBaseProps): React.JSX.Element;
+    Badge: ({ background, children, className, ...restProps }: ImageBaseBadgeProps) => React.JSX.Element;
+    Overlay: ({ className, theme: themeProp, visibility: visibilityProp, children, onClick, ...restProps }: ImageBaseOverlayProps) => React.JSX.Element;
 };

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 type { HasRef, HasRootRef } from '../../types';\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\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\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?: ImageBaseSize | number;\n  /**\n   * Включает или отключает обводку.\n   */\n  withBorder?: 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/**\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  getRef,\n  size = 24,\n  width,\n  height,\n  style,\n  className,\n  getRootRef,\n  withBorder = true,\n  'fallbackIcon': fallbackIconProp,\n  children,\n  'aria-label': ariaLabel,\n  onClick,\n  onLoad,\n  onError,\n  ...restProps\n}: ImageBaseProps) => {\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    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 sizeClassName = (() => {\n    switch (size) {\n      case 28:\n        return styles['ImageBase--size-28'];\n      case 32:\n        return styles['ImageBase--size-32'];\n      case 40:\n        return styles['ImageBase--size-40'];\n      case 48:\n        return styles['ImageBase--size-48'];\n      case 72:\n        return styles['ImageBase--size-72'];\n    }\n\n    return null;\n  })();\n\n  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <div\n        {...restProps}\n        ref={getRootRef}\n        style={{ ...style, width: size, height: size }}\n        className={classNames(\n          className,\n          styles['ImageBase'],\n          sizeClassName,\n          loaded && styles['ImageBase--loaded'],\n        )}\n        role={hasSrc ? 'img' : 'presentation'}\n        aria-label={ariaLabel}\n        onClick={onClick}\n      >\n        {hasSrc && (\n          <img\n            ref={getRef}\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={width}\n            height={height}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n          />\n        )}\n        {fallbackIcon && (\n          <div className={classNames(styles['ImageBase__fallback'])}>{fallbackIcon}</div>\n        )}\n        {children}\n        {withBorder && <div aria-hidden className={styles['ImageBase__border']} />}\n      </div>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.Badge = ImageBaseBadge;\n\nImageBase.Overlay = ImageBaseOverlay;\n"],"names":["React","classNames","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","styles","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","getRef","size","width","height","style","className","getRootRef","withBorder","fallbackIconProp","children","ariaLabel","onClick","onLoad","onError","restProps","loaded","setLoaded","useState","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","fallbackIcon","process","env","NODE_ENV","name","value","handleImageLoad","event","handleImageError","sizeClassName","Provider","div","ref","role","aria-label","img","aria-hidden","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 type { HasRef, HasRootRef } from '../../types';\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\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\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?: ImageBaseSize | number;\n  /**\n   * Включает или отключает обводку.\n   */\n  withBorder?: 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/**\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  getRef,\n  size = 24,\n  width,\n  height,\n  style,\n  className,\n  getRootRef,\n  withBorder = true,\n  'fallbackIcon': fallbackIconProp,\n  children,\n  'aria-label': ariaLabel,\n  onClick,\n  onLoad,\n  onError,\n  ...restProps\n}: ImageBaseProps) => {\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    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 sizeClassName = (() => {\n    switch (size) {\n      case 28:\n        return styles['ImageBase--size-28'];\n      case 32:\n        return styles['ImageBase--size-32'];\n      case 40:\n        return styles['ImageBase--size-40'];\n      case 48:\n        return styles['ImageBase--size-48'];\n      case 72:\n        return styles['ImageBase--size-72'];\n    }\n\n    return null;\n  })();\n\n  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <div\n        {...restProps}\n        ref={getRootRef}\n        style={{ ...style, width: size, height: size }}\n        className={classNames(\n          className,\n          styles['ImageBase'],\n          sizeClassName,\n          loaded && styles['ImageBase--loaded'],\n        )}\n        role={hasSrc ? 'img' : 'presentation'}\n        aria-label={ariaLabel}\n        onClick={onClick}\n      >\n        {hasSrc && (\n          <img\n            ref={getRef}\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={width}\n            height={height}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n          />\n        )}\n        {fallbackIcon && (\n          <div className={classNames(styles['ImageBase__fallback'])}>{fallbackIcon}</div>\n        )}\n        {children}\n        {withBorder && <div aria-hidden className={styles['ImageBase__border']} />}\n      </div>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.Badge = ImageBaseBadge;\n\nImageBase.Overlay = ImageBaseOverlay;\n"],"names":["React","classNames","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","styles","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","getRef","size","width","height","style","className","getRootRef","withBorder","fallbackIconProp","children","ariaLabel","onClick","onLoad","onError","restProps","loaded","setLoaded","useState","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","fallbackIcon","process","env","NODE_ENV","name","value","handleImageLoad","event","handleImageError","sizeClassName","Provider","div","ref","role","aria-label","img","aria-hidden","Badge","Overlay"],"mappings":"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"}

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

@@ -32,7 +32,7 @@
   display: block;
   width: 100%;
   height: 100%;
-  border: none;
+  border: 0;
   border-radius: inherit;
   object-fit: cover;
   visibility: hidden;

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

@@ -27,4 +27,4 @@ export interface ImageBaseBadgeProps extends React.AriaAttributes {
  *
  * > Не используйте при `size < 24`
  */
-export declare const ImageBaseBadge: ({ background, children, className, ...restProps }: ImageBaseBadgeProps) => JSX.Element;
+export declare const ImageBaseBadge: ({ background, children, className, ...restProps }: ImageBaseBadgeProps) => React.JSX.Element;

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 { 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 React.AriaAttributes {\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  className?: string;\n}\n\n/**\n * Бейдж в правом нижнем углу компонента.\n *\n * > Не используйте при `size < 24`\n */\nexport const ImageBaseBadge = ({\n  background = 'shadow',\n  children,\n  className,\n  ...restProps\n}: ImageBaseBadgeProps) => {\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      validateBadgeIcon(size, { name: 'children', value: children });\n    }\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(styles['ImageBaseBadge'], backgroundStyles[background], className)}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","ImageBaseContext","validateBadgeIcon","styles","backgroundStyles","stroke","shadow","ImageBaseBadge","background","children","className","restProps","process","env","NODE_ENV","size","useContext","name","value","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,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;AAyBA;;;;CAIC,GACD,OAAO,MAAMI,iBAAiB,CAAC,EAC7BC,YAAa,SAAQ,EACrBC,SAAQ,EACRC,UAAS,EACT,GAAGC,WACiB,GAAK;IACzB,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIL,UAAU;YACZ,sDAAsD;YACtD,MAAM,EAAEM,KAAI,EAAE,GAAGhB,MAAMiB,UAAU,CAACf;YAClCC,kBAAkBa,MAAM;gBAAEE,MAAM;gBAAYC,OAAOT;YAAS;QAC9D,CAAC;IACH,CAAC;IAED,qBACE,oBAACU;QACE,GAAGR,SAAS;QACbD,WAAWV,WAAWG,MAAM,CAAC,iBAAiB,EAAEC,gBAAgB,CAACI,WAAW,EAAEE;OAE7ED;AAGP,EAAE"}
+{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\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 React.AriaAttributes {\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  className?: string;\n}\n\n/**\n * Бейдж в правом нижнем углу компонента.\n *\n * > Не используйте при `size < 24`\n */\nexport const ImageBaseBadge = ({\n  background = 'shadow',\n  children,\n  className,\n  ...restProps\n}: ImageBaseBadgeProps) => {\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      validateBadgeIcon(size, { name: 'children', value: children });\n    }\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(styles['ImageBaseBadge'], backgroundStyles[background], className)}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","ImageBaseContext","validateBadgeIcon","styles","backgroundStyles","stroke","shadow","ImageBaseBadge","background","children","className","restProps","process","env","NODE_ENV","size","useContext","name","value","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,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;AAyBA;;;;CAIC,GACD,OAAO,MAAMI,iBAAiB,CAAC,EAC7BC,YAAa,SAAQ,EACrBC,SAAQ,EACRC,UAAS,EACT,GAAGC,WACiB;IACpB,IAAIC,QAAQC,IAAIC,aAAa,eAAe;QAC1C,IAAIL,UAAU;YACZ,sDAAsD;YACtD,MAAM,EAAEM,KAAI,EAAE,GAAGhB,MAAMiB,WAAWf;YAClCC,kBAAkBa,MAAM;gBAAEE,MAAM;gBAAYC,OAAOT;YAAS;QAC9D;IACF;IAEA,qBACE,oBAACU;QACE,GAAGR,SAAS;QACbD,WAAWV,WAAWG,MAAM,CAAC,iBAAiB,EAAEC,gBAAgB,CAACI,WAAW,EAAEE;OAE7ED;AAGP,EAAE"}

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

@@ -35,4 +35,4 @@ export interface ImageBaseOverlayProps extends React.AriaAttributes {
 /**
  * Интерактивный оверлей над картинкой.
  */
-export declare const ImageBaseOverlay: ({ className, theme: themeProp, visibility: visibilityProp, children, onClick, ...restProps }: ImageBaseOverlayProps) => JSX.Element;
+export declare const ImageBaseOverlay: ({ className, theme: themeProp, visibility: visibilityProp, children, onClick, ...restProps }: ImageBaseOverlayProps) => React.JSX.Element;

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 { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';\nimport { useAppearance } from '../../../hooks/useAppearance';\nimport { Tappable } from '../../Tappable/Tappable';\nimport { ImageBaseContext } from '../context';\nimport type { ImageBaseExpectedIconProps } from '../types';\nimport { validateOverlayIcon } from '../validators';\nimport styles from './ImageBaseOverlay.module.css';\n\nexport interface ImageBaseOverlayProps extends React.AriaAttributes {\n  /**\n   * Задаёт тему оформления.\n   *\n   * > По умолчанию берётся из параметра `appearance` в `ConfigProvider`.\n   */\n  theme?: 'dark' | 'light';\n  /**\n   * Определяет каким образом должен показываться оверлей.\n   *\n   * - `\"on-hover\"` – на наведение указателя мыши.\n   * - `\"always\"` – всегда показывать.\n   *\n   * > По умолчанию определяется в зависимости от того, есть ли у пользователя мышь или нет.\n   */\n  visibility?: 'on-hover' | 'always';\n  /**\n   * Принимает иконку.\n   *\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getOverlayIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   */\n  children: React.ReactElement<ImageBaseExpectedIconProps>;\n  className?: string;\n  onClick?: React.MouseEventHandler<HTMLElement>;\n}\n\n/**\n * Интерактивный оверлей над картинкой.\n */\nexport const ImageBaseOverlay = ({\n  className,\n  theme: themeProp,\n  visibility: visibilityProp,\n  children,\n  onClick,\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  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    <Tappable\n      {...restProps}\n      type=\"button\"\n      Component=\"button\"\n      className={classNames(\n        styles['ImageBaseOverlay'],\n        visibility === 'always' && styles['ImageBaseOverlay--visible'],\n        theme === 'light' && styles['ImageBaseOverlay--theme-light'],\n        theme === 'dark' && styles['ImageBaseOverlay--theme-dark'],\n        className,\n      )}\n      hasHover={visibility === 'on-hover'}\n      hoverMode={visibility === 'on-hover' ? styles['ImageBaseOverlay--visible'] : undefined}\n      focusVisibleMode={styles['ImageBaseOverlay--focus-visible']}\n      hasActive={false}\n      onClick={onClick}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","useAdaptivityHasPointer","useAppearance","Tappable","ImageBaseContext","validateOverlayIcon","styles","ImageBaseOverlay","className","theme","themeProp","visibility","visibilityProp","children","onClick","restProps","appearance","hasPointer","process","env","NODE_ENV","size","useContext","name","value","type","Component","hasHover","hoverMode","undefined","focusVisibleMode","hasActive"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,uBAAuB,QAAQ,yCAAyC;AACjF,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,gBAAgB,QAAQ,aAAa;AAE9C,SAASC,mBAAmB,QAAQ,gBAAgB;AACpD,OAAOC,YAAY,gCAAgC;AAmCnD;;CAEC,GACD,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,UAAS,EACTC,OAAOC,UAAS,EAChBC,YAAYC,eAAc,EAC1BC,SAAQ,EACRC,QAAO,EACP,GAAGC,WACmB,GAAK;IAC3B,MAAMC,aAAad;IACnB,MAAMe,aAAahB;IACnB,MAAMQ,QAAQC,aAAaM;IAC3B,MAAML,aAAaC,kBAAmBK,CAAAA,aAAa,aAAa,QAAQ,AAAD;IAEvE,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIP,UAAU;YACZ,sDAAsD;YACtD,MAAM,EAAEQ,KAAI,EAAE,GAAGtB,MAAMuB,UAAU,CAAClB;YAClCC,oBAAoBgB,MAAM;gBAAEE,MAAM;gBAAYC,OAAOX;YAAS;QAChE,CAAC;IACH,CAAC;IAED,qBACE,oBAACV;QACE,GAAGY,SAAS;QACbU,MAAK;QACLC,WAAU;QACVlB,WAAWR,WACTM,MAAM,CAAC,mBAAmB,EAC1BK,eAAe,YAAYL,MAAM,CAAC,4BAA4B,EAC9DG,UAAU,WAAWH,MAAM,CAAC,gCAAgC,EAC5DG,UAAU,UAAUH,MAAM,CAAC,+BAA+B,EAC1DE;QAEFmB,UAAUhB,eAAe;QACzBiB,WAAWjB,eAAe,aAAaL,MAAM,CAAC,4BAA4B,GAAGuB,SAAS;QACtFC,kBAAkBxB,MAAM,CAAC,kCAAkC;QAC3DyB,WAAW,KAAK;QAChBjB,SAASA;OAERD;AAGP,EAAE"}
+{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';\nimport { useAppearance } from '../../../hooks/useAppearance';\nimport { Tappable } from '../../Tappable/Tappable';\nimport { ImageBaseContext } from '../context';\nimport type { ImageBaseExpectedIconProps } from '../types';\nimport { validateOverlayIcon } from '../validators';\nimport styles from './ImageBaseOverlay.module.css';\n\nexport interface ImageBaseOverlayProps extends React.AriaAttributes {\n  /**\n   * Задаёт тему оформления.\n   *\n   * > По умолчанию берётся из параметра `appearance` в `ConfigProvider`.\n   */\n  theme?: 'dark' | 'light';\n  /**\n   * Определяет каким образом должен показываться оверлей.\n   *\n   * - `\"on-hover\"` – на наведение указателя мыши.\n   * - `\"always\"` – всегда показывать.\n   *\n   * > По умолчанию определяется в зависимости от того, есть ли у пользователя мышь или нет.\n   */\n  visibility?: 'on-hover' | 'always';\n  /**\n   * Принимает иконку.\n   *\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getOverlayIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   */\n  children: React.ReactElement<ImageBaseExpectedIconProps>;\n  className?: string;\n  onClick?: React.MouseEventHandler<HTMLElement>;\n}\n\n/**\n * Интерактивный оверлей над картинкой.\n */\nexport const ImageBaseOverlay = ({\n  className,\n  theme: themeProp,\n  visibility: visibilityProp,\n  children,\n  onClick,\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  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    <Tappable\n      {...restProps}\n      type=\"button\"\n      Component=\"button\"\n      className={classNames(\n        styles['ImageBaseOverlay'],\n        visibility === 'always' && styles['ImageBaseOverlay--visible'],\n        theme === 'light' && styles['ImageBaseOverlay--theme-light'],\n        theme === 'dark' && styles['ImageBaseOverlay--theme-dark'],\n        className,\n      )}\n      hasHover={visibility === 'on-hover'}\n      hoverMode={visibility === 'on-hover' ? styles['ImageBaseOverlay--visible'] : undefined}\n      focusVisibleMode={styles['ImageBaseOverlay--focus-visible']}\n      hasActive={false}\n      onClick={onClick}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","useAdaptivityHasPointer","useAppearance","Tappable","ImageBaseContext","validateOverlayIcon","styles","ImageBaseOverlay","className","theme","themeProp","visibility","visibilityProp","children","onClick","restProps","appearance","hasPointer","process","env","NODE_ENV","size","useContext","name","value","type","Component","hasHover","hoverMode","undefined","focusVisibleMode","hasActive"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,uBAAuB,QAAQ,yCAAyC;AACjF,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,gBAAgB,QAAQ,aAAa;AAE9C,SAASC,mBAAmB,QAAQ,gBAAgB;AACpD,OAAOC,YAAY,gCAAgC;AAmCnD;;CAEC,GACD,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,UAAS,EACTC,OAAOC,UAAS,EAChBC,YAAYC,eAAc,EAC1BC,SAAQ,EACRC,QAAO,EACP,GAAGC,WACmB;IACtB,MAAMC,aAAad;IACnB,MAAMe,aAAahB;IACnB,MAAMQ,QAAQC,aAAaM;IAC3B,MAAML,aAAaC,kBAAmBK,CAAAA,aAAa,aAAa,QAAO;IAEvE,IAAIC,QAAQC,IAAIC,aAAa,eAAe;QAC1C,IAAIP,UAAU;YACZ,sDAAsD;YACtD,MAAM,EAAEQ,KAAI,EAAE,GAAGtB,MAAMuB,WAAWlB;YAClCC,oBAAoBgB,MAAM;gBAAEE,MAAM;gBAAYC,OAAOX;YAAS;QAChE;IACF;IAEA,qBACE,oBAACV;QACE,GAAGY,SAAS;QACbU,MAAK;QACLC,WAAU;QACVlB,WAAWR,WACTM,MAAM,CAAC,mBAAmB,EAC1BK,eAAe,YAAYL,MAAM,CAAC,4BAA4B,EAC9DG,UAAU,WAAWH,MAAM,CAAC,gCAAgC,EAC5DG,UAAU,UAAUH,MAAM,CAAC,+BAA+B,EAC1DE;QAEFmB,UAAUhB,eAAe;QACzBiB,WAAWjB,eAAe,aAAaL,MAAM,CAAC,4BAA4B,GAAGuB;QAC7EC,kBAAkBxB,MAAM,CAAC,kCAAkC;QAC3DyB,WAAW;QACXjB,SAASA;OAERD;AAGP,EAAE"}

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

@@ -9,7 +9,7 @@
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  border: none;
+  border: 0;
   border-radius: inherit;
   box-shadow: inherit;
   opacity: 0;

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.createContext<ImageBaseContextProps>({\n  size: 0,\n});\n"],"names":["React","ImageBaseContext","createContext","size"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,mBAAmBD,MAAME,cAAqC;IACzEC,MAAM;AACR,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ImageBase/helpers.ts"],"sourcesContent":["/**\n * Возвращает размер иконки основанный на дизайн-системы.\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 */\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 */\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;;CAEC,GACD,OAAO,SAASA,mCAAmCC,SAAiB,EAA+B;IACjG,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,CAAC;IACD,OAAOD,mCAAmCE,QAAQ;AACpD,CAAC;AAEDF,mCAAmCE,QAAQ,GAAG;AAE9C;;CAEC,GACD,OAAO,SAASC,gCAAgCF,SAAiB,EAAqB;IACpF,IAAIA,aAAa,IAAI;QACnB,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,CAAC;IACD,OAAOE,gCAAgCD,QAAQ;AACjD,CAAC;AAEDC,gCAAgCD,QAAQ,GAAG;AAE3C;;CAEC,GACD,OAAO,SAASE,kCACdH,SAAiB,EACiB;IAClC,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,CAAC;IACD,OAAOG,kCAAkCF,QAAQ;AACnD,CAAC;AAEDE,kCAAkCF,QAAQ,GAAG"}
+{"version":3,"sources":["../../../../src/components/ImageBase/helpers.ts"],"sourcesContent":["/**\n * Возвращает размер иконки основанный на дизайн-системы.\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 */\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 */\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;;CAEC,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;AAC5C;AAEAF,mCAAmCE,WAAW;AAE9C;;CAEC,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;AACzC;AAEAC,gCAAgCD,WAAW;AAE3C;;CAEC,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;AAC3C;AAEAE,kCAAkCF,WAAW"}

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 */\nfunction parseIconSizeByDisplayName(displayName: unknown): number | null {\n  if (typeof displayName !== 'string') {\n    return null;\n  }\n  const rawSize = displayName\n    .replace(/\\d+$/g, '') // удаляем цифры в конце\n    .replace(/\\D/g, ''); // удаляем всё, что не является числом\n  const size = Number(rawSize);\n  return size > 0 ? size : 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","rawSize","replace","size","Number","parseIconSizeByWidthProp","width","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;;;;;;CAMC,GACD,SAASC,2BAA2BC,WAAoB,EAAiB;IACvE,IAAI,OAAOA,gBAAgB,UAAU;QACnC,OAAO,IAAI;IACb,CAAC;IACD,MAAMC,UAAUD,YACbE,OAAO,CAAC,SAAS,IAAI,wBAAwB;KAC7CA,OAAO,CAAC,OAAO,KAAK,sCAAsC;IAC7D,MAAMC,OAAOC,OAAOH;IACpB,OAAOE,OAAO,IAAIA,OAAO,IAAI;AAC/B;AAEA,SAASE,yBAAyBC,KAAc,EAAiB;IAC/D,IAAI,OAAOA,UAAU,YAAY,OAAOA,UAAU,UAAU;QAC1D,OAAO,IAAI;IACb,CAAC;IACD,MAAMH,OAAOC,OAAOE;IACpB,OAAOH,OAAO,IAAIA,OAAO,IAAI;AAC/B;AAEA,SAASI,sBAAsBC,OAAoB,EAAiB;IAClE,OAAOA,QAAQC,IAAI,CAACT,WAAW,IAAI,IAAI;AACzC;AAEA,SAASU,oBAAoBF,OAAoB,EAA0B;IACzE,OAAOA,QAAQG,KAAK,CAACL,KAAK,IAAI,IAAI;AACpC;AAEA,SAASM,qBAAqBJ,OAAoB,EAAiB;IACjE,MAAMK,oBAAoBd,2BAA2BQ,sBAAsBC;IAC3E,MAAMM,cAAcT,yBAAyBK,oBAAoBF;IACjE,OAAOM,cAAcA,cAAcD,iBAAiB;AACtD;AAYA,SAASE,qCACPC,SAAiB,EACjBC,QAAkB,EAClBC,UAAsB,EACtBC,MAAmC,EACnC;IACA,MAAMC,WAAWR,qBAAqBK,SAASI,KAAK;IAEpD,IAAID,aAAa,IAAI,EAAE;QACrB;IACF,CAAC;IAED,MAAME,SAASJ,WAAWF;IAE1B,IAAIM,WAAWF,YAAaE,WAAWJ,WAAWK,QAAQ,IAAIH,YAAYE,QAAS;QACjF;IACF,CAAC;IAED,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,EAAE;IAC1E,OAAOF,qCACLC,WACAC,UACArB,oCACA+B;AAEJ,CAAC;AAED,MAAME,oBAAoB,IAAIC,IAAYhC;AAE1C,MAAMiC,eAAeC,OAAOC,IAAI,CAACJ,mBAAmBK,GAAG,CAAC,CAACC,MAAQ/B,OAAO+B;AACxE,MAAMC,UAAUL,aAAaM,MAAM,CAAC,CAACD,SAASjC,OAAUA,OAAOiC,UAAUjC,OAAOiC,OAAO,EAAG;AAE1F,OAAO,SAASE,aAAatB,SAAiB,EAAQ;IACpD,IAAIA,YAAYoB,WAAWP,kBAAkBU,GAAG,CAACvB,YAAY;QAC3D;IACF,CAAC;IACDW,cACE,CAAC,QAAQ,EAAEX,UAAU,0FAA0F,EAAEe,aAAaS,IAAI,CAChI,OACA,CAAC,EACH;AAEJ,CAAC;AAED,MAAMC,qBAAqB/C,SAAS;AAEpC,OAAO,SAASgD,kBAAkB1B,SAAiB,EAAEC,QAAkB,EAAQ;IAC7E,IAAID,YAAY,MAAMC,UAAU;QAC9B,OAAOwB,mBAAmB,yCAAyC;IACrE,CAAC;IACD1B,qCACEC,WACAC,UACAtB,iCACA8C;AAEJ,CAAC;AAED,MAAME,uBAAuBjD,SAAS;AAEtC,OAAO,SAASkD,oBAAoB5B,SAAiB,EAAEC,QAAkB,EAAQ;IAC/EF,qCACEC,WACAC,UACApB,mCACA8C;AAEJ,CAAC"}
+{"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 */\nfunction parseIconSizeByDisplayName(displayName: unknown): number | null {\n  if (typeof displayName !== 'string') {\n    return null;\n  }\n  const rawSize = displayName\n    .replace(/\\d+$/g, '') // удаляем цифры в конце\n    .replace(/\\D/g, ''); // удаляем всё, что не является числом\n  const size = Number(rawSize);\n  return size > 0 ? size : 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","rawSize","replace","size","Number","parseIconSizeByWidthProp","width","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;;;;;;CAMC,GACD,SAASC,2BAA2BC,WAAoB;IACtD,IAAI,OAAOA,gBAAgB,UAAU;QACnC,OAAO;IACT;IACA,MAAMC,UAAUD,YACbE,QAAQ,SAAS,IAAI,wBAAwB;KAC7CA,QAAQ,OAAO,KAAK,sCAAsC;IAC7D,MAAMC,OAAOC,OAAOH;IACpB,OAAOE,OAAO,IAAIA,OAAO;AAC3B;AAEA,SAASE,yBAAyBC,KAAc;IAC9C,IAAI,OAAOA,UAAU,YAAY,OAAOA,UAAU,UAAU;QAC1D,OAAO;IACT;IACA,MAAMH,OAAOC,OAAOE;IACpB,OAAOH,OAAO,IAAIA,OAAO;AAC3B;AAEA,SAASI,sBAAsBC,OAAoB;IACjD,OAAOA,QAAQC,KAAKT,eAAe;AACrC;AAEA,SAASU,oBAAoBF,OAAoB;IAC/C,OAAOA,QAAQG,MAAML,SAAS;AAChC;AAEA,SAASM,qBAAqBJ,OAAoB;IAChD,MAAMK,oBAAoBd,2BAA2BQ,sBAAsBC;IAC3E,MAAMM,cAAcT,yBAAyBK,oBAAoBF;IACjE,OAAOM,cAAcA,cAAcD;AACrC;AAYA,SAASE,qCACPC,SAAiB,EACjBC,QAAkB,EAClBC,UAAsB,EACtBC,MAAmC;IAEnC,MAAMC,WAAWR,qBAAqBK,SAASI;IAE/C,IAAID,aAAa,MAAM;QACrB;IACF;IAEA,MAAME,SAASJ,WAAWF;IAE1B,IAAIM,WAAWF,YAAaE,WAAWJ,WAAWK,YAAYH,YAAYE,QAAS;QACjF;IACF;IAEA,MAAME,WAAWjB,sBAAsBU,SAASI;IAChD,MAAMI,cAAcD,WAAW,CAAC,EAAEP,SAASS,KAAK,GAAG,EAAEF,SAAS,IAAI,CAAC,GAAGP,SAASS;IAE/EP,OACE,CAAC,SAAS,EAAEM,YAAY,gDAAgD,EAAET,UAAU,wBAAwB,EAAEC,SAASS,KAAK,+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,KAAKJ,mBAAmBK,IAAI,CAACC,MAAQ/B,OAAO+B;AACxE,MAAMC,UAAUL,aAAaM,OAAO,CAACD,SAASjC,OAAUA,OAAOiC,UAAUjC,OAAOiC,SAAU;AAE1F,OAAO,SAASE,aAAatB,SAAiB;IAC5C,IAAIA,YAAYoB,WAAWP,kBAAkBU,IAAIvB,YAAY;QAC3D;IACF;IACAW,cACE,CAAC,QAAQ,EAAEX,UAAU,0FAA0F,EAAEe,aAAaS,KAC5H,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

@@ -5,4 +5,4 @@ export interface InfoRowProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/InfoRow
  */
-export declare const InfoRow: ({ header, children, className, ...restProps }: InfoRowProps) => JSX.Element;
+export declare const InfoRow: ({ header, children, className, ...restProps }: InfoRowProps) => React.JSX.Element;

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

@@ -6,4 +6,4 @@ 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) => JSX.Element;
+export declare const Input: ({ type, align, getRef, className, getRootRef, style, before, after, status, mode, ...restProps }: InputProps) => React.JSX.Element;

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

@@ -3,6 +3,7 @@ import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { SizeType } from '../../lib/adaptivity';
 import { FormField } from '../FormField/FormField';
+import { Text } from '../Typography/Text/Text';
 import styles from './Input.module.css';
 const sizeYClassNames = {
     none: styles['Input--sizeY-none'],
@@ -21,11 +22,13 @@ const sizeYClassNames = {
         disabled: restProps.disabled,
         mode: mode,
         status: status
-    }, /*#__PURE__*/ React.createElement("input", {
+    }, /*#__PURE__*/ React.createElement(Text, {
         ...restProps,
+        Component: "input",
+        normalize: false,
         type: type,
         className: styles['Input__el'],
-        ref: getRef
+        getRootRef: getRef
     }));
 };
 

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 { SizeType } from '../../lib/adaptivity';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport styles from './Input.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Input--sizeY-none'],\n  [SizeType.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 !== SizeType.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      <input {...restProps} type={type} className={styles['Input__el']} ref={getRef} />\n    </FormField>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","FormField","styles","sizeYClassNames","none","COMPACT","Input","type","align","getRef","className","getRootRef","style","before","after","status","mode","restProps","sizeY","REGULAR","disabled","input","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAACF,SAASK,OAAO,CAAC,EAAEH,MAAM,CAAC,uBAAuB;AACpD;AASA;;CAEC,GACD,OAAO,MAAMI,QAAQ,CAAC,EACpBC,MAAO,OAAM,EACbC,OAAQ,OAAM,EACdC,OAAM,EACNC,UAAS,EACTC,WAAU,EACVC,MAAK,EACLC,OAAM,EACNC,MAAK,EACLC,OAAM,EACNC,KAAI,EACJ,GAAGC,WACQ,GAAK;IAChB,MAAM,EAAEC,OAAQ,OAAM,EAAE,GAAGnB;IAE3B,qBACE,oBAACE;QACCW,OAAOA;QACPF,WAAWZ,WACTI,MAAM,CAAC,QAAQ,EACfM,UAAU,WAAWN,MAAM,CAAC,qBAAqB,EACjDM,UAAU,YAAYN,MAAM,CAAC,sBAAsB,EACnDgB,UAAUlB,SAASmB,OAAO,IAAIhB,eAAe,CAACe,MAAM,EACpDL,UAAUX,MAAM,CAAC,mBAAmB,EACpCY,SAASZ,MAAM,CAAC,kBAAkB,EAClCQ;QAEFC,YAAYA;QACZE,QAAQA;QACRC,OAAOA;QACPM,UAAUH,UAAUG,QAAQ;QAC5BJ,MAAMA;QACND,QAAQA;qBAER,oBAACM;QAAO,GAAGJ,SAAS;QAAEV,MAAMA;QAAMG,WAAWR,MAAM,CAAC,YAAY;QAAEoB,KAAKb;;AAG7E,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 { SizeType } from '../../lib/adaptivity';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './Input.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Input--sizeY-none'],\n  [SizeType.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 !== SizeType.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      <Text\n        {...restProps}\n        Component=\"input\"\n        normalize={false}\n        type={type}\n        className={styles['Input__el']}\n        getRootRef={getRef}\n      />\n    </FormField>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","FormField","Text","styles","sizeYClassNames","none","COMPACT","Input","type","align","getRef","className","getRootRef","style","before","after","status","mode","restProps","sizeY","REGULAR","disabled","Component","normalize"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAACH,SAASM,QAAQ,EAAEH,MAAM,CAAC,uBAAuB;AACpD;AASA;;CAEC,GACD,OAAO,MAAMI,QAAQ,CAAC,EACpBC,MAAO,OAAM,EACbC,OAAQ,OAAM,EACdC,OAAM,EACNC,UAAS,EACTC,WAAU,EACVC,MAAK,EACLC,OAAM,EACNC,MAAK,EACLC,OAAM,EACNC,KAAI,EACJ,GAAGC,WACQ;IACX,MAAM,EAAEC,OAAQ,OAAM,EAAE,GAAGpB;IAE3B,qBACE,oBAACE;QACCY,OAAOA;QACPF,WAAWb,WACTK,MAAM,CAAC,QAAQ,EACfM,UAAU,WAAWN,MAAM,CAAC,qBAAqB,EACjDM,UAAU,YAAYN,MAAM,CAAC,sBAAsB,EACnDgB,UAAUnB,SAASoB,WAAWhB,eAAe,CAACe,MAAM,EACpDL,UAAUX,MAAM,CAAC,mBAAmB,EACpCY,SAASZ,MAAM,CAAC,kBAAkB,EAClCQ;QAEFC,YAAYA;QACZE,QAAQA;QACRC,OAAOA;QACPM,UAAUH,UAAUG;QACpBJ,MAAMA;QACND,QAAQA;qBAER,oBAACd;QACE,GAAGgB,SAAS;QACbI,WAAU;QACVC,WAAW;QACXf,MAAMA;QACNG,WAAWR,MAAM,CAAC,YAAY;QAC9BS,YAAYF;;AAIpB,EAAE"}

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

@@ -18,15 +18,11 @@
   width: 100%;
   box-sizing: border-box;
   box-shadow: none;
-  border: none;
+  border: 0;
   border-radius: inherit;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  font-family: inherit;
-  font-weight: var(--vkui--font_text--font_weight--regular);
-  font-size: var(--vkui--font_text--font_size--regular);
-  line-height: var(--vkui--font_text--line_height--regular);
   color: var(--vkui--color_text_primary);
   padding: 0 12px;
   position: relative;
@@ -36,8 +32,12 @@
 
 .Input--sizeY-compact .Input__el {
   height: var(--vkui--size_field_height--compact);
-  font-size: var(--vkui--font_text--font_size--compact);
-  line-height: var(--vkui--font_text--line_height--compact);
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .Input--sizeY-none .Input__el {
+    height: var(--vkui--size_field_height--compact);
+  }
 }
 
 .Input--hasBefore .Input__el {
@@ -48,14 +48,6 @@
   padding-right: 0;
 }
 
-@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
-  .Input--sizeY-none .Input__el {
-    height: var(--vkui--size_field_height--compact);
-    font-size: var(--vkui--font_text--font_size--compact);
-    line-height: var(--vkui--font_text--line_height--compact);
-  }
-}
-
 .Input__el:disabled {
   opacity: var(--vkui--opacity_disable_accessibility);
 }

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

@@ -7,6 +7,6 @@ export interface InputLikeProps extends React.HTMLAttributes<HTMLSpanElement>, H
     onElementSelect?(index: number): void;
 }
 export declare const InputLike: {
-    ({ value, length, index, onElementSelect, onClick, onFocus, getRootRef, className, ...props }: InputLikeProps): JSX.Element;
+    ({ value, length, index, onElementSelect, onClick, onFocus, getRootRef, className, ...props }: InputLikeProps): React.JSX.Element;
     displayName: string;
 };

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 { classNames } from '@vkontakte/vkjs';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { stopPropagation } from '../../lib/utils';\nimport { HasRootRef } from '../../types';\nimport styles from './InputLike.module.css';\n\nexport interface InputLikeProps\n  extends React.HTMLAttributes<HTMLSpanElement>,\n    HasRootRef<HTMLSpanElement> {\n  length: number;\n  index: number;\n  value?: 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  getRootRef,\n  className,\n  ...props\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    <span\n      className={classNames(\n        styles['InputLike'],\n        value?.length === length && styles['InputLike--full'],\n        className,\n      )}\n      tabIndex={0}\n      ref={getRootRef}\n      onClick={callMultiple(onClick, handleElementSelect)}\n      onFocus={callMultiple(stopPropagation, onFocus)}\n      {...props}\n    >\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    </span>\n  );\n};\n\nInputLike.displayName = 'InputLike';\n"],"names":["React","classNames","callMultiple","stopPropagation","styles","MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","span","key","className","InputLike","value","onElementSelect","onClick","onFocus","getRootRef","props","handleElementSelect","useCallback","event","tabIndex","ref","slice","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,eAAe,QAAQ,kBAAkB;AAElD,OAAOC,YAAY,yBAAyB;AAW5C,MAAMC,cAAcC,OAAOC,YAAY,CAAC;AAExC,SAASC,gBAAgBC,MAAc,EAAE;IACvC,MAAMC,SAAS,EAAE;IACjB,IAAK,IAAIC,QAAQ,GAAGA,QAAQF,QAAQE,SAAS,EAAG;QAC9CD,OAAOE,IAAI,eACT,oBAACC;YAAKC,KAAKH;YAAOI,WAAWX,MAAM,CAAC,kBAAkB;WACnDC;IAGP;IACA,OAAOK;AACT;AAEA,OAAO,MAAMM,YAAY,CAAC,EACxBC,MAAK,EACLR,OAAM,EACNE,MAAK,EACLO,gBAAe,EACfC,QAAO,EACPC,QAAO,EACPC,WAAU,EACVN,UAAS,EACT,GAAGO,OACY,GAAK;IACpB,MAAMC,sBAAsBvB,MAAMwB,WAAW,CAC3C,CAACC,QAA6C;QAC5CtB,gBAAgBsB;QAChBP,kBAAkBP;IACpB,GACA;QAACA;QAAOO;KAAgB;IAG1B,qBACE,oBAACL;QACCE,WAAWd,WACTG,MAAM,CAAC,YAAY,EACnBa,OAAOR,WAAWA,UAAUL,MAAM,CAAC,kBAAkB,EACrDW;QAEFW,UAAU;QACVC,KAAKN;QACLF,SAASjB,aAAaiB,SAASI;QAC/BH,SAASlB,aAAaC,iBAAiBiB;QACtC,GAAGE,KAAK;OAERL,OAAOW,MAAM,GAAGnB,SAAS,IACzBQ,OAAOW,MAAMnB,SAAS,oBACrB,oBAACI;QAAKC,KAAKH;QAAOI,WAAWX,MAAM,CAAC,4BAA4B;OAC7Da,MAAMW,KAAK,CAACnB,SAAS,KAGzBD,gBAAgBC,SAAUQ,CAAAA,OAAOR,UAAU,CAAA;AAGlD,EAAE;AAEFO,UAAUa,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/InputLike/InputLike.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { stopPropagation } from '../../lib/utils';\nimport { HasRootRef } from '../../types';\nimport styles from './InputLike.module.css';\n\nexport interface InputLikeProps\n  extends React.HTMLAttributes<HTMLSpanElement>,\n    HasRootRef<HTMLSpanElement> {\n  length: number;\n  index: number;\n  value?: 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  getRootRef,\n  className,\n  ...props\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    <span\n      className={classNames(\n        styles['InputLike'],\n        value?.length === length && styles['InputLike--full'],\n        className,\n      )}\n      tabIndex={0}\n      ref={getRootRef}\n      onClick={callMultiple(onClick, handleElementSelect)}\n      onFocus={callMultiple(stopPropagation, onFocus)}\n      {...props}\n    >\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    </span>\n  );\n};\n\nInputLike.displayName = 'InputLike';\n"],"names":["React","classNames","callMultiple","stopPropagation","styles","MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","span","key","className","InputLike","value","onElementSelect","onClick","onFocus","getRootRef","props","handleElementSelect","useCallback","event","tabIndex","ref","slice","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,eAAe,QAAQ,kBAAkB;AAElD,OAAOC,YAAY,yBAAyB;AAW5C,MAAMC,cAAcC,OAAOC,aAAa;AAExC,SAASC,gBAAgBC,MAAc;IACrC,MAAMC,SAAS,EAAE;IACjB,IAAK,IAAIC,QAAQ,GAAGA,QAAQF,QAAQE,SAAS,EAAG;QAC9CD,OAAOE,mBACL,oBAACC;YAAKC,KAAKH;YAAOI,WAAWX,MAAM,CAAC,kBAAkB;WACnDC;IAGP;IACA,OAAOK;AACT;AAEA,OAAO,MAAMM,YAAY,CAAC,EACxBC,MAAK,EACLR,OAAM,EACNE,MAAK,EACLO,gBAAe,EACfC,QAAO,EACPC,QAAO,EACPC,WAAU,EACVN,UAAS,EACT,GAAGO,OACY;IACf,MAAMC,sBAAsBvB,MAAMwB,YAChC,CAACC;QACCtB,gBAAgBsB;QAChBP,kBAAkBP;IACpB,GACA;QAACA;QAAOO;KAAgB;IAG1B,qBACE,oBAACL;QACCE,WAAWd,WACTG,MAAM,CAAC,YAAY,EACnBa,OAAOR,WAAWA,UAAUL,MAAM,CAAC,kBAAkB,EACrDW;QAEFW,UAAU;QACVC,KAAKN;QACLF,SAASjB,aAAaiB,SAASI;QAC/BH,SAASlB,aAAaC,iBAAiBiB;QACtC,GAAGE,KAAK;OAERL,OAAOW,MAAM,GAAGnB,SAAS,IACzBQ,OAAOW,MAAMnB,SAAS,oBACrB,oBAACI;QAAKC,KAAKH;QAAOI,WAAWX,MAAM,CAAC,4BAA4B;OAC7Da,MAAMW,MAAMnB,SAAS,KAGzBD,gBAAgBC,SAAUQ,CAAAA,OAAOR,UAAU,CAAA;AAGlD,EAAE;AAEFO,UAAUa,cAAc"}

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

@@ -18,11 +18,13 @@
 }
 
 .InputLike__last_character {
+  /* stylelint-disable-next-line declaration-no-important */
   letter-spacing: 1px !important;
 }
 
 .InputLike__divider {
   color: var(--vkui--color_text_secondary);
+  /* stylelint-disable-next-line declaration-no-important */
   letter-spacing: 1px !important;
 }
 

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

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare const InputLikeDivider: ({ children, className, ...props }: React.InputHTMLAttributes<HTMLSpanElement>) => JSX.Element;
+export declare const InputLikeDivider: ({ children, className, ...props }: React.InputHTMLAttributes<HTMLSpanElement>) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/InputLike/InputLikeDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './InputLike.module.css';\n\nexport const InputLikeDivider = ({\n  children,\n  className,\n  ...props\n}: React.InputHTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span className={classNames(styles['InputLike__divider'], className)} {...props}>\n      {children}\n    </span>\n  );\n};\n"],"names":["React","classNames","styles","InputLikeDivider","children","className","props","span"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,yBAAyB;AAE5C,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,SAAQ,EACRC,UAAS,EACT,GAAGC,OACwC,GAAK;IAChD,qBACE,oBAACC;QAAKF,WAAWJ,WAAWC,MAAM,CAAC,qBAAqB,EAAEG;QAAa,GAAGC,KAAK;OAC5EF;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/InputLike/InputLikeDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './InputLike.module.css';\n\nexport const InputLikeDivider = ({\n  children,\n  className,\n  ...props\n}: React.InputHTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span className={classNames(styles['InputLike__divider'], className)} {...props}>\n      {children}\n    </span>\n  );\n};\n"],"names":["React","classNames","styles","InputLikeDivider","children","className","props","span"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,yBAAyB;AAE5C,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,SAAQ,EACRC,UAAS,EACT,GAAGC,OACwC;IAC3C,qBACE,oBAACC;QAAKF,WAAWJ,WAAWC,MAAM,CAAC,qBAAqB,EAAEG;QAAa,GAAGC,KAAK;OAC5EF;AAGP,EAAE"}

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { TappableProps } from '../Tappable/Tappable';
 export interface LinkProps extends TappableProps {
     /**
@@ -9,4 +9,4 @@ export interface LinkProps extends TappableProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/Link
  */
-export declare const Link: ({ hasVisited, children, className, ...restProps }: LinkProps) => JSX.Element;
+export declare const Link: ({ hasVisited, children, className, ...restProps }: LinkProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport styles from './Link.module.css';\n\nexport interface LinkProps extends TappableProps {\n  /**\n   * Включает состояние `visited`, которое позволяет пользователю понять посещал ли он ссылку или нет\n   */\n  hasVisited?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Link\n */\nexport const Link = ({ hasVisited, children, className, ...restProps }: LinkProps) => {\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      className={classNames(styles['Link'], hasVisited && styles['Link--has-visited'], className)}\n      hasHover={false}\n      activeMode=\"opacity\"\n      focusVisibleMode={styles['Link--focus-visible']}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","Tappable","styles","Link","hasVisited","children","className","restProps","Component","href","hasHover","activeMode","focusVisibleMode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,OAAOC,YAAY,oBAAoB;AASvC;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EAAEC,WAAU,EAAEC,SAAQ,EAAEC,UAAS,EAAE,GAAGC,WAAsB,GAAK;IACpF,qBACE,oBAACN;QACCO,WAAWD,UAAUE,IAAI,GAAG,MAAM,QAAQ;QACzC,GAAGF,SAAS;QACbD,WAAWN,WAAWE,MAAM,CAAC,OAAO,EAAEE,cAAcF,MAAM,CAAC,oBAAoB,EAAEI;QACjFI,UAAU,KAAK;QACfC,YAAW;QACXC,kBAAkBV,MAAM,CAAC,sBAAsB;OAE9CG;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport styles from './Link.module.css';\n\nexport interface LinkProps extends TappableProps {\n  /**\n   * Включает состояние `visited`, которое позволяет пользователю понять посещал ли он ссылку или нет\n   */\n  hasVisited?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Link\n */\nexport const Link = ({ hasVisited, children, className, ...restProps }: LinkProps) => {\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      className={classNames(styles['Link'], hasVisited && styles['Link--has-visited'], className)}\n      hasHover={false}\n      activeMode=\"opacity\"\n      focusVisibleMode={styles['Link--focus-visible']}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","Tappable","styles","Link","hasVisited","children","className","restProps","Component","href","hasHover","activeMode","focusVisibleMode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,OAAOC,YAAY,oBAAoB;AASvC;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EAAEC,WAAU,EAAEC,SAAQ,EAAEC,UAAS,EAAE,GAAGC,WAAsB;IAC/E,qBACE,oBAACN;QACCO,WAAWD,UAAUE,OAAO,MAAM;QACjC,GAAGF,SAAS;QACbD,WAAWN,WAAWE,MAAM,CAAC,OAAO,EAAEE,cAAcF,MAAM,CAAC,oBAAoB,EAAEI;QACjFI,UAAU;QACVC,YAAW;QACXC,kBAAkBV,MAAM,CAAC,sBAAsB;OAE9CG;AAGP,EAAE"}

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

@@ -27,6 +27,7 @@
    *
    * `!important` – чтобы перебить глобальное обнуление `outline` на `:focus`.
    */
+  /* stylelint-disable-next-line declaration-no-important */
   outline: 2px solid var(--vkui--color_stroke_accent) !important;
 }
 
@@ -34,7 +35,7 @@
   color: var(--vkui--color_text_link_visited);
 }
 
-/* stylelint-disable-next-line vkui/atomic */
+/* stylelint-disable-next-line @project-tools/stylelint-atomic */
 
 .Link :global(.vkuiIcon) {
   margin-left: 4px;

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

@@ -3,4 +3,4 @@ export type ListProps = React.HTMLAttributes<HTMLDivElement>;
 /**
  * @see https://vkcom.github.io/VKUI/#/List
  */
-export declare const List: ({ children, className, ...restProps }: ListProps) => JSX.Element;
+export declare const List: ({ children, className, ...restProps }: ListProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/List/List.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ListContext } from './ListContext';\nimport styles from './List.module.css';\n\nexport type ListProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/List\n */\nexport const List = ({ children, className, ...restProps }: ListProps) => {\n  const [isDragging, toggleDrag] = React.useState(false);\n\n  return (\n    <div\n      role=\"list\"\n      {...restProps}\n      className={classNames(styles['List'], isDragging && 'vkuiInternalList--dragging', className)}\n    >\n      <ListContext.Provider value={React.useMemo(() => ({ toggleDrag }), [])}>\n        {children}\n      </ListContext.Provider>\n    </div>\n  );\n};\n"],"names":["React","classNames","ListContext","styles","List","children","className","restProps","isDragging","toggleDrag","useState","div","role","Provider","value","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,OAAOC,YAAY,oBAAoB;AAIvC;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EAAEC,SAAQ,EAAEC,UAAS,EAAE,GAAGC,WAAsB,GAAK;IACxE,MAAM,CAACC,YAAYC,WAAW,GAAGT,MAAMU,QAAQ,CAAC,KAAK;IAErD,qBACE,oBAACC;QACCC,MAAK;QACJ,GAAGL,SAAS;QACbD,WAAWL,WAAWE,MAAM,CAAC,OAAO,EAAEK,cAAc,8BAA8BF;qBAElF,oBAACJ,YAAYW,QAAQ;QAACC,OAAOd,MAAMe,OAAO,CAAC,IAAO,CAAA;gBAAEN;YAAW,CAAA,GAAI,EAAE;OAClEJ;AAIT,EAAE"}
+{"version":3,"sources":["../../../../src/components/List/List.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ListContext } from './ListContext';\nimport styles from './List.module.css';\n\nexport type ListProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/List\n */\nexport const List = ({ children, className, ...restProps }: ListProps) => {\n  const [isDragging, toggleDrag] = React.useState(false);\n\n  return (\n    <div\n      role=\"list\"\n      {...restProps}\n      className={classNames(styles['List'], isDragging && 'vkuiInternalList--dragging', className)}\n    >\n      <ListContext.Provider value={React.useMemo(() => ({ toggleDrag }), [])}>\n        {children}\n      </ListContext.Provider>\n    </div>\n  );\n};\n"],"names":["React","classNames","ListContext","styles","List","children","className","restProps","isDragging","toggleDrag","useState","div","role","Provider","value","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,OAAOC,YAAY,oBAAoB;AAIvC;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EAAEC,SAAQ,EAAEC,UAAS,EAAE,GAAGC,WAAsB;IACnE,MAAM,CAACC,YAAYC,WAAW,GAAGT,MAAMU,SAAS;IAEhD,qBACE,oBAACC;QACCC,MAAK;QACJ,GAAGL,SAAS;QACbD,WAAWL,WAAWE,MAAM,CAAC,OAAO,EAAEK,cAAc,8BAA8BF;qBAElF,oBAACJ,YAAYW;QAASC,OAAOd,MAAMe,QAAQ,IAAO,CAAA;gBAAEN;YAAW,CAAA,GAAI,EAAE;OAClEJ;AAIT,EAAE"}

package/dist/cssm/components/List/ListContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/List/ListContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\n\nexport const ListContext = React.createContext({\n  toggleDrag: noop as (value: boolean) => void,\n});\n"],"names":["React","noop","ListContext","createContext","toggleDrag"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,kBAAkB;AAEvC,OAAO,MAAMC,cAAcF,MAAMG,aAAa,CAAC;IAC7CC,YAAYH;AACd,GAAG"}
+{"version":3,"sources":["../../../../src/components/List/ListContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\n\nexport const ListContext = React.createContext({\n  toggleDrag: noop as (value: boolean) => void,\n});\n"],"names":["React","noop","ListContext","createContext","toggleDrag"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,kBAAkB;AAEvC,OAAO,MAAMC,cAAcF,MAAMG,cAAc;IAC7CC,YAAYH;AACd,GAAG"}

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

@@ -14,4 +14,4 @@ export interface LocaleProviderProps {
  * @since 5.0.0
  * @see https://vkcom.github.io/VKUI/#/LocaleProvider
  */
-export declare function LocaleProvider({ value, children }: LocaleProviderProps): JSX.Element;
+export declare function LocaleProvider({ value, children }: LocaleProviderProps): React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/LocaleProvider/LocaleProvider.tsx"],"sourcesContent":["import React from 'react';\nimport { ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface LocaleProviderProps {\n  /**\n   * Строка с языковой меткой BCP 47\n   */\n  value: ConfigProviderContextInterface['locale'];\n  children: React.ReactNode;\n}\n\n/**\n * Компонент, прокидывающий локаль. Список можно найти в\n * [реестре языковых подметок IANA](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)\n *\n * @since 5.0.0\n * @see https://vkcom.github.io/VKUI/#/LocaleProvider\n */\nexport function LocaleProvider({ value, children }: LocaleProviderProps) {\n  return <ConfigProviderOverride locale={value}>{children}</ConfigProviderOverride>;\n}\n"],"names":["React","ConfigProviderOverride","LocaleProvider","value","children","locale"],"mappings":"AAAA,OAAOA,WAAW,QAAQ;AAE1B,SAASC,sBAAsB,QAAQ,2CAA2C;AAUlF;;;;;;CAMC,GACD,OAAO,SAASC,eAAe,EAAEC,MAAK,EAAEC,SAAQ,EAAuB,EAAE;IACvE,qBAAO,oBAACH;QAAuBI,QAAQF;OAAQC;AACjD,CAAC"}
+{"version":3,"sources":["../../../../src/components/LocaleProvider/LocaleProvider.tsx"],"sourcesContent":["import React from 'react';\nimport { ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface LocaleProviderProps {\n  /**\n   * Строка с языковой меткой BCP 47\n   */\n  value: ConfigProviderContextInterface['locale'];\n  children: React.ReactNode;\n}\n\n/**\n * Компонент, прокидывающий локаль. Список можно найти в\n * [реестре языковых подметок IANA](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)\n *\n * @since 5.0.0\n * @see https://vkcom.github.io/VKUI/#/LocaleProvider\n */\nexport function LocaleProvider({ value, children }: LocaleProviderProps) {\n  return <ConfigProviderOverride locale={value}>{children}</ConfigProviderOverride>;\n}\n"],"names":["React","ConfigProviderOverride","LocaleProvider","value","children","locale"],"mappings":"AAAA,OAAOA,WAAW,QAAQ;AAE1B,SAASC,sBAAsB,QAAQ,2CAA2C;AAUlF;;;;;;CAMC,GACD,OAAO,SAASC,eAAe,EAAEC,MAAK,EAAEC,SAAQ,EAAuB;IACrE,qBAAO,oBAACH;QAAuBI,QAAQF;OAAQC;AACjD"}

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

@@ -35,4 +35,4 @@ export interface MiniInfoCellProps extends React.HTMLAttributes<HTMLDivElement>
 /**
  * @see https://vkcom.github.io/VKUI/#/MiniInfoCell
  */
-export declare const MiniInfoCell: ({ before, after, children, mode, textWrap, expandable, className, ...restProps }: MiniInfoCellProps) => JSX.Element;
+export declare const MiniInfoCell: ({ before, after, children, mode, textWrap, expandable, className, ...restProps }: MiniInfoCellProps) => React.JSX.Element;