@vkontakte/vkui 5.2.4 → 5.3.1

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

@@ -1,8 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["header", "description", "children", "separator", "getRootRef", "mode", "padding", "className", "tabIndex"];
-var _sizeXClassNames;
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
@@ -14,61 +9,48 @@ import { ModalRootContext } from '../ModalRoot/ModalRootContext';
 import { Separator } from '../Separator/Separator';
 import { Spacing } from '../Spacing/Spacing';
 import { Footnote } from '../Typography/Footnote/Footnote';
-import "./Group.module.css";
-var sizeXClassNames = (_sizeXClassNames = {
-  none: "vkuiGroup--sizeX-none"
-}, _defineProperty(_sizeXClassNames, SizeType.COMPACT, "vkuiGroup--sizeX-compact"), _defineProperty(_sizeXClassNames, SizeType.REGULAR, "vkuiGroup--sizeX-regular"), _sizeXClassNames);
-var warn = warnOnce('TabsItem');
-export var Group = function Group(_ref) {
-  var header = _ref.header,
-    description = _ref.description,
-    children = _ref.children,
-    _ref$separator = _ref.separator,
-    separator = _ref$separator === void 0 ? 'auto' : _ref$separator,
-    getRootRef = _ref.getRootRef,
-    modeProps = _ref.mode,
-    _ref$padding = _ref.padding,
-    padding = _ref$padding === void 0 ? 'm' : _ref$padding,
-    className = _ref.className,
-    tabIndexProp = _ref.tabIndex,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var _React$useContext = React.useContext(ModalRootContext),
-    isInsideModal = _React$useContext.isInsideModal;
-  var platform = usePlatform();
-  var _useAdaptivity = useAdaptivity(),
-    _useAdaptivity$sizeX = _useAdaptivity.sizeX,
-    sizeX = _useAdaptivity$sizeX === void 0 ? 'none' : _useAdaptivity$sizeX;
-  var mode = modeProps;
-  if (!modeProps) {
-    // Подробнее в "none" можно прочитать в ADAPTIVITY_GUIDE.md
-    mode = isInsideModal ? 'plain' : 'none';
-  }
-  var isTabPanel = restProps.role === 'tabpanel';
-  if (process.env.NODE_ENV === 'development' && isTabPanel && (!restProps['aria-controls'] || !restProps['id'])) {
-    warn('При использовании роли "tabpanel" необходимо задать значение свойств "aria-controls" и "id"');
-  }
-  var tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;
-  var separatorClassName = classNames("vkuiGroup__separator", separator === 'show' && "vkuiGroup__separator--force");
-  return /*#__PURE__*/React.createElement("section", _extends({}, restProps, {
-    tabIndex: tabIndex,
-    ref: getRootRef,
-    className: classNames("vkuiGroup", platform === Platform.IOS && "vkuiGroup--ios", sizeXClassNames[sizeX], mode && styles["Group--mode-".concat(mode)], styles["Group--padding-".concat(padding)], className)
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiGroup__inner"
-  }, header, children, hasReactNode(description) && /*#__PURE__*/React.createElement(Footnote, {
-    className: "vkuiGroup__description"
-  }, description)), separator !== 'hide' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Spacing, {
-    className: classNames(separatorClassName, "vkuiGroup__separator--spacing"),
-    size: 16
-  }), /*#__PURE__*/React.createElement(Separator, {
-    className: classNames(separatorClassName, "vkuiGroup__separator--separator")
-  })));
+import styles from './Group.module.css';
+const sizeXClassNames = {
+    none: styles['Group--sizeX-none'],
+    [SizeType.COMPACT]: styles['Group--sizeX-compact'],
+    [SizeType.REGULAR]: styles['Group--sizeX-regular']
 };
-var styles = {
-  "Group--mode-plain": "vkuiGroup--mode-plain",
-  "Group--mode-none": "vkuiGroup--mode-none",
-  "Group--mode-card": "vkuiGroup--mode-card",
-  "Group--padding-s": "vkuiGroup--padding-s",
-  "Group--padding-m": "vkuiGroup--padding-m"
+const warn = warnOnce('TabsItem');
+export const Group = ({ header , description , children , separator ='auto' , getRootRef , mode: modeProps , padding ='m' , className , tabIndex: tabIndexProp , ...restProps })=>{
+    const { isInsideModal  } = React.useContext(ModalRootContext);
+    const platform = usePlatform();
+    const { sizeX ='none'  } = useAdaptivity();
+    let mode = modeProps;
+    if (!modeProps) {
+        // Подробнее в "none" можно прочитать в ADAPTIVITY_GUIDE.md
+        mode = isInsideModal ? 'plain' : 'none';
+    }
+    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;
+    const separatorClassName = classNames(styles['Group__separator'], separator === 'show' && styles['Group__separator--force']);
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("section", {
+        ...restProps,
+        tabIndex: tabIndex,
+        ref: getRootRef,
+        className: classNames(styles['Group'], platform === Platform.IOS && styles['Group--ios'], sizeXClassNames[sizeX], mode && ({
+            none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),
+            plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),
+            card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card')
+        })[mode], {
+            s: styles['Group--padding-s'],
+            m: styles['Group--padding-m']
+        }[padding], className)
+    }, header, children, hasReactNode(description) && /*#__PURE__*/ React.createElement(Footnote, {
+        className: styles['Group__description']
+    }, description)), separator !== 'hide' && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Spacing, {
+        className: classNames(separatorClassName, styles['Group__separator--spacing']),
+        size: 16
+    }), /*#__PURE__*/ React.createElement(Separator, {
+        className: classNames(separatorClassName, styles['Group__separator--separator'])
+    })));
 };
+
 //# sourceMappingURL=Group.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Group.js","names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","warnOnce","ModalRootContext","Separator","Spacing","Footnote","sizeXClassNames","none","COMPACT","REGULAR","warn","Group","header","description","children","separator","getRootRef","modeProps","mode","padding","className","tabIndexProp","tabIndex","restProps","useContext","isInsideModal","platform","sizeX","isTabPanel","role","process","env","NODE_ENV","undefined","separatorClassName","IOS","styles"],"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 { 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 extends HasRootRef<HTMLElement>, React.HTMLAttributes<HTMLElement> {\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  children?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabsItem');\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    <section\n      {...restProps}\n      tabIndex={tabIndex}\n      ref={getRootRef}\n      className={classNames(\n        styles['Group'],\n        platform === Platform.IOS && styles['Group--ios'],\n        sizeXClassNames[sizeX],\n        mode && styles[`Group--mode-${mode}`],\n        styles[`Group--padding-${padding}`],\n        className,\n      )}\n    >\n      <div className={styles['Group__inner']}>\n        {header}\n        {children}\n        {hasReactNode(description) && (\n          <Footnote className={styles['Group__description']}>{description}</Footnote>\n        )}\n      </div>\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    </section>\n  );\n};\n"],"mappings":"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"}
+{"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 { 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 extends HasRootRef<HTMLElement>, React.HTMLAttributes<HTMLElement> {\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  children?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabsItem');\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          styles['Group'],\n          platform === Platform.IOS && styles['Group--ios'],\n          sizeXClassNames[sizeX],\n          mode &&\n            {\n              none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),\n              plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),\n              card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card'),\n            }[mode],\n          {\n            s: styles['Group--padding-s'],\n            m: styles['Group--padding-m'],\n          }[padding],\n          className,\n        )}\n      >\n        {header}\n        {children}\n        {hasReactNode(description) && (\n          <Footnote className={styles['Group__description']}>{description}</Footnote>\n        )}\n      </section>\n\n      {separator !== 'hide' && (\n        <React.Fragment>\n          <Spacing\n            className={classNames(separatorClassName, styles['Group__separator--spacing'])}\n            size={16}\n          />\n          <Separator\n            className={classNames(separatorClassName, styles['Group__separator--separator'])}\n          />\n        </React.Fragment>\n      )}\n    </>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","warnOnce","ModalRootContext","Separator","Spacing","Footnote","styles","sizeXClassNames","none","COMPACT","REGULAR","warn","Group","header","description","children","separator","getRootRef","mode","modeProps","padding","className","tabIndex","tabIndexProp","restProps","isInsideModal","useContext","platform","sizeX","isTabPanel","role","process","env","NODE_ENV","undefined","separatorClassName","section","ref","IOS","plain","card","s","m","Fragment","size"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,SAASC,SAAS,QAAQ,yBAAyB;AACnD,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAACP,SAASU,OAAO,CAAC,EAAEH,MAAM,CAAC,uBAAuB;IAClD,CAACP,SAASW,OAAO,CAAC,EAAEJ,MAAM,CAAC,uBAAuB;AACpD;AAyBA,MAAMK,OAAOV,SAAS;AAEtB,OAAO,MAAMW,QAAQ,CAAC,EACpBC,OAAM,EACNC,YAAW,EACXC,SAAQ,EACRC,WAAY,OAAM,EAClBC,WAAU,EACVC,MAAMC,UAAS,EACfC,SAAU,IAAG,EACbC,UAAS,EACTC,UAAUC,aAAY,EACtB,GAAGC,WACQ,GAAK;IAChB,MAAM,EAAEC,cAAa,EAAE,GAAG/B,MAAMgC,UAAU,CAACxB;IAC3C,MAAMyB,WAAW7B;IACjB,MAAM,EAAE8B,OAAQ,OAAM,EAAE,GAAG/B;IAE3B,IAAIqB,OAAoCC;IAExC,IAAI,CAACA,WAAW;QACd,2DAA2D;QAC3DD,OAAOO,gBAAgB,UAAU,MAAM;IACzC,CAAC;IAED,MAAMI,aAAaL,UAAUM,IAAI,KAAK;IAEtC,IACEC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBACzBJ,cACC,CAAA,CAACL,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAb,KACE;IAEJ,CAAC;IAED,MAAMW,WAAWO,cAAcN,iBAAiBW,YAAY,IAAIX,YAAY;IAE5E,MAAMY,qBAAqBxC,WACzBW,MAAM,CAAC,mBAAmB,EAC1BU,cAAc,UAAUV,MAAM,CAAC,0BAA0B;IAG3D,qBACE,wDACE,oBAAC8B;QACE,GAAGZ,SAAS;QACbF,UAAUA;QACVe,KAAKpB;QACLI,WAAW1B,WACTW,MAAM,CAAC,QAAQ,EACfqB,aAAa3B,SAASsC,GAAG,IAAIhC,MAAM,CAAC,aAAa,EACjDC,eAAe,CAACqB,MAAM,EACtBV,QACE,CAAA;YACEV,MAAMb,WAAWW,MAAM,CAAC,mBAAmB,EAAE;YAC7CiC,OAAO5C,WAAWW,MAAM,CAAC,oBAAoB,EAAE;YAC/CkC,MAAM7C,WAAWW,MAAM,CAAC,mBAAmB,EAAE;QAC/C,CAAA,CAAC,CAACY,KAAK,EACT;YACEuB,GAAGnC,MAAM,CAAC,mBAAmB;YAC7BoC,GAAGpC,MAAM,CAAC,mBAAmB;QAC/B,CAAC,CAACc,QAAQ,EACVC;OAGDR,QACAE,UACAnB,aAAakB,8BACZ,oBAACT;QAASgB,WAAWf,MAAM,CAAC,qBAAqB;OAAGQ,eAIvDE,cAAc,wBACb,oBAACtB,MAAMiD,QAAQ,sBACb,oBAACvC;QACCiB,WAAW1B,WAAWwC,oBAAoB7B,MAAM,CAAC,4BAA4B;QAC7EsC,MAAM;sBAER,oBAACzC;QACCkB,WAAW1B,WAAWwC,oBAAoB7B,MAAM,CAAC,8BAA8B;;AAM3F,EAAE"}

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

@@ -1 +1 @@
-.vkuiGroup{color:#000;color:var(--vkui--color_text_primary)}.vkuiGroup__separator--separator,.vkuiGroup__separator--spacing{display:none}.vkuiGroup--mode-plain>.vkuiGroup__separator--separator,.vkuiGroup--sizeX-compact>.vkuiGroup__separator--separator{display:block}@media (max-width:767.9px){.vkuiGroup--sizeX-none>.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__inner{padding-bottom:8px;padding-top:8px}.vkuiGroup--mode-card.vkuiGroup--padding-s>.vkuiGroup__inner{padding:4px}.vkuiGroup--mode-card.vkuiGroup--padding-m>.vkuiGroup__inner{padding:8px}.vkuiGroup--sizeX-compact>.vkuiGroup__inner{padding-left:0;padding-right:0}@media (min-width:768px){.vkuiGroup--sizeX-none.vkuiGroup--padding-s>.vkuiGroup__inner{padding:4px}.vkuiGroup--sizeX-none.vkuiGroup--padding-m>.vkuiGroup__inner{padding:8px}}.vkuiGroup--mode-card>.vkuiGroup__inner{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>.vkuiGroup__inner{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>.vkuiGroup__inner: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>.vkuiGroup__inner: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{padding-bottom:8px;padding-top:8px}@media (max-width:767.9px){.vkuiGroup--sizeX-none.vkuiGroup--mode-none>.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__inner,.vkuiGroup .vkuiGroup>.vkuiGroup__separator{padding-left:0;padding-right:0}.vkuiGroup .vkuiGroup:first-of-type>.vkuiGroup__inner{padding-top:0}.vkuiGroup .vkuiGroup:last-of-type>.vkuiGroup__inner{padding-bottom:0}.vkuiGroup--ios .vkuiGroup__description{padding:4px 12px 16px}.vkuiPanelHeader--vkcom+* .vkuiGroup:first-of-type,.vkuiPanelHeader--vkcom~.vkuiGroup:first-of-type{position:relative;top:-1px}.vkuiPanelHeader--vkcom+* .vkuiGroup:first-of-type .vkuiGroup__inner,.vkuiPanelHeader--vkcom~.vkuiGroup:first-of-type .vkuiGroup__inner{border-top-left-radius:0;border-top-right-radius:0}
+.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}

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { HasRootRef } from '../../types';
 export interface HeaderProps extends React.HTMLAttributes<HTMLElement>, HasRootRef<HTMLElement> {
     mode?: 'primary' | 'secondary' | 'tertiary';
+    size?: 'regular' | 'large';
     subtitle?: React.ReactNode;
     /**
      * Допускаются иконки, текст, Link
@@ -16,4 +17,4 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLElement>, HasRootR
 /**
  * @see https://vkcom.github.io/VKUI/#/Header
  */
-export declare const Header: ({ mode, children, subtitle, indicator, aside, getRootRef, multiline, className, ...restProps }: HeaderProps) => JSX.Element;
+export declare const Header: ({ mode, size, children, subtitle, indicator, aside, getRootRef, multiline, className, ...restProps }: HeaderProps) => JSX.Element;

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

@@ -1,7 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["mode"],
-  _excluded2 = ["mode", "children", "subtitle", "indicator", "aside", "getRootRef", "multiline", "className"];
 import * as React from 'react';
 import { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';
@@ -11,94 +7,109 @@ import { Headline } from '../Typography/Headline/Headline';
 import { Subhead } from '../Typography/Subhead/Subhead';
 import { Text } from '../Typography/Text/Text';
 import { Title } from '../Typography/Title/Title';
-import "./Header.module.css";
-var HeaderContent = function HeaderContent(_ref) {
-  var mode = _ref.mode,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var platform = usePlatform();
-  if (platform === Platform.IOS) {
-    switch (mode) {
-      case 'primary':
-      case 'tertiary':
-        return /*#__PURE__*/React.createElement(Title, _extends({
-          weight: "1",
-          level: "3"
-        }, restProps));
-      case 'secondary':
-        return /*#__PURE__*/React.createElement(Footnote, _extends({
-          weight: "2",
-          caps: true
-        }, restProps));
+import styles from './Header.module.css';
+const HeaderContent = ({ mode , size , ...restProps })=>{
+    const isLarge = size === 'large';
+    const platform = usePlatform();
+    if (platform === Platform.IOS) {
+        switch(mode){
+            case 'primary':
+                return isLarge ? /*#__PURE__*/ React.createElement(Title, {
+                    level: "2",
+                    weight: "2",
+                    ...restProps
+                }) : /*#__PURE__*/ React.createElement(Title, {
+                    weight: "1",
+                    level: "3",
+                    ...restProps
+                });
+            case 'tertiary':
+                return /*#__PURE__*/ React.createElement(Title, {
+                    weight: "1",
+                    level: "3",
+                    ...restProps
+                });
+            case 'secondary':
+                return /*#__PURE__*/ React.createElement(Footnote, {
+                    weight: "2",
+                    caps: true,
+                    ...restProps
+                });
+        }
     }
-  }
-  if (platform === Platform.VKCOM) {
-    switch (mode) {
-      case 'primary':
-        return /*#__PURE__*/React.createElement(Headline, _extends({
-          weight: "3"
-        }, restProps));
-      case 'secondary':
-      case 'tertiary':
-        return /*#__PURE__*/React.createElement(Footnote, restProps);
+    if (platform === Platform.VKCOM) {
+        switch(mode){
+            case 'primary':
+                return isLarge ? /*#__PURE__*/ React.createElement(Title, {
+                    level: "2",
+                    weight: "1",
+                    ...restProps
+                }) : /*#__PURE__*/ React.createElement(Headline, {
+                    weight: "3",
+                    ...restProps
+                });
+            case 'secondary':
+            case 'tertiary':
+                return /*#__PURE__*/ React.createElement(Footnote, restProps);
+        }
     }
-  }
-  switch (mode) {
-    case 'primary':
-    case 'tertiary':
-      return /*#__PURE__*/React.createElement(Headline, _extends({
-        weight: "2"
-      }, restProps));
-    case 'secondary':
-      return /*#__PURE__*/React.createElement(Footnote, _extends({
-        weight: "1",
-        caps: true
-      }, restProps));
-  }
-  return null;
+    switch(mode){
+        case 'primary':
+            return isLarge ? /*#__PURE__*/ React.createElement(Title, {
+                level: "2",
+                weight: "2",
+                ...restProps
+            }) : /*#__PURE__*/ React.createElement(Headline, {
+                weight: "2",
+                ...restProps
+            });
+        case 'tertiary':
+            return /*#__PURE__*/ React.createElement(Headline, {
+                weight: "2",
+                ...restProps
+            });
+        case 'secondary':
+            return /*#__PURE__*/ React.createElement(Footnote, {
+                weight: "1",
+                caps: true,
+                ...restProps
+            });
+    }
+    return null;
 };
-
 /**
  * @see https://vkcom.github.io/VKUI/#/Header
- */
-export var Header = function Header(_ref2) {
-  var _ref2$mode = _ref2.mode,
-    mode = _ref2$mode === void 0 ? 'primary' : _ref2$mode,
-    children = _ref2.children,
-    subtitle = _ref2.subtitle,
-    indicator = _ref2.indicator,
-    aside = _ref2.aside,
-    getRootRef = _ref2.getRootRef,
-    multiline = _ref2.multiline,
-    className = _ref2.className,
-    restProps = _objectWithoutProperties(_ref2, _excluded2);
-  var platform = usePlatform();
-  var AsideTypography = platform === Platform.VKCOM ? Subhead : Text;
-  var SubtitleTypography = mode === 'secondary' ? Subhead : Footnote;
-  return /*#__PURE__*/React.createElement("header", _extends({}, restProps, {
-    ref: getRootRef,
-    className: classNames("vkuiHeader", platform === Platform.VKCOM && "vkuiHeader--vkcom", platform === Platform.ANDROID && "vkuiHeader--android", platform === Platform.IOS && "vkuiHeader--ios", styles["Header--mode-".concat(mode)], isPrimitiveReactNode(indicator) && "vkuiHeader--pi", className)
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiHeader__main"
-  }, /*#__PURE__*/React.createElement(HeaderContent, {
-    className: "vkuiHeader__content",
-    Component: "span",
-    mode: mode
-  }, /*#__PURE__*/React.createElement("span", {
-    className: classNames("vkuiHeader__content-in", multiline && "vkuiHeader__content-in--multiline")
-  }, children), hasReactNode(indicator) && /*#__PURE__*/React.createElement(Footnote, {
-    className: "vkuiHeader__indicator",
-    weight: mode === 'primary' || mode === 'secondary' ? '1' : undefined
-  }, indicator)), hasReactNode(subtitle) && /*#__PURE__*/React.createElement(SubtitleTypography, {
-    className: "vkuiHeader__subtitle",
-    Component: "span"
-  }, subtitle)), hasReactNode(aside) && /*#__PURE__*/React.createElement(AsideTypography, {
-    className: "vkuiHeader__aside",
-    Component: "span"
-  }, aside));
-};
-var styles = {
-  "Header--mode-primary": "vkuiHeader--mode-primary",
-  "Header--mode-secondary": "vkuiHeader--mode-secondary",
-  "Header--mode-tertiary": "vkuiHeader--mode-tertiary"
+ */ export const Header = ({ mode ='primary' , size ='regular' , children , subtitle , indicator , aside , getRootRef , multiline , className , ...restProps })=>{
+    const platform = usePlatform();
+    const AsideTypography = platform === Platform.VKCOM ? Subhead : Text;
+    const SubtitleTypography = mode === 'secondary' ? Subhead : Footnote;
+    return /*#__PURE__*/ React.createElement("header", {
+        ...restProps,
+        ref: getRootRef,
+        className: classNames(styles['Header'], platform === Platform.VKCOM && styles['Header--vkcom'], platform === Platform.ANDROID && styles['Header--android'], platform === Platform.IOS && styles['Header--ios'], {
+            primary: styles['Header--mode-primary'],
+            secondary: styles['Header--mode-secondary'],
+            tertiary: styles['Header--mode-tertiary']
+        }[mode], isPrimitiveReactNode(indicator) && styles['Header--pi'], className)
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles['Header__main']
+    }, /*#__PURE__*/ React.createElement(HeaderContent, {
+        className: styles['Header__content'],
+        Component: "span",
+        mode: mode,
+        size: size
+    }, /*#__PURE__*/ React.createElement("span", {
+        className: classNames(styles['Header__content-in'], multiline && styles['Header__content-in--multiline'])
+    }, children), hasReactNode(indicator) && /*#__PURE__*/ React.createElement(Footnote, {
+        className: styles['Header__indicator'],
+        weight: mode === 'primary' || mode === 'secondary' ? '1' : undefined
+    }, indicator)), hasReactNode(subtitle) && /*#__PURE__*/ React.createElement(SubtitleTypography, {
+        className: styles['Header__subtitle'],
+        Component: "span"
+    }, subtitle)), hasReactNode(aside) && /*#__PURE__*/ React.createElement(AsideTypography, {
+        className: styles['Header__aside'],
+        Component: "span"
+    }, aside));
 };
+
 //# sourceMappingURL=Header.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Header.js","names":["React","classNames","hasReactNode","isPrimitiveReactNode","usePlatform","Platform","Footnote","Headline","Subhead","Text","Title","HeaderContent","mode","restProps","platform","IOS","VKCOM","Header","children","subtitle","indicator","aside","getRootRef","multiline","className","AsideTypography","SubtitleTypography","ANDROID","styles","undefined"],"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 { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\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  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' | 'className'> & HasComponent;\n\nconst HeaderContent = ({ mode, ...restProps }: HeaderContentProps) => {\n  const platform = usePlatform();\n  if (platform === Platform.IOS) {\n    switch (mode) {\n      case 'primary':\n      case 'tertiary':\n        return <Title weight=\"1\" level=\"3\" {...restProps} />;\n      case 'secondary':\n        return <Footnote weight=\"2\" caps {...restProps} />;\n    }\n  }\n\n  if (platform === Platform.VKCOM) {\n    switch (mode) {\n      case 'primary':\n        return <Headline weight=\"3\" {...restProps} />;\n      case 'secondary':\n      case 'tertiary':\n        return <Footnote {...restProps} />;\n    }\n  }\n\n  switch (mode) {\n    case 'primary':\n    case 'tertiary':\n      return <Headline weight=\"2\" {...restProps} />;\n    case 'secondary':\n      return <Footnote weight=\"1\" caps {...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  children,\n  subtitle,\n  indicator,\n  aside,\n  getRootRef,\n  multiline,\n  className,\n  ...restProps\n}: HeaderProps) => {\n  const platform = usePlatform();\n\n  const AsideTypography = platform === Platform.VKCOM ? Subhead : Text;\n  const SubtitleTypography = mode === 'secondary' ? Subhead : Footnote;\n\n  return (\n    <header\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Header'],\n        platform === Platform.VKCOM && styles['Header--vkcom'],\n        platform === Platform.ANDROID && styles['Header--android'],\n        platform === Platform.IOS && styles['Header--ios'],\n        styles[`Header--mode-${mode}`],\n        isPrimitiveReactNode(indicator) && styles['Header--pi'],\n        className,\n      )}\n    >\n      <div className={styles['Header__main']}>\n        <HeaderContent className={styles['Header__content']} Component=\"span\" mode={mode}>\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\n              className={styles['Header__indicator']}\n              weight={mode === 'primary' || mode === 'secondary' ? '1' : undefined}\n            >\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n\n        {hasReactNode(subtitle) && (\n          <SubtitleTypography className={styles['Header__subtitle']} Component=\"span\">\n            {subtitle}\n          </SubtitleTypography>\n        )}\n      </div>\n\n      {hasReactNode(aside) && (\n        <AsideTypography className={styles['Header__aside']} Component=\"span\">\n          {aside}\n        </AsideTypography>\n      )}\n    </header>\n  );\n};\n"],"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 { Platform } from '../../lib/platform';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\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 'tertiary':\n        return <Title weight=\"1\" level=\"3\" {...restProps} />;\n      case 'secondary':\n        return <Footnote weight=\"2\" caps {...restProps} />;\n    }\n  }\n\n  if (platform === Platform.VKCOM) {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"1\" {...restProps} />\n        ) : (\n          <Headline weight=\"3\" {...restProps} />\n        );\n      case 'secondary':\n      case 'tertiary':\n        return <Footnote {...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 'tertiary':\n      return <Headline weight=\"2\" {...restProps} />;\n    case 'secondary':\n      return <Footnote weight=\"1\" caps {...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  const AsideTypography = platform === Platform.VKCOM ? Subhead : Text;\n  const SubtitleTypography = mode === 'secondary' ? Subhead : Footnote;\n\n  return (\n    <header\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Header'],\n        platform === Platform.VKCOM && styles['Header--vkcom'],\n        platform === Platform.ANDROID && styles['Header--android'],\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        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\n              className={styles['Header__indicator']}\n              weight={mode === 'primary' || mode === 'secondary' ? '1' : undefined}\n            >\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n\n        {hasReactNode(subtitle) && (\n          <SubtitleTypography className={styles['Header__subtitle']} Component=\"span\">\n            {subtitle}\n          </SubtitleTypography>\n        )}\n      </div>\n\n      {hasReactNode(aside) && (\n        <AsideTypography className={styles['Header__aside']} Component=\"span\">\n          {aside}\n        </AsideTypography>\n      )}\n    </header>\n  );\n};\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","usePlatform","Platform","Footnote","Headline","Subhead","Text","Title","styles","HeaderContent","mode","size","restProps","isLarge","platform","IOS","level","weight","caps","VKCOM","Header","children","subtitle","indicator","aside","getRootRef","multiline","className","AsideTypography","SubtitleTypography","header","ref","ANDROID","primary","secondary","tertiary","div","Component","span","undefined"],"mappings":"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"}

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

@@ -1 +1 @@
-.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;overflow:hidden;text-overflow:ellipsis}.vkuiHeader__content{align-items:baseline;display:flex}.vkuiHeader__content-in{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{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiHeader--mode-primary .vkuiHeader__content:not(:last-child){margin-top:-1px}.vkuiHeader--mode-secondary:not(.vkuiHeader--pi) .vkuiHeader__main,.vkuiHeader--mode-tertiary .vkuiHeader__main,.vkuiHeader__indicator{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--android .vkuiHeader__main{margin:15px 0 9px}.vkuiHeader--android.vkuiHeader--mode-tertiary .vkuiHeader__main{margin-top:11px}.vkuiHeader--ios .vkuiHeader__main{margin:13px 0 9px}.vkuiHeader--ios.vkuiHeader--mode-secondary .vkuiHeader__main{margin:14px 0 10px}.vkuiHeader--ios.vkuiHeader--mode-tertiary .vkuiHeader__main{margin-top:9px}.vkuiHeader--vkcom{align-items:center;height:64px}.vkuiHeader--vkcom .vkuiHeader__main{color:#000;color:var(--vkui--color_text_primary)}.vkuiHeader--vkcom.vkuiHeader--mode-primary .vkuiHeader__content:not(:last-child){margin-top:0}.vkuiHeader--vkcom.vkuiHeader--mode-secondary{height:56px}.vkuiHeader--vkcom.vkuiHeader--mode-tertiary{height:40px}.vkuiGroup--mode-plain:not(:first-of-type) .vkuiGroup__inner>.vkuiHeader:first-child,.vkuiGroup--mode-plain:not(:first-of-type) .vkuiGroup__inner>.vkuiTappable:first-child>.vkuiHeader{margin-top:-16px}@media (max-width:767.9px){.vkuiGroup--mode-none:not(:first-of-type) .vkuiGroup__inner>.vkuiHeader:first-child,.vkuiGroup--mode-none:not(:first-of-type) .vkuiGroup__inner>.vkuiTappable:first-child>.vkuiHeader{margin-top:-16px}}.vkuiGroup--mode-card>.vkuiGroup__inner>.vkuiHeader:not(.vkuiHeader--mode-tertiary):first-child,.vkuiGroup--mode-card>.vkuiGroup__inner>.vkuiTappable:first-child>.vkuiHeader:not(.vkuiHeader--mode-tertiary){margin-top:-4px}@media (min-width:768px){.vkuiGroup--mode-none>.vkuiGroup__inner>.vkuiHeader:not(.vkuiHeader--mode-tertiary):first-child,.vkuiGroup--mode-none>.vkuiGroup__inner>.vkuiTappable:first-child>.vkuiHeader:not(.vkuiHeader--mode-tertiary){margin-top:-4px}}
+.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;overflow:hidden;text-overflow:ellipsis}.vkuiHeader__content{align-items:baseline;display:flex}.vkuiHeader__content-in{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{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiHeader--mode-primary .vkuiHeader__content:not(:last-child){margin-top:-1px}.vkuiHeader--mode-secondary:not(.vkuiHeader--pi) .vkuiHeader__main,.vkuiHeader--mode-tertiary .vkuiHeader__main,.vkuiHeader__indicator{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--android .vkuiHeader__main{margin:15px 0 9px}.vkuiHeader--android.vkuiHeader--mode-tertiary .vkuiHeader__main{margin-top:11px}.vkuiHeader--ios .vkuiHeader__main{margin:13px 0 9px}.vkuiHeader--ios.vkuiHeader--mode-secondary .vkuiHeader__main{margin:14px 0 10px}.vkuiHeader--ios.vkuiHeader--mode-tertiary .vkuiHeader__main{margin-top:9px}.vkuiHeader--vkcom{align-items:center;height:64px}.vkuiHeader--vkcom .vkuiHeader__main{color:#000;color:var(--vkui--color_text_primary)}.vkuiHeader--vkcom.vkuiHeader--mode-primary .vkuiHeader__content:not(:last-child){margin-top:0}.vkuiHeader--vkcom.vkuiHeader--mode-secondary{height:56px}.vkuiHeader--vkcom.vkuiHeader--mode-tertiary{height:40px}.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){.vkuiInternal.Group--mode-none:not(:first-of-type)>.vkuiHeader:first-child,.vkuiInternal.Group--mode-none:not(:first-of-type)>.vkuiInternalTappable:first-child>.vkuiHeader{margin-top:-16px}}.vkuiInternal.Group--mode-card>.vkuiHeader:not(.vkuiHeader--mode-tertiary):first-child,.vkuiInternal.Group--mode-card>.vkuiInternalTappable:first-child>.vkuiHeader:not(.vkuiHeader--mode-tertiary){margin-top:-4px}@media (min-width:768px){.vkuiInternal.Group--mode-none>.vkuiHeader:not(.vkuiHeader--mode-tertiary):first-child,.vkuiInternal.Group--mode-none>.vkuiInternalTappable:first-child>.vkuiHeader:not(.vkuiHeader--mode-tertiary){margin-top:-4px}}

package/dist/cssm/components/HorizontalCell/HorizontalCell.js

@@ -1,7 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["size", "children"],
-  _excluded2 = ["className", "header", "style", "subtitle", "size", "children", "getRootRef", "getRef"];
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { Avatar } from '../Avatar/Avatar';
@@ -9,51 +5,36 @@ import { Tappable } from '../Tappable/Tappable';
 import { Caption } from '../Typography/Caption/Caption';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import { Subhead } from '../Typography/Subhead/Subhead';
-import "./HorizontalCell.module.css";
-var CellTypography = function CellTypography(_ref) {
-  var size = _ref.size,
-    children = _ref.children,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  return size === 's' ? /*#__PURE__*/React.createElement(Caption, restProps, children) : /*#__PURE__*/React.createElement(Subhead, restProps, children);
+import styles from './HorizontalCell.module.css';
+const CellTypography = ({ size , children , ...restProps })=>{
+    return size === 's' ? /*#__PURE__*/ React.createElement(Caption, restProps, children) : /*#__PURE__*/ React.createElement(Subhead, restProps, children);
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/HorizontalCell
- */
-export var HorizontalCell = function HorizontalCell(_ref2) {
-  var className = _ref2.className,
-    header = _ref2.header,
-    style = _ref2.style,
-    subtitle = _ref2.subtitle,
-    _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? 's' : _ref2$size,
-    _ref2$children = _ref2.children,
-    children = _ref2$children === void 0 ? /*#__PURE__*/React.createElement(Avatar, {
-      size: 56
-    }) : _ref2$children,
-    getRootRef = _ref2.getRootRef,
-    getRef = _ref2.getRef,
-    restProps = _objectWithoutProperties(_ref2, _excluded2);
-  return /*#__PURE__*/React.createElement("div", {
-    ref: getRootRef,
-    style: style,
-    className: classNames("vkuiHorizontalCell", styles["HorizontalCell--size-".concat(size)], className)
-  }, /*#__PURE__*/React.createElement(Tappable, _extends({
-    className: "vkuiHorizontalCell__body",
-    getRootRef: getRef
-  }, restProps), hasReactNode(children) && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiHorizontalCell__image"
-  }, children), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiHorizontalCell__content"
-  }, hasReactNode(header) && /*#__PURE__*/React.createElement(CellTypography, {
-    size: size,
-    className: "vkuiHorizontalCell__title"
-  }, header), hasReactNode(subtitle) && /*#__PURE__*/React.createElement(Footnote, {
-    className: "vkuiHorizontalCell__subtitle"
-  }, subtitle))));
-};
-var styles = {
-  "HorizontalCell--size-s": "vkuiHorizontalCell--size-s",
-  "HorizontalCell--size-m": "vkuiHorizontalCell--size-m",
-  "HorizontalCell--size-l": "vkuiHorizontalCell--size-l"
+ */ export const HorizontalCell = ({ className , header , style , subtitle , size ='s' , children =/*#__PURE__*/ React.createElement(Avatar, {
+    size: 56
+}) , getRootRef , getRef , ...restProps })=>{
+    return /*#__PURE__*/ React.createElement("div", {
+        ref: getRootRef,
+        style: style,
+        className: classNames(styles['HorizontalCell'], {
+            s: styles['HorizontalCell--size-s'],
+            m: styles['HorizontalCell--size-m'],
+            l: styles['HorizontalCell--size-l']
+        }[size], className)
+    }, /*#__PURE__*/ React.createElement(Tappable, {
+        className: styles['HorizontalCell__body'],
+        getRootRef: getRef,
+        ...restProps
+    }, hasReactNode(children) && /*#__PURE__*/ React.createElement("div", {
+        className: styles['HorizontalCell__image']
+    }, children), /*#__PURE__*/ React.createElement("div", {
+        className: styles['HorizontalCell__content']
+    }, hasReactNode(header) && /*#__PURE__*/ React.createElement(CellTypography, {
+        size: size
+    }, header), hasReactNode(subtitle) && /*#__PURE__*/ React.createElement(Footnote, {
+        className: styles['HorizontalCell__subtitle']
+    }, subtitle))));
 };
+
 //# sourceMappingURL=HorizontalCell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCell.js","names":["React","classNames","hasReactNode","Avatar","Tappable","Caption","Footnote","Subhead","CellTypography","size","children","restProps","HorizontalCell","className","header","style","subtitle","getRootRef","getRef","styles"],"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCell.module.css';\n\ninterface CellTypographyProps extends React.HTMLAttributes<HTMLDivElement> {\n  size: HorizontalCellProps['size'];\n}\n\nconst CellTypography = ({ size, children, ...restProps }: CellTypographyProps) => {\n  return size === 's' ? (\n    <Caption {...restProps}>{children}</Caption>\n  ) : (\n    <Subhead {...restProps}>{children}</Subhead>\n  );\n};\n\nexport interface HorizontalCellProps\n  extends React.AnchorHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasComponent {\n  size?: 's' | 'm' | 'l';\n  header?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n  className,\n  header,\n  style,\n  subtitle,\n  size = 's',\n  children = <Avatar size={56} />,\n  getRootRef,\n  getRef,\n  ...restProps\n}: HorizontalCellProps) => {\n  return (\n    <div\n      ref={getRootRef}\n      style={style}\n      className={classNames(\n        styles['HorizontalCell'],\n        styles[`HorizontalCell--size-${size}`],\n        className,\n      )}\n    >\n      <Tappable className={styles['HorizontalCell__body']} getRootRef={getRef} {...restProps}>\n        {hasReactNode(children) && (\n          <div className={styles['HorizontalCell__image']}>{children}</div>\n        )}\n        <div className={styles['HorizontalCell__content']}>\n          {hasReactNode(header) && (\n            <CellTypography size={size} className={styles['HorizontalCell__title']}>\n              {header}\n            </CellTypography>\n          )}\n          {hasReactNode(subtitle) && (\n            <Footnote className={styles['HorizontalCell__subtitle']}>{subtitle}</Footnote>\n          )}\n        </div>\n      </Tappable>\n    </div>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE1D,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,OAAO,QAAQ,+BAA+B;AACvD,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,OAAO,QAAQ,+BAA+B;AAAC;AAOxD,IAAMC,cAAc,GAAG,SAAjBA,cAAc,OAA8D;EAAA,IAAxDC,IAAI,QAAJA,IAAI;IAAEC,QAAQ,QAARA,QAAQ;IAAKC,SAAS;EACpD,OAAOF,IAAI,KAAK,GAAG,gBACjB,oBAAC,OAAO,EAAKE,SAAS,EAAGD,QAAQ,CAAW,gBAE5C,oBAAC,OAAO,EAAKC,SAAS,EAAGD,QAAQ,CAClC;AACH,CAAC;AAaD;AACA;AACA;AACA,OAAO,IAAME,cAAc,GAAG,SAAjBA,cAAc,QAUA;EAAA,IATzBC,SAAS,SAATA,SAAS;IACTC,MAAM,SAANA,MAAM;IACNC,KAAK,SAALA,KAAK;IACLC,QAAQ,SAARA,QAAQ;IAAA,mBACRP,IAAI;IAAJA,IAAI,2BAAG,GAAG;IAAA,uBACVC,QAAQ;IAARA,QAAQ,4CAAG,oBAAC,MAAM;MAAC,IAAI,EAAE;IAAG,EAAG;IAC/BO,UAAU,SAAVA,UAAU;IACVC,MAAM,SAANA,MAAM;IACHP,SAAS;EAEZ,oBACE;IACE,GAAG,EAAEM,UAAW;IAChB,KAAK,EAAEF,KAAM;IACb,SAAS,EAAEd,UAAU,uBAEnBkB,MAAM,gCAAyBV,IAAI,EAAG,EACtCI,SAAS;EACT,gBAEF,oBAAC,QAAQ;IAAC,SAAS,4BAAiC;IAAC,UAAU,EAAEK;EAAO,GAAKP,SAAS,GACnFT,YAAY,CAACQ,QAAQ,CAAC,iBACrB;IAAK,SAAS;EAAkC,GAAEA,QAAQ,CAC3D,eACD;IAAK,SAAS;EAAoC,GAC/CR,YAAY,CAACY,MAAM,CAAC,iBACnB,oBAAC,cAAc;IAAC,IAAI,EAAEL,IAAK;IAAC,SAAS;EAAkC,GACpEK,MAAM,CAEV,EACAZ,YAAY,CAACc,QAAQ,CAAC,iBACrB,oBAAC,QAAQ;IAAC,SAAS;EAAqC,GAAEA,QAAQ,CACnE,CACG,CACG,CACP;AAEV,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCell.module.css';\n\ninterface CellTypographyProps extends React.HTMLAttributes<HTMLDivElement> {\n  size: HorizontalCellProps['size'];\n}\n\nconst CellTypography = ({ size, children, ...restProps }: CellTypographyProps) => {\n  return size === 's' ? (\n    <Caption {...restProps}>{children}</Caption>\n  ) : (\n    <Subhead {...restProps}>{children}</Subhead>\n  );\n};\n\nexport interface HorizontalCellProps\n  extends React.AnchorHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasComponent {\n  size?: 's' | 'm' | 'l';\n  header?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n  className,\n  header,\n  style,\n  subtitle,\n  size = 's',\n  children = <Avatar size={56} />,\n  getRootRef,\n  getRef,\n  ...restProps\n}: HorizontalCellProps) => {\n  return (\n    <div\n      ref={getRootRef}\n      style={style}\n      className={classNames(\n        styles['HorizontalCell'],\n        {\n          s: styles['HorizontalCell--size-s'],\n          m: styles['HorizontalCell--size-m'],\n          l: styles['HorizontalCell--size-l'],\n        }[size],\n        className,\n      )}\n    >\n      <Tappable className={styles['HorizontalCell__body']} getRootRef={getRef} {...restProps}>\n        {hasReactNode(children) && (\n          <div className={styles['HorizontalCell__image']}>{children}</div>\n        )}\n        <div className={styles['HorizontalCell__content']}>\n          {hasReactNode(header) && <CellTypography size={size}>{header}</CellTypography>}\n          {hasReactNode(subtitle) && (\n            <Footnote className={styles['HorizontalCell__subtitle']}>{subtitle}</Footnote>\n          )}\n        </div>\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["React","classNames","hasReactNode","Avatar","Tappable","Caption","Footnote","Subhead","styles","CellTypography","size","children","restProps","HorizontalCell","className","header","style","subtitle","getRootRef","getRef","div","ref","s","m","l"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,8BAA8B;AAMjD,MAAMC,iBAAiB,CAAC,EAAEC,KAAI,EAAEC,SAAQ,EAAE,GAAGC,WAAgC,GAAK;IAChF,OAAOF,SAAS,oBACd,oBAACL,SAAYO,WAAYD,0BAEzB,oBAACJ,SAAYK,WAAYD,SAC1B;AACH;AAaA;;CAEC,GACD,OAAO,MAAME,iBAAiB,CAAC,EAC7BC,UAAS,EACTC,OAAM,EACNC,MAAK,EACLC,SAAQ,EACRP,MAAO,IAAG,EACVC,wBAAW,oBAACR;IAAOO,MAAM;GAAM,EAC/BQ,WAAU,EACVC,OAAM,EACN,GAAGP,WACiB,GAAK;IACzB,qBACE,oBAACQ;QACCC,KAAKH;QACLF,OAAOA;QACPF,WAAWb,WACTO,MAAM,CAAC,iBAAiB,EACxB;YACEc,GAAGd,MAAM,CAAC,yBAAyB;YACnCe,GAAGf,MAAM,CAAC,yBAAyB;YACnCgB,GAAGhB,MAAM,CAAC,yBAAyB;QACrC,CAAC,CAACE,KAAK,EACPI;qBAGF,oBAACV;QAASU,WAAWN,MAAM,CAAC,uBAAuB;QAAEU,YAAYC;QAAS,GAAGP,SAAS;OACnFV,aAAaS,2BACZ,oBAACS;QAAIN,WAAWN,MAAM,CAAC,wBAAwB;OAAGG,yBAEpD,oBAACS;QAAIN,WAAWN,MAAM,CAAC,0BAA0B;OAC9CN,aAAaa,yBAAW,oBAACN;QAAeC,MAAMA;OAAOK,SACrDb,aAAae,2BACZ,oBAACX;QAASQ,WAAWN,MAAM,CAAC,2BAA2B;OAAGS;AAMtE,EAAE"}