@vkontakte/vkui 6.5.2 → 6.6.0

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 { SizeTypeValues } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\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  regular: styles['Group--sizeX-regular'],\n  compact: styles['Group--sizeX-compact'],\n};\n\nconst stylesMode = {\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};\n\nconst stylesPadding = {\n  s: styles['Group--padding-s'],\n  m: styles['Group--padding-m'],\n};\n\n/**\n * Вычисляем mode для Group.\n */\nfunction useGroupMode(\n  forcedMode: GroupProps['mode'],\n  sizeX: SizeTypeValues | 'none',\n  isInsideModal: boolean,\n): 'plain' | 'card' | 'none' {\n  const { layout } = React.useContext(AppRootContext);\n\n  if (forcedMode) {\n    return forcedMode;\n  }\n\n  if (isInsideModal) {\n    return 'plain';\n  }\n\n  if (layout) {\n    return layout;\n  }\n\n  if (sizeX !== 'none') {\n    return sizeX === 'regular' ? 'card' : 'plain';\n  }\n\n  return 'none';\n}\n\nexport interface GroupProps extends HTMLAttributesWithRootRef<HTMLElement> {\n  header?: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n    `show` (только для `mode=\"plain\"`) - разделитель всегда показывается\n    `hide` - разделитель всегда спрятан,\n    `auto` - разделитель рисуется автоматически между соседними группами.\n   */\n  separator?: 'show' | 'hide' | 'auto';\n  /**\n   * Режим отображения. Если установлен `card`, выглядит как карточка c\n   * обводкой и внешними отступами. Если `plain` — без отступов и обводки.\n   * По умолчанию режим отображения зависит от `sizeX` (`mode=card` при `sizeX=REGULAR` и `mode=plain` при `sizeX=COMPACT`)\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  mode: modeProps,\n  padding = 'm',\n  tabIndex: tabIndexProp,\n  ...restProps\n}: GroupProps): React.ReactNode => {\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX = 'none' } = useAdaptivity();\n\n  const mode = useGroupMode(modeProps, sizeX, isInsideModal);\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  let siblingSeparatorElement: React.ReactNode = null;\n  switch (separator) {\n    case 'auto':\n      siblingSeparatorElement = <div className={styles['Group__separator-sibling']} />;\n      break;\n    case 'show':\n      siblingSeparatorElement = (\n        <div\n          className={classNames(\n            styles['Group__separator-sibling'],\n            mode === 'plain' || mode === 'none'\n              ? styles['Group__separator-sibling--forced']\n              : undefined,\n          )}\n        />\n      );\n      break;\n    case 'hide':\n      break;\n  }\n\n  return (\n    <>\n      <RootComponent\n        Component=\"section\"\n        {...restProps}\n        tabIndex={tabIndex}\n        baseClassName={classNames(\n          'vkuiInternalGroup',\n          styles['Group'],\n          sizeXClassNames[sizeX],\n          mode === 'plain' && isInsideModal && styles['Group--mode-plain-inside-modal'],\n          stylesMode[mode],\n          stylesPadding[padding],\n        )}\n      >\n        {hasReactNode(header) && <div className={styles['Group__header']}>{header}</div>}\n        {children}\n        {hasReactNode(description) && (\n          <Footnote className={styles['Group__description']}>{description}</Footnote>\n        )}\n      </RootComponent>\n      {siblingSeparatorElement}\n    </>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","warnOnce","AppRootContext","ModalRootContext","RootComponent","Footnote","styles","sizeXClassNames","none","regular","compact","stylesMode","plain","card","stylesPadding","s","m","useGroupMode","forcedMode","sizeX","isInsideModal","layout","useContext","warn","Group","header","description","children","separator","mode","modeProps","padding","tabIndex","tabIndexProp","restProps","isTabPanel","role","process","env","NODE_ENV","undefined","siblingSeparatorElement","div","className","Component","baseClassName"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { GroupContainer, type GroupContainerProps } from './GroupContainer';\nimport { GroupDescription } from './GroupDescription';\nimport { GroupExpandedContent } from './GroupExpandedContent';\nimport { GroupHeader } from './GroupHeader';\n\nexport interface GroupProps extends GroupContainerProps {\n  header?: React.ReactNode;\n  description?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Group\n */\nexport const Group: React.FC<GroupProps> & {\n  Container: typeof GroupContainer;\n  Header: typeof GroupHeader;\n  Description: typeof GroupDescription;\n  ExpandedContent: typeof GroupExpandedContent;\n} = ({ header, description, children, ...restProps }: GroupProps): React.ReactNode => {\n  return (\n    <GroupContainer {...restProps}>\n      {hasReactNode(header) && <GroupHeader>{header}</GroupHeader>}\n      {children}\n      {hasReactNode(description) && <GroupDescription>{description}</GroupDescription>}\n    </GroupContainer>\n  );\n};\n\nGroup.displayName = 'Group';\nGroup.Container = GroupContainer;\nGroup.Container.displayName = 'Group.Container';\nGroup.Header = GroupHeader;\nGroup.Header.displayName = 'Group.Header';\nGroup.Description = GroupDescription;\nGroup.Description.displayName = 'Group.Description';\nGroup.ExpandedContent = GroupExpandedContent;\nGroup.ExpandedContent.displayName = 'Group.ExpandedContent';\n"],"names":["React","hasReactNode","GroupContainer","GroupDescription","GroupExpandedContent","GroupHeader","Group","header","description","children","restProps","displayName","Container","Header","Description","ExpandedContent"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,cAAc,QAAkC,mBAAmB;AAC5E,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,WAAW,QAAQ,gBAAgB;AAO5C;;CAEC,GACD,OAAO,MAAMC,QAKT,CAAC,EAAEC,MAAM,EAAEC,WAAW,EAAEC,QAAQ,EAAE,GAAGC,WAAuB;IAC9D,qBACE,MAACR;QAAgB,GAAGQ,SAAS;;YAC1BT,aAAaM,yBAAW,KAACF;0BAAaE;;YACtCE;YACAR,aAAaO,8BAAgB,KAACL;0BAAkBK;;;;AAGvD,EAAE;AAEFF,MAAMK,WAAW,GAAG;AACpBL,MAAMM,SAAS,GAAGV;AAClBI,MAAMM,SAAS,CAACD,WAAW,GAAG;AAC9BL,MAAMO,MAAM,GAAGR;AACfC,MAAMO,MAAM,CAACF,WAAW,GAAG;AAC3BL,MAAMQ,WAAW,GAAGX;AACpBG,MAAMQ,WAAW,CAACH,WAAW,GAAG;AAChCL,MAAMS,eAAe,GAAGX;AACxBE,MAAMS,eAAe,CAACJ,WAAW,GAAG"}

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

@@ -8,25 +8,30 @@
  */
 
 .Group {
-  --vkui_internal--Group_padding_size: 0;
+  --vkui_internal--Group_padding_inline: 0;
+  --vkui_internal--Group_padding_block: var(--vkui--spacing_size_m);
+  --vkui_internal--Group_card_mode_padding_size: 0;
 
   color: var(--vkui--color_text_primary);
-  padding-block: var(--vkui--spacing_size_m);
+  padding-block: var(--vkui_internal--Group_padding_block);
+  padding-inline: var(--vkui_internal--Group_padding_inline);
 }
 
 .Group--padding-s {
-  --vkui_internal--Group_padding_size: var(--vkui--spacing_size_xs);
+  --vkui_internal--Group_card_mode_padding_size: var(--vkui--spacing_size_xs);
 }
 
 .Group--padding-m {
-  --vkui_internal--Group_padding_size: var(--vkui--spacing_size_m);
+  --vkui_internal--Group_card_mode_padding_size: var(--vkui--spacing_size_m);
 }
 
 /* разделитель при mode="card" */
 
 .Group--mode-card,
 .Group--sizeX-regular.Group--mode-none {
-  padding: var(--vkui_internal--Group_padding_size);
+  --vkui_internal--Group_padding_inline: var(--vkui_internal--Group_card_mode_padding_size);
+  --vkui_internal--Group_padding_block: var(--vkui_internal--Group_card_mode_padding_size);
+
   position: relative;
   background: var(--vkui--color_background_content);
   border-radius: var(--vkui--size_border_radius_paper--regular);
@@ -34,7 +39,9 @@
 
 @media (min-width: 768px) {
   .Group--sizeX-none.Group--mode-none {
-    padding: var(--vkui_internal--Group_padding_size);
+    --vkui_internal--Group_padding_inline: var(--vkui_internal--Group_card_mode_padding_size);
+    --vkui_internal--Group_padding_block: var(--vkui_internal--Group_card_mode_padding_size);
+
     position: relative;
     background: var(--vkui--color_background_content);
     border-radius: var(--vkui--size_border_radius_paper--regular);
@@ -42,13 +49,15 @@
 }
 
 .Group--sizeX-compact.Group--mode-card {
-  padding-inline: 0;
+  --vkui_internal--Group_padding_inline: 0;
+
   border-radius: var(--vkui--size_border_radius_promo--regular);
 }
 
 @media (max-width: 767.9px) {
   .Group--sizeX-none.Group--mode-card {
-    padding-inline: 0;
+    --vkui_internal--Group_padding_inline: 0;
+
     border-radius: var(--vkui--size_border_radius_promo--regular);
   }
 }
@@ -244,7 +253,8 @@
 
 @media (min-width: 768px) {
   .Group--mode-plain-inside-modal {
-    padding: var(--vkui--spacing_size_m);
+    --vkui_internal--Group_padding_inline: var(--vkui--spacing_size_m);
+    --vkui_internal--Group_padding_block: var(--vkui--spacing_size_m);
   }
 
   .Group--mode-plain-inside-modal + .Group__separator-sibling {
@@ -259,7 +269,7 @@
  */
 
 .Group .Group {
-  padding-inline: 0;
+  --vkui_internal--Group_padding_inline: 0;
 }
 
 .Group .Group + .Group__separator-sibling {
@@ -276,6 +286,30 @@
           padding-block-end: 0;
 }
 
+/*
+ * Group.ExpandedContent
+ * компенсирующий отступы Group в зависимости
+ * от режима: inline / block
+ */
+
+.Group__expanded-content--inline {
+  margin-inline: calc(-1 * var(--vkui_internal--Group_padding_inline));
+}
+
+.Group__expanded-content--block {
+  margin-block: calc(-1 * var(--vkui_internal--Group_padding_block));
+}
+
+.Group .Group:first-of-type .Group__expanded-content--block {
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
+}
+
+.Group .Group:last-of-type .Group__expanded-content--block {
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
+}
+
 /*
  * CMP:
  * PanelHeader

package/dist/cssm/components/Group/GroupContainer.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';
+export type GroupContainerProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent & {
+    /**
+    `show` (только для `mode="plain"`) - разделитель всегда показывается
+    `hide` - разделитель всегда спрятан,
+    `auto` - разделитель рисуется автоматически между соседними группами.
+   */
+    separator?: 'show' | 'hide' | 'auto';
+    /**
+     * Режим отображения. Если установлен `card`, выглядит как карточка c
+     * обводкой и внешними отступами. Если `plain` — без отступов и обводки.
+     * По умолчанию режим отображения зависит от `sizeX` (`mode=card` при `sizeX=REGULAR` и `mode=plain` при `sizeX=COMPACT`)
+     * В модальных окнах по умолчанию `plain`.
+     */
+    mode?: 'plain' | 'card';
+    /**
+     * Отвечает за отступы вокруг контента в режиме `card`.
+     */
+    padding?: 's' | 'm';
+};
+export declare const GroupContainer: React.FC<GroupContainerProps>;
+//# sourceMappingURL=GroupContainer.d.ts.map

package/dist/cssm/components/Group/GroupContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/Group/GroupContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAsD3E,MAAM,MAAM,mBAAmB,GAAG,yBAAyB,CAAC,WAAW,CAAC,GACtE,YAAY,GAAG;IACb;;;;KAIC;IACD,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACrC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CACrB,CAAC;AAIJ,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAmExD,CAAC"}

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

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { warnOnce } from '../../lib/warnOnce';
+import { AppRootContext } from '../AppRoot/AppRootContext';
+import { ModalRootContext } from '../ModalRoot/ModalRootContext';
+import { RootComponent } from '../RootComponent/RootComponent';
+import styles from './Group.module.css';
+const sizeXClassNames = {
+    none: classNames(styles['Group--sizeX-none'], 'vkuiInternalGroup--sizeX-none'),
+    regular: styles['Group--sizeX-regular'],
+    compact: styles['Group--sizeX-compact']
+};
+const stylesMode = {
+    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')
+};
+const stylesPadding = {
+    s: styles['Group--padding-s'],
+    m: styles['Group--padding-m']
+};
+/**
+ * Вычисляем mode для Group.
+ */ function useGroupMode(forcedMode, sizeX, isInsideModal) {
+    const { layout } = React.useContext(AppRootContext);
+    if (forcedMode) {
+        return forcedMode;
+    }
+    if (isInsideModal) {
+        return 'plain';
+    }
+    if (layout) {
+        return layout;
+    }
+    if (sizeX !== 'none') {
+        return sizeX === 'regular' ? 'card' : 'plain';
+    }
+    return 'none';
+}
+const warn = warnOnce('Group');
+export const GroupContainer = ({ children, separator = 'auto', mode: modeProps, padding = 'm', tabIndex: tabIndexProp, ...restProps })=>{
+    const { isInsideModal } = React.useContext(ModalRootContext);
+    const { sizeX = 'none' } = useAdaptivity();
+    const mode = useGroupMode(modeProps, sizeX, isInsideModal);
+    const isTabPanel = restProps.role === 'tabpanel';
+    if (process.env.NODE_ENV === 'development' && isTabPanel && (!restProps['aria-controls'] || !restProps['id'])) {
+        warn('При использовании роли "tabpanel" необходимо задать значение свойств "aria-controls" и "id"');
+    }
+    const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;
+    let siblingSeparatorElement = null;
+    switch(separator){
+        case 'auto':
+            siblingSeparatorElement = /*#__PURE__*/ _jsx("div", {
+                className: styles['Group__separator-sibling']
+            });
+            break;
+        case 'show':
+            siblingSeparatorElement = /*#__PURE__*/ _jsx("div", {
+                className: classNames(styles['Group__separator-sibling'], mode === 'plain' || mode === 'none' ? styles['Group__separator-sibling--forced'] : undefined)
+            });
+            break;
+        case 'hide':
+            break;
+    }
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(RootComponent, {
+                Component: "section",
+                ...restProps,
+                tabIndex: tabIndex,
+                baseClassName: classNames('vkuiInternalGroup', styles['Group'], sizeXClassNames[sizeX], mode === 'plain' && isInsideModal && styles['Group--mode-plain-inside-modal'], stylesMode[mode], stylesPadding[padding]),
+                children: children
+            }),
+            siblingSeparatorElement
+        ]
+    });
+};
+GroupContainer.displayName = 'GroupContainer';
+
+//# sourceMappingURL=GroupContainer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Group/GroupContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { SizeTypeValues } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Group.module.css';\n\nconst sizeXClassNames = {\n  none: classNames(styles['Group--sizeX-none'], 'vkuiInternalGroup--sizeX-none'),\n  regular: styles['Group--sizeX-regular'],\n  compact: styles['Group--sizeX-compact'],\n};\n\nconst stylesMode = {\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};\n\nconst stylesPadding = {\n  s: styles['Group--padding-s'],\n  m: styles['Group--padding-m'],\n};\n\ntype GroupMode = 'plain' | 'card' | 'none';\n\n/**\n * Вычисляем mode для Group.\n */\nfunction useGroupMode(\n  forcedMode: GroupContainerProps['mode'],\n  sizeX: SizeTypeValues | 'none',\n  isInsideModal: boolean,\n): GroupMode {\n  const { layout } = React.useContext(AppRootContext);\n\n  if (forcedMode) {\n    return forcedMode;\n  }\n\n  if (isInsideModal) {\n    return 'plain';\n  }\n\n  if (layout) {\n    return layout;\n  }\n\n  if (sizeX !== 'none') {\n    return sizeX === 'regular' ? 'card' : 'plain';\n  }\n\n  return 'none';\n}\n\nexport type GroupContainerProps = HTMLAttributesWithRootRef<HTMLElement> &\n  HasComponent & {\n    /**\n    `show` (только для `mode=\"plain\"`) - разделитель всегда показывается\n    `hide` - разделитель всегда спрятан,\n    `auto` - разделитель рисуется автоматически между соседними группами.\n   */\n    separator?: 'show' | 'hide' | 'auto';\n    /**\n     * Режим отображения. Если установлен `card`, выглядит как карточка c\n     * обводкой и внешними отступами. Если `plain` — без отступов и обводки.\n     * По умолчанию режим отображения зависит от `sizeX` (`mode=card` при `sizeX=REGULAR` и `mode=plain` при `sizeX=COMPACT`)\n     * В модальных окнах по умолчанию `plain`.\n     */\n    mode?: 'plain' | 'card';\n    /**\n     * Отвечает за отступы вокруг контента в режиме `card`.\n     */\n    padding?: 's' | 'm';\n  };\n\nconst warn = warnOnce('Group');\n\nexport const GroupContainer: React.FC<GroupContainerProps> = ({\n  children,\n  separator = 'auto',\n  mode: modeProps,\n  padding = 'm',\n  tabIndex: tabIndexProp,\n  ...restProps\n}: GroupContainerProps) => {\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX = 'none' } = useAdaptivity();\n\n  const mode = useGroupMode(modeProps, sizeX, isInsideModal);\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  let siblingSeparatorElement: React.ReactNode = null;\n  switch (separator) {\n    case 'auto':\n      siblingSeparatorElement = <div className={styles['Group__separator-sibling']} />;\n      break;\n    case 'show':\n      siblingSeparatorElement = (\n        <div\n          className={classNames(\n            styles['Group__separator-sibling'],\n            mode === 'plain' || mode === 'none'\n              ? styles['Group__separator-sibling--forced']\n              : undefined,\n          )}\n        />\n      );\n      break;\n    case 'hide':\n      break;\n  }\n  return (\n    <>\n      <RootComponent\n        Component=\"section\"\n        {...restProps}\n        tabIndex={tabIndex}\n        baseClassName={classNames(\n          'vkuiInternalGroup',\n          styles['Group'],\n          sizeXClassNames[sizeX],\n          mode === 'plain' && isInsideModal && styles['Group--mode-plain-inside-modal'],\n          stylesMode[mode],\n          stylesPadding[padding],\n        )}\n      >\n        {children}\n      </RootComponent>\n      {siblingSeparatorElement}\n    </>\n  );\n};\nGroupContainer.displayName = 'GroupContainer';\n"],"names":["React","classNames","useAdaptivity","warnOnce","AppRootContext","ModalRootContext","RootComponent","styles","sizeXClassNames","none","regular","compact","stylesMode","plain","card","stylesPadding","s","m","useGroupMode","forcedMode","sizeX","isInsideModal","layout","useContext","warn","GroupContainer","children","separator","mode","modeProps","padding","tabIndex","tabIndexProp","restProps","isTabPanel","role","process","env","NODE_ENV","undefined","siblingSeparatorElement","div","className","Component","baseClassName","displayName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMR,WAAWM,MAAM,CAAC,oBAAoB,EAAE;IAC9CG,SAASH,MAAM,CAAC,uBAAuB;IACvCI,SAASJ,MAAM,CAAC,uBAAuB;AACzC;AAEA,MAAMK,aAAa;IACjBH,MAAMR,WAAWM,MAAM,CAAC,mBAAmB,EAAE;IAC7CM,OAAOZ,WAAWM,MAAM,CAAC,oBAAoB,EAAE;IAC/CO,MAAMb,WAAWM,MAAM,CAAC,mBAAmB,EAAE;AAC/C;AAEA,MAAMQ,gBAAgB;IACpBC,GAAGT,MAAM,CAAC,mBAAmB;IAC7BU,GAAGV,MAAM,CAAC,mBAAmB;AAC/B;AAIA;;CAEC,GACD,SAASW,aACPC,UAAuC,EACvCC,KAA8B,EAC9BC,aAAsB;IAEtB,MAAM,EAAEC,MAAM,EAAE,GAAGtB,MAAMuB,UAAU,CAACnB;IAEpC,IAAIe,YAAY;QACd,OAAOA;IACT;IAEA,IAAIE,eAAe;QACjB,OAAO;IACT;IAEA,IAAIC,QAAQ;QACV,OAAOA;IACT;IAEA,IAAIF,UAAU,QAAQ;QACpB,OAAOA,UAAU,YAAY,SAAS;IACxC;IAEA,OAAO;AACT;AAuBA,MAAMI,OAAOrB,SAAS;AAEtB,OAAO,MAAMsB,iBAAgD,CAAC,EAC5DC,QAAQ,EACRC,YAAY,MAAM,EAClBC,MAAMC,SAAS,EACfC,UAAU,GAAG,EACbC,UAAUC,YAAY,EACtB,GAAGC,WACiB;IACpB,MAAM,EAAEZ,aAAa,EAAE,GAAGrB,MAAMuB,UAAU,CAAClB;IAC3C,MAAM,EAAEe,QAAQ,MAAM,EAAE,GAAGlB;IAE3B,MAAM0B,OAAOV,aAAaW,WAAWT,OAAOC;IAE5C,MAAMa,aAAaD,UAAUE,IAAI,KAAK;IAEtC,IACEC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBACzBJ,cACC,CAAA,CAACD,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAT,KACE;IAEJ;IAEA,MAAMO,WAAWG,cAAcF,iBAAiBO,YAAY,IAAIP;IAEhE,IAAIQ,0BAA2C;IAC/C,OAAQb;QACN,KAAK;YACHa,wCAA0B,KAACC;gBAAIC,WAAWnC,MAAM,CAAC,2BAA2B;;YAC5E;QACF,KAAK;YACHiC,wCACE,KAACC;gBACCC,WAAWzC,WACTM,MAAM,CAAC,2BAA2B,EAClCqB,SAAS,WAAWA,SAAS,SACzBrB,MAAM,CAAC,mCAAmC,GAC1CgC;;YAIV;QACF,KAAK;YACH;IACJ;IACA,qBACE;;0BACE,KAACjC;gBACCqC,WAAU;gBACT,GAAGV,SAAS;gBACbF,UAAUA;gBACVa,eAAe3C,WACb,qBACAM,MAAM,CAAC,QAAQ,EACfC,eAAe,CAACY,MAAM,EACtBQ,SAAS,WAAWP,iBAAiBd,MAAM,CAAC,iCAAiC,EAC7EK,UAAU,CAACgB,KAAK,EAChBb,aAAa,CAACe,QAAQ;0BAGvBJ;;YAEFc;;;AAGP,EAAE;AACFf,eAAeoB,WAAW,GAAG"}

package/dist/cssm/components/Group/GroupDescription.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';
+export type GroupDescriptionProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;
+export declare const GroupDescription: React.FC<GroupDescriptionProps>;
+//# sourceMappingURL=GroupDescription.d.ts.map

package/dist/cssm/components/Group/GroupDescription.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupDescription.d.ts","sourceRoot":"","sources":["../../../../src/components/Group/GroupDescription.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI3E,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,CAAC,WAAW,CAAC,GAAG,YAAY,CAAC;AAC1F,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAK5D,CAAC"}

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { Footnote } from '../Typography/Footnote/Footnote';
+import styles from './Group.module.css';
+export const GroupDescription = ({ className, ...restProps })=>/*#__PURE__*/ _jsx(Footnote, {
+        className: classNames(className, styles['Group__description']),
+        ...restProps
+    });
+GroupDescription.displayName = 'GroupDescription';
+
+//# sourceMappingURL=GroupDescription.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Group/GroupDescription.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Group.module.css';\n\nexport type GroupDescriptionProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;\nexport const GroupDescription: React.FC<GroupDescriptionProps> = ({\n  className,\n  ...restProps\n}: GroupDescriptionProps): React.ReactNode => (\n  <Footnote className={classNames(className, styles['Group__description'])} {...restProps} />\n);\nGroupDescription.displayName = 'GroupDescription';\n"],"names":["React","classNames","Footnote","styles","GroupDescription","className","restProps","displayName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,qBAAqB;AAGxC,OAAO,MAAMC,mBAAoD,CAAC,EAChEC,SAAS,EACT,GAAGC,WACmB,iBACtB,KAACJ;QAASG,WAAWJ,WAAWI,WAAWF,MAAM,CAAC,qBAAqB;QAAI,GAAGG,SAAS;OACvF;AACFF,iBAAiBG,WAAW,GAAG"}

package/dist/cssm/components/Group/GroupExpandedContent.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';
+export type GroupExpandedContentProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent & {
+    direction?: 'inline' | 'block';
+};
+export declare const GroupExpandedContent: React.FC<GroupExpandedContentProps>;
+//# sourceMappingURL=GroupExpandedContent.d.ts.map

package/dist/cssm/components/Group/GroupExpandedContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupExpandedContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Group/GroupExpandedContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAS3E,MAAM,MAAM,yBAAyB,GAAG,yBAAyB,CAAC,WAAW,CAAC,GAC5E,YAAY,GAAG;IACb,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAChC,CAAC;AACJ,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAWpE,CAAC"}

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { RootComponent } from '../RootComponent/RootComponent';
+import styles from './Group.module.css';
+const stylesDirection = {
+    inline: styles['Group__expanded-content--inline'],
+    block: styles['Group__expanded-content--block']
+};
+export const GroupExpandedContent = ({ direction = 'inline', ...restProps })=>{
+    return /*#__PURE__*/ _jsx(RootComponent, {
+        Component: "div",
+        ...restProps,
+        baseClassName: classNames(styles['Group__expanded-content'], stylesDirection[direction])
+    });
+};
+
+//# sourceMappingURL=GroupExpandedContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Group/GroupExpandedContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Group.module.css';\n\nconst stylesDirection = {\n  inline: styles['Group__expanded-content--inline'],\n  block: styles['Group__expanded-content--block'],\n};\n\nexport type GroupExpandedContentProps = HTMLAttributesWithRootRef<HTMLElement> &\n  HasComponent & {\n    direction?: 'inline' | 'block';\n  };\nexport const GroupExpandedContent: React.FC<GroupExpandedContentProps> = ({\n  direction = 'inline',\n  ...restProps\n}: GroupExpandedContentProps) => {\n  return (\n    <RootComponent\n      Component=\"div\"\n      {...restProps}\n      baseClassName={classNames(styles['Group__expanded-content'], stylesDirection[direction])}\n    />\n  );\n};\n"],"names":["React","classNames","RootComponent","styles","stylesDirection","inline","block","GroupExpandedContent","direction","restProps","Component","baseClassName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,QAAQF,MAAM,CAAC,kCAAkC;IACjDG,OAAOH,MAAM,CAAC,iCAAiC;AACjD;AAMA,OAAO,MAAMI,uBAA4D,CAAC,EACxEC,YAAY,QAAQ,EACpB,GAAGC,WACuB;IAC1B,qBACE,KAACP;QACCQ,WAAU;QACT,GAAGD,SAAS;QACbE,eAAeV,WAAWE,MAAM,CAAC,0BAA0B,EAAEC,eAAe,CAACI,UAAU;;AAG7F,EAAE"}

package/dist/cssm/components/Group/GroupHeader.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';
+export type GroupHeaderProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;
+export declare const GroupHeader: React.FC<GroupHeaderProps>;
+//# sourceMappingURL=GroupHeader.d.ts.map

package/dist/cssm/components/Group/GroupHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/Group/GroupHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAG3E,MAAM,MAAM,gBAAgB,GAAG,yBAAyB,CAAC,WAAW,CAAC,GAAG,YAAY,CAAC;AACrF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAKlD,CAAC"}

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import styles from './Group.module.css';
+export const GroupHeader = ({ className, ...restProps })=>/*#__PURE__*/ _jsx("div", {
+        className: classNames(className, styles['Group__header']),
+        ...restProps
+    });
+GroupHeader.displayName = 'GroupHeader';
+
+//# sourceMappingURL=GroupHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Group/GroupHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport styles from './Group.module.css';\n\nexport type GroupHeaderProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;\nexport const GroupHeader: React.FC<GroupHeaderProps> = ({\n  className,\n  ...restProps\n}: GroupHeaderProps): React.ReactNode => (\n  <div className={classNames(className, styles['Group__header'])} {...restProps} />\n);\nGroupHeader.displayName = 'GroupHeader';\n"],"names":["React","classNames","styles","GroupHeader","className","restProps","div","displayName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,qBAAqB;AAGxC,OAAO,MAAMC,cAA0C,CAAC,EACtDC,SAAS,EACT,GAAGC,WACc,iBACjB,KAACC;QAAIF,WAAWH,WAAWG,WAAWF,MAAM,CAAC,gBAAgB;QAAI,GAAGG,SAAS;OAC7E;AACFF,YAAYI,WAAW,GAAG"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HasComponent, HTMLAttributesWithRootRef } from '../../types';
+import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';
 export interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement>, HasComponent {
     mode?: 'primary' | 'secondary' | 'tertiary';
     size?: 'regular' | 'large';
@@ -14,9 +14,29 @@ export interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement>, Has
      */
     indicator?: React.ReactNode;
     multiline?: boolean;
+    /**
+     * Иконка слева (рекомендуется использовать размер 28px)
+     */
+    before?: React.ReactNode;
+    /**
+     * Иконка слева от title (рекомендуется использовать размер 16px)
+     */
+    beforeTitle?: React.ReactNode;
+    /**
+     * Иконка справа от title (рекомендуется использовать размер 16px)
+     */
+    afterTitle?: React.ReactNode;
+    /**
+     * Иконка слева от subtitle (рекомендуется использовать размер 12px)
+     */
+    beforeSubtitle?: React.ReactNode;
+    /**
+     * Иконка справа от subtitle (рекомендуется использовать размер 12px)
+     */
+    afterSubtitle?: React.ReactNode;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Header
  */
-export declare const Header: ({ mode, size, Component, children, subtitle, subtitleComponent, indicator, aside, multiline, ...restProps }: HeaderProps) => React.ReactNode;
+export declare const Header: ({ mode, size, Component, children, subtitle, subtitleComponent, indicator, aside, multiline, before, beforeTitle, afterTitle, beforeSubtitle, afterSubtitle, ...restProps }: HeaderProps) => React.ReactNode;
 //# sourceMappingURL=Header.d.ts.map

package/dist/cssm/components/Header/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAStE,MAAM,WAAW,WAAY,SAAQ,yBAAyB,CAAC,WAAW,CAAC,EAAE,YAAY;IACvF,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC5C,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,iBAAiB,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACtC;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA6CD;;GAEG;AACH,eAAO,MAAM,MAAM,gHAWhB,WAAW,KAAG,KAAK,CAAC,SAsDtB,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAS3E,MAAM,WAAW,WAAY,SAAQ,yBAAyB,CAAC,WAAW,CAAC,EAAE,YAAY;IACvF,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC5C,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,iBAAiB,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACtC;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC;AA6CD;;GAEG;AACH,eAAO,MAAM,MAAM,gLAgBhB,WAAW,KAAG,KAAK,CAAC,SAyEtB,CAAC"}

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

@@ -69,11 +69,15 @@ const stylesMode = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Header
- */ export const Header = ({ mode = 'primary', size = 'regular', Component = 'h2', children, subtitle, subtitleComponent = 'span', indicator, aside, multiline, ...restProps })=>{
+ */ export const Header = ({ mode = 'primary', size = 'regular', Component = 'h2', children, subtitle, subtitleComponent = 'span', indicator, aside, multiline, before, beforeTitle, afterTitle, beforeSubtitle, afterSubtitle, ...restProps })=>{
     return /*#__PURE__*/ _jsxs(RootComponent, {
         ...restProps,
         baseClassName: classNames(styles['Header'], stylesMode[mode], size === 'large' && styles['Header--large'], isPrimitiveReactNode(indicator) && styles['Header--pi'], hasReactNode(subtitle) && styles['Header--with-subtitle']),
         children: [
+            before && /*#__PURE__*/ _jsx("div", {
+                className: classNames(styles['Header__before'], subtitle && styles['Header__before--withSubtitle']),
+                children: before
+            }),
             /*#__PURE__*/ _jsxs("div", {
                 className: styles['Header__main'],
                 children: [
@@ -83,10 +87,18 @@ const stylesMode = {
                         mode: mode,
                         size: size,
                         children: [
+                            beforeTitle && /*#__PURE__*/ _jsx("div", {
+                                className: styles['Header__content__before'],
+                                children: beforeTitle
+                            }),
                             /*#__PURE__*/ _jsx("span", {
                                 className: classNames(styles['Header__content-in'], multiline && styles['Header__content--multiline']),
                                 children: children
                             }),
+                            afterTitle && /*#__PURE__*/ _jsx("div", {
+                                className: styles['Header__content__after'],
+                                children: afterTitle
+                            }),
                             hasReactNode(indicator) && /*#__PURE__*/ _jsx(Footnote, {
                                 className: styles['Header__indicator'],
                                 weight: "2",
@@ -94,10 +106,23 @@ const stylesMode = {
                             })
                         ]
                     }),
-                    hasReactNode(subtitle) && /*#__PURE__*/ _jsx(Subhead, {
-                        className: classNames(styles['Header__subtitle'], multiline && styles['Header__content--multiline']),
-                        Component: subtitleComponent,
-                        children: subtitle
+                    hasReactNode(subtitle) && /*#__PURE__*/ _jsxs("div", {
+                        className: styles['Header__subtitleWrapper'],
+                        children: [
+                            beforeSubtitle && /*#__PURE__*/ _jsx("div", {
+                                className: styles['Header__subtitleBefore'],
+                                children: beforeSubtitle
+                            }),
+                            /*#__PURE__*/ _jsx(Subhead, {
+                                className: classNames(styles['Header__subtitle'], multiline && styles['Header__content--multiline']),
+                                Component: subtitleComponent,
+                                children: subtitle
+                            }),
+                            afterSubtitle && /*#__PURE__*/ _jsx("div", {
+                                className: styles['Header__subtitleAfter'],
+                                children: afterSubtitle
+                            })
+                        ]
                     })
                 ]
             }),

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 { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\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 HTMLAttributesWithRootRef<HTMLElement>, HasComponent {\n  mode?: 'primary' | 'secondary' | 'tertiary';\n  size?: 'regular' | 'large';\n  subtitle?: React.ReactNode;\n  /* Позволяет задать тип элемента в который будет обёрнут subtitle */\n  subtitleComponent?: React.ElementType;\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 === '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\nconst stylesMode = {\n  primary: styles['Header--mode-primary'],\n  secondary: styles['Header--mode-secondary'],\n  tertiary: styles['Header--mode-tertiary'],\n};\n/**\n * @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n  mode = 'primary',\n  size = 'regular',\n  Component = 'h2',\n  children,\n  subtitle,\n  subtitleComponent = 'span',\n  indicator,\n  aside,\n  multiline,\n  ...restProps\n}: HeaderProps): React.ReactNode => {\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['Header'],\n        stylesMode[mode],\n        size === 'large' && styles['Header--large'],\n        isPrimitiveReactNode(indicator) && styles['Header--pi'],\n        hasReactNode(subtitle) && styles['Header--with-subtitle'],\n      )}\n    >\n      <div className={styles['Header__main']}>\n        <HeaderContent\n          className={styles['Header__content']}\n          Component={Component}\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={subtitleComponent}\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    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","usePlatform","RootComponent","Footnote","Headline","Paragraph","Subhead","Title","styles","HeaderContent","mode","size","restProps","isLarge","platform","level","weight","caps","stylesMode","primary","secondary","tertiary","Header","Component","children","subtitle","subtitleComponent","indicator","aside","multiline","baseClassName","div","className","span"],"mappings":"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"}
+{"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 type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\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 HTMLAttributesWithRootRef<HTMLElement>, HasComponent {\n  mode?: 'primary' | 'secondary' | 'tertiary';\n  size?: 'regular' | 'large';\n  subtitle?: React.ReactNode;\n  /* Позволяет задать тип элемента в который будет обёрнут subtitle */\n  subtitleComponent?: React.ElementType;\n  /**\n   * Допускаются иконки, текст, Link\n   */\n  aside?: React.ReactNode;\n  /**\n   * Допускаются текст, Indicator\n   */\n  indicator?: React.ReactNode;\n  multiline?: boolean;\n  /**\n   * Иконка слева (рекомендуется использовать размер 28px)\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка слева от title (рекомендуется использовать размер 16px)\n   */\n  beforeTitle?: React.ReactNode;\n  /**\n   * Иконка справа от title (рекомендуется использовать размер 16px)\n   */\n  afterTitle?: React.ReactNode;\n  /**\n   * Иконка слева от subtitle (рекомендуется использовать размер 12px)\n   */\n  beforeSubtitle?: React.ReactNode;\n  /**\n   * Иконка справа от subtitle (рекомендуется использовать размер 12px)\n   */\n  afterSubtitle?: React.ReactNode;\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 === '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\nconst stylesMode = {\n  primary: styles['Header--mode-primary'],\n  secondary: styles['Header--mode-secondary'],\n  tertiary: styles['Header--mode-tertiary'],\n};\n/**\n * @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n  mode = 'primary',\n  size = 'regular',\n  Component = 'h2',\n  children,\n  subtitle,\n  subtitleComponent = 'span',\n  indicator,\n  aside,\n  multiline,\n  before,\n  beforeTitle,\n  afterTitle,\n  beforeSubtitle,\n  afterSubtitle,\n  ...restProps\n}: HeaderProps): React.ReactNode => {\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['Header'],\n        stylesMode[mode],\n        size === 'large' && styles['Header--large'],\n        isPrimitiveReactNode(indicator) && styles['Header--pi'],\n        hasReactNode(subtitle) && styles['Header--with-subtitle'],\n      )}\n    >\n      {before && (\n        <div\n          className={classNames(\n            styles['Header__before'],\n            subtitle && styles['Header__before--withSubtitle'],\n          )}\n        >\n          {before}\n        </div>\n      )}\n      <div className={styles['Header__main']}>\n        <HeaderContent\n          className={styles['Header__content']}\n          Component={Component}\n          mode={mode}\n          size={size}\n        >\n          {beforeTitle && <div className={styles['Header__content__before']}>{beforeTitle}</div>}\n          <span\n            className={classNames(\n              styles['Header__content-in'],\n              multiline && styles['Header__content--multiline'],\n            )}\n          >\n            {children}\n          </span>\n          {afterTitle && <div className={styles['Header__content__after']}>{afterTitle}</div>}\n          {hasReactNode(indicator) && (\n            <Footnote className={styles['Header__indicator']} weight=\"2\">\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n        {hasReactNode(subtitle) && (\n          <div className={styles['Header__subtitleWrapper']}>\n            {beforeSubtitle && (\n              <div className={styles['Header__subtitleBefore']}>{beforeSubtitle}</div>\n            )}\n            <Subhead\n              className={classNames(\n                styles['Header__subtitle'],\n                multiline && styles['Header__content--multiline'],\n              )}\n              Component={subtitleComponent}\n            >\n              {subtitle}\n            </Subhead>\n            {afterSubtitle && (\n              <div className={styles['Header__subtitleAfter']}>{afterSubtitle}</div>\n            )}\n          </div>\n        )}\n      </div>\n\n      {hasReactNode(aside) && (\n        <Paragraph className={styles['Header__aside']} Component=\"span\">\n          {aside}\n        </Paragraph>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","usePlatform","RootComponent","Footnote","Headline","Paragraph","Subhead","Title","styles","HeaderContent","mode","size","restProps","isLarge","platform","level","weight","caps","stylesMode","primary","secondary","tertiary","Header","Component","children","subtitle","subtitleComponent","indicator","aside","multiline","before","beforeTitle","afterTitle","beforeSubtitle","afterSubtitle","baseClassName","div","className","span"],"mappings":"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"}