@vkontakte/vkui 7.1.3 → 7.2.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';\nimport { usePatchChildren } from '../../hooks/usePatchChildren';\nimport { animationFadeClassNames } from '../../lib/animation';\nimport {\n  type FloatingComponentProps,\n  getArrowCoordsByMiddlewareData,\n  type OnShownChange,\n  useFloatingMiddlewaresBootstrap,\n  useFloatingWithInteractions,\n  usePlacementChangeCallback,\n} from '../../lib/floating';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { type FloatingArrowProps as FloatingArrowPropsPrivate } from '../FloatingArrow/FloatingArrow';\nimport { TooltipBase, type TooltipBaseProps } from '../TooltipBase/TooltipBase';\n\ntype AllowedFloatingComponentProps = Pick<\n  FloatingComponentProps,\n  | 'arrowHeight'\n  | 'arrowPadding'\n  | 'hoverDelay'\n  | 'placement'\n  | 'offsetByMainAxis'\n  | 'offsetByCrossAxis'\n  | 'defaultShown'\n  | 'onShownChange'\n  | 'hideWhenReferenceHidden'\n  | 'children'\n  | 'zIndex'\n  | 'usePortal'\n  | 'onPlacementChange'\n  | 'disableFlipMiddleware'\n  | 'strategy'\n>;\n\ntype AllowedTooltipBaseProps = Omit<TooltipBaseProps, 'arrowProps' | 'onCloseIconClick'>;\n\n/**\n * @alias\n * @public\n */\nexport type TooltipArrowProps = Omit<\n  FloatingArrowPropsPrivate,\n  'getRootRef' | 'coords' | 'placement' | 'Icon'\n>;\n\n/**\n * @alias\n * @public\n */\nexport type TooltipOnShownChange = OnShownChange;\n\nexport interface TooltipProps extends AllowedFloatingComponentProps, AllowedTooltipBaseProps {\n  /**\n   * Передача `boolean` позволяет контролировать состояния показа и скрытия вручную. Используйте\n   * совместно с `onShownChange`.\n   *\n   * > Если нужно разово инициировать показ тултипа при первом рендере, то используйте `defaultShown`.\n   */\n  shown?: boolean;\n  /**\n   * Добавляет возможность наводить на тултип.\n   */\n  enableInteractive?: boolean;\n  /**\n   * Добавляет возможность закрыть тултип через иконку-крестик.\n   *\n   * > Работает в сочетании с `enableInteractive` или при использовании `shown` и `onShownChange`.\n   */\n  closable?: boolean;\n  /**\n   * Скрывает стрелку, указывающую на якорный элемент.\n   */\n  disableArrow?: boolean;\n  /**\n   * Отключает закрытие по клику.\n   */\n  disableCloseAfterClick?: boolean;\n  /**\n   * Отключает появление при фокусе.\n   */\n  disableTriggerOnFocus?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tooltip\n */\nexport const Tooltip = ({\n  // UseFloatingMiddlewaresBootstrapOptions\n  placement: placementProp = 'bottom',\n  arrowPadding = 10,\n  arrowHeight = 8,\n  offsetByMainAxis = 8,\n  offsetByCrossAxis = 0,\n  hideWhenReferenceHidden,\n  disableFlipMiddleware = false,\n  disableTriggerOnFocus = false,\n\n  // useFloatingWithInteractions\n  defaultShown,\n  shown: shownProp,\n  onShownChange,\n  hoverDelay = 150,\n  strategy,\n\n  // инверсированные св-ва для useFloatingWithInteractions\n  enableInteractive = false,\n  disableArrow = false,\n  disableCloseAfterClick = false,\n\n  // Reference\n  children,\n\n  // AppRootProps\n  usePortal,\n\n  // TooltipBaseProps\n  id: idProp,\n  getRootRef,\n  appearance = 'neutral',\n  style: styleProp,\n  className,\n  zIndex = 'var(--vkui--z_index_popout)',\n  closable,\n  onPlacementChange,\n  ...popperProps\n}: TooltipProps): React.ReactNode => {\n  const generatedId = React.useId();\n  const tooltipId = idProp || generatedId;\n\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n  const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({\n    placement: placementProp,\n\n    offsetByMainAxis,\n    offsetByCrossAxis,\n\n    hideWhenReferenceHidden,\n\n    arrow: !disableArrow,\n    arrowRef,\n    arrowPadding,\n    arrowHeight,\n    disableFlipMiddleware,\n  });\n  const {\n    shown,\n    willBeHide,\n    placement,\n    refs,\n    referenceProps,\n    floatingProps,\n    middlewareData,\n    onClose,\n    onEscapeKeyDown,\n  } = useFloatingWithInteractions({\n    defaultShown,\n    shown: shownProp,\n    onShownChange,\n    placement: strictPlacement,\n    trigger: disableTriggerOnFocus ? 'hover' : ['hover', 'focus'],\n    hoverDelay,\n    closeAfterClick: !disableCloseAfterClick,\n    disableInteractive: !enableInteractive,\n    middlewares,\n    strategy,\n  });\n  const tooltipRef = useExternRef<HTMLDivElement>(getRootRef, refs.setFloating);\n\n  usePlacementChangeCallback(placementProp, placement, onPlacementChange);\n\n  let tooltip: React.ReactNode = null;\n  if (shown) {\n    tooltip = (\n      <AppRootPortal usePortal={usePortal}>\n        <TooltipBase\n          {...popperProps}\n          {...floatingProps}\n          style={{\n            ...floatingProps.style,\n            zIndex,\n            ...styleProp,\n          }}\n          id={tooltipId}\n          getRootRef={tooltipRef}\n          appearance={appearance}\n          arrowProps={\n            disableArrow\n              ? undefined\n              : {\n                  placement,\n                  coords: getArrowCoordsByMiddlewareData(middlewareData),\n                  getRootRef: setArrowRef,\n                }\n          }\n          className={classNames(\n            willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in,\n            className,\n          )}\n          onCloseIconClick={closable ? onClose : undefined}\n        />\n      </AppRootPortal>\n    );\n  }\n  const [, child] = usePatchChildren(\n    children,\n    {\n      ...referenceProps,\n      ...(shown && { 'aria-describedby': tooltipId }),\n    },\n    refs.setReference,\n  );\n\n  useGlobalEscKeyDown(shown, onEscapeKeyDown);\n\n  return (\n    <React.Fragment>\n      {child}\n      {tooltip}\n    </React.Fragment>\n  );\n};\n"],"names":["React","classNames","useExternRef","useGlobalEscKeyDown","usePatchChildren","animationFadeClassNames","getArrowCoordsByMiddlewareData","useFloatingMiddlewaresBootstrap","useFloatingWithInteractions","usePlacementChangeCallback","AppRootPortal","TooltipBase","Tooltip","placement","placementProp","arrowPadding","arrowHeight","offsetByMainAxis","offsetByCrossAxis","hideWhenReferenceHidden","disableFlipMiddleware","disableTriggerOnFocus","defaultShown","shown","shownProp","onShownChange","hoverDelay","strategy","enableInteractive","disableArrow","disableCloseAfterClick","children","usePortal","id","idProp","getRootRef","appearance","style","styleProp","className","zIndex","closable","onPlacementChange","popperProps","generatedId","useId","tooltipId","arrowRef","setArrowRef","useState","middlewares","strictPlacement","arrow","willBeHide","refs","referenceProps","floatingProps","middlewareData","onClose","onEscapeKeyDown","trigger","closeAfterClick","disableInteractive","tooltipRef","setFloating","tooltip","arrowProps","undefined","coords","out","in","onCloseIconClick","child","setReference","Fragment"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useReferenceElement } from '../../hooks/useReferenceElement';\nimport { type FloatingComponentProps, type OnShownChange } from '../../lib/floating';\nimport { type FloatingArrowProps as FloatingArrowPropsPrivate } from '../FloatingArrow/FloatingArrow';\nimport { type TooltipBaseProps } from '../TooltipBase/TooltipBase';\nimport { useTooltip } from './useTooltip';\n\ntype AllowedFloatingComponentProps = Pick<\n  FloatingComponentProps,\n  | 'arrowHeight'\n  | 'arrowPadding'\n  | 'hoverDelay'\n  | 'placement'\n  | 'offsetByMainAxis'\n  | 'offsetByCrossAxis'\n  | 'defaultShown'\n  | 'onShownChange'\n  | 'hideWhenReferenceHidden'\n  | 'onReferenceHiddenChange'\n  | 'children'\n  | 'zIndex'\n  | 'usePortal'\n  | 'onPlacementChange'\n  | 'disableFlipMiddleware'\n  | 'strategy'\n>;\n\ntype AllowedTooltipBaseProps = Omit<TooltipBaseProps, 'arrowProps' | 'onCloseIconClick'>;\n\n/**\n * @alias\n * @public\n */\nexport type TooltipArrowProps = Omit<\n  FloatingArrowPropsPrivate,\n  'getRootRef' | 'coords' | 'placement' | 'Icon'\n>;\n\n/**\n * @alias\n * @public\n */\nexport type TooltipOnShownChange = OnShownChange;\n\nexport interface TooltipProps extends AllowedFloatingComponentProps, AllowedTooltipBaseProps {\n  /**\n   * Передача `boolean` позволяет контролировать состояния показа и скрытия вручную. Используйте\n   * совместно с `onShownChange`.\n   *\n   * > Если нужно разово инициировать показ тултипа при первом рендере, то используйте `defaultShown`.\n   */\n  shown?: boolean;\n  /**\n   * Добавляет возможность наводить на тултип.\n   */\n  enableInteractive?: boolean;\n  /**\n   * Добавляет возможность закрыть тултип через иконку-крестик.\n   *\n   * > Работает в сочетании с `enableInteractive` или при использовании `shown` и `onShownChange`.\n   */\n  closable?: boolean;\n  /**\n   * Скрывает стрелку, указывающую на якорный элемент.\n   */\n  disableArrow?: boolean;\n  /**\n   * Отключает закрытие по клику.\n   */\n  disableCloseAfterClick?: boolean;\n  /**\n   * Отключает появление при фокусе.\n   */\n  disableTriggerOnFocus?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tooltip\n */\nexport const Tooltip = ({ children, ...restProps }: TooltipProps): React.ReactNode => {\n  const { anchorRef, anchorProps, tooltip } = useTooltip(restProps);\n\n  const anchor = useReferenceElement(children, anchorProps, anchorRef);\n\n  return (\n    <React.Fragment>\n      {anchor}\n      {tooltip}\n    </React.Fragment>\n  );\n};\n"],"names":["React","useReferenceElement","useTooltip","Tooltip","children","restProps","anchorRef","anchorProps","tooltip","anchor","Fragment"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,qCAAkC;AAItE,SAASC,UAAU,QAAQ,kBAAe;AAuE1C;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,QAAQ,EAAE,GAAGC,WAAyB;IAC9D,MAAM,EAAEC,SAAS,EAAEC,WAAW,EAAEC,OAAO,EAAE,GAAGN,WAAWG;IAEvD,MAAMI,SAASR,oBAAoBG,UAAUG,aAAaD;IAE1D,qBACE,MAACN,MAAMU,QAAQ;;YACZD;YACAD;;;AAGP,EAAE"}

package/dist/cssm/components/Tooltip/useTooltip.js

@@ -0,0 +1,97 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useCallback } from "react";
+import { classNames } from "@vkontakte/vkjs";
+import { useFloatingElement } from "../../hooks/useFloatingElement.js";
+import { animationFadeClassNames } from "../../lib/animation/index.js";
+import { getArrowCoordsByMiddlewareData } from "../../lib/floating/index.js";
+import { AppRootPortal } from "../AppRoot/AppRootPortal.js";
+import { TooltipBase } from "../TooltipBase/TooltipBase.js";
+export const useTooltip = ({ // UseFloatingMiddlewaresBootstrapOptions
+placement: placementProp = 'bottom', arrowPadding = 10, arrowHeight = 8, offsetByMainAxis = 8, offsetByCrossAxis = 0, hideWhenReferenceHidden, disableFlipMiddleware = false, disableTriggerOnFocus = false, onReferenceHiddenChange, // useFloatingWithInteractions
+defaultShown, shown: shownProp, onShownChange, hoverDelay = 150, strategy, // инверсированные св-ва для useFloatingWithInteractions
+enableInteractive = false, disableArrow = false, disableCloseAfterClick = false, // AppRootProps
+usePortal, // TooltipBaseProps
+id: idProp, getRootRef, appearance = 'neutral', style: styleProp, className, zIndex = 'var(--vkui--z_index_popout)', closable, onPlacementChange, ...popperProps })=>{
+    const generatedId = React.useId();
+    const tooltipId = idProp || generatedId;
+    const renderFloatingComponent = useCallback(({ shown, floatingProps, floatingRef, placement: resultPlacement, middlewareData, setArrowRef, willBeHide, onClose })=>{
+        if (!shown) {
+            return null;
+        }
+        return /*#__PURE__*/ _jsx(AppRootPortal, {
+            usePortal: usePortal,
+            children: /*#__PURE__*/ _jsx(TooltipBase, {
+                ...popperProps,
+                ...floatingProps,
+                style: {
+                    ...floatingProps.style,
+                    zIndex,
+                    ...styleProp
+                },
+                id: tooltipId,
+                getRootRef: floatingRef,
+                appearance: appearance,
+                arrowProps: disableArrow ? undefined : {
+                    placement: resultPlacement,
+                    coords: getArrowCoordsByMiddlewareData(middlewareData),
+                    getRootRef: setArrowRef
+                },
+                className: classNames(willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in, className),
+                onCloseIconClick: closable ? onClose : undefined
+            })
+        });
+    }, [
+        appearance,
+        className,
+        closable,
+        disableArrow,
+        popperProps,
+        styleProp,
+        tooltipId,
+        usePortal,
+        zIndex
+    ]);
+    const remapReferenceProps = useCallback(({ shown, ...referenceProps })=>({
+            ...referenceProps,
+            ...shown && {
+                'aria-describedby': tooltipId
+            }
+        }), [
+        tooltipId
+    ]);
+    const { component, anchorRef, anchorProps } = useFloatingElement({
+        placement: placementProp,
+        arrow: !disableArrow,
+        arrowHeight,
+        arrowPadding,
+        offsetByMainAxis,
+        offsetByCrossAxis,
+        hideWhenReferenceHidden,
+        disableFlipMiddleware,
+        defaultShown,
+        shown: shownProp,
+        onShownChange,
+        trigger: disableTriggerOnFocus ? 'hover' : [
+            'hover',
+            'focus'
+        ],
+        onReferenceHiddenChange,
+        hoverDelay,
+        closeAfterClick: !disableCloseAfterClick,
+        disableInteractive: !enableInteractive,
+        strategy,
+        onPlacementChange,
+        renderFloatingComponent,
+        externalFloatingElementRef: getRootRef,
+        remapReferenceProps
+    });
+    return {
+        anchorRef,
+        anchorProps,
+        tooltip: component
+    };
+};
+
+//# sourceMappingURL=useTooltip.js.map

package/dist/cssm/components/Tooltip/useTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Tooltip/useTooltip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { type Ref, useCallback } from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  type FloatingComponentProps,\n  useFloatingElement,\n  type UseFloatingElementProps,\n} from '../../hooks/useFloatingElement';\nimport { animationFadeClassNames } from '../../lib/animation';\nimport { getArrowCoordsByMiddlewareData } from '../../lib/floating';\nimport { type ReferenceProps } from '../../lib/floating/useFloatingWithInteractions/types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { TooltipBase } from '../TooltipBase/TooltipBase';\nimport { type TooltipProps } from './Tooltip';\n\nexport type UseTooltipProps = Omit<TooltipProps, 'children'> & {\n  [key: `data-${string}`]: string | number | boolean;\n};\n\nexport type UseTooltipResult<ElementType extends HTMLElement = HTMLElement> = {\n  anchorRef: Ref<ElementType>;\n  anchorProps: ReferenceProps<ElementType>;\n  tooltip: React.ReactNode | null;\n};\n\nexport const useTooltip = ({\n  // UseFloatingMiddlewaresBootstrapOptions\n  placement: placementProp = 'bottom',\n  arrowPadding = 10,\n  arrowHeight = 8,\n  offsetByMainAxis = 8,\n  offsetByCrossAxis = 0,\n  hideWhenReferenceHidden,\n  disableFlipMiddleware = false,\n  disableTriggerOnFocus = false,\n  onReferenceHiddenChange,\n\n  // useFloatingWithInteractions\n  defaultShown,\n  shown: shownProp,\n  onShownChange,\n  hoverDelay = 150,\n  strategy,\n\n  // инверсированные св-ва для useFloatingWithInteractions\n  enableInteractive = false,\n  disableArrow = false,\n  disableCloseAfterClick = false,\n\n  // AppRootProps\n  usePortal,\n\n  // TooltipBaseProps\n  id: idProp,\n  getRootRef,\n  appearance = 'neutral',\n  style: styleProp,\n  className,\n  zIndex = 'var(--vkui--z_index_popout)',\n  closable,\n  onPlacementChange,\n  ...popperProps\n}: UseTooltipProps): UseTooltipResult => {\n  const generatedId = React.useId();\n  const tooltipId = idProp || generatedId;\n\n  const renderFloatingComponent = useCallback(\n    ({\n      shown,\n      floatingProps,\n      floatingRef,\n      placement: resultPlacement,\n      middlewareData,\n      setArrowRef,\n      willBeHide,\n      onClose,\n    }: FloatingComponentProps<HTMLDivElement>) => {\n      if (!shown) {\n        return null;\n      }\n      return (\n        <AppRootPortal usePortal={usePortal}>\n          <TooltipBase\n            {...popperProps}\n            {...floatingProps}\n            style={{\n              ...floatingProps.style,\n              zIndex,\n              ...styleProp,\n            }}\n            id={tooltipId}\n            getRootRef={floatingRef}\n            appearance={appearance}\n            arrowProps={\n              disableArrow\n                ? undefined\n                : {\n                    placement: resultPlacement,\n                    coords: getArrowCoordsByMiddlewareData(middlewareData),\n                    getRootRef: setArrowRef,\n                  }\n            }\n            className={classNames(\n              willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in,\n              className,\n            )}\n            onCloseIconClick={closable ? onClose : undefined}\n          />\n        </AppRootPortal>\n      );\n    },\n    [\n      appearance,\n      className,\n      closable,\n      disableArrow,\n      popperProps,\n      styleProp,\n      tooltipId,\n      usePortal,\n      zIndex,\n    ],\n  );\n\n  const remapReferenceProps: Exclude<UseFloatingElementProps['remapReferenceProps'], undefined> =\n    useCallback(\n      ({ shown, ...referenceProps }) => ({\n        ...referenceProps,\n        ...(shown && { 'aria-describedby': tooltipId }),\n      }),\n      [tooltipId],\n    );\n\n  const { component, anchorRef, anchorProps } = useFloatingElement({\n    placement: placementProp,\n    arrow: !disableArrow,\n    arrowHeight,\n    arrowPadding,\n    offsetByMainAxis,\n    offsetByCrossAxis,\n    hideWhenReferenceHidden,\n    disableFlipMiddleware,\n\n    defaultShown,\n    shown: shownProp,\n    onShownChange,\n    trigger: disableTriggerOnFocus ? 'hover' : ['hover', 'focus'],\n    onReferenceHiddenChange,\n    hoverDelay,\n    closeAfterClick: !disableCloseAfterClick,\n    disableInteractive: !enableInteractive,\n    strategy,\n\n    onPlacementChange,\n\n    renderFloatingComponent,\n    externalFloatingElementRef: getRootRef,\n    remapReferenceProps,\n  });\n\n  return {\n    anchorRef,\n    anchorProps,\n    tooltip: component,\n  };\n};\n"],"names":["React","useCallback","classNames","useFloatingElement","animationFadeClassNames","getArrowCoordsByMiddlewareData","AppRootPortal","TooltipBase","useTooltip","placement","placementProp","arrowPadding","arrowHeight","offsetByMainAxis","offsetByCrossAxis","hideWhenReferenceHidden","disableFlipMiddleware","disableTriggerOnFocus","onReferenceHiddenChange","defaultShown","shown","shownProp","onShownChange","hoverDelay","strategy","enableInteractive","disableArrow","disableCloseAfterClick","usePortal","id","idProp","getRootRef","appearance","style","styleProp","className","zIndex","closable","onPlacementChange","popperProps","generatedId","useId","tooltipId","renderFloatingComponent","floatingProps","floatingRef","resultPlacement","middlewareData","setArrowRef","willBeHide","onClose","arrowProps","undefined","coords","out","in","onCloseIconClick","remapReferenceProps","referenceProps","component","anchorRef","anchorProps","arrow","trigger","closeAfterClick","disableInteractive","externalFloatingElementRef","tooltip"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAAmBC,WAAW,QAAQ,QAAQ;AAC9C,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAEEC,kBAAkB,QAEb,oCAAiC;AACxC,SAASC,uBAAuB,QAAQ,+BAAsB;AAC9D,SAASC,8BAA8B,QAAQ,8BAAqB;AAEpE,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,WAAW,QAAQ,gCAA6B;AAazD,OAAO,MAAMC,aAAa,CAAC,EACzB,yCAAyC;AACzCC,WAAWC,gBAAgB,QAAQ,EACnCC,eAAe,EAAE,EACjBC,cAAc,CAAC,EACfC,mBAAmB,CAAC,EACpBC,oBAAoB,CAAC,EACrBC,uBAAuB,EACvBC,wBAAwB,KAAK,EAC7BC,wBAAwB,KAAK,EAC7BC,uBAAuB,EAEvB,8BAA8B;AAC9BC,YAAY,EACZC,OAAOC,SAAS,EAChBC,aAAa,EACbC,aAAa,GAAG,EAChBC,QAAQ,EAER,wDAAwD;AACxDC,oBAAoB,KAAK,EACzBC,eAAe,KAAK,EACpBC,yBAAyB,KAAK,EAE9B,eAAe;AACfC,SAAS,EAET,mBAAmB;AACnBC,IAAIC,MAAM,EACVC,UAAU,EACVC,aAAa,SAAS,EACtBC,OAAOC,SAAS,EAChBC,SAAS,EACTC,SAAS,6BAA6B,EACtCC,QAAQ,EACRC,iBAAiB,EACjB,GAAGC,aACa;IAChB,MAAMC,cAAcxC,MAAMyC,KAAK;IAC/B,MAAMC,YAAYZ,UAAUU;IAE5B,MAAMG,0BAA0B1C,YAC9B,CAAC,EACCmB,KAAK,EACLwB,aAAa,EACbC,WAAW,EACXpC,WAAWqC,eAAe,EAC1BC,cAAc,EACdC,WAAW,EACXC,UAAU,EACVC,OAAO,EACgC;QACvC,IAAI,CAAC9B,OAAO;YACV,OAAO;QACT;QACA,qBACE,KAACd;YAAcsB,WAAWA;sBACxB,cAAA,KAACrB;gBACE,GAAGgC,WAAW;gBACd,GAAGK,aAAa;gBACjBX,OAAO;oBACL,GAAGW,cAAcX,KAAK;oBACtBG;oBACA,GAAGF,SAAS;gBACd;gBACAL,IAAIa;gBACJX,YAAYc;gBACZb,YAAYA;gBACZmB,YACEzB,eACI0B,YACA;oBACE3C,WAAWqC;oBACXO,QAAQhD,+BAA+B0C;oBACvChB,YAAYiB;gBACd;gBAENb,WAAWjC,WACT+C,aAAa7C,wBAAwBkD,GAAG,GAAGlD,wBAAwBmD,EAAE,EACrEpB;gBAEFqB,kBAAkBnB,WAAWa,UAAUE;;;IAI/C,GACA;QACEpB;QACAG;QACAE;QACAX;QACAa;QACAL;QACAQ;QACAd;QACAQ;KACD;IAGH,MAAMqB,sBACJxD,YACE,CAAC,EAAEmB,KAAK,EAAE,GAAGsC,gBAAgB,GAAM,CAAA;YACjC,GAAGA,cAAc;YACjB,GAAItC,SAAS;gBAAE,oBAAoBsB;YAAU,CAAC;QAChD,CAAA,GACA;QAACA;KAAU;IAGf,MAAM,EAAEiB,SAAS,EAAEC,SAAS,EAAEC,WAAW,EAAE,GAAG1D,mBAAmB;QAC/DM,WAAWC;QACXoD,OAAO,CAACpC;QACRd;QACAD;QACAE;QACAC;QACAC;QACAC;QAEAG;QACAC,OAAOC;QACPC;QACAyC,SAAS9C,wBAAwB,UAAU;YAAC;YAAS;SAAQ;QAC7DC;QACAK;QACAyC,iBAAiB,CAACrC;QAClBsC,oBAAoB,CAACxC;QACrBD;QAEAc;QAEAK;QACAuB,4BAA4BnC;QAC5B0B;IACF;IAEA,OAAO;QACLG;QACAC;QACAM,SAASR;IACX;AACF,EAAE"}

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

@@ -7,24 +7,24 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: var(--vkui--color_background_contrast_themed);
-  box-shadow: var(--vkui--elevation3);
   padding-block: 9px 10px;
   padding-inline: 12px;
-  border-radius: var(--vkui--size_border_radius--regular);
   color: var(--vkui--color_text_primary);
+  background-color: var(--vkui--color_background_contrast_themed);
+  border-radius: var(--vkui--size_border_radius--regular);
+  box-shadow: var(--vkui--elevation3);
 }
 
 .closeButton {
   flex-grow: 0;
   flex-shrink: 0;
   align-self: flex-start;
+  padding: 0;
   -webkit-margin-start: 10px;
           margin-inline-start: 10px;
   color: inherit;
-  padding: 0;
-  border: 0;
   background: none;
+  border: 0;
 }
 
 .title,
@@ -37,8 +37,8 @@
 }
 
 .appearanceAccent .content {
-  background-color: var(--vkui--color_background_accent_tint);
   color: var(--vkui--color_text_contrast);
+  background-color: var(--vkui--color_background_accent_tint);
 }
 
 .appearanceAccent .arrow {
@@ -46,8 +46,8 @@
 }
 
 .appearanceWhite .content {
-  background-color: var(--vkui--color_background_contrast);
   color: var(--vkui--color_text_primary_invariably);
+  background-color: var(--vkui--color_background_contrast);
 }
 
 .appearanceWhite .arrow {
@@ -55,8 +55,8 @@
 }
 
 .appearanceBlack .content {
-  background-color: var(--vkui--color_background_contrast_inverse);
   color: var(--vkui--color_text_contrast);
+  background-color: var(--vkui--color_background_contrast_inverse);
 }
 
 .appearanceBlack .arrow {
@@ -64,8 +64,8 @@
 }
 
 .appearanceInversion .content {
-  background-color: var(--vkui--color_background_modal_inverse);
   color: var(--vkui--color_text_contrast_themed);
+  background-color: var(--vkui--color_background_modal_inverse);
 }
 
 .appearanceInversion .arrow {

package/dist/cssm/components/Typography/Caption/Caption.module.css

@@ -3,283 +3,283 @@
 }
 
 .level1 {
+  font-family: var(--vkui--font_caption1--font_family--regular);
   font-size: var(--vkui--font_caption1--font_size--regular);
-  line-height: var(--vkui--font_caption1--line_height--regular);
   font-weight: var(--vkui--font_caption1--font_weight--regular);
-  font-family: var(--vkui--font_caption1--font_family--regular);
+  line-height: var(--vkui--font_caption1--line_height--regular);
 }
 
 .sizeYCompact.level1 {
+  font-family: var(
+    --vkui--font_caption1--font_family--compact,
+    var(--vkui--font_caption1--font_family--regular)
+  );
   font-size: var(
     --vkui--font_caption1--font_size--compact,
     var(--vkui--font_caption1--font_size--regular)
   );
-  line-height: var(
-    --vkui--font_caption1--line_height--compact,
-    var(--vkui--font_caption1--line_height--regular)
-  );
   font-weight: var(
     --vkui--font_caption1--font_weight--compact,
     var(--vkui--font_caption1--font_weight--regular)
   );
-  font-family: var(
-    --vkui--font_caption1--font_family--compact,
-    var(--vkui--font_caption1--font_family--regular)
+  line-height: var(
+    --vkui--font_caption1--line_height--compact,
+    var(--vkui--font_caption1--line_height--regular)
   );
 }
 
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
   .sizeYNone.level1 {
+    font-family: var(
+      --vkui--font_caption1--font_family--compact,
+      var(--vkui--font_caption1--font_family--regular)
+    );
     font-size: var(
       --vkui--font_caption1--font_size--compact,
       var(--vkui--font_caption1--font_size--regular)
     );
-    line-height: var(
-      --vkui--font_caption1--line_height--compact,
-      var(--vkui--font_caption1--line_height--regular)
-    );
     font-weight: var(
       --vkui--font_caption1--font_weight--compact,
       var(--vkui--font_caption1--font_weight--regular)
     );
-    font-family: var(
-      --vkui--font_caption1--font_family--compact,
-      var(--vkui--font_caption1--font_family--regular)
+    line-height: var(
+      --vkui--font_caption1--line_height--compact,
+      var(--vkui--font_caption1--line_height--regular)
     );
   }
 }
 
 .level1.caps {
+  font-family: var(--vkui--font_caption1_caps--font_family--regular);
   font-size: var(--vkui--font_caption1_caps--font_size--regular);
-  line-height: var(--vkui--font_caption1_caps--line_height--regular);
   font-weight: var(--vkui--font_caption1_caps--font_weight--regular);
-  font-family: var(--vkui--font_caption1_caps--font_family--regular);
+  line-height: var(--vkui--font_caption1_caps--line_height--regular);
 }
 
 .sizeYCompact.level1.caps {
+  font-family: var(
+    --vkui--font_caption1_caps--font_family--compact,
+    var(--vkui--font_caption1_caps--font_family--regular)
+  );
   font-size: var(
     --vkui--font_caption1_caps--font_size--compact,
     var(--vkui--font_caption1_caps--font_size--regular)
   );
-  line-height: var(
-    --vkui--font_caption1_caps--line_height--compact,
-    var(--vkui--font_caption1_caps--line_height--regular)
-  );
   font-weight: var(
     --vkui--font_caption1_caps--font_weight--compact,
     var(--vkui--font_caption1_caps--font_weight--regular)
   );
-  font-family: var(
-    --vkui--font_caption1_caps--font_family--compact,
-    var(--vkui--font_caption1_caps--font_family--regular)
+  line-height: var(
+    --vkui--font_caption1_caps--line_height--compact,
+    var(--vkui--font_caption1_caps--line_height--regular)
   );
 }
 
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
   .sizeYNone.level1.caps {
+    font-family: var(
+      --vkui--font_caption1_caps--font_family--compact,
+      var(--vkui--font_caption1_caps--font_family--regular)
+    );
     font-size: var(
       --vkui--font_caption1_caps--font_size--compact,
       var(--vkui--font_caption1_caps--font_size--regular)
     );
-    line-height: var(
-      --vkui--font_caption1_caps--line_height--compact,
-      var(--vkui--font_caption1_caps--line_height--regular)
-    );
     font-weight: var(
       --vkui--font_caption1_caps--font_weight--compact,
       var(--vkui--font_caption1_caps--font_weight--regular)
     );
-    font-family: var(
-      --vkui--font_caption1_caps--font_family--compact,
-      var(--vkui--font_caption1_caps--font_family--regular)
+    line-height: var(
+      --vkui--font_caption1_caps--line_height--compact,
+      var(--vkui--font_caption1_caps--line_height--regular)
     );
   }
 }
 
 .level2 {
+  font-family: var(--vkui--font_caption2--font_family--regular);
   font-size: var(--vkui--font_caption2--font_size--regular);
-  line-height: var(--vkui--font_caption2--line_height--regular);
   font-weight: var(--vkui--font_caption2--font_weight--regular);
-  font-family: var(--vkui--font_caption2--font_family--regular);
+  line-height: var(--vkui--font_caption2--line_height--regular);
 }
 
 .sizeYCompact.level2 {
+  font-family: var(
+    --vkui--font_caption2--font_family--compact,
+    var(--vkui--font_caption2--font_family--regular)
+  );
   font-size: var(
     --vkui--font_caption2--font_size--compact,
     var(--vkui--font_caption2--font_size--regular)
   );
-  line-height: var(
-    --vkui--font_caption2--line_height--compact,
-    var(--vkui--font_caption2--line_height--regular)
-  );
   font-weight: var(
     --vkui--font_caption2--font_weight--compact,
     var(--vkui--font_caption2--font_weight--regular)
   );
-  font-family: var(
-    --vkui--font_caption2--font_family--compact,
-    var(--vkui--font_caption2--font_family--regular)
+  line-height: var(
+    --vkui--font_caption2--line_height--compact,
+    var(--vkui--font_caption2--line_height--regular)
   );
 }
 
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
   .sizeYNone.level2 {
+    font-family: var(
+      --vkui--font_caption2--font_family--compact,
+      var(--vkui--font_caption2--font_family--regular)
+    );
     font-size: var(
       --vkui--font_caption2--font_size--compact,
       var(--vkui--font_caption2--font_size--regular)
     );
-    line-height: var(
-      --vkui--font_caption2--line_height--compact,
-      var(--vkui--font_caption2--line_height--regular)
-    );
     font-weight: var(
       --vkui--font_caption2--font_weight--compact,
       var(--vkui--font_caption2--font_weight--regular)
     );
-    font-family: var(
-      --vkui--font_caption2--font_family--compact,
-      var(--vkui--font_caption2--font_family--regular)
+    line-height: var(
+      --vkui--font_caption2--line_height--compact,
+      var(--vkui--font_caption2--line_height--regular)
     );
   }
 }
 
 .level2.caps {
+  font-family: var(--vkui--font_caption2_caps--font_family--regular);
   font-size: var(--vkui--font_caption2_caps--font_size--regular);
-  line-height: var(--vkui--font_caption2_caps--line_height--regular);
   font-weight: var(--vkui--font_caption2_caps--font_weight--regular);
-  font-family: var(--vkui--font_caption2_caps--font_family--regular);
+  line-height: var(--vkui--font_caption2_caps--line_height--regular);
 }
 
 .sizeYCompact.level2.caps {
+  font-family: var(
+    --vkui--font_caption2_caps--font_family--compact,
+    var(--vkui--font_caption2_caps--font_family--regular)
+  );
   font-size: var(
     --vkui--font_caption2_caps--font_size--compact,
     var(--vkui--font_caption2_caps--font_size--regular)
   );
-  line-height: var(
-    --vkui--font_caption2_caps--line_height--compact,
-    var(--vkui--font_caption2_caps--line_height--regular)
-  );
   font-weight: var(
     --vkui--font_caption2_caps--font_weight--compact,
     var(--vkui--font_caption2_caps--font_weight--regular)
   );
-  font-family: var(
-    --vkui--font_caption2_caps--font_family--compact,
-    var(--vkui--font_caption2_caps--font_family--regular)
+  line-height: var(
+    --vkui--font_caption2_caps--line_height--compact,
+    var(--vkui--font_caption2_caps--line_height--regular)
   );
 }
 
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
   .sizeYNone.level2.caps {
+    font-family: var(
+      --vkui--font_caption2_caps--font_family--compact,
+      var(--vkui--font_caption2_caps--font_family--regular)
+    );
     font-size: var(
       --vkui--font_caption2_caps--font_size--compact,
       var(--vkui--font_caption2_caps--font_size--regular)
     );
-    line-height: var(
-      --vkui--font_caption2_caps--line_height--compact,
-      var(--vkui--font_caption2_caps--line_height--regular)
-    );
     font-weight: var(
       --vkui--font_caption2_caps--font_weight--compact,
       var(--vkui--font_caption2_caps--font_weight--regular)
     );
-    font-family: var(
-      --vkui--font_caption2_caps--font_family--compact,
-      var(--vkui--font_caption2_caps--font_family--regular)
+    line-height: var(
+      --vkui--font_caption2_caps--line_height--compact,
+      var(--vkui--font_caption2_caps--line_height--regular)
     );
   }
 }
 
 .level3 {
+  font-family: var(--vkui--font_caption3--font_family--regular);
   font-size: var(--vkui--font_caption3--font_size--regular);
-  line-height: var(--vkui--font_caption3--line_height--regular);
   font-weight: var(--vkui--font_caption3--font_weight--regular);
-  font-family: var(--vkui--font_caption3--font_family--regular);
+  line-height: var(--vkui--font_caption3--line_height--regular);
 }
 
 .sizeYCompact.level3 {
+  font-family: var(
+    --vkui--font_caption3--font_family--compact,
+    var(--vkui--font_caption3--font_family--regular)
+  );
   font-size: var(
     --vkui--font_caption3--font_size--compact,
     var(--vkui--font_caption3--font_size--regular)
   );
-  line-height: var(
-    --vkui--font_caption3--line_height--compact,
-    var(--vkui--font_caption3--line_height--regular)
-  );
   font-weight: var(
     --vkui--font_caption3--font_weight--compact,
     var(--vkui--font_caption3--font_weight--regular)
   );
-  font-family: var(
-    --vkui--font_caption3--font_family--compact,
-    var(--vkui--font_caption3--font_family--regular)
+  line-height: var(
+    --vkui--font_caption3--line_height--compact,
+    var(--vkui--font_caption3--line_height--regular)
   );
 }
 
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
   .sizeYNone.level3 {
+    font-family: var(
+      --vkui--font_caption3--font_family--compact,
+      var(--vkui--font_caption3--font_family--regular)
+    );
     font-size: var(
       --vkui--font_caption3--font_size--compact,
       var(--vkui--font_caption3--font_size--regular)
     );
-    line-height: var(
-      --vkui--font_caption3--line_height--compact,
-      var(--vkui--font_caption3--line_height--regular)
-    );
     font-weight: var(
       --vkui--font_caption3--font_weight--compact,
       var(--vkui--font_caption3--font_weight--regular)
     );
-    font-family: var(
-      --vkui--font_caption3--font_family--compact,
-      var(--vkui--font_caption3--font_family--regular)
+    line-height: var(
+      --vkui--font_caption3--line_height--compact,
+      var(--vkui--font_caption3--line_height--regular)
     );
   }
 }
 
 .level3.caps {
+  font-family: var(--vkui--font_caption3_caps--font_family--regular);
   font-size: var(--vkui--font_caption3_caps--font_size--regular);
-  line-height: var(--vkui--font_caption3_caps--line_height--regular);
   font-weight: var(--vkui--font_caption3_caps--font_weight--regular);
-  font-family: var(--vkui--font_caption3_caps--font_family--regular);
+  line-height: var(--vkui--font_caption3_caps--line_height--regular);
 }
 
 .sizeYCompact.level3.caps {
+  font-family: var(
+    --vkui--font_caption3_caps--font_family--compact,
+    var(--vkui--font_caption3_caps--font_family--regular)
+  );
   font-size: var(
     --vkui--font_caption3_caps--font_size--compact,
     var(--vkui--font_caption3_caps--font_size--regular)
   );
-  line-height: var(
-    --vkui--font_caption3_caps--line_height--compact,
-    var(--vkui--font_caption3_caps--line_height--regular)
-  );
   font-weight: var(
     --vkui--font_caption3_caps--font_weight--compact,
     var(--vkui--font_caption3_caps--font_weight--regular)
   );
-  font-family: var(
-    --vkui--font_caption3_caps--font_family--compact,
-    var(--vkui--font_caption3_caps--font_family--regular)
+  line-height: var(
+    --vkui--font_caption3_caps--line_height--compact,
+    var(--vkui--font_caption3_caps--line_height--regular)
   );
 }
 
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
   .sizeYNone.level3.caps {
+    font-family: var(
+      --vkui--font_caption3_caps--font_family--compact,
+      var(--vkui--font_caption3_caps--font_family--regular)
+    );
     font-size: var(
       --vkui--font_caption3_caps--font_size--compact,
       var(--vkui--font_caption3_caps--font_size--regular)
     );
-    line-height: var(
-      --vkui--font_caption3_caps--line_height--compact,
-      var(--vkui--font_caption3_caps--line_height--regular)
-    );
     font-weight: var(
       --vkui--font_caption3_caps--font_weight--compact,
       var(--vkui--font_caption3_caps--font_weight--regular)
     );
-    font-family: var(
-      --vkui--font_caption3_caps--font_family--compact,
-      var(--vkui--font_caption3_caps--font_family--regular)
+    line-height: var(
+      --vkui--font_caption3_caps--line_height--compact,
+      var(--vkui--font_caption3_caps--line_height--regular)
     );
   }
 }