@vkontakte/vkui 5.5.3 → 5.5.4

package/dist/components.js.tmp

@@ -53070,12 +53070,12 @@ var HeaderContent = function(_param) {
         mode: mode,
         size: size
     }, /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement("span", {
-        className: (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiHeader__content-in", multiline && "vkuiHeader__content-in--multiline")
+        className: (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiHeader__content-in", multiline && "vkuiHeader__content--multiline")
     }, children), (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.hasReactNode)(indicator) && /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Typography_Footnote_Footnote__WEBPACK_IMPORTED_MODULE_6__.Footnote, {
         className: "vkuiHeader__indicator",
         weight: "2"
     }, indicator)), (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.hasReactNode)(subtitle) && /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Typography_Subhead_Subhead__WEBPACK_IMPORTED_MODULE_8__.Subhead, {
-        className: "vkuiHeader__subtitle",
+        className: (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiHeader__subtitle", multiline && "vkuiHeader__content--multiline"),
         Component: "span"
     }, subtitle)), (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.hasReactNode)(aside) && /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Typography_Paragraph_Paragraph__WEBPACK_IMPORTED_MODULE_9__.Paragraph, {
         className: "vkuiHeader__aside",
@@ -53205,10 +53205,9 @@ function _object_without_properties_loose(source, excluded) {
 
 
 
-var _obj;
-var sizeXClassNames = (_obj = {
-    none: "vkuiGroup--sizeX-none"
-}, _define_property(_obj, _lib_adaptivity__WEBPACK_IMPORTED_MODULE_3__.SizeType.COMPACT, "vkuiGroup--sizeX-compact"), _define_property(_obj, _lib_adaptivity__WEBPACK_IMPORTED_MODULE_3__.SizeType.REGULAR, "vkuiGroup--sizeX-regular"), _obj);
+var sizeXClassNames = _define_property({
+    none: (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiGroup--sizeX-none", "vkuiInternalGroup--sizeX-none")
+}, _lib_adaptivity__WEBPACK_IMPORTED_MODULE_3__.SizeType.COMPACT, "vkuiGroup--sizeX-compact");
 var warn = (0,_lib_warnOnce__WEBPACK_IMPORTED_MODULE_4__.warnOnce)("Group");
 /**
  * @see https://vkcom.github.io/VKUI/#/Group
@@ -53232,6 +53231,9 @@ var warn = (0,_lib_warnOnce__WEBPACK_IMPORTED_MODULE_4__.warnOnce)("Group");
         // Подробнее в "none" можно прочитать в ADAPTIVITY_GUIDE.md
         mode = isInsideModal ? "plain" : "none";
     }
+    if (mode === "none" && sizeX !== "none") {
+        mode = sizeX === _lib_adaptivity__WEBPACK_IMPORTED_MODULE_3__.SizeType.REGULAR ? "card" : "plain";
+    }
     var isTabPanel = restProps.role === "tabpanel";
     if (process.env.NODE_ENV === "development" && isTabPanel && (!restProps["aria-controls"] || !restProps["id"])) {
         warn('При использовании роли "tabpanel" необходимо задать значение свойств "aria-controls" и "id"');
@@ -53241,7 +53243,7 @@ var warn = (0,_lib_warnOnce__WEBPACK_IMPORTED_MODULE_4__.warnOnce)("Group");
     return /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement("section", _object_spread_props(_object_spread({}, restProps), {
         tabIndex: tabIndex,
         ref: getRootRef,
-        className: (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiInternalGroup", "vkuiGroup", platform === _lib_platform__WEBPACK_IMPORTED_MODULE_8__.Platform.IOS && "vkuiGroup--ios", sizeXClassNames[sizeX], mode && ({
+        className: (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiInternalGroup", "vkuiGroup", platform === _lib_platform__WEBPACK_IMPORTED_MODULE_8__.Platform.IOS && "vkuiGroup--ios", sizeX !== _lib_adaptivity__WEBPACK_IMPORTED_MODULE_3__.SizeType.REGULAR && sizeXClassNames[sizeX], mode && ({
             none: (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiGroup--mode-none", "vkuiInternalGroup--mode-none"),
             plain: (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiGroup--mode-plain", "vkuiInternalGroup--mode-plain"),
             card: (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiGroup--mode-card", "vkuiInternalGroup--mode-card")

package/dist/cssm/components/Group/Group.js

@@ -11,9 +11,8 @@ import { Spacing } from '../Spacing/Spacing';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import styles from './Group.module.css';
 const sizeXClassNames = {
-    none: styles['Group--sizeX-none'],
-    [SizeType.COMPACT]: styles['Group--sizeX-compact'],
-    [SizeType.REGULAR]: styles['Group--sizeX-regular']
+    none: classNames(styles['Group--sizeX-none'], 'vkuiInternalGroup--sizeX-none'),
+    [SizeType.COMPACT]: styles['Group--sizeX-compact']
 };
 const warn = warnOnce('Group');
 /**
@@ -27,6 +26,9 @@ const warn = warnOnce('Group');
         // Подробнее в "none" можно прочитать в ADAPTIVITY_GUIDE.md
         mode = isInsideModal ? 'plain' : 'none';
     }
+    if (mode === 'none' && sizeX !== 'none') {
+        mode = sizeX === SizeType.REGULAR ? 'card' : 'plain';
+    }
     const isTabPanel = restProps.role === 'tabpanel';
     if (process.env.NODE_ENV === 'development' && isTabPanel && (!restProps['aria-controls'] || !restProps['id'])) {
         warn('При использовании роли "tabpanel" необходимо задать значение свойств "aria-controls" и "id"');
@@ -37,7 +39,7 @@ const warn = warnOnce('Group');
         ...restProps,
         tabIndex: tabIndex,
         ref: getRootRef,
-        className: classNames('vkuiInternalGroup', styles['Group'], platform === Platform.IOS && styles['Group--ios'], sizeXClassNames[sizeX], mode && ({
+        className: classNames('vkuiInternalGroup', styles['Group'], platform === Platform.IOS && styles['Group--ios'], sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX], mode && ({
             none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),
             plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),
             card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card')

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasChildren, HasRootRef } from '../../types';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Group.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Group--sizeX-none'],\n  [SizeType.COMPACT]: styles['Group--sizeX-compact'],\n  [SizeType.REGULAR]: styles['Group--sizeX-regular'],\n};\n\nexport interface GroupProps\n  extends HasRootRef<HTMLElement>,\n    React.HTMLAttributes<HTMLElement>,\n    HasChildren {\n  header?: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n    show - разделитель всегда показывается,\n    hide - разделитель всегда спрятан,\n    auto - разделитель рисуется автоматически между соседними группами.\n   */\n  separator?: 'show' | 'hide' | 'auto';\n  /**\n   * Режим отображения. Если установлен 'card', выглядит как карточка c\n   * обводкой и внешними отступами. Если 'plain' — без отступов и обводки.\n   * По умолчанию режим отображения зависит от `sizeX`. В модальных окнах\n   * по умолчанию 'plain'.\n   */\n  mode?: 'plain' | 'card';\n  /**\n   * Отвечает за отступы вокруг контента в режиме 'card'.\n   */\n  padding?: 's' | 'm';\n}\n\nconst warn = warnOnce('Group');\n/**\n * @see https://vkcom.github.io/VKUI/#/Group\n */\nexport const Group = ({\n  header,\n  description,\n  children,\n  separator = 'auto',\n  getRootRef,\n  mode: modeProps,\n  padding = 'm',\n  className,\n  tabIndex: tabIndexProp,\n  ...restProps\n}: GroupProps) => {\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n\n  let mode: GroupProps['mode'] | 'none' = modeProps;\n\n  if (!modeProps) {\n    // Подробнее в \"none\" можно прочитать в ADAPTIVITY_GUIDE.md\n    mode = isInsideModal ? 'plain' : 'none';\n  }\n\n  const isTabPanel = restProps.role === 'tabpanel';\n\n  if (\n    process.env.NODE_ENV === 'development' &&\n    isTabPanel &&\n    (!restProps['aria-controls'] || !restProps['id'])\n  ) {\n    warn(\n      'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"',\n    );\n  }\n\n  const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n  const separatorClassName = classNames(\n    styles['Group__separator'],\n    separator === 'show' && styles['Group__separator--force'],\n  );\n\n  return (\n    <>\n      <section\n        {...restProps}\n        tabIndex={tabIndex}\n        ref={getRootRef}\n        className={classNames(\n          'vkuiInternalGroup',\n          styles['Group'],\n          platform === Platform.IOS && styles['Group--ios'],\n          sizeXClassNames[sizeX],\n          mode &&\n            {\n              none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),\n              plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),\n              card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card'),\n            }[mode],\n          {\n            s: styles['Group--padding-s'],\n            m: styles['Group--padding-m'],\n          }[padding],\n          className,\n        )}\n      >\n        {header}\n        {children}\n        {hasReactNode(description) && (\n          <Footnote className={styles['Group__description']}>{description}</Footnote>\n        )}\n      </section>\n\n      {separator !== 'hide' && (\n        <React.Fragment>\n          <Spacing\n            className={classNames(separatorClassName, styles['Group__separator--spacing'])}\n            size={16}\n          />\n          <Separator\n            className={classNames(separatorClassName, styles['Group__separator--separator'])}\n          />\n        </React.Fragment>\n      )}\n    </>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","warnOnce","ModalRootContext","Separator","Spacing","Footnote","styles","sizeXClassNames","none","COMPACT","REGULAR","warn","Group","header","description","children","separator","getRootRef","mode","modeProps","padding","className","tabIndex","tabIndexProp","restProps","isInsideModal","useContext","platform","sizeX","isTabPanel","role","process","env","NODE_ENV","undefined","separatorClassName","section","ref","IOS","plain","card","s","m","Fragment","size"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,SAASC,SAAS,QAAQ,yBAAyB;AACnD,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAACP,SAASU,QAAQ,EAAEH,MAAM,CAAC,uBAAuB;IAClD,CAACP,SAASW,QAAQ,EAAEJ,MAAM,CAAC,uBAAuB;AACpD;AA2BA,MAAMK,OAAOV,SAAS;AACtB;;CAEC,GACD,OAAO,MAAMW,QAAQ,CAAC,EACpBC,OAAM,EACNC,YAAW,EACXC,SAAQ,EACRC,WAAY,OAAM,EAClBC,WAAU,EACVC,MAAMC,UAAS,EACfC,SAAU,IAAG,EACbC,UAAS,EACTC,UAAUC,aAAY,EACtB,GAAGC,WACQ;IACX,MAAM,EAAEC,cAAa,EAAE,GAAG/B,MAAMgC,WAAWxB;IAC3C,MAAMyB,WAAW7B;IACjB,MAAM,EAAE8B,OAAQ,OAAM,EAAE,GAAG/B;IAE3B,IAAIqB,OAAoCC;IAExC,IAAI,CAACA,WAAW;QACd,2DAA2D;QAC3DD,OAAOO,gBAAgB,UAAU;IACnC;IAEA,MAAMI,aAAaL,UAAUM,SAAS;IAEtC,IACEC,QAAQC,IAAIC,aAAa,iBACzBJ,cACC,CAAA,CAACL,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAb,KACE;IAEJ;IAEA,MAAMW,WAAWO,cAAcN,iBAAiBW,YAAY,IAAIX;IAEhE,MAAMY,qBAAqBxC,WACzBW,MAAM,CAAC,mBAAmB,EAC1BU,cAAc,UAAUV,MAAM,CAAC,0BAA0B;IAG3D,qBACE,wDACE,oBAAC8B;QACE,GAAGZ,SAAS;QACbF,UAAUA;QACVe,KAAKpB;QACLI,WAAW1B,WACT,qBACAW,MAAM,CAAC,QAAQ,EACfqB,aAAa3B,SAASsC,OAAOhC,MAAM,CAAC,aAAa,EACjDC,eAAe,CAACqB,MAAM,EACtBV,QACE,CAAA;YACEV,MAAMb,WAAWW,MAAM,CAAC,mBAAmB,EAAE;YAC7CiC,OAAO5C,WAAWW,MAAM,CAAC,oBAAoB,EAAE;YAC/CkC,MAAM7C,WAAWW,MAAM,CAAC,mBAAmB,EAAE;QAC/C,CAAA,CAAC,CAACY,KAAK,EACT;YACEuB,GAAGnC,MAAM,CAAC,mBAAmB;YAC7BoC,GAAGpC,MAAM,CAAC,mBAAmB;QAC/B,CAAC,CAACc,QAAQ,EACVC;OAGDR,QACAE,UACAnB,aAAakB,8BACZ,oBAACT;QAASgB,WAAWf,MAAM,CAAC,qBAAqB;OAAGQ,eAIvDE,cAAc,wBACb,oBAACtB,MAAMiD,8BACL,oBAACvC;QACCiB,WAAW1B,WAAWwC,oBAAoB7B,MAAM,CAAC,4BAA4B;QAC7EsC,MAAM;sBAER,oBAACzC;QACCkB,WAAW1B,WAAWwC,oBAAoB7B,MAAM,CAAC,8BAA8B;;AAM3F,EAAE"}
+{"version":3,"sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasChildren, HasRootRef } from '../../types';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Group.module.css';\n\nconst sizeXClassNames = {\n  none: classNames(styles['Group--sizeX-none'], 'vkuiInternalGroup--sizeX-none'),\n  [SizeType.COMPACT]: styles['Group--sizeX-compact'],\n};\n\nexport interface GroupProps\n  extends HasRootRef<HTMLElement>,\n    React.HTMLAttributes<HTMLElement>,\n    HasChildren {\n  header?: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n    show - разделитель всегда показывается,\n    hide - разделитель всегда спрятан,\n    auto - разделитель рисуется автоматически между соседними группами.\n   */\n  separator?: 'show' | 'hide' | 'auto';\n  /**\n   * Режим отображения. Если установлен 'card', выглядит как карточка c\n   * обводкой и внешними отступами. Если 'plain' — без отступов и обводки.\n   * По умолчанию режим отображения зависит от `sizeX`. В модальных окнах\n   * по умолчанию 'plain'.\n   */\n  mode?: 'plain' | 'card';\n  /**\n   * Отвечает за отступы вокруг контента в режиме 'card'.\n   */\n  padding?: 's' | 'm';\n}\n\nconst warn = warnOnce('Group');\n/**\n * @see https://vkcom.github.io/VKUI/#/Group\n */\nexport const Group = ({\n  header,\n  description,\n  children,\n  separator = 'auto',\n  getRootRef,\n  mode: modeProps,\n  padding = 'm',\n  className,\n  tabIndex: tabIndexProp,\n  ...restProps\n}: GroupProps) => {\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n\n  let mode: GroupProps['mode'] | 'none' = modeProps;\n\n  if (!modeProps) {\n    // Подробнее в \"none\" можно прочитать в ADAPTIVITY_GUIDE.md\n    mode = isInsideModal ? 'plain' : 'none';\n  }\n\n  if (mode === 'none' && sizeX !== 'none') {\n    mode = sizeX === SizeType.REGULAR ? 'card' : 'plain';\n  }\n\n  const isTabPanel = restProps.role === 'tabpanel';\n\n  if (\n    process.env.NODE_ENV === 'development' &&\n    isTabPanel &&\n    (!restProps['aria-controls'] || !restProps['id'])\n  ) {\n    warn(\n      'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"',\n    );\n  }\n\n  const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n  const separatorClassName = classNames(\n    styles['Group__separator'],\n    separator === 'show' && styles['Group__separator--force'],\n  );\n\n  return (\n    <>\n      <section\n        {...restProps}\n        tabIndex={tabIndex}\n        ref={getRootRef}\n        className={classNames(\n          'vkuiInternalGroup',\n          styles['Group'],\n          platform === Platform.IOS && styles['Group--ios'],\n          sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n          mode &&\n            {\n              none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),\n              plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),\n              card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card'),\n            }[mode],\n          {\n            s: styles['Group--padding-s'],\n            m: styles['Group--padding-m'],\n          }[padding],\n          className,\n        )}\n      >\n        {header}\n        {children}\n        {hasReactNode(description) && (\n          <Footnote className={styles['Group__description']}>{description}</Footnote>\n        )}\n      </section>\n\n      {separator !== 'hide' && (\n        <React.Fragment>\n          <Spacing\n            className={classNames(separatorClassName, styles['Group__separator--spacing'])}\n            size={16}\n          />\n          <Separator\n            className={classNames(separatorClassName, styles['Group__separator--separator'])}\n          />\n        </React.Fragment>\n      )}\n    </>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","warnOnce","ModalRootContext","Separator","Spacing","Footnote","styles","sizeXClassNames","none","COMPACT","warn","Group","header","description","children","separator","getRootRef","mode","modeProps","padding","className","tabIndex","tabIndexProp","restProps","isInsideModal","useContext","platform","sizeX","REGULAR","isTabPanel","role","process","env","NODE_ENV","undefined","separatorClassName","section","ref","IOS","plain","card","s","m","Fragment","size"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,SAASC,SAAS,QAAQ,yBAAyB;AACnD,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMb,WAAWW,MAAM,CAAC,oBAAoB,EAAE;IAC9C,CAACP,SAASU,QAAQ,EAAEH,MAAM,CAAC,uBAAuB;AACpD;AA2BA,MAAMI,OAAOT,SAAS;AACtB;;CAEC,GACD,OAAO,MAAMU,QAAQ,CAAC,EACpBC,OAAM,EACNC,YAAW,EACXC,SAAQ,EACRC,WAAY,OAAM,EAClBC,WAAU,EACVC,MAAMC,UAAS,EACfC,SAAU,IAAG,EACbC,UAAS,EACTC,UAAUC,aAAY,EACtB,GAAGC,WACQ;IACX,MAAM,EAAEC,cAAa,EAAE,GAAG9B,MAAM+B,WAAWvB;IAC3C,MAAMwB,WAAW5B;IACjB,MAAM,EAAE6B,OAAQ,OAAM,EAAE,GAAG9B;IAE3B,IAAIoB,OAAoCC;IAExC,IAAI,CAACA,WAAW;QACd,2DAA2D;QAC3DD,OAAOO,gBAAgB,UAAU;IACnC;IAEA,IAAIP,SAAS,UAAUU,UAAU,QAAQ;QACvCV,OAAOU,UAAU5B,SAAS6B,UAAU,SAAS;IAC/C;IAEA,MAAMC,aAAaN,UAAUO,SAAS;IAEtC,IACEC,QAAQC,IAAIC,aAAa,iBACzBJ,cACC,CAAA,CAACN,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAb,KACE;IAEJ;IAEA,MAAMW,WAAWQ,cAAcP,iBAAiBY,YAAY,IAAIZ;IAEhE,MAAMa,qBAAqBxC,WACzBW,MAAM,CAAC,mBAAmB,EAC1BS,cAAc,UAAUT,MAAM,CAAC,0BAA0B;IAG3D,qBACE,wDACE,oBAAC8B;QACE,GAAGb,SAAS;QACbF,UAAUA;QACVgB,KAAKrB;QACLI,WAAWzB,WACT,qBACAW,MAAM,CAAC,QAAQ,EACfoB,aAAa1B,SAASsC,OAAOhC,MAAM,CAAC,aAAa,EACjDqB,UAAU5B,SAAS6B,WAAWrB,eAAe,CAACoB,MAAM,EACpDV,QACE,CAAA;YACET,MAAMb,WAAWW,MAAM,CAAC,mBAAmB,EAAE;YAC7CiC,OAAO5C,WAAWW,MAAM,CAAC,oBAAoB,EAAE;YAC/CkC,MAAM7C,WAAWW,MAAM,CAAC,mBAAmB,EAAE;QAC/C,CAAA,CAAC,CAACW,KAAK,EACT;YACEwB,GAAGnC,MAAM,CAAC,mBAAmB;YAC7BoC,GAAGpC,MAAM,CAAC,mBAAmB;QAC/B,CAAC,CAACa,QAAQ,EACVC;OAGDR,QACAE,UACAlB,aAAaiB,8BACZ,oBAACR;QAASe,WAAWd,MAAM,CAAC,qBAAqB;OAAGO,eAIvDE,cAAc,wBACb,oBAACrB,MAAMiD,8BACL,oBAACvC;QACCgB,WAAWzB,WAAWwC,oBAAoB7B,MAAM,CAAC,4BAA4B;QAC7EsC,MAAM;sBAER,oBAACzC;QACCiB,WAAWzB,WAAWwC,oBAAoB7B,MAAM,CAAC,8BAA8B;;AAM3F,EAAE"}

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

@@ -9,18 +9,17 @@
   display: none;
 }
 
-.Group--sizeX-compact + .Group__separator--spacing + .Group__separator--separator,
-.Group--mode-plain + .Group__separator--spacing + .Group__separator--separator {
+.Group--mode-plain + * + .Group__separator--separator {
   display: block;
 }
 
 @media (max-width: 767.9px) {
-  .Group--sizeX-none + .Group__separator--spacing + .Group__separator--separator {
+  .Group--sizeX-none.Group--mode-none + * + .Group__separator--separator {
     display: block;
   }
 }
 
-.Group--sizeX-regular.Group--mode-none + .Group__separator--spacing {
+.Group--mode-card + .Group__separator--spacing {
   display: block;
 }
 
@@ -30,6 +29,21 @@
   }
 }
 
+.Group:last-of-type ~ .Group__separator {
+  display: none;
+}
+
+.Group:last-of-type ~ .Group__separator--force,
+.Group--mode-card:last-of-type + .Group__separator--spacing {
+  display: block;
+}
+
+@media (min-width: 768px) {
+  .Group--sizeX-none.Group--mode-none:last-of-type + .Group__separator--spacing {
+    display: block;
+  }
+}
+
 .Group--mode-card.Group--padding-s {
   padding: 4px;
 }
@@ -38,21 +52,28 @@
   padding: 8px;
 }
 
-.Group--sizeX-compact {
-  padding-left: 0;
-  padding-right: 0;
-}
-
 @media (min-width: 768px) {
-  .Group--sizeX-none.Group--padding-s {
+  .Group--sizeX-none.Group--mode-none.Group--padding-s {
     padding: 4px;
   }
 
-  .Group--sizeX-none.Group--padding-m {
+  .Group--sizeX-none.Group--mode-none.Group--padding-m {
     padding: 8px;
   }
 }
 
+.Group--sizeX-compact {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+@media (max-width: 767.9px) {
+  .Group--sizeX-none {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
 .Group--mode-card {
   background: var(--vkui--color_background_content);
   border-radius: var(--vkui--size_border_radius_paper--regular);
@@ -60,7 +81,7 @@
 }
 
 @media (min-width: 768px) {
-  .Group--mode-none.Group--sizeX-none {
+  .Group--sizeX-none.Group--mode-none {
     background: var(--vkui--color_background_content);
     border-radius: var(--vkui--size_border_radius_paper--regular);
     position: relative;
@@ -80,7 +101,7 @@
 }
 
 @media (min-width: 768px) {
-  .Group--mode-none::after {
+  .Group--sizeX-none.Group--mode-none::after {
     content: '';
     left: 0;
     top: 0;
@@ -107,23 +128,6 @@
   }
 }
 
-.Group:last-of-type ~ .Group__separator {
-  display: none;
-}
-
-.Group:last-of-type ~ .Group__separator--force,
-.Group--sizeX-regular.Group--mode-none:last-of-type + .Group__separator--spacing,
-.Group--sizeX-regular.Group--mode-card:last-of-type + .Group__separator--spacing {
-  display: block;
-}
-
-@media (min-width: 768px) {
-  .Group--sizeX-none.Group--mode-card:last-of-type + .Group__separator--spacing,
-  .Group--sizeX-none.Group--mode-none:last-of-type + .Group__separator--spacing {
-    display: block;
-  }
-}
-
 .Group__description {
   display: block;
   padding: 4px 16px 16px;

package/dist/cssm/components/Header/Header.js

@@ -81,12 +81,12 @@ const HeaderContent = ({ mode , size , ...restProps })=>{
         mode: mode,
         size: size
     }, /*#__PURE__*/ React.createElement("span", {
-        className: classNames(styles['Header__content-in'], multiline && styles['Header__content-in--multiline'])
+        className: classNames(styles['Header__content-in'], multiline && styles['Header__content--multiline'])
     }, children), hasReactNode(indicator) && /*#__PURE__*/ React.createElement(Footnote, {
         className: styles['Header__indicator'],
         weight: "2"
     }, indicator)), hasReactNode(subtitle) && /*#__PURE__*/ React.createElement(Subhead, {
-        className: styles['Header__subtitle'],
+        className: classNames(styles['Header__subtitle'], multiline && styles['Header__content--multiline']),
         Component: "span"
     }, subtitle)), hasReactNode(aside) && /*#__PURE__*/ React.createElement(Paragraph, {
         className: styles['Header__aside'],

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Header.module.css';\n\nexport interface HeaderProps extends React.HTMLAttributes<HTMLElement>, HasRootRef<HTMLElement> {\n  mode?: 'primary' | 'secondary' | 'tertiary';\n  size?: 'regular' | 'large';\n  subtitle?: React.ReactNode;\n  /**\n   * Допускаются иконки, текст, Link\n   */\n  aside?: React.ReactNode;\n  /**\n   * Допускаются текст, Indicator\n   */\n  indicator?: React.ReactNode;\n  multiline?: boolean;\n}\n\ntype HeaderContentProps = Pick<HeaderProps, 'children' | 'mode' | 'size' | 'className'> &\n  HasComponent;\n\nconst HeaderContent = ({ mode, size, ...restProps }: HeaderContentProps) => {\n  const isLarge = size === 'large';\n\n  const platform = usePlatform();\n  if (platform === Platform.IOS) {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"2\" {...restProps} />\n        ) : (\n          <Title weight=\"1\" level=\"3\" {...restProps} />\n        );\n      case 'secondary':\n        return <Footnote weight=\"1\" caps {...restProps} />;\n      case 'tertiary':\n        return <Title weight=\"1\" level=\"3\" {...restProps} />;\n    }\n  }\n\n  switch (mode) {\n    case 'primary':\n      return isLarge ? (\n        <Title level=\"2\" weight=\"2\" {...restProps} />\n      ) : (\n        <Headline weight=\"2\" {...restProps} />\n      );\n    case 'secondary':\n      return <Footnote weight=\"1\" caps {...restProps} />;\n    case 'tertiary':\n      return <Headline weight=\"2\" {...restProps} />;\n  }\n\n  return null;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n  mode = 'primary',\n  size = 'regular',\n  children,\n  subtitle,\n  indicator,\n  aside,\n  getRootRef,\n  multiline,\n  className,\n  ...restProps\n}: HeaderProps) => {\n  const platform = usePlatform();\n\n  return (\n    <header\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Header'],\n        platform === Platform.IOS && styles['Header--ios'],\n        {\n          primary: styles['Header--mode-primary'],\n          secondary: styles['Header--mode-secondary'],\n          tertiary: styles['Header--mode-tertiary'],\n        }[mode],\n        isPrimitiveReactNode(indicator) && styles['Header--pi'],\n        hasReactNode(subtitle) && styles['Header--with-subtitle'],\n        className,\n      )}\n    >\n      <div className={styles['Header__main']}>\n        <HeaderContent\n          className={styles['Header__content']}\n          Component=\"span\"\n          mode={mode}\n          size={size}\n        >\n          <span\n            className={classNames(\n              styles['Header__content-in'],\n              multiline && styles['Header__content-in--multiline'],\n            )}\n          >\n            {children}\n          </span>\n          {hasReactNode(indicator) && (\n            <Footnote className={styles['Header__indicator']} weight=\"2\">\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n\n        {hasReactNode(subtitle) && (\n          <Subhead className={styles['Header__subtitle']} Component=\"span\">\n            {subtitle}\n          </Subhead>\n        )}\n      </div>\n\n      {hasReactNode(aside) && (\n        <Paragraph className={styles['Header__aside']} Component=\"span\">\n          {aside}\n        </Paragraph>\n      )}\n    </header>\n  );\n};\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","usePlatform","Platform","Footnote","Headline","Paragraph","Subhead","Title","styles","HeaderContent","mode","size","restProps","isLarge","platform","IOS","level","weight","caps","Header","children","subtitle","indicator","aside","getRootRef","multiline","className","header","ref","primary","secondary","tertiary","div","Component","span"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,oBAAoB,QAAQ,kBAAkB;AACjF,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,SAAS,QAAQ,oCAAoC;AAC9D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,KAAK,QAAQ,4BAA4B;AAClD,OAAOC,YAAY,sBAAsB;AAoBzC,MAAMC,gBAAgB,CAAC,EAAEC,KAAI,EAAEC,KAAI,EAAE,GAAGC,WAA+B;IACrE,MAAMC,UAAUF,SAAS;IAEzB,MAAMG,WAAWb;IACjB,IAAIa,aAAaZ,SAASa,KAAK;QAC7B,OAAQL;YACN,KAAK;gBACH,OAAOG,wBACL,oBAACN;oBAAMS,OAAM;oBAAIC,QAAO;oBAAK,GAAGL,SAAS;mCAEzC,oBAACL;oBAAMU,QAAO;oBAAID,OAAM;oBAAK,GAAGJ,SAAS;;YAE7C,KAAK;gBACH,qBAAO,oBAACT;oBAASc,QAAO;oBAAIC,MAAAA;oBAAM,GAAGN,SAAS;;YAChD,KAAK;gBACH,qBAAO,oBAACL;oBAAMU,QAAO;oBAAID,OAAM;oBAAK,GAAGJ,SAAS;;QACpD;IACF;IAEA,OAAQF;QACN,KAAK;YACH,OAAOG,wBACL,oBAACN;gBAAMS,OAAM;gBAAIC,QAAO;gBAAK,GAAGL,SAAS;+BAEzC,oBAACR;gBAASa,QAAO;gBAAK,GAAGL,SAAS;;QAEtC,KAAK;YACH,qBAAO,oBAACT;gBAASc,QAAO;gBAAIC,MAAAA;gBAAM,GAAGN,SAAS;;QAChD,KAAK;YACH,qBAAO,oBAACR;gBAASa,QAAO;gBAAK,GAAGL,SAAS;;IAC7C;IAEA,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,MAAMO,SAAS,CAAC,EACrBT,MAAO,UAAS,EAChBC,MAAO,UAAS,EAChBS,SAAQ,EACRC,SAAQ,EACRC,UAAS,EACTC,MAAK,EACLC,WAAU,EACVC,UAAS,EACTC,UAAS,EACT,GAAGd,WACS;IACZ,MAAME,WAAWb;IAEjB,qBACE,oBAAC0B;QACE,GAAGf,SAAS;QACbgB,KAAKJ;QACLE,WAAW5B,WACTU,MAAM,CAAC,SAAS,EAChBM,aAAaZ,SAASa,OAAOP,MAAM,CAAC,cAAc,EAClD;YACEqB,SAASrB,MAAM,CAAC,uBAAuB;YACvCsB,WAAWtB,MAAM,CAAC,yBAAyB;YAC3CuB,UAAUvB,MAAM,CAAC,wBAAwB;QAC3C,CAAC,CAACE,KAAK,EACPV,qBAAqBsB,cAAcd,MAAM,CAAC,aAAa,EACvDT,aAAasB,aAAab,MAAM,CAAC,wBAAwB,EACzDkB;qBAGF,oBAACM;QAAIN,WAAWlB,MAAM,CAAC,eAAe;qBACpC,oBAACC;QACCiB,WAAWlB,MAAM,CAAC,kBAAkB;QACpCyB,WAAU;QACVvB,MAAMA;QACNC,MAAMA;qBAEN,oBAACuB;QACCR,WAAW5B,WACTU,MAAM,CAAC,qBAAqB,EAC5BiB,aAAajB,MAAM,CAAC,gCAAgC;OAGrDY,WAEFrB,aAAauB,4BACZ,oBAACnB;QAASuB,WAAWlB,MAAM,CAAC,oBAAoB;QAAES,QAAO;OACtDK,aAKNvB,aAAasB,2BACZ,oBAACf;QAAQoB,WAAWlB,MAAM,CAAC,mBAAmB;QAAEyB,WAAU;OACvDZ,YAKNtB,aAAawB,wBACZ,oBAAClB;QAAUqB,WAAWlB,MAAM,CAAC,gBAAgB;QAAEyB,WAAU;OACtDV;AAKX,EAAE"}
+{"version":3,"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Header.module.css';\n\nexport interface HeaderProps extends React.HTMLAttributes<HTMLElement>, HasRootRef<HTMLElement> {\n  mode?: 'primary' | 'secondary' | 'tertiary';\n  size?: 'regular' | 'large';\n  subtitle?: React.ReactNode;\n  /**\n   * Допускаются иконки, текст, Link\n   */\n  aside?: React.ReactNode;\n  /**\n   * Допускаются текст, Indicator\n   */\n  indicator?: React.ReactNode;\n  multiline?: boolean;\n}\n\ntype HeaderContentProps = Pick<HeaderProps, 'children' | 'mode' | 'size' | 'className'> &\n  HasComponent;\n\nconst HeaderContent = ({ mode, size, ...restProps }: HeaderContentProps) => {\n  const isLarge = size === 'large';\n\n  const platform = usePlatform();\n  if (platform === Platform.IOS) {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"2\" {...restProps} />\n        ) : (\n          <Title weight=\"1\" level=\"3\" {...restProps} />\n        );\n      case 'secondary':\n        return <Footnote weight=\"1\" caps {...restProps} />;\n      case 'tertiary':\n        return <Title weight=\"1\" level=\"3\" {...restProps} />;\n    }\n  }\n\n  switch (mode) {\n    case 'primary':\n      return isLarge ? (\n        <Title level=\"2\" weight=\"2\" {...restProps} />\n      ) : (\n        <Headline weight=\"2\" {...restProps} />\n      );\n    case 'secondary':\n      return <Footnote weight=\"1\" caps {...restProps} />;\n    case 'tertiary':\n      return <Headline weight=\"2\" {...restProps} />;\n  }\n\n  return null;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n  mode = 'primary',\n  size = 'regular',\n  children,\n  subtitle,\n  indicator,\n  aside,\n  getRootRef,\n  multiline,\n  className,\n  ...restProps\n}: HeaderProps) => {\n  const platform = usePlatform();\n\n  return (\n    <header\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Header'],\n        platform === Platform.IOS && styles['Header--ios'],\n        {\n          primary: styles['Header--mode-primary'],\n          secondary: styles['Header--mode-secondary'],\n          tertiary: styles['Header--mode-tertiary'],\n        }[mode],\n        isPrimitiveReactNode(indicator) && styles['Header--pi'],\n        hasReactNode(subtitle) && styles['Header--with-subtitle'],\n        className,\n      )}\n    >\n      <div className={styles['Header__main']}>\n        <HeaderContent\n          className={styles['Header__content']}\n          Component=\"span\"\n          mode={mode}\n          size={size}\n        >\n          <span\n            className={classNames(\n              styles['Header__content-in'],\n              multiline && styles['Header__content--multiline'],\n            )}\n          >\n            {children}\n          </span>\n          {hasReactNode(indicator) && (\n            <Footnote className={styles['Header__indicator']} weight=\"2\">\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n\n        {hasReactNode(subtitle) && (\n          <Subhead\n            className={classNames(\n              styles['Header__subtitle'],\n              multiline && styles['Header__content--multiline'],\n            )}\n            Component=\"span\"\n          >\n            {subtitle}\n          </Subhead>\n        )}\n      </div>\n\n      {hasReactNode(aside) && (\n        <Paragraph className={styles['Header__aside']} Component=\"span\">\n          {aside}\n        </Paragraph>\n      )}\n    </header>\n  );\n};\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","usePlatform","Platform","Footnote","Headline","Paragraph","Subhead","Title","styles","HeaderContent","mode","size","restProps","isLarge","platform","IOS","level","weight","caps","Header","children","subtitle","indicator","aside","getRootRef","multiline","className","header","ref","primary","secondary","tertiary","div","Component","span"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,oBAAoB,QAAQ,kBAAkB;AACjF,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,SAAS,QAAQ,oCAAoC;AAC9D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,KAAK,QAAQ,4BAA4B;AAClD,OAAOC,YAAY,sBAAsB;AAoBzC,MAAMC,gBAAgB,CAAC,EAAEC,KAAI,EAAEC,KAAI,EAAE,GAAGC,WAA+B;IACrE,MAAMC,UAAUF,SAAS;IAEzB,MAAMG,WAAWb;IACjB,IAAIa,aAAaZ,SAASa,KAAK;QAC7B,OAAQL;YACN,KAAK;gBACH,OAAOG,wBACL,oBAACN;oBAAMS,OAAM;oBAAIC,QAAO;oBAAK,GAAGL,SAAS;mCAEzC,oBAACL;oBAAMU,QAAO;oBAAID,OAAM;oBAAK,GAAGJ,SAAS;;YAE7C,KAAK;gBACH,qBAAO,oBAACT;oBAASc,QAAO;oBAAIC,MAAAA;oBAAM,GAAGN,SAAS;;YAChD,KAAK;gBACH,qBAAO,oBAACL;oBAAMU,QAAO;oBAAID,OAAM;oBAAK,GAAGJ,SAAS;;QACpD;IACF;IAEA,OAAQF;QACN,KAAK;YACH,OAAOG,wBACL,oBAACN;gBAAMS,OAAM;gBAAIC,QAAO;gBAAK,GAAGL,SAAS;+BAEzC,oBAACR;gBAASa,QAAO;gBAAK,GAAGL,SAAS;;QAEtC,KAAK;YACH,qBAAO,oBAACT;gBAASc,QAAO;gBAAIC,MAAAA;gBAAM,GAAGN,SAAS;;QAChD,KAAK;YACH,qBAAO,oBAACR;gBAASa,QAAO;gBAAK,GAAGL,SAAS;;IAC7C;IAEA,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,MAAMO,SAAS,CAAC,EACrBT,MAAO,UAAS,EAChBC,MAAO,UAAS,EAChBS,SAAQ,EACRC,SAAQ,EACRC,UAAS,EACTC,MAAK,EACLC,WAAU,EACVC,UAAS,EACTC,UAAS,EACT,GAAGd,WACS;IACZ,MAAME,WAAWb;IAEjB,qBACE,oBAAC0B;QACE,GAAGf,SAAS;QACbgB,KAAKJ;QACLE,WAAW5B,WACTU,MAAM,CAAC,SAAS,EAChBM,aAAaZ,SAASa,OAAOP,MAAM,CAAC,cAAc,EAClD;YACEqB,SAASrB,MAAM,CAAC,uBAAuB;YACvCsB,WAAWtB,MAAM,CAAC,yBAAyB;YAC3CuB,UAAUvB,MAAM,CAAC,wBAAwB;QAC3C,CAAC,CAACE,KAAK,EACPV,qBAAqBsB,cAAcd,MAAM,CAAC,aAAa,EACvDT,aAAasB,aAAab,MAAM,CAAC,wBAAwB,EACzDkB;qBAGF,oBAACM;QAAIN,WAAWlB,MAAM,CAAC,eAAe;qBACpC,oBAACC;QACCiB,WAAWlB,MAAM,CAAC,kBAAkB;QACpCyB,WAAU;QACVvB,MAAMA;QACNC,MAAMA;qBAEN,oBAACuB;QACCR,WAAW5B,WACTU,MAAM,CAAC,qBAAqB,EAC5BiB,aAAajB,MAAM,CAAC,6BAA6B;OAGlDY,WAEFrB,aAAauB,4BACZ,oBAACnB;QAASuB,WAAWlB,MAAM,CAAC,oBAAoB;QAAES,QAAO;OACtDK,aAKNvB,aAAasB,2BACZ,oBAACf;QACCoB,WAAW5B,WACTU,MAAM,CAAC,mBAAmB,EAC1BiB,aAAajB,MAAM,CAAC,6BAA6B;QAEnDyB,WAAU;OAETZ,YAKNtB,aAAawB,wBACZ,oBAAClB;QAAUqB,WAAWlB,MAAM,CAAC,gBAAgB;QAAEyB,WAAU;OACtDV;AAKX,EAAE"}

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

@@ -29,15 +29,11 @@
   overflow: hidden;
 }
 
-.Header__content-in--multiline {
+.Header__content--multiline {
   white-space: initial;
   word-break: break-word;
 }
 
-.Header--multiline {
-  white-space: normal;
-}
-
 .Header__subtitle {
   display: block;
   color: var(--vkui--color_text_secondary);
@@ -147,8 +143,9 @@
 }
 
 @media (max-width: 767.9px) {
-  :global(.vkuiInternalGroup--mode-none):not(:first-of-type) > .Header:first-child,
-  :global(.vkuiInternalGroup--mode-none):not(:first-of-type)
+  :global(.vkuiInternalGroup--sizeX-none.vkuiInternalGroup--mode-none):not(:first-of-type)
+    > .Header:first-child,
+  :global(.vkuiInternalGroup--sizeX-none.vkuiInternalGroup--mode-none):not(:first-of-type)
     > :global(.vkuiInternalTappable):first-child
     > .Header {
     margin-top: -16px;
@@ -163,8 +160,9 @@
 }
 
 @media (min-width: 768px) {
-  :global(.vkuiInternalGroup--mode-none) > .Header:not(.Header--mode-tertiary):first-child,
-  :global(.vkuiInternalGroup--mode-none)
+  :global(.vkuiInternalGroup--sizeX-none.vkuiInternalGroup--mode-none)
+    > .Header:not(.Header--mode-tertiary):first-child,
+  :global(.vkuiInternalGroup--sizeX-none.vkuiInternalGroup--mode-none)
     > :global(.vkuiInternalTappable):first-child
     > .Header:not(.Header--mode-tertiary) {
     margin-top: -4px;

package/dist/vkui.css

@@ -60,8 +60,8 @@
 .vkuiCardGrid{align-items:flex-start;display:flex;flex-wrap:wrap;justify-content:flex-start}.vkuiCardGrid--spaced{padding:12px 16px;padding:var(--vkui--size_base_padding_vertical--regular) var(--vkui--size_base_padding_horizontal--regular)}.vkuiCardGrid--sizeX-compact{padding-left:16px;padding-left:var(--vkui--size_base_padding_horizontal--regular);padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular)}@media (max-width:767.9px){.vkuiCardGrid--sizeX-none{padding-left:16px;padding-left:var(--vkui--size_base_padding_horizontal--regular);padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular)}}.vkuiCardGrid+.vkuiCardGrid{margin-top:calc(8px * 2);margin-top:calc(var(--vkui--size_cardgrid_padding_vertical--regular) * 2)}@media (max-width:767.9px){.vkuiCardGrid--sizeX-none.vkuiCardGrid--android{padding-left:16px;padding-right:16px}}.vkuiInternalGroup--mode-card .vkuiCardGrid{padding-left:16px;padding-left:var(--vkui--size_base_padding_horizontal--regular);padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular)}@media (min-width:768px){.vkuiInternalGroup--mode-none .vkuiCardGrid{padding-left:8px;padding-right:8px}}.vkuiInternalGroup .vkuiCardGrid:first-child{margin-top:8px;margin-top:var(--vkui--size_cardgrid_padding_vertical--regular)}.vkuiInternalGroup .vkuiCardGrid:last-child{margin-bottom:8px;margin-bottom:var(--vkui--size_cardgrid_padding_vertical--regular)}
 .vkuiCardScroll__in{align-items:stretch;display:flex}.vkuiCardScroll__gap{display:block;flex-shrink:0}.vkuiCardScroll+.vkuiCardScroll{margin-top:16px}.vkuiCardScroll--withSpaces .vkuiCardScroll__gap{width:16px;width:var(--vkui--size_base_padding_horizontal--regular)}.vkuiInternalSplitCol--spaced .vkuiCardScroll--withSpaces .vkuiCardScroll{margin-left:-16px;margin-right:-16px}.vkuiInternalSplitCol--spaced .vkuiCardScroll--withSpaces .vkuiCardScroll__gap{width:16px}.vkuiInternalGroup--mode-card .vkuiCardScroll--withSpaces{margin-left:-8px;margin-right:-8px}.vkuiInternalGroup--mode-card .vkuiCardScroll--withSpaces:first-child{padding-top:8px;padding-top:var(--vkui--size_cardgrid_padding_vertical--regular)}.vkuiInternalGroup--mode-card .vkuiCardScroll--withSpaces:last-child{padding-bottom:8px;padding-bottom:var(--vkui--size_cardgrid_padding_vertical--regular)}@media (min-width:768px){.vkuiInternalGroup--mode-none .vkuiCardScroll--withSpaces{margin-left:-8px;margin-right:-8px}.vkuiInternalGroup--mode-none .vkuiCardScroll--withSpaces:first-child{padding-top:8px;padding-top:var(--vkui--size_cardgrid_padding_vertical--regular)}.vkuiInternalGroup--mode-none .vkuiCardScroll--withSpaces:last-child{padding-bottom:8px;padding-bottom:var(--vkui--size_cardgrid_padding_vertical--regular)}}
 .vkuiContentCard--disabled{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiContentCard__body{padding:12px 16px;padding:var(--vkui--size_base_padding_vertical--regular) var(--vkui--size_base_padding_horizontal--regular)}.vkuiContentCard__tappable{border-radius:8px;border-radius:var(--vkui--size_card_border_radius--regular);color:#000;color:var(--vkui--color_text_primary);display:block;text-decoration:none}.vkuiContentCard__img{border-radius:8px 8px 0 0;border-radius:var(--vkui--size_card_border_radius--regular) var(--vkui--size_card_border_radius--regular) 0 0;display:block;object-fit:cover}.vkuiContentCard__text:not(:last-child){margin-bottom:4px}.vkuiContentCard__caption,.vkuiContentCard__subtitle{color:#818c99;color:var(--vkui--color_text_secondary)}
-.vkuiHeader{align-items:baseline;display:flex;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);justify-content:space-between;padding:0 0 0 16px;padding-left:var(--vkui--size_base_padding_horizontal--regular);padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular);-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.vkuiHeader__main{color:#000;color:var(--vkui--color_text_primary);min-width:0}.vkuiHeader__content{align-items:center;display:flex}.vkuiHeader__content-in,.vkuiHeader__subtitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiHeader__content-in--multiline{white-space:normal;word-break:break-word}.vkuiHeader--multiline{white-space:normal}.vkuiHeader__subtitle{display:block}.vkuiHeader--mode-secondary:not(.vkuiHeader--pi):not(.vkuiHeader--with-subtitle) .vkuiHeader__main,.vkuiHeader--mode-tertiary .vkuiHeader__main,.vkuiHeader__indicator,.vkuiHeader__subtitle{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiHeader__indicator{flex-shrink:0;margin-left:6px}.vkuiHeader--mode-primary .vkuiHeader__indicator{color:#6d7885;color:var(--vkui--color_text_subhead)}.vkuiHeader:not(.vkuiHeader--pi) .vkuiHeader__indicator{align-self:center}.vkuiHeader--mode-secondary .vkuiHeader__indicator{margin-left:8px}.vkuiHeader__aside{margin-left:12px;white-space:nowrap}.vkuiHeader__aside>.vkuiIcon{color:#99a2ad;color:var(--vkui--color_icon_secondary);position:relative}.vkuiHeader__aside>.vkuiIcon--24{top:3px}.vkuiHeader__aside>.vkuiIcon--16{top:1px}.vkuiHeader__main{margin:15px 0 9px}.vkuiHeader--mode-primary .vkuiHeader__main{margin-bottom:7px}.vkuiHeader--mode-primary .vkuiHeader__content:not(:last-child){margin-top:0}.vkuiHeader--mode-primary .vkuiHeader__content:last-child{margin-bottom:2px}.vkuiHeader--mode-tertiary .vkuiHeader__main{margin-top:11px}.vkuiHeader--ios .vkuiHeader__main{margin:13px 0 9px}.vkuiHeader--ios.vkuiHeader--mode-primary .vkuiHeader__main{margin:16px 0 7px}.vkuiHeader--ios.vkuiHeader--mode-secondary .vkuiHeader__main{margin:14px 0 10px}.vkuiHeader--ios.vkuiHeader--mode-tertiary .vkuiHeader__main{margin:12px 0 8px}.vkuiHeader--ios.vkuiHeader--mode-primary .vkuiHeader__content:not(:last-child){margin-top:-1px}.vkuiHeader--ios.vkuiHeader--mode-primary .vkuiHeader__content:last-child{margin-bottom:0}.vkuiInternalGroup--mode-plain:not(:first-of-type)>.vkuiHeader:first-child,.vkuiInternalGroup--mode-plain:not(:first-of-type)>.vkuiInternalTappable:first-child>.vkuiHeader{margin-top:-16px}@media (max-width:767.9px){.vkuiInternalGroup--mode-none:not(:first-of-type)>.vkuiHeader:first-child,.vkuiInternalGroup--mode-none:not(:first-of-type)>.vkuiInternalTappable:first-child>.vkuiHeader{margin-top:-16px}}.vkuiInternalGroup--mode-card>.vkuiHeader:not(.vkuiHeader--mode-tertiary):first-child,.vkuiInternalGroup--mode-card>.vkuiInternalTappable:first-child>.vkuiHeader:not(.vkuiHeader--mode-tertiary){margin-top:-4px}@media (min-width:768px){.vkuiInternalGroup--mode-none>.vkuiHeader:not(.vkuiHeader--mode-tertiary):first-child,.vkuiInternalGroup--mode-none>.vkuiInternalTappable:first-child>.vkuiHeader:not(.vkuiHeader--mode-tertiary){margin-top:-4px}}.vkuiHeader__aside{--vkui_internal--link-color:var(--vkui--color_text_accent)}
-.vkuiGroup{color:#000;color:var(--vkui--color_text_primary);padding-bottom:8px;padding-top:8px}.vkuiGroup__separator--separator,.vkuiGroup__separator--spacing{display:none}.vkuiGroup--mode-plain+.vkuiGroup__separator--spacing+.vkuiGroup__separator--separator,.vkuiGroup--sizeX-compact+.vkuiGroup__separator--spacing+.vkuiGroup__separator--separator{display:block}@media (max-width:767.9px){.vkuiGroup--sizeX-none+.vkuiGroup__separator--spacing+.vkuiGroup__separator--separator{display:block}}.vkuiGroup--sizeX-regular.vkuiGroup--mode-none+.vkuiGroup__separator--spacing{display:block}@media (min-width:768px){.vkuiGroup--sizeX-none.vkuiGroup--mode-none+.vkuiGroup__separator--spacing{display:block}}.vkuiGroup--mode-card.vkuiGroup--padding-s{padding:4px}.vkuiGroup--mode-card.vkuiGroup--padding-m{padding:8px}.vkuiGroup--sizeX-compact{padding-left:0;padding-right:0}@media (min-width:768px){.vkuiGroup--sizeX-none.vkuiGroup--padding-s{padding:4px}.vkuiGroup--sizeX-none.vkuiGroup--padding-m{padding:8px}}.vkuiGroup--mode-card{background:#fff;background:var(--vkui--color_background_content);border-radius:12px;border-radius:var(--vkui--size_border_radius_paper--regular);position:relative}@media (min-width:768px){.vkuiGroup--mode-none.vkuiGroup--sizeX-none{background:#fff;background:var(--vkui--color_background_content);border-radius:12px;border-radius:var(--vkui--size_border_radius_paper--regular);position:relative}}.vkuiGroup--mode-card:after{border-radius:inherit;box-shadow:inset 0 0 0 1px #d7d8d9;box-shadow:inset 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_separator_primary);content:"";height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}@media (min-width:768px){.vkuiGroup--mode-none:after{border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);box-shadow:inset 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha);content:"";height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}}.vkuiGroup--mode-plain+.vkuiGroup__separator,.vkuiGroup--mode-plain+.vkuiGroup__separator+.vkuiGroup__separator{padding-bottom:8px;padding-top:8px}@media (max-width:767.9px){.vkuiGroup--sizeX-none.vkuiGroup--mode-none+.vkuiGroup__separator,.vkuiGroup--sizeX-none.vkuiGroup--mode-none+.vkuiGroup__separator+.vkuiGroup__separator{padding-bottom:8px;padding-top:8px}}.vkuiGroup:last-of-type~.vkuiGroup__separator{display:none}.vkuiGroup--sizeX-regular.vkuiGroup--mode-card:last-of-type+.vkuiGroup__separator--spacing,.vkuiGroup--sizeX-regular.vkuiGroup--mode-none:last-of-type+.vkuiGroup__separator--spacing,.vkuiGroup:last-of-type~.vkuiGroup__separator--force{display:block}@media (min-width:768px){.vkuiGroup--sizeX-none.vkuiGroup--mode-card:last-of-type+.vkuiGroup__separator--spacing,.vkuiGroup--sizeX-none.vkuiGroup--mode-none:last-of-type+.vkuiGroup__separator--spacing{display:block}}.vkuiGroup__description{color:#818c99;color:var(--vkui--color_text_secondary);display:block;padding:4px 16px 16px}.vkuiGroup .vkuiGroup,.vkuiGroup .vkuiGroup+.vkuiGroup__separator{padding-left:0;padding-right:0}.vkuiGroup .vkuiGroup:first-of-type{padding-top:0}.vkuiGroup .vkuiGroup:last-of-type{padding-bottom:0}.vkuiGroup--ios .vkuiGroup__description{padding:4px 12px 16px}.vkuiInternalPanelHeader--vkcom+* .vkuiGroup:first-of-type,.vkuiInternalPanelHeader--vkcom~.vkuiGroup:first-of-type{border-top-left-radius:0;border-top-right-radius:0;position:relative;top:-1px}
+.vkuiHeader{align-items:baseline;display:flex;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);justify-content:space-between;padding:0 0 0 16px;padding-left:var(--vkui--size_base_padding_horizontal--regular);padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular);-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.vkuiHeader__main{color:#000;color:var(--vkui--color_text_primary);min-width:0}.vkuiHeader__content{align-items:center;display:flex}.vkuiHeader__content-in,.vkuiHeader__subtitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiHeader__content--multiline{white-space:normal;word-break:break-word}.vkuiHeader__subtitle{display:block}.vkuiHeader--mode-secondary:not(.vkuiHeader--pi):not(.vkuiHeader--with-subtitle) .vkuiHeader__main,.vkuiHeader--mode-tertiary .vkuiHeader__main,.vkuiHeader__indicator,.vkuiHeader__subtitle{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiHeader__indicator{flex-shrink:0;margin-left:6px}.vkuiHeader--mode-primary .vkuiHeader__indicator{color:#6d7885;color:var(--vkui--color_text_subhead)}.vkuiHeader:not(.vkuiHeader--pi) .vkuiHeader__indicator{align-self:center}.vkuiHeader--mode-secondary .vkuiHeader__indicator{margin-left:8px}.vkuiHeader__aside{margin-left:12px;white-space:nowrap}.vkuiHeader__aside>.vkuiIcon{color:#99a2ad;color:var(--vkui--color_icon_secondary);position:relative}.vkuiHeader__aside>.vkuiIcon--24{top:3px}.vkuiHeader__aside>.vkuiIcon--16{top:1px}.vkuiHeader__main{margin:15px 0 9px}.vkuiHeader--mode-primary .vkuiHeader__main{margin-bottom:7px}.vkuiHeader--mode-primary .vkuiHeader__content:not(:last-child){margin-top:0}.vkuiHeader--mode-primary .vkuiHeader__content:last-child{margin-bottom:2px}.vkuiHeader--mode-tertiary .vkuiHeader__main{margin-top:11px}.vkuiHeader--ios .vkuiHeader__main{margin:13px 0 9px}.vkuiHeader--ios.vkuiHeader--mode-primary .vkuiHeader__main{margin:16px 0 7px}.vkuiHeader--ios.vkuiHeader--mode-secondary .vkuiHeader__main{margin:14px 0 10px}.vkuiHeader--ios.vkuiHeader--mode-tertiary .vkuiHeader__main{margin:12px 0 8px}.vkuiHeader--ios.vkuiHeader--mode-primary .vkuiHeader__content:not(:last-child){margin-top:-1px}.vkuiHeader--ios.vkuiHeader--mode-primary .vkuiHeader__content:last-child{margin-bottom:0}.vkuiInternalGroup--mode-plain:not(:first-of-type)>.vkuiHeader:first-child,.vkuiInternalGroup--mode-plain:not(:first-of-type)>.vkuiInternalTappable:first-child>.vkuiHeader{margin-top:-16px}@media (max-width:767.9px){.vkuiInternalGroup--sizeX-none.vkuiInternalGroup--mode-none:not(:first-of-type)>.vkuiHeader:first-child,.vkuiInternalGroup--sizeX-none.vkuiInternalGroup--mode-none:not(:first-of-type)>.vkuiInternalTappable:first-child>.vkuiHeader{margin-top:-16px}}.vkuiInternalGroup--mode-card>.vkuiHeader:not(.vkuiHeader--mode-tertiary):first-child,.vkuiInternalGroup--mode-card>.vkuiInternalTappable:first-child>.vkuiHeader:not(.vkuiHeader--mode-tertiary){margin-top:-4px}@media (min-width:768px){.vkuiInternalGroup--sizeX-none.vkuiInternalGroup--mode-none>.vkuiHeader:not(.vkuiHeader--mode-tertiary):first-child,.vkuiInternalGroup--sizeX-none.vkuiInternalGroup--mode-none>.vkuiInternalTappable:first-child>.vkuiHeader:not(.vkuiHeader--mode-tertiary){margin-top:-4px}}.vkuiHeader__aside{--vkui_internal--link-color:var(--vkui--color_text_accent)}
+.vkuiGroup{color:#000;color:var(--vkui--color_text_primary);padding-bottom:8px;padding-top:8px}.vkuiGroup__separator--separator,.vkuiGroup__separator--spacing{display:none}.vkuiGroup--mode-plain+*+.vkuiGroup__separator--separator{display:block}@media (max-width:767.9px){.vkuiGroup--sizeX-none.vkuiGroup--mode-none+*+.vkuiGroup__separator--separator{display:block}}.vkuiGroup--mode-card+.vkuiGroup__separator--spacing{display:block}@media (min-width:768px){.vkuiGroup--sizeX-none.vkuiGroup--mode-none+.vkuiGroup__separator--spacing{display:block}}.vkuiGroup:last-of-type~.vkuiGroup__separator{display:none}.vkuiGroup--mode-card:last-of-type+.vkuiGroup__separator--spacing,.vkuiGroup:last-of-type~.vkuiGroup__separator--force{display:block}@media (min-width:768px){.vkuiGroup--sizeX-none.vkuiGroup--mode-none:last-of-type+.vkuiGroup__separator--spacing{display:block}}.vkuiGroup--mode-card.vkuiGroup--padding-s{padding:4px}.vkuiGroup--mode-card.vkuiGroup--padding-m{padding:8px}@media (min-width:768px){.vkuiGroup--sizeX-none.vkuiGroup--mode-none.vkuiGroup--padding-s{padding:4px}.vkuiGroup--sizeX-none.vkuiGroup--mode-none.vkuiGroup--padding-m{padding:8px}}.vkuiGroup--sizeX-compact{padding-left:0;padding-right:0}@media (max-width:767.9px){.vkuiGroup--sizeX-none{padding-left:0;padding-right:0}}.vkuiGroup--mode-card{background:#fff;background:var(--vkui--color_background_content);border-radius:12px;border-radius:var(--vkui--size_border_radius_paper--regular);position:relative}@media (min-width:768px){.vkuiGroup--sizeX-none.vkuiGroup--mode-none{background:#fff;background:var(--vkui--color_background_content);border-radius:12px;border-radius:var(--vkui--size_border_radius_paper--regular);position:relative}}.vkuiGroup--mode-card:after{border-radius:inherit;box-shadow:inset 0 0 0 1px #d7d8d9;box-shadow:inset 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_separator_primary);content:"";height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}@media (min-width:768px){.vkuiGroup--sizeX-none.vkuiGroup--mode-none:after{border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);box-shadow:inset 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha);content:"";height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}}.vkuiGroup--mode-plain+.vkuiGroup__separator,.vkuiGroup--mode-plain+.vkuiGroup__separator+.vkuiGroup__separator{padding-bottom:8px;padding-top:8px}@media (max-width:767.9px){.vkuiGroup--sizeX-none.vkuiGroup--mode-none+.vkuiGroup__separator,.vkuiGroup--sizeX-none.vkuiGroup--mode-none+.vkuiGroup__separator+.vkuiGroup__separator{padding-bottom:8px;padding-top:8px}}.vkuiGroup__description{color:#818c99;color:var(--vkui--color_text_secondary);display:block;padding:4px 16px 16px}.vkuiGroup .vkuiGroup,.vkuiGroup .vkuiGroup+.vkuiGroup__separator{padding-left:0;padding-right:0}.vkuiGroup .vkuiGroup:first-of-type{padding-top:0}.vkuiGroup .vkuiGroup:last-of-type{padding-bottom:0}.vkuiGroup--ios .vkuiGroup__description{padding:4px 12px 16px}.vkuiInternalPanelHeader--vkcom+* .vkuiGroup:first-of-type,.vkuiInternalPanelHeader--vkcom~.vkuiGroup:first-of-type{border-top-left-radius:0;border-top-right-radius:0;position:relative;top:-1px}
 .vkuiGradient--mode-tint.vkuiGradient--to-top{background:linear-gradient(180deg,hsla(0,0%,98%,0) 0,hsla(0,0%,98%,.036) 13%,hsla(0,0%,98%,.15) 27%,hsla(0,0%,98%,.79) 68%,hsla(0,0%,98%,.95) 84%,#f9f9f9);background:linear-gradient(to bottom,var(--vkui--gradient_tint))}.vkuiGradient--mode-tint.vkuiGradient--to-bottom{background:linear-gradient(0deg,hsla(0,0%,98%,0) 0,hsla(0,0%,98%,.036) 13%,hsla(0,0%,98%,.15) 27%,hsla(0,0%,98%,.79) 68%,hsla(0,0%,98%,.95) 84%,#f9f9f9);background:linear-gradient(to top,var(--vkui--gradient_tint))}.vkuiGradient--mode-white.vkuiGradient--to-top{background:linear-gradient(180deg,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.036) 13%,hsla(0,0%,100%,.15) 27%,hsla(0,0%,100%,.79) 68%,hsla(0,0%,100%,.95) 84%,#fff);background:linear-gradient(to bottom,var(--vkui--gradient_white))}.vkuiGradient--mode-white.vkuiGradient--to-bottom{background:linear-gradient(0deg,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.036) 13%,hsla(0,0%,100%,.15) 27%,hsla(0,0%,100%,.79) 68%,hsla(0,0%,100%,.95) 84%,#fff);background:linear-gradient(to top,var(--vkui--gradient_white))}.vkuiGradient--mode-black.vkuiGradient--to-top{background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.014) 13%,rgba(0,0,0,.06) 27%,rgba(0,0,0,.316) 68%,rgba(0,0,0,.38) 84%,rgba(0,0,0,.4));background:linear-gradient(to bottom,var(--vkui--gradient_black))}.vkuiGradient--mode-black.vkuiGradient--to-bottom{background:linear-gradient(0deg,transparent 0,rgba(0,0,0,.014) 13%,rgba(0,0,0,.06) 27%,rgba(0,0,0,.316) 68%,rgba(0,0,0,.38) 84%,rgba(0,0,0,.4));background:linear-gradient(to top,var(--vkui--gradient_black))}
 .vkuiList{isolation:isolate}
 .vkuiCell{position:relative}.vkuiInternalList--dragging .vkuiCell:not(.vkuiCell--dragging){pointer-events:none;transition:transform .3s ease}.vkuiCell--dragging{background-color:#f5f5f5;background-color:var(--vkui--color_background_secondary);box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3);z-index:1;z-index:var(--vkui_internal--z_index_cell_dragging)}.vkuiCell--selectable.vkuiCell--disabled{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiCell__checkbox,.vkuiCell__dragger{flex-shrink:0;margin-right:16px;position:relative}.vkuiCell__content{max-width:100%;min-width:0}.vkuiCell--removable .vkuiCell__content{flex-grow:1;padding-left:0;padding-right:0}.vkuiCell--ios .vkuiCell__dragger{margin-left:12px;margin-right:0}.vkuiCell--ios .vkuiCell__checkbox{margin-right:12px}.vkuiInternalFormItem>.vkuiCell{margin:0 calc(-1 * 16px);margin:0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular))}