@vkontakte/vkui 5.5.4 → 5.6.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['FormItem--sizeY-compact'],\n    'vkuiInternalFormItem--sizeY-compact',\n  ),\n};\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  bottom?: React.ReactNode;\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   *\n   * Режим `indent` предназначен для визуального отступа\n   */\n  removable?: boolean | 'indent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  bottom,\n  status = 'default',\n  Component = 'div',\n  removable,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  className,\n  htmlFor,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(top) && (\n        <Subhead\n          className={styles['FormItem__top']}\n          Component={htmlFor ? 'label' : 'h5'}\n          htmlFor={htmlFor}\n        >\n          {top}\n        </Subhead>\n      )}\n      {children}\n      {hasReactNode(bottom) && <Footnote className={styles['FormItem__bottom']}>{bottom}</Footnote>}\n    </React.Fragment>\n  );\n\n  return (\n    <Component\n      {...restProps}\n      ref={rootEl}\n      className={classNames(\n        styles['FormItem'],\n        'vkuiInternalFormItem',\n        status !== 'default' &&\n          {\n            error: classNames(\n              styles['FormItem--status-error'],\n              'vkuiInternalFormItem--status-error',\n            ),\n            valid: classNames(\n              styles['FormItem--status-valid'],\n              'vkuiInternalFormItem--status-valid',\n            ),\n          }[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        hasReactNode(top) &&\n          classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n        className,\n      )}\n    >\n      {removable ? (\n        <Removable\n          align=\"start\"\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          removePlaceholder={removePlaceholder}\n          indent={removable === 'indent'}\n        >\n          <div\n            className={classNames(styles['FormItem__removable'], 'vkuiInternalFormItem__removable')}\n          >\n            {wrappedChildren}\n          </div>\n        </Removable>\n      ) : (\n        wrappedChildren\n      )}\n    </Component>\n  );\n};\n"],"names":["React","classNames","hasReactNode","noop","useAdaptivity","useExternRef","SizeType","Removable","Footnote","Subhead","styles","sizeYClassNames","none","COMPACT","FormItem","children","top","bottom","status","Component","removable","onRemove","removePlaceholder","getRootRef","className","htmlFor","restProps","rootEl","sizeY","wrappedChildren","Fragment","ref","error","valid","REGULAR","align","e","current","indent","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMX,WAAWS,MAAM,CAAC,uBAAuB,EAAE;IACjD,CAACJ,SAASO,QAAQ,EAAEZ,WAClBS,MAAM,CAAC,0BAA0B,EACjC;AAEJ;AAkBA;;CAEC,GACD,OAAO,MAAMI,WAAW,CAAC,EACvBC,SAAQ,EACRC,IAAG,EACHC,OAAM,EACNC,QAAS,UAAS,EAClBC,WAAY,MAAK,EACjBC,UAAS,EACTC,UAAWlB,KAAI,EACfmB,mBAAoB,UAAS,EAC7BC,WAAU,EACVC,UAAS,EACTC,QAAO,EACP,GAAGC,WACW;IACd,MAAMC,SAAStB,aAAakB;IAC5B,MAAM,EAAEK,OAAQ,OAAM,EAAE,GAAGxB;IAE3B,MAAMyB,gCACJ,oBAAC7B,MAAM8B,gBACJ5B,aAAac,sBACZ,oBAACP;QACCe,WAAWd,MAAM,CAAC,gBAAgB;QAClCS,WAAWM,UAAU,UAAU;QAC/BA,SAASA;OAERT,MAGJD,UACAb,aAAae,yBAAW,oBAACT;QAASgB,WAAWd,MAAM,CAAC,mBAAmB;OAAGO;IAI/E,qBACE,oBAACE;QACE,GAAGO,SAAS;QACbK,KAAKJ;QACLH,WAAWvB,WACTS,MAAM,CAAC,WAAW,EAClB,wBACAQ,WAAW,aACT,CAAA;YACEc,OAAO/B,WACLS,MAAM,CAAC,yBAAyB,EAChC;YAEFuB,OAAOhC,WACLS,MAAM,CAAC,yBAAyB,EAChC;QAEJ,CAAA,CAAC,CAACQ,OAAO,EACXU,UAAUtB,SAAS4B,WAAWvB,eAAe,CAACiB,MAAM,EACpD1B,aAAac,QACXf,WAAWS,MAAM,CAAC,oBAAoB,EAAE,kCAC1CU,aAAanB,WAAWS,MAAM,CAAC,sBAAsB,EAAE,oCACvDc;OAGDJ,0BACC,oBAACb;QACC4B,OAAM;QACNd,UAAU,CAACe;YACT,IAAIT,QAAQU,SAAS;gBACnBhB,SAASe,GAAGT,OAAOU;YACrB;QACF;QACAf,mBAAmBA;QACnBgB,QAAQlB,cAAc;qBAEtB,oBAACmB;QACCf,WAAWvB,WAAWS,MAAM,CAAC,sBAAsB,EAAE;OAEpDmB,oBAILA;AAIR,EAAE"}
+{"version":3,"sources":["../../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['FormItem--sizeY-compact'],\n    'vkuiInternalFormItem--sizeY-compact',\n  ),\n};\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  bottom?: React.ReactNode;\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   *\n   * Режим `indent` предназначен для визуального отступа\n   */\n  removable?: boolean | 'indent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  bottom,\n  status = 'default',\n  Component = 'div',\n  removable,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  className,\n  htmlFor,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(top) && (\n        <Subhead\n          className={styles['FormItem__top']}\n          Component={htmlFor ? 'label' : 'h5'}\n          htmlFor={htmlFor}\n        >\n          {top}\n        </Subhead>\n      )}\n      {children}\n      {hasReactNode(bottom) && <Footnote className={styles['FormItem__bottom']}>{bottom}</Footnote>}\n    </React.Fragment>\n  );\n\n  return (\n    <Component\n      {...restProps}\n      ref={rootEl}\n      className={classNames(\n        styles['FormItem'],\n        'vkuiInternalFormItem',\n        status !== 'default' &&\n          {\n            error: classNames(\n              styles['FormItem--status-error'],\n              'vkuiInternalFormItem--status-error',\n            ),\n            valid: classNames(\n              styles['FormItem--status-valid'],\n              'vkuiInternalFormItem--status-valid',\n            ),\n          }[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        hasReactNode(top) &&\n          classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n        className,\n      )}\n    >\n      {removable ? (\n        <Removable\n          align=\"start\"\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          removePlaceholder={removePlaceholder}\n          indent={removable === 'indent'}\n        >\n          <div\n            className={classNames(styles['FormItem__removable'], 'vkuiInternalFormItem__removable')}\n          >\n            {wrappedChildren}\n          </div>\n        </Removable>\n      ) : (\n        wrappedChildren\n      )}\n    </Component>\n  );\n};\n"],"names":["React","classNames","hasReactNode","noop","useAdaptivity","useExternRef","SizeType","Removable","Footnote","Subhead","styles","sizeYClassNames","none","COMPACT","FormItem","children","top","bottom","status","Component","removable","onRemove","removePlaceholder","getRootRef","className","htmlFor","restProps","rootEl","sizeY","wrappedChildren","Fragment","ref","error","valid","REGULAR","align","e","current","indent","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMX,WAAWS,MAAM,CAAC,uBAAuB,EAAE;IACjD,CAACJ,SAASO,OAAO,CAAC,EAAEZ,WAClBS,MAAM,CAAC,0BAA0B,EACjC;AAEJ;AAkBA;;CAEC,GACD,OAAO,MAAMI,WAAW,CAAC,EACvBC,QAAQ,EACRC,GAAG,EACHC,MAAM,EACNC,SAAS,SAAS,EAClBC,YAAY,KAAK,EACjBC,SAAS,EACTC,WAAWlB,IAAI,EACfmB,oBAAoB,SAAS,EAC7BC,UAAU,EACVC,SAAS,EACTC,OAAO,EACP,GAAGC,WACW;IACd,MAAMC,SAAStB,aAAakB;IAC5B,MAAM,EAAEK,QAAQ,MAAM,EAAE,GAAGxB;IAE3B,MAAMyB,gCACJ,oBAAC7B,MAAM8B,QAAQ,QACZ5B,aAAac,sBACZ,oBAACP;QACCe,WAAWd,MAAM,CAAC,gBAAgB;QAClCS,WAAWM,UAAU,UAAU;QAC/BA,SAASA;OAERT,MAGJD,UACAb,aAAae,yBAAW,oBAACT;QAASgB,WAAWd,MAAM,CAAC,mBAAmB;OAAGO;IAI/E,qBACE,oBAACE;QACE,GAAGO,SAAS;QACbK,KAAKJ;QACLH,WAAWvB,WACTS,MAAM,CAAC,WAAW,EAClB,wBACAQ,WAAW,aACT,CAAA;YACEc,OAAO/B,WACLS,MAAM,CAAC,yBAAyB,EAChC;YAEFuB,OAAOhC,WACLS,MAAM,CAAC,yBAAyB,EAChC;QAEJ,CAAA,CAAC,CAACQ,OAAO,EACXU,UAAUtB,SAAS4B,OAAO,IAAIvB,eAAe,CAACiB,MAAM,EACpD1B,aAAac,QACXf,WAAWS,MAAM,CAAC,oBAAoB,EAAE,kCAC1CU,aAAanB,WAAWS,MAAM,CAAC,sBAAsB,EAAE,oCACvDc;OAGDJ,0BACC,oBAACb;QACC4B,OAAM;QACNd,UAAU,CAACe;YACT,IAAIT,QAAQU,SAAS;gBACnBhB,SAASe,GAAGT,OAAOU,OAAO;YAC5B;QACF;QACAf,mBAAmBA;QACnBgB,QAAQlB,cAAc;qBAEtB,oBAACmB;QACCf,WAAWvB,WAAWS,MAAM,CAAC,sBAAsB,EAAE;OAEpDmB,oBAILA;AAIR,EAAE"}

package/dist/cssm/components/FormLayout/FormLayout.js

@@ -4,7 +4,7 @@ import styles from './FormLayout.module.css';
 const preventDefault = (e)=>e.preventDefault();
 /**
  * @see https://vkcom.github.io/VKUI/#/FormLayout
- */ export const FormLayout = ({ children , Component ='form' , getRef , onSubmit =preventDefault , className , ...restProps })=>{
+ */ export const FormLayout = ({ children, Component = 'form', getRef, onSubmit = preventDefault, className, ...restProps })=>{
     return /*#__PURE__*/ React.createElement(Component, {
         ...restProps,
         className: classNames(styles['FormLayout'], className),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormLayout/FormLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRef } from '../../types';\nimport styles from './FormLayout.module.css';\n\nconst preventDefault = (e: React.FormEvent) => e.preventDefault();\n\nexport type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> &\n  HasRef<HTMLElement> &\n  HasComponent;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormLayout\n */\nexport const FormLayout = ({\n  children,\n  Component = 'form',\n  getRef,\n  onSubmit = preventDefault,\n  className,\n  ...restProps\n}: FormLayoutProps) => {\n  return (\n    <Component\n      {...restProps}\n      className={classNames(styles['FormLayout'], className)}\n      onSubmit={onSubmit}\n      ref={getRef}\n    >\n      {children}\n      {Component === 'form' && (\n        <input type=\"submit\" className={styles['FormLayout__submit']} value=\"\" />\n      )}\n    </Component>\n  );\n};\n"],"names":["React","classNames","styles","preventDefault","e","FormLayout","children","Component","getRef","onSubmit","className","restProps","ref","input","type","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,iBAAiB,CAACC,IAAuBA,EAAED;AAMjD;;CAEC,GACD,OAAO,MAAME,aAAa,CAAC,EACzBC,SAAQ,EACRC,WAAY,OAAM,EAClBC,OAAM,EACNC,UAAWN,eAAc,EACzBO,UAAS,EACT,GAAGC,WACa;IAChB,qBACE,oBAACJ;QACE,GAAGI,SAAS;QACbD,WAAWT,WAAWC,MAAM,CAAC,aAAa,EAAEQ;QAC5CD,UAAUA;QACVG,KAAKJ;OAEJF,UACAC,cAAc,wBACb,oBAACM;QAAMC,MAAK;QAASJ,WAAWR,MAAM,CAAC,qBAAqB;QAAEa,OAAM;;AAI5E,EAAE"}
+{"version":3,"sources":["../../../../src/components/FormLayout/FormLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRef } from '../../types';\nimport styles from './FormLayout.module.css';\n\nconst preventDefault = (e: React.FormEvent) => e.preventDefault();\n\nexport type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> &\n  HasRef<HTMLElement> &\n  HasComponent;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormLayout\n */\nexport const FormLayout = ({\n  children,\n  Component = 'form',\n  getRef,\n  onSubmit = preventDefault,\n  className,\n  ...restProps\n}: FormLayoutProps) => {\n  return (\n    <Component\n      {...restProps}\n      className={classNames(styles['FormLayout'], className)}\n      onSubmit={onSubmit}\n      ref={getRef}\n    >\n      {children}\n      {Component === 'form' && (\n        <input type=\"submit\" className={styles['FormLayout__submit']} value=\"\" />\n      )}\n    </Component>\n  );\n};\n"],"names":["React","classNames","styles","preventDefault","e","FormLayout","children","Component","getRef","onSubmit","className","restProps","ref","input","type","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,iBAAiB,CAACC,IAAuBA,EAAED,cAAc;AAM/D;;CAEC,GACD,OAAO,MAAME,aAAa,CAAC,EACzBC,QAAQ,EACRC,YAAY,MAAM,EAClBC,MAAM,EACNC,WAAWN,cAAc,EACzBO,SAAS,EACT,GAAGC,WACa;IAChB,qBACE,oBAACJ;QACE,GAAGI,SAAS;QACbD,WAAWT,WAAWC,MAAM,CAAC,aAAa,EAAEQ;QAC5CD,UAAUA;QACVG,KAAKJ;OAEJF,UACAC,cAAc,wBACb,oBAACM;QAAMC,MAAK;QAASJ,WAAWR,MAAM,CAAC,qBAAqB;QAAEa,OAAM;;AAI5E,EAAE"}

package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.js

@@ -11,8 +11,8 @@ const sizeYClassNames = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup
- */ export const FormLayoutGroup = ({ children , mode ='vertical' , removable , segmented , removePlaceholder ='Удалить' , onRemove =noop , getRootRef , className , ...restProps })=>{
-    const { sizeY ='none'  } = useAdaptivity();
+ */ export const FormLayoutGroup = ({ children, mode = 'vertical', removable, segmented, removePlaceholder = 'Удалить', onRemove = noop, getRootRef, className, ...restProps })=>{
+    const { sizeY = 'none' } = useAdaptivity();
     const isRemovable = removable && mode === 'horizontal';
     const isSegmented = segmented && mode === 'horizontal';
     const rootEl = useExternRef(getRootRef);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormLayoutGroup/FormLayoutGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport styles from './FormLayoutGroup.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(\n    styles['FormLayoutGroup--sizeY-none'],\n    'vkuiInternalFormLayoutGroup--sizeY-none',\n  ),\n  [SizeType.COMPACT]: classNames(\n    styles['FormLayoutGroup--sizeY-compact'],\n    'vkuiInternalFormLayoutGroup--sizeY-compact',\n  ),\n};\n\nexport interface FormLayoutGroupProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'vertical' | 'horizontal';\n  /**\n   * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.\n   *\n   * Режим `indent` предназначен для визуального отступа.\n   */\n  removable?: boolean | 'indent';\n\n  /**\n   * Только для режима horizontal. Дает возможность склеить несколько `FormItem`.\n   */\n  segmented?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup\n */\nexport const FormLayoutGroup = ({\n  children,\n  mode = 'vertical',\n  removable,\n  segmented,\n  removePlaceholder = 'Удалить',\n  onRemove = noop,\n  getRootRef,\n  className,\n  ...restProps\n}: FormLayoutGroupProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const isRemovable = removable && mode === 'horizontal';\n  const isSegmented = segmented && mode === 'horizontal';\n  const rootEl = useExternRef(getRootRef);\n\n  return (\n    <div\n      ref={rootEl}\n      className={classNames(\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        mode === 'horizontal' &&\n          classNames(\n            styles['FormLayoutGroup--mode-horizontal'],\n            'vkuiInternalFormLayoutGroup--mode-horizontal',\n          ),\n        isRemovable &&\n          classNames(\n            styles['FormLayoutGroup--removable'],\n            'vkuiInternalFormLayoutGroup--removable',\n          ),\n        isSegmented &&\n          classNames(\n            styles['FormLayoutGroup--segmented'],\n            'vkuiInternalFormLayoutGroup--segmented',\n          ),\n        className,\n      )}\n      {...restProps}\n    >\n      {isRemovable ? (\n        <Removable\n          className={styles['FormLayoutGroup__removable']}\n          align=\"start\"\n          removePlaceholder={removePlaceholder}\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          indent={removable === 'indent'}\n        >\n          {children}\n        </Removable>\n      ) : (\n        <React.Fragment>\n          {children}\n          <span className={styles['FormLayoutGroup__offset']} aria-hidden />\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivity","useExternRef","SizeType","Removable","styles","sizeYClassNames","none","COMPACT","FormLayoutGroup","children","mode","removable","segmented","removePlaceholder","onRemove","getRootRef","className","restProps","sizeY","isRemovable","isSegmented","rootEl","div","ref","REGULAR","align","e","current","indent","Fragment","span","aria-hidden"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,OAAOC,YAAY,+BAA+B;AAElD,MAAMC,kBAAkB;IACtBC,MAAMR,WACJM,MAAM,CAAC,8BAA8B,EACrC;IAEF,CAACF,SAASK,QAAQ,EAAET,WAClBM,MAAM,CAAC,iCAAiC,EACxC;AAEJ;AAoBA;;CAEC,GACD,OAAO,MAAMI,kBAAkB,CAAC,EAC9BC,SAAQ,EACRC,MAAO,WAAU,EACjBC,UAAS,EACTC,UAAS,EACTC,mBAAoB,UAAS,EAC7BC,UAAWf,KAAI,EACfgB,WAAU,EACVC,UAAS,EACT,GAAGC,WACkB;IACrB,MAAM,EAAEC,OAAQ,OAAM,EAAE,GAAGlB;IAC3B,MAAMmB,cAAcR,aAAaD,SAAS;IAC1C,MAAMU,cAAcR,aAAaF,SAAS;IAC1C,MAAMW,SAASpB,aAAac;IAE5B,qBACE,oBAACO;QACCC,KAAKF;QACLL,WAAWlB,WACToB,UAAUhB,SAASsB,WAAWnB,eAAe,CAACa,MAAM,EACpDR,SAAS,gBACPZ,WACEM,MAAM,CAAC,mCAAmC,EAC1C,iDAEJe,eACErB,WACEM,MAAM,CAAC,6BAA6B,EACpC,2CAEJgB,eACEtB,WACEM,MAAM,CAAC,6BAA6B,EACpC,2CAEJY;QAED,GAAGC,SAAS;OAEZE,4BACC,oBAAChB;QACCa,WAAWZ,MAAM,CAAC,6BAA6B;QAC/CqB,OAAM;QACNZ,mBAAmBA;QACnBC,UAAU,CAACY;YACT,IAAIL,QAAQM,SAAS;gBACnBb,SAASY,GAAGL,OAAOM;YACrB;QACF;QACAC,QAAQjB,cAAc;OAErBF,0BAGH,oBAACZ,MAAMgC,gBACJpB,wBACD,oBAACqB;QAAKd,WAAWZ,MAAM,CAAC,0BAA0B;QAAE2B,eAAAA;;AAK9D,EAAE"}
+{"version":3,"sources":["../../../../src/components/FormLayoutGroup/FormLayoutGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport styles from './FormLayoutGroup.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(\n    styles['FormLayoutGroup--sizeY-none'],\n    'vkuiInternalFormLayoutGroup--sizeY-none',\n  ),\n  [SizeType.COMPACT]: classNames(\n    styles['FormLayoutGroup--sizeY-compact'],\n    'vkuiInternalFormLayoutGroup--sizeY-compact',\n  ),\n};\n\nexport interface FormLayoutGroupProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'vertical' | 'horizontal';\n  /**\n   * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.\n   *\n   * Режим `indent` предназначен для визуального отступа.\n   */\n  removable?: boolean | 'indent';\n\n  /**\n   * Только для режима horizontal. Дает возможность склеить несколько `FormItem`.\n   */\n  segmented?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup\n */\nexport const FormLayoutGroup = ({\n  children,\n  mode = 'vertical',\n  removable,\n  segmented,\n  removePlaceholder = 'Удалить',\n  onRemove = noop,\n  getRootRef,\n  className,\n  ...restProps\n}: FormLayoutGroupProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const isRemovable = removable && mode === 'horizontal';\n  const isSegmented = segmented && mode === 'horizontal';\n  const rootEl = useExternRef(getRootRef);\n\n  return (\n    <div\n      ref={rootEl}\n      className={classNames(\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        mode === 'horizontal' &&\n          classNames(\n            styles['FormLayoutGroup--mode-horizontal'],\n            'vkuiInternalFormLayoutGroup--mode-horizontal',\n          ),\n        isRemovable &&\n          classNames(\n            styles['FormLayoutGroup--removable'],\n            'vkuiInternalFormLayoutGroup--removable',\n          ),\n        isSegmented &&\n          classNames(\n            styles['FormLayoutGroup--segmented'],\n            'vkuiInternalFormLayoutGroup--segmented',\n          ),\n        className,\n      )}\n      {...restProps}\n    >\n      {isRemovable ? (\n        <Removable\n          className={styles['FormLayoutGroup__removable']}\n          align=\"start\"\n          removePlaceholder={removePlaceholder}\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          indent={removable === 'indent'}\n        >\n          {children}\n        </Removable>\n      ) : (\n        <React.Fragment>\n          {children}\n          <span className={styles['FormLayoutGroup__offset']} aria-hidden />\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivity","useExternRef","SizeType","Removable","styles","sizeYClassNames","none","COMPACT","FormLayoutGroup","children","mode","removable","segmented","removePlaceholder","onRemove","getRootRef","className","restProps","sizeY","isRemovable","isSegmented","rootEl","div","ref","REGULAR","align","e","current","indent","Fragment","span","aria-hidden"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,OAAOC,YAAY,+BAA+B;AAElD,MAAMC,kBAAkB;IACtBC,MAAMR,WACJM,MAAM,CAAC,8BAA8B,EACrC;IAEF,CAACF,SAASK,OAAO,CAAC,EAAET,WAClBM,MAAM,CAAC,iCAAiC,EACxC;AAEJ;AAoBA;;CAEC,GACD,OAAO,MAAMI,kBAAkB,CAAC,EAC9BC,QAAQ,EACRC,OAAO,UAAU,EACjBC,SAAS,EACTC,SAAS,EACTC,oBAAoB,SAAS,EAC7BC,WAAWf,IAAI,EACfgB,UAAU,EACVC,SAAS,EACT,GAAGC,WACkB;IACrB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGlB;IAC3B,MAAMmB,cAAcR,aAAaD,SAAS;IAC1C,MAAMU,cAAcR,aAAaF,SAAS;IAC1C,MAAMW,SAASpB,aAAac;IAE5B,qBACE,oBAACO;QACCC,KAAKF;QACLL,WAAWlB,WACToB,UAAUhB,SAASsB,OAAO,IAAInB,eAAe,CAACa,MAAM,EACpDR,SAAS,gBACPZ,WACEM,MAAM,CAAC,mCAAmC,EAC1C,iDAEJe,eACErB,WACEM,MAAM,CAAC,6BAA6B,EACpC,2CAEJgB,eACEtB,WACEM,MAAM,CAAC,6BAA6B,EACpC,2CAEJY;QAED,GAAGC,SAAS;OAEZE,4BACC,oBAAChB;QACCa,WAAWZ,MAAM,CAAC,6BAA6B;QAC/CqB,OAAM;QACNZ,mBAAmBA;QACnBC,UAAU,CAACY;YACT,IAAIL,QAAQM,SAAS;gBACnBb,SAASY,GAAGL,OAAOM,OAAO;YAC5B;QACF;QACAC,QAAQjB,cAAc;OAErBF,0BAGH,oBAACZ,MAAMgC,QAAQ,QACZpB,wBACD,oBAACqB;QAAKd,WAAWZ,MAAM,CAAC,0BAA0B;QAAE2B,eAAAA;;AAK9D,EAAE"}

package/dist/cssm/components/FormStatus/FormStatus.js

@@ -4,7 +4,7 @@ import { Banner } from '../Banner/Banner';
 import styles from './FormStatus.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/FormStatus
- */ export const FormStatus = ({ mode , children , className , ...restProps })=>{
+ */ export const FormStatus = ({ mode, children, className, ...restProps })=>{
     return /*#__PURE__*/ React.createElement(Banner, {
         ...restProps,
         subheader: children,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormStatus/FormStatus.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { Banner } from '../Banner/Banner';\nimport styles from './FormStatus.module.css';\n\nexport interface FormStatusProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLElement> {\n  mode?: 'default' | 'error';\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormStatus\n */\nexport const FormStatus = ({ mode, children, className, ...restProps }: FormStatusProps) => {\n  return (\n    <Banner\n      {...restProps}\n      subheader={children}\n      className={classNames(\n        'vkuiInternalFormStatus',\n        mode === 'error' &&\n          classNames(styles['FormStatus--mode-error'], 'vkuiInternalFormStatus--mode-error'),\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","Banner","styles","FormStatus","mode","children","className","restProps","subheader"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,OAAOC,YAAY,0BAA0B;AAS7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EAAEC,KAAI,EAAEC,SAAQ,EAAEC,UAAS,EAAE,GAAGC,WAA4B;IACrF,qBACE,oBAACN;QACE,GAAGM,SAAS;QACbC,WAAWH;QACXC,WAAWN,WACT,0BACAI,SAAS,WACPJ,WAAWE,MAAM,CAAC,yBAAyB,EAAE,uCAC/CI;;AAIR,EAAE"}
+{"version":3,"sources":["../../../../src/components/FormStatus/FormStatus.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { Banner } from '../Banner/Banner';\nimport styles from './FormStatus.module.css';\n\nexport interface FormStatusProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLElement> {\n  mode?: 'default' | 'error';\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormStatus\n */\nexport const FormStatus = ({ mode, children, className, ...restProps }: FormStatusProps) => {\n  return (\n    <Banner\n      {...restProps}\n      subheader={children}\n      className={classNames(\n        'vkuiInternalFormStatus',\n        mode === 'error' &&\n          classNames(styles['FormStatus--mode-error'], 'vkuiInternalFormStatus--mode-error'),\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","Banner","styles","FormStatus","mode","children","className","restProps","subheader"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,OAAOC,YAAY,0BAA0B;AAS7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAA4B;IACrF,qBACE,oBAACN;QACE,GAAGM,SAAS;QACbC,WAAWH;QACXC,WAAWN,WACT,0BACAI,SAAS,WACPJ,WAAWE,MAAM,CAAC,yBAAyB,EAAE,uCAC/CI;;AAIR,EAAE"}

package/dist/cssm/components/Gallery/Gallery.js

@@ -4,7 +4,7 @@ import { useTimeout } from '../../hooks/useTimeout';
 import { BaseGallery } from '../BaseGallery/BaseGallery';
 /**
  * @see https://vkcom.github.io/VKUI/#/Gallery
- */ export const Gallery = ({ initialSlideIndex =0 , children , timeout =0 , onChange , bullets , ...props })=>{
+ */ export const Gallery = ({ initialSlideIndex = 0, children, timeout = 0, onChange, bullets, ...props })=>{
     const [localSlideIndex, setSlideIndex] = React.useState(initialSlideIndex);
     const isControlled = typeof props.slideIndex === 'number';
     const slideIndex = isControlled ? props.slideIndex ?? 0 : localSlideIndex;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Gallery/Gallery.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { BaseGallery } from '../BaseGallery/BaseGallery';\nimport { BaseGalleryProps } from '../BaseGallery/types';\n\nexport interface GalleryProps extends BaseGalleryProps {\n  initialSlideIndex?: number;\n  timeout?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gallery\n */\nexport const Gallery = ({\n  initialSlideIndex = 0,\n  children,\n  timeout = 0,\n  onChange,\n  bullets,\n  ...props\n}: GalleryProps) => {\n  const [localSlideIndex, setSlideIndex] = React.useState(initialSlideIndex);\n  const isControlled = typeof props.slideIndex === 'number';\n  const slideIndex = isControlled ? props.slideIndex ?? 0 : localSlideIndex;\n  const isDraggable = !isControlled || Boolean(onChange);\n  const slides = React.useMemo(\n    () => React.Children.toArray(children).filter((item) => Boolean(item)),\n    [children],\n  );\n  const childCount = slides.length;\n\n  const handleChange: GalleryProps['onChange'] = React.useCallback(\n    (current: number) => {\n      if (current === slideIndex) {\n        return;\n      }\n      !isControlled && setSlideIndex(current);\n      onChange && onChange(current);\n    },\n    [isControlled, onChange, slideIndex],\n  );\n\n  const autoplay = useTimeout(() => handleChange((slideIndex + 1) % childCount), timeout);\n  React.useEffect(\n    () => (timeout ? autoplay.set() : autoplay.clear()),\n    [timeout, slideIndex, autoplay],\n  );\n\n  // prevent invalid slideIndex\n  // any slide index is invalid with no slides, just keep it as is\n  const safeSlideIndex = childCount > 0 ? clamp(slideIndex, 0, childCount - 1) : slideIndex;\n  // notify parent in controlled mode\n  React.useEffect(() => {\n    if (onChange && safeSlideIndex !== slideIndex) {\n      onChange(safeSlideIndex);\n    }\n    setSlideIndex(safeSlideIndex);\n  }, [onChange, safeSlideIndex, slideIndex]);\n\n  return (\n    <BaseGallery\n      isDraggable={isDraggable}\n      {...props}\n      bullets={childCount > 0 && bullets}\n      slideIndex={safeSlideIndex}\n      onChange={handleChange}\n    >\n      {slides}\n    </BaseGallery>\n  );\n};\n"],"names":["React","clamp","useTimeout","BaseGallery","Gallery","initialSlideIndex","children","timeout","onChange","bullets","props","localSlideIndex","setSlideIndex","useState","isControlled","slideIndex","isDraggable","Boolean","slides","useMemo","Children","toArray","filter","item","childCount","length","handleChange","useCallback","current","autoplay","useEffect","set","clear","safeSlideIndex"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,qBAAqB;AAC3C,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,WAAW,QAAQ,6BAA6B;AAQzD;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EACtBC,mBAAoB,EAAC,EACrBC,SAAQ,EACRC,SAAU,EAAC,EACXC,SAAQ,EACRC,QAAO,EACP,GAAGC,OACU;IACb,MAAM,CAACC,iBAAiBC,cAAc,GAAGZ,MAAMa,SAASR;IACxD,MAAMS,eAAe,OAAOJ,MAAMK,eAAe;IACjD,MAAMA,aAAaD,eAAeJ,MAAMK,cAAc,IAAIJ;IAC1D,MAAMK,cAAc,CAACF,gBAAgBG,QAAQT;IAC7C,MAAMU,SAASlB,MAAMmB,QACnB,IAAMnB,MAAMoB,SAASC,QAAQf,UAAUgB,OAAO,CAACC,OAASN,QAAQM,QAChE;QAACjB;KAAS;IAEZ,MAAMkB,aAAaN,OAAOO;IAE1B,MAAMC,eAAyC1B,MAAM2B,YACnD,CAACC;QACC,IAAIA,YAAYb,YAAY;YAC1B;QACF;QACA,CAACD,gBAAgBF,cAAcgB;QAC/BpB,YAAYA,SAASoB;IACvB,GACA;QAACd;QAAcN;QAAUO;KAAW;IAGtC,MAAMc,WAAW3B,WAAW,IAAMwB,aAAa,AAACX,CAAAA,aAAa,CAAA,IAAKS,aAAajB;IAC/EP,MAAM8B,UACJ,IAAOvB,UAAUsB,SAASE,QAAQF,SAASG,SAC3C;QAACzB;QAASQ;QAAYc;KAAS;IAGjC,6BAA6B;IAC7B,gEAAgE;IAChE,MAAMI,iBAAiBT,aAAa,IAAIvB,MAAMc,YAAY,GAAGS,aAAa,KAAKT;IAC/E,mCAAmC;IACnCf,MAAM8B,UAAU;QACd,IAAItB,YAAYyB,mBAAmBlB,YAAY;YAC7CP,SAASyB;QACX;QACArB,cAAcqB;IAChB,GAAG;QAACzB;QAAUyB;QAAgBlB;KAAW;IAEzC,qBACE,oBAACZ;QACCa,aAAaA;QACZ,GAAGN,KAAK;QACTD,SAASe,aAAa,KAAKf;QAC3BM,YAAYkB;QACZzB,UAAUkB;OAETR;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/Gallery/Gallery.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { BaseGallery } from '../BaseGallery/BaseGallery';\nimport { BaseGalleryProps } from '../BaseGallery/types';\n\nexport interface GalleryProps extends BaseGalleryProps {\n  initialSlideIndex?: number;\n  timeout?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gallery\n */\nexport const Gallery = ({\n  initialSlideIndex = 0,\n  children,\n  timeout = 0,\n  onChange,\n  bullets,\n  ...props\n}: GalleryProps) => {\n  const [localSlideIndex, setSlideIndex] = React.useState(initialSlideIndex);\n  const isControlled = typeof props.slideIndex === 'number';\n  const slideIndex = isControlled ? props.slideIndex ?? 0 : localSlideIndex;\n  const isDraggable = !isControlled || Boolean(onChange);\n  const slides = React.useMemo(\n    () => React.Children.toArray(children).filter((item) => Boolean(item)),\n    [children],\n  );\n  const childCount = slides.length;\n\n  const handleChange: GalleryProps['onChange'] = React.useCallback(\n    (current: number) => {\n      if (current === slideIndex) {\n        return;\n      }\n      !isControlled && setSlideIndex(current);\n      onChange && onChange(current);\n    },\n    [isControlled, onChange, slideIndex],\n  );\n\n  const autoplay = useTimeout(() => handleChange((slideIndex + 1) % childCount), timeout);\n  React.useEffect(\n    () => (timeout ? autoplay.set() : autoplay.clear()),\n    [timeout, slideIndex, autoplay],\n  );\n\n  // prevent invalid slideIndex\n  // any slide index is invalid with no slides, just keep it as is\n  const safeSlideIndex = childCount > 0 ? clamp(slideIndex, 0, childCount - 1) : slideIndex;\n  // notify parent in controlled mode\n  React.useEffect(() => {\n    if (onChange && safeSlideIndex !== slideIndex) {\n      onChange(safeSlideIndex);\n    }\n    setSlideIndex(safeSlideIndex);\n  }, [onChange, safeSlideIndex, slideIndex]);\n\n  return (\n    <BaseGallery\n      isDraggable={isDraggable}\n      {...props}\n      bullets={childCount > 0 && bullets}\n      slideIndex={safeSlideIndex}\n      onChange={handleChange}\n    >\n      {slides}\n    </BaseGallery>\n  );\n};\n"],"names":["React","clamp","useTimeout","BaseGallery","Gallery","initialSlideIndex","children","timeout","onChange","bullets","props","localSlideIndex","setSlideIndex","useState","isControlled","slideIndex","isDraggable","Boolean","slides","useMemo","Children","toArray","filter","item","childCount","length","handleChange","useCallback","current","autoplay","useEffect","set","clear","safeSlideIndex"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,qBAAqB;AAC3C,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,WAAW,QAAQ,6BAA6B;AAQzD;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EACtBC,oBAAoB,CAAC,EACrBC,QAAQ,EACRC,UAAU,CAAC,EACXC,QAAQ,EACRC,OAAO,EACP,GAAGC,OACU;IACb,MAAM,CAACC,iBAAiBC,cAAc,GAAGZ,MAAMa,QAAQ,CAACR;IACxD,MAAMS,eAAe,OAAOJ,MAAMK,UAAU,KAAK;IACjD,MAAMA,aAAaD,eAAeJ,MAAMK,UAAU,IAAI,IAAIJ;IAC1D,MAAMK,cAAc,CAACF,gBAAgBG,QAAQT;IAC7C,MAAMU,SAASlB,MAAMmB,OAAO,CAC1B,IAAMnB,MAAMoB,QAAQ,CAACC,OAAO,CAACf,UAAUgB,MAAM,CAAC,CAACC,OAASN,QAAQM,QAChE;QAACjB;KAAS;IAEZ,MAAMkB,aAAaN,OAAOO,MAAM;IAEhC,MAAMC,eAAyC1B,MAAM2B,WAAW,CAC9D,CAACC;QACC,IAAIA,YAAYb,YAAY;YAC1B;QACF;QACA,CAACD,gBAAgBF,cAAcgB;QAC/BpB,YAAYA,SAASoB;IACvB,GACA;QAACd;QAAcN;QAAUO;KAAW;IAGtC,MAAMc,WAAW3B,WAAW,IAAMwB,aAAa,AAACX,CAAAA,aAAa,CAAA,IAAKS,aAAajB;IAC/EP,MAAM8B,SAAS,CACb,IAAOvB,UAAUsB,SAASE,GAAG,KAAKF,SAASG,KAAK,IAChD;QAACzB;QAASQ;QAAYc;KAAS;IAGjC,6BAA6B;IAC7B,gEAAgE;IAChE,MAAMI,iBAAiBT,aAAa,IAAIvB,MAAMc,YAAY,GAAGS,aAAa,KAAKT;IAC/E,mCAAmC;IACnCf,MAAM8B,SAAS,CAAC;QACd,IAAItB,YAAYyB,mBAAmBlB,YAAY;YAC7CP,SAASyB;QACX;QACArB,cAAcqB;IAChB,GAAG;QAACzB;QAAUyB;QAAgBlB;KAAW;IAEzC,qBACE,oBAACZ;QACCa,aAAaA;QACZ,GAAGN,KAAK;QACTD,SAASe,aAAa,KAAKf;QAC3BM,YAAYkB;QACZzB,UAAUkB;OAETR;AAGP,EAAE"}

package/dist/cssm/components/Gradient/Gradient.js

@@ -3,7 +3,7 @@ import { classNames } from '@vkontakte/vkjs';
 import styles from './Gradient.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Gradient
- */ export const Gradient = ({ mode ='tint' , children , to ='top' , className , ...restProps })=>{
+ */ export const Gradient = ({ mode = 'tint', children, to = 'top', className, ...restProps })=>{
     return /*#__PURE__*/ React.createElement("div", {
         role: "presentation",
         ...restProps,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Gradient/Gradient.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Gradient.module.css';\n\nexport interface GradientProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Тип градиента\n   */\n  mode?: 'tint' | 'white' | 'black';\n  /**\n   * Направление градиента\n   */\n  to?: 'top' | 'bottom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gradient\n */\nexport const Gradient = ({\n  mode = 'tint',\n  children,\n  to = 'top',\n  className,\n  ...restProps\n}: GradientProps) => {\n  return (\n    <div\n      role=\"presentation\"\n      {...restProps}\n      className={classNames(\n        {\n          tint: styles['Gradient--mode-tint'],\n          black: styles['Gradient--mode-black'],\n          white: styles['Gradient--mode-white'],\n        }[mode],\n        {\n          top: styles['Gradient--to-top'],\n          bottom: styles['Gradient--to-bottom'],\n        }[to],\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","styles","Gradient","mode","children","to","className","restProps","div","role","tint","black","white","top","bottom"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,wBAAwB;AAa3C;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,MAAO,OAAM,EACbC,SAAQ,EACRC,IAAK,MAAK,EACVC,UAAS,EACT,GAAGC,WACW;IACd,qBACE,oBAACC;QACCC,MAAK;QACJ,GAAGF,SAAS;QACbD,WAAWN,WACT;YACEU,MAAMT,MAAM,CAAC,sBAAsB;YACnCU,OAAOV,MAAM,CAAC,uBAAuB;YACrCW,OAAOX,MAAM,CAAC,uBAAuB;QACvC,CAAC,CAACE,KAAK,EACP;YACEU,KAAKZ,MAAM,CAAC,mBAAmB;YAC/Ba,QAAQb,MAAM,CAAC,sBAAsB;QACvC,CAAC,CAACI,GAAG,EACLC;OAGDF;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/Gradient/Gradient.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Gradient.module.css';\n\nexport interface GradientProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Тип градиента\n   */\n  mode?: 'tint' | 'white' | 'black';\n  /**\n   * Направление градиента\n   */\n  to?: 'top' | 'bottom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gradient\n */\nexport const Gradient = ({\n  mode = 'tint',\n  children,\n  to = 'top',\n  className,\n  ...restProps\n}: GradientProps) => {\n  return (\n    <div\n      role=\"presentation\"\n      {...restProps}\n      className={classNames(\n        {\n          tint: styles['Gradient--mode-tint'],\n          black: styles['Gradient--mode-black'],\n          white: styles['Gradient--mode-white'],\n        }[mode],\n        {\n          top: styles['Gradient--to-top'],\n          bottom: styles['Gradient--to-bottom'],\n        }[to],\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","styles","Gradient","mode","children","to","className","restProps","div","role","tint","black","white","top","bottom"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,wBAAwB;AAa3C;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,OAAO,MAAM,EACbC,QAAQ,EACRC,KAAK,KAAK,EACVC,SAAS,EACT,GAAGC,WACW;IACd,qBACE,oBAACC;QACCC,MAAK;QACJ,GAAGF,SAAS;QACbD,WAAWN,WACT;YACEU,MAAMT,MAAM,CAAC,sBAAsB;YACnCU,OAAOV,MAAM,CAAC,uBAAuB;YACrCW,OAAOX,MAAM,CAAC,uBAAuB;QACvC,CAAC,CAACE,KAAK,EACP;YACEU,KAAKZ,MAAM,CAAC,mBAAmB;YAC/Ba,QAAQb,MAAM,CAAC,sBAAsB;QACvC,CAAC,CAACI,GAAG,EACLC;OAGDF;AAGP,EAAE"}

package/dist/cssm/components/GridAvatar/GridAvatar.js

@@ -9,7 +9,7 @@ export const MAX_GRID_LENGTH = 4;
 const warn = warnOnce('GridAvatar');
 /**
  * @see https://vkcom.github.io/VKUI/#/GridAvatar
- */ export const GridAvatar = ({ src =[] , size =GRID_AVATAR_DEFAULT_SIZE , className , children , ...restProps })=>{
+ */ export const GridAvatar = ({ src = [], size = GRID_AVATAR_DEFAULT_SIZE, className, children, ...restProps })=>{
     if (process.env.NODE_ENV === 'development') {
         if (src.length > MAX_GRID_LENGTH) {
             warn(`Длина массива src (${src.length}) больше максимальной (${MAX_GRID_LENGTH})`, 'error');

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/GridAvatar/GridAvatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ImageBase, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { GridAvatarBadge, type GridAvatarBadgeProps } from './GridAvatarBadge/GridAvatarBadge';\nimport styles from './GridAvatar.module.css';\n\nexport { GridAvatarBadgeProps };\n\nexport const GRID_AVATAR_DEFAULT_SIZE = 48;\n\nexport const MAX_GRID_LENGTH = 4;\n\nexport interface GridAvatarProps extends Omit<ImageBaseProps, 'src' | 'fallbackIcon'> {\n  /**\n   * Массив со ссылками. От 1 до 4 элементов.\n   */\n  src?: string[];\n}\n\nconst warn = warnOnce('GridAvatar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/GridAvatar\n */\nexport const GridAvatar = ({\n  src = [],\n  size = GRID_AVATAR_DEFAULT_SIZE,\n  className,\n  children,\n  ...restProps\n}: GridAvatarProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    if (src.length > MAX_GRID_LENGTH) {\n      warn(`Длина массива src (${src.length}) больше максимальной (${MAX_GRID_LENGTH})`, 'error');\n    }\n  }\n\n  return (\n    <ImageBase {...restProps} size={size} className={classNames(styles['GridAvatar'], className)}>\n      <div className={styles['GridAvatar__in']} aria-hidden>\n        {src.map((url, index) =>\n          index < MAX_GRID_LENGTH ? (\n            <div\n              key={url}\n              className={styles['GridAvatar__item']}\n              style={{ backgroundImage: `url(${url})` }}\n            />\n          ) : null,\n        )}\n      </div>\n      {children}\n    </ImageBase>\n  );\n};\n\nGridAvatar.Badge = GridAvatarBadge;\n"],"names":["React","classNames","warnOnce","ImageBase","GridAvatarBadge","styles","GRID_AVATAR_DEFAULT_SIZE","MAX_GRID_LENGTH","warn","GridAvatar","src","size","className","children","restProps","process","env","NODE_ENV","length","div","aria-hidden","map","url","index","key","style","backgroundImage","Badge"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,SAAS,QAA6B,yBAAyB;AACxE,SAASC,eAAe,QAAmC,oCAAoC;AAC/F,OAAOC,YAAY,0BAA0B;AAI7C,OAAO,MAAMC,2BAA2B,GAAG;AAE3C,OAAO,MAAMC,kBAAkB,EAAE;AASjC,MAAMC,OAAON,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMO,aAAa,CAAC,EACzBC,KAAM,EAAE,CAAA,EACRC,MAAOL,yBAAwB,EAC/BM,UAAS,EACTC,SAAQ,EACR,GAAGC,WACa;IAChB,IAAIC,QAAQC,IAAIC,aAAa,eAAe;QAC1C,IAAIP,IAAIQ,SAASX,iBAAiB;YAChCC,KAAK,CAAC,mBAAmB,EAAEE,IAAIQ,OAAO,uBAAuB,EAAEX,gBAAgB,CAAC,CAAC,EAAE;QACrF;IACF;IAEA,qBACE,oBAACJ;QAAW,GAAGW,SAAS;QAAEH,MAAMA;QAAMC,WAAWX,WAAWI,MAAM,CAAC,aAAa,EAAEO;qBAChF,oBAACO;QAAIP,WAAWP,MAAM,CAAC,iBAAiB;QAAEe,eAAAA;OACvCV,IAAIW,IAAI,CAACC,KAAKC,QACbA,QAAQhB,gCACN,oBAACY;YACCK,KAAKF;YACLV,WAAWP,MAAM,CAAC,mBAAmB;YACrCoB,OAAO;gBAAEC,iBAAiB,CAAC,IAAI,EAAEJ,IAAI,CAAC,CAAC;YAAC;aAExC,QAGPT;AAGP,EAAE;AAEFJ,WAAWkB,QAAQvB"}
+{"version":3,"sources":["../../../../src/components/GridAvatar/GridAvatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ImageBase, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { GridAvatarBadge, type GridAvatarBadgeProps } from './GridAvatarBadge/GridAvatarBadge';\nimport styles from './GridAvatar.module.css';\n\nexport { GridAvatarBadgeProps };\n\nexport const GRID_AVATAR_DEFAULT_SIZE = 48;\n\nexport const MAX_GRID_LENGTH = 4;\n\nexport interface GridAvatarProps extends Omit<ImageBaseProps, 'src' | 'fallbackIcon'> {\n  /**\n   * Массив со ссылками. От 1 до 4 элементов.\n   */\n  src?: string[];\n}\n\nconst warn = warnOnce('GridAvatar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/GridAvatar\n */\nexport const GridAvatar = ({\n  src = [],\n  size = GRID_AVATAR_DEFAULT_SIZE,\n  className,\n  children,\n  ...restProps\n}: GridAvatarProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    if (src.length > MAX_GRID_LENGTH) {\n      warn(`Длина массива src (${src.length}) больше максимальной (${MAX_GRID_LENGTH})`, 'error');\n    }\n  }\n\n  return (\n    <ImageBase {...restProps} size={size} className={classNames(styles['GridAvatar'], className)}>\n      <div className={styles['GridAvatar__in']} aria-hidden>\n        {src.map((url, index) =>\n          index < MAX_GRID_LENGTH ? (\n            <div\n              key={url}\n              className={styles['GridAvatar__item']}\n              style={{ backgroundImage: `url(${url})` }}\n            />\n          ) : null,\n        )}\n      </div>\n      {children}\n    </ImageBase>\n  );\n};\n\nGridAvatar.Badge = GridAvatarBadge;\n"],"names":["React","classNames","warnOnce","ImageBase","GridAvatarBadge","styles","GRID_AVATAR_DEFAULT_SIZE","MAX_GRID_LENGTH","warn","GridAvatar","src","size","className","children","restProps","process","env","NODE_ENV","length","div","aria-hidden","map","url","index","key","style","backgroundImage","Badge"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,SAAS,QAA6B,yBAAyB;AACxE,SAASC,eAAe,QAAmC,oCAAoC;AAC/F,OAAOC,YAAY,0BAA0B;AAI7C,OAAO,MAAMC,2BAA2B,GAAG;AAE3C,OAAO,MAAMC,kBAAkB,EAAE;AASjC,MAAMC,OAAON,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMO,aAAa,CAAC,EACzBC,MAAM,EAAE,EACRC,OAAOL,wBAAwB,EAC/BM,SAAS,EACTC,QAAQ,EACR,GAAGC,WACa;IAChB,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIP,IAAIQ,MAAM,GAAGX,iBAAiB;YAChCC,KAAK,CAAC,mBAAmB,EAAEE,IAAIQ,MAAM,CAAC,uBAAuB,EAAEX,gBAAgB,CAAC,CAAC,EAAE;QACrF;IACF;IAEA,qBACE,oBAACJ;QAAW,GAAGW,SAAS;QAAEH,MAAMA;QAAMC,WAAWX,WAAWI,MAAM,CAAC,aAAa,EAAEO;qBAChF,oBAACO;QAAIP,WAAWP,MAAM,CAAC,iBAAiB;QAAEe,eAAAA;OACvCV,IAAIW,GAAG,CAAC,CAACC,KAAKC,QACbA,QAAQhB,gCACN,oBAACY;YACCK,KAAKF;YACLV,WAAWP,MAAM,CAAC,mBAAmB;YACrCoB,OAAO;gBAAEC,iBAAiB,CAAC,IAAI,EAAEJ,IAAI,CAAC,CAAC;YAAC;aAExC,QAGPT;AAGP,EAAE;AAEFJ,WAAWkB,KAAK,GAAGvB"}

package/dist/cssm/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.js

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { ImageBase, ImageBaseContext } from '../../ImageBase/ImageBase';
 import styles from './GridAvatarBadge.module.css';
-export const GridAvatarBadge = ({ className , ...restProps })=>{
-    const { size  } = React.useContext(ImageBaseContext);
+export const GridAvatarBadge = ({ className, ...restProps })=>{
+    const { size } = React.useContext(ImageBaseContext);
     return /*#__PURE__*/ React.createElement(ImageBase.Badge, {
         ...restProps,
         className: classNames(styles['GridAvatarBadge'], size < 96 && styles['GridAvatarBadge--shifted'], className)

package/dist/cssm/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseBadgeProps, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './GridAvatarBadge.module.css';\n\nexport type GridAvatarBadgeProps = ImageBaseBadgeProps;\n\nexport const GridAvatarBadge = ({ className, ...restProps }: GridAvatarBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(\n        styles['GridAvatarBadge'],\n        size < 96 && styles['GridAvatarBadge--shifted'],\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","ImageBase","ImageBaseContext","styles","GridAvatarBadge","className","restProps","size","useContext","Badge"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAA4BC,gBAAgB,QAAQ,4BAA4B;AAClG,OAAOC,YAAY,+BAA+B;AAIlD,OAAO,MAAMC,kBAAkB,CAAC,EAAEC,UAAS,EAAE,GAAGC,WAAiC;IAC/E,MAAM,EAAEC,KAAI,EAAE,GAAGR,MAAMS,WAAWN;IAClC,qBACE,oBAACD,UAAUQ;QACR,GAAGH,SAAS;QACbD,WAAWL,WACTG,MAAM,CAAC,kBAAkB,EACzBI,OAAO,MAAMJ,MAAM,CAAC,2BAA2B,EAC/CE;;AAIR,EAAE"}
+{"version":3,"sources":["../../../../../src/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseBadgeProps, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './GridAvatarBadge.module.css';\n\nexport type GridAvatarBadgeProps = ImageBaseBadgeProps;\n\nexport const GridAvatarBadge = ({ className, ...restProps }: GridAvatarBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(\n        styles['GridAvatarBadge'],\n        size < 96 && styles['GridAvatarBadge--shifted'],\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","ImageBase","ImageBaseContext","styles","GridAvatarBadge","className","restProps","size","useContext","Badge"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAA4BC,gBAAgB,QAAQ,4BAA4B;AAClG,OAAOC,YAAY,+BAA+B;AAIlD,OAAO,MAAMC,kBAAkB,CAAC,EAAEC,SAAS,EAAE,GAAGC,WAAiC;IAC/E,MAAM,EAAEC,IAAI,EAAE,GAAGR,MAAMS,UAAU,CAACN;IAClC,qBACE,oBAACD,UAAUQ,KAAK;QACb,GAAGH,SAAS;QACbD,WAAWL,WACTG,MAAM,CAAC,kBAAkB,EACzBI,OAAO,MAAMJ,MAAM,CAAC,2BAA2B,EAC/CE;;AAIR,EAAE"}

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

@@ -4,20 +4,20 @@ export interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttribute
     header?: React.ReactNode;
     description?: React.ReactNode;
     /**
-      show - разделитель всегда показывается,
-      hide - разделитель всегда спрятан,
-      auto - разделитель рисуется автоматически между соседними группами.
+      `show` - разделитель всегда показывается,
+      `hide` - разделитель всегда спрятан,
+      `auto` - разделитель рисуется автоматически между соседними группами.
      */
     separator?: 'show' | 'hide' | 'auto';
     /**
-     * Режим отображения. Если установлен 'card', выглядит как карточка c
-     * обводкой и внешними отступами. Если 'plain' — без отступов и обводки.
-     * По умолчанию режим отображения зависит от `sizeX`. В модальных окнах
-     * по умолчанию 'plain'.
+     * Режим отображения. Если установлен `card`, выглядит как карточка c
+     * обводкой и внешними отступами. Если `plain` — без отступов и обводки.
+     * По умолчанию режим отображения зависит от `sizeX` (`mode=card` при `sizeX=REGULAR` и `mode=plain` при `sizeX=COMPACT`)
+     * В модальных окнах по умолчанию `plain`.
      */
     mode?: 'plain' | 'card';
     /**
-     * Отвечает за отступы вокруг контента в режиме 'card'.
+     * Отвечает за отступы вокруг контента в режиме `card`.
      */
     padding?: 's' | 'm';
 }

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

@@ -17,10 +17,10 @@ const sizeXClassNames = {
 const warn = warnOnce('Group');
 /**
  * @see https://vkcom.github.io/VKUI/#/Group
- */ export const Group = ({ header , description , children , separator ='auto' , getRootRef , mode: modeProps , padding ='m' , className , tabIndex: tabIndexProp , ...restProps })=>{
-    const { isInsideModal  } = React.useContext(ModalRootContext);
+ */ 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();
+    const { sizeX = 'none' } = useAdaptivity();
     let mode = modeProps;
     if (!modeProps) {
         // Подробнее в "none" можно прочитать в ADAPTIVITY_GUIDE.md
@@ -39,7 +39,7 @@ const warn = warnOnce('Group');
         ...restProps,
         tabIndex: tabIndex,
         ref: getRootRef,
-        className: classNames('vkuiInternalGroup', styles['Group'], platform === Platform.IOS && styles['Group--ios'], sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX], mode && ({
+        className: classNames('vkuiInternalGroup', styles['Group'], isInsideModal && styles['Group--inside-modal'], platform === Platform.IOS && styles['Group--ios'], sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX], mode && ({
             none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),
             plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),
             card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card')

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

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

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

@@ -53,10 +53,12 @@
 }
 
 @media (min-width: 768px) {
+  .Group--sizeX-none.Group--inside-modal.Group--padding-s,
   .Group--sizeX-none.Group--mode-none.Group--padding-s {
     padding: 4px;
   }
 
+  .Group--sizeX-none.Group--inside-modal.Group--padding-m,
   .Group--sizeX-none.Group--mode-none.Group--padding-m {
     padding: 8px;
   }

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

@@ -8,7 +8,7 @@ import { Paragraph } from '../Typography/Paragraph/Paragraph';
 import { Subhead } from '../Typography/Subhead/Subhead';
 import { Title } from '../Typography/Title/Title';
 import styles from './Header.module.css';
-const HeaderContent = ({ mode , size , ...restProps })=>{
+const HeaderContent = ({ mode, size, ...restProps })=>{
     const isLarge = size === 'large';
     const platform = usePlatform();
     if (platform === Platform.IOS) {
@@ -63,7 +63,7 @@ const HeaderContent = ({ mode , size , ...restProps })=>{
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Header
- */ export const Header = ({ mode ='primary' , size ='regular' , children , subtitle , indicator , aside , getRootRef , multiline , className , ...restProps })=>{
+ */ export const Header = ({ mode = 'primary', size = 'regular', children, subtitle, indicator, aside, getRootRef, multiline, className, ...restProps })=>{
     const platform = usePlatform();
     return /*#__PURE__*/ React.createElement("header", {
         ...restProps,

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

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

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

@@ -6,14 +6,14 @@ import { Caption } from '../Typography/Caption/Caption';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import { Subhead } from '../Typography/Subhead/Subhead';
 import styles from './HorizontalCell.module.css';
-const CellTypography = ({ size , children , ...restProps })=>{
+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 const HorizontalCell = ({ className , header , style , subtitle , size ='s' , children =/*#__PURE__*/ React.createElement(Avatar, {
+ */ export const HorizontalCell = ({ className, header, style, subtitle, size = 's', children = /*#__PURE__*/ React.createElement(Avatar, {
     size: 56
-}) , getRootRef , getRef , extraSubtitle , ...restProps })=>{
+}), getRootRef, getRef, extraSubtitle, ...restProps })=>{
     return /*#__PURE__*/ React.createElement("div", {
         ref: getRootRef,
         style: style,

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

@@ -1 +1 @@
-{"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  /**\n   * Заголовок\n   */\n  header?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: 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  extraSubtitle,\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          {hasReactNode(extraSubtitle) && (\n            <Footnote className={styles['HorizontalCell__subtitle']}>{extraSubtitle}</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","extraSubtitle","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;IAC3E,OAAOF,SAAS,oBACd,oBAACL,SAAYO,WAAYD,0BAEzB,oBAACJ,SAAYK,WAAYD;AAE7B;AAuBA;;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,EACNC,cAAa,EACb,GAAGR,WACiB;IACpB,qBACE,oBAACS;QACCC,KAAKJ;QACLF,OAAOA;QACPF,WAAWb,WACTO,MAAM,CAAC,iBAAiB,EACxB;YACEe,GAAGf,MAAM,CAAC,yBAAyB;YACnCgB,GAAGhB,MAAM,CAAC,yBAAyB;YACnCiB,GAAGjB,MAAM,CAAC,yBAAyB;QACrC,CAAC,CAACE,KAAK,EACPI;qBAGF,oBAACV;QAASU,WAAWN,MAAM,CAAC,uBAAuB;QAAEU,YAAYC;QAAS,GAAGP,SAAS;OACnFV,aAAaS,2BACZ,oBAACU;QAAIP,WAAWN,MAAM,CAAC,wBAAwB;OAAGG,yBAEpD,oBAACU;QAAIP,WAAWN,MAAM,CAAC,0BAA0B;OAC9CN,aAAaa,yBAAW,oBAACN;QAAeC,MAAMA;OAAOK,SACrDb,aAAae,2BACZ,oBAACX;QAASQ,WAAWN,MAAM,CAAC,2BAA2B;OAAGS,WAE3Df,aAAakB,gCACZ,oBAACd;QAASQ,WAAWN,MAAM,CAAC,2BAA2B;OAAGY;AAMtE,EAAE"}
+{"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  /**\n   * Заголовок\n   */\n  header?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: 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  extraSubtitle,\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          {hasReactNode(extraSubtitle) && (\n            <Footnote className={styles['HorizontalCell__subtitle']}>{extraSubtitle}</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","extraSubtitle","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,IAAI,EAAEC,QAAQ,EAAE,GAAGC,WAAgC;IAC3E,OAAOF,SAAS,oBACd,oBAACL,SAAYO,WAAYD,0BAEzB,oBAACJ,SAAYK,WAAYD;AAE7B;AAuBA;;CAEC,GACD,OAAO,MAAME,iBAAiB,CAAC,EAC7BC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRP,OAAO,GAAG,EACVC,yBAAW,oBAACR;IAAOO,MAAM;EAAM,EAC/BQ,UAAU,EACVC,MAAM,EACNC,aAAa,EACb,GAAGR,WACiB;IACpB,qBACE,oBAACS;QACCC,KAAKJ;QACLF,OAAOA;QACPF,WAAWb,WACTO,MAAM,CAAC,iBAAiB,EACxB;YACEe,GAAGf,MAAM,CAAC,yBAAyB;YACnCgB,GAAGhB,MAAM,CAAC,yBAAyB;YACnCiB,GAAGjB,MAAM,CAAC,yBAAyB;QACrC,CAAC,CAACE,KAAK,EACPI;qBAGF,oBAACV;QAASU,WAAWN,MAAM,CAAC,uBAAuB;QAAEU,YAAYC;QAAS,GAAGP,SAAS;OACnFV,aAAaS,2BACZ,oBAACU;QAAIP,WAAWN,MAAM,CAAC,wBAAwB;OAAGG,yBAEpD,oBAACU;QAAIP,WAAWN,MAAM,CAAC,0BAA0B;OAC9CN,aAAaa,yBAAW,oBAACN;QAAeC,MAAMA;OAAOK,SACrDb,aAAae,2BACZ,oBAACX;QAASQ,WAAWN,MAAM,CAAC,2BAA2B;OAAGS,WAE3Df,aAAakB,gCACZ,oBAACd;QAASQ,WAAWN,MAAM,CAAC,2BAA2B;OAAGY;AAMtE,EAAE"}

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

@@ -1,10 +1,5 @@
 .HorizontalCell {
-  --vkui_internal--side_cell_gap: calc(
-    var(--vkui--size_base_padding_horizontal--regular) - var(--vkui--spacing_size_s)
-  );
-
   display: flex;
-  font-family: var(--vkui--font_family_base);
 }
 
 .HorizontalCell__image {

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { HasRef, HasRootRef, LiteralUnion } from '../../types';
+import type { ImageBaseSize } from '../ImageBase/ImageBase';
+import { TappableProps } from '../Tappable/Tappable';
+import { SubheadProps } from '../Typography/Subhead/Subhead';
+export interface HorizontalCellShowMoreProps extends Omit<TappableProps, 'getRootRef' | 'size'>, HasRef<HTMLElement>, HasRootRef<HTMLDivElement> {
+    /**
+     * Задаёт высоту компонента. Должeн соответствовать размеру картинок
+     * внутри соседних `HorizontalCell` компонентов.
+     *
+     * Используйте размеры заданные дизайн-системой (см. типы).
+     *
+     * > ⚠️ Использование кастомного размера – это пограничный кейс.
+     *
+     * Игнорируется если `size='s'`.
+     */
+    height?: LiteralUnion<ImageBaseSize, number>;
+    /**
+     * Задаёт размер компонента. Аналогичен такому же пропу у [HorizontalCell](https://vkcom.github.io/VKUI/#/HorizontalCellShowMore?id=props).
+     * Должен соответствовать значению пропа `size` соседних `HorizontalCell`.
+     */
+    size?: 's' | 'm' | 'l';
+    /**
+     * Предназначен для отрисовки текста.
+     * По умолчанию для `size='s'` содержит текст `Все` для других размеров `Показать все`.
+     * */
+    children?: SubheadProps['children'];
+    /**
+     * Позволяет компенсировать особый правый отступ у предшевствующего элементa `HorizontalCell`,
+     * в том случае, если тот элемент последний в родителе.
+     * Если `HorizontalCellShowMore` находится на одном уровне с остальными `HorizontalCell`, то этот проп использовать не нужно.
+     */
+    compensateLastCellIndent?: boolean;
+}
+export declare const HorizontalCellShowMore: ({ className, style, getRef, getRootRef, compensateLastCellIndent, height, size, children, ...restProps }: HorizontalCellShowMoreProps) => React.JSX.Element;

package/dist/cssm/components/HorizontalCellShowMore/HorizontalCellShowMore.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Icon28ChevronRightCircle } from '@vkontakte/icons';
+import { classNames } from '@vkontakte/vkjs';
+import { Tappable } from '../Tappable/Tappable';
+import { Subhead } from '../Typography/Subhead/Subhead';
+import styles from './HorizontalCellShowMore.module.css';
+const sizeClassNames = {
+    s: styles['HorizontalCellShowMore--size-s'],
+    m: styles['HorizontalCellShowMore--size-m'],
+    l: styles['HorizontalCellShowMore--size-l']
+};
+export const HorizontalCellShowMore = ({ className, style, getRef, getRootRef, compensateLastCellIndent, height, size = 's', children = size === 's' ? 'Все' : 'Показать все', ...restProps })=>{
+    return /*#__PURE__*/ React.createElement("div", {
+        style: style,
+        className: classNames(styles['HorizontalCellShowMore'], compensateLastCellIndent && styles['HorizontalCellShowMore--compensate-last-cell-indent'], sizeClassNames[size], className),
+        ref: getRootRef
+    }, /*#__PURE__*/ React.createElement(Tappable, {
+        style: size === 's' ? undefined : {
+            height
+        },
+        className: styles['HorizontalCellShowMore__body'],
+        getRootRef: getRef,
+        activeMode: "opacity",
+        hoverMode: "opacity",
+        ...restProps
+    }, /*#__PURE__*/ React.createElement(Icon28ChevronRightCircle, {
+        className: styles['HorizontalCellShowMore__icon'],
+        fill: "currentColor"
+    }), /*#__PURE__*/ React.createElement(Subhead, {
+        className: styles['HorizontalCellShowMore__text'],
+        weight: "2"
+    }, children)));
+};
+
+//# sourceMappingURL=HorizontalCellShowMore.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/HorizontalCellShowMore/HorizontalCellShowMore.tsx"],"sourcesContent":["import React from 'react';\nimport { Icon28ChevronRightCircle } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport type { ImageBaseSize } from '../ImageBase/ImageBase';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Subhead, SubheadProps } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCellShowMore.module.css';\n\nconst sizeClassNames = {\n  s: styles['HorizontalCellShowMore--size-s'],\n  m: styles['HorizontalCellShowMore--size-m'],\n  l: styles['HorizontalCellShowMore--size-l'],\n};\n\nexport interface HorizontalCellShowMoreProps\n  extends Omit<TappableProps, 'getRootRef' | 'size'>,\n    HasRef<HTMLElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Задаёт высоту компонента. Должeн соответствовать размеру картинок\n   * внутри соседних `HorizontalCell` компонентов.\n   *\n   * Используйте размеры заданные дизайн-системой (см. типы).\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   *\n   * Игнорируется если `size='s'`.\n   */\n  height?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Задаёт размер компонента. Аналогичен такому же пропу у [HorizontalCell](https://vkcom.github.io/VKUI/#/HorizontalCellShowMore?id=props).\n   * Должен соответствовать значению пропа `size` соседних `HorizontalCell`.\n   */\n  size?: 's' | 'm' | 'l';\n  /**\n   * Предназначен для отрисовки текста.\n   * По умолчанию для `size='s'` содержит текст `Все` для других размеров `Показать все`.\n   * */\n  children?: SubheadProps['children'];\n  /**\n   * Позволяет компенсировать особый правый отступ у предшевствующего элементa `HorizontalCell`,\n   * в том случае, если тот элемент последний в родителе.\n   * Если `HorizontalCellShowMore` находится на одном уровне с остальными `HorizontalCell`, то этот проп использовать не нужно.\n   */\n  compensateLastCellIndent?: boolean;\n}\n\nexport const HorizontalCellShowMore = ({\n  className,\n  style,\n  getRef,\n  getRootRef,\n  compensateLastCellIndent,\n  height,\n  size = 's',\n  children = size === 's' ? 'Все' : 'Показать все',\n  ...restProps\n}: HorizontalCellShowMoreProps) => {\n  return (\n    <div\n      style={style}\n      className={classNames(\n        styles['HorizontalCellShowMore'],\n        compensateLastCellIndent && styles['HorizontalCellShowMore--compensate-last-cell-indent'],\n        sizeClassNames[size],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      <Tappable\n        style={size === 's' ? undefined : { height }}\n        className={styles['HorizontalCellShowMore__body']}\n        getRootRef={getRef}\n        activeMode=\"opacity\"\n        hoverMode=\"opacity\"\n        {...restProps}\n      >\n        <Icon28ChevronRightCircle\n          className={styles['HorizontalCellShowMore__icon']}\n          fill=\"currentColor\"\n        />\n\n        <Subhead className={styles['HorizontalCellShowMore__text']} weight=\"2\">\n          {children}\n        </Subhead>\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["React","Icon28ChevronRightCircle","classNames","Tappable","Subhead","styles","sizeClassNames","s","m","l","HorizontalCellShowMore","className","style","getRef","getRootRef","compensateLastCellIndent","height","size","children","restProps","div","ref","undefined","activeMode","hoverMode","fill","weight"],"mappings":"AAAA,OAAOA,WAAW,QAAQ;AAC1B,SAASC,wBAAwB,QAAQ,mBAAmB;AAC5D,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,OAAO,QAAsB,gCAAgC;AACtE,OAAOC,YAAY,sCAAsC;AAEzD,MAAMC,iBAAiB;IACrBC,GAAGF,MAAM,CAAC,iCAAiC;IAC3CG,GAAGH,MAAM,CAAC,iCAAiC;IAC3CI,GAAGJ,MAAM,CAAC,iCAAiC;AAC7C;AAmCA,OAAO,MAAMK,yBAAyB,CAAC,EACrCC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,wBAAwB,EACxBC,MAAM,EACNC,OAAO,GAAG,EACVC,WAAWD,SAAS,MAAM,QAAQ,cAAc,EAChD,GAAGE,WACyB;IAC5B,qBACE,oBAACC;QACCR,OAAOA;QACPD,WAAWT,WACTG,MAAM,CAAC,yBAAyB,EAChCU,4BAA4BV,MAAM,CAAC,sDAAsD,EACzFC,cAAc,CAACW,KAAK,EACpBN;QAEFU,KAAKP;qBAEL,oBAACX;QACCS,OAAOK,SAAS,MAAMK,YAAY;YAAEN;QAAO;QAC3CL,WAAWN,MAAM,CAAC,+BAA+B;QACjDS,YAAYD;QACZU,YAAW;QACXC,WAAU;QACT,GAAGL,SAAS;qBAEb,oBAAClB;QACCU,WAAWN,MAAM,CAAC,+BAA+B;QACjDoB,MAAK;sBAGP,oBAACrB;QAAQO,WAAWN,MAAM,CAAC,+BAA+B;QAAEqB,QAAO;OAChER;AAKX,EAAE"}