@vkontakte/vkui 5.1.2 → 5.2.1

package/dist/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';
 /**
  * @see https://vkcom.github.io/VKUI/#/MiniInfoCell
  */

package/dist/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;AAyChD;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;AAyC7D;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/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/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';
 var warn = warnOnce('ModalCard');
 
 /**
@@ -26,6 +26,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;
@@ -46,7 +47,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/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;AAKrD,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;AAK9C,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/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/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';
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalCardBase
  */
@@ -27,15 +28,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/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;AA4C7F;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;AAiDjD;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/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';
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalDismissButton

package/dist/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;AAK/C;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;AAK/C;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/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/components/ModalPage/ModalPage.js

@@ -2,18 +2,26 @@ 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';
+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');
 
 /**
@@ -55,9 +63,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"
@@ -75,9 +86,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

package/dist/components/ModalPage/ModalPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalPage.js","names":["React","getSizeXClassName","classNames","Platform","ModalRootContext","useModalRegistry","usePlatform","useOrientationChange","ModalDismissButton","multiRef","ModalType","getNavId","warnOnce","useAdaptivityWithJSMediaQueries","warn","ModalPage","children","header","size","sizeProp","onOpen","onOpened","onClose","onClosed","settlingHeight","dynamicContentHeight","getModalContentRef","nav","id","hideCloseButton","className","restProps","useContext","updateModalHeight","platform","orientation","sizeX","isDesktop","useEffect","isCloseButtonShown","modalContext","PAGE","refs","IOS","VKCOM","styles","innerElement","headerElement","contentElement"],"sources":["../../../src/components/ModalPage/ModalPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useOrientationChange } from '../../hooks/useOrientationChange';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { multiRef } from '../../lib/utils';\nimport { ModalType } from '../ModalRoot/types';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport styles from './ModalPage.module.css';\n\nexport interface ModalPageProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n  /**\n   * Шапка модальной страницы, `<ModalPageHeader />`\n   */\n  header?: React.ReactNode;\n  /**\n   * Задаёт контенту максимальную ширину.\n   *\n   * > ⚠️ **Заметки:**\n   * > - Для `viewWidth < SMALL_TABLET_SIZE` будет всегда `\"s\"`\n   * > - Для `platform === VKCOM` максимальная ширина зашита, её не изменить.\n   */\n  size?: 's' | 'm' | 'l';\n  /**\n   * Будет вызвано при начале открытия модалки.\n   */\n  onOpen?: VoidFunction;\n  /**\n   * Будет вызвано при окончательном открытии модалки.\n   */\n  onOpened?: VoidFunction;\n  /**\n   * Будет вызвано при начале закрытия модалки.\n   */\n  onClose?: VoidFunction;\n  /**\n   * Будет вызвано при окончательном закрытии модалки.\n   */\n  onClosed?: VoidFunction;\n  /**\n   * Процент, на который изначально будет открыта модальная страница. При `settlingHeight={100}` модальная страница раскрывается на всю высоту.\n   */\n  settlingHeight?: number;\n  /**\n   * Если высота контента в модальной странице может поменяться, нужно установить это свойство\n   */\n  dynamicContentHeight?: boolean;\n  getModalContentRef?: React.Ref<HTMLDivElement>;\n  /**\n   * Скрывает кнопку закрытия (актуально для iOS, т.к. можно отрисовать кнопку закрытия внутри модалки)\n   */\n  hideCloseButton?: boolean;\n}\n\nconst warn = warnOnce('ModalPage');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalPage\n */\nexport const ModalPage = ({\n  children,\n  header,\n  size: sizeProp = 's',\n  onOpen,\n  onOpened,\n  onClose,\n  onClosed,\n  settlingHeight, // 75\n  dynamicContentHeight,\n  getModalContentRef,\n  nav,\n  id,\n  hideCloseButton = false,\n  className,\n  ...restProps\n}: ModalPageProps) => {\n  const { updateModalHeight } = React.useContext(ModalRootContext);\n\n  const platform = usePlatform();\n  const orientation = useOrientationChange();\n  const { sizeX, isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  React.useEffect(updateModalHeight, [children, orientation, updateModalHeight]);\n\n  const isCloseButtonShown = !hideCloseButton && isDesktop;\n  const size = isDesktop ? sizeProp : 's';\n\n  const modalContext = React.useContext(ModalRootContext);\n  const { refs } = useModalRegistry(getNavId({ nav, id }, warn), ModalType.PAGE);\n\n  return (\n    <div\n      {...restProps}\n      id={id}\n      className={classNames(\n        styles['ModalPage'],\n        platform === Platform.IOS && styles['ModalPage--ios'],\n        platform === Platform.VKCOM && styles['ModalPage--vkcom'],\n        getSizeXClassName(styles['ModalPage'], sizeX),\n        isDesktop && styles['ModalPage--desktop'],\n        styles[`ModalPage--size-${size}`],\n        className,\n      )}\n    >\n      <div className={styles['ModalPage__in-wrap']} ref={refs.innerElement}>\n        <div className={styles['ModalPage__in']}>\n          <div className={styles['ModalPage__header']} ref={refs.headerElement}>\n            {header}\n          </div>\n\n          <div className={styles['ModalPage__content-wrap']}>\n            <div\n              className={styles['ModalPage__content']}\n              ref={multiRef<HTMLDivElement>(refs.contentElement, getModalContentRef)}\n            >\n              <div className={styles['ModalPage__content-in']}>{children}</div>\n            </div>\n          </div>\n          {isCloseButtonShown && <ModalDismissButton onClick={onClose || modalContext.onClose} />}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ModalPage.js","names":["React","classNames","useAdaptivityWithJSMediaQueries","useOrientationChange","usePlatform","getNavId","Platform","multiRef","warnOnce","ModalDismissButton","ModalRootContext","useModalRegistry","ModalType","sizeXClassNames","regular","compact","sizeClassName","s","m","l","warn","ModalPage","children","header","size","sizeProp","onOpen","onOpened","onClose","onClosed","settlingHeight","dynamicContentHeight","getModalContentRef","nav","id","hideCloseButton","className","restProps","useContext","updateModalHeight","platform","orientation","sizeX","isDesktop","useEffect","isCloseButtonShown","modalContext","PAGE","refs","IOS","maxWidth","undefined","innerElement","headerElement","contentElement"],"sources":["../../../src/components/ModalPage/ModalPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useOrientationChange } from '../../hooks/useOrientationChange';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { multiRef } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';\nimport { ModalType } from '../ModalRoot/types';\nimport styles from './ModalPage.module.css';\n\nconst sizeXClassNames = {\n  regular: styles['ModalPage--sizeX-regular'],\n  compact: '',\n};\n\nconst sizeClassName = {\n  s: styles[`ModalPage--size-s`],\n  m: styles[`ModalPage--size-m`],\n  l: styles[`ModalPage--size-l`],\n};\n\nexport interface ModalPageProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n  /**\n   * Шапка модальной страницы, `<ModalPageHeader />`\n   */\n  header?: React.ReactNode;\n  /**\n   * Задаёт контенту максимальную ширину для десктопной версии.\n   */\n  size?: 's' | 'm' | 'l' | number;\n  /**\n   * Будет вызвано при начале открытия модалки.\n   */\n  onOpen?: VoidFunction;\n  /**\n   * Будет вызвано при окончательном открытии модалки.\n   */\n  onOpened?: VoidFunction;\n  /**\n   * Будет вызвано при начале закрытия модалки.\n   */\n  onClose?: VoidFunction;\n  /**\n   * Будет вызвано при окончательном закрытии модалки.\n   */\n  onClosed?: VoidFunction;\n  /**\n   * Процент, на который изначально будет открыта модальная страница. При `settlingHeight={100}` модальная страница раскрывается на всю высоту.\n   */\n  settlingHeight?: number;\n  /**\n   * Если высота контента в модальной странице может поменяться, нужно установить это свойство\n   */\n  dynamicContentHeight?: boolean;\n  getModalContentRef?: React.Ref<HTMLDivElement>;\n  /**\n   * Скрывает кнопку закрытия (актуально для iOS, т.к. можно отрисовать кнопку закрытия внутри модалки)\n   */\n  hideCloseButton?: boolean;\n}\n\nconst warn = warnOnce('ModalPage');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalPage\n */\nexport const ModalPage = ({\n  children,\n  header,\n  size: sizeProp = 's',\n  onOpen,\n  onOpened,\n  onClose,\n  onClosed,\n  settlingHeight, // 75\n  dynamicContentHeight,\n  getModalContentRef,\n  nav,\n  id,\n  hideCloseButton = false,\n  className,\n  ...restProps\n}: ModalPageProps) => {\n  const { updateModalHeight } = React.useContext(ModalRootContext);\n\n  const platform = usePlatform();\n  const orientation = useOrientationChange();\n  const { sizeX, isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  React.useEffect(updateModalHeight, [children, orientation, updateModalHeight]);\n\n  const isCloseButtonShown = !hideCloseButton && isDesktop;\n  const size = isDesktop ? sizeProp : 's';\n\n  const modalContext = React.useContext(ModalRootContext);\n  const { refs } = useModalRegistry(getNavId({ nav, id }, warn), ModalType.PAGE);\n\n  return (\n    <div\n      {...restProps}\n      id={id}\n      className={classNames(\n        styles['ModalPage'],\n        platform === Platform.IOS && styles['ModalPage--ios'],\n        isDesktop && styles['ModalPage--desktop'],\n        sizeXClassNames[sizeX],\n        typeof size === 'string' && sizeClassName[size],\n        className,\n      )}\n    >\n      <div\n        className={styles['ModalPage__in-wrap']}\n        style={{\n          maxWidth: typeof size === 'number' ? size : undefined,\n        }}\n        ref={refs.innerElement}\n      >\n        <div className={styles['ModalPage__in']}>\n          <div className={styles['ModalPage__header']} ref={refs.headerElement}>\n            {header}\n          </div>\n\n          <div className={styles['ModalPage__content-wrap']}>\n            <div\n              className={styles['ModalPage__content']}\n              ref={multiRef<HTMLDivElement>(refs.contentElement, getModalContentRef)}\n            >\n              <div className={styles['ModalPage__content-in']}>{children}</div>\n            </div>\n          </div>\n          {isCloseButtonShown && <ModalDismissButton onClick={onClose || modalContext.onClose} />}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/ModalPageHeader/ModalPageHeader.js

@@ -2,13 +2,13 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "separator", "getRef", "className"];
 import * as React from 'react';
-import { usePlatform } from '../../hooks/usePlatform';
+import { classNames } from '@vkontakte/vkjs';
+import { getPlatformClassName } from '../../helpers/getPlatformClassName';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
+import { usePlatform } from '../../hooks/usePlatform';
 import { Platform } from '../../lib/platform';
-import { Separator } from '../Separator/Separator';
 import { PanelHeader } from '../PanelHeader/PanelHeader';
-import { classNames } from '@vkontakte/vkjs';
-import { getPlatformClassName } from '../../helpers/getPlatformClassName';
+import { Separator } from '../Separator/Separator';
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalPageHeader
  */

package/dist/components/ModalPageHeader/ModalPageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalPageHeader.js","names":["React","usePlatform","useAdaptivityWithJSMediaQueries","Platform","Separator","PanelHeader","classNames","getPlatformClassName","ModalPageHeader","children","separator","getRef","className","restProps","platform","hasSeparator","VKCOM","isDesktop"],"sources":["../../../src/components/ModalPageHeader/ModalPageHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { HasRef } from '../../types';\nimport { Platform } from '../../lib/platform';\nimport { Separator } from '../Separator/Separator';\nimport { PanelHeader, PanelHeaderProps } from '../PanelHeader/PanelHeader';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport styles from './ModalPageHeader.module.css';\n\nexport interface ModalPageHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Omit<PanelHeaderProps, 'fixed' | 'shadow'>,\n    HasRef<HTMLDivElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalPageHeader\n */\nexport const ModalPageHeader = ({\n  children,\n  separator = true,\n  getRef,\n  className,\n  ...restProps\n}: ModalPageHeaderProps) => {\n  const platform = usePlatform();\n  const hasSeparator = separator && platform === Platform.VKCOM;\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  return (\n    <div\n      className={classNames(\n        styles['ModalPageHeader'],\n        getPlatformClassName(styles['ModalPageHeader'], platform),\n        platform !== Platform.VKCOM && styles['ModalPageHeader--withGaps'],\n        isDesktop && styles['ModalPageHeader--desktop'],\n      )}\n      ref={getRef}\n    >\n      <PanelHeader\n        className={classNames(styles['ModalPageHeader__in'], className)}\n        {...restProps}\n        fixed={false}\n        separator={false}\n        transparent\n      >\n        {children}\n      </PanelHeader>\n      {hasSeparator && <Separator wide />}\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,+BAA+B,QAAQ,6CAA6C;AAE7F,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,SAAS,QAAQ,wBAAwB;AAClD,SAASC,WAAW,QAA0B,4BAA4B;AAC1E,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,oBAAoB,QAAQ,oCAAoC;AAQzE;AACA;AACA;AACA,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAe,OAMA;EAAA,IAL1BC,QAAQ,QAARA,QAAQ;IAAA,sBACRC,SAAS;IAATA,SAAS,+BAAG,IAAI;IAChBC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGb,WAAW,EAAE;EAC9B,IAAMc,YAAY,GAAGL,SAAS,IAAII,QAAQ,KAAKX,QAAQ,CAACa,KAAK;EAC7D,4BAAsBd,+BAA+B,EAAE;IAA/Ce,SAAS,yBAATA,SAAS;EAEjB,oBACE;IACE,SAAS,EAAEX,UAAU,wBAEnBC,oBAAoB,wBAA4BO,QAAQ,CAAC,EACzDA,QAAQ,KAAKX,QAAQ,CAACa,KAAK,mCAAuC,EAClEC,SAAS,kCAAsC,CAC/C;IACF,GAAG,EAAEN;EAAO,gBAEZ,oBAAC,WAAW;IACV,SAAS,EAAEL,UAAU,4BAAgCM,SAAS;EAAE,GAC5DC,SAAS;IACb,KAAK,EAAE,KAAM;IACb,SAAS,EAAE,KAAM;IACjB,WAAW;EAAA,IAEVJ,QAAQ,CACG,EACbM,YAAY,iBAAI,oBAAC,SAAS;IAAC,IAAI;EAAA,EAAG,CAC/B;AAEV,CAAC"}
+{"version":3,"file":"ModalPageHeader.js","names":["React","classNames","getPlatformClassName","useAdaptivityWithJSMediaQueries","usePlatform","Platform","PanelHeader","Separator","ModalPageHeader","children","separator","getRef","className","restProps","platform","hasSeparator","VKCOM","isDesktop"],"sources":["../../../src/components/ModalPageHeader/ModalPageHeader.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 { Platform } from '../../lib/platform';\nimport { HasRef } from '../../types';\nimport { PanelHeader, PanelHeaderProps } from '../PanelHeader/PanelHeader';\nimport { Separator } from '../Separator/Separator';\nimport styles from './ModalPageHeader.module.css';\n\nexport interface ModalPageHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Omit<PanelHeaderProps, 'fixed' | 'shadow'>,\n    HasRef<HTMLDivElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalPageHeader\n */\nexport const ModalPageHeader = ({\n  children,\n  separator = true,\n  getRef,\n  className,\n  ...restProps\n}: ModalPageHeaderProps) => {\n  const platform = usePlatform();\n  const hasSeparator = separator && platform === Platform.VKCOM;\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  return (\n    <div\n      className={classNames(\n        styles['ModalPageHeader'],\n        getPlatformClassName(styles['ModalPageHeader'], platform),\n        platform !== Platform.VKCOM && styles['ModalPageHeader--withGaps'],\n        isDesktop && styles['ModalPageHeader--desktop'],\n      )}\n      ref={getRef}\n    >\n      <PanelHeader\n        className={classNames(styles['ModalPageHeader__in'], className)}\n        {...restProps}\n        fixed={false}\n        separator={false}\n        transparent\n      >\n        {children}\n      </PanelHeader>\n      {hasSeparator && <Separator wide />}\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,QAAQ,oBAAoB;AAE7C,SAASC,WAAW,QAA0B,4BAA4B;AAC1E,SAASC,SAAS,QAAQ,wBAAwB;AAQlD;AACA;AACA;AACA,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAe,OAMA;EAAA,IAL1BC,QAAQ,QAARA,QAAQ;IAAA,sBACRC,SAAS;IAATA,SAAS,+BAAG,IAAI;IAChBC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGV,WAAW,EAAE;EAC9B,IAAMW,YAAY,GAAGL,SAAS,IAAII,QAAQ,KAAKT,QAAQ,CAACW,KAAK;EAC7D,4BAAsBb,+BAA+B,EAAE;IAA/Cc,SAAS,yBAATA,SAAS;EAEjB,oBACE;IACE,SAAS,EAAEhB,UAAU,wBAEnBC,oBAAoB,wBAA4BY,QAAQ,CAAC,EACzDA,QAAQ,KAAKT,QAAQ,CAACW,KAAK,mCAAuC,EAClEC,SAAS,kCAAsC,CAC/C;IACF,GAAG,EAAEN;EAAO,gBAEZ,oBAAC,WAAW;IACV,SAAS,EAAEV,UAAU,4BAAgCW,SAAS;EAAE,GAC5DC,SAAS;IACb,KAAK,EAAE,KAAM;IACb,SAAS,EAAE,KAAM;IACjB,WAAW;EAAA,IAEVJ,QAAQ,CACG,EACbM,YAAY,iBAAI,oBAAC,SAAS;IAAC,IAAI;EAAA,EAAG,CAC/B;AAEV,CAAC"}

package/dist/components/ModalRoot/ModalRoot.js

@@ -8,27 +8,26 @@ import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["id"];
 import * as React from 'react';
-import { Touch } from '../Touch/Touch';
-import TouchRootContext from '../Touch/TouchContext';
 import { classNames } from '@vkontakte/vkjs';
-import { setTransformStyle } from '../../lib/styles';
-import { rubber } from '../../lib/touch';
-import { Platform } from '../../lib/platform';
-import { transitionEvent } from '../../lib/supportEvents';
-import { withPlatform } from '../../hoc/withPlatform';
+import { clamp } from '../../helpers/math';
 import { withContext } from '../../hoc/withContext';
-import { ModalRootContext } from './ModalRootContext';
-import { ConfigProviderContext, WebviewType } from '../ConfigProvider/ConfigProviderContext';
-import { ModalType } from './types';
-import { MODAL_PAGE_DEFAULT_PERCENT_HEIGHT } from './constants';
+import { withPlatform } from '../../hoc/withPlatform';
 import { withDOM } from '../../lib/dom';
 import { getNavId } from '../../lib/getNavId';
+import { Platform } from '../../lib/platform';
+import { setTransformStyle } from '../../lib/styles';
+import { transitionEvent } from '../../lib/supportEvents';
+import { rubber } from '../../lib/touch';
 import { warnOnce } from '../../lib/warnOnce';
+import { ConfigProviderContext, WebviewType } from '../ConfigProvider/ConfigProviderContext';
 import { FocusTrap } from '../FocusTrap/FocusTrap';
+import { Touch } from '../Touch/Touch';
+import TouchRootContext from '../Touch/TouchContext';
+import { ModalRootContext } from './ModalRootContext';
+import { MODAL_PAGE_DEFAULT_PERCENT_HEIGHT } from './constants';
+import { ModalType } from './types';
 import { withModalManager } from './useModalManager';
-import { clamp } from '../../helpers/math';
 var warn = warnOnce('ModalRoot');
-var IS_DEV = process.env.NODE_ENV === 'development';
 function numberInRange(number, range) {
   if (!range) {
     return false;
@@ -594,7 +593,7 @@ function initModal(modalState) {
     case ModalType.CARD:
       return initCardModal(modalState);
     default:
-      IS_DEV && warn("initActiveModal: modalState.type=\"".concat(modalState.type, "\" \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F"), 'error');
+      process.env.NODE_ENV === 'development' && warn("initActiveModal: modalState.type=\"".concat(modalState.type, "\" \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F"), 'error');
   }
 }
 function initPageModal(modalState) {