@vkontakte/vkui 5.2.1 → 5.2.2

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

@@ -1 +1 @@
-{"version":3,"file":"PanelHeader.js","names":["React","classNames","useAdaptivity","useAdaptivityConditionalRender","usePlatform","Platform","useConfigProvider","WebviewType","FixedLayout","ModalRootContext","Separator","Spacing","TooltipContainer","Text","getPlatformClassName","platform","sizeXClassNames","compact","regular","none","PanelHeaderIn","before","after","separator","children","webviewType","useContext","isInsideModal","VKCOM","INTERNAL","PanelHeader","visor","transparent","shadow","getRef","getRootRef","fixed","className","restProps","sizeX","adaptiveSizeX","isFixed","undefined","VKAPPS"],"sources":["../../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeader.module.css';\n\nfunction getPlatformClassName(platform: string): string {\n  switch (platform) {\n    case 'ios':\n      return styles['PanelHeader--ios'];\n    case 'vkcom':\n      return styles['PanelHeader--vkcom'];\n    default:\n      return styles['PanelHeader--android'];\n  }\n}\n\nconst sizeXClassNames = {\n  compact: '',\n  regular: styles['PanelHeader--sizeX-regular'],\n  none: styles['PanelHeader--sizeX-none'],\n};\n\nexport interface PanelHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  separator?: boolean;\n  transparent?: boolean;\n  shadow?: boolean;\n  /**\n   * Если `false`, то шапка будет нулевой высоты и контент панели \"залезет\" под неё\n   */\n  visor?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n}\n\nconst PanelHeaderIn = ({ before, after, separator, children }: PanelHeaderProps) => {\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  return (\n    <React.Fragment>\n      <TooltipContainer fixed className={styles['PanelHeader__in']}>\n        <div className={styles['PanelHeader__before']}>{before}</div>\n        <div className={styles['PanelHeader__content']}>\n          {platform === Platform.VKCOM ? (\n            <Text weight=\"2\">{children}</Text>\n          ) : (\n            <span className={styles['PanelHeader__content-in']}>{children}</span>\n          )}\n        </div>\n        <div className={styles['PanelHeader__after']}>\n          {(webviewType === WebviewType.INTERNAL || isInsideModal) && after}\n        </div>\n      </TooltipContainer>\n      {separator && platform === Platform.VKCOM && <Separator wide />}\n    </React.Fragment>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  separator = true,\n  visor = true,\n  transparent = false,\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  className,\n  ...restProps\n}: PanelHeaderProps) => {\n  const platform = usePlatform();\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PanelHeader'],\n        getPlatformClassName(platform),\n        transparent && styles['PanelHeader--trnsp'],\n        shadow && styles['PanelHeader--shadow'],\n        visor && styles['PanelHeader--vis'],\n        separator && visor && styles['PanelHeader--sep'],\n        webviewType === WebviewType.VKAPPS && !isInsideModal && styles['PanelHeader--vkapps'],\n        !before && styles['PanelHeader--no-before'],\n        !after && styles['PanelHeader--no-after'],\n        isFixed && styles['PanelHeader--fixed'],\n        sizeXClassNames[sizeX],\n        className,\n      )}\n      ref={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout className={styles['PanelHeader__fixed']} vertical=\"top\" getRootRef={getRef}>\n          <PanelHeaderIn before={before} after={after} separator={separator}>\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn before={before} after={after} separator={separator}>\n          {children}\n        </PanelHeaderIn>\n      )}\n      {separator && visor && platform !== Platform.VKCOM && (\n        <React.Fragment>\n          {adaptiveSizeX.compact && <Separator className={adaptiveSizeX.compact.className} />}\n          {adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"PanelHeader.js","names":["React","classNames","useAdaptivity","useAdaptivityConditionalRender","usePlatform","SizeType","Platform","useConfigProvider","WebviewType","FixedLayout","ModalRootContext","Separator","Spacing","TooltipContainer","Text","getPlatformClassName","platform","sizeXClassNames","none","regular","PanelHeaderIn","before","after","separator","children","webviewType","useContext","isInsideModal","VKCOM","INTERNAL","PanelHeader","visor","transparent","shadow","getRef","getRootRef","fixed","className","restProps","sizeX","adaptiveSizeX","isFixed","undefined","VKAPPS","COMPACT","compact"],"sources":["../../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeader.module.css';\n\nfunction getPlatformClassName(platform: string): string {\n  switch (platform) {\n    case 'ios':\n      return styles['PanelHeader--ios'];\n    case 'vkcom':\n      return styles['PanelHeader--vkcom'];\n    default:\n      return styles['PanelHeader--android'];\n  }\n}\n\nconst sizeXClassNames = {\n  none: styles['PanelHeader--sizeX-none'],\n  regular: styles['PanelHeader--sizeX-regular'],\n};\n\nexport interface PanelHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  separator?: boolean;\n  transparent?: boolean;\n  shadow?: boolean;\n  /**\n   * Если `false`, то шапка будет нулевой высоты и контент панели \"залезет\" под неё\n   */\n  visor?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n}\n\nconst PanelHeaderIn = ({ before, after, separator, children }: PanelHeaderProps) => {\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  return (\n    <React.Fragment>\n      <TooltipContainer fixed className={styles['PanelHeader__in']}>\n        <div className={styles['PanelHeader__before']}>{before}</div>\n        <div className={styles['PanelHeader__content']}>\n          {platform === Platform.VKCOM ? (\n            <Text weight=\"2\">{children}</Text>\n          ) : (\n            <span className={styles['PanelHeader__content-in']}>{children}</span>\n          )}\n        </div>\n        <div className={styles['PanelHeader__after']}>\n          {(webviewType === WebviewType.INTERNAL || isInsideModal) && after}\n        </div>\n      </TooltipContainer>\n      {separator && platform === Platform.VKCOM && (\n        <Separator className={styles['PanelHeader__separator']} wide />\n      )}\n    </React.Fragment>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  separator = true,\n  visor = true,\n  transparent = false,\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  className,\n  ...restProps\n}: PanelHeaderProps) => {\n  const platform = usePlatform();\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PanelHeader'],\n        getPlatformClassName(platform),\n        transparent && styles['PanelHeader--trnsp'],\n        shadow && styles['PanelHeader--shadow'],\n        visor && styles['PanelHeader--vis'],\n        separator && visor && styles['PanelHeader--sep'],\n        webviewType === WebviewType.VKAPPS && !isInsideModal && styles['PanelHeader--vkapps'],\n        !before && styles['PanelHeader--no-before'],\n        !after && styles['PanelHeader--no-after'],\n        isFixed && styles['PanelHeader--fixed'],\n        sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX],\n        className,\n      )}\n      ref={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout className={styles['PanelHeader__fixed']} vertical=\"top\" getRootRef={getRef}>\n          <PanelHeaderIn before={before} after={after} separator={separator}>\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn before={before} after={after} separator={separator}>\n          {children}\n        </PanelHeaderIn>\n      )}\n      {separator && visor && platform !== Platform.VKCOM && (\n        <React.Fragment>\n          {adaptiveSizeX.compact && <Separator className={adaptiveSizeX.compact.className} />}\n          {adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,8BAA8B,QAAQ,4CAA4C;AAC3F,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAQ,oBAAoB;AAE7C,SAASC,iBAAiB,EAAEC,WAAW,QAAQ,yCAAyC;AACxF,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAASC,SAAS,QAAQ,wBAAwB;AAClD,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,gBAAgB,QAAQ,6BAA6B;AAC9D,SAASC,IAAI,QAAQ,yBAAyB;AAAC;AAG/C,SAASC,oBAAoB,CAACC,QAAgB,EAAU;EACtD,QAAQA,QAAQ;IACd,KAAK,KAAK;MACR;IACF,KAAK,OAAO;MACV;IACF;MACE;EAAsC;AAE5C;AAEA,IAAMC,eAAe,GAAG;EACtBC,IAAI,+BAAmC;EACvCC,OAAO;AACT,CAAC;AAqBD,IAAMC,aAAa,GAAG,SAAhBA,aAAa,OAAiE;EAAA,IAA3DC,MAAM,QAANA,MAAM;IAAEC,KAAK,QAALA,KAAK;IAAEC,SAAS,QAATA,SAAS;IAAEC,QAAQ,QAARA,QAAQ;EACzD,yBAAwBjB,iBAAiB,EAAE;IAAnCkB,WAAW,sBAAXA,WAAW;EACnB,wBAA0BzB,KAAK,CAAC0B,UAAU,CAAChB,gBAAgB,CAAC;IAApDiB,aAAa,qBAAbA,aAAa;EACrB,IAAMX,QAAQ,GAAGZ,WAAW,EAAE;EAE9B,oBACE,oBAAC,KAAK,CAAC,QAAQ,qBACb,oBAAC,gBAAgB;IAAC,KAAK;IAAC,SAAS;EAA4B,gBAC3D;IAAK,SAAS;EAAgC,GAAEiB,MAAM,CAAO,eAC7D;IAAK,SAAS;EAAiC,GAC5CL,QAAQ,KAAKV,QAAQ,CAACsB,KAAK,gBAC1B,oBAAC,IAAI;IAAC,MAAM,EAAC;EAAG,GAAEJ,QAAQ,CAAQ,gBAElC;IAAM,SAAS;EAAoC,GAAEA,QAAQ,CAC9D,CACG,eACN;IAAK,SAAS;EAA+B,GAC1C,CAACC,WAAW,KAAKjB,WAAW,CAACqB,QAAQ,IAAIF,aAAa,KAAKL,KAAK,CAC7D,CACW,EAClBC,SAAS,IAAIP,QAAQ,KAAKV,QAAQ,CAACsB,KAAK,iBACvC,oBAAC,SAAS;IAAC,SAAS,8BAAmC;IAAC,IAAI;EAAA,EAC7D,CACc;AAErB,CAAC;;AAED;AACA;AACA;AACA,OAAO,IAAME,WAAW,GAAG,SAAdA,WAAW,QAaA;EAAA,IAZtBT,MAAM,SAANA,MAAM;IACNG,QAAQ,SAARA,QAAQ;IACRF,KAAK,SAALA,KAAK;IAAA,wBACLC,SAAS;IAATA,SAAS,gCAAG,IAAI;IAAA,oBAChBQ,KAAK;IAALA,KAAK,4BAAG,IAAI;IAAA,0BACZC,WAAW;IAAXA,WAAW,kCAAG,KAAK;IACnBC,MAAM,SAANA,MAAM;IACNC,MAAM,SAANA,MAAM;IACNC,UAAU,SAAVA,UAAU;IACVC,KAAK,SAALA,KAAK;IACLC,SAAS,SAATA,SAAS;IACNC,SAAS;EAEZ,IAAMtB,QAAQ,GAAGZ,WAAW,EAAE;EAC9B,0BAAwBG,iBAAiB,EAAE;IAAnCkB,WAAW,uBAAXA,WAAW;EACnB,yBAA0BzB,KAAK,CAAC0B,UAAU,CAAChB,gBAAgB,CAAC;IAApDiB,aAAa,sBAAbA,aAAa;EACrB,qBAA2BzB,aAAa,EAAE;IAAA,sCAAlCqC,KAAK;IAALA,KAAK,qCAAG,MAAM;EACtB,4BAAiCpC,8BAA8B,EAAE;IAAlDqC,aAAa,yBAApBD,KAAK;EACb,IAAIE,OAAO,GAAGL,KAAK,KAAKM,SAAS,GAAGN,KAAK,GAAGpB,QAAQ,KAAKV,QAAQ,CAACsB,KAAK;EAEvE,oBACE,wCACMU,SAAS;IACb,SAAS,EAAErC,UAAU,oBAEnBc,oBAAoB,CAACC,QAAQ,CAAC,EAC9BgB,WAAW,4BAAgC,EAC3CC,MAAM,6BAAiC,EACvCF,KAAK,0BAA8B,EACnCR,SAAS,IAAIQ,KAAK,0BAA8B,EAChDN,WAAW,KAAKjB,WAAW,CAACmC,MAAM,IAAI,CAAChB,aAAa,6BAAiC,EACrF,CAACN,MAAM,gCAAoC,EAC3C,CAACC,KAAK,+BAAmC,EACzCmB,OAAO,4BAAgC,EACvCF,KAAK,KAAKlC,QAAQ,CAACuC,OAAO,IAAI3B,eAAe,CAACsB,KAAK,CAAC,EACpDF,SAAS,CACT;IACF,GAAG,EAAEI,OAAO,GAAGN,UAAU,GAAGD;EAAO,IAElCO,OAAO,gBACN,oBAAC,WAAW;IAAC,SAAS,0BAA+B;IAAC,QAAQ,EAAC,KAAK;IAAC,UAAU,EAAEP;EAAO,gBACtF,oBAAC,aAAa;IAAC,MAAM,EAAEb,MAAO;IAAC,KAAK,EAAEC,KAAM;IAAC,SAAS,EAAEC;EAAU,GAC/DC,QAAQ,CACK,CACJ,gBAEd,oBAAC,aAAa;IAAC,MAAM,EAAEH,MAAO;IAAC,KAAK,EAAEC,KAAM;IAAC,SAAS,EAAEC;EAAU,GAC/DC,QAAQ,CAEZ,EACAD,SAAS,IAAIQ,KAAK,IAAIf,QAAQ,KAAKV,QAAQ,CAACsB,KAAK,iBAChD,oBAAC,KAAK,CAAC,QAAQ,QACZY,aAAa,CAACK,OAAO,iBAAI,oBAAC,SAAS;IAAC,SAAS,EAAEL,aAAa,CAACK,OAAO,CAACR;EAAU,EAAG,EAClFG,aAAa,CAACrB,OAAO,iBACpB,oBAAC,OAAO;IAAC,SAAS,EAAEqB,aAAa,CAACrB,OAAO,CAACkB,SAAU;IAAC,IAAI,EAAE;EAAG,EAC/D,CAEJ,CACG;AAEV,CAAC"}

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

@@ -1 +1 @@
-.vkuiPanelHeader{position:relative}.vkuiPanelHeader--vis.vkuiPanelHeader--fixed:before{content:"";display:block}.vkuiPanelHeader:not(.vkuiPanelHeader--vis):not(.vkuiPanelHeader--fixed){height:0}.vkuiPanelHeader__fixed{z-index:10;z-index:var(--vkui_internal--z_index_panel_header_fixed)}.vkuiPanelHeader__in{align-items:center;background:#fff;background:var(--vkui--color_background_content);display:flex;justify-content:space-between;position:relative;white-space:nowrap}.vkuiPanelHeader--trnsp .vkuiPanelHeader__in{background:transparent}.vkuiPanelHeader--sizeX-regular .vkuiPanelHeader--shadow .vkuiPanelHeader__in{box-shadow:0 0 4px rgba(0,0,0,.08)}@media (min-width:768px){.vkuiPanelHeader--sizeX-none .vkuiPanelHeader--shadow .vkuiPanelHeader__in{box-shadow:0 0 4px rgba(0,0,0,.08)}}.vkuiPanelHeader__before{box-sizing:border-box;color:#2688eb;color:var(--vkui--color_icon_accent_themed);display:flex;flex-shrink:0}.vkuiPanelHeader__content{overflow:hidden}.vkuiPanelHeader__content>*{display:block;overflow:hidden;text-overflow:ellipsis}.vkuiPanelHeader__content-in{color:#000;color:var(--vkui--color_text_primary);font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_accent);font-weight:500}.vkuiPanelHeader:before,.vkuiPanelHeader__in{height:56px;height:var(--vkui--size_panel_header_height--regular);padding-top:0;padding-top:var(--vkui_internal--safe_area_inset_top)}.vkuiPanelHeader__after{box-sizing:border-box;color:#2688eb;color:var(--vkui--color_icon_accent_themed);display:flex;justify-content:flex-end}.vkuiPanelHeader--vkapps .vkuiPanelHeader__after{min-width:90px}.vkuiPanelHeader--ios .vkuiPanelHeader__before{flex-basis:0;flex-grow:1;flex-shrink:0;opacity:1;padding:4px 0 4px 4px;transition:opacity .3s cubic-bezier(.4,0,.2,1);transition:opacity .3s var(--vkui--animation_easing_platform)}.vkuiPanelHeader--ios .vkuiPanelHeader__before .vkuiPanelHeaderButton+.vkuiPanelHeaderButton--primitive{margin-left:-6px;padding-left:0}.vkuiPanelHeader--ios .vkuiPanelHeader__content{opacity:1;text-align:center;transition:opacity .3s cubic-bezier(.4,0,.2,1);transition:opacity .3s var(--vkui--animation_easing_platform)}.vkuiPanelHeader--ios .vkuiPanelHeader__content-in{font-size:21px}.vkuiPanelHeader--ios .vkuiPanelHeader__content>*{padding:0 4px}.vkuiPanelHeader--ios.vkuiPanelHeader--no-before .vkuiPanelHeader__content{padding-left:8px}.vkuiPanelHeader--ios.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*{padding-right:0}.vkuiPanelHeader--ios.vkuiPanelHeader--no-after .vkuiPanelHeader__content{padding-right:8px}.vkuiPanelHeader--ios .vkuiPanelHeader__after{flex-basis:0;flex-grow:1;flex-shrink:0;opacity:1;padding:4px 4px 4px 0;transition:opacity .3s cubic-bezier(.4,0,.2,1);transition:opacity .3s var(--vkui--animation_easing_platform)}.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__after,.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__before,.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__content{opacity:0}.vkuiPanelHeader--android .vkuiPanelHeader__before:not(:empty){padding:4px 0 4px 4px}.vkuiPanelHeader--android .vkuiPanelHeader__content{align-items:center;flex-grow:1;max-width:100%}.vkuiPanelHeader--android .vkuiPanelHeader__content-in{font-size:23px}.vkuiPanelHeader--android .vkuiPanelHeader__content>*{padding:0 12px}.vkuiPanelHeader--android .vkuiSearch,.vkuiPanelHeader--vkcom .vkuiSearch{padding:0 4px}.vkuiSplitCol--spaced .vkuiPanelHeader--android.vkuiPanelHeader--no-before:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content,.vkuiSplitCol--viewWidth-tabletPlus.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-before:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-left:0}@media (min-width:768px){.vkuiSplitCol--viewWidth-none.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-before:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-left:0}}.vkuiPanelHeader--android.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*,.vkuiPanelHeader--vkcom.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*{padding-right:0}.vkuiPanelHeader--android.vkuiPanelHeader--no-after .vkuiPanelHeader__content{padding-right:16px}.vkuiPanelHeader--android.vkuiPanelHeader--no-before .vkuiPanelHeader__content{padding-left:16px}.vkuiSplitCol--spaced .vkuiPanelHeader--android.vkuiPanelHeader--no-after:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content,.vkuiSplitCol--viewWidth-tabletPlus.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-after:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-right:0}@media (min-width:768px){.vkuiSplitCol--viewWidth-none.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-after:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-right:0}}.vkuiPanelHeader--android .vkuiPanelHeader__after:not(:empty),.vkuiPanelHeader--vkcom .vkuiPanelHeader__after:not(:empty){padding:4px 4px 4px 0}.vkuiPanelHeader--vkcom{position:relative;z-index:10;z-index:var(--vkui_internal--z_index_panel_header_fixed)}.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-regular:not(.vkuiModalPageHeader__in):after,.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-regular:not(.vkuiPanelHeader--sep) .vkuiPanelHeader__in:after{background-color:#fff;background-color:var(--vkui--color_background_content);bottom:0;content:"";height:1px;height:var(--vkui_internal--thin_border);left:1px;left:var(--vkui_internal--thin_border);position:absolute;right:1px;right:var(--vkui_internal--thin_border)}@media (min-width:768px){.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-none:not(.vkuiModalPageHeader__in):after,.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-none:not(.vkuiPanelHeader--sep) .vkuiPanelHeader__in:after{background-color:#fff;background-color:var(--vkui--color_background_content);bottom:0;content:"";height:1px;height:var(--vkui_internal--thin_border);left:1px;left:var(--vkui_internal--thin_border);position:absolute;right:1px;right:var(--vkui_internal--thin_border)}}.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-regular:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__in{border-bottom:none;border-top-left-radius:12px;border-top-left-radius:var(--vkui--size_border_radius_paper--regular);border-top-right-radius:12px;border-top-right-radius:var(--vkui--size_border_radius_paper--regular);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);box-shadow:0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha) inset}@media (min-width:768px){.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-none:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__in{border-bottom:none;border-top-left-radius:12px;border-top-left-radius:var(--vkui--size_border_radius_paper--regular);border-top-right-radius:12px;border-top-right-radius:var(--vkui--size_border_radius_paper--regular);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);box-shadow:0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha) inset}}.vkuiPanelHeader--vkcom .vkuiPanelHeader__content{text-align:center}.vkuiPanelHeader--vkcom .vkuiPanelHeader__before:not(:empty){padding:0 0 0 4px}.vkuiPanelHeader--vkcom .vkuiPanelHeader__after,.vkuiPanelHeader--vkcom .vkuiPanelHeader__before{flex-basis:0;flex-grow:1;flex-shrink:0}.vkuiPanelHeader--no-before .vkuiPanelHeader__content>*{padding-left:0}
+.vkuiPanelHeader{position:relative}.vkuiPanelHeader--vis.vkuiPanelHeader--fixed:before{content:"";display:block}.vkuiPanelHeader:not(.vkuiPanelHeader--vis):not(.vkuiPanelHeader--fixed){height:0}.vkuiPanelHeader__fixed{z-index:10;z-index:var(--vkui_internal--z_index_panel_header_fixed)}.vkuiPanelHeader__in{align-items:center;background:#fff;background:var(--vkui--color_background_content);display:flex;justify-content:space-between;position:relative;white-space:nowrap}.vkuiPanelHeader--trnsp .vkuiPanelHeader__in{background:transparent}.vkuiPanelHeader--sizeX-regular .vkuiPanelHeader--shadow .vkuiPanelHeader__in{box-shadow:0 0 4px rgba(0,0,0,.08)}@media (min-width:768px){.vkuiPanelHeader--sizeX-none .vkuiPanelHeader--shadow .vkuiPanelHeader__in{box-shadow:0 0 4px rgba(0,0,0,.08)}}.vkuiPanelHeader__before{box-sizing:border-box;color:#2688eb;color:var(--vkui--color_icon_accent_themed);display:flex;flex-shrink:0}.vkuiPanelHeader__content{overflow:hidden}.vkuiPanelHeader__content>*{display:block;overflow:hidden;text-overflow:ellipsis}.vkuiPanelHeader__content-in{color:#000;color:var(--vkui--color_text_primary);font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_accent);font-weight:500}.vkuiPanelHeader:before,.vkuiPanelHeader__in{height:56px;height:var(--vkui--size_panel_header_height--regular);padding-top:0;padding-top:var(--vkui_internal--safe_area_inset_top)}.vkuiPanelHeader__after{box-sizing:border-box;color:#2688eb;color:var(--vkui--color_icon_accent_themed);display:flex;justify-content:flex-end}.vkuiPanelHeader--vkapps .vkuiPanelHeader__after{min-width:90px}.vkuiPanelHeader--ios .vkuiPanelHeader__before{flex-basis:0;flex-grow:1;flex-shrink:0;opacity:1;padding:4px 0 4px 4px;transition:opacity .3s cubic-bezier(.4,0,.2,1);transition:opacity .3s var(--vkui--animation_easing_platform)}.vkuiPanelHeader--ios .vkuiPanelHeader__before .vkuiPanelHeaderButton+.vkuiPanelHeaderButton--primitive{margin-left:-6px;padding-left:0}.vkuiPanelHeader--ios .vkuiPanelHeader__content{opacity:1;text-align:center;transition:opacity .3s cubic-bezier(.4,0,.2,1);transition:opacity .3s var(--vkui--animation_easing_platform)}.vkuiPanelHeader--ios .vkuiPanelHeader__content-in{font-size:21px}.vkuiPanelHeader--ios .vkuiPanelHeader__content>*{padding:0 4px}.vkuiPanelHeader--ios.vkuiPanelHeader--no-before .vkuiPanelHeader__content{padding-left:8px}.vkuiPanelHeader--ios.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*{padding-right:0}.vkuiPanelHeader--ios.vkuiPanelHeader--no-after .vkuiPanelHeader__content{padding-right:8px}.vkuiPanelHeader--ios .vkuiPanelHeader__after{flex-basis:0;flex-grow:1;flex-shrink:0;opacity:1;padding:4px 4px 4px 0;transition:opacity .3s cubic-bezier(.4,0,.2,1);transition:opacity .3s var(--vkui--animation_easing_platform)}.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__after,.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__before,.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__content{opacity:0}.vkuiPanelHeader--android .vkuiPanelHeader__before:not(:empty){padding:4px 0 4px 4px}.vkuiPanelHeader--android .vkuiPanelHeader__content{align-items:center;flex-grow:1;max-width:100%}.vkuiPanelHeader--android .vkuiPanelHeader__content-in{font-size:23px}.vkuiPanelHeader--android .vkuiPanelHeader__content>*{padding:0 12px}.vkuiPanelHeader--android .vkuiSearch,.vkuiPanelHeader--vkcom .vkuiSearch{padding:0 4px}.vkuiSplitCol--spaced .vkuiPanelHeader--android.vkuiPanelHeader--no-before:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content,.vkuiSplitCol--viewWidth-tabletPlus.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-before:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-left:0}@media (min-width:768px){.vkuiSplitCol--viewWidth-none.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-before:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-left:0}}.vkuiPanelHeader--android.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*,.vkuiPanelHeader--vkcom.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*{padding-right:0}.vkuiPanelHeader--android.vkuiPanelHeader--no-after .vkuiPanelHeader__content{padding-right:16px}.vkuiPanelHeader--android.vkuiPanelHeader--no-before .vkuiPanelHeader__content{padding-left:16px}.vkuiSplitCol--spaced .vkuiPanelHeader--android.vkuiPanelHeader--no-after:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content,.vkuiSplitCol--viewWidth-tabletPlus.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-after:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-right:0}@media (min-width:768px){.vkuiSplitCol--viewWidth-none.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-after:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-right:0}}.vkuiPanelHeader--android .vkuiPanelHeader__after:not(:empty),.vkuiPanelHeader--vkcom .vkuiPanelHeader__after:not(:empty){padding:4px 4px 4px 0}.vkuiPanelHeader--vkcom{position:relative;z-index:10;z-index:var(--vkui_internal--z_index_panel_header_fixed)}.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-regular:not(.vkuiModalPageHeader__in):not(.vkuiPanelHeader--sep) .vkuiPanelHeader__in:after{background-color:#fff;background-color:var(--vkui--color_background_content);bottom:0;content:"";height:1px;height:var(--vkui_internal--thin_border);left:1px;left:var(--vkui_internal--thin_border);position:absolute;right:1px;right:var(--vkui_internal--thin_border)}@media (min-width:768px){.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-none:not(.vkuiModalPageHeader__in):not(.vkuiPanelHeader--sep) .vkuiPanelHeader__in:after{background-color:#fff;background-color:var(--vkui--color_background_content);bottom:0;content:"";height:1px;height:var(--vkui_internal--thin_border);left:1px;left:var(--vkui_internal--thin_border);position:absolute;right:1px;right:var(--vkui_internal--thin_border)}}.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-regular:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__in{border-bottom:none;border-top-left-radius:12px;border-top-left-radius:var(--vkui--size_border_radius_paper--regular);border-top-right-radius:12px;border-top-right-radius:var(--vkui--size_border_radius_paper--regular);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);box-shadow:0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha) inset}@media (min-width:768px){.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-none:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__in{border-bottom:none;border-top-left-radius:12px;border-top-left-radius:var(--vkui--size_border_radius_paper--regular);border-top-right-radius:12px;border-top-right-radius:var(--vkui--size_border_radius_paper--regular);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);box-shadow:0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha) inset}}.vkuiPanelHeader--vkcom .vkuiPanelHeader__content{text-align:center}.vkuiPanelHeader--vkcom .vkuiPanelHeader__before:not(:empty){padding:0 0 0 4px}.vkuiPanelHeader--vkcom .vkuiPanelHeader__after,.vkuiPanelHeader--vkcom .vkuiPanelHeader__before{flex-basis:0;flex-grow:1;flex-shrink:0}.vkuiPanelHeader__separator{margin-top:calc(-1 * 1px);margin-top:calc(-1 * var(--vkui_internal--thin_border))}.vkuiPanelHeader--no-before .vkuiPanelHeader__content>*{padding-left:0}

package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.js

@@ -72,9 +72,10 @@ export var PanelHeaderButton = function PanelHeaderButton(_ref2) {
       warn('a11y: У кнопки нет названия, которое может прочитать скринридер, и она недоступна для части пользователей. Замените содержимое на текст или добавьте описание действия с помощью пропа aria-label.', 'error');
     }
   }
-  return /*#__PURE__*/React.createElement(Tappable, _extends({}, restProps, {
+  return /*#__PURE__*/React.createElement(Tappable, _extends({
+    Component: restProps.href ? 'a' : 'button'
+  }, restProps, {
     hoverMode: hoverMode,
-    Component: restProps.href ? 'a' : 'button',
     activeEffectDelay: 200,
     activeMode: activeMode,
     className: classNames("vkuiPanelHeaderButton", getPlatformClassName(platform), isPrimitive && "vkuiPanelHeaderButton--primitive", !isPrimitive && !isPrimitiveLabel && "vkuiPanelHeaderButton--notPrimitive", className)

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

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderButton.js","names":["React","classNames","isPrimitiveReactNode","usePlatform","Platform","getTitleFromChildren","warnOnce","Tappable","Text","Title","getPlatformClassName","platform","ButtonTypography","primary","children","IOS","VKCOM","undefined","warn","PanelHeaderButton","label","className","restProps","isPrimitive","isPrimitiveLabel","hoverMode","activeMode","process","env","NODE_ENV","hasAccessibleName","Boolean","href"],"sources":["../../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './PanelHeaderButton.module.css';\n\nfunction getPlatformClassName(platform: string): string {\n  switch (platform) {\n    case 'ios':\n      return styles['PanelHeaderButton--ios'];\n    case 'vkcom':\n      return styles['PanelHeaderButton--vkcom'];\n    default:\n      return styles['PanelHeaderButton--android'];\n  }\n}\n\nexport interface PanelHeaderButtonProps extends Omit<TappableProps, 'label'> {\n  primary?: boolean;\n  label?: React.ReactNode;\n}\n\ninterface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {\n  primary?: PanelHeaderButtonProps['primary'];\n}\n\nconst ButtonTypography = ({ primary, children }: ButtonTypographyProps) => {\n  const platform = usePlatform();\n\n  if (platform === Platform.IOS) {\n    return (\n      <Title Component=\"span\" level=\"3\" weight={primary ? '1' : '3'}>\n        {children}\n      </Title>\n    );\n  }\n\n  return <Text weight={platform === Platform.VKCOM ? undefined : '2'}>{children}</Text>;\n};\n\nconst warn = warnOnce('PanelHeaderButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderButton = ({\n  children,\n  primary = false,\n  label,\n  className,\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const isPrimitive = isPrimitiveReactNode(children);\n  const isPrimitiveLabel = isPrimitiveReactNode(label);\n  const platform = usePlatform();\n\n  let hoverMode;\n  let activeMode;\n\n  switch (platform) {\n    case Platform.IOS:\n      hoverMode = 'background';\n      activeMode = 'opacity';\n      break;\n    case Platform.VKCOM:\n      hoverMode = styles['PanelHeaderButton--hover'];\n      activeMode = styles['PanelHeaderButton--active'];\n      break;\n    default:\n      hoverMode = 'background';\n      activeMode = 'background';\n  }\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = Boolean(\n      getTitleFromChildren(children) ||\n        getTitleFromChildren(label) ||\n        restProps['aria-label'] ||\n        restProps['aria-labelledby'],\n    );\n\n    if (!hasAccessibleName) {\n      warn(\n        'a11y: У кнопки нет названия, которое может прочитать скринридер, и она недоступна для части пользователей. Замените содержимое на текст или добавьте описание действия с помощью пропа aria-label.',\n        'error',\n      );\n    }\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      hoverMode={hoverMode}\n      Component={restProps.href ? 'a' : 'button'}\n      activeEffectDelay={200}\n      activeMode={activeMode}\n      className={classNames(\n        styles['PanelHeaderButton'],\n        getPlatformClassName(platform),\n        isPrimitive && styles['PanelHeaderButton--primitive'],\n        !isPrimitive && !isPrimitiveLabel && styles['PanelHeaderButton--notPrimitive'],\n        className,\n      )}\n    >\n      {isPrimitive ? <ButtonTypography primary={primary}>{children}</ButtonTypography> : children}\n      {isPrimitiveLabel ? (\n        <ButtonTypography primary={primary} className={styles['PanelHeaderButton__label']}>\n          {label}\n        </ButtonTypography>\n      ) : (\n        label\n      )}\n    </Tappable>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"PanelHeaderButton.js","names":["React","classNames","isPrimitiveReactNode","usePlatform","Platform","getTitleFromChildren","warnOnce","Tappable","Text","Title","getPlatformClassName","platform","ButtonTypography","primary","children","IOS","VKCOM","undefined","warn","PanelHeaderButton","label","className","restProps","isPrimitive","isPrimitiveLabel","hoverMode","activeMode","process","env","NODE_ENV","hasAccessibleName","Boolean","href"],"sources":["../../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './PanelHeaderButton.module.css';\n\nfunction getPlatformClassName(platform: string): string {\n  switch (platform) {\n    case 'ios':\n      return styles['PanelHeaderButton--ios'];\n    case 'vkcom':\n      return styles['PanelHeaderButton--vkcom'];\n    default:\n      return styles['PanelHeaderButton--android'];\n  }\n}\n\nexport interface PanelHeaderButtonProps extends Omit<TappableProps, 'label'> {\n  primary?: boolean;\n  label?: React.ReactNode;\n}\n\ninterface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {\n  primary?: PanelHeaderButtonProps['primary'];\n}\n\nconst ButtonTypography = ({ primary, children }: ButtonTypographyProps) => {\n  const platform = usePlatform();\n\n  if (platform === Platform.IOS) {\n    return (\n      <Title Component=\"span\" level=\"3\" weight={primary ? '1' : '3'}>\n        {children}\n      </Title>\n    );\n  }\n\n  return <Text weight={platform === Platform.VKCOM ? undefined : '2'}>{children}</Text>;\n};\n\nconst warn = warnOnce('PanelHeaderButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderButton = ({\n  children,\n  primary = false,\n  label,\n  className,\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const isPrimitive = isPrimitiveReactNode(children);\n  const isPrimitiveLabel = isPrimitiveReactNode(label);\n  const platform = usePlatform();\n\n  let hoverMode;\n  let activeMode;\n\n  switch (platform) {\n    case Platform.IOS:\n      hoverMode = 'background';\n      activeMode = 'opacity';\n      break;\n    case Platform.VKCOM:\n      hoverMode = styles['PanelHeaderButton--hover'];\n      activeMode = styles['PanelHeaderButton--active'];\n      break;\n    default:\n      hoverMode = 'background';\n      activeMode = 'background';\n  }\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = Boolean(\n      getTitleFromChildren(children) ||\n        getTitleFromChildren(label) ||\n        restProps['aria-label'] ||\n        restProps['aria-labelledby'],\n    );\n\n    if (!hasAccessibleName) {\n      warn(\n        'a11y: У кнопки нет названия, которое может прочитать скринридер, и она недоступна для части пользователей. Замените содержимое на текст или добавьте описание действия с помощью пропа aria-label.',\n        'error',\n      );\n    }\n  }\n\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      hoverMode={hoverMode}\n      activeEffectDelay={200}\n      activeMode={activeMode}\n      className={classNames(\n        styles['PanelHeaderButton'],\n        getPlatformClassName(platform),\n        isPrimitive && styles['PanelHeaderButton--primitive'],\n        !isPrimitive && !isPrimitiveLabel && styles['PanelHeaderButton--notPrimitive'],\n        className,\n      )}\n    >\n      {isPrimitive ? <ButtonTypography primary={primary}>{children}</ButtonTypography> : children}\n      {isPrimitiveLabel ? (\n        <ButtonTypography primary={primary} className={styles['PanelHeaderButton__label']}>\n          {label}\n        </ButtonTypography>\n      ) : (\n        label\n      )}\n    </Tappable>\n  );\n};\n"],"mappings":"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"}

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

@@ -33,7 +33,7 @@ export interface RichCellProps extends TappableProps {
      */
     before?: React.ReactNode;
     /**
-     * Иконка 24 или текст.
+     * Иконка 28 или текст.
      */
     after?: React.ReactNode;
     /**
@@ -52,4 +52,7 @@ export interface RichCellProps extends TappableProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/RichCell
  */
-export declare const RichCell: ({ subhead, children, text, caption, before, after, afterCaption, bottom, actions, multiline, className, ...restProps }: RichCellProps) => JSX.Element;
+export declare const RichCell: {
+    ({ subhead, children, text, caption, before, after, afterCaption, bottom, actions, multiline, className, ...restProps }: RichCellProps): JSX.Element;
+    Icon: ({ children, className, ...restProps }: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+};

package/dist/cssm/components/RichCell/RichCell.js

@@ -8,6 +8,7 @@ import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { SizeType } from '../../lib/adaptivity';
 import { Tappable } from '../Tappable/Tappable';
 import { Subhead } from '../Typography/Subhead/Subhead';
+import { RichCellIcon } from './RichCellIcon/RichCellIcon';
 import "./RichCell.module.css";
 var sizeYClassNames = _defineProperty({
   none: "vkuiRichCell--sizeY-none"
@@ -63,4 +64,5 @@ export var RichCell = function RichCell(_ref) {
     className: "vkuiRichCell__actions"
   }, actions)));
 };
+RichCell.Icon = RichCellIcon;
 //# sourceMappingURL=RichCell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RichCell.js","names":["React","classNames","useAdaptivity","SizeType","Tappable","Subhead","sizeYClassNames","none","COMPACT","RichCell","subhead","children","text","caption","before","after","afterCaption","bottom","actions","multiline","className","restProps","sizeY","REGULAR"],"sources":["../../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './RichCell.module.css';\n\nconst sizeYClassNames = {\n  none: styles['RichCell--sizeY-none'],\n  [SizeType.COMPACT]: styles['RichCell--sizeY-compact'],\n};\n\nexport interface RichCellProps extends TappableProps {\n  /**\n   * Контейнер для текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Контейнер для текста под `children`.\n   */\n  text?: React.ReactNode;\n  /**\n   * Контейнер для текста под `text`.\n   */\n  caption?: React.ReactNode;\n  /**\n   * Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n   */\n  bottom?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `mode=\"primary\" size=\"s\"`\n   * - `mode=\"secondary\" size=\"s\"`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `mode=\"horizontal\" gap=\"s\" stretched`\n   */\n  actions?: React.ReactNode;\n  /**\n   * `<Avatar size={40|48|72} />`.\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 24 или текст.\n   */\n  after?: React.ReactNode;\n  /**\n   * Текст под `after`.\n   */\n  afterCaption?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия.\n   */\n  disabled?: boolean;\n  /**\n   * Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n   */\n  multiline?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichCell\n */\nexport const RichCell = ({\n  subhead,\n  children,\n  text,\n  caption,\n  before,\n  after,\n  afterCaption,\n  bottom,\n  actions,\n  multiline,\n  className,\n  ...restProps\n}: RichCellProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['RichCell'],\n        !multiline && styles['RichCell--text-ellipsis'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n    >\n      {before && <div className={styles['RichCell__before']}>{before}</div>}\n      <div className={styles['RichCell__in']}>\n        <div className={styles['RichCell__content']}>\n          <div className={styles['RichCell__content-before']}>\n            {subhead && (\n              <Subhead Component=\"div\" className={styles['RichCell__subhead']}>\n                {subhead}\n              </Subhead>\n            )}\n            <div className={styles['RichCell__children']}>{children}</div>\n            {text && <div className={styles['RichCell__text']}>{text}</div>}\n            {caption && (\n              <Subhead Component=\"div\" className={styles['RichCell__caption']}>\n                {caption}\n              </Subhead>\n            )}\n          </div>\n          {(after || afterCaption) && (\n            <div className={styles['RichCell__content-after']}>\n              {after && <div className={styles['RichCell__after-children']}>{after}</div>}\n              {afterCaption && (\n                <div className={styles['RichCell__after-caption']}>{afterCaption}</div>\n              )}\n            </div>\n          )}\n        </div>\n        {bottom && <div className={styles['RichCell__bottom']}>{bottom}</div>}\n        {actions && <div className={styles['RichCell__actions']}>{actions}</div>}\n      </div>\n    </Tappable>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAuB,sBAAsB;AAC9D,SAASC,OAAO,QAAQ,+BAA+B;AAAC;AAGxD,IAAMC,eAAe;EACnBC,IAAI;AAAgC,GACnCJ,QAAQ,CAACK,OAAO,gCAClB;AAoDD;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAaA;EAAA,IAZnBC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACJC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,YAAY,QAAZA,YAAY;IACZC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAA2BnB,aAAa,EAAE;IAAA,sCAAlCoB,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE,oBAAC,QAAQ,eACHD,SAAS;IACb,SAAS,EAAEpB,UAAU,iBAEnB,CAACkB,SAAS,iCAAqC,EAC/CG,KAAK,KAAKnB,QAAQ,CAACoB,OAAO,IAAIjB,eAAe,CAACgB,KAAK,CAAC,EACpDF,SAAS;EACT,IAEDN,MAAM,iBAAI;IAAK,SAAS;EAA6B,GAAEA,MAAM,CAAO,eACrE;IAAK,SAAS;EAAyB,gBACrC;IAAK,SAAS;EAA8B,gBAC1C;IAAK,SAAS;EAAqC,GAChDJ,OAAO,iBACN,oBAAC,OAAO;IAAC,SAAS,EAAC,KAAK;IAAC,SAAS;EAA8B,GAC7DA,OAAO,CAEX,eACD;IAAK,SAAS;EAA+B,GAAEC,QAAQ,CAAO,EAC7DC,IAAI,iBAAI;IAAK,SAAS;EAA2B,GAAEA,IAAI,CAAO,EAC9DC,OAAO,iBACN,oBAAC,OAAO;IAAC,SAAS,EAAC,KAAK;IAAC,SAAS;EAA8B,GAC7DA,OAAO,CAEX,CACG,EACL,CAACE,KAAK,IAAIC,YAAY,kBACrB;IAAK,SAAS;EAAoC,GAC/CD,KAAK,iBAAI;IAAK,SAAS;EAAqC,GAAEA,KAAK,CAAO,EAC1EC,YAAY,iBACX;IAAK,SAAS;EAAoC,GAAEA,YAAY,CACjE,CAEJ,CACG,EACLC,MAAM,iBAAI;IAAK,SAAS;EAA6B,GAAEA,MAAM,CAAO,EACpEC,OAAO,iBAAI;IAAK,SAAS;EAA8B,GAAEA,OAAO,CAAO,CACpE,CACG;AAEf,CAAC"}
+{"version":3,"file":"RichCell.js","names":["React","classNames","useAdaptivity","SizeType","Tappable","Subhead","RichCellIcon","sizeYClassNames","none","COMPACT","RichCell","subhead","children","text","caption","before","after","afterCaption","bottom","actions","multiline","className","restProps","sizeY","REGULAR","Icon"],"sources":["../../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { RichCellIcon } from './RichCellIcon/RichCellIcon';\nimport styles from './RichCell.module.css';\n\nconst sizeYClassNames = {\n  none: styles['RichCell--sizeY-none'],\n  [SizeType.COMPACT]: styles['RichCell--sizeY-compact'],\n};\n\nexport interface RichCellProps extends TappableProps {\n  /**\n   * Контейнер для текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Контейнер для текста под `children`.\n   */\n  text?: React.ReactNode;\n  /**\n   * Контейнер для текста под `text`.\n   */\n  caption?: React.ReactNode;\n  /**\n   * Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n   */\n  bottom?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `mode=\"primary\" size=\"s\"`\n   * - `mode=\"secondary\" size=\"s\"`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `mode=\"horizontal\" gap=\"s\" stretched`\n   */\n  actions?: React.ReactNode;\n  /**\n   * `<Avatar size={40|48|72} />`.\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 28 или текст.\n   */\n  after?: React.ReactNode;\n  /**\n   * Текст под `after`.\n   */\n  afterCaption?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия.\n   */\n  disabled?: boolean;\n  /**\n   * Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n   */\n  multiline?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichCell\n */\nexport const RichCell = ({\n  subhead,\n  children,\n  text,\n  caption,\n  before,\n  after,\n  afterCaption,\n  bottom,\n  actions,\n  multiline,\n  className,\n  ...restProps\n}: RichCellProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['RichCell'],\n        !multiline && styles['RichCell--text-ellipsis'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n    >\n      {before && <div className={styles['RichCell__before']}>{before}</div>}\n      <div className={styles['RichCell__in']}>\n        <div className={styles['RichCell__content']}>\n          <div className={styles['RichCell__content-before']}>\n            {subhead && (\n              <Subhead Component=\"div\" className={styles['RichCell__subhead']}>\n                {subhead}\n              </Subhead>\n            )}\n            <div className={styles['RichCell__children']}>{children}</div>\n            {text && <div className={styles['RichCell__text']}>{text}</div>}\n            {caption && (\n              <Subhead Component=\"div\" className={styles['RichCell__caption']}>\n                {caption}\n              </Subhead>\n            )}\n          </div>\n          {(after || afterCaption) && (\n            <div className={styles['RichCell__content-after']}>\n              {after && <div className={styles['RichCell__after-children']}>{after}</div>}\n              {afterCaption && (\n                <div className={styles['RichCell__after-caption']}>{afterCaption}</div>\n              )}\n            </div>\n          )}\n        </div>\n        {bottom && <div className={styles['RichCell__bottom']}>{bottom}</div>}\n        {actions && <div className={styles['RichCell__actions']}>{actions}</div>}\n      </div>\n    </Tappable>\n  );\n};\n\nRichCell.Icon = RichCellIcon;\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAuB,sBAAsB;AAC9D,SAASC,OAAO,QAAQ,+BAA+B;AACvD,SAASC,YAAY,QAAQ,6BAA6B;AAAC;AAG3D,IAAMC,eAAe;EACnBC,IAAI;AAAgC,GACnCL,QAAQ,CAACM,OAAO,gCAClB;AAoDD;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAaA;EAAA,IAZnBC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACJC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,YAAY,QAAZA,YAAY;IACZC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAA2BpB,aAAa,EAAE;IAAA,sCAAlCqB,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE,oBAAC,QAAQ,eACHD,SAAS;IACb,SAAS,EAAErB,UAAU,iBAEnB,CAACmB,SAAS,iCAAqC,EAC/CG,KAAK,KAAKpB,QAAQ,CAACqB,OAAO,IAAIjB,eAAe,CAACgB,KAAK,CAAC,EACpDF,SAAS;EACT,IAEDN,MAAM,iBAAI;IAAK,SAAS;EAA6B,GAAEA,MAAM,CAAO,eACrE;IAAK,SAAS;EAAyB,gBACrC;IAAK,SAAS;EAA8B,gBAC1C;IAAK,SAAS;EAAqC,GAChDJ,OAAO,iBACN,oBAAC,OAAO;IAAC,SAAS,EAAC,KAAK;IAAC,SAAS;EAA8B,GAC7DA,OAAO,CAEX,eACD;IAAK,SAAS;EAA+B,GAAEC,QAAQ,CAAO,EAC7DC,IAAI,iBAAI;IAAK,SAAS;EAA2B,GAAEA,IAAI,CAAO,EAC9DC,OAAO,iBACN,oBAAC,OAAO;IAAC,SAAS,EAAC,KAAK;IAAC,SAAS;EAA8B,GAC7DA,OAAO,CAEX,CACG,EACL,CAACE,KAAK,IAAIC,YAAY,kBACrB;IAAK,SAAS;EAAoC,GAC/CD,KAAK,iBAAI;IAAK,SAAS;EAAqC,GAAEA,KAAK,CAAO,EAC1EC,YAAY,iBACX;IAAK,SAAS;EAAoC,GAAEA,YAAY,CACjE,CAEJ,CACG,EACLC,MAAM,iBAAI;IAAK,SAAS;EAA6B,GAAEA,MAAM,CAAO,EACpEC,OAAO,iBAAI;IAAK,SAAS;EAA8B,GAAEA,OAAO,CAAO,CACpE,CACG;AAEf,CAAC;AAEDT,QAAQ,CAACe,IAAI,GAAGnB,YAAY"}

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

@@ -1 +1 @@
-.vkuiRichCell{box-sizing:border-box;color:#000;color:var(--vkui--color_text_primary);display:flex;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);min-height:64px;padding:8px 16px;padding:8px var(--vkui--size_base_padding_horizontal--regular);text-decoration:none}.vkuiRichCell--sizeY-compact{min-height:60px}.vkuiRichCell__before{margin-right:12px}.vkuiRichCell__in{display:flex;flex-direction:column;flex-grow:1;justify-content:center;max-width:100%;min-width:0}.vkuiRichCell__content{display:flex}.vkuiRichCell__content-before{flex-grow:1;min-width:0}.vkuiRichCell__content-after{align-items:flex-end;box-sizing:border-box;display:flex;flex-direction:column;flex-shrink:0;padding-left:4px}.vkuiRichCell__after-children{font-weight:500;font-weight:var(--vkui--font_weight_accent2)}.vkuiRichCell__after-caption{color:#818c99;color:var(--vkui--color_text_secondary);font-size:13px;font-size:var(--vkui--font_footnote--font_size--regular);line-height:16px;line-height:var(--vkui--font_footnote--line_height--regular);margin-top:2px}.vkuiRichCell--sizeY-compact .vkuiRichCell__after-caption{font-size:12px;font-size:var(--vkui--font_caption1--font_size--regular);line-height:14px;line-height:var(--vkui--font_caption1--line_height--regular)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiRichCell--sizeY-none .vkuiRichCell__after-caption{font-size:12px;font-size:var(--vkui--font_caption1--font_size--regular);line-height:14px;line-height:var(--vkui--font_caption1--line_height--regular)}}.vkuiRichCell__caption,.vkuiRichCell__subhead{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiRichCell__caption{margin-top:1px}.vkuiRichCell__children{font-weight:500;font-weight:var(--vkui--font_weight_accent2)}.vkuiRichCell--text-ellipsis .vkuiRichCell__caption,.vkuiRichCell--text-ellipsis .vkuiRichCell__children,.vkuiRichCell--text-ellipsis .vkuiRichCell__subhead,.vkuiRichCell--text-ellipsis .vkuiRichCell__text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiRichCell__bottom{margin-top:5px}.vkuiRichCell__actions{margin-top:8px}.vkuiRichCell__after-children,.vkuiRichCell__children,.vkuiRichCell__text{font-size:15px;font-size:var(--vkui--font_paragraph--font_size--regular);line-height:20px;line-height:var(--vkui--font_paragraph--line_height--regular)}.vkuiRichCell--sizeY-compact .vkuiRichCell__after-children,.vkuiRichCell--sizeY-compact .vkuiRichCell__children,.vkuiRichCell--sizeY-compact .vkuiRichCell__text{font-size:14px;font-size:var(--vkui--font_subhead--font_size--regular);line-height:18px;line-height:var(--vkui--font_subhead--line_height--regular)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiRichCell--sizeY-none .vkuiRichCell__after-children,.vkuiRichCell--sizeY-none .vkuiRichCell__children,.vkuiRichCell--sizeY-none .vkuiRichCell__text{font-size:14px;font-size:var(--vkui--font_subhead--font_size--regular);line-height:18px;line-height:var(--vkui--font_subhead--line_height--regular)}}.vkuiFormItem .vkuiRichCell{margin-left:calc(-1 * 16px);margin-left:calc(-1 * var(--vkui--size_base_padding_horizontal--regular));margin-right:calc(-1 * 16px);margin-right:calc(-1 * var(--vkui--size_base_padding_horizontal--regular))}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiRichCell--sizeY-none{min-height:60px}}
+.vkuiRichCell{box-sizing:border-box;color:#000;color:var(--vkui--color_text_primary);display:flex;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);min-height:64px;padding:8px 16px;padding:8px var(--vkui--size_base_padding_horizontal--regular);text-decoration:none}.vkuiRichCell--sizeY-compact{min-height:60px}.vkuiRichCell__before{margin-right:12px}.vkuiRichCell__in{display:flex;flex-direction:column;flex-grow:1;justify-content:center;max-width:100%;min-width:0}.vkuiRichCell__content{display:flex}.vkuiRichCell__content-before{flex-grow:1;min-width:0}.vkuiRichCell__content-after{align-items:flex-end;box-sizing:border-box;display:flex;flex-direction:column;flex-shrink:0;padding-left:12px}.vkuiRichCell__after-children{font-weight:500;font-weight:var(--vkui--font_weight_accent2)}.vkuiRichCell__after-caption{color:#818c99;color:var(--vkui--color_text_secondary);font-size:13px;font-size:var(--vkui--font_footnote--font_size--regular);line-height:16px;line-height:var(--vkui--font_footnote--line_height--regular);margin-top:2px}.vkuiRichCell--sizeY-compact .vkuiRichCell__after-caption{font-size:12px;font-size:var(--vkui--font_caption1--font_size--regular);line-height:14px;line-height:var(--vkui--font_caption1--line_height--regular)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiRichCell--sizeY-none .vkuiRichCell__after-caption{font-size:12px;font-size:var(--vkui--font_caption1--font_size--regular);line-height:14px;line-height:var(--vkui--font_caption1--line_height--regular)}}.vkuiRichCell__caption,.vkuiRichCell__subhead{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiRichCell__caption{margin-top:1px}.vkuiRichCell__children{font-weight:500;font-weight:var(--vkui--font_weight_accent2)}.vkuiRichCell--text-ellipsis .vkuiRichCell__caption,.vkuiRichCell--text-ellipsis .vkuiRichCell__children,.vkuiRichCell--text-ellipsis .vkuiRichCell__subhead,.vkuiRichCell--text-ellipsis .vkuiRichCell__text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiRichCell__bottom{margin-top:5px}.vkuiRichCell__actions{margin-top:8px}.vkuiRichCell__after-children,.vkuiRichCell__children,.vkuiRichCell__text{font-size:15px;font-size:var(--vkui--font_paragraph--font_size--regular);line-height:20px;line-height:var(--vkui--font_paragraph--line_height--regular)}.vkuiRichCell--sizeY-compact .vkuiRichCell__after-children,.vkuiRichCell--sizeY-compact .vkuiRichCell__children,.vkuiRichCell--sizeY-compact .vkuiRichCell__text{font-size:14px;font-size:var(--vkui--font_subhead--font_size--regular);line-height:18px;line-height:var(--vkui--font_subhead--line_height--regular)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiRichCell--sizeY-none .vkuiRichCell__after-children,.vkuiRichCell--sizeY-none .vkuiRichCell__children,.vkuiRichCell--sizeY-none .vkuiRichCell__text{font-size:14px;font-size:var(--vkui--font_subhead--font_size--regular);line-height:18px;line-height:var(--vkui--font_subhead--line_height--regular)}}.vkuiFormItem .vkuiRichCell{margin-left:calc(-1 * 16px);margin-left:calc(-1 * var(--vkui--size_base_padding_horizontal--regular));margin-right:calc(-1 * 16px);margin-right:calc(-1 * var(--vkui--size_base_padding_horizontal--regular))}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiRichCell--sizeY-none{min-height:60px}}

package/dist/cssm/components/RichCell/RichCellIcon/RichCellIcon.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const RichCellIcon: ({ children, className, ...restProps }: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;

package/dist/cssm/components/RichCell/RichCellIcon/RichCellIcon.js

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "className"];
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import "./RichCellIcon.module.css";
+export var RichCellIcon = function RichCellIcon(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
+    className: classNames("vkuiRichCellIcon", className)
+  }), children);
+};
+//# sourceMappingURL=RichCellIcon.js.map

package/dist/cssm/components/RichCell/RichCellIcon/RichCellIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichCellIcon.js","names":["React","classNames","RichCellIcon","children","className","restProps"],"sources":["../../../../../src/components/RichCell/RichCellIcon/RichCellIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './RichCellIcon.module.css';\n\nexport const RichCellIcon = ({\n  children,\n  className,\n  ...restProps\n}: React.HTMLAttributes<HTMLDivElement>) => {\n  return (\n    <div {...restProps} className={classNames(styles['RichCellIcon'], className)}>\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAAC;AAG7C,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAY,OAImB;EAAA,IAH1CC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,oBACE,wCAASA,SAAS;IAAE,SAAS,EAAEJ,UAAU,qBAAyBG,SAAS;EAAE,IAC1ED,QAAQ,CACL;AAEV,CAAC"}

package/dist/cssm/components/RichCell/RichCellIcon/RichCellIcon.module.css

@@ -0,0 +1 @@
+.vkuiRichCellIcon{align-items:center;box-sizing:border-box;color:#2688eb;color:var(--vkui--color_icon_accent_themed);display:flex;flex-direction:row;height:40px;justify-content:flex-end;padding:6px 0 6px 12px;width:48px}

package/dist/cssm/components/SelectMimicry/SelectMimicry.js

@@ -44,7 +44,7 @@ export var SelectMimicry = function SelectMimicry(_ref) {
   var title = children || placeholder;
   return /*#__PURE__*/React.createElement(FormField, _extends({}, restProps, {
     tabIndex: disabled ? undefined : tabIndex,
-    className: classNames("vkuiSelect", getPlatformClassName("vkuiSelect", platform), sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], multiline && "vkuiSelect--multiline", align && styles["Select--align-".concat(align)], before && "vkuiSelect--hasBefore", after && "vkuiSelect--hasAfter", className),
+    className: classNames("vkuiSelect", getPlatformClassName("vkuiSelect", platform), sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], !children && "vkuiSelect--empty", multiline && "vkuiSelect--multiline", align && styles["Select--align-".concat(align)], before && "vkuiSelect--hasBefore", after && "vkuiSelect--hasAfter", className),
     getRootRef: getRootRef,
     onClick: disabled ? undefined : onClick,
     disabled: disabled,

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

@@ -1 +1 @@
-{"version":3,"file":"SelectMimicry.js","names":["React","classNames","getPlatformClassName","useAdaptivity","usePlatform","SizeType","getFormFieldModeFromSelectType","DropdownIcon","FormField","SelectTypography","sizeYClassNames","none","COMPACT","SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","selectType","status","className","restProps","platform","sizeY","title","undefined","REGULAR","styles"],"sources":["../../../../src/components/SelectMimicry/SelectMimicry.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { HasAlign, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Select--sizeY-none'],\n  [SizeType.COMPACT]: styles['Select--sizeY-compact'],\n};\n\nexport interface SelectMimicryProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasAlign,\n    HasRootRef<HTMLElement>,\n    Pick<FormFieldProps, 'before' | 'after' | 'status'> {\n  multiline?: boolean;\n  disabled?: boolean;\n  selectType?: SelectType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectMimicry\n */\nexport const SelectMimicry = ({\n  tabIndex = 0,\n  placeholder,\n  children,\n  align,\n  getRootRef,\n  multiline,\n  disabled,\n  onClick,\n  before,\n  after = <DropdownIcon />,\n  selectType = 'default',\n  status,\n  className,\n  ...restProps\n}: SelectMimicryProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const title = children || placeholder;\n\n  return (\n    <FormField\n      {...restProps}\n      tabIndex={disabled ? undefined : tabIndex}\n      className={classNames(\n        styles['Select'],\n        getPlatformClassName(styles['Select'], platform),\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        multiline && styles['Select--multiline'],\n        align && styles[`Select--align-${align}`],\n        before && styles['Select--hasBefore'],\n        after && styles['Select--hasAfter'],\n        className,\n      )}\n      getRootRef={getRootRef}\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled}\n      before={before}\n      after={after}\n      mode={getFormFieldModeFromSelectType(selectType)}\n      status={status}\n    >\n      <div className={styles['Select__container']}>\n        <SelectTypography selectType={selectType} className={styles['Select__title']}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,oBAAoB,QAAQ,oCAAoC;AACzE,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,8BAA8B,QAAQ,kBAAkB;AAEjE,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,SAASC,SAAS,QAAwB,wBAAwB;AAElE,SAASC,gBAAgB,QAAQ,sCAAsC;AAAC;AAGxE,IAAMC,eAAe;EACnBC,IAAI;AAA8B,GACjCN,QAAQ,CAACO,OAAO,8BAClB;AAYD;AACA;AACA;AACA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAa,OAeA;EAAA,yBAdxBC,QAAQ;IAARA,QAAQ,8BAAG,CAAC;IACZC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IAAA,kBACNC,KAAK;IAALA,KAAK,wCAAG,oBAAC,YAAY,OAAG;IAAA,uBACxBC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGxB,WAAW,EAAE;EAC9B,qBAA2BD,aAAa,EAAE;IAAA,sCAAlC0B,KAAK;IAALA,KAAK,qCAAG,MAAM;EACtB,IAAMC,KAAK,GAAGd,QAAQ,IAAID,WAAW;EAErC,oBACE,oBAAC,SAAS,eACJY,SAAS;IACb,QAAQ,EAAEP,QAAQ,GAAGW,SAAS,GAAGjB,QAAS;IAC1C,SAAS,EAAEb,UAAU,eAEnBC,oBAAoB,eAAmB0B,QAAQ,CAAC,EAChDC,KAAK,KAAKxB,QAAQ,CAAC2B,OAAO,IAAItB,eAAe,CAACmB,KAAK,CAAC,EACpDV,SAAS,2BAA+B,EACxCF,KAAK,IAAIgB,MAAM,yBAAkBhB,KAAK,EAAG,EACzCK,MAAM,2BAA+B,EACrCC,KAAK,0BAA8B,EACnCG,SAAS,CACT;IACF,UAAU,EAAER,UAAW;IACvB,OAAO,EAAEE,QAAQ,GAAGW,SAAS,GAAGV,OAAQ;IACxC,QAAQ,EAAED,QAAS;IACnB,MAAM,EAAEE,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,IAAI,EAAEjB,8BAA8B,CAACkB,UAAU,CAAE;IACjD,MAAM,EAAEC;EAAO,iBAEf;IAAK,SAAS;EAA8B,gBAC1C,oBAAC,gBAAgB;IAAC,UAAU,EAAED,UAAW;IAAC,SAAS;EAA0B,GAC1EM,KAAK,CACW,CACf,CACI;AAEhB,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"SelectMimicry.js","names":["React","classNames","getPlatformClassName","useAdaptivity","usePlatform","SizeType","getFormFieldModeFromSelectType","DropdownIcon","FormField","SelectTypography","sizeYClassNames","none","COMPACT","SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","selectType","status","className","restProps","platform","sizeY","title","undefined","REGULAR","styles"],"sources":["../../../../src/components/SelectMimicry/SelectMimicry.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { HasAlign, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Select--sizeY-none'],\n  [SizeType.COMPACT]: styles['Select--sizeY-compact'],\n};\n\nexport interface SelectMimicryProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasAlign,\n    HasRootRef<HTMLElement>,\n    Pick<FormFieldProps, 'before' | 'after' | 'status'> {\n  multiline?: boolean;\n  disabled?: boolean;\n  selectType?: SelectType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectMimicry\n */\nexport const SelectMimicry = ({\n  tabIndex = 0,\n  placeholder,\n  children,\n  align,\n  getRootRef,\n  multiline,\n  disabled,\n  onClick,\n  before,\n  after = <DropdownIcon />,\n  selectType = 'default',\n  status,\n  className,\n  ...restProps\n}: SelectMimicryProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const title = children || placeholder;\n\n  return (\n    <FormField\n      {...restProps}\n      tabIndex={disabled ? undefined : tabIndex}\n      className={classNames(\n        styles['Select'],\n        getPlatformClassName(styles['Select'], platform),\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        !children && styles['Select--empty'],\n        multiline && styles['Select--multiline'],\n        align && styles[`Select--align-${align}`],\n        before && styles['Select--hasBefore'],\n        after && styles['Select--hasAfter'],\n        className,\n      )}\n      getRootRef={getRootRef}\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled}\n      before={before}\n      after={after}\n      mode={getFormFieldModeFromSelectType(selectType)}\n      status={status}\n    >\n      <div className={styles['Select__container']}>\n        <SelectTypography selectType={selectType} className={styles['Select__title']}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,oBAAoB,QAAQ,oCAAoC;AACzE,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,8BAA8B,QAAQ,kBAAkB;AAEjE,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,SAASC,SAAS,QAAwB,wBAAwB;AAElE,SAASC,gBAAgB,QAAQ,sCAAsC;AAAC;AAGxE,IAAMC,eAAe;EACnBC,IAAI;AAA8B,GACjCN,QAAQ,CAACO,OAAO,8BAClB;AAYD;AACA;AACA;AACA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAa,OAeA;EAAA,yBAdxBC,QAAQ;IAARA,QAAQ,8BAAG,CAAC;IACZC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IAAA,kBACNC,KAAK;IAALA,KAAK,wCAAG,oBAAC,YAAY,OAAG;IAAA,uBACxBC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGxB,WAAW,EAAE;EAC9B,qBAA2BD,aAAa,EAAE;IAAA,sCAAlC0B,KAAK;IAALA,KAAK,qCAAG,MAAM;EACtB,IAAMC,KAAK,GAAGd,QAAQ,IAAID,WAAW;EAErC,oBACE,oBAAC,SAAS,eACJY,SAAS;IACb,QAAQ,EAAEP,QAAQ,GAAGW,SAAS,GAAGjB,QAAS;IAC1C,SAAS,EAAEb,UAAU,eAEnBC,oBAAoB,eAAmB0B,QAAQ,CAAC,EAChDC,KAAK,KAAKxB,QAAQ,CAAC2B,OAAO,IAAItB,eAAe,CAACmB,KAAK,CAAC,EACpD,CAACb,QAAQ,uBAA2B,EACpCG,SAAS,2BAA+B,EACxCF,KAAK,IAAIgB,MAAM,yBAAkBhB,KAAK,EAAG,EACzCK,MAAM,2BAA+B,EACrCC,KAAK,0BAA8B,EACnCG,SAAS,CACT;IACF,UAAU,EAAER,UAAW;IACvB,OAAO,EAAEE,QAAQ,GAAGW,SAAS,GAAGV,OAAQ;IACxC,QAAQ,EAAED,QAAS;IACnB,MAAM,EAAEE,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,IAAI,EAAEjB,8BAA8B,CAACkB,UAAU,CAAE;IACjD,MAAM,EAAEC;EAAO,iBAEf;IAAK,SAAS;EAA8B,gBAC1C,oBAAC,gBAAgB;IAAC,UAAU,EAAED,UAAW;IAAC,SAAS;EAA0B,GAC1EM,KAAK,CACW,CACf,CACI;AAEhB,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}

package/dist/cssm/components/SelectTypography/SelectTypography.js

@@ -5,11 +5,11 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { usePlatform } from '../../hooks/usePlatform';
+import { SizeType } from '../../lib/adaptivity';
 import "./SelectTypography.module.css";
 var sizeYClassNames = {
   none: "vkuiSelectTypography--sizeY-none",
-  compact: "vkuiSelectTypography--sizeY-compact",
-  regular: ''
+  compact: "vkuiSelectTypography--sizeY-compact"
 };
 var platformClassNames = {
   vkcom: "vkuiSelectTypography--vkcom",
@@ -34,7 +34,7 @@ export var SelectTypography = function SelectTypography(_ref) {
     _useAdaptivity$sizeY = _useAdaptivity.sizeY,
     sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   return /*#__PURE__*/React.createElement("span", _extends({
-    className: classNames("vkuiSelectTypography", platformClassNames[platform], sizeYClassNames[sizeY], selectTypeClassNames[selectType], className)
+    className: classNames("vkuiSelectTypography", platformClassNames[platform], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], selectTypeClassNames[selectType], className)
   }, restProps), children);
 };
 //# sourceMappingURL=SelectTypography.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SelectTypography.js","names":["React","classNames","useAdaptivity","usePlatform","sizeYClassNames","none","compact","regular","platformClassNames","vkcom","android","selectTypeClassNames","default","plain","accent","SelectTypography","selectType","children","className","restProps","platform","sizeY"],"sources":["../../../../src/components/SelectTypography/SelectTypography.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { SelectType } from '../Select/Select';\nimport styles from './SelectTypography.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SelectTypography--sizeY-none'],\n  compact: styles['SelectTypography--sizeY-compact'],\n  regular: '',\n};\n\nconst platformClassNames: Record<string, string> = {\n  vkcom: styles['SelectTypography--vkcom'],\n  android: styles['SelectTypography--android'],\n};\n\nconst selectTypeClassNames = {\n  default: styles['SelectTypography--selectType-default'],\n  plain: styles['SelectTypography--selectType-plain'],\n  accent: styles['SelectTypography--selectType-accent'],\n};\n\nexport interface SelectTypographyProps {\n  selectType?: SelectType;\n  className?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * @private\n */\nexport const SelectTypography = ({\n  selectType = 'default',\n  children,\n  className,\n  ...restProps\n}: SelectTypographyProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <span\n      className={classNames(\n        styles['SelectTypography'],\n        platformClassNames[platform],\n        sizeYClassNames[sizeY],\n        selectTypeClassNames[selectType],\n        className,\n      )}\n      {...restProps}\n    >\n      {children}\n    </span>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,yBAAyB;AAAC;AAItD,IAAMC,eAAe,GAAG;EACtBC,IAAI,oCAAwC;EAC5CC,OAAO,uCAA2C;EAClDC,OAAO,EAAE;AACX,CAAC;AAED,IAAMC,kBAA0C,GAAG;EACjDC,KAAK,+BAAmC;EACxCC,OAAO;AACT,CAAC;AAED,IAAMC,oBAAoB,GAAG;EAC3BC,OAAO,4CAAgD;EACvDC,KAAK,0CAA8C;EACnDC,MAAM;AACR,CAAC;AAQD;AACA;AACA;AACA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAKA;EAAA,2BAJ3BC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGjB,WAAW,EAAE;EAC9B,qBAA2BD,aAAa,EAAE;IAAA,sCAAlCmB,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE;IACE,SAAS,EAAEpB,UAAU,yBAEnBO,kBAAkB,CAACY,QAAQ,CAAC,EAC5BhB,eAAe,CAACiB,KAAK,CAAC,EACtBV,oBAAoB,CAACK,UAAU,CAAC,EAChCE,SAAS;EACT,GACEC,SAAS,GAEZF,QAAQ,CACJ;AAEX,CAAC"}
+{"version":3,"file":"SelectTypography.js","names":["React","classNames","useAdaptivity","usePlatform","SizeType","sizeYClassNames","none","compact","platformClassNames","vkcom","android","selectTypeClassNames","default","plain","accent","SelectTypography","selectType","children","className","restProps","platform","sizeY","REGULAR"],"sources":["../../../../src/components/SelectTypography/SelectTypography.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport type { SelectType } from '../Select/Select';\nimport styles from './SelectTypography.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SelectTypography--sizeY-none'],\n  compact: styles['SelectTypography--sizeY-compact'],\n};\n\nconst platformClassNames: Record<string, string> = {\n  vkcom: styles['SelectTypography--vkcom'],\n  android: styles['SelectTypography--android'],\n};\n\nconst selectTypeClassNames = {\n  default: styles['SelectTypography--selectType-default'],\n  plain: styles['SelectTypography--selectType-plain'],\n  accent: styles['SelectTypography--selectType-accent'],\n};\n\nexport interface SelectTypographyProps {\n  selectType?: SelectType;\n  className?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * @private\n */\nexport const SelectTypography = ({\n  selectType = 'default',\n  children,\n  className,\n  ...restProps\n}: SelectTypographyProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <span\n      className={classNames(\n        styles['SelectTypography'],\n        platformClassNames[platform],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        selectTypeClassNames[selectType],\n        className,\n      )}\n      {...restProps}\n    >\n      {children}\n    </span>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,sBAAsB;AAAC;AAIhD,IAAMC,eAAe,GAAG;EACtBC,IAAI,oCAAwC;EAC5CC,OAAO;AACT,CAAC;AAED,IAAMC,kBAA0C,GAAG;EACjDC,KAAK,+BAAmC;EACxCC,OAAO;AACT,CAAC;AAED,IAAMC,oBAAoB,GAAG;EAC3BC,OAAO,4CAAgD;EACvDC,KAAK,0CAA8C;EACnDC,MAAM;AACR,CAAC;AAQD;AACA;AACA;AACA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAKA;EAAA,2BAJ3BC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGjB,WAAW,EAAE;EAC9B,qBAA2BD,aAAa,EAAE;IAAA,sCAAlCmB,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE;IACE,SAAS,EAAEpB,UAAU,yBAEnBO,kBAAkB,CAACY,QAAQ,CAAC,EAC5BC,KAAK,KAAKjB,QAAQ,CAACkB,OAAO,IAAIjB,eAAe,CAACgB,KAAK,CAAC,EACpDV,oBAAoB,CAACK,UAAU,CAAC,EAChCE,SAAS;EACT,GACEC,SAAS,GAEZF,QAAQ,CACJ;AAEX,CAAC"}

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

@@ -10,11 +10,14 @@ export interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {
      */
     onActionClick?: (e: React.MouseEvent) => void;
     /**
-     * Цветная иконка 24x24 пикселя
+     * Может быть следующими компонентами:
+     *  - цветная иконка 24x24 или 28x28 пикселя
+     *  - `<Avatar size={32} />`
+     *  - `<Image size={40} />`
      */
     before?: React.ReactNode;
     /**
-     * Контент в правой части, может быть `<Avatar size={32} />`
+     * Контент в правой части, может быть иконкой 24x24
      */
     after?: React.ReactNode;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.js","names":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","useTimeout","useWaitTransitionFinish","ViewWidth","Platform","rubber","AppRootPortal","Button","Touch","Paragraph","Subhead","Snackbar","children","layout","layoutProps","action","before","after","duration","onActionClick","onClose","mode","className","subtitle","restProps","platform","viewWidth","isDesktop","SMALL_TABLET","waitTransitionFinish","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","IOS","close","current","handleActionClick","e","closeTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","styles"],"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { rubber } from '../../lib/touch';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { Button } from '../Button/Button';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './Snackbar.module.css';\n\nexport interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Название кнопки действия в уведомлении\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * Цветная иконка 24x24 пикселя\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть `<Avatar size={32} />`\n   */\n  after?: React.ReactNode;\n  /**\n   * Варианты расположения кнопки действия\n   * Игнорируется на десктопах и при наличии элементов `after` или `subtitle`\n   */\n  layout?: 'vertical' | 'horizontal';\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n  /**\n   * Задает стиль снекбара\n   */\n  mode?: 'default' | 'dark';\n  /**\n   * Дополнительная строка текста под `children`.\n   * Не может использоваться одновременно с `action`\n   */\n  subtitle?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = ({\n  children,\n  layout: layoutProps = 'horizontal',\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  mode = 'default',\n  className,\n  subtitle,\n  ...restProps\n}: SnackbarProps) => {\n  const platform = usePlatform();\n  const { viewWidth } = useAdaptivityWithJSMediaQueries();\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n  const [touched, setTouched] = React.useState(false);\n\n  const shiftXPercentRef = React.useRef<number>(0);\n  const shiftXCurrentRef = React.useRef<number>(0);\n\n  const bodyElRef = React.useRef<HTMLDivElement | null>(null);\n  const innerElRef = React.useRef<HTMLDivElement | null>(null);\n\n  const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n\n  const transitionFinishDurationFallback = platform === Platform.IOS ? 320 : 400;\n\n  const close = () => {\n    setClosing(true);\n    waitTransitionFinish(\n      innerElRef.current,\n      () => {\n        onClose();\n      },\n      transitionFinishDurationFallback,\n    );\n  };\n\n  const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {\n    close();\n\n    if (action && typeof onActionClick === 'function') {\n      onActionClick(e);\n    }\n  };\n\n  const closeTimeout = useTimeout(close, duration);\n\n  const setBodyTransform = (percent: number) => {\n    if (animationFrameRef.current !== null) {\n      cancelAnimationFrame(animationFrameRef.current);\n    }\n    animationFrameRef.current = requestAnimationFrame(() => {\n      if (bodyElRef.current) {\n        bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n      }\n    });\n  };\n\n  const onTouchStart = closeTimeout.clear;\n\n  const onTouchMoveX = (event: TouchEvent) => {\n    const { shiftX, originalEvent } = event;\n    originalEvent.preventDefault();\n\n    if (!touched) {\n      setTouched(true);\n    }\n\n    shiftXPercentRef.current = (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n    shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform !== Platform.IOS);\n\n    setBodyTransform(shiftXCurrentRef.current);\n  };\n\n  const onTouchEnd = (e: TouchEvent) => {\n    let callback: VoidFunction | undefined;\n\n    if (touched) {\n      let shiftXCurrent = shiftXCurrentRef.current;\n      const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n      shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n      if (isDesktop && shiftXCurrent <= -50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(-120);\n      } else if (!isDesktop && shiftXCurrent >= 50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(120);\n      } else {\n        callback = () => {\n          closeTimeout.set();\n          setBodyTransform(0);\n        };\n      }\n    } else {\n      closeTimeout.set();\n    }\n\n    setTouched(false);\n    callback && requestAnimationFrame(callback);\n  };\n\n  React.useEffect(() => closeTimeout.set(), [closeTimeout]);\n\n  const layout = after || isDesktop || subtitle ? 'vertical' : layoutProps;\n\n  return (\n    <AppRootPortal>\n      <div\n        {...restProps}\n        className={classNames(\n          styles['Snackbar'],\n          platform === Platform.IOS && styles['Snackbar--ios'],\n          styles[`Snackbar--layout-${layout}`],\n          styles[`Snackbar--mode-${mode}`],\n          closing && styles['Snackbar--closing'],\n          touched && styles['Snackbar--touched'],\n          isDesktop && styles['Snackbar--desktop'],\n          className,\n        )}\n      >\n        <Touch\n          className={styles['Snackbar__in']}\n          getRootRef={innerElRef}\n          onStart={onTouchStart}\n          onMoveX={onTouchMoveX}\n          onEnd={onTouchEnd}\n        >\n          <div className={styles['Snackbar__body']} ref={bodyElRef}>\n            {before && <div className={styles['Snackbar__before']}>{before}</div>}\n\n            <div className={styles['Snackbar__content']}>\n              <Paragraph className={styles['Snackbar__content-text']}>{children}</Paragraph>\n              {subtitle && !action && (\n                <Subhead className={styles['Snackbar__content-subtitle']}>{subtitle}</Subhead>\n              )}\n\n              {action && !subtitle && (\n                <Button\n                  align=\"left\"\n                  mode=\"link\"\n                  appearance={mode === 'dark' ? 'overlay' : 'accent'}\n                  size=\"s\"\n                  className={styles['Snackbar__action']}\n                  onClick={handleActionClick}\n                >\n                  {action}\n                </Button>\n              )}\n            </div>\n\n            {after && <div className={styles['Snackbar__after']}>{after}</div>}\n          </div>\n        </Touch>\n      </div>\n    </AppRootPortal>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,+BAA+B,QAAQ,6CAA6C;AAC7F,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,UAAU,QAAQ,wBAAwB;AACnD,SAASC,uBAAuB,QAAQ,qCAAqC;AAC7E,SAASC,SAAS,QAAQ,sBAAsB;AAChD,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,MAAM,QAAQ,iBAAiB;AACxC,SAASC,aAAa,QAAQ,0BAA0B;AACxD,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,KAAK,QAAoB,gBAAgB;AAClD,SAASC,SAAS,QAAQ,mCAAmC;AAC7D,SAASC,OAAO,QAAQ,+BAA+B;AAAC;AA+CxD;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAaA;EAAA,IAZnBC,QAAQ,QAARA,QAAQ;IAAA,mBACRC,MAAM;IAAEC,WAAW,4BAAG,YAAY;IAClCC,MAAM,QAANA,MAAM;IACNC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IAAA,qBACLC,QAAQ;IAARA,QAAQ,8BAAG,IAAI;IACfC,aAAa,QAAbA,aAAa;IACbC,OAAO,QAAPA,OAAO;IAAA,iBACPC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAChBC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACLC,SAAS;EAEZ,IAAMC,QAAQ,GAAGzB,WAAW,EAAE;EAC9B,4BAAsBD,+BAA+B,EAAE;IAA/C2B,SAAS,yBAATA,SAAS;EACjB,IAAMC,SAAS,GAAGD,SAAS,IAAIvB,SAAS,CAACyB,YAAY;EACrD,4BAAiC1B,uBAAuB,EAAE;IAAlD2B,oBAAoB,yBAApBA,oBAAoB;EAE5B,sBAA8BhC,KAAK,CAACiC,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA5CC,OAAO;IAAEC,UAAU;EAC1B,uBAA8BnC,KAAK,CAACiC,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA5CG,OAAO;IAAEC,UAAU;EAE1B,IAAMC,gBAAgB,GAAGtC,KAAK,CAACuC,MAAM,CAAS,CAAC,CAAC;EAChD,IAAMC,gBAAgB,GAAGxC,KAAK,CAACuC,MAAM,CAAS,CAAC,CAAC;EAEhD,IAAME,SAAS,GAAGzC,KAAK,CAACuC,MAAM,CAAwB,IAAI,CAAC;EAC3D,IAAMG,UAAU,GAAG1C,KAAK,CAACuC,MAAM,CAAwB,IAAI,CAAC;EAE5D,IAAMI,iBAAiB,GAAG3C,KAAK,CAACuC,MAAM,CAAkD,IAAI,CAAC;EAE7F,IAAMK,gCAAgC,GAAGhB,QAAQ,KAAKrB,QAAQ,CAACsC,GAAG,GAAG,GAAG,GAAG,GAAG;EAE9E,IAAMC,KAAK,GAAG,SAARA,KAAK,GAAS;IAClBX,UAAU,CAAC,IAAI,CAAC;IAChBH,oBAAoB,CAClBU,UAAU,CAACK,OAAO,EAClB,YAAM;MACJxB,OAAO,EAAE;IACX,CAAC,EACDqB,gCAAgC,CACjC;EACH,CAAC;EAED,IAAMI,iBAAuD,GAAG,SAA1DA,iBAAuD,CAAIC,CAAC,EAAK;IACrEH,KAAK,EAAE;IAEP,IAAI5B,MAAM,IAAI,OAAOI,aAAa,KAAK,UAAU,EAAE;MACjDA,aAAa,CAAC2B,CAAC,CAAC;IAClB;EACF,CAAC;EAED,IAAMC,YAAY,GAAG9C,UAAU,CAAC0C,KAAK,EAAEzB,QAAQ,CAAC;EAEhD,IAAM8B,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIC,OAAe,EAAK;IAC5C,IAAIT,iBAAiB,CAACI,OAAO,KAAK,IAAI,EAAE;MACtCM,oBAAoB,CAACV,iBAAiB,CAACI,OAAO,CAAC;IACjD;IACAJ,iBAAiB,CAACI,OAAO,GAAGO,qBAAqB,CAAC,YAAM;MACtD,IAAIb,SAAS,CAACM,OAAO,EAAE;QACrBN,SAAS,CAACM,OAAO,CAACQ,KAAK,CAACC,SAAS,yBAAkBJ,OAAO,aAAU;MACtE;IACF,CAAC,CAAC;EACJ,CAAC;EAED,IAAMK,YAAY,GAAGP,YAAY,CAACQ,KAAK;EAEvC,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,KAAiB,EAAK;IAAA;IAC1C,IAAQC,MAAM,GAAoBD,KAAK,CAA/BC,MAAM;MAAEC,aAAa,GAAKF,KAAK,CAAvBE,aAAa;IAC7BA,aAAa,CAACC,cAAc,EAAE;IAE9B,IAAI,CAAC3B,OAAO,EAAE;MACZC,UAAU,CAAC,IAAI,CAAC;IAClB;IAEAC,gBAAgB,CAACS,OAAO,GAAIc,MAAM,mDAAIpB,SAAS,CAACM,OAAO,uDAAjB,mBAAmBiB,WAAW,yEAAI,CAAC,CAAC,GAAI,GAAG;IACjFxB,gBAAgB,CAACO,OAAO,GAAGvC,MAAM,CAAC8B,gBAAgB,CAACS,OAAO,EAAE,EAAE,EAAE,GAAG,EAAEnB,QAAQ,KAAKrB,QAAQ,CAACsC,GAAG,CAAC;IAE/FM,gBAAgB,CAACX,gBAAgB,CAACO,OAAO,CAAC;EAC5C,CAAC;EAED,IAAMkB,UAAU,GAAG,SAAbA,UAAU,CAAIhB,CAAa,EAAK;IACpC,IAAIiB,QAAkC;IAEtC,IAAI9B,OAAO,EAAE;MACX,IAAI+B,aAAa,GAAG3B,gBAAgB,CAACO,OAAO;MAC5C,IAAMqB,gBAAgB,GAAID,aAAa,GAAGlB,CAAC,CAAC5B,QAAQ,GAAI,GAAG,GAAG,GAAG;MACjE8C,aAAa,GAAGA,aAAa,GAAGC,gBAAgB;MAEhD,IAAItC,SAAS,IAAIqC,aAAa,IAAI,CAAC,EAAE,EAAE;QACrCjB,YAAY,CAACQ,KAAK,EAAE;QACpB1B,oBAAoB,CAClBS,SAAS,CAACM,OAAO,EACjB,YAAM;UACJxB,OAAO,EAAE;QACX,CAAC,EACDqB,gCAAgC,CACjC;QACDO,gBAAgB,CAAC,CAAC,GAAG,CAAC;MACxB,CAAC,MAAM,IAAI,CAACrB,SAAS,IAAIqC,aAAa,IAAI,EAAE,EAAE;QAC5CjB,YAAY,CAACQ,KAAK,EAAE;QACpB1B,oBAAoB,CAClBS,SAAS,CAACM,OAAO,EACjB,YAAM;UACJxB,OAAO,EAAE;QACX,CAAC,EACDqB,gCAAgC,CACjC;QACDO,gBAAgB,CAAC,GAAG,CAAC;MACvB,CAAC,MAAM;QACLe,QAAQ,GAAG,oBAAM;UACfhB,YAAY,CAACmB,GAAG,EAAE;UAClBlB,gBAAgB,CAAC,CAAC,CAAC;QACrB,CAAC;MACH;IACF,CAAC,MAAM;MACLD,YAAY,CAACmB,GAAG,EAAE;IACpB;IAEAhC,UAAU,CAAC,KAAK,CAAC;IACjB6B,QAAQ,IAAIZ,qBAAqB,CAACY,QAAQ,CAAC;EAC7C,CAAC;EAEDlE,KAAK,CAACsE,SAAS,CAAC;IAAA,OAAMpB,YAAY,CAACmB,GAAG,EAAE;EAAA,GAAE,CAACnB,YAAY,CAAC,CAAC;EAEzD,IAAMlC,MAAM,GAAGI,KAAK,IAAIU,SAAS,IAAIJ,QAAQ,GAAG,UAAU,GAAGT,WAAW;EAExE,oBACE,oBAAC,aAAa,qBACZ,wCACMU,SAAS;IACb,SAAS,EAAE1B,UAAU,iBAEnB2B,QAAQ,KAAKrB,QAAQ,CAACsC,GAAG,uBAA2B,EACpD0B,MAAM,4BAAqBvD,MAAM,EAAG,EACpCuD,MAAM,0BAAmB/C,IAAI,EAAG,EAChCU,OAAO,2BAA+B,EACtCE,OAAO,2BAA+B,EACtCN,SAAS,2BAA+B,EACxCL,SAAS;EACT,iBAEF,oBAAC,KAAK;IACJ,SAAS,oBAAyB;IAClC,UAAU,EAAEiB,UAAW;IACvB,OAAO,EAAEe,YAAa;IACtB,OAAO,EAAEE,YAAa;IACtB,KAAK,EAAEM;EAAW,gBAElB;IAAK,SAAS,sBAA2B;IAAC,GAAG,EAAExB;EAAU,GACtDtB,MAAM,iBAAI;IAAK,SAAS;EAA6B,GAAEA,MAAM,CAAO,eAErE;IAAK,SAAS;EAA8B,gBAC1C,oBAAC,SAAS;IAAC,SAAS;EAAmC,GAAEJ,QAAQ,CAAa,EAC7EW,QAAQ,IAAI,CAACR,MAAM,iBAClB,oBAAC,OAAO;IAAC,SAAS;EAAuC,GAAEQ,QAAQ,CACpE,EAEAR,MAAM,IAAI,CAACQ,QAAQ,iBAClB,oBAAC,MAAM;IACL,KAAK,EAAC,MAAM;IACZ,IAAI,EAAC,MAAM;IACX,UAAU,EAAEF,IAAI,KAAK,MAAM,GAAG,SAAS,GAAG,QAAS;IACnD,IAAI,EAAC,GAAG;IACR,SAAS,wBAA6B;IACtC,OAAO,EAAEwB;EAAkB,GAE1B9B,MAAM,CAEV,CACG,EAELE,KAAK,iBAAI;IAAK,SAAS;EAA4B,GAAEA,KAAK,CAAO,CAC9D,CACA,CACJ,CACQ;AAEpB,CAAC;AAAC;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"Snackbar.js","names":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","useTimeout","useWaitTransitionFinish","ViewWidth","Platform","rubber","AppRootPortal","Button","Touch","Paragraph","Subhead","Snackbar","children","layout","layoutProps","action","before","after","duration","onActionClick","onClose","mode","className","subtitle","restProps","platform","viewWidth","isDesktop","SMALL_TABLET","waitTransitionFinish","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","IOS","close","current","handleActionClick","e","closeTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","styles"],"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { rubber } from '../../lib/touch';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { Button } from '../Button/Button';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './Snackbar.module.css';\n\nexport interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Название кнопки действия в уведомлении\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * Может быть следующими компонентами:\n   *  - цветная иконка 24x24 или 28x28 пикселя\n   *  - `<Avatar size={32} />`\n   *  - `<Image size={40} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть иконкой 24x24\n   */\n  after?: React.ReactNode;\n  /**\n   * Варианты расположения кнопки действия\n   * Игнорируется на десктопах и при наличии элементов `after` или `subtitle`\n   */\n  layout?: 'vertical' | 'horizontal';\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n  /**\n   * Задает стиль снекбара\n   */\n  mode?: 'default' | 'dark';\n  /**\n   * Дополнительная строка текста под `children`.\n   * Не может использоваться одновременно с `action`\n   */\n  subtitle?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = ({\n  children,\n  layout: layoutProps = 'horizontal',\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  mode = 'default',\n  className,\n  subtitle,\n  ...restProps\n}: SnackbarProps) => {\n  const platform = usePlatform();\n  const { viewWidth } = useAdaptivityWithJSMediaQueries();\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n  const [touched, setTouched] = React.useState(false);\n\n  const shiftXPercentRef = React.useRef<number>(0);\n  const shiftXCurrentRef = React.useRef<number>(0);\n\n  const bodyElRef = React.useRef<HTMLDivElement | null>(null);\n  const innerElRef = React.useRef<HTMLDivElement | null>(null);\n\n  const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n\n  const transitionFinishDurationFallback = platform === Platform.IOS ? 320 : 400;\n\n  const close = () => {\n    setClosing(true);\n    waitTransitionFinish(\n      innerElRef.current,\n      () => {\n        onClose();\n      },\n      transitionFinishDurationFallback,\n    );\n  };\n\n  const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {\n    close();\n\n    if (action && typeof onActionClick === 'function') {\n      onActionClick(e);\n    }\n  };\n\n  const closeTimeout = useTimeout(close, duration);\n\n  const setBodyTransform = (percent: number) => {\n    if (animationFrameRef.current !== null) {\n      cancelAnimationFrame(animationFrameRef.current);\n    }\n    animationFrameRef.current = requestAnimationFrame(() => {\n      if (bodyElRef.current) {\n        bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n      }\n    });\n  };\n\n  const onTouchStart = closeTimeout.clear;\n\n  const onTouchMoveX = (event: TouchEvent) => {\n    const { shiftX, originalEvent } = event;\n    originalEvent.preventDefault();\n\n    if (!touched) {\n      setTouched(true);\n    }\n\n    shiftXPercentRef.current = (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n    shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform !== Platform.IOS);\n\n    setBodyTransform(shiftXCurrentRef.current);\n  };\n\n  const onTouchEnd = (e: TouchEvent) => {\n    let callback: VoidFunction | undefined;\n\n    if (touched) {\n      let shiftXCurrent = shiftXCurrentRef.current;\n      const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n      shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n      if (isDesktop && shiftXCurrent <= -50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(-120);\n      } else if (!isDesktop && shiftXCurrent >= 50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(120);\n      } else {\n        callback = () => {\n          closeTimeout.set();\n          setBodyTransform(0);\n        };\n      }\n    } else {\n      closeTimeout.set();\n    }\n\n    setTouched(false);\n    callback && requestAnimationFrame(callback);\n  };\n\n  React.useEffect(() => closeTimeout.set(), [closeTimeout]);\n\n  const layout = after || isDesktop || subtitle ? 'vertical' : layoutProps;\n\n  return (\n    <AppRootPortal>\n      <div\n        {...restProps}\n        className={classNames(\n          styles['Snackbar'],\n          platform === Platform.IOS && styles['Snackbar--ios'],\n          styles[`Snackbar--layout-${layout}`],\n          styles[`Snackbar--mode-${mode}`],\n          closing && styles['Snackbar--closing'],\n          touched && styles['Snackbar--touched'],\n          isDesktop && styles['Snackbar--desktop'],\n          className,\n        )}\n      >\n        <Touch\n          className={styles['Snackbar__in']}\n          getRootRef={innerElRef}\n          onStart={onTouchStart}\n          onMoveX={onTouchMoveX}\n          onEnd={onTouchEnd}\n        >\n          <div className={styles['Snackbar__body']} ref={bodyElRef}>\n            {before && <div className={styles['Snackbar__before']}>{before}</div>}\n\n            <div className={styles['Snackbar__content']}>\n              <Paragraph className={styles['Snackbar__content-text']}>{children}</Paragraph>\n              {subtitle && !action && (\n                <Subhead className={styles['Snackbar__content-subtitle']}>{subtitle}</Subhead>\n              )}\n\n              {action && !subtitle && (\n                <Button\n                  align=\"left\"\n                  mode=\"link\"\n                  appearance={mode === 'dark' ? 'overlay' : 'accent'}\n                  size=\"s\"\n                  className={styles['Snackbar__action']}\n                  onClick={handleActionClick}\n                >\n                  {action}\n                </Button>\n              )}\n            </div>\n\n            {after && <div className={styles['Snackbar__after']}>{after}</div>}\n          </div>\n        </Touch>\n      </div>\n    </AppRootPortal>\n  );\n};\n"],"mappings":"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"}

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

@@ -1 +1 @@
-.vkuiSnackbar{bottom:0;left:auto;padding-bottom:0;padding-bottom:var(--vkui_internal--safe_area_inset_bottom);padding-left:0;padding-left:var(--vkui_internal--safe_area_inset_left);padding-right:0;padding-right:var(--vkui_internal--safe_area_inset_right);position:fixed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:100;z-index:var(--vkui--z_index_popout)}.vkuiEpic--hasTabbar .vkuiSnackbar{padding-bottom:calc(48px + 0px);padding-bottom:calc(var(--vkui_internal--tabbar_height) + var(--vkui_internal--safe_area_inset_bottom))}.vkuiSnackbar__body,.vkuiSnackbar__in{transition:transform .32s cubic-bezier(.4,0,.2,1);transition:transform .32s var(--vkui--animation_easing_platform)}.vkuiSnackbar__in{animation:vkui-animation-snackbar-intro-vertical .34s cubic-bezier(.4,0,.2,1);animation:vkui-animation-snackbar-intro-vertical .34s var(--vkui--animation_easing_platform);padding:8px}.vkuiSnackbar--closing .vkuiSnackbar__in{transform:translate3d(0,140%,0)}.vkuiSnackbar__body{align-items:center;background:#fff;background:var(--vkui--color_background_modal);border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-shadow:0 0 8px rgba(0,0,0,.12),0 16px 16px rgba(0,0,0,.16);box-shadow:var(--vkui--elevation4);box-sizing:border-box;display:flex;min-height:56px;padding:12px 16px}.vkuiSnackbar--mode-dark .vkuiSnackbar__body{background:#2d2d2e;background:var(--vkui--color_background_contrast_inverse)}.vkuiSnackbar__before{margin-left:-4px;margin-right:12px}.vkuiSnackbar__after{margin-left:12px;margin-right:-4px}.vkuiSnackbar__content{align-items:center;display:flex;flex:1;overflow:hidden}.vkuiSnackbar--layout-vertical .vkuiSnackbar__content{align-items:flex-start;flex-direction:column}.vkuiSnackbar__content-text{-webkit-line-clamp:3;-webkit-box-orient:vertical;color:#000;color:var(--vkui--color_text_primary);display:-webkit-box;flex:1;overflow:hidden;width:100%}.vkuiSnackbar__content-subtitle{color:#6d7885;color:var(--vkui--color_text_subhead);margin-top:2px}.vkuiSnackbar--mode-dark .vkuiSnackbar__content-text{color:#fff;color:var(--vkui--color_text_contrast)}.vkuiSnackbar--layout-horizontal .vkuiSnackbar__action{margin-left:12px;position:relative}.vkuiSnackbar--layout-vertical .vkuiSnackbar__action{margin-top:2px;min-height:auto}.vkuiModalRoot .vkuiSnackbar{padding-bottom:0;padding-bottom:var(--vkui_internal--safe_area_inset_bottom)}.vkuiSnackbar--ios .vkuiSnackbar__body,.vkuiSnackbar--ios .vkuiSnackbar__in{transition:transform .4s cubic-bezier(.4,0,.2,1);transition:transform .4s var(--vkui--animation_easing_platform)}.vkuiSnackbar--desktop{bottom:0;left:0;max-width:351px}.vkuiSnackbar--desktop .vkuiSnackbar__in{animation-name:vkui-animation-snackbar-intro-horizontal;padding:12px}.vkuiSnackbar--desktop.vkuiSnackbar--closing .vkuiSnackbar__in{transform:translate3d(-140%,0,0)}.vkuiSnackbar--touched .vkuiSnackbar__body{transition:none}@keyframes vkui-animation-snackbar-intro-vertical{0%{transform:translate3d(0,140%,0)}to{transform:translateZ(0)}}@keyframes vkui-animation-snackbar-intro-horizontal{0%{transform:translate3d(-140%,0,0)}to{transform:translateZ(0)}}
+.vkuiSnackbar{bottom:0;left:auto;padding-bottom:0;padding-bottom:var(--vkui_internal--safe_area_inset_bottom);padding-left:0;padding-left:var(--vkui_internal--safe_area_inset_left);padding-right:0;padding-right:var(--vkui_internal--safe_area_inset_right);position:fixed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:100;z-index:var(--vkui--z_index_popout)}.vkuiEpic--hasTabbar .vkuiSnackbar{padding-bottom:calc(48px + 0px);padding-bottom:calc(var(--vkui_internal--tabbar_height) + var(--vkui_internal--safe_area_inset_bottom))}.vkuiSnackbar__body,.vkuiSnackbar__in{transition:transform .32s cubic-bezier(.4,0,.2,1);transition:transform .32s var(--vkui--animation_easing_platform)}.vkuiSnackbar__in{animation:vkui-animation-snackbar-intro-vertical .34s cubic-bezier(.4,0,.2,1);animation:vkui-animation-snackbar-intro-vertical .34s var(--vkui--animation_easing_platform);padding:8px}.vkuiSnackbar--closing .vkuiSnackbar__in{transform:translate3d(0,140%,0)}.vkuiSnackbar__body{align-items:center;background:#fff;background:var(--vkui--color_background_modal);border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-shadow:0 0 8px rgba(0,0,0,.12),0 16px 16px rgba(0,0,0,.16);box-shadow:var(--vkui--elevation4);box-sizing:border-box;display:flex;min-height:56px;padding:12px}.vkuiSnackbar--mode-dark .vkuiSnackbar__body{background:#2d2d2e;background:var(--vkui--color_background_contrast_inverse)}.vkuiSnackbar__before{margin-right:12px}.vkuiSnackbar__after{margin-left:12px}.vkuiSnackbar__content{align-items:center;display:flex;flex:1;overflow:hidden}.vkuiSnackbar--layout-vertical .vkuiSnackbar__content{align-items:flex-start;flex-direction:column}.vkuiSnackbar__content-text{-webkit-line-clamp:3;-webkit-box-orient:vertical;color:#000;color:var(--vkui--color_text_primary);display:-webkit-box;flex:1;overflow:hidden;width:100%}.vkuiSnackbar__content-subtitle{color:#6d7885;color:var(--vkui--color_text_subhead);margin-top:2px}.vkuiSnackbar--mode-dark .vkuiSnackbar__content-text{color:#fff;color:var(--vkui--color_text_contrast)}.vkuiSnackbar--layout-horizontal .vkuiSnackbar__action{margin-left:12px;position:relative}.vkuiSnackbar--layout-vertical .vkuiSnackbar__action{margin-top:2px;min-height:auto}.vkuiModalRoot .vkuiSnackbar{padding-bottom:0;padding-bottom:var(--vkui_internal--safe_area_inset_bottom)}.vkuiSnackbar--ios .vkuiSnackbar__body,.vkuiSnackbar--ios .vkuiSnackbar__in{transition:transform .4s cubic-bezier(.4,0,.2,1);transition:transform .4s var(--vkui--animation_easing_platform)}.vkuiSnackbar--desktop{bottom:0;left:0;max-width:351px}.vkuiSnackbar--desktop .vkuiSnackbar__in{animation-name:vkui-animation-snackbar-intro-horizontal;padding:12px}.vkuiSnackbar--desktop.vkuiSnackbar--closing .vkuiSnackbar__in{transform:translate3d(-140%,0,0)}.vkuiSnackbar--touched .vkuiSnackbar__body{transition:none}@keyframes vkui-animation-snackbar-intro-vertical{0%{transform:translate3d(0,140%,0)}to{transform:translateZ(0)}}@keyframes vkui-animation-snackbar-intro-horizontal{0%{transform:translate3d(-140%,0,0)}to{transform:translateZ(0)}}

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

@@ -1 +1 @@
-.vkuiSubnavigationButton{border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vkuiSubnavigationButton__in{align-items:center;display:flex;justify-content:center}.vkuiSubnavigationButton--size-s .vkuiSubnavigationButton__in{height:30px;height:var(--vkui--size_button_small_height--regular)}.vkuiSubnavigationButton--size-m .vkuiSubnavigationButton__in{height:36px;height:var(--vkui--size_button_medium_height--regular)}.vkuiSubnavigationButton--size-l .vkuiSubnavigationButton__in{height:44px;height:var(--vkui--size_button_large_height--regular)}.vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--size-s .vkuiSubnavigationButton__in{height:28px;height:var(--vkui--size_button_small_height--compact)}.vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--size-m .vkuiSubnavigationButton__in{height:32px;height:var(--vkui--size_button_medium_height--compact)}.vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--size-l .vkuiSubnavigationButton__in{height:36px;height:var(--vkui--size_button_large_height--compact)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiSubnavigationButton--sizeY-none.vkuiSubnavigationButton--size-s .vkuiSubnavigationButton__in{height:28px;height:var(--vkui--size_button_small_height--compact)}.vkuiSubnavigationButton--sizeY-none.vkuiSubnavigationButton--size-m .vkuiSubnavigationButton__in{height:32px;height:var(--vkui--size_button_medium_height--compact)}.vkuiSubnavigationButton--sizeY-none.vkuiSubnavigationButton--size-l .vkuiSubnavigationButton__in{height:36px;height:var(--vkui--size_button_large_height--compact)}}.vkuiSubnavigationButton__before{color:#2688eb;color:var(--vkui--color_icon_accent);margin-right:8px}.vkuiSubnavigationButton__label{flex-grow:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSubnavigationButton__after{margin-left:8px}.vkuiSubnavigationButton__expandableIcon{color:#99a2ad;color:var(--vkui--color_icon_secondary);margin-left:8px;margin-top:1px}.vkuiSubnavigationButton__before:first-child,.vkuiSubnavigationButton__label:first-child{padding-left:12px;padding-left:var(--vkui--size_button_base_small_padding_horizontal_icon--regular)}.vkuiSubnavigationButton__after:last-child,.vkuiSubnavigationButton__expandableIcon,.vkuiSubnavigationButton__label:last-child{padding-right:12px;padding-right:var(--vkui--size_button_base_small_padding_horizontal_icon--regular)}.vkuiSubnavigationButton--mode-primary{background-color:#fff;background-color:var(--vkui--color_background_modal);box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3)}.vkuiSubnavigationButton--mode-outline{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);box-shadow:inset 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha)}.vkuiSubnavigationButton--selected{background-color:#2688eb;background-color:var(--vkui--color_background_accent_themed);border:none;box-shadow:none;color:#fff;color:var(--vkui--color_text_contrast_themed)}.vkuiSubnavigationButton--selected.vkuiSubnavigationButton--mode-tertiary{background-color:rgba(0,16,61,.08);background-color:var(--vkui--color_transparent--active);color:#000;color:var(--vkui--color_text_primary)}.vkuiSubnavigationButton--selected:not(.vkuiSubnavigationButton--mode-tertiary) .vkuiSubnavigationButton__before,.vkuiSubnavigationButton--selected:not(.vkuiSubnavigationButton--mode-tertiary) .vkuiSubnavigationButton__expandableIcon{color:inherit}.vkuiSubnavigationBar .vkuiSubnavigationButton+.vkuiSubnavigationButton{margin-left:8px;margin-left:var(--vkui--size_subnavigation_bar_gap--regular)}.vkuiSubnavigationBar--mode-fixed .vkuiSubnavigationButton{flex:1;min-width:0}
+.vkuiSubnavigationButton{border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vkuiSubnavigationButton__in{align-items:center;display:flex;justify-content:center}.vkuiSubnavigationButton--size-s .vkuiSubnavigationButton__in{height:30px;height:var(--vkui--size_button_small_height--regular)}.vkuiSubnavigationButton--size-m .vkuiSubnavigationButton__in{height:36px;height:var(--vkui--size_button_medium_height--regular)}.vkuiSubnavigationButton--size-l .vkuiSubnavigationButton__in{height:44px;height:var(--vkui--size_button_large_height--regular)}.vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--size-s .vkuiSubnavigationButton__in{height:28px;height:var(--vkui--size_button_small_height--compact)}.vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--size-m .vkuiSubnavigationButton__in{height:32px;height:var(--vkui--size_button_medium_height--compact)}.vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--size-l .vkuiSubnavigationButton__in{height:36px;height:var(--vkui--size_button_large_height--compact)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiSubnavigationButton--sizeY-none.vkuiSubnavigationButton--size-s .vkuiSubnavigationButton__in{height:28px;height:var(--vkui--size_button_small_height--compact)}.vkuiSubnavigationButton--sizeY-none.vkuiSubnavigationButton--size-m .vkuiSubnavigationButton__in{height:32px;height:var(--vkui--size_button_medium_height--compact)}.vkuiSubnavigationButton--sizeY-none.vkuiSubnavigationButton--size-l .vkuiSubnavigationButton__in{height:36px;height:var(--vkui--size_button_large_height--compact)}}.vkuiSubnavigationButton__before{color:#2688eb;color:var(--vkui--color_icon_accent);margin-right:8px}.vkuiSubnavigationButton__label{flex-grow:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSubnavigationButton__after{margin-left:8px}.vkuiSubnavigationButton__expandableIcon{color:#99a2ad;color:var(--vkui--color_icon_secondary);margin-left:8px;margin-top:1px}.vkuiSubnavigationButton__before:first-child,.vkuiSubnavigationButton__label:first-child{padding-left:12px;padding-left:var(--vkui--size_button_base_small_padding_horizontal_icon--regular)}.vkuiSubnavigationButton__after:last-child,.vkuiSubnavigationButton__expandableIcon,.vkuiSubnavigationButton__label:last-child{padding-right:12px;padding-right:var(--vkui--size_button_base_small_padding_horizontal_icon--regular)}.vkuiSubnavigationButton--mode-primary{background-color:#fff;background-color:var(--vkui--color_background_modal);box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3)}.vkuiSubnavigationButton--mode-outline{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);box-shadow:inset 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha)}.vkuiSubnavigationButton--selected{background-color:#2688eb;background-color:var(--vkui--color_background_accent_themed);border:none;box-shadow:none;color:#fff;color:var(--vkui--color_text_contrast_themed)}.vkuiSubnavigationButton--selected.vkuiSubnavigationButton--mode-tertiary{background-color:rgba(0,16,61,.08);background-color:var(--vkui--color_transparent--active);color:#000;color:var(--vkui--color_text_primary)}.vkuiSubnavigationButton--selected:not(.vkuiSubnavigationButton--mode-tertiary) .vkuiSubnavigationButton__before,.vkuiSubnavigationButton--selected:not(.vkuiSubnavigationButton--mode-tertiary) .vkuiSubnavigationButton__expandableIcon{color:#fff;color:var(--vkui--color_icon_contrast_themed)}.vkuiSubnavigationBar .vkuiSubnavigationButton+.vkuiSubnavigationButton{margin-left:8px;margin-left:var(--vkui--size_subnavigation_bar_gap--regular)}.vkuiSubnavigationBar--mode-fixed .vkuiSubnavigationButton{flex:1;min-width:0}

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

@@ -1 +1 @@
-.vkuiUsersStack{align-items:center;color:#818c99;color:var(--vkui--color_text_secondary);display:flex}.vkuiUsersStack--layout-vertical{flex-direction:column;justify-content:center}.vkuiUsersStack__photos{display:flex}.vkuiUsersStack--layout-horizontal .vkuiUsersStack__photos{margin-right:8px}.vkuiUsersStack--layout-vertical .vkuiUsersStack__photos{margin-bottom:8px}.vkuiUsersStack__fill{fill:rgba(0,28,61,.08);fill:var(--vkui--color_image_placeholder_alpha)}.vkuiUsersStack__photo--others{align-items:center;background:#99a2ad;background:var(--vkui--color_icon_secondary);border-radius:50%;color:#fff;color:var(--vkui--color_text_contrast);display:flex;justify-content:center}.vkuiUsersStack--size-s .vkuiUsersStack__photo{height:16px;width:16px}.vkuiUsersStack--size-m .vkuiUsersStack__photo{height:24px;width:24px}.vkuiUsersStack--size-l .vkuiUsersStack__photo{height:32px;width:32px}.vkuiUsersStack__photo+.vkuiUsersStack__photo{margin-left:-2px}.vkuiUsersStack__text{flex:1;min-width:0}.vkuiUsersStack--layout-vertical .vkuiUsersStack__text{text-align:center}.vkuiModalCardBase .vkuiUsersStack{margin-top:20px}
+.vkuiUsersStack{align-items:center;color:#818c99;color:var(--vkui--color_text_secondary);display:flex}.vkuiUsersStack--layout-vertical{flex-direction:column;justify-content:center}.vkuiUsersStack__photos{display:flex}.vkuiUsersStack__fill{fill:rgba(0,28,61,.08);fill:var(--vkui--color_image_placeholder_alpha)}.vkuiUsersStack__photo--others{align-items:center;background:#99a2ad;background:var(--vkui--color_icon_secondary);border-radius:50%;color:#fff;color:var(--vkui--color_text_contrast);display:flex;justify-content:center}.vkuiUsersStack--size-s .vkuiUsersStack__photo{height:16px;width:16px}.vkuiUsersStack--size-m .vkuiUsersStack__photo{height:24px;width:24px}.vkuiUsersStack--size-l .vkuiUsersStack__photo{height:32px;width:32px}.vkuiUsersStack__photo+.vkuiUsersStack__photo{margin-left:-2px}.vkuiUsersStack__text{flex:1;min-width:0}.vkuiUsersStack--layout-vertical .vkuiUsersStack__text{margin-top:8px;text-align:center}.vkuiUsersStack--layout-horizontal .vkuiUsersStack__text{margin-left:8px}.vkuiModalCardBase .vkuiUsersStack{margin-top:20px}

package/dist/cssm/components/WriteBarIcon/WriteBarIcon.js

@@ -2,13 +2,14 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["mode", "children", "count", "className"];
 import * as React from 'react';
-import { Icon24Send, Icon28AddCircleOutline, Icon28AttachOutline, Icon28CheckCircleOutline, Icon48WritebarDone, Icon48WritebarSend } from '@vkontakte/icons';
+import { Icon24Attach, Icon24CheckCircleOutline, Icon24Send, Icon28AddCircleOutline, Icon28AttachOutline, Icon28CheckCircleOutline, Icon28Send, Icon48WritebarDone, Icon48WritebarSend } from '@vkontakte/icons';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';
 import { Platform } from '../../lib/platform';
 import { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';
 import { Counter } from '../Counter/Counter';
 import { Tappable } from '../Tappable/Tappable';
+import { WriteBarIconRenderer } from './WriteBarIconRenderer';
 import "./WriteBarIcon.module.css";
 var warn = warnOnce('WriteBarIcon');
 
@@ -22,19 +23,28 @@ export var WriteBarIcon = function WriteBarIcon(_ref) {
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var platform = usePlatform();
-  var icon;
   var modeLabel = undefined;
+  var predefinedIcons;
   switch (mode) {
     case 'attach':
-      icon = platform === Platform.IOS ? /*#__PURE__*/React.createElement(Icon28AddCircleOutline, null) : /*#__PURE__*/React.createElement(Icon28AttachOutline, null);
+      predefinedIcons = {
+        IconCompact: platform === Platform.IOS ? Icon28AddCircleOutline : Icon24Attach,
+        IconRegular: platform === Platform.IOS ? Icon28AddCircleOutline : Icon28AttachOutline
+      };
       modeLabel = 'Прикрепить файл';
       break;
     case 'send':
-      icon = platform === Platform.IOS ? /*#__PURE__*/React.createElement(Icon48WritebarSend, null) : /*#__PURE__*/React.createElement(Icon24Send, null);
+      predefinedIcons = {
+        IconCompact: platform === Platform.IOS ? Icon48WritebarSend : Icon24Send,
+        IconRegular: platform === Platform.IOS ? Icon48WritebarSend : Icon28Send
+      };
       modeLabel = 'Отправить';
       break;
     case 'done':
-      icon = platform === Platform.IOS ? /*#__PURE__*/React.createElement(Icon48WritebarDone, null) : /*#__PURE__*/React.createElement(Icon28CheckCircleOutline, null);
+      predefinedIcons = {
+        IconCompact: platform === Platform.IOS ? Icon48WritebarDone : Icon24CheckCircleOutline,
+        IconRegular: platform === Platform.IOS ? Icon48WritebarDone : Icon28CheckCircleOutline
+      };
       modeLabel = 'Готово';
       break;
     default:
@@ -55,7 +65,7 @@ export var WriteBarIcon = function WriteBarIcon(_ref) {
     className: classNames("vkuiWriteBarIcon", platform === Platform.IOS && "vkuiWriteBarIcon--ios", mode && styles["WriteBarIcon--mode-".concat(mode)], className)
   }), /*#__PURE__*/React.createElement("span", {
     className: "vkuiWriteBarIcon__in"
-  }, icon || children), hasReactNode(count) && /*#__PURE__*/React.createElement(Counter, {
+  }, predefinedIcons ? /*#__PURE__*/React.createElement(WriteBarIconRenderer, predefinedIcons) : children), hasReactNode(count) && /*#__PURE__*/React.createElement(Counter, {
     className: "vkuiWriteBarIcon__counter",
     size: "s"
   }, count));

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

@@ -1 +1 @@
-{"version":3,"file":"WriteBarIcon.js","names":["React","Icon24Send","Icon28AddCircleOutline","Icon28AttachOutline","Icon28CheckCircleOutline","Icon48WritebarDone","Icon48WritebarSend","classNames","hasReactNode","usePlatform","Platform","COMMON_WARNINGS","warnOnce","Counter","Tappable","warn","WriteBarIcon","mode","children","count","className","restProps","platform","icon","modeLabel","undefined","IOS","process","env","NODE_ENV","isAccessible","a11y","styles"],"sources":["../../../../src/components/WriteBarIcon/WriteBarIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24Send,\n  Icon28AddCircleOutline,\n  Icon28AttachOutline,\n  Icon28CheckCircleOutline,\n  Icon48WritebarDone,\n  Icon48WritebarSend,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Counter } from '../Counter/Counter';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './WriteBarIcon.module.css';\n\nexport interface WriteBarIconProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Предустановленные типы кнопок в WriteBar для отрисовки иконки в зависимости от платформы.\n   * Если передать валидное значение для этого свойства, `children` игнорируется.\n   *\n   * - `attach` – иконка прикрепления.\n   * - `send` – иконка отправки.\n   * - `done` – иконка отправки в режиме редактирования.\n   */\n  mode?: 'attach' | 'send' | 'done';\n  /**\n   * Значение счётчика для кнопки. Например, для количества прикреплённых файлов.\n   */\n  count?: number;\n}\n\nconst warn = warnOnce('WriteBarIcon');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/WriteBarIcon\n */\nexport const WriteBarIcon = ({\n  mode,\n  children,\n  count,\n  className,\n  ...restProps\n}: WriteBarIconProps) => {\n  const platform = usePlatform();\n\n  let icon: React.ReactNode;\n  let modeLabel: string | undefined = undefined;\n\n  switch (mode) {\n    case 'attach':\n      icon = platform === Platform.IOS ? <Icon28AddCircleOutline /> : <Icon28AttachOutline />;\n      modeLabel = 'Прикрепить файл';\n      break;\n\n    case 'send':\n      icon = platform === Platform.IOS ? <Icon48WritebarSend /> : <Icon24Send />;\n      modeLabel = 'Отправить';\n      break;\n\n    case 'done':\n      icon = platform === Platform.IOS ? <Icon48WritebarDone /> : <Icon28CheckCircleOutline />;\n      modeLabel = 'Готово';\n      break;\n\n    default:\n      break;\n  }\n\n  if (process.env.NODE_ENV === 'development') {\n    const isAccessible = !modeLabel && (!restProps['aria-label'] || restProps['aria-labelledby']);\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y['button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      aria-label={modeLabel}\n      {...restProps}\n      Component=\"button\"\n      hasHover={false}\n      activeMode={styles['WriteBarIcon__active']}\n      className={classNames(\n        styles['WriteBarIcon'],\n        platform === Platform.IOS && styles['WriteBarIcon--ios'],\n        mode && styles[`WriteBarIcon--mode-${mode}`],\n        className,\n      )}\n    >\n      <span className={styles['WriteBarIcon__in']}>{icon || children}</span>\n      {hasReactNode(count) && (\n        <Counter className={styles['WriteBarIcon__counter']} size=\"s\">\n          {count}\n        </Counter>\n      )}\n    </Tappable>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,UAAU,EACVC,sBAAsB,EACtBC,mBAAmB,EACnBC,wBAAwB,EACxBC,kBAAkB,EAClBC,kBAAkB,QACb,kBAAkB;AACzB,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,eAAe,EAAEC,QAAQ,QAAQ,oBAAoB;AAC9D,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,QAAQ,QAAQ,sBAAsB;AAAC;AAmBhD,IAAMC,IAAI,GAAGH,QAAQ,CAAC,cAAc,CAAC;;AAErC;AACA;AACA;AACA,OAAO,IAAMI,YAAY,GAAG,SAAfA,YAAY,OAMA;EAAA,IALvBC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGb,WAAW,EAAE;EAE9B,IAAIc,IAAqB;EACzB,IAAIC,SAA6B,GAAGC,SAAS;EAE7C,QAAQR,IAAI;IACV,KAAK,QAAQ;MACXM,IAAI,GAAGD,QAAQ,KAAKZ,QAAQ,CAACgB,GAAG,gBAAG,oBAAC,sBAAsB,OAAG,gBAAG,oBAAC,mBAAmB,OAAG;MACvFF,SAAS,GAAG,iBAAiB;MAC7B;IAEF,KAAK,MAAM;MACTD,IAAI,GAAGD,QAAQ,KAAKZ,QAAQ,CAACgB,GAAG,gBAAG,oBAAC,kBAAkB,OAAG,gBAAG,oBAAC,UAAU,OAAG;MAC1EF,SAAS,GAAG,WAAW;MACvB;IAEF,KAAK,MAAM;MACTD,IAAI,GAAGD,QAAQ,KAAKZ,QAAQ,CAACgB,GAAG,gBAAG,oBAAC,kBAAkB,OAAG,gBAAG,oBAAC,wBAAwB,OAAG;MACxFF,SAAS,GAAG,QAAQ;MACpB;IAEF;MACE;EAAM;EAGV,IAAIG,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAMC,YAAY,GAAG,CAACN,SAAS,KAAK,CAACH,SAAS,CAAC,YAAY,CAAC,IAAIA,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAE7F,IAAI,CAACS,YAAY,EAAE;MACjBf,IAAI,CAACJ,eAAe,CAACoB,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IACpD;EACF;EAEA,oBACE,oBAAC,QAAQ;IACP,cAAYP;EAAU,GAClBH,SAAS;IACb,SAAS,EAAC,QAAQ;IAClB,QAAQ,EAAE,KAAM;IAChB,UAAU,4BAAiC;IAC3C,SAAS,EAAEd,UAAU,qBAEnBe,QAAQ,KAAKZ,QAAQ,CAACgB,GAAG,2BAA+B,EACxDT,IAAI,IAAIe,MAAM,8BAAuBf,IAAI,EAAG,EAC5CG,SAAS;EACT,iBAEF;IAAM,SAAS;EAA6B,GAAEG,IAAI,IAAIL,QAAQ,CAAQ,EACrEV,YAAY,CAACW,KAAK,CAAC,iBAClB,oBAAC,OAAO;IAAC,SAAS,6BAAkC;IAAC,IAAI,EAAC;EAAG,GAC1DA,KAAK,CAET,CACQ;AAEf,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"WriteBarIcon.js","names":["React","Icon24Attach","Icon24CheckCircleOutline","Icon24Send","Icon28AddCircleOutline","Icon28AttachOutline","Icon28CheckCircleOutline","Icon28Send","Icon48WritebarDone","Icon48WritebarSend","classNames","hasReactNode","usePlatform","Platform","COMMON_WARNINGS","warnOnce","Counter","Tappable","WriteBarIconRenderer","warn","WriteBarIcon","mode","children","count","className","restProps","platform","modeLabel","undefined","predefinedIcons","IconCompact","IOS","IconRegular","process","env","NODE_ENV","isAccessible","a11y","styles"],"sources":["../../../../src/components/WriteBarIcon/WriteBarIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24Attach,\n  Icon24CheckCircleOutline,\n  Icon24Send,\n  Icon28AddCircleOutline,\n  Icon28AttachOutline,\n  Icon28CheckCircleOutline,\n  Icon28Send,\n  Icon48WritebarDone,\n  Icon48WritebarSend,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Counter } from '../Counter/Counter';\nimport { Tappable } from '../Tappable/Tappable';\nimport { WriteBarIconRenderer } from './WriteBarIconRenderer';\nimport styles from './WriteBarIcon.module.css';\n\nexport interface WriteBarIconProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Предустановленные типы кнопок в WriteBar для отрисовки иконки в зависимости от платформы.\n   * Если передать валидное значение для этого свойства, `children` игнорируется.\n   *\n   * - `attach` – иконка прикрепления.\n   * - `send` – иконка отправки.\n   * - `done` – иконка отправки в режиме редактирования.\n   */\n  mode?: 'attach' | 'send' | 'done';\n  /**\n   * Значение счётчика для кнопки. Например, для количества прикреплённых файлов.\n   */\n  count?: number;\n}\n\nconst warn = warnOnce('WriteBarIcon');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/WriteBarIcon\n */\nexport const WriteBarIcon = ({\n  mode,\n  children,\n  count,\n  className,\n  ...restProps\n}: WriteBarIconProps) => {\n  const platform = usePlatform();\n  let modeLabel: string | undefined = undefined;\n\n  let predefinedIcons;\n  switch (mode) {\n    case 'attach':\n      predefinedIcons = {\n        IconCompact: platform === Platform.IOS ? Icon28AddCircleOutline : Icon24Attach,\n        IconRegular: platform === Platform.IOS ? Icon28AddCircleOutline : Icon28AttachOutline,\n      };\n      modeLabel = 'Прикрепить файл';\n      break;\n\n    case 'send':\n      predefinedIcons = {\n        IconCompact: platform === Platform.IOS ? Icon48WritebarSend : Icon24Send,\n        IconRegular: platform === Platform.IOS ? Icon48WritebarSend : Icon28Send,\n      };\n      modeLabel = 'Отправить';\n      break;\n\n    case 'done':\n      predefinedIcons = {\n        IconCompact: platform === Platform.IOS ? Icon48WritebarDone : Icon24CheckCircleOutline,\n        IconRegular: platform === Platform.IOS ? Icon48WritebarDone : Icon28CheckCircleOutline,\n      };\n      modeLabel = 'Готово';\n      break;\n\n    default:\n      break;\n  }\n\n  if (process.env.NODE_ENV === 'development') {\n    const isAccessible = !modeLabel && (!restProps['aria-label'] || restProps['aria-labelledby']);\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y['button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      aria-label={modeLabel}\n      {...restProps}\n      Component=\"button\"\n      hasHover={false}\n      activeMode={styles['WriteBarIcon__active']}\n      className={classNames(\n        styles['WriteBarIcon'],\n        platform === Platform.IOS && styles['WriteBarIcon--ios'],\n        mode && styles[`WriteBarIcon--mode-${mode}`],\n        className,\n      )}\n    >\n      <span className={styles['WriteBarIcon__in']}>\n        {predefinedIcons ? <WriteBarIconRenderer {...predefinedIcons} /> : children}\n      </span>\n      {hasReactNode(count) && (\n        <Counter className={styles['WriteBarIcon__counter']} size=\"s\">\n          {count}\n        </Counter>\n      )}\n    </Tappable>\n  );\n};\n"],"mappings":"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"}