@vkontakte/vkui 5.1.2 → 5.2.1

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

@@ -1 +1 @@
-{"version":3,"file":"validators.js","names":["warnOnce","imageBaseSizes","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","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"],"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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"}
+{"version":3,"file":"validators.js","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"],"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"],"mappings":"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"}

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

@@ -3,8 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["header", "children", "className"];
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
-import { Subhead } from '../Typography/Subhead/Subhead';
 import { Headline } from '../Typography/Headline/Headline';
+import { Subhead } from '../Typography/Subhead/Subhead';
 import "./InfoRow.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/InfoRow

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

@@ -1 +1 @@
-{"version":3,"file":"InfoRow.js","names":["React","classNames","hasReactNode","Subhead","Headline","InfoRow","header","children","className","restProps"],"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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,OAAO,QAAQ,+BAA+B;AACvD,SAASC,QAAQ,QAAQ,iCAAiC;AAAC;AAO3D;AACA;AACA;AACA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAO;EAAA,IAAMC,MAAM,QAANA,MAAM;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAAA,oBACjE,oBAAC,QAAQ,eACHA,SAAS;IACb,SAAS,EAAC,MAAM;IAChB,SAAS,EAAER,UAAU,gBAAoBO,SAAS,CAAE;IACpD,MAAM,EAAC;EAAG,IAETN,YAAY,CAACI,MAAM,CAAC,iBACnB,oBAAC,OAAO;IAAC,SAAS,EAAC,MAAM;IAAC,SAAS;EAA4B,GAC5DA,MAAM,CAEV,EACAC,QAAQ,CACA;AAAA,CACZ"}
+{"version":3,"file":"InfoRow.js","names":["React","classNames","hasReactNode","Headline","Subhead","InfoRow","header","children","className","restProps"],"sources":["../../../../src/components/InfoRow/InfoRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,OAAO,QAAQ,+BAA+B;AAAC;AAOxD;AACA;AACA;AACA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAO;EAAA,IAAMC,MAAM,QAANA,MAAM;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAAA,oBACjE,oBAAC,QAAQ,eACHA,SAAS;IACb,SAAS,EAAC,MAAM;IAChB,SAAS,EAAER,UAAU,gBAAoBO,SAAS,CAAE;IACpD,MAAM,EAAC;EAAG,IAETN,YAAY,CAACI,MAAM,CAAC,iBACnB,oBAAC,OAAO;IAAC,SAAS,EAAC,MAAM;IAAC,SAAS;EAA4B,GAC5DA,MAAM,CAEV,EACAC,QAAQ,CACA;AAAA,CACZ"}

package/dist/cssm/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 { FormFieldProps } from '../FormField/FormField';
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement>, HasRootRef<HTMLDivElement>, HasAlign, FormFieldProps {
 }
 /**

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

@@ -1,12 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["type", "align", "getRef", "className", "getRootRef", "style", "before", "after", "status"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { FormField } from '../FormField/FormField';
-import { getSizeYClassName } from '../../helpers/getSizeYClassName';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { SizeType } from '../../lib/adaptivity';
+import { FormField } from '../FormField/FormField';
 import "./Input.module.css";
+var sizeYClassNames = _defineProperty({
+  none: "vkuiInput--sizeY-none"
+}, SizeType.COMPACT, "vkuiInput--sizeY-compact");
 /**
  * @see https://vkcom.github.io/VKUI/#/Input
  */
@@ -23,10 +27,11 @@ export var Input = function Input(_ref) {
     status = _ref.status,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var _useAdaptivity = useAdaptivity(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   return /*#__PURE__*/React.createElement(FormField, {
     style: style,
-    className: classNames("vkuiInput", align && styles["Input--align-".concat(align)], getSizeYClassName("vkuiInput", sizeY), before && "vkuiInput--hasBefore", after && "vkuiInput--hasAfter", className),
+    className: classNames("vkuiInput", align && styles["Input--align-".concat(align)], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], before && "vkuiInput--hasBefore", after && "vkuiInput--hasAfter", className),
     getRootRef: getRootRef,
     before: before,
     after: after,

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["React","classNames","FormField","getSizeYClassName","useAdaptivity","Input","type","align","getRef","className","getRootRef","style","before","after","status","restProps","sizeY","styles","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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,SAAS,QAAwB,wBAAwB;AAElE,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,aAAa,QAAQ,2BAA2B;AAAC;AAU1D;AACA;AACA;AACA,OAAO,IAAMC,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,qBAAkBX,aAAa,EAAE;IAAzBY,KAAK,kBAALA,KAAK;EAEb,oBACE,oBAAC,SAAS;IACR,KAAK,EAAEL,KAAM;IACb,SAAS,EAAEV,UAAU,cAEnBM,KAAK,IAAIU,MAAM,wBAAiBV,KAAK,EAAG,EACxCJ,iBAAiB,cAAkBa,KAAK,CAAC,EACzCJ,MAAM,0BAA8B,EACpCC,KAAK,yBAA6B,EAClCJ,SAAS,CACT;IACF,UAAU,EAAEC,UAAW;IACvB,MAAM,EAAEE,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,QAAQ,EAAEE,SAAS,CAACG,QAAS;IAC7B,MAAM,EAAEJ;EAAO,gBAEf,0CAAWC,SAAS;IAAE,IAAI,EAAET,IAAK;IAAC,SAAS,iBAAsB;IAAC,GAAG,EAAEE;EAAO,GAAG,CACvE;AAEhB,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"Input.js","names":["React","classNames","useAdaptivity","SizeType","FormField","sizeYClassNames","none","COMPACT","Input","type","align","getRef","className","getRootRef","style","before","after","status","restProps","sizeY","styles","REGULAR","disabled"],"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,\n  getRef,\n  className,\n  getRootRef,\n  style,\n  before,\n  after,\n  status,\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 && styles[`Input--align-${align}`],\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      status={status}\n    >\n      <input {...restProps} type={type} className={styles['Input__el']} ref={getRef} />\n    </FormField>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,QAAQ,QAAQ,sBAAsB;AAE/C,SAASC,SAAS,QAAwB,wBAAwB;AAAC;AAGnE,IAAMC,eAAe;EACnBC,IAAI;AAA6B,GAChCH,QAAQ,CAACI,OAAO,6BAClB;AASD;AACA;AACA;AACA,OAAO,IAAMC,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,qBAA2BhB,aAAa,EAAE;IAAA,sCAAlCiB,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE,oBAAC,SAAS;IACR,KAAK,EAAEL,KAAM;IACb,SAAS,EAAEb,UAAU,cAEnBS,KAAK,IAAIU,MAAM,wBAAiBV,KAAK,EAAG,EACxCS,KAAK,KAAKhB,QAAQ,CAACkB,OAAO,IAAIhB,eAAe,CAACc,KAAK,CAAC,EACpDJ,MAAM,0BAA8B,EACpCC,KAAK,yBAA6B,EAClCJ,SAAS,CACT;IACF,UAAU,EAAEC,UAAW;IACvB,MAAM,EAAEE,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,QAAQ,EAAEE,SAAS,CAACI,QAAS;IAC7B,MAAM,EAAEL;EAAO,gBAEf,0CAAWC,SAAS;IAAE,IAAI,EAAET,IAAK;IAAC,SAAS,iBAAsB;IAAC,GAAG,EAAEE;EAAO,GAAG,CACvE;AAEhB,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}

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

@@ -1 +1 @@
-.vkuiInput{font-size:16px;line-height:20px;position:relative}.vkuiInput--align-center .vkuiInput__el{text-align:center}.vkuiInput--align-right .vkuiInput__el{text-align:right}.vkuiInput__el{align-self:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;border-radius:inherit;box-shadow:none;box-sizing:border-box;color:#000;color:var(--vkui--color_text_primary);display:block;font-family:inherit;font-size:16px;font-size:var(--vkui--font_text--font_size--regular);font-weight:400;font-weight:var(--vkui--font_text--font_weight--regular);line-height:20px;line-height:var(--vkui--font_text--line_height--regular);margin:0;padding:0 12px;position:relative;text-overflow:ellipsis;width:100%;z-index:1;z-index:var(--vkui_internal--z_index_form_field_element)}.vkuiInput--sizeY-compact .vkuiInput__el{font-size:15px;font-size:var(--vkui--font_text--font_size--compact);line-height:20px;line-height:var(--vkui--font_text--line_height--compact)}.vkuiInput--hasBefore .vkuiInput__el{padding-left:0}.vkuiInput--hasAfter .vkuiInput__el{padding-right:0}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiInput--sizeY-none .vkuiInput__el{font-size:15px;font-size:var(--vkui--font_text--font_size--compact);line-height:20px;line-height:var(--vkui--font_text--line_height--compact)}}.vkuiInput__el:disabled{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiInput__el::-webkit-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiInput__el::-moz-placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiInput__el::-ms-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiInput__el::placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiInput__el:disabled::-webkit-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiInput__el:disabled::-moz-placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiInput__el:disabled::-ms-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiInput__el:disabled::placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}
+.vkuiInput{font-size:16px;line-height:20px;position:relative}.vkuiInput--align-center .vkuiInput__el{text-align:center}.vkuiInput--align-right .vkuiInput__el{text-align:right}.vkuiInput__el{align-self:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;border-radius:inherit;box-shadow:none;box-sizing:border-box;color:#000;color:var(--vkui--color_text_primary);display:block;font-family:inherit;font-size:16px;font-size:var(--vkui--font_text--font_size--regular);font-weight:400;font-weight:var(--vkui--font_text--font_weight--regular);line-height:20px;line-height:var(--vkui--font_text--line_height--regular);margin:0;padding:0 12px;position:relative;text-overflow:ellipsis;width:100%;z-index:1;z-index:var(--vkui_internal--z_index_form_field_element)}.vkuiInput--sizeY-compact .vkuiInput__el{font-size:15px;font-size:var(--vkui--font_text--font_size--compact);line-height:20px;line-height:var(--vkui--font_text--line_height--compact)}.vkuiInput--hasBefore .vkuiInput__el{padding-left:0}.vkuiInput--hasAfter .vkuiInput__el{padding-right:0}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiInput--sizeY-none .vkuiInput__el{font-size:15px;font-size:var(--vkui--font_text--font_size--compact);line-height:20px;line-height:var(--vkui--font_text--line_height--compact)}}.vkuiInput__el:disabled{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiInput__el::-webkit-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiInput__el::-moz-placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiInput__el::-ms-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiInput__el::placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiInput__el:disabled::-webkit-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiInput__el:disabled::-moz-placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiInput__el:disabled::-ms-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiInput__el:disabled::placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}

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

@@ -2,9 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["value", "length", "index", "onElementSelect", "onClick", "onFocus", "getRootRef", "className"];
 import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
 import { callMultiple } from '../../lib/callMultiple';
 import { stopPropagation } from '../../lib/utils';
-import { classNames } from '@vkontakte/vkjs';
 import "./InputLike.module.css";
 var MASK_SYMBOL = String.fromCharCode(0x2007);
 function getMaskElements(length) {

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

@@ -1 +1 @@
-{"version":3,"file":"InputLike.js","names":["React","callMultiple","stopPropagation","classNames","MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","InputLike","value","onElementSelect","onClick","onFocus","getRootRef","className","props","handleElementSelect","useCallback","event","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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,eAAe,QAAQ,iBAAiB;AACjD,SAASC,UAAU,QAAQ,iBAAiB;AAAC;AAa7C,IAAMC,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;AAEA,OAAO,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,GAAGpB,KAAK,CAACqB,WAAW,CAC3C,UAACC,KAAwC,EAAK;IAC5CpB,eAAe,CAACoB,KAAK,CAAC;IACtBR,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAGJ,KAAK,CAAC;EAC1B,CAAC,EACD,CAACA,KAAK,EAAEI,eAAe,CAAC,CACzB;EAED,oBACE;IACE,SAAS,EAAEX,UAAU,kBAEnB,CAAAU,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEL,MAAM,MAAKA,MAAM,yBAA6B,EACrDU,SAAS,CACT;IACF,QAAQ,EAAE,CAAE;IACZ,GAAG,EAAED,UAAW;IAChB,OAAO,EAAEhB,YAAY,CAACc,OAAO,EAAEK,mBAAmB,CAAE;IACpD,OAAO,EAAEnB,YAAY,CAACC,eAAe,EAAEc,OAAO;EAAE,GAC5CG,KAAK,GAERN,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEU,KAAK,CAAC,CAAC,EAAEf,MAAM,GAAG,CAAC,CAAC,EAC3B,CAAAK,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEU,KAAK,CAACf,MAAM,GAAG,CAAC,CAAC,kBACvB;IAAM,GAAG,EAAEE,KAAM;IAAC,SAAS;EAAsC,GAC9DG,KAAK,CAACU,KAAK,CAACf,MAAM,GAAG,CAAC,CAAC,CAE3B,EACAD,eAAe,CAACC,MAAM,qBAAIK,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEL,MAAM,yDAAI,CAAC,CAAC,CAAC,CAC1C;AAEX,CAAC;AAEDI,SAAS,CAACY,WAAW,GAAG,WAAW"}
+{"version":3,"file":"InputLike.js","names":["React","classNames","callMultiple","stopPropagation","MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","InputLike","value","onElementSelect","onClick","onFocus","getRootRef","className","props","handleElementSelect","useCallback","event","slice","displayName"],"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"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,eAAe,QAAQ,iBAAiB;AAAC;AAalD,IAAMC,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;AAEA,OAAO,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,GAAGpB,KAAK,CAACqB,WAAW,CAC3C,UAACC,KAAwC,EAAK;IAC5CnB,eAAe,CAACmB,KAAK,CAAC;IACtBR,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAGJ,KAAK,CAAC;EAC1B,CAAC,EACD,CAACA,KAAK,EAAEI,eAAe,CAAC,CACzB;EAED,oBACE;IACE,SAAS,EAAEb,UAAU,kBAEnB,CAAAY,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEL,MAAM,MAAKA,MAAM,yBAA6B,EACrDU,SAAS,CACT;IACF,QAAQ,EAAE,CAAE;IACZ,GAAG,EAAED,UAAW;IAChB,OAAO,EAAEf,YAAY,CAACa,OAAO,EAAEK,mBAAmB,CAAE;IACpD,OAAO,EAAElB,YAAY,CAACC,eAAe,EAAEa,OAAO;EAAE,GAC5CG,KAAK,GAERN,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEU,KAAK,CAAC,CAAC,EAAEf,MAAM,GAAG,CAAC,CAAC,EAC3B,CAAAK,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEU,KAAK,CAACf,MAAM,GAAG,CAAC,CAAC,kBACvB;IAAM,GAAG,EAAEE,KAAM;IAAC,SAAS;EAAsC,GAC9DG,KAAK,CAACU,KAAK,CAACf,MAAM,GAAG,CAAC,CAAC,CAE3B,EACAD,eAAe,CAACC,MAAM,qBAAIK,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEL,MAAM,yDAAI,CAAC,CAAC,CAAC,CAC1C;AAEX,CAAC;AAEDI,SAAS,CAACY,WAAW,GAAG,WAAW"}

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

@@ -1 +1 @@
-.vkuiInputLike__mask{font-family:VK Sans Text,-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);position:relative}.vkuiInputLike__mask:after{border-bottom:1px solid #818c99;border-bottom:1px solid var(--vkui--color_text_secondary);bottom:0;content:"";height:1px;left:0;position:absolute;width:calc(100% - .1em)}.vkuiInputLike__mask:last-child{margin-right:1px}.vkuiInputLike__last_character{letter-spacing:1px!important}.vkuiInputLike--full+.vkuiInputLikeDivider{color:#000;color:var(--vkui--color_text_primary)}
+.vkuiInputLike__mask{font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);position:relative}.vkuiInputLike__mask:after{border-bottom:1px solid #818c99;border-bottom:1px solid var(--vkui--color_text_secondary);bottom:0;content:"";height:1px;left:0;position:absolute;width:calc(100% - .1em)}.vkuiInputLike__mask:last-child{margin-right:1px}.vkuiInputLike__last_character{letter-spacing:1px!important}.vkuiInputLike--full+.vkuiInputLikeDivider{color:#000;color:var(--vkui--color_text_primary)}

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

@@ -1 +1 @@
-{"version":3,"file":"Link.js","names":["React","classNames","Tappable","Link","hasVisited","children","className","restProps","href"],"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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAAwBC,QAAQ,QAAQ,sBAAsB;AAAC;AAU/D;AACA;AACA;AACA,OAAO,IAAMC,IAAI,GAAG,SAAPA,IAAI,OAAqE;EAAA,IAA/DC,UAAU,QAAVA,UAAU;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAClE,oBACE,oBAAC,QAAQ;IACP,SAAS,EAAEA,SAAS,CAACC,IAAI,GAAG,GAAG,GAAG;EAAS,GACvCD,SAAS;IACb,SAAS,EAAEN,UAAU,aAAiBG,UAAU,2BAA+B,EAAEE,SAAS,CAAE;IAC5F,QAAQ,EAAE,KAAM;IAChB,UAAU,EAAC,SAAS;IACpB,gBAAgB;EAAgC,IAE/CD,QAAQ,CACA;AAEf,CAAC"}
+{"version":3,"file":"Link.js","names":["React","classNames","Tappable","Link","hasVisited","children","className","restProps","href"],"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"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,QAAQ,QAAuB,sBAAsB;AAAC;AAU/D;AACA;AACA;AACA,OAAO,IAAMC,IAAI,GAAG,SAAPA,IAAI,OAAqE;EAAA,IAA/DC,UAAU,QAAVA,UAAU;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAClE,oBACE,oBAAC,QAAQ;IACP,SAAS,EAAEA,SAAS,CAACC,IAAI,GAAG,GAAG,GAAG;EAAS,GACvCD,SAAS;IACb,SAAS,EAAEN,UAAU,aAAiBG,UAAU,2BAA+B,EAAEE,SAAS,CAAE;IAC5F,QAAQ,EAAE,KAAM;IAChB,UAAU,EAAC,SAAS;IACpB,gBAAgB;EAAgC,IAE/CD,QAAQ,CACA;AAEf,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"LocaleProvider.js","names":["React","ConfigProviderOverride","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,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,sBAAsB,QAAQ,0CAA0C;AAWjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,cAAc,OAA2C;EAAA,IAAxCC,KAAK,QAALA,KAAK;IAAEC,QAAQ,QAARA,QAAQ;EAC9C,oBAAO,oBAAC,sBAAsB;IAAC,MAAM,EAAED;EAAM,GAAEC,QAAQ,CAA0B;AACnF"}
+{"version":3,"file":"LocaleProvider.js","names":["React","ConfigProviderOverride","LocaleProvider","value","children"],"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 * @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,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,sBAAsB,QAAQ,0CAA0C;AAUjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,cAAc,OAA2C;EAAA,IAAxCC,KAAK,QAALA,KAAK;IAAEC,QAAQ,QAARA,QAAQ;EAC9C,oBAAO,oBAAC,sBAAsB;IAAC,MAAM,EAAED;EAAM,GAAEC,QAAQ,CAA0B;AACnF"}

package/dist/cssm/components/MiniInfoCell/MiniInfoCell.js

@@ -2,10 +2,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["before", "after", "children", "mode", "textWrap", "expandable", "className"];
 import * as React from 'react';
+import { Icon16Chevron } from '@vkontakte/icons';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
-import { Paragraph } from '../Typography/Paragraph/Paragraph';
 import { Tappable } from '../Tappable/Tappable';
-import { Icon16Chevron } from '@vkontakte/icons';
+import { Paragraph } from '../Typography/Paragraph/Paragraph';
 import "./MiniInfoCell.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/MiniInfoCell

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

@@ -1 +1 @@
-{"version":3,"file":"MiniInfoCell.js","names":["React","classNames","hasReactNode","Paragraph","Tappable","Icon16Chevron","MiniInfoCell","before","after","children","mode","textWrap","expandable","className","restProps","cellClasses","styles","cellContent","undefined","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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,SAAS,QAAQ,mCAAmC;AAC7D,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,aAAa,QAAQ,kBAAkB;AAAC;AAyCjD;AACA;AACA;AACA,OAAO,IAAMC,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,GAAGd,UAAU,qBAE5Be,MAAM,kCAA2BL,QAAQ,EAAG,EAC5CD,IAAI,KAAK,MAAM,IAAIM,MAAM,8BAAuBN,IAAI,EAAG,EACvDG,SAAS,CACV;EAED,IAAMI,WAAW,gBACf,oBAAC,KAAK,CAAC,QAAQ,qBACb;IAAM,SAAS;EAAiC,GAAEV,MAAM,CAAQ,eAChE;IAAK,SAAS;EAAiC,gBAC7C,oBAAC,SAAS;IACR,SAAS,6BAAkC;IAC3C,MAAM,EAAEG,IAAI,KAAK,MAAM,GAAG,GAAG,GAAGQ;EAAU,GAEzCT,QAAQ,CACC,EACXG,UAAU,iBAAI,oBAAC,aAAa,OAAG,CAC5B,EACLV,YAAY,CAACM,KAAK,CAAC,iBAAI;IAAM,SAAS;EAAgC,GAAEA,KAAK,CAAQ,CAEzF;EAED,OAAOM,SAAS,CAACK,OAAO,gBACtB,oBAAC,QAAQ;IAAC,SAAS,EAAC,KAAK;IAAC,IAAI,EAAC;EAAQ,GAAKL,SAAS;IAAE,SAAS,EAAEC;EAAY,IAC3EE,WAAW,CACH,gBAEX,wCAASH,SAAS;IAAE,SAAS,EAAEC;EAAY,IACxCE,WAAW,CAEf;AACH,CAAC;AAAC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"MiniInfoCell.js","names":["React","Icon16Chevron","classNames","hasReactNode","Tappable","Paragraph","MiniInfoCell","before","after","children","mode","textWrap","expandable","className","restProps","cellClasses","styles","cellContent","undefined","onClick"],"sources":["../../../../src/components/MiniInfoCell/MiniInfoCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,SAAS,QAAQ,mCAAmC;AAAC;AAyC9D;AACA;AACA;AACA,OAAO,IAAMC,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,GAAGb,UAAU,qBAE5Bc,MAAM,kCAA2BL,QAAQ,EAAG,EAC5CD,IAAI,KAAK,MAAM,IAAIM,MAAM,8BAAuBN,IAAI,EAAG,EACvDG,SAAS,CACV;EAED,IAAMI,WAAW,gBACf,oBAAC,KAAK,CAAC,QAAQ,qBACb;IAAM,SAAS;EAAiC,GAAEV,MAAM,CAAQ,eAChE;IAAK,SAAS;EAAiC,gBAC7C,oBAAC,SAAS;IACR,SAAS,6BAAkC;IAC3C,MAAM,EAAEG,IAAI,KAAK,MAAM,GAAG,GAAG,GAAGQ;EAAU,GAEzCT,QAAQ,CACC,EACXG,UAAU,iBAAI,oBAAC,aAAa,OAAG,CAC5B,EACLT,YAAY,CAACK,KAAK,CAAC,iBAAI;IAAM,SAAS;EAAgC,GAAEA,KAAK,CAAQ,CAEzF;EAED,OAAOM,SAAS,CAACK,OAAO,gBACtB,oBAAC,QAAQ;IAAC,SAAS,EAAC,KAAK;IAAC,IAAI,EAAC;EAAQ,GAAKL,SAAS;IAAE,SAAS,EAAEC;EAAY,IAC3EE,WAAW,CACH,gBAEX,wCAASH,SAAS;IAAE,SAAS,EAAEC;EAAY,IACxCE,WAAW,CAEf;AACH,CAAC;AAAC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

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

@@ -6,4 +6,4 @@ export interface ModalCardProps extends NavIdProps, ModalCardBaseProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalCard
  */
-export declare const ModalCard: ({ icon, header, subheader, children, actions, onClose, nav, id, className, ...restProps }: ModalCardProps) => JSX.Element;
+export declare const ModalCard: ({ icon, header, subheader, children, actions, onClose, nav, id, className, size, ...restProps }: ModalCardProps) => JSX.Element;

package/dist/cssm/components/ModalCard/ModalCard.js

@@ -1,16 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["icon", "header", "subheader", "children", "actions", "onClose", "nav", "id", "className"];
+var _excluded = ["icon", "header", "subheader", "children", "actions", "onClose", "nav", "id", "className", "size"];
 import * as React from 'react';
-import { getPlatformClassName } from '../../helpers/getPlatformClassName';
 import { classNames } from '@vkontakte/vkjs';
-import { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';
-import { ModalType } from '../ModalRoot/types';
+import { getPlatformClassName } from '../../helpers/getPlatformClassName';
+import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
+import { usePlatform } from '../../hooks/usePlatform';
 import { getNavId } from '../../lib/getNavId';
 import { warnOnce } from '../../lib/warnOnce';
 import { ModalCardBase } from '../ModalCardBase/ModalCardBase';
-import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
-import { usePlatform } from '../../hooks/usePlatform';
+import { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';
+import { ModalType } from '../ModalRoot/types';
 import "./ModalCard.module.css";
 var warn = warnOnce('ModalCard');
 
@@ -27,6 +27,7 @@ export var ModalCard = function ModalCard(_ref) {
     nav = _ref.nav,
     id = _ref.id,
     className = _ref.className,
+    size = _ref.size,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var _useAdaptivityWithJSM = useAdaptivityWithJSMediaQueries(),
     isDesktop = _useAdaptivityWithJSM.isDesktop;
@@ -47,7 +48,8 @@ export var ModalCard = function ModalCard(_ref) {
     header: header,
     subheader: subheader,
     actions: actions,
-    onClose: onClose || modalContext.onClose
+    onClose: onClose || modalContext.onClose,
+    size: size
   }, children));
 };
 //# sourceMappingURL=ModalCard.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ModalCard.js","names":["React","getPlatformClassName","classNames","ModalRootContext","useModalRegistry","ModalType","getNavId","warnOnce","ModalCardBase","useAdaptivityWithJSMediaQueries","usePlatform","warn","ModalCard","icon","header","subheader","children","actions","onClose","nav","id","className","restProps","isDesktop","platform","modalContext","useContext","CARD","refs","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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,oBAAoB,QAAQ,oCAAoC;AACzE,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,gBAAgB,EAAEC,gBAAgB,QAAQ,+BAA+B;AAClF,SAASC,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,QAAQ,QAAoB,oBAAoB;AACzD,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,aAAa,QAA4B,gCAAgC;AAClF,SAASC,+BAA+B,QAAQ,6CAA6C;AAC7F,SAASC,WAAW,QAAQ,yBAAyB;AAAC;AAKtD,IAAMC,IAAI,GAAGJ,QAAQ,CAAC,WAAW,CAAC;;AAElC;AACA;AACA;AACA,OAAO,IAAMK,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,4BAAsBb,+BAA+B,EAAE;IAA/Cc,SAAS,yBAATA,SAAS;EACjB,IAAMC,QAAQ,GAAGd,WAAW,EAAE;EAE9B,IAAMe,YAAY,GAAGzB,KAAK,CAAC0B,UAAU,CAACvB,gBAAgB,CAAC;EACvD,wBAAiBC,gBAAgB,CAACE,QAAQ,CAAC;MAAEa,GAAG,EAAHA,GAAG;MAAEC,EAAE,EAAFA;IAAG,CAAC,EAAET,IAAI,CAAC,EAAEN,SAAS,CAACsB,IAAI,CAAC;IAAtEC,IAAI,qBAAJA,IAAI;EAEZ,oBACE,wCACMN,SAAS;IACb,EAAE,EAAEF,EAAG;IACP,SAAS,EAAElB,UAAU,kBAEnBD,oBAAoB,kBAAsBuB,QAAQ,CAAC,EACnDD,SAAS,4BAAgC,EACzCF,SAAS;EACT,iBAEF,oBAAC,aAAa;IACZ,SAAS,qBAA0B;IACnC,UAAU,EAAEO,IAAI,CAACC,YAAa;IAC9B,IAAI,EAAEhB,IAAK;IACX,MAAM,EAAEC,MAAO;IACf,SAAS,EAAEC,SAAU;IACrB,OAAO,EAAEE,OAAQ;IACjB,OAAO,EAAEC,OAAO,IAAIO,YAAY,CAACP;EAAQ,GAExCF,QAAQ,CACK,CACZ;AAEV,CAAC"}
+{"version":3,"file":"ModalCard.js","names":["React","classNames","getPlatformClassName","useAdaptivityWithJSMediaQueries","usePlatform","getNavId","warnOnce","ModalCardBase","ModalRootContext","useModalRegistry","ModalType","warn","ModalCard","icon","header","subheader","children","actions","onClose","nav","id","className","size","restProps","isDesktop","platform","modalContext","useContext","CARD","refs","innerElement"],"sources":["../../../../src/components/ModalCard/ModalCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalCardBase, ModalCardBaseProps } from '../ModalCardBase/ModalCardBase';\nimport { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';\nimport { ModalType } from '../ModalRoot/types';\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  size,\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        size={size}\n      >\n        {children}\n      </ModalCardBase>\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,oBAAoB,QAAQ,oCAAoC;AACzE,SAASC,+BAA+B,QAAQ,6CAA6C;AAC7F,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAoB,oBAAoB;AACzD,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,aAAa,QAA4B,gCAAgC;AAClF,SAASC,gBAAgB,EAAEC,gBAAgB,QAAQ,+BAA+B;AAClF,SAASC,SAAS,QAAQ,oBAAoB;AAAC;AAK/C,IAAMC,IAAI,GAAGL,QAAQ,CAAC,WAAW,CAAC;;AAElC;AACA;AACA;AACA,OAAO,IAAMM,SAAS,GAAG,SAAZA,SAAS,OAYA;EAAA,IAXpBC,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;IACTC,IAAI,QAAJA,IAAI;IACDC,SAAS;EAEZ,4BAAsBpB,+BAA+B,EAAE;IAA/CqB,SAAS,yBAATA,SAAS;EACjB,IAAMC,QAAQ,GAAGrB,WAAW,EAAE;EAE9B,IAAMsB,YAAY,GAAG1B,KAAK,CAAC2B,UAAU,CAACnB,gBAAgB,CAAC;EACvD,wBAAiBC,gBAAgB,CAACJ,QAAQ,CAAC;MAAEc,GAAG,EAAHA,GAAG;MAAEC,EAAE,EAAFA;IAAG,CAAC,EAAET,IAAI,CAAC,EAAED,SAAS,CAACkB,IAAI,CAAC;IAAtEC,IAAI,qBAAJA,IAAI;EAEZ,oBACE,wCACMN,SAAS;IACb,EAAE,EAAEH,EAAG;IACP,SAAS,EAAEnB,UAAU,kBAEnBC,oBAAoB,kBAAsBuB,QAAQ,CAAC,EACnDD,SAAS,4BAAgC,EACzCH,SAAS;EACT,iBAEF,oBAAC,aAAa;IACZ,SAAS,qBAA0B;IACnC,UAAU,EAAEQ,IAAI,CAACC,YAAa;IAC9B,IAAI,EAAEjB,IAAK;IACX,MAAM,EAAEC,MAAO;IACf,SAAS,EAAEC,SAAU;IACrB,OAAO,EAAEE,OAAQ;IACjB,OAAO,EAAEC,OAAO,IAAIQ,YAAY,CAACR,OAAQ;IACzC,IAAI,EAAEI;EAAK,GAEVN,QAAQ,CACK,CACZ;AAEV,CAAC"}

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

@@ -32,8 +32,12 @@ export interface ModalCardBaseProps extends React.HTMLAttributes<HTMLDivElement>
      * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.
      */
     dismissLabel?: string;
+    /**
+     * Задаёт контенту максимальную ширину для десктопной версии.
+     */
+    size?: number;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalCardBase
  */
-export declare const ModalCardBase: ({ getRootRef, icon, header, subheader, children, actions, onClose, dismissLabel, className, ...restProps }: ModalCardBaseProps) => JSX.Element;
+export declare const ModalCardBase: ({ getRootRef, icon, header, subheader, children, actions, onClose, dismissLabel, className, style, size: sizeProp, ...restProps }: ModalCardBaseProps) => JSX.Element;

package/dist/cssm/components/ModalCardBase/ModalCardBase.js

@@ -1,18 +1,19 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["getRootRef", "icon", "header", "subheader", "children", "actions", "onClose", "dismissLabel", "className"];
+var _excluded = ["getRootRef", "icon", "header", "subheader", "children", "actions", "onClose", "dismissLabel", "className", "style", "size"];
 import * as React from 'react';
-import { Title } from '../Typography/Title/Title';
-import { Subhead } from '../Typography/Subhead/Subhead';
+import { Icon24Dismiss } from '@vkontakte/icons';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { getPlatformClassName } from '../../helpers/getPlatformClassName';
+import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
+import { useKeyboard } from '../../hooks/useKeyboard';
 import { usePlatform } from '../../hooks/usePlatform';
-import { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';
 import { Platform } from '../../lib/platform';
 import { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';
-import { Icon24Dismiss } from '@vkontakte/icons';
-import { useKeyboard } from '../../hooks/useKeyboard';
-import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
+import { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';
+import { Subhead } from '../Typography/Subhead/Subhead';
+import { Title } from '../Typography/Title/Title';
 import "./ModalCardBase.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalCardBase
@@ -28,15 +29,21 @@ export var ModalCardBase = function ModalCardBase(_ref) {
     _ref$dismissLabel = _ref.dismissLabel,
     dismissLabel = _ref$dismissLabel === void 0 ? 'Скрыть' : _ref$dismissLabel,
     className = _ref.className,
+    style = _ref.style,
+    sizeProp = _ref.size,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var platform = usePlatform();
   var _useAdaptivityWithJSM = useAdaptivityWithJSMediaQueries(),
     isDesktop = _useAdaptivityWithJSM.isDesktop;
   var isSoftwareKeyboardOpened = useKeyboard().isOpened;
   var canShowCloseButtonIOS = platform === Platform.IOS && !isDesktop;
+  var size = isDesktop ? sizeProp : undefined;
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
     className: classNames("vkuiModalCardBase", getPlatformClassName("vkuiModalCardBase", platform), isDesktop && "vkuiModalCardBase--desktop", className),
-    ref: getRootRef
+    ref: getRootRef,
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      maxWidth: size
+    })
   }), /*#__PURE__*/React.createElement("div", {
     className: classNames("vkuiModalCardBase__container", isSoftwareKeyboardOpened && "vkuiModalCardBase__container--softwareKeyboardOpened")
   }, hasReactNode(icon) && /*#__PURE__*/React.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"ModalCardBase.js","names":["React","Title","Subhead","classNames","hasReactNode","getPlatformClassName","usePlatform","PanelHeaderButton","Platform","ModalDismissButton","Icon24Dismiss","useKeyboard","useAdaptivityWithJSMediaQueries","ModalCardBase","getRootRef","icon","header","subheader","children","actions","onClose","dismissLabel","className","restProps","platform","isDesktop","isSoftwareKeyboardOpened","isOpened","canShowCloseButtonIOS","IOS"],"sources":["../../../../src/components/ModalCardBase/ModalCardBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Title } from '../Typography/Title/Title';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasRootRef } from '../../types';\nimport { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';\nimport { Platform } from '../../lib/platform';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { Icon24Dismiss } from '@vkontakte/icons';\nimport { useKeyboard } from '../../hooks/useKeyboard';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport styles from './ModalCardBase.module.css';\n\nexport interface ModalCardBaseProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Иконка.\n   *\n   * Может быть компонентом иконки, например, `<Icon56MoneyTransferOutline />`, или `<Avatar size={72} src=\"\" />`\n   */\n  icon?: React.ReactNode;\n\n  /**\n   * Заголовок карточки\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Подзаголовок\n   */\n  subheader?: React.ReactNode;\n\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `size=\"l\" mode=\"primary\" stretched`\n   * - `size=\"l\" mode=\"secondary\" stretched`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"s\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n\n  onClose?: VoidFunction;\n\n  /**\n   * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCardBase\n */\nexport const ModalCardBase = ({\n  getRootRef,\n  icon,\n  header,\n  subheader,\n  children,\n  actions,\n  onClose,\n  dismissLabel = 'Скрыть',\n  className,\n  ...restProps\n}: ModalCardBaseProps) => {\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const isSoftwareKeyboardOpened = useKeyboard().isOpened;\n\n  const canShowCloseButtonIOS = platform === Platform.IOS && !isDesktop;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['ModalCardBase'],\n        getPlatformClassName(styles['ModalCardBase'], platform),\n        isDesktop && styles['ModalCardBase--desktop'],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      <div\n        className={classNames(\n          styles['ModalCardBase__container'],\n          isSoftwareKeyboardOpened && styles['ModalCardBase__container--softwareKeyboardOpened'],\n        )}\n      >\n        {hasReactNode(icon) && <div className={styles['ModalCardBase__icon']}>{icon}</div>}\n        {hasReactNode(header) && (\n          <Title level=\"2\" weight=\"2\" className={styles['ModalCardBase__header']}>\n            {header}\n          </Title>\n        )}\n        {hasReactNode(subheader) && (\n          <Subhead className={styles['ModalCardBase__subheader']}>{subheader}</Subhead>\n        )}\n\n        {children}\n\n        {hasReactNode(actions) && <div className={styles['ModalCardBase__actions']}>{actions}</div>}\n\n        {isDesktop && <ModalDismissButton onClick={onClose} />}\n        {canShowCloseButtonIOS && (\n          <PanelHeaderButton\n            aria-label={dismissLabel}\n            className={styles['ModalCardBase__dismiss']}\n            onClick={onClose}\n          >\n            <Icon24Dismiss />\n          </PanelHeaderButton>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,KAAK,QAAQ,2BAA2B;AACjD,SAASC,OAAO,QAAQ,+BAA+B;AACvD,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,oBAAoB,QAAQ,oCAAoC;AACzE,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,iBAAiB,QAAQ,wCAAwC;AAC1E,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,kBAAkB,QAAQ,0CAA0C;AAC7E,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,+BAA+B,QAAQ,6CAA6C;AAAC;AA4C9F;AACA;AACA;AACA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAa,OAWA;EAAA,IAVxBC,UAAU,QAAVA,UAAU;IACVC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IAAA,yBACPC,YAAY;IAAZA,YAAY,kCAAG,QAAQ;IACvBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGlB,WAAW,EAAE;EAC9B,4BAAsBM,+BAA+B,EAAE;IAA/Ca,SAAS,yBAATA,SAAS;EACjB,IAAMC,wBAAwB,GAAGf,WAAW,EAAE,CAACgB,QAAQ;EAEvD,IAAMC,qBAAqB,GAAGJ,QAAQ,KAAKhB,QAAQ,CAACqB,GAAG,IAAI,CAACJ,SAAS;EAErE,oBACE,wCACMF,SAAS;IACb,SAAS,EAAEpB,UAAU,sBAEnBE,oBAAoB,sBAA0BmB,QAAQ,CAAC,EACvDC,SAAS,gCAAoC,EAC7CH,SAAS,CACT;IACF,GAAG,EAAER;EAAW,iBAEhB;IACE,SAAS,EAAEX,UAAU,iCAEnBuB,wBAAwB,0DAA8D;EACtF,GAEDtB,YAAY,CAACW,IAAI,CAAC,iBAAI;IAAK,SAAS;EAAgC,GAAEA,IAAI,CAAO,EACjFX,YAAY,CAACY,MAAM,CAAC,iBACnB,oBAAC,KAAK;IAAC,KAAK,EAAC,GAAG;IAAC,MAAM,EAAC,GAAG;IAAC,SAAS;EAAkC,GACpEA,MAAM,CAEV,EACAZ,YAAY,CAACa,SAAS,CAAC,iBACtB,oBAAC,OAAO;IAAC,SAAS;EAAqC,GAAEA,SAAS,CACnE,EAEAC,QAAQ,EAERd,YAAY,CAACe,OAAO,CAAC,iBAAI;IAAK,SAAS;EAAmC,GAAEA,OAAO,CAAO,EAE1FM,SAAS,iBAAI,oBAAC,kBAAkB;IAAC,OAAO,EAAEL;EAAQ,EAAG,EACrDQ,qBAAqB,iBACpB,oBAAC,iBAAiB;IAChB,cAAYP,YAAa;IACzB,SAAS,8BAAmC;IAC5C,OAAO,EAAED;EAAQ,gBAEjB,oBAAC,aAAa,OAAG,CAEpB,CACG,CACF;AAEV,CAAC"}
+{"version":3,"file":"ModalCardBase.js","names":["React","Icon24Dismiss","classNames","hasReactNode","getPlatformClassName","useAdaptivityWithJSMediaQueries","useKeyboard","usePlatform","Platform","ModalDismissButton","PanelHeaderButton","Subhead","Title","ModalCardBase","getRootRef","icon","header","subheader","children","actions","onClose","dismissLabel","className","style","sizeProp","size","restProps","platform","isDesktop","isSoftwareKeyboardOpened","isOpened","canShowCloseButtonIOS","IOS","undefined","maxWidth"],"sources":["../../../../src/components/ModalCardBase/ModalCardBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Dismiss } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useKeyboard } from '../../hooks/useKeyboard';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './ModalCardBase.module.css';\n\nexport interface ModalCardBaseProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Иконка.\n   *\n   * Может быть компонентом иконки, например, `<Icon56MoneyTransferOutline />`, или `<Avatar size={72} src=\"\" />`\n   */\n  icon?: React.ReactNode;\n\n  /**\n   * Заголовок карточки\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Подзаголовок\n   */\n  subheader?: React.ReactNode;\n\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `size=\"l\" mode=\"primary\" stretched`\n   * - `size=\"l\" mode=\"secondary\" stretched`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"s\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n\n  onClose?: VoidFunction;\n\n  /**\n   * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n\n  /**\n   * Задаёт контенту максимальную ширину для десктопной версии.\n   */\n  size?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCardBase\n */\nexport const ModalCardBase = ({\n  getRootRef,\n  icon,\n  header,\n  subheader,\n  children,\n  actions,\n  onClose,\n  dismissLabel = 'Скрыть',\n  className,\n  style,\n  size: sizeProp,\n  ...restProps\n}: ModalCardBaseProps) => {\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const isSoftwareKeyboardOpened = useKeyboard().isOpened;\n\n  const canShowCloseButtonIOS = platform === Platform.IOS && !isDesktop;\n\n  const size = isDesktop ? sizeProp : undefined;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['ModalCardBase'],\n        getPlatformClassName(styles['ModalCardBase'], platform),\n        isDesktop && styles['ModalCardBase--desktop'],\n        className,\n      )}\n      ref={getRootRef}\n      style={{\n        ...style,\n        maxWidth: size,\n      }}\n    >\n      <div\n        className={classNames(\n          styles['ModalCardBase__container'],\n          isSoftwareKeyboardOpened && styles['ModalCardBase__container--softwareKeyboardOpened'],\n        )}\n      >\n        {hasReactNode(icon) && <div className={styles['ModalCardBase__icon']}>{icon}</div>}\n        {hasReactNode(header) && (\n          <Title level=\"2\" weight=\"2\" className={styles['ModalCardBase__header']}>\n            {header}\n          </Title>\n        )}\n        {hasReactNode(subheader) && (\n          <Subhead className={styles['ModalCardBase__subheader']}>{subheader}</Subhead>\n        )}\n\n        {children}\n\n        {hasReactNode(actions) && <div className={styles['ModalCardBase__actions']}>{actions}</div>}\n\n        {isDesktop && <ModalDismissButton onClick={onClose} />}\n        {canShowCloseButtonIOS && (\n          <PanelHeaderButton\n            aria-label={dismissLabel}\n            className={styles['ModalCardBase__dismiss']}\n            onClick={onClose}\n          >\n            <Icon24Dismiss />\n          </PanelHeaderButton>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,oBAAoB,QAAQ,oCAAoC;AACzE,SAASC,+BAA+B,QAAQ,6CAA6C;AAC7F,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,oBAAoB;AAE7C,SAASC,kBAAkB,QAAQ,0CAA0C;AAC7E,SAASC,iBAAiB,QAAQ,wCAAwC;AAC1E,SAASC,OAAO,QAAQ,+BAA+B;AACvD,SAASC,KAAK,QAAQ,2BAA2B;AAAC;AAiDlD;AACA;AACA;AACA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAa,OAaA;EAAA,IAZxBC,UAAU,QAAVA,UAAU;IACVC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IAAA,yBACPC,YAAY;IAAZA,YAAY,kCAAG,QAAQ;IACvBC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACCC,QAAQ,QAAdC,IAAI;IACDC,SAAS;EAEZ,IAAMC,QAAQ,GAAGpB,WAAW,EAAE;EAC9B,4BAAsBF,+BAA+B,EAAE;IAA/CuB,SAAS,yBAATA,SAAS;EACjB,IAAMC,wBAAwB,GAAGvB,WAAW,EAAE,CAACwB,QAAQ;EAEvD,IAAMC,qBAAqB,GAAGJ,QAAQ,KAAKnB,QAAQ,CAACwB,GAAG,IAAI,CAACJ,SAAS;EAErE,IAAMH,IAAI,GAAGG,SAAS,GAAGJ,QAAQ,GAAGS,SAAS;EAE7C,oBACE,wCACMP,SAAS;IACb,SAAS,EAAExB,UAAU,sBAEnBE,oBAAoB,sBAA0BuB,QAAQ,CAAC,EACvDC,SAAS,gCAAoC,EAC7CN,SAAS,CACT;IACF,GAAG,EAAER,UAAW;IAChB,KAAK,kCACAS,KAAK;MACRW,QAAQ,EAAET;IAAI;EACd,iBAEF;IACE,SAAS,EAAEvB,UAAU,iCAEnB2B,wBAAwB,0DAA8D;EACtF,GAED1B,YAAY,CAACY,IAAI,CAAC,iBAAI;IAAK,SAAS;EAAgC,GAAEA,IAAI,CAAO,EACjFZ,YAAY,CAACa,MAAM,CAAC,iBACnB,oBAAC,KAAK;IAAC,KAAK,EAAC,GAAG;IAAC,MAAM,EAAC,GAAG;IAAC,SAAS;EAAkC,GACpEA,MAAM,CAEV,EACAb,YAAY,CAACc,SAAS,CAAC,iBACtB,oBAAC,OAAO;IAAC,SAAS;EAAqC,GAAEA,SAAS,CACnE,EAEAC,QAAQ,EAERf,YAAY,CAACgB,OAAO,CAAC,iBAAI;IAAK,SAAS;EAAmC,GAAEA,OAAO,CAAO,EAE1FS,SAAS,iBAAI,oBAAC,kBAAkB;IAAC,OAAO,EAAER;EAAQ,EAAG,EACrDW,qBAAqB,iBACpB,oBAAC,iBAAiB;IAChB,cAAYV,YAAa;IACzB,SAAS,8BAAmC;IAC5C,OAAO,EAAED;EAAQ,gBAEjB,oBAAC,aAAa,OAAG,CAEpB,CACG,CACF;AAEV,CAAC"}

package/dist/cssm/components/ModalDismissButton/ModalDismissButton.js

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["aria-label", "className"];
 import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
 import { Icon20Cancel } from '@vkontakte/icons';
+import { classNames } from '@vkontakte/vkjs';
 import { Tappable } from '../Tappable/Tappable';
 import "./ModalDismissButton.module.css";
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"ModalDismissButton.js","names":["React","classNames","Icon20Cancel","Tappable","ModalDismissButton","ariaLabel","className","restProps"],"sources":["../../../../src/components/ModalDismissButton/ModalDismissButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Icon20Cancel } from '@vkontakte/icons';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './ModalDismissButton.module.css';\n\nexport type ModalDismissButtonProps = React.HTMLAttributes<HTMLButtonElement>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalDismissButton\n */\nexport const ModalDismissButton = ({\n  'aria-label': ariaLabel = 'Закрыть',\n  className,\n  ...restProps\n}: ModalDismissButtonProps) => {\n  return (\n    <Tappable\n      className={classNames(styles['ModalDismissButton'], className)}\n      {...restProps}\n      aria-label={ariaLabel}\n      activeMode={styles['ModalDismissButton--active']}\n      hoverMode={styles['ModalDismissButton--hover']}\n    >\n      <Icon20Cancel />\n    </Tappable>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,QAAQ,QAAQ,sBAAsB;AAAC;AAKhD;AACA;AACA;AACA,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkB,OAIA;EAAA,0BAH7B,YAAY;IAAEC,SAAS,+BAAG,SAAS;IACnCC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,oBACE,oBAAC,QAAQ;IACP,SAAS,EAAEN,UAAU,2BAA+BK,SAAS;EAAE,GAC3DC,SAAS;IACb,cAAYF,SAAU;IACtB,UAAU,kCAAuC;IACjD,SAAS;EAAsC,iBAE/C,oBAAC,YAAY,OAAG,CACP;AAEf,CAAC"}
+{"version":3,"file":"ModalDismissButton.js","names":["React","Icon20Cancel","classNames","Tappable","ModalDismissButton","ariaLabel","className","restProps"],"sources":["../../../../src/components/ModalDismissButton/ModalDismissButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon20Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './ModalDismissButton.module.css';\n\nexport type ModalDismissButtonProps = React.HTMLAttributes<HTMLButtonElement>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalDismissButton\n */\nexport const ModalDismissButton = ({\n  'aria-label': ariaLabel = 'Закрыть',\n  className,\n  ...restProps\n}: ModalDismissButtonProps) => {\n  return (\n    <Tappable\n      className={classNames(styles['ModalDismissButton'], className)}\n      {...restProps}\n      aria-label={ariaLabel}\n      activeMode={styles['ModalDismissButton--active']}\n      hoverMode={styles['ModalDismissButton--hover']}\n    >\n      <Icon20Cancel />\n    </Tappable>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,QAAQ,QAAQ,sBAAsB;AAAC;AAKhD;AACA;AACA;AACA,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkB,OAIA;EAAA,0BAH7B,YAAY;IAAEC,SAAS,+BAAG,SAAS;IACnCC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,oBACE,oBAAC,QAAQ;IACP,SAAS,EAAEL,UAAU,2BAA+BI,SAAS;EAAE,GAC3DC,SAAS;IACb,cAAYF,SAAU;IACtB,UAAU,kCAAuC;IACjD,SAAS;EAAsC,iBAE/C,oBAAC,YAAY,OAAG,CACP;AAEf,CAAC"}

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

@@ -6,13 +6,9 @@ export interface ModalPageProps extends React.HTMLAttributes<HTMLDivElement>, Na
      */
     header?: React.ReactNode;
     /**
-     * Задаёт контенту максимальную ширину.
-     *
-     * > ⚠️ **Заметки:**
-     * > - Для `viewWidth < SMALL_TABLET_SIZE` будет всегда `"s"`
-     * > - Для `platform === VKCOM` максимальная ширина зашита, её не изменить.
+     * Задаёт контенту максимальную ширину для десктопной версии.
      */
-    size?: 's' | 'm' | 'l';
+    size?: 's' | 'm' | 'l' | number;
     /**
      * Будет вызвано при начале открытия модалки.
      */

package/dist/cssm/components/ModalPage/ModalPage.js

@@ -2,19 +2,27 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "header", "size", "onOpen", "onOpened", "onClose", "onClosed", "settlingHeight", "dynamicContentHeight", "getModalContentRef", "nav", "id", "hideCloseButton", "className"];
 import * as React from 'react';
-import { getSizeXClassName } from '../../helpers/getSizeXClassName';
 import { classNames } from '@vkontakte/vkjs';
-import { Platform } from '../../lib/platform';
-import { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';
-import { usePlatform } from '../../hooks/usePlatform';
+import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { useOrientationChange } from '../../hooks/useOrientationChange';
-import { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';
-import { multiRef } from '../../lib/utils';
-import { ModalType } from '../ModalRoot/types';
+import { usePlatform } from '../../hooks/usePlatform';
 import { getNavId } from '../../lib/getNavId';
+import { Platform } from '../../lib/platform';
+import { multiRef } from '../../lib/utils';
 import { warnOnce } from '../../lib/warnOnce';
-import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
+import { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';
+import { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';
+import { ModalType } from '../ModalRoot/types';
 import "./ModalPage.module.css";
+var sizeXClassNames = {
+  regular: "vkuiModalPage--sizeX-regular",
+  compact: ''
+};
+var sizeClassName = {
+  s: "vkuiModalPage--size-s",
+  m: "vkuiModalPage--size-m",
+  l: "vkuiModalPage--size-l"
+};
 var warn = warnOnce('ModalPage');
 
 /**
@@ -56,9 +64,12 @@ export var ModalPage = function ModalPage(_ref) {
     refs = _useModalRegistry.refs;
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
     id: id,
-    className: classNames("vkuiModalPage", platform === Platform.IOS && "vkuiModalPage--ios", platform === Platform.VKCOM && "vkuiModalPage--vkcom", getSizeXClassName("vkuiModalPage", sizeX), isDesktop && "vkuiModalPage--desktop", styles["ModalPage--size-".concat(size)], className)
+    className: classNames("vkuiModalPage", platform === Platform.IOS && "vkuiModalPage--ios", isDesktop && "vkuiModalPage--desktop", sizeXClassNames[sizeX], typeof size === 'string' && sizeClassName[size], className)
   }), /*#__PURE__*/React.createElement("div", {
     className: "vkuiModalPage__in-wrap",
+    style: {
+      maxWidth: typeof size === 'number' ? size : undefined
+    },
     ref: refs.innerElement
   }, /*#__PURE__*/React.createElement("div", {
     className: "vkuiModalPage__in"
@@ -76,9 +87,4 @@ export var ModalPage = function ModalPage(_ref) {
     onClick: onClose || modalContext.onClose
   }))));
 };
-var styles = {
-  "ModalPage--size-s": "vkuiModalPage--size-s",
-  "ModalPage--size-m": "vkuiModalPage--size-m",
-  "ModalPage--size-l": "vkuiModalPage--size-l"
-};
 //# sourceMappingURL=ModalPage.js.map