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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CustomSelectOption/CustomSelectOption.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Done } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './CustomSelectOption.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  regular: styles.sizeYRegular,\n};\n\nexport interface CustomSelectOptionProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Добавляет описание под основным блоком.\n   */\n  description?: React.ReactNode;\n  /**\n   * Вставляет элемент в начало блока перед основным контентом.\n   * Например, можно передать компонент `Avatar`, `Icon<Name>` или другие изображения.\n   */\n  before?: React.ReactNode;\n  /**\n   * Вставляет элемент в конец блока после основного контента.\n   * Например, можно передать компонент `Avatar`, `Icon<Name>` или другие изображения.\n   */\n  after?: React.ReactNode;\n  /**\n   * Позволяет создавать вложенность.\n   */\n  hierarchy?: number;\n  /**\n   * Включает состояние выбранного элемента списка.\n   */\n  selected?: boolean;\n  /**\n   * Включает состояние наведения.\n   */\n  hovered?: boolean;\n  /**\n   * Включает состояние фокуса.\n   */\n  focused?: boolean;\n  /**\n   * Блокирует весь блок.\n   *\n   * > ⚠️  Важно: если CustomSelectOption используется внутри [Select](https://vkcom.github.io/VKUI/#/Select), [CustomSelect](https://vkcom.github.io/VKUI/#/CustomSelect) или [ChipsSelect](https://vkcom.github.io/VKUI/#/ChipsSelect), то свойство явно должно выставляться только через структуру `options`.\n   * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе [CustomSelect](https://vkcom.github.io/VKUI/#/CustomSelect) и [ChipsSelect](https://vkcom.github.io/VKUI/#/ChipsSelect) не будут знать об актуальном состоянии\n   * опции.\n   */\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CustomSelectOption\n */\nexport const CustomSelectOption = ({\n  children,\n  hierarchy = 0,\n  hovered: hoveredProp,\n  selected,\n  before,\n  after,\n  description,\n  disabled,\n  style: styleProp,\n  className,\n  onClick,\n  ...restProps\n}: CustomSelectOptionProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const style = React.useMemo(\n    () =>\n      hierarchy > 0\n        ? {\n            '--vkui_internal--custom_select_option_hierarchy_level': hierarchy,\n            ...styleProp,\n          }\n        : styleProp,\n    [hierarchy, styleProp],\n  );\n  const hovered = hoveredProp && !disabled ? true : false;\n\n  return (\n    <Paragraph\n      {...restProps}\n      onClick={disabled ? undefined : onClick}\n      Component=\"div\"\n      role=\"option\"\n      aria-disabled={disabled}\n      aria-selected={selected}\n      data-hovered={hovered}\n      className={classNames(\n        styles.host,\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n        hovered && styles.hover,\n        disabled && styles.disabled,\n        hierarchy > 0 && styles.hierarchy,\n        className,\n      )}\n      style={style}\n    >\n      {hasReactNode(before) && <div className={styles.before}>{before}</div>}\n      <div className={styles.main}>\n        <div className={styles.children}>{children}</div>\n        {hasReactNode(description) && (\n          <Footnote className={styles.description}>\n            <VisuallyHidden>&nbsp;</VisuallyHidden>\n            {description}\n          </Footnote>\n        )}\n      </div>\n      <div className={styles.after}>\n        {hasReactNode(after) && <div>{after}</div>}\n        {selected && <Icon16Done className={styles.selectedIcon} />}\n      </div>\n    </Paragraph>\n  );\n};\n"],"names":["React","Icon16Done","classNames","hasReactNode","useAdaptivity","Footnote","Paragraph","VisuallyHidden","styles","sizeYClassNames","none","sizeYNone","regular","sizeYRegular","CustomSelectOption","children","hierarchy","hovered","hoveredProp","selected","before","after","description","disabled","style","styleProp","className","onClick","restProps","sizeY","useMemo","undefined","Component","role","aria-disabled","aria-selected","data-hovered","host","hover","div","main","selectedIcon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,+BAA4B;AAE1D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,SAAS,QAAQ,uCAAoC;AAC9D,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,kCAAkC;AAErD,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AA2CA;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAAC,EACjCC,QAAQ,EACRC,YAAY,CAAC,EACbC,SAASC,WAAW,EACpBC,QAAQ,EACRC,MAAM,EACNC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,OAAOC,SAAS,EAChBC,SAAS,EACTC,OAAO,EACP,GAAGC,WACqB;IACxB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGzB;IAC3B,MAAMoB,QAAQxB,MAAM8B,OAAO,CACzB,IACEd,YAAY,IACR;YACE,yDAAyDA;YACzD,GAAGS,SAAS;QACd,IACAA,WACN;QAACT;QAAWS;KAAU;IAExB,MAAMR,UAAUC,eAAe,CAACK,WAAW,OAAO;IAElD,qBACE,MAACjB;QACE,GAAGsB,SAAS;QACbD,SAASJ,WAAWQ,YAAYJ;QAChCK,WAAU;QACVC,MAAK;QACLC,iBAAeX;QACfY,iBAAehB;QACfiB,gBAAcnB;QACdS,WAAWxB,WACTM,OAAO6B,IAAI,EACXR,UAAU,aAAapB,eAAe,CAACoB,MAAM,EAC7CZ,WAAWT,OAAO8B,KAAK,EACvBf,YAAYf,OAAOe,QAAQ,EAC3BP,YAAY,KAAKR,OAAOQ,SAAS,EACjCU;QAEFF,OAAOA;;YAENrB,aAAaiB,yBAAW,KAACmB;gBAAIb,WAAWlB,OAAOY,MAAM;0BAAGA;;0BACzD,MAACmB;gBAAIb,WAAWlB,OAAOgC,IAAI;;kCACzB,KAACD;wBAAIb,WAAWlB,OAAOO,QAAQ;kCAAGA;;oBACjCZ,aAAamB,8BACZ,MAACjB;wBAASqB,WAAWlB,OAAOc,WAAW;;0CACrC,KAACf;0CAAe;;4BACfe;;;;;0BAIP,MAACiB;gBAAIb,WAAWlB,OAAOa,KAAK;;oBACzBlB,aAAakB,wBAAU,KAACkB;kCAAKlB;;oBAC7BF,0BAAY,KAAClB;wBAAWyB,WAAWlB,OAAOiC,YAAY;;;;;;AAI/D,EAAE"}
+{"version":3,"sources":["../../../../src/components/CustomSelectOption/CustomSelectOption.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Done } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './CustomSelectOption.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  regular: styles.sizeYRegular,\n};\n\nexport interface CustomSelectOptionProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Добавляет описание под основным блоком.\n   */\n  description?: React.ReactNode;\n  /**\n   * Вставляет элемент в начало блока перед основным контентом.\n   * Например, можно передать компонент `Avatar`, `Icon<Name>` или другие изображения.\n   */\n  before?: React.ReactNode;\n  /**\n   * Вставляет элемент в конец блока после основного контента.\n   * Например, можно передать компонент `Avatar`, `Icon<Name>` или другие изображения.\n   */\n  after?: React.ReactNode;\n  /**\n   * Позволяет создавать вложенность.\n   */\n  hierarchy?: number;\n  /**\n   * Включает состояние выбранного элемента списка.\n   */\n  selected?: boolean;\n  /**\n   * Включает состояние наведения.\n   */\n  hovered?: boolean;\n  /**\n   * Включает состояние фокуса.\n   */\n  focused?: boolean;\n  /**\n   * Блокирует весь блок.\n   *\n   * > ⚠️  Важно: если CustomSelectOption используется внутри [Select](https://vkcom.github.io/VKUI/#/Select), [CustomSelect](https://vkcom.github.io/VKUI/#/CustomSelect) или [ChipsSelect](https://vkcom.github.io/VKUI/#/ChipsSelect), то свойство явно должно выставляться только через структуру `options`.\n   * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе [CustomSelect](https://vkcom.github.io/VKUI/#/CustomSelect) и [ChipsSelect](https://vkcom.github.io/VKUI/#/ChipsSelect) не будут знать об актуальном состоянии\n   * опции.\n   */\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CustomSelectOption\n */\nexport const CustomSelectOption = ({\n  children,\n  hierarchy = 0,\n  hovered: hoveredProp,\n  selected,\n  before,\n  after,\n  description,\n  disabled,\n  style: styleProp,\n  className,\n  onClick,\n  ...restProps\n}: CustomSelectOptionProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const style: (React.CSSProperties & CSSCustomProperties<number>) | undefined = React.useMemo(\n    () =>\n      hierarchy > 0\n        ? {\n            '--vkui_internal--custom_select_option_hierarchy_level': hierarchy,\n          }\n        : undefined,\n    [hierarchy],\n  );\n  const hovered = hoveredProp && !disabled ? true : false;\n\n  return (\n    <Paragraph\n      {...restProps}\n      onClick={disabled ? undefined : onClick}\n      Component=\"div\"\n      role=\"option\"\n      aria-disabled={disabled}\n      aria-selected={selected}\n      data-hovered={hovered}\n      className={classNames(\n        styles.host,\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n        hovered && styles.hover,\n        disabled && styles.disabled,\n        hierarchy > 0 && styles.hierarchy,\n        className,\n      )}\n      style={mergeStyle(style, styleProp)}\n    >\n      {hasReactNode(before) && <div className={styles.before}>{before}</div>}\n      <div className={styles.main}>\n        <div className={styles.children}>{children}</div>\n        {hasReactNode(description) && (\n          <Footnote className={styles.description}>\n            <VisuallyHidden>&nbsp;</VisuallyHidden>\n            {description}\n          </Footnote>\n        )}\n      </div>\n      <div className={styles.after}>\n        {hasReactNode(after) && <div>{after}</div>}\n        {selected && <Icon16Done className={styles.selectedIcon} />}\n      </div>\n    </Paragraph>\n  );\n};\n"],"names":["React","Icon16Done","classNames","hasReactNode","mergeStyle","useAdaptivity","Footnote","Paragraph","VisuallyHidden","styles","sizeYClassNames","none","sizeYNone","regular","sizeYRegular","CustomSelectOption","children","hierarchy","hovered","hoveredProp","selected","before","after","description","disabled","style","styleProp","className","onClick","restProps","sizeY","useMemo","undefined","Component","role","aria-disabled","aria-selected","data-hovered","host","hover","div","main","selectedIcon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,UAAU,QAAQ,8BAA2B;AACtD,SAASC,aAAa,QAAQ,+BAA4B;AAE1D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,SAAS,QAAQ,uCAAoC;AAC9D,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,kCAAkC;AAErD,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AA2CA;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAAC,EACjCC,QAAQ,EACRC,YAAY,CAAC,EACbC,SAASC,WAAW,EACpBC,QAAQ,EACRC,MAAM,EACNC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,OAAOC,SAAS,EAChBC,SAAS,EACTC,OAAO,EACP,GAAGC,WACqB;IACxB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGzB;IAC3B,MAAMoB,QAAyEzB,MAAM+B,OAAO,CAC1F,IACEd,YAAY,IACR;YACE,yDAAyDA;QAC3D,IACAe,WACN;QAACf;KAAU;IAEb,MAAMC,UAAUC,eAAe,CAACK,WAAW,OAAO;IAElD,qBACE,MAACjB;QACE,GAAGsB,SAAS;QACbD,SAASJ,WAAWQ,YAAYJ;QAChCK,WAAU;QACVC,MAAK;QACLC,iBAAeX;QACfY,iBAAehB;QACfiB,gBAAcnB;QACdS,WAAWzB,WACTO,OAAO6B,IAAI,EACXR,UAAU,aAAapB,eAAe,CAACoB,MAAM,EAC7CZ,WAAWT,OAAO8B,KAAK,EACvBf,YAAYf,OAAOe,QAAQ,EAC3BP,YAAY,KAAKR,OAAOQ,SAAS,EACjCU;QAEFF,OAAOrB,WAAWqB,OAAOC;;YAExBvB,aAAakB,yBAAW,KAACmB;gBAAIb,WAAWlB,OAAOY,MAAM;0BAAGA;;0BACzD,MAACmB;gBAAIb,WAAWlB,OAAOgC,IAAI;;kCACzB,KAACD;wBAAIb,WAAWlB,OAAOO,QAAQ;kCAAGA;;oBACjCb,aAAaoB,8BACZ,MAACjB;wBAASqB,WAAWlB,OAAOc,WAAW;;0CACrC,KAACf;0CAAe;;4BACfe;;;;;0BAIP,MAACiB;gBAAIb,WAAWlB,OAAOa,KAAK;;oBACzBnB,aAAamB,wBAAU,KAACkB;kCAAKlB;;oBAC7BF,0BAAY,KAACnB;wBAAW0B,WAAWlB,OAAOiC,YAAY;;;;;;AAI/D,EAAE"}

package/dist/cssm/components/Flex/Flex.js

@@ -20,16 +20,13 @@ const alignClassNames = {
     stretch: styles.alignStretch,
     baseline: styles.alignBaseline
 };
-export const Flex = ({ gap, align, justify, margin = 'none', noWrap = false, direction = 'row', style: styleProp, reverse = false, children, ...props })=>{
+export const Flex = ({ gap, align, justify, margin = 'none', noWrap = false, direction = 'row', reverse = false, children, ...props })=>{
     const withGaps = Children.count(children) > 1 && gap;
     const [rowGap, columnGap] = calculateGap(withGaps ? gap : undefined);
     return /*#__PURE__*/ _jsx(RootComponent, {
         ...props,
         baseClassName: classNames(styles.host, !noWrap && styles.wrap, reverse && styles.reverse, direction !== 'row' && styles.directionColumn, margin !== 'none' && styles.marginAuto, align && alignClassNames[align], justify && justifyClassNames[justify], withGaps && styles.withGaps, withGaps && getGapsPresets(rowGap, columnGap)),
-        style: withGaps ? {
-            ...getGapsByUser(rowGap, columnGap),
-            ...styleProp
-        } : styleProp,
+        baseStyle: getGapsByUser(rowGap, columnGap),
         children: children
     });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import { Children } from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  calculateGap,\n  columnGapClassNames,\n  type GapProp,\n  type GapsProp,\n  rowGapClassNames,\n} from '../../lib/layouts';\nimport type { CSSCustomProperties } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport type { RootComponentProps } from '../RootComponent/RootComponent';\nimport { FlexItem, type FlexItemProps } from './FlexItem/FlexItem';\nimport styles from './Flex.module.css';\n\nexport type { FlexItemProps };\n\nconst justifyClassNames = {\n  'start': styles.justifyStart,\n  'end': styles.justifyEnd,\n  'center': styles.justifyCenter,\n  'space-around': styles.justifySpaceAround,\n  'space-between': styles.justifySpaceBetween,\n  'space-evenly': styles.justifySpaceEvenly,\n};\n\nconst alignClassNames = {\n  start: styles.alignStart,\n  end: styles.alignEnd,\n  center: styles.alignCenter,\n  stretch: styles.alignStretch,\n  baseline: styles.alignBaseline,\n};\n\ntype FlexContentProps =\n  | 'start'\n  | 'end'\n  | 'center'\n  | 'space-around'\n  | 'space-between'\n  | 'space-evenly';\n\nexport interface FlexProps extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'> {\n  /**\n   * Направление осей, эквивалентно `flex-direction`.\n   */\n  direction?: 'row' | 'column';\n  /**\n   * Отступы между элементами.\n   * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.\n   * Через массив можно задать отступ между столбцами и строками [row, column], если они отличаются.\n   */\n  gap?: GapsProp;\n  /**\n   * Отключает перенос контента, эквивалентно `flex-wrap=nowrap`.\n   */\n  noWrap?: boolean;\n  /**\n   * Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`.\n   */\n  align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';\n  /**\n   * Выравнивание элементов по главной оси, эквивалентно `justify-content`.\n   */\n  justify?: FlexContentProps;\n  /**\n   * Значение `auto` позволяет задать платформенные отступы вокруг контейнера.\n   */\n  margin?: 'none' | 'auto';\n  /**\n   * Для инвертирования направления, эквивалентно `row-reverse` `column-reverse`.\n   */\n  reverse?: boolean;\n}\n\nexport const Flex: React.FC<FlexProps> & {\n  Item: typeof FlexItem;\n} = ({\n  gap,\n  align,\n  justify,\n  margin = 'none',\n  noWrap = false,\n  direction = 'row',\n  style: styleProp,\n  reverse = false,\n  children,\n  ...props\n}: FlexProps) => {\n  const withGaps = Children.count(children) > 1 && gap;\n  const [rowGap, columnGap] = calculateGap(withGaps ? gap : undefined);\n\n  return (\n    <RootComponent\n      {...props}\n      baseClassName={classNames(\n        styles.host,\n        !noWrap && styles.wrap,\n        reverse && styles.reverse,\n        direction !== 'row' && styles.directionColumn,\n        margin !== 'none' && styles.marginAuto,\n        align && alignClassNames[align],\n        justify && justifyClassNames[justify],\n        withGaps && styles.withGaps,\n        withGaps && getGapsPresets(rowGap, columnGap),\n      )}\n      style={withGaps ? { ...getGapsByUser(rowGap, columnGap), ...styleProp } : styleProp}\n    >\n      {children}\n    </RootComponent>\n  );\n};\n\nfunction getGapsPresets(rowGap?: GapProp, columnGap?: GapProp) {\n  return classNames(\n    typeof rowGap === 'string' && rowGapClassNames[rowGap],\n    typeof columnGap === 'string' && columnGapClassNames[columnGap],\n  );\n}\n\nfunction getGapsByUser(rowGap?: GapProp, columnGap?: GapProp) {\n  const style: CSSCustomProperties = {};\n\n  if (typeof rowGap === 'number') {\n    style['--vkui_internal--row_gap'] = `${rowGap}px`;\n  }\n  if (typeof columnGap === 'number') {\n    style['--vkui_internal--column_gap'] = `${columnGap}px`;\n  }\n\n  return style;\n}\n\nFlex.Item = FlexItem;\n"],"names":["Children","classNames","calculateGap","columnGapClassNames","rowGapClassNames","RootComponent","FlexItem","styles","justifyClassNames","justifyStart","justifyEnd","justifyCenter","justifySpaceAround","justifySpaceBetween","justifySpaceEvenly","alignClassNames","start","alignStart","end","alignEnd","center","alignCenter","stretch","alignStretch","baseline","alignBaseline","Flex","gap","align","justify","margin","noWrap","direction","style","styleProp","reverse","children","props","withGaps","count","rowGap","columnGap","undefined","baseClassName","host","wrap","directionColumn","marginAuto","getGapsPresets","getGapsByUser","Item"],"mappings":";AAAA,SAASA,QAAQ,QAAQ,QAAQ;AACjC,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,YAAY,EACZC,mBAAmB,EAGnBC,gBAAgB,QACX,6BAAoB;AAE3B,SAASC,aAAa,QAAQ,oCAAiC;AAE/D,SAASC,QAAQ,QAA4B,yBAAsB;AACnE,OAAOC,YAAY,oBAAoB;AAIvC,MAAMC,oBAAoB;IACxB,SAASD,OAAOE,YAAY;IAC5B,OAAOF,OAAOG,UAAU;IACxB,UAAUH,OAAOI,aAAa;IAC9B,gBAAgBJ,OAAOK,kBAAkB;IACzC,iBAAiBL,OAAOM,mBAAmB;IAC3C,gBAAgBN,OAAOO,kBAAkB;AAC3C;AAEA,MAAMC,kBAAkB;IACtBC,OAAOT,OAAOU,UAAU;IACxBC,KAAKX,OAAOY,QAAQ;IACpBC,QAAQb,OAAOc,WAAW;IAC1BC,SAASf,OAAOgB,YAAY;IAC5BC,UAAUjB,OAAOkB,aAAa;AAChC;AA2CA,OAAO,MAAMC,OAET,CAAC,EACHC,GAAG,EACHC,KAAK,EACLC,OAAO,EACPC,SAAS,MAAM,EACfC,SAAS,KAAK,EACdC,YAAY,KAAK,EACjBC,OAAOC,SAAS,EAChBC,UAAU,KAAK,EACfC,QAAQ,EACR,GAAGC,OACO;IACV,MAAMC,WAAWtC,SAASuC,KAAK,CAACH,YAAY,KAAKT;IACjD,MAAM,CAACa,QAAQC,UAAU,GAAGvC,aAAaoC,WAAWX,MAAMe;IAE1D,qBACE,KAACrC;QACE,GAAGgC,KAAK;QACTM,eAAe1C,WACbM,OAAOqC,IAAI,EACX,CAACb,UAAUxB,OAAOsC,IAAI,EACtBV,WAAW5B,OAAO4B,OAAO,EACzBH,cAAc,SAASzB,OAAOuC,eAAe,EAC7ChB,WAAW,UAAUvB,OAAOwC,UAAU,EACtCnB,SAASb,eAAe,CAACa,MAAM,EAC/BC,WAAWrB,iBAAiB,CAACqB,QAAQ,EACrCS,YAAY/B,OAAO+B,QAAQ,EAC3BA,YAAYU,eAAeR,QAAQC;QAErCR,OAAOK,WAAW;YAAE,GAAGW,cAAcT,QAAQC,UAAU;YAAE,GAAGP,SAAS;QAAC,IAAIA;kBAEzEE;;AAGP,EAAE;AAEF,SAASY,eAAeR,MAAgB,EAAEC,SAAmB;IAC3D,OAAOxC,WACL,OAAOuC,WAAW,YAAYpC,gBAAgB,CAACoC,OAAO,EACtD,OAAOC,cAAc,YAAYtC,mBAAmB,CAACsC,UAAU;AAEnE;AAEA,SAASQ,cAAcT,MAAgB,EAAEC,SAAmB;IAC1D,MAAMR,QAA6B,CAAC;IAEpC,IAAI,OAAOO,WAAW,UAAU;QAC9BP,KAAK,CAAC,2BAA2B,GAAG,GAAGO,OAAO,EAAE,CAAC;IACnD;IACA,IAAI,OAAOC,cAAc,UAAU;QACjCR,KAAK,CAAC,8BAA8B,GAAG,GAAGQ,UAAU,EAAE,CAAC;IACzD;IAEA,OAAOR;AACT;AAEAP,KAAKwB,IAAI,GAAG5C"}
+{"version":3,"sources":["../../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import { Children } from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  calculateGap,\n  columnGapClassNames,\n  type GapProp,\n  type GapsProp,\n  rowGapClassNames,\n} from '../../lib/layouts';\nimport type { CSSCustomProperties } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport type { RootComponentProps } from '../RootComponent/RootComponent';\nimport { FlexItem, type FlexItemProps } from './FlexItem/FlexItem';\nimport styles from './Flex.module.css';\n\nexport type { FlexItemProps };\n\nconst justifyClassNames = {\n  'start': styles.justifyStart,\n  'end': styles.justifyEnd,\n  'center': styles.justifyCenter,\n  'space-around': styles.justifySpaceAround,\n  'space-between': styles.justifySpaceBetween,\n  'space-evenly': styles.justifySpaceEvenly,\n};\n\nconst alignClassNames = {\n  start: styles.alignStart,\n  end: styles.alignEnd,\n  center: styles.alignCenter,\n  stretch: styles.alignStretch,\n  baseline: styles.alignBaseline,\n};\n\ntype FlexContentProps =\n  | 'start'\n  | 'end'\n  | 'center'\n  | 'space-around'\n  | 'space-between'\n  | 'space-evenly';\n\nexport interface FlexProps extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'> {\n  /**\n   * Направление осей, эквивалентно `flex-direction`.\n   */\n  direction?: 'row' | 'column';\n  /**\n   * Отступы между элементами.\n   * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.\n   * Через массив можно задать отступ между столбцами и строками [row, column], если они отличаются.\n   */\n  gap?: GapsProp;\n  /**\n   * Отключает перенос контента, эквивалентно `flex-wrap=nowrap`.\n   */\n  noWrap?: boolean;\n  /**\n   * Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`.\n   */\n  align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';\n  /**\n   * Выравнивание элементов по главной оси, эквивалентно `justify-content`.\n   */\n  justify?: FlexContentProps;\n  /**\n   * Значение `auto` позволяет задать платформенные отступы вокруг контейнера.\n   */\n  margin?: 'none' | 'auto';\n  /**\n   * Для инвертирования направления, эквивалентно `row-reverse` `column-reverse`.\n   */\n  reverse?: boolean;\n}\n\nexport const Flex: React.FC<FlexProps> & {\n  Item: typeof FlexItem;\n} = ({\n  gap,\n  align,\n  justify,\n  margin = 'none',\n  noWrap = false,\n  direction = 'row',\n  reverse = false,\n  children,\n  ...props\n}: FlexProps) => {\n  const withGaps = Children.count(children) > 1 && gap;\n  const [rowGap, columnGap] = calculateGap(withGaps ? gap : undefined);\n\n  return (\n    <RootComponent\n      {...props}\n      baseClassName={classNames(\n        styles.host,\n        !noWrap && styles.wrap,\n        reverse && styles.reverse,\n        direction !== 'row' && styles.directionColumn,\n        margin !== 'none' && styles.marginAuto,\n        align && alignClassNames[align],\n        justify && justifyClassNames[justify],\n        withGaps && styles.withGaps,\n        withGaps && getGapsPresets(rowGap, columnGap),\n      )}\n      baseStyle={getGapsByUser(rowGap, columnGap)}\n    >\n      {children}\n    </RootComponent>\n  );\n};\n\nfunction getGapsPresets(rowGap?: GapProp, columnGap?: GapProp) {\n  return classNames(\n    typeof rowGap === 'string' && rowGapClassNames[rowGap],\n    typeof columnGap === 'string' && columnGapClassNames[columnGap],\n  );\n}\n\nfunction getGapsByUser(rowGap?: GapProp, columnGap?: GapProp) {\n  const style: CSSCustomProperties = {};\n\n  if (typeof rowGap === 'number') {\n    style['--vkui_internal--row_gap'] = `${rowGap}px`;\n  }\n  if (typeof columnGap === 'number') {\n    style['--vkui_internal--column_gap'] = `${columnGap}px`;\n  }\n\n  return style;\n}\n\nFlex.Item = FlexItem;\n"],"names":["Children","classNames","calculateGap","columnGapClassNames","rowGapClassNames","RootComponent","FlexItem","styles","justifyClassNames","justifyStart","justifyEnd","justifyCenter","justifySpaceAround","justifySpaceBetween","justifySpaceEvenly","alignClassNames","start","alignStart","end","alignEnd","center","alignCenter","stretch","alignStretch","baseline","alignBaseline","Flex","gap","align","justify","margin","noWrap","direction","reverse","children","props","withGaps","count","rowGap","columnGap","undefined","baseClassName","host","wrap","directionColumn","marginAuto","getGapsPresets","baseStyle","getGapsByUser","style","Item"],"mappings":";AAAA,SAASA,QAAQ,QAAQ,QAAQ;AACjC,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,YAAY,EACZC,mBAAmB,EAGnBC,gBAAgB,QACX,6BAAoB;AAE3B,SAASC,aAAa,QAAQ,oCAAiC;AAE/D,SAASC,QAAQ,QAA4B,yBAAsB;AACnE,OAAOC,YAAY,oBAAoB;AAIvC,MAAMC,oBAAoB;IACxB,SAASD,OAAOE,YAAY;IAC5B,OAAOF,OAAOG,UAAU;IACxB,UAAUH,OAAOI,aAAa;IAC9B,gBAAgBJ,OAAOK,kBAAkB;IACzC,iBAAiBL,OAAOM,mBAAmB;IAC3C,gBAAgBN,OAAOO,kBAAkB;AAC3C;AAEA,MAAMC,kBAAkB;IACtBC,OAAOT,OAAOU,UAAU;IACxBC,KAAKX,OAAOY,QAAQ;IACpBC,QAAQb,OAAOc,WAAW;IAC1BC,SAASf,OAAOgB,YAAY;IAC5BC,UAAUjB,OAAOkB,aAAa;AAChC;AA2CA,OAAO,MAAMC,OAET,CAAC,EACHC,GAAG,EACHC,KAAK,EACLC,OAAO,EACPC,SAAS,MAAM,EACfC,SAAS,KAAK,EACdC,YAAY,KAAK,EACjBC,UAAU,KAAK,EACfC,QAAQ,EACR,GAAGC,OACO;IACV,MAAMC,WAAWpC,SAASqC,KAAK,CAACH,YAAY,KAAKP;IACjD,MAAM,CAACW,QAAQC,UAAU,GAAGrC,aAAakC,WAAWT,MAAMa;IAE1D,qBACE,KAACnC;QACE,GAAG8B,KAAK;QACTM,eAAexC,WACbM,OAAOmC,IAAI,EACX,CAACX,UAAUxB,OAAOoC,IAAI,EACtBV,WAAW1B,OAAO0B,OAAO,EACzBD,cAAc,SAASzB,OAAOqC,eAAe,EAC7Cd,WAAW,UAAUvB,OAAOsC,UAAU,EACtCjB,SAASb,eAAe,CAACa,MAAM,EAC/BC,WAAWrB,iBAAiB,CAACqB,QAAQ,EACrCO,YAAY7B,OAAO6B,QAAQ,EAC3BA,YAAYU,eAAeR,QAAQC;QAErCQ,WAAWC,cAAcV,QAAQC;kBAEhCL;;AAGP,EAAE;AAEF,SAASY,eAAeR,MAAgB,EAAEC,SAAmB;IAC3D,OAAOtC,WACL,OAAOqC,WAAW,YAAYlC,gBAAgB,CAACkC,OAAO,EACtD,OAAOC,cAAc,YAAYpC,mBAAmB,CAACoC,UAAU;AAEnE;AAEA,SAASS,cAAcV,MAAgB,EAAEC,SAAmB;IAC1D,MAAMU,QAA6B,CAAC;IAEpC,IAAI,OAAOX,WAAW,UAAU;QAC9BW,KAAK,CAAC,2BAA2B,GAAG,GAAGX,OAAO,EAAE,CAAC;IACnD;IACA,IAAI,OAAOC,cAAc,UAAU;QACjCU,KAAK,CAAC,8BAA8B,GAAG,GAAGV,UAAU,EAAE,CAAC;IACzD;IAEA,OAAOU;AACT;AAEAvB,KAAKwB,IAAI,GAAG5C"}

package/dist/cssm/components/Flex/FlexItem/FlexItem.js

@@ -15,12 +15,11 @@ const alignSelfClassNames = {
     baseline: styles.alignSelfBaseline,
     stretch: styles.alignSelfStretch
 };
-export const FlexItem = ({ children, alignSelf, flex, flexBasis, style, ...rest })=>{
+export const FlexItem = ({ children, alignSelf, flex, flexBasis, ...rest })=>{
     return /*#__PURE__*/ _jsx(RootComponent, {
         ...rest,
-        style: {
-            flexBasis,
-            ...style
+        baseStyle: {
+            flexBasis
         },
         baseClassName: classNames(alignSelf && alignSelfClassNames[alignSelf], flex && flexClassNames[flex]),
         children: children

package/dist/cssm/components/Flex/FlexItem/FlexItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Flex/FlexItem/FlexItem.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport type { HasChildren } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport type { RootComponentProps } from '../../RootComponent/RootComponent';\nimport styles from './FlexItem.module.css';\n\nconst flexClassNames = {\n  grow: styles.flexGrow,\n  shrink: styles.flexShrink,\n  content: styles.flexContent,\n  fixed: styles.flexFixed,\n};\n\nconst alignSelfClassNames = {\n  start: styles.alignSelfStart,\n  end: styles.alignSelfEnd,\n  center: styles.alignSelfCenter,\n  baseline: styles.alignSelfBaseline,\n  stretch: styles.alignSelfStretch,\n};\n\nexport interface FlexItemProps\n  extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'>,\n    HasChildren {\n  /**\n   * Для задания выравнивания, отлично от родительского, эквивалентно `align-self`\n   */\n  alignSelf?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';\n  /**\n   * Позволяет задать предопределенные значения свойства `flex`:\n   *\n   * - `grow` соответствует значению `1 0 auto`\n   * - `shrink` соответствует значению `0 1 auto`\n   * - `content` соответствует значению `1 1 auto`\n   * - `fixed` соответствует значению `0 0 auto`\n   */\n  flex?: 'grow' | 'shrink' | 'content' | 'fixed';\n  /**\n   * Изначальный размер элемента, эквивалентно `flex-basis`\n   */\n  flexBasis?: number | string;\n}\n\nexport const FlexItem = ({\n  children,\n  alignSelf,\n  flex,\n  flexBasis,\n  style,\n  ...rest\n}: FlexItemProps): React.ReactNode => {\n  return (\n    <RootComponent\n      {...rest}\n      style={{ flexBasis, ...style }}\n      baseClassName={classNames(\n        alignSelf && alignSelfClassNames[alignSelf],\n        flex && flexClassNames[flex],\n      )}\n    >\n      {children}\n    </RootComponent>\n  );\n};\n"],"names":["classNames","RootComponent","styles","flexClassNames","grow","flexGrow","shrink","flexShrink","content","flexContent","fixed","flexFixed","alignSelfClassNames","start","alignSelfStart","end","alignSelfEnd","center","alignSelfCenter","baseline","alignSelfBaseline","stretch","alignSelfStretch","FlexItem","children","alignSelf","flex","flexBasis","style","rest","baseClassName"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,uCAAoC;AAElE,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,iBAAiB;IACrBC,MAAMF,OAAOG,QAAQ;IACrBC,QAAQJ,OAAOK,UAAU;IACzBC,SAASN,OAAOO,WAAW;IAC3BC,OAAOR,OAAOS,SAAS;AACzB;AAEA,MAAMC,sBAAsB;IAC1BC,OAAOX,OAAOY,cAAc;IAC5BC,KAAKb,OAAOc,YAAY;IACxBC,QAAQf,OAAOgB,eAAe;IAC9BC,UAAUjB,OAAOkB,iBAAiB;IAClCC,SAASnB,OAAOoB,gBAAgB;AAClC;AAwBA,OAAO,MAAMC,WAAW,CAAC,EACvBC,QAAQ,EACRC,SAAS,EACTC,IAAI,EACJC,SAAS,EACTC,KAAK,EACL,GAAGC,MACW;IACd,qBACE,KAAC5B;QACE,GAAG4B,IAAI;QACRD,OAAO;YAAED;YAAW,GAAGC,KAAK;QAAC;QAC7BE,eAAe9B,WACbyB,aAAab,mBAAmB,CAACa,UAAU,EAC3CC,QAAQvB,cAAc,CAACuB,KAAK;kBAG7BF;;AAGP,EAAE"}
+{"version":3,"sources":["../../../../../src/components/Flex/FlexItem/FlexItem.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport type { HasChildren } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport type { RootComponentProps } from '../../RootComponent/RootComponent';\nimport styles from './FlexItem.module.css';\n\nconst flexClassNames = {\n  grow: styles.flexGrow,\n  shrink: styles.flexShrink,\n  content: styles.flexContent,\n  fixed: styles.flexFixed,\n};\n\nconst alignSelfClassNames = {\n  start: styles.alignSelfStart,\n  end: styles.alignSelfEnd,\n  center: styles.alignSelfCenter,\n  baseline: styles.alignSelfBaseline,\n  stretch: styles.alignSelfStretch,\n};\n\nexport interface FlexItemProps\n  extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'>,\n    HasChildren {\n  /**\n   * Для задания выравнивания, отлично от родительского, эквивалентно `align-self`\n   */\n  alignSelf?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';\n  /**\n   * Позволяет задать предопределенные значения свойства `flex`:\n   *\n   * - `grow` соответствует значению `1 0 auto`\n   * - `shrink` соответствует значению `0 1 auto`\n   * - `content` соответствует значению `1 1 auto`\n   * - `fixed` соответствует значению `0 0 auto`\n   */\n  flex?: 'grow' | 'shrink' | 'content' | 'fixed';\n  /**\n   * Изначальный размер элемента, эквивалентно `flex-basis`\n   */\n  flexBasis?: number | string;\n}\n\nexport const FlexItem = ({\n  children,\n  alignSelf,\n  flex,\n  flexBasis,\n  ...rest\n}: FlexItemProps): React.ReactNode => {\n  return (\n    <RootComponent\n      {...rest}\n      baseStyle={{ flexBasis }}\n      baseClassName={classNames(\n        alignSelf && alignSelfClassNames[alignSelf],\n        flex && flexClassNames[flex],\n      )}\n    >\n      {children}\n    </RootComponent>\n  );\n};\n"],"names":["classNames","RootComponent","styles","flexClassNames","grow","flexGrow","shrink","flexShrink","content","flexContent","fixed","flexFixed","alignSelfClassNames","start","alignSelfStart","end","alignSelfEnd","center","alignSelfCenter","baseline","alignSelfBaseline","stretch","alignSelfStretch","FlexItem","children","alignSelf","flex","flexBasis","rest","baseStyle","baseClassName"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,uCAAoC;AAElE,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,iBAAiB;IACrBC,MAAMF,OAAOG,QAAQ;IACrBC,QAAQJ,OAAOK,UAAU;IACzBC,SAASN,OAAOO,WAAW;IAC3BC,OAAOR,OAAOS,SAAS;AACzB;AAEA,MAAMC,sBAAsB;IAC1BC,OAAOX,OAAOY,cAAc;IAC5BC,KAAKb,OAAOc,YAAY;IACxBC,QAAQf,OAAOgB,eAAe;IAC9BC,UAAUjB,OAAOkB,iBAAiB;IAClCC,SAASnB,OAAOoB,gBAAgB;AAClC;AAwBA,OAAO,MAAMC,WAAW,CAAC,EACvBC,QAAQ,EACRC,SAAS,EACTC,IAAI,EACJC,SAAS,EACT,GAAGC,MACW;IACd,qBACE,KAAC3B;QACE,GAAG2B,IAAI;QACRC,WAAW;YAAEF;QAAU;QACvBG,eAAe9B,WACbyB,aAAab,mBAAmB,CAACa,UAAU,EAC3CC,QAAQvB,cAAc,CAACuB,KAAK;kBAG7BF;;AAGP,EAAE"}

package/dist/cssm/components/FloatingArrow/DefaultIcon.js

@@ -1,6 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
+export const DEFAULT_ARROW_WIDTH = 20;
+export const DEFAULT_ARROW_HEIGHT = 8;
+export const DEFAULT_ARROW_PADDING = 10;
+const PLATFORM_HEIGHT = 1;
+const ARROW_HEIGHT_WITH_WHITE_SPACE = DEFAULT_ARROW_HEIGHT + PLATFORM_HEIGHT;
 /**
+ * Стрелка для всплывающих окон.
+ *
  * Примечание 1.
  *
  * В компоненте, SVG элемент `<path />` представляет собой стрелку с платформой в виде прямоугольника в 1px. Платформа
@@ -12,12 +19,9 @@ import * as React from "react";
  * 2. Сместить положение SVG контейнера на высоту платформы – сделано в CSS через `translateY(1px)`.
  *
  * https://github.com/VKCOM/VKUI/issues/2123
- */ export const DEFAULT_ARROW_WIDTH = 20;
-export const DEFAULT_ARROW_HEIGHT = 8;
-export const DEFAULT_ARROW_PADDING = 10;
-const PLATFORM_HEIGHT = 1;
-const ARROW_HEIGHT_WITH_WHITE_SPACE = DEFAULT_ARROW_HEIGHT + PLATFORM_HEIGHT;
-export const DefaultIcon = (props)=>{
+ *
+ * @since 7.0.0
+ */ export const DefaultIcon = (props)=>{
     return /*#__PURE__*/ _jsx("svg", {
         width: DEFAULT_ARROW_WIDTH,
         height: ARROW_HEIGHT_WITH_WHITE_SPACE,

package/dist/cssm/components/FloatingArrow/DefaultIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FloatingArrow/DefaultIcon.tsx"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Примечание 1.\n *\n * В компоненте, SVG элемент `<path />` представляет собой стрелку с платформой в виде прямоугольника в 1px. Платформа\n * служит для исправления проблемы с белой полоской между контентом и стрелкой, которая зачастую проявляется при\n * изменении масштаба страницы.\n *\n * Чтобы исправление сработало нужно:\n * 1. Прибавить высоту платформы к `height` и `viewBox` SVG контейнера.\n * 2. Сместить положение SVG контейнера на высоту платформы – сделано в CSS через `translateY(1px)`.\n *\n * https://github.com/VKCOM/VKUI/issues/2123\n */\n\nexport const DEFAULT_ARROW_WIDTH = 20;\nexport const DEFAULT_ARROW_HEIGHT = 8;\nexport const DEFAULT_ARROW_PADDING = 10;\n\nconst PLATFORM_HEIGHT = 1;\nconst ARROW_HEIGHT_WITH_WHITE_SPACE = DEFAULT_ARROW_HEIGHT + PLATFORM_HEIGHT;\n\nexport const DefaultIcon = (props: React.SVGAttributes<SVGSVGElement>): React.ReactNode => {\n  return (\n    <svg\n      width={DEFAULT_ARROW_WIDTH}\n      height={ARROW_HEIGHT_WITH_WHITE_SPACE}\n      viewBox={`0 0 ${DEFAULT_ARROW_WIDTH} ${ARROW_HEIGHT_WITH_WHITE_SPACE}`}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path d=\"M10 0c3 0 6 8 10 8v1H0V8c3.975 0 7-8 10-8Z\" fill=\"currentColor\" />\n    </svg>\n  );\n};\n"],"names":["React","DEFAULT_ARROW_WIDTH","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","PLATFORM_HEIGHT","ARROW_HEIGHT_WITH_WHITE_SPACE","DefaultIcon","props","svg","width","height","viewBox","xmlns","path","d","fill"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAE/B;;;;;;;;;;;;CAYC,GAED,OAAO,MAAMC,sBAAsB,GAAG;AACtC,OAAO,MAAMC,uBAAuB,EAAE;AACtC,OAAO,MAAMC,wBAAwB,GAAG;AAExC,MAAMC,kBAAkB;AACxB,MAAMC,gCAAgCH,uBAAuBE;AAE7D,OAAO,MAAME,cAAc,CAACC;IAC1B,qBACE,KAACC;QACCC,OAAOR;QACPS,QAAQL;QACRM,SAAS,CAAC,IAAI,EAAEV,oBAAoB,CAAC,EAAEI,+BAA+B;QACtEO,OAAM;QACL,GAAGL,KAAK;kBAET,cAAA,KAACM;YAAKC,GAAE;YAA6CC,MAAK;;;AAGhE,EAAE"}
+{"version":3,"sources":["../../../../src/components/FloatingArrow/DefaultIcon.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport const DEFAULT_ARROW_WIDTH = 20;\nexport const DEFAULT_ARROW_HEIGHT = 8;\nexport const DEFAULT_ARROW_PADDING = 10;\n\nconst PLATFORM_HEIGHT = 1;\nconst ARROW_HEIGHT_WITH_WHITE_SPACE = DEFAULT_ARROW_HEIGHT + PLATFORM_HEIGHT;\n\n/**\n * Стрелка для всплывающих окон.\n *\n * Примечание 1.\n *\n * В компоненте, SVG элемент `<path />` представляет собой стрелку с платформой в виде прямоугольника в 1px. Платформа\n * служит для исправления проблемы с белой полоской между контентом и стрелкой, которая зачастую проявляется при\n * изменении масштаба страницы.\n *\n * Чтобы исправление сработало нужно:\n * 1. Прибавить высоту платформы к `height` и `viewBox` SVG контейнера.\n * 2. Сместить положение SVG контейнера на высоту платформы – сделано в CSS через `translateY(1px)`.\n *\n * https://github.com/VKCOM/VKUI/issues/2123\n *\n * @since 7.0.0\n */\nexport const DefaultIcon = (props: React.SVGAttributes<SVGSVGElement>): React.ReactNode => {\n  return (\n    <svg\n      width={DEFAULT_ARROW_WIDTH}\n      height={ARROW_HEIGHT_WITH_WHITE_SPACE}\n      viewBox={`0 0 ${DEFAULT_ARROW_WIDTH} ${ARROW_HEIGHT_WITH_WHITE_SPACE}`}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path d=\"M10 0c3 0 6 8 10 8v1H0V8c3.975 0 7-8 10-8Z\" fill=\"currentColor\" />\n    </svg>\n  );\n};\n"],"names":["React","DEFAULT_ARROW_WIDTH","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","PLATFORM_HEIGHT","ARROW_HEIGHT_WITH_WHITE_SPACE","DefaultIcon","props","svg","width","height","viewBox","xmlns","path","d","fill"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAE/B,OAAO,MAAMC,sBAAsB,GAAG;AACtC,OAAO,MAAMC,uBAAuB,EAAE;AACtC,OAAO,MAAMC,wBAAwB,GAAG;AAExC,MAAMC,kBAAkB;AACxB,MAAMC,gCAAgCH,uBAAuBE;AAE7D;;;;;;;;;;;;;;;;CAgBC,GACD,OAAO,MAAME,cAAc,CAACC;IAC1B,qBACE,KAACC;QACCC,OAAOR;QACPS,QAAQL;QACRM,SAAS,CAAC,IAAI,EAAEV,oBAAoB,CAAC,EAAEI,+BAA+B;QACtEO,OAAM;QACL,GAAGL,KAAK;kBAET,cAAA,KAACM;YAAKC,GAAE;YAA6CC,MAAK;;;AAGhE,EAAE"}

package/dist/cssm/components/FloatingArrow/FloatingArrow.js

@@ -1,21 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { RootComponent } from "../RootComponent/RootComponent.js";
 import { DefaultIcon } from "./DefaultIcon.js";
 import styles from "./FloatingArrow.module.css";
-const placementClassNames = {
+export const placementClassNames = {
     right: styles.placementRight,
     bottom: styles.placementBottom,
     left: styles.placementLeft
 };
 /**
- * @private
- */ export const FloatingArrow = ({ offset, isStaticOffset, coords, iconStyle, iconClassName, placement = 'bottom', getRootRef, Icon = DefaultIcon, ...restProps })=>{
+ * Иконка-стрелка для всплывающих окон.
+ *
+ * @since 7.0.0
+ */ export const FloatingArrow = ({ offset, isStaticOffset, coords, iconStyle, iconClassName, placement = 'bottom', Icon = DefaultIcon, ...restProps })=>{
     const [arrowPlacement, arrowStyles] = getArrowPositionData(placement, coords, offset, isStaticOffset);
-    return /*#__PURE__*/ _jsx("div", {
-        ref: getRootRef,
-        style: arrowStyles,
-        className: classNames(styles.host, arrowPlacement && placementClassNames[arrowPlacement]),
+    return /*#__PURE__*/ _jsx(RootComponent, {
+        baseStyle: arrowStyles,
+        baseClassName: classNames(styles.host, arrowPlacement && placementClassNames[arrowPlacement]),
         ...restProps,
         children: /*#__PURE__*/ _jsx(Icon, {
             className: classNames(styles.in, iconClassName),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FloatingArrow/FloatingArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { Placement } from '../../lib/floating';\nimport type { HasDataAttribute, HTMLAttributesWithRootRef } from '../../types';\nimport { DefaultIcon } from './DefaultIcon';\nimport styles from './FloatingArrow.module.css';\n\nexport type Coords = {\n  x?: number;\n  y?: number;\n};\n\nconst placementClassNames = {\n  right: styles.placementRight,\n  bottom: styles.placementBottom,\n  left: styles.placementLeft,\n};\n\nexport interface FloatingArrowProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasDataAttribute {\n  /**\n   * Сдвиг стрелки относительно текущих координат.\n   */\n  offset?: number;\n  /**\n   * Включает абсолютное смещение по `offset`.\n   */\n  isStaticOffset?: boolean;\n  coords?: Coords;\n  placement?: Placement;\n  iconStyle?: React.CSSProperties;\n  iconClassName?: string;\n  Icon?: React.ComponentType<React.SVGAttributes<SVGSVGElement>>;\n}\n\n/**\n * @private\n */\nexport const FloatingArrow = ({\n  offset,\n  isStaticOffset,\n  coords,\n  iconStyle,\n  iconClassName,\n  placement = 'bottom',\n  getRootRef,\n  Icon = DefaultIcon,\n  ...restProps\n}: FloatingArrowProps): React.ReactNode => {\n  const [arrowPlacement, arrowStyles] = getArrowPositionData(\n    placement,\n    coords,\n    offset,\n    isStaticOffset,\n  );\n\n  return (\n    <div\n      ref={getRootRef}\n      style={arrowStyles}\n      className={classNames(styles.host, arrowPlacement && placementClassNames[arrowPlacement])}\n      {...restProps}\n    >\n      <Icon className={classNames(styles.in, iconClassName)} style={iconStyle} />\n    </div>\n  );\n};\n\nfunction getArrowPositionData(\n  placement: Placement,\n  coords: Coords = { x: 0, y: 0 },\n  offset = 0,\n  isStaticOffset = false,\n): [undefined | 'right' | 'bottom' | 'left', React.CSSProperties] {\n  const withOffset = (isVerticalPlacement: boolean) => {\n    const parsedCoords = { x: coords.x || 0, y: coords.y || 0 };\n\n    if (isVerticalPlacement) {\n      return isStaticOffset ? offset : parsedCoords.y + offset;\n    } else {\n      return isStaticOffset ? offset : parsedCoords.x + offset;\n    }\n  };\n\n  if (placement.startsWith('top')) {\n    const xOffsetProp = getXOffsetProp(placement, isStaticOffset);\n    return [\n      'bottom',\n      {\n        top: '100%',\n        [xOffsetProp]: withOffset(false),\n      },\n    ];\n  } else if (placement.startsWith('right')) {\n    const yOffsetProp = getYOffsetProp(placement, isStaticOffset);\n    return [\n      'left',\n      {\n        [yOffsetProp]: withOffset(true),\n        left: 0,\n      },\n    ];\n  } else if (placement.startsWith('bottom')) {\n    const xOffsetProp = getXOffsetProp(placement, isStaticOffset);\n    return [\n      undefined,\n      {\n        bottom: '100%',\n        [xOffsetProp]: withOffset(false),\n      },\n    ];\n  } else {\n    const yOffsetProp = getYOffsetProp(placement, isStaticOffset);\n    return [\n      'right',\n      {\n        [yOffsetProp]: withOffset(true),\n        right: 0,\n      },\n    ];\n  }\n}\n\nfunction getXOffsetProp(placement: Placement, isStaticOffset: boolean) {\n  return placement.endsWith('end') && isStaticOffset ? 'right' : 'left';\n}\n\nfunction getYOffsetProp(placement: Placement, isStaticOffset: boolean) {\n  return placement.endsWith('end') && isStaticOffset ? 'bottom' : 'top';\n}\n"],"names":["React","classNames","DefaultIcon","styles","placementClassNames","right","placementRight","bottom","placementBottom","left","placementLeft","FloatingArrow","offset","isStaticOffset","coords","iconStyle","iconClassName","placement","getRootRef","Icon","restProps","arrowPlacement","arrowStyles","getArrowPositionData","div","ref","style","className","host","in","x","y","withOffset","isVerticalPlacement","parsedCoords","startsWith","xOffsetProp","getXOffsetProp","top","yOffsetProp","getYOffsetProp","undefined","endsWith"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,WAAW,QAAQ,mBAAgB;AAC5C,OAAOC,YAAY,6BAA6B;AAOhD,MAAMC,sBAAsB;IAC1BC,OAAOF,OAAOG,cAAc;IAC5BC,QAAQJ,OAAOK,eAAe;IAC9BC,MAAMN,OAAOO,aAAa;AAC5B;AAoBA;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,MAAM,EACNC,cAAc,EACdC,MAAM,EACNC,SAAS,EACTC,aAAa,EACbC,YAAY,QAAQ,EACpBC,UAAU,EACVC,OAAOjB,WAAW,EAClB,GAAGkB,WACgB;IACnB,MAAM,CAACC,gBAAgBC,YAAY,GAAGC,qBACpCN,WACAH,QACAF,QACAC;IAGF,qBACE,KAACW;QACCC,KAAKP;QACLQ,OAAOJ;QACPK,WAAW1B,WAAWE,OAAOyB,IAAI,EAAEP,kBAAkBjB,mBAAmB,CAACiB,eAAe;QACvF,GAAGD,SAAS;kBAEb,cAAA,KAACD;YAAKQ,WAAW1B,WAAWE,OAAO0B,EAAE,EAAEb;YAAgBU,OAAOX;;;AAGpE,EAAE;AAEF,SAASQ,qBACPN,SAAoB,EACpBH,SAAiB;IAAEgB,GAAG;IAAGC,GAAG;AAAE,CAAC,EAC/BnB,SAAS,CAAC,EACVC,iBAAiB,KAAK;IAEtB,MAAMmB,aAAa,CAACC;QAClB,MAAMC,eAAe;YAAEJ,GAAGhB,OAAOgB,CAAC,IAAI;YAAGC,GAAGjB,OAAOiB,CAAC,IAAI;QAAE;QAE1D,IAAIE,qBAAqB;YACvB,OAAOpB,iBAAiBD,SAASsB,aAAaH,CAAC,GAAGnB;QACpD,OAAO;YACL,OAAOC,iBAAiBD,SAASsB,aAAaJ,CAAC,GAAGlB;QACpD;IACF;IAEA,IAAIK,UAAUkB,UAAU,CAAC,QAAQ;QAC/B,MAAMC,cAAcC,eAAepB,WAAWJ;QAC9C,OAAO;YACL;YACA;gBACEyB,KAAK;gBACL,CAACF,YAAY,EAAEJ,WAAW;YAC5B;SACD;IACH,OAAO,IAAIf,UAAUkB,UAAU,CAAC,UAAU;QACxC,MAAMI,cAAcC,eAAevB,WAAWJ;QAC9C,OAAO;YACL;YACA;gBACE,CAAC0B,YAAY,EAAEP,WAAW;gBAC1BvB,MAAM;YACR;SACD;IACH,OAAO,IAAIQ,UAAUkB,UAAU,CAAC,WAAW;QACzC,MAAMC,cAAcC,eAAepB,WAAWJ;QAC9C,OAAO;YACL4B;YACA;gBACElC,QAAQ;gBACR,CAAC6B,YAAY,EAAEJ,WAAW;YAC5B;SACD;IACH,OAAO;QACL,MAAMO,cAAcC,eAAevB,WAAWJ;QAC9C,OAAO;YACL;YACA;gBACE,CAAC0B,YAAY,EAAEP,WAAW;gBAC1B3B,OAAO;YACT;SACD;IACH;AACF;AAEA,SAASgC,eAAepB,SAAoB,EAAEJ,cAAuB;IACnE,OAAOI,UAAUyB,QAAQ,CAAC,UAAU7B,iBAAiB,UAAU;AACjE;AAEA,SAAS2B,eAAevB,SAAoB,EAAEJ,cAAuB;IACnE,OAAOI,UAAUyB,QAAQ,CAAC,UAAU7B,iBAAiB,WAAW;AAClE"}
+{"version":3,"sources":["../../../../src/components/FloatingArrow/FloatingArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { Placement } from '../../lib/floating';\nimport type { HasDataAttribute, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { DefaultIcon } from './DefaultIcon';\nimport styles from './FloatingArrow.module.css';\n\nexport type Coords = {\n  x?: number;\n  y?: number;\n};\n\nexport const placementClassNames = {\n  right: styles.placementRight,\n  bottom: styles.placementBottom,\n  left: styles.placementLeft,\n};\n\nexport interface FloatingArrowProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasDataAttribute {\n  /**\n   * Сдвиг стрелки относительно текущих координат.\n   */\n  offset?: number;\n  /**\n   * Включает абсолютное смещение по `offset`.\n   */\n  isStaticOffset?: boolean;\n  coords?: Coords;\n  placement?: Placement;\n  iconStyle?: React.CSSProperties;\n  iconClassName?: string;\n  Icon?: React.ComponentType<React.SVGAttributes<SVGSVGElement>>;\n}\n\n/**\n * Иконка-стрелка для всплывающих окон.\n *\n * @since 7.0.0\n */\nexport const FloatingArrow = ({\n  offset,\n  isStaticOffset,\n  coords,\n  iconStyle,\n  iconClassName,\n  placement = 'bottom',\n  Icon = DefaultIcon,\n  ...restProps\n}: FloatingArrowProps): React.ReactNode => {\n  const [arrowPlacement, arrowStyles] = getArrowPositionData(\n    placement,\n    coords,\n    offset,\n    isStaticOffset,\n  );\n\n  return (\n    <RootComponent\n      baseStyle={arrowStyles}\n      baseClassName={classNames(styles.host, arrowPlacement && placementClassNames[arrowPlacement])}\n      {...restProps}\n    >\n      <Icon className={classNames(styles.in, iconClassName)} style={iconStyle} />\n    </RootComponent>\n  );\n};\n\nfunction getArrowPositionData(\n  placement: Placement,\n  coords: Coords = { x: 0, y: 0 },\n  offset = 0,\n  isStaticOffset = false,\n): [undefined | 'right' | 'bottom' | 'left', React.CSSProperties] {\n  const withOffset = (isVerticalPlacement: boolean) => {\n    const parsedCoords = { x: coords.x || 0, y: coords.y || 0 };\n\n    if (isVerticalPlacement) {\n      return isStaticOffset ? offset : parsedCoords.y + offset;\n    } else {\n      return isStaticOffset ? offset : parsedCoords.x + offset;\n    }\n  };\n\n  if (placement.startsWith('top')) {\n    const xOffsetProp = getXOffsetProp(placement, isStaticOffset);\n    return [\n      'bottom',\n      {\n        top: '100%',\n        [xOffsetProp]: withOffset(false),\n      },\n    ];\n  } else if (placement.startsWith('right')) {\n    const yOffsetProp = getYOffsetProp(placement, isStaticOffset);\n    return [\n      'left',\n      {\n        [yOffsetProp]: withOffset(true),\n        left: 0,\n      },\n    ];\n  } else if (placement.startsWith('bottom')) {\n    const xOffsetProp = getXOffsetProp(placement, isStaticOffset);\n    return [\n      undefined,\n      {\n        bottom: '100%',\n        [xOffsetProp]: withOffset(false),\n      },\n    ];\n  } else {\n    const yOffsetProp = getYOffsetProp(placement, isStaticOffset);\n    return [\n      'right',\n      {\n        [yOffsetProp]: withOffset(true),\n        right: 0,\n      },\n    ];\n  }\n}\n\nfunction getXOffsetProp(placement: Placement, isStaticOffset: boolean) {\n  return placement.endsWith('end') && isStaticOffset ? 'right' : 'left';\n}\n\nfunction getYOffsetProp(placement: Placement, isStaticOffset: boolean) {\n  return placement.endsWith('end') && isStaticOffset ? 'bottom' : 'top';\n}\n"],"names":["React","classNames","RootComponent","DefaultIcon","styles","placementClassNames","right","placementRight","bottom","placementBottom","left","placementLeft","FloatingArrow","offset","isStaticOffset","coords","iconStyle","iconClassName","placement","Icon","restProps","arrowPlacement","arrowStyles","getArrowPositionData","baseStyle","baseClassName","host","className","in","style","x","y","withOffset","isVerticalPlacement","parsedCoords","startsWith","xOffsetProp","getXOffsetProp","top","yOffsetProp","getYOffsetProp","undefined","endsWith"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,WAAW,QAAQ,mBAAgB;AAC5C,OAAOC,YAAY,6BAA6B;AAOhD,OAAO,MAAMC,sBAAsB;IACjCC,OAAOF,OAAOG,cAAc;IAC5BC,QAAQJ,OAAOK,eAAe;IAC9BC,MAAMN,OAAOO,aAAa;AAC5B,EAAE;AAoBF;;;;CAIC,GACD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,MAAM,EACNC,cAAc,EACdC,MAAM,EACNC,SAAS,EACTC,aAAa,EACbC,YAAY,QAAQ,EACpBC,OAAOhB,WAAW,EAClB,GAAGiB,WACgB;IACnB,MAAM,CAACC,gBAAgBC,YAAY,GAAGC,qBACpCL,WACAH,QACAF,QACAC;IAGF,qBACE,KAACZ;QACCsB,WAAWF;QACXG,eAAexB,WAAWG,OAAOsB,IAAI,EAAEL,kBAAkBhB,mBAAmB,CAACgB,eAAe;QAC3F,GAAGD,SAAS;kBAEb,cAAA,KAACD;YAAKQ,WAAW1B,WAAWG,OAAOwB,EAAE,EAAEX;YAAgBY,OAAOb;;;AAGpE,EAAE;AAEF,SAASO,qBACPL,SAAoB,EACpBH,SAAiB;IAAEe,GAAG;IAAGC,GAAG;AAAE,CAAC,EAC/BlB,SAAS,CAAC,EACVC,iBAAiB,KAAK;IAEtB,MAAMkB,aAAa,CAACC;QAClB,MAAMC,eAAe;YAAEJ,GAAGf,OAAOe,CAAC,IAAI;YAAGC,GAAGhB,OAAOgB,CAAC,IAAI;QAAE;QAE1D,IAAIE,qBAAqB;YACvB,OAAOnB,iBAAiBD,SAASqB,aAAaH,CAAC,GAAGlB;QACpD,OAAO;YACL,OAAOC,iBAAiBD,SAASqB,aAAaJ,CAAC,GAAGjB;QACpD;IACF;IAEA,IAAIK,UAAUiB,UAAU,CAAC,QAAQ;QAC/B,MAAMC,cAAcC,eAAenB,WAAWJ;QAC9C,OAAO;YACL;YACA;gBACEwB,KAAK;gBACL,CAACF,YAAY,EAAEJ,WAAW;YAC5B;SACD;IACH,OAAO,IAAId,UAAUiB,UAAU,CAAC,UAAU;QACxC,MAAMI,cAAcC,eAAetB,WAAWJ;QAC9C,OAAO;YACL;YACA;gBACE,CAACyB,YAAY,EAAEP,WAAW;gBAC1BtB,MAAM;YACR;SACD;IACH,OAAO,IAAIQ,UAAUiB,UAAU,CAAC,WAAW;QACzC,MAAMC,cAAcC,eAAenB,WAAWJ;QAC9C,OAAO;YACL2B;YACA;gBACEjC,QAAQ;gBACR,CAAC4B,YAAY,EAAEJ,WAAW;YAC5B;SACD;IACH,OAAO;QACL,MAAMO,cAAcC,eAAetB,WAAWJ;QAC9C,OAAO;YACL;YACA;gBACE,CAACyB,YAAY,EAAEP,WAAW;gBAC1B1B,OAAO;YACT;SACD;IACH;AACF;AAEA,SAAS+B,eAAenB,SAAoB,EAAEJ,cAAuB;IACnE,OAAOI,UAAUwB,QAAQ,CAAC,UAAU5B,iBAAiB,UAAU;AACjE;AAEA,SAAS0B,eAAetB,SAAoB,EAAEJ,cAAuB;IACnE,OAAOI,UAAUwB,QAAQ,CAAC,UAAU5B,iBAAiB,WAAW;AAClE"}

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

@@ -6,7 +6,7 @@
   content: '';
   display: block;
 
-  /* см. Примечание 1 в FloatingArrow.tsx. */
+  /* см. "Примечание" в DefaultIcon.tsx. */
   transform: translateY(1px);
 }
 

package/dist/cssm/components/HorizontalCell/HorizontalCell.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames, hasReactNode } from "@vkontakte/vkjs";
+import { mergeStyle } from "../../helpers/mergeStyle.js";
 import { Avatar } from "../Avatar/Avatar.js";
 import { Tappable } from "../Tappable/Tappable.js";
 import { Caption } from "../Typography/Caption/Caption.js";
@@ -15,6 +16,10 @@ const stylesSize = {
     xl: styles.sizeXL,
     auto: styles.sizeAuto
 };
+const textAlignClassNames = {
+    center: styles.textAlignCenter,
+    end: styles.textAlignEnd
+};
 const CellTypography = ({ size, children, ...restProps })=>{
     return size === 's' ? /*#__PURE__*/ _jsx(Caption, {
         ...restProps,
@@ -28,17 +33,15 @@ const CellTypography = ({ size, children, ...restProps })=>{
  * @see https://vkcom.github.io/VKUI/#/HorizontalCell
  */ export const HorizontalCell = ({ className, title, style, subtitle, size = 's', children = /*#__PURE__*/ _jsx(Avatar, {
     size: 56
-}), getRootRef, getRef, extraSubtitle, ...restProps })=>{
+}), getRootRef, getRef, extraSubtitle, textAlign = size === 's' ? 'center' : 'start', noPadding = false, ...restProps })=>{
     const hasTypography = hasReactNode(title) || hasReactNode(subtitle) || hasReactNode(extraSubtitle);
+    const customProperties = typeof size === 'number' ? {
+        [CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH]: `${size}px`
+    } : undefined;
     return /*#__PURE__*/ _jsx("div", {
         ref: getRootRef,
-        style: {
-            ...typeof size === 'number' && {
-                [CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH]: `${size}px`
-            },
-            ...style
-        },
-        className: classNames(styles.host, typeof size === 'string' && stylesSize[size], size !== 'auto' && styles.sized, className),
+        style: mergeStyle(customProperties, style),
+        className: classNames(styles.host, typeof size === 'string' && stylesSize[size], size !== 'auto' && styles.sized, typeof size === 'number' && styles.customSize, noPadding && styles.noPadding, className),
         children: /*#__PURE__*/ _jsxs(Tappable, {
             className: styles.body,
             getRootRef: getRef,
@@ -49,7 +52,7 @@ const CellTypography = ({ size, children, ...restProps })=>{
                     children: children
                 }),
                 hasTypography && /*#__PURE__*/ _jsxs("div", {
-                    className: styles.content,
+                    className: classNames(styles.content, textAlign !== 'start' && textAlignClassNames[textAlign]),
                     children: [
                         hasReactNode(title) && /*#__PURE__*/ _jsx(CellTypography, {
                             size: size,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport type { HasRef, HasRootRef, HTMLAttributesWithRootRef, LiteralUnion } from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCell.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH = '--vkui_internal--cell_width';\n\nconst stylesSize = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n  xl: styles.sizeXL,\n  auto: styles.sizeAuto,\n};\n\ntype HorizontalCellSizes = 's' | 'm' | 'l' | 'xl' | 'auto';\n\ninterface CellTypographyProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  size: HorizontalCellProps['size'];\n}\n\nconst CellTypography = ({ size, children, ...restProps }: CellTypographyProps) => {\n  return size === 's' ? (\n    <Caption {...restProps}>{children}</Caption>\n  ) : (\n    <Subhead {...restProps}>{children}</Subhead>\n  );\n};\n\nexport interface HorizontalCellProps\n  extends Omit<TappableProps, 'size' | 'getRootRef' | 'title' | 'borderRadiusMode'>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Ширина компонента\n   *\n   * Значения `'s' | 'm' | 'l' | 'xl'` определяются дизайн-системой.\n   * Значение `auto` позволяет задать динамическую ширину, определяемую контентом.\n   * Пользовательскую ширину можно задать через числовое значение.\n   */\n  size?: LiteralUnion<HorizontalCellSizes, number>;\n  /**\n   * Заголовок\n   */\n  title?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n  className,\n  title,\n  style,\n  subtitle,\n  size = 's',\n  children = <Avatar size={56} />,\n  getRootRef,\n  getRef,\n  extraSubtitle,\n  ...restProps\n}: HorizontalCellProps): React.ReactNode => {\n  const hasTypography =\n    hasReactNode(title) || hasReactNode(subtitle) || hasReactNode(extraSubtitle);\n  return (\n    <div\n      ref={getRootRef}\n      style={{\n        ...(typeof size === 'number' && { [CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH]: `${size}px` }),\n        ...style,\n      }}\n      className={classNames(\n        styles.host,\n        typeof size === 'string' && stylesSize[size],\n        size !== 'auto' && styles.sized,\n        className,\n      )}\n    >\n      <Tappable className={styles.body} getRootRef={getRef} {...restProps}>\n        {hasReactNode(children) && <div className={styles.image}>{children}</div>}\n        {hasTypography && (\n          <div className={styles.content}>\n            {hasReactNode(title) && <CellTypography size={size}>{title}</CellTypography>}\n            {hasReactNode(subtitle) && <Footnote className={styles.subtitle}>{subtitle}</Footnote>}\n            {hasReactNode(extraSubtitle) && (\n              <Footnote className={styles.subtitle}>{extraSubtitle}</Footnote>\n            )}\n          </div>\n        )}\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["React","classNames","hasReactNode","Avatar","Tappable","Caption","Footnote","Subhead","styles","CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH","stylesSize","s","sizeS","m","sizeM","l","sizeL","xl","sizeXL","auto","sizeAuto","CellTypography","size","children","restProps","HorizontalCell","className","title","style","subtitle","getRootRef","getRef","extraSubtitle","hasTypography","div","ref","host","sized","body","image","content"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,MAAM,QAAQ,sBAAmB;AAC1C,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,OAAO,QAAQ,mCAAgC;AACxD,OAAOC,YAAY,8BAA8B;AAEjD,OAAO,MAAMC,kCAAkC,8BAA8B;AAE7E,MAAMC,aAAa;IACjBC,GAAGH,OAAOI,KAAK;IACfC,GAAGL,OAAOM,KAAK;IACfC,GAAGP,OAAOQ,KAAK;IACfC,IAAIT,OAAOU,MAAM;IACjBC,MAAMX,OAAOY,QAAQ;AACvB;AAQA,MAAMC,iBAAiB,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,WAAgC;IAC3E,OAAOF,SAAS,oBACd,KAACjB;QAAS,GAAGmB,SAAS;kBAAGD;uBAEzB,KAAChB;QAAS,GAAGiB,SAAS;kBAAGD;;AAE7B;AA4BA;;CAEC,GACD,OAAO,MAAME,iBAAiB,CAAC,EAC7BC,SAAS,EACTC,KAAK,EACLC,KAAK,EACLC,QAAQ,EACRP,OAAO,GAAG,EACVC,yBAAW,KAACpB;IAAOmB,MAAM;EAAM,EAC/BQ,UAAU,EACVC,MAAM,EACNC,aAAa,EACb,GAAGR,WACiB;IACpB,MAAMS,gBACJ/B,aAAayB,UAAUzB,aAAa2B,aAAa3B,aAAa8B;IAChE,qBACE,KAACE;QACCC,KAAKL;QACLF,OAAO;YACL,GAAI,OAAON,SAAS,YAAY;gBAAE,CAACb,gCAAgC,EAAE,GAAGa,KAAK,EAAE,CAAC;YAAC,CAAC;YAClF,GAAGM,KAAK;QACV;QACAF,WAAWzB,WACTO,OAAO4B,IAAI,EACX,OAAOd,SAAS,YAAYZ,UAAU,CAACY,KAAK,EAC5CA,SAAS,UAAUd,OAAO6B,KAAK,EAC/BX;kBAGF,cAAA,MAACtB;YAASsB,WAAWlB,OAAO8B,IAAI;YAAER,YAAYC;YAAS,GAAGP,SAAS;;gBAChEtB,aAAaqB,2BAAa,KAACW;oBAAIR,WAAWlB,OAAO+B,KAAK;8BAAGhB;;gBACzDU,+BACC,MAACC;oBAAIR,WAAWlB,OAAOgC,OAAO;;wBAC3BtC,aAAayB,wBAAU,KAACN;4BAAeC,MAAMA;sCAAOK;;wBACpDzB,aAAa2B,2BAAa,KAACvB;4BAASoB,WAAWlB,OAAOqB,QAAQ;sCAAGA;;wBACjE3B,aAAa8B,gCACZ,KAAC1B;4BAASoB,WAAWlB,OAAOqB,QAAQ;sCAAGG;;;;;;;AAOrD,EAAE"}
+{"version":3,"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport type {\n  CSSCustomProperties,\n  HasRef,\n  HasRootRef,\n  HTMLAttributesWithRootRef,\n  LiteralUnion,\n} from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCell.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH = '--vkui_internal--cell_width';\n\nconst stylesSize = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n  xl: styles.sizeXL,\n  auto: styles.sizeAuto,\n};\n\nconst textAlignClassNames = {\n  center: styles.textAlignCenter,\n  end: styles.textAlignEnd,\n};\n\ntype HorizontalCellSizes = 's' | 'm' | 'l' | 'xl' | 'auto';\n\ninterface CellTypographyProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  size: HorizontalCellProps['size'];\n}\n\nconst CellTypography = ({ size, children, ...restProps }: CellTypographyProps) => {\n  return size === 's' ? (\n    <Caption {...restProps}>{children}</Caption>\n  ) : (\n    <Subhead {...restProps}>{children}</Subhead>\n  );\n};\n\nexport interface HorizontalCellProps\n  extends Omit<TappableProps, 'size' | 'getRootRef' | 'title' | 'borderRadiusMode'>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Ширина компонента\n   *\n   * Значения `'s' | 'm' | 'l' | 'xl'` определяются дизайн-системой.\n   * Значение `auto` позволяет задать динамическую ширину, определяемую контентом.\n   * Пользовательскую ширину можно задать через числовое значение.\n   */\n  size?: LiteralUnion<HorizontalCellSizes, number>;\n  /**\n   * Заголовок\n   */\n  title?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Задает выравнивание типографики. По умолчанию `center` для `size=s`, иначе `start`\n   */\n  textAlign?: 'start' | 'center' | 'end';\n  /**\n   * Отключает формирование отступов у крайних элементов\n   *\n   * Актуально для использования в многострочных списках\n   */\n  noPadding?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n  className,\n  title,\n  style,\n  subtitle,\n  size = 's',\n  children = <Avatar size={56} />,\n  getRootRef,\n  getRef,\n  extraSubtitle,\n  textAlign = size === 's' ? 'center' : 'start',\n  noPadding = false,\n  ...restProps\n}: HorizontalCellProps): React.ReactNode => {\n  const hasTypography =\n    hasReactNode(title) || hasReactNode(subtitle) || hasReactNode(extraSubtitle);\n\n  const customProperties: CSSCustomProperties | undefined =\n    typeof size === 'number' ? { [CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH]: `${size}px` } : undefined;\n\n  return (\n    <div\n      ref={getRootRef}\n      style={mergeStyle(customProperties, style)}\n      className={classNames(\n        styles.host,\n        typeof size === 'string' && stylesSize[size],\n        size !== 'auto' && styles.sized,\n        typeof size === 'number' && styles.customSize,\n        noPadding && styles.noPadding,\n        className,\n      )}\n    >\n      <Tappable className={styles.body} getRootRef={getRef} {...restProps}>\n        {hasReactNode(children) && <div className={styles.image}>{children}</div>}\n        {hasTypography && (\n          <div\n            className={classNames(\n              styles.content,\n              textAlign !== 'start' && textAlignClassNames[textAlign],\n            )}\n          >\n            {hasReactNode(title) && <CellTypography size={size}>{title}</CellTypography>}\n            {hasReactNode(subtitle) && <Footnote className={styles.subtitle}>{subtitle}</Footnote>}\n            {hasReactNode(extraSubtitle) && (\n              <Footnote className={styles.subtitle}>{extraSubtitle}</Footnote>\n            )}\n          </div>\n        )}\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["React","classNames","hasReactNode","mergeStyle","Avatar","Tappable","Caption","Footnote","Subhead","styles","CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH","stylesSize","s","sizeS","m","sizeM","l","sizeL","xl","sizeXL","auto","sizeAuto","textAlignClassNames","center","textAlignCenter","end","textAlignEnd","CellTypography","size","children","restProps","HorizontalCell","className","title","style","subtitle","getRootRef","getRef","extraSubtitle","textAlign","noPadding","hasTypography","customProperties","undefined","div","ref","host","sized","customSize","body","image","content"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,UAAU,QAAQ,8BAA2B;AAQtD,SAASC,MAAM,QAAQ,sBAAmB;AAC1C,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,OAAO,QAAQ,mCAAgC;AACxD,OAAOC,YAAY,8BAA8B;AAEjD,OAAO,MAAMC,kCAAkC,8BAA8B;AAE7E,MAAMC,aAAa;IACjBC,GAAGH,OAAOI,KAAK;IACfC,GAAGL,OAAOM,KAAK;IACfC,GAAGP,OAAOQ,KAAK;IACfC,IAAIT,OAAOU,MAAM;IACjBC,MAAMX,OAAOY,QAAQ;AACvB;AAEA,MAAMC,sBAAsB;IAC1BC,QAAQd,OAAOe,eAAe;IAC9BC,KAAKhB,OAAOiB,YAAY;AAC1B;AAQA,MAAMC,iBAAiB,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,WAAgC;IAC3E,OAAOF,SAAS,oBACd,KAACtB;QAAS,GAAGwB,SAAS;kBAAGD;uBAEzB,KAACrB;QAAS,GAAGsB,SAAS;kBAAGD;;AAE7B;AAsCA;;CAEC,GACD,OAAO,MAAME,iBAAiB,CAAC,EAC7BC,SAAS,EACTC,KAAK,EACLC,KAAK,EACLC,QAAQ,EACRP,OAAO,GAAG,EACVC,yBAAW,KAACzB;IAAOwB,MAAM;EAAM,EAC/BQ,UAAU,EACVC,MAAM,EACNC,aAAa,EACbC,YAAYX,SAAS,MAAM,WAAW,OAAO,EAC7CY,YAAY,KAAK,EACjB,GAAGV,WACiB;IACpB,MAAMW,gBACJvC,aAAa+B,UAAU/B,aAAaiC,aAAajC,aAAaoC;IAEhE,MAAMI,mBACJ,OAAOd,SAAS,WAAW;QAAE,CAAClB,gCAAgC,EAAE,GAAGkB,KAAK,EAAE,CAAC;IAAC,IAAIe;IAElF,qBACE,KAACC;QACCC,KAAKT;QACLF,OAAO/B,WAAWuC,kBAAkBR;QACpCF,WAAW/B,WACTQ,OAAOqC,IAAI,EACX,OAAOlB,SAAS,YAAYjB,UAAU,CAACiB,KAAK,EAC5CA,SAAS,UAAUnB,OAAOsC,KAAK,EAC/B,OAAOnB,SAAS,YAAYnB,OAAOuC,UAAU,EAC7CR,aAAa/B,OAAO+B,SAAS,EAC7BR;kBAGF,cAAA,MAAC3B;YAAS2B,WAAWvB,OAAOwC,IAAI;YAAEb,YAAYC;YAAS,GAAGP,SAAS;;gBAChE5B,aAAa2B,2BAAa,KAACe;oBAAIZ,WAAWvB,OAAOyC,KAAK;8BAAGrB;;gBACzDY,+BACC,MAACG;oBACCZ,WAAW/B,WACTQ,OAAO0C,OAAO,EACdZ,cAAc,WAAWjB,mBAAmB,CAACiB,UAAU;;wBAGxDrC,aAAa+B,wBAAU,KAACN;4BAAeC,MAAMA;sCAAOK;;wBACpD/B,aAAaiC,2BAAa,KAAC5B;4BAASyB,WAAWvB,OAAO0B,QAAQ;sCAAGA;;wBACjEjC,aAAaoC,gCACZ,KAAC/B;4BAASyB,WAAWvB,OAAO0B,QAAQ;sCAAGG;;;;;;;AAOrD,EAAE"}

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

@@ -36,13 +36,13 @@
 }
 
 .sized {
-  --vkui_internal--side_cell_width: calc(
-    var(--vkui_internal--cell_width) + var(--vkui_internal--side_cell_gap)
-  );
-
   max-inline-size: var(--vkui_internal--cell_width);
 }
 
+.customSize .body {
+  inline-size: var(--vkui_internal--cell_width);
+}
+
 .sizeS {
   --vkui_internal--side_cell_gap: calc(
     var(--vkui--size_base_padding_horizontal--regular) - var(--vkui--spacing_size_m)
@@ -50,6 +50,10 @@
   --vkui_internal--cell_width: 72px;
 }
 
+.noPadding {
+  --vkui_internal--side_cell_gap: 0px;
+}
+
 .image {
   padding-block: 4px;
   padding-inline: var(--vkui--spacing_size_s);
@@ -61,6 +65,14 @@
   text-align: start;
 }
 
+.textAlignCenter {
+  text-align: center;
+}
+
+.textAlignEnd {
+  text-align: end;
+}
+
 .sizeS .image {
   padding-block: 4px;
   padding-inline: var(--vkui--spacing_size_m);
@@ -69,7 +81,6 @@
 .sizeS .content {
   padding-block: 2px 8px;
   padding-inline: 4px;
-  text-align: center;
 }
 
 .sizeM {
@@ -96,7 +107,13 @@
 
 .sized:first-child,
 .sized:last-child {
-  max-inline-size: var(--vkui_internal--side_cell_width);
+  max-inline-size: calc(var(--vkui_internal--cell_width) + var(--vkui_internal--side_cell_gap));
+}
+
+.sized:first-child:last-child {
+  max-inline-size: calc(
+    var(--vkui_internal--cell_width) + (2 * (var(--vkui_internal--side_cell_gap)))
+  );
 }
 
 .sized:first-child .body,

package/dist/cssm/components/IconButton/IconButton.js

@@ -15,7 +15,7 @@ const sizeYClassNames = {
 const warn = warnOnce('IconButton');
 /**
  * @see https://vkcom.github.io/VKUI/#/IconButton
- */ export const IconButton = ({ label, children, className, ...restProps })=>{
+ */ export const IconButton = ({ label, children, ...restProps })=>{
     const platform = usePlatform();
     const { sizeY = 'none' } = useAdaptivity();
     if (process.env.NODE_ENV === 'development') {
@@ -35,7 +35,7 @@ const warn = warnOnce('IconButton');
         activeMode: "background",
         Component: restProps.href ? 'a' : 'button',
         ...restProps,
-        className: classNames(styles.host, sizeY !== 'regular' && sizeYClassNames[sizeY], platform === 'ios' && styles.ios, className),
+        baseClassName: classNames(styles.host, sizeY !== 'regular' && sizeYClassNames[sizeY], platform === 'ios' && styles.ios),
         children: [
             label && /*#__PURE__*/ _jsx(VisuallyHidden, {
                 children: label

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './IconButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n} as const;\n\nexport interface IconButtonProps extends TappableProps {\n  /**\n   * Текст кнопки-иконки. Делает ее доступной для ассистивных технологий\n   */\n  label?: string;\n}\n\nconst warn = warnOnce('IconButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/IconButton\n */\nexport const IconButton = ({\n  label,\n  children,\n  className,\n  ...restProps\n}: IconButtonProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  if (process.env.NODE_ENV === 'development') {\n    /* istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n    const isAccessible = hasAccessibleName({\n      children: [children, label],\n      ...restProps,\n    });\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      activeEffectDelay={200}\n      activeMode=\"background\"\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      className={classNames(\n        styles.host,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        platform === 'ios' && styles.ios,\n        className,\n      )}\n    >\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["classNames","useAdaptivity","usePlatform","hasAccessibleName","COMMON_WARNINGS","warnOnce","Tappable","VisuallyHidden","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","warn","IconButton","label","children","className","restProps","platform","sizeY","process","env","NODE_ENV","isAccessible","a11y","href","activeEffectDelay","activeMode","Component","host","ios"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,6BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAC/D,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AASA,MAAMC,OAAOT,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMU,aAAa,CAAC,EACzBC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACT,GAAGC,WACa;IAChB,MAAMC,WAAWlB;IACjB,MAAM,EAAEmB,QAAQ,MAAM,EAAE,GAAGpB;IAE3B,IAAIqB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAetB,kBAAkB;YACrCc,UAAU;gBAACA;gBAAUD;aAAM;YAC3B,GAAGG,SAAS;QACd;QAEA,IAAI,CAACM,cAAc;YACjBX,KAAKV,gBAAgBsB,IAAI,CAACP,UAAUQ,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IAEA,qBACE,MAACrB;QACCsB,mBAAmB;QACnBC,YAAW;QACXC,WAAWX,UAAUQ,IAAI,GAAG,MAAM;QACjC,GAAGR,SAAS;QACbD,WAAWlB,WACTQ,OAAOuB,IAAI,EACXV,UAAU,aAAaZ,eAAe,CAACY,MAAM,EAC7CD,aAAa,SAASZ,OAAOwB,GAAG,EAChCd;;YAGDF,uBAAS,KAACT;0BAAgBS;;YAC1BC;;;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './IconButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n} as const;\n\nexport interface IconButtonProps extends TappableProps {\n  /**\n   * Текст кнопки-иконки. Делает ее доступной для ассистивных технологий\n   */\n  label?: string;\n}\n\nconst warn = warnOnce('IconButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/IconButton\n */\nexport const IconButton = ({ label, children, ...restProps }: IconButtonProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  if (process.env.NODE_ENV === 'development') {\n    /* istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n    const isAccessible = hasAccessibleName({\n      children: [children, label],\n      ...restProps,\n    });\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      activeEffectDelay={200}\n      activeMode=\"background\"\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        platform === 'ios' && styles.ios,\n      )}\n    >\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["classNames","useAdaptivity","usePlatform","hasAccessibleName","COMMON_WARNINGS","warnOnce","Tappable","VisuallyHidden","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","warn","IconButton","label","children","restProps","platform","sizeY","process","env","NODE_ENV","isAccessible","a11y","href","activeEffectDelay","activeMode","Component","baseClassName","host","ios"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,6BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAC/D,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AASA,MAAMC,OAAOT,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMU,aAAa,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGC,WAA4B;IAC3E,MAAMC,WAAWjB;IACjB,MAAM,EAAEkB,QAAQ,MAAM,EAAE,GAAGnB;IAE3B,IAAIoB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAerB,kBAAkB;YACrCc,UAAU;gBAACA;gBAAUD;aAAM;YAC3B,GAAGE,SAAS;QACd;QAEA,IAAI,CAACM,cAAc;YACjBV,KAAKV,gBAAgBqB,IAAI,CAACP,UAAUQ,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IAEA,qBACE,MAACpB;QACCqB,mBAAmB;QACnBC,YAAW;QACXC,WAAWX,UAAUQ,IAAI,GAAG,MAAM;QACjC,GAAGR,SAAS;QACbY,eAAe9B,WACbQ,OAAOuB,IAAI,EACXX,UAAU,aAAaX,eAAe,CAACW,MAAM,EAC7CD,aAAa,SAASX,OAAOwB,GAAG;;YAGjChB,uBAAS,KAACT;0BAAgBS;;YAC1BC;;;AAGP,EAAE"}

package/dist/cssm/components/Image/Image.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 { ImageBase } from "../ImageBase/ImageBase.js";
 import { ImageBadge } from "./ImageBadge/ImageBadge.js";
 import styles from "./Image.module.css";
@@ -88,10 +89,7 @@ const getBorderRadiusBySizeInPx = (size, borderRadius)=>{
         ...restProps,
         objectFit: objectFit,
         size: size,
-        style: {
-            ...borderStyles,
-            ...style
-        },
+        style: mergeStyle(borderStyles, style),
         className: classNames(className, styles.host, borderStartStartRadius && styles.borderStartStartRadius, borderStartEndRadius && styles.borderStartEndRadius, borderEndStartRadius && styles.borderEndStartRadius, borderEndEndRadius && styles.borderEndEndRadius)
     });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { ImageBadge, type ImageBadgeProps } from './ImageBadge/ImageBadge';\nimport styles from './Image.module.css';\n\nexport type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };\n\nconst IMAGE_DEFAULT_SIZE = 48;\n\nexport interface ImageProps extends Omit<ImageBaseProps, 'badge'> {\n  /**\n   * Размер закругления.\n   */\n  borderRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между сторонами начала блока и строки\n   */\n  borderStartStartRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между стороной начала блока и стороной конца строки\n   */\n  borderStartEndRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между стороной конца блока и стороной начала строки\n   */\n  borderEndStartRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между сторонами конца блока и строки\n   */\n  borderEndEndRadius?: 's' | 'l' | 'm';\n}\n\nconst getBorderRadiusBySize = (\n  size: Exclude<ImageBaseProps['size'], undefined>,\n  borderRadius: Exclude<ImageProps['borderRadius'], undefined>,\n) => {\n  switch (borderRadius) {\n    case 's': {\n      if (size <= 32) {\n        return 2;\n      }\n      if (size <= 56) {\n        return 3;\n      }\n      return 4;\n    }\n    case 'm': {\n      if (size <= 32) {\n        return 3;\n      }\n      if (size <= 48) {\n        return 4;\n      }\n      if (size <= 72) {\n        return 6;\n      }\n      if (size <= 80) {\n        return 8;\n      }\n      return 10;\n    }\n    case 'l': {\n      if (size <= 16) {\n        return 4;\n      }\n      if (size <= 20) {\n        return 5;\n      }\n      if (size <= 32) {\n        return 6;\n      }\n      if (size <= 40) {\n        return 8;\n      }\n      if (size <= 48) {\n        return 10;\n      }\n      if (size <= 56) {\n        return 12;\n      }\n      if (size <= 64) {\n        return 14;\n      }\n      return 16;\n    }\n  }\n};\n\nconst getBorderRadiusBySizeInPx = (\n  size: Exclude<ImageBaseProps['size'], undefined>,\n  borderRadius: ImageProps['borderRadius'],\n) => {\n  if (!borderRadius) {\n    return undefined;\n  }\n\n  return `${getBorderRadiusBySize(size, borderRadius)}px`;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Image\n */\nexport const Image: React.FC<ImageProps> & {\n  Badge: typeof ImageBadge;\n  Overlay: typeof ImageBase.Overlay;\n} = ({\n  size = IMAGE_DEFAULT_SIZE,\n  borderRadius = 'm',\n  borderStartStartRadius,\n  borderStartEndRadius,\n  borderEndStartRadius,\n  borderEndEndRadius,\n  style,\n  className,\n  objectFit = 'cover',\n  ...restProps\n}: ImageProps) => {\n  const borderStyles = React.useMemo(\n    () => ({\n      '--vkui_internal--Image_border_radius': getBorderRadiusBySizeInPx(size, borderRadius),\n      '--vkui_internal--Image_border_start_start_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderStartStartRadius,\n      ),\n      '--vkui_internal--Image_border_start_end_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderStartEndRadius,\n      ),\n      '--vkui_internal--Image_border_end_start_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderEndStartRadius,\n      ),\n      '--vkui_internal--Image_border_end_end_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderEndEndRadius,\n      ),\n    }),\n    [\n      borderRadius,\n      borderStartStartRadius,\n      borderStartEndRadius,\n      borderEndStartRadius,\n      borderEndEndRadius,\n      size,\n    ],\n  );\n\n  return (\n    <ImageBase\n      {...restProps}\n      objectFit={objectFit}\n      size={size}\n      style={{ ...borderStyles, ...style }}\n      className={classNames(\n        className,\n        styles.host,\n        borderStartStartRadius && styles.borderStartStartRadius,\n        borderStartEndRadius && styles.borderStartEndRadius,\n        borderEndStartRadius && styles.borderEndStartRadius,\n        borderEndEndRadius && styles.borderEndEndRadius,\n      )}\n    />\n  );\n};\n\nImage.displayName = 'Image';\n\nImage.Badge = ImageBadge;\nImage.Badge.displayName = 'Image.Badge';\n\nImage.Overlay = ImageBase.Overlay;\nImage.Overlay.displayName = 'Image.Overlay';\n"],"names":["React","classNames","ImageBase","ImageBadge","styles","IMAGE_DEFAULT_SIZE","getBorderRadiusBySize","size","borderRadius","getBorderRadiusBySizeInPx","undefined","Image","borderStartStartRadius","borderStartEndRadius","borderEndStartRadius","borderEndEndRadius","style","className","objectFit","restProps","borderStyles","useMemo","host","displayName","Badge","Overlay"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,QAAyD,4BAAyB;AACpG,SAASC,UAAU,QAA8B,6BAA0B;AAC3E,OAAOC,YAAY,qBAAqB;AAIxC,MAAMC,qBAAqB;AAyB3B,MAAMC,wBAAwB,CAC5BC,MACAC;IAEA,OAAQA;QACN,KAAK;YAAK;gBACR,IAAID,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;QACA,KAAK;YAAK;gBACR,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;QACA,KAAK;YAAK;gBACR,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;IACF;AACF;AAEA,MAAME,4BAA4B,CAChCF,MACAC;IAEA,IAAI,CAACA,cAAc;QACjB,OAAOE;IACT;IAEA,OAAO,GAAGJ,sBAAsBC,MAAMC,cAAc,EAAE,CAAC;AACzD;AAEA;;CAEC,GACD,OAAO,MAAMG,QAGT,CAAC,EACHJ,OAAOF,kBAAkB,EACzBG,eAAe,GAAG,EAClBI,sBAAsB,EACtBC,oBAAoB,EACpBC,oBAAoB,EACpBC,kBAAkB,EAClBC,KAAK,EACLC,SAAS,EACTC,YAAY,OAAO,EACnB,GAAGC,WACQ;IACX,MAAMC,eAAepB,MAAMqB,OAAO,CAChC,IAAO,CAAA;YACL,wCAAwCZ,0BAA0BF,MAAMC;YACxE,oDAAoDC,0BAClDF,MACAK;YAEF,kDAAkDH,0BAChDF,MACAM;YAEF,kDAAkDJ,0BAChDF,MACAO;YAEF,gDAAgDL,0BAC9CF,MACAQ;QAEJ,CAAA,GACA;QACEP;QACAI;QACAC;QACAC;QACAC;QACAR;KACD;IAGH,qBACE,KAACL;QACE,GAAGiB,SAAS;QACbD,WAAWA;QACXX,MAAMA;QACNS,OAAO;YAAE,GAAGI,YAAY;YAAE,GAAGJ,KAAK;QAAC;QACnCC,WAAWhB,WACTgB,WACAb,OAAOkB,IAAI,EACXV,0BAA0BR,OAAOQ,sBAAsB,EACvDC,wBAAwBT,OAAOS,oBAAoB,EACnDC,wBAAwBV,OAAOU,oBAAoB,EACnDC,sBAAsBX,OAAOW,kBAAkB;;AAIvD,EAAE;AAEFJ,MAAMY,WAAW,GAAG;AAEpBZ,MAAMa,KAAK,GAAGrB;AACdQ,MAAMa,KAAK,CAACD,WAAW,GAAG;AAE1BZ,MAAMc,OAAO,GAAGvB,UAAUuB,OAAO;AACjCd,MAAMc,OAAO,CAACF,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { type CSSCustomProperties } from '../../types';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { ImageBadge, type ImageBadgeProps } from './ImageBadge/ImageBadge';\nimport styles from './Image.module.css';\n\nexport type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };\n\nconst IMAGE_DEFAULT_SIZE = 48;\n\nexport interface ImageProps extends Omit<ImageBaseProps, 'badge'> {\n  /**\n   * Размер закругления.\n   */\n  borderRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между сторонами начала блока и строки\n   */\n  borderStartStartRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между стороной начала блока и стороной конца строки\n   */\n  borderStartEndRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между стороной конца блока и стороной начала строки\n   */\n  borderEndStartRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между сторонами конца блока и строки\n   */\n  borderEndEndRadius?: 's' | 'l' | 'm';\n}\n\nconst getBorderRadiusBySize = (\n  size: Exclude<ImageBaseProps['size'], undefined>,\n  borderRadius: Exclude<ImageProps['borderRadius'], undefined>,\n) => {\n  switch (borderRadius) {\n    case 's': {\n      if (size <= 32) {\n        return 2;\n      }\n      if (size <= 56) {\n        return 3;\n      }\n      return 4;\n    }\n    case 'm': {\n      if (size <= 32) {\n        return 3;\n      }\n      if (size <= 48) {\n        return 4;\n      }\n      if (size <= 72) {\n        return 6;\n      }\n      if (size <= 80) {\n        return 8;\n      }\n      return 10;\n    }\n    case 'l': {\n      if (size <= 16) {\n        return 4;\n      }\n      if (size <= 20) {\n        return 5;\n      }\n      if (size <= 32) {\n        return 6;\n      }\n      if (size <= 40) {\n        return 8;\n      }\n      if (size <= 48) {\n        return 10;\n      }\n      if (size <= 56) {\n        return 12;\n      }\n      if (size <= 64) {\n        return 14;\n      }\n      return 16;\n    }\n  }\n};\n\nconst getBorderRadiusBySizeInPx = (\n  size: Exclude<ImageBaseProps['size'], undefined>,\n  borderRadius: ImageProps['borderRadius'],\n) => {\n  if (!borderRadius) {\n    return undefined;\n  }\n\n  return `${getBorderRadiusBySize(size, borderRadius)}px`;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Image\n */\nexport const Image: React.FC<ImageProps> & {\n  Badge: typeof ImageBadge;\n  Overlay: typeof ImageBase.Overlay;\n} = ({\n  size = IMAGE_DEFAULT_SIZE,\n  borderRadius = 'm',\n  borderStartStartRadius,\n  borderStartEndRadius,\n  borderEndStartRadius,\n  borderEndEndRadius,\n  style,\n  className,\n  objectFit = 'cover',\n  ...restProps\n}: ImageProps) => {\n  const borderStyles: CSSCustomProperties<string | undefined> = React.useMemo(\n    () => ({\n      '--vkui_internal--Image_border_radius': getBorderRadiusBySizeInPx(size, borderRadius),\n      '--vkui_internal--Image_border_start_start_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderStartStartRadius,\n      ),\n      '--vkui_internal--Image_border_start_end_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderStartEndRadius,\n      ),\n      '--vkui_internal--Image_border_end_start_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderEndStartRadius,\n      ),\n      '--vkui_internal--Image_border_end_end_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderEndEndRadius,\n      ),\n    }),\n    [\n      borderRadius,\n      borderStartStartRadius,\n      borderStartEndRadius,\n      borderEndStartRadius,\n      borderEndEndRadius,\n      size,\n    ],\n  );\n\n  return (\n    <ImageBase\n      {...restProps}\n      objectFit={objectFit}\n      size={size}\n      style={mergeStyle(borderStyles, style)}\n      className={classNames(\n        className,\n        styles.host,\n        borderStartStartRadius && styles.borderStartStartRadius,\n        borderStartEndRadius && styles.borderStartEndRadius,\n        borderEndStartRadius && styles.borderEndStartRadius,\n        borderEndEndRadius && styles.borderEndEndRadius,\n      )}\n    />\n  );\n};\n\nImage.displayName = 'Image';\n\nImage.Badge = ImageBadge;\nImage.Badge.displayName = 'Image.Badge';\n\nImage.Overlay = ImageBase.Overlay;\nImage.Overlay.displayName = 'Image.Overlay';\n"],"names":["React","classNames","mergeStyle","ImageBase","ImageBadge","styles","IMAGE_DEFAULT_SIZE","getBorderRadiusBySize","size","borderRadius","getBorderRadiusBySizeInPx","undefined","Image","borderStartStartRadius","borderStartEndRadius","borderEndStartRadius","borderEndEndRadius","style","className","objectFit","restProps","borderStyles","useMemo","host","displayName","Badge","Overlay"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,8BAA2B;AAEtD,SAASC,SAAS,QAAyD,4BAAyB;AACpG,SAASC,UAAU,QAA8B,6BAA0B;AAC3E,OAAOC,YAAY,qBAAqB;AAIxC,MAAMC,qBAAqB;AAyB3B,MAAMC,wBAAwB,CAC5BC,MACAC;IAEA,OAAQA;QACN,KAAK;YAAK;gBACR,IAAID,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;QACA,KAAK;YAAK;gBACR,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;QACA,KAAK;YAAK;gBACR,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;IACF;AACF;AAEA,MAAME,4BAA4B,CAChCF,MACAC;IAEA,IAAI,CAACA,cAAc;QACjB,OAAOE;IACT;IAEA,OAAO,GAAGJ,sBAAsBC,MAAMC,cAAc,EAAE,CAAC;AACzD;AAEA;;CAEC,GACD,OAAO,MAAMG,QAGT,CAAC,EACHJ,OAAOF,kBAAkB,EACzBG,eAAe,GAAG,EAClBI,sBAAsB,EACtBC,oBAAoB,EACpBC,oBAAoB,EACpBC,kBAAkB,EAClBC,KAAK,EACLC,SAAS,EACTC,YAAY,OAAO,EACnB,GAAGC,WACQ;IACX,MAAMC,eAAwDrB,MAAMsB,OAAO,CACzE,IAAO,CAAA;YACL,wCAAwCZ,0BAA0BF,MAAMC;YACxE,oDAAoDC,0BAClDF,MACAK;YAEF,kDAAkDH,0BAChDF,MACAM;YAEF,kDAAkDJ,0BAChDF,MACAO;YAEF,gDAAgDL,0BAC9CF,MACAQ;QAEJ,CAAA,GACA;QACEP;QACAI;QACAC;QACAC;QACAC;QACAR;KACD;IAGH,qBACE,KAACL;QACE,GAAGiB,SAAS;QACbD,WAAWA;QACXX,MAAMA;QACNS,OAAOf,WAAWmB,cAAcJ;QAChCC,WAAWjB,WACTiB,WACAb,OAAOkB,IAAI,EACXV,0BAA0BR,OAAOQ,sBAAsB,EACvDC,wBAAwBT,OAAOS,oBAAoB,EACnDC,wBAAwBV,OAAOU,oBAAoB,EACnDC,sBAAsBX,OAAOW,kBAAkB;;AAIvD,EAAE;AAEFJ,MAAMY,WAAW,GAAG;AAEpBZ,MAAMa,KAAK,GAAGrB;AACdQ,MAAMa,KAAK,CAACD,WAAW,GAAG;AAE1BZ,MAAMc,OAAO,GAAGvB,UAAUuB,OAAO;AACjCd,MAAMc,OAAO,CAACF,WAAW,GAAG"}

package/dist/cssm/components/ImageBase/ImageBase.js

@@ -43,7 +43,7 @@ const sizeToNumber = (size)=>{
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/ImageBase
- */ export const ImageBase = ({ alt, crossOrigin, decoding, loading, referrerPolicy, sizes, src, srcSet, useMap, fetchPriority, getRef, size: sizeProp, width: widthImg, height: heightImg, widthSize, heightSize, style, noBorder = false, fallbackIcon: fallbackIconProp, children, onLoad, onError, withTransparentBackground, objectFit = 'cover', keepAspectRatio = false, ...restProps })=>{
+ */ export const ImageBase = ({ alt, crossOrigin, decoding, loading, referrerPolicy, sizes, src, srcSet, useMap, fetchPriority, getRef, size: sizeProp, width: widthImg, height: heightImg, widthSize, heightSize, noBorder = false, fallbackIcon: fallbackIconProp, children, onLoad, onError, withTransparentBackground, objectFit = 'cover', keepAspectRatio = false, ...restProps })=>{
     const size = sizeProp ?? minOr([
         sizeToNumber(widthSize),
         sizeToNumber(heightSize)
@@ -97,10 +97,9 @@ const sizeToNumber = (size)=>{
             size
         },
         children: /*#__PURE__*/ _jsxs(Clickable, {
-            style: {
+            baseStyle: {
                 width,
-                height,
-                ...style
+                height
             },
             baseClassName: classNames(styles.host, loaded && styles.loaded, withTransparentBackground && styles.transparentBackground),
             ...restProps,