@vkontakte/vkui 7.0.0-dev-efd91c.2 → 7.0.0-dev-efd91c.3

package/dist/cssm/components/AspectRatio/AspectRatio.js

@@ -9,16 +9,13 @@ import styles from "./AspectRatio.module.css";
 
  * @since 5.5.0
  * @see https://vkcom.github.io/VKUI/#/AspectRatio
- */ export function AspectRatio({ ratio, mode = 'stretch', style: styleProp, ...props }) {
+ */ export function AspectRatio({ ratio, mode = 'stretch', ...props }) {
     const style = {
         '--vkui_internal--aspect_ratio': String(ratio)
     };
     return /*#__PURE__*/ _jsx(RootComponent, {
         baseClassName: classNames(styles.host, mode === 'stretch' && styles.modeStretch),
-        style: {
-            ...styleProp,
-            ...style
-        },
+        baseStyle: style,
         ...props
     });
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AspectRatio/AspectRatio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { CSSCustomProperties } from '../../types';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport styles from './AspectRatio.module.css';\n\nexport interface AspectRatioProps extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'> {\n  className?: string;\n  /**\n   * По умолчанию, вложенный контент будет растягиваться и заполнять весь блок.\n   */\n  mode?: 'stretch' | 'none';\n  /**\n   * Например 16 / 9, 4 / 3, 1920 / 1080\n   */\n  ratio: number;\n}\n\n/**\n * `AspectRatio` позволяет поддерживать постоянное соотношение ширины и высоты.\n * Его можно использовать для отображения изображений, карт, видео и других медиафайлов.\n\n * @since 5.5.0\n * @see https://vkcom.github.io/VKUI/#/AspectRatio\n */\nexport function AspectRatio({\n  ratio,\n  mode = 'stretch',\n  style: styleProp,\n  ...props\n}: AspectRatioProps): JSX.Element {\n  const style: React.CSSProperties & CSSCustomProperties = {\n    '--vkui_internal--aspect_ratio': String(ratio),\n  };\n\n  return (\n    <RootComponent\n      baseClassName={classNames(styles.host, mode === 'stretch' && styles.modeStretch)}\n      style={{ ...styleProp, ...style }}\n      {...props}\n    />\n  );\n}\n"],"names":["React","classNames","RootComponent","styles","AspectRatio","ratio","mode","style","styleProp","props","String","baseClassName","host","modeStretch"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAiC,oCAAiC;AACxF,OAAOC,YAAY,2BAA2B;AAc9C;;;;;;CAMC,GACD,OAAO,SAASC,YAAY,EAC1BC,KAAK,EACLC,OAAO,SAAS,EAChBC,OAAOC,SAAS,EAChB,GAAGC,OACc;IACjB,MAAMF,QAAmD;QACvD,iCAAiCG,OAAOL;IAC1C;IAEA,qBACE,KAACH;QACCS,eAAeV,WAAWE,OAAOS,IAAI,EAAEN,SAAS,aAAaH,OAAOU,WAAW;QAC/EN,OAAO;YAAE,GAAGC,SAAS;YAAE,GAAGD,KAAK;QAAC;QAC/B,GAAGE,KAAK;;AAGf"}
+{"version":3,"sources":["../../../../src/components/AspectRatio/AspectRatio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { CSSCustomProperties } from '../../types';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport styles from './AspectRatio.module.css';\n\nexport interface AspectRatioProps extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'> {\n  className?: string;\n  /**\n   * По умолчанию, вложенный контент будет растягиваться и заполнять весь блок.\n   */\n  mode?: 'stretch' | 'none';\n  /**\n   * Например 16 / 9, 4 / 3, 1920 / 1080\n   */\n  ratio: number;\n}\n\n/**\n * `AspectRatio` позволяет поддерживать постоянное соотношение ширины и высоты.\n * Его можно использовать для отображения изображений, карт, видео и других медиафайлов.\n\n * @since 5.5.0\n * @see https://vkcom.github.io/VKUI/#/AspectRatio\n */\nexport function AspectRatio({ ratio, mode = 'stretch', ...props }: AspectRatioProps): JSX.Element {\n  const style: React.CSSProperties & CSSCustomProperties = {\n    '--vkui_internal--aspect_ratio': String(ratio),\n  };\n\n  return (\n    <RootComponent\n      baseClassName={classNames(styles.host, mode === 'stretch' && styles.modeStretch)}\n      baseStyle={style}\n      {...props}\n    />\n  );\n}\n"],"names":["React","classNames","RootComponent","styles","AspectRatio","ratio","mode","props","style","String","baseClassName","host","modeStretch","baseStyle"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAiC,oCAAiC;AACxF,OAAOC,YAAY,2BAA2B;AAc9C;;;;;;CAMC,GACD,OAAO,SAASC,YAAY,EAAEC,KAAK,EAAEC,OAAO,SAAS,EAAE,GAAGC,OAAyB;IACjF,MAAMC,QAAmD;QACvD,iCAAiCC,OAAOJ;IAC1C;IAEA,qBACE,KAACH;QACCQ,eAAeT,WAAWE,OAAOQ,IAAI,EAAEL,SAAS,aAAaH,OAAOS,WAAW;QAC/EC,WAAWL;QACV,GAAGD,KAAK;;AAGf"}

package/dist/cssm/components/Avatar/Avatar.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "@vkontakte/vkjs";
 import { ImageBase } from "../ImageBase/ImageBase.js";
+import { ImageBaseOverlay } from "../ImageBase/ImageBaseOverlay/ImageBaseOverlay.js";
 import { AvatarBadge } from "./AvatarBadge/AvatarBadge.js";
 import { AvatarBadgeWithPreset } from "./AvatarBadge/AvatarBadgeWithPreset.js";
 import { getInitialsFontSize } from "./helpers.js";
@@ -48,7 +49,7 @@ Avatar.Badge = AvatarBadge;
 Avatar.Badge.displayName = 'Avatar.Badge';
 Avatar.BadgeWithPreset = AvatarBadgeWithPreset;
 Avatar.BadgeWithPreset.displayName = 'Avatar.BadgeWithPreset';
-Avatar.Overlay = ImageBase.Overlay;
+Avatar.Overlay = ImageBaseOverlay;
 Avatar.Overlay.displayName = 'Avatar.Overlay';
 Avatar.getInitialsFontSize = getInitialsFontSize;
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { AvatarBadge, type AvatarBadgeProps } from './AvatarBadge/AvatarBadge';\nimport {\n  AvatarBadgeWithPreset,\n  type AvatarBadgeWithPresetProps,\n} from './AvatarBadge/AvatarBadgeWithPreset';\nimport { getInitialsFontSize } from './helpers';\nimport styles from './Avatar.module.css';\n\nexport type {\n  AvatarBadgeProps,\n  AvatarBadgeWithPresetProps,\n  ImageBaseOverlayProps as AvatarOverlayProps,\n};\n\nconst AVATAR_DEFAULT_SIZE = 48;\n\nconst COLORS_NUMBER_TO_TEXT_MAP = {\n  1: 'red',\n  2: 'orange',\n  3: 'yellow',\n  4: 'green',\n  5: 'l-blue',\n  6: 'violet',\n} as const;\n\n/**\n * Градиенты, которые можно использовать в алгоритме поиска градиентов по числовому идентификатору пользователя.\n * @example user.id % 6 + 1\n */\nexport type InitialsAvatarNumberGradients = keyof typeof COLORS_NUMBER_TO_TEXT_MAP;\n\nexport type InitialsAvatarTextGradients =\n  | (typeof COLORS_NUMBER_TO_TEXT_MAP)[InitialsAvatarNumberGradients]\n  | 'blue';\n\nconst gradientStyles = {\n  'red': styles.gradientRed,\n  'orange': styles.gradientOrange,\n  'yellow': styles.gradientYellow,\n  'green': styles.gradientGreen,\n  'blue': styles.gradientBlue,\n  'l-blue': styles.gradientLBlue,\n  'violet': styles.gradientViolet,\n};\n\nexport interface AvatarProps extends Omit<ImageBaseProps, 'widthSize' | 'heightSize'> {\n  /**\n   * Инициалы пользователя.\n   *\n   * > Note: Если аватарка не прогрузится, то пользователь увидит инициалы.\n   *\n   * > ⚠️ Перебивает `fallbackIcon`.\n   */\n  initials?: string;\n  /**\n   * Задаёт градиент для фона.\n   *\n   * Если передано число, то оно будет сконвертировано в строчное представление цвета по следующей схеме:\n   *\n   * 1: 'red'\n   * 2: 'orange'\n   * 3: 'yellow'\n   * 4: 'green'\n   * 5: 'l-blue'\n   * 6: 'violet'\n   *\n   * > Если необходимо задать свой градиент, то используйте значение `\"custom\"` и определите цвет градиента либо через\n   * > свой класс в `className`, либо через `style={{ backgroundImage: \"...\" }}`.\n   */\n  gradientColor?: InitialsAvatarNumberGradients | InitialsAvatarTextGradients | 'custom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Avatar\n */\nexport const Avatar: React.FC<AvatarProps> & {\n  Badge: typeof AvatarBadge;\n  BadgeWithPreset: typeof AvatarBadgeWithPreset;\n  Overlay: typeof ImageBase.Overlay;\n  getInitialsFontSize: typeof getInitialsFontSize;\n} = ({\n  size = AVATAR_DEFAULT_SIZE,\n  className,\n  gradientColor,\n  initials,\n  fallbackIcon: fallbackIconProp,\n  children,\n  ...restProps\n}: AvatarProps) => {\n  const gradientName =\n    typeof gradientColor === 'number' ? COLORS_NUMBER_TO_TEXT_MAP[gradientColor] : gradientColor;\n  const isGradientNotCustom = gradientName && gradientName !== 'custom';\n\n  const fallbackIcon = initials ? (\n    <div\n      className={styles.initials}\n      style={{\n        fontSize: getInitialsFontSize(size),\n      }}\n    >\n      {initials}\n    </div>\n  ) : (\n    fallbackIconProp\n  );\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      fallbackIcon={fallbackIcon}\n      className={classNames(\n        styles.host,\n        gradientName && styles.hasGradient,\n        isGradientNotCustom && gradientStyles[gradientName],\n        className,\n      )}\n    >\n      {children}\n    </ImageBase>\n  );\n};\n\nAvatar.displayName = 'Avatar';\n\nAvatar.Badge = AvatarBadge;\nAvatar.Badge.displayName = 'Avatar.Badge';\n\nAvatar.BadgeWithPreset = AvatarBadgeWithPreset;\nAvatar.BadgeWithPreset.displayName = 'Avatar.BadgeWithPreset';\n\nAvatar.Overlay = ImageBase.Overlay;\nAvatar.Overlay.displayName = 'Avatar.Overlay';\n\nAvatar.getInitialsFontSize = getInitialsFontSize;\n"],"names":["classNames","ImageBase","AvatarBadge","AvatarBadgeWithPreset","getInitialsFontSize","styles","AVATAR_DEFAULT_SIZE","COLORS_NUMBER_TO_TEXT_MAP","gradientStyles","gradientRed","gradientOrange","gradientYellow","gradientGreen","gradientBlue","gradientLBlue","gradientViolet","Avatar","size","className","gradientColor","initials","fallbackIcon","fallbackIconProp","children","restProps","gradientName","isGradientNotCustom","div","style","fontSize","host","hasGradient","displayName","Badge","BadgeWithPreset","Overlay"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,QAAyD,4BAAyB;AACpG,SAASC,WAAW,QAA+B,+BAA4B;AAC/E,SACEC,qBAAqB,QAEhB,yCAAsC;AAC7C,SAASC,mBAAmB,QAAQ,eAAY;AAChD,OAAOC,YAAY,sBAAsB;AAQzC,MAAMC,sBAAsB;AAE5B,MAAMC,4BAA4B;IAChC,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;AACL;AAYA,MAAMC,iBAAiB;IACrB,OAAOH,OAAOI,WAAW;IACzB,UAAUJ,OAAOK,cAAc;IAC/B,UAAUL,OAAOM,cAAc;IAC/B,SAASN,OAAOO,aAAa;IAC7B,QAAQP,OAAOQ,YAAY;IAC3B,UAAUR,OAAOS,aAAa;IAC9B,UAAUT,OAAOU,cAAc;AACjC;AA6BA;;CAEC,GACD,OAAO,MAAMC,SAKT,CAAC,EACHC,OAAOX,mBAAmB,EAC1BY,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,cAAcC,gBAAgB,EAC9BC,QAAQ,EACR,GAAGC,WACS;IACZ,MAAMC,eACJ,OAAON,kBAAkB,WAAWZ,yBAAyB,CAACY,cAAc,GAAGA;IACjF,MAAMO,sBAAsBD,gBAAgBA,iBAAiB;IAE7D,MAAMJ,eAAeD,yBACnB,KAACO;QACCT,WAAWb,OAAOe,QAAQ;QAC1BQ,OAAO;YACLC,UAAUzB,oBAAoBa;QAChC;kBAECG;SAGHE;IAGF,qBACE,KAACrB;QACE,GAAGuB,SAAS;QACbP,MAAMA;QACNI,cAAcA;QACdH,WAAWlB,WACTK,OAAOyB,IAAI,EACXL,gBAAgBpB,OAAO0B,WAAW,EAClCL,uBAAuBlB,cAAc,CAACiB,aAAa,EACnDP;kBAGDK;;AAGP,EAAE;AAEFP,OAAOgB,WAAW,GAAG;AAErBhB,OAAOiB,KAAK,GAAG/B;AACfc,OAAOiB,KAAK,CAACD,WAAW,GAAG;AAE3BhB,OAAOkB,eAAe,GAAG/B;AACzBa,OAAOkB,eAAe,CAACF,WAAW,GAAG;AAErChB,OAAOmB,OAAO,GAAGlC,UAAUkC,OAAO;AAClCnB,OAAOmB,OAAO,CAACH,WAAW,GAAG;AAE7BhB,OAAOZ,mBAAmB,GAAGA"}
+{"version":3,"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport {\n  ImageBaseOverlay,\n  type ImageBaseOverlayProps,\n} from '../ImageBase/ImageBaseOverlay/ImageBaseOverlay';\nimport { AvatarBadge, type AvatarBadgeProps } from './AvatarBadge/AvatarBadge';\nimport {\n  AvatarBadgeWithPreset,\n  type AvatarBadgeWithPresetProps,\n} from './AvatarBadge/AvatarBadgeWithPreset';\nimport { getInitialsFontSize } from './helpers';\nimport styles from './Avatar.module.css';\n\nexport type {\n  AvatarBadgeProps,\n  AvatarBadgeWithPresetProps,\n  ImageBaseOverlayProps as AvatarOverlayProps,\n};\n\nconst AVATAR_DEFAULT_SIZE = 48;\n\nconst COLORS_NUMBER_TO_TEXT_MAP = {\n  1: 'red',\n  2: 'orange',\n  3: 'yellow',\n  4: 'green',\n  5: 'l-blue',\n  6: 'violet',\n} as const;\n\n/**\n * Градиенты, которые можно использовать в алгоритме поиска градиентов по числовому идентификатору пользователя.\n * @example user.id % 6 + 1\n */\nexport type InitialsAvatarNumberGradients = keyof typeof COLORS_NUMBER_TO_TEXT_MAP;\n\nexport type InitialsAvatarTextGradients =\n  | (typeof COLORS_NUMBER_TO_TEXT_MAP)[InitialsAvatarNumberGradients]\n  | 'blue';\n\nconst gradientStyles = {\n  'red': styles.gradientRed,\n  'orange': styles.gradientOrange,\n  'yellow': styles.gradientYellow,\n  'green': styles.gradientGreen,\n  'blue': styles.gradientBlue,\n  'l-blue': styles.gradientLBlue,\n  'violet': styles.gradientViolet,\n};\n\nexport interface AvatarProps extends Omit<ImageBaseProps, 'widthSize' | 'heightSize'> {\n  /**\n   * Инициалы пользователя.\n   *\n   * > Note: Если аватарка не прогрузится, то пользователь увидит инициалы.\n   *\n   * > ⚠️ Перебивает `fallbackIcon`.\n   */\n  initials?: string;\n  /**\n   * Задаёт градиент для фона.\n   *\n   * Если передано число, то оно будет сконвертировано в строчное представление цвета по следующей схеме:\n   *\n   * 1: 'red'\n   * 2: 'orange'\n   * 3: 'yellow'\n   * 4: 'green'\n   * 5: 'l-blue'\n   * 6: 'violet'\n   *\n   * > Если необходимо задать свой градиент, то используйте значение `\"custom\"` и определите цвет градиента либо через\n   * > свой класс в `className`, либо через `style={{ backgroundImage: \"...\" }}`.\n   */\n  gradientColor?: InitialsAvatarNumberGradients | InitialsAvatarTextGradients | 'custom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Avatar\n */\nexport const Avatar: React.FC<AvatarProps> & {\n  Badge: typeof AvatarBadge;\n  BadgeWithPreset: typeof AvatarBadgeWithPreset;\n  Overlay: typeof ImageBase.Overlay;\n  getInitialsFontSize: typeof getInitialsFontSize;\n} = ({\n  size = AVATAR_DEFAULT_SIZE,\n  className,\n  gradientColor,\n  initials,\n  fallbackIcon: fallbackIconProp,\n  children,\n  ...restProps\n}: AvatarProps) => {\n  const gradientName =\n    typeof gradientColor === 'number' ? COLORS_NUMBER_TO_TEXT_MAP[gradientColor] : gradientColor;\n  const isGradientNotCustom = gradientName && gradientName !== 'custom';\n\n  const fallbackIcon = initials ? (\n    <div\n      className={styles.initials}\n      style={{\n        fontSize: getInitialsFontSize(size),\n      }}\n    >\n      {initials}\n    </div>\n  ) : (\n    fallbackIconProp\n  );\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      fallbackIcon={fallbackIcon}\n      className={classNames(\n        styles.host,\n        gradientName && styles.hasGradient,\n        isGradientNotCustom && gradientStyles[gradientName],\n        className,\n      )}\n    >\n      {children}\n    </ImageBase>\n  );\n};\n\nAvatar.displayName = 'Avatar';\n\nAvatar.Badge = AvatarBadge;\nAvatar.Badge.displayName = 'Avatar.Badge';\n\nAvatar.BadgeWithPreset = AvatarBadgeWithPreset;\nAvatar.BadgeWithPreset.displayName = 'Avatar.BadgeWithPreset';\n\nAvatar.Overlay = ImageBaseOverlay;\nAvatar.Overlay.displayName = 'Avatar.Overlay';\n\nAvatar.getInitialsFontSize = getInitialsFontSize;\n"],"names":["classNames","ImageBase","ImageBaseOverlay","AvatarBadge","AvatarBadgeWithPreset","getInitialsFontSize","styles","AVATAR_DEFAULT_SIZE","COLORS_NUMBER_TO_TEXT_MAP","gradientStyles","gradientRed","gradientOrange","gradientYellow","gradientGreen","gradientBlue","gradientLBlue","gradientViolet","Avatar","size","className","gradientColor","initials","fallbackIcon","fallbackIconProp","children","restProps","gradientName","isGradientNotCustom","div","style","fontSize","host","hasGradient","displayName","Badge","BadgeWithPreset","Overlay"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,QAA6B,4BAAyB;AACxE,SACEC,gBAAgB,QAEX,oDAAiD;AACxD,SAASC,WAAW,QAA+B,+BAA4B;AAC/E,SACEC,qBAAqB,QAEhB,yCAAsC;AAC7C,SAASC,mBAAmB,QAAQ,eAAY;AAChD,OAAOC,YAAY,sBAAsB;AAQzC,MAAMC,sBAAsB;AAE5B,MAAMC,4BAA4B;IAChC,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;AACL;AAYA,MAAMC,iBAAiB;IACrB,OAAOH,OAAOI,WAAW;IACzB,UAAUJ,OAAOK,cAAc;IAC/B,UAAUL,OAAOM,cAAc;IAC/B,SAASN,OAAOO,aAAa;IAC7B,QAAQP,OAAOQ,YAAY;IAC3B,UAAUR,OAAOS,aAAa;IAC9B,UAAUT,OAAOU,cAAc;AACjC;AA6BA;;CAEC,GACD,OAAO,MAAMC,SAKT,CAAC,EACHC,OAAOX,mBAAmB,EAC1BY,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,cAAcC,gBAAgB,EAC9BC,QAAQ,EACR,GAAGC,WACS;IACZ,MAAMC,eACJ,OAAON,kBAAkB,WAAWZ,yBAAyB,CAACY,cAAc,GAAGA;IACjF,MAAMO,sBAAsBD,gBAAgBA,iBAAiB;IAE7D,MAAMJ,eAAeD,yBACnB,KAACO;QACCT,WAAWb,OAAOe,QAAQ;QAC1BQ,OAAO;YACLC,UAAUzB,oBAAoBa;QAChC;kBAECG;SAGHE;IAGF,qBACE,KAACtB;QACE,GAAGwB,SAAS;QACbP,MAAMA;QACNI,cAAcA;QACdH,WAAWnB,WACTM,OAAOyB,IAAI,EACXL,gBAAgBpB,OAAO0B,WAAW,EAClCL,uBAAuBlB,cAAc,CAACiB,aAAa,EACnDP;kBAGDK;;AAGP,EAAE;AAEFP,OAAOgB,WAAW,GAAG;AAErBhB,OAAOiB,KAAK,GAAG/B;AACfc,OAAOiB,KAAK,CAACD,WAAW,GAAG;AAE3BhB,OAAOkB,eAAe,GAAG/B;AACzBa,OAAOkB,eAAe,CAACF,WAAW,GAAG;AAErChB,OAAOmB,OAAO,GAAGlC;AACjBe,OAAOmB,OAAO,CAACH,WAAW,GAAG;AAE7BhB,OAAOZ,mBAAmB,GAAGA"}

package/dist/cssm/components/Banner/Banner.js

@@ -13,7 +13,7 @@ import { Title } from "../Typography/Title/Title.js";
 import styles from "./Banner.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/Banner
- */ export const Banner = ({ mode = 'tint', imageTheme = 'dark', size = 's', before, after: afterProp, title, subtitle, extraSubtitle, children, background, actions, onDismiss, dismissLabel = 'Скрыть', className, Component, ...restProps })=>{
+ */ export const Banner = ({ mode = 'tint', imageTheme = 'dark', size = 's', before, after: afterProp, title, subtitle, extraSubtitle, children, background, actions, onDismiss, dismissLabel = 'Скрыть', Component, ...restProps })=>{
     const platform = usePlatform();
     const HeaderTypography = size === 'm' ? Title : Headline;
     const SubheadTypography = size === 'm' ? Text : Subhead;
@@ -77,7 +77,7 @@ import styles from "./Banner.module.css";
     return /*#__PURE__*/ _jsxs(Tappable, {
         Component: Component || (!isClickable ? 'section' : undefined),
         activeMode: platform === 'ios' ? 'opacity' : 'background',
-        baseClassName: classNames(styles.host, platform === 'ios' && styles.ios, mode === 'image' && styles.modeImage, size === 'm' && styles.sizeM, mode === 'image' && imageTheme === 'dark' && styles.inverted, className),
+        baseClassName: classNames(styles.host, platform === 'ios' && styles.ios, mode === 'image' && styles.modeImage, size === 'm' && styles.sizeM, mode === 'image' && imageTheme === 'dark' && styles.inverted),
         ...restProps,
         children: [
             content,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon24Cancel, Icon24Chevron, Icon24Dismiss, Icon24DismissDark } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Banner.module.css';\n\nexport interface BannerProps extends Omit<TappableProps, 'title' | 'size'> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `chevron` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  after?: 'dismiss' | 'chevron' | React.ReactNode;\n  /**\n   * Срабатывает при клике на иконку крестика при `after=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок.\n   */\n  title?: React.ReactNode;\n  /**\n   * Подзаголовок.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительный подзаголовок баннера.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button).\n   *\n   * - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:\n   *    - `mode=\"primary\"`\n   *    - `mode=\"secondary\"`\n   * - В режиме `image` с тёмным фоном используйте с параметрами:\n   *    - `appearance=\"overlay\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"m\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n  mode = 'tint',\n  imageTheme = 'dark',\n  size = 's',\n  before,\n  after: afterProp,\n  title,\n  subtitle,\n  extraSubtitle,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = 'Скрыть',\n  className,\n  Component,\n  ...restProps\n}: BannerProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  const HeaderTypography = size === 'm' ? Title : Headline;\n  const SubheadTypography = size === 'm' ? Text : Subhead;\n\n  const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24Dismiss;\n\n  const content = (\n    <>\n      {mode === 'image' && background && (\n        <div aria-hidden className={styles.bg}>\n          {background}\n        </div>\n      )}\n\n      {before && <div className={styles.before}>{before}</div>}\n\n      <div className={styles.content}>\n        {hasReactNode(title) && (\n          <HeaderTypography Component=\"div\" weight=\"2\" level={size === 'm' ? '2' : '1'}>\n            {title}\n          </HeaderTypography>\n        )}\n        {hasReactNode(subtitle) && (\n          <SubheadTypography Component=\"div\" className={styles.subtitle}>\n            {subtitle}\n          </SubheadTypography>\n        )}\n        {hasReactNode(extraSubtitle) && (\n          <Text Component=\"div\" className={styles.extraSubtitle}>\n            {extraSubtitle}\n          </Text>\n        )}\n        {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n          <div className={styles.actions}>{actions}</div>\n        )}\n      </div>\n    </>\n  );\n\n  const afterMap: Record<string, React.ReactNode> = {\n    chevron: <Icon24Chevron className={styles.chevron} />,\n    dismiss: (\n      <IconButton\n        label={dismissLabel}\n        className={styles.dismiss}\n        onClick={onDismiss}\n        hoverMode=\"opacity\"\n        hasActive={false}\n      >\n        {platform === 'ios' ? <IconDismissIOS /> : <Icon24Cancel />}\n      </IconButton>\n    ),\n  };\n\n  const after = afterProp && (\n    <div className={styles.after}>\n      {typeof afterProp === 'string' ? afterMap[afterProp] : afterProp}\n    </div>\n  );\n\n  const isClickable = restProps.onClick || restProps.onClickCapture || restProps.href;\n\n  return (\n    <Tappable\n      Component={Component || (!isClickable ? 'section' : undefined)}\n      activeMode={platform === 'ios' ? 'opacity' : 'background'}\n      baseClassName={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        mode === 'image' && styles.modeImage,\n        size === 'm' && styles.sizeM,\n        mode === 'image' && imageTheme === 'dark' && styles.inverted,\n        className,\n      )}\n      {...restProps}\n    >\n      {content}\n      {after}\n    </Tappable>\n  );\n};\n"],"names":["React","Icon24Cancel","Icon24Chevron","Icon24Dismiss","Icon24DismissDark","classNames","hasReactNode","usePlatform","IconButton","Tappable","Headline","Subhead","Text","Title","styles","Banner","mode","imageTheme","size","before","after","afterProp","title","subtitle","extraSubtitle","children","background","actions","onDismiss","dismissLabel","className","Component","restProps","platform","HeaderTypography","SubheadTypography","IconDismissIOS","content","div","aria-hidden","bg","weight","level","Children","count","afterMap","chevron","dismiss","label","onClick","hoverMode","hasActive","isClickable","onClickCapture","href","undefined","activeMode","baseClassName","host","ios","modeImage","sizeM","inverted"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,EAAEC,aAAa,EAAEC,aAAa,EAAEC,iBAAiB,QAAQ,mBAAmB;AACjG,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,UAAU,QAAQ,8BAA2B;AACtD,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,SAASC,KAAK,QAAQ,+BAA4B;AAClD,OAAOC,YAAY,sBAAsB;AAqEzC;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EACrBC,OAAO,MAAM,EACbC,aAAa,MAAM,EACnBC,OAAO,GAAG,EACVC,MAAM,EACNC,OAAOC,SAAS,EAChBC,KAAK,EACLC,QAAQ,EACRC,aAAa,EACbC,QAAQ,EACRC,UAAU,EACVC,OAAO,EACPC,SAAS,EACTC,eAAe,QAAQ,EACvBC,SAAS,EACTC,SAAS,EACT,GAAGC,WACS;IACZ,MAAMC,WAAW1B;IAEjB,MAAM2B,mBAAmBhB,SAAS,MAAML,QAAQH;IAChD,MAAMyB,oBAAoBjB,SAAS,MAAMN,OAAOD;IAEhD,MAAMyB,iBAAiBpB,SAAS,UAAUZ,oBAAoBD;IAE9D,MAAMkC,wBACJ;;YACGrB,SAAS,WAAWU,4BACnB,KAACY;gBAAIC,aAAW;gBAACT,WAAWhB,OAAO0B,EAAE;0BAClCd;;YAIJP,wBAAU,KAACmB;gBAAIR,WAAWhB,OAAOK,MAAM;0BAAGA;;0BAE3C,MAACmB;gBAAIR,WAAWhB,OAAOuB,OAAO;;oBAC3B/B,aAAagB,wBACZ,KAACY;wBAAiBH,WAAU;wBAAMU,QAAO;wBAAIC,OAAOxB,SAAS,MAAM,MAAM;kCACtEI;;oBAGJhB,aAAaiB,2BACZ,KAACY;wBAAkBJ,WAAU;wBAAMD,WAAWhB,OAAOS,QAAQ;kCAC1DA;;oBAGJjB,aAAakB,gCACZ,KAACZ;wBAAKmB,WAAU;wBAAMD,WAAWhB,OAAOU,aAAa;kCAClDA;;oBAGJlB,aAAaqB,YAAY3B,MAAM2C,QAAQ,CAACC,KAAK,CAACjB,WAAW,mBACxD,KAACW;wBAAIR,WAAWhB,OAAOa,OAAO;kCAAGA;;;;;;IAMzC,MAAMkB,WAA4C;QAChDC,uBAAS,KAAC5C;YAAc4B,WAAWhB,OAAOgC,OAAO;;QACjDC,uBACE,KAACvC;YACCwC,OAAOnB;YACPC,WAAWhB,OAAOiC,OAAO;YACzBE,SAASrB;YACTsB,WAAU;YACVC,WAAW;sBAEVlB,aAAa,sBAAQ,KAACG,oCAAoB,KAACnC;;IAGlD;IAEA,MAAMmB,QAAQC,2BACZ,KAACiB;QAAIR,WAAWhB,OAAOM,KAAK;kBACzB,OAAOC,cAAc,WAAWwB,QAAQ,CAACxB,UAAU,GAAGA;;IAI3D,MAAM+B,cAAcpB,UAAUiB,OAAO,IAAIjB,UAAUqB,cAAc,IAAIrB,UAAUsB,IAAI;IAEnF,qBACE,MAAC7C;QACCsB,WAAWA,aAAc,CAAA,CAACqB,cAAc,YAAYG,SAAQ;QAC5DC,YAAYvB,aAAa,QAAQ,YAAY;QAC7CwB,eAAepD,WACbS,OAAO4C,IAAI,EACXzB,aAAa,SAASnB,OAAO6C,GAAG,EAChC3C,SAAS,WAAWF,OAAO8C,SAAS,EACpC1C,SAAS,OAAOJ,OAAO+C,KAAK,EAC5B7C,SAAS,WAAWC,eAAe,UAAUH,OAAOgD,QAAQ,EAC5DhC;QAED,GAAGE,SAAS;;YAEZK;YACAjB;;;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon24Cancel, Icon24Chevron, Icon24Dismiss, Icon24DismissDark } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Banner.module.css';\n\nexport interface BannerProps extends Omit<TappableProps, 'title' | 'size'> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `chevron` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  after?: 'dismiss' | 'chevron' | React.ReactNode;\n  /**\n   * Срабатывает при клике на иконку крестика при `after=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок.\n   */\n  title?: React.ReactNode;\n  /**\n   * Подзаголовок.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительный подзаголовок баннера.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button).\n   *\n   * - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:\n   *    - `mode=\"primary\"`\n   *    - `mode=\"secondary\"`\n   * - В режиме `image` с тёмным фоном используйте с параметрами:\n   *    - `appearance=\"overlay\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"m\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n  mode = 'tint',\n  imageTheme = 'dark',\n  size = 's',\n  before,\n  after: afterProp,\n  title,\n  subtitle,\n  extraSubtitle,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = 'Скрыть',\n  Component,\n  ...restProps\n}: BannerProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  const HeaderTypography = size === 'm' ? Title : Headline;\n  const SubheadTypography = size === 'm' ? Text : Subhead;\n\n  const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24Dismiss;\n\n  const content = (\n    <>\n      {mode === 'image' && background && (\n        <div aria-hidden className={styles.bg}>\n          {background}\n        </div>\n      )}\n\n      {before && <div className={styles.before}>{before}</div>}\n\n      <div className={styles.content}>\n        {hasReactNode(title) && (\n          <HeaderTypography Component=\"div\" weight=\"2\" level={size === 'm' ? '2' : '1'}>\n            {title}\n          </HeaderTypography>\n        )}\n        {hasReactNode(subtitle) && (\n          <SubheadTypography Component=\"div\" className={styles.subtitle}>\n            {subtitle}\n          </SubheadTypography>\n        )}\n        {hasReactNode(extraSubtitle) && (\n          <Text Component=\"div\" className={styles.extraSubtitle}>\n            {extraSubtitle}\n          </Text>\n        )}\n        {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n          <div className={styles.actions}>{actions}</div>\n        )}\n      </div>\n    </>\n  );\n\n  const afterMap: Record<string, React.ReactNode> = {\n    chevron: <Icon24Chevron className={styles.chevron} />,\n    dismiss: (\n      <IconButton\n        label={dismissLabel}\n        className={styles.dismiss}\n        onClick={onDismiss}\n        hoverMode=\"opacity\"\n        hasActive={false}\n      >\n        {platform === 'ios' ? <IconDismissIOS /> : <Icon24Cancel />}\n      </IconButton>\n    ),\n  };\n\n  const after = afterProp && (\n    <div className={styles.after}>\n      {typeof afterProp === 'string' ? afterMap[afterProp] : afterProp}\n    </div>\n  );\n\n  const isClickable = restProps.onClick || restProps.onClickCapture || restProps.href;\n\n  return (\n    <Tappable\n      Component={Component || (!isClickable ? 'section' : undefined)}\n      activeMode={platform === 'ios' ? 'opacity' : 'background'}\n      baseClassName={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        mode === 'image' && styles.modeImage,\n        size === 'm' && styles.sizeM,\n        mode === 'image' && imageTheme === 'dark' && styles.inverted,\n      )}\n      {...restProps}\n    >\n      {content}\n      {after}\n    </Tappable>\n  );\n};\n"],"names":["React","Icon24Cancel","Icon24Chevron","Icon24Dismiss","Icon24DismissDark","classNames","hasReactNode","usePlatform","IconButton","Tappable","Headline","Subhead","Text","Title","styles","Banner","mode","imageTheme","size","before","after","afterProp","title","subtitle","extraSubtitle","children","background","actions","onDismiss","dismissLabel","Component","restProps","platform","HeaderTypography","SubheadTypography","IconDismissIOS","content","div","aria-hidden","className","bg","weight","level","Children","count","afterMap","chevron","dismiss","label","onClick","hoverMode","hasActive","isClickable","onClickCapture","href","undefined","activeMode","baseClassName","host","ios","modeImage","sizeM","inverted"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,EAAEC,aAAa,EAAEC,aAAa,EAAEC,iBAAiB,QAAQ,mBAAmB;AACjG,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,UAAU,QAAQ,8BAA2B;AACtD,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,SAASC,KAAK,QAAQ,+BAA4B;AAClD,OAAOC,YAAY,sBAAsB;AAqEzC;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EACrBC,OAAO,MAAM,EACbC,aAAa,MAAM,EACnBC,OAAO,GAAG,EACVC,MAAM,EACNC,OAAOC,SAAS,EAChBC,KAAK,EACLC,QAAQ,EACRC,aAAa,EACbC,QAAQ,EACRC,UAAU,EACVC,OAAO,EACPC,SAAS,EACTC,eAAe,QAAQ,EACvBC,SAAS,EACT,GAAGC,WACS;IACZ,MAAMC,WAAWzB;IAEjB,MAAM0B,mBAAmBf,SAAS,MAAML,QAAQH;IAChD,MAAMwB,oBAAoBhB,SAAS,MAAMN,OAAOD;IAEhD,MAAMwB,iBAAiBnB,SAAS,UAAUZ,oBAAoBD;IAE9D,MAAMiC,wBACJ;;YACGpB,SAAS,WAAWU,4BACnB,KAACW;gBAAIC,aAAW;gBAACC,WAAWzB,OAAO0B,EAAE;0BAClCd;;YAIJP,wBAAU,KAACkB;gBAAIE,WAAWzB,OAAOK,MAAM;0BAAGA;;0BAE3C,MAACkB;gBAAIE,WAAWzB,OAAOsB,OAAO;;oBAC3B9B,aAAagB,wBACZ,KAACW;wBAAiBH,WAAU;wBAAMW,QAAO;wBAAIC,OAAOxB,SAAS,MAAM,MAAM;kCACtEI;;oBAGJhB,aAAaiB,2BACZ,KAACW;wBAAkBJ,WAAU;wBAAMS,WAAWzB,OAAOS,QAAQ;kCAC1DA;;oBAGJjB,aAAakB,gCACZ,KAACZ;wBAAKkB,WAAU;wBAAMS,WAAWzB,OAAOU,aAAa;kCAClDA;;oBAGJlB,aAAaqB,YAAY3B,MAAM2C,QAAQ,CAACC,KAAK,CAACjB,WAAW,mBACxD,KAACU;wBAAIE,WAAWzB,OAAOa,OAAO;kCAAGA;;;;;;IAMzC,MAAMkB,WAA4C;QAChDC,uBAAS,KAAC5C;YAAcqC,WAAWzB,OAAOgC,OAAO;;QACjDC,uBACE,KAACvC;YACCwC,OAAOnB;YACPU,WAAWzB,OAAOiC,OAAO;YACzBE,SAASrB;YACTsB,WAAU;YACVC,WAAW;sBAEVnB,aAAa,sBAAQ,KAACG,oCAAoB,KAAClC;;IAGlD;IAEA,MAAMmB,QAAQC,2BACZ,KAACgB;QAAIE,WAAWzB,OAAOM,KAAK;kBACzB,OAAOC,cAAc,WAAWwB,QAAQ,CAACxB,UAAU,GAAGA;;IAI3D,MAAM+B,cAAcrB,UAAUkB,OAAO,IAAIlB,UAAUsB,cAAc,IAAItB,UAAUuB,IAAI;IAEnF,qBACE,MAAC7C;QACCqB,WAAWA,aAAc,CAAA,CAACsB,cAAc,YAAYG,SAAQ;QAC5DC,YAAYxB,aAAa,QAAQ,YAAY;QAC7CyB,eAAepD,WACbS,OAAO4C,IAAI,EACX1B,aAAa,SAASlB,OAAO6C,GAAG,EAChC3C,SAAS,WAAWF,OAAO8C,SAAS,EACpC1C,SAAS,OAAOJ,OAAO+C,KAAK,EAC5B7C,SAAS,WAAWC,eAAe,UAAUH,OAAOgD,QAAQ;QAE7D,GAAG/B,SAAS;;YAEZK;YACAhB;;;AAGP,EAAE"}

package/dist/cssm/components/Button/Button.js

@@ -39,7 +39,7 @@ const sizeYClassNames = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Button
- */ export const Button = ({ size = 's', mode = 'primary', appearance = 'accent', stretched = false, align = 'center', children, before, after, getRootRef, loading, onClick, className, disableSpinnerAnimation, rounded, disabled, ...restProps })=>{
+ */ export const Button = ({ size = 's', mode = 'primary', appearance = 'accent', stretched = false, align = 'center', children, before, after, getRootRef, loading, onClick, disableSpinnerAnimation, rounded, disabled, ...restProps })=>{
     const hasIconOnly = !children && Boolean(after) !== Boolean(before);
     const { sizeY = 'none' } = useAdaptivity();
     const platform = usePlatform();
@@ -51,7 +51,7 @@ const sizeYClassNames = {
         disabled: loading || disabled,
         ...restProps,
         onClick: loading ? undefined : onClick,
-        className: classNames(className, styles.host, stylesSize[size], stylesMode[mode], stylesAppearance[appearance], align !== 'center' && stylesAlign[align], sizeY !== 'compact' && sizeYClassNames[sizeY], platform === 'ios' && styles.ios, stretched && styles.stretched, hasIconOnly && !stretched && styles.singleIcon, loading && styles.loading, rounded && styles.rounded, disabled && styles.disabled),
+        baseClassName: classNames(styles.host, stylesSize[size], stylesMode[mode], stylesAppearance[appearance], align !== 'center' && stylesAlign[align], sizeY !== 'compact' && sizeYClassNames[sizeY], platform === 'ios' && styles.ios, stretched && styles.stretched, hasIconOnly && !stretched && styles.singleIcon, loading && styles.loading, rounded && styles.rounded, disabled && styles.disabled),
         getRootRef: getRootRef,
         children: [
             loading && /*#__PURE__*/ _jsx(Spinner, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasAlign } from '../../types';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport '../Tappable/Tappable.module.css';\nimport '../Spinner/Spinner.module.css';\nimport styles from './Button.module.css';\n\nconst stylesSize = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n};\n\nconst stylesMode = {\n  primary: styles.modePrimary,\n  secondary: styles.modeSecondary,\n  tertiary: styles.modeTertiary,\n  outline: styles.modeOutline,\n  link: styles.modeLink,\n};\n\nconst stylesAppearance = {\n  'accent': styles.appearanceAccent,\n  'positive': styles.appearancePositive,\n  'negative': styles.appearanceNegative,\n  'neutral': styles.appearanceNeutral,\n  'overlay': styles.appearanceOverlay,\n  'accent-invariable': styles.appearanceAccentInvariable,\n};\n\nconst stylesAlign = {\n  left: styles.alignLeft,\n  right: styles.alignRight,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  regular: styles.sizeYRegular,\n};\n\nexport interface VKUIButtonProps extends HasAlign {\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'link';\n  appearance?: 'accent' | 'positive' | 'negative' | 'neutral' | 'overlay' | 'accent-invariable';\n  size?: 's' | 'm' | 'l';\n  stretched?: boolean;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  loading?: boolean;\n  disableSpinnerAnimation?: boolean;\n  rounded?: boolean;\n}\n\nexport interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Button\n */\nexport const Button = ({\n  size = 's',\n  mode = 'primary',\n  appearance = 'accent',\n  stretched = false,\n  align = 'center',\n  children,\n  before,\n  after,\n  getRootRef,\n  loading,\n  onClick,\n  className,\n  disableSpinnerAnimation,\n  rounded,\n  disabled,\n  ...restProps\n}: ButtonProps): React.ReactNode => {\n  const hasIconOnly = !children && Boolean(after) !== Boolean(before);\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  return (\n    <Tappable\n      hoverMode={styles.hover}\n      activeMode={styles.active}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      disabled={loading || disabled}\n      {...restProps}\n      onClick={loading ? undefined : onClick}\n      className={classNames(\n        className,\n        styles.host,\n        stylesSize[size],\n        stylesMode[mode],\n        stylesAppearance[appearance],\n        align !== 'center' && stylesAlign[align],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n        platform === 'ios' && styles.ios,\n        stretched && styles.stretched,\n        hasIconOnly && !stretched && styles.singleIcon,\n        loading && styles.loading,\n        rounded && styles.rounded,\n        disabled && styles.disabled,\n      )}\n      getRootRef={getRootRef}\n    >\n      {loading && (\n        <Spinner\n          size=\"s\"\n          className={styles.spinner}\n          disableAnimation={disableSpinnerAnimation}\n          noColor\n        />\n      )}\n      <span className={styles.in}>\n        {hasReactNode(before) && (\n          <span\n            className={styles.before}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'before' : undefined}\n          >\n            {before}\n          </span>\n        )}\n        {hasReactNode(children) && (\n          <span\n            className={styles.content}\n            data-testid={process.env.NODE_ENV === 'test' ? 'children' : undefined}\n          >\n            {children}\n          </span>\n        )}\n        {hasReactNode(after) && (\n          <span\n            className={styles.after}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'after' : undefined}\n          >\n            {after}\n          </span>\n        )}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","Spinner","Tappable","styles","stylesSize","s","sizeS","m","sizeM","l","sizeL","stylesMode","primary","modePrimary","secondary","modeSecondary","tertiary","modeTertiary","outline","modeOutline","link","modeLink","stylesAppearance","appearanceAccent","appearancePositive","appearanceNegative","appearanceNeutral","appearanceOverlay","appearanceAccentInvariable","stylesAlign","left","alignLeft","right","alignRight","sizeYClassNames","none","sizeYNone","regular","sizeYRegular","Button","size","mode","appearance","stretched","align","children","before","after","getRootRef","loading","onClick","className","disableSpinnerAnimation","rounded","disabled","restProps","hasIconOnly","Boolean","sizeY","platform","hoverMode","hover","activeMode","active","Component","href","focusVisibleMode","undefined","host","ios","singleIcon","spinner","disableAnimation","noColor","span","in","role","data-testid","process","env","NODE_ENV","content"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,OAAO,QAAQ,wBAAqB;AAC7C,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,OAAO,kCAAkC;AACzC,OAAO,gCAAgC;AACvC,OAAOC,YAAY,sBAAsB;AAEzC,MAAMC,aAAa;IACjBC,GAAGF,OAAOG,KAAK;IACfC,GAAGJ,OAAOK,KAAK;IACfC,GAAGN,OAAOO,KAAK;AACjB;AAEA,MAAMC,aAAa;IACjBC,SAAST,OAAOU,WAAW;IAC3BC,WAAWX,OAAOY,aAAa;IAC/BC,UAAUb,OAAOc,YAAY;IAC7BC,SAASf,OAAOgB,WAAW;IAC3BC,MAAMjB,OAAOkB,QAAQ;AACvB;AAEA,MAAMC,mBAAmB;IACvB,UAAUnB,OAAOoB,gBAAgB;IACjC,YAAYpB,OAAOqB,kBAAkB;IACrC,YAAYrB,OAAOsB,kBAAkB;IACrC,WAAWtB,OAAOuB,iBAAiB;IACnC,WAAWvB,OAAOwB,iBAAiB;IACnC,qBAAqBxB,OAAOyB,0BAA0B;AACxD;AAEA,MAAMC,cAAc;IAClBC,MAAM3B,OAAO4B,SAAS;IACtBC,OAAO7B,OAAO8B,UAAU;AAC1B;AAEA,MAAMC,kBAAkB;IACtBC,MAAMhC,OAAOiC,SAAS;IACtBC,SAASlC,OAAOmC,YAAY;AAC9B;AAgBA;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EACrBC,OAAO,GAAG,EACVC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,YAAY,KAAK,EACjBC,QAAQ,QAAQ,EAChBC,QAAQ,EACRC,MAAM,EACNC,KAAK,EACLC,UAAU,EACVC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,uBAAuB,EACvBC,OAAO,EACPC,QAAQ,EACR,GAAGC,WACS;IACZ,MAAMC,cAAc,CAACX,YAAYY,QAAQV,WAAWU,QAAQX;IAC5D,MAAM,EAAEY,QAAQ,MAAM,EAAE,GAAG3D;IAC3B,MAAM4D,WAAW3D;IAEjB,qBACE,MAACE;QACC0D,WAAWzD,OAAO0D,KAAK;QACvBC,YAAY3D,OAAO4D,MAAM;QACzBC,WAAWT,UAAUU,IAAI,GAAG,MAAM;QAClCC,kBAAiB;QACjBZ,UAAUL,WAAWK;QACpB,GAAGC,SAAS;QACbL,SAASD,UAAUkB,YAAYjB;QAC/BC,WAAWtD,WACTsD,WACAhD,OAAOiE,IAAI,EACXhE,UAAU,CAACoC,KAAK,EAChB7B,UAAU,CAAC8B,KAAK,EAChBnB,gBAAgB,CAACoB,WAAW,EAC5BE,UAAU,YAAYf,WAAW,CAACe,MAAM,EACxCc,UAAU,aAAaxB,eAAe,CAACwB,MAAM,EAC7CC,aAAa,SAASxD,OAAOkE,GAAG,EAChC1B,aAAaxC,OAAOwC,SAAS,EAC7Ba,eAAe,CAACb,aAAaxC,OAAOmE,UAAU,EAC9CrB,WAAW9C,OAAO8C,OAAO,EACzBI,WAAWlD,OAAOkD,OAAO,EACzBC,YAAYnD,OAAOmD,QAAQ;QAE7BN,YAAYA;;YAEXC,yBACC,KAAChD;gBACCuC,MAAK;gBACLW,WAAWhD,OAAOoE,OAAO;gBACzBC,kBAAkBpB;gBAClBqB,OAAO;;0BAGX,MAACC;gBAAKvB,WAAWhD,OAAOwE,EAAE;;oBACvB7E,aAAagD,yBACZ,KAAC4B;wBACCvB,WAAWhD,OAAO2C,MAAM;wBACxB8B,MAAK;wBACLC,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,WAAWb;kCAEzDrB;;oBAGJhD,aAAa+C,2BACZ,KAAC6B;wBACCvB,WAAWhD,OAAO8E,OAAO;wBACzBJ,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,aAAab;kCAE3DtB;;oBAGJ/C,aAAaiD,wBACZ,KAAC2B;wBACCvB,WAAWhD,OAAO4C,KAAK;wBACvB6B,MAAK;wBACLC,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,UAAUb;kCAExDpB;;;;;;AAMb,EAAE"}
+{"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasAlign } from '../../types';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport '../Tappable/Tappable.module.css';\nimport '../Spinner/Spinner.module.css';\nimport styles from './Button.module.css';\n\nconst stylesSize = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n};\n\nconst stylesMode = {\n  primary: styles.modePrimary,\n  secondary: styles.modeSecondary,\n  tertiary: styles.modeTertiary,\n  outline: styles.modeOutline,\n  link: styles.modeLink,\n};\n\nconst stylesAppearance = {\n  'accent': styles.appearanceAccent,\n  'positive': styles.appearancePositive,\n  'negative': styles.appearanceNegative,\n  'neutral': styles.appearanceNeutral,\n  'overlay': styles.appearanceOverlay,\n  'accent-invariable': styles.appearanceAccentInvariable,\n};\n\nconst stylesAlign = {\n  left: styles.alignLeft,\n  right: styles.alignRight,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  regular: styles.sizeYRegular,\n};\n\nexport interface VKUIButtonProps extends HasAlign {\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'link';\n  appearance?: 'accent' | 'positive' | 'negative' | 'neutral' | 'overlay' | 'accent-invariable';\n  size?: 's' | 'm' | 'l';\n  stretched?: boolean;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  loading?: boolean;\n  disableSpinnerAnimation?: boolean;\n  rounded?: boolean;\n}\n\nexport interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Button\n */\nexport const Button = ({\n  size = 's',\n  mode = 'primary',\n  appearance = 'accent',\n  stretched = false,\n  align = 'center',\n  children,\n  before,\n  after,\n  getRootRef,\n  loading,\n  onClick,\n  disableSpinnerAnimation,\n  rounded,\n  disabled,\n  ...restProps\n}: ButtonProps): React.ReactNode => {\n  const hasIconOnly = !children && Boolean(after) !== Boolean(before);\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  return (\n    <Tappable\n      hoverMode={styles.hover}\n      activeMode={styles.active}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      disabled={loading || disabled}\n      {...restProps}\n      onClick={loading ? undefined : onClick}\n      baseClassName={classNames(\n        styles.host,\n        stylesSize[size],\n        stylesMode[mode],\n        stylesAppearance[appearance],\n        align !== 'center' && stylesAlign[align],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n        platform === 'ios' && styles.ios,\n        stretched && styles.stretched,\n        hasIconOnly && !stretched && styles.singleIcon,\n        loading && styles.loading,\n        rounded && styles.rounded,\n        disabled && styles.disabled,\n      )}\n      getRootRef={getRootRef}\n    >\n      {loading && (\n        <Spinner\n          size=\"s\"\n          className={styles.spinner}\n          disableAnimation={disableSpinnerAnimation}\n          noColor\n        />\n      )}\n      <span className={styles.in}>\n        {hasReactNode(before) && (\n          <span\n            className={styles.before}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'before' : undefined}\n          >\n            {before}\n          </span>\n        )}\n        {hasReactNode(children) && (\n          <span\n            className={styles.content}\n            data-testid={process.env.NODE_ENV === 'test' ? 'children' : undefined}\n          >\n            {children}\n          </span>\n        )}\n        {hasReactNode(after) && (\n          <span\n            className={styles.after}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'after' : undefined}\n          >\n            {after}\n          </span>\n        )}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","Spinner","Tappable","styles","stylesSize","s","sizeS","m","sizeM","l","sizeL","stylesMode","primary","modePrimary","secondary","modeSecondary","tertiary","modeTertiary","outline","modeOutline","link","modeLink","stylesAppearance","appearanceAccent","appearancePositive","appearanceNegative","appearanceNeutral","appearanceOverlay","appearanceAccentInvariable","stylesAlign","left","alignLeft","right","alignRight","sizeYClassNames","none","sizeYNone","regular","sizeYRegular","Button","size","mode","appearance","stretched","align","children","before","after","getRootRef","loading","onClick","disableSpinnerAnimation","rounded","disabled","restProps","hasIconOnly","Boolean","sizeY","platform","hoverMode","hover","activeMode","active","Component","href","focusVisibleMode","undefined","baseClassName","host","ios","singleIcon","className","spinner","disableAnimation","noColor","span","in","role","data-testid","process","env","NODE_ENV","content"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,OAAO,QAAQ,wBAAqB;AAC7C,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,OAAO,kCAAkC;AACzC,OAAO,gCAAgC;AACvC,OAAOC,YAAY,sBAAsB;AAEzC,MAAMC,aAAa;IACjBC,GAAGF,OAAOG,KAAK;IACfC,GAAGJ,OAAOK,KAAK;IACfC,GAAGN,OAAOO,KAAK;AACjB;AAEA,MAAMC,aAAa;IACjBC,SAAST,OAAOU,WAAW;IAC3BC,WAAWX,OAAOY,aAAa;IAC/BC,UAAUb,OAAOc,YAAY;IAC7BC,SAASf,OAAOgB,WAAW;IAC3BC,MAAMjB,OAAOkB,QAAQ;AACvB;AAEA,MAAMC,mBAAmB;IACvB,UAAUnB,OAAOoB,gBAAgB;IACjC,YAAYpB,OAAOqB,kBAAkB;IACrC,YAAYrB,OAAOsB,kBAAkB;IACrC,WAAWtB,OAAOuB,iBAAiB;IACnC,WAAWvB,OAAOwB,iBAAiB;IACnC,qBAAqBxB,OAAOyB,0BAA0B;AACxD;AAEA,MAAMC,cAAc;IAClBC,MAAM3B,OAAO4B,SAAS;IACtBC,OAAO7B,OAAO8B,UAAU;AAC1B;AAEA,MAAMC,kBAAkB;IACtBC,MAAMhC,OAAOiC,SAAS;IACtBC,SAASlC,OAAOmC,YAAY;AAC9B;AAgBA;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EACrBC,OAAO,GAAG,EACVC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,YAAY,KAAK,EACjBC,QAAQ,QAAQ,EAChBC,QAAQ,EACRC,MAAM,EACNC,KAAK,EACLC,UAAU,EACVC,OAAO,EACPC,OAAO,EACPC,uBAAuB,EACvBC,OAAO,EACPC,QAAQ,EACR,GAAGC,WACS;IACZ,MAAMC,cAAc,CAACV,YAAYW,QAAQT,WAAWS,QAAQV;IAC5D,MAAM,EAAEW,QAAQ,MAAM,EAAE,GAAG1D;IAC3B,MAAM2D,WAAW1D;IAEjB,qBACE,MAACE;QACCyD,WAAWxD,OAAOyD,KAAK;QACvBC,YAAY1D,OAAO2D,MAAM;QACzBC,WAAWT,UAAUU,IAAI,GAAG,MAAM;QAClCC,kBAAiB;QACjBZ,UAAUJ,WAAWI;QACpB,GAAGC,SAAS;QACbJ,SAASD,UAAUiB,YAAYhB;QAC/BiB,eAAetE,WACbM,OAAOiE,IAAI,EACXhE,UAAU,CAACoC,KAAK,EAChB7B,UAAU,CAAC8B,KAAK,EAChBnB,gBAAgB,CAACoB,WAAW,EAC5BE,UAAU,YAAYf,WAAW,CAACe,MAAM,EACxCa,UAAU,aAAavB,eAAe,CAACuB,MAAM,EAC7CC,aAAa,SAASvD,OAAOkE,GAAG,EAChC1B,aAAaxC,OAAOwC,SAAS,EAC7BY,eAAe,CAACZ,aAAaxC,OAAOmE,UAAU,EAC9CrB,WAAW9C,OAAO8C,OAAO,EACzBG,WAAWjD,OAAOiD,OAAO,EACzBC,YAAYlD,OAAOkD,QAAQ;QAE7BL,YAAYA;;YAEXC,yBACC,KAAChD;gBACCuC,MAAK;gBACL+B,WAAWpE,OAAOqE,OAAO;gBACzBC,kBAAkBtB;gBAClBuB,OAAO;;0BAGX,MAACC;gBAAKJ,WAAWpE,OAAOyE,EAAE;;oBACvB9E,aAAagD,yBACZ,KAAC6B;wBACCJ,WAAWpE,OAAO2C,MAAM;wBACxB+B,MAAK;wBACLC,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,WAAWf;kCAEzDpB;;oBAGJhD,aAAa+C,2BACZ,KAAC8B;wBACCJ,WAAWpE,OAAO+E,OAAO;wBACzBJ,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,aAAaf;kCAE3DrB;;oBAGJ/C,aAAaiD,wBACZ,KAAC4B;wBACCJ,WAAWpE,OAAO4C,KAAK;wBACvB8B,MAAK;wBACLC,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,UAAUf;kCAExDnB;;;;;;AAMb,EAAE"}

package/dist/cssm/components/CalendarDay/CalendarDay.js

@@ -7,7 +7,7 @@ import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext.js";
 import { Tappable } from "../Tappable/Tappable.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 import styles from "./CalendarDay.module.css";
-export const CalendarDay = /*#__PURE__*/ React.memo(({ day, today, selected, onChange, hidden, disabled, active, selectionStart, selectionEnd, focused, onEnter, onLeave, hinted, hintedSelectionStart, hintedSelectionEnd, sameMonth, size, className, children, renderDayContent, testId, ...restProps })=>{
+export const CalendarDay = /*#__PURE__*/ React.memo(({ day, today, selected, onChange, hidden, disabled, active, selectionStart, selectionEnd, focused, onEnter, onLeave, hinted, hintedSelectionStart, hintedSelectionEnd, sameMonth, size, children, renderDayContent, testId, ...restProps })=>{
     const { locale } = useConfigProvider();
     const ref = React.useRef(null);
     const onClick = React.useCallback(()=>onChange(day), [
@@ -66,7 +66,7 @@ export const CalendarDay = /*#__PURE__*/ React.memo(({ day, today, selected, onC
         });
     }
     return /*#__PURE__*/ _jsx(Tappable, {
-        className: classNames(styles.host, size === 's' && styles.sizeS, className),
+        baseClassName: classNames(styles.host, size === 's' && styles.sizeS),
         hoverMode: styles.hostHovered,
         activeMode: styles.hostActivated,
         hasActive: false,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CalendarDay/CalendarDay.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from '../../hooks/useKeyboardInputTracker';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { Tappable } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './CalendarDay.module.css';\n\nexport type CalendarDayElementProps = Omit<\n  React.AllHTMLAttributes<HTMLElement>,\n  'onChange' | 'size' | 'disabled' | 'selected'\n>;\n\nexport type CalendarDayTestsProps = {\n  testId?: string | ((day: Date) => string);\n};\n\nexport interface CalendarDayProps extends CalendarDayElementProps, CalendarDayTestsProps {\n  day: Date;\n  today?: boolean;\n  selected?: boolean;\n  selectionStart?: boolean;\n  selectionEnd?: boolean;\n  hintedSelectionStart?: boolean;\n  hintedSelectionEnd?: boolean;\n  active?: boolean;\n  hidden?: boolean;\n  disabled?: boolean;\n  focused?: boolean;\n  hinted?: boolean;\n  sameMonth?: boolean;\n  size?: 's' | 'm';\n  onChange: (value: Date) => void;\n  onEnter?: (value: Date) => void;\n  onLeave?: (value: Date) => void;\n  // Функция отрисовки контента в ячейке дня\n  renderDayContent?: (day: Date) => React.ReactNode;\n}\n\nexport const CalendarDay: React.FC<CalendarDayProps> = React.memo(\n  ({\n    day,\n    today,\n    selected,\n    onChange,\n    hidden,\n    disabled,\n    active,\n    selectionStart,\n    selectionEnd,\n    focused,\n    onEnter,\n    onLeave,\n    hinted,\n    hintedSelectionStart,\n    hintedSelectionEnd,\n    sameMonth,\n    size,\n    className,\n    children,\n    renderDayContent,\n    testId,\n    ...restProps\n  }: CalendarDayProps) => {\n    const { locale } = useConfigProvider();\n    const ref = React.useRef<HTMLElement>(null);\n    const onClick = React.useCallback(() => onChange(day), [day, onChange]);\n    const handleEnter = React.useCallback(() => onEnter?.(day), [day, onEnter]);\n    const handleLeave = React.useCallback(() => onLeave?.(day), [day, onLeave]);\n\n    const label = new Intl.DateTimeFormat(locale, {\n      weekday: 'long',\n      year: 'numeric',\n      month: 'long',\n      day: 'numeric',\n    }).format(day);\n\n    React.useEffect(() => {\n      if (focused && ref.current) {\n        ref.current.dispatchEvent(new Event(ENABLE_KEYBOARD_INPUT_EVENT_NAME, { bubbles: true }));\n        ref.current.focus();\n      }\n    }, [focused]);\n\n    const content = React.useMemo(() => {\n      if (renderDayContent) {\n        return renderDayContent(day);\n      }\n      return (\n        <div className={styles.dayNumber}>\n          <VisuallyHidden>{children ?? label}</VisuallyHidden>\n          <span aria-hidden>{day.getDate()}</span>\n        </div>\n      );\n    }, [renderDayContent, day, children, label]);\n\n    if (hidden) {\n      return <div className={classNames(styles.hidden, size === 's' && styles.sizeS)} />;\n    }\n\n    return (\n      <Tappable\n        className={classNames(styles.host, size === 's' && styles.sizeS, className)}\n        hoverMode={styles.hostHovered}\n        activeMode={styles.hostActivated}\n        hasActive={false}\n        onClick={onClick}\n        disabled={disabled}\n        tabIndex={-1}\n        getRootRef={ref}\n        focusVisibleMode={active ? 'outside' : 'inside'}\n        onPointerEnter={handleEnter}\n        onPointerLeave={handleLeave}\n        data-testid={typeof testId === 'string' ? testId : testId?.(day)}\n        {...restProps}\n      >\n        <div\n          className={classNames(\n            styles.content,\n            size === 's' && styles.sizeS,\n            today && styles.today,\n            selected && !disabled && styles.selected,\n            selectionStart && styles.selectionStart,\n            selectionEnd && styles.selectionEnd,\n            disabled && styles.disabled,\n            !sameMonth && styles.notSameMonth,\n          )}\n        >\n          <div\n            className={classNames(\n              styles.hinted,\n              hinted && styles.hintedActive,\n              hintedSelectionStart && styles.hintedSelectionStart,\n              hintedSelectionEnd && styles.hintedSelectionEnd,\n            )}\n          >\n            <div className={classNames(styles.inner, active && !disabled && styles.innerActive)}>\n              {content}\n            </div>\n          </div>\n        </div>\n      </Tappable>\n    );\n  },\n);\n\nCalendarDay.displayName = 'CalendarDay';\n"],"names":["React","classNames","ENABLE_KEYBOARD_INPUT_EVENT_NAME","useConfigProvider","Tappable","VisuallyHidden","styles","CalendarDay","memo","day","today","selected","onChange","hidden","disabled","active","selectionStart","selectionEnd","focused","onEnter","onLeave","hinted","hintedSelectionStart","hintedSelectionEnd","sameMonth","size","className","children","renderDayContent","testId","restProps","locale","ref","useRef","onClick","useCallback","handleEnter","handleLeave","label","Intl","DateTimeFormat","weekday","year","month","format","useEffect","current","dispatchEvent","Event","bubbles","focus","content","useMemo","div","dayNumber","span","aria-hidden","getDate","sizeS","host","hoverMode","hostHovered","activeMode","hostActivated","hasActive","tabIndex","getRootRef","focusVisibleMode","onPointerEnter","onPointerLeave","data-testid","notSameMonth","hintedActive","inner","innerActive","displayName"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/CalendarDay/CalendarDay.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from '../../hooks/useKeyboardInputTracker';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { Tappable } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './CalendarDay.module.css';\n\nexport type CalendarDayElementProps = Omit<\n  React.AllHTMLAttributes<HTMLElement>,\n  'onChange' | 'size' | 'disabled' | 'selected'\n>;\n\nexport type CalendarDayTestsProps = {\n  testId?: string | ((day: Date) => string);\n};\n\nexport interface CalendarDayProps extends CalendarDayElementProps, CalendarDayTestsProps {\n  day: Date;\n  today?: boolean;\n  selected?: boolean;\n  selectionStart?: boolean;\n  selectionEnd?: boolean;\n  hintedSelectionStart?: boolean;\n  hintedSelectionEnd?: boolean;\n  active?: boolean;\n  hidden?: boolean;\n  disabled?: boolean;\n  focused?: boolean;\n  hinted?: boolean;\n  sameMonth?: boolean;\n  size?: 's' | 'm';\n  onChange: (value: Date) => void;\n  onEnter?: (value: Date) => void;\n  onLeave?: (value: Date) => void;\n  // Функция отрисовки контента в ячейке дня\n  renderDayContent?: (day: Date) => React.ReactNode;\n}\n\nexport const CalendarDay: React.FC<CalendarDayProps> = React.memo(\n  ({\n    day,\n    today,\n    selected,\n    onChange,\n    hidden,\n    disabled,\n    active,\n    selectionStart,\n    selectionEnd,\n    focused,\n    onEnter,\n    onLeave,\n    hinted,\n    hintedSelectionStart,\n    hintedSelectionEnd,\n    sameMonth,\n    size,\n    children,\n    renderDayContent,\n    testId,\n    ...restProps\n  }: CalendarDayProps) => {\n    const { locale } = useConfigProvider();\n    const ref = React.useRef<HTMLElement>(null);\n    const onClick = React.useCallback(() => onChange(day), [day, onChange]);\n    const handleEnter = React.useCallback(() => onEnter?.(day), [day, onEnter]);\n    const handleLeave = React.useCallback(() => onLeave?.(day), [day, onLeave]);\n\n    const label = new Intl.DateTimeFormat(locale, {\n      weekday: 'long',\n      year: 'numeric',\n      month: 'long',\n      day: 'numeric',\n    }).format(day);\n\n    React.useEffect(() => {\n      if (focused && ref.current) {\n        ref.current.dispatchEvent(new Event(ENABLE_KEYBOARD_INPUT_EVENT_NAME, { bubbles: true }));\n        ref.current.focus();\n      }\n    }, [focused]);\n\n    const content = React.useMemo(() => {\n      if (renderDayContent) {\n        return renderDayContent(day);\n      }\n      return (\n        <div className={styles.dayNumber}>\n          <VisuallyHidden>{children ?? label}</VisuallyHidden>\n          <span aria-hidden>{day.getDate()}</span>\n        </div>\n      );\n    }, [renderDayContent, day, children, label]);\n\n    if (hidden) {\n      return <div className={classNames(styles.hidden, size === 's' && styles.sizeS)} />;\n    }\n\n    return (\n      <Tappable\n        baseClassName={classNames(styles.host, size === 's' && styles.sizeS)}\n        hoverMode={styles.hostHovered}\n        activeMode={styles.hostActivated}\n        hasActive={false}\n        onClick={onClick}\n        disabled={disabled}\n        tabIndex={-1}\n        getRootRef={ref}\n        focusVisibleMode={active ? 'outside' : 'inside'}\n        onPointerEnter={handleEnter}\n        onPointerLeave={handleLeave}\n        data-testid={typeof testId === 'string' ? testId : testId?.(day)}\n        {...restProps}\n      >\n        <div\n          className={classNames(\n            styles.content,\n            size === 's' && styles.sizeS,\n            today && styles.today,\n            selected && !disabled && styles.selected,\n            selectionStart && styles.selectionStart,\n            selectionEnd && styles.selectionEnd,\n            disabled && styles.disabled,\n            !sameMonth && styles.notSameMonth,\n          )}\n        >\n          <div\n            className={classNames(\n              styles.hinted,\n              hinted && styles.hintedActive,\n              hintedSelectionStart && styles.hintedSelectionStart,\n              hintedSelectionEnd && styles.hintedSelectionEnd,\n            )}\n          >\n            <div className={classNames(styles.inner, active && !disabled && styles.innerActive)}>\n              {content}\n            </div>\n          </div>\n        </div>\n      </Tappable>\n    );\n  },\n);\n\nCalendarDay.displayName = 'CalendarDay';\n"],"names":["React","classNames","ENABLE_KEYBOARD_INPUT_EVENT_NAME","useConfigProvider","Tappable","VisuallyHidden","styles","CalendarDay","memo","day","today","selected","onChange","hidden","disabled","active","selectionStart","selectionEnd","focused","onEnter","onLeave","hinted","hintedSelectionStart","hintedSelectionEnd","sameMonth","size","children","renderDayContent","testId","restProps","locale","ref","useRef","onClick","useCallback","handleEnter","handleLeave","label","Intl","DateTimeFormat","weekday","year","month","format","useEffect","current","dispatchEvent","Event","bubbles","focus","content","useMemo","div","className","dayNumber","span","aria-hidden","getDate","sizeS","baseClassName","host","hoverMode","hostHovered","activeMode","hostActivated","hasActive","tabIndex","getRootRef","focusVisibleMode","onPointerEnter","onPointerLeave","data-testid","notSameMonth","hintedActive","inner","innerActive","displayName"],"mappings":"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"}

package/dist/cssm/components/CalendarHeader/CalendarHeader.js

@@ -72,7 +72,7 @@ export const CalendarHeader = ({ viewDate, onChange, prevMonthHidden: prevMonthH
             !prevMonthHidden && /*#__PURE__*/ _jsx(AdaptivityProvider, {
                 sizeX: "regular",
                 children: /*#__PURE__*/ _jsxs(Tappable, {
-                    className: classNames(styles.navIcon, styles.navIconPrev, prevMonthClassName),
+                    baseClassName: classNames(styles.navIcon, styles.navIconPrev, prevMonthClassName),
                     onClick: onPrevMonth,
                     "data-testid": prevMonthButtonTestId,
                     ...restPrevMonthProps,
@@ -140,7 +140,7 @@ export const CalendarHeader = ({ viewDate, onChange, prevMonthHidden: prevMonthH
             !nextMonthHidden && /*#__PURE__*/ _jsx(AdaptivityProvider, {
                 sizeX: "regular",
                 children: /*#__PURE__*/ _jsxs(Tappable, {
-                    className: classNames(styles.navIcon, styles.navIconNext, nextMonthClassName),
+                    baseClassName: classNames(styles.navIcon, styles.navIconNext, nextMonthClassName),
                     onClick: onNextMonth,
                     "data-testid": nextMonthButtonTestId,
                     ...restNextMonthProps,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["'use client';\n\nimport { type ChangeEvent } from 'react';\nimport * as React from 'react';\nimport {\n  Icon12Dropdown,\n  Icon20ChevronLeftOutline,\n  Icon20ChevronRightOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { addMonths, setMonth, setYear, subMonths } from 'date-fns';\nimport { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR, getMonths, getYears } from '../../lib/calendar';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { CustomSelect, type SelectProps } from '../CustomSelect/CustomSelect';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './CalendarHeader.module.css';\n\ntype ArrowMonthProps = Omit<React.AllHTMLAttributes<HTMLElement>, 'onClick' | 'aria-label'>;\n\nexport type CalendarHeaderTestsProps = {\n  monthDropdownTestId?: string | ((monthIndex: number) => string);\n  yearDropdownTestId?: string | ((year: number) => string);\n  nextMonthButtonTestId?: string;\n  prevMonthButtonTestId?: string;\n};\n\nexport interface CalendarHeaderProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n    CalendarHeaderTestsProps {\n  viewDate: Date;\n  /**\n   * Скрывает иконку для переключения на предыдущий месяц\n   */\n  prevMonthHidden?: boolean;\n  /**\n   * Скрывает иконку для переключения на следующий месяц\n   */\n  nextMonthHidden?: boolean;\n  disablePickers?: boolean;\n  prevMonthLabel?: string;\n  nextMonthLabel?: string;\n  changeMonthLabel?: string;\n  changeYearLabel?: string;\n  prevMonthIcon?: React.ReactNode;\n  nextMonthIcon?: React.ReactNode;\n  prevMonthProps?: ArrowMonthProps;\n  nextMonthProps?: ArrowMonthProps;\n  isMonthDisabled?: (monthNumber: number, year?: number) => boolean;\n  isYearDisabled?: (yearNumber: number) => boolean;\n  onChange: (viewDate: Date) => void;\n  /**\n   * Нажатие на кнопку переключения на следующий месяц.\n   */\n  onNextMonth?: () => void;\n  /**\n   * Нажатие на кнопку переключения на предыдущий месяц.\n   */\n  onPrevMonth?: () => void;\n}\n\nexport const CalendarHeader = ({\n  viewDate,\n  onChange,\n  prevMonthHidden: prevMonthHiddenProp = false,\n  nextMonthHidden: nextMonthHiddenProp = false,\n  disablePickers = false,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthProps = {},\n  nextMonthProps = {},\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  prevMonthIcon = (\n    <Icon20ChevronLeftOutline className={styles.navIconAccent} width={30} height={30} />\n  ),\n  nextMonthIcon = (\n    <Icon20ChevronRightOutline className={styles.navIconAccent} width={30} height={30} />\n  ),\n  isMonthDisabled,\n  isYearDisabled,\n  monthDropdownTestId,\n  yearDropdownTestId,\n  prevMonthButtonTestId,\n  nextMonthButtonTestId,\n  ...restProps\n}: CalendarHeaderProps): React.ReactNode => {\n  const { locale } = useConfigProvider();\n  const onMonthsChange = React.useCallback(\n    (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>\n      onChange(setMonth(viewDate, Number(newValue))),\n    [onChange, viewDate],\n  );\n  const onYearChange = React.useCallback(\n    (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>\n      onChange(setYear(viewDate, Number(newValue))),\n    [onChange, viewDate],\n  );\n\n  const currentYear = viewDate.getFullYear();\n  const currentMonth = viewDate.getMonth();\n\n  const months = React.useMemo(\n    () =>\n      getMonths(locale).map(({ value, label }) => ({\n        value,\n        label: <span className={styles.month}>{label}</span>,\n        disabled: isMonthDisabled && isMonthDisabled(value),\n      })),\n    [locale, isMonthDisabled],\n  );\n\n  const years = React.useMemo(\n    () =>\n      getYears(currentYear, 100).map((year) => ({\n        ...year,\n        disabled: isYearDisabled && isYearDisabled(year.value),\n      })),\n    [currentYear, isYearDisabled],\n  );\n\n  const formatter = new Intl.DateTimeFormat(locale, {\n    year: 'numeric',\n    month: 'long',\n  });\n\n  const { className: prevMonthClassName, ...restPrevMonthProps } = prevMonthProps;\n  const { className: nextMonthClassName, ...restNextMonthProps } = nextMonthProps;\n\n  let nextMonthHidden =\n    nextMonthHiddenProp || (currentMonth === 11 && currentYear === DEFAULT_MAX_YEAR);\n  if (isMonthDisabled && !nextMonthHidden) {\n    nextMonthHidden = isMonthDisabled(\n      currentMonth === 11 ? 0 : currentMonth + 1,\n      currentMonth === 11 ? Math.min(currentYear + 1, DEFAULT_MAX_YEAR) : currentYear,\n    );\n  }\n\n  let prevMonthHidden =\n    prevMonthHiddenProp || (currentMonth === 0 && currentYear === DEFAULT_MIN_YEAR);\n  if (isMonthDisabled && !prevMonthHidden) {\n    prevMonthHidden = isMonthDisabled(\n      currentMonth === 0 ? 11 : currentMonth - 1,\n      currentMonth === 0 ? Math.max(currentYear - 1, DEFAULT_MIN_YEAR) : currentYear,\n    );\n  }\n\n  return (\n    <RootComponent baseClassName={styles.host} {...restProps}>\n      {!prevMonthHidden && (\n        <AdaptivityProvider sizeX=\"regular\">\n          <Tappable\n            className={classNames(styles.navIcon, styles.navIconPrev, prevMonthClassName)}\n            onClick={onPrevMonth}\n            data-testid={prevMonthButtonTestId}\n            {...restPrevMonthProps}\n          >\n            <VisuallyHidden>\n              {prevMonthLabel}, {formatter.format(subMonths(viewDate, 1))}\n            </VisuallyHidden>\n            {prevMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n      {disablePickers ? (\n        <Paragraph\n          className={classNames(styles.pickers, 'vkuiInternalCalendarHeader__pickers')}\n          weight=\"2\"\n        >\n          <span className={styles.month}>\n            {new Intl.DateTimeFormat(locale, {\n              month: 'long',\n            }).format(viewDate)}\n          </span>\n          &nbsp;\n          {new Intl.DateTimeFormat(locale, {\n            year: 'numeric',\n          }).format(viewDate)}\n        </Paragraph>\n      ) : (\n        <AdaptivityProvider sizeY=\"compact\">\n          <div className={classNames(styles.pickers, 'vkuiInternalCalendarHeader__pickers')}>\n            <CustomSelect\n              className={classNames(styles.picker, 'vkuiInternalCalendarHeader__picker')}\n              value={currentMonth}\n              options={months}\n              dropdownOffsetDistance={4}\n              dropdownAutoWidth\n              icon={<Icon12Dropdown />}\n              onChange={onMonthsChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeMonthLabel}\n              data-testid={\n                typeof monthDropdownTestId === 'string'\n                  ? monthDropdownTestId\n                  : monthDropdownTestId?.(currentMonth)\n              }\n            />\n            <CustomSelect\n              className={classNames(styles.picker, 'vkuiInternalCalendarHeader__picker')}\n              value={currentYear}\n              options={years}\n              dropdownOffsetDistance={4}\n              dropdownAutoWidth\n              icon={<Icon12Dropdown />}\n              onChange={onYearChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeYearLabel}\n              data-testid={yearDropdownTestId}\n            />\n          </div>\n        </AdaptivityProvider>\n      )}\n      {!nextMonthHidden && (\n        <AdaptivityProvider sizeX=\"regular\">\n          <Tappable\n            className={classNames(styles.navIcon, styles.navIconNext, nextMonthClassName)}\n            onClick={onNextMonth}\n            data-testid={nextMonthButtonTestId}\n            {...restNextMonthProps}\n          >\n            <VisuallyHidden>\n              {nextMonthLabel}, {formatter.format(addMonths(viewDate, 1))}\n            </VisuallyHidden>\n            {nextMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon12Dropdown","Icon20ChevronLeftOutline","Icon20ChevronRightOutline","classNames","addMonths","setMonth","setYear","subMonths","DEFAULT_MAX_YEAR","DEFAULT_MIN_YEAR","getMonths","getYears","AdaptivityProvider","useConfigProvider","CustomSelect","RootComponent","Tappable","Paragraph","VisuallyHidden","styles","CalendarHeader","viewDate","onChange","prevMonthHidden","prevMonthHiddenProp","nextMonthHidden","nextMonthHiddenProp","disablePickers","onNextMonth","onPrevMonth","prevMonthProps","nextMonthProps","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","prevMonthIcon","className","navIconAccent","width","height","nextMonthIcon","isMonthDisabled","isYearDisabled","monthDropdownTestId","yearDropdownTestId","prevMonthButtonTestId","nextMonthButtonTestId","restProps","locale","onMonthsChange","useCallback","_","newValue","Number","onYearChange","currentYear","getFullYear","currentMonth","getMonth","months","useMemo","map","value","label","span","month","disabled","years","year","formatter","Intl","DateTimeFormat","prevMonthClassName","restPrevMonthProps","nextMonthClassName","restNextMonthProps","Math","min","max","baseClassName","host","sizeX","navIcon","navIconPrev","onClick","data-testid","format","pickers","weight","sizeY","div","picker","options","dropdownOffsetDistance","dropdownAutoWidth","icon","forceDropdownPortal","selectType","aria-label","navIconNext"],"mappings":"AAAA;;AAGA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,cAAc,EACdC,wBAAwB,EACxBC,yBAAyB,QACpB,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,SAAS,QAAQ,WAAW;AACnE,SAASC,gBAAgB,EAAEC,gBAAgB,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,wBAAqB;AAE7F,SAASC,kBAAkB,QAAQ,8CAA2C;AAC9E,SAASC,iBAAiB,QAAQ,6CAA0C;AAC5E,SAASC,YAAY,QAA0B,kCAA+B;AAC9E,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,SAAS,QAAQ,uCAAoC;AAC9D,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,8BAA8B;AA6CjD,OAAO,MAAMC,iBAAiB,CAAC,EAC7BC,QAAQ,EACRC,QAAQ,EACRC,iBAAiBC,sBAAsB,KAAK,EAC5CC,iBAAiBC,sBAAsB,KAAK,EAC5CC,iBAAiB,KAAK,EACtBC,WAAW,EACXC,WAAW,EACXC,iBAAiB,CAAC,CAAC,EACnBC,iBAAiB,CAAC,CAAC,EACnBC,iBAAiB,kBAAkB,EACnCC,iBAAiB,iBAAiB,EAClCC,mBAAmB,gBAAgB,EACnCC,kBAAkB,cAAc,EAChCC,8BACE,KAACnC;IAAyBoC,WAAWlB,OAAOmB,aAAa;IAAEC,OAAO;IAAIC,QAAQ;EAC/E,EACDC,8BACE,KAACvC;IAA0BmC,WAAWlB,OAAOmB,aAAa;IAAEC,OAAO;IAAIC,QAAQ;EAChF,EACDE,eAAe,EACfC,cAAc,EACdC,mBAAmB,EACnBC,kBAAkB,EAClBC,qBAAqB,EACrBC,qBAAqB,EACrB,GAAGC,WACiB;IACpB,MAAM,EAAEC,MAAM,EAAE,GAAGpC;IACnB,MAAMqC,iBAAiBnD,MAAMoD,WAAW,CACtC,CAACC,GAAmCC,WAClC/B,SAASjB,SAASgB,UAAUiC,OAAOD,aACrC;QAAC/B;QAAUD;KAAS;IAEtB,MAAMkC,eAAexD,MAAMoD,WAAW,CACpC,CAACC,GAAmCC,WAClC/B,SAAShB,QAAQe,UAAUiC,OAAOD,aACpC;QAAC/B;QAAUD;KAAS;IAGtB,MAAMmC,cAAcnC,SAASoC,WAAW;IACxC,MAAMC,eAAerC,SAASsC,QAAQ;IAEtC,MAAMC,SAAS7D,MAAM8D,OAAO,CAC1B,IACEnD,UAAUuC,QAAQa,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAM,CAAA;gBAC3CD;gBACAC,qBAAO,KAACC;oBAAK5B,WAAWlB,OAAO+C,KAAK;8BAAGF;;gBACvCG,UAAUzB,mBAAmBA,gBAAgBqB;YAC/C,CAAA,IACF;QAACd;QAAQP;KAAgB;IAG3B,MAAM0B,QAAQrE,MAAM8D,OAAO,CACzB,IACElD,SAAS6C,aAAa,KAAKM,GAAG,CAAC,CAACO,OAAU,CAAA;gBACxC,GAAGA,IAAI;gBACPF,UAAUxB,kBAAkBA,eAAe0B,KAAKN,KAAK;YACvD,CAAA,IACF;QAACP;QAAab;KAAe;IAG/B,MAAM2B,YAAY,IAAIC,KAAKC,cAAc,CAACvB,QAAQ;QAChDoB,MAAM;QACNH,OAAO;IACT;IAEA,MAAM,EAAE7B,WAAWoC,kBAAkB,EAAE,GAAGC,oBAAoB,GAAG5C;IACjE,MAAM,EAAEO,WAAWsC,kBAAkB,EAAE,GAAGC,oBAAoB,GAAG7C;IAEjE,IAAIN,kBACFC,uBAAwBgC,iBAAiB,MAAMF,gBAAgBhD;IACjE,IAAIkC,mBAAmB,CAACjB,iBAAiB;QACvCA,kBAAkBiB,gBAChBgB,iBAAiB,KAAK,IAAIA,eAAe,GACzCA,iBAAiB,KAAKmB,KAAKC,GAAG,CAACtB,cAAc,GAAGhD,oBAAoBgD;IAExE;IAEA,IAAIjC,kBACFC,uBAAwBkC,iBAAiB,KAAKF,gBAAgB/C;IAChE,IAAIiC,mBAAmB,CAACnB,iBAAiB;QACvCA,kBAAkBmB,gBAChBgB,iBAAiB,IAAI,KAAKA,eAAe,GACzCA,iBAAiB,IAAImB,KAAKE,GAAG,CAACvB,cAAc,GAAG/C,oBAAoB+C;IAEvE;IAEA,qBACE,MAACzC;QAAciE,eAAe7D,OAAO8D,IAAI;QAAG,GAAGjC,SAAS;;YACrD,CAACzB,iCACA,KAACX;gBAAmBsE,OAAM;0BACxB,cAAA,MAAClE;oBACCqB,WAAWlC,WAAWgB,OAAOgE,OAAO,EAAEhE,OAAOiE,WAAW,EAAEX;oBAC1DY,SAASxD;oBACTyD,eAAaxC;oBACZ,GAAG4B,kBAAkB;;sCAEtB,MAACxD;;gCACEc;gCAAe;gCAAGsC,UAAUiB,MAAM,CAAChF,UAAUc,UAAU;;;wBAEzDe;;;;YAINT,+BACC,MAACV;gBACCoB,WAAWlC,WAAWgB,OAAOqE,OAAO,EAAE;gBACtCC,QAAO;;kCAEP,KAACxB;wBAAK5B,WAAWlB,OAAO+C,KAAK;kCAC1B,IAAIK,KAAKC,cAAc,CAACvB,QAAQ;4BAC/BiB,OAAO;wBACT,GAAGqB,MAAM,CAAClE;;oBACL;oBAEN,IAAIkD,KAAKC,cAAc,CAACvB,QAAQ;wBAC/BoB,MAAM;oBACR,GAAGkB,MAAM,CAAClE;;+BAGZ,KAACT;gBAAmB8E,OAAM;0BACxB,cAAA,MAACC;oBAAItD,WAAWlC,WAAWgB,OAAOqE,OAAO,EAAE;;sCACzC,KAAC1E;4BACCuB,WAAWlC,WAAWgB,OAAOyE,MAAM,EAAE;4BACrC7B,OAAOL;4BACPmC,SAASjC;4BACTkC,wBAAwB;4BACxBC,iBAAiB;4BACjBC,oBAAM,KAAChG;4BACPsB,UAAU4B;4BACV+C,qBAAqB;4BACrBC,YAAW;4BACXC,cAAYjE;4BACZoD,eACE,OAAO1C,wBAAwB,WAC3BA,sBACAA,sBAAsBc;;sCAG9B,KAAC5C;4BACCuB,WAAWlC,WAAWgB,OAAOyE,MAAM,EAAE;4BACrC7B,OAAOP;4BACPqC,SAASzB;4BACT0B,wBAAwB;4BACxBC,iBAAiB;4BACjBC,oBAAM,KAAChG;4BACPsB,UAAUiC;4BACV0C,qBAAqB;4BACrBC,YAAW;4BACXC,cAAYhE;4BACZmD,eAAazC;;;;;YAKpB,CAACpB,iCACA,KAACb;gBAAmBsE,OAAM;0BACxB,cAAA,MAAClE;oBACCqB,WAAWlC,WAAWgB,OAAOgE,OAAO,EAAEhE,OAAOiF,WAAW,EAAEzB;oBAC1DU,SAASzD;oBACT0D,eAAavC;oBACZ,GAAG6B,kBAAkB;;sCAEtB,MAAC1D;;gCACEe;gCAAe;gCAAGqC,UAAUiB,MAAM,CAACnF,UAAUiB,UAAU;;;wBAEzDoB;;;;;;AAMb,EAAE"}
+{"version":3,"sources":["../../../../src/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["'use client';\n\nimport { type ChangeEvent } from 'react';\nimport * as React from 'react';\nimport {\n  Icon12Dropdown,\n  Icon20ChevronLeftOutline,\n  Icon20ChevronRightOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { addMonths, setMonth, setYear, subMonths } from 'date-fns';\nimport { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR, getMonths, getYears } from '../../lib/calendar';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { CustomSelect, type SelectProps } from '../CustomSelect/CustomSelect';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './CalendarHeader.module.css';\n\ntype ArrowMonthProps = Omit<React.AllHTMLAttributes<HTMLElement>, 'onClick' | 'aria-label'>;\n\nexport type CalendarHeaderTestsProps = {\n  monthDropdownTestId?: string | ((monthIndex: number) => string);\n  yearDropdownTestId?: string | ((year: number) => string);\n  nextMonthButtonTestId?: string;\n  prevMonthButtonTestId?: string;\n};\n\nexport interface CalendarHeaderProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n    CalendarHeaderTestsProps {\n  viewDate: Date;\n  /**\n   * Скрывает иконку для переключения на предыдущий месяц\n   */\n  prevMonthHidden?: boolean;\n  /**\n   * Скрывает иконку для переключения на следующий месяц\n   */\n  nextMonthHidden?: boolean;\n  disablePickers?: boolean;\n  prevMonthLabel?: string;\n  nextMonthLabel?: string;\n  changeMonthLabel?: string;\n  changeYearLabel?: string;\n  prevMonthIcon?: React.ReactNode;\n  nextMonthIcon?: React.ReactNode;\n  prevMonthProps?: ArrowMonthProps;\n  nextMonthProps?: ArrowMonthProps;\n  isMonthDisabled?: (monthNumber: number, year?: number) => boolean;\n  isYearDisabled?: (yearNumber: number) => boolean;\n  onChange: (viewDate: Date) => void;\n  /**\n   * Нажатие на кнопку переключения на следующий месяц.\n   */\n  onNextMonth?: () => void;\n  /**\n   * Нажатие на кнопку переключения на предыдущий месяц.\n   */\n  onPrevMonth?: () => void;\n}\n\nexport const CalendarHeader = ({\n  viewDate,\n  onChange,\n  prevMonthHidden: prevMonthHiddenProp = false,\n  nextMonthHidden: nextMonthHiddenProp = false,\n  disablePickers = false,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthProps = {},\n  nextMonthProps = {},\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  prevMonthIcon = (\n    <Icon20ChevronLeftOutline className={styles.navIconAccent} width={30} height={30} />\n  ),\n  nextMonthIcon = (\n    <Icon20ChevronRightOutline className={styles.navIconAccent} width={30} height={30} />\n  ),\n  isMonthDisabled,\n  isYearDisabled,\n  monthDropdownTestId,\n  yearDropdownTestId,\n  prevMonthButtonTestId,\n  nextMonthButtonTestId,\n  ...restProps\n}: CalendarHeaderProps): React.ReactNode => {\n  const { locale } = useConfigProvider();\n  const onMonthsChange = React.useCallback(\n    (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>\n      onChange(setMonth(viewDate, Number(newValue))),\n    [onChange, viewDate],\n  );\n  const onYearChange = React.useCallback(\n    (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>\n      onChange(setYear(viewDate, Number(newValue))),\n    [onChange, viewDate],\n  );\n\n  const currentYear = viewDate.getFullYear();\n  const currentMonth = viewDate.getMonth();\n\n  const months = React.useMemo(\n    () =>\n      getMonths(locale).map(({ value, label }) => ({\n        value,\n        label: <span className={styles.month}>{label}</span>,\n        disabled: isMonthDisabled && isMonthDisabled(value),\n      })),\n    [locale, isMonthDisabled],\n  );\n\n  const years = React.useMemo(\n    () =>\n      getYears(currentYear, 100).map((year) => ({\n        ...year,\n        disabled: isYearDisabled && isYearDisabled(year.value),\n      })),\n    [currentYear, isYearDisabled],\n  );\n\n  const formatter = new Intl.DateTimeFormat(locale, {\n    year: 'numeric',\n    month: 'long',\n  });\n\n  const { className: prevMonthClassName, ...restPrevMonthProps } = prevMonthProps;\n  const { className: nextMonthClassName, ...restNextMonthProps } = nextMonthProps;\n\n  let nextMonthHidden =\n    nextMonthHiddenProp || (currentMonth === 11 && currentYear === DEFAULT_MAX_YEAR);\n  if (isMonthDisabled && !nextMonthHidden) {\n    nextMonthHidden = isMonthDisabled(\n      currentMonth === 11 ? 0 : currentMonth + 1,\n      currentMonth === 11 ? Math.min(currentYear + 1, DEFAULT_MAX_YEAR) : currentYear,\n    );\n  }\n\n  let prevMonthHidden =\n    prevMonthHiddenProp || (currentMonth === 0 && currentYear === DEFAULT_MIN_YEAR);\n  if (isMonthDisabled && !prevMonthHidden) {\n    prevMonthHidden = isMonthDisabled(\n      currentMonth === 0 ? 11 : currentMonth - 1,\n      currentMonth === 0 ? Math.max(currentYear - 1, DEFAULT_MIN_YEAR) : currentYear,\n    );\n  }\n\n  return (\n    <RootComponent baseClassName={styles.host} {...restProps}>\n      {!prevMonthHidden && (\n        <AdaptivityProvider sizeX=\"regular\">\n          <Tappable\n            baseClassName={classNames(styles.navIcon, styles.navIconPrev, prevMonthClassName)}\n            onClick={onPrevMonth}\n            data-testid={prevMonthButtonTestId}\n            {...restPrevMonthProps}\n          >\n            <VisuallyHidden>\n              {prevMonthLabel}, {formatter.format(subMonths(viewDate, 1))}\n            </VisuallyHidden>\n            {prevMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n      {disablePickers ? (\n        <Paragraph\n          className={classNames(styles.pickers, 'vkuiInternalCalendarHeader__pickers')}\n          weight=\"2\"\n        >\n          <span className={styles.month}>\n            {new Intl.DateTimeFormat(locale, {\n              month: 'long',\n            }).format(viewDate)}\n          </span>\n          &nbsp;\n          {new Intl.DateTimeFormat(locale, {\n            year: 'numeric',\n          }).format(viewDate)}\n        </Paragraph>\n      ) : (\n        <AdaptivityProvider sizeY=\"compact\">\n          <div className={classNames(styles.pickers, 'vkuiInternalCalendarHeader__pickers')}>\n            <CustomSelect\n              className={classNames(styles.picker, 'vkuiInternalCalendarHeader__picker')}\n              value={currentMonth}\n              options={months}\n              dropdownOffsetDistance={4}\n              dropdownAutoWidth\n              icon={<Icon12Dropdown />}\n              onChange={onMonthsChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeMonthLabel}\n              data-testid={\n                typeof monthDropdownTestId === 'string'\n                  ? monthDropdownTestId\n                  : monthDropdownTestId?.(currentMonth)\n              }\n            />\n            <CustomSelect\n              className={classNames(styles.picker, 'vkuiInternalCalendarHeader__picker')}\n              value={currentYear}\n              options={years}\n              dropdownOffsetDistance={4}\n              dropdownAutoWidth\n              icon={<Icon12Dropdown />}\n              onChange={onYearChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeYearLabel}\n              data-testid={yearDropdownTestId}\n            />\n          </div>\n        </AdaptivityProvider>\n      )}\n      {!nextMonthHidden && (\n        <AdaptivityProvider sizeX=\"regular\">\n          <Tappable\n            baseClassName={classNames(styles.navIcon, styles.navIconNext, nextMonthClassName)}\n            onClick={onNextMonth}\n            data-testid={nextMonthButtonTestId}\n            {...restNextMonthProps}\n          >\n            <VisuallyHidden>\n              {nextMonthLabel}, {formatter.format(addMonths(viewDate, 1))}\n            </VisuallyHidden>\n            {nextMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon12Dropdown","Icon20ChevronLeftOutline","Icon20ChevronRightOutline","classNames","addMonths","setMonth","setYear","subMonths","DEFAULT_MAX_YEAR","DEFAULT_MIN_YEAR","getMonths","getYears","AdaptivityProvider","useConfigProvider","CustomSelect","RootComponent","Tappable","Paragraph","VisuallyHidden","styles","CalendarHeader","viewDate","onChange","prevMonthHidden","prevMonthHiddenProp","nextMonthHidden","nextMonthHiddenProp","disablePickers","onNextMonth","onPrevMonth","prevMonthProps","nextMonthProps","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","prevMonthIcon","className","navIconAccent","width","height","nextMonthIcon","isMonthDisabled","isYearDisabled","monthDropdownTestId","yearDropdownTestId","prevMonthButtonTestId","nextMonthButtonTestId","restProps","locale","onMonthsChange","useCallback","_","newValue","Number","onYearChange","currentYear","getFullYear","currentMonth","getMonth","months","useMemo","map","value","label","span","month","disabled","years","year","formatter","Intl","DateTimeFormat","prevMonthClassName","restPrevMonthProps","nextMonthClassName","restNextMonthProps","Math","min","max","baseClassName","host","sizeX","navIcon","navIconPrev","onClick","data-testid","format","pickers","weight","sizeY","div","picker","options","dropdownOffsetDistance","dropdownAutoWidth","icon","forceDropdownPortal","selectType","aria-label","navIconNext"],"mappings":"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"}

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

@@ -1,4 +1,6 @@
+'use client';
 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";

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ColorSchemeProvider/ColorSchemeProvider.tsx"],"sourcesContent":["import * 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,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';\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"}

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

@@ -1,3 +1,4 @@
+'use client';
 import * as React from "react";
 import { platform } from "../../lib/platform.js";
 import { DEFAULT_TOKENS_CLASS_NAMES } from "../../lib/tokens/index.js";

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProviderContext.tsx"],"sourcesContent":["import * 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"],"names":["React","platform","DEFAULT_TOKENS_CLASS_NAMES","ConfigProviderContext","createContext","hasCustomPanelHeaderAfter","customPanelHeaderAfterMinWidth","isWebView","transitionMotionEnabled","colorScheme","undefined","tokensClassNames","locale","useConfigProvider","useContext"],"mappings":"AAAA,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"}
+{"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"],"names":["React","platform","DEFAULT_TOKENS_CLASS_NAMES","ConfigProviderContext","createContext","hasCustomPanelHeaderAfter","customPanelHeaderAfterMinWidth","isWebView","transitionMotionEnabled","colorScheme","undefined","tokensClassNames","locale","useConfigProvider","useContext"],"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"}

package/dist/cssm/components/ContentBadge/ContentBadgeContext.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from "react";
 /**
  * Контекст для внутреннего использовния.

package/dist/cssm/components/ContentBadge/ContentBadgeContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ContentBadge/ContentBadgeContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ContentBadgeSizeType } from './types';\n\ntype ContentBadgeContextValue = {\n  isSingleChild: boolean;\n  size: ContentBadgeSizeType;\n};\n\n/**\n * Контекст для внутреннего использовния.\n * @private\n */\nexport const ContentBadgeContext: React.Context<ContentBadgeContextValue> =\n  React.createContext<ContentBadgeContextValue>({\n    isSingleChild: false,\n    size: 'm',\n  });\n"],"names":["React","ContentBadgeContext","createContext","isSingleChild","size"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAQ/B;;;CAGC,GACD,OAAO,MAAMC,oCACXD,MAAME,aAAa,CAA2B;IAC5CC,eAAe;IACfC,MAAM;AACR,GAAG"}
+{"version":3,"sources":["../../../../src/components/ContentBadge/ContentBadgeContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ContentBadgeSizeType } from './types';\n\ntype ContentBadgeContextValue = {\n  isSingleChild: boolean;\n  size: ContentBadgeSizeType;\n};\n\n/**\n * Контекст для внутреннего использовния.\n * @private\n */\nexport const ContentBadgeContext: React.Context<ContentBadgeContextValue> =\n  React.createContext<ContentBadgeContextValue>({\n    isSingleChild: false,\n    size: 'm',\n  });\n"],"names":["React","ContentBadgeContext","createContext","isSingleChild","size"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAQ/B;;;CAGC,GACD,OAAO,MAAMC,oCACXD,MAAME,aAAa,CAA2B;IAC5CC,eAAe;IACfC,MAAM;AACR,GAAG"}

package/dist/cssm/components/Counter/Counter.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { mergeStyle } from "../../helpers/mergeStyle.js";
 import { Caption } from "../Typography/Caption/Caption.js";
 import { Headline } from "../Typography/Headline/Headline.js";
 import styles from "./Counter.module.css";
@@ -39,27 +40,23 @@ const sizeClassNames = {
     ]);
     const style = React.useMemo(()=>{
         if (mode === 'inherit' || appearance !== 'custom' || !color) {
-            return styleProp;
+            return undefined;
         }
         switch(mode){
             case 'primary':
                 return {
-                    ...styleProp,
                     '--vkui_internal--counter_background': color
                 };
             case 'contrast':
             case 'tertiary':
                 return {
-                    ...styleProp,
                     '--vkui_internal--counter_foreground': color
                 };
         }
-        return styleProp;
     }, [
         appearance,
         color,
-        mode,
-        styleProp
+        mode
     ]);
     if (React.Children.count(children) === 0) {
         return null;
@@ -68,7 +65,7 @@ const sizeClassNames = {
     const counterLevel = size === 's' ? '1' : '2';
     return /*#__PURE__*/ _jsx(CounterTypography, {
         ...restProps,
-        style: style,
+        style: mergeStyle(style, styleProp),
         Component: "span",
         className: classNames('vkuiInternalCounter', styles.host, modeClassNames[mode], !!appearance && appearanceClassNames[appearance], sizeClassNames[size], className),
         level: counterLevel,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Counter/Counter.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type HTMLAttributesWithRootRef } from '../../types';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './Counter.module.css';\n\nconst modeClassNames = {\n  primary: styles.modePrimary,\n  contrast: styles.modeContrast,\n  tertiary: styles.modeTertiary,\n  inherit: styles.modeInherit,\n};\n\nconst appearanceClassNames: Record<string, string> = {\n  'custom': styles.appearanceCustom,\n  'accent': styles.appearanceAccent,\n  'neutral': styles.appearanceNeutral,\n  'accent-green': styles.appearanceAccentGreen,\n  'accent-red': styles.appearanceAccentRed,\n};\n\nconst sizeClassNames = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n};\n\nexport interface CounterProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {\n  /**\n   * Режим отображения счетчика\n   */\n  mode?: 'primary' | 'contrast' | 'tertiary' | 'inherit';\n\n  /**\n   * Внешний вид счетчика\n   */\n  appearance?: 'accent' | 'neutral' | 'accent-green' | 'accent-red' | 'custom';\n\n  /**\n   * Пользовательский цвет (работает только при appearance=\"custom\")\n   * - При mode=\"primary\" - изменяет фон\n   * - При mode=\"contrast\" - изменяет цвет текста\n   * - При mode=\"tertiary\" - изменяет цвет текста\n   * - При mode=\"inherit\" - не работает\n   */\n  color?: string;\n\n  size?: 's' | 'm';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Counter\n */\nexport const Counter = ({\n  mode = 'inherit',\n  appearance: appearanceProp,\n  color,\n  size = 'm',\n  children,\n  className,\n  style: styleProp,\n  ...restProps\n}: CounterProps): React.ReactNode => {\n  const appearance = React.useMemo<CounterProps['appearance']>(() => {\n    if (mode === 'inherit') {\n      return undefined;\n    }\n    if (appearanceProp) {\n      return appearanceProp;\n    }\n    return 'accent';\n  }, [appearanceProp, mode]);\n\n  const style = React.useMemo(() => {\n    if (mode === 'inherit' || appearance !== 'custom' || !color) {\n      return styleProp;\n    }\n    switch (mode) {\n      case 'primary':\n        return {\n          ...styleProp,\n          '--vkui_internal--counter_background': color,\n        };\n      case 'contrast':\n      case 'tertiary':\n        return {\n          ...styleProp,\n          '--vkui_internal--counter_foreground': color,\n        };\n    }\n    return styleProp;\n  }, [appearance, color, mode, styleProp]);\n\n  if (React.Children.count(children) === 0) {\n    return null;\n  }\n\n  const CounterTypography = size === 's' ? Caption : Headline;\n  const counterLevel = size === 's' ? '1' : '2';\n\n  return (\n    <CounterTypography\n      {...restProps}\n      style={style}\n      Component=\"span\"\n      className={classNames(\n        'vkuiInternalCounter',\n        styles.host,\n        modeClassNames[mode],\n        !!appearance && appearanceClassNames[appearance],\n        sizeClassNames[size],\n        className,\n      )}\n      level={counterLevel}\n    >\n      {children}\n    </CounterTypography>\n  );\n};\n"],"names":["React","classNames","Caption","Headline","styles","modeClassNames","primary","modePrimary","contrast","modeContrast","tertiary","modeTertiary","inherit","modeInherit","appearanceClassNames","appearanceCustom","appearanceAccent","appearanceNeutral","appearanceAccentGreen","appearanceAccentRed","sizeClassNames","s","sizeS","m","sizeM","Counter","mode","appearance","appearanceProp","color","size","children","className","style","styleProp","restProps","useMemo","undefined","Children","count","CounterTypography","counterLevel","Component","host","level"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,OAAOC,YAAY,uBAAuB;AAE1C,MAAMC,iBAAiB;IACrBC,SAASF,OAAOG,WAAW;IAC3BC,UAAUJ,OAAOK,YAAY;IAC7BC,UAAUN,OAAOO,YAAY;IAC7BC,SAASR,OAAOS,WAAW;AAC7B;AAEA,MAAMC,uBAA+C;IACnD,UAAUV,OAAOW,gBAAgB;IACjC,UAAUX,OAAOY,gBAAgB;IACjC,WAAWZ,OAAOa,iBAAiB;IACnC,gBAAgBb,OAAOc,qBAAqB;IAC5C,cAAcd,OAAOe,mBAAmB;AAC1C;AAEA,MAAMC,iBAAiB;IACrBC,GAAGjB,OAAOkB,KAAK;IACfC,GAAGnB,OAAOoB,KAAK;AACjB;AAyBA;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EACtBC,OAAO,SAAS,EAChBC,YAAYC,cAAc,EAC1BC,KAAK,EACLC,OAAO,GAAG,EACVC,QAAQ,EACRC,SAAS,EACTC,OAAOC,SAAS,EAChB,GAAGC,WACU;IACb,MAAMR,aAAa3B,MAAMoC,OAAO,CAA6B;QAC3D,IAAIV,SAAS,WAAW;YACtB,OAAOW;QACT;QACA,IAAIT,gBAAgB;YAClB,OAAOA;QACT;QACA,OAAO;IACT,GAAG;QAACA;QAAgBF;KAAK;IAEzB,MAAMO,QAAQjC,MAAMoC,OAAO,CAAC;QAC1B,IAAIV,SAAS,aAAaC,eAAe,YAAY,CAACE,OAAO;YAC3D,OAAOK;QACT;QACA,OAAQR;YACN,KAAK;gBACH,OAAO;oBACL,GAAGQ,SAAS;oBACZ,uCAAuCL;gBACzC;YACF,KAAK;YACL,KAAK;gBACH,OAAO;oBACL,GAAGK,SAAS;oBACZ,uCAAuCL;gBACzC;QACJ;QACA,OAAOK;IACT,GAAG;QAACP;QAAYE;QAAOH;QAAMQ;KAAU;IAEvC,IAAIlC,MAAMsC,QAAQ,CAACC,KAAK,CAACR,cAAc,GAAG;QACxC,OAAO;IACT;IAEA,MAAMS,oBAAoBV,SAAS,MAAM5B,UAAUC;IACnD,MAAMsC,eAAeX,SAAS,MAAM,MAAM;IAE1C,qBACE,KAACU;QACE,GAAGL,SAAS;QACbF,OAAOA;QACPS,WAAU;QACVV,WAAW/B,WACT,uBACAG,OAAOuC,IAAI,EACXtC,cAAc,CAACqB,KAAK,EACpB,CAAC,CAACC,cAAcb,oBAAoB,CAACa,WAAW,EAChDP,cAAc,CAACU,KAAK,EACpBE;QAEFY,OAAOH;kBAENV;;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/Counter/Counter.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { type CSSCustomProperties, type HTMLAttributesWithRootRef } from '../../types';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './Counter.module.css';\n\nconst modeClassNames = {\n  primary: styles.modePrimary,\n  contrast: styles.modeContrast,\n  tertiary: styles.modeTertiary,\n  inherit: styles.modeInherit,\n};\n\nconst appearanceClassNames: Record<string, string> = {\n  'custom': styles.appearanceCustom,\n  'accent': styles.appearanceAccent,\n  'neutral': styles.appearanceNeutral,\n  'accent-green': styles.appearanceAccentGreen,\n  'accent-red': styles.appearanceAccentRed,\n};\n\nconst sizeClassNames = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n};\n\nexport interface CounterProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {\n  /**\n   * Режим отображения счетчика\n   */\n  mode?: 'primary' | 'contrast' | 'tertiary' | 'inherit';\n\n  /**\n   * Внешний вид счетчика\n   */\n  appearance?: 'accent' | 'neutral' | 'accent-green' | 'accent-red' | 'custom';\n\n  /**\n   * Пользовательский цвет (работает только при appearance=\"custom\")\n   * - При mode=\"primary\" - изменяет фон\n   * - При mode=\"contrast\" - изменяет цвет текста\n   * - При mode=\"tertiary\" - изменяет цвет текста\n   * - При mode=\"inherit\" - не работает\n   */\n  color?: string;\n\n  size?: 's' | 'm';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Counter\n */\nexport const Counter = ({\n  mode = 'inherit',\n  appearance: appearanceProp,\n  color,\n  size = 'm',\n  children,\n  className,\n  style: styleProp,\n  ...restProps\n}: CounterProps): React.ReactNode => {\n  const appearance = React.useMemo<CounterProps['appearance']>(() => {\n    if (mode === 'inherit') {\n      return undefined;\n    }\n    if (appearanceProp) {\n      return appearanceProp;\n    }\n    return 'accent';\n  }, [appearanceProp, mode]);\n\n  const style: (React.CSSProperties & CSSCustomProperties<string | undefined>) | undefined =\n    React.useMemo(() => {\n      if (mode === 'inherit' || appearance !== 'custom' || !color) {\n        return undefined;\n      }\n      switch (mode) {\n        case 'primary':\n          return {\n            '--vkui_internal--counter_background': color,\n          };\n        case 'contrast':\n        case 'tertiary':\n          return {\n            '--vkui_internal--counter_foreground': color,\n          };\n      }\n    }, [appearance, color, mode]);\n\n  if (React.Children.count(children) === 0) {\n    return null;\n  }\n\n  const CounterTypography = size === 's' ? Caption : Headline;\n  const counterLevel = size === 's' ? '1' : '2';\n\n  return (\n    <CounterTypography\n      {...restProps}\n      style={mergeStyle(style, styleProp)}\n      Component=\"span\"\n      className={classNames(\n        'vkuiInternalCounter',\n        styles.host,\n        modeClassNames[mode],\n        !!appearance && appearanceClassNames[appearance],\n        sizeClassNames[size],\n        className,\n      )}\n      level={counterLevel}\n    >\n      {children}\n    </CounterTypography>\n  );\n};\n"],"names":["React","classNames","mergeStyle","Caption","Headline","styles","modeClassNames","primary","modePrimary","contrast","modeContrast","tertiary","modeTertiary","inherit","modeInherit","appearanceClassNames","appearanceCustom","appearanceAccent","appearanceNeutral","appearanceAccentGreen","appearanceAccentRed","sizeClassNames","s","sizeS","m","sizeM","Counter","mode","appearance","appearanceProp","color","size","children","className","style","styleProp","restProps","useMemo","undefined","Children","count","CounterTypography","counterLevel","Component","host","level"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,8BAA2B;AAEtD,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,OAAOC,YAAY,uBAAuB;AAE1C,MAAMC,iBAAiB;IACrBC,SAASF,OAAOG,WAAW;IAC3BC,UAAUJ,OAAOK,YAAY;IAC7BC,UAAUN,OAAOO,YAAY;IAC7BC,SAASR,OAAOS,WAAW;AAC7B;AAEA,MAAMC,uBAA+C;IACnD,UAAUV,OAAOW,gBAAgB;IACjC,UAAUX,OAAOY,gBAAgB;IACjC,WAAWZ,OAAOa,iBAAiB;IACnC,gBAAgBb,OAAOc,qBAAqB;IAC5C,cAAcd,OAAOe,mBAAmB;AAC1C;AAEA,MAAMC,iBAAiB;IACrBC,GAAGjB,OAAOkB,KAAK;IACfC,GAAGnB,OAAOoB,KAAK;AACjB;AAyBA;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EACtBC,OAAO,SAAS,EAChBC,YAAYC,cAAc,EAC1BC,KAAK,EACLC,OAAO,GAAG,EACVC,QAAQ,EACRC,SAAS,EACTC,OAAOC,SAAS,EAChB,GAAGC,WACU;IACb,MAAMR,aAAa5B,MAAMqC,OAAO,CAA6B;QAC3D,IAAIV,SAAS,WAAW;YACtB,OAAOW;QACT;QACA,IAAIT,gBAAgB;YAClB,OAAOA;QACT;QACA,OAAO;IACT,GAAG;QAACA;QAAgBF;KAAK;IAEzB,MAAMO,QACJlC,MAAMqC,OAAO,CAAC;QACZ,IAAIV,SAAS,aAAaC,eAAe,YAAY,CAACE,OAAO;YAC3D,OAAOQ;QACT;QACA,OAAQX;YACN,KAAK;gBACH,OAAO;oBACL,uCAAuCG;gBACzC;YACF,KAAK;YACL,KAAK;gBACH,OAAO;oBACL,uCAAuCA;gBACzC;QACJ;IACF,GAAG;QAACF;QAAYE;QAAOH;KAAK;IAE9B,IAAI3B,MAAMuC,QAAQ,CAACC,KAAK,CAACR,cAAc,GAAG;QACxC,OAAO;IACT;IAEA,MAAMS,oBAAoBV,SAAS,MAAM5B,UAAUC;IACnD,MAAMsC,eAAeX,SAAS,MAAM,MAAM;IAE1C,qBACE,KAACU;QACE,GAAGL,SAAS;QACbF,OAAOhC,WAAWgC,OAAOC;QACzBQ,WAAU;QACVV,WAAWhC,WACT,uBACAI,OAAOuC,IAAI,EACXtC,cAAc,CAACqB,KAAK,EACpB,CAAC,CAACC,cAAcb,oBAAoB,CAACa,WAAW,EAChDP,cAAc,CAACU,KAAK,EACpBE;QAEFY,OAAOH;kBAENV;;AAGP,EAAE"}

package/dist/cssm/components/CustomSelectOption/CustomSelectOption.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Icon16Done } from "@vkontakte/icons";
 import { classNames, hasReactNode } from "@vkontakte/vkjs";
+import { mergeStyle } from "../../helpers/mergeStyle.js";
 import { useAdaptivity } from "../../hooks/useAdaptivity.js";
 import { Footnote } from "../Typography/Footnote/Footnote.js";
 import { Paragraph } from "../Typography/Paragraph/Paragraph.js";
@@ -17,11 +18,9 @@ const sizeYClassNames = {
  */ export const CustomSelectOption = ({ children, hierarchy = 0, hovered: hoveredProp, selected, before, after, description, disabled, style: styleProp, className, onClick, ...restProps })=>{
     const { sizeY = 'none' } = useAdaptivity();
     const style = React.useMemo(()=>hierarchy > 0 ? {
-            '--vkui_internal--custom_select_option_hierarchy_level': hierarchy,
-            ...styleProp
-        } : styleProp, [
-        hierarchy,
-        styleProp
+            '--vkui_internal--custom_select_option_hierarchy_level': hierarchy
+        } : undefined, [
+        hierarchy
     ]);
     const hovered = hoveredProp && !disabled ? true : false;
     return /*#__PURE__*/ _jsxs(Paragraph, {
@@ -33,7 +32,7 @@ const sizeYClassNames = {
         "aria-selected": selected,
         "data-hovered": hovered,
         className: classNames(styles.host, sizeY !== 'compact' && sizeYClassNames[sizeY], hovered && styles.hover, disabled && styles.disabled, hierarchy > 0 && styles.hierarchy, className),
-        style: style,
+        style: mergeStyle(style, styleProp),
         children: [
             hasReactNode(before) && /*#__PURE__*/ _jsx("div", {
                 className: styles.before,