@vkontakte/vkui 5.0.2 → 5.1.0

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

@@ -1,12 +1,11 @@
 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 { classNamesString } from "../../lib/classNames";
-import { Paragraph } from "../Typography/Paragraph/Paragraph";
-import { Tappable } from "../Tappable/Tappable";
-import { hasReactNode } from "../../lib/utils";
-import { Icon16Chevron } from "@vkontakte/icons";
+import * as React from 'react';
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { Paragraph } from '../Typography/Paragraph/Paragraph';
+import { Tappable } from '../Tappable/Tappable';
+import { Icon16Chevron } from '@vkontakte/icons';
 import "./MiniInfoCell.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/MiniInfoCell
@@ -16,21 +15,21 @@ export var MiniInfoCell = function MiniInfoCell(_ref) {
     after = _ref.after,
     children = _ref.children,
     _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? "base" : _ref$mode,
+    mode = _ref$mode === void 0 ? 'base' : _ref$mode,
     _ref$textWrap = _ref.textWrap,
-    textWrap = _ref$textWrap === void 0 ? "nowrap" : _ref$textWrap,
+    textWrap = _ref$textWrap === void 0 ? 'nowrap' : _ref$textWrap,
     _ref$expandable = _ref.expandable,
     expandable = _ref$expandable === void 0 ? false : _ref$expandable,
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
-  var cellClasses = classNamesString("vkuiMiniInfoCell", styles["MiniInfoCell--textWrap-".concat(textWrap)], mode !== "base" && styles["MiniInfoCell--mode-".concat(mode)], className);
+  var cellClasses = classNames("vkuiMiniInfoCell", styles["MiniInfoCell--textWrap-".concat(textWrap)], mode !== 'base' && styles["MiniInfoCell--mode-".concat(mode)], className);
   var cellContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     className: "vkuiMiniInfoCell__before"
   }, before), /*#__PURE__*/React.createElement("div", {
     className: "vkuiMiniInfoCell__middle"
   }, /*#__PURE__*/React.createElement(Paragraph, {
     className: "vkuiMiniInfoCell__content",
-    weight: mode === "more" ? "2" : undefined
+    weight: mode === 'more' ? '2' : undefined
   }, children), expandable && /*#__PURE__*/React.createElement(Icon16Chevron, null)), hasReactNode(after) && /*#__PURE__*/React.createElement("span", {
     className: "vkuiMiniInfoCell__after"
   }, after));

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

@@ -1 +1 @@
-{"version":3,"file":"MiniInfoCell.js","names":["React","classNamesString","Paragraph","Tappable","hasReactNode","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 { classNamesString } from \"../../lib/classNames\";\nimport { Paragraph } from \"../Typography/Paragraph/Paragraph\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Icon16Chevron } from \"@vkontakte/icons\";\nimport styles from \"./MiniInfoCell.module.css\";\n\nexport interface MiniInfoCellProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Иконка слева.<br />\n   * Рекомендуется использовать иконки размера 20.\n   */\n  before: React.ReactNode;\n\n  /**\n   * Содержимое справа.<br />\n   * `<UsersStack size=\"s\" />` или `<Avatar size={24} />`\n   */\n  after?: React.ReactNode;\n\n  /**\n   * Тип ячейки:\n   *\n   * - `base` – базовая ячейка с серой иконкой и серым текстом.<br />\n   * В компонент можно передать `Link`, чтобы визуально сделать часть текста ссылкой.\n   * - `add` – тип ячейки, который показывает, что взаимодействие с ней должно вызывать действие добавления чего-то.\n   * - `more` – взаимодействие с такой ячейкой должно открывать какую-то подробную информацию.\n   */\n  mode?: \"base\" | \"accent\" | \"add\" | \"more\";\n\n  /**\n   * Тип отображения текста:\n   *\n   * - `nowrap` – в одну строку, текст не переносится и обрезается.\n   * - `short` – максимально отображается 3 строки, остальное обрезается.\n   * - `full` – текст отображается полностью.\n   */\n  textWrap?: \"nowrap\" | \"short\" | \"full\";\n\n  /**\n   * Передавать `true`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/MiniInfoCell\n */\nexport const MiniInfoCell = ({\n  before,\n  after,\n  children,\n  mode = \"base\",\n  textWrap = \"nowrap\",\n  expandable = false,\n  className,\n  ...restProps\n}: MiniInfoCellProps) => {\n  const cellClasses = classNamesString(\n    styles[\"MiniInfoCell\"],\n    styles[`MiniInfoCell--textWrap-${textWrap}`],\n    mode !== \"base\" && styles[`MiniInfoCell--mode-${mode}`],\n    className\n  );\n\n  const cellContent = (\n    <React.Fragment>\n      <span className={styles[\"MiniInfoCell__before\"]}>{before}</span>\n      <div className={styles[\"MiniInfoCell__middle\"]}>\n        <Paragraph\n          className={styles[\"MiniInfoCell__content\"]}\n          weight={mode === \"more\" ? \"2\" : undefined}\n        >\n          {children}\n        </Paragraph>\n        {expandable && <Icon16Chevron />}\n      </div>\n      {hasReactNode(after) && (\n        <span className={styles[\"MiniInfoCell__after\"]}>{after}</span>\n      )}\n    </React.Fragment>\n  );\n\n  return restProps.onClick ? (\n    <Tappable\n      Component=\"div\"\n      role=\"button\"\n      {...restProps}\n      className={cellClasses}\n    >\n      {cellContent}\n    </Tappable>\n  ) : (\n    <div {...restProps} className={cellClasses}>\n      {cellContent}\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,SAAS,QAAQ,mCAAmC;AAC7D,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,aAAa,QAAQ,kBAAkB;AAAC;AA0CjD;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,gBAAgB,qBAElCe,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,EACLR,YAAY,CAACI,KAAK,CAAC,iBAClB;IAAM,SAAS;EAAgC,GAAEA,KAAK,CACvD,CAEJ;EAED,OAAOM,SAAS,CAACK,OAAO,gBACtB,oBAAC,QAAQ;IACP,SAAS,EAAC,KAAK;IACf,IAAI,EAAC;EAAQ,GACTL,SAAS;IACb,SAAS,EAAEC;EAAY,IAEtBE,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","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"}

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

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

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

@@ -1,18 +1,18 @@
 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"];
-import * as React from "react";
-import { getPlatformClassName } from "../../helpers/getPlatformClassName";
-import { classNamesString } from "../../lib/classNames";
-import { ModalRootContext, useModalRegistry } from "../ModalRoot/ModalRootContext";
-import { ModalType } from "../ModalRoot/types";
-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 * 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 { 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 "./ModalCard.module.css";
-var warn = warnOnce("ModalCard");
+var warn = warnOnce('ModalCard');
 
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalCard
@@ -39,7 +39,7 @@ export var ModalCard = function ModalCard(_ref) {
     refs = _useModalRegistry.refs;
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
     id: id,
-    className: classNamesString("vkuiModalCard", getPlatformClassName("vkuiModalCard", platform), isDesktop && "vkuiModalCard--desktop", className)
+    className: classNames("vkuiModalCard", getPlatformClassName("vkuiModalCard", platform), isDesktop && "vkuiModalCard--desktop", className)
   }), /*#__PURE__*/React.createElement(ModalCardBase, {
     className: "vkuiModalCard__in",
     getRootRef: refs.innerElement,

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

@@ -1 +1 @@
-{"version":3,"file":"ModalCard.js","names":["React","getPlatformClassName","classNamesString","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 { classNamesString } from \"../../lib/classNames\";\nimport {\n  ModalRootContext,\n  useModalRegistry,\n} from \"../ModalRoot/ModalRootContext\";\nimport { ModalType } from \"../ModalRoot/types\";\nimport { getNavId, NavIdProps } from \"../../lib/getNavId\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport {\n  ModalCardBase,\n  ModalCardBaseProps,\n} from \"../ModalCardBase/ModalCardBase\";\nimport { useAdaptivityWithJSMediaQueries } from \"../../hooks/useAdaptivityWithJSMediaQueries\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport styles from \"./ModalCard.module.css\";\n\nexport interface ModalCardProps extends NavIdProps, ModalCardBaseProps {}\n\nconst warn = warnOnce(\"ModalCard\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCard\n */\nexport const ModalCard = ({\n  icon,\n  header,\n  subheader,\n  children,\n  actions,\n  onClose,\n  nav,\n  id,\n  className,\n  ...restProps\n}: ModalCardProps) => {\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const platform = usePlatform();\n\n  const modalContext = React.useContext(ModalRootContext);\n  const { refs } = useModalRegistry(\n    getNavId({ nav, id }, warn),\n    ModalType.CARD\n  );\n\n  return (\n    <div\n      {...restProps}\n      id={id}\n      className={classNamesString(\n        styles[\"ModalCard\"],\n        getPlatformClassName(styles[\"ModalCard\"], platform),\n        isDesktop && styles[\"ModalCard--desktop\"],\n        className\n      )}\n    >\n      <ModalCardBase\n        className={styles[\"ModalCard__in\"]}\n        getRootRef={refs.innerElement}\n        icon={icon}\n        header={header}\n        subheader={subheader}\n        actions={actions}\n        onClose={onClose || modalContext.onClose}\n      >\n        {children}\n      </ModalCardBase>\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,oBAAoB,QAAQ,oCAAoC;AACzE,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SACEC,gBAAgB,EAChBC,gBAAgB,QACX,+BAA+B;AACtC,SAASC,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,QAAQ,QAAoB,oBAAoB;AACzD,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SACEC,aAAa,QAER,gCAAgC;AACvC,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,CAC/BE,QAAQ,CAAC;MAAEa,GAAG,EAAHA,GAAG;MAAEC,EAAE,EAAFA;IAAG,CAAC,EAAET,IAAI,CAAC,EAC3BN,SAAS,CAACsB,IAAI,CACf;IAHOC,IAAI,qBAAJA,IAAI;EAKZ,oBACE,wCACMN,SAAS;IACb,EAAE,EAAEF,EAAG;IACP,SAAS,EAAElB,gBAAgB,kBAEzBD,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","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"}

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

@@ -1 +1 @@
-.vkuiModalCard{align-items:flex-end;box-sizing:border-box;display:flex;height:100%;left:0;padding:8px;position:absolute;top:0;width:100%;z-index:1}.vkuiModalCard__in{margin-left:auto;margin-right:auto;transform:translateY(calc(100% + 16px));transition:transform .34s var(--vkui--animation_easing_platform);width:100%}.vkuiModalCard--ios .vkuiModalCard__in{max-width:414px}.vkuiModalCard--android .vkuiModalCard__in{max-width:440px}.vkuiModalCard--vkcom .vkuiModalCard__in{max-width:400px}.vkuiModalCard--desktop{align-items:center}.vkuiModalCard--desktop .vkuiModalCard__in{opacity:0;transform:unset;transition:opacity .34s var(--vkui--animation_easing_platform)}.vkuiModalRoot--touched .vkuiModalCard__in{transition:none}
+.vkuiModalCard{align-items:flex-end;box-sizing:border-box;display:flex;height:100%;left:0;padding:8px;position:absolute;top:0;width:100%}.vkuiModalCard__in{margin-left:auto;margin-right:auto;transform:translateY(calc(100% + 16px));transition:transform .34s var(--vkui--animation_easing_platform);width:100%}.vkuiModalCard--ios .vkuiModalCard__in{max-width:414px}.vkuiModalCard--android .vkuiModalCard__in{max-width:440px}.vkuiModalCard--vkcom .vkuiModalCard__in{max-width:400px}.vkuiModalCard--desktop{align-items:center}.vkuiModalCard--desktop .vkuiModalCard__in{opacity:0;transform:unset;transition:opacity .34s var(--vkui--animation_easing_platform)}.vkuiModalRoot--touched .vkuiModalCard__in{transition:none}

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

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

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

@@ -1,19 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["getRootRef", "icon", "header", "subheader", "children", "actions", "onClose", "dismissLabel", "className"];
-import * as React from "react";
-import { hasReactNode } from "../../lib/utils";
-import { Title } from "../Typography/Title/Title";
-import { Subhead } from "../Typography/Subhead/Subhead";
-import { classNamesString } from "../../lib/classNames";
-import { getPlatformClassName } from "../../helpers/getPlatformClassName";
-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 * as React from 'react';
+import { Title } from '../Typography/Title/Title';
+import { Subhead } from '../Typography/Subhead/Subhead';
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { getPlatformClassName } from '../../helpers/getPlatformClassName';
+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 "./ModalCardBase.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalCardBase
@@ -27,7 +26,7 @@ export var ModalCardBase = function ModalCardBase(_ref) {
     actions = _ref.actions,
     onClose = _ref.onClose,
     _ref$dismissLabel = _ref.dismissLabel,
-    dismissLabel = _ref$dismissLabel === void 0 ? "Скрыть" : _ref$dismissLabel,
+    dismissLabel = _ref$dismissLabel === void 0 ? 'Скрыть' : _ref$dismissLabel,
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var platform = usePlatform();
@@ -36,10 +35,10 @@ export var ModalCardBase = function ModalCardBase(_ref) {
   var isSoftwareKeyboardOpened = useKeyboard().isOpened;
   var canShowCloseButtonIOS = platform === Platform.IOS && !isDesktop;
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    className: classNamesString("vkuiModalCardBase", getPlatformClassName("vkuiModalCardBase", platform), isDesktop && "vkuiModalCardBase--desktop", className),
+    className: classNames("vkuiModalCardBase", getPlatformClassName("vkuiModalCardBase", platform), isDesktop && "vkuiModalCardBase--desktop", className),
     ref: getRootRef
   }), /*#__PURE__*/React.createElement("div", {
-    className: classNamesString("vkuiModalCardBase__container", isSoftwareKeyboardOpened && "vkuiModalCardBase__container--softwareKeyboardOpened")
+    className: classNames("vkuiModalCardBase__container", isSoftwareKeyboardOpened && "vkuiModalCardBase__container--softwareKeyboardOpened")
   }, hasReactNode(icon) && /*#__PURE__*/React.createElement("div", {
     className: "vkuiModalCardBase__icon"
   }, icon), hasReactNode(header) && /*#__PURE__*/React.createElement(Title, {

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

@@ -1 +1 @@
-{"version":3,"file":"ModalCardBase.js","names":["React","hasReactNode","Title","Subhead","classNamesString","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 { hasReactNode } from \"../../lib/utils\";\nimport { Title } from \"../Typography/Title/Title\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { classNamesString } from \"../../lib/classNames\";\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={classNamesString(\n        styles[\"ModalCardBase\"],\n        getPlatformClassName(styles[\"ModalCardBase\"], platform),\n        isDesktop && styles[\"ModalCardBase--desktop\"],\n        className\n      )}\n      ref={getRootRef}\n    >\n      <div\n        className={classNamesString(\n          styles[\"ModalCardBase__container\"],\n          isSoftwareKeyboardOpened &&\n            styles[\"ModalCardBase__container--softwareKeyboardOpened\"]\n        )}\n      >\n        {hasReactNode(icon) && (\n          <div className={styles[\"ModalCardBase__icon\"]}>{icon}</div>\n        )}\n        {hasReactNode(header) && (\n          <Title\n            level=\"2\"\n            weight=\"2\"\n            className={styles[\"ModalCardBase__header\"]}\n          >\n            {header}\n          </Title>\n        )}\n        {hasReactNode(subheader) && (\n          <Subhead className={styles[\"ModalCardBase__subheader\"]}>\n            {subheader}\n          </Subhead>\n        )}\n\n        {children}\n\n        {hasReactNode(actions) && (\n          <div className={styles[\"ModalCardBase__actions\"]}>{actions}</div>\n        )}\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,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,KAAK,QAAQ,2BAA2B;AACjD,SAASC,OAAO,QAAQ,+BAA+B;AACvD,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,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,EAAEnB,gBAAgB,sBAEzBC,oBAAoB,sBAA0BmB,QAAQ,CAAC,EACvDC,SAAS,gCAAoC,EAC7CH,SAAS,CACT;IACF,GAAG,EAAER;EAAW,iBAEhB;IACE,SAAS,EAAEV,gBAAgB,iCAEzBsB,wBAAwB,0DACoC;EAC5D,GAEDzB,YAAY,CAACc,IAAI,CAAC,iBACjB;IAAK,SAAS;EAAgC,GAAEA,IAAI,CACrD,EACAd,YAAY,CAACe,MAAM,CAAC,iBACnB,oBAAC,KAAK;IACJ,KAAK,EAAC,GAAG;IACT,MAAM,EAAC,GAAG;IACV,SAAS;EAAkC,GAE1CA,MAAM,CAEV,EACAf,YAAY,CAACgB,SAAS,CAAC,iBACtB,oBAAC,OAAO;IAAC,SAAS;EAAqC,GACpDA,SAAS,CAEb,EAEAC,QAAQ,EAERjB,YAAY,CAACkB,OAAO,CAAC,iBACpB;IAAK,SAAS;EAAmC,GAAEA,OAAO,CAC3D,EAEAM,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","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"}

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

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

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

@@ -1,21 +1,21 @@
 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 { classNamesString } from "../../lib/classNames";
-import { Icon20Cancel } from "@vkontakte/icons";
-import { Tappable } from "../Tappable/Tappable";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { Icon20Cancel } from '@vkontakte/icons';
+import { Tappable } from '../Tappable/Tappable';
 import "./ModalDismissButton.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalDismissButton
  */
 export var ModalDismissButton = function ModalDismissButton(_ref) {
-  var _ref$ariaLabel = _ref["aria-label"],
-    ariaLabel = _ref$ariaLabel === void 0 ? "Закрыть" : _ref$ariaLabel,
+  var _ref$ariaLabel = _ref['aria-label'],
+    ariaLabel = _ref$ariaLabel === void 0 ? 'Закрыть' : _ref$ariaLabel,
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(Tappable, _extends({
-    className: classNamesString("vkuiModalDismissButton", className)
+    className: classNames("vkuiModalDismissButton", className)
   }, restProps, {
     "aria-label": ariaLabel,
     activeMode: "vkuiModalDismissButton--active",

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

@@ -1 +1 @@
-{"version":3,"file":"ModalDismissButton.js","names":["React","classNamesString","Icon20Cancel","Tappable","ModalDismissButton","ariaLabel","className","restProps"],"sources":["../../../../src/components/ModalDismissButton/ModalDismissButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\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={classNamesString(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,gBAAgB,QAAQ,sBAAsB;AACvD,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,gBAAgB,2BAA+BK,SAAS;EAAE,GACjEC,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","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"}

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { NavIdProps } from "../../lib/getNavId";
+import * as React from 'react';
+import { NavIdProps } from '../../lib/getNavId';
 export interface ModalPageProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {
     /**
      * Шапка модальной страницы, `<ModalPageHeader />`
@@ -12,7 +12,7 @@ export interface ModalPageProps extends React.HTMLAttributes<HTMLDivElement>, Na
      * > - Для `viewWidth < SMALL_TABLET_SIZE` будет всегда `"s"`
      * > - Для `platform === VKCOM` максимальная ширина зашита, её не изменить.
      */
-    size?: "s" | "m" | "l";
+    size?: 's' | 'm' | 'l';
     /**
      * Будет вызвано при начале открытия модалки.
      */

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

@@ -1,21 +1,21 @@
 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 { classNamesString } from "../../lib/classNames";
-import { Platform } from "../../lib/platform";
-import { ModalRootContext, useModalRegistry } from "../ModalRoot/ModalRootContext";
-import { usePlatform } from "../../hooks/usePlatform";
-import { useOrientationChange } from "../../hooks/useOrientationChange";
-import { ModalDismissButton } from "../ModalDismissButton/ModalDismissButton";
-import { multiRef } from "../../lib/utils";
-import { ModalType } from "../ModalRoot/types";
-import { getNavId } from "../../lib/getNavId";
-import { warnOnce } from "../../lib/warnOnce";
-import { useAdaptivityWithJSMediaQueries } from "../../hooks/useAdaptivityWithJSMediaQueries";
+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 { useOrientationChange } from '../../hooks/useOrientationChange';
+import { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';
+import { multiRef } from '../../lib/utils';
+import { ModalType } from '../ModalRoot/types';
+import { getNavId } from '../../lib/getNavId';
+import { warnOnce } from '../../lib/warnOnce';
+import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import "./ModalPage.module.css";
-var warn = warnOnce("ModalPage");
+var warn = warnOnce('ModalPage');
 
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalPage
@@ -24,7 +24,7 @@ export var ModalPage = function ModalPage(_ref) {
   var children = _ref.children,
     header = _ref.header,
     _ref$size = _ref.size,
-    sizeProp = _ref$size === void 0 ? "s" : _ref$size,
+    sizeProp = _ref$size === void 0 ? 's' : _ref$size,
     onOpen = _ref.onOpen,
     onOpened = _ref.onOpened,
     onClose = _ref.onClose,
@@ -47,7 +47,7 @@ export var ModalPage = function ModalPage(_ref) {
     isDesktop = _useAdaptivityWithJSM.isDesktop;
   React.useEffect(updateModalHeight, [children, orientation, updateModalHeight]);
   var isCloseButtonShown = !hideCloseButton && isDesktop;
-  var size = isDesktop ? sizeProp : "s";
+  var size = isDesktop ? sizeProp : 's';
   var modalContext = React.useContext(ModalRootContext);
   var _useModalRegistry = useModalRegistry(getNavId({
       nav: nav,
@@ -56,7 +56,7 @@ export var ModalPage = function ModalPage(_ref) {
     refs = _useModalRegistry.refs;
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
     id: id,
-    className: classNamesString("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", platform === Platform.VKCOM && "vkuiModalPage--vkcom", getSizeXClassName("vkuiModalPage", sizeX), isDesktop && "vkuiModalPage--desktop", styles["ModalPage--size-".concat(size)], className)
   }), /*#__PURE__*/React.createElement("div", {
     className: "vkuiModalPage__in-wrap",
     ref: refs.innerElement

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

@@ -1 +1 @@
-{"version":3,"file":"ModalPage.js","names":["React","getSizeXClassName","classNamesString","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 { classNamesString } from \"../../lib/classNames\";\nimport { Platform } from \"../../lib/platform\";\nimport {\n  ModalRootContext,\n  useModalRegistry,\n} 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\n  extends React.HTMLAttributes<HTMLDivElement>,\n    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, [\n    children,\n    orientation,\n    updateModalHeight,\n  ]);\n\n  const isCloseButtonShown = !hideCloseButton && isDesktop;\n  const size = isDesktop ? sizeProp : \"s\";\n\n  const modalContext = React.useContext(ModalRootContext);\n  const { refs } = useModalRegistry(\n    getNavId({ nav, id }, warn),\n    ModalType.PAGE\n  );\n\n  return (\n    <div\n      {...restProps}\n      id={id}\n      className={classNamesString(\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>(\n                refs.contentElement,\n                getModalContentRef\n              )}\n            >\n              <div className={styles[\"ModalPage__content-in\"]}>{children}</div>\n            </div>\n          </div>\n          {isCloseButtonShown && (\n            <ModalDismissButton onClick={onClose || modalContext.onClose} />\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"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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"}

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

@@ -1 +1 @@
-.vkuiModalPage{box-sizing:border-box;height:100%;overflow:hidden;pointer-events:none;position:absolute;width:100%;z-index:1}.vkuiModalPage--desktop{align-items:center;display:flex;justify-content:center}.vkuiModalPage__in-wrap{align-items:flex-end;bottom:0;display:flex;height:100%;left:0;margin-left:auto;margin-right:auto;pointer-events:auto;position:absolute;right:0;transform:translateY(100%);transition:transform .32s var(--vkui--animation_easing_platform);width:100%}.vkuiModalPage--ios .vkuiModalPage__in-wrap{transition:transform .4s var(--vkui--animation_easing_platform)}.vkuiModalPage--desktop .vkuiModalPage__in-wrap{align-items:normal;height:auto;margin:32px 56px;max-height:640px;opacity:0;position:relative;transform:none;transition:opacity .34s var(--vkui--animation_easing_platform)}@media (max-height:672px){.vkuiModalPage--desktop .vkuiModalPage__in-wrap{max-height:calc(100% - 32px * 2)}}.vkuiModalPage--size-s .vkuiModalPage__in-wrap{max-width:var(--vkui--size_popup_small--regular)}.vkuiModalPage--size-m .vkuiModalPage__in-wrap{max-width:var(--vkui--size_popup_medium--regular)}.vkuiModalPage--size-l .vkuiModalPage__in-wrap{max-width:var(--vkui--size_popup_large--regular)}.vkuiModalPage--vkcom .vkuiModalPage__in-wrap{max-width:448px}.vkuiModalPage__in{background-color:var(--vkui--color_background_modal);border-top-left-radius:var(--vkui--size_border_radius_paper--regular);border-top-right-radius:var(--vkui--size_border_radius_paper--regular);box-sizing:border-box;display:flex;flex-direction:column;height:100%;overflow:visible;position:relative;width:100%}.vkuiModalPage--desktop .vkuiModalPage__in{border-bottom-left-radius:var(--vkui--size_border_radius_paper--regular);border-bottom-right-radius:var(--vkui--size_border_radius_paper--regular);box-shadow:var(--vkui--elevation3);height:auto}.vkuiModalPage__header{width:100%}.vkuiModalPage__content-wrap{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;display:flex;flex-direction:column;overflow:hidden;position:relative}.vkuiModalPage__content{box-sizing:border-box;height:100%;overflow-x:hidden;overflow-y:hidden}.vkuiModalPage--desktop .vkuiModalPage__content,.vkuiModalRoot__modal--expandable .vkuiModalPage__content{-webkit-overflow-scrolling:touch;overflow-y:auto}.vkuiModalPage__content-in{padding-bottom:0;padding-bottom:var(--vkui_internal--safe_area_inset_bottom);position:relative}.vkuiModalPage__footer{background-color:var(--vkui--color_background_modal);position:relative;z-index:10}.vkuiModalRoot--touched .vkuiModalPage__in-wrap{transition:none}.vkuiModalRoot--switching .vkuiModalPage__in-wrap{pointer-events:none}.vkuiModalRoot__modal--collapsed .vkuiModalPage__content,.vkuiModalRoot__modal--dragging .vkuiModalPage__content{overflow:hidden;touch-action:pan-y}.vkuiModalRoot--touched .vkuiModalPage__footer{transition:none}
+.vkuiModalPage{box-sizing:border-box;height:100%;overflow:hidden;pointer-events:none;position:absolute;width:100%}.vkuiModalPage--desktop{align-items:center;display:flex;justify-content:center}.vkuiModalPage__in-wrap{align-items:flex-end;bottom:0;display:flex;height:100%;left:0;margin-left:auto;margin-right:auto;pointer-events:auto;position:absolute;right:0;transform:translateY(100%);transition:transform .32s var(--vkui--animation_easing_platform);width:100%}.vkuiModalPage--ios .vkuiModalPage__in-wrap{transition:transform .4s var(--vkui--animation_easing_platform)}.vkuiModalPage--desktop .vkuiModalPage__in-wrap{align-items:normal;height:auto;margin:32px 56px;max-height:640px;opacity:0;position:relative;transform:none;transition:opacity .34s var(--vkui--animation_easing_platform)}@media (max-height:672px){.vkuiModalPage--desktop .vkuiModalPage__in-wrap{max-height:calc(100% - 32px * 2)}}.vkuiModalPage--size-s .vkuiModalPage__in-wrap{max-width:var(--vkui--size_popup_small--regular)}.vkuiModalPage--size-m .vkuiModalPage__in-wrap{max-width:var(--vkui--size_popup_medium--regular)}.vkuiModalPage--size-l .vkuiModalPage__in-wrap{max-width:var(--vkui--size_popup_large--regular)}.vkuiModalPage--vkcom .vkuiModalPage__in-wrap{max-width:448px}.vkuiModalPage__in{background-color:var(--vkui--color_background_modal);border-top-left-radius:var(--vkui--size_border_radius_paper--regular);border-top-right-radius:var(--vkui--size_border_radius_paper--regular);box-sizing:border-box;display:flex;flex-direction:column;height:100%;overflow:visible;position:relative;width:100%}.vkuiModalPage--desktop .vkuiModalPage__in{border-bottom-left-radius:var(--vkui--size_border_radius_paper--regular);border-bottom-right-radius:var(--vkui--size_border_radius_paper--regular);box-shadow:var(--vkui--elevation3);height:auto}.vkuiModalPage__header{width:100%}.vkuiModalPage__content-wrap{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;display:flex;flex-direction:column;overflow:hidden;position:relative}.vkuiModalPage__content{box-sizing:border-box;height:100%;overflow-x:hidden;overflow-y:hidden}.vkuiModalPage--desktop .vkuiModalPage__content,.vkuiModalRoot__modal--expandable .vkuiModalPage__content{-webkit-overflow-scrolling:touch;overflow-y:auto}.vkuiModalPage__content-in{padding-bottom:0;padding-bottom:var(--vkui_internal--safe_area_inset_bottom);position:relative}.vkuiModalRoot--touched .vkuiModalPage__in-wrap{transition:none}.vkuiModalRoot--switching .vkuiModalPage__in-wrap{pointer-events:none}.vkuiModalRoot__modal--collapsed .vkuiModalPage__content,.vkuiModalRoot__modal--dragging .vkuiModalPage__content{overflow:hidden;touch-action:pan-y}

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

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { HasRef } from "../../types";
-import { PanelHeaderProps } from "../PanelHeader/PanelHeader";
-export interface ModalPageHeaderProps extends React.HTMLAttributes<HTMLDivElement>, Omit<PanelHeaderProps, "fixed" | "shadow">, HasRef<HTMLDivElement> {
+import * as React from 'react';
+import { HasRef } from '../../types';
+import { PanelHeaderProps } from '../PanelHeader/PanelHeader';
+export interface ModalPageHeaderProps extends React.HTMLAttributes<HTMLDivElement>, Omit<PanelHeaderProps, 'fixed' | 'shadow'>, HasRef<HTMLDivElement> {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalPageHeader

package/dist/cssm/components/ModalPageHeader/ModalPageHeader.js

@@ -1,14 +1,14 @@
 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 { useAdaptivityWithJSMediaQueries } from "../../hooks/useAdaptivityWithJSMediaQueries";
-import { Platform } from "../../lib/platform";
-import { Separator } from "../Separator/Separator";
-import { PanelHeader } from "../PanelHeader/PanelHeader";
-import { classNamesString } from "../../lib/classNames";
-import { getPlatformClassName } from "../../helpers/getPlatformClassName";
+import * as React from 'react';
+import { usePlatform } from '../../hooks/usePlatform';
+import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
+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 "./ModalPageHeader.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalPageHeader
@@ -25,10 +25,10 @@ export var ModalPageHeader = function ModalPageHeader(_ref) {
   var _useAdaptivityWithJSM = useAdaptivityWithJSMediaQueries(),
     isDesktop = _useAdaptivityWithJSM.isDesktop;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNamesString("vkuiModalPageHeader", getPlatformClassName("vkuiModalPageHeader", platform), platform !== Platform.VKCOM && "vkuiModalPageHeader--withGaps", isDesktop && "vkuiModalPageHeader--desktop"),
+    className: classNames("vkuiModalPageHeader", getPlatformClassName("vkuiModalPageHeader", platform), platform !== Platform.VKCOM && "vkuiModalPageHeader--withGaps", isDesktop && "vkuiModalPageHeader--desktop"),
     ref: getRef
   }, /*#__PURE__*/React.createElement(PanelHeader, _extends({
-    className: classNamesString("vkuiModalPageHeader__in", className)
+    className: classNames("vkuiModalPageHeader__in", className)
   }, restProps, {
     fixed: false,
     separator: false,

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

@@ -1 +1 @@
-{"version":3,"file":"ModalPageHeader.js","names":["React","usePlatform","useAdaptivityWithJSMediaQueries","Platform","Separator","PanelHeader","classNamesString","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 { classNamesString } from \"../../lib/classNames\";\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={classNamesString(\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={classNamesString(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,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,oBAAoB,QAAQ,oCAAoC;AAAC;AAQ1E;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,gBAAgB,wBAEzBC,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,gBAAgB,4BAAgCM,SAAS;EAAE,GAClEC,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","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;AAAC;AAQ1E;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"}

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

@@ -1 +1 @@
-.vkuiModalPageHeader{--vkui_internal--safe_area_inset_top:0;position:relative;z-index:2}.vkuiModalPageHeader--withGaps{padding-left:4px;padding-right:4px}.vkuiModalPageHeader--desktop.vkuiModalPageHeader--withGaps{padding-left:8px;padding-right:8px}.vkuiModalPageHeader .vkuiIcon--cancel_24,.vkuiModalPageHeader .vkuiIcon--dismiss_24{color:var(--vkui--color_icon_secondary)}
+.vkuiModalPageHeader{--vkui_internal--safe_area_inset_top:0}.vkuiModalPageHeader--withGaps{padding-left:4px;padding-right:4px}.vkuiModalPageHeader--desktop.vkuiModalPageHeader--withGaps{padding-left:8px;padding-right:8px}.vkuiModalPageHeader .vkuiIcon--cancel_24,.vkuiModalPageHeader .vkuiIcon--dismiss_24{color:var(--vkui--color_icon_secondary)}

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

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { HasPlatform } from "../../types";
-import { ConfigProviderContextInterface } from "../ConfigProvider/ConfigProviderContext";
+import * as React from 'react';
+import { HasPlatform } from '../../types';
+import { ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';
 export interface ModalRootProps extends HasPlatform {
     activeModal?: string | null;
     /**