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

package/dist/components/FloatingArrow/FloatingArrow.js

@@ -4,30 +4,31 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 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";
-const placementClassNames = {
+export const placementClassNames = {
     right: "vkuiFloatingArrow__placementRight",
     bottom: "vkuiFloatingArrow__placementBottom",
     left: "vkuiFloatingArrow__placementLeft"
 };
 /**
- * @private
+ * Иконка-стрелка для всплывающих окон.
+ *
+ * @since 7.0.0
  */ export const FloatingArrow = (_param)=>{
-    var { offset, isStaticOffset, coords, iconStyle, iconClassName, placement = 'bottom', getRootRef, Icon = DefaultIcon } = _param, restProps = _object_without_properties(_param, [
+    var { offset, isStaticOffset, coords, iconStyle, iconClassName, placement = 'bottom', Icon = DefaultIcon } = _param, restProps = _object_without_properties(_param, [
         "offset",
         "isStaticOffset",
         "coords",
         "iconStyle",
         "iconClassName",
         "placement",
-        "getRootRef",
         "Icon"
     ]);
     const [arrowPlacement, arrowStyles] = getArrowPositionData(placement, coords, offset, isStaticOffset);
-    return /*#__PURE__*/ _jsx("div", _object_spread_props(_object_spread({
-        ref: getRootRef,
-        style: arrowStyles,
-        className: classNames("vkuiFloatingArrow__host", arrowPlacement && placementClassNames[arrowPlacement])
+    return /*#__PURE__*/ _jsx(RootComponent, _object_spread_props(_object_spread({
+        baseStyle: arrowStyles,
+        baseClassName: classNames("vkuiFloatingArrow__host", arrowPlacement && placementClassNames[arrowPlacement])
     }, restProps), {
         children: /*#__PURE__*/ _jsx(Icon, {
             className: classNames("vkuiFloatingArrow__in", iconClassName),

package/dist/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","placementClassNames","right","bottom","left","FloatingArrow","offset","isStaticOffset","coords","iconStyle","iconClassName","placement","getRootRef","Icon","restProps","arrowPlacement","arrowStyles","getArrowPositionData","div","ref","style","className","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;AAQ5C,MAAMC,sBAAsB;IAC1BC,KAAK;IACLC,MAAM;IACNC,IAAI;AACN;AAoBA;;CAEC,GACD,OAAO,MAAMC,gBAAgB;QAAC,EAC5BC,MAAM,EACNC,cAAc,EACdC,MAAM,EACNC,SAAS,EACTC,aAAa,EACbC,YAAY,QAAQ,EACpBC,UAAU,EACVC,OAAOb,WAAW,EAEC,WADhBc;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACE,gBAAgBC,YAAY,GAAGC,qBACpCN,WACAH,QACAF,QACAC;IAGF,qBACE,KAACW;QACCC,KAAKP;QACLQ,OAAOJ;QACPK,WAAWtB,sCAAwBgB,kBAAkBd,mBAAmB,CAACc,eAAe;OACpFD;kBAEJ,cAAA,KAACD;YAAKQ,WAAWtB,oCAAsBW;YAAgBU,OAAOX;;;AAGpE,EAAE;AAEF,SAASQ,qBACPN,SAAoB,EACpBH,SAAiB;IAAEc,GAAG;IAAGC,GAAG;AAAE,CAAC,EAC/BjB,SAAS,CAAC,EACVC,iBAAiB,KAAK;IAEtB,MAAMiB,aAAa,CAACC;QAClB,MAAMC,eAAe;YAAEJ,GAAGd,OAAOc,CAAC,IAAI;YAAGC,GAAGf,OAAOe,CAAC,IAAI;QAAE;QAE1D,IAAIE,qBAAqB;YACvB,OAAOlB,iBAAiBD,SAASoB,aAAaH,CAAC,GAAGjB;QACpD,OAAO;YACL,OAAOC,iBAAiBD,SAASoB,aAAaJ,CAAC,GAAGhB;QACpD;IACF;IAEA,IAAIK,UAAUgB,UAAU,CAAC,QAAQ;QAC/B,MAAMC,cAAcC,eAAelB,WAAWJ;QAC9C,OAAO;YACL;YACA;gBACEuB,KAAK;gBACL,CAACF,YAAY,EAAEJ,WAAW;YAC5B;SACD;IACH,OAAO,IAAIb,UAAUgB,UAAU,CAAC,UAAU;QACxC,MAAMI,cAAcC,eAAerB,WAAWJ;QAC9C,OAAO;YACL;YACA;gBACE,CAACwB,YAAY,EAAEP,WAAW;gBAC1BpB,MAAM;YACR;SACD;IACH,OAAO,IAAIO,UAAUgB,UAAU,CAAC,WAAW;QACzC,MAAMC,cAAcC,eAAelB,WAAWJ;QAC9C,OAAO;YACL0B;YACA;gBACE9B,QAAQ;gBACR,CAACyB,YAAY,EAAEJ,WAAW;YAC5B;SACD;IACH,OAAO;QACL,MAAMO,cAAcC,eAAerB,WAAWJ;QAC9C,OAAO;YACL;YACA;gBACE,CAACwB,YAAY,EAAEP,WAAW;gBAC1BtB,OAAO;YACT;SACD;IACH;AACF;AAEA,SAAS2B,eAAelB,SAAoB,EAAEJ,cAAuB;IACnE,OAAOI,UAAUuB,QAAQ,CAAC,UAAU3B,iBAAiB,UAAU;AACjE;AAEA,SAASyB,eAAerB,SAAoB,EAAEJ,cAAuB;IACnE,OAAOI,UAAUuB,QAAQ,CAAC,UAAU3B,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","placementClassNames","right","bottom","left","FloatingArrow","offset","isStaticOffset","coords","iconStyle","iconClassName","placement","Icon","restProps","arrowPlacement","arrowStyles","getArrowPositionData","baseStyle","baseClassName","className","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;AAQ5C,OAAO,MAAMC,sBAAsB;IACjCC,KAAK;IACLC,MAAM;IACNC,IAAI;AACN,EAAE;AAoBF;;;;CAIC,GACD,OAAO,MAAMC,gBAAgB;QAAC,EAC5BC,MAAM,EACNC,cAAc,EACdC,MAAM,EACNC,SAAS,EACTC,aAAa,EACbC,YAAY,QAAQ,EACpBC,OAAOZ,WAAW,EAEC,WADhBa;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACE,gBAAgBC,YAAY,GAAGC,qBACpCL,WACAH,QACAF,QACAC;IAGF,qBACE,KAACR;QACCkB,WAAWF;QACXG,eAAepB,sCAAwBgB,kBAAkBb,mBAAmB,CAACa,eAAe;OACxFD;kBAEJ,cAAA,KAACD;YAAKO,WAAWrB,oCAAsBY;YAAgBU,OAAOX;;;AAGpE,EAAE;AAEF,SAASO,qBACPL,SAAoB,EACpBH,SAAiB;IAAEa,GAAG;IAAGC,GAAG;AAAE,CAAC,EAC/BhB,SAAS,CAAC,EACVC,iBAAiB,KAAK;IAEtB,MAAMgB,aAAa,CAACC;QAClB,MAAMC,eAAe;YAAEJ,GAAGb,OAAOa,CAAC,IAAI;YAAGC,GAAGd,OAAOc,CAAC,IAAI;QAAE;QAE1D,IAAIE,qBAAqB;YACvB,OAAOjB,iBAAiBD,SAASmB,aAAaH,CAAC,GAAGhB;QACpD,OAAO;YACL,OAAOC,iBAAiBD,SAASmB,aAAaJ,CAAC,GAAGf;QACpD;IACF;IAEA,IAAIK,UAAUe,UAAU,CAAC,QAAQ;QAC/B,MAAMC,cAAcC,eAAejB,WAAWJ;QAC9C,OAAO;YACL;YACA;gBACEsB,KAAK;gBACL,CAACF,YAAY,EAAEJ,WAAW;YAC5B;SACD;IACH,OAAO,IAAIZ,UAAUe,UAAU,CAAC,UAAU;QACxC,MAAMI,cAAcC,eAAepB,WAAWJ;QAC9C,OAAO;YACL;YACA;gBACE,CAACuB,YAAY,EAAEP,WAAW;gBAC1BnB,MAAM;YACR;SACD;IACH,OAAO,IAAIO,UAAUe,UAAU,CAAC,WAAW;QACzC,MAAMC,cAAcC,eAAejB,WAAWJ;QAC9C,OAAO;YACLyB;YACA;gBACE7B,QAAQ;gBACR,CAACwB,YAAY,EAAEJ,WAAW;YAC5B;SACD;IACH,OAAO;QACL,MAAMO,cAAcC,eAAepB,WAAWJ;QAC9C,OAAO;YACL;YACA;gBACE,CAACuB,YAAY,EAAEP,WAAW;gBAC1BrB,OAAO;YACT;SACD;IACH;AACF;AAEA,SAAS0B,eAAejB,SAAoB,EAAEJ,cAAuB;IACnE,OAAOI,UAAUsB,QAAQ,CAAC,UAAU1B,iBAAiB,UAAU;AACjE;AAEA,SAASwB,eAAepB,SAAoB,EAAEJ,cAAuB;IACnE,OAAOI,UAAUsB,QAAQ,CAAC,UAAU1B,iBAAiB,WAAW;AAClE"}

package/dist/components/HorizontalCell/HorizontalCell.d.ts

@@ -24,10 +24,20 @@ export interface HorizontalCellProps extends Omit<TappableProps, 'size' | 'getRo
      * Дополнительная строка текста под `children` и `subtitle`.
      */
     extraSubtitle?: React.ReactNode;
+    /**
+     * Задает выравнивание типографики. По умолчанию `center` для `size=s`, иначе `start`
+     */
+    textAlign?: 'start' | 'center' | 'end';
+    /**
+     * Отключает формирование отступов у крайних элементов
+     *
+     * Актуально для использования в многострочных списках
+     */
+    noPadding?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/HorizontalCell
  */
-export declare const HorizontalCell: ({ className, title, style, subtitle, size, children, getRootRef, getRef, extraSubtitle, ...restProps }: HorizontalCellProps) => React.ReactNode;
+export declare const HorizontalCell: ({ className, title, style, subtitle, size, children, getRootRef, getRef, extraSubtitle, textAlign, noPadding, ...restProps }: HorizontalCellProps) => React.ReactNode;
 export {};
 //# sourceMappingURL=HorizontalCell.d.ts.map

package/dist/components/HorizontalCell/HorizontalCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCell.d.ts","sourceRoot":"","sources":["../../../src/components/HorizontalCell/HorizontalCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAA6B,YAAY,EAAE,MAAM,aAAa,CAAC;AAE/F,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAMpE,eAAO,MAAM,+BAA+B,gCAAgC,CAAC;AAU7E,KAAK,mBAAmB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,MAAM,CAAC;AAc3D,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,YAAY,GAAG,OAAO,GAAG,kBAAkB,CAAC,EAC/E,UAAU,CAAC,cAAc,CAAC,EAC1B,MAAM,CAAC,cAAc,CAAC;IACxB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAC;IACjD;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,2GAWxB,mBAAmB,KAAG,KAAK,CAAC,SA+B9B,CAAC"}
+{"version":3,"file":"HorizontalCell.d.ts","sourceRoot":"","sources":["../../../src/components/HorizontalCell/HorizontalCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAEV,MAAM,EACN,UAAU,EAEV,YAAY,EACb,MAAM,aAAa,CAAC;AAErB,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAMpE,eAAO,MAAM,+BAA+B,gCAAgC,CAAC;AAe7E,KAAK,mBAAmB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,MAAM,CAAC;AAc3D,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,YAAY,GAAG,OAAO,GAAG,kBAAkB,CAAC,EAC/E,UAAU,CAAC,cAAc,CAAC,EAC1B,MAAM,CAAC,cAAc,CAAC;IACxB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAC;IACjD;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACvC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,iIAaxB,mBAAmB,KAAG,KAAK,CAAC,SAuC9B,CAAC"}

package/dist/components/HorizontalCell/HorizontalCell.js

@@ -4,6 +4,7 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 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";
@@ -17,6 +18,10 @@ const stylesSize = {
     xl: "vkuiHorizontalCell__sizeXL",
     auto: "vkuiHorizontalCell__sizeAuto"
 };
+const textAlignClassNames = {
+    center: "vkuiHorizontalCell__textAlignCenter",
+    end: "vkuiHorizontalCell__textAlignEnd"
+};
 const CellTypography = (_param)=>{
     var { size, children } = _param, restProps = _object_without_properties(_param, [
         "size",
@@ -33,7 +38,7 @@ const CellTypography = (_param)=>{
  */ export const HorizontalCell = (_param)=>{
     var { className, title, style, subtitle, size = 's', children = /*#__PURE__*/ _jsx(Avatar, {
         size: 56
-    }), getRootRef, getRef, extraSubtitle } = _param, restProps = _object_without_properties(_param, [
+    }), getRootRef, getRef, extraSubtitle, textAlign = size === 's' ? 'center' : 'start', noPadding = false } = _param, restProps = _object_without_properties(_param, [
         "className",
         "title",
         "style",
@@ -42,15 +47,18 @@ const CellTypography = (_param)=>{
         "children",
         "getRootRef",
         "getRef",
-        "extraSubtitle"
+        "extraSubtitle",
+        "textAlign",
+        "noPadding"
     ]);
     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: _object_spread({}, typeof size === 'number' && {
-            [CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH]: `${size}px`
-        }, style),
-        className: classNames("vkuiHorizontalCell__host", typeof size === 'string' && stylesSize[size], size !== 'auto' && "vkuiHorizontalCell__sized", className),
+        style: mergeStyle(customProperties, style),
+        className: classNames("vkuiHorizontalCell__host", typeof size === 'string' && stylesSize[size], size !== 'auto' && "vkuiHorizontalCell__sized", typeof size === 'number' && "vkuiHorizontalCell__customSize", noPadding && "vkuiHorizontalCell__noPadding", className),
         children: /*#__PURE__*/ _jsxs(Tappable, _object_spread_props(_object_spread({
             className: "vkuiHorizontalCell__body",
             getRootRef: getRef
@@ -61,7 +69,7 @@ const CellTypography = (_param)=>{
                     children: children
                 }),
                 hasTypography && /*#__PURE__*/ _jsxs("div", {
-                    className: "vkuiHorizontalCell__content",
+                    className: classNames("vkuiHorizontalCell__content", textAlign !== 'start' && textAlignClassNames[textAlign]),
                     children: [
                         hasReactNode(title) && /*#__PURE__*/ _jsx(CellTypography, {
                             size: size,

package/dist/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","CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH","stylesSize","s","m","l","xl","auto","CellTypography","size","children","restProps","HorizontalCell","className","title","style","subtitle","getRootRef","getRef","extraSubtitle","hasTypography","div","ref"],"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;AAGxD,OAAO,MAAMC,kCAAkC,8BAA8B;AAE7E,MAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;IACDC,CAAC;IACDC,EAAE;IACFC,IAAI;AACN;AAQA,MAAMC,iBAAiB;QAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAqC,WAAhCC;QAAnBF;QAAMC;;IAC9B,OAAOD,SAAS,oBACd,KAACX,iDAAYa;kBAAYD;wBAEzB,KAACV,iDAAYW;kBAAYD;;AAE7B;AA4BA;;CAEC,GACD,OAAO,MAAME,iBAAiB;QAAC,EAC7BC,SAAS,EACTC,KAAK,EACLC,KAAK,EACLC,QAAQ,EACRP,OAAO,GAAG,EACVC,yBAAW,KAACd;QAAOa,MAAM;MAAM,EAC/BQ,UAAU,EACVC,MAAM,EACNC,aAAa,EAEO,WADjBR;QATHE;QACAC;QACAC;QACAC;QACAP;QACAC;QACAO;QACAC;QACAC;;IAGA,MAAMC,gBACJzB,aAAamB,UAAUnB,aAAaqB,aAAarB,aAAawB;IAChE,qBACE,KAACE;QACCC,KAAKL;QACLF,OAAO,mBACD,OAAON,SAAS,YAAY;YAAE,CAACR,gCAAgC,EAAE,GAAGQ,KAAK,EAAE,CAAC;QAAC,GAC9EM;QAELF,WAAWnB,uCAET,OAAOe,SAAS,YAAYP,UAAU,CAACO,KAAK,EAC5CA,SAAS,uCACTI;kBAGF,cAAA,MAAChB;YAASgB,SAAS;YAAeI,YAAYC;WAAYP;;gBACvDhB,aAAae,2BAAa,KAACW;oBAAIR,SAAS;8BAAiBH;;gBACzDU,+BACC,MAACC;oBAAIR,SAAS;;wBACXlB,aAAamB,wBAAU,KAACN;4BAAeC,MAAMA;sCAAOK;;wBACpDnB,aAAaqB,2BAAa,KAACjB;4BAASc,SAAS;sCAAoBG;;wBACjErB,aAAawB,gCACZ,KAACpB;4BAASc,SAAS;sCAAoBM;;;;;;;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","CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH","stylesSize","s","m","l","xl","auto","textAlignClassNames","center","end","CellTypography","size","children","restProps","HorizontalCell","className","title","style","subtitle","getRootRef","getRef","extraSubtitle","textAlign","noPadding","hasTypography","customProperties","undefined","div","ref"],"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;AAGxD,OAAO,MAAMC,kCAAkC,8BAA8B;AAE7E,MAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;IACDC,CAAC;IACDC,EAAE;IACFC,IAAI;AACN;AAEA,MAAMC,sBAAsB;IAC1BC,MAAM;IACNC,GAAG;AACL;AAQA,MAAMC,iBAAiB;QAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAqC,WAAhCC;QAAnBF;QAAMC;;IAC9B,OAAOD,SAAS,oBACd,KAACd,iDAAYgB;kBAAYD;wBAEzB,KAACb,iDAAYc;kBAAYD;;AAE7B;AAsCA;;CAEC,GACD,OAAO,MAAME,iBAAiB;QAAC,EAC7BC,SAAS,EACTC,KAAK,EACLC,KAAK,EACLC,QAAQ,EACRP,OAAO,GAAG,EACVC,yBAAW,KAACjB;QAAOgB,MAAM;MAAM,EAC/BQ,UAAU,EACVC,MAAM,EACNC,aAAa,EACbC,YAAYX,SAAS,MAAM,WAAW,OAAO,EAC7CY,YAAY,KAAK,EAEG,WADjBV;QAXHE;QACAC;QACAC;QACAC;QACAP;QACAC;QACAO;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAMC,gBACJ/B,aAAauB,UAAUvB,aAAayB,aAAazB,aAAa4B;IAEhE,MAAMI,mBACJ,OAAOd,SAAS,WAAW;QAAE,CAACX,gCAAgC,EAAE,GAAGW,KAAK,EAAE,CAAC;IAAC,IAAIe;IAElF,qBACE,KAACC;QACCC,KAAKT;QACLF,OAAOvB,WAAW+B,kBAAkBR;QACpCF,WAAWvB,uCAET,OAAOmB,SAAS,YAAYV,UAAU,CAACU,KAAK,EAC5CA,SAAS,uCACT,OAAOA,SAAS,8CAChBY,8CACAR;kBAGF,cAAA,MAACnB;YAASmB,SAAS;YAAeI,YAAYC;WAAYP;;gBACvDpB,aAAamB,2BAAa,KAACe;oBAAIZ,SAAS;8BAAiBH;;gBACzDY,+BACC,MAACG;oBACCZ,WAAWvB,0CAET8B,cAAc,WAAWf,mBAAmB,CAACe,UAAU;;wBAGxD7B,aAAauB,wBAAU,KAACN;4BAAeC,MAAMA;sCAAOK;;wBACpDvB,aAAayB,2BAAa,KAACpB;4BAASiB,SAAS;sCAAoBG;;wBACjEzB,aAAa4B,gCACZ,KAACvB;4BAASiB,SAAS;sCAAoBM;;;;;;;AAOrD,EAAE"}

package/dist/components/IconButton/IconButton.d.ts

@@ -8,5 +8,5 @@ export interface IconButtonProps extends TappableProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/IconButton
  */
-export declare const IconButton: ({ label, children, className, ...restProps }: IconButtonProps) => React.ReactNode;
+export declare const IconButton: ({ label, children, ...restProps }: IconButtonProps) => React.ReactNode;
 //# sourceMappingURL=IconButton.d.ts.map

package/dist/components/IconButton/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AASpE,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAID;;GAEG;AACH,eAAO,MAAM,UAAU,iDAKpB,eAAe,KAAG,KAAK,CAAC,SAiC1B,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AASpE,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAID;;GAEG;AACH,eAAO,MAAM,UAAU,sCAAuC,eAAe,KAAG,KAAK,CAAC,SAgCrF,CAAC"}

package/dist/components/IconButton/IconButton.js

@@ -18,10 +18,9 @@ const warn = warnOnce('IconButton');
 /**
  * @see https://vkcom.github.io/VKUI/#/IconButton
  */ export const IconButton = (_param)=>{
-    var { label, children, className } = _param, restProps = _object_without_properties(_param, [
+    var { label, children } = _param, restProps = _object_without_properties(_param, [
         "label",
-        "children",
-        "className"
+        "children"
     ]);
     const platform = usePlatform();
     const { sizeY = 'none' } = useAdaptivity();
@@ -41,7 +40,7 @@ const warn = warnOnce('IconButton');
         activeMode: "background",
         Component: restProps.href ? 'a' : 'button'
     }, restProps), {
-        className: classNames("vkuiIconButton__host", sizeY !== 'regular' && sizeYClassNames[sizeY], platform === 'ios' && "vkuiIconButton__ios", className),
+        baseClassName: classNames("vkuiIconButton__host", sizeY !== 'regular' && sizeYClassNames[sizeY], platform === 'ios' && "vkuiIconButton__ios"),
         children: [
             label && /*#__PURE__*/ _jsx(VisuallyHidden, {
                 children: label

package/dist/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","sizeYClassNames","none","compact","warn","IconButton","label","children","className","restProps","platform","sizeY","process","env","NODE_ENV","isAccessible","a11y","href","activeEffectDelay","activeMode","Component"],"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;AAGlE,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AASA,MAAMC,OAAON,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMO,aAAa;QAAC,EACzBC,KAAK,EACLC,QAAQ,EACRC,SAAS,EAEO,WADbC;QAHHH;QACAC;QACAC;;IAGA,MAAME,WAAWf;IACjB,MAAM,EAAEgB,QAAQ,MAAM,EAAE,GAAGjB;IAE3B,IAAIkB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAenB,kBAAkB;YACrCW,UAAU;gBAACA;gBAAUD;aAAM;WACxBG;QAGL,IAAI,CAACM,cAAc;YACjBX,KAAKP,gBAAgBmB,IAAI,CAACP,UAAUQ,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IAEA,qBACE,MAAClB;QACCmB,mBAAmB;QACnBC,YAAW;QACXC,WAAWX,UAAUQ,IAAI,GAAG,MAAM;OAC9BR;QACJD,WAAWf,mCAETkB,UAAU,aAAaV,eAAe,CAACU,MAAM,EAC7CD,aAAa,gCACbF;;YAGDF,uBAAS,KAACN;0BAAgBM;;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","sizeYClassNames","none","compact","warn","IconButton","label","children","restProps","platform","sizeY","process","env","NODE_ENV","isAccessible","a11y","href","activeEffectDelay","activeMode","Component","baseClassName"],"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;AAGlE,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AASA,MAAMC,OAAON,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMO,aAAa;QAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAiC,WAA5BC;QAApBF;QAAOC;;IAClC,MAAME,WAAWd;IACjB,MAAM,EAAEe,QAAQ,MAAM,EAAE,GAAGhB;IAE3B,IAAIiB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAelB,kBAAkB;YACrCW,UAAU;gBAACA;gBAAUD;aAAM;WACxBE;QAGL,IAAI,CAACM,cAAc;YACjBV,KAAKP,gBAAgBkB,IAAI,CAACP,UAAUQ,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IAEA,qBACE,MAACjB;QACCkB,mBAAmB;QACnBC,YAAW;QACXC,WAAWX,UAAUQ,IAAI,GAAG,MAAM;OAC9BR;QACJY,eAAe3B,mCAEbiB,UAAU,aAAaT,eAAe,CAACS,MAAM,EAC7CD,aAAa;;YAGdH,uBAAS,KAACN;0BAAgBM;;YAC1BC;;;AAGP,EAAE"}

package/dist/components/Image/Image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,KAAK,qBAAqB,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACpG,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG3E,YAAY,EAAE,eAAe,EAAE,qBAAqB,IAAI,iBAAiB,EAAE,CAAC;AAI5E,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IAC/D;;OAEG;IACH,YAAY,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC/B;;OAEG;IACH,sBAAsB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACzC;;OAEG;IACH,oBAAoB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvC;;OAEG;IACH,oBAAoB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvC;;OAEG;IACH,kBAAkB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACtC;AAqED;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG;IACzC,KAAK,EAAE,OAAO,UAAU,CAAC;IACzB,OAAO,EAAE,OAAO,SAAS,CAAC,OAAO,CAAC;CA2DnC,CAAC"}
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,SAAS,EAAE,KAAK,qBAAqB,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACpG,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG3E,YAAY,EAAE,eAAe,EAAE,qBAAqB,IAAI,iBAAiB,EAAE,CAAC;AAI5E,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IAC/D;;OAEG;IACH,YAAY,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC/B;;OAEG;IACH,sBAAsB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACzC;;OAEG;IACH,oBAAoB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvC;;OAEG;IACH,oBAAoB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvC;;OAEG;IACH,kBAAkB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACtC;AAqED;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG;IACzC,KAAK,EAAE,OAAO,UAAU,CAAC;IACzB,OAAO,EAAE,OAAO,SAAS,CAAC,OAAO,CAAC;CA2DnC,CAAC"}

package/dist/components/Image/Image.js

@@ -5,6 +5,7 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 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";
 const IMAGE_DEFAULT_SIZE = 48;
@@ -100,7 +101,7 @@ const getBorderRadiusBySizeInPx = (size, borderRadius)=>{
     return /*#__PURE__*/ _jsx(ImageBase, _object_spread_props(_object_spread({}, restProps), {
         objectFit: objectFit,
         size: size,
-        style: _object_spread({}, borderStyles, style),
+        style: mergeStyle(borderStyles, style),
         className: classNames(className, "vkuiImage__host", borderStartStartRadius && "vkuiImage__borderStartStartRadius", borderStartEndRadius && "vkuiImage__borderStartEndRadius", borderEndStartRadius && "vkuiImage__borderEndStartRadius", borderEndEndRadius && "vkuiImage__borderEndEndRadius")
     }));
 };

package/dist/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","IMAGE_DEFAULT_SIZE","getBorderRadiusBySize","size","borderRadius","getBorderRadiusBySizeInPx","undefined","Image","borderStartStartRadius","borderStartEndRadius","borderEndStartRadius","borderEndEndRadius","style","className","objectFit","restProps","borderStyles","useMemo","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;AAK3E,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;QAAC,EACHJ,OAAOF,kBAAkB,EACzBG,eAAe,GAAG,EAClBI,sBAAsB,EACtBC,oBAAoB,EACpBC,oBAAoB,EACpBC,kBAAkB,EAClBC,KAAK,EACLC,SAAS,EACTC,YAAY,OAAO,EAER,WADRC;QATHZ;QACAC;QACAI;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,eAAenB,MAAMoB,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,KAACJ,mDACKgB;QACJD,WAAWA;QACXX,MAAMA;QACNS,OAAO,mBAAKI,cAAiBJ;QAC7BC,WAAWf,WACTe,8BAEAL,+DACAC,2DACAC,2DACAC;;AAIR,EAAE;AAEFJ,MAAMW,WAAW,GAAG;AAEpBX,MAAMY,KAAK,GAAGnB;AACdO,MAAMY,KAAK,CAACD,WAAW,GAAG;AAE1BX,MAAMa,OAAO,GAAGrB,UAAUqB,OAAO;AACjCb,MAAMa,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","IMAGE_DEFAULT_SIZE","getBorderRadiusBySize","size","borderRadius","getBorderRadiusBySizeInPx","undefined","Image","borderStartStartRadius","borderStartEndRadius","borderEndStartRadius","borderEndEndRadius","style","className","objectFit","restProps","borderStyles","useMemo","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;AAK3E,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;QAAC,EACHJ,OAAOF,kBAAkB,EACzBG,eAAe,GAAG,EAClBI,sBAAsB,EACtBC,oBAAoB,EACpBC,oBAAoB,EACpBC,kBAAkB,EAClBC,KAAK,EACLC,SAAS,EACTC,YAAY,OAAO,EAER,WADRC;QATHZ;QACAC;QACAI;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,eAAwDpB,MAAMqB,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,KAACJ,mDACKgB;QACJD,WAAWA;QACXX,MAAMA;QACNS,OAAOd,WAAWkB,cAAcJ;QAChCC,WAAWhB,WACTgB,8BAEAL,+DACAC,2DACAC,2DACAC;;AAIR,EAAE;AAEFJ,MAAMW,WAAW,GAAG;AAEpBX,MAAMY,KAAK,GAAGnB;AACdO,MAAMY,KAAK,CAACD,WAAW,GAAG;AAE1BX,MAAMa,OAAO,GAAGrB,UAAUqB,OAAO;AACjCb,MAAMa,OAAO,CAACF,WAAW,GAAG"}

package/dist/components/ImageBase/ImageBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageBase.d.ts","sourceRoot":"","sources":["../../../src/components/ImageBase/ImageBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE9F,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAC3F,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACnG,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAE,qBAAqB,EAAE,0BAA0B,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIhG,YAAY,EACV,aAAa,EACb,0BAA0B,EAC1B,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,GACtB,CAAC;AAEF,OAAO,EACL,+BAA+B,EAC/B,kCAAkC,EAClC,iCAAiC,GAClC,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAO5B,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,wBAAwB,EACxB,UAAU,CAAC,cAAc,CAAC,EAC1B,MAAM,CAAC,gBAAgB,CAAC;IAC1B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC3C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;;;OAYG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;IAC9D;;;OAGG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC7C;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA8BD;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,GAAG;IACjD,KAAK,EAAE,OAAO,cAAc,CAAC;IAC7B,OAAO,EAAE,OAAO,gBAAgB,CAAC;CAmIlC,CAAC"}
+{"version":3,"file":"ImageBase.d.ts","sourceRoot":"","sources":["../../../src/components/ImageBase/ImageBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE9F,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAC3F,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACnG,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAE,qBAAqB,EAAE,0BAA0B,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIhG,YAAY,EACV,aAAa,EACb,0BAA0B,EAC1B,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,GACtB,CAAC;AAEF,OAAO,EACL,+BAA+B,EAC/B,kCAAkC,EAClC,iCAAiC,GAClC,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAO5B,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,wBAAwB,EACxB,UAAU,CAAC,cAAc,CAAC,EAC1B,MAAM,CAAC,gBAAgB,CAAC;IAC1B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC3C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;;;OAYG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;IAC9D;;;OAGG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC7C;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA8BD;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,GAAG;IACjD,KAAK,EAAE,OAAO,cAAc,CAAC;IAC7B,OAAO,EAAE,OAAO,gBAAgB,CAAC;CAkIlC,CAAC"}

package/dist/components/ImageBase/ImageBase.js

@@ -46,7 +46,7 @@ const sizeToNumber = (size)=>{
 /**
  * @see https://vkcom.github.io/VKUI/#/ImageBase
  */ export const ImageBase = (_param)=>{
-    var { 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 } = _param, restProps = _object_without_properties(_param, [
+    var { 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 } = _param, restProps = _object_without_properties(_param, [
         "alt",
         "crossOrigin",
         "decoding",
@@ -63,7 +63,6 @@ const sizeToNumber = (size)=>{
         "height",
         "widthSize",
         "heightSize",
-        "style",
         "noBorder",
         "fallbackIcon",
         "children",
@@ -126,10 +125,10 @@ const sizeToNumber = (size)=>{
             size
         },
         children: /*#__PURE__*/ _jsxs(Clickable, _object_spread_props(_object_spread({
-            style: _object_spread({
+            baseStyle: {
                 width,
                 height
-            }, style),
+            },
             baseClassName: classNames("vkuiImageBase__host", loaded && "vkuiImageBase__loaded", withTransparentBackground && "vkuiImageBase__transparentBackground")
         }, restProps), {
             children: [

package/dist/components/ImageBase/ImageBase.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { minOr } from '../../lib/comparing';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type { AnchorHTMLAttributesOnly, HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { Clickable } from '../Clickable/Clickable';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n  ImageBaseSize,\n  ImageBaseExpectedIconProps,\n  ImageBaseBadgeProps,\n  ImageBaseOverlayProps,\n  ImageBaseContextProps,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\n/**\n * Размер по умолчанию.\n */\nconst defaultSize = 24;\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLImageElement> {\n  /**\n   * Задаёт размер картинки.\n   *\n   * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   */\n  size?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Ширина изображения\n   */\n  widthSize?: number | string;\n  /**\n   * Высота изображения\n   */\n  heightSize?: number | string;\n  /**\n   * Отключает обводку.\n   */\n  noBorder?: boolean;\n  /**\n   * Фолбек на случай, если картинка не прогрузилась.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   *\n   * > ⚠️ Может перекрывать `children`.\n   */\n  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n  /**\n   * Отключает фон, заданный по умолчанию. Полезен для отображения картинок с прозрачностью.\n   * @since 5.10.0\n   */\n  withTransparentBackground?: boolean;\n  /**\n   * Пользовательское значения стиля object-fit\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit)\n   */\n  objectFit?: React.CSSProperties['objectFit'];\n  /**\n   * Флаг для сохранения пропорций картинки.\n   * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки\n   */\n  keepAspectRatio?: boolean;\n}\n\nconst getObjectFitClassName = (objectFit: React.CSSProperties['objectFit']) => {\n  switch (objectFit) {\n    case 'contain':\n      return styles.imgObjectFitContain;\n    case 'cover':\n      return styles.imgObjectFitCover;\n    case 'none':\n      return styles.imgObjectFitNone;\n    case 'scale-down':\n      return styles.imgObjectFitScaleDown;\n  }\n  return undefined;\n};\n\nconst parsePx = (value: string): number | undefined => {\n  if (value.endsWith('px')) {\n    return parseInt(value);\n  }\n  return undefined;\n};\n\nconst sizeToNumber = (size: number | string | undefined): number | undefined => {\n  if (typeof size === 'string') {\n    return parsePx(size);\n  }\n  return size;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase: React.FC<ImageBaseProps> & {\n  Badge: typeof ImageBaseBadge;\n  Overlay: typeof ImageBaseOverlay;\n} = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  fetchPriority,\n  getRef,\n  size: sizeProp,\n  width: widthImg,\n  height: heightImg,\n  widthSize,\n  heightSize,\n  style,\n  noBorder = false,\n  fallbackIcon: fallbackIconProp,\n  children,\n  onLoad,\n  onError,\n  withTransparentBackground,\n  objectFit = 'cover',\n  keepAspectRatio = false,\n  ...restProps\n}: ImageBaseProps) => {\n  const size = sizeProp ?? minOr([sizeToNumber(widthSize), sizeToNumber(heightSize)], defaultSize);\n\n  const width = widthSize ?? (keepAspectRatio ? undefined : size);\n  const height = heightSize ?? (keepAspectRatio ? undefined : size);\n\n  const [loaded, setLoaded] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n\n  const hasSrc = src || srcSet;\n  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (fallbackIcon) {\n      validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n    }\n  }\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    if (loaded) {\n      return;\n    }\n\n    setLoaded(true);\n    setFailed(false);\n    onLoad?.(event);\n  };\n\n  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(false);\n    setFailed(true);\n    onError?.(event);\n  };\n\n  const imgRef = useExternRef(getRef);\n  const isOnLoadStatusCheckedRef = React.useRef(false);\n  React.useEffect(\n    function dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater() {\n      if (isOnLoadStatusCheckedRef.current) {\n        return;\n      }\n      isOnLoadStatusCheckedRef.current = true;\n\n      if (imgRef.current && imgRef.current.complete && !loaded) {\n        const event = new Event('load');\n        imgRef.current.dispatchEvent(event);\n      }\n    },\n    [imgRef, loaded],\n  );\n\n  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <Clickable\n        style={{ width, height, ...style }}\n        baseClassName={classNames(\n          styles.host,\n          loaded && styles.loaded,\n          withTransparentBackground && styles.transparentBackground,\n        )}\n        {...restProps}\n      >\n        {hasSrc && (\n          <img\n            ref={imgRef}\n            alt={alt}\n            className={classNames(\n              styles.img,\n              getObjectFitClassName(objectFit),\n              keepAspectRatio && styles.imgKeepRatio,\n            )}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            style={\n              keepAspectRatio\n                ? {\n                    width: widthImg || width,\n                    height: heightImg || height,\n                  }\n                : undefined\n            }\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={widthImg}\n            height={heightImg}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n            {...getFetchPriorityProp(fetchPriority)}\n          />\n        )}\n        {fallbackIcon && <div className={styles.fallback}>{fallbackIcon}</div>}\n        {children && <div className={styles.children}>{children}</div>}\n        {!noBorder && <div aria-hidden className={styles.border} />}\n      </Clickable>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.displayName = 'ImageBase';\n\nImageBase.Badge = ImageBaseBadge;\nImageBase.Badge.displayName = 'ImageBase.Badge';\n\nImageBase.Overlay = ImageBaseOverlay;\nImageBase.Overlay.displayName = 'ImageBase.Overlay';\n"],"names":["React","classNames","useExternRef","minOr","getFetchPriorityProp","Clickable","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","defaultSize","getObjectFitClassName","objectFit","undefined","parsePx","value","endsWith","parseInt","sizeToNumber","size","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","fetchPriority","getRef","sizeProp","width","widthImg","height","heightImg","widthSize","heightSize","style","noBorder","fallbackIcon","fallbackIconProp","children","onLoad","onError","withTransparentBackground","keepAspectRatio","restProps","loaded","setLoaded","useState","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","process","env","NODE_ENV","name","handleImageLoad","event","handleImageError","imgRef","isOnLoadStatusCheckedRef","useRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","Provider","baseClassName","img","ref","className","div","aria-hidden","displayName","Badge","Overlay"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { minOr } from '../../lib/comparing';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type { AnchorHTMLAttributesOnly, HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { Clickable } from '../Clickable/Clickable';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n  ImageBaseSize,\n  ImageBaseExpectedIconProps,\n  ImageBaseBadgeProps,\n  ImageBaseOverlayProps,\n  ImageBaseContextProps,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\n/**\n * Размер по умолчанию.\n */\nconst defaultSize = 24;\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLImageElement> {\n  /**\n   * Задаёт размер картинки.\n   *\n   * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   */\n  size?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Ширина изображения\n   */\n  widthSize?: number | string;\n  /**\n   * Высота изображения\n   */\n  heightSize?: number | string;\n  /**\n   * Отключает обводку.\n   */\n  noBorder?: boolean;\n  /**\n   * Фолбек на случай, если картинка не прогрузилась.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   *\n   * > ⚠️ Может перекрывать `children`.\n   */\n  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n  /**\n   * Отключает фон, заданный по умолчанию. Полезен для отображения картинок с прозрачностью.\n   * @since 5.10.0\n   */\n  withTransparentBackground?: boolean;\n  /**\n   * Пользовательское значения стиля object-fit\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit)\n   */\n  objectFit?: React.CSSProperties['objectFit'];\n  /**\n   * Флаг для сохранения пропорций картинки.\n   * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки\n   */\n  keepAspectRatio?: boolean;\n}\n\nconst getObjectFitClassName = (objectFit: React.CSSProperties['objectFit']) => {\n  switch (objectFit) {\n    case 'contain':\n      return styles.imgObjectFitContain;\n    case 'cover':\n      return styles.imgObjectFitCover;\n    case 'none':\n      return styles.imgObjectFitNone;\n    case 'scale-down':\n      return styles.imgObjectFitScaleDown;\n  }\n  return undefined;\n};\n\nconst parsePx = (value: string): number | undefined => {\n  if (value.endsWith('px')) {\n    return parseInt(value);\n  }\n  return undefined;\n};\n\nconst sizeToNumber = (size: number | string | undefined): number | undefined => {\n  if (typeof size === 'string') {\n    return parsePx(size);\n  }\n  return size;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase: React.FC<ImageBaseProps> & {\n  Badge: typeof ImageBaseBadge;\n  Overlay: typeof ImageBaseOverlay;\n} = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  fetchPriority,\n  getRef,\n  size: sizeProp,\n  width: widthImg,\n  height: heightImg,\n  widthSize,\n  heightSize,\n  noBorder = false,\n  fallbackIcon: fallbackIconProp,\n  children,\n  onLoad,\n  onError,\n  withTransparentBackground,\n  objectFit = 'cover',\n  keepAspectRatio = false,\n  ...restProps\n}: ImageBaseProps) => {\n  const size = sizeProp ?? minOr([sizeToNumber(widthSize), sizeToNumber(heightSize)], defaultSize);\n\n  const width = widthSize ?? (keepAspectRatio ? undefined : size);\n  const height = heightSize ?? (keepAspectRatio ? undefined : size);\n\n  const [loaded, setLoaded] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n\n  const hasSrc = src || srcSet;\n  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (fallbackIcon) {\n      validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n    }\n  }\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    if (loaded) {\n      return;\n    }\n\n    setLoaded(true);\n    setFailed(false);\n    onLoad?.(event);\n  };\n\n  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(false);\n    setFailed(true);\n    onError?.(event);\n  };\n\n  const imgRef = useExternRef(getRef);\n  const isOnLoadStatusCheckedRef = React.useRef(false);\n  React.useEffect(\n    function dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater() {\n      if (isOnLoadStatusCheckedRef.current) {\n        return;\n      }\n      isOnLoadStatusCheckedRef.current = true;\n\n      if (imgRef.current && imgRef.current.complete && !loaded) {\n        const event = new Event('load');\n        imgRef.current.dispatchEvent(event);\n      }\n    },\n    [imgRef, loaded],\n  );\n\n  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <Clickable\n        baseStyle={{ width, height }}\n        baseClassName={classNames(\n          styles.host,\n          loaded && styles.loaded,\n          withTransparentBackground && styles.transparentBackground,\n        )}\n        {...restProps}\n      >\n        {hasSrc && (\n          <img\n            ref={imgRef}\n            alt={alt}\n            className={classNames(\n              styles.img,\n              getObjectFitClassName(objectFit),\n              keepAspectRatio && styles.imgKeepRatio,\n            )}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            style={\n              keepAspectRatio\n                ? {\n                    width: widthImg || width,\n                    height: heightImg || height,\n                  }\n                : undefined\n            }\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={widthImg}\n            height={heightImg}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n            {...getFetchPriorityProp(fetchPriority)}\n          />\n        )}\n        {fallbackIcon && <div className={styles.fallback}>{fallbackIcon}</div>}\n        {children && <div className={styles.children}>{children}</div>}\n        {!noBorder && <div aria-hidden className={styles.border} />}\n      </Clickable>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.displayName = 'ImageBase';\n\nImageBase.Badge = ImageBaseBadge;\nImageBase.Badge.displayName = 'ImageBase.Badge';\n\nImageBase.Overlay = ImageBaseOverlay;\nImageBase.Overlay.displayName = 'ImageBase.Overlay';\n"],"names":["React","classNames","useExternRef","minOr","getFetchPriorityProp","Clickable","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","defaultSize","getObjectFitClassName","objectFit","undefined","parsePx","value","endsWith","parseInt","sizeToNumber","size","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","fetchPriority","getRef","sizeProp","width","widthImg","height","heightImg","widthSize","heightSize","noBorder","fallbackIcon","fallbackIconProp","children","onLoad","onError","withTransparentBackground","keepAspectRatio","restProps","loaded","setLoaded","useState","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","process","env","NODE_ENV","name","handleImageLoad","event","handleImageError","imgRef","isOnLoadStatusCheckedRef","useRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","Provider","baseStyle","baseClassName","img","ref","className","style","div","aria-hidden","displayName","Badge","Overlay"],"mappings":"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"}

package/dist/components/Link/Link.d.ts

@@ -21,5 +21,5 @@ export interface LinkProps extends TappableProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/Link
  */
-export declare const Link: ({ before: beforeProp, after: afterProp, noUnderline, hasVisited, children, className, ...restProps }: LinkProps) => React.ReactNode;
+export declare const Link: ({ before: beforeProp, after: afterProp, noUnderline, hasVisited, children, ...restProps }: LinkProps) => React.ReactNode;
 //# sourceMappingURL=Link.d.ts.map

package/dist/components/Link/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAGpE,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,yGAQd,SAAS,KAAG,KAAK,CAAC,SAwBpB,CAAC"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAGpE,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,8FAOd,SAAS,KAAG,KAAK,CAAC,SAuBpB,CAAC"}

package/dist/components/Link/Link.js

@@ -7,13 +7,12 @@ import { Tappable } from "../Tappable/Tappable.js";
 /**
  * @see https://vkcom.github.io/VKUI/#/Link
  */ export const Link = (_param)=>{
-    var { before: beforeProp, after: afterProp, noUnderline, hasVisited, children, className } = _param, restProps = _object_without_properties(_param, [
+    var { before: beforeProp, after: afterProp, noUnderline, hasVisited, children } = _param, restProps = _object_without_properties(_param, [
         "before",
         "after",
         "noUnderline",
         "hasVisited",
-        "children",
-        "className"
+        "children"
     ]);
     const before = beforeProp ? /*#__PURE__*/ _jsx("span", {
         className: "vkuiLink__before",
@@ -26,7 +25,7 @@ import { Tappable } from "../Tappable/Tappable.js";
     return /*#__PURE__*/ _jsxs(Tappable, _object_spread_props(_object_spread({
         Component: restProps.href ? 'a' : 'button'
     }, restProps), {
-        className: classNames("vkuiLink__host", hasVisited && "vkuiLink__hasVisited", noUnderline ? undefined : "vkuiLink__withUnderline", className),
+        baseClassName: classNames("vkuiLink__host", hasVisited && "vkuiLink__hasVisited", noUnderline ? undefined : "vkuiLink__withUnderline"),
         hasHover: false,
         activeMode: "opacity",
         hoverMode: "none",

package/dist/components/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport styles from './Link.module.css';\n\nexport interface LinkProps extends TappableProps {\n  /**\n   * Иконка слева.\n   */\n  before?: ReactElement;\n  /**\n   * Иконка справа.\n   */\n  after?: ReactElement;\n  /**\n   * Выключает появления нижнего подчеркивания при наведении.\n   */\n  noUnderline?: boolean;\n  /**\n   * Включает состояние `visited`, которое позволяет пользователю понять посещал ли он ссылку или нет.\n   */\n  hasVisited?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Link\n */\nexport const Link = ({\n  before: beforeProp,\n  after: afterProp,\n  noUnderline,\n  hasVisited,\n  children,\n  className,\n  ...restProps\n}: LinkProps): React.ReactNode => {\n  const before = beforeProp ? <span className={styles.before}>{beforeProp}</span> : null;\n  const after = afterProp ? <span className={styles.after}>{afterProp}</span> : null;\n\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      className={classNames(\n        styles.host,\n        hasVisited && styles.hasVisited,\n        noUnderline ? undefined : styles.withUnderline,\n        className,\n      )}\n      hasHover={false}\n      activeMode=\"opacity\"\n      hoverMode=\"none\"\n      focusVisibleMode=\"outside\"\n    >\n      {before}\n      {children}\n      {after}\n    </Tappable>\n  );\n};\n"],"names":["classNames","Tappable","Link","before","beforeProp","after","afterProp","noUnderline","hasVisited","children","className","restProps","span","Component","href","undefined","hasHover","activeMode","hoverMode","focusVisibleMode"],"mappings":";;;;AACA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAA4B,0BAAuB;AAsBpE;;CAEC,GACD,OAAO,MAAMC,OAAO;QAAC,EACnBC,QAAQC,UAAU,EAClBC,OAAOC,SAAS,EAChBC,WAAW,EACXC,UAAU,EACVC,QAAQ,EACRC,SAAS,EAEC,WADPC;QANHR;QACAE;QACAE;QACAC;QACAC;QACAC;;IAGA,MAAMP,SAASC,2BAAa,KAACQ;QAAKF,SAAS;kBAAkBN;SAAqB;IAClF,MAAMC,QAAQC,0BAAY,KAACM;QAAKF,SAAS;kBAAiBJ;SAAoB;IAE9E,qBACE,MAACL;QACCY,WAAWF,UAAUG,IAAI,GAAG,MAAM;OAC9BH;QACJD,WAAWV,6BAETQ,sCACAD,cAAcQ,uCACdL;QAEFM,UAAU;QACVC,YAAW;QACXC,WAAU;QACVC,kBAAiB;;YAEhBhB;YACAM;YACAJ;;;AAGP,EAAE"}
+{"version":3,"sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport styles from './Link.module.css';\n\nexport interface LinkProps extends TappableProps {\n  /**\n   * Иконка слева.\n   */\n  before?: ReactElement;\n  /**\n   * Иконка справа.\n   */\n  after?: ReactElement;\n  /**\n   * Выключает появления нижнего подчеркивания при наведении.\n   */\n  noUnderline?: boolean;\n  /**\n   * Включает состояние `visited`, которое позволяет пользователю понять посещал ли он ссылку или нет.\n   */\n  hasVisited?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Link\n */\nexport const Link = ({\n  before: beforeProp,\n  after: afterProp,\n  noUnderline,\n  hasVisited,\n  children,\n  ...restProps\n}: LinkProps): React.ReactNode => {\n  const before = beforeProp ? <span className={styles.before}>{beforeProp}</span> : null;\n  const after = afterProp ? <span className={styles.after}>{afterProp}</span> : null;\n\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        hasVisited && styles.hasVisited,\n        noUnderline ? undefined : styles.withUnderline,\n      )}\n      hasHover={false}\n      activeMode=\"opacity\"\n      hoverMode=\"none\"\n      focusVisibleMode=\"outside\"\n    >\n      {before}\n      {children}\n      {after}\n    </Tappable>\n  );\n};\n"],"names":["classNames","Tappable","Link","before","beforeProp","after","afterProp","noUnderline","hasVisited","children","restProps","span","className","Component","href","baseClassName","undefined","hasHover","activeMode","hoverMode","focusVisibleMode"],"mappings":";;;;AACA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAA4B,0BAAuB;AAsBpE;;CAEC,GACD,OAAO,MAAMC,OAAO;QAAC,EACnBC,QAAQC,UAAU,EAClBC,OAAOC,SAAS,EAChBC,WAAW,EACXC,UAAU,EACVC,QAAQ,EAEE,WADPC;QALHP;QACAE;QACAE;QACAC;QACAC;;IAGA,MAAMN,SAASC,2BAAa,KAACO;QAAKC,SAAS;kBAAkBR;SAAqB;IAClF,MAAMC,QAAQC,0BAAY,KAACK;QAAKC,SAAS;kBAAiBN;SAAoB;IAE9E,qBACE,MAACL;QACCY,WAAWH,UAAUI,IAAI,GAAG,MAAM;OAC9BJ;QACJK,eAAef,6BAEbQ,sCACAD,cAAcS;QAEhBC,UAAU;QACVC,YAAW;QACXC,WAAU;QACVC,kBAAiB;;YAEhBjB;YACAM;YACAJ;;;AAGP,EAAE"}

package/dist/components/List/List.d.ts

@@ -9,5 +9,5 @@ export type ListProps = HTMLAttributesWithRootRef<HTMLDivElement> & {
 /**
  * @see https://vkcom.github.io/VKUI/#/List
  */
-export declare const List: ({ children, gap, className, style, ...restProps }: ListProps) => React.ReactNode;
+export declare const List: ({ children, gap, ...restProps }: ListProps) => React.ReactNode;
 //# sourceMappingURL=List.d.ts.map

package/dist/components/List/List.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/components/List/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7D,MAAM,MAAM,SAAS,GAAG,yBAAyB,CAAC,cAAc,CAAC,GAAG;IAClE;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,IAAI,sDAMd,SAAS,KAAG,KAAK,CAAC,SAmBpB,CAAC"}
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/components/List/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7D,MAAM,MAAM,SAAS,GAAG,yBAAyB,CAAC,cAAc,CAAC,GAAG;IAClE;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,IAAI,oCAAyC,SAAS,KAAG,KAAK,CAAC,SAkB3E,CAAC"}

package/dist/components/List/List.js

@@ -3,24 +3,21 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { classNames } from "@vkontakte/vkjs";
 import { DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP } from "../../hooks/useDraggableWithDomApi/index.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 /**
  * @see https://vkcom.github.io/VKUI/#/List
  */ export const List = (_param)=>{
-    var { children, gap = 0, className, style } = _param, restProps = _object_without_properties(_param, [
+    var { children, gap = 0 } = _param, restProps = _object_without_properties(_param, [
         "children",
-        "gap",
-        "className",
-        "style"
+        "gap"
     ]);
     return /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({
         role: "list",
-        className: classNames("vkuiList__host", className),
-        style: _object_spread({
+        baseClassName: "vkuiList__host",
+        baseStyle: {
             gridGap: gap
-        }, style)
+        }
     }, restProps), {
         children: [
             children,

package/dist/components/List/List.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/List/List.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP } from '../../hooks/useDraggableWithDomApi';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './List.module.css';\n\nexport type ListProps = HTMLAttributesWithRootRef<HTMLDivElement> & {\n  /**\n   * Задает отступ между элементами\n   */\n  gap?: number;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/List\n */\nexport const List = ({\n  children,\n  gap = 0,\n  className,\n  style,\n  ...restProps\n}: ListProps): React.ReactNode => {\n  return (\n    <RootComponent\n      role=\"list\"\n      className={classNames(styles.host, className)}\n      style={{\n        gridGap: gap,\n        ...style,\n      }}\n      {...restProps}\n    >\n      {children}\n      <div\n        aria-hidden\n        {...DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP}\n        className={styles.placeholder}\n      ></div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP","RootComponent","List","children","gap","className","style","restProps","role","gridGap","div","aria-hidden"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,qCAAqC,QAAQ,8CAAqC;AAE3F,SAASC,aAAa,QAAQ,oCAAiC;AAU/D;;CAEC,GACD,OAAO,MAAMC,OAAO;QAAC,EACnBC,QAAQ,EACRC,MAAM,CAAC,EACPC,SAAS,EACTC,KAAK,EAEK,WADPC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,qBACE,MAACL;QACCO,MAAK;QACLH,WAAWN,6BAAwBM;QACnCC,OAAO;YACLG,SAASL;WACNE;OAEDC;;YAEHJ;0BACD,KAACO;gBACCC,aAAW;eACPX;gBACJK,SAAS;;;;AAIjB,EAAE"}
+{"version":3,"sources":["../../../src/components/List/List.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP } from '../../hooks/useDraggableWithDomApi';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './List.module.css';\n\nexport type ListProps = HTMLAttributesWithRootRef<HTMLDivElement> & {\n  /**\n   * Задает отступ между элементами\n   */\n  gap?: number;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/List\n */\nexport const List = ({ children, gap = 0, ...restProps }: ListProps): React.ReactNode => {\n  return (\n    <RootComponent\n      role=\"list\"\n      baseClassName={styles.host}\n      baseStyle={{\n        gridGap: gap,\n      }}\n      {...restProps}\n    >\n      {children}\n      <div\n        aria-hidden\n        {...DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP}\n        className={styles.placeholder}\n      ></div>\n    </RootComponent>\n  );\n};\n"],"names":["React","DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP","RootComponent","List","children","gap","restProps","role","baseClassName","baseStyle","gridGap","div","aria-hidden","className"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qCAAqC,QAAQ,8CAAqC;AAE3F,SAASC,aAAa,QAAQ,oCAAiC;AAU/D;;CAEC,GACD,OAAO,MAAMC,OAAO;QAAC,EAAEC,QAAQ,EAAEC,MAAM,CAAC,EAA2B,WAAtBC;QAAtBF;QAAUC;;IAC/B,qBACE,MAACH;QACCK,MAAK;QACLC,aAAa;QACbC,WAAW;YACTC,SAASL;QACX;OACIC;;YAEHF;0BACD,KAACO;gBACCC,aAAW;eACPX;gBACJY,SAAS;;;;AAIjB,EAAE"}

package/dist/components/MiniInfoCell/MiniInfoCell.d.ts

@@ -36,5 +36,5 @@ export interface MiniInfoCellProps extends HTMLAttributesWithRootRef<HTMLDivElem
 /**
  * @see https://vkcom.github.io/VKUI/#/MiniInfoCell
  */
-export declare const MiniInfoCell: ({ before, after, children, mode, textWrap, chevron, className, ...restProps }: MiniInfoCellProps) => React.ReactNode;
+export declare const MiniInfoCell: ({ before, after, children, mode, textWrap, chevron, ...restProps }: MiniInfoCellProps) => React.ReactNode;
 //# sourceMappingURL=MiniInfoCell.d.ts.map

package/dist/components/MiniInfoCell/MiniInfoCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MiniInfoCell.d.ts","sourceRoot":"","sources":["../../../src/components/MiniInfoCell/MiniInfoCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAkB7D,MAAM,WAAW,iBAAkB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAClF;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;IAE1C;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAEvC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,kFAStB,iBAAiB,KAAG,KAAK,CAAC,SA8B5B,CAAC"}
+{"version":3,"file":"MiniInfoCell.d.ts","sourceRoot":"","sources":["../../../src/components/MiniInfoCell/MiniInfoCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAkB7D,MAAM,WAAW,iBAAkB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAClF;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;IAE1C;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAEvC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,uEAQtB,iBAAiB,KAAG,KAAK,CAAC,SA6B5B,CAAC"}