@vkontakte/vkui 5.5.3 → 5.5.4

package/dist/cjs/components/Group/Group.js

@@ -24,10 +24,9 @@ var _ModalRootContext = require("../ModalRoot/ModalRootContext");
 var _Separator = require("../Separator/Separator");
 var _Spacing = require("../Spacing/Spacing");
 var _Footnote = require("../Typography/Footnote/Footnote");
-var _obj;
-var sizeXClassNames = (_obj = {
-    none: "vkuiGroup--sizeX-none"
-}, _define_property._(_obj, _adaptivity.SizeType.COMPACT, "vkuiGroup--sizeX-compact"), _define_property._(_obj, _adaptivity.SizeType.REGULAR, "vkuiGroup--sizeX-regular"), _obj);
+var sizeXClassNames = _define_property._({
+    none: (0, _vkjs.classNames)("vkuiGroup--sizeX-none", "vkuiInternalGroup--sizeX-none")
+}, _adaptivity.SizeType.COMPACT, "vkuiGroup--sizeX-compact");
 var warn = (0, _warnOnce.warnOnce)("Group");
 var Group = function(_param) {
     var header = _param.header, description = _param.description, children = _param.children, _param_separator = _param.separator, separator = _param_separator === void 0 ? "auto" : _param_separator, getRootRef = _param.getRootRef, modeProps = _param.mode, _param_padding = _param.padding, padding = _param_padding === void 0 ? "m" : _param_padding, className = _param.className, tabIndexProp = _param.tabIndex, restProps = _object_without_properties._(_param, [
@@ -49,6 +48,9 @@ var Group = function(_param) {
         // Подробнее в "none" можно прочитать в ADAPTIVITY_GUIDE.md
         mode = isInsideModal ? "plain" : "none";
     }
+    if (mode === "none" && sizeX !== "none") {
+        mode = sizeX === _adaptivity.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"');
@@ -58,7 +60,7 @@ var Group = function(_param) {
     return /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("section", _object_spread_props._(_object_spread._({}, restProps), {
         tabIndex: tabIndex,
         ref: getRootRef,
-        className: (0, _vkjs.classNames)("vkuiInternalGroup", "vkuiGroup", platform === _platform.Platform.IOS && "vkuiGroup--ios", sizeXClassNames[sizeX], mode && ({
+        className: (0, _vkjs.classNames)("vkuiInternalGroup", "vkuiGroup", platform === _platform.Platform.IOS && "vkuiGroup--ios", sizeX !== _adaptivity.SizeType.REGULAR && sizeXClassNames[sizeX], mode && ({
             none: (0, _vkjs.classNames)("vkuiGroup--mode-none", "vkuiInternalGroup--mode-none"),
             plain: (0, _vkjs.classNames)("vkuiGroup--mode-plain", "vkuiInternalGroup--mode-plain"),
             card: (0, _vkjs.classNames)("vkuiGroup--mode-card", "vkuiInternalGroup--mode-card")

package/dist/cjs/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":["Group","sizeXClassNames","none","SizeType","COMPACT","REGULAR","warn","warnOnce","header","description","children","separator","getRootRef","mode","modeProps","padding","className","tabIndex","tabIndexProp","restProps","isInsideModal","React","useContext","ModalRootContext","platform","usePlatform","useAdaptivity","sizeX","isTabPanel","role","process","env","NODE_ENV","undefined","separatorClassName","classNames","section","ref","Platform","IOS","plain","card","s","m","hasReactNode","Footnote","Fragment","Spacing","size","Separator"],"mappings":";;;;+BAiDaA;;;eAAAA;;;;;;;;+DAjDU;oBACkB;6BACX;2BACF;0BACH;wBACA;wBACA;gCAEQ;yBACP;uBACF;wBACC;IAGD;AAAxB,IAAMC,mBAAkB;IACtBC,IAAI;sBADkB,MAErBC,qBAASC,yDAFY,MAGrBD,qBAASE,sCAHY;AA+BxB,IAAMC,OAAOC,IAAAA,oBAAS;AAIf,IAAMP,QAAQ;QACnBQ,gBAAAA,QACAC,qBAAAA,aACAC,kBAAAA,oCACAC,WAAAA,0CAAY,2BACZC,oBAAAA,YACAC,AAAMC,mBAAND,8BACAE,SAAAA,sCAAU,sBACVC,mBAAAA,WACAC,AAAUC,sBAAVD,UACGE;QATHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;;IAGA,IAAM,AAAEG,gBAAkBC,OAAMC,WAAWC,oCAAnCH;IACR,IAAMI,WAAWC,IAAAA;IACjB,IAA2BC,kBAAAA,IAAAA,wDAAAA,gBAAnBC,OAAAA,0CAAQ;IAEhB,IAAId,OAAoCC;IAExC,IAAI,CAACA,WAAW;QACd,2DAA2D;QAC3DD,OAAOO,gBAAgB,UAAU;IACnC;IAEA,IAAMQ,aAAaT,UAAUU,SAAS;IAEtC,IACEC,QAAQC,IAAIC,aAAa,iBACzBJ,cACC,CAAA,CAACT,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAb,KACE;IAEJ;IAEA,IAAMW,WAAWW,cAAcV,iBAAiBe,YAAY,IAAIf;IAEhE,IAAMgB,qBAAqBC,IAAAA,0CAEzBxB,cAAc;IAGhB,qBACE,0DACE,qBAACyB,uDACKjB;QACJF,UAAUA;QACVoB,KAAKzB;QACLI,WAAWmB,IAAAA,kBACT,kCAEAX,aAAac,mBAASC,yBACtBtC,eAAe,CAAC0B,MAAM,EACtBd,QACE,CAAA;YACEX,MAAMiC,IAAAA,0CAAuC;YAC7CK,OAAOL,IAAAA,2CAAwC;YAC/CM,MAAMN,IAAAA,0CAAuC;QAC/C,CAAA,CAAC,CAACtB,KAAK,EACT;YACE6B,CAAC;YACDC,CAAC;QACH,CAAC,CAAC5B,QAAQ,EACVC;QAGDR,QACAE,UACAkC,IAAAA,oBAAanC,8BACZ,qBAACoC;QAAS7B,SAAS;OAAiCP,eAIvDE,cAAc,wBACb,qBAACU,OAAMyB,8BACL,qBAACC;QACC/B,WAAWmB,IAAAA,kBAAWD;QACtBc,MAAM;sBAER,qBAACC;QACCjC,WAAWmB,IAAAA,kBAAWD;;AAMlC"}
+{"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":["Group","sizeXClassNames","none","classNames","SizeType","COMPACT","warn","warnOnce","header","description","children","separator","getRootRef","mode","modeProps","padding","className","tabIndex","tabIndexProp","restProps","isInsideModal","React","useContext","ModalRootContext","platform","usePlatform","useAdaptivity","sizeX","REGULAR","isTabPanel","role","process","env","NODE_ENV","undefined","separatorClassName","section","ref","Platform","IOS","plain","card","s","m","hasReactNode","Footnote","Fragment","Spacing","size","Separator"],"mappings":";;;;+BAgDaA;;;eAAAA;;;;;;;;+DAhDU;oBACkB;6BACX;2BACF;0BACH;wBACA;wBACA;gCAEQ;yBACP;uBACF;wBACC;AAGzB,IAAMC;IACJC,MAAMC,IAAAA,2CAAwC;GAC7CC,qBAASC;AA4BZ,IAAMC,OAAOC,IAAAA,oBAAS;AAIf,IAAMP,QAAQ;QACnBQ,gBAAAA,QACAC,qBAAAA,aACAC,kBAAAA,oCACAC,WAAAA,0CAAY,2BACZC,oBAAAA,YACAC,AAAMC,mBAAND,8BACAE,SAAAA,sCAAU,sBACVC,mBAAAA,WACAC,AAAUC,sBAAVD,UACGE;QATHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;;IAGA,IAAM,AAAEG,gBAAkBC,OAAMC,WAAWC,oCAAnCH;IACR,IAAMI,WAAWC,IAAAA;IACjB,IAA2BC,kBAAAA,IAAAA,wDAAAA,gBAAnBC,OAAAA,0CAAQ;IAEhB,IAAId,OAAoCC;IAExC,IAAI,CAACA,WAAW;QACd,2DAA2D;QAC3DD,OAAOO,gBAAgB,UAAU;IACnC;IAEA,IAAIP,SAAS,UAAUc,UAAU,QAAQ;QACvCd,OAAOc,UAAUvB,qBAASwB,UAAU,SAAS;IAC/C;IAEA,IAAMC,aAAaV,UAAUW,SAAS;IAEtC,IACEC,QAAQC,IAAIC,aAAa,iBACzBJ,cACC,CAAA,CAACV,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAb,KACE;IAEJ;IAEA,IAAMW,WAAWY,cAAcX,iBAAiBgB,YAAY,IAAIhB;IAEhE,IAAMiB,qBAAqBhC,IAAAA,0CAEzBQ,cAAc;IAGhB,qBACE,0DACE,qBAACyB,uDACKjB;QACJF,UAAUA;QACVoB,KAAKzB;QACLI,WAAWb,IAAAA,kBACT,kCAEAqB,aAAac,mBAASC,yBACtBZ,UAAUvB,qBAASwB,WAAW3B,eAAe,CAAC0B,MAAM,EACpDd,QACE,CAAA;YACEX,MAAMC,IAAAA,0CAAuC;YAC7CqC,OAAOrC,IAAAA,2CAAwC;YAC/CsC,MAAMtC,IAAAA,0CAAuC;QAC/C,CAAA,CAAC,CAACU,KAAK,EACT;YACE6B,CAAC;YACDC,CAAC;QACH,CAAC,CAAC5B,QAAQ,EACVC;QAGDR,QACAE,UACAkC,IAAAA,oBAAanC,8BACZ,qBAACoC;QAAS7B,SAAS;OAAiCP,eAIvDE,cAAc,wBACb,qBAACU,OAAMyB,8BACL,qBAACC;QACC/B,WAAWb,IAAAA,kBAAWgC;QACtBa,MAAM;sBAER,qBAACC;QACCjC,WAAWb,IAAAA,kBAAWgC;;AAMlC"}

package/dist/cjs/components/Header/Header.js

@@ -98,12 +98,12 @@ var Header = function(_param) {
         mode: mode,
         size: size
     }, /*#__PURE__*/ _react.createElement("span", {
-        className: (0, _vkjs.classNames)("vkuiHeader__content-in", multiline && "vkuiHeader__content-in--multiline")
+        className: (0, _vkjs.classNames)("vkuiHeader__content-in", multiline && "vkuiHeader__content--multiline")
     }, children), (0, _vkjs.hasReactNode)(indicator) && /*#__PURE__*/ _react.createElement(_Footnote.Footnote, {
         className: "vkuiHeader__indicator",
         weight: "2"
     }, indicator)), (0, _vkjs.hasReactNode)(subtitle) && /*#__PURE__*/ _react.createElement(_Subhead.Subhead, {
-        className: "vkuiHeader__subtitle",
+        className: (0, _vkjs.classNames)("vkuiHeader__subtitle", multiline && "vkuiHeader__content--multiline"),
         Component: "span"
     }, subtitle)), (0, _vkjs.hasReactNode)(aside) && /*#__PURE__*/ _react.createElement(_Paragraph.Paragraph, {
         className: "vkuiHeader__aside",

package/dist/cjs/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":["Header","HeaderContent","mode","size","restProps","isLarge","platform","usePlatform","Platform","IOS","Title","level","weight","Footnote","caps","Headline","children","subtitle","indicator","aside","getRootRef","multiline","className","header","ref","classNames","primary","secondary","tertiary","isPrimitiveReactNode","hasReactNode","div","Component","span","Subhead","Paragraph"],"mappings":";;;;+BAoEaA;;;eAAAA;;;;;;;+DApEU;oBACwC;2BACnC;wBACH;wBAEA;wBACA;yBACC;uBACF;qBACF;AAqBtB,IAAMC,gBAAgB;QAAGC,cAAAA,MAAMC,cAAAA,MAASC;QAAfF;QAAMC;;IAC7B,IAAME,UAAUF,SAAS;IAEzB,IAAMG,WAAWC,IAAAA;IACjB,IAAID,aAAaE,mBAASC,KAAK;QAC7B,OAAQP;YACN,KAAK;gBACH,OAAOG,wBACL,qBAACK;oBAAMC,OAAM;oBAAIC,QAAO;mBAAQR,4BAEhC,qBAACM;oBAAME,QAAO;oBAAID,OAAM;mBAAQP;YAEpC,KAAK;gBACH,qBAAO,qBAACS;oBAASD,QAAO;oBAAIE,MAAAA;mBAASV;YACvC,KAAK;gBACH,qBAAO,qBAACM;oBAAME,QAAO;oBAAID,OAAM;mBAAQP;QAC3C;IACF;IAEA,OAAQF;QACN,KAAK;YACH,OAAOG,wBACL,qBAACK;gBAAMC,OAAM;gBAAIC,QAAO;eAAQR,4BAEhC,qBAACW;gBAASH,QAAO;eAAQR;QAE7B,KAAK;YACH,qBAAO,qBAACS;gBAASD,QAAO;gBAAIE,MAAAA;eAASV;QACvC,KAAK;YACH,qBAAO,qBAACW;gBAASH,QAAO;eAAQR;IACpC;IAEA,OAAO;AACT;AAKO,IAAMJ,SAAS;6BACpBE,MAAAA,gCAAO,8CACPC,MAAAA,gCAAO,yBACPa,kBAAAA,UACAC,kBAAAA,UACAC,mBAAAA,WACAC,eAAAA,OACAC,oBAAAA,YACAC,mBAAAA,WACAC,mBAAAA,WACGlB;QATHF;QACAC;QACAa;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAMhB,WAAWC,IAAAA;IAEjB,qBACE,qBAACgB,sDACKnB;QACJoB,KAAKJ;QACLE,WAAWG,IAAAA,gCAETnB,aAAaE,mBAASC,0BACtB;YACEiB,OAAO;YACPC,SAAS;YACTC,QAAQ;QACV,CAAC,CAAC1B,KAAK,EACP2B,IAAAA,4BAAqBX,gCACrBY,IAAAA,oBAAab,0CACbK;sBAGF,qBAACS;QAAIT,SAAS;qBACZ,qBAACrB;QACCqB,SAAS;QACTU,WAAU;QACV9B,MAAMA;QACNC,MAAMA;qBAEN,qBAAC8B;QACCX,WAAWG,IAAAA,4CAETJ;OAGDL,WAEFc,IAAAA,oBAAaZ,4BACZ,qBAACL;QAASS,SAAS;QAA+BV,QAAO;OACtDM,aAKNY,IAAAA,oBAAab,2BACZ,qBAACiB;QAAQZ,SAAS;QAA8BU,WAAU;OACvDf,YAKNa,IAAAA,oBAAaX,wBACZ,qBAACgB;QAAUb,SAAS;QAA2BU,WAAU;OACtDb;AAKX"}
+{"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":["Header","HeaderContent","mode","size","restProps","isLarge","platform","usePlatform","Platform","IOS","Title","level","weight","Footnote","caps","Headline","children","subtitle","indicator","aside","getRootRef","multiline","className","header","ref","classNames","primary","secondary","tertiary","isPrimitiveReactNode","hasReactNode","div","Component","span","Subhead","Paragraph"],"mappings":";;;;+BAoEaA;;;eAAAA;;;;;;;+DApEU;oBACwC;2BACnC;wBACH;wBAEA;wBACA;yBACC;uBACF;qBACF;AAqBtB,IAAMC,gBAAgB;QAAGC,cAAAA,MAAMC,cAAAA,MAASC;QAAfF;QAAMC;;IAC7B,IAAME,UAAUF,SAAS;IAEzB,IAAMG,WAAWC,IAAAA;IACjB,IAAID,aAAaE,mBAASC,KAAK;QAC7B,OAAQP;YACN,KAAK;gBACH,OAAOG,wBACL,qBAACK;oBAAMC,OAAM;oBAAIC,QAAO;mBAAQR,4BAEhC,qBAACM;oBAAME,QAAO;oBAAID,OAAM;mBAAQP;YAEpC,KAAK;gBACH,qBAAO,qBAACS;oBAASD,QAAO;oBAAIE,MAAAA;mBAASV;YACvC,KAAK;gBACH,qBAAO,qBAACM;oBAAME,QAAO;oBAAID,OAAM;mBAAQP;QAC3C;IACF;IAEA,OAAQF;QACN,KAAK;YACH,OAAOG,wBACL,qBAACK;gBAAMC,OAAM;gBAAIC,QAAO;eAAQR,4BAEhC,qBAACW;gBAASH,QAAO;eAAQR;QAE7B,KAAK;YACH,qBAAO,qBAACS;gBAASD,QAAO;gBAAIE,MAAAA;eAASV;QACvC,KAAK;YACH,qBAAO,qBAACW;gBAASH,QAAO;eAAQR;IACpC;IAEA,OAAO;AACT;AAKO,IAAMJ,SAAS;6BACpBE,MAAAA,gCAAO,8CACPC,MAAAA,gCAAO,yBACPa,kBAAAA,UACAC,kBAAAA,UACAC,mBAAAA,WACAC,eAAAA,OACAC,oBAAAA,YACAC,mBAAAA,WACAC,mBAAAA,WACGlB;QATHF;QACAC;QACAa;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAMhB,WAAWC,IAAAA;IAEjB,qBACE,qBAACgB,sDACKnB;QACJoB,KAAKJ;QACLE,WAAWG,IAAAA,gCAETnB,aAAaE,mBAASC,0BACtB;YACEiB,OAAO;YACPC,SAAS;YACTC,QAAQ;QACV,CAAC,CAAC1B,KAAK,EACP2B,IAAAA,4BAAqBX,gCACrBY,IAAAA,oBAAab,0CACbK;sBAGF,qBAACS;QAAIT,SAAS;qBACZ,qBAACrB;QACCqB,SAAS;QACTU,WAAU;QACV9B,MAAMA;QACNC,MAAMA;qBAEN,qBAAC8B;QACCX,WAAWG,IAAAA,4CAETJ;OAGDL,WAEFc,IAAAA,oBAAaZ,4BACZ,qBAACL;QAASS,SAAS;QAA+BV,QAAO;OACtDM,aAKNY,IAAAA,oBAAab,2BACZ,qBAACiB;QACCZ,WAAWG,IAAAA,0CAETJ;QAEFW,WAAU;OAETf,YAKNa,IAAAA,oBAAaX,wBACZ,qBAACgB;QAAUb,SAAS;QAA2BU,WAAU;OACtDb;AAKX"}

package/dist/components/Group/Group.js

@@ -13,10 +13,9 @@ import { ModalRootContext } from "../ModalRoot/ModalRootContext";
 import { Separator } from "../Separator/Separator";
 import { Spacing } from "../Spacing/Spacing";
 import { Footnote } from "../Typography/Footnote/Footnote";
-var _obj;
-var sizeXClassNames = (_obj = {
-    none: "vkuiGroup--sizeX-none"
-}, _define_property(_obj, SizeType.COMPACT, "vkuiGroup--sizeX-compact"), _define_property(_obj, SizeType.REGULAR, "vkuiGroup--sizeX-regular"), _obj);
+var sizeXClassNames = _define_property({
+    none: classNames("vkuiGroup--sizeX-none", "vkuiInternalGroup--sizeX-none")
+}, SizeType.COMPACT, "vkuiGroup--sizeX-compact");
 var warn = warnOnce("Group");
 /**
  * @see https://vkcom.github.io/VKUI/#/Group
@@ -40,6 +39,9 @@ var warn = warnOnce("Group");
         // Подробнее в "none" можно прочитать в ADAPTIVITY_GUIDE.md
         mode = isInsideModal ? "plain" : "none";
     }
+    if (mode === "none" && sizeX !== "none") {
+        mode = sizeX === 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"');
@@ -49,7 +51,7 @@ var warn = warnOnce("Group");
     return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("section", _object_spread_props(_object_spread({}, restProps), {
         tabIndex: tabIndex,
         ref: getRootRef,
-        className: classNames("vkuiInternalGroup", "vkuiGroup", platform === Platform.IOS && "vkuiGroup--ios", sizeXClassNames[sizeX], mode && ({
+        className: classNames("vkuiInternalGroup", "vkuiGroup", platform === Platform.IOS && "vkuiGroup--ios", sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX], mode && ({
             none: classNames("vkuiGroup--mode-none", "vkuiInternalGroup--mode-none"),
             plain: classNames("vkuiGroup--mode-plain", "vkuiInternalGroup--mode-plain"),
             card: classNames("vkuiGroup--mode-card", "vkuiInternalGroup--mode-card")

package/dist/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","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;IAGnC;AAAxB,IAAMC,mBAAkB;IACtBC,IAAI;oBADkB,MAErBR,SAASS,uDAFY,MAGrBT,SAASU,sCAHY;AA+BxB,IAAMC,OAAOT,SAAS;AACtB;;CAEC,GACD,OAAO,IAAMU,QAAQ;QACnBC,gBAAAA,QACAC,qBAAAA,aACAC,kBAAAA,oCACAC,WAAAA,0CAAY,2BACZC,oBAAAA,YACAC,AAAMC,mBAAND,8BACAE,SAAAA,sCAAU,sBACVC,mBAAAA,WACAC,AAAUC,sBAAVD,UACGE;QATHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;;IAGA,IAAM,AAAEG,gBAAkB9B,MAAM+B,WAAWvB,kBAAnCsB;IACR,IAAME,WAAW5B;IACjB,IAA2BD,iBAAAA,wCAAAA,eAAnB8B,OAAAA,0CAAQ;IAEhB,IAAIV,OAAoCC;IAExC,IAAI,CAACA,WAAW;QACd,2DAA2D;QAC3DD,OAAOO,gBAAgB,UAAU;IACnC;IAEA,IAAMI,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,IAAMW,WAAWO,cAAcN,iBAAiBW,YAAY,IAAIX;IAEhE,IAAMY,qBAAqBvC,mCAEzBoB,cAAc;IAGhB,qBACE,wDACE,oBAACoB,mDACKZ;QACJF,UAAUA;QACVe,KAAKpB;QACLI,WAAWzB,WACT,kCAEA+B,aAAa1B,SAASqC,yBACtB/B,eAAe,CAACqB,MAAM,EACtBV,QACE,CAAA;YACEV,MAAMZ,mCAAuC;YAC7C2C,OAAO3C,oCAAwC;YAC/C4C,MAAM5C,mCAAuC;QAC/C,CAAA,CAAC,CAACsB,KAAK,EACT;YACEuB,CAAC;YACDC,CAAC;QACH,CAAC,CAACtB,QAAQ,EACVC;QAGDR,QACAE,UACAlB,aAAaiB,8BACZ,oBAACR;QAASe,SAAS;OAAiCP,eAIvDE,cAAc,wBACb,oBAACrB,MAAMgD,8BACL,oBAACtC;QACCgB,WAAWzB,WAAWuC;QACtBS,MAAM;sBAER,oBAACxC;QACCiB,WAAWzB,WAAWuC;;AAMlC,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","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;AAG3D,IAAMC;IACJC,MAAMZ,oCAAwC;GAC7CI,SAASS;AA4BZ,IAAMC,OAAOR,SAAS;AACtB;;CAEC,GACD,OAAO,IAAMS,QAAQ;QACnBC,gBAAAA,QACAC,qBAAAA,aACAC,kBAAAA,oCACAC,WAAAA,0CAAY,2BACZC,oBAAAA,YACAC,AAAMC,mBAAND,8BACAE,SAAAA,sCAAU,sBACVC,mBAAAA,WACAC,AAAUC,sBAAVD,UACGE;QATHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;;IAGA,IAAM,AAAEG,gBAAkB7B,MAAM8B,WAAWtB,kBAAnCqB;IACR,IAAME,WAAW3B;IACjB,IAA2BD,iBAAAA,wCAAAA,eAAnB6B,OAAAA,0CAAQ;IAEhB,IAAIV,OAAoCC;IAExC,IAAI,CAACA,WAAW;QACd,2DAA2D;QAC3DD,OAAOO,gBAAgB,UAAU;IACnC;IAEA,IAAIP,SAAS,UAAUU,UAAU,QAAQ;QACvCV,OAAOU,UAAU3B,SAAS4B,UAAU,SAAS;IAC/C;IAEA,IAAMC,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,IAAMW,WAAWQ,cAAcP,iBAAiBY,YAAY,IAAIZ;IAEhE,IAAMa,qBAAqBvC,mCAEzBmB,cAAc;IAGhB,qBACE,wDACE,oBAACqB,mDACKb;QACJF,UAAUA;QACVgB,KAAKrB;QACLI,WAAWxB,WACT,kCAEA8B,aAAazB,SAASqC,yBACtBX,UAAU3B,SAAS4B,WAAWrB,eAAe,CAACoB,MAAM,EACpDV,QACE,CAAA;YACET,MAAMZ,mCAAuC;YAC7C2C,OAAO3C,oCAAwC;YAC/C4C,MAAM5C,mCAAuC;QAC/C,CAAA,CAAC,CAACqB,KAAK,EACT;YACEwB,CAAC;YACDC,CAAC;QACH,CAAC,CAACvB,QAAQ,EACVC;QAGDR,QACAE,UACAjB,aAAagB,8BACZ,oBAACP;QAASc,SAAS;OAAiCP,eAIvDE,cAAc,wBACb,oBAACpB,MAAMgD,8BACL,oBAACtC;QACCe,WAAWxB,WAAWuC;QACtBS,MAAM;sBAER,oBAACxC;QACCgB,WAAWxB,WAAWuC;;AAMlC,EAAE"}

package/dist/components/Header/Header.js

@@ -89,12 +89,12 @@ var HeaderContent = function(_param) {
         mode: mode,
         size: size
     }, /*#__PURE__*/ React.createElement("span", {
-        className: classNames("vkuiHeader__content-in", multiline && "vkuiHeader__content-in--multiline")
+        className: classNames("vkuiHeader__content-in", multiline && "vkuiHeader__content--multiline")
     }, children), hasReactNode(indicator) && /*#__PURE__*/ React.createElement(Footnote, {
         className: "vkuiHeader__indicator",
         weight: "2"
     }, indicator)), hasReactNode(subtitle) && /*#__PURE__*/ React.createElement(Subhead, {
-        className: "vkuiHeader__subtitle",
+        className: classNames("vkuiHeader__subtitle", multiline && "vkuiHeader__content--multiline"),
         Component: "span"
     }, subtitle)), hasReactNode(aside) && /*#__PURE__*/ React.createElement(Paragraph, {
         className: "vkuiHeader__aside",

package/dist/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","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;AAqBlD,IAAMC,gBAAgB;QAAGC,cAAAA,MAAMC,cAAAA,MAASC;QAAfF;QAAMC;;IAC7B,IAAME,UAAUF,SAAS;IAEzB,IAAMG,WAAWZ;IACjB,IAAIY,aAAaX,SAASY,KAAK;QAC7B,OAAQL;YACN,KAAK;gBACH,OAAOG,wBACL,oBAACL;oBAAMQ,OAAM;oBAAIC,QAAO;mBAAQL,4BAEhC,oBAACJ;oBAAMS,QAAO;oBAAID,OAAM;mBAAQJ;YAEpC,KAAK;gBACH,qBAAO,oBAACR;oBAASa,QAAO;oBAAIC,MAAAA;mBAASN;YACvC,KAAK;gBACH,qBAAO,oBAACJ;oBAAMS,QAAO;oBAAID,OAAM;mBAAQJ;QAC3C;IACF;IAEA,OAAQF;QACN,KAAK;YACH,OAAOG,wBACL,oBAACL;gBAAMQ,OAAM;gBAAIC,QAAO;eAAQL,4BAEhC,oBAACP;gBAASY,QAAO;eAAQL;QAE7B,KAAK;YACH,qBAAO,oBAACR;gBAASa,QAAO;gBAAIC,MAAAA;eAASN;QACvC,KAAK;YACH,qBAAO,oBAACP;gBAASY,QAAO;eAAQL;IACpC;IAEA,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,IAAMO,SAAS;6BACpBT,MAAAA,gCAAO,8CACPC,MAAAA,gCAAO,yBACPS,kBAAAA,UACAC,kBAAAA,UACAC,mBAAAA,WACAC,eAAAA,OACAC,oBAAAA,YACAC,mBAAAA,WACAC,mBAAAA,WACGd;QATHF;QACAC;QACAS;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAMZ,WAAWZ;IAEjB,qBACE,oBAACyB,kDACKf;QACJgB,KAAKJ;QACLE,WAAW3B,yBAETe,aAAaX,SAASY,0BACtB;YACEc,OAAO;YACPC,SAAS;YACTC,QAAQ;QACV,CAAC,CAACrB,KAAK,EACPT,qBAAqBqB,gCACrBtB,aAAaqB,0CACbK;sBAGF,oBAACM;QAAIN,SAAS;qBACZ,oBAACjB;QACCiB,SAAS;QACTO,WAAU;QACVvB,MAAMA;QACNC,MAAMA;qBAEN,oBAACuB;QACCR,WAAW3B,qCAET0B;OAGDL,WAEFpB,aAAasB,4BACZ,oBAAClB;QAASsB,SAAS;QAA+BT,QAAO;OACtDK,aAKNtB,aAAaqB,2BACZ,oBAACd;QAAQmB,SAAS;QAA8BO,WAAU;OACvDZ,YAKNrB,aAAauB,wBACZ,oBAACjB;QAAUoB,SAAS;QAA2BO,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","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;AAqBlD,IAAMC,gBAAgB;QAAGC,cAAAA,MAAMC,cAAAA,MAASC;QAAfF;QAAMC;;IAC7B,IAAME,UAAUF,SAAS;IAEzB,IAAMG,WAAWZ;IACjB,IAAIY,aAAaX,SAASY,KAAK;QAC7B,OAAQL;YACN,KAAK;gBACH,OAAOG,wBACL,oBAACL;oBAAMQ,OAAM;oBAAIC,QAAO;mBAAQL,4BAEhC,oBAACJ;oBAAMS,QAAO;oBAAID,OAAM;mBAAQJ;YAEpC,KAAK;gBACH,qBAAO,oBAACR;oBAASa,QAAO;oBAAIC,MAAAA;mBAASN;YACvC,KAAK;gBACH,qBAAO,oBAACJ;oBAAMS,QAAO;oBAAID,OAAM;mBAAQJ;QAC3C;IACF;IAEA,OAAQF;QACN,KAAK;YACH,OAAOG,wBACL,oBAACL;gBAAMQ,OAAM;gBAAIC,QAAO;eAAQL,4BAEhC,oBAACP;gBAASY,QAAO;eAAQL;QAE7B,KAAK;YACH,qBAAO,oBAACR;gBAASa,QAAO;gBAAIC,MAAAA;eAASN;QACvC,KAAK;YACH,qBAAO,oBAACP;gBAASY,QAAO;eAAQL;IACpC;IAEA,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,IAAMO,SAAS;6BACpBT,MAAAA,gCAAO,8CACPC,MAAAA,gCAAO,yBACPS,kBAAAA,UACAC,kBAAAA,UACAC,mBAAAA,WACAC,eAAAA,OACAC,oBAAAA,YACAC,mBAAAA,WACAC,mBAAAA,WACGd;QATHF;QACAC;QACAS;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAMZ,WAAWZ;IAEjB,qBACE,oBAACyB,kDACKf;QACJgB,KAAKJ;QACLE,WAAW3B,yBAETe,aAAaX,SAASY,0BACtB;YACEc,OAAO;YACPC,SAAS;YACTC,QAAQ;QACV,CAAC,CAACrB,KAAK,EACPT,qBAAqBqB,gCACrBtB,aAAaqB,0CACbK;sBAGF,oBAACM;QAAIN,SAAS;qBACZ,oBAACjB;QACCiB,SAAS;QACTO,WAAU;QACVvB,MAAMA;QACNC,MAAMA;qBAEN,oBAACuB;QACCR,WAAW3B,qCAET0B;OAGDL,WAEFpB,aAAasB,4BACZ,oBAAClB;QAASsB,SAAS;QAA+BT,QAAO;OACtDK,aAKNtB,aAAaqB,2BACZ,oBAACd;QACCmB,WAAW3B,mCAET0B;QAEFQ,WAAU;OAETZ,YAKNrB,aAAauB,wBACZ,oBAACjB;QAAUoB,SAAS;QAA2BO,WAAU;OACtDV;AAKX,EAAE"}

package/dist/components.css

@@ -59,8 +59,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))}