@vkontakte/vkui 4.34.1 → 4.35.1

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

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["before", "after", "mode", "textWrap", "textLevel", "children"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import { classNames } from "../../lib/classNames";
-import { Text } from "../Typography/Text/Text";
+import { Paragraph } from "../Typography/Paragraph/Paragraph";
 import { Tappable } from "../Tappable/Tappable";
 import { hasReactNode } from "../../lib/utils";
 import "./MiniInfoCell.css";
@@ -32,7 +32,7 @@ export var MiniInfoCell = function MiniInfoCell(_ref) {
     vkuiClass: classNames("MiniInfoCell", mode !== "base" && "MiniInfoCell--md-".concat(mode), textWrap !== "nowrap" && "MiniInfoCell--wr-".concat(textWrap), "MiniInfoCell--lvl-".concat(textLevel))
   }), createScopedElement("span", {
     vkuiClass: "MiniInfoCell__icon"
-  }, before), createScopedElement(Text, {
+  }, before), createScopedElement(Paragraph, {
     vkuiClass: "MiniInfoCell__content",
     weight: mode === "more" ? "2" : undefined
   }, children), hasReactNode(after) && createScopedElement("span", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/MiniInfoCell/MiniInfoCell.tsx"],"names":["classNames","Text","Tappable","hasReactNode","MiniInfoCell","before","after","mode","textWrap","textLevel","children","restProps","isClickable","onClick","undefined"],"mappings":";;;;AACA,SAASA,UAAT;AACA,SAASC,IAAT;AACA,SAASC,QAAT;AACA,SAASC,YAAT;AACA;;AA4CA;AACA;AACA;AACA,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAQH;AAAA,MAPvBC,MAOuB,QAPvBA,MAOuB;AAAA,MANvBC,KAMuB,QANvBA,KAMuB;AAAA,uBALvBC,IAKuB;AAAA,MALvBA,IAKuB,0BALhB,MAKgB;AAAA,2BAJvBC,QAIuB;AAAA,MAJvBA,QAIuB,8BAJZ,QAIY;AAAA,4BAHvBC,SAGuB;AAAA,MAHvBA,SAGuB,+BAHX,WAGW;AAAA,MAFvBC,QAEuB,QAFvBA,QAEuB;AAAA,MADpBC,SACoB;;AACvB,MAAMC,WAAW,GAAG,CAAC,CAACD,SAAS,CAACE,OAAhC;AAEA,SACE,oBAAC,QAAD;AACE,IAAA,SAAS,EAAC,KADZ;AAEE,IAAA,QAAQ,EAAE,CAACD,WAFb;AAGE,IAAA,IAAI,EAAEA,WAAW,GAAG,QAAH,GAAcE;AAHjC,KAIMH,SAJN;AAKE,IAAA,SAAS,EAAEX,UAAU,CACnB,cADmB,EAEnBO,IAAI,KAAK,MAAT,+BAAuCA,IAAvC,CAFmB,EAGnBC,QAAQ,KAAK,QAAb,+BAA6CA,QAA7C,CAHmB,8BAIEC,SAJF;AALvB,MAYE;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAsCJ,MAAtC,CAZF,EAaE,oBAAC,IAAD;AACE,IAAA,SAAS,EAAC,uBADZ;AAEE,IAAA,MAAM,EAAEE,IAAI,KAAK,MAAT,GAAkB,GAAlB,GAAwBO;AAFlC,KAIGJ,QAJH,CAbF,EAmBGP,YAAY,CAACG,KAAD,CAAZ,IACC;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAuCA,KAAvC,CApBJ,CADF;AAyBD,CApCM","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport \"./MiniInfoCell.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\" | \"add\" | \"more\";\n\n  /**\n   * Тип отображения текста:\n   *\n   * - `nowrap` – в одну строку, текст не переносится и обрезается.\n   * - `short` – максимально отображается 3 строки, остальное обрезается.\n   * - `full` – текст отображается полностью.\n   */\n  textWrap?: \"nowrap\" | \"short\" | \"full\";\n\n  /**\n   * Стиль текста:\n   *\n   * - `primary` – используйте этот стиль, если хотите выделить информацию в общем списке.<br />Пример использования: подробная информация на странице сообщества\n   * - `secondary` – стиль по-умолчанию.\n   */\n  textLevel?: \"primary\" | \"secondary\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/MiniInfoCell\n */\nexport const MiniInfoCell = ({\n  before,\n  after,\n  mode = \"base\",\n  textWrap = \"nowrap\",\n  textLevel = \"secondary\",\n  children,\n  ...restProps\n}: MiniInfoCellProps) => {\n  const isClickable = !!restProps.onClick;\n\n  return (\n    <Tappable\n      Component=\"div\"\n      disabled={!isClickable}\n      role={isClickable ? \"button\" : undefined}\n      {...restProps}\n      vkuiClass={classNames(\n        \"MiniInfoCell\",\n        mode !== \"base\" && `MiniInfoCell--md-${mode}`,\n        textWrap !== \"nowrap\" && `MiniInfoCell--wr-${textWrap}`,\n        `MiniInfoCell--lvl-${textLevel}`\n      )}\n    >\n      <span vkuiClass=\"MiniInfoCell__icon\">{before}</span>\n      <Text\n        vkuiClass=\"MiniInfoCell__content\"\n        weight={mode === \"more\" ? \"2\" : undefined}\n      >\n        {children}\n      </Text>\n      {hasReactNode(after) && (\n        <span vkuiClass=\"MiniInfoCell__after\">{after}</span>\n      )}\n    </Tappable>\n  );\n};\n"],"file":"MiniInfoCell.js"}
+{"version":3,"sources":["../../../../src/components/MiniInfoCell/MiniInfoCell.tsx"],"names":["classNames","Paragraph","Tappable","hasReactNode","MiniInfoCell","before","after","mode","textWrap","textLevel","children","restProps","isClickable","onClick","undefined"],"mappings":";;;;AACA,SAASA,UAAT;AACA,SAASC,SAAT;AACA,SAASC,QAAT;AACA,SAASC,YAAT;AACA;;AA4CA;AACA;AACA;AACA,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAQH;AAAA,MAPvBC,MAOuB,QAPvBA,MAOuB;AAAA,MANvBC,KAMuB,QANvBA,KAMuB;AAAA,uBALvBC,IAKuB;AAAA,MALvBA,IAKuB,0BALhB,MAKgB;AAAA,2BAJvBC,QAIuB;AAAA,MAJvBA,QAIuB,8BAJZ,QAIY;AAAA,4BAHvBC,SAGuB;AAAA,MAHvBA,SAGuB,+BAHX,WAGW;AAAA,MAFvBC,QAEuB,QAFvBA,QAEuB;AAAA,MADpBC,SACoB;;AACvB,MAAMC,WAAW,GAAG,CAAC,CAACD,SAAS,CAACE,OAAhC;AAEA,SACE,oBAAC,QAAD;AACE,IAAA,SAAS,EAAC,KADZ;AAEE,IAAA,QAAQ,EAAE,CAACD,WAFb;AAGE,IAAA,IAAI,EAAEA,WAAW,GAAG,QAAH,GAAcE;AAHjC,KAIMH,SAJN;AAKE,IAAA,SAAS,EAAEX,UAAU,CACnB,cADmB,EAEnBO,IAAI,KAAK,MAAT,+BAAuCA,IAAvC,CAFmB,EAGnBC,QAAQ,KAAK,QAAb,+BAA6CA,QAA7C,CAHmB,8BAIEC,SAJF;AALvB,MAYE;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAsCJ,MAAtC,CAZF,EAaE,oBAAC,SAAD;AACE,IAAA,SAAS,EAAC,uBADZ;AAEE,IAAA,MAAM,EAAEE,IAAI,KAAK,MAAT,GAAkB,GAAlB,GAAwBO;AAFlC,KAIGJ,QAJH,CAbF,EAmBGP,YAAY,CAACG,KAAD,CAAZ,IACC;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAuCA,KAAvC,CApBJ,CADF;AAyBD,CApCM","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Paragraph } from \"../Typography/Paragraph/Paragraph\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport \"./MiniInfoCell.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\" | \"add\" | \"more\";\n\n  /**\n   * Тип отображения текста:\n   *\n   * - `nowrap` – в одну строку, текст не переносится и обрезается.\n   * - `short` – максимально отображается 3 строки, остальное обрезается.\n   * - `full` – текст отображается полностью.\n   */\n  textWrap?: \"nowrap\" | \"short\" | \"full\";\n\n  /**\n   * Стиль текста:\n   *\n   * - `primary` – используйте этот стиль, если хотите выделить информацию в общем списке.<br />Пример использования: подробная информация на странице сообщества\n   * - `secondary` – стиль по-умолчанию.\n   */\n  textLevel?: \"primary\" | \"secondary\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/MiniInfoCell\n */\nexport const MiniInfoCell = ({\n  before,\n  after,\n  mode = \"base\",\n  textWrap = \"nowrap\",\n  textLevel = \"secondary\",\n  children,\n  ...restProps\n}: MiniInfoCellProps) => {\n  const isClickable = !!restProps.onClick;\n\n  return (\n    <Tappable\n      Component=\"div\"\n      disabled={!isClickable}\n      role={isClickable ? \"button\" : undefined}\n      {...restProps}\n      vkuiClass={classNames(\n        \"MiniInfoCell\",\n        mode !== \"base\" && `MiniInfoCell--md-${mode}`,\n        textWrap !== \"nowrap\" && `MiniInfoCell--wr-${textWrap}`,\n        `MiniInfoCell--lvl-${textLevel}`\n      )}\n    >\n      <span vkuiClass=\"MiniInfoCell__icon\">{before}</span>\n      <Paragraph\n        vkuiClass=\"MiniInfoCell__content\"\n        weight={mode === \"more\" ? \"2\" : undefined}\n      >\n        {children}\n      </Paragraph>\n      {hasReactNode(after) && (\n        <span vkuiClass=\"MiniInfoCell__after\">{after}</span>\n      )}\n    </Tappable>\n  );\n};\n"],"file":"MiniInfoCell.js"}

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

@@ -1 +1 @@
-.vkuiModalCard{box-sizing:border-box;position:absolute;top:0;padding:8px;left:0;width:100%;height:100%;display:flex;align-items:flex-end;z-index:1}.vkuiModalCard__in{width:100%;margin-left:auto;margin-right:auto;-webkit-transform:translateY(calc(100% + 16px));transform:translateY(calc(100% + 16px))}.vkuiModalCard--ios .vkuiModalCard__in{transition:-webkit-transform 340ms cubic-bezier(.36,.66,.04,1);transition:transform 340ms cubic-bezier(.36,.66,.04,1);transition:transform 340ms cubic-bezier(.36,.66,.04,1),-webkit-transform 340ms cubic-bezier(.36,.66,.04,1);transition:-webkit-transform 340ms var(--ios-easing);transition:transform 340ms var(--ios-easing);transition:transform 340ms var(--ios-easing),-webkit-transform 340ms var(--ios-easing);max-width:414px}.vkuiModalCard--android .vkuiModalCard__in,.vkuiModalCard--vkcom .vkuiModalCard__in{transition:-webkit-transform 340ms cubic-bezier(.4,0,.2,1);transition:transform 340ms cubic-bezier(.4,0,.2,1);transition:transform 340ms cubic-bezier(.4,0,.2,1),-webkit-transform 340ms cubic-bezier(.4,0,.2,1);transition:-webkit-transform 340ms var(--android-easing);transition:transform 340ms var(--android-easing);transition:transform 340ms var(--android-easing),-webkit-transform 340ms var(--android-easing)}.vkuiModalCard--android .vkuiModalCard__in{max-width:440px}.vkuiModalCard--vkcom .vkuiModalCard__in{max-width:400px}.vkuiModalCard--desktop{align-items:center}.vkuiModalCard--desktop .vkuiModalCard__in{-webkit-transform:unset;transform:unset;opacity:0;transition:opacity 340ms cubic-bezier(.4,0,.2,1);transition:opacity 340ms var(--android-easing)}.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%;z-index:1}.vkuiModalCard__in{margin-left:auto;margin-right:auto;-webkit-transform:translateY(calc(100% + 16px));transform:translateY(calc(100% + 16px));width:100%}.vkuiModalCard--ios .vkuiModalCard__in{max-width:414px;transition:-webkit-transform .34s cubic-bezier(.36,.66,.04,1);transition:transform .34s cubic-bezier(.36,.66,.04,1);transition:transform .34s cubic-bezier(.36,.66,.04,1),-webkit-transform .34s cubic-bezier(.36,.66,.04,1);transition:-webkit-transform .34s var(--ios-easing);transition:transform .34s var(--ios-easing);transition:transform .34s var(--ios-easing),-webkit-transform .34s var(--ios-easing)}.vkuiModalCard--android .vkuiModalCard__in,.vkuiModalCard--vkcom .vkuiModalCard__in{transition:-webkit-transform .34s cubic-bezier(.4,0,.2,1);transition:transform .34s cubic-bezier(.4,0,.2,1);transition:transform .34s cubic-bezier(.4,0,.2,1),-webkit-transform .34s cubic-bezier(.4,0,.2,1);transition:-webkit-transform .34s var(--android-easing);transition:transform .34s var(--android-easing);transition:transform .34s var(--android-easing),-webkit-transform .34s var(--android-easing)}.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;-webkit-transform:unset;transform:unset;transition:opacity .34s cubic-bezier(.4,0,.2,1);transition:opacity .34s var(--android-easing)}.vkuiModalRoot--touched .vkuiModalCard__in{transition:none}

package/dist/cssm/components/ModalCardBase/ModalCardBase.css

@@ -1,3 +1,3 @@
-.vkuiModalCardBase__container{box-sizing:border-box;position:relative;background:#fff;background:var(--modal_card_background, var(--vkui--color_background_modal));border-radius:18px;padding:16px;margin-bottom:0;margin-bottom:var(--safe-area-inset-bottom);display:flex;flex-direction:column;justify-content:center;pointer-events:initial;box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3,0px 0px 2px rgba(0, 0, 0, 0.08) , 0px 4px 16px rgba(0, 0, 0, 0.08))}.vkuiModalCardBase__container--softwareKeyboardOpened{margin-bottom:0}.vkuiModalCardBase__header,.vkuiModalCardBase__subheader{text-align:center;margin:0;padding:0 8px;word-break:break-word}.vkuiModalCardBase__header{color:#000;color:var(--text_primary, var(--vkui--color_text_primary))}.vkuiModalCardBase__subheader{color:#818c99;color:var(--text_secondary, var(--vkui--color_text_subhead))}.vkuiModalCardBase__header+.vkuiModalCardBase__subheader{margin-top:8px}.vkuiModalCardBase__icon{margin:8px auto 16px;color:#2688eb;color:var(--accent, var(--vkui--color_icon_accent))}.vkuiModalCardBase__actions{display:flex;margin-left:-6px;margin-right:-6px;margin-top:16px}.vkuiModalCardBase .vkuiUsersStack+.vkuiModalCardBase__actions{margin-top:24px}.vkuiModalCardBase__header+.vkuiModalCardBase__actions,.vkuiModalCardBase__subheader+.vkuiModalCardBase__actions{margin-top:32px}.vkuiModalCardBase__actions--v{flex-direction:column;margin-left:0;margin-right:0}.vkuiModalCardBase__dismiss{position:absolute;top:4px;right:4px;width:48px;height:48px;color:#99a2ad;color:var(--placeholder_icon_foreground_primary,
-    var(--vkui--color_icon_secondary)
-  );justify-content:center}.vkuiModalCardBase--ios .vkuiModalCardBase__header:first-child{padding-left:36px;padding-right:36px}.vkuiModalCardBase--android .vkuiModalCardBase__container,.vkuiModalCardBase--vkcom .vkuiModalCardBase__container{border-radius:12px}.vkuiModalCardBase--desktop .vkuiModalCardBase__container{border-radius:8px}
+.vkuiModalCardBase__container{background:#fff;background:var(--modal_card_background,var(--vkui--color_background_modal));border-radius:18px;box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3,0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08));box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;margin-bottom:0;margin-bottom:var(--safe-area-inset-bottom);padding:16px;pointer-events:auto;position:relative}.vkuiModalCardBase__container--softwareKeyboardOpened{margin-bottom:0}.vkuiModalCardBase__header,.vkuiModalCardBase__subheader{margin:0;padding:0 8px;text-align:center;word-break:break-word}.vkuiModalCardBase__header{color:#000;color:var(--text_primary,var(--vkui--color_text_primary))}.vkuiModalCardBase__subheader{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_subhead))}.vkuiModalCardBase__header+.vkuiModalCardBase__subheader{margin-top:8px}.vkuiModalCardBase__icon{color:#2688eb;color:var(--accent,var(--vkui--color_icon_accent));margin:8px auto 16px}.vkuiModalCardBase__actions{display:flex;margin-left:-6px;margin-right:-6px;margin-top:16px}.vkuiModalCardBase .vkuiUsersStack+.vkuiModalCardBase__actions{margin-top:24px}.vkuiModalCardBase__header+.vkuiModalCardBase__actions,.vkuiModalCardBase__subheader+.vkuiModalCardBase__actions{margin-top:32px}.vkuiModalCardBase__actions--v{flex-direction:column;margin-left:0;margin-right:0}.vkuiModalCardBase__dismiss{color:#99a2ad;color:var(
+    --placeholder_icon_foreground_primary,var(--vkui--color_icon_secondary)
+  );height:48px;justify-content:center;position:absolute;right:4px;top:4px;width:48px}.vkuiModalCardBase--ios .vkuiModalCardBase__header:first-child{padding-left:36px;padding-right:36px}.vkuiModalCardBase--android .vkuiModalCardBase__container,.vkuiModalCardBase--vkcom .vkuiModalCardBase__container{border-radius:12px}.vkuiModalCardBase--desktop .vkuiModalCardBase__container{border-radius:8px}

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

@@ -68,4 +68,5 @@ export var ModalCardBase = withAdaptivity(function (_ref) {
   viewHeight: true,
   hasMouse: true
 });
+ModalCardBase.displayName = "ModalCardBase";
 //# sourceMappingURL=ModalCardBase.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalCardBase/ModalCardBase.tsx"],"names":["hasReactNode","Title","Subhead","classNames","getClassName","usePlatform","ViewWidth","withAdaptivity","PanelHeaderButton","IOS","Platform","ModalDismissButton","Icon24Dismiss","useKeyboard","useAdaptivityIsDesktop","ModalCardBase","getRootRef","icon","header","subheader","children","actions","actionsLayout","viewWidth","hasMouse","viewHeight","onClose","dismissLabel","restProps","platform","isDesktop","isSoftwareKeyboardOpened","isOpened","canShowCloseBtn","SMALL_TABLET","VKCOM","canShowCloseBtnIos"],"mappings":";;;;AACA,SAASA,YAAT;AACA,SAASC,KAAT;AACA,SAASC,OAAT;AACA,SAASC,UAAT;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AACA,SAASC,SAAT,EAAoBC,cAApB;AAEA,SAASC,iBAAT;AACA,SAASC,GAAT,EAAcC,QAAd;AACA,SAASC,kBAAT;AACA,SAASC,aAAT,QAA8B,kBAA9B;AACA,SAASC,WAAT;AAEA,SAASC,sBAAT;AACA;;AAyCA;AACA;AACA;AACA,OAAO,IAAMC,aAAa,GAAGR,cAAc,CAGzC,gBAcM;AAAA,MAbJS,UAaI,QAbJA,UAaI;AAAA,MAZJC,IAYI,QAZJA,IAYI;AAAA,MAXJC,MAWI,QAXJA,MAWI;AAAA,MAVJC,SAUI,QAVJA,SAUI;AAAA,MATJC,QASI,QATJA,QASI;AAAA,MARJC,OAQI,QARJA,OAQI;AAAA,MAPJC,aAOI,QAPJA,aAOI;AAAA,MANJC,SAMI,QANJA,SAMI;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,UAII,QAJJA,UAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,+BAFJC,YAEI;AAAA,MAFJA,YAEI,kCAFW,QAEX;AAAA,MADDC,SACC;;AACJ,MAAMC,QAAQ,GAAGxB,WAAW,EAA5B;AACA,MAAMyB,SAAS,GAAGhB,sBAAsB,EAAxC;AACA,MAAMiB,wBAAwB,GAAGlB,WAAW,GAAGmB,QAA/C;AAEA,MAAMC,eAAe,GACnBV,SAAS,IAAIjB,SAAS,CAAC4B,YAAvB,IAAuCL,QAAQ,KAAKnB,QAAQ,CAACyB,KAD/D;AAEA,MAAMC,kBAAkB,GAAGP,QAAQ,KAAKpB,GAAb,IAAoB,CAACwB,eAAhD;AAEA,SACE,wCACML,SADN;AAEE,IAAA,SAAS,EAAEzB,UAAU,CACnBC,YAAY,CAAC,eAAD,EAAkByB,QAAlB,CADO,EAEnBC,SAAS,IAAI,wBAFM,CAFvB;AAME,IAAA,GAAG,EAAEd;AANP,MAQE;AACE,IAAA,SAAS,EAAEb,UAAU,CACnB,0BADmB,EAEnB4B,wBAAwB,IACtB,kDAHiB;AADvB,KAOG/B,YAAY,CAACiB,IAAD,CAAZ,IACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAAsCA,IAAtC,CARJ,EAUGjB,YAAY,CAACkB,MAAD,CAAZ,IACC,oBAAC,KAAD;AAAO,IAAA,KAAK,EAAC,GAAb;AAAiB,IAAA,MAAM,EAAC,GAAxB;AAA4B,IAAA,SAAS,EAAC;AAAtC,KACGA,MADH,CAXJ,EAeGlB,YAAY,CAACmB,SAAD,CAAZ,IACC,oBAAC,OAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,KAA+CA,SAA/C,CAhBJ,EAmBGC,QAnBH,EAqBGpB,YAAY,CAACqB,OAAD,CAAZ,IACC;AACE,IAAA,SAAS,EAAElB,UAAU,CACnB,wBADmB,EAEnBmB,aAAa,KAAK,UAAlB,IAAgC,2BAFb;AADvB,KAMGD,OANH,CAtBJ,EAgCGY,eAAe,IAAI,oBAAC,kBAAD;AAAoB,IAAA,OAAO,EAAEP;AAA7B,IAhCtB,EAiCGU,kBAAkB,IACjB,oBAAC,iBAAD;AACE,kBAAYT,YADd;AAEE,IAAA,SAAS,EAAC,wBAFZ;AAGE,IAAA,OAAO,EAAED;AAHX,KAKE,oBAAC,aAAD,OALF,CAlCJ,CARF,CADF;AAsDD,CAhFwC,EAiFzC;AACEH,EAAAA,SAAS,EAAE,IADb;AAEEE,EAAAA,UAAU,EAAE,IAFd;AAGED,EAAAA,QAAQ,EAAE;AAHZ,CAjFyC,CAApC","sourcesContent":["import * as React from \"react\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Title } from \"../Typography/Title/Title\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { ViewWidth, withAdaptivity } from \"../../hoc/withAdaptivity\";\nimport { HasRootRef } from \"../../types\";\nimport { PanelHeaderButton } from \"../PanelHeaderButton/PanelHeaderButton\";\nimport { IOS, Platform } from \"../../lib/platform\";\nimport { ModalDismissButton } from \"../ModalDismissButton/ModalDismissButton\";\nimport { Icon24Dismiss } from \"@vkontakte/icons\";\nimport { useKeyboard } from \"../../hooks/useKeyboard\";\nimport { AdaptivityContextInterface } from \"../AdaptivityProvider/AdaptivityContext\";\nimport { useAdaptivityIsDesktop } from \"../../hooks/useAdaptivity\";\nimport \"./ModalCardBase.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   * Кнопки-действия.\n   *\n   * Рекомендуется использовать `<Button size=\"l\" mode=\"primary\" />` или `<Button size=\"l\" mode=\"secondary\" />`\n   */\n  actions?: React.ReactNode;\n\n  /**\n   * Тип отображения кнопок: вертикальный или горизонтальный\n   */\n  actionsLayout?: \"vertical\" | \"horizontal\";\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 = withAdaptivity<\n  ModalCardBaseProps & AdaptivityContextInterface\n>(\n  ({\n    getRootRef,\n    icon,\n    header,\n    subheader,\n    children,\n    actions,\n    actionsLayout,\n    viewWidth,\n    hasMouse,\n    viewHeight,\n    onClose,\n    dismissLabel = \"Скрыть\",\n    ...restProps\n  }) => {\n    const platform = usePlatform();\n    const isDesktop = useAdaptivityIsDesktop();\n    const isSoftwareKeyboardOpened = useKeyboard().isOpened;\n\n    const canShowCloseBtn =\n      viewWidth >= ViewWidth.SMALL_TABLET || platform === Platform.VKCOM;\n    const canShowCloseBtnIos = platform === IOS && !canShowCloseBtn;\n\n    return (\n      <div\n        {...restProps}\n        vkuiClass={classNames(\n          getClassName(\"ModalCardBase\", platform),\n          isDesktop && \"ModalCardBase--desktop\"\n        )}\n        ref={getRootRef}\n      >\n        <div\n          vkuiClass={classNames(\n            \"ModalCardBase__container\",\n            isSoftwareKeyboardOpened &&\n              \"ModalCardBase__container--softwareKeyboardOpened\"\n          )}\n        >\n          {hasReactNode(icon) && (\n            <div vkuiClass=\"ModalCardBase__icon\">{icon}</div>\n          )}\n          {hasReactNode(header) && (\n            <Title level=\"2\" weight=\"2\" vkuiClass=\"ModalCardBase__header\">\n              {header}\n            </Title>\n          )}\n          {hasReactNode(subheader) && (\n            <Subhead vkuiClass=\"ModalCardBase__subheader\">{subheader}</Subhead>\n          )}\n\n          {children}\n\n          {hasReactNode(actions) && (\n            <div\n              vkuiClass={classNames(\n                \"ModalCardBase__actions\",\n                actionsLayout === \"vertical\" && \"ModalCardBase__actions--v\"\n              )}\n            >\n              {actions}\n            </div>\n          )}\n\n          {canShowCloseBtn && <ModalDismissButton onClick={onClose} />}\n          {canShowCloseBtnIos && (\n            <PanelHeaderButton\n              aria-label={dismissLabel}\n              vkuiClass=\"ModalCardBase__dismiss\"\n              onClick={onClose}\n            >\n              <Icon24Dismiss />\n            </PanelHeaderButton>\n          )}\n        </div>\n      </div>\n    );\n  },\n  {\n    viewWidth: true,\n    viewHeight: true,\n    hasMouse: true,\n  }\n);\n"],"file":"ModalCardBase.js"}
+{"version":3,"sources":["../../../../src/components/ModalCardBase/ModalCardBase.tsx"],"names":["hasReactNode","Title","Subhead","classNames","getClassName","usePlatform","ViewWidth","withAdaptivity","PanelHeaderButton","IOS","Platform","ModalDismissButton","Icon24Dismiss","useKeyboard","useAdaptivityIsDesktop","ModalCardBase","getRootRef","icon","header","subheader","children","actions","actionsLayout","viewWidth","hasMouse","viewHeight","onClose","dismissLabel","restProps","platform","isDesktop","isSoftwareKeyboardOpened","isOpened","canShowCloseBtn","SMALL_TABLET","VKCOM","canShowCloseBtnIos","displayName"],"mappings":";;;;AACA,SAASA,YAAT;AACA,SAASC,KAAT;AACA,SAASC,OAAT;AACA,SAASC,UAAT;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AACA,SAASC,SAAT,EAAoBC,cAApB;AAEA,SAASC,iBAAT;AACA,SAASC,GAAT,EAAcC,QAAd;AACA,SAASC,kBAAT;AACA,SAASC,aAAT,QAA8B,kBAA9B;AACA,SAASC,WAAT;AAEA,SAASC,sBAAT;AACA;;AAyCA;AACA;AACA;AACA,OAAO,IAAMC,aAAa,GAAGR,cAAc,CAGzC,gBAcM;AAAA,MAbJS,UAaI,QAbJA,UAaI;AAAA,MAZJC,IAYI,QAZJA,IAYI;AAAA,MAXJC,MAWI,QAXJA,MAWI;AAAA,MAVJC,SAUI,QAVJA,SAUI;AAAA,MATJC,QASI,QATJA,QASI;AAAA,MARJC,OAQI,QARJA,OAQI;AAAA,MAPJC,aAOI,QAPJA,aAOI;AAAA,MANJC,SAMI,QANJA,SAMI;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,UAII,QAJJA,UAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,+BAFJC,YAEI;AAAA,MAFJA,YAEI,kCAFW,QAEX;AAAA,MADDC,SACC;;AACJ,MAAMC,QAAQ,GAAGxB,WAAW,EAA5B;AACA,MAAMyB,SAAS,GAAGhB,sBAAsB,EAAxC;AACA,MAAMiB,wBAAwB,GAAGlB,WAAW,GAAGmB,QAA/C;AAEA,MAAMC,eAAe,GACnBV,SAAS,IAAIjB,SAAS,CAAC4B,YAAvB,IAAuCL,QAAQ,KAAKnB,QAAQ,CAACyB,KAD/D;AAEA,MAAMC,kBAAkB,GAAGP,QAAQ,KAAKpB,GAAb,IAAoB,CAACwB,eAAhD;AAEA,SACE,wCACML,SADN;AAEE,IAAA,SAAS,EAAEzB,UAAU,CACnBC,YAAY,CAAC,eAAD,EAAkByB,QAAlB,CADO,EAEnBC,SAAS,IAAI,wBAFM,CAFvB;AAME,IAAA,GAAG,EAAEd;AANP,MAQE;AACE,IAAA,SAAS,EAAEb,UAAU,CACnB,0BADmB,EAEnB4B,wBAAwB,IACtB,kDAHiB;AADvB,KAOG/B,YAAY,CAACiB,IAAD,CAAZ,IACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAAsCA,IAAtC,CARJ,EAUGjB,YAAY,CAACkB,MAAD,CAAZ,IACC,oBAAC,KAAD;AAAO,IAAA,KAAK,EAAC,GAAb;AAAiB,IAAA,MAAM,EAAC,GAAxB;AAA4B,IAAA,SAAS,EAAC;AAAtC,KACGA,MADH,CAXJ,EAeGlB,YAAY,CAACmB,SAAD,CAAZ,IACC,oBAAC,OAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,KAA+CA,SAA/C,CAhBJ,EAmBGC,QAnBH,EAqBGpB,YAAY,CAACqB,OAAD,CAAZ,IACC;AACE,IAAA,SAAS,EAAElB,UAAU,CACnB,wBADmB,EAEnBmB,aAAa,KAAK,UAAlB,IAAgC,2BAFb;AADvB,KAMGD,OANH,CAtBJ,EAgCGY,eAAe,IAAI,oBAAC,kBAAD;AAAoB,IAAA,OAAO,EAAEP;AAA7B,IAhCtB,EAiCGU,kBAAkB,IACjB,oBAAC,iBAAD;AACE,kBAAYT,YADd;AAEE,IAAA,SAAS,EAAC,wBAFZ;AAGE,IAAA,OAAO,EAAED;AAHX,KAKE,oBAAC,aAAD,OALF,CAlCJ,CARF,CADF;AAsDD,CAhFwC,EAiFzC;AACEH,EAAAA,SAAS,EAAE,IADb;AAEEE,EAAAA,UAAU,EAAE,IAFd;AAGED,EAAAA,QAAQ,EAAE;AAHZ,CAjFyC,CAApC;AAwFPT,aAAa,CAACsB,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from \"react\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Title } from \"../Typography/Title/Title\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { ViewWidth, withAdaptivity } from \"../../hoc/withAdaptivity\";\nimport { HasRootRef } from \"../../types\";\nimport { PanelHeaderButton } from \"../PanelHeaderButton/PanelHeaderButton\";\nimport { IOS, Platform } from \"../../lib/platform\";\nimport { ModalDismissButton } from \"../ModalDismissButton/ModalDismissButton\";\nimport { Icon24Dismiss } from \"@vkontakte/icons\";\nimport { useKeyboard } from \"../../hooks/useKeyboard\";\nimport { AdaptivityContextInterface } from \"../AdaptivityProvider/AdaptivityContext\";\nimport { useAdaptivityIsDesktop } from \"../../hooks/useAdaptivity\";\nimport \"./ModalCardBase.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   * Кнопки-действия.\n   *\n   * Рекомендуется использовать `<Button size=\"l\" mode=\"primary\" />` или `<Button size=\"l\" mode=\"secondary\" />`\n   */\n  actions?: React.ReactNode;\n\n  /**\n   * Тип отображения кнопок: вертикальный или горизонтальный\n   */\n  actionsLayout?: \"vertical\" | \"horizontal\";\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 = withAdaptivity<\n  ModalCardBaseProps & AdaptivityContextInterface\n>(\n  ({\n    getRootRef,\n    icon,\n    header,\n    subheader,\n    children,\n    actions,\n    actionsLayout,\n    viewWidth,\n    hasMouse,\n    viewHeight,\n    onClose,\n    dismissLabel = \"Скрыть\",\n    ...restProps\n  }) => {\n    const platform = usePlatform();\n    const isDesktop = useAdaptivityIsDesktop();\n    const isSoftwareKeyboardOpened = useKeyboard().isOpened;\n\n    const canShowCloseBtn =\n      viewWidth >= ViewWidth.SMALL_TABLET || platform === Platform.VKCOM;\n    const canShowCloseBtnIos = platform === IOS && !canShowCloseBtn;\n\n    return (\n      <div\n        {...restProps}\n        vkuiClass={classNames(\n          getClassName(\"ModalCardBase\", platform),\n          isDesktop && \"ModalCardBase--desktop\"\n        )}\n        ref={getRootRef}\n      >\n        <div\n          vkuiClass={classNames(\n            \"ModalCardBase__container\",\n            isSoftwareKeyboardOpened &&\n              \"ModalCardBase__container--softwareKeyboardOpened\"\n          )}\n        >\n          {hasReactNode(icon) && (\n            <div vkuiClass=\"ModalCardBase__icon\">{icon}</div>\n          )}\n          {hasReactNode(header) && (\n            <Title level=\"2\" weight=\"2\" vkuiClass=\"ModalCardBase__header\">\n              {header}\n            </Title>\n          )}\n          {hasReactNode(subheader) && (\n            <Subhead vkuiClass=\"ModalCardBase__subheader\">{subheader}</Subhead>\n          )}\n\n          {children}\n\n          {hasReactNode(actions) && (\n            <div\n              vkuiClass={classNames(\n                \"ModalCardBase__actions\",\n                actionsLayout === \"vertical\" && \"ModalCardBase__actions--v\"\n              )}\n            >\n              {actions}\n            </div>\n          )}\n\n          {canShowCloseBtn && <ModalDismissButton onClick={onClose} />}\n          {canShowCloseBtnIos && (\n            <PanelHeaderButton\n              aria-label={dismissLabel}\n              vkuiClass=\"ModalCardBase__dismiss\"\n              onClick={onClose}\n            >\n              <Icon24Dismiss />\n            </PanelHeaderButton>\n          )}\n        </div>\n      </div>\n    );\n  },\n  {\n    viewWidth: true,\n    viewHeight: true,\n    hasMouse: true,\n  }\n);\n\nModalCardBase.displayName = \"ModalCardBase\";\n"],"file":"ModalCardBase.js"}

package/dist/cssm/components/ModalDismissButton/ModalDismissButton.css

@@ -1 +1 @@
-.vkuiModalDismissButton{position:absolute;justify-content:center;top:0;right:-56px;width:56px;height:56px;padding:18px;box-sizing:border-box;color:#fff;color:var(--white);transition:opacity .15s ease-out}.vkuiModalDismissButton::before{display:block;content:"";top:14px;right:14px;bottom:14px;left:14px;background-color:rgba(0,0,0,.35);border-radius:50%;position:absolute}.vkuiModalDismissButton .vkuiIcon{-webkit-transform:translateX(0);transform:translateX(0)}.vkuiModalDismissButton--hover{opacity:.6}.vkuiModalDismissButton--active{opacity:1}
+.vkuiModalDismissButton{box-sizing:border-box;color:#fff;color:var(--white);height:56px;justify-content:center;padding:18px;position:absolute;right:-56px;top:0;transition:opacity .15s ease-out;width:56px}.vkuiModalDismissButton:before{background-color:rgba(0,0,0,.35);border-radius:50%;bottom:14px;content:"";display:block;left:14px;position:absolute;right:14px;top:14px}.vkuiModalDismissButton .vkuiIcon{-webkit-transform:translateX(0);transform:translateX(0)}.vkuiModalDismissButton--hover{opacity:.6}.vkuiModalDismissButton--active{opacity:1}

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

@@ -1 +1 @@
-.vkuiModalPage{width:100%;height:100%;overflow:hidden;position:absolute;box-sizing:border-box;z-index:1;pointer-events:none}.vkuiModalPage--desktop{display:flex;align-items:center;justify-content:center}.vkuiModalPage__in-wrap{width:100%;height:100%;position:absolute;bottom:0;display:flex;align-items:flex-end;pointer-events:initial;-webkit-transform:translateY(100%);transform:translateY(100%);transition:-webkit-transform 320ms cubic-bezier(.4,0,.2,1);transition:transform 320ms cubic-bezier(.4,0,.2,1);transition:transform 320ms cubic-bezier(.4,0,.2,1),-webkit-transform 320ms cubic-bezier(.4,0,.2,1);transition:-webkit-transform 320ms var(--android-easing);transition:transform 320ms var(--android-easing);transition:transform 320ms var(--android-easing),-webkit-transform 320ms var(--android-easing)}.vkuiModalRoot--switching .vkuiModalPage__in-wrap{pointer-events:none}.vkuiModalPage__in{width:416px;max-width:100%;margin:0 auto;background:#fff;background:var(--background_content);overflow:visible;position:relative;box-sizing:border-box;height:100%;display:flex;flex-direction:column;border-radius:12px 12px 0 0}.vkuiModalPage__header{width:100%}.vkuiModalPage__content-wrap{position:relative;display:flex;flex-direction:column;overflow:hidden;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.vkuiModalPage__content{height:100%;overflow-y:hidden;overflow-x:hidden;box-sizing:border-box}.vkuiModalPage--desktop .vkuiModalPage__content,.vkuiModalRoot__modal--expandable .vkuiModalPage__content{overflow-y:auto;-webkit-overflow-scrolling:touch}.vkuiModalPage__content-in{position:relative;padding-bottom:0;padding-bottom:var(--safe-area-inset-bottom)}.vkuiModalRoot__modal--collapsed .vkuiModalPage__content,.vkuiModalRoot__modal--dragging .vkuiModalPage__content{overflow:hidden;touch-action:pan-y}.vkuiModalPage__footer{background:#fff;background:var(--background_content);position:relative;z-index:10}.vkuiModalRoot--touched .vkuiModalPage__footer{transition:none}.vkuiModalPage--ios .vkuiModalPage__in-wrap{transition:-webkit-transform 400ms cubic-bezier(.36,.66,.04,1);transition:transform 400ms cubic-bezier(.36,.66,.04,1);transition:transform 400ms cubic-bezier(.36,.66,.04,1),-webkit-transform 400ms cubic-bezier(.36,.66,.04,1);transition:-webkit-transform 400ms var(--ios-easing);transition:transform 400ms var(--ios-easing);transition:transform 400ms var(--ios-easing),-webkit-transform 400ms var(--ios-easing)}.vkuiModalPage--ios .vkuiModalPage__in{border-radius:14px 14px 0 0}.vkuiModalPage--vkcom .vkuiModalPage__in{border-radius:8px 8px 0 0;width:448px}.vkuiModalPage--desktop .vkuiModalPage__in-wrap{align-items:center;opacity:0;transition:opacity 340ms cubic-bezier(.4,0,.2,1);transition:opacity 340ms var(--android-easing);width:auto;height:auto;position:relative;-webkit-transform:none;transform:none}.vkuiModalPage--desktop .vkuiModalPage__in{height:auto;max-height:640px;box-shadow:0 16px 16px rgba(0,0,0,.16),0 0 8px rgba(0,0,0,.12);border-radius:8px}@media (max-height:672px){.vkuiModalPage--desktop .vkuiModalPage__in{max-height:calc(100vh - 32px)}}.vkuiModalRoot--touched .vkuiModalPage__in-wrap{transition:none}
+.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%;pointer-events:auto;position:absolute;-webkit-transform:translateY(100%);transform:translateY(100%);transition:-webkit-transform .32s cubic-bezier(.4,0,.2,1);transition:transform .32s cubic-bezier(.4,0,.2,1);transition:transform .32s cubic-bezier(.4,0,.2,1),-webkit-transform .32s cubic-bezier(.4,0,.2,1);transition:-webkit-transform .32s var(--android-easing);transition:transform .32s var(--android-easing);transition:transform .32s var(--android-easing),-webkit-transform .32s var(--android-easing);width:100%}.vkuiModalRoot--switching .vkuiModalPage__in-wrap{pointer-events:none}.vkuiModalPage__in{background:#fff;background:var(--background_content);border-radius:12px 12px 0 0;box-sizing:border-box;display:flex;flex-direction:column;height:100%;margin:0 auto;max-width:100%;overflow:visible;position:relative;width:416px}.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(--safe-area-inset-bottom);position:relative}.vkuiModalRoot__modal--collapsed .vkuiModalPage__content,.vkuiModalRoot__modal--dragging .vkuiModalPage__content{overflow:hidden;touch-action:pan-y}.vkuiModalPage__footer{background:#fff;background:var(--background_content);position:relative;z-index:10}.vkuiModalRoot--touched .vkuiModalPage__footer{transition:none}.vkuiModalPage--ios .vkuiModalPage__in-wrap{transition:-webkit-transform .4s cubic-bezier(.36,.66,.04,1);transition:transform .4s cubic-bezier(.36,.66,.04,1);transition:transform .4s cubic-bezier(.36,.66,.04,1),-webkit-transform .4s cubic-bezier(.36,.66,.04,1);transition:-webkit-transform .4s var(--ios-easing);transition:transform .4s var(--ios-easing);transition:transform .4s var(--ios-easing),-webkit-transform .4s var(--ios-easing)}.vkuiModalPage--ios .vkuiModalPage__in{border-radius:14px 14px 0 0}.vkuiModalPage--vkcom .vkuiModalPage__in{border-radius:8px 8px 0 0;width:448px}.vkuiModalPage--desktop .vkuiModalPage__in-wrap{align-items:center;height:auto;opacity:0;position:relative;-webkit-transform:none;transform:none;transition:opacity .34s cubic-bezier(.4,0,.2,1);transition:opacity .34s var(--android-easing);width:auto}.vkuiModalPage--desktop .vkuiModalPage__in{border-radius:8px;box-shadow:0 16px 16px rgba(0,0,0,.16),0 0 8px rgba(0,0,0,.12);height:auto;max-height:640px}@media (max-height:672px){.vkuiModalPage--desktop .vkuiModalPage__in{max-height:calc(100vh - 32px)}}.vkuiModalRoot--touched .vkuiModalPage__in-wrap{transition:none}

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

@@ -1 +1 @@
-.vkuiModalPageHeader{position:relative;z-index:2;--safe-area-inset-top:0}.vkuiModalPageHeader--desktop.vkuiModalPageHeader--android{padding-left:6px;padding-right:6px}.vkuiModalPageHeader--desktop.vkuiModalPageHeader--ios{padding-left:4px;padding-right:4px}.vkuiModalPageHeader .vkuiIcon--dismiss_24{color:#99a2ad;color:var(--placeholder_icon_foreground_primary)}.vkuiModalPageHeader .vkuiIcon--cancel_24{color:#99a2ad;color:var(--icon_secondary)}
+.vkuiModalPageHeader{--safe-area-inset-top:0;position:relative;z-index:2}.vkuiModalPageHeader--desktop.vkuiModalPageHeader--android{padding-left:6px;padding-right:6px}.vkuiModalPageHeader--desktop.vkuiModalPageHeader--ios{padding-left:4px;padding-right:4px}.vkuiModalPageHeader .vkuiIcon--dismiss_24{color:#99a2ad;color:var(--placeholder_icon_foreground_primary)}.vkuiModalPageHeader .vkuiIcon--cancel_24{color:#99a2ad;color:var(--icon_secondary)}

package/dist/cssm/components/ModalRoot/ModalRoot.css

@@ -1 +1 @@
-.vkuiModalRoot{width:100%;height:100%}.vkuiModalRoot__mask{opacity:1;width:100%;height:100%;position:absolute;left:0;top:0;background:rgba(0,0,0,.4);-webkit-user-select:none;user-select:none;transition:opacity 167ms ease-out;-webkit-animation:vkui-animation-fadeIn .32s ease;animation:vkui-animation-fadeIn .32s ease}.vkuiModalRoot--touched .vkuiModalRoot__mask{transition:none}.vkuiModalRoot--switching .vkuiModalRoot__mask{pointer-events:none}.vkuiModalRoot__viewport{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}:not(.vkuiModalRoot--desktop).vkuiModalRoot--ios .vkuiModalRoot__viewport,:not(.vkuiModalRoot--desktop).vkuiModalRoot--android .vkuiModalRoot__viewport{top:0;top:var(--safe-area-inset-top)}:not(.vkuiModalRoot--desktop).vkuiModalRoot--vkapps.vkuiModalRoot--android .vkuiModalRoot__viewport{top:calc(0px + 56px);top:calc(var(--safe-area-inset-top) + var(--panelheader_height))}:not(.vkuiModalRoot--desktop).vkuiModalRoot--vkapps.vkuiModalRoot--ios .vkuiModalRoot__viewport{top:calc(0px + 52px);top:calc(var(--safe-area-inset-top) + var(--panelheader_height_ios))}.vkuiModalRoot__modal{position:absolute;width:100%;height:100%;box-sizing:border-box;z-index:1}@-webkit-keyframes vkui-animation-fadeIn{0%{opacity:0}to{opacity:1}}@keyframes vkui-animation-fadeIn{0%{opacity:0}to{opacity:1}}
+.vkuiModalRoot,.vkuiModalRoot__mask{height:100%;width:100%}.vkuiModalRoot__mask{-webkit-animation:vkui-animation-fadeIn .32s ease;animation:vkui-animation-fadeIn .32s ease;background:rgba(0,0,0,.4);left:0;opacity:1;position:absolute;top:0;transition:opacity 167ms ease-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vkuiModalRoot--touched .vkuiModalRoot__mask{transition:none}.vkuiModalRoot--switching .vkuiModalRoot__mask{pointer-events:none}.vkuiModalRoot__viewport{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}:not(.vkuiModalRoot--desktop).vkuiModalRoot--android .vkuiModalRoot__viewport,:not(.vkuiModalRoot--desktop).vkuiModalRoot--ios .vkuiModalRoot__viewport{top:0;top:var(--safe-area-inset-top)}:not(.vkuiModalRoot--desktop).vkuiModalRoot--vkapps.vkuiModalRoot--android .vkuiModalRoot__viewport{top:calc(0px + 56px);top:calc(var(--safe-area-inset-top) + var(--panelheader_height))}:not(.vkuiModalRoot--desktop).vkuiModalRoot--vkapps.vkuiModalRoot--ios .vkuiModalRoot__viewport{top:calc(0px + 52px);top:calc(var(--safe-area-inset-top) + var(--panelheader_height_ios))}.vkuiModalRoot__modal{box-sizing:border-box;height:100%;position:absolute;width:100%;z-index:1}@-webkit-keyframes vkui-animation-fadeIn{0%{opacity:0}to{opacity:1}}@keyframes vkui-animation-fadeIn{0%{opacity:0}to{opacity:1}}

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

@@ -26,4 +26,4 @@ export interface ModalRootProps extends HasPlatform {
     configProvider?: ConfigProviderContextInterface;
     children?: React.ReactNode;
 }
-export declare const ModalRootTouch: React.FC<Pick<ModalRootProps, "children" | "configProvider" | "onOpen" | "onOpened" | "onClose" | "onClosed" | "activeModal">>;
+export declare const ModalRootTouch: React.FC<Pick<ModalRootProps, "children" | "onOpen" | "onOpened" | "onClose" | "onClosed" | "activeModal" | "configProvider">>;

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

@@ -26,4 +26,4 @@ export interface ModalRootProps extends HasPlatform {
      */
     onClosed?(modalId: string): void;
 }
-export declare const ModalRootDesktop: React.FC<Pick<ModalRootProps, "children" | "configProvider" | "onOpen" | "onOpened" | "onClose" | "onClosed" | "activeModal">>;
+export declare const ModalRootDesktop: React.FC<Pick<ModalRootProps, "children" | "onOpen" | "onOpened" | "onClose" | "onClosed" | "activeModal" | "configProvider">>;

package/dist/cssm/components/NativeSelect/NativeSelect.js

@@ -95,4 +95,5 @@ export var NativeSelect = withAdaptivity(NativeSelectComponent, {
   sizeX: true,
   sizeY: true
 });
+NativeSelect.displayName = "NativeSelect";
 //# sourceMappingURL=NativeSelect.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/NativeSelect/NativeSelect.tsx"],"names":["React","classNames","DropdownIcon","FormField","withAdaptivity","getClassName","useIsomorphicLayoutEffect","useEnsuredControl","useExternRef","usePlatform","SelectType","SelectTypography","NativeSelectComponent","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","sizeX","sizeY","multiline","selectType","default","restProps","platform","useState","title","setTitle","empty","setEmpty","value","onChange","selectRef","selectedOption","current","options","selectedIndex","text","NativeSelect"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { DropdownIcon } from \"../DropdownIcon/DropdownIcon\";\nimport { FormField } from \"../FormField/FormField\";\nimport { HasAlign, HasRef, HasRootRef } from \"../../types\";\nimport { withAdaptivity } from \"../../hoc/withAdaptivity\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { useEnsuredControl } from \"../../hooks/useEnsuredControl\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { SelectType, SelectTypography } from \"../Select/Select\";\nimport {\n  AdaptivityContextInterface,\n  AdaptivityProps,\n} from \"../AdaptivityProvider/AdaptivityContext\";\nimport \"../Select/Select.css\";\n\nexport interface NativeSelectProps\n  extends React.SelectHTMLAttributes<HTMLSelectElement>,\n    HasRef<HTMLSelectElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasAlign,\n    AdaptivityProps {\n  placeholder?: string;\n  multiline?: boolean;\n  selectType?: keyof typeof SelectType;\n}\n\nexport interface SelectState {\n  value?: React.SelectHTMLAttributes<HTMLSelectElement>[\"value\"];\n  title?: string;\n  notSelected?: boolean;\n}\n\nconst NativeSelectComponent = ({\n  style,\n  defaultValue = \"\",\n  align,\n  placeholder,\n  children,\n  className,\n  getRef,\n  getRootRef,\n  disabled,\n  sizeX,\n  sizeY,\n  multiline,\n  selectType = SelectType.default,\n  ...restProps\n}: NativeSelectProps & AdaptivityContextInterface) => {\n  const platform = usePlatform();\n  const [title, setTitle] = React.useState(\"\");\n  const [empty, setEmpty] = React.useState(false);\n  const [value, onChange] = useEnsuredControl(restProps, { defaultValue });\n  const selectRef = useExternRef(getRef);\n  useIsomorphicLayoutEffect(() => {\n    const selectedOption =\n      selectRef.current?.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setEmpty(selectedOption.value === \"\" && placeholder != null);\n    }\n  }, [value, children]);\n\n  return (\n    <FormField\n      Component=\"label\"\n      vkuiClass={classNames(\n        getClassName(\"Select\", platform),\n        `Select--${selectType}`,\n        empty && \"Select--empty\",\n        multiline && \"Select--multiline\",\n        align && `Select--align-${align}`,\n        `Select--sizeX-${sizeX}`,\n        `Select--sizeY-${sizeY}`\n      )}\n      className={className}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={disabled}\n      after={<DropdownIcon />}\n    >\n      <select\n        {...restProps}\n        disabled={disabled}\n        vkuiClass=\"Select__el\"\n        onChange={onChange}\n        value={value}\n        ref={selectRef}\n      >\n        {placeholder && <option value=\"\">{placeholder}</option>}\n        {children}\n      </select>\n      <div vkuiClass=\"Select__container\">\n        {/* TODO v5.0.0 поправить под новую адаптивность */}\n        <SelectTypography vkuiClass=\"Select__title\">{title}</SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/NativeSelect\n */\nexport const NativeSelect = withAdaptivity(NativeSelectComponent, {\n  sizeX: true,\n  sizeY: true,\n});\n"],"file":"NativeSelect.js"}
+{"version":3,"sources":["../../../../src/components/NativeSelect/NativeSelect.tsx"],"names":["React","classNames","DropdownIcon","FormField","withAdaptivity","getClassName","useIsomorphicLayoutEffect","useEnsuredControl","useExternRef","usePlatform","SelectType","SelectTypography","NativeSelectComponent","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","sizeX","sizeY","multiline","selectType","default","restProps","platform","useState","title","setTitle","empty","setEmpty","value","onChange","selectRef","selectedOption","current","options","selectedIndex","text","NativeSelect","displayName"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { DropdownIcon } from \"../DropdownIcon/DropdownIcon\";\nimport { FormField } from \"../FormField/FormField\";\nimport { HasAlign, HasRef, HasRootRef } from \"../../types\";\nimport { withAdaptivity } from \"../../hoc/withAdaptivity\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { useEnsuredControl } from \"../../hooks/useEnsuredControl\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { SelectType, SelectTypography } from \"../Select/Select\";\nimport {\n  AdaptivityContextInterface,\n  AdaptivityProps,\n} from \"../AdaptivityProvider/AdaptivityContext\";\nimport \"../Select/Select.css\";\n\nexport interface NativeSelectProps\n  extends React.SelectHTMLAttributes<HTMLSelectElement>,\n    HasRef<HTMLSelectElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasAlign,\n    AdaptivityProps {\n  placeholder?: string;\n  multiline?: boolean;\n  selectType?: keyof typeof SelectType;\n}\n\nexport interface SelectState {\n  value?: React.SelectHTMLAttributes<HTMLSelectElement>[\"value\"];\n  title?: string;\n  notSelected?: boolean;\n}\n\nconst NativeSelectComponent = ({\n  style,\n  defaultValue = \"\",\n  align,\n  placeholder,\n  children,\n  className,\n  getRef,\n  getRootRef,\n  disabled,\n  sizeX,\n  sizeY,\n  multiline,\n  selectType = SelectType.default,\n  ...restProps\n}: NativeSelectProps & AdaptivityContextInterface) => {\n  const platform = usePlatform();\n  const [title, setTitle] = React.useState(\"\");\n  const [empty, setEmpty] = React.useState(false);\n  const [value, onChange] = useEnsuredControl(restProps, { defaultValue });\n  const selectRef = useExternRef(getRef);\n  useIsomorphicLayoutEffect(() => {\n    const selectedOption =\n      selectRef.current?.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setEmpty(selectedOption.value === \"\" && placeholder != null);\n    }\n  }, [value, children]);\n\n  return (\n    <FormField\n      Component=\"label\"\n      vkuiClass={classNames(\n        getClassName(\"Select\", platform),\n        `Select--${selectType}`,\n        empty && \"Select--empty\",\n        multiline && \"Select--multiline\",\n        align && `Select--align-${align}`,\n        `Select--sizeX-${sizeX}`,\n        `Select--sizeY-${sizeY}`\n      )}\n      className={className}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={disabled}\n      after={<DropdownIcon />}\n    >\n      <select\n        {...restProps}\n        disabled={disabled}\n        vkuiClass=\"Select__el\"\n        onChange={onChange}\n        value={value}\n        ref={selectRef}\n      >\n        {placeholder && <option value=\"\">{placeholder}</option>}\n        {children}\n      </select>\n      <div vkuiClass=\"Select__container\">\n        {/* TODO v5.0.0 поправить под новую адаптивность */}\n        <SelectTypography vkuiClass=\"Select__title\">{title}</SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/NativeSelect\n */\nexport const NativeSelect = withAdaptivity(NativeSelectComponent, {\n  sizeX: true,\n  sizeY: true,\n});\n\nNativeSelect.displayName = \"NativeSelect\";\n"],"file":"NativeSelect.js"}

package/dist/cssm/components/Pagination/Pagination.css

@@ -1 +1 @@
-.vkuiPagination__list{display:flex;margin:0;padding:0;list-style-type:none}.vkuiPagination__prevButtonContainer{margin-right:8px}.vkuiPagination__nextButtonContainer{margin-left:8px}.vkuiPagination__page{box-sizing:border-box;padding-right:8px;padding-left:8px;width:100%;min-width:40px;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular,8px);text-align:center;color:#818c99;color:var(--vkui--color_text_secondary,#818C99);-webkit-user-select:none;user-select:none}.vkuiPagination__page--state-hover{background-color:rgba(0,16,61,.04);background-color:var(--vkui--color_transparent--hover,rgba(0, 16, 61, 0.04))}.vkuiPagination__page--state-active,.vkuiPagination__page--current{color:#000;color:var(--vkui--color_text_primary,#000000);background-color:rgba(0,16,61,.08);background-color:var(--vkui--color_transparent--active,rgba(0, 16, 61, 0.08))}.vkuiPagination__page--disabled{opacity:.4;opacity:var(--vkui--opacity_disable,0.4)}.vkuiPagination__page--sizeY-compact{font-size:15px;font-size:var(--vkui--font_text--font_size--compact,15px);line-height:36px;line-height:var(--vkui--size_button_large_height--compact,36px);height:36px;height:var(--vkui--size_button_large_height--compact,36px)}.vkuiPagination__page--sizeY-regular{font-size:16px;font-size:var(--vkui--font_text--font_size--regular,16px);line-height:44px;line-height:var(--vkui--size_button_large_height--regular,44px);height:44px;height:var(--vkui--size_button_large_height--regular,44px)}.vkuiPagination__page--type-ellipsis{min-width:16px;padding-right:0;padding-left:0}
+.vkuiPagination__list{display:flex;list-style-type:none;margin:0;padding:0}.vkuiPagination__prevButtonContainer{margin-right:8px}.vkuiPagination__nextButtonContainer{margin-left:8px}.vkuiPagination__page{border-radius:8px;border-radius:var(--vkui--size_border_radius--regular,8px);box-sizing:border-box;color:#818c99;color:var(--vkui--color_text_secondary,#818c99);min-width:40px;padding-left:8px;padding-right:8px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.vkuiPagination__page--state-hover{background-color:rgba(0,16,61,.04);background-color:var(--vkui--color_transparent--hover,rgba(0,16,61,.04))}.vkuiPagination__page--current,.vkuiPagination__page--state-active{background-color:rgba(0,16,61,.08);background-color:var(--vkui--color_transparent--active,rgba(0,16,61,.08));color:#000;color:var(--vkui--color_text_primary,#000)}.vkuiPagination__page--disabled{opacity:.4;opacity:var(--vkui--opacity_disable,.4)}.vkuiPagination__page--sizeY-compact{font-size:15px;font-size:var(--vkui--font_text--font_size--compact,15px);height:36px;height:var(--vkui--size_button_large_height--compact,36px);line-height:36px;line-height:var(--vkui--size_button_large_height--compact,36px)}.vkuiPagination__page--sizeY-regular{font-size:16px;font-size:var(--vkui--font_text--font_size--regular,16px);height:44px;height:var(--vkui--size_button_large_height--regular,44px);line-height:44px;line-height:var(--vkui--size_button_large_height--regular,44px)}.vkuiPagination__page--type-ellipsis{min-width:16px;padding-left:0;padding-right:0}

package/dist/cssm/components/Panel/Panel.css

@@ -1 +1 @@
-.vkuiPanel{position:relative;width:100%;height:100%}.vkuiPanel::after{position:absolute;width:100%;height:100%;left:0;top:0;z-index:1;content:""}.vkuiPanel--centered .vkuiPanelHeader{position:absolute;left:0;top:0;width:100%}.vkuiPanel__in{position:relative;box-sizing:border-box;width:100%;min-height:100%;z-index:2;display:flex;flex-direction:column}.vkuiPanel__centered{display:flex;flex:1 0;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box}.vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--vis+*{margin-top:52px;margin-top:var(--panelheader_height_ios)}.vkuiPanel__centered .vkuiPanelHeader--android.vkuiPanelHeader--vis+*,.vkuiPanel__centered .vkuiPanelHeader--vkcom.vkuiPanelHeader--vis+*{margin-top:56px;margin-top:var(--panelheader_height)}.vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--sep+*{margin-top:calc(52px + 5px);margin-top:calc(var(--panelheader_height_ios) + 5px)}.vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiPanelHeader--android.vkuiPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--panelheader_height) + 5px)}.vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiPanelHeader--vkcom.vkuiPanelHeader--sep+*{margin-top:calc(48px + 5px);margin-top:calc(var(--panelheader_height_vkcom) + 5px)}.vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--sep+*{margin-top:calc(52px + 16px);margin-top:calc(var(--panelheader_height_ios) + 16px)}.vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiPanelHeader--android.vkuiPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--panelheader_height) + 16px)}.vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiPanelHeader--vkcom.vkuiPanelHeader--sep+*{margin-top:calc(48px + 16px);margin-top:calc(var(--panelheader_height_vkcom) + 16px)}.vkuiEpic .vkuiPanel__in{padding-bottom:48px;padding-bottom:var(--tabbar_height);padding-bottom:calc(0px + 48px);padding-bottom:calc(var(--safe-area-inset-bottom) + var(--tabbar_height))}.vkuiPanel__in-before{height:1px;margin-bottom:-1px}.vkuiPanel__separator{position:relative;z-index:3}.vkuiPanel__in-after{height:1px;margin-top:-1px}.vkuiPanel .vkuiPanel__in,.vkuiPanel::after{background-color:#fff;background-color:var(--background_content)}.vkuiPanel.vkuiPanel--regular .vkuiPanel__in,.vkuiPanel.vkuiPanel--regular::after{background-color:transparent}
+.vkuiPanel{height:100%;position:relative;width:100%}.vkuiPanel:after{content:"";height:100%;z-index:1}.vkuiPanel--centered .vkuiPanelHeader,.vkuiPanel:after{left:0;position:absolute;top:0;width:100%}.vkuiPanel__in{box-sizing:border-box;display:flex;flex-direction:column;min-height:100%;position:relative;width:100%;z-index:2}.vkuiPanel__centered{align-items:center;box-sizing:border-box;display:flex;flex:1 0;flex-direction:column;justify-content:center}.vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--vis+*{margin-top:52px;margin-top:var(--panelheader_height_ios)}.vkuiPanel__centered .vkuiPanelHeader--android.vkuiPanelHeader--vis+*,.vkuiPanel__centered .vkuiPanelHeader--vkcom.vkuiPanelHeader--vis+*{margin-top:56px;margin-top:var(--panelheader_height)}.vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--sep+*{margin-top:calc(52px + 5px);margin-top:calc(var(--panelheader_height_ios) + 5px)}.vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiPanelHeader--android.vkuiPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--panelheader_height) + 5px)}.vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiPanelHeader--vkcom.vkuiPanelHeader--sep+*{margin-top:calc(48px + 5px);margin-top:calc(var(--panelheader_height_vkcom) + 5px)}.vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--sep+*{margin-top:calc(52px + 16px);margin-top:calc(var(--panelheader_height_ios) + 16px)}.vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiPanelHeader--android.vkuiPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--panelheader_height) + 16px)}.vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiPanelHeader--vkcom.vkuiPanelHeader--sep+*{margin-top:calc(48px + 16px);margin-top:calc(var(--panelheader_height_vkcom) + 16px)}.vkuiEpic .vkuiPanel__in{padding-bottom:calc(0px + 48px);padding-bottom:calc(var(--safe-area-inset-bottom) + var(--tabbar_height))}.vkuiPanel__in-before{height:1px;margin-bottom:-1px}.vkuiPanel__separator{position:relative;z-index:3}.vkuiPanel__in-after{height:1px;margin-top:-1px}.vkuiPanel .vkuiPanel__in,.vkuiPanel:after{background-color:#fff;background-color:var(--background_content)}.vkuiPanel.vkuiPanel--regular .vkuiPanel__in,.vkuiPanel.vkuiPanel--regular:after{background-color:initial}

package/dist/cssm/components/Panel/Panel.js

@@ -46,4 +46,5 @@ export var Panel = withAdaptivity(function (_ref) {
 }, {
   sizeX: true
 });
+Panel.displayName = "Panel";
 //# sourceMappingURL=Panel.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Panel/Panel.tsx"],"names":["getClassName","classNames","Touch","TooltipContainer","withAdaptivity","IOS","usePlatform","Panel","centered","children","getRootRef","sizeX","nav","restProps","platform"],"mappings":";;;;;AACA,SAASA,YAAT;AACA,SAASC,UAAT;AACA,SAASC,KAAT;AACA,SAASC,gBAAT;AAEA,SAASC,cAAT;AACA,SAASC,GAAT;AACA,SAASC,WAAT;AAMA;;AAUA;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAGH,cAAc,CACjC,gBAA0E;AAAA,2BAAvEI,QAAuE;AAAA,MAAvEA,QAAuE,8BAA5D,KAA4D;AAAA,MAArDC,QAAqD,QAArDA,QAAqD;AAAA,MAA3CC,UAA2C,QAA3CA,UAA2C;AAAA,MAA/BC,KAA+B,QAA/BA,KAA+B;AAAA,MAAxBC,GAAwB,QAAxBA,GAAwB;AAAA,MAAhBC,SAAgB;;AACxE,MAAMC,QAAQ,GAAGR,WAAW,EAA5B;AAEA,SACE,wCACMO,SADN;AAEE,IAAA,GAAG,EAAEH,UAFP,CAGE;AAHF;AAIE,IAAA,SAAS,EAAET,UAAU,CACnBD,YAAY,CAAC,OAAD,EAAUc,QAAV,CADO,mBAETH,KAFS;AAIjB,yBAAmBH;AAJF,8BAKAG,KALA,GAKU,IALV;AAJvB,MAaE,oBAAC,KAAD;AAAO,IAAA,SAAS,EAAER,gBAAlB;AAAoC,IAAA,SAAS,EAAC;AAA9C,KACGW,QAAQ,KAAKT,GAAb,IAAoB;AAAK,IAAA,SAAS,EAAC;AAAf,IADvB,EAEE;AAAK,IAAA,SAAS,EAAC;AAAf,IAFF,EAGGG,QAAQ,GACP;AAAK,IAAA,SAAS,EAAC;AAAf,KAAkCC,QAAlC,CADO,GAGPA,QANJ,EAQE;AAAK,IAAA,SAAS,EAAC;AAAf,IARF,CAbF,CADF;AA0BD,CA9BgC,EA+BjC;AACEE,EAAAA,KAAK,EAAE;AADT,CA/BiC,CAA5B","sourcesContent":["import * as React from \"react\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Touch } from \"../Touch/Touch\";\nimport { TooltipContainer } from \"../Tooltip/TooltipContainer\";\nimport { HasRootRef } from \"../../types\";\nimport { withAdaptivity } from \"../../hoc/withAdaptivity\";\nimport { IOS } from \"../../lib/platform\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { NavIdProps } from \"../../lib/getNavId\";\nimport {\n  AdaptivityContextInterface,\n  AdaptivityProps,\n} from \"../AdaptivityProvider/AdaptivityContext\";\nimport \"./Panel.css\";\n\nexport interface PanelProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    AdaptivityProps,\n    NavIdProps {\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Panel\n */\nexport const Panel = withAdaptivity<PanelProps & AdaptivityContextInterface>(\n  ({ centered = false, children, getRootRef, sizeX, nav, ...restProps }) => {\n    const platform = usePlatform();\n\n    return (\n      <div\n        {...restProps}\n        ref={getRootRef}\n        // eslint-disable-next-line vkui/no-object-expression-in-arguments\n        vkuiClass={classNames(\n          getClassName(\"Panel\", platform),\n          `Panel--${sizeX}`,\n          {\n            \"Panel--centered\": centered,\n            [`Panel--sizeX-${sizeX}`]: true,\n          }\n        )}\n      >\n        <Touch Component={TooltipContainer} vkuiClass=\"Panel__in\">\n          {platform === IOS && <div vkuiClass=\"Panel__fade\" />}\n          <div vkuiClass=\"Panel__in-before\" />\n          {centered ? (\n            <div vkuiClass=\"Panel__centered\">{children}</div>\n          ) : (\n            children\n          )}\n          <div vkuiClass=\"Panel__in-after\" />\n        </Touch>\n      </div>\n    );\n  },\n  {\n    sizeX: true,\n  }\n);\n"],"file":"Panel.js"}
+{"version":3,"sources":["../../../../src/components/Panel/Panel.tsx"],"names":["getClassName","classNames","Touch","TooltipContainer","withAdaptivity","IOS","usePlatform","Panel","centered","children","getRootRef","sizeX","nav","restProps","platform","displayName"],"mappings":";;;;;AACA,SAASA,YAAT;AACA,SAASC,UAAT;AACA,SAASC,KAAT;AACA,SAASC,gBAAT;AAEA,SAASC,cAAT;AACA,SAASC,GAAT;AACA,SAASC,WAAT;AAMA;;AAUA;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAGH,cAAc,CACjC,gBAA0E;AAAA,2BAAvEI,QAAuE;AAAA,MAAvEA,QAAuE,8BAA5D,KAA4D;AAAA,MAArDC,QAAqD,QAArDA,QAAqD;AAAA,MAA3CC,UAA2C,QAA3CA,UAA2C;AAAA,MAA/BC,KAA+B,QAA/BA,KAA+B;AAAA,MAAxBC,GAAwB,QAAxBA,GAAwB;AAAA,MAAhBC,SAAgB;;AACxE,MAAMC,QAAQ,GAAGR,WAAW,EAA5B;AAEA,SACE,wCACMO,SADN;AAEE,IAAA,GAAG,EAAEH,UAFP,CAGE;AAHF;AAIE,IAAA,SAAS,EAAET,UAAU,CACnBD,YAAY,CAAC,OAAD,EAAUc,QAAV,CADO,mBAETH,KAFS;AAIjB,yBAAmBH;AAJF,8BAKAG,KALA,GAKU,IALV;AAJvB,MAaE,oBAAC,KAAD;AAAO,IAAA,SAAS,EAAER,gBAAlB;AAAoC,IAAA,SAAS,EAAC;AAA9C,KACGW,QAAQ,KAAKT,GAAb,IAAoB;AAAK,IAAA,SAAS,EAAC;AAAf,IADvB,EAEE;AAAK,IAAA,SAAS,EAAC;AAAf,IAFF,EAGGG,QAAQ,GACP;AAAK,IAAA,SAAS,EAAC;AAAf,KAAkCC,QAAlC,CADO,GAGPA,QANJ,EAQE;AAAK,IAAA,SAAS,EAAC;AAAf,IARF,CAbF,CADF;AA0BD,CA9BgC,EA+BjC;AACEE,EAAAA,KAAK,EAAE;AADT,CA/BiC,CAA5B;AAoCPJ,KAAK,CAACQ,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from \"react\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Touch } from \"../Touch/Touch\";\nimport { TooltipContainer } from \"../Tooltip/TooltipContainer\";\nimport { HasRootRef } from \"../../types\";\nimport { withAdaptivity } from \"../../hoc/withAdaptivity\";\nimport { IOS } from \"../../lib/platform\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { NavIdProps } from \"../../lib/getNavId\";\nimport {\n  AdaptivityContextInterface,\n  AdaptivityProps,\n} from \"../AdaptivityProvider/AdaptivityContext\";\nimport \"./Panel.css\";\n\nexport interface PanelProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    AdaptivityProps,\n    NavIdProps {\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Panel\n */\nexport const Panel = withAdaptivity<PanelProps & AdaptivityContextInterface>(\n  ({ centered = false, children, getRootRef, sizeX, nav, ...restProps }) => {\n    const platform = usePlatform();\n\n    return (\n      <div\n        {...restProps}\n        ref={getRootRef}\n        // eslint-disable-next-line vkui/no-object-expression-in-arguments\n        vkuiClass={classNames(\n          getClassName(\"Panel\", platform),\n          `Panel--${sizeX}`,\n          {\n            \"Panel--centered\": centered,\n            [`Panel--sizeX-${sizeX}`]: true,\n          }\n        )}\n      >\n        <Touch Component={TooltipContainer} vkuiClass=\"Panel__in\">\n          {platform === IOS && <div vkuiClass=\"Panel__fade\" />}\n          <div vkuiClass=\"Panel__in-before\" />\n          {centered ? (\n            <div vkuiClass=\"Panel__centered\">{children}</div>\n          ) : (\n            children\n          )}\n          <div vkuiClass=\"Panel__in-after\" />\n        </Touch>\n      </div>\n    );\n  },\n  {\n    sizeX: true,\n  }\n);\n\nPanel.displayName = \"Panel\";\n"],"file":"Panel.js"}

package/dist/cssm/components/PanelHeader/PanelHeader.css

@@ -1 +1 @@
-.vkuiPanelHeader{position:relative}.vkuiPanelHeader--vis.vkuiPanelHeader--fixed::before{display:block;content:""}.vkuiPanelHeader:not(.vkuiPanelHeader--vis):not(.vkuiPanelHeader--fixed){height:0}.vkuiPanelHeader__fixed{z-index:10}.vkuiPanelHeader__in{display:flex;justify-content:space-between;align-items:center;white-space:nowrap;position:relative;background:#fff;background:var(--header_background)}.vkuiPanelHeader--trnsp .vkuiPanelHeader__in{background:0 0}.vkuiPanelHeader--shadow .vkuiPanelHeader__in{box-shadow:0 0 4px rgba(0,0,0,.08)}.vkuiPanelHeader__before{box-sizing:border-box;color:#2688eb;color:var(--header_tint);display:flex;flex-shrink:0}.vkuiPanelHeader__content{overflow:hidden}.vkuiPanelHeader__content>*{display:block;overflow:hidden;text-overflow:ellipsis}.vkuiPanelHeader__content-in{color:#000;color:var(--header_text);font-weight:500;font-family:"VK Sans Display",-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--font-display)}.vkuiPanelHeader::before,.vkuiPanelHeader__in{height:56px;height:var(--panelheader_height);padding-top:0;padding-top:var(--safe-area-inset-top)}.vkuiPanelHeader__after{display:flex;justify-content:flex-end;box-sizing:border-box;color:#2688eb;color:var(--header_tint)}.vkuiPanelHeader--vkapps .vkuiPanelHeader__after{min-width:90px}.vkuiPanelHeader--ios{--panelheader_height:var(--panelheader_height_ios)}.vkuiPanelHeader--ios .vkuiPanelHeader__before{flex-basis:0;flex-shrink:0;flex-grow:1;opacity:1;transition:opacity .3s cubic-bezier(.36,.66,.04,1);transition:opacity .3s var(--ios-easing);padding:4px 0 4px 4px}.vkuiPanelHeader--ios .vkuiPanelHeader__before .vkuiPanelHeaderButton+.vkuiPanelHeaderButton--primitive{margin-left:-6px;padding-left:0}.vkuiPanelHeader--ios .vkuiPanelHeader__content{text-align:center;opacity:1;transition:opacity .3s cubic-bezier(.36,.66,.04,1);transition:opacity .3s var(--ios-easing)}.vkuiPanelHeader--ios .vkuiPanelHeader__content-in{font-size:21px}.vkuiPanelHeader--ios .vkuiPanelHeader__content>*{padding:0 4px}.vkuiPanelHeader--ios.vkuiPanelHeader--no-before .vkuiPanelHeader__content>*{padding-left:0}.vkuiPanelHeader--ios.vkuiPanelHeader--no-before .vkuiPanelHeader__content{padding-left:8px}.vkuiPanelHeader--ios.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*{padding-right:0}.vkuiPanelHeader--ios.vkuiPanelHeader--no-after .vkuiPanelHeader__content{padding-right:8px}.vkuiPanelHeader--ios .vkuiPanelHeader__after{flex-basis:0;flex-shrink:0;flex-grow:1;opacity:1;transition:opacity .3s cubic-bezier(.36,.66,.04,1);transition:opacity .3s var(--ios-easing);padding:4px 4px 4px 0}.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__before,.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__after,.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__content{opacity:0}.vkuiPanelHeader--android .vkuiPanelHeader__before:not(:empty){padding:4px 0 4px 4px}.vkuiPanelHeader--android .vkuiPanelHeader__content{align-items:center;flex-grow:1;max-width:100%}.vkuiPanelHeader--android .vkuiPanelHeader__content-in{font-size:23px}.vkuiPanelHeader--android .vkuiPanelHeader__content>*{padding:0 12px}.vkuiPanelHeader--android .vkuiSearch,.vkuiPanelHeader--vkcom .vkuiSearch{padding:0 4px}.vkuiPanelHeader--android.vkuiPanelHeader--no-before .vkuiPanelHeader__content>*,.vkuiPanelHeader--vkcom.vkuiPanelHeader--no-before .vkuiPanelHeader__content>*{padding-left:0}.vkuiPanelHeader--android.vkuiPanelHeader--no-before .vkuiPanelHeader__content{padding-left:16px}.vkuiSplitCol--spaced .vkuiPanelHeader--android.vkuiPanelHeader--no-before:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-left:0}.vkuiPanelHeader--android.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*,.vkuiPanelHeader--vkcom.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*{padding-right:0}.vkuiPanelHeader--android.vkuiPanelHeader--no-after .vkuiPanelHeader__content{padding-right:16px}.vkuiSplitCol--spaced .vkuiPanelHeader--android.vkuiPanelHeader--no-after:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-right:0}.vkuiPanelHeader--android .vkuiPanelHeader__after:not(:empty),.vkuiPanelHeader--vkcom .vkuiPanelHeader__after:not(:empty){padding:4px 4px 4px 0}.vkuiPanelHeader--vkcom{--panelheader_height:var(--panelheader_height_vkcom);position:relative;z-index:10}.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-regular:not(.vkuiModalPageHeader__in)::after{position:absolute;left:1px;left:var(--thin-border);right:1px;right:var(--thin-border);bottom:0;height:1px;height:var(--thin-border);background-color:#fff;background-color:var(--header_background);content:""}.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-regular:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__in{border-top-left-radius:8px;border-top-right-radius:8px;box-shadow:0 0 0 1px #e1e3e6 inset;box-shadow:0 0 0 var(--thin-border) var(--input_border) inset;border-bottom:none}.vkuiPanelHeader--vkcom .vkuiPanelHeader__content{text-align:center}.vkuiPanelHeader--vkcom .vkuiPanelHeader__before:not(:empty){padding:0 0 0 4px}.vkuiPanelHeader--vkcom .vkuiPanelHeader__before,.vkuiPanelHeader--vkcom .vkuiPanelHeader__after{flex-basis:0;flex-shrink:0;flex-grow:1}
+.vkuiPanelHeader{position:relative}.vkuiPanelHeader--vis.vkuiPanelHeader--fixed:before{content:"";display:block}.vkuiPanelHeader:not(.vkuiPanelHeader--vis):not(.vkuiPanelHeader--fixed){height:0}.vkuiPanelHeader__fixed{z-index:10}.vkuiPanelHeader__in{align-items:center;background:#fff;background:var(--header_background);display:flex;justify-content:space-between;position:relative;white-space:nowrap}.vkuiPanelHeader--trnsp .vkuiPanelHeader__in{background:transparent}.vkuiPanelHeader--shadow .vkuiPanelHeader__in{box-shadow:0 0 4px rgba(0,0,0,.08)}.vkuiPanelHeader__before{box-sizing:border-box;color:#2688eb;color:var(--header_tint);display:flex;flex-shrink:0}.vkuiPanelHeader__content{overflow:hidden}.vkuiPanelHeader__content>*{display:block;overflow:hidden;text-overflow:ellipsis}.vkuiPanelHeader__content-in{color:#000;color:var(--header_text);font-family:VK Sans Display,-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--font-display);font-weight:500}.vkuiPanelHeader:before,.vkuiPanelHeader__in{height:56px;height:var(--panelheader_height);padding-top:0;padding-top:var(--safe-area-inset-top)}.vkuiPanelHeader__after{box-sizing:border-box;color:#2688eb;color:var(--header_tint);display:flex;justify-content:flex-end}.vkuiPanelHeader--vkapps .vkuiPanelHeader__after{min-width:90px}.vkuiPanelHeader--ios{--panelheader_height:var(--panelheader_height_ios)}.vkuiPanelHeader--ios .vkuiPanelHeader__before{flex-basis:0;flex-grow:1;flex-shrink:0;opacity:1;padding:4px 0 4px 4px;transition:opacity .3s cubic-bezier(.36,.66,.04,1);transition:opacity .3s var(--ios-easing)}.vkuiPanelHeader--ios .vkuiPanelHeader__before .vkuiPanelHeaderButton+.vkuiPanelHeaderButton--primitive{margin-left:-6px;padding-left:0}.vkuiPanelHeader--ios .vkuiPanelHeader__content{opacity:1;text-align:center;transition:opacity .3s cubic-bezier(.36,.66,.04,1);transition:opacity .3s var(--ios-easing)}.vkuiPanelHeader--ios .vkuiPanelHeader__content-in{font-size:21px}.vkuiPanelHeader--ios .vkuiPanelHeader__content>*{padding:0 4px}.vkuiPanelHeader--ios.vkuiPanelHeader--no-before .vkuiPanelHeader__content>*{padding-left:0}.vkuiPanelHeader--ios.vkuiPanelHeader--no-before .vkuiPanelHeader__content{padding-left:8px}.vkuiPanelHeader--ios.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*{padding-right:0}.vkuiPanelHeader--ios.vkuiPanelHeader--no-after .vkuiPanelHeader__content{padding-right:8px}.vkuiPanelHeader--ios .vkuiPanelHeader__after{flex-basis:0;flex-grow:1;flex-shrink:0;opacity:1;padding:4px 4px 4px 0;transition:opacity .3s cubic-bezier(.36,.66,.04,1);transition:opacity .3s var(--ios-easing)}.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__after,.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__before,.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__content{opacity:0}.vkuiPanelHeader--android .vkuiPanelHeader__before:not(:empty){padding:4px 0 4px 4px}.vkuiPanelHeader--android .vkuiPanelHeader__content{align-items:center;flex-grow:1;max-width:100%}.vkuiPanelHeader--android .vkuiPanelHeader__content-in{font-size:23px}.vkuiPanelHeader--android .vkuiPanelHeader__content>*{padding:0 12px}.vkuiPanelHeader--android .vkuiSearch,.vkuiPanelHeader--vkcom .vkuiSearch{padding:0 4px}.vkuiPanelHeader--android.vkuiPanelHeader--no-before .vkuiPanelHeader__content>*,.vkuiPanelHeader--vkcom.vkuiPanelHeader--no-before .vkuiPanelHeader__content>*{padding-left:0}.vkuiPanelHeader--android.vkuiPanelHeader--no-before .vkuiPanelHeader__content{padding-left:16px}.vkuiSplitCol--spaced .vkuiPanelHeader--android.vkuiPanelHeader--no-before:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-left:0}.vkuiPanelHeader--android.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*,.vkuiPanelHeader--vkcom.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*{padding-right:0}.vkuiPanelHeader--android.vkuiPanelHeader--no-after .vkuiPanelHeader__content{padding-right:16px}.vkuiSplitCol--spaced .vkuiPanelHeader--android.vkuiPanelHeader--no-after:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-right:0}.vkuiPanelHeader--android .vkuiPanelHeader__after:not(:empty),.vkuiPanelHeader--vkcom .vkuiPanelHeader__after:not(:empty){padding:4px 4px 4px 0}.vkuiPanelHeader--vkcom{--panelheader_height:var(--panelheader_height_vkcom);position:relative;z-index:10}.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-regular:not(.vkuiModalPageHeader__in):after{background-color:#fff;background-color:var(--header_background);bottom:0;content:"";height:1px;height:var(--thin-border);left:1px;left:var(--thin-border);position:absolute;right:1px;right:var(--thin-border)}.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-regular:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__in{border-bottom:none;border-top-left-radius:8px;border-top-right-radius:8px;box-shadow:inset 0 0 0 1px #e1e3e6;box-shadow:0 0 0 var(--thin-border) var(--input_border) inset}.vkuiPanelHeader--vkcom .vkuiPanelHeader__content{text-align:center}.vkuiPanelHeader--vkcom .vkuiPanelHeader__before:not(:empty){padding:0 0 0 4px}.vkuiPanelHeader--vkcom .vkuiPanelHeader__after,.vkuiPanelHeader--vkcom .vkuiPanelHeader__before{flex-basis:0;flex-grow:1;flex-shrink:0}

package/dist/cssm/components/PanelHeader/PanelHeader.js

@@ -127,4 +127,5 @@ export var PanelHeader = withAdaptivity(PanelHeaderComponent, {
   sizeX: true,
   sizeY: true
 });
+PanelHeader.displayName = "PanelHeader";
 //# sourceMappingURL=PanelHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeader/PanelHeader.tsx"],"names":["React","usePlatform","getClassName","classNames","warnOnce","FixedLayout","Separator","Platform","VKCOM","ConfigProviderContext","WebviewType","SizeType","withAdaptivity","Text","TooltipContainer","ModalRootContext","Spacing","PanelHeaderIn","before","after","separator","children","useContext","webviewType","isInsideModal","platform","INTERNAL","warn","PanelHeaderComponent","propsBefore","left","propsAfter","right","visor","transparent","shadow","getRef","getRootRef","sizeX","sizeY","fixed","restProps","needShadow","REGULAR","isFixed","undefined","process","env","NODE_ENV","innerProps","VKAPPS","PanelHeader"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,SAASC,UAAT;AACA,SAASC,QAAT;AACA,SAASC,WAAT;AACA,SAASC,SAAT;AACA,SAASC,QAAT,EAAmBC,KAAnB;AAEA,SACEC,qBADF,EAEEC,WAFF;AAIA,SAEEC,QAFF,EAGEC,cAHF;AAKA,SAASC,IAAT;AACA,SAASC,gBAAT;AACA,SAASC,gBAAT;AACA,SAASC,OAAT;AACA;;AA8BA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,OAKE;AAAA,MAJtBC,MAIsB,QAJtBA,MAIsB;AAAA,MAHtBC,KAGsB,QAHtBA,KAGsB;AAAA,MAFtBC,SAEsB,QAFtBA,SAEsB;AAAA,MADtBC,QACsB,QADtBA,QACsB;;AACtB,0BAAwBrB,KAAK,CAACsB,UAAN,CAAiBb,qBAAjB,CAAxB;AAAA,MAAQc,WAAR,qBAAQA,WAAR;;AACA,2BAA0BvB,KAAK,CAACsB,UAAN,CAAiBP,gBAAjB,CAA1B;AAAA,MAAQS,aAAR,sBAAQA,aAAR;;AACA,MAAMC,QAAQ,GAAGxB,WAAW,EAA5B;AAEA,SACE,oBAAC,KAAD,CAAO,QAAP,QACE,oBAAC,gBAAD;AAAkB,IAAA,KAAK,MAAvB;AAAwB,IAAA,SAAS,EAAC;AAAlC,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KAAsCiB,MAAtC,CADF,EAEE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGO,QAAQ,KAAKjB,KAAb,GACC,oBAAC,IAAD;AAAM,IAAA,MAAM,EAAC;AAAb,KAAkBa,QAAlB,CADD,GAGC;AAAM,IAAA,SAAS,EAAC;AAAhB,KAA2CA,QAA3C,CAJJ,CAFF,EASE;AAAK,IAAA,SAAS,EAAC;AAAf,KACG,CAACE,WAAW,KAAKb,WAAW,CAACgB,QAA5B,IAAwCF,aAAzC,KAA2DL,KAD9D,CATF,CADF,EAcGC,SAAS,IAAIK,QAAQ,KAAKjB,KAA1B,IAAmC,oBAAC,SAAD;AAAW,IAAA,IAAI;AAAf,IAdtC,CADF;AAkBD,CA5BD;;AA8BA,IAAMmB,IAAI,GAAGvB,QAAQ,CAAC,aAAD,CAArB;;AACA,IAAMwB,oBAAoB,GAAG,SAAvBA,oBAAuB,QAkBL;AAAA,MAhBdC,WAgBc,SAhBtBX,MAgBsB;AAAA,MAftBY,IAesB,SAftBA,IAesB;AAAA,MAdfC,UAce,SAdtBZ,KAcsB;AAAA,MAbtBa,KAasB,SAbtBA,KAasB;AAAA,MAXtBX,QAWsB,SAXtBA,QAWsB;AAAA,8BAVtBD,SAUsB;AAAA,MAVtBA,SAUsB,gCAVV,IAUU;AAAA,0BATtBa,KASsB;AAAA,MATtBA,KASsB,4BATd,IASc;AAAA,gCARtBC,WAQsB;AAAA,MARtBA,WAQsB,kCARR,KAQQ;AAAA,MAPtBC,MAOsB,SAPtBA,MAOsB;AAAA,MANtBC,MAMsB,SANtBA,MAMsB;AAAA,MALtBC,UAKsB,SALtBA,UAKsB;AAAA,MAJtBC,KAIsB,SAJtBA,KAIsB;AAAA,MAHtBC,KAGsB,SAHtBA,KAGsB;AAAA,MAFtBC,KAEsB,SAFtBA,KAEsB;AAAA,MADnBC,SACmB;;AACtB,MAAMhB,QAAQ,GAAGxB,WAAW,EAA5B;;AACA,2BAAwBD,KAAK,CAACsB,UAAN,CAAiBb,qBAAjB,CAAxB;AAAA,MAAQc,WAAR,sBAAQA,WAAR;;AACA,2BAA0BvB,KAAK,CAACsB,UAAN,CAAiBP,gBAAjB,CAA1B;AAAA,MAAQS,aAAR,sBAAQA,aAAR;;AACA,MAAMkB,UAAU,GAAGP,MAAM,IAAIG,KAAK,KAAK3B,QAAQ,CAACgC,OAAhD;AACA,MAAIC,OAAO,GAAGJ,KAAK,KAAKK,SAAV,GAAsBL,KAAtB,GAA8Bf,QAAQ,KAAKlB,QAAQ,CAACC,KAAlE,CALsB,CAOtB;;AACA,MAAMU,MAAM,GAAGW,WAAH,aAAGA,WAAH,cAAGA,WAAH,GAAkBC,IAA9B;AACA,MAAMX,KAAK,GAAGY,UAAH,aAAGA,UAAH,cAAGA,UAAH,GAAiBC,KAA5B;;AAEA,MAAIc,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAA7B,EAA4C;AAC1ChB,IAAAA,KAAK,IACHL,IAAI,CACF,qEADE,CADN;AAIAG,IAAAA,IAAI,IACFH,IAAI,CACF,qEADE,CADN;AAID,GApBqB,CAqBtB;;;AAEA,MAAMsB,UAAU,GAAG;AAAE/B,IAAAA,MAAM,EAANA,MAAF;AAAUC,IAAAA,KAAK,EAALA,KAAV;AAAiBC,IAAAA,SAAS,EAATA,SAAjB;AAA4BC,IAAAA,QAAQ,EAARA;AAA5B,GAAnB;AAEA,SACE,wCACMoB,SADN;AAEE;AACA,IAAA,SAAS,EAAEtC,UAAU,CACnBD,YAAY,CAAC,aAAD,EAAgBuB,QAAhB,CADO,EAEnB;AACE,4BAAsBS,WADxB;AAEE,6BAAuBQ,UAFzB;AAGE,0BAAoBT,KAHtB;AAIE,0BAAoBb,SAAS,IAAIa,KAJnC;AAKE,6BACEV,WAAW,KAAKb,WAAW,CAACwC,MAA5B,IAAsC,CAAC1B,aAN3C;AAOE,gCAA0B,CAACN,MAP7B;AAQE,+BAAyB,CAACC,KAR5B;AASE,4BAAsByB;AATxB,KAFmB,+BAaGN,KAbH,EAHvB;AAkBE,IAAA,GAAG,EAAEM,OAAO,GAAGP,UAAH,GAAgBD;AAlB9B,MAoBGQ,OAAO,GACN,oBAAC,WAAD;AACE,IAAA,SAAS,EAAC,oBADZ;AAEE,IAAA,QAAQ,EAAC,KAFX;AAGE,IAAA,UAAU,EAAER;AAHd,KAKE,oBAAC,aAAD,EAAmBa,UAAnB,CALF,CADM,GASN,oBAAC,aAAD,EAAmBA,UAAnB,CA7BJ,EA+BG7B,SAAS,IACRa,KADD,IAECR,QAAQ,KAAKjB,KAFd,KAGE8B,KAAK,KAAK3B,QAAQ,CAACgC,OAAnB,GAA6B,oBAAC,OAAD;AAAS,IAAA,IAAI,EAAE;AAAf,IAA7B,GAAqD,oBAAC,SAAD,OAHvD,CA/BH,CADF;AAsCD,CAjFD;AAmFA;AACA;AACA;;;AACA,OAAO,IAAMQ,WAAW,GAAGvC,cAAc,CAACgB,oBAAD,EAAuB;AAC9DU,EAAAA,KAAK,EAAE,IADuD;AAE9DC,EAAAA,KAAK,EAAE;AAFuD,CAAvB,CAAlC","sourcesContent":["import * as React from \"react\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { FixedLayout } from \"../FixedLayout/FixedLayout\";\nimport { Separator } from \"../Separator/Separator\";\nimport { Platform, VKCOM } from \"../../lib/platform\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport {\n  ConfigProviderContext,\n  WebviewType,\n} from \"../ConfigProvider/ConfigProviderContext\";\nimport {\n  AdaptivityProps,\n  SizeType,\n  withAdaptivity,\n} from \"../../hoc/withAdaptivity\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { TooltipContainer } from \"../Tooltip/TooltipContainer\";\nimport { ModalRootContext } from \"../ModalRoot/ModalRootContext\";\nimport { Spacing } from \"../Spacing/Spacing\";\nimport \"./PanelHeader.css\";\n\nexport interface PanelHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    AdaptivityProps {\n  before?: React.ReactNode;\n  /**\n   * @deprecated Будет удалено в 5.0.0. Используйте `before`\n   */\n  left?: React.ReactNode;\n  after?: React.ReactNode;\n  /**\n   * @deprecated Будет удалено в 5.0.0. Используйте `after`\n   */\n  right?: React.ReactNode;\n  separator?: boolean;\n  transparent?: boolean;\n  shadow?: boolean;\n  /**\n   * Если `false`, то шапка будет нулевой высоты и контент панели \"залезет\" под неё\n   */\n  visor?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n}\n\nconst PanelHeaderIn = ({\n  before,\n  after,\n  separator,\n  children,\n}: PanelHeaderProps) => {\n  const { webviewType } = React.useContext(ConfigProviderContext);\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  return (\n    <React.Fragment>\n      <TooltipContainer fixed vkuiClass=\"PanelHeader__in\">\n        <div vkuiClass=\"PanelHeader__before\">{before}</div>\n        <div vkuiClass=\"PanelHeader__content\">\n          {platform === VKCOM ? (\n            <Text weight=\"2\">{children}</Text>\n          ) : (\n            <span vkuiClass=\"PanelHeader__content-in\">{children}</span>\n          )}\n        </div>\n        <div vkuiClass=\"PanelHeader__after\">\n          {(webviewType === WebviewType.INTERNAL || isInsideModal) && after}\n        </div>\n      </TooltipContainer>\n      {separator && platform === VKCOM && <Separator wide />}\n    </React.Fragment>\n  );\n};\n\nconst warn = warnOnce(\"PanelHeader\");\nconst PanelHeaderComponent = ({\n  // TODO: поправить перед 5.0.0\n  before: propsBefore,\n  left,\n  after: propsAfter,\n  right,\n  // /end TODO\n  children,\n  separator = true,\n  visor = true,\n  transparent = false,\n  shadow,\n  getRef,\n  getRootRef,\n  sizeX,\n  sizeY,\n  fixed,\n  ...restProps\n}: PanelHeaderProps) => {\n  const platform = usePlatform();\n  const { webviewType } = React.useContext(ConfigProviderContext);\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const needShadow = shadow && sizeX === SizeType.REGULAR;\n  let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;\n\n  // TODO: удалить перед 5.0.0\n  const before = propsBefore ?? left;\n  const after = propsAfter ?? right;\n\n  if (process.env.NODE_ENV === \"development\") {\n    right &&\n      warn(\n        \"Свойство right устарелo и будет удалено в 5.0.0. Используйте after.\"\n      );\n    left &&\n      warn(\n        \"Свойство left устарелo и будет удалено в 5.0.0. Используйте before.\"\n      );\n  }\n  // /end TODO\n\n  const innerProps = { before, after, separator, children };\n\n  return (\n    <div\n      {...restProps}\n      // eslint-disable-next-line vkui/no-object-expression-in-arguments\n      vkuiClass={classNames(\n        getClassName(\"PanelHeader\", platform),\n        {\n          \"PanelHeader--trnsp\": transparent,\n          \"PanelHeader--shadow\": needShadow,\n          \"PanelHeader--vis\": visor,\n          \"PanelHeader--sep\": separator && visor,\n          \"PanelHeader--vkapps\":\n            webviewType === WebviewType.VKAPPS && !isInsideModal,\n          \"PanelHeader--no-before\": !before,\n          \"PanelHeader--no-after\": !after,\n          \"PanelHeader--fixed\": isFixed,\n        },\n        `PanelHeader--sizeX-${sizeX}`\n      )}\n      ref={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout\n          vkuiClass=\"PanelHeader__fixed\"\n          vertical=\"top\"\n          getRootRef={getRef}\n        >\n          <PanelHeaderIn {...innerProps} />\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn {...innerProps} />\n      )}\n      {separator &&\n        visor &&\n        platform !== VKCOM &&\n        (sizeX === SizeType.REGULAR ? <Spacing size={16} /> : <Separator />)}\n    </div>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = withAdaptivity(PanelHeaderComponent, {\n  sizeX: true,\n  sizeY: true,\n});\n"],"file":"PanelHeader.js"}
+{"version":3,"sources":["../../../../src/components/PanelHeader/PanelHeader.tsx"],"names":["React","usePlatform","getClassName","classNames","warnOnce","FixedLayout","Separator","Platform","VKCOM","ConfigProviderContext","WebviewType","SizeType","withAdaptivity","Text","TooltipContainer","ModalRootContext","Spacing","PanelHeaderIn","before","after","separator","children","useContext","webviewType","isInsideModal","platform","INTERNAL","warn","PanelHeaderComponent","propsBefore","left","propsAfter","right","visor","transparent","shadow","getRef","getRootRef","sizeX","sizeY","fixed","restProps","needShadow","REGULAR","isFixed","undefined","process","env","NODE_ENV","innerProps","VKAPPS","PanelHeader","displayName"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { FixedLayout } from \"../FixedLayout/FixedLayout\";\nimport { Separator } from \"../Separator/Separator\";\nimport { Platform, VKCOM } from \"../../lib/platform\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport {\n  ConfigProviderContext,\n  WebviewType,\n} from \"../ConfigProvider/ConfigProviderContext\";\nimport {\n  AdaptivityProps,\n  SizeType,\n  withAdaptivity,\n} from \"../../hoc/withAdaptivity\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { TooltipContainer } from \"../Tooltip/TooltipContainer\";\nimport { ModalRootContext } from \"../ModalRoot/ModalRootContext\";\nimport { Spacing } from \"../Spacing/Spacing\";\nimport \"./PanelHeader.css\";\n\nexport interface PanelHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    AdaptivityProps {\n  before?: React.ReactNode;\n  /**\n   * @deprecated Будет удалено в 5.0.0. Используйте `before`\n   */\n  left?: React.ReactNode;\n  after?: React.ReactNode;\n  /**\n   * @deprecated Будет удалено в 5.0.0. Используйте `after`\n   */\n  right?: React.ReactNode;\n  separator?: boolean;\n  transparent?: boolean;\n  shadow?: boolean;\n  /**\n   * Если `false`, то шапка будет нулевой высоты и контент панели \"залезет\" под неё\n   */\n  visor?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n}\n\nconst PanelHeaderIn = ({\n  before,\n  after,\n  separator,\n  children,\n}: PanelHeaderProps) => {\n  const { webviewType } = React.useContext(ConfigProviderContext);\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  return (\n    <React.Fragment>\n      <TooltipContainer fixed vkuiClass=\"PanelHeader__in\">\n        <div vkuiClass=\"PanelHeader__before\">{before}</div>\n        <div vkuiClass=\"PanelHeader__content\">\n          {platform === VKCOM ? (\n            <Text weight=\"2\">{children}</Text>\n          ) : (\n            <span vkuiClass=\"PanelHeader__content-in\">{children}</span>\n          )}\n        </div>\n        <div vkuiClass=\"PanelHeader__after\">\n          {(webviewType === WebviewType.INTERNAL || isInsideModal) && after}\n        </div>\n      </TooltipContainer>\n      {separator && platform === VKCOM && <Separator wide />}\n    </React.Fragment>\n  );\n};\n\nconst warn = warnOnce(\"PanelHeader\");\nconst PanelHeaderComponent = ({\n  // TODO: поправить перед 5.0.0\n  before: propsBefore,\n  left,\n  after: propsAfter,\n  right,\n  // /end TODO\n  children,\n  separator = true,\n  visor = true,\n  transparent = false,\n  shadow,\n  getRef,\n  getRootRef,\n  sizeX,\n  sizeY,\n  fixed,\n  ...restProps\n}: PanelHeaderProps) => {\n  const platform = usePlatform();\n  const { webviewType } = React.useContext(ConfigProviderContext);\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const needShadow = shadow && sizeX === SizeType.REGULAR;\n  let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;\n\n  // TODO: удалить перед 5.0.0\n  const before = propsBefore ?? left;\n  const after = propsAfter ?? right;\n\n  if (process.env.NODE_ENV === \"development\") {\n    right &&\n      warn(\n        \"Свойство right устарелo и будет удалено в 5.0.0. Используйте after.\"\n      );\n    left &&\n      warn(\n        \"Свойство left устарелo и будет удалено в 5.0.0. Используйте before.\"\n      );\n  }\n  // /end TODO\n\n  const innerProps = { before, after, separator, children };\n\n  return (\n    <div\n      {...restProps}\n      // eslint-disable-next-line vkui/no-object-expression-in-arguments\n      vkuiClass={classNames(\n        getClassName(\"PanelHeader\", platform),\n        {\n          \"PanelHeader--trnsp\": transparent,\n          \"PanelHeader--shadow\": needShadow,\n          \"PanelHeader--vis\": visor,\n          \"PanelHeader--sep\": separator && visor,\n          \"PanelHeader--vkapps\":\n            webviewType === WebviewType.VKAPPS && !isInsideModal,\n          \"PanelHeader--no-before\": !before,\n          \"PanelHeader--no-after\": !after,\n          \"PanelHeader--fixed\": isFixed,\n        },\n        `PanelHeader--sizeX-${sizeX}`\n      )}\n      ref={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout\n          vkuiClass=\"PanelHeader__fixed\"\n          vertical=\"top\"\n          getRootRef={getRef}\n        >\n          <PanelHeaderIn {...innerProps} />\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn {...innerProps} />\n      )}\n      {separator &&\n        visor &&\n        platform !== VKCOM &&\n        (sizeX === SizeType.REGULAR ? <Spacing size={16} /> : <Separator />)}\n    </div>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = withAdaptivity(PanelHeaderComponent, {\n  sizeX: true,\n  sizeY: true,\n});\n\nPanelHeader.displayName = \"PanelHeader\";\n"],"file":"PanelHeader.js"}

package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.css

@@ -1 +1 @@
-.vkuiPanelHeaderButton{-webkit-appearance:none;appearance:none;background:0 0;border:0;box-shadow:none;display:block;color:currentColor;padding:0;margin:0;position:relative}.vkuiPanelHeaderButton[disabled]{opacity:.6}.vkuiPanelHeaderButton .vkuiCounter{position:absolute;padding:0;top:8px;right:2px}.vkuiPanelHeaderButton--ios{position:relative;display:flex;align-items:center;font-size:17px}.vkuiPanelHeaderButton--ios.vkuiPanelHeaderButton--primitive{height:44px;line-height:44px;padding:0 12px}.vkuiPanelHeaderButton--ios .vkuiIcon--24{padding:10px}.vkuiPanelHeaderButton--ios .vkuiIcon--28{padding:8px}.vkuiPanelHeaderButton--android{border-radius:50%}.vkuiPanelHeaderButton--android.vkuiPanelHeaderButton--primitive{height:48px;line-height:48px;padding:0 12px}.vkuiPanelHeaderButton--android .vkuiIcon--24{padding:12px}.vkuiPanelHeaderButton--android .vkuiIcon--28{padding:10px}.vkuiPanelHeaderButton--vkcom{color:#818c99;color:var(--header_text_secondary)}.vkuiPanelHeaderButton--vkcom>:not(.vkuiCounter){transition:opacity .3s;opacity:.7}.vkuiPanelHeaderButton--vkcom.vkuiPanelHeaderButton--hover>:not(.vkuiCounter),.vkuiPanelHeaderButton--vkcom.vkuiPanelHeaderButton--active>:not(.vkuiCounter){opacity:1}.vkuiPanelHeaderButton--vkcom{display:flex;align-items:center;padding:10px}.vkuiPanelHeaderButton--vkcom.vkuiPanelHeaderButton--primitive{height:48px;line-height:48px;padding:0 10px}.vkuiPanelHeaderButton--vkcom.vkuiPanelHeaderButton--notPrimitive{border-radius:50%}
+.vkuiPanelHeaderButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;box-shadow:none;color:currentColor;display:block;margin:0;padding:0;position:relative}.vkuiPanelHeaderButton[disabled]{opacity:.6}.vkuiPanelHeaderButton .vkuiCounter{padding:0;position:absolute;right:2px;top:8px}.vkuiPanelHeaderButton--ios{align-items:center;display:flex;font-size:17px;position:relative}.vkuiPanelHeaderButton--ios.vkuiPanelHeaderButton--primitive{height:44px;line-height:44px;padding:0 12px}.vkuiPanelHeaderButton--ios .vkuiIcon--24{padding:10px}.vkuiPanelHeaderButton--ios .vkuiIcon--28{padding:8px}.vkuiPanelHeaderButton--android{border-radius:50%}.vkuiPanelHeaderButton--android.vkuiPanelHeaderButton--primitive{height:48px;line-height:48px;padding:0 12px}.vkuiPanelHeaderButton--android .vkuiIcon--24{padding:12px}.vkuiPanelHeaderButton--android .vkuiIcon--28{padding:10px}.vkuiPanelHeaderButton--vkcom{color:#818c99;color:var(--header_text_secondary)}.vkuiPanelHeaderButton--vkcom>:not(.vkuiCounter){opacity:.7;transition:opacity .3s}.vkuiPanelHeaderButton--vkcom.vkuiPanelHeaderButton--active>:not(.vkuiCounter),.vkuiPanelHeaderButton--vkcom.vkuiPanelHeaderButton--hover>:not(.vkuiCounter){opacity:1}.vkuiPanelHeaderButton--vkcom{align-items:center;display:flex;padding:10px}.vkuiPanelHeaderButton--vkcom.vkuiPanelHeaderButton--primitive{height:48px;line-height:48px;padding:0 10px}.vkuiPanelHeaderButton--vkcom.vkuiPanelHeaderButton--notPrimitive{border-radius:50%}

package/dist/cssm/components/PanelHeaderContent/PanelHeaderContent.css

@@ -1 +1 @@
-.vkuiPanelHeaderContent{line-height:initial;height:100%;max-width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--font-common)}.vkuiPanelHeaderContent__before{flex-shrink:0;margin-right:12px}.vkuiPanelHeaderContent__in{flex-grow:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:100%}.vkuiPanelHeaderContent__status,.vkuiPanelHeaderContent__children-in,.vkuiPanelHeaderContent__children .vkuiHeadline{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.vkuiPanelHeaderContent__status{order:1;margin-top:1px;max-width:100%;color:#818c99;color:var(--header_text_secondary)}.vkuiPanelHeaderContent__children{max-width:100%;display:flex;align-items:center}.vkuiPanelHeaderContent__children-in{flex-grow:0;min-width:0}.vkuiPanelHeaderContent__aside{display:flex;align-items:center;justify-content:flex-start;margin-left:2px;color:#2688eb;color:var(--header_tint)}.vkuiPanelHeaderContent__width{width:1000px}.vkuiPanelHeaderContent--ios .vkuiPanelHeaderContent__before~.vkuiPanelHeaderContent__in{align-items:flex-start}.vkuiPanelHeaderContent--ios .vkuiPanelHeaderContent__in{align-items:center}.vkuiPanelHeaderContent--ios .vkuiPanelHeaderContent__children-in{font-size:21px;font-family:"VK Sans Display",-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--font-display);font-weight:500;line-height:52px;line-height:var(--panelheader_height_ios)}.vkuiPanelHeaderContent--android .vkuiPanelHeaderContent__children-in{font-size:23px;font-family:"VK Sans Display",-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--font-display);font-weight:500;line-height:56px;line-height:var(--panelheader_height)}.vkuiPanelHeaderContent--vkcom .vkuiPanelHeaderContent__before~.vkuiPanelHeaderContent__in{align-items:flex-start}.vkuiPanelHeaderContent--vkcom .vkuiPanelHeaderContent__in{align-items:center}
+.vkuiPanelHeaderContent{align-items:center;box-sizing:border-box;display:flex;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--font-common);height:100%;justify-content:flex-start;line-height:normal;max-width:100%}.vkuiPanelHeaderContent__before{flex-shrink:0;margin-right:12px}.vkuiPanelHeaderContent__in{align-items:flex-start;display:flex;flex-direction:column;flex-grow:1;height:100%;justify-content:center;min-width:0}.vkuiPanelHeaderContent__children .vkuiHeadline,.vkuiPanelHeaderContent__children-in,.vkuiPanelHeaderContent__status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiPanelHeaderContent__status{color:#818c99;color:var(--header_text_secondary);margin-top:1px;max-width:100%;order:1}.vkuiPanelHeaderContent__children{align-items:center;display:flex;max-width:100%}.vkuiPanelHeaderContent__children-in{flex-grow:0;min-width:0}.vkuiPanelHeaderContent__aside{align-items:center;color:#2688eb;color:var(--header_tint);display:flex;justify-content:flex-start;margin-left:2px}.vkuiPanelHeaderContent__width{width:1000px}.vkuiPanelHeaderContent--ios .vkuiPanelHeaderContent__before~.vkuiPanelHeaderContent__in{align-items:flex-start}.vkuiPanelHeaderContent--ios .vkuiPanelHeaderContent__in{align-items:center}.vkuiPanelHeaderContent--ios .vkuiPanelHeaderContent__children-in{font-family:VK Sans Display,-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--font-display);font-size:21px;font-weight:500;line-height:52px;line-height:var(--panelheader_height_ios)}.vkuiPanelHeaderContent--android .vkuiPanelHeaderContent__children-in{font-family:VK Sans Display,-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--font-display);font-size:23px;font-weight:500;line-height:56px;line-height:var(--panelheader_height)}.vkuiPanelHeaderContent--vkcom .vkuiPanelHeaderContent__before~.vkuiPanelHeaderContent__in{align-items:flex-start}.vkuiPanelHeaderContent--vkcom .vkuiPanelHeaderContent__in{align-items:center}

package/dist/cssm/components/PanelHeaderContext/PanelHeaderContext.css

@@ -1 +1 @@
-.vkuiPanelHeaderContext--opened,.vkuiPanelHeaderContext--closing{width:100%;height:100%}.vkuiPanelHeaderContext--desktop.vkuiPanelHeaderContext--opened,.vkuiPanelHeaderContext--desktop.vkuiPanelHeaderContext--closing{height:auto}.vkuiPanelHeaderContext__in{position:absolute;left:0;width:100%;z-index:2}.vkuiPanelHeaderContext__fade{position:absolute;width:100%;height:100%;left:0;top:0;z-index:1;background:rgba(0,0,0,.4)}.vkuiPanelHeaderContext--opened .vkuiPanelHeaderContext__fade{-webkit-animation:vkui-animation-panelheadercontext-fade-in .2s ease;animation:vkui-animation-panelheadercontext-fade-in .2s ease}.vkuiPanelHeaderContext--closing .vkuiPanelHeaderContext__fade{-webkit-animation:vkui-animation-panelheadercontext-fade-out .2s ease;animation:vkui-animation-panelheadercontext-fade-out .2s ease}.vkuiPanelHeaderContext--ios.vkuiPanelHeaderContext--opened .vkuiPanelHeaderContext__in{-webkit-animation:vkui-animation-panelheadercontext-translate-in .2s ease;animation:vkui-animation-panelheadercontext-translate-in .2s ease}.vkuiPanelHeaderContext--ios.vkuiPanelHeaderContext--closing .vkuiPanelHeaderContext__in{-webkit-animation:vkui-animation-panelheadercontext-translate-out .2s ease;animation:vkui-animation-panelheadercontext-translate-out .2s ease}.vkuiPanelHeaderContext--ios .vkuiList{background:#fff;background:var(--header_background)}.vkuiPanelHeaderContext--android .vkuiPanelHeaderContext__in,.vkuiPanelHeaderContext--vkcom .vkuiPanelHeaderContext__in{padding:8px;box-sizing:border-box}.vkuiPanelHeaderContext--android.vkuiPanelHeaderContext--opened .vkuiPanelHeaderContext__in,.vkuiPanelHeaderContext--vkcom.vkuiPanelHeaderContext--opened .vkuiPanelHeaderContext__in{-webkit-animation:vkui-animation-panelheadercontext-translate-in .2s ease;animation:vkui-animation-panelheadercontext-translate-in .2s ease}.vkuiPanelHeaderContext--android.vkuiPanelHeaderContext--closing .vkuiPanelHeaderContext__in,.vkuiPanelHeaderContext--vkcom.vkuiPanelHeaderContext--closing .vkuiPanelHeaderContext__in{-webkit-animation:vkui-animation-panelheadercontext-translate-out .2s ease;animation:vkui-animation-panelheadercontext-translate-out .2s ease}.vkuiPanelHeaderContext--android .vkuiList,.vkuiPanelHeaderContext--vkcom .vkuiList,.vkuiPanelHeaderContext--desktop.vkuiPanelHeaderContext--ios .vkuiList{overflow:hidden;border-radius:12px;padding:8px 0;background:#fff;background:var(--header_background)}.vkuiPanelHeaderContext--desktop .vkuiPanelHeaderContext__in{padding:12px 8px;box-sizing:border-box}.vkuiPanelHeaderContext--desktop .vkuiPanelHeaderContext__content{border-radius:12px;overflow:hidden;background:#fff;background:var(--header_background)}.vkuiPanelHeaderContext--desktop .vkuiPanelHeaderContext__content{box-shadow:0 0 4px rgba(0,0,0,.08),0 8px 8px rgba(0,0,0,.16)}@-webkit-keyframes vkui-animation-panelheadercontext-translate-in{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes vkui-animation-panelheadercontext-translate-in{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes vkui-animation-panelheadercontext-translate-out{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes vkui-animation-panelheadercontext-translate-out{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@-webkit-keyframes vkui-animation-panelheadercontext-fade-in{0%{opacity:0}to{opacity:1}}@keyframes vkui-animation-panelheadercontext-fade-in{0%{opacity:0}to{opacity:1}}@-webkit-keyframes vkui-animation-panelheadercontext-fade-out{0%{opacity:1}to{opacity:0}}@keyframes vkui-animation-panelheadercontext-fade-out{0%{opacity:1}to{opacity:0}}
+.vkuiPanelHeaderContext--closing,.vkuiPanelHeaderContext--opened{height:100%;width:100%}.vkuiPanelHeaderContext--desktop.vkuiPanelHeaderContext--closing,.vkuiPanelHeaderContext--desktop.vkuiPanelHeaderContext--opened{height:auto}.vkuiPanelHeaderContext__in{left:0;position:absolute;width:100%;z-index:2}.vkuiPanelHeaderContext__fade{background:rgba(0,0,0,.4);height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.vkuiPanelHeaderContext--opened .vkuiPanelHeaderContext__fade{-webkit-animation:vkui-animation-panelheadercontext-fade-in .2s ease;animation:vkui-animation-panelheadercontext-fade-in .2s ease}.vkuiPanelHeaderContext--closing .vkuiPanelHeaderContext__fade{-webkit-animation:vkui-animation-panelheadercontext-fade-out .2s ease;animation:vkui-animation-panelheadercontext-fade-out .2s ease}.vkuiPanelHeaderContext--ios.vkuiPanelHeaderContext--opened .vkuiPanelHeaderContext__in{-webkit-animation:vkui-animation-panelheadercontext-translate-in .2s ease;animation:vkui-animation-panelheadercontext-translate-in .2s ease}.vkuiPanelHeaderContext--ios.vkuiPanelHeaderContext--closing .vkuiPanelHeaderContext__in{-webkit-animation:vkui-animation-panelheadercontext-translate-out .2s ease;animation:vkui-animation-panelheadercontext-translate-out .2s ease}.vkuiPanelHeaderContext--ios .vkuiList{background:#fff;background:var(--header_background)}.vkuiPanelHeaderContext--android .vkuiPanelHeaderContext__in,.vkuiPanelHeaderContext--vkcom .vkuiPanelHeaderContext__in{box-sizing:border-box;padding:8px}.vkuiPanelHeaderContext--android.vkuiPanelHeaderContext--opened .vkuiPanelHeaderContext__in,.vkuiPanelHeaderContext--vkcom.vkuiPanelHeaderContext--opened .vkuiPanelHeaderContext__in{-webkit-animation:vkui-animation-panelheadercontext-translate-in .2s ease;animation:vkui-animation-panelheadercontext-translate-in .2s ease}.vkuiPanelHeaderContext--android.vkuiPanelHeaderContext--closing .vkuiPanelHeaderContext__in,.vkuiPanelHeaderContext--vkcom.vkuiPanelHeaderContext--closing .vkuiPanelHeaderContext__in{-webkit-animation:vkui-animation-panelheadercontext-translate-out .2s ease;animation:vkui-animation-panelheadercontext-translate-out .2s ease}.vkuiPanelHeaderContext--android .vkuiList,.vkuiPanelHeaderContext--desktop.vkuiPanelHeaderContext--ios .vkuiList,.vkuiPanelHeaderContext--vkcom .vkuiList{background:#fff;background:var(--header_background);border-radius:12px;overflow:hidden;padding:8px 0}.vkuiPanelHeaderContext--desktop .vkuiPanelHeaderContext__in{box-sizing:border-box;padding:12px 8px}.vkuiPanelHeaderContext--desktop .vkuiPanelHeaderContext__content{background:#fff;background:var(--header_background);border-radius:12px;box-shadow:0 0 4px rgba(0,0,0,.08),0 8px 8px rgba(0,0,0,.16);overflow:hidden}@-webkit-keyframes vkui-animation-panelheadercontext-translate-in{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes vkui-animation-panelheadercontext-translate-in{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes vkui-animation-panelheadercontext-translate-out{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes vkui-animation-panelheadercontext-translate-out{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@-webkit-keyframes vkui-animation-panelheadercontext-fade-in{0%{opacity:0}to{opacity:1}}@keyframes vkui-animation-panelheadercontext-fade-in{0%{opacity:0}to{opacity:1}}@-webkit-keyframes vkui-animation-panelheadercontext-fade-out{0%{opacity:1}to{opacity:0}}@keyframes vkui-animation-panelheadercontext-fade-out{0%{opacity:1}to{opacity:0}}

package/dist/cssm/components/Placeholder/Placeholder.css

@@ -1,3 +1,3 @@
-.vkuiPlaceholder{display:flex;align-items:center;justify-content:center}.vkuiPlaceholder--stretched{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;padding-top:inherit;padding-bottom:inherit}.vkuiPlaceholder__in{max-width:100%;text-align:center;box-sizing:border-box;padding:48px 32px}.vkuiPlaceholder__icon{margin-bottom:12px;display:inline-block;vertical-align:top;color:#aeb7c2;color:var(--placeholder_icon_foreground_secondary,
-    var(--vkui--color_icon_secondary)
-  )}.vkuiPlaceholder__header{color:#000;color:var(--text_primary, var(--vkui--color_text_primary))}.vkuiPlaceholder__text{color:#818c99;color:var(--text_placeholder, var(--vkui--color_text_secondary))}.vkuiPlaceholder__header+.vkuiPlaceholder__text{margin-top:8px}.vkuiPlaceholder__action:not(:first-child){margin-top:16px}
+.vkuiPlaceholder{align-items:center;display:flex;justify-content:center}.vkuiPlaceholder--stretched{bottom:0;left:0;padding-bottom:inherit;padding-top:inherit;position:absolute;right:0;top:0;z-index:1}.vkuiPlaceholder__in{box-sizing:border-box;max-width:100%;padding:48px 32px;text-align:center}.vkuiPlaceholder__icon{color:#aeb7c2;color:var(
+    --placeholder_icon_foreground_secondary,var(--vkui--color_icon_secondary)
+  );display:inline-block;margin-bottom:12px;vertical-align:top}.vkuiPlaceholder__header{color:#000;color:var(--text_primary,var(--vkui--color_text_primary))}.vkuiPlaceholder__text{color:#818c99;color:var(--text_placeholder,var(--vkui--color_text_secondary))}.vkuiPlaceholder__header+.vkuiPlaceholder__text{margin-top:8px}.vkuiPlaceholder__action:not(:first-child){margin-top:16px}

package/dist/cssm/components/PopoutRoot/PopoutRoot.css

@@ -1 +1 @@
-.vkuiPopoutRoot{width:100%;height:100%;position:relative}.vkuiPopoutRoot__popout{position:fixed;left:0;top:0;z-index:100;width:100%;height:100%}.vkuiPopoutRoot--absolute{position:absolute;left:0;top:0;z-index:100;width:100%;height:100%}.vkuiPopoutRoot__modal{position:fixed;left:0;top:0;z-index:99;width:100%;height:100%}.vkuiPopoutRoot__modal:empty{display:none}
+.vkuiPopoutRoot{height:100%;position:relative;width:100%}.vkuiPopoutRoot__popout{height:100%;left:0;position:fixed;top:0;width:100%;z-index:100}.vkuiPopoutRoot--absolute{height:100%;left:0;position:absolute;top:0;width:100%;z-index:100}.vkuiPopoutRoot__modal{height:100%;left:0;position:fixed;top:0;width:100%;z-index:99}.vkuiPopoutRoot__modal:empty{display:none}

package/dist/cssm/components/PopoutWrapper/PopoutWrapper.css

@@ -1 +1 @@
-.vkuiPopoutWrapper{width:100%;height:100%;box-sizing:border-box;left:0;top:0;pointer-events:none}.vkuiPopoutWrapper--opened{pointer-events:initial}.vkuiPopoutWrapper--closing{pointer-events:none}.vkuiPopoutWrapper--fixed{position:fixed}.vkuiPopoutWrapper__overlay{position:fixed;left:0;top:0;width:100%;height:100%;opacity:1;-webkit-animation:vkui-animation-full-fade-in .2s ease;animation:vkui-animation-full-fade-in .2s ease;-webkit-animation:vkui-animation-full-fade-in var(--vkui--animation_duration_m,0.2s) ease;animation:vkui-animation-full-fade-in var(--vkui--animation_duration_m,0.2s) ease}.vkuiPopoutWrapper--closing .vkuiPopoutWrapper__overlay{opacity:0;transition:opacity .2s cubic-bezier(.3,.3,.5,1);transition:opacity var(--vkui--animation_duration_m,0.2s) var(--vkui--animation_easing_default,cubic-bezier(0.3, 0.3, 0.5, 1))}.vkuiPopoutWrapper--masked .vkuiPopoutWrapper__overlay{background:rgba(0,0,0,.4);background:var(--vkui--color_overlay_primary,rgba(0, 0, 0, 0.4))}.vkuiPopoutWrapper--fixed .vkuiPopoutWrapper__overlay{position:absolute}.vkuiPopoutWrapper__container{width:100%;height:100%;position:relative;display:flex;box-sizing:border-box}.vkuiPopoutWrapper__content{display:flex;justify-content:center;width:100%;z-index:2;pointer-events:none}.vkuiPopoutWrapper__content>*{pointer-events:auto}.vkuiPopoutWrapper--v-center .vkuiPopoutWrapper__container{align-items:center}.vkuiPopoutWrapper--v-bottom .vkuiPopoutWrapper__container{align-items:flex-end}.vkuiPopoutWrapper--v-top .vkuiPopoutWrapper__container{align-items:flex-start}.vkuiPopoutWrapper--h-center .vkuiPopoutWrapper__container{justify-content:center}.vkuiPopoutWrapper--h-left .vkuiPopoutWrapper__container{justify-content:flex-start}.vkuiPopoutWrapper--h-right .vkuiPopoutWrapper__container{justify-content:flex-end}@-webkit-keyframes vkui-animation-full-fade-in{0%{opacity:0}to{opacity:1}}@keyframes vkui-animation-full-fade-in{0%{opacity:0}to{opacity:1}}
+.vkuiPopoutWrapper{box-sizing:border-box;height:100%;left:0;pointer-events:none;top:0;width:100%}.vkuiPopoutWrapper--opened{pointer-events:auto}.vkuiPopoutWrapper--closing{pointer-events:none}.vkuiPopoutWrapper--fixed{position:fixed}.vkuiPopoutWrapper__overlay{-webkit-animation:vkui-animation-full-fade-in .2s ease;animation:vkui-animation-full-fade-in .2s ease;-webkit-animation:vkui-animation-full-fade-in var(--vkui--animation_duration_m,.2s) ease;animation:vkui-animation-full-fade-in var(--vkui--animation_duration_m,.2s) ease;height:100%;left:0;opacity:1;position:fixed;top:0;width:100%}.vkuiPopoutWrapper--closing .vkuiPopoutWrapper__overlay{opacity:0;transition:opacity .2s cubic-bezier(.3,.3,.5,1);transition:opacity var(--vkui--animation_duration_m,.2s) var(--vkui--animation_easing_default,cubic-bezier(.3,.3,.5,1))}.vkuiPopoutWrapper--masked .vkuiPopoutWrapper__overlay{background:rgba(0,0,0,.4);background:var(--vkui--color_overlay_primary,rgba(0,0,0,.4))}.vkuiPopoutWrapper--fixed .vkuiPopoutWrapper__overlay{position:absolute}.vkuiPopoutWrapper__container{box-sizing:border-box;display:flex;height:100%;position:relative;width:100%}.vkuiPopoutWrapper__content{display:flex;justify-content:center;pointer-events:none;width:100%;z-index:2}.vkuiPopoutWrapper__content>*{pointer-events:auto}.vkuiPopoutWrapper--v-center .vkuiPopoutWrapper__container{align-items:center}.vkuiPopoutWrapper--v-bottom .vkuiPopoutWrapper__container{align-items:flex-end}.vkuiPopoutWrapper--v-top .vkuiPopoutWrapper__container{align-items:flex-start}.vkuiPopoutWrapper--h-center .vkuiPopoutWrapper__container{justify-content:center}.vkuiPopoutWrapper--h-left .vkuiPopoutWrapper__container{justify-content:flex-start}.vkuiPopoutWrapper--h-right .vkuiPopoutWrapper__container{justify-content:flex-end}@-webkit-keyframes vkui-animation-full-fade-in{0%{opacity:0}to{opacity:1}}@keyframes vkui-animation-full-fade-in{0%{opacity:0}to{opacity:1}}

package/dist/cssm/components/Popper/Popper.css

@@ -1 +1 @@
-.vkuiPopper{z-index:100}.vkuiPopper__arrow-in{content:"";display:block;width:20px;height:8px}[data-popper-placement^=bottom] .vkuiPopper__arrow{bottom:100%}[data-popper-placement^=top] .vkuiPopper__arrow{top:100%}[data-popper-placement^=top] .vkuiPopper__arrow-in{-webkit-transform:rotate(180deg);transform:rotate(180deg)}[data-popper-placement^=left] .vkuiPopper__arrow{left:calc(100% - 6px)}[data-popper-placement^=left] .vkuiPopper__arrow-in{-webkit-transform:rotate(90deg);transform:rotate(90deg)}[data-popper-placement^=right] .vkuiPopper__arrow{right:calc(100% - 6px)}[data-popper-placement^=right] .vkuiPopper__arrow-in{-webkit-transform:rotate(270deg);transform:rotate(270deg)}
+.vkuiPopper{z-index:100}

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

@@ -3,6 +3,9 @@ import { Modifier } from "react-popper";
 import { HasRef } from "../../types";
 import "./Popper.css";
 export declare type Placement = "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | "top" | "bottom" | "left" | "right";
+export interface PopperRenderContentProps {
+    className: string;
+}
 export interface PopperCommonProps extends React.HTMLAttributes<HTMLDivElement>, HasRef<HTMLDivElement> {
     /**
      * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства
@@ -16,7 +19,13 @@ export interface PopperCommonProps extends React.HTMLAttributes<HTMLDivElement>,
      * Отступ по главной оси
      */
     offsetDistance?: number;
+    /**
+     * Отображать ли стрелку, указывающую на якорный элемент
+     */
     arrow?: boolean;
+    /**
+     * Стиль стрелки
+     */
     arrowClassName?: string;
     /**
      * Выставлять ширину равной target элементу
@@ -30,6 +39,14 @@ export interface PopperCommonProps extends React.HTMLAttributes<HTMLDivElement>,
      * Массив кастомных модификаторов для Popper (необходимо мемоизировать)
      */
     customModifiers?: Array<Modifier<string>>;
+    /**
+     * При передаче содержимого в `children`, он будет обёрнут во внутренний контейнер.
+     *
+     * Если хочется управлять этим контейнером, то используйте данную функцию.
+     *
+     * > ⚠️ Параметр `children` будет проигнорирован.
+     */
+    renderContent?(props: PopperRenderContentProps): React.ReactNode;
 }
 export interface PopperProps extends PopperCommonProps {
     targetRef: React.RefObject<HTMLElement>;
@@ -37,4 +54,4 @@ export interface PopperProps extends PopperCommonProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/Popper
  */
-export declare const Popper: ({ targetRef, children, getRef, placement, onPlacementChange, arrow, arrowClassName, sameWidth, offsetDistance, offsetSkidding, forcePortal, style: compStyles, customModifiers, ...restProps }: PopperProps) => JSX.Element;
+export declare const Popper: ({ targetRef, children, getRef, placement, onPlacementChange, arrow, arrowClassName, sameWidth, offsetDistance, offsetSkidding, forcePortal, style: compStyles, customModifiers, renderContent, ...restProps }: PopperProps) => JSX.Element;

package/dist/cssm/components/Popper/Popper.js

@@ -3,11 +3,12 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["targetRef", "children", "getRef", "placement", "onPlacementChange", "arrow", "arrowClassName", "sameWidth", "offsetDistance", "offsetSkidding", "forcePortal", "style", "customModifiers"];
+var _excluded = ["targetRef", "children", "getRef", "placement", "onPlacementChange", "arrow", "arrowClassName", "sameWidth", "offsetDistance", "offsetSkidding", "forcePortal", "style", "customModifiers", "renderContent"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { usePopper } from "react-popper";
 import { AppRootPortal } from "../AppRoot/AppRootPortal";
+import { PopperArrow } from "../PopperArrow/PopperArrow";
 import { usePlatform } from "../../hooks/usePlatform";
 import { getClassName } from "../../helpers/getClassName";
 import { useExternRef } from "../../hooks/useExternRef";
@@ -39,8 +40,8 @@ export var Popper = function Popper(_ref) {
       _ref$forcePortal = _ref.forcePortal,
       forcePortal = _ref$forcePortal === void 0 ? true : _ref$forcePortal,
       compStyles = _ref.style,
-      _ref$customModifiers = _ref.customModifiers,
-      customModifiers = _ref$customModifiers === void 0 ? [] : _ref$customModifiers,
+      customModifiers = _ref.customModifiers,
+      renderContent = _ref.renderContent,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
   var _React$useState = React.useState(null),
@@ -97,7 +98,10 @@ export var Popper = function Popper(_ref) {
       modifiers.push(_sameWidth);
     }
 
-    modifiers.push.apply(modifiers, _toConsumableArray(customModifiers));
+    if (customModifiers) {
+      modifiers.push.apply(modifiers, _toConsumableArray(customModifiers));
+    }
+
     return modifiers;
   }, [arrow, sameWidth, smallTargetOffsetSkidding, offsetSkidding, offsetDistance, customModifiers]);
 
@@ -142,24 +146,13 @@ export var Popper = function Popper(_ref) {
     style: _objectSpread(_objectSpread(_objectSpread({}, compStyles), styles.popper), {}, {
       minWidth: sameWidth ? (_targetRef$current3 = targetRef.current) === null || _targetRef$current3 === void 0 ? void 0 : _targetRef$current3.scrollWidth : undefined
     })
-  }), arrow && createScopedElement("div", _extends({}, attributes.arrow, {
-    vkuiClass: "Popper__arrow",
-    "data-popper-arrow": true,
-    style: styles.arrow
-  }), createScopedElement("svg", {
-    vkuiClass: "Popper__arrow-in",
-    className: arrowClassName,
-    width: "20",
-    height: "8",
-    viewBox: "0 0 20 8",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, createScopedElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M10 0C13 0 15.9999 8 20 8H0C3.9749 8 7 0 10 0Z",
-    fill: "currentColor"
-  }))), createScopedElement("div", {
+  }), arrow && createScopedElement(PopperArrow, {
+    attributes: attributes.arrow,
+    style: styles.arrow,
+    arrowClassName: arrowClassName
+  }), renderContent ? renderContent({
+    className: "Popper__content"
+  }) : createScopedElement("div", {
     vkuiClass: "Popper__content"
   }, children));
   return createScopedElement(AppRootPortal, {