@vkontakte/vkui 5.3.0 → 5.3.2

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

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

package/dist/cssm/components/ImageBase/ImageBaseBadge/ImageBaseBadge.module.css

@@ -1 +1 @@
-.vkuiImageBaseBadge{border-radius:50%;bottom:0;padding:2px;position:absolute;right:0;transform:translate(2px,2px);z-index:1;z-index:var(--vkui_internal--z_index_image_base_badge)}.vkuiImageBaseBadge--background-stroke{background-color:#fff;background-color:var(--vkui--color_background_content)}.vkuiImageBaseBadge--background-shadow:before{border-radius:inherit;bottom:2px;box-shadow:0 0 2px rgba(0,0,0,.03),0 2px 2px rgba(0,0,0,.06);box-shadow:var(--vkui--elevation1);content:"";left:2px;margin:auto;position:absolute;right:2px;top:2px}
+.vkuiImageBaseBadge{border-radius:50%;bottom:0;padding:2px;position:absolute;right:0;transform:translate(2px,2px);z-index:1;z-index:var(--vkui_internal--z_index_image_base_badge)}.vkuiImageBaseBadge--background-stroke{background-color:#fff;background-color:var(--vkui_internal--background,var(--vkui--color_background_content))}.vkuiImageBaseBadge--background-shadow:before{border-radius:inherit;bottom:2px;box-shadow:0 0 2px rgba(0,0,0,.03),0 2px 2px rgba(0,0,0,.06);box-shadow:var(--vkui--elevation1);content:"";left:2px;margin:auto;position:absolute;right:2px;top:2px}

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

@@ -1 +1 @@
-.vkuiModalCardBase__container{background:#fff;background:var(--vkui--color_background_modal);border-radius:18px;box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3);box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;margin-bottom:0;margin-bottom:var(--vkui_internal--safe_area_inset_bottom);padding:16px;pointer-events:auto;position:relative}.vkuiModalCardBase__container--softwareKeyboardOpened{margin-bottom:0}.vkuiModalCardBase__header,.vkuiModalCardBase__subheader{margin:0;padding:0 8px;text-align:center;word-break:break-word}.vkuiModalCardBase__header{color:#000;color:var(--vkui--color_text_primary)}.vkuiModalCardBase__subheader{color:#6d7885;color:var(--vkui--color_text_subhead)}.vkuiModalCardBase__header+.vkuiModalCardBase__subheader{margin-top:8px}.vkuiModalCardBase__icon{color:#2688eb;color:var(--vkui--color_icon_accent);margin:8px auto 16px}.vkuiModalCardBase__actions{display:flex;margin-top:16px}.vkuiUsersStack+.vkuiModalCardBase__actions{margin-top:24px}.vkuiModalCardBase__header+.vkuiModalCardBase__actions,.vkuiModalCardBase__subheader+.vkuiModalCardBase__actions{margin-top:32px}.vkuiModalCardBase__dismiss{color:#99a2ad;color:var(--vkui--color_icon_secondary);height:48px;justify-content:center;position:absolute;right:4px;top:4px;width:48px}.vkuiModalCardBase--ios .vkuiModalCardBase__header:first-child{padding-left:36px;padding-right:36px}.vkuiModalCardBase--android .vkuiModalCardBase__container,.vkuiModalCardBase--vkcom .vkuiModalCardBase__container{border-radius:12px}.vkuiModalCardBase--desktop .vkuiModalCardBase__container{border-radius:8px}
+.vkuiModalCardBase__container{--vkui_internal--background:var(--vkui--color_background_modal);background:#fff;background:var(--vkui--color_background_modal);border-radius:18px;box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3);box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;margin-bottom:0;margin-bottom:var(--vkui_internal--safe_area_inset_bottom);padding:16px;pointer-events:auto;position:relative}.vkuiModalCardBase__container--softwareKeyboardOpened{margin-bottom:0}.vkuiModalCardBase__header,.vkuiModalCardBase__subheader{margin:0;padding:0 8px;text-align:center;word-break:break-word}.vkuiModalCardBase__header{color:#000;color:var(--vkui--color_text_primary)}.vkuiModalCardBase__subheader{color:#6d7885;color:var(--vkui--color_text_subhead)}.vkuiModalCardBase__header+.vkuiModalCardBase__subheader{margin-top:8px}.vkuiModalCardBase__icon{color:#2688eb;color:var(--vkui--color_icon_accent);margin:8px auto 16px}.vkuiModalCardBase__actions{display:flex;margin-top:16px}.vkuiUsersStack+.vkuiModalCardBase__actions{margin-top:24px}.vkuiModalCardBase__header+.vkuiModalCardBase__actions,.vkuiModalCardBase__subheader+.vkuiModalCardBase__actions{margin-top:32px}.vkuiModalCardBase__dismiss{color:#99a2ad;color:var(--vkui--color_icon_secondary);height:48px;justify-content:center;position:absolute;right:4px;top:4px;width:48px}.vkuiModalCardBase--ios .vkuiModalCardBase__header:first-child{padding-left:36px;padding-right:36px}.vkuiModalCardBase--android .vkuiModalCardBase__container,.vkuiModalCardBase--vkcom .vkuiModalCardBase__container{border-radius:12px}.vkuiModalCardBase--desktop .vkuiModalCardBase__container{border-radius:8px}

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

@@ -1 +1 @@
-.vkuiModalPage{box-sizing:border-box;height:100%;overflow:hidden;pointer-events:none;position:absolute;width:100%}.vkuiModalPage--desktop{align-items:center;display:flex;justify-content:center}.vkuiModalPage__in-wrap{align-items:flex-end;bottom:0;display:flex;height:100%;left:0;margin-left:auto;margin-right:auto;pointer-events:auto;position:absolute;right:0;transform:translateY(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);transition:transform .32s var(--vkui--animation_easing_platform);width:100%}.vkuiModalPage--ios .vkuiModalPage__in-wrap{transition:transform .4s cubic-bezier(.4,0,.2,1);transition:transform .4s var(--vkui--animation_easing_platform)}.vkuiModalPage--desktop .vkuiModalPage__in-wrap{align-items:normal;height:auto;margin:32px 56px;max-height:640px;opacity:0;position:relative;transform:none;transition:opacity .34s cubic-bezier(.4,0,.2,1);transition:opacity .34s var(--vkui--animation_easing_platform)}@media (max-height:672px){.vkuiModalPage--desktop .vkuiModalPage__in-wrap{max-height:calc(100% - 32px * 2)}}.vkuiModalPage--size-s .vkuiModalPage__in-wrap{max-width:420px;max-width:var(--vkui--size_popup_small--regular)}.vkuiModalPage--size-m .vkuiModalPage__in-wrap{max-width:680px;max-width:var(--vkui--size_popup_medium--regular)}.vkuiModalPage--size-l .vkuiModalPage__in-wrap{max-width:880px;max-width:var(--vkui--size_popup_large--regular)}.vkuiModalPage__in{background-color:#fff;background-color:var(--vkui--color_background_modal);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-sizing:border-box;display:flex;flex-direction:column;height:100%;overflow:visible;position:relative;width:100%}.vkuiModalPage--desktop .vkuiModalPage__in{border-bottom-left-radius:12px;border-bottom-left-radius:var(--vkui--size_border_radius_paper--regular);border-bottom-right-radius:12px;border-bottom-right-radius:var(--vkui--size_border_radius_paper--regular);box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3);height:auto}.vkuiModalPage__header{width:100%}.vkuiModalPage__content-wrap{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;display:flex;flex-direction:column;overflow:hidden;position:relative}.vkuiModalPage__content{box-sizing:border-box;height:100%;overflow-x:hidden;overflow-y:hidden}.vkuiInternalModalRoot__modal--expandable .vkuiModalPage__content,.vkuiModalPage--desktop .vkuiModalPage__content{-webkit-overflow-scrolling:touch;overflow-y:auto}.vkuiModalPage__content-in{padding-bottom:0;padding-bottom:var(--vkui_internal--safe_area_inset_bottom);position:relative}.vkuiInternalModalRoot--touched .vkuiModalPage__in-wrap{transition:none}.vkuiInternalModalRoot--switching .vkuiModalPage__in-wrap{pointer-events:none}.vkuiInternalModalRoot__modal--collapsed .vkuiModalPage__content,.vkuiInternalModalRoot__modal--dragging .vkuiModalPage__content{overflow:hidden;touch-action:pan-y}
+.vkuiModalPage{box-sizing:border-box;height:100%;overflow:hidden;pointer-events:none;position:absolute;width:100%}.vkuiModalPage--desktop{align-items:center;display:flex;justify-content:center}.vkuiModalPage__in-wrap{align-items:flex-end;bottom:0;display:flex;height:100%;left:0;margin-left:auto;margin-right:auto;pointer-events:auto;position:absolute;right:0;transform:translateY(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);transition:transform .32s var(--vkui--animation_easing_platform);width:100%}.vkuiModalPage--ios .vkuiModalPage__in-wrap{transition:transform .4s cubic-bezier(.4,0,.2,1);transition:transform .4s var(--vkui--animation_easing_platform)}.vkuiModalPage--desktop .vkuiModalPage__in-wrap{align-items:normal;height:auto;margin:32px 56px;max-height:640px;opacity:0;position:relative;transform:none;transition:opacity .34s cubic-bezier(.4,0,.2,1);transition:opacity .34s var(--vkui--animation_easing_platform)}@media (max-height:672px){.vkuiModalPage--desktop .vkuiModalPage__in-wrap{max-height:calc(100% - 32px * 2)}}.vkuiModalPage--size-s .vkuiModalPage__in-wrap{max-width:420px;max-width:var(--vkui--size_popup_small--regular)}.vkuiModalPage--size-m .vkuiModalPage__in-wrap{max-width:680px;max-width:var(--vkui--size_popup_medium--regular)}.vkuiModalPage--size-l .vkuiModalPage__in-wrap{max-width:880px;max-width:var(--vkui--size_popup_large--regular)}.vkuiModalPage__in{--vkui_internal--background:var(--vkui--color_background_modal);background-color:#fff;background-color:var(--vkui--color_background_modal);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-sizing:border-box;display:flex;flex-direction:column;height:100%;overflow:visible;position:relative;width:100%}.vkuiModalPage--desktop .vkuiModalPage__in{border-bottom-left-radius:12px;border-bottom-left-radius:var(--vkui--size_border_radius_paper--regular);border-bottom-right-radius:12px;border-bottom-right-radius:var(--vkui--size_border_radius_paper--regular);box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3);height:auto}.vkuiModalPage__header{width:100%}.vkuiModalPage__content-wrap{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;display:flex;flex-direction:column;overflow:hidden;position:relative}.vkuiModalPage__header:empty+.vkuiModalPage__content-wrap{border-radius:inherit}.vkuiModalPage__content{box-sizing:border-box;height:100%;overflow-x:hidden;overflow-y:hidden}.vkuiInternalModalRoot__modal--expandable .vkuiModalPage__content,.vkuiModalPage--desktop .vkuiModalPage__content{-webkit-overflow-scrolling:touch;overflow-y:auto}.vkuiInternalModalRoot__modal--expandable .vkuiModalPage__content-in,.vkuiModalPage--desktop .vkuiModalPage__content-in{height:100%}.vkuiModalPage__content-in{position:relative}.vkuiModalPage__content-in:after{content:"";display:block;height:0;height:var(--vkui_internal--safe_area_inset_bottom)}.vkuiInternalModalRoot--touched .vkuiModalPage__in-wrap{transition:none}.vkuiInternalModalRoot--switching .vkuiModalPage__in-wrap{pointer-events:none}.vkuiInternalModalRoot__modal--collapsed .vkuiModalPage__content,.vkuiInternalModalRoot__modal--dragging .vkuiModalPage__content{overflow:hidden;touch-action:pan-y}

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

@@ -35,6 +35,9 @@ export interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/PromoBanner
+ * @deprecated v5.3.1
+ *
+ * Используйте событие [VKWebAppShowBannerAd](https://dev.vk.com/mini-apps/monetization/ad/banners)
  */
 export declare const PromoBanner: ({ bannerData, onClose, isCloseButtonHidden, className, ...restProps }: PromoBannerProps) => JSX.Element;
 export {};

package/dist/cssm/components/PromoBanner/PromoBanner.js

@@ -1,14 +1,22 @@
 import * as React from 'react';
 import { Icon24Dismiss } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
+import { warnOnce } from '../../lib/warnOnce';
 import { Button } from '../Button/Button';
 import { Image } from '../Image/Image';
 import { SimpleCell } from '../SimpleCell/SimpleCell';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import styles from './PromoBanner.module.css';
+const warn = warnOnce('PromoBanner');
 /**
  * @see https://vkcom.github.io/VKUI/#/PromoBanner
+ * @deprecated v5.3.1
+ *
+ * Используйте событие [VKWebAppShowBannerAd](https://dev.vk.com/mini-apps/monetization/ad/banners)
  */ export const PromoBanner = ({ bannerData ={} , onClose , isCloseButtonHidden , className , ...restProps })=>{
+    if (process.env.NODE_ENV === 'development') {
+        warn('Компонент устарел и будет удален в v6. Используйте событие VKWebAppShowBannerAd https://dev.vk.com/mini-apps/monetization/ad/banners');
+    }
     const [currentPixel, setCurrentPixel] = React.useState('');
     const statsPixels = React.useMemo(()=>bannerData.statistics ? bannerData.statistics.reduce((acc, item)=>({
                 ...acc,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PromoBanner/PromoBanner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Dismiss } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Button } from '../Button/Button';\nimport { Image } from '../Image/Image';\nimport { SimpleCell } from '../SimpleCell/SimpleCell';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './PromoBanner.module.css';\n\ntype StatsType =\n  | 'playbackStarted' // Начало показа\n  | 'click'; // Клик по баннеру\n\ntype BannerData = {\n  title?: string;\n  url_types?: string;\n  bannerID?: string;\n  imageWidth?: number;\n  imageHeight?: number;\n  imageLink?: string;\n  trackingLink?: string;\n  type?: string;\n  iconWidth?: number;\n  domain?: string;\n  ctaText?: string;\n  advertisingLabel?: string;\n  iconLink?: string;\n  statistics?: Array<{ type: StatsType; url: string }>;\n  openInBrowser?: boolean;\n  iconHeight?: number;\n  directLink?: boolean;\n  navigationType?: string;\n  description?: string;\n  ageRestrictions?: string;\n};\n\nexport interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Данные рекламного баннера, полученные из VKWebAppGetAds */\n  bannerData: BannerData;\n  /** Флаг скрытия кнопки закрытия рекламы */\n  isCloseButtonHidden?: boolean;\n  /** Хандлер закрытия рекламы */\n  onClose: () => void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PromoBanner\n */\nexport const PromoBanner = ({\n  bannerData = {},\n  onClose,\n  isCloseButtonHidden,\n  className,\n  ...restProps\n}: PromoBannerProps) => {\n  const [currentPixel, setCurrentPixel] = React.useState('');\n\n  const statsPixels = React.useMemo(\n    () =>\n      (bannerData.statistics\n        ? bannerData.statistics.reduce((acc, item) => ({ ...acc, [item.type]: item.url }), {})\n        : {}) as Record<StatsType, string | void>,\n    [bannerData.statistics],\n  );\n\n  const onClick = React.useCallback(\n    () => setCurrentPixel(statsPixels.click || ''),\n    [statsPixels.click],\n  );\n\n  React.useEffect(() => {\n    if (statsPixels.playbackStarted) {\n      setCurrentPixel(statsPixels.playbackStarted);\n    }\n  }, [statsPixels.playbackStarted]);\n\n  return (\n    <div className={classNames(styles['PromoBanner'], className)} {...restProps}>\n      <div className={styles['PromoBanner__head']}>\n        <Footnote>{bannerData.advertisingLabel || 'Advertisement'}</Footnote>\n        {bannerData.ageRestrictions && (\n          <Footnote className={styles['PromoBanner__age']}>{bannerData.ageRestrictions}</Footnote>\n        )}\n\n        {!isCloseButtonHidden && (\n          <div className={styles['PromoBanner__close']} onClick={onClose}>\n            <Icon24Dismiss />\n          </div>\n        )}\n      </div>\n      <SimpleCell\n        href={bannerData.trackingLink}\n        onClick={onClick}\n        rel=\"nofollow noopener noreferrer\"\n        target=\"_blank\"\n        before={\n          bannerData.iconLink && (\n            <Image\n              size={48}\n              src={bannerData.iconLink}\n              alt={bannerData.title}\n              data-testid={process.env.NODE_ENV === 'test' ? 'avatar' : undefined}\n            />\n          )\n        }\n        after={\n          bannerData.ctaText && (\n            <Button\n              mode=\"outline\"\n              data-testid={process.env.NODE_ENV === 'test' ? 'button-ctaText' : undefined}\n            >\n              {bannerData.ctaText}\n            </Button>\n          )\n        }\n        subtitle={bannerData.domain}\n      >\n        {bannerData.title}\n      </SimpleCell>\n\n      {currentPixel.length > 0 && (\n        <div className={styles['PromoBanner__pixels']}>\n          <img src={currentPixel} alt=\"\" />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["React","Icon24Dismiss","classNames","Button","Image","SimpleCell","Footnote","styles","PromoBanner","bannerData","onClose","isCloseButtonHidden","className","restProps","currentPixel","setCurrentPixel","useState","statsPixels","useMemo","statistics","reduce","acc","item","type","url","onClick","useCallback","click","useEffect","playbackStarted","div","advertisingLabel","ageRestrictions","href","trackingLink","rel","target","before","iconLink","size","src","alt","title","data-testid","process","env","NODE_ENV","undefined","after","ctaText","mode","subtitle","domain","length","img"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,KAAK,QAAQ,iBAAiB;AACvC,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,2BAA2B;AAsC9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,YAAa,CAAC,EAAC,EACfC,QAAO,EACPC,oBAAmB,EACnBC,UAAS,EACT,GAAGC,WACc,GAAK;IACtB,MAAM,CAACC,cAAcC,gBAAgB,GAAGf,MAAMgB,QAAQ,CAAC;IAEvD,MAAMC,cAAcjB,MAAMkB,OAAO,CAC/B,IACGT,WAAWU,UAAU,GAClBV,WAAWU,UAAU,CAACC,MAAM,CAAC,CAACC,KAAKC,OAAU,CAAA;gBAAE,GAAGD,GAAG;gBAAE,CAACC,KAAKC,IAAI,CAAC,EAAED,KAAKE,GAAG;YAAC,CAAA,GAAI,CAAC,KAClF,CAAC,CAAC,EACR;QAACf,WAAWU,UAAU;KAAC;IAGzB,MAAMM,UAAUzB,MAAM0B,WAAW,CAC/B,IAAMX,gBAAgBE,YAAYU,KAAK,IAAI,KAC3C;QAACV,YAAYU,KAAK;KAAC;IAGrB3B,MAAM4B,SAAS,CAAC,IAAM;QACpB,IAAIX,YAAYY,eAAe,EAAE;YAC/Bd,gBAAgBE,YAAYY,eAAe;QAC7C,CAAC;IACH,GAAG;QAACZ,YAAYY,eAAe;KAAC;IAEhC,qBACE,oBAACC;QAAIlB,WAAWV,WAAWK,MAAM,CAAC,cAAc,EAAEK;QAAa,GAAGC,SAAS;qBACzE,oBAACiB;QAAIlB,WAAWL,MAAM,CAAC,oBAAoB;qBACzC,oBAACD,gBAAUG,WAAWsB,gBAAgB,IAAI,kBACzCtB,WAAWuB,eAAe,kBACzB,oBAAC1B;QAASM,WAAWL,MAAM,CAAC,mBAAmB;OAAGE,WAAWuB,eAAe,GAG7E,CAACrB,qCACA,oBAACmB;QAAIlB,WAAWL,MAAM,CAAC,qBAAqB;QAAEkB,SAASf;qBACrD,oBAACT,sCAIP,oBAACI;QACC4B,MAAMxB,WAAWyB,YAAY;QAC7BT,SAASA;QACTU,KAAI;QACJC,QAAO;QACPC,QACE5B,WAAW6B,QAAQ,kBACjB,oBAAClC;YACCmC,MAAM;YACNC,KAAK/B,WAAW6B,QAAQ;YACxBG,KAAKhC,WAAWiC,KAAK;YACrBC,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,WAAWC,SAAS;;QAIzEC,OACEvC,WAAWwC,OAAO,kBAChB,oBAAC9C;YACC+C,MAAK;YACLP,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,mBAAmBC,SAAS;WAE1EtC,WAAWwC,OAAO;QAIzBE,UAAU1C,WAAW2C,MAAM;OAE1B3C,WAAWiC,KAAK,GAGlB5B,aAAauC,MAAM,GAAG,mBACrB,oBAACvB;QAAIlB,WAAWL,MAAM,CAAC,sBAAsB;qBAC3C,oBAAC+C;QAAId,KAAK1B;QAAc2B,KAAI;;AAKtC,EAAE"}
+{"version":3,"sources":["../../../../src/components/PromoBanner/PromoBanner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Dismiss } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { Button } from '../Button/Button';\nimport { Image } from '../Image/Image';\nimport { SimpleCell } from '../SimpleCell/SimpleCell';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './PromoBanner.module.css';\n\nconst warn = warnOnce('PromoBanner');\n\ntype StatsType =\n  | 'playbackStarted' // Начало показа\n  | 'click'; // Клик по баннеру\n\ntype BannerData = {\n  title?: string;\n  url_types?: string;\n  bannerID?: string;\n  imageWidth?: number;\n  imageHeight?: number;\n  imageLink?: string;\n  trackingLink?: string;\n  type?: string;\n  iconWidth?: number;\n  domain?: string;\n  ctaText?: string;\n  advertisingLabel?: string;\n  iconLink?: string;\n  statistics?: Array<{ type: StatsType; url: string }>;\n  openInBrowser?: boolean;\n  iconHeight?: number;\n  directLink?: boolean;\n  navigationType?: string;\n  description?: string;\n  ageRestrictions?: string;\n};\n\nexport interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Данные рекламного баннера, полученные из VKWebAppGetAds */\n  bannerData: BannerData;\n  /** Флаг скрытия кнопки закрытия рекламы */\n  isCloseButtonHidden?: boolean;\n  /** Хандлер закрытия рекламы */\n  onClose: () => void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PromoBanner\n * @deprecated v5.3.1\n *\n * Используйте событие [VKWebAppShowBannerAd](https://dev.vk.com/mini-apps/monetization/ad/banners)\n */\nexport const PromoBanner = ({\n  bannerData = {},\n  onClose,\n  isCloseButtonHidden,\n  className,\n  ...restProps\n}: PromoBannerProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    warn(\n      'Компонент устарел и будет удален в v6. Используйте событие VKWebAppShowBannerAd https://dev.vk.com/mini-apps/monetization/ad/banners',\n    );\n  }\n\n  const [currentPixel, setCurrentPixel] = React.useState('');\n\n  const statsPixels = React.useMemo(\n    () =>\n      (bannerData.statistics\n        ? bannerData.statistics.reduce((acc, item) => ({ ...acc, [item.type]: item.url }), {})\n        : {}) as Record<StatsType, string | void>,\n    [bannerData.statistics],\n  );\n\n  const onClick = React.useCallback(\n    () => setCurrentPixel(statsPixels.click || ''),\n    [statsPixels.click],\n  );\n\n  React.useEffect(() => {\n    if (statsPixels.playbackStarted) {\n      setCurrentPixel(statsPixels.playbackStarted);\n    }\n  }, [statsPixels.playbackStarted]);\n\n  return (\n    <div className={classNames(styles['PromoBanner'], className)} {...restProps}>\n      <div className={styles['PromoBanner__head']}>\n        <Footnote>{bannerData.advertisingLabel || 'Advertisement'}</Footnote>\n        {bannerData.ageRestrictions && (\n          <Footnote className={styles['PromoBanner__age']}>{bannerData.ageRestrictions}</Footnote>\n        )}\n\n        {!isCloseButtonHidden && (\n          <div className={styles['PromoBanner__close']} onClick={onClose}>\n            <Icon24Dismiss />\n          </div>\n        )}\n      </div>\n      <SimpleCell\n        href={bannerData.trackingLink}\n        onClick={onClick}\n        rel=\"nofollow noopener noreferrer\"\n        target=\"_blank\"\n        before={\n          bannerData.iconLink && (\n            <Image\n              size={48}\n              src={bannerData.iconLink}\n              alt={bannerData.title}\n              data-testid={process.env.NODE_ENV === 'test' ? 'avatar' : undefined}\n            />\n          )\n        }\n        after={\n          bannerData.ctaText && (\n            <Button\n              mode=\"outline\"\n              data-testid={process.env.NODE_ENV === 'test' ? 'button-ctaText' : undefined}\n            >\n              {bannerData.ctaText}\n            </Button>\n          )\n        }\n        subtitle={bannerData.domain}\n      >\n        {bannerData.title}\n      </SimpleCell>\n\n      {currentPixel.length > 0 && (\n        <div className={styles['PromoBanner__pixels']}>\n          <img src={currentPixel} alt=\"\" />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["React","Icon24Dismiss","classNames","warnOnce","Button","Image","SimpleCell","Footnote","styles","warn","PromoBanner","bannerData","onClose","isCloseButtonHidden","className","restProps","process","env","NODE_ENV","currentPixel","setCurrentPixel","useState","statsPixels","useMemo","statistics","reduce","acc","item","type","url","onClick","useCallback","click","useEffect","playbackStarted","div","advertisingLabel","ageRestrictions","href","trackingLink","rel","target","before","iconLink","size","src","alt","title","data-testid","undefined","after","ctaText","mode","subtitle","domain","length","img"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,KAAK,QAAQ,iBAAiB;AACvC,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,OAAON,SAAS;AAsCtB;;;;;CAKC,GACD,OAAO,MAAMO,cAAc,CAAC,EAC1BC,YAAa,CAAC,EAAC,EACfC,QAAO,EACPC,oBAAmB,EACnBC,UAAS,EACT,GAAGC,WACc,GAAK;IACtB,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1CT,KACE;IAEJ,CAAC;IAED,MAAM,CAACU,cAAcC,gBAAgB,GAAGpB,MAAMqB,QAAQ,CAAC;IAEvD,MAAMC,cAActB,MAAMuB,OAAO,CAC/B,IACGZ,WAAWa,UAAU,GAClBb,WAAWa,UAAU,CAACC,MAAM,CAAC,CAACC,KAAKC,OAAU,CAAA;gBAAE,GAAGD,GAAG;gBAAE,CAACC,KAAKC,IAAI,CAAC,EAAED,KAAKE,GAAG;YAAC,CAAA,GAAI,CAAC,KAClF,CAAC,CAAC,EACR;QAAClB,WAAWa,UAAU;KAAC;IAGzB,MAAMM,UAAU9B,MAAM+B,WAAW,CAC/B,IAAMX,gBAAgBE,YAAYU,KAAK,IAAI,KAC3C;QAACV,YAAYU,KAAK;KAAC;IAGrBhC,MAAMiC,SAAS,CAAC,IAAM;QACpB,IAAIX,YAAYY,eAAe,EAAE;YAC/Bd,gBAAgBE,YAAYY,eAAe;QAC7C,CAAC;IACH,GAAG;QAACZ,YAAYY,eAAe;KAAC;IAEhC,qBACE,oBAACC;QAAIrB,WAAWZ,WAAWM,MAAM,CAAC,cAAc,EAAEM;QAAa,GAAGC,SAAS;qBACzE,oBAACoB;QAAIrB,WAAWN,MAAM,CAAC,oBAAoB;qBACzC,oBAACD,gBAAUI,WAAWyB,gBAAgB,IAAI,kBACzCzB,WAAW0B,eAAe,kBACzB,oBAAC9B;QAASO,WAAWN,MAAM,CAAC,mBAAmB;OAAGG,WAAW0B,eAAe,GAG7E,CAACxB,qCACA,oBAACsB;QAAIrB,WAAWN,MAAM,CAAC,qBAAqB;QAAEsB,SAASlB;qBACrD,oBAACX,sCAIP,oBAACK;QACCgC,MAAM3B,WAAW4B,YAAY;QAC7BT,SAASA;QACTU,KAAI;QACJC,QAAO;QACPC,QACE/B,WAAWgC,QAAQ,kBACjB,oBAACtC;YACCuC,MAAM;YACNC,KAAKlC,WAAWgC,QAAQ;YACxBG,KAAKnC,WAAWoC,KAAK;YACrBC,eAAahC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,WAAW+B,SAAS;;QAIzEC,OACEvC,WAAWwC,OAAO,kBAChB,oBAAC/C;YACCgD,MAAK;YACLJ,eAAahC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,mBAAmB+B,SAAS;WAE1EtC,WAAWwC,OAAO;QAIzBE,UAAU1C,WAAW2C,MAAM;OAE1B3C,WAAWoC,KAAK,GAGlB5B,aAAaoC,MAAM,GAAG,mBACrB,oBAACpB;QAAIrB,WAAWN,MAAM,CAAC,sBAAsB;qBAC3C,oBAACgD;QAAIX,KAAK1B;QAAc2B,KAAI;;AAKtC,EAAE"}

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: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)}}.vkuiInternalFormItem .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;word-break:break-word}.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)}}.vkuiInternalFormItem .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/Search/Search.module.css

@@ -1 +1 @@
-.vkuiSearch{-webkit-tap-highlight-color:transparent;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);font-weight:400;line-height:normal;overflow:hidden;padding:8px 16px;padding:8px var(--vkui--size_base_padding_horizontal--regular);transform:translateZ(0)}.vkuiSearch__in{position:relative}.vkuiSearch__width{color:transparent;white-space:nowrap;width:10000px}.vkuiSearch__control{align-items:center;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);display:flex;height:100%;justify-content:flex-start;left:0;position:absolute;top:0;width:calc(100% - 1px)}.vkuiSearch__input{-webkit-appearance:none;background-color:initial;border:none;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;flex-grow:1;font-family:inherit;font-size:17px;margin:0;max-width:100%;min-width:0;padding:0 22px 0 36px;position:relative}.vkuiSearch__input::-webkit-search-cancel-button,.vkuiSearch__input::-webkit-search-decoration,.vkuiSearch__input::-webkit-search-results-button,.vkuiSearch__input::-webkit-search-results-decoration{display:none}.vkuiSearch__input:focus{outline:none}.vkuiSearch--has-after .vkuiSearch__input{border-bottom-right-radius:0;border-top-right-radius:0}.vkuiSearch--has-icon .vkuiSearch__input,.vkuiSearch--has-icon .vkuiSearch__placeholder,.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:40px}.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:80px}.vkuiSearch__after-width{cursor:text;flex-shrink:0;font-size:17px;padding-left:12px;padding-right:4px;pointer-events:none}.vkuiSearch__placeholder{box-sizing:border-box;cursor:text;display:flex;font-size:0;left:0;padding-left:12px;padding-right:22px;pointer-events:none;position:absolute;text-align:left;width:100%}.vkuiSearch__placeholder-in{align-items:center;display:flex;flex-grow:1;max-width:100%;overflow:hidden}.vkuiSearch__placeholder-text{color:#818c99;color:var(--vkui--color_text_secondary);margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSearch--has-value .vkuiSearch__placeholder-text{opacity:0}.vkuiSearch__icons{color:#99a2ad;color:var(--vkui--color_icon_secondary);position:absolute;right:100%;top:0}.vkuiSearch__icon,.vkuiSearch__icons{align-items:center;display:flex;justify-content:center}.vkuiSearch__icon{cursor:pointer;width:40px}.vkuiSearch__after{cursor:default;left:100%;position:absolute;top:0;transform:translate(0);transition:transform .3s cubic-bezier(.4,0,.2,1);transition:transform .3s var(--vkui--animation_easing_platform)}.vkuiSearch--focused .vkuiSearch__after,.vkuiSearch--has-value .vkuiSearch__after{transform:translate(-100%)}.vkuiSearch__after:before{content:"";display:block;height:100%;pointer-events:none;position:absolute;right:calc(100% - 1px);width:10px}.vkuiSearch__after-in{cursor:pointer;font-size:17px;padding-left:12px;padding-right:4px;position:relative}.vkuiSearch__after:after{border-radius:0 8px 8px 0;border-radius:0 var(--vkui--size_border_radius--regular) var(--vkui--size_border_radius--regular) 0;content:"";cursor:text;display:block;height:100%;pointer-events:none;position:absolute;right:100%;top:0;width:10px}.vkuiGroup--mode-plain .vkuiSearch{padding-top:4px}.vkuiSearch__after-width,.vkuiSearch__icon,.vkuiSearch__input,.vkuiSearch__placeholder,.vkuiSearch__placeholder-in,.vkuiSearch__width{height:32px;height:var(--vkui--size_search_height--compact)}.vkuiSearch__after,.vkuiSearch__after-width{line-height:32px;line-height:var(--vkui--size_search_height--compact)}.vkuiSearch--sizeY-regular .vkuiSearch__after-width,.vkuiSearch--sizeY-regular .vkuiSearch__icon,.vkuiSearch--sizeY-regular .vkuiSearch__input,.vkuiSearch--sizeY-regular .vkuiSearch__placeholder,.vkuiSearch--sizeY-regular .vkuiSearch__placeholder-in,.vkuiSearch--sizeY-regular .vkuiSearch__width{height:36px;height:var(--vkui--size_search_height--regular)}.vkuiSearch--sizeY-regular .vkuiSearch__after,.vkuiSearch--sizeY-regular .vkuiSearch__after-width{line-height:36px;line-height:var(--vkui--size_search_height--regular)}@media (max-width:767.9px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiSearch--sizeY-none .vkuiSearch__after-width,.vkuiSearch--sizeY-none .vkuiSearch__icon,.vkuiSearch--sizeY-none .vkuiSearch__input,.vkuiSearch--sizeY-none .vkuiSearch__placeholder,.vkuiSearch--sizeY-none .vkuiSearch__placeholder-in,.vkuiSearch--sizeY-none .vkuiSearch__width{height:36px;height:var(--vkui--size_search_height--regular)}.vkuiSearch--sizeY-none .vkuiSearch__after,.vkuiSearch--sizeY-none .vkuiSearch__after-width{line-height:36px;line-height:var(--vkui--size_search_height--regular)}}.vkuiSearch{background:#fff;background:var(--vkui--color_background_content)}.vkuiSearch__control{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiSearch__in:hover .vkuiSearch__after-width,.vkuiSearch__in:hover .vkuiSearch__after:after,.vkuiSearch__in:hover .vkuiSearch__control{background-color:#e2e4e9;background-color:var(--vkui--color_search_field_background--hover)}.vkuiSearch__in:hover .vkuiSearch__after-width{color:#e2e4e9;color:var(--vkui--color_search_field_background--hover)}.vkuiSearch__in:active .vkuiSearch__after-width,.vkuiSearch__in:active .vkuiSearch__after:after,.vkuiSearch__in:active .vkuiSearch__control{background-color:#d8dbe2;background-color:var(--vkui--color_search_field_background--active)}.vkuiSearch__in:active .vkuiSearch__after-width{color:#d8dbe2;color:var(--vkui--color_search_field_background--active)}.vkuiSearch__input{color:#000;color:var(--vkui--color_text_primary)}.vkuiSearch__placeholder{color:#818c99;color:var(--vkui--color_icon_medium)}.vkuiSearch__after-width{background:#ebedf0;background:var(--vkui--color_search_field_background);color:#ebedf0;color:var(--vkui--color_search_field_background)}.vkuiSearch__after{background:#fff;background:var(--vkui--color_background_content);color:#2688eb;color:var(--vkui--color_icon_accent_themed)}.vkuiSearch__after:after{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiSearch__after:before{background-color:#fff;background-color:var(--vkui--color_background_content)}.vkuiPanelHeader .vkuiSearch{background:#fff;background:var(--vkui--color_header_background)}.vkuiPanelHeader .vkuiSearch__control{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__input{color:#000;color:var(--vkui--color_text_primary)}.vkuiPanelHeader .vkuiSearch__placeholder{color:#99a2ad;color:var(--vkui--color_icon_secondary)}.vkuiPanelHeader .vkuiSearch__after-width{background:#ebedf0;background:var(--vkui--color_search_field_background);color:#ebedf0;color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__after{background:#fff;background:var(--vkui--color_header_background);color:#2688eb;color:var(--vkui--color_icon_accent_themed)}.vkuiPanelHeader .vkuiSearch__after:after{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__after:before{background-color:#fff;background-color:var(--vkui--color_header_background)}
+.vkuiSearch{-webkit-tap-highlight-color:transparent;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);font-weight:400;line-height:normal;overflow:hidden;padding:8px 16px;padding:8px var(--vkui--size_base_padding_horizontal--regular);transform:translateZ(0)}.vkuiSearch__in{position:relative}.vkuiSearch__width{color:transparent;white-space:nowrap;width:10000px}.vkuiSearch__control{align-items:center;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);display:flex;height:100%;justify-content:flex-start;left:0;position:absolute;top:0;width:calc(100% - 1px)}.vkuiSearch__input{-webkit-appearance:none;background-color:initial;border:none;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;flex-grow:1;font-family:inherit;font-size:17px;margin:0;max-width:100%;min-width:0;padding:0 22px 0 36px;position:relative}.vkuiSearch__input::-webkit-search-cancel-button,.vkuiSearch__input::-webkit-search-decoration,.vkuiSearch__input::-webkit-search-results-button,.vkuiSearch__input::-webkit-search-results-decoration{display:none}.vkuiSearch__input:focus{outline:none}.vkuiSearch--has-after .vkuiSearch__input{border-bottom-right-radius:0;border-top-right-radius:0}.vkuiSearch--has-icon .vkuiSearch__input,.vkuiSearch--has-icon .vkuiSearch__placeholder,.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:40px}.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:80px}.vkuiSearch__after-width{cursor:text;flex-shrink:0;font-size:17px;padding-left:12px;padding-right:4px;pointer-events:none}.vkuiSearch__placeholder{box-sizing:border-box;cursor:text;display:flex;font-size:0;left:0;padding-left:12px;padding-right:22px;pointer-events:none;position:absolute;text-align:left;width:100%}.vkuiSearch__placeholder-in{align-items:center;display:flex;flex-grow:1;max-width:100%;overflow:hidden}.vkuiSearch__placeholder-text{color:#818c99;color:var(--vkui--color_text_secondary);margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSearch--has-value .vkuiSearch__placeholder-text{opacity:0}.vkuiSearch__icons{color:#99a2ad;color:var(--vkui--color_icon_secondary);position:absolute;right:100%;top:0}.vkuiSearch__icon,.vkuiSearch__icons{align-items:center;display:flex;justify-content:center}.vkuiSearch__icon{cursor:pointer;width:40px}.vkuiSearch__after{cursor:default;left:100%;position:absolute;top:0;transform:translate(0);transition:transform .3s cubic-bezier(.4,0,.2,1);transition:transform .3s var(--vkui--animation_easing_platform)}.vkuiSearch--focused .vkuiSearch__after,.vkuiSearch--has-value .vkuiSearch__after{transform:translate(-100%)}.vkuiSearch__after:before{content:"";display:block;height:100%;pointer-events:none;position:absolute;right:calc(100% - 1px);width:10px}.vkuiSearch__after-in{cursor:pointer;font-size:17px;padding-left:12px;padding-right:4px;position:relative}.vkuiSearch__after:after{border-radius:0 8px 8px 0;border-radius:0 var(--vkui--size_border_radius--regular) var(--vkui--size_border_radius--regular) 0;content:"";cursor:text;display:block;height:100%;pointer-events:none;position:absolute;right:100%;top:0;width:10px}.vkuiGroup--mode-plain .vkuiSearch{padding-top:4px}.vkuiSearch__after-width,.vkuiSearch__icon,.vkuiSearch__input,.vkuiSearch__placeholder,.vkuiSearch__placeholder-in,.vkuiSearch__width{height:32px;height:var(--vkui--size_search_height--compact)}.vkuiSearch__after,.vkuiSearch__after-width{line-height:32px;line-height:var(--vkui--size_search_height--compact)}.vkuiSearch--sizeY-regular .vkuiSearch__after-width,.vkuiSearch--sizeY-regular .vkuiSearch__icon,.vkuiSearch--sizeY-regular .vkuiSearch__input,.vkuiSearch--sizeY-regular .vkuiSearch__placeholder,.vkuiSearch--sizeY-regular .vkuiSearch__placeholder-in,.vkuiSearch--sizeY-regular .vkuiSearch__width{height:36px;height:var(--vkui--size_search_height--regular)}.vkuiSearch--sizeY-regular .vkuiSearch__after,.vkuiSearch--sizeY-regular .vkuiSearch__after-width{line-height:36px;line-height:var(--vkui--size_search_height--regular)}@media (max-width:767.9px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiSearch--sizeY-none .vkuiSearch__after-width,.vkuiSearch--sizeY-none .vkuiSearch__icon,.vkuiSearch--sizeY-none .vkuiSearch__input,.vkuiSearch--sizeY-none .vkuiSearch__placeholder,.vkuiSearch--sizeY-none .vkuiSearch__placeholder-in,.vkuiSearch--sizeY-none .vkuiSearch__width{height:36px;height:var(--vkui--size_search_height--regular)}.vkuiSearch--sizeY-none .vkuiSearch__after,.vkuiSearch--sizeY-none .vkuiSearch__after-width{line-height:36px;line-height:var(--vkui--size_search_height--regular)}}.vkuiSearch{background:#fff;background:var(--vkui_internal--background,var(--vkui--color_background_content))}.vkuiSearch__control{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiSearch__in:hover .vkuiSearch__after-width,.vkuiSearch__in:hover .vkuiSearch__after:after,.vkuiSearch__in:hover .vkuiSearch__control{background-color:#e2e4e9;background-color:var(--vkui--color_search_field_background--hover)}.vkuiSearch__in:hover .vkuiSearch__after-width{color:#e2e4e9;color:var(--vkui--color_search_field_background--hover)}.vkuiSearch__in:active .vkuiSearch__after-width,.vkuiSearch__in:active .vkuiSearch__after:after,.vkuiSearch__in:active .vkuiSearch__control{background-color:#d8dbe2;background-color:var(--vkui--color_search_field_background--active)}.vkuiSearch__in:active .vkuiSearch__after-width{color:#d8dbe2;color:var(--vkui--color_search_field_background--active)}.vkuiSearch__input{color:#000;color:var(--vkui--color_text_primary)}.vkuiSearch__placeholder{color:#818c99;color:var(--vkui--color_icon_medium)}.vkuiSearch__after-width{background:#ebedf0;background:var(--vkui--color_search_field_background);color:#ebedf0;color:var(--vkui--color_search_field_background)}.vkuiSearch__after{background:#fff;background:var(--vkui_internal--background,var(--vkui--color_background_content));color:#2688eb;color:var(--vkui--color_icon_accent_themed)}.vkuiSearch__after:after{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiSearch__after:before{background-color:#fff;background-color:var(--vkui_internal--background,var(--vkui--color_background_content))}.vkuiPanelHeader .vkuiSearch{background:#fff;background:var(--vkui--color_header_background)}.vkuiPanelHeader .vkuiSearch__control{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__input{color:#000;color:var(--vkui--color_text_primary)}.vkuiPanelHeader .vkuiSearch__placeholder{color:#99a2ad;color:var(--vkui--color_icon_secondary)}.vkuiPanelHeader .vkuiSearch__after-width{background:#ebedf0;background:var(--vkui--color_search_field_background);color:#ebedf0;color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__after{background:#fff;background:var(--vkui--color_header_background);color:#2688eb;color:var(--vkui--color_icon_accent_themed)}.vkuiPanelHeader .vkuiSearch__after:after{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__after:before{background-color:#fff;background-color:var(--vkui--color_header_background)}

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

@@ -4,4 +4,4 @@ export type SelectType = 'default' | 'plain' | 'accent';
 /**
  * @see https://vkcom.github.io/VKUI/#/Select
  */
-export declare const Select: ({ children, options, popupDirection, renderOption, ...props }: SelectProps) => JSX.Element;
+export declare const Select: ({ children, options, popupDirection, renderOption, allowClearButton, ClearButton, ...props }: SelectProps) => JSX.Element;

package/dist/cssm/components/Select/Select.js

@@ -4,12 +4,14 @@ import { CustomSelect } from '../CustomSelect/CustomSelect';
 import { NativeSelect } from '../NativeSelect/NativeSelect';
 /**
  * @see https://vkcom.github.io/VKUI/#/Select
- */ export const Select = ({ children , options =[] , popupDirection , renderOption , ...props })=>{
+ */ export const Select = ({ children , options =[] , popupDirection , renderOption , allowClearButton , ClearButton , ...props })=>{
     const hasPointer = useAdaptivityHasPointer();
     return /*#__PURE__*/ React.createElement(React.Fragment, null, (hasPointer === undefined || hasPointer) && /*#__PURE__*/ React.createElement(CustomSelect, {
         options: options,
         popupDirection: popupDirection,
         renderOption: renderOption,
+        allowClearButton: allowClearButton,
+        ClearButton: ClearButton,
         ...props
     }), (hasPointer === undefined || !hasPointer) && /*#__PURE__*/ React.createElement(NativeSelect, props, options.map(({ label , value  })=>/*#__PURE__*/ React.createElement("option", {
             value: value,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { CustomSelect, SelectProps } from '../CustomSelect/CustomSelect';\nimport { NativeSelect } from '../NativeSelect/NativeSelect';\n\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = ({\n  children,\n  options = [],\n  popupDirection,\n  renderOption,\n  ...props\n}: SelectProps) => {\n  const hasPointer = useAdaptivityHasPointer();\n\n  return (\n    <React.Fragment>\n      {(hasPointer === undefined || hasPointer) && (\n        <CustomSelect\n          options={options}\n          popupDirection={popupDirection}\n          renderOption={renderOption}\n          {...props}\n        />\n      )}\n      {(hasPointer === undefined || !hasPointer) && (\n        <NativeSelect {...props}>\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","useAdaptivityHasPointer","CustomSelect","NativeSelect","Select","children","options","popupDirection","renderOption","props","hasPointer","Fragment","undefined","map","label","value","option","key"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,YAAY,QAAqB,+BAA+B;AACzE,SAASC,YAAY,QAAQ,+BAA+B;AAI5D;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EACrBC,SAAQ,EACRC,SAAU,EAAE,CAAA,EACZC,eAAc,EACdC,aAAY,EACZ,GAAGC,OACS,GAAK;IACjB,MAAMC,aAAaT;IAEnB,qBACE,oBAACD,MAAMW,QAAQ,QACZ,AAACD,CAAAA,eAAeE,aAAaF,UAAS,mBACrC,oBAACR;QACCI,SAASA;QACTC,gBAAgBA;QAChBC,cAAcA;QACb,GAAGC,KAAK;QAGZ,AAACC,CAAAA,eAAeE,aAAa,CAACF,UAAS,mBACtC,oBAACP,cAAiBM,OACfH,QAAQO,GAAG,CAAC,CAAC,EAAEC,MAAK,EAAEC,MAAK,EAAE,iBAC5B,oBAACC;YAAOD,OAAOA;YAAOE,KAAK,CAAC,EAAEF,MAAM,CAAC;WAClCD;AAOf,EAAE"}
+{"version":3,"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { CustomSelect, SelectProps } from '../CustomSelect/CustomSelect';\nimport { NativeSelect } from '../NativeSelect/NativeSelect';\n\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = ({\n  children,\n  options = [],\n  popupDirection,\n  renderOption,\n  allowClearButton,\n  ClearButton,\n  ...props\n}: SelectProps) => {\n  const hasPointer = useAdaptivityHasPointer();\n\n  return (\n    <React.Fragment>\n      {(hasPointer === undefined || hasPointer) && (\n        <CustomSelect\n          options={options}\n          popupDirection={popupDirection}\n          renderOption={renderOption}\n          allowClearButton={allowClearButton}\n          ClearButton={ClearButton}\n          {...props}\n        />\n      )}\n      {(hasPointer === undefined || !hasPointer) && (\n        <NativeSelect {...props}>\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","useAdaptivityHasPointer","CustomSelect","NativeSelect","Select","children","options","popupDirection","renderOption","allowClearButton","ClearButton","props","hasPointer","Fragment","undefined","map","label","value","option","key"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,YAAY,QAAqB,+BAA+B;AACzE,SAASC,YAAY,QAAQ,+BAA+B;AAI5D;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EACrBC,SAAQ,EACRC,SAAU,EAAE,CAAA,EACZC,eAAc,EACdC,aAAY,EACZC,iBAAgB,EAChBC,YAAW,EACX,GAAGC,OACS,GAAK;IACjB,MAAMC,aAAaX;IAEnB,qBACE,oBAACD,MAAMa,QAAQ,QACZ,AAACD,CAAAA,eAAeE,aAAaF,UAAS,mBACrC,oBAACV;QACCI,SAASA;QACTC,gBAAgBA;QAChBC,cAAcA;QACdC,kBAAkBA;QAClBC,aAAaA;QACZ,GAAGC,KAAK;QAGZ,AAACC,CAAAA,eAAeE,aAAa,CAACF,UAAS,mBACtC,oBAACT,cAAiBQ,OACfL,QAAQS,GAAG,CAAC,CAAC,EAAEC,MAAK,EAAEC,MAAK,EAAE,iBAC5B,oBAACC;YAAOD,OAAOA;YAAOE,KAAK,CAAC,EAAEF,MAAM,CAAC;WAClCD;AAOf,EAAE"}

package/dist/cssm/components/Separator/Separator.js

@@ -5,10 +5,8 @@ import styles from './Separator.module.css';
  * @see https://vkcom.github.io/VKUI/#/Separator
  */ export const Separator = ({ wide , className , ...restProps })=>/*#__PURE__*/ React.createElement("div", {
         ...restProps,
-        "aria-hidden": true,
-        className: classNames(styles['Separator'], !wide && styles['Separator--padded'], className),
-        role: "separator"
-    }, /*#__PURE__*/ React.createElement("div", {
+        className: classNames(styles['Separator'], !wide && styles['Separator--padded'], className)
+    }, /*#__PURE__*/ React.createElement("hr", {
         className: styles['Separator__in']
     }));
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Separator.module.css';\n\nexport interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * С этим свойством компонент не будет иметь отступы слева и справа\n   */\n  wide?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({ wide, className, ...restProps }: SeparatorProps) => (\n  <div\n    {...restProps}\n    aria-hidden\n    className={classNames(styles['Separator'], !wide && styles['Separator--padded'], className)}\n    role=\"separator\"\n  >\n    <div className={styles['Separator__in']} />\n  </div>\n);\n"],"names":["React","classNames","styles","Separator","wide","className","restProps","div","aria-hidden","role"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,yBAAyB;AAS5C;;CAEC,GACD,OAAO,MAAMC,YAAY,CAAC,EAAEC,KAAI,EAAEC,UAAS,EAAE,GAAGC,WAA2B,iBACzE,oBAACC;QACE,GAAGD,SAAS;QACbE,eAAAA,IAAW;QACXH,WAAWJ,WAAWC,MAAM,CAAC,YAAY,EAAE,CAACE,QAAQF,MAAM,CAAC,oBAAoB,EAAEG;QACjFI,MAAK;qBAEL,oBAACF;QAAIF,WAAWH,MAAM,CAAC,gBAAgB;QAEzC"}
+{"version":3,"sources":["../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Separator.module.css';\n\nexport interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * С этим свойством компонент не будет иметь отступы слева и справа\n   */\n  wide?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({ wide, className, ...restProps }: SeparatorProps) => (\n  <div\n    {...restProps}\n    className={classNames(styles['Separator'], !wide && styles['Separator--padded'], className)}\n  >\n    <hr className={styles['Separator__in']} />\n  </div>\n);\n"],"names":["React","classNames","styles","Separator","wide","className","restProps","div","hr"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,yBAAyB;AAS5C;;CAEC,GACD,OAAO,MAAMC,YAAY,CAAC,EAAEC,KAAI,EAAEC,UAAS,EAAE,GAAGC,WAA2B,iBACzE,oBAACC;QACE,GAAGD,SAAS;QACbD,WAAWJ,WAAWC,MAAM,CAAC,YAAY,EAAE,CAACE,QAAQF,MAAM,CAAC,oBAAoB,EAAEG;qBAEjF,oBAACG;QAAGH,WAAWH,MAAM,CAAC,gBAAgB;QAExC"}

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

@@ -1 +1 @@
-.vkuiSeparator{color:#d7d8d9;color:var(--vkui--color_separator_primary)}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.vkuiSeparator{color:#cbcccd;color:var(--vkui--color_separator_primary2x)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.vkuiSeparator{color:#bebfc1;color:var(--vkui--color_separator_primary3x)}}.vkuiSeparator__in{background:currentColor;height:1px;height:var(--vkui_internal--thin_border);transform-origin:center top}.vkuiSeparator--padded .vkuiSeparator__in{margin-left:16px;margin-left:var(--vkui--size_base_padding_horizontal--regular);margin-right:16px;margin-right:var(--vkui--size_base_padding_horizontal--regular)}.vkuiInternalModalPage--sizeX-regular .vkuiSeparator--padded{padding-left:8px;padding-right:8px}@media (min-width:768px){.vkuiInternalModalPage--sizeX-none .vkuiSeparator--padded{padding-left:8px;padding-right:8px}}
+.vkuiSeparator{color:#d7d8d9;color:var(--vkui--color_separator_primary)}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.vkuiSeparator{color:#cbcccd;color:var(--vkui--color_separator_primary2x)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.vkuiSeparator{color:#bebfc1;color:var(--vkui--color_separator_primary3x)}}.vkuiSeparator__in{background:currentColor;border:none;color:inherit;height:1px;height:var(--vkui_internal--thin_border);margin:0;transform-origin:center top}.vkuiSeparator--padded .vkuiSeparator__in{margin-left:16px;margin-left:var(--vkui--size_base_padding_horizontal--regular);margin-right:16px;margin-right:var(--vkui--size_base_padding_horizontal--regular)}.vkuiInternalModalPage--sizeX-regular .vkuiSeparator--padded{padding-left:8px;padding-right:8px}@media (min-width:768px){.vkuiInternalModalPage--sizeX-none .vkuiSeparator--padded{padding-left:8px;padding-right:8px}}

package/dist/cssm/components/Spacing/Spacing.js

@@ -11,7 +11,6 @@ import styles from './Spacing.module.css';
     };
     return /*#__PURE__*/ React.createElement("div", {
         ...restProps,
-        "aria-hidden": true,
         className: classNames(className, styles['Spacing']),
         style: style
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number;\n  children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 8, style: styleProp, className, ...restProps }: SpacingProps) => {\n  const style: React.CSSProperties = {\n    height: size,\n    padding: `${size / 2}px 0`,\n    ...styleProp,\n  };\n\n  return (\n    <div\n      {...restProps}\n      aria-hidden\n      className={classNames(className, styles['Spacing'])}\n      style={style}\n    />\n  );\n};\n"],"names":["React","classNames","styles","Spacing","size","style","styleProp","className","restProps","height","padding","div","aria-hidden"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,uBAAuB;AAU1C;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,MAAO,EAAC,EAAEC,OAAOC,UAAS,EAAEC,UAAS,EAAE,GAAGC,WAAyB,GAAK;IAChG,MAAMH,QAA6B;QACjCI,QAAQL;QACRM,SAAS,CAAC,EAAEN,OAAO,EAAE,IAAI,CAAC;QAC1B,GAAGE,SAAS;IACd;IAEA,qBACE,oBAACK;QACE,GAAGH,SAAS;QACbI,eAAAA,IAAW;QACXL,WAAWN,WAAWM,WAAWL,MAAM,CAAC,UAAU;QAClDG,OAAOA;;AAGb,EAAE"}
+{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number;\n  children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 8, style: styleProp, className, ...restProps }: SpacingProps) => {\n  const style: React.CSSProperties = {\n    height: size,\n    padding: `${size / 2}px 0`,\n    ...styleProp,\n  };\n\n  return <div {...restProps} className={classNames(className, styles['Spacing'])} style={style} />;\n};\n"],"names":["React","classNames","styles","Spacing","size","style","styleProp","className","restProps","height","padding","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,uBAAuB;AAU1C;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,MAAO,EAAC,EAAEC,OAAOC,UAAS,EAAEC,UAAS,EAAE,GAAGC,WAAyB,GAAK;IAChG,MAAMH,QAA6B;QACjCI,QAAQL;QACRM,SAAS,CAAC,EAAEN,OAAO,EAAE,IAAI,CAAC;QAC1B,GAAGE,SAAS;IACd;IAEA,qBAAO,oBAACK;QAAK,GAAGH,SAAS;QAAED,WAAWN,WAAWM,WAAWL,MAAM,CAAC,UAAU;QAAGG,OAAOA;;AACzF,EAAE"}

package/dist/cssm/components/TabbarItem/TabbarItem.js

@@ -12,8 +12,8 @@ const warn = warnOnce('TabbarItem');
  */ export const TabbarItem = ({ children , selected , indicator , text , href , Component =href ? 'a' : 'button' , disabled , className , ...restProps })=>{
     const platform = usePlatform();
     if (process.env.NODE_ENV === 'development') {
-        const isAccessible = !text && (!restProps['aria-label'] || !restProps['aria-labelledby']);
-        if (!isAccessible) {
+        const hasAccessibleName = text || restProps['aria-label'] || restProps['aria-labelledby'];
+        if (!hasAccessibleName) {
             warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');
         }
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  selected?: boolean;\n  /**\n   * Текст рядом с иконкой\n   */\n  text?: React.ReactNode;\n  /**\n   * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n   */\n  indicator?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabbarItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  text,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  className,\n  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development') {\n    const isAccessible = !text && (!restProps['aria-label'] || !restProps['aria-labelledby']);\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Component\n      {...restProps}\n      disabled={disabled}\n      href={href}\n      className={classNames(\n        styles['TabbarItem'],\n        platform === Platform.IOS && styles['TabbarItem--ios'],\n        platform === Platform.ANDROID && styles['TabbarItem--android'],\n        selected && styles['TabbarItem--selected'],\n        !!text && styles['TabbarItem--text'],\n        className,\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        Component=\"div\"\n        disabled={disabled}\n        activeMode={\n          platform === Platform.IOS ? styles['TabbarItem__tappable--active'] : 'background'\n        }\n        activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n        hasHover={false}\n        className={styles['TabbarItem__tappable']}\n      />\n      <div className={styles['TabbarItem__in']}>\n        <div className={styles['TabbarItem__icon']}>\n          {children}\n          <div className={styles['TabbarItem__label']}>{hasReactNode(indicator) && indicator}</div>\n        </div>\n        {text && (\n          <Footnote Component=\"div\" className={styles['TabbarItem__text']} weight=\"2\">\n            {text}\n          </Footnote>\n        )}\n      </div>\n    </Component>\n  );\n};\n"],"names":["React","classNames","hasReactNode","usePlatform","Platform","COMMON_WARNINGS","warnOnce","Tappable","Footnote","styles","warn","TabbarItem","children","selected","indicator","text","href","Component","disabled","className","restProps","platform","process","env","NODE_ENV","isAccessible","a11y","IOS","ANDROID","role","activeMode","activeEffectDelay","hasHover","div","weight"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,eAAe,EAAEC,QAAQ,QAAQ,qBAAqB;AAE/D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,0BAA0B;AAiB7C,MAAMC,OAAOJ,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMK,aAAa,CAAC,EACzBC,SAAQ,EACRC,SAAQ,EACRC,UAAS,EACTC,KAAI,EACJC,KAAI,EACJC,WAAYD,OAAO,MAAM,QAAQ,CAAA,EACjCE,SAAQ,EACRC,UAAS,EACT,GAAGC,WACa,GAAK;IACrB,MAAMC,WAAWlB;IAEjB,IAAImB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,eAAe,CAACV,QAAS,CAAA,CAACK,SAAS,CAAC,aAAa,IAAI,CAACA,SAAS,CAAC,kBAAkB,AAAD;QAEvF,IAAI,CAACK,cAAc;YACjBf,KAAKL,gBAAgBqB,IAAI,CAACT,cAAc,MAAM,cAAc,aAAa,CAAC,EAAE;QAC9E,CAAC;IACH,CAAC;IAED,qBACE,oBAACA;QACE,GAAGG,SAAS;QACbF,UAAUA;QACVF,MAAMA;QACNG,WAAWlB,WACTQ,MAAM,CAAC,aAAa,EACpBY,aAAajB,SAASuB,GAAG,IAAIlB,MAAM,CAAC,kBAAkB,EACtDY,aAAajB,SAASwB,OAAO,IAAInB,MAAM,CAAC,sBAAsB,EAC9DI,YAAYJ,MAAM,CAAC,uBAAuB,EAC1C,CAAC,CAACM,QAAQN,MAAM,CAAC,mBAAmB,EACpCU;qBAGF,oBAACZ;QACCsB,MAAK;QACLZ,WAAU;QACVC,UAAUA;QACVY,YACET,aAAajB,SAASuB,GAAG,GAAGlB,MAAM,CAAC,+BAA+B,GAAG,YAAY;QAEnFsB,mBAAmBV,aAAajB,SAASuB,GAAG,GAAG,IAAI,GAAG;QACtDK,UAAU,KAAK;QACfb,WAAWV,MAAM,CAAC,uBAAuB;sBAE3C,oBAACwB;QAAId,WAAWV,MAAM,CAAC,iBAAiB;qBACtC,oBAACwB;QAAId,WAAWV,MAAM,CAAC,mBAAmB;OACvCG,wBACD,oBAACqB;QAAId,WAAWV,MAAM,CAAC,oBAAoB;OAAGP,aAAaY,cAAcA,aAE1EC,sBACC,oBAACP;QAASS,WAAU;QAAME,WAAWV,MAAM,CAAC,mBAAmB;QAAEyB,QAAO;OACrEnB;AAMb,EAAE"}
+{"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  selected?: boolean;\n  /**\n   * Текст рядом с иконкой\n   */\n  text?: React.ReactNode;\n  /**\n   * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n   */\n  indicator?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabbarItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  text,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  className,\n  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = text || restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!hasAccessibleName) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Component\n      {...restProps}\n      disabled={disabled}\n      href={href}\n      className={classNames(\n        styles['TabbarItem'],\n        platform === Platform.IOS && styles['TabbarItem--ios'],\n        platform === Platform.ANDROID && styles['TabbarItem--android'],\n        selected && styles['TabbarItem--selected'],\n        !!text && styles['TabbarItem--text'],\n        className,\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        Component=\"div\"\n        disabled={disabled}\n        activeMode={\n          platform === Platform.IOS ? styles['TabbarItem__tappable--active'] : 'background'\n        }\n        activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n        hasHover={false}\n        className={styles['TabbarItem__tappable']}\n      />\n      <div className={styles['TabbarItem__in']}>\n        <div className={styles['TabbarItem__icon']}>\n          {children}\n          <div className={styles['TabbarItem__label']}>{hasReactNode(indicator) && indicator}</div>\n        </div>\n        {text && (\n          <Footnote Component=\"div\" className={styles['TabbarItem__text']} weight=\"2\">\n            {text}\n          </Footnote>\n        )}\n      </div>\n    </Component>\n  );\n};\n"],"names":["React","classNames","hasReactNode","usePlatform","Platform","COMMON_WARNINGS","warnOnce","Tappable","Footnote","styles","warn","TabbarItem","children","selected","indicator","text","href","Component","disabled","className","restProps","platform","process","env","NODE_ENV","hasAccessibleName","a11y","IOS","ANDROID","role","activeMode","activeEffectDelay","hasHover","div","weight"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,eAAe,EAAEC,QAAQ,QAAQ,qBAAqB;AAE/D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,0BAA0B;AAiB7C,MAAMC,OAAOJ,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMK,aAAa,CAAC,EACzBC,SAAQ,EACRC,SAAQ,EACRC,UAAS,EACTC,KAAI,EACJC,KAAI,EACJC,WAAYD,OAAO,MAAM,QAAQ,CAAA,EACjCE,SAAQ,EACRC,UAAS,EACT,GAAGC,WACa,GAAK;IACrB,MAAMC,WAAWlB;IAEjB,IAAImB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,oBAAoBV,QAAQK,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAEzF,IAAI,CAACK,mBAAmB;YACtBf,KAAKL,gBAAgBqB,IAAI,CAACT,cAAc,MAAM,cAAc,aAAa,CAAC,EAAE;QAC9E,CAAC;IACH,CAAC;IAED,qBACE,oBAACA;QACE,GAAGG,SAAS;QACbF,UAAUA;QACVF,MAAMA;QACNG,WAAWlB,WACTQ,MAAM,CAAC,aAAa,EACpBY,aAAajB,SAASuB,GAAG,IAAIlB,MAAM,CAAC,kBAAkB,EACtDY,aAAajB,SAASwB,OAAO,IAAInB,MAAM,CAAC,sBAAsB,EAC9DI,YAAYJ,MAAM,CAAC,uBAAuB,EAC1C,CAAC,CAACM,QAAQN,MAAM,CAAC,mBAAmB,EACpCU;qBAGF,oBAACZ;QACCsB,MAAK;QACLZ,WAAU;QACVC,UAAUA;QACVY,YACET,aAAajB,SAASuB,GAAG,GAAGlB,MAAM,CAAC,+BAA+B,GAAG,YAAY;QAEnFsB,mBAAmBV,aAAajB,SAASuB,GAAG,GAAG,IAAI,GAAG;QACtDK,UAAU,KAAK;QACfb,WAAWV,MAAM,CAAC,uBAAuB;sBAE3C,oBAACwB;QAAId,WAAWV,MAAM,CAAC,iBAAiB;qBACtC,oBAACwB;QAAId,WAAWV,MAAM,CAAC,mBAAmB;OACvCG,wBACD,oBAACqB;QAAId,WAAWV,MAAM,CAAC,oBAAoB;OAAGP,aAAaY,cAAcA,aAE1EC,sBACC,oBAACP;QAASS,WAAU;QAAME,WAAWV,MAAM,CAAC,mBAAmB;QAAEyB,QAAO;OACrEnB;AAMb,EAAE"}

package/dist/cssm/components/Tappable/Tappable.js

@@ -203,7 +203,7 @@ function useActivity(hasActive, stopDelay) {
         const activeDuration = duration - ACTIVE_DELAY;
         stop(activeDuration >= 100 ? 0 : activeEffectDelay - activeDuration);
     }
-    const classes = classNames(className, styles['Tappable'], 'vkuiInternalTappable', platform === Platform.IOS && styles['Tappable--ios'], sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX], hasHoverContext && styles['Tappable--hover-has'], hasActive && styles['Tappable--hasActive'], hasHover && hovered && !isPresetHoverMode && hoverMode, hasActive && active && !isPresetActiveMode && activeMode, focusVisible && !isPresetFocusVisibleMode && focusVisibleMode, hasHover && hovered && isPresetHoverMode && ({
+    const classes = classNames(className, styles['Tappable'], 'vkuiInternalTappable', platform === Platform.IOS && styles['Tappable--ios'], sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX], hasHover && styles['Tappable--hasHover'], hasActive && styles['Tappable--hasActive'], hasHover && hovered && !isPresetHoverMode && hoverMode, hasActive && active && !isPresetActiveMode && activeMode, focusVisible && !isPresetFocusVisibleMode && focusVisibleMode, hasHover && hovered && isPresetHoverMode && ({
         background: styles['Tappable--hover-background'],
         opacity: styles['Tappable--hover-opacity']
     })[hoverMode], hasActive && active && isPresetActiveMode && ({

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport mitt from 'mitt';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityHasHover } from '../../hooks/useAdaptivityHasHover';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { shouldTriggerClickOnEnterOrSpace } from '../../lib/accessibility';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { getOffsetRect } from '../../lib/offset';\nimport { Platform } from '../../lib/platform';\nimport { coordX, coordY } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AnchorHTMLAttributesOnly, HasComponent, HasRootRef } from '../../types';\nimport { FocusVisible, FocusVisibleMode } from '../FocusVisible/FocusVisible';\nimport { Touch, TouchEvent, TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Tappable--sizeX-none'],\n  compact: styles['Tappable--sizeX-compact'],\n};\n\ntype StateMode = 'opacity' | 'background';\n\nconst WAVE_LIVE = 225;\n\nexport type TappableElementProps = Omit<\n  React.AllHTMLAttributes<HTMLElement>,\n  | 'onTouchStart'\n  | 'onTouchMove'\n  | 'onTouchEnd'\n  | 'onTouchCancel'\n  | 'onMouseDown'\n  | 'onMouseMove'\n  | 'onMouseUp'\n  | 'onMouseLeave'\n> &\n  AnchorHTMLAttributesOnly; // В AllHTMLAttributes не хватает типов для ссылок\n\nexport interface TappableProps\n  extends TappableElementProps,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    Pick<TouchProps, 'onStart' | 'onEnd' | 'onMove'> {\n  /**\n   * Длительность показа active-состояния\n   */\n  activeEffectDelay?: number;\n  stopPropagation?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на hover-состояние\n   */\n  hasHover?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на active-состояние\n   */\n  hasActive?: boolean;\n  /**\n   * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active\n   */\n  activeMode?: StateMode | string;\n  /**\n   * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover\n   */\n  hoverMode?: StateMode | string;\n  /**\n   * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible\n   */\n  focusVisibleMode?: FocusVisibleMode | string;\n  children?: React.ReactNode;\n  onEnter?(outputEvent: MouseEvent): void;\n  onLeave?(outputEvent: MouseEvent): void;\n}\n\ninterface Wave {\n  x: number;\n  y: number;\n  id: number;\n}\n\nexport interface RootComponentProps extends TouchProps {\n  ref?: React.Ref<HTMLElement>;\n}\n\nexport const ACTIVE_DELAY = 70;\nexport const ACTIVE_EFFECT_DELAY = 600;\n\nconst activeBus = mitt<{ active: string }>();\nconst TapState = { none: 0, pending: 1, active: 2, exiting: 3 } as const;\n\ntype TappableContextInterface = { onHoverChange: (s: boolean) => void };\nconst TappableContext = React.createContext<TappableContextInterface>({\n  onHoverChange: noop,\n});\n\nfunction isPresetStateMode(stateMode: StateMode | string): stateMode is StateMode {\n  switch (stateMode) {\n    case 'opacity':\n    case 'background':\n      return true;\n    default:\n      return false;\n  }\n}\n\nfunction useActivity(hasActive: boolean, stopDelay: number) {\n  const id = React.useMemo(() => Math.round(Math.random() * 1e8).toString(16), []);\n\n  const [activity, setActivity] = React.useState<(typeof TapState)[keyof typeof TapState]>(\n    TapState.none,\n  );\n  const _stop = () => setActivity(TapState.none);\n  const start = () => hasActive && setActivity(TapState.active);\n  const delayStart = () => {\n    hasActive && setActivity(TapState.pending);\n  };\n\n  const activeTimeout = useTimeout(start, ACTIVE_DELAY);\n  const stopTimeout = useTimeout(_stop, stopDelay);\n\n  useIsomorphicLayoutEffect(() => {\n    if (activity === TapState.pending) {\n      activeTimeout.set();\n      return activeTimeout.clear;\n    }\n    if (activity === TapState.exiting) {\n      return stopTimeout.clear;\n    }\n    if (activity === TapState.active) {\n      activeBus.emit('active', id);\n    }\n    return noop;\n  }, [activity]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (activity === TapState.none) {\n      return noop;\n    }\n    const onActiveChange = (activeId: string) => {\n      activeId !== id && _stop();\n    };\n    activeBus.on('active', onActiveChange);\n    return () => activeBus.off('active', onActiveChange);\n  }, [activity === TapState.none]);\n\n  useIsomorphicLayoutEffect(() => {\n    !hasActive && _stop();\n  }, [hasActive]);\n\n  const stop = (delay?: number) => {\n    if (delay) {\n      setActivity(TapState.exiting);\n      return stopTimeout.set(delay);\n    }\n    _stop();\n  };\n\n  return [activity, { delayStart, start, stop }] as const;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tappable\n */\nexport const Tappable = ({\n  children,\n  Component,\n  onClick,\n  onKeyDown: _onKeyDown,\n  activeEffectDelay = ACTIVE_EFFECT_DELAY,\n  stopPropagation = false,\n  getRootRef,\n  hasHover: _hasHover = true,\n  hoverMode = 'background',\n  hasActive: _hasActive = true,\n  activeMode = 'background',\n  focusVisibleMode = 'inside',\n  onEnter,\n  onLeave,\n  className,\n  ...props\n}: TappableProps) => {\n  Component = Component || ((props.href ? 'a' : 'div') as React.ElementType);\n\n  const { onHoverChange } = React.useContext(TappableContext);\n  const insideTouchRoot = React.useContext(TouchRootContext);\n  const platform = usePlatform();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const { sizeX = 'none' } = useAdaptivity();\n  const hasPointerContext = useAdaptivityHasPointer();\n  const hasHoverContext = useAdaptivityHasHover();\n\n  const [clicks, setClicks] = React.useState<Wave[]>([]);\n  const [childHover, setChildHover] = React.useState(false);\n  const {\n    value: _hovered,\n    setTrue: setHoveredTrue,\n    setFalse: setHoveredFalse,\n  } = useBooleanState(false);\n\n  const hovered = _hovered && !props.disabled;\n  const hasActive = _hasActive && !childHover && !props.disabled;\n  const hasHover = hasHoverContext && _hasHover && !childHover;\n  const isCustomElement =\n    Component !== 'a' && Component !== 'button' && Component !== 'label' && !props.contentEditable;\n  const isPresetHoverMode = isPresetStateMode(hoverMode);\n  const isPresetActiveMode = isPresetStateMode(activeMode);\n  const isPresetFocusVisibleMode = ['inside', 'outside'].includes(focusVisibleMode);\n\n  const [activity, { start, stop, delayStart }] = useActivity(hasActive, activeEffectDelay);\n  const active = activity === TapState.active || activity === TapState.exiting;\n\n  const containerRef = useExternRef(getRootRef);\n\n  // hover propagation\n  const childContext = React.useRef({ onHoverChange: setChildHover }).current;\n  useIsomorphicLayoutEffect(() => {\n    if (!hovered) {\n      return noop;\n    }\n    onHoverChange(true);\n    return () => onHoverChange(false);\n  }, [hovered]);\n\n  /*\n   * [a11y]\n   * Обрабатывает событие onkeydown\n   * для кастомных доступных элементов:\n   * - role=\"link\" (активация по Enter)\n   * - role=\"button\" (активация по Space и Enter)\n   */\n  function onKeyDown(e: React.KeyboardEvent<HTMLElement>) {\n    if (isCustomElement && shouldTriggerClickOnEnterOrSpace(e)) {\n      e.preventDefault();\n      containerRef.current?.click();\n    }\n  }\n\n  const needWaves =\n    platform === Platform.ANDROID && !hasPointerContext && hasActive && activeMode === 'background';\n\n  const clearClicks = useTimeout(() => setClicks([]), WAVE_LIVE);\n\n  function addClick(x: number, y: number) {\n    const dateNow = Date.now();\n    const filteredClicks = clicks.filter((click) => click.id + WAVE_LIVE > dateNow);\n\n    setClicks([...filteredClicks, { x, y, id: dateNow }]);\n    clearClicks.set();\n  }\n\n  function onStart({ originalEvent }: TouchEvent) {\n    if (hasActive) {\n      if (originalEvent.touches && originalEvent.touches.length > 1) {\n        // r сожалению я так и не понял, что это делает и можно ли упихнуть его в Touch\n        return stop();\n      }\n\n      if (needWaves) {\n        const { top, left } = getOffsetRect(containerRef.current);\n        const x = coordX(originalEvent) - (left ?? 0);\n        const y = coordY(originalEvent) - (top ?? 0);\n        addClick(x, y);\n      }\n\n      delayStart();\n    }\n  }\n\n  function onMove({ isSlide }: TouchEvent) {\n    if (isSlide) {\n      stop();\n    }\n  }\n\n  function onEnd({ duration }: TouchEvent) {\n    if (activity === TapState.none) {\n      return;\n    }\n    if (activity === TapState.pending) {\n      // активировать при коротком тапе\n      start();\n    }\n\n    // отключить без задержки при длинном тапе\n    const activeDuration = duration - ACTIVE_DELAY;\n    stop(activeDuration >= 100 ? 0 : activeEffectDelay - activeDuration);\n  }\n\n  const classes = classNames(\n    className,\n    styles['Tappable'],\n    'vkuiInternalTappable',\n    platform === Platform.IOS && styles['Tappable--ios'],\n    sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n    hasHoverContext && styles['Tappable--hover-has'],\n    hasActive && styles['Tappable--hasActive'],\n    hasHover && hovered && !isPresetHoverMode && hoverMode,\n    hasActive && active && !isPresetActiveMode && activeMode,\n    focusVisible && !isPresetFocusVisibleMode && focusVisibleMode,\n    hasHover &&\n      hovered &&\n      isPresetHoverMode &&\n      {\n        background: styles['Tappable--hover-background'],\n        opacity: styles['Tappable--hover-opacity'],\n      }[hoverMode],\n    hasActive &&\n      active &&\n      isPresetActiveMode &&\n      {\n        background: styles['Tappable--active-background'],\n        opacity: styles['Tappable--active-opacity'],\n      }[activeMode],\n    focusVisible && styles['Tappable--focus-visible'],\n  );\n\n  const handlers: RootComponentProps = {\n    onStart: callMultiple(onStart, props.onStart),\n    onMove: callMultiple(onMove, props.onMove),\n    onEnd: callMultiple(onEnd, props.onEnd),\n    onClick,\n    onKeyDown: callMultiple(onKeyDown, _onKeyDown),\n  };\n  const role = props.href ? 'link' : 'button';\n\n  return (\n    <Touch\n      onEnter={callMultiple(setHoveredTrue, onEnter)}\n      onLeave={callMultiple(setHoveredFalse, onLeave)}\n      type={Component === 'button' ? 'button' : undefined}\n      tabIndex={isCustomElement && !props.disabled ? 0 : undefined}\n      role={isCustomElement ? role : undefined}\n      aria-disabled={isCustomElement ? props.disabled : undefined}\n      stopPropagation={stopPropagation && !insideTouchRoot && !props.disabled}\n      {...props}\n      slideThreshold={20}\n      usePointerHover\n      className={classes}\n      Component={Component}\n      getRootRef={containerRef}\n      onBlur={callMultiple(onBlur, props.onBlur)}\n      onFocus={callMultiple(onFocus, props.onFocus)}\n      {...(props.disabled ? {} : handlers)}\n    >\n      <TappableContext.Provider value={childContext}>{children}</TappableContext.Provider>\n      {needWaves && (\n        <span aria-hidden className={styles.Tappable__waves}>\n          {clicks.map((wave) => (\n            <span\n              key={wave.id}\n              className={styles.Tappable__wave}\n              style={{ top: wave.y, left: wave.x }}\n            />\n          ))}\n        </span>\n      )}\n      {((hasHover && hoverMode === 'background') || (hasActive && activeMode === 'background')) && (\n        <span aria-hidden className={styles.Tappable__stateLayer} />\n      )}\n      {!props.disabled && isPresetFocusVisibleMode && (\n        <FocusVisible mode={focusVisibleMode as FocusVisibleMode} />\n      )}\n    </Touch>\n  );\n};\n"],"names":["React","classNames","noop","mitt","useAdaptivity","useAdaptivityHasHover","useAdaptivityHasPointer","useBooleanState","useExternRef","useFocusVisible","usePlatform","useTimeout","shouldTriggerClickOnEnterOrSpace","SizeType","callMultiple","getOffsetRect","Platform","coordX","coordY","useIsomorphicLayoutEffect","FocusVisible","Touch","TouchRootContext","styles","sizeXClassNames","none","compact","WAVE_LIVE","ACTIVE_DELAY","ACTIVE_EFFECT_DELAY","activeBus","TapState","pending","active","exiting","TappableContext","createContext","onHoverChange","isPresetStateMode","stateMode","useActivity","hasActive","stopDelay","id","useMemo","Math","round","random","toString","activity","setActivity","useState","_stop","start","delayStart","activeTimeout","stopTimeout","set","clear","emit","onActiveChange","activeId","on","off","stop","delay","Tappable","children","Component","onClick","onKeyDown","_onKeyDown","activeEffectDelay","stopPropagation","getRootRef","hasHover","_hasHover","hoverMode","_hasActive","activeMode","focusVisibleMode","onEnter","onLeave","className","props","href","useContext","insideTouchRoot","platform","focusVisible","onBlur","onFocus","sizeX","hasPointerContext","hasHoverContext","clicks","setClicks","childHover","setChildHover","value","_hovered","setTrue","setHoveredTrue","setFalse","setHoveredFalse","hovered","disabled","isCustomElement","contentEditable","isPresetHoverMode","isPresetActiveMode","isPresetFocusVisibleMode","includes","containerRef","childContext","useRef","current","e","preventDefault","click","needWaves","ANDROID","clearClicks","addClick","x","y","dateNow","Date","now","filteredClicks","filter","onStart","originalEvent","touches","length","top","left","onMove","isSlide","onEnd","duration","activeDuration","classes","IOS","REGULAR","background","opacity","handlers","role","type","undefined","tabIndex","aria-disabled","slideThreshold","usePointerHover","Provider","span","aria-hidden","Tappable__waves","map","wave","key","Tappable__wave","style","Tappable__stateLayer","mode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,OAAOC,UAAU,OAAO;AACxB,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,qBAAqB,QAAQ,oCAAoC;AAC1E,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,gCAAgC,QAAQ,0BAA0B;AAC3E,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,MAAM,EAAEC,MAAM,QAAQ,kBAAkB;AACjD,SAASC,yBAAyB,QAAQ,sCAAsC;AAEhF,SAASC,YAAY,QAA0B,+BAA+B;AAC9E,SAASC,KAAK,QAAgC,iBAAiB;AAC/D,OAAOC,sBAAsB,wBAAwB;AACrD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,uBAAuB;IACpCG,SAASH,MAAM,CAAC,0BAA0B;AAC5C;AAIA,MAAMI,YAAY;AA4DlB,OAAO,MAAMC,eAAe,GAAG;AAC/B,OAAO,MAAMC,sBAAsB,IAAI;AAEvC,MAAMC,YAAY3B;AAClB,MAAM4B,WAAW;IAAEN,MAAM;IAAGO,SAAS;IAAGC,QAAQ;IAAGC,SAAS;AAAE;AAG9D,MAAMC,gCAAkBnC,MAAMoC,aAAa,CAA2B;IACpEC,eAAenC;AACjB;AAEA,SAASoC,kBAAkBC,SAA6B,EAA0B;IAChF,OAAQA;QACN,KAAK;QACL,KAAK;YACH,OAAO,IAAI;QACb;YACE,OAAO,KAAK;IAChB;AACF;AAEA,SAASC,YAAYC,SAAkB,EAAEC,SAAiB,EAAE;IAC1D,MAAMC,KAAK3C,MAAM4C,OAAO,CAAC,IAAMC,KAAKC,KAAK,CAACD,KAAKE,MAAM,KAAK,KAAKC,QAAQ,CAAC,KAAK,EAAE;IAE/E,MAAM,CAACC,UAAUC,YAAY,GAAGlD,MAAMmD,QAAQ,CAC5CpB,SAASN,IAAI;IAEf,MAAM2B,QAAQ,IAAMF,YAAYnB,SAASN,IAAI;IAC7C,MAAM4B,QAAQ,IAAMZ,aAAaS,YAAYnB,SAASE,MAAM;IAC5D,MAAMqB,aAAa,IAAM;QACvBb,aAAaS,YAAYnB,SAASC,OAAO;IAC3C;IAEA,MAAMuB,gBAAgB5C,WAAW0C,OAAOzB;IACxC,MAAM4B,cAAc7C,WAAWyC,OAAOV;IAEtCvB,0BAA0B,IAAM;QAC9B,IAAI8B,aAAalB,SAASC,OAAO,EAAE;YACjCuB,cAAcE,GAAG;YACjB,OAAOF,cAAcG,KAAK;QAC5B,CAAC;QACD,IAAIT,aAAalB,SAASG,OAAO,EAAE;YACjC,OAAOsB,YAAYE,KAAK;QAC1B,CAAC;QACD,IAAIT,aAAalB,SAASE,MAAM,EAAE;YAChCH,UAAU6B,IAAI,CAAC,UAAUhB;QAC3B,CAAC;QACD,OAAOzC;IACT,GAAG;QAAC+C;KAAS;IAEb9B,0BAA0B,IAAM;QAC9B,IAAI8B,aAAalB,SAASN,IAAI,EAAE;YAC9B,OAAOvB;QACT,CAAC;QACD,MAAM0D,iBAAiB,CAACC,WAAqB;YAC3CA,aAAalB,MAAMS;QACrB;QACAtB,UAAUgC,EAAE,CAAC,UAAUF;QACvB,OAAO,IAAM9B,UAAUiC,GAAG,CAAC,UAAUH;IACvC,GAAG;QAACX,aAAalB,SAASN,IAAI;KAAC;IAE/BN,0BAA0B,IAAM;QAC9B,CAACsB,aAAaW;IAChB,GAAG;QAACX;KAAU;IAEd,MAAMuB,OAAO,CAACC,QAAmB;QAC/B,IAAIA,OAAO;YACTf,YAAYnB,SAASG,OAAO;YAC5B,OAAOsB,YAAYC,GAAG,CAACQ;QACzB,CAAC;QACDb;IACF;IAEA,OAAO;QAACH;QAAU;YAAEK;YAAYD;YAAOW;QAAK;KAAE;AAChD;AAEA;;CAEC,GACD,OAAO,MAAME,WAAW,CAAC,EACvBC,SAAQ,EACRC,UAAS,EACTC,QAAO,EACPC,WAAWC,WAAU,EACrBC,mBAAoB3C,oBAAmB,EACvC4C,iBAAkB,KAAK,CAAA,EACvBC,WAAU,EACVC,UAAUC,YAAY,IAAI,CAAA,EAC1BC,WAAY,aAAY,EACxBpC,WAAWqC,aAAa,IAAI,CAAA,EAC5BC,YAAa,aAAY,EACzBC,kBAAmB,SAAQ,EAC3BC,QAAO,EACPC,QAAO,EACPC,UAAS,EACT,GAAGC,OACW,GAAK;IACnBhB,YAAYA,aAAegB,CAAAA,MAAMC,IAAI,GAAG,MAAM,KAAK,AAAD;IAElD,MAAM,EAAEhD,cAAa,EAAE,GAAGrC,MAAMsF,UAAU,CAACnD;IAC3C,MAAMoD,kBAAkBvF,MAAMsF,UAAU,CAAChE;IACzC,MAAMkE,WAAW9E;IACjB,MAAM,EAAE+E,aAAY,EAAEC,OAAM,EAAEC,QAAO,EAAE,GAAGlF;IAC1C,MAAM,EAAEmF,OAAQ,OAAM,EAAE,GAAGxF;IAC3B,MAAMyF,oBAAoBvF;IAC1B,MAAMwF,kBAAkBzF;IAExB,MAAM,CAAC0F,QAAQC,UAAU,GAAGhG,MAAMmD,QAAQ,CAAS,EAAE;IACrD,MAAM,CAAC8C,YAAYC,cAAc,GAAGlG,MAAMmD,QAAQ,CAAC,KAAK;IACxD,MAAM,EACJgD,OAAOC,SAAQ,EACfC,SAASC,eAAc,EACvBC,UAAUC,gBAAe,EAC1B,GAAGjG,gBAAgB,KAAK;IAEzB,MAAMkG,UAAUL,YAAY,CAAChB,MAAMsB,QAAQ;IAC3C,MAAMjE,YAAYqC,cAAc,CAACmB,cAAc,CAACb,MAAMsB,QAAQ;IAC9D,MAAM/B,WAAWmB,mBAAmBlB,aAAa,CAACqB;IAClD,MAAMU,kBACJvC,cAAc,OAAOA,cAAc,YAAYA,cAAc,WAAW,CAACgB,MAAMwB,eAAe;IAChG,MAAMC,oBAAoBvE,kBAAkBuC;IAC5C,MAAMiC,qBAAqBxE,kBAAkByC;IAC7C,MAAMgC,2BAA2B;QAAC;QAAU;KAAU,CAACC,QAAQ,CAAChC;IAEhE,MAAM,CAAC/B,UAAU,EAAEI,MAAK,EAAEW,KAAI,EAAEV,WAAU,EAAE,CAAC,GAAGd,YAAYC,WAAW+B;IACvE,MAAMvC,SAASgB,aAAalB,SAASE,MAAM,IAAIgB,aAAalB,SAASG,OAAO;IAE5E,MAAM+E,eAAezG,aAAakE;IAElC,oBAAoB;IACpB,MAAMwC,eAAelH,MAAMmH,MAAM,CAAC;QAAE9E,eAAe6D;IAAc,GAAGkB,OAAO;IAC3EjG,0BAA0B,IAAM;QAC9B,IAAI,CAACsF,SAAS;YACZ,OAAOvG;QACT,CAAC;QACDmC,cAAc,IAAI;QAClB,OAAO,IAAMA,cAAc,KAAK;IAClC,GAAG;QAACoE;KAAQ;IAEZ;;;;;;GAMC,GACD,SAASnC,UAAU+C,CAAmC,EAAE;QACtD,IAAIV,mBAAmB/F,iCAAiCyG,IAAI;YAC1DA,EAAEC,cAAc;YAChBL,aAAaG,OAAO,EAAEG;QACxB,CAAC;IACH;IAEA,MAAMC,YACJhC,aAAaxE,SAASyG,OAAO,IAAI,CAAC5B,qBAAqBpD,aAAasC,eAAe;IAErF,MAAM2C,cAAc/G,WAAW,IAAMqF,UAAU,EAAE,GAAGrE;IAEpD,SAASgG,SAASC,CAAS,EAAEC,CAAS,EAAE;QACtC,MAAMC,UAAUC,KAAKC,GAAG;QACxB,MAAMC,iBAAiBlC,OAAOmC,MAAM,CAAC,CAACX,QAAUA,MAAM5E,EAAE,GAAGhB,YAAYmG;QAEvE9B,UAAU;eAAIiC;YAAgB;gBAAEL;gBAAGC;gBAAGlF,IAAImF;YAAQ;SAAE;QACpDJ,YAAYjE,GAAG;IACjB;IAEA,SAAS0E,QAAQ,EAAEC,cAAa,EAAc,EAAE;QAC9C,IAAI3F,WAAW;YACb,IAAI2F,cAAcC,OAAO,IAAID,cAAcC,OAAO,CAACC,MAAM,GAAG,GAAG;gBAC7D,+EAA+E;gBAC/E,OAAOtE;YACT,CAAC;YAED,IAAIwD,WAAW;gBACb,MAAM,EAAEe,IAAG,EAAEC,KAAI,EAAE,GAAGzH,cAAckG,aAAaG,OAAO;gBACxD,MAAMQ,IAAI3G,OAAOmH,iBAAkBI,CAAAA,QAAQ,CAAA;gBAC3C,MAAMX,IAAI3G,OAAOkH,iBAAkBG,CAAAA,OAAO,CAAA;gBAC1CZ,SAASC,GAAGC;YACd,CAAC;YAEDvE;QACF,CAAC;IACH;IAEA,SAASmF,OAAO,EAAEC,QAAO,EAAc,EAAE;QACvC,IAAIA,SAAS;YACX1E;QACF,CAAC;IACH;IAEA,SAAS2E,MAAM,EAAEC,SAAQ,EAAc,EAAE;QACvC,IAAI3F,aAAalB,SAASN,IAAI,EAAE;YAC9B;QACF,CAAC;QACD,IAAIwB,aAAalB,SAASC,OAAO,EAAE;YACjC,iCAAiC;YACjCqB;QACF,CAAC;QAED,0CAA0C;QAC1C,MAAMwF,iBAAiBD,WAAWhH;QAClCoC,KAAK6E,kBAAkB,MAAM,IAAIrE,oBAAoBqE,cAAc;IACrE;IAEA,MAAMC,UAAU7I,WACdkF,WACA5D,MAAM,CAAC,WAAW,EAClB,wBACAiE,aAAaxE,SAAS+H,GAAG,IAAIxH,MAAM,CAAC,gBAAgB,EACpDqE,UAAU/E,SAASmI,OAAO,IAAIxH,eAAe,CAACoE,MAAM,EACpDE,mBAAmBvE,MAAM,CAAC,sBAAsB,EAChDkB,aAAalB,MAAM,CAAC,sBAAsB,EAC1CoD,YAAY8B,WAAW,CAACI,qBAAqBhC,WAC7CpC,aAAaR,UAAU,CAAC6E,sBAAsB/B,YAC9CU,gBAAgB,CAACsB,4BAA4B/B,kBAC7CL,YACE8B,WACAI,qBACA,CAAA;QACEoC,YAAY1H,MAAM,CAAC,6BAA6B;QAChD2H,SAAS3H,MAAM,CAAC,0BAA0B;IAC5C,CAAA,CAAC,CAACsD,UAAU,EACdpC,aACER,UACA6E,sBACA,CAAA;QACEmC,YAAY1H,MAAM,CAAC,8BAA8B;QACjD2H,SAAS3H,MAAM,CAAC,2BAA2B;IAC7C,CAAA,CAAC,CAACwD,WAAW,EACfU,gBAAgBlE,MAAM,CAAC,0BAA0B;IAGnD,MAAM4H,WAA+B;QACnChB,SAASrH,aAAaqH,SAAS/C,MAAM+C,OAAO;QAC5CM,QAAQ3H,aAAa2H,QAAQrD,MAAMqD,MAAM;QACzCE,OAAO7H,aAAa6H,OAAOvD,MAAMuD,KAAK;QACtCtE;QACAC,WAAWxD,aAAawD,WAAWC;IACrC;IACA,MAAM6E,OAAOhE,MAAMC,IAAI,GAAG,SAAS,QAAQ;IAE3C,qBACE,oBAAChE;QACC4D,SAASnE,aAAawF,gBAAgBrB;QACtCC,SAASpE,aAAa0F,iBAAiBtB;QACvCmE,MAAMjF,cAAc,WAAW,WAAWkF,SAAS;QACnDC,UAAU5C,mBAAmB,CAACvB,MAAMsB,QAAQ,GAAG,IAAI4C,SAAS;QAC5DF,MAAMzC,kBAAkByC,OAAOE,SAAS;QACxCE,iBAAe7C,kBAAkBvB,MAAMsB,QAAQ,GAAG4C,SAAS;QAC3D7E,iBAAiBA,mBAAmB,CAACc,mBAAmB,CAACH,MAAMsB,QAAQ;QACtE,GAAGtB,KAAK;QACTqE,gBAAgB;QAChBC,iBAAAA,IAAe;QACfvE,WAAW2D;QACX1E,WAAWA;QACXM,YAAYuC;QACZvB,QAAQ5E,aAAa4E,QAAQN,MAAMM,MAAM;QACzCC,SAAS7E,aAAa6E,SAASP,MAAMO,OAAO;QAC3C,GAAIP,MAAMsB,QAAQ,GAAG,CAAC,IAAIyC,QAAQ;qBAEnC,oBAAChH,gBAAgBwH,QAAQ;QAACxD,OAAOe;OAAe/C,WAC/CqD,2BACC,oBAACoC;QAAKC,eAAAA,IAAW;QAAC1E,WAAW5D,OAAOuI,eAAe;OAChD/D,OAAOgE,GAAG,CAAC,CAACC,qBACX,oBAACJ;YACCK,KAAKD,KAAKrH,EAAE;YACZwC,WAAW5D,OAAO2I,cAAc;YAChCC,OAAO;gBAAE5B,KAAKyB,KAAKnC,CAAC;gBAAEW,MAAMwB,KAAKpC,CAAC;YAAC;cAK1C,AAAC,CAAA,AAACjD,YAAYE,cAAc,gBAAkBpC,aAAasC,eAAe,YAAY,mBACrF,oBAAC6E;QAAKC,eAAAA,IAAW;QAAC1E,WAAW5D,OAAO6I,oBAAoB;QAEzD,CAAChF,MAAMsB,QAAQ,IAAIK,0CAClB,oBAAC3F;QAAaiJ,MAAMrF;;AAI5B,EAAE"}
+{"version":3,"sources":["../../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport mitt from 'mitt';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityHasHover } from '../../hooks/useAdaptivityHasHover';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { shouldTriggerClickOnEnterOrSpace } from '../../lib/accessibility';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { getOffsetRect } from '../../lib/offset';\nimport { Platform } from '../../lib/platform';\nimport { coordX, coordY } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AnchorHTMLAttributesOnly, HasComponent, HasRootRef } from '../../types';\nimport { FocusVisible, FocusVisibleMode } from '../FocusVisible/FocusVisible';\nimport { Touch, TouchEvent, TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Tappable--sizeX-none'],\n  compact: styles['Tappable--sizeX-compact'],\n};\n\ntype StateMode = 'opacity' | 'background';\n\nconst WAVE_LIVE = 225;\n\nexport type TappableElementProps = Omit<\n  React.AllHTMLAttributes<HTMLElement>,\n  | 'onTouchStart'\n  | 'onTouchMove'\n  | 'onTouchEnd'\n  | 'onTouchCancel'\n  | 'onMouseDown'\n  | 'onMouseMove'\n  | 'onMouseUp'\n  | 'onMouseLeave'\n> &\n  AnchorHTMLAttributesOnly; // В AllHTMLAttributes не хватает типов для ссылок\n\nexport interface TappableProps\n  extends TappableElementProps,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    Pick<TouchProps, 'onStart' | 'onEnd' | 'onMove'> {\n  /**\n   * Длительность показа active-состояния\n   */\n  activeEffectDelay?: number;\n  stopPropagation?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на hover-состояние\n   */\n  hasHover?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на active-состояние\n   */\n  hasActive?: boolean;\n  /**\n   * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active\n   */\n  activeMode?: StateMode | string;\n  /**\n   * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover\n   */\n  hoverMode?: StateMode | string;\n  /**\n   * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible\n   */\n  focusVisibleMode?: FocusVisibleMode | string;\n  children?: React.ReactNode;\n  onEnter?(outputEvent: MouseEvent): void;\n  onLeave?(outputEvent: MouseEvent): void;\n}\n\ninterface Wave {\n  x: number;\n  y: number;\n  id: number;\n}\n\nexport interface RootComponentProps extends TouchProps {\n  ref?: React.Ref<HTMLElement>;\n}\n\nexport const ACTIVE_DELAY = 70;\nexport const ACTIVE_EFFECT_DELAY = 600;\n\nconst activeBus = mitt<{ active: string }>();\nconst TapState = { none: 0, pending: 1, active: 2, exiting: 3 } as const;\n\ntype TappableContextInterface = { onHoverChange: (s: boolean) => void };\nconst TappableContext = React.createContext<TappableContextInterface>({\n  onHoverChange: noop,\n});\n\nfunction isPresetStateMode(stateMode: StateMode | string): stateMode is StateMode {\n  switch (stateMode) {\n    case 'opacity':\n    case 'background':\n      return true;\n    default:\n      return false;\n  }\n}\n\nfunction useActivity(hasActive: boolean, stopDelay: number) {\n  const id = React.useMemo(() => Math.round(Math.random() * 1e8).toString(16), []);\n\n  const [activity, setActivity] = React.useState<(typeof TapState)[keyof typeof TapState]>(\n    TapState.none,\n  );\n  const _stop = () => setActivity(TapState.none);\n  const start = () => hasActive && setActivity(TapState.active);\n  const delayStart = () => {\n    hasActive && setActivity(TapState.pending);\n  };\n\n  const activeTimeout = useTimeout(start, ACTIVE_DELAY);\n  const stopTimeout = useTimeout(_stop, stopDelay);\n\n  useIsomorphicLayoutEffect(() => {\n    if (activity === TapState.pending) {\n      activeTimeout.set();\n      return activeTimeout.clear;\n    }\n    if (activity === TapState.exiting) {\n      return stopTimeout.clear;\n    }\n    if (activity === TapState.active) {\n      activeBus.emit('active', id);\n    }\n    return noop;\n  }, [activity]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (activity === TapState.none) {\n      return noop;\n    }\n    const onActiveChange = (activeId: string) => {\n      activeId !== id && _stop();\n    };\n    activeBus.on('active', onActiveChange);\n    return () => activeBus.off('active', onActiveChange);\n  }, [activity === TapState.none]);\n\n  useIsomorphicLayoutEffect(() => {\n    !hasActive && _stop();\n  }, [hasActive]);\n\n  const stop = (delay?: number) => {\n    if (delay) {\n      setActivity(TapState.exiting);\n      return stopTimeout.set(delay);\n    }\n    _stop();\n  };\n\n  return [activity, { delayStart, start, stop }] as const;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tappable\n */\nexport const Tappable = ({\n  children,\n  Component,\n  onClick,\n  onKeyDown: _onKeyDown,\n  activeEffectDelay = ACTIVE_EFFECT_DELAY,\n  stopPropagation = false,\n  getRootRef,\n  hasHover: _hasHover = true,\n  hoverMode = 'background',\n  hasActive: _hasActive = true,\n  activeMode = 'background',\n  focusVisibleMode = 'inside',\n  onEnter,\n  onLeave,\n  className,\n  ...props\n}: TappableProps) => {\n  Component = Component || ((props.href ? 'a' : 'div') as React.ElementType);\n\n  const { onHoverChange } = React.useContext(TappableContext);\n  const insideTouchRoot = React.useContext(TouchRootContext);\n  const platform = usePlatform();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const { sizeX = 'none' } = useAdaptivity();\n  const hasPointerContext = useAdaptivityHasPointer();\n  const hasHoverContext = useAdaptivityHasHover();\n\n  const [clicks, setClicks] = React.useState<Wave[]>([]);\n  const [childHover, setChildHover] = React.useState(false);\n  const {\n    value: _hovered,\n    setTrue: setHoveredTrue,\n    setFalse: setHoveredFalse,\n  } = useBooleanState(false);\n\n  const hovered = _hovered && !props.disabled;\n  const hasActive = _hasActive && !childHover && !props.disabled;\n  const hasHover = hasHoverContext && _hasHover && !childHover;\n  const isCustomElement =\n    Component !== 'a' && Component !== 'button' && Component !== 'label' && !props.contentEditable;\n  const isPresetHoverMode = isPresetStateMode(hoverMode);\n  const isPresetActiveMode = isPresetStateMode(activeMode);\n  const isPresetFocusVisibleMode = ['inside', 'outside'].includes(focusVisibleMode);\n\n  const [activity, { start, stop, delayStart }] = useActivity(hasActive, activeEffectDelay);\n  const active = activity === TapState.active || activity === TapState.exiting;\n\n  const containerRef = useExternRef(getRootRef);\n\n  // hover propagation\n  const childContext = React.useRef({ onHoverChange: setChildHover }).current;\n  useIsomorphicLayoutEffect(() => {\n    if (!hovered) {\n      return noop;\n    }\n    onHoverChange(true);\n    return () => onHoverChange(false);\n  }, [hovered]);\n\n  /*\n   * [a11y]\n   * Обрабатывает событие onkeydown\n   * для кастомных доступных элементов:\n   * - role=\"link\" (активация по Enter)\n   * - role=\"button\" (активация по Space и Enter)\n   */\n  function onKeyDown(e: React.KeyboardEvent<HTMLElement>) {\n    if (isCustomElement && shouldTriggerClickOnEnterOrSpace(e)) {\n      e.preventDefault();\n      containerRef.current?.click();\n    }\n  }\n\n  const needWaves =\n    platform === Platform.ANDROID && !hasPointerContext && hasActive && activeMode === 'background';\n\n  const clearClicks = useTimeout(() => setClicks([]), WAVE_LIVE);\n\n  function addClick(x: number, y: number) {\n    const dateNow = Date.now();\n    const filteredClicks = clicks.filter((click) => click.id + WAVE_LIVE > dateNow);\n\n    setClicks([...filteredClicks, { x, y, id: dateNow }]);\n    clearClicks.set();\n  }\n\n  function onStart({ originalEvent }: TouchEvent) {\n    if (hasActive) {\n      if (originalEvent.touches && originalEvent.touches.length > 1) {\n        // r сожалению я так и не понял, что это делает и можно ли упихнуть его в Touch\n        return stop();\n      }\n\n      if (needWaves) {\n        const { top, left } = getOffsetRect(containerRef.current);\n        const x = coordX(originalEvent) - (left ?? 0);\n        const y = coordY(originalEvent) - (top ?? 0);\n        addClick(x, y);\n      }\n\n      delayStart();\n    }\n  }\n\n  function onMove({ isSlide }: TouchEvent) {\n    if (isSlide) {\n      stop();\n    }\n  }\n\n  function onEnd({ duration }: TouchEvent) {\n    if (activity === TapState.none) {\n      return;\n    }\n    if (activity === TapState.pending) {\n      // активировать при коротком тапе\n      start();\n    }\n\n    // отключить без задержки при длинном тапе\n    const activeDuration = duration - ACTIVE_DELAY;\n    stop(activeDuration >= 100 ? 0 : activeEffectDelay - activeDuration);\n  }\n\n  const classes = classNames(\n    className,\n    styles['Tappable'],\n    'vkuiInternalTappable',\n    platform === Platform.IOS && styles['Tappable--ios'],\n    sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n    hasHover && styles['Tappable--hasHover'],\n    hasActive && styles['Tappable--hasActive'],\n    hasHover && hovered && !isPresetHoverMode && hoverMode,\n    hasActive && active && !isPresetActiveMode && activeMode,\n    focusVisible && !isPresetFocusVisibleMode && focusVisibleMode,\n    hasHover &&\n      hovered &&\n      isPresetHoverMode &&\n      {\n        background: styles['Tappable--hover-background'],\n        opacity: styles['Tappable--hover-opacity'],\n      }[hoverMode],\n    hasActive &&\n      active &&\n      isPresetActiveMode &&\n      {\n        background: styles['Tappable--active-background'],\n        opacity: styles['Tappable--active-opacity'],\n      }[activeMode],\n    focusVisible && styles['Tappable--focus-visible'],\n  );\n\n  const handlers: RootComponentProps = {\n    onStart: callMultiple(onStart, props.onStart),\n    onMove: callMultiple(onMove, props.onMove),\n    onEnd: callMultiple(onEnd, props.onEnd),\n    onClick,\n    onKeyDown: callMultiple(onKeyDown, _onKeyDown),\n  };\n  const role = props.href ? 'link' : 'button';\n\n  return (\n    <Touch\n      onEnter={callMultiple(setHoveredTrue, onEnter)}\n      onLeave={callMultiple(setHoveredFalse, onLeave)}\n      type={Component === 'button' ? 'button' : undefined}\n      tabIndex={isCustomElement && !props.disabled ? 0 : undefined}\n      role={isCustomElement ? role : undefined}\n      aria-disabled={isCustomElement ? props.disabled : undefined}\n      stopPropagation={stopPropagation && !insideTouchRoot && !props.disabled}\n      {...props}\n      slideThreshold={20}\n      usePointerHover\n      className={classes}\n      Component={Component}\n      getRootRef={containerRef}\n      onBlur={callMultiple(onBlur, props.onBlur)}\n      onFocus={callMultiple(onFocus, props.onFocus)}\n      {...(props.disabled ? {} : handlers)}\n    >\n      <TappableContext.Provider value={childContext}>{children}</TappableContext.Provider>\n      {needWaves && (\n        <span aria-hidden className={styles.Tappable__waves}>\n          {clicks.map((wave) => (\n            <span\n              key={wave.id}\n              className={styles.Tappable__wave}\n              style={{ top: wave.y, left: wave.x }}\n            />\n          ))}\n        </span>\n      )}\n      {((hasHover && hoverMode === 'background') || (hasActive && activeMode === 'background')) && (\n        <span aria-hidden className={styles.Tappable__stateLayer} />\n      )}\n      {!props.disabled && isPresetFocusVisibleMode && (\n        <FocusVisible mode={focusVisibleMode as FocusVisibleMode} />\n      )}\n    </Touch>\n  );\n};\n"],"names":["React","classNames","noop","mitt","useAdaptivity","useAdaptivityHasHover","useAdaptivityHasPointer","useBooleanState","useExternRef","useFocusVisible","usePlatform","useTimeout","shouldTriggerClickOnEnterOrSpace","SizeType","callMultiple","getOffsetRect","Platform","coordX","coordY","useIsomorphicLayoutEffect","FocusVisible","Touch","TouchRootContext","styles","sizeXClassNames","none","compact","WAVE_LIVE","ACTIVE_DELAY","ACTIVE_EFFECT_DELAY","activeBus","TapState","pending","active","exiting","TappableContext","createContext","onHoverChange","isPresetStateMode","stateMode","useActivity","hasActive","stopDelay","id","useMemo","Math","round","random","toString","activity","setActivity","useState","_stop","start","delayStart","activeTimeout","stopTimeout","set","clear","emit","onActiveChange","activeId","on","off","stop","delay","Tappable","children","Component","onClick","onKeyDown","_onKeyDown","activeEffectDelay","stopPropagation","getRootRef","hasHover","_hasHover","hoverMode","_hasActive","activeMode","focusVisibleMode","onEnter","onLeave","className","props","href","useContext","insideTouchRoot","platform","focusVisible","onBlur","onFocus","sizeX","hasPointerContext","hasHoverContext","clicks","setClicks","childHover","setChildHover","value","_hovered","setTrue","setHoveredTrue","setFalse","setHoveredFalse","hovered","disabled","isCustomElement","contentEditable","isPresetHoverMode","isPresetActiveMode","isPresetFocusVisibleMode","includes","containerRef","childContext","useRef","current","e","preventDefault","click","needWaves","ANDROID","clearClicks","addClick","x","y","dateNow","Date","now","filteredClicks","filter","onStart","originalEvent","touches","length","top","left","onMove","isSlide","onEnd","duration","activeDuration","classes","IOS","REGULAR","background","opacity","handlers","role","type","undefined","tabIndex","aria-disabled","slideThreshold","usePointerHover","Provider","span","aria-hidden","Tappable__waves","map","wave","key","Tappable__wave","style","Tappable__stateLayer","mode"],"mappings":"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"}

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

@@ -1 +1 @@
-.vkuiTappable{-webkit-tap-highlight-color:transparent;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);cursor:default;isolation:isolate;position:relative;transition:background-color .15s ease-out,opacity .15s ease-out}.vkuiTappable>*{position:relative;z-index:1;z-index:var(--vkui_internal--z_index_tappable_element)}.vkuiTappable--hasActive,.vkuiTappable--hover-has{cursor:pointer}.vkuiTappable[aria-disabled=true],.vkuiTappable[disabled]{cursor:default}.vkuiTappable--focus-visible{outline:none}.vkuiTappable__stateLayer{border-radius:inherit;bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;transition:background-color .15s ease-out;z-index:0;z-index:var(--vkui_internal--z_index_tappable_state)}.vkuiTappable--hover-background>.vkuiTappable__stateLayer{background-color:rgba(0,16,61,.04);background-color:var(--vkui--color_transparent--hover)}.vkuiTappable--hover-opacity{opacity:.8}.vkuiTappable--active-background>.vkuiTappable__stateLayer{background-color:rgba(0,16,61,.08);background-color:var(--vkui--color_transparent--active)}.vkuiTappable--active-opacity{opacity:.7}.vkuiTappable--ios.vkuiTappable--active-background{transition:none}.vkuiTappable .vkuiTappable__waves{border-radius:inherit;bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;will-change:transform;z-index:0;z-index:var(--vkui_internal--z_index_tappable_state)}.vkuiTappable .vkuiTappable__wave{animation:vkui-animation-wave .3s cubic-bezier(.4,0,.2,1);animation:vkui-animation-wave .3s var(--vkui--animation_easing_platform);background:rgba(0,16,61,.08);background:var(--vkui--color_transparent--active);border-radius:50%;content:"";height:24px;left:0;margin:-12px 0 0 -12px;opacity:0;position:absolute;top:0;width:24px}.vkuiTappable--sizeX-compact{border-radius:0}@media (max-width:767.9px){.vkuiTappable--sizeX-none{border-radius:0}}@keyframes vkui-animation-wave{0%{opacity:1;transform:scale(1)}30%{opacity:1}to{opacity:0;transform:scale(8)}}
+.vkuiTappable{-webkit-tap-highlight-color:transparent;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);cursor:default;isolation:isolate;position:relative;transition:background-color .15s ease-out,opacity .15s ease-out}.vkuiTappable>*{position:relative;z-index:1;z-index:var(--vkui_internal--z_index_tappable_element)}.vkuiTappable--hasActive,.vkuiTappable--hasHover{cursor:pointer}.vkuiTappable[aria-disabled=true],.vkuiTappable[disabled]{cursor:default}.vkuiTappable--focus-visible{outline:none}.vkuiTappable__stateLayer{border-radius:inherit;bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;transition:background-color .15s ease-out;z-index:0;z-index:var(--vkui_internal--z_index_tappable_state)}.vkuiTappable--hover-background>.vkuiTappable__stateLayer{background-color:rgba(0,16,61,.04);background-color:var(--vkui--color_transparent--hover)}.vkuiTappable--hover-opacity{opacity:.8}.vkuiTappable--active-background>.vkuiTappable__stateLayer{background-color:rgba(0,16,61,.08);background-color:var(--vkui--color_transparent--active)}.vkuiTappable--active-opacity{opacity:.7}.vkuiTappable--ios.vkuiTappable--active-background{transition:none}.vkuiTappable .vkuiTappable__waves{border-radius:inherit;bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;will-change:transform;z-index:0;z-index:var(--vkui_internal--z_index_tappable_state)}.vkuiTappable .vkuiTappable__wave{animation:vkui-animation-wave .3s cubic-bezier(.4,0,.2,1);animation:vkui-animation-wave .3s var(--vkui--animation_easing_platform);background:rgba(0,16,61,.08);background:var(--vkui--color_transparent--active);border-radius:50%;content:"";height:24px;left:0;margin:-12px 0 0 -12px;opacity:0;position:absolute;top:0;width:24px}.vkuiTappable--sizeX-compact{border-radius:0}@media (max-width:767.9px){.vkuiTappable--sizeX-none{border-radius:0}}@keyframes vkui-animation-wave{0%{opacity:1;transform:scale(1)}30%{opacity:1}to{opacity:0;transform:scale(8)}}

package/dist/cssm/components/Typography/Caption/Caption.d.ts

@@ -1,12 +1,7 @@
-import * as React from 'react';
-import { HasComponent } from '../../../types';
-export interface CaptionProps extends React.AllHTMLAttributes<HTMLElement>, HasComponent {
-    /**
-     * Задаёт начертание шрифта отличное от стандартного.
-     */
-    weight?: '1' | '2' | '3';
+/// <reference types="react" />
+import { HasCaps, TypographyProps } from '../types';
+export interface CaptionProps extends TypographyProps, HasCaps {
     level?: '1' | '2' | '3';
-    caps?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Caption

package/dist/cssm/components/Typography/Caption/Caption.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Typography/Caption/Caption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent } from '../../../types';\nimport styles from './Caption.module.css';\n\nexport interface CaptionProps extends React.AllHTMLAttributes<HTMLElement>, HasComponent {\n  /**\n   * Задаёт начертание шрифта отличное от стандартного.\n   */\n  weight?: '1' | '2' | '3';\n  level?: '1' | '2' | '3';\n  caps?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Caption\n */\nexport const Caption = ({\n  className,\n  children,\n  weight,\n  level = '1',\n  caps,\n  Component = 'span',\n  ...restProps\n}: CaptionProps) => {\n  return (\n    <Component\n      {...restProps}\n      className={classNames(\n        className,\n        styles['Caption'],\n        caps && styles['Caption--caps'],\n        {\n          '1': styles['Caption--level-1'],\n          '2': styles['Caption--level-2'],\n          '3': styles['Caption--level-3'],\n        }[level],\n        weight &&\n          {\n            '1': styles['Caption--weight-1'],\n            '2': styles['Caption--weight-2'],\n            '3': styles['Caption--weight-3'],\n          }[weight],\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"names":["React","classNames","styles","Caption","className","children","weight","level","caps","Component","restProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,uBAAuB;AAW1C;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EACtBC,UAAS,EACTC,SAAQ,EACRC,OAAM,EACNC,OAAQ,IAAG,EACXC,KAAI,EACJC,WAAY,OAAM,EAClB,GAAGC,WACU,GAAK;IAClB,qBACE,oBAACD;QACE,GAAGC,SAAS;QACbN,WAAWH,WACTG,WACAF,MAAM,CAAC,UAAU,EACjBM,QAAQN,MAAM,CAAC,gBAAgB,EAC/B;YACE,KAAKA,MAAM,CAAC,mBAAmB;YAC/B,KAAKA,MAAM,CAAC,mBAAmB;YAC/B,KAAKA,MAAM,CAAC,mBAAmB;QACjC,CAAC,CAACK,MAAM,EACRD,UACE,CAAA;YACE,KAAKJ,MAAM,CAAC,oBAAoB;YAChC,KAAKA,MAAM,CAAC,oBAAoB;YAChC,KAAKA,MAAM,CAAC,oBAAoB;QAClC,CAAA,CAAC,CAACI,OAAO;OAGZD;AAGP,EAAE"}
+{"version":3,"sources":["../../../../../src/components/Typography/Caption/Caption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasCaps, TypographyProps } from '../types';\nimport styles from './Caption.module.css';\n\nexport interface CaptionProps extends TypographyProps, HasCaps {\n  level?: '1' | '2' | '3';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Caption\n */\nexport const Caption = ({\n  className,\n  children,\n  weight,\n  level = '1',\n  caps,\n  Component = 'span',\n  ...restProps\n}: CaptionProps) => {\n  return (\n    <Component\n      {...restProps}\n      className={classNames(\n        className,\n        styles['Caption'],\n        caps && styles['Caption--caps'],\n        {\n          '1': styles['Caption--level-1'],\n          '2': styles['Caption--level-2'],\n          '3': styles['Caption--level-3'],\n        }[level],\n        weight &&\n          {\n            '1': styles['Caption--weight-1'],\n            '2': styles['Caption--weight-2'],\n            '3': styles['Caption--weight-3'],\n          }[weight],\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"names":["React","classNames","styles","Caption","className","children","weight","level","caps","Component","restProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,uBAAuB;AAM1C;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EACtBC,UAAS,EACTC,SAAQ,EACRC,OAAM,EACNC,OAAQ,IAAG,EACXC,KAAI,EACJC,WAAY,OAAM,EAClB,GAAGC,WACU,GAAK;IAClB,qBACE,oBAACD;QACE,GAAGC,SAAS;QACbN,WAAWH,WACTG,WACAF,MAAM,CAAC,UAAU,EACjBM,QAAQN,MAAM,CAAC,gBAAgB,EAC/B;YACE,KAAKA,MAAM,CAAC,mBAAmB;YAC/B,KAAKA,MAAM,CAAC,mBAAmB;YAC/B,KAAKA,MAAM,CAAC,mBAAmB;QACjC,CAAC,CAACK,MAAM,EACRD,UACE,CAAA;YACE,KAAKJ,MAAM,CAAC,oBAAoB;YAChC,KAAKA,MAAM,CAAC,oBAAoB;YAChC,KAAKA,MAAM,CAAC,oBAAoB;QAClC,CAAA,CAAC,CAACI,OAAO;OAGZD;AAGP,EAAE"}

package/dist/cssm/components/Typography/Footnote/Footnote.d.ts

@@ -1,11 +1,6 @@
-import * as React from 'react';
-import { HasComponent } from '../../../types';
-export interface FootnoteProps extends React.AllHTMLAttributes<HTMLElement>, HasComponent {
-    /**
-     * Задаёт начертание шрифта отличное от стандартного.
-     */
-    weight?: '1' | '2' | '3';
-    caps?: boolean;
+/// <reference types="react" />
+import { HasCaps, TypographyProps } from '../types';
+export interface FootnoteProps extends TypographyProps, HasCaps {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Footnote

package/dist/cssm/components/Typography/Footnote/Footnote.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Typography/Footnote/Footnote.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent } from '../../../types';\nimport styles from './Footnote.module.css';\n\nexport interface FootnoteProps extends React.AllHTMLAttributes<HTMLElement>, HasComponent {\n  /**\n   * Задаёт начертание шрифта отличное от стандартного.\n   */\n  weight?: '1' | '2' | '3';\n  caps?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Footnote\n */\nexport const Footnote = ({\n  className,\n  children,\n  weight,\n  caps,\n  Component = 'span',\n  ...restProps\n}: FootnoteProps) => {\n  return (\n    <Component\n      {...restProps}\n      className={classNames(\n        className,\n        styles['Footnote'],\n        caps && styles['Footnote--caps'],\n        weight &&\n          {\n            '1': styles['Footnote--weight-1'],\n            '2': styles['Footnote--weight-2'],\n            '3': styles['Footnote--weight-3'],\n          }[weight],\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"names":["React","classNames","styles","Footnote","className","children","weight","caps","Component","restProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,wBAAwB;AAU3C;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,UAAS,EACTC,SAAQ,EACRC,OAAM,EACNC,KAAI,EACJC,WAAY,OAAM,EAClB,GAAGC,WACW,GAAK;IACnB,qBACE,oBAACD;QACE,GAAGC,SAAS;QACbL,WAAWH,WACTG,WACAF,MAAM,CAAC,WAAW,EAClBK,QAAQL,MAAM,CAAC,iBAAiB,EAChCI,UACE,CAAA;YACE,KAAKJ,MAAM,CAAC,qBAAqB;YACjC,KAAKA,MAAM,CAAC,qBAAqB;YACjC,KAAKA,MAAM,CAAC,qBAAqB;QACnC,CAAA,CAAC,CAACI,OAAO;OAGZD;AAGP,EAAE"}
+{"version":3,"sources":["../../../../../src/components/Typography/Footnote/Footnote.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasCaps, TypographyProps } from '../types';\nimport styles from './Footnote.module.css';\n\nexport interface FootnoteProps extends TypographyProps, HasCaps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Footnote\n */\nexport const Footnote = ({\n  className,\n  children,\n  weight,\n  caps,\n  Component = 'span',\n  ...restProps\n}: FootnoteProps) => {\n  return (\n    <Component\n      {...restProps}\n      className={classNames(\n        className,\n        styles['Footnote'],\n        caps && styles['Footnote--caps'],\n        weight &&\n          {\n            '1': styles['Footnote--weight-1'],\n            '2': styles['Footnote--weight-2'],\n            '3': styles['Footnote--weight-3'],\n          }[weight],\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"names":["React","classNames","styles","Footnote","className","children","weight","caps","Component","restProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,wBAAwB;AAI3C;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,UAAS,EACTC,SAAQ,EACRC,OAAM,EACNC,KAAI,EACJC,WAAY,OAAM,EAClB,GAAGC,WACW,GAAK;IACnB,qBACE,oBAACD;QACE,GAAGC,SAAS;QACbL,WAAWH,WACTG,WACAF,MAAM,CAAC,WAAW,EAClBK,QAAQL,MAAM,CAAC,iBAAiB,EAChCI,UACE,CAAA;YACE,KAAKJ,MAAM,CAAC,qBAAqB;YACjC,KAAKA,MAAM,CAAC,qBAAqB;YACjC,KAAKA,MAAM,CAAC,qBAAqB;QACnC,CAAA,CAAC,CAACI,OAAO;OAGZD;AAGP,EAAE"}

package/dist/cssm/components/Typography/Headline/Headline.d.ts

@@ -1,10 +1,7 @@
-import * as React from 'react';
-import { HasComponent, HasRootRef } from '../../../types';
-export interface HeadlineProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent {
-    /**
-     * Задаёт начертание шрифта отличное от стандартного.
-     */
-    weight?: '1' | '2' | '3';
+/// <reference types="react" />
+import { HasRootRef } from '../../../types';
+import { TypographyProps } from '../types';
+export interface HeadlineProps extends TypographyProps, HasRootRef<HTMLElement> {
     level?: '1' | '2';
 }
 /**

package/dist/cssm/components/Typography/Headline/Headline.js

@@ -2,20 +2,15 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../../hooks/useAdaptivity';
 import { SizeType } from '../../../lib/adaptivity';
-import { warnOnce } from '../../../lib/warnOnce';
 import styles from './Headline.module.css';
 const sizeYClassNames = {
     none: styles['Headline--sizeY-none'],
     [SizeType.COMPACT]: styles['Headline--sizeY-compact']
 };
-const warn = warnOnce('Headline');
 /**
  * @see https://vkcom.github.io/VKUI/#/Headline
  */ export const Headline = ({ className , children , weight ='3' , level ='1' , Component ='h4' , getRootRef , ...restProps })=>{
     const { sizeY ='none'  } = useAdaptivity();
-    if (process.env.NODE_ENV === 'development' && typeof Component !== 'string' && getRootRef) {
-        warn('getRootRef может использоваться только с элементами DOM', 'error');
-    }
     return /*#__PURE__*/ React.createElement(Component, {
         ...restProps,
         ref: getRootRef,