@vkontakte/vkui 7.1.3 → 7.2.1

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type FocusVisibleModeProps } from '../../hooks/useFocusVisibleClassName';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { RealClickable } from './RealClickable';\nimport { type StateProps } from './useState';\nimport styles from './Clickable.module.css';\n\nexport interface ClickableProps<T = HTMLElement>\n  extends RootComponentProps<T>,\n    FocusVisibleModeProps,\n    StateProps {}\n\n/**\n * Некликабельный компонент. Отключаем возможность нажимать на компонент.\n */\nconst NonClickable = <T,>({\n  href,\n  onClick,\n  onClickCapture,\n  activeClassName,\n  hoverClassName,\n  hasActive,\n  hasHover,\n  hovered,\n  unlockParentHover,\n  activated,\n  activeEffectDelay,\n  ...restProps\n}: ClickableProps<T>) => <RootComponent {...restProps} />;\n\n/**\n * Проверяем, является ли компонент кликабельным\n */\nexport function checkClickable<T>(props: ClickableProps<T>): boolean {\n  return (\n    (props.href !== undefined ||\n      props.onClick !== undefined ||\n      props.onClickCapture !== undefined ||\n      props.Component === 'a' ||\n      props.Component === 'button' ||\n      props.Component === 'label' ||\n      props.Component === 'input') &&\n    !props.disabled\n  );\n}\n\n/**\n * Определяет правильный компонент и его свойства\n *\n * - если передан Component, используем его\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n */\nfunction component<T>({\n  Component,\n  onClick,\n  onClickCapture,\n  href,\n  disabled,\n}: RootComponentProps<T>): RootComponentProps<T> {\n  if (Component !== undefined) {\n    return { Component };\n  } else if (href !== undefined) {\n    return { 'Component': 'a', 'aria-disabled': disabled };\n  } else if (onClick !== undefined || onClickCapture !== undefined) {\n    return {\n      'Component': 'div',\n      'role': 'button',\n      'tabIndex': disabled ? undefined : 0,\n      'aria-disabled': disabled,\n    };\n  }\n\n  return {};\n}\n\n/**\n * Базовый кликабельный корневой компонент.\n *\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n *\n * Отвечает за:\n *\n * - стейты наведения и нажатия\n * - a11y компонентов\n */\nexport const Clickable = <T,>({\n  focusVisibleMode = 'inside',\n  baseClassName: baseClassNameProp,\n  ...restProps\n}: ClickableProps<T>): React.ReactNode => {\n  const commonProps = component(restProps);\n  const isClickable = checkClickable(restProps);\n  const baseClassName = classNames(baseClassNameProp, styles.host);\n\n  if (isClickable) {\n    return (\n      <RealClickable\n        baseClassName={baseClassName}\n        focusVisibleMode={focusVisibleMode}\n        {...commonProps}\n        {...restProps}\n      />\n    );\n  }\n\n  return <NonClickable baseClassName={baseClassName} {...commonProps} {...restProps} />;\n};\n"],"names":["React","classNames","RootComponent","RealClickable","styles","NonClickable","href","onClick","onClickCapture","activeClassName","hoverClassName","hasActive","hasHover","hovered","unlockParentHover","activated","activeEffectDelay","restProps","checkClickable","props","undefined","Component","disabled","component","Clickable","focusVisibleMode","baseClassName","baseClassNameProp","commonProps","isClickable","host"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAiC,oCAAiC;AACxF,SAASC,aAAa,QAAQ,qBAAkB;AAEhD,OAAOC,YAAY,yBAAyB;AAO5C;;CAEC,GACD,MAAMC,eAAe,CAAK,EACxBC,IAAI,EACJC,OAAO,EACPC,cAAc,EACdC,eAAe,EACfC,cAAc,EACdC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,iBAAiB,EACjBC,SAAS,EACTC,iBAAiB,EACjB,GAAGC,WACe,iBAAK,KAACf;QAAe,GAAGe,SAAS;;AAErD;;CAEC,GACD,OAAO,SAASC,eAAkBC,KAAwB;IACxD,OACE,AAACA,CAAAA,MAAMb,IAAI,KAAKc,aACdD,MAAMZ,OAAO,KAAKa,aAClBD,MAAMX,cAAc,KAAKY,aACzBD,MAAME,SAAS,KAAK,OACpBF,MAAME,SAAS,KAAK,YACpBF,MAAME,SAAS,KAAK,WACpBF,MAAME,SAAS,KAAK,OAAM,KAC5B,CAACF,MAAMG,QAAQ;AAEnB;AAEA;;;;;;;CAOC,GACD,SAASC,UAAa,EACpBF,SAAS,EACTd,OAAO,EACPC,cAAc,EACdF,IAAI,EACJgB,QAAQ,EACc;IACtB,IAAID,cAAcD,WAAW;QAC3B,OAAO;YAAEC;QAAU;IACrB,OAAO,IAAIf,SAASc,WAAW;QAC7B,OAAO;YAAE,aAAa;YAAK,iBAAiBE;QAAS;IACvD,OAAO,IAAIf,YAAYa,aAAaZ,mBAAmBY,WAAW;QAChE,OAAO;YACL,aAAa;YACb,QAAQ;YACR,YAAYE,WAAWF,YAAY;YACnC,iBAAiBE;QACnB;IACF;IAEA,OAAO,CAAC;AACV;AAEA;;;;;;;;;;;CAWC,GACD,OAAO,MAAME,YAAY,CAAK,EAC5BC,mBAAmB,QAAQ,EAC3BC,eAAeC,iBAAiB,EAChC,GAAGV,WACe;IAClB,MAAMW,cAAcL,UAAUN;IAC9B,MAAMY,cAAcX,eAAeD;IACnC,MAAMS,gBAAgBzB,WAAW0B,mBAAmBvB,OAAO0B,IAAI;IAE/D,IAAID,aAAa;QACf,qBACE,KAAC1B;YACCuB,eAAeA;YACfD,kBAAkBA;YACjB,GAAGG,WAAW;YACd,GAAGX,SAAS;;IAGnB;IAEA,qBAAO,KAACZ;QAAaqB,eAAeA;QAAgB,GAAGE,WAAW;QAAG,GAAGX,SAAS;;AACnF,EAAE"}
+{"version":3,"sources":["../../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type FocusVisibleModeProps } from '../../hooks/useFocusVisibleClassName';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { RealClickable } from './RealClickable';\nimport { type StateProps } from './useState';\nimport styles from './Clickable.module.css';\n\nexport interface ClickableProps<T = HTMLElement>\n  extends RootComponentProps<T>,\n    FocusVisibleModeProps,\n    StateProps {}\n\n/**\n * Некликабельный компонент. Отключаем возможность нажимать на компонент.\n */\nconst NonClickable = <T,>({\n  href,\n  onClick,\n  onClickCapture,\n  activeClassName,\n  hoverClassName,\n  hasActive,\n  hasHover,\n  hovered,\n  unlockParentHover,\n  activated,\n  activeEffectDelay,\n  focusVisibleMode,\n  ...restProps\n}: ClickableProps<T>) => <RootComponent {...restProps} />;\n\n/**\n * Проверяем, является ли компонент кликабельным\n */\nexport function checkClickable<T>(props: ClickableProps<T>): boolean {\n  return (\n    (props.href !== undefined ||\n      props.onClick !== undefined ||\n      props.onClickCapture !== undefined ||\n      props.Component === 'a' ||\n      props.Component === 'button' ||\n      props.Component === 'label' ||\n      props.Component === 'input') &&\n    !props.disabled\n  );\n}\n\n/**\n * Определяет правильный компонент и его свойства\n *\n * - если передан Component, используем его\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n */\nfunction component<T>({\n  Component,\n  onClick,\n  onClickCapture,\n  href,\n  disabled,\n}: RootComponentProps<T>): RootComponentProps<T> {\n  if (Component !== undefined) {\n    return { Component, disabled };\n  } else if (href !== undefined) {\n    return {\n      Component: 'a',\n\n      /**\n       * Если ссылка отключена, добавляем атрибуты для доступности.\n       *\n       * - Тег `a` не поддерживает атрибут disabled, поэтому используем `aria-disabled`\n       * - Тег `a` без `href` не является ссылкой, поэтому добавляем `role=\"link\"`\n       *\n       * https://w3c.github.io/html-aria/#example-communicate-a-disabled-link-with-aria\n       */\n      ...(disabled && {\n        'aria-disabled': true,\n        'role': 'link',\n      }),\n    };\n  } else if (onClick !== undefined || onClickCapture !== undefined) {\n    return {\n      Component: 'div',\n      role: 'button',\n      ...(disabled ? { 'aria-disabled': true } : { tabIndex: 0 }),\n    };\n  }\n\n  return {};\n}\n\n/**\n * Базовый кликабельный корневой компонент.\n *\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n *\n * Отвечает за:\n *\n * - стейты наведения и нажатия\n * - a11y компонентов\n */\nexport const Clickable = <T,>(props: ClickableProps<T>): React.ReactNode => {\n  const commonProps = component(props);\n  const isClickable = checkClickable(props);\n  const Component = isClickable ? RealClickable : NonClickable;\n\n  const {\n    baseClassName,\n    disabled, // Игнорируем disabled из пропсов, т.к. он обрабатывается в commonProps\n    ...restProps\n  } = props;\n\n  return (\n    <Component\n      baseClassName={classNames(baseClassName, styles.host)}\n      {...commonProps}\n      {...restProps}\n    />\n  );\n};\n"],"names":["React","classNames","RootComponent","RealClickable","styles","NonClickable","href","onClick","onClickCapture","activeClassName","hoverClassName","hasActive","hasHover","hovered","unlockParentHover","activated","activeEffectDelay","focusVisibleMode","restProps","checkClickable","props","undefined","Component","disabled","component","role","tabIndex","Clickable","commonProps","isClickable","baseClassName","host"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAiC,oCAAiC;AACxF,SAASC,aAAa,QAAQ,qBAAkB;AAEhD,OAAOC,YAAY,yBAAyB;AAO5C;;CAEC,GACD,MAAMC,eAAe,CAAK,EACxBC,IAAI,EACJC,OAAO,EACPC,cAAc,EACdC,eAAe,EACfC,cAAc,EACdC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,iBAAiB,EACjBC,SAAS,EACTC,iBAAiB,EACjBC,gBAAgB,EAChB,GAAGC,WACe,iBAAK,KAAChB;QAAe,GAAGgB,SAAS;;AAErD;;CAEC,GACD,OAAO,SAASC,eAAkBC,KAAwB;IACxD,OACE,AAACA,CAAAA,MAAMd,IAAI,KAAKe,aACdD,MAAMb,OAAO,KAAKc,aAClBD,MAAMZ,cAAc,KAAKa,aACzBD,MAAME,SAAS,KAAK,OACpBF,MAAME,SAAS,KAAK,YACpBF,MAAME,SAAS,KAAK,WACpBF,MAAME,SAAS,KAAK,OAAM,KAC5B,CAACF,MAAMG,QAAQ;AAEnB;AAEA;;;;;;;CAOC,GACD,SAASC,UAAa,EACpBF,SAAS,EACTf,OAAO,EACPC,cAAc,EACdF,IAAI,EACJiB,QAAQ,EACc;IACtB,IAAID,cAAcD,WAAW;QAC3B,OAAO;YAAEC;YAAWC;QAAS;IAC/B,OAAO,IAAIjB,SAASe,WAAW;QAC7B,OAAO;YACLC,WAAW;YAEX;;;;;;;OAOC,GACD,GAAIC,YAAY;gBACd,iBAAiB;gBACjB,QAAQ;YACV,CAAC;QACH;IACF,OAAO,IAAIhB,YAAYc,aAAab,mBAAmBa,WAAW;QAChE,OAAO;YACLC,WAAW;YACXG,MAAM;YACN,GAAIF,WAAW;gBAAE,iBAAiB;YAAK,IAAI;gBAAEG,UAAU;YAAE,CAAC;QAC5D;IACF;IAEA,OAAO,CAAC;AACV;AAEA;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,YAAY,CAAKP;IAC5B,MAAMQ,cAAcJ,UAAUJ;IAC9B,MAAMS,cAAcV,eAAeC;IACnC,MAAME,YAAYO,cAAc1B,gBAAgBE;IAEhD,MAAM,EACJyB,aAAa,EACbP,QAAQ,EACR,GAAGL,WACJ,GAAGE;IAEJ,qBACE,KAACE;QACCQ,eAAe7B,WAAW6B,eAAe1B,OAAO2B,IAAI;QACnD,GAAGH,WAAW;QACd,GAAGV,SAAS;;AAGnB,EAAE"}

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

@@ -17,10 +17,10 @@ button.realClickable {
 }
 
 a.realClickable {
+  text-decoration: none;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  text-decoration: none;
 }
 
 /* stylelint-enable selector-max-type */

package/dist/cssm/components/ColorSchemeProvider/ColorSchemeProvider.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // TODO [@vkontakte/icons-sprite>=2.3.1]: Удалить use client, если он появился в IconAppearanceProvider
 import * as React from "react";
 import { IconAppearanceProvider } from "@vkontakte/icons";
-import { TokensClassProvider } from "../../lib/tokens/index.js";
+import { TokensClassProvider } from "../../lib/tokens/TokensClassProvider.js";
 import { ConfigProviderOverride } from "../ConfigProvider/ConfigProviderOverride.js";
 /**
  * @see https://vkcom.github.io/VKUI/#/ColorSchemeProvider

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ColorSchemeProvider/ColorSchemeProvider.tsx"],"sourcesContent":["'use client';\n\n// TODO [@vkontakte/icons-sprite>=2.3.1]: Удалить use client, если он появился в IconAppearanceProvider\n\nimport * as React from 'react';\nimport { IconAppearanceProvider } from '@vkontakte/icons';\nimport type { ColorSchemeType } from '../../lib/colorScheme';\nimport { TokensClassProvider } from '../../lib/tokens';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface ColorSchemeProviderProps {\n  value: ColorSchemeType;\n  children: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ColorSchemeProvider\n */\nexport const ColorSchemeProvider = ({\n  value,\n  children,\n}: ColorSchemeProviderProps): React.ReactNode => {\n  return (\n    <ConfigProviderOverride colorScheme={value}>\n      <IconAppearanceProvider value={value}>\n        <TokensClassProvider>{children}</TokensClassProvider>\n      </IconAppearanceProvider>\n    </ConfigProviderOverride>\n  );\n};\n"],"names":["React","IconAppearanceProvider","TokensClassProvider","ConfigProviderOverride","ColorSchemeProvider","value","children","colorScheme"],"mappings":"AAAA;;AAEA,uGAAuG;AAEvG,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,mBAAmB;AAE1D,SAASC,mBAAmB,QAAQ,4BAAmB;AACvD,SAASC,sBAAsB,QAAQ,8CAA2C;AAOlF;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAAC,EAClCC,KAAK,EACLC,QAAQ,EACiB;IACzB,qBACE,KAACH;QAAuBI,aAAaF;kBACnC,cAAA,KAACJ;YAAuBI,OAAOA;sBAC7B,cAAA,KAACH;0BAAqBI;;;;AAI9B,EAAE"}
+{"version":3,"sources":["../../../../src/components/ColorSchemeProvider/ColorSchemeProvider.tsx"],"sourcesContent":["'use client';\n\n// TODO [@vkontakte/icons-sprite>=2.3.1]: Удалить use client, если он появился в IconAppearanceProvider\n\nimport * as React from 'react';\nimport { IconAppearanceProvider } from '@vkontakte/icons';\nimport type { ColorSchemeType } from '../../lib/colorScheme';\nimport { TokensClassProvider } from '../../lib/tokens/TokensClassProvider';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface ColorSchemeProviderProps {\n  value: ColorSchemeType;\n  children: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ColorSchemeProvider\n */\nexport const ColorSchemeProvider = ({\n  value,\n  children,\n}: ColorSchemeProviderProps): React.ReactNode => {\n  return (\n    <ConfigProviderOverride colorScheme={value}>\n      <IconAppearanceProvider value={value}>\n        <TokensClassProvider>{children}</TokensClassProvider>\n      </IconAppearanceProvider>\n    </ConfigProviderOverride>\n  );\n};\n"],"names":["React","IconAppearanceProvider","TokensClassProvider","ConfigProviderOverride","ColorSchemeProvider","value","children","colorScheme"],"mappings":"AAAA;;AAEA,uGAAuG;AAEvG,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,mBAAmB;AAE1D,SAASC,mBAAmB,QAAQ,0CAAuC;AAC3E,SAASC,sBAAsB,QAAQ,8CAA2C;AAOlF;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAAC,EAClCC,KAAK,EACLC,QAAQ,EACiB;IACzB,qBACE,KAACH;QAAuBI,aAAaF;kBACnC,cAAA,KAACJ;YAAuBI,OAAOA;sBAC7B,cAAA,KAACH;0BAAqBI;;;;AAI9B,EAAE"}

package/dist/cssm/components/ConfigProvider/ConfigProvider.js

@@ -3,7 +3,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { IconAppearanceProvider } from "@vkontakte/icons";
 import { useAutoDetectColorScheme } from "../../hooks/useAutoDetectColorScheme.js";
-import { TokensClassProvider } from "../../lib/tokens/index.js";
+import { useAutoDetectDirection } from "../../hooks/useAutoDetectDirection.js";
+import { TokensClassProvider } from "../../lib/tokens/TokensClassProvider.js";
 import { excludeKeysWithUndefined } from "../../lib/utils.js";
 import { ConfigProviderContext, useConfigProvider, useConfigProviderContextMemo } from "./ConfigProviderContext.js";
 /**
@@ -16,9 +17,11 @@ import { ConfigProviderContext, useConfigProvider, useConfigProviderContextMemo
         ...props
     };
     const colorScheme = useAutoDetectColorScheme(mergeProps.colorScheme);
+    const direction = useAutoDetectDirection(mergeProps.direction);
     const configContext = useConfigProviderContextMemo({
         ...mergeProps,
-        colorScheme
+        colorScheme,
+        direction
     });
     return /*#__PURE__*/ _jsx(ConfigProviderContext.Provider, {
         value: configContext,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProvider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { IconAppearanceProvider } from '@vkontakte/icons';\nimport { useAutoDetectColorScheme } from '../../hooks/useAutoDetectColorScheme';\nimport { TokensClassProvider } from '../../lib/tokens';\nimport { excludeKeysWithUndefined } from '../../lib/utils';\nimport {\n  ConfigProviderContext,\n  type ConfigProviderContextInterface,\n  useConfigProvider,\n  useConfigProviderContextMemo,\n} from './ConfigProviderContext';\n\nexport interface ConfigProviderProps extends Partial<ConfigProviderContextInterface> {\n  children: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ConfigProvider\n */\nexport const ConfigProvider = (propsRaw: ConfigProviderProps): React.ReactNode => {\n  const props = excludeKeysWithUndefined(propsRaw);\n  const parentConfig = useConfigProvider();\n\n  const mergeProps = {\n    ...parentConfig,\n    ...props,\n  };\n\n  const colorScheme = useAutoDetectColorScheme(mergeProps.colorScheme);\n\n  const configContext = useConfigProviderContextMemo({\n    ...mergeProps,\n    colorScheme,\n  });\n\n  return (\n    <ConfigProviderContext.Provider value={configContext}>\n      <IconAppearanceProvider value={colorScheme}>\n        <TokensClassProvider>{mergeProps.children}</TokensClassProvider>\n      </IconAppearanceProvider>\n    </ConfigProviderContext.Provider>\n  );\n};\n"],"names":["React","IconAppearanceProvider","useAutoDetectColorScheme","TokensClassProvider","excludeKeysWithUndefined","ConfigProviderContext","useConfigProvider","useConfigProviderContextMemo","ConfigProvider","propsRaw","props","parentConfig","mergeProps","colorScheme","configContext","Provider","value","children"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,mBAAmB;AAC1D,SAASC,wBAAwB,QAAQ,0CAAuC;AAChF,SAASC,mBAAmB,QAAQ,4BAAmB;AACvD,SAASC,wBAAwB,QAAQ,qBAAkB;AAC3D,SACEC,qBAAqB,EAErBC,iBAAiB,EACjBC,4BAA4B,QACvB,6BAA0B;AAMjC;;CAEC,GACD,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAMC,QAAQN,yBAAyBK;IACvC,MAAME,eAAeL;IAErB,MAAMM,aAAa;QACjB,GAAGD,YAAY;QACf,GAAGD,KAAK;IACV;IAEA,MAAMG,cAAcX,yBAAyBU,WAAWC,WAAW;IAEnE,MAAMC,gBAAgBP,6BAA6B;QACjD,GAAGK,UAAU;QACbC;IACF;IAEA,qBACE,KAACR,sBAAsBU,QAAQ;QAACC,OAAOF;kBACrC,cAAA,KAACb;YAAuBe,OAAOH;sBAC7B,cAAA,KAACV;0BAAqBS,WAAWK,QAAQ;;;;AAIjD,EAAE"}
+{"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProvider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { IconAppearanceProvider } from '@vkontakte/icons';\nimport { useAutoDetectColorScheme } from '../../hooks/useAutoDetectColorScheme';\nimport { useAutoDetectDirection } from '../../hooks/useAutoDetectDirection';\nimport { TokensClassProvider } from '../../lib/tokens/TokensClassProvider';\nimport { excludeKeysWithUndefined } from '../../lib/utils';\nimport {\n  ConfigProviderContext,\n  type ConfigProviderContextInterface,\n  useConfigProvider,\n  useConfigProviderContextMemo,\n} from './ConfigProviderContext';\n\nexport interface ConfigProviderProps extends Partial<ConfigProviderContextInterface> {\n  children: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ConfigProvider\n */\nexport const ConfigProvider = (propsRaw: ConfigProviderProps): React.ReactNode => {\n  const props = excludeKeysWithUndefined(propsRaw);\n  const parentConfig = useConfigProvider();\n\n  const mergeProps = {\n    ...parentConfig,\n    ...props,\n  };\n\n  const colorScheme = useAutoDetectColorScheme(mergeProps.colorScheme);\n  const direction = useAutoDetectDirection(mergeProps.direction);\n\n  const configContext = useConfigProviderContextMemo({\n    ...mergeProps,\n    colorScheme,\n    direction,\n  });\n\n  return (\n    <ConfigProviderContext.Provider value={configContext}>\n      <IconAppearanceProvider value={colorScheme}>\n        <TokensClassProvider>{mergeProps.children}</TokensClassProvider>\n      </IconAppearanceProvider>\n    </ConfigProviderContext.Provider>\n  );\n};\n"],"names":["React","IconAppearanceProvider","useAutoDetectColorScheme","useAutoDetectDirection","TokensClassProvider","excludeKeysWithUndefined","ConfigProviderContext","useConfigProvider","useConfigProviderContextMemo","ConfigProvider","propsRaw","props","parentConfig","mergeProps","colorScheme","direction","configContext","Provider","value","children"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,mBAAmB;AAC1D,SAASC,wBAAwB,QAAQ,0CAAuC;AAChF,SAASC,sBAAsB,QAAQ,wCAAqC;AAC5E,SAASC,mBAAmB,QAAQ,0CAAuC;AAC3E,SAASC,wBAAwB,QAAQ,qBAAkB;AAC3D,SACEC,qBAAqB,EAErBC,iBAAiB,EACjBC,4BAA4B,QACvB,6BAA0B;AAMjC;;CAEC,GACD,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAMC,QAAQN,yBAAyBK;IACvC,MAAME,eAAeL;IAErB,MAAMM,aAAa;QACjB,GAAGD,YAAY;QACf,GAAGD,KAAK;IACV;IAEA,MAAMG,cAAcZ,yBAAyBW,WAAWC,WAAW;IACnE,MAAMC,YAAYZ,uBAAuBU,WAAWE,SAAS;IAE7D,MAAMC,gBAAgBR,6BAA6B;QACjD,GAAGK,UAAU;QACbC;QACAC;IACF;IAEA,qBACE,KAACT,sBAAsBW,QAAQ;QAACC,OAAOF;kBACrC,cAAA,KAACf;YAAuBiB,OAAOJ;sBAC7B,cAAA,KAACV;0BAAqBS,WAAWM,QAAQ;;;;AAIjD,EAAE"}

package/dist/cssm/components/ConfigProvider/ConfigProviderContext.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from "react";
 import { platform } from "../../lib/platform.js";
-import { DEFAULT_TOKENS_CLASS_NAMES } from "../../lib/tokens/index.js";
+import { DEFAULT_TOKENS_CLASS_NAMES } from "../../lib/tokens/constants.js";
 export const ConfigProviderContext = /*#__PURE__*/ React.createContext({
     hasCustomPanelHeaderAfter: false,
     customPanelHeaderAfterMinWidth: 90,
@@ -10,12 +10,14 @@ export const ConfigProviderContext = /*#__PURE__*/ React.createContext({
     platform: platform(),
     colorScheme: undefined,
     tokensClassNames: DEFAULT_TOKENS_CLASS_NAMES,
-    locale: 'ru'
+    locale: 'ru',
+    direction: undefined
 });
 export const useConfigProvider = ()=>React.useContext(ConfigProviderContext);
 export function useConfigProviderContextMemo(config) {
-    const { isWebView, hasCustomPanelHeaderAfter, customPanelHeaderAfterMinWidth, colorScheme, transitionMotionEnabled, platform, tokensClassNames, locale } = config;
-    return React.useMemo(()=>({
+    const { isWebView, hasCustomPanelHeaderAfter, customPanelHeaderAfterMinWidth, colorScheme, transitionMotionEnabled, platform, tokensClassNames, locale, direction } = config;
+    return React.useMemo(()=>{
+        return {
             isWebView,
             hasCustomPanelHeaderAfter,
             customPanelHeaderAfterMinWidth,
@@ -23,8 +25,10 @@ export function useConfigProviderContextMemo(config) {
             transitionMotionEnabled,
             platform,
             tokensClassNames,
-            locale
-        }), [
+            locale,
+            direction
+        };
+    }, [
         isWebView,
         hasCustomPanelHeaderAfter,
         customPanelHeaderAfterMinWidth,
@@ -32,7 +36,8 @@ export function useConfigProviderContextMemo(config) {
         transitionMotionEnabled,
         platform,
         tokensClassNames,
-        locale
+        locale,
+        direction
     ]);
 }
 

package/dist/cssm/components/ConfigProvider/ConfigProviderContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProviderContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ColorSchemeType } from '../../lib/colorScheme';\nimport { platform, type PlatformType } from '../../lib/platform';\nimport { DEFAULT_TOKENS_CLASS_NAMES, type TokensClassNames } from '../../lib/tokens';\n\nexport interface ConfigProviderContextInterface {\n  /**\n   * Подсказывает приложению, обёрнутому в `ConfigProvider`, где открыто приложение: внутри webview или в мобильном браузере.\n   *\n   * В условиях когда:\n   * - `isWebView={true}`\n   * - platform=\"ios\"\n   *\n   * для компонента `View` включается возможность навигации через смахивание.\n   */\n  isWebView: boolean;\n  /**\n   * При `true` слот `after` у `PanelHeader` игнорируется под размещение пользовательского\n   * \"плавающего\" элемента (например, панель управления webview).\n   *\n   * > Note: Правило не распространяется на `PanelHeader` внутри модальных окон, предоставляемых\n   * > библиотекой.\n   */\n  hasCustomPanelHeaderAfter: boolean;\n  /**\n   * Задаёт необходимый минимальную ширину слота `after` в `PanelHeader` под пользовательский\n   * \"плавающий\" элемент (например, ширина панели управления webview).\n   *\n   * Учитывается только при `hasCustomPanelHeaderAfter={true}` (см. документацию `hasCustomPanelHeaderAfter`).\n   *\n   * @default 90\n   */\n  customPanelHeaderAfterMinWidth: number | string;\n  /**\n   * Тип цветовой схемы – `light` или `dark`\n   */\n  colorScheme: ColorSchemeType | undefined;\n  /**\n   * Включена ли анимация переходов между экранами в `Root` и `View`\n   */\n  transitionMotionEnabled: boolean;\n  /**\n   * Платформа\n   */\n  platform: PlatformType;\n  /**\n   * CSS классы, определяющие набор токенов.\n   *\n   * - Используйте `{ light?: '<css_class>', dark?: '<css_class>' }`, чтобы задать для всех платформ одинаковый набор токенов для светлой и/или тёмной тем.\n   * - Используйте `{ [key in 'android' | 'ios' | 'vkcom']?: '<css_class>' }`, чтобы задать для одной или нескольких платформ свой набор токенов.\n   *\n   * @default\n   * {\n   *   android: {\n   *     light: 'vkui--vkBase--light',\n   *     dark: 'vkui--vkBase--dark',\n   *   },\n   *   ios: {\n   *     light: 'vkui--vkIOS--light',\n   *     dark: 'vkui--vkIOS--dark',\n   *   },\n   *   vkcom: {\n   *     light: 'vkui--vkCom--light',\n   *     dark: 'vkui--vkCom--dark',\n   *   }\n   * }\n   */\n  tokensClassNames: TokensClassNames;\n  /**\n   * Строка с языковой меткой BCP 47\n   */\n  locale: string;\n}\n\nexport const ConfigProviderContext: React.Context<ConfigProviderContextInterface> =\n  React.createContext<ConfigProviderContextInterface>({\n    hasCustomPanelHeaderAfter: false,\n    customPanelHeaderAfterMinWidth: 90,\n    isWebView: false,\n    transitionMotionEnabled: true,\n    platform: platform(),\n    colorScheme: undefined, // undefined обозначает что тема должна определиться автоматически\n    tokensClassNames: DEFAULT_TOKENS_CLASS_NAMES,\n    locale: 'ru',\n  });\n\nexport const useConfigProvider = (): ConfigProviderContextInterface =>\n  React.useContext(ConfigProviderContext);\n\nexport function useConfigProviderContextMemo(config: ConfigProviderContextInterface) {\n  const {\n    isWebView,\n    hasCustomPanelHeaderAfter,\n    customPanelHeaderAfterMinWidth,\n    colorScheme,\n    transitionMotionEnabled,\n    platform,\n    tokensClassNames,\n    locale,\n  } = config;\n\n  return React.useMemo<ConfigProviderContextInterface>(\n    () => ({\n      isWebView,\n      hasCustomPanelHeaderAfter,\n      customPanelHeaderAfterMinWidth,\n      colorScheme,\n      transitionMotionEnabled,\n      platform,\n      tokensClassNames,\n      locale,\n    }),\n    [\n      isWebView,\n      hasCustomPanelHeaderAfter,\n      customPanelHeaderAfterMinWidth,\n      colorScheme,\n      transitionMotionEnabled,\n      platform,\n      tokensClassNames,\n      locale,\n    ],\n  );\n}\n"],"names":["React","platform","DEFAULT_TOKENS_CLASS_NAMES","ConfigProviderContext","createContext","hasCustomPanelHeaderAfter","customPanelHeaderAfterMinWidth","isWebView","transitionMotionEnabled","colorScheme","undefined","tokensClassNames","locale","useConfigProvider","useContext","useConfigProviderContextMemo","config","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,QAAQ,QAA2B,wBAAqB;AACjE,SAASC,0BAA0B,QAA+B,4BAAmB;AAuErF,OAAO,MAAMC,sCACXH,MAAMI,aAAa,CAAiC;IAClDC,2BAA2B;IAC3BC,gCAAgC;IAChCC,WAAW;IACXC,yBAAyB;IACzBP,UAAUA;IACVQ,aAAaC;IACbC,kBAAkBT;IAClBU,QAAQ;AACV,GAAG;AAEL,OAAO,MAAMC,oBAAoB,IAC/Bb,MAAMc,UAAU,CAACX,uBAAuB;AAE1C,OAAO,SAASY,6BAA6BC,MAAsC;IACjF,MAAM,EACJT,SAAS,EACTF,yBAAyB,EACzBC,8BAA8B,EAC9BG,WAAW,EACXD,uBAAuB,EACvBP,QAAQ,EACRU,gBAAgB,EAChBC,MAAM,EACP,GAAGI;IAEJ,OAAOhB,MAAMiB,OAAO,CAClB,IAAO,CAAA;YACLV;YACAF;YACAC;YACAG;YACAD;YACAP;YACAU;YACAC;QACF,CAAA,GACA;QACEL;QACAF;QACAC;QACAG;QACAD;QACAP;QACAU;QACAC;KACD;AAEL"}
+{"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProviderContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ColorSchemeType } from '../../lib/colorScheme';\nimport { type Direction } from '../../lib/direction';\nimport { platform, type PlatformType } from '../../lib/platform';\nimport { DEFAULT_TOKENS_CLASS_NAMES } from '../../lib/tokens/constants';\nimport { type TokensClassNames } from '../../lib/tokens/types';\n\nexport interface ConfigProviderContextInterface {\n  /**\n   * Подсказывает приложению, обёрнутому в `ConfigProvider`, где открыто приложение: внутри webview или в мобильном браузере.\n   *\n   * В условиях когда:\n   * - `isWebView={true}`\n   * - platform=\"ios\"\n   *\n   * для компонента `View` включается возможность навигации через смахивание.\n   */\n  isWebView: boolean;\n  /**\n   * При `true` слот `after` у `PanelHeader` игнорируется под размещение пользовательского\n   * \"плавающего\" элемента (например, панель управления webview).\n   *\n   * > Note: Правило не распространяется на `PanelHeader` внутри модальных окон, предоставляемых\n   * > библиотекой.\n   */\n  hasCustomPanelHeaderAfter: boolean;\n  /**\n   * Задаёт необходимый минимальную ширину слота `after` в `PanelHeader` под пользовательский\n   * \"плавающий\" элемент (например, ширина панели управления webview).\n   *\n   * Учитывается только при `hasCustomPanelHeaderAfter={true}` (см. документацию `hasCustomPanelHeaderAfter`).\n   *\n   * @default 90\n   */\n  customPanelHeaderAfterMinWidth: number | string;\n  /**\n   * Тип цветовой схемы – `light` или `dark`\n   */\n  colorScheme: ColorSchemeType | undefined;\n  /**\n   * Включена ли анимация переходов между экранами в `Root` и `View`\n   */\n  transitionMotionEnabled: boolean;\n  /**\n   * Платформа\n   */\n  platform: PlatformType;\n  /**\n   * CSS классы, определяющие набор токенов.\n   *\n   * - Используйте `{ light?: '<css_class>', dark?: '<css_class>' }`, чтобы задать для всех платформ одинаковый набор токенов для светлой и/или тёмной тем.\n   * - Используйте `{ [key in 'android' | 'ios' | 'vkcom']?: '<css_class>' }`, чтобы задать для одной или нескольких платформ свой набор токенов.\n   *\n   * @default\n   * {\n   *   android: {\n   *     light: 'vkui--vkBase--light',\n   *     dark: 'vkui--vkBase--dark',\n   *   },\n   *   ios: {\n   *     light: 'vkui--vkIOS--light',\n   *     dark: 'vkui--vkIOS--dark',\n   *   },\n   *   vkcom: {\n   *     light: 'vkui--vkCom--light',\n   *     dark: 'vkui--vkCom--dark',\n   *   }\n   * }\n   */\n  tokensClassNames: TokensClassNames;\n  /**\n   * Строка с языковой меткой BCP 47\n   */\n  locale: string;\n  /**\n   * Направление контента.\n   *\n   * При использовании определенного значения, важно установить атрибут `dir` с таким же значением либо на дочерний элемент,\n   * либо на все страницу в целом.\n   *\n   * @default Определяется автоматически в зависимости от значения атрибута `dir` установленного на `body` страницы\n   */\n  direction: Direction | undefined;\n}\n\nexport const ConfigProviderContext: React.Context<ConfigProviderContextInterface> =\n  React.createContext<ConfigProviderContextInterface>({\n    hasCustomPanelHeaderAfter: false,\n    customPanelHeaderAfterMinWidth: 90,\n    isWebView: false,\n    transitionMotionEnabled: true,\n    platform: platform(),\n    colorScheme: undefined, // undefined обозначает что тема должна определиться автоматически\n    tokensClassNames: DEFAULT_TOKENS_CLASS_NAMES,\n    locale: 'ru',\n    direction: undefined,\n  });\n\nexport const useConfigProvider = (): ConfigProviderContextInterface =>\n  React.useContext(ConfigProviderContext);\n\nexport function useConfigProviderContextMemo(config: ConfigProviderContextInterface) {\n  const {\n    isWebView,\n    hasCustomPanelHeaderAfter,\n    customPanelHeaderAfterMinWidth,\n    colorScheme,\n    transitionMotionEnabled,\n    platform,\n    tokensClassNames,\n    locale,\n    direction,\n  } = config;\n\n  return React.useMemo<ConfigProviderContextInterface>(() => {\n    return {\n      isWebView,\n      hasCustomPanelHeaderAfter,\n      customPanelHeaderAfterMinWidth,\n      colorScheme,\n      transitionMotionEnabled,\n      platform,\n      tokensClassNames,\n      locale,\n      direction,\n    };\n  }, [\n    isWebView,\n    hasCustomPanelHeaderAfter,\n    customPanelHeaderAfterMinWidth,\n    colorScheme,\n    transitionMotionEnabled,\n    platform,\n    tokensClassNames,\n    locale,\n    direction,\n  ]);\n}\n"],"names":["React","platform","DEFAULT_TOKENS_CLASS_NAMES","ConfigProviderContext","createContext","hasCustomPanelHeaderAfter","customPanelHeaderAfterMinWidth","isWebView","transitionMotionEnabled","colorScheme","undefined","tokensClassNames","locale","direction","useConfigProvider","useContext","useConfigProviderContextMemo","config","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,QAAQ,QAA2B,wBAAqB;AACjE,SAASC,0BAA0B,QAAQ,gCAA6B;AAiFxE,OAAO,MAAMC,sCACXH,MAAMI,aAAa,CAAiC;IAClDC,2BAA2B;IAC3BC,gCAAgC;IAChCC,WAAW;IACXC,yBAAyB;IACzBP,UAAUA;IACVQ,aAAaC;IACbC,kBAAkBT;IAClBU,QAAQ;IACRC,WAAWH;AACb,GAAG;AAEL,OAAO,MAAMI,oBAAoB,IAC/Bd,MAAMe,UAAU,CAACZ,uBAAuB;AAE1C,OAAO,SAASa,6BAA6BC,MAAsC;IACjF,MAAM,EACJV,SAAS,EACTF,yBAAyB,EACzBC,8BAA8B,EAC9BG,WAAW,EACXD,uBAAuB,EACvBP,QAAQ,EACRU,gBAAgB,EAChBC,MAAM,EACNC,SAAS,EACV,GAAGI;IAEJ,OAAOjB,MAAMkB,OAAO,CAAiC;QACnD,OAAO;YACLX;YACAF;YACAC;YACAG;YACAD;YACAP;YACAU;YACAC;YACAC;QACF;IACF,GAAG;QACDN;QACAF;QACAC;QACAG;QACAD;QACAP;QACAU;QACAC;QACAC;KACD;AACH"}

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

@@ -1,12 +1,10 @@
 .host {
-  isolation: isolate;
   position: relative;
+  box-sizing: border-box;
   display: inline-grid;
   grid-auto-flow: column;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
-  block-size: auto;
 
   /**
    * `min-width` в контексте Flexbox по умолчанию имеет значение `auto`,
@@ -15,6 +13,8 @@
    * Подробности по ссылке https://stackoverflow.com/a/66689926/2903061
    */
   min-inline-size: 0;
+  block-size: auto;
+  isolation: isolate;
 }
 
 .sizeS {
@@ -118,12 +118,12 @@
 /* mode="outline" */
 
 .modeOutline::before {
-  content: '';
   position: absolute;
-  z-index: -1;
   inset: 0;
-  border-width: 1px;
+  z-index: -1;
+  content: '';
   border-style: solid;
+  border-width: 1px;
   border-radius: inherit;
 }
 
@@ -164,6 +164,6 @@
 }
 
 .outlineOverlay::before {
-  border-width: 0;
   background-color: var(--vkui--color_overlay_primary);
+  border-width: 0;
 }

package/dist/cssm/components/ContentCard/ContentCard.js

@@ -13,7 +13,7 @@ import styles from "./ContentCard.module.css";
  * @see https://vkcom.github.io/VKUI/#/ContentCard
  */ export const ContentCard = ({ overTitle, title, titleComponent = 'span', description, caption, // card props
 className, mode = 'shadow', style, getRootRef, // img props
-getRef, maxHeight, src, srcSet, alt = '', width, height, crossOrigin, decoding, loading, referrerPolicy, sizes, useMap, fetchPriority, hasHover = false, hasActive = false, Component = 'li', ...restProps })=>{
+getRef, maxHeight, src, srcSet, alt = '', width = '100%', height, crossOrigin, decoding, loading, referrerPolicy, sizes, useMap, fetchPriority, imageObjectFit, hasHover = false, hasActive = false, Component = 'li', ...restProps })=>{
     return /*#__PURE__*/ _jsx(Card, {
         mode: mode,
         getRootRef: getRootRef,
@@ -40,10 +40,11 @@ getRef, maxHeight, src, srcSet, alt = '', width, height, crossOrigin, decoding,
                     useMap: useMap,
                     ...getFetchPriorityProp(fetchPriority),
                     height: height,
+                    width: width,
                     style: {
-                        maxHeight
-                    },
-                    width: "100%"
+                        maxHeight,
+                        objectFit: imageObjectFit
+                    }
                 }),
                 /*#__PURE__*/ _jsxs("div", {
                     className: styles.body,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ContentCard/ContentCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { Card, type CardProps } from '../Card/Card';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './ContentCard.module.css';\n\nexport interface ContentCardProps\n  extends HasRootRef<HTMLDivElement>,\n    HasComponent,\n    Omit<TappableProps, 'getRootRef' | 'crossOrigin' | 'title'>,\n    Omit<React.ImgHTMLAttributes<HTMLImageElement>, keyof React.HTMLAttributes<HTMLImageElement>>,\n    HasRef<HTMLImageElement> {\n  /**\n   Текст над заголовком\n   */\n  overTitle?: React.ReactNode;\n  /**\n   Заголовок\n   */\n  title?: React.ReactNode;\n  /**\n   Позволяет поменять тег используемый для заголовка\n   */\n  titleComponent?: React.ElementType;\n  /**\n   Текст\n   */\n  description?: React.ReactNode;\n  /**\n   Нижний текст\n   */\n  caption?: React.ReactNode;\n  /**\n    Максимальная высота изображения\n   */\n  maxHeight?: number;\n  mode?: CardProps['mode'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ContentCard\n */\nexport const ContentCard = ({\n  overTitle,\n  title,\n  titleComponent = 'span',\n  description,\n  caption,\n  // card props\n  className,\n  mode = 'shadow',\n  style,\n  getRootRef,\n  // img props\n  getRef,\n  maxHeight,\n  src,\n  srcSet,\n  alt = '',\n  width,\n  height,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  useMap,\n  fetchPriority,\n  hasHover = false,\n  hasActive = false,\n  Component = 'li',\n  ...restProps\n}: ContentCardProps): React.ReactNode => {\n  return (\n    <Card\n      mode={mode}\n      getRootRef={getRootRef}\n      Component={Component}\n      style={style}\n      className={classNames(restProps.disabled && styles.disabled, className)}\n    >\n      <Tappable\n        {...restProps}\n        hasHover={hasHover}\n        hasActive={hasActive}\n        className={styles.tappable}\n      >\n        {(src || srcSet) && (\n          <img\n            ref={getRef}\n            className={styles.img}\n            src={src}\n            srcSet={srcSet}\n            alt={alt}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            useMap={useMap}\n            {...getFetchPriorityProp(fetchPriority)}\n            height={height}\n            style={{ maxHeight }}\n            width=\"100%\"\n          />\n        )}\n        <div className={styles.body}>\n          {hasReactNode(overTitle) && (\n            <Caption\n              className={classNames(styles.text, styles.overTitle)}\n              weight=\"1\"\n              level=\"3\"\n              caps\n            >\n              {overTitle}\n            </Caption>\n          )}\n          {hasReactNode(title) && (\n            <Headline className={styles.text} weight=\"2\" level=\"1\" Component={titleComponent}>\n              {title}\n            </Headline>\n          )}\n          {hasReactNode(description) && <Text className={styles.text}>{description}</Text>}\n          {hasReactNode(caption) && (\n            <Footnote className={classNames(styles.text, styles.caption)}>{caption}</Footnote>\n          )}\n        </div>\n      </Tappable>\n    </Card>\n  );\n};\n"],"names":["React","classNames","hasReactNode","getFetchPriorityProp","Card","Tappable","Caption","Footnote","Headline","Text","styles","ContentCard","overTitle","title","titleComponent","description","caption","className","mode","style","getRootRef","getRef","maxHeight","src","srcSet","alt","width","height","crossOrigin","decoding","loading","referrerPolicy","sizes","useMap","fetchPriority","hasHover","hasActive","Component","restProps","disabled","tappable","img","ref","div","body","text","weight","level","caps"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,oBAAoB,QAAQ,qBAAkB;AAEvD,SAASC,IAAI,QAAwB,kBAAe;AACpD,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,OAAOC,YAAY,2BAA2B;AAmC9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAS,EACTC,KAAK,EACLC,iBAAiB,MAAM,EACvBC,WAAW,EACXC,OAAO,EACP,aAAa;AACbC,SAAS,EACTC,OAAO,QAAQ,EACfC,KAAK,EACLC,UAAU,EACV,YAAY;AACZC,MAAM,EACNC,SAAS,EACTC,GAAG,EACHC,MAAM,EACNC,MAAM,EAAE,EACRC,KAAK,EACLC,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,cAAc,EACdC,KAAK,EACLC,MAAM,EACNC,aAAa,EACbC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,YAAY,IAAI,EAChB,GAAGC,WACc;IACjB,qBACE,KAAClC;QACCc,MAAMA;QACNE,YAAYA;QACZiB,WAAWA;QACXlB,OAAOA;QACPF,WAAWhB,WAAWqC,UAAUC,QAAQ,IAAI7B,OAAO6B,QAAQ,EAAEtB;kBAE7D,cAAA,MAACZ;YACE,GAAGiC,SAAS;YACbH,UAAUA;YACVC,WAAWA;YACXnB,WAAWP,OAAO8B,QAAQ;;gBAExBjB,CAAAA,OAAOC,MAAK,mBACZ,KAACiB;oBACCC,KAAKrB;oBACLJ,WAAWP,OAAO+B,GAAG;oBACrBlB,KAAKA;oBACLC,QAAQA;oBACRC,KAAKA;oBACLG,aAAaA;oBACbC,UAAUA;oBACVC,SAASA;oBACTC,gBAAgBA;oBAChBC,OAAOA;oBACPC,QAAQA;oBACP,GAAG9B,qBAAqB+B,cAAc;oBACvCP,QAAQA;oBACRR,OAAO;wBAAEG;oBAAU;oBACnBI,OAAM;;8BAGV,MAACiB;oBAAI1B,WAAWP,OAAOkC,IAAI;;wBACxB1C,aAAaU,4BACZ,KAACN;4BACCW,WAAWhB,WAAWS,OAAOmC,IAAI,EAAEnC,OAAOE,SAAS;4BACnDkC,QAAO;4BACPC,OAAM;4BACNC,IAAI;sCAEHpC;;wBAGJV,aAAaW,wBACZ,KAACL;4BAASS,WAAWP,OAAOmC,IAAI;4BAAEC,QAAO;4BAAIC,OAAM;4BAAIV,WAAWvB;sCAC/DD;;wBAGJX,aAAaa,8BAAgB,KAACN;4BAAKQ,WAAWP,OAAOmC,IAAI;sCAAG9B;;wBAC5Db,aAAac,0BACZ,KAACT;4BAASU,WAAWhB,WAAWS,OAAOmC,IAAI,EAAEnC,OAAOM,OAAO;sCAAIA;;;;;;;AAM3E,EAAE"}
+{"version":3,"sources":["../../../../src/components/ContentCard/ContentCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { Card, type CardProps } from '../Card/Card';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './ContentCard.module.css';\n\nexport interface ContentCardProps\n  extends HasRootRef<HTMLDivElement>,\n    HasComponent,\n    Omit<TappableProps, 'getRootRef' | 'crossOrigin' | 'title'>,\n    Omit<React.ImgHTMLAttributes<HTMLImageElement>, keyof React.HTMLAttributes<HTMLImageElement>>,\n    HasRef<HTMLImageElement> {\n  /**\n   Текст над заголовком\n   */\n  overTitle?: React.ReactNode;\n  /**\n   Заголовок\n   */\n  title?: React.ReactNode;\n  /**\n   Позволяет поменять тег используемый для заголовка\n   */\n  titleComponent?: React.ElementType;\n  /**\n   Текст\n   */\n  description?: React.ReactNode;\n  /**\n   Нижний текст\n   */\n  caption?: React.ReactNode;\n  /**\n    Максимальная высота изображения\n   */\n  maxHeight?: number;\n  mode?: CardProps['mode'];\n  /**\n   * Пользовательское значения стиля `object-fit` для картинки\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit)\n   */\n  imageObjectFit?: React.CSSProperties['objectFit'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ContentCard\n */\nexport const ContentCard = ({\n  overTitle,\n  title,\n  titleComponent = 'span',\n  description,\n  caption,\n  // card props\n  className,\n  mode = 'shadow',\n  style,\n  getRootRef,\n  // img props\n  getRef,\n  maxHeight,\n  src,\n  srcSet,\n  alt = '',\n  width = '100%',\n  height,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  useMap,\n  fetchPriority,\n  imageObjectFit,\n  hasHover = false,\n  hasActive = false,\n  Component = 'li',\n  ...restProps\n}: ContentCardProps): React.ReactNode => {\n  return (\n    <Card\n      mode={mode}\n      getRootRef={getRootRef}\n      Component={Component}\n      style={style}\n      className={classNames(restProps.disabled && styles.disabled, className)}\n    >\n      <Tappable\n        {...restProps}\n        hasHover={hasHover}\n        hasActive={hasActive}\n        className={styles.tappable}\n      >\n        {(src || srcSet) && (\n          <img\n            ref={getRef}\n            className={styles.img}\n            src={src}\n            srcSet={srcSet}\n            alt={alt}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            useMap={useMap}\n            {...getFetchPriorityProp(fetchPriority)}\n            height={height}\n            width={width}\n            style={{ maxHeight, objectFit: imageObjectFit }}\n          />\n        )}\n        <div className={styles.body}>\n          {hasReactNode(overTitle) && (\n            <Caption\n              className={classNames(styles.text, styles.overTitle)}\n              weight=\"1\"\n              level=\"3\"\n              caps\n            >\n              {overTitle}\n            </Caption>\n          )}\n          {hasReactNode(title) && (\n            <Headline className={styles.text} weight=\"2\" level=\"1\" Component={titleComponent}>\n              {title}\n            </Headline>\n          )}\n          {hasReactNode(description) && <Text className={styles.text}>{description}</Text>}\n          {hasReactNode(caption) && (\n            <Footnote className={classNames(styles.text, styles.caption)}>{caption}</Footnote>\n          )}\n        </div>\n      </Tappable>\n    </Card>\n  );\n};\n"],"names":["React","classNames","hasReactNode","getFetchPriorityProp","Card","Tappable","Caption","Footnote","Headline","Text","styles","ContentCard","overTitle","title","titleComponent","description","caption","className","mode","style","getRootRef","getRef","maxHeight","src","srcSet","alt","width","height","crossOrigin","decoding","loading","referrerPolicy","sizes","useMap","fetchPriority","imageObjectFit","hasHover","hasActive","Component","restProps","disabled","tappable","img","ref","objectFit","div","body","text","weight","level","caps"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,oBAAoB,QAAQ,qBAAkB;AAEvD,SAASC,IAAI,QAAwB,kBAAe;AACpD,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,OAAOC,YAAY,2BAA2B;AAwC9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAS,EACTC,KAAK,EACLC,iBAAiB,MAAM,EACvBC,WAAW,EACXC,OAAO,EACP,aAAa;AACbC,SAAS,EACTC,OAAO,QAAQ,EACfC,KAAK,EACLC,UAAU,EACV,YAAY;AACZC,MAAM,EACNC,SAAS,EACTC,GAAG,EACHC,MAAM,EACNC,MAAM,EAAE,EACRC,QAAQ,MAAM,EACdC,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,cAAc,EACdC,KAAK,EACLC,MAAM,EACNC,aAAa,EACbC,cAAc,EACdC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,YAAY,IAAI,EAChB,GAAGC,WACc;IACjB,qBACE,KAACnC;QACCc,MAAMA;QACNE,YAAYA;QACZkB,WAAWA;QACXnB,OAAOA;QACPF,WAAWhB,WAAWsC,UAAUC,QAAQ,IAAI9B,OAAO8B,QAAQ,EAAEvB;kBAE7D,cAAA,MAACZ;YACE,GAAGkC,SAAS;YACbH,UAAUA;YACVC,WAAWA;YACXpB,WAAWP,OAAO+B,QAAQ;;gBAExBlB,CAAAA,OAAOC,MAAK,mBACZ,KAACkB;oBACCC,KAAKtB;oBACLJ,WAAWP,OAAOgC,GAAG;oBACrBnB,KAAKA;oBACLC,QAAQA;oBACRC,KAAKA;oBACLG,aAAaA;oBACbC,UAAUA;oBACVC,SAASA;oBACTC,gBAAgBA;oBAChBC,OAAOA;oBACPC,QAAQA;oBACP,GAAG9B,qBAAqB+B,cAAc;oBACvCP,QAAQA;oBACRD,OAAOA;oBACPP,OAAO;wBAAEG;wBAAWsB,WAAWT;oBAAe;;8BAGlD,MAACU;oBAAI5B,WAAWP,OAAOoC,IAAI;;wBACxB5C,aAAaU,4BACZ,KAACN;4BACCW,WAAWhB,WAAWS,OAAOqC,IAAI,EAAErC,OAAOE,SAAS;4BACnDoC,QAAO;4BACPC,OAAM;4BACNC,IAAI;sCAEHtC;;wBAGJV,aAAaW,wBACZ,KAACL;4BAASS,WAAWP,OAAOqC,IAAI;4BAAEC,QAAO;4BAAIC,OAAM;4BAAIX,WAAWxB;sCAC/DD;;wBAGJX,aAAaa,8BAAgB,KAACN;4BAAKQ,WAAWP,OAAOqC,IAAI;sCAAGhC;;wBAC5Db,aAAac,0BACZ,KAACT;4BAASU,WAAWhB,WAAWS,OAAOqC,IAAI,EAAErC,OAAOM,OAAO;sCAAIA;;;;;;;AAM3E,EAAE"}

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

@@ -8,20 +8,20 @@
 }
 
 .tappable {
-  border-radius: var(--vkui--size_card_border_radius--regular);
-  text-decoration: none;
-  color: var(--vkui--color_text_primary);
-  block-size: 100%;
   display: block;
+  block-size: 100%;
+  color: var(--vkui--color_text_primary);
+  text-decoration: none;
+  border-radius: var(--vkui--size_card_border_radius--regular);
 }
 
 .img {
-  object-fit: cover;
   display: block;
+  object-fit: cover;
   border-start-start-radius: var(--vkui--size_card_border_radius--regular);
   border-start-end-radius: var(--vkui--size_card_border_radius--regular);
-  border-end-end-radius: 0;
   border-end-start-radius: 0;
+  border-end-end-radius: 0;
 }
 
 .text:not(:last-child) {

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

@@ -1,12 +1,12 @@
 .host {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   padding-inline: 5px;
+  color: var(--vkui_internal--counter_foreground);
   text-align: center;
-  box-sizing: border-box;
   background: var(--vkui_internal--counter_background);
-  color: var(--vkui_internal--counter_foreground);
 
   --vkui_internal--counter_background: transparent;
   --vkui_internal--counter_foreground: var(--vkui--color_text_contrast);
@@ -94,14 +94,14 @@
 /*----------------------------------*/
 
 .sizeM {
-  block-size: 24px;
   min-inline-size: 24px;
+  block-size: 24px;
   border-radius: 12px;
 }
 
 .sizeS {
-  block-size: 18px;
   min-inline-size: 18px;
+  block-size: 18px;
   border-radius: 9px;
 }
 

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

@@ -1,8 +1,8 @@
 .host {
   inline-size: 100%;
   block-size: 100%;
-  overflow-y: auto;
   overflow-x: hidden;
+  overflow-y: auto;
 }
 
 @supports (scrollbar-color: auto) {
@@ -39,9 +39,9 @@
   .host::-webkit-scrollbar-thumb,
   .host::-webkit-scrollbar-thumb {
     background-color: var(--vkui--color_icon_tertiary_alpha);
+    background-clip: padding-box, content-box;
     border: 3px solid transparent;
     border-radius: 6px;
-    background-clip: padding-box, content-box;
   }
 
   .host::-webkit-scrollbar-thumb:hover,