@vkontakte/vkui 5.0.2 → 5.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"validators.js","names":["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","warnOnce","validateFallbackIcon","getFallbackIconSizeByImageBaseSize","mapOfExpectedSize","arrayOfSizes","Object","keys","map","str","maxSize","reduce","validateSize","join","warnImageBaseBadge","validateBadgeIcon","getBadgeIconSizeByImageBaseSize","warnImageBaseOverlay","validateOverlayIcon","getOverlayIconSizeByImageBaseSize"],"sources":["../../../../src/components/ImageBase/validators.ts"],"sourcesContent":["import { warnOnce } from \"../../lib/warnOnce\";\nimport type { ImageBaseSize } from \"./types\";\nimport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from \"./helpers\";\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(\n    getElementDisplayName(element)\n  );\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 (\n    result === iconSize ||\n    (result === selectorFn.MAX_SIZE && iconSize >= result)\n  ) {\n    return;\n  }\n\n  const iconName = getElementDisplayName(iconProp.value);\n  const propMessage = iconName\n    ? `${iconProp.name}={<${iconName} />}`\n    : 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: { [K in ImageBaseSize]: boolean } = {\n  16: true,\n  20: true,\n  24: true,\n  28: true,\n  32: true,\n  36: true,\n  40: true,\n  44: true,\n  48: true,\n  56: true,\n  64: true,\n  72: true,\n  80: true,\n  88: true,\n  96: true,\n};\nconst arrayOfSizes = Object.keys(mapOfExpectedSize).map((str) => Number(str));\nconst maxSize = arrayOfSizes.reduce(\n  (maxSize, size) => (size > maxSize ? size : maxSize),\n  0\n);\n\nexport function validateSize(imageSize: number): void {\n  if (imageSize > maxSize || imageSize in mapOfExpectedSize) {\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(\n  imageSize: number,\n  iconProp: IconProp\n): void {\n  validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getOverlayIconSizeByImageBaseSize,\n    warnImageBaseOverlay\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"validators.js","names":["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","warnOnce","validateFallbackIcon","getFallbackIconSizeByImageBaseSize","mapOfExpectedSize","Set","imageBaseSizes","arrayOfSizes","Object","keys","map","str","maxSize","reduce","validateSize","has","join","warnImageBaseBadge","validateBadgeIcon","getBadgeIconSizeByImageBaseSize","warnImageBaseOverlay","validateOverlayIcon","getOverlayIconSizeByImageBaseSize"],"sources":["../../../../src/components/ImageBase/validators.ts"],"sourcesContent":["import { warnOnce } from '../../lib/warnOnce';\nimport { imageBaseSizes } from './types';\nimport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\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"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export interface InfoRowProps extends React.HTMLAttributes<HTMLDivElement> {
     header: React.ReactNode;
 }

package/dist/cjs/components/InfoRow/InfoRow.js

@@ -9,10 +9,9 @@ exports.InfoRow = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _Subhead = require("../Typography/Subhead/Subhead");
 var _Headline = require("../Typography/Headline/Headline");
-var _utils = require("../../lib/utils");
 var _excluded = ["header", "children", "className"];
 /**
  * @see https://vkcom.github.io/VKUI/#/InfoRow
@@ -24,9 +23,9 @@ var InfoRow = function InfoRow(_ref) {
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/React.createElement(_Headline.Headline, (0, _extends2.default)({}, restProps, {
     Component: "span",
-    className: (0, _classNames.classNamesString)("vkuiInfoRow", className),
+    className: (0, _vkjs.classNames)("vkuiInfoRow", className),
     weight: "3"
-  }), (0, _utils.hasReactNode)(header) && /*#__PURE__*/React.createElement(_Subhead.Subhead, {
+  }), (0, _vkjs.hasReactNode)(header) && /*#__PURE__*/React.createElement(_Subhead.Subhead, {
     Component: "span",
     className: "vkuiInfoRow__header"
   }, header), children);

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

@@ -1 +1 @@
-{"version":3,"file":"InfoRow.js","names":["InfoRow","header","children","className","restProps","classNamesString","hasReactNode"],"sources":["../../../../src/components/InfoRow/InfoRow.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport styles from \"./InfoRow.module.css\";\n\nexport interface InfoRowProps extends React.HTMLAttributes<HTMLDivElement> {\n  header: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/InfoRow\n */\nexport const InfoRow = ({\n  header,\n  children,\n  className,\n  ...restProps\n}: InfoRowProps) => (\n  <Headline\n    {...restProps}\n    Component=\"span\"\n    className={classNamesString(styles[\"InfoRow\"], className)}\n    weight=\"3\"\n  >\n    {hasReactNode(header) && (\n      <Subhead Component=\"span\" className={styles[\"InfoRow__header\"]}>\n        {header}\n      </Subhead>\n    )}\n    {children}\n  </Headline>\n);\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAA+C;AAO/C;AACA;AACA;AACO,IAAMA,OAAO,GAAG,SAAVA,OAAO;EAAA,IAClBC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAAA,oBAEZ,oBAAC,kBAAQ,6BACHA,SAAS;IACb,SAAS,EAAC,MAAM;IAChB,SAAS,EAAE,IAAAC,4BAAgB,iBAAoBF,SAAS,CAAE;IAC1D,MAAM,EAAC;EAAG,IAET,IAAAG,mBAAY,EAACL,MAAM,CAAC,iBACnB,oBAAC,gBAAO;IAAC,SAAS,EAAC,MAAM;IAAC,SAAS;EAA4B,GAC5DA,MAAM,CAEV,EACAC,QAAQ,CACA;AAAA,CACZ;AAAC"}
+{"version":3,"file":"InfoRow.js","names":["InfoRow","header","children","className","restProps","classNames","hasReactNode"],"sources":["../../../../src/components/InfoRow/InfoRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './InfoRow.module.css';\n\nexport interface InfoRowProps extends React.HTMLAttributes<HTMLDivElement> {\n  header: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/InfoRow\n */\nexport const InfoRow = ({ header, children, className, ...restProps }: InfoRowProps) => (\n  <Headline\n    {...restProps}\n    Component=\"span\"\n    className={classNames(styles['InfoRow'], className)}\n    weight=\"3\"\n  >\n    {hasReactNode(header) && (\n      <Subhead Component=\"span\" className={styles['InfoRow__header']}>\n        {header}\n      </Subhead>\n    )}\n    {children}\n  </Headline>\n);\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AAA2D;AAO3D;AACA;AACA;AACO,IAAMA,OAAO,GAAG,SAAVA,OAAO;EAAA,IAAMC,MAAM,QAANA,MAAM;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAAA,oBACjE,oBAAC,kBAAQ,6BACHA,SAAS;IACb,SAAS,EAAC,MAAM;IAChB,SAAS,EAAE,IAAAC,gBAAU,iBAAoBF,SAAS,CAAE;IACpD,MAAM,EAAC;EAAG,IAET,IAAAG,kBAAY,EAACL,MAAM,CAAC,iBACnB,oBAAC,gBAAO;IAAC,SAAS,EAAC,MAAM;IAAC,SAAS;EAA4B,GAC5DA,MAAM,CAEV,EACAC,QAAQ,CACA;AAAA,CACZ;AAAC"}

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

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { FormFieldProps } from "../FormField/FormField";
-import { HasAlign, HasRef, HasRootRef } from "../../types";
+import * as React from 'react';
+import { FormFieldProps } from '../FormField/FormField';
+import { HasAlign, HasRef, HasRootRef } from '../../types';
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement>, HasRootRef<HTMLDivElement>, HasAlign, FormFieldProps {
 }
 /**

package/dist/cjs/components/Input/Input.js

@@ -9,7 +9,7 @@ exports.Input = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _FormField = require("../FormField/FormField");
 var _getSizeYClassName = require("../../helpers/getSizeYClassName");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
@@ -19,7 +19,7 @@ var _excluded = ["type", "align", "getRef", "className", "getRootRef", "style",
  */
 var Input = function Input(_ref) {
   var _ref$type = _ref.type,
-    type = _ref$type === void 0 ? "text" : _ref$type,
+    type = _ref$type === void 0 ? 'text' : _ref$type,
     align = _ref.align,
     getRef = _ref.getRef,
     className = _ref.className,
@@ -33,7 +33,7 @@ var Input = function Input(_ref) {
     sizeY = _useAdaptivity.sizeY;
   return /*#__PURE__*/React.createElement(_FormField.FormField, {
     style: style,
-    className: (0, _classNames.classNamesString)("vkuiInput", align && styles["Input--align-".concat(align)], (0, _getSizeYClassName.getSizeYClassName)("vkuiInput", sizeY), before && "vkuiInput--hasBefore", after && "vkuiInput--hasAfter", className),
+    className: (0, _vkjs.classNames)("vkuiInput", align && styles["Input--align-".concat(align)], (0, _getSizeYClassName.getSizeYClassName)("vkuiInput", sizeY), before && "vkuiInput--hasBefore", after && "vkuiInput--hasAfter", className),
     getRootRef: getRootRef,
     before: before,
     after: after,

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["Input","type","align","getRef","className","getRootRef","style","before","after","status","restProps","useAdaptivity","sizeY","classNamesString","styles","getSizeYClassName","disabled"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { FormField, FormFieldProps } from \"../FormField/FormField\";\nimport { HasAlign, HasRef, HasRootRef } from \"../../types\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport styles from \"./Input.module.css\";\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,\n  getRef,\n  className,\n  getRootRef,\n  style,\n  before,\n  after,\n  status,\n  ...restProps\n}: InputProps) => {\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <FormField\n      style={style}\n      className={classNamesString(\n        styles[\"Input\"],\n        align && styles[`Input--align-${align}`],\n        getSizeYClassName(styles[\"Input\"], 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      status={status}\n    >\n      <input\n        {...restProps}\n        type={type}\n        className={styles[\"Input__el\"]}\n        ref={getRef}\n      />\n    </FormField>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AAA0D;AAU1D;AACA;AACA;AACO,IAAMA,KAAK,GAAG,SAARA,KAAK,OAWA;EAAA,qBAVhBC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IACbC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACHC,SAAS;EAEZ,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EAEb,oBACE,oBAAC,oBAAS;IACR,KAAK,EAAEN,KAAM;IACb,SAAS,EAAE,IAAAO,4BAAgB,eAEzBX,KAAK,IAAIY,MAAM,wBAAiBZ,KAAK,EAAG,EACxC,IAAAa,oCAAiB,eAAkBH,KAAK,CAAC,EACzCL,MAAM,0BAA8B,EACpCC,KAAK,yBAA6B,EAClCJ,SAAS,CACT;IACF,UAAU,EAAEC,UAAW;IACvB,MAAM,EAAEE,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,QAAQ,EAAEE,SAAS,CAACM,QAAS;IAC7B,MAAM,EAAEP;EAAO,gBAEf,wDACMC,SAAS;IACb,IAAI,EAAET,IAAK;IACX,SAAS,iBAAsB;IAC/B,GAAG,EAAEE;EAAO,GACZ,CACQ;AAEhB,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"Input.js","names":["Input","type","align","getRef","className","getRootRef","style","before","after","status","restProps","useAdaptivity","sizeY","classNames","styles","getSizeYClassName","disabled"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport styles from './Input.module.css';\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,\n  getRef,\n  className,\n  getRootRef,\n  style,\n  before,\n  after,\n  status,\n  ...restProps\n}: InputProps) => {\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(\n        styles['Input'],\n        align && styles[`Input--align-${align}`],\n        getSizeYClassName(styles['Input'], 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      status={status}\n    >\n      <input {...restProps} type={type} className={styles['Input__el']} ref={getRef} />\n    </FormField>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AAA0D;AAU1D;AACA;AACA;AACO,IAAMA,KAAK,GAAG,SAARA,KAAK,OAWA;EAAA,qBAVhBC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IACbC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACHC,SAAS;EAEZ,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EAEb,oBACE,oBAAC,oBAAS;IACR,KAAK,EAAEN,KAAM;IACb,SAAS,EAAE,IAAAO,gBAAU,eAEnBX,KAAK,IAAIY,MAAM,wBAAiBZ,KAAK,EAAG,EACxC,IAAAa,oCAAiB,eAAkBH,KAAK,CAAC,EACzCL,MAAM,0BAA8B,EACpCC,KAAK,yBAA6B,EAClCJ,SAAS,CACT;IACF,UAAU,EAAEC,UAAW;IACvB,MAAM,EAAEE,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,QAAQ,EAAEE,SAAS,CAACM,QAAS;IAC7B,MAAM,EAAEP;EAAO,gBAEf,wDAAWC,SAAS;IAAE,IAAI,EAAET,IAAK;IAAC,SAAS,iBAAsB;IAAC,GAAG,EAAEE;EAAO,GAAG,CACvE;AAEhB,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;AAAA"}

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasRootRef } from '../../types';
 export interface InputLikeProps extends React.HTMLAttributes<HTMLSpanElement>, HasRootRef<HTMLSpanElement> {
     length: number;
     index: number;

package/dist/cjs/components/InputLike/InputLike.js

@@ -11,7 +11,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var React = _interopRequireWildcard(require("react"));
 var _callMultiple = require("../../lib/callMultiple");
 var _utils = require("../../lib/utils");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _excluded = ["value", "length", "index", "onElementSelect", "onClick", "onFocus", "getRootRef", "className"];
 var MASK_SYMBOL = String.fromCharCode(0x2007);
 function getMaskElements(length) {
@@ -40,7 +40,7 @@ var InputLike = function InputLike(_ref) {
     onElementSelect === null || onElementSelect === void 0 ? void 0 : onElementSelect(index);
   }, [index, onElementSelect]);
   return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({
-    className: (0, _classNames.classNamesString)("vkuiInputLike", (value === null || value === void 0 ? void 0 : value.length) === length && "vkuiInputLike--full", className),
+    className: (0, _vkjs.classNames)("vkuiInputLike", (value === null || value === void 0 ? void 0 : value.length) === length && "vkuiInputLike--full", className),
     tabIndex: 0,
     ref: getRootRef,
     onClick: (0, _callMultiple.callMultiple)(onClick, handleElementSelect),
@@ -51,5 +51,5 @@ var InputLike = function InputLike(_ref) {
   }, value.slice(length - 1)), getMaskElements(length - ((_value$length = value === null || value === void 0 ? void 0 : value.length) !== null && _value$length !== void 0 ? _value$length : 0)));
 };
 exports.InputLike = InputLike;
-InputLike.displayName = "InputLike";
+InputLike.displayName = 'InputLike';
 //# sourceMappingURL=InputLike.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputLike.js","names":["MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","InputLike","value","onElementSelect","onClick","onFocus","getRootRef","className","props","handleElementSelect","React","useCallback","event","stopPropagation","classNamesString","callMultiple","slice","displayName"],"sources":["../../../../src/components/InputLike/InputLike.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { callMultiple } from \"../../lib/callMultiple\";\nimport { stopPropagation } from \"../../lib/utils\";\nimport { classNamesString } from \"../../lib/classNames\";\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={classNamesString(\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"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AAAwD;AAaxD,IAAMA,WAAW,GAAGC,MAAM,CAACC,YAAY,CAAC,MAAM,CAAC;AAE/C,SAASC,eAAe,CAACC,MAAc,EAAE;EACvC,IAAMC,MAAM,GAAG,EAAE;EACjB,KAAK,IAAIC,MAAK,GAAG,CAAC,EAAEA,MAAK,GAAGF,MAAM,EAAEE,MAAK,IAAI,CAAC,EAAE;IAC9CD,MAAM,CAACE,IAAI,eACT;MAAM,GAAG,EAAED,MAAM;MAAC,SAAS;IAA4B,GACpDN,WAAW,CACP,CACR;EACH;EACA,OAAOK,MAAM;AACf;AAEO,IAAMG,SAAS,GAAG,SAAZA,SAAS,OAUA;EAAA;EAAA,IATpBC,KAAK,QAALA,KAAK;IACLL,MAAM,QAANA,MAAM;IACNE,KAAK,QAALA,KAAK;IACLI,eAAe,QAAfA,eAAe;IACfC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,KAAK;EAER,IAAMC,mBAAmB,GAAGC,KAAK,CAACC,WAAW,CAC3C,UAACC,KAAwC,EAAK;IAC5C,IAAAC,sBAAe,EAACD,KAAK,CAAC;IACtBT,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAGJ,KAAK,CAAC;EAC1B,CAAC,EACD,CAACA,KAAK,EAAEI,eAAe,CAAC,CACzB;EAED,oBACE;IACE,SAAS,EAAE,IAAAW,4BAAgB,mBAEzB,CAAAZ,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEL,MAAM,MAAKA,MAAM,yBAA6B,EACrDU,SAAS,CACT;IACF,QAAQ,EAAE,CAAE;IACZ,GAAG,EAAED,UAAW;IAChB,OAAO,EAAE,IAAAS,0BAAY,EAACX,OAAO,EAAEK,mBAAmB,CAAE;IACpD,OAAO,EAAE,IAAAM,0BAAY,EAACF,sBAAe,EAAER,OAAO;EAAE,GAC5CG,KAAK,GAERN,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEc,KAAK,CAAC,CAAC,EAAEnB,MAAM,GAAG,CAAC,CAAC,EAC3B,CAAAK,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEc,KAAK,CAACnB,MAAM,GAAG,CAAC,CAAC,kBACvB;IAAM,GAAG,EAAEE,KAAM;IAAC,SAAS;EAAsC,GAC9DG,KAAK,CAACc,KAAK,CAACnB,MAAM,GAAG,CAAC,CAAC,CAE3B,EACAD,eAAe,CAACC,MAAM,qBAAIK,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEL,MAAM,yDAAI,CAAC,CAAC,CAAC,CAC1C;AAEX,CAAC;AAAC;AAEFI,SAAS,CAACgB,WAAW,GAAG,WAAW"}
+{"version":3,"file":"InputLike.js","names":["MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","InputLike","value","onElementSelect","onClick","onFocus","getRootRef","className","props","handleElementSelect","React","useCallback","event","stopPropagation","classNames","callMultiple","slice","displayName"],"sources":["../../../../src/components/InputLike/InputLike.tsx"],"sourcesContent":["import * as React from 'react';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { stopPropagation } from '../../lib/utils';\nimport { classNames } from '@vkontakte/vkjs';\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"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AAA6C;AAa7C,IAAMA,WAAW,GAAGC,MAAM,CAACC,YAAY,CAAC,MAAM,CAAC;AAE/C,SAASC,eAAe,CAACC,MAAc,EAAE;EACvC,IAAMC,MAAM,GAAG,EAAE;EACjB,KAAK,IAAIC,MAAK,GAAG,CAAC,EAAEA,MAAK,GAAGF,MAAM,EAAEE,MAAK,IAAI,CAAC,EAAE;IAC9CD,MAAM,CAACE,IAAI,eACT;MAAM,GAAG,EAAED,MAAM;MAAC,SAAS;IAA4B,GACpDN,WAAW,CACP,CACR;EACH;EACA,OAAOK,MAAM;AACf;AAEO,IAAMG,SAAS,GAAG,SAAZA,SAAS,OAUA;EAAA;EAAA,IATpBC,KAAK,QAALA,KAAK;IACLL,MAAM,QAANA,MAAM;IACNE,KAAK,QAALA,KAAK;IACLI,eAAe,QAAfA,eAAe;IACfC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,KAAK;EAER,IAAMC,mBAAmB,GAAGC,KAAK,CAACC,WAAW,CAC3C,UAACC,KAAwC,EAAK;IAC5C,IAAAC,sBAAe,EAACD,KAAK,CAAC;IACtBT,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAGJ,KAAK,CAAC;EAC1B,CAAC,EACD,CAACA,KAAK,EAAEI,eAAe,CAAC,CACzB;EAED,oBACE;IACE,SAAS,EAAE,IAAAW,gBAAU,mBAEnB,CAAAZ,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEL,MAAM,MAAKA,MAAM,yBAA6B,EACrDU,SAAS,CACT;IACF,QAAQ,EAAE,CAAE;IACZ,GAAG,EAAED,UAAW;IAChB,OAAO,EAAE,IAAAS,0BAAY,EAACX,OAAO,EAAEK,mBAAmB,CAAE;IACpD,OAAO,EAAE,IAAAM,0BAAY,EAACF,sBAAe,EAAER,OAAO;EAAE,GAC5CG,KAAK,GAERN,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEc,KAAK,CAAC,CAAC,EAAEnB,MAAM,GAAG,CAAC,CAAC,EAC3B,CAAAK,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEc,KAAK,CAACnB,MAAM,GAAG,CAAC,CAAC,kBACvB;IAAM,GAAG,EAAEE,KAAM;IAAC,SAAS;EAAsC,GAC9DG,KAAK,CAACc,KAAK,CAACnB,MAAM,GAAG,CAAC,CAAC,CAE3B,EACAD,eAAe,CAACC,MAAM,qBAAIK,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEL,MAAM,yDAAI,CAAC,CAAC,CAAC,CAC1C;AAEX,CAAC;AAAC;AAEFI,SAAS,CAACgB,WAAW,GAAG,WAAW"}

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

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

package/dist/cjs/components/InputLike/InputLikeDivider.js

@@ -9,14 +9,14 @@ exports.InputLikeDivider = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _excluded = ["children", "className"];
 var InputLikeDivider = function InputLikeDivider(_ref) {
   var children = _ref.children,
     className = _ref.className,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({
-    className: (0, _classNames.classNamesString)("vkuiInputLikeDivider", className)
+    className: (0, _vkjs.classNames)("vkuiInputLikeDivider", className)
   }, props), children);
 };
 exports.InputLikeDivider = InputLikeDivider;

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

@@ -1 +1 @@
-{"version":3,"file":"InputLikeDivider.js","names":["InputLikeDivider","children","className","props","classNamesString"],"sources":["../../../../src/components/InputLike/InputLikeDivider.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport styles from \"./InputLikeDivider.module.css\";\n\nexport const InputLikeDivider = ({\n  children,\n  className,\n  ...props\n}: React.InputHTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={classNamesString(styles[\"InputLikeDivider\"], className)}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAAwD;AAGjD,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgB,OAIqB;EAAA,IAHhDC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,KAAK;EAER,oBACE;IACE,SAAS,EAAE,IAAAC,4BAAgB,0BAA6BF,SAAS;EAAE,GAC/DC,KAAK,GAERF,QAAQ,CACJ;AAEX,CAAC;AAAC"}
+{"version":3,"file":"InputLikeDivider.js","names":["InputLikeDivider","children","className","props","classNames"],"sources":["../../../../src/components/InputLike/InputLikeDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './InputLikeDivider.module.css';\n\nexport const InputLikeDivider = ({\n  children,\n  className,\n  ...props\n}: React.InputHTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span className={classNames(styles['InputLikeDivider'], className)} {...props}>\n      {children}\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAA6C;AAGtC,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgB,OAIqB;EAAA,IAHhDC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,KAAK;EAER,oBACE;IAAM,SAAS,EAAE,IAAAC,gBAAU,0BAA6BF,SAAS;EAAE,GAAKC,KAAK,GAC1EF,QAAQ,CACJ;AAEX,CAAC;AAAC"}

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TappableProps } from "../Tappable/Tappable";
+import { TappableProps } from '../Tappable/Tappable';
 export interface LinkProps extends TappableProps {
     /**
      * Включает состояние `visited`, которое позволяет пользователю понять посещал ли он ссылку или нет

package/dist/cjs/components/Link/Link.js

@@ -9,7 +9,7 @@ exports.Link = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _Tappable = require("../Tappable/Tappable");
 var _excluded = ["hasVisited", "children", "className"];
 /**
@@ -21,9 +21,9 @@ var Link = function Link(_ref) {
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/React.createElement(_Tappable.Tappable, (0, _extends2.default)({
-    Component: restProps.href ? "a" : "button"
+    Component: restProps.href ? 'a' : 'button'
   }, restProps, {
-    className: (0, _classNames.classNamesString)("vkuiLink", hasVisited && "vkuiLink--has-visited", className),
+    className: (0, _vkjs.classNames)("vkuiLink", hasVisited && "vkuiLink--has-visited", className),
     hasHover: false,
     activeMode: "opacity",
     focusVisibleMode: "vkuiLink--focus-visible"

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

@@ -1 +1 @@
-{"version":3,"file":"Link.js","names":["Link","hasVisited","children","className","restProps","href","classNamesString"],"sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { TappableProps, Tappable } 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 = ({\n  hasVisited,\n  children,\n  className,\n  ...restProps\n}: LinkProps) => {\n  return (\n    <Tappable\n      Component={restProps.href ? \"a\" : \"button\"}\n      {...restProps}\n      className={classNamesString(\n        styles[\"Link\"],\n        hasVisited && styles[\"Link--has-visited\"],\n        className\n      )}\n      hasHover={false}\n      activeMode=\"opacity\"\n      focusVisibleMode={styles[\"Link--focus-visible\"]}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAA+D;AAU/D;AACA;AACA;AACO,IAAMA,IAAI,GAAG,SAAPA,IAAI,OAKA;EAAA,IAJfC,UAAU,QAAVA,UAAU;IACVC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,oBACE,oBAAC,kBAAQ;IACP,SAAS,EAAEA,SAAS,CAACC,IAAI,GAAG,GAAG,GAAG;EAAS,GACvCD,SAAS;IACb,SAAS,EAAE,IAAAE,4BAAgB,cAEzBL,UAAU,2BAA+B,EACzCE,SAAS,CACT;IACF,QAAQ,EAAE,KAAM;IAChB,UAAU,EAAC,SAAS;IACpB,gBAAgB;EAAgC,IAE/CD,QAAQ,CACA;AAEf,CAAC;AAAC"}
+{"version":3,"file":"Link.js","names":["Link","hasVisited","children","className","restProps","href","classNames"],"sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { TappableProps, Tappable } 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"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAA+D;AAU/D;AACA;AACA;AACO,IAAMA,IAAI,GAAG,SAAPA,IAAI,OAAqE;EAAA,IAA/DC,UAAU,QAAVA,UAAU;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAClE,oBACE,oBAAC,kBAAQ;IACP,SAAS,EAAEA,SAAS,CAACC,IAAI,GAAG,GAAG,GAAG;EAAS,GACvCD,SAAS;IACb,SAAS,EAAE,IAAAE,gBAAU,cAAiBL,UAAU,2BAA+B,EAAEE,SAAS,CAAE;IAC5F,QAAQ,EAAE,KAAM;IAChB,UAAU,EAAC,SAAS;IACpB,gBAAgB;EAAgC,IAE/CD,QAAQ,CACA;AAEf,CAAC;AAAC"}

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export declare type ListProps = React.HTMLAttributes<HTMLDivElement>;
 /**
  * @see https://vkcom.github.io/VKUI/#/List

package/dist/cjs/components/List/List.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _ListContext = require("./ListContext");
 var _excluded = ["children", "className"];
 /**
@@ -27,7 +27,7 @@ var List = function List(_ref) {
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     role: "list"
   }, restProps, {
-    className: (0, _classNames.classNamesString)("vkuiList", isDragging && "vkuiList--dragging", className)
+    className: (0, _vkjs.classNames)("vkuiList", isDragging && "vkuiList--dragging", className)
   }), /*#__PURE__*/React.createElement(_ListContext.ListContext.Provider, {
     value: React.useMemo(function () {
       return {

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

@@ -1 +1 @@
-{"version":3,"file":"List.js","names":["List","children","className","restProps","React","useState","isDragging","toggleDrag","classNamesString","useMemo"],"sources":["../../../../src/components/List/List.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\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={classNamesString(\n        styles[\"List\"],\n        isDragging && styles[\"List--dragging\"],\n        className\n      )}\n    >\n      <ListContext.Provider value={React.useMemo(() => ({ toggleDrag }), [])}>\n        {children}\n      </ListContext.Provider>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AAA4C;AAK5C;AACA;AACA;AACO,IAAMA,IAAI,GAAG,SAAPA,IAAI,OAAyD;EAAA,IAAnDC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EACtD,sBAAiCC,KAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA/CC,UAAU;IAAEC,UAAU;EAE7B,oBACE;IACE,IAAI,EAAC;EAAM,GACPJ,SAAS;IACb,SAAS,EAAE,IAAAK,4BAAgB,cAEzBF,UAAU,wBAA4B,EACtCJ,SAAS;EACT,iBAEF,oBAAC,wBAAW,CAAC,QAAQ;IAAC,KAAK,EAAEE,KAAK,CAACK,OAAO,CAAC;MAAA,OAAO;QAAEF,UAAU,EAAVA;MAAW,CAAC;IAAA,CAAC,EAAE,EAAE;EAAE,GACpEN,QAAQ,CACY,CACnB;AAEV,CAAC;AAAC"}
+{"version":3,"file":"List.js","names":["List","children","className","restProps","React","useState","isDragging","toggleDrag","classNames","useMemo"],"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 && styles['List--dragging'], className)}\n    >\n      <ListContext.Provider value={React.useMemo(() => ({ toggleDrag }), [])}>\n        {children}\n      </ListContext.Provider>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AAA4C;AAK5C;AACA;AACA;AACO,IAAMA,IAAI,GAAG,SAAPA,IAAI,OAAyD;EAAA,IAAnDC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EACtD,sBAAiCC,KAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA/CC,UAAU;IAAEC,UAAU;EAE7B,oBACE;IACE,IAAI,EAAC;EAAM,GACPJ,SAAS;IACb,SAAS,EAAE,IAAAK,gBAAU,cAAiBF,UAAU,wBAA4B,EAAEJ,SAAS;EAAE,iBAEzF,oBAAC,wBAAW,CAAC,QAAQ;IAAC,KAAK,EAAEE,KAAK,CAACK,OAAO,CAAC;MAAA,OAAO;QAAEF,UAAU,EAAVA;MAAW,CAAC;IAAA,CAAC,EAAE,EAAE;EAAE,GACpEN,QAAQ,CACY,CACnB;AAEV,CAAC;AAAC"}

package/dist/cjs/components/List/ListContext.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export declare const ListContext: React.Context<{
     toggleDrag: (value: boolean) => void;
 }>;

package/dist/cjs/components/List/ListContext.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ListContext = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _utils = require("../../lib/utils");
+var _vkjs = require("@vkontakte/vkjs");
 var ListContext = /*#__PURE__*/React.createContext({
-  toggleDrag: _utils.noop
+  toggleDrag: _vkjs.noop
 });
 exports.ListContext = ListContext;
 //# sourceMappingURL=ListContext.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListContext.js","names":["ListContext","React","createContext","toggleDrag","noop"],"sources":["../../../../src/components/List/ListContext.ts"],"sourcesContent":["import * as React from \"react\";\nimport { noop } from \"../../lib/utils\";\n\nexport const ListContext = React.createContext({\n  toggleDrag: noop as (value: boolean) => void,\n});\n"],"mappings":";;;;;;;AAAA;AACA;AAEO,IAAMA,WAAW,gBAAGC,KAAK,CAACC,aAAa,CAAC;EAC7CC,UAAU,EAAEC;AACd,CAAC,CAAC;AAAC"}
+{"version":3,"file":"ListContext.js","names":["ListContext","React","createContext","toggleDrag","noop"],"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"],"mappings":";;;;;;;AAAA;AACA;AAEO,IAAMA,WAAW,gBAAGC,KAAK,CAACC,aAAa,CAAC;EAC7CC,UAAU,EAAEC;AACd,CAAC,CAAC;AAAC"}

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

@@ -1,10 +1,10 @@
-import React from "react";
-import { ConfigProviderContextInterface } from "../ConfigProvider/ConfigProviderContext";
+import React from 'react';
+import { ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';
 export interface LocaleProviderProps {
     /**
      * Строка с языковой меткой BCP 47
      */
-    value: ConfigProviderContextInterface["locale"];
+    value: ConfigProviderContextInterface['locale'];
     children: React.ReactNode;
 }
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"LocaleProvider.js","names":["LocaleProvider","value","children"],"sources":["../../../../src/components/LocaleProvider/LocaleProvider.tsx"],"sourcesContent":["import React from \"react\";\nimport { ConfigProviderOverride } from \"../ConfigProvider/ConfigProviderOverride\";\nimport { ConfigProviderContextInterface } from \"../ConfigProvider/ConfigProviderContext\";\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 * @version 5.0.0\n * @see https://vkcom.github.io/VKUI/#/LocaleProvider\n */\nexport function LocaleProvider({ value, children }: LocaleProviderProps) {\n  return (\n    <ConfigProviderOverride locale={value}>{children}</ConfigProviderOverride>\n  );\n}\n"],"mappings":";;;;;;;AAAA;AACA;AAWA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,cAAc,OAA2C;EAAA,IAAxCC,KAAK,QAALA,KAAK;IAAEC,QAAQ,QAARA,QAAQ;EAC9C,oBACE,6BAAC,8CAAsB;IAAC,MAAM,EAAED;EAAM,GAAEC,QAAQ,CAA0B;AAE9E"}
+{"version":3,"file":"LocaleProvider.js","names":["LocaleProvider","value","children"],"sources":["../../../../src/components/LocaleProvider/LocaleProvider.tsx"],"sourcesContent":["import React from 'react';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\nimport { ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';\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 * @version 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"],"mappings":";;;;;;;AAAA;AACA;AAWA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,cAAc,OAA2C;EAAA,IAAxCC,KAAK,QAALA,KAAK;IAAEC,QAAQ,QAARA,QAAQ;EAC9C,oBAAO,6BAAC,8CAAsB;IAAC,MAAM,EAAED;EAAM,GAAEC,QAAQ,CAA0B;AACnF"}

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export interface MiniInfoCellProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Иконка слева.<br />
@@ -18,7 +18,7 @@ export interface MiniInfoCellProps extends React.HTMLAttributes<HTMLDivElement>
      * - `add` – тип ячейки, который показывает, что взаимодействие с ней должно вызывать действие добавления чего-то.
      * - `more` – взаимодействие с такой ячейкой должно открывать какую-то подробную информацию.
      */
-    mode?: "base" | "accent" | "add" | "more";
+    mode?: 'base' | 'accent' | 'add' | 'more';
     /**
      * Тип отображения текста:
      *
@@ -26,7 +26,7 @@ export interface MiniInfoCellProps extends React.HTMLAttributes<HTMLDivElement>
      * - `short` – максимально отображается 3 строки, остальное обрезается.
      * - `full` – текст отображается полностью.
      */
-    textWrap?: "nowrap" | "short" | "full";
+    textWrap?: 'nowrap' | 'short' | 'full';
     /**
      * Передавать `true`, если предполагается переход при клике по ячейке.
      */

package/dist/cjs/components/MiniInfoCell/MiniInfoCell.js

@@ -9,10 +9,9 @@ exports.MiniInfoCell = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _Paragraph = require("../Typography/Paragraph/Paragraph");
 var _Tappable = require("../Tappable/Tappable");
-var _utils = require("../../lib/utils");
 var _icons = require("@vkontakte/icons");
 var _excluded = ["before", "after", "children", "mode", "textWrap", "expandable", "className"];
 /**
@@ -23,22 +22,22 @@ var MiniInfoCell = function MiniInfoCell(_ref) {
     after = _ref.after,
     children = _ref.children,
     _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? "base" : _ref$mode,
+    mode = _ref$mode === void 0 ? 'base' : _ref$mode,
     _ref$textWrap = _ref.textWrap,
-    textWrap = _ref$textWrap === void 0 ? "nowrap" : _ref$textWrap,
+    textWrap = _ref$textWrap === void 0 ? 'nowrap' : _ref$textWrap,
     _ref$expandable = _ref.expandable,
     expandable = _ref$expandable === void 0 ? false : _ref$expandable,
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var cellClasses = (0, _classNames.classNamesString)("vkuiMiniInfoCell", styles["MiniInfoCell--textWrap-".concat(textWrap)], mode !== "base" && styles["MiniInfoCell--mode-".concat(mode)], className);
+  var cellClasses = (0, _vkjs.classNames)("vkuiMiniInfoCell", styles["MiniInfoCell--textWrap-".concat(textWrap)], mode !== 'base' && styles["MiniInfoCell--mode-".concat(mode)], className);
   var cellContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     className: "vkuiMiniInfoCell__before"
   }, before), /*#__PURE__*/React.createElement("div", {
     className: "vkuiMiniInfoCell__middle"
   }, /*#__PURE__*/React.createElement(_Paragraph.Paragraph, {
     className: "vkuiMiniInfoCell__content",
-    weight: mode === "more" ? "2" : undefined
-  }, children), expandable && /*#__PURE__*/React.createElement(_icons.Icon16Chevron, null)), (0, _utils.hasReactNode)(after) && /*#__PURE__*/React.createElement("span", {
+    weight: mode === 'more' ? '2' : undefined
+  }, children), expandable && /*#__PURE__*/React.createElement(_icons.Icon16Chevron, null)), (0, _vkjs.hasReactNode)(after) && /*#__PURE__*/React.createElement("span", {
     className: "vkuiMiniInfoCell__after"
   }, after));
   return restProps.onClick ? /*#__PURE__*/React.createElement(_Tappable.Tappable, (0, _extends2.default)({

package/dist/cjs/components/MiniInfoCell/MiniInfoCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"MiniInfoCell.js","names":["MiniInfoCell","before","after","children","mode","textWrap","expandable","className","restProps","cellClasses","classNamesString","styles","cellContent","undefined","hasReactNode","onClick"],"sources":["../../../../src/components/MiniInfoCell/MiniInfoCell.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Paragraph } from \"../Typography/Paragraph/Paragraph\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Icon16Chevron } from \"@vkontakte/icons\";\nimport styles from \"./MiniInfoCell.module.css\";\n\nexport interface MiniInfoCellProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Иконка слева.<br />\n   * Рекомендуется использовать иконки размера 20.\n   */\n  before: React.ReactNode;\n\n  /**\n   * Содержимое справа.<br />\n   * `<UsersStack size=\"s\" />` или `<Avatar size={24} />`\n   */\n  after?: React.ReactNode;\n\n  /**\n   * Тип ячейки:\n   *\n   * - `base` – базовая ячейка с серой иконкой и серым текстом.<br />\n   * В компонент можно передать `Link`, чтобы визуально сделать часть текста ссылкой.\n   * - `add` – тип ячейки, который показывает, что взаимодействие с ней должно вызывать действие добавления чего-то.\n   * - `more` – взаимодействие с такой ячейкой должно открывать какую-то подробную информацию.\n   */\n  mode?: \"base\" | \"accent\" | \"add\" | \"more\";\n\n  /**\n   * Тип отображения текста:\n   *\n   * - `nowrap` – в одну строку, текст не переносится и обрезается.\n   * - `short` – максимально отображается 3 строки, остальное обрезается.\n   * - `full` – текст отображается полностью.\n   */\n  textWrap?: \"nowrap\" | \"short\" | \"full\";\n\n  /**\n   * Передавать `true`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/MiniInfoCell\n */\nexport const MiniInfoCell = ({\n  before,\n  after,\n  children,\n  mode = \"base\",\n  textWrap = \"nowrap\",\n  expandable = false,\n  className,\n  ...restProps\n}: MiniInfoCellProps) => {\n  const cellClasses = classNamesString(\n    styles[\"MiniInfoCell\"],\n    styles[`MiniInfoCell--textWrap-${textWrap}`],\n    mode !== \"base\" && styles[`MiniInfoCell--mode-${mode}`],\n    className\n  );\n\n  const cellContent = (\n    <React.Fragment>\n      <span className={styles[\"MiniInfoCell__before\"]}>{before}</span>\n      <div className={styles[\"MiniInfoCell__middle\"]}>\n        <Paragraph\n          className={styles[\"MiniInfoCell__content\"]}\n          weight={mode === \"more\" ? \"2\" : undefined}\n        >\n          {children}\n        </Paragraph>\n        {expandable && <Icon16Chevron />}\n      </div>\n      {hasReactNode(after) && (\n        <span className={styles[\"MiniInfoCell__after\"]}>{after}</span>\n      )}\n    </React.Fragment>\n  );\n\n  return restProps.onClick ? (\n    <Tappable\n      Component=\"div\"\n      role=\"button\"\n      {...restProps}\n      className={cellClasses}\n    >\n      {cellContent}\n    </Tappable>\n  ) : (\n    <div {...restProps} className={cellClasses}>\n      {cellContent}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAAiD;AA0CjD;AACA;AACA;AACO,IAAMA,YAAY,GAAG,SAAfA,YAAY,OASA;EAAA,IARvBC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IAAA,qBACbC,QAAQ;IAARA,QAAQ,8BAAG,QAAQ;IAAA,uBACnBC,UAAU;IAAVA,UAAU,gCAAG,KAAK;IAClBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,WAAW,GAAG,IAAAC,4BAAgB,sBAElCC,MAAM,kCAA2BN,QAAQ,EAAG,EAC5CD,IAAI,KAAK,MAAM,IAAIO,MAAM,8BAAuBP,IAAI,EAAG,EACvDG,SAAS,CACV;EAED,IAAMK,WAAW,gBACf,oBAAC,KAAK,CAAC,QAAQ,qBACb;IAAM,SAAS;EAAiC,GAAEX,MAAM,CAAQ,eAChE;IAAK,SAAS;EAAiC,gBAC7C,oBAAC,oBAAS;IACR,SAAS,6BAAkC;IAC3C,MAAM,EAAEG,IAAI,KAAK,MAAM,GAAG,GAAG,GAAGS;EAAU,GAEzCV,QAAQ,CACC,EACXG,UAAU,iBAAI,oBAAC,oBAAa,OAAG,CAC5B,EACL,IAAAQ,mBAAY,EAACZ,KAAK,CAAC,iBAClB;IAAM,SAAS;EAAgC,GAAEA,KAAK,CACvD,CAEJ;EAED,OAAOM,SAAS,CAACO,OAAO,gBACtB,oBAAC,kBAAQ;IACP,SAAS,EAAC,KAAK;IACf,IAAI,EAAC;EAAQ,GACTP,SAAS;IACb,SAAS,EAAEC;EAAY,IAEtBG,WAAW,CACH,gBAEX,sDAASJ,SAAS;IAAE,SAAS,EAAEC;EAAY,IACxCG,WAAW,CAEf;AACH,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"MiniInfoCell.js","names":["MiniInfoCell","before","after","children","mode","textWrap","expandable","className","restProps","cellClasses","classNames","styles","cellContent","undefined","hasReactNode","onClick"],"sources":["../../../../src/components/MiniInfoCell/MiniInfoCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Icon16Chevron } from '@vkontakte/icons';\nimport styles from './MiniInfoCell.module.css';\n\nexport interface MiniInfoCellProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Иконка слева.<br />\n   * Рекомендуется использовать иконки размера 20.\n   */\n  before: React.ReactNode;\n\n  /**\n   * Содержимое справа.<br />\n   * `<UsersStack size=\"s\" />` или `<Avatar size={24} />`\n   */\n  after?: React.ReactNode;\n\n  /**\n   * Тип ячейки:\n   *\n   * - `base` – базовая ячейка с серой иконкой и серым текстом.<br />\n   * В компонент можно передать `Link`, чтобы визуально сделать часть текста ссылкой.\n   * - `add` – тип ячейки, который показывает, что взаимодействие с ней должно вызывать действие добавления чего-то.\n   * - `more` – взаимодействие с такой ячейкой должно открывать какую-то подробную информацию.\n   */\n  mode?: 'base' | 'accent' | 'add' | 'more';\n\n  /**\n   * Тип отображения текста:\n   *\n   * - `nowrap` – в одну строку, текст не переносится и обрезается.\n   * - `short` – максимально отображается 3 строки, остальное обрезается.\n   * - `full` – текст отображается полностью.\n   */\n  textWrap?: 'nowrap' | 'short' | 'full';\n\n  /**\n   * Передавать `true`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/MiniInfoCell\n */\nexport const MiniInfoCell = ({\n  before,\n  after,\n  children,\n  mode = 'base',\n  textWrap = 'nowrap',\n  expandable = false,\n  className,\n  ...restProps\n}: MiniInfoCellProps) => {\n  const cellClasses = classNames(\n    styles['MiniInfoCell'],\n    styles[`MiniInfoCell--textWrap-${textWrap}`],\n    mode !== 'base' && styles[`MiniInfoCell--mode-${mode}`],\n    className,\n  );\n\n  const cellContent = (\n    <React.Fragment>\n      <span className={styles['MiniInfoCell__before']}>{before}</span>\n      <div className={styles['MiniInfoCell__middle']}>\n        <Paragraph\n          className={styles['MiniInfoCell__content']}\n          weight={mode === 'more' ? '2' : undefined}\n        >\n          {children}\n        </Paragraph>\n        {expandable && <Icon16Chevron />}\n      </div>\n      {hasReactNode(after) && <span className={styles['MiniInfoCell__after']}>{after}</span>}\n    </React.Fragment>\n  );\n\n  return restProps.onClick ? (\n    <Tappable Component=\"div\" role=\"button\" {...restProps} className={cellClasses}>\n      {cellContent}\n    </Tappable>\n  ) : (\n    <div {...restProps} className={cellClasses}>\n      {cellContent}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAiD;AAyCjD;AACA;AACA;AACO,IAAMA,YAAY,GAAG,SAAfA,YAAY,OASA;EAAA,IARvBC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IAAA,qBACbC,QAAQ;IAARA,QAAQ,8BAAG,QAAQ;IAAA,uBACnBC,UAAU;IAAVA,UAAU,gCAAG,KAAK;IAClBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,WAAW,GAAG,IAAAC,gBAAU,sBAE5BC,MAAM,kCAA2BN,QAAQ,EAAG,EAC5CD,IAAI,KAAK,MAAM,IAAIO,MAAM,8BAAuBP,IAAI,EAAG,EACvDG,SAAS,CACV;EAED,IAAMK,WAAW,gBACf,oBAAC,KAAK,CAAC,QAAQ,qBACb;IAAM,SAAS;EAAiC,GAAEX,MAAM,CAAQ,eAChE;IAAK,SAAS;EAAiC,gBAC7C,oBAAC,oBAAS;IACR,SAAS,6BAAkC;IAC3C,MAAM,EAAEG,IAAI,KAAK,MAAM,GAAG,GAAG,GAAGS;EAAU,GAEzCV,QAAQ,CACC,EACXG,UAAU,iBAAI,oBAAC,oBAAa,OAAG,CAC5B,EACL,IAAAQ,kBAAY,EAACZ,KAAK,CAAC,iBAAI;IAAM,SAAS;EAAgC,GAAEA,KAAK,CAAQ,CAEzF;EAED,OAAOM,SAAS,CAACO,OAAO,gBACtB,oBAAC,kBAAQ;IAAC,SAAS,EAAC,KAAK;IAAC,IAAI,EAAC;EAAQ,GAAKP,SAAS;IAAE,SAAS,EAAEC;EAAY,IAC3EG,WAAW,CACH,gBAEX,sDAASJ,SAAS;IAAE,SAAS,EAAEC;EAAY,IACxCG,WAAW,CAEf;AACH,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

package/dist/cjs/components/ModalCard/ModalCard.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { NavIdProps } from "../../lib/getNavId";
-import { ModalCardBaseProps } from "../ModalCardBase/ModalCardBase";
+import { NavIdProps } from '../../lib/getNavId';
+import { ModalCardBaseProps } from '../ModalCardBase/ModalCardBase';
 export interface ModalCardProps extends NavIdProps, ModalCardBaseProps {
 }
 /**

package/dist/cjs/components/ModalCard/ModalCard.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _getPlatformClassName = require("../../helpers/getPlatformClassName");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _ModalRootContext = require("../ModalRoot/ModalRootContext");
 var _types = require("../ModalRoot/types");
 var _getNavId = require("../../lib/getNavId");
@@ -19,7 +19,7 @@ var _ModalCardBase = require("../ModalCardBase/ModalCardBase");
 var _useAdaptivityWithJSMediaQueries = require("../../hooks/useAdaptivityWithJSMediaQueries");
 var _usePlatform = require("../../hooks/usePlatform");
 var _excluded = ["icon", "header", "subheader", "children", "actions", "onClose", "nav", "id", "className"];
-var warn = (0, _warnOnce.warnOnce)("ModalCard");
+var warn = (0, _warnOnce.warnOnce)('ModalCard');
 
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalCard
@@ -46,7 +46,7 @@ var ModalCard = function ModalCard(_ref) {
     refs = _useModalRegistry.refs;
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
     id: id,
-    className: (0, _classNames.classNamesString)("vkuiModalCard", (0, _getPlatformClassName.getPlatformClassName)("vkuiModalCard", platform), isDesktop && "vkuiModalCard--desktop", className)
+    className: (0, _vkjs.classNames)("vkuiModalCard", (0, _getPlatformClassName.getPlatformClassName)("vkuiModalCard", platform), isDesktop && "vkuiModalCard--desktop", className)
   }), /*#__PURE__*/React.createElement(_ModalCardBase.ModalCardBase, {
     className: "vkuiModalCard__in",
     getRootRef: refs.innerElement,

package/dist/cjs/components/ModalCard/ModalCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalCard.js","names":["warn","warnOnce","ModalCard","icon","header","subheader","children","actions","onClose","nav","id","className","restProps","useAdaptivityWithJSMediaQueries","isDesktop","platform","usePlatform","modalContext","React","useContext","ModalRootContext","useModalRegistry","getNavId","ModalType","CARD","refs","classNamesString","getPlatformClassName","innerElement"],"sources":["../../../../src/components/ModalCard/ModalCard.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { getPlatformClassName } from \"../../helpers/getPlatformClassName\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport {\n  ModalRootContext,\n  useModalRegistry,\n} from \"../ModalRoot/ModalRootContext\";\nimport { ModalType } from \"../ModalRoot/types\";\nimport { getNavId, NavIdProps } from \"../../lib/getNavId\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport {\n  ModalCardBase,\n  ModalCardBaseProps,\n} from \"../ModalCardBase/ModalCardBase\";\nimport { useAdaptivityWithJSMediaQueries } from \"../../hooks/useAdaptivityWithJSMediaQueries\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport styles from \"./ModalCard.module.css\";\n\nexport interface ModalCardProps extends NavIdProps, ModalCardBaseProps {}\n\nconst warn = warnOnce(\"ModalCard\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCard\n */\nexport const ModalCard = ({\n  icon,\n  header,\n  subheader,\n  children,\n  actions,\n  onClose,\n  nav,\n  id,\n  className,\n  ...restProps\n}: ModalCardProps) => {\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const platform = usePlatform();\n\n  const modalContext = React.useContext(ModalRootContext);\n  const { refs } = useModalRegistry(\n    getNavId({ nav, id }, warn),\n    ModalType.CARD\n  );\n\n  return (\n    <div\n      {...restProps}\n      id={id}\n      className={classNamesString(\n        styles[\"ModalCard\"],\n        getPlatformClassName(styles[\"ModalCard\"], platform),\n        isDesktop && styles[\"ModalCard--desktop\"],\n        className\n      )}\n    >\n      <ModalCardBase\n        className={styles[\"ModalCard__in\"]}\n        getRootRef={refs.innerElement}\n        icon={icon}\n        header={header}\n        subheader={subheader}\n        actions={actions}\n        onClose={onClose || modalContext.onClose}\n      >\n        {children}\n      </ModalCardBase>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AAIA;AACA;AACA;AACA;AAIA;AACA;AAAsD;AAKtD,IAAMA,IAAI,GAAG,IAAAC,kBAAQ,EAAC,WAAW,CAAC;;AAElC;AACA;AACA;AACO,IAAMC,SAAS,GAAG,SAAZA,SAAS,OAWA;EAAA,IAVpBC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,GAAG,QAAHA,GAAG;IACHC,EAAE,QAAFA,EAAE;IACFC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,4BAAsB,IAAAC,gEAA+B,GAAE;IAA/CC,SAAS,yBAATA,SAAS;EACjB,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,IAAMC,YAAY,GAAGC,KAAK,CAACC,UAAU,CAACC,kCAAgB,CAAC;EACvD,wBAAiB,IAAAC,kCAAgB,EAC/B,IAAAC,kBAAQ,EAAC;MAAEb,GAAG,EAAHA,GAAG;MAAEC,EAAE,EAAFA;IAAG,CAAC,EAAEV,IAAI,CAAC,EAC3BuB,gBAAS,CAACC,IAAI,CACf;IAHOC,IAAI,qBAAJA,IAAI;EAKZ,oBACE,sDACMb,SAAS;IACb,EAAE,EAAEF,EAAG;IACP,SAAS,EAAE,IAAAgB,4BAAgB,mBAEzB,IAAAC,0CAAoB,mBAAsBZ,QAAQ,CAAC,EACnDD,SAAS,4BAAgC,EACzCH,SAAS;EACT,iBAEF,oBAAC,4BAAa;IACZ,SAAS,qBAA0B;IACnC,UAAU,EAAEc,IAAI,CAACG,YAAa;IAC9B,IAAI,EAAEzB,IAAK;IACX,MAAM,EAAEC,MAAO;IACf,SAAS,EAAEC,SAAU;IACrB,OAAO,EAAEE,OAAQ;IACjB,OAAO,EAAEC,OAAO,IAAIS,YAAY,CAACT;EAAQ,GAExCF,QAAQ,CACK,CACZ;AAEV,CAAC;AAAC"}
+{"version":3,"file":"ModalCard.js","names":["warn","warnOnce","ModalCard","icon","header","subheader","children","actions","onClose","nav","id","className","restProps","useAdaptivityWithJSMediaQueries","isDesktop","platform","usePlatform","modalContext","React","useContext","ModalRootContext","useModalRegistry","getNavId","ModalType","CARD","refs","classNames","getPlatformClassName","innerElement"],"sources":["../../../../src/components/ModalCard/ModalCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';\nimport { ModalType } from '../ModalRoot/types';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalCardBase, ModalCardBaseProps } from '../ModalCardBase/ModalCardBase';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport styles from './ModalCard.module.css';\n\nexport interface ModalCardProps extends NavIdProps, ModalCardBaseProps {}\n\nconst warn = warnOnce('ModalCard');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCard\n */\nexport const ModalCard = ({\n  icon,\n  header,\n  subheader,\n  children,\n  actions,\n  onClose,\n  nav,\n  id,\n  className,\n  ...restProps\n}: ModalCardProps) => {\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const platform = usePlatform();\n\n  const modalContext = React.useContext(ModalRootContext);\n  const { refs } = useModalRegistry(getNavId({ nav, id }, warn), ModalType.CARD);\n\n  return (\n    <div\n      {...restProps}\n      id={id}\n      className={classNames(\n        styles['ModalCard'],\n        getPlatformClassName(styles['ModalCard'], platform),\n        isDesktop && styles['ModalCard--desktop'],\n        className,\n      )}\n    >\n      <ModalCardBase\n        className={styles['ModalCard__in']}\n        getRootRef={refs.innerElement}\n        icon={icon}\n        header={header}\n        subheader={subheader}\n        actions={actions}\n        onClose={onClose || modalContext.onClose}\n      >\n        {children}\n      </ModalCardBase>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAsD;AAKtD,IAAMA,IAAI,GAAG,IAAAC,kBAAQ,EAAC,WAAW,CAAC;;AAElC;AACA;AACA;AACO,IAAMC,SAAS,GAAG,SAAZA,SAAS,OAWA;EAAA,IAVpBC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,GAAG,QAAHA,GAAG;IACHC,EAAE,QAAFA,EAAE;IACFC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,4BAAsB,IAAAC,gEAA+B,GAAE;IAA/CC,SAAS,yBAATA,SAAS;EACjB,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,IAAMC,YAAY,GAAGC,KAAK,CAACC,UAAU,CAACC,kCAAgB,CAAC;EACvD,wBAAiB,IAAAC,kCAAgB,EAAC,IAAAC,kBAAQ,EAAC;MAAEb,GAAG,EAAHA,GAAG;MAAEC,EAAE,EAAFA;IAAG,CAAC,EAAEV,IAAI,CAAC,EAAEuB,gBAAS,CAACC,IAAI,CAAC;IAAtEC,IAAI,qBAAJA,IAAI;EAEZ,oBACE,sDACMb,SAAS;IACb,EAAE,EAAEF,EAAG;IACP,SAAS,EAAE,IAAAgB,gBAAU,mBAEnB,IAAAC,0CAAoB,mBAAsBZ,QAAQ,CAAC,EACnDD,SAAS,4BAAgC,EACzCH,SAAS;EACT,iBAEF,oBAAC,4BAAa;IACZ,SAAS,qBAA0B;IACnC,UAAU,EAAEc,IAAI,CAACG,YAAa;IAC9B,IAAI,EAAEzB,IAAK;IACX,MAAM,EAAEC,MAAO;IACf,SAAS,EAAEC,SAAU;IACrB,OAAO,EAAEE,OAAQ;IACjB,OAAO,EAAEC,OAAO,IAAIS,YAAY,CAACT;EAAQ,GAExCF,QAAQ,CACK,CACZ;AAEV,CAAC;AAAC"}

package/dist/cjs/components/ModalCardBase/ModalCardBase.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasRootRef } from '../../types';
 export interface ModalCardBaseProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
     /**
      * Иконка.