@vkontakte/vkui 4.37.0 → 5.0.0

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

@@ -0,0 +1,145 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["alt", "crossOrigin", "decoding", "loading", "referrerPolicy", "sizes", "src", "srcSet", "useMap", "getRef", "size", "width", "height", "style", "className", "getRootRef", "badge", "overlay", "FallbackIcon", "children", "aria-label", "onClick"];
+import { createScopedElement } from "../../lib/jsxRuntime";
+import * as React from "react";
+import { classNamesString } from "../../lib/classNames";
+import { ImageBaseBadge } from "./ImageBaseBadge/ImageBaseBadge";
+import { ImageBaseOverlay } from "./ImageBaseOverlay/ImageBaseOverlay";
+
+require("./ImageBase.module.css");
+
+var styles = {
+  "ImageBase": "vkuiImageBase",
+  "ImageBase__img": "vkuiImageBase__img",
+  "ImageBase--loaded": "vkuiImageBase--loaded",
+  "ImageBase__badge": "vkuiImageBase__badge",
+  "ImageBase__badge--shift": "vkuiImageBase__badge--shift",
+  "CellButton": "vkuiCellButton",
+  "Icon": "vkuiIcon",
+  "CellButton--mode-danger": "vkuiCellButton--mode-danger",
+  "PanelHeader__before": "vkuiPanelHeader__before",
+  "PanelHeader__after": "vkuiPanelHeader__after",
+  "SimpleCell": "vkuiSimpleCell",
+  "ImageBase--size-28": "vkuiImageBase--size-28",
+  "ImageBase--size-32": "vkuiImageBase--size-32",
+  "ImageBase--size-40": "vkuiImageBase--size-40",
+  "ImageBase--size-48": "vkuiImageBase--size-48",
+  "ImageBase--size-72": "vkuiImageBase--size-72",
+  "SimpleCell--ios": "vkuiSimpleCell--ios",
+  "SimpleCell--sizeY-compact": "vkuiSimpleCell--sizeY-compact",
+  "SimpleCell--sizeY-none": "vkuiSimpleCell--sizeY-none"
+};
+
+function getRelativeSizeOfFallbackIcon(imageSize) {
+  if (imageSize <= 20) {
+    return 12;
+  } else if (imageSize <= 28) {
+    return 16;
+  } else if (imageSize <= 32) {
+    return 20;
+  } else if (imageSize <= 44) {
+    return 24;
+  } else if (imageSize <= 64) {
+    return 28;
+  }
+
+  return 36;
+}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/ImageBase
+ */
+export var ImageBase = function ImageBase(_ref) {
+  var alt = _ref.alt,
+      crossOrigin = _ref.crossOrigin,
+      decoding = _ref.decoding,
+      loading = _ref.loading,
+      referrerPolicy = _ref.referrerPolicy,
+      sizes = _ref.sizes,
+      src = _ref.src,
+      srcSet = _ref.srcSet,
+      useMap = _ref.useMap,
+      getRef = _ref.getRef,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      width = _ref.width,
+      height = _ref.height,
+      style = _ref.style,
+      className = _ref.className,
+      getRootRef = _ref.getRootRef,
+      badgeProp = _ref.badge,
+      overlayProp = _ref.overlay,
+      FallbackIcon = _ref.FallbackIcon,
+      children = _ref.children,
+      ariaLabel = _ref["aria-label"],
+      onClick = _ref.onClick,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      loaded = _React$useState2[0],
+      setLoaded = _React$useState2[1];
+
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      failed = _React$useState4[0],
+      setFailed = _React$useState4[1];
+
+  var hasSrc = src || srcSet;
+  var needShowFallbackIcon = (failed || !hasSrc) && !children && FallbackIcon;
+  var fallbackIconSize = needShowFallbackIcon ? getRelativeSizeOfFallbackIcon(size) : undefined;
+  var fallbackIcon = needShowFallbackIcon ? createScopedElement(FallbackIcon, {
+    width: fallbackIconSize,
+    height: fallbackIconSize,
+    "aria-hidden": true
+  }) : null;
+  var badgeComponent = size >= 24 && badgeProp ? createScopedElement(ImageBaseBadge, _extends({}, badgeProp, {
+    imageSize: size
+  })) : null;
+  var overlayComponent = overlayProp ? createScopedElement(ImageBaseOverlay, _extends({}, typeof overlayProp === "boolean" ? undefined : overlayProp, {
+    imageSize: size,
+    onClick: onClick
+  })) : null;
+
+  var handleImageLoad = function handleImageLoad() {
+    setLoaded(true);
+    setFailed(false);
+  };
+
+  var handleImageError = function handleImageError() {
+    setLoaded(false);
+    setFailed(true);
+  };
+
+  return createScopedElement("div", _extends({}, restProps, {
+    ref: getRootRef,
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      width: size,
+      height: size
+    }),
+    className: classNamesString(className, styles["ImageBase"], styles["ImageBase--size-".concat(size)], loaded && styles["ImageBase--loaded"]),
+    role: hasSrc ? "img" : "presentation",
+    "aria-label": ariaLabel,
+    onClick: overlayComponent ? undefined : onClick
+  }), hasSrc && createScopedElement("img", {
+    ref: getRef,
+    alt: alt,
+    className: styles["ImageBase__img"],
+    crossOrigin: crossOrigin,
+    decoding: decoding,
+    loading: loading,
+    referrerPolicy: referrerPolicy,
+    sizes: sizes,
+    src: src,
+    srcSet: srcSet,
+    useMap: useMap,
+    width: width,
+    height: height,
+    onLoad: handleImageLoad,
+    onError: handleImageError
+  }), children, fallbackIcon, overlayComponent, badgeComponent);
+};
+//# sourceMappingURL=ImageBase.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageBase.js","names":["React","classNamesString","ImageBaseBadge","ImageBaseOverlay","getRelativeSizeOfFallbackIcon","imageSize","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","getRef","size","width","height","style","className","getRootRef","badgeProp","badge","overlayProp","overlay","FallbackIcon","children","ariaLabel","onClick","restProps","useState","loaded","setLoaded","failed","setFailed","hasSrc","needShowFallbackIcon","fallbackIconSize","undefined","fallbackIcon","badgeComponent","overlayComponent","handleImageLoad","handleImageError","styles"],"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport type { HasRef, HasRootRef } from \"../../types\";\nimport type { ImageBaseExpectedIconProps, ImageBaseSize } from \"./types\";\nimport {\n  type ImageBaseBadgeProps as ImageBaseBadgeInternalProps,\n  ImageBaseBadge,\n} from \"./ImageBaseBadge/ImageBaseBadge\";\nimport {\n  type ImageBaseOverlayProps as ImageBaseOverlayInternalProps,\n  ImageBaseOverlay,\n} from \"./ImageBaseOverlay/ImageBaseOverlay\";\nimport styles from \"./ImageBase.module.css\";\n\nfunction getRelativeSizeOfFallbackIcon(imageSize: number): number {\n  if (imageSize <= 20) {\n    return 12;\n  } else if (imageSize <= 28) {\n    return 16;\n  } else if (imageSize <= 32) {\n    return 20;\n  } else if (imageSize <= 44) {\n    return 24;\n  } else if (imageSize <= 64) {\n    return 28;\n  }\n  return 36;\n}\n\nexport type { ImageBaseSize, ImageBaseExpectedIconProps };\n\nexport type ImageBaseBadgeProps = Pick<\n  ImageBaseBadgeInternalProps,\n  \"background\" | \"Icon\"\n>;\n\nexport type ImageBaseOverlayProps = Pick<\n  ImageBaseOverlayInternalProps,\n  \"theme\" | \"visibility\" | \"Icon\"\n>;\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLImageElement> {\n  /**\n   * Задаёт размер картинки.\n   *\n   * > ⚠️ Избегайте передачи кастомного размера. Используйте размеры заданные дизайн-системой.\n   */\n  size?: ImageBaseSize | number;\n  /**\n   * > Не показывается при `size < 24`\n   *\n   * Бейдж в правом нижнем углу компонента.\n   *\n   * > Note: включаем `className`, чтобы можно было влиять на расположение и другие параметры бейджа.\n   */\n  badge?: ImageBaseBadgeProps & { className?: string };\n  /**\n   * Интерактивный оверлей над картинкой.\n   *\n   * Если передать `true`, то будет применён оверлей с параметрами по умолчанию. Значение для `theme` будет браться из\n   * параметра `appearance` в `ConfigProvider`.\n   */\n  overlay?: boolean | ImageBaseOverlayProps;\n  /**\n   * Фолбек на случай, если картинка не прогрузилась. Принимает конструктор иконки.\n   *\n   * > Если передан `children`, то фолбек будет проигнорирован.\n   */\n  FallbackIcon?: React.ComponentType<ImageBaseExpectedIconProps> | null;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  getRef,\n  size = 24,\n  width,\n  height,\n  style,\n  className,\n  getRootRef,\n  badge: badgeProp,\n  overlay: overlayProp,\n  FallbackIcon,\n  children,\n  \"aria-label\": ariaLabel,\n  onClick,\n  ...restProps\n}: ImageBaseProps) => {\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) && !children && FallbackIcon;\n\n  const fallbackIconSize = needShowFallbackIcon\n    ? getRelativeSizeOfFallbackIcon(size)\n    : undefined;\n  const fallbackIcon = needShowFallbackIcon ? (\n    <FallbackIcon\n      width={fallbackIconSize}\n      height={fallbackIconSize}\n      aria-hidden={true}\n    />\n  ) : null;\n\n  const badgeComponent =\n    size >= 24 && badgeProp ? (\n      <ImageBaseBadge {...badgeProp} imageSize={size} />\n    ) : null;\n\n  const overlayComponent = overlayProp ? (\n    <ImageBaseOverlay\n      {...(typeof overlayProp === \"boolean\" ? undefined : overlayProp)}\n      imageSize={size}\n      onClick={onClick}\n    />\n  ) : null;\n\n  const handleImageLoad = () => {\n    setLoaded(true);\n    setFailed(false);\n  };\n\n  const handleImageError = () => {\n    setLoaded(false);\n    setFailed(true);\n  };\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      style={{ ...style, width: size, height: size }}\n      className={classNamesString(\n        className,\n        styles[\"ImageBase\"],\n        styles[`ImageBase--size-${size}`],\n        loaded && styles[\"ImageBase--loaded\"]\n      )}\n      role={hasSrc ? \"img\" : \"presentation\"}\n      aria-label={ariaLabel}\n      onClick={overlayComponent ? undefined : onClick}\n    >\n      {hasSrc && (\n        <img\n          ref={getRef}\n          alt={alt}\n          className={styles[\"ImageBase__img\"]}\n          crossOrigin={crossOrigin}\n          decoding={decoding}\n          loading={loading}\n          referrerPolicy={referrerPolicy}\n          sizes={sizes}\n          src={src}\n          srcSet={srcSet}\n          useMap={useMap}\n          width={width}\n          height={height}\n          onLoad={handleImageLoad}\n          onError={handleImageError}\n        />\n      )}\n      {children}\n      {fallbackIcon}\n      {overlayComponent}\n      {badgeComponent}\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1 @@
+.vkuiImageBase{align-items:center;background-color:var(--vkui--color_background_secondary);background-size:cover;box-shadow:inset 0 0 0 1px var(--vkui--color_image_border_alpha);box-shadow:inset 0 0 0 var(--thin-border) var(--vkui--color_image_border_alpha);box-sizing:border-box;color:var(--vkui--color_icon_secondary);display:flex;flex-shrink:0;justify-content:center;position:relative}.vkuiImageBase__img{border:none;border-radius:inherit;display:block;height:100%;left:0;object-fit:cover;position:absolute;top:0;visibility:hidden;width:100%}.vkuiImageBase--loaded .vkuiImageBase__img{visibility:visible}.vkuiImageBase__badge{bottom:0;right:0}.vkuiImageBase__badge--shift{bottom:-2px;right:-2px}.vkuiCellButton>.vkuiImageBase .vkuiIcon{color:var(--vkui--color_icon_accent)}.vkuiCellButton--mode-danger>.vkuiImageBase .vkuiIcon{color:var(--vkui--color_icon_negative)}.vkuiPanelHeader__before .vkuiImageBase{margin-left:8px}.vkuiPanelHeader__after .vkuiImageBase{margin-right:8px}.vkuiSimpleCell>.vkuiImageBase{margin-right:12px}.vkuiSimpleCell>.vkuiImageBase--size-28,.vkuiSimpleCell>.vkuiImageBase--size-32{margin-bottom:10px;margin-top:10px}.vkuiSimpleCell>.vkuiImageBase--size-40{margin-bottom:4px;margin-top:4px}.vkuiSimpleCell>.vkuiImageBase--size-48,.vkuiSimpleCell>.vkuiImageBase--size-72{margin-bottom:6px;margin-top:6px}.vkuiSimpleCell--ios>.vkuiImageBase--size-28,.vkuiSimpleCell--ios>.vkuiImageBase--size-32{margin-left:4px}.vkuiSimpleCell--sizeY-compact>.vkuiImageBase--size-28,.vkuiSimpleCell--sizeY-compact>.vkuiImageBase--size-32{margin-bottom:8px;margin-top:8px}.vkuiSimpleCell--sizeY-compact>.vkuiImageBase--size-40{margin-bottom:2px;margin-top:2px}.vkuiSimpleCell--sizeY-compact>.vkuiImageBase--size-48{margin-bottom:4px;margin-top:4px}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiSimpleCell--sizeY-none>.vkuiImageBase--size-28,.vkuiSimpleCell--sizeY-none>.vkuiImageBase--size-32{margin-bottom:8px;margin-top:8px}.vkuiSimpleCell--sizeY-none>.vkuiImageBase--size-40{margin-bottom:2px;margin-top:2px}.vkuiSimpleCell--sizeY-none>.vkuiImageBase--size-48{margin-bottom:4px;margin-top:4px}}

package/dist/cssm/components/ImageBase/ImageBaseBadge/ImageBaseBadge.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import type { ImageBaseSize, ImageBaseExpectedIconProps } from "../types";
+export interface ImageBaseBadgeProps {
+    /**
+     * Размер картинки, над которой будет располагаться оверлей.
+     */
+    imageSize: ImageBaseSize | number;
+    /**
+     * Вид подложки под иконку.
+     *
+     * - `"stroke"` – имитирует вырез (⚠️ если фон под компонентом динамический, то будет бага).
+     * - `"shadow"` – добавляет небольшую тень.
+     *
+     * @default "shadow"
+     */
+    background?: "stroke" | "shadow";
+    /**
+     * Иконка.
+     *
+     * @default `Icon28AddOutline`
+     */
+    Icon: React.ComponentType<ImageBaseExpectedIconProps>;
+    className?: string;
+}
+export declare const ImageBaseBadge: ({ imageSize, background, className, Icon, }: ImageBaseBadgeProps) => JSX.Element;

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

@@ -0,0 +1,39 @@
+import { createScopedElement } from "../../../lib/jsxRuntime";
+import { classNamesString } from "../../../lib/classNames";
+
+require("./ImageBaseBadge.module.css");
+
+var styles = {
+  "ImageBaseBadge": "vkuiImageBaseBadge",
+  "ImageBaseBadge--background-stroke": "vkuiImageBaseBadge--background-stroke",
+  "ImageBaseBadge--background-shadow": "vkuiImageBaseBadge--background-shadow"
+};
+
+function getRelativeSizeOfIcon(imageSize) {
+  if (imageSize <= 36) {
+    return 12;
+  } else if (imageSize <= 48) {
+    return 16;
+  } else if (imageSize <= 64) {
+    return 20;
+  }
+
+  return 24;
+}
+
+export var ImageBaseBadge = function ImageBaseBadge(_ref) {
+  var imageSize = _ref.imageSize,
+      _ref$background = _ref.background,
+      background = _ref$background === void 0 ? "shadow" : _ref$background,
+      className = _ref.className,
+      Icon = _ref.Icon;
+  var iconSize = getRelativeSizeOfIcon(imageSize);
+  return createScopedElement("div", {
+    className: classNamesString(styles["ImageBaseBadge"], styles["ImageBaseBadge--background-".concat(background)], className)
+  }, createScopedElement(Icon, {
+    width: iconSize,
+    height: iconSize,
+    "aria-hidden": true
+  }));
+};
+//# sourceMappingURL=ImageBaseBadge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageBaseBadge.js","names":["classNamesString","getRelativeSizeOfIcon","imageSize","ImageBaseBadge","background","className","Icon","iconSize","styles"],"sources":["../../../../../src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../../lib/classNames\";\nimport type { ImageBaseSize, ImageBaseExpectedIconProps } from \"../types\";\nimport styles from \"./ImageBaseBadge.module.css\";\n\nfunction getRelativeSizeOfIcon(imageSize: number): number {\n  if (imageSize <= 36) {\n    return 12;\n  } else if (imageSize <= 48) {\n    return 16;\n  } else if (imageSize <= 64) {\n    return 20;\n  }\n  return 24;\n}\n\nexport interface ImageBaseBadgeProps {\n  /**\n   * Размер картинки, над которой будет располагаться оверлей.\n   */\n  imageSize: ImageBaseSize | number;\n  /**\n   * Вид подложки под иконку.\n   *\n   * - `\"stroke\"` – имитирует вырез (⚠️ если фон под компонентом динамический, то будет бага).\n   * - `\"shadow\"` – добавляет небольшую тень.\n   *\n   * @default \"shadow\"\n   */\n  background?: \"stroke\" | \"shadow\";\n  /**\n   * Иконка.\n   *\n   * @default `Icon28AddOutline`\n   */\n  Icon: React.ComponentType<ImageBaseExpectedIconProps>;\n  className?: string;\n}\n\nexport const ImageBaseBadge = ({\n  imageSize,\n  background = \"shadow\",\n  className,\n  Icon,\n}: ImageBaseBadgeProps) => {\n  const iconSize = getRelativeSizeOfIcon(imageSize);\n\n  return (\n    <div\n      className={classNamesString(\n        styles[\"ImageBaseBadge\"],\n        styles[`ImageBaseBadge--background-${background}`],\n        className\n      )}\n    >\n      <Icon width={iconSize} height={iconSize} aria-hidden={true} />\n    </div>\n  );\n};\n"],"mappings":";AACA,SAASA,gBAAT;;;;;;;;;;AAIA,SAASC,qBAAT,CAA+BC,SAA/B,EAA0D;EACxD,IAAIA,SAAS,IAAI,EAAjB,EAAqB;IACnB,OAAO,EAAP;EACD,CAFD,MAEO,IAAIA,SAAS,IAAI,EAAjB,EAAqB;IAC1B,OAAO,EAAP;EACD,CAFM,MAEA,IAAIA,SAAS,IAAI,EAAjB,EAAqB;IAC1B,OAAO,EAAP;EACD;;EACD,OAAO,EAAP;AACD;;AAyBD,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,OAKH;EAAA,IAJzBD,SAIyB,QAJzBA,SAIyB;EAAA,2BAHzBE,UAGyB;EAAA,IAHzBA,UAGyB,gCAHZ,QAGY;EAAA,IAFzBC,SAEyB,QAFzBA,SAEyB;EAAA,IADzBC,IACyB,QADzBA,IACyB;EACzB,IAAMC,QAAQ,GAAGN,qBAAqB,CAACC,SAAD,CAAtC;EAEA,OACE;IACE,SAAS,EAAEF,gBAAgB,CACzBQ,MAAM,CAAC,gBAAD,CADmB,EAEzBA,MAAM,sCAA+BJ,UAA/B,EAFmB,EAGzBC,SAHyB;EAD7B,GAOE,oBAAC,IAAD;IAAM,KAAK,EAAEE,QAAb;IAAuB,MAAM,EAAEA,QAA/B;IAAyC,eAAa;EAAtD,EAPF,CADF;AAWD,CAnBM"}

package/dist/cssm/components/ImageBase/ImageBaseBadge/ImageBaseBadge.module.css

@@ -0,0 +1 @@
+.vkuiImageBaseBadge{border-radius:50%;bottom:0;padding:2px;position:absolute;right:0;transform:translate(2px,2px)}.vkuiImageBaseBadge--background-stroke{background-color:var(--vkui--color_background_content)}.vkuiImageBaseBadge--background-shadow:before{border-radius:inherit;bottom:2px;box-shadow:var(--vkui--elevation1);content:"";left:2px;margin:auto;position:absolute;right:2px;top:2px}

package/dist/cssm/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+import type { ImageBaseSize, ImageBaseExpectedIconProps } from "../types";
+export interface ImageBaseOverlayProps {
+    /**
+     * Размер картинки, над которой будет располагаться оверлей.
+     */
+    imageSize: ImageBaseSize | number;
+    /**
+     * Задаёт тему оформления.
+     *
+     * > По умолчанию берётся из параметра `appearance` в `ConfigProvider`.
+     */
+    theme?: "dark" | "light";
+    /**
+     * Определяет каким образом должен показываться оверлей.
+     *
+     * - `"on-hover"` – на наведение указателя мыши.
+     * - `"always"` – всегда показывать.
+     *
+     * > По умолчанию определяется в зависимости от того, есть ли у пользователя мышь или нет.
+     */
+    visibility?: "on-hover" | "always";
+    /**
+     * Иконка по середине оверлей.
+     *
+     * @default `Icon28AddOutline`
+     */
+    Icon?: React.ComponentType<ImageBaseExpectedIconProps>;
+    className?: string;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+}
+export declare const ImageBaseOverlay: ({ imageSize, className, theme: themeProp, visibility: visibilityProp, Icon, onClick, }: ImageBaseOverlayProps) => JSX.Element;

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

@@ -0,0 +1,67 @@
+import { createScopedElement } from "../../../lib/jsxRuntime";
+import { Icon28AddOutline } from "@vkontakte/icons";
+import { classNamesString } from "../../../lib/classNames";
+import { useAppearance } from "../../../hooks/useAppearance";
+import { useAdaptivity } from "../../../hooks/useAdaptivity";
+import { Tappable } from "../../Tappable/Tappable";
+
+require("./ImageBaseOverlay.module.css");
+
+var styles = {
+  "ImageBaseOverlay": "vkuiImageBaseOverlay",
+  "ImageBaseOverlay--visible": "vkuiImageBaseOverlay--visible",
+  "ImageBaseOverlay--focus-visible": "vkuiImageBaseOverlay--focus-visible",
+  "ImageBaseOverlay--theme-light": "vkuiImageBaseOverlay--theme-light",
+  "ImageBaseOverlay--theme-dark": "vkuiImageBaseOverlay--theme-dark"
+};
+
+function getRelativeSizeOfIcon(imageSize) {
+  if (imageSize <= 20) {
+    return 12;
+  } else if (imageSize <= 24) {
+    return 16;
+  } else if (imageSize <= 28) {
+    return 18;
+  } else if (imageSize <= 40) {
+    return 20;
+  } else if (imageSize <= 48) {
+    return 24;
+  } else if (imageSize <= 88) {
+    return 28;
+  }
+
+  return 32;
+}
+
+export var ImageBaseOverlay = function ImageBaseOverlay(_ref) {
+  var imageSize = _ref.imageSize,
+      className = _ref.className,
+      themeProp = _ref.theme,
+      visibilityProp = _ref.visibility,
+      _ref$Icon = _ref.Icon,
+      Icon = _ref$Icon === void 0 ? Icon28AddOutline : _ref$Icon,
+      onClick = _ref.onClick;
+  var appearance = useAppearance();
+
+  var _useAdaptivity = useAdaptivity(),
+      hasMouse = _useAdaptivity.hasMouse;
+
+  var theme = themeProp !== null && themeProp !== void 0 ? themeProp : appearance;
+  var visibility = visibilityProp !== null && visibilityProp !== void 0 ? visibilityProp : hasMouse ? "on-hover" : "always";
+  var iconSize = getRelativeSizeOfIcon(imageSize);
+  return createScopedElement(Tappable, {
+    type: "button",
+    Component: "button",
+    className: classNamesString(styles["ImageBaseOverlay"], visibility === "always" && styles["ImageBaseOverlay--visible"], theme === "light" && styles["ImageBaseOverlay--theme-light"], theme === "dark" && styles["ImageBaseOverlay--theme-dark"], className),
+    hasHover: visibility === "on-hover",
+    hoverMode: visibility === "on-hover" ? styles["ImageBaseOverlay--visible"] : undefined,
+    focusVisibleMode: styles["ImageBaseOverlay--focus-visible"],
+    hasActive: false,
+    onClick: onClick
+  }, createScopedElement(Icon, {
+    width: iconSize,
+    height: iconSize,
+    "aria-hidden": true
+  }));
+};
+//# sourceMappingURL=ImageBaseOverlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageBaseOverlay.js","names":["Icon28AddOutline","classNamesString","useAppearance","useAdaptivity","Tappable","getRelativeSizeOfIcon","imageSize","ImageBaseOverlay","className","themeProp","theme","visibilityProp","visibility","Icon","onClick","appearance","hasMouse","iconSize","styles","undefined"],"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Icon28AddOutline } from \"@vkontakte/icons\";\nimport { classNamesString } from \"../../../lib/classNames\";\nimport { useAppearance } from \"../../../hooks/useAppearance\";\nimport { useAdaptivity } from \"../../../hooks/useAdaptivity\";\nimport { Tappable } from \"../../Tappable/Tappable\";\nimport type { ImageBaseSize, ImageBaseExpectedIconProps } from \"../types\";\nimport styles from \"./ImageBaseOverlay.module.css\";\n\nfunction getRelativeSizeOfIcon(imageSize: number): number {\n  if (imageSize <= 20) {\n    return 12;\n  } else if (imageSize <= 24) {\n    return 16;\n  } else if (imageSize <= 28) {\n    return 18;\n  } else if (imageSize <= 40) {\n    return 20;\n  } else if (imageSize <= 48) {\n    return 24;\n  } else if (imageSize <= 88) {\n    return 28;\n  }\n  return 32;\n}\n\nexport interface ImageBaseOverlayProps {\n  /**\n   * Размер картинки, над которой будет располагаться оверлей.\n   */\n  imageSize: ImageBaseSize | number;\n  /**\n   * Задаёт тему оформления.\n   *\n   * > По умолчанию берётся из параметра `appearance` в `ConfigProvider`.\n   */\n  theme?: \"dark\" | \"light\";\n  /**\n   * Определяет каким образом должен показываться оверлей.\n   *\n   * - `\"on-hover\"` – на наведение указателя мыши.\n   * - `\"always\"` – всегда показывать.\n   *\n   * > По умолчанию определяется в зависимости от того, есть ли у пользователя мышь или нет.\n   */\n  visibility?: \"on-hover\" | \"always\";\n  /**\n   * Иконка по середине оверлей.\n   *\n   * @default `Icon28AddOutline`\n   */\n  Icon?: React.ComponentType<ImageBaseExpectedIconProps>;\n  className?: string;\n  onClick?: React.MouseEventHandler<HTMLElement>;\n}\n\nexport const ImageBaseOverlay = ({\n  imageSize,\n  className,\n  theme: themeProp,\n  visibility: visibilityProp,\n  Icon = Icon28AddOutline,\n  onClick,\n}: ImageBaseOverlayProps) => {\n  const appearance = useAppearance();\n  const { hasMouse } = useAdaptivity();\n  const theme = themeProp ?? appearance;\n  const visibility = visibilityProp ?? (hasMouse ? \"on-hover\" : \"always\");\n\n  const iconSize = getRelativeSizeOfIcon(imageSize);\n\n  return (\n    <Tappable\n      type=\"button\"\n      Component=\"button\"\n      className={classNamesString(\n        styles[\"ImageBaseOverlay\"],\n        visibility === \"always\" && styles[\"ImageBaseOverlay--visible\"],\n        theme === \"light\" && styles[\"ImageBaseOverlay--theme-light\"],\n        theme === \"dark\" && styles[\"ImageBaseOverlay--theme-dark\"],\n        className\n      )}\n      hasHover={visibility === \"on-hover\"}\n      hoverMode={\n        visibility === \"on-hover\"\n          ? styles[\"ImageBaseOverlay--visible\"]\n          : undefined\n      }\n      focusVisibleMode={styles[\"ImageBaseOverlay--focus-visible\"]}\n      hasActive={false}\n      onClick={onClick}\n    >\n      <Icon width={iconSize} height={iconSize} aria-hidden={true} />\n    </Tappable>\n  );\n};\n"],"mappings":";AACA,SAASA,gBAAT,QAAiC,kBAAjC;AACA,SAASC,gBAAT;AACA,SAASC,aAAT;AACA,SAASC,aAAT;AACA,SAASC,QAAT;;;;;;;;;;;;AAIA,SAASC,qBAAT,CAA+BC,SAA/B,EAA0D;EACxD,IAAIA,SAAS,IAAI,EAAjB,EAAqB;IACnB,OAAO,EAAP;EACD,CAFD,MAEO,IAAIA,SAAS,IAAI,EAAjB,EAAqB;IAC1B,OAAO,EAAP;EACD,CAFM,MAEA,IAAIA,SAAS,IAAI,EAAjB,EAAqB;IAC1B,OAAO,EAAP;EACD,CAFM,MAEA,IAAIA,SAAS,IAAI,EAAjB,EAAqB;IAC1B,OAAO,EAAP;EACD,CAFM,MAEA,IAAIA,SAAS,IAAI,EAAjB,EAAqB;IAC1B,OAAO,EAAP;EACD,CAFM,MAEA,IAAIA,SAAS,IAAI,EAAjB,EAAqB;IAC1B,OAAO,EAAP;EACD;;EACD,OAAO,EAAP;AACD;;AAgCD,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,OAOH;EAAA,IAN3BD,SAM2B,QAN3BA,SAM2B;EAAA,IAL3BE,SAK2B,QAL3BA,SAK2B;EAAA,IAJpBC,SAIoB,QAJ3BC,KAI2B;EAAA,IAHfC,cAGe,QAH3BC,UAG2B;EAAA,qBAF3BC,IAE2B;EAAA,IAF3BA,IAE2B,0BAFpBb,gBAEoB;EAAA,IAD3Bc,OAC2B,QAD3BA,OAC2B;EAC3B,IAAMC,UAAU,GAAGb,aAAa,EAAhC;;EACA,qBAAqBC,aAAa,EAAlC;EAAA,IAAQa,QAAR,kBAAQA,QAAR;;EACA,IAAMN,KAAK,GAAGD,SAAH,aAAGA,SAAH,cAAGA,SAAH,GAAgBM,UAA3B;EACA,IAAMH,UAAU,GAAGD,cAAH,aAAGA,cAAH,cAAGA,cAAH,GAAsBK,QAAQ,GAAG,UAAH,GAAgB,QAA9D;EAEA,IAAMC,QAAQ,GAAGZ,qBAAqB,CAACC,SAAD,CAAtC;EAEA,OACE,oBAAC,QAAD;IACE,IAAI,EAAC,QADP;IAEE,SAAS,EAAC,QAFZ;IAGE,SAAS,EAAEL,gBAAgB,CACzBiB,MAAM,CAAC,kBAAD,CADmB,EAEzBN,UAAU,KAAK,QAAf,IAA2BM,MAAM,CAAC,2BAAD,CAFR,EAGzBR,KAAK,KAAK,OAAV,IAAqBQ,MAAM,CAAC,+BAAD,CAHF,EAIzBR,KAAK,KAAK,MAAV,IAAoBQ,MAAM,CAAC,8BAAD,CAJD,EAKzBV,SALyB,CAH7B;IAUE,QAAQ,EAAEI,UAAU,KAAK,UAV3B;IAWE,SAAS,EACPA,UAAU,KAAK,UAAf,GACIM,MAAM,CAAC,2BAAD,CADV,GAEIC,SAdR;IAgBE,gBAAgB,EAAED,MAAM,CAAC,iCAAD,CAhB1B;IAiBE,SAAS,EAAE,KAjBb;IAkBE,OAAO,EAAEJ;EAlBX,GAoBE,oBAAC,IAAD;IAAM,KAAK,EAAEG,QAAb;IAAuB,MAAM,EAAEA,QAA/B;IAAyC,eAAa;EAAtD,EApBF,CADF;AAwBD,CAvCM"}

package/dist/cssm/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.module.css

@@ -0,0 +1 @@
+.vkuiImageBaseOverlay{align-items:center;border:none;border-radius:inherit;box-shadow:inherit;box-sizing:border-box;display:flex;height:100%;justify-content:center;left:0;opacity:0;position:absolute;top:0;transition:opacity .3s ease-in-out;width:100%}.vkuiImageBaseOverlay--visible{opacity:1}.vkuiImageBaseOverlay--focus-visible{box-shadow:inset 0 0 0 2px var(--vkui--color_stroke_accent);opacity:1}.vkuiImageBaseOverlay--theme-light{background-color:var(--vkui--color_avatar_overlay_inverse_alpha);color:var(--vkui--color_icon_accent)}.vkuiImageBaseOverlay--theme-dark{background-color:var(--vkui--color_avatar_overlay);color:var(--vkui--color_icon_contrast)}

package/dist/cssm/components/ImageBase/types.d.ts

@@ -0,0 +1,7 @@
+import type { AriaAttributes } from "react";
+export declare type ImageBaseSize = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96;
+export declare type ImageBaseExpectedIconProps = {
+    width?: number;
+    height?: number;
+    "aria-hidden"?: AriaAttributes["aria-hidden"];
+};

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/ImageBase/types.ts"],"sourcesContent":["import type { AriaAttributes } from \"react\";\n\nexport type ImageBaseSize =\n  | 16\n  | 20\n  | 24\n  | 28\n  | 32\n  | 36\n  | 40\n  | 44\n  | 48\n  | 56\n  | 64\n  | 72\n  | 80\n  | 88\n  | 96;\n\nexport type ImageBaseExpectedIconProps = {\n  width?: number;\n  height?: number;\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n};\n"],"mappings":""}

package/dist/cssm/components/InfoRow/InfoRow.css

@@ -1 +1 @@
-.vkuiInfoRow{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.vkuiInfoRow,.vkuiInfoRow__header{overflow:hidden;text-overflow:ellipsis}.vkuiInfoRow__header{color:#6d7885;color:var(--text_subhead,var(--vkui--color_text_subhead));display:block;margin-bottom:2px;white-space:nowrap}
+.vkuiInfoRow{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.vkuiInfoRow,.vkuiInfoRow__header{overflow:hidden;text-overflow:ellipsis}.vkuiInfoRow__header{color:var(--vkui--color_text_subhead);display:block;margin-bottom:2px;white-space:nowrap}

package/dist/cssm/components/Input/Input.css

@@ -1 +1 @@
-.vkuiInput{font-size:16px;line-height:20px;position:relative}.vkuiInput--center .vkuiInput__el{text-align:center}.vkuiInput--right .vkuiInput__el{text-align:right}.vkuiInput__el{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;box-shadow:none;box-sizing:border-box;color:#000;color:var(--text_primary,var(--vkui--color_text_primary));display:block;font-size:16px;font-size:var(--vkui--font_text--font_size--regular,16px);font-weight:400;font-weight:var(--vkui--font_text--font_weight--regular,400);line-height:20px;line-height:var(--vkui--font_text--line_height--regular,20px);margin:0;padding-left:12px;padding-right:12px;position:relative;text-overflow:ellipsis;width:100%;z-index:6}.vkuiInput--sizeY-compact .vkuiInput__el{font-size:15px;font-size:var(--vkui--font_text--font_size--compact,15px);line-height:20px;line-height:var(--vkui--font_text--line_height--compact,20px)}.vkuiInput--hasBefore .vkuiInput__el{padding-left:0}.vkuiInput--hasAfter .vkuiInput__el{padding-right:0}.vkuiInput__el:disabled{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility,.64)}.vkuiInput__el::-webkit-input-placeholder{color:#818c99;color:var(--field_text_placeholder,var(--vkui--color_text_secondary));opacity:1}.vkuiInput__el::-moz-placeholder{color:#818c99;color:var(--field_text_placeholder,var(--vkui--color_text_secondary));opacity:1}.vkuiInput__el::-ms-input-placeholder{color:#818c99;color:var(--field_text_placeholder,var(--vkui--color_text_secondary));opacity:1}.vkuiInput__el::placeholder{color:#818c99;color:var(--field_text_placeholder,var(--vkui--color_text_secondary));opacity:1}.vkuiInput__el:disabled::-webkit-input-placeholder{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary))}.vkuiInput__el:disabled::-moz-placeholder{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary))}.vkuiInput__el:disabled::-ms-input-placeholder{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary))}.vkuiInput__el:disabled::placeholder{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary))}
+.vkuiInput{font-size:16px;line-height:20px;position:relative}.vkuiInput--align-center .vkuiInput__el{text-align:center}.vkuiInput--align-right .vkuiInput__el{text-align:right}.vkuiInput__el{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;box-shadow:none;box-sizing:border-box;color:var(--vkui--color_text_primary);display:block;font-size:var(--vkui--font_text--font_size--regular);font-weight:var(--vkui--font_text--font_weight--regular);line-height:var(--vkui--font_text--line_height--regular);margin:0;padding-left:12px;padding-right:12px;position:relative;text-overflow:ellipsis;width:100%;z-index:6}.vkuiInput--sizeY-compact .vkuiInput__el{font-size:var(--vkui--font_text--font_size--compact);line-height:var(--vkui--font_text--line_height--compact)}.vkuiInput--hasBefore .vkuiInput__el{padding-left:0}.vkuiInput--hasAfter .vkuiInput__el{padding-right:0}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiInput--sizeY-none .vkuiInput__el{font-size:var(--vkui--font_text--font_size--compact);line-height:var(--vkui--font_text--line_height--compact)}}.vkuiInput__el:disabled{opacity:var(--vkui--opacity_disable_accessibility)}.vkuiInput__el::-webkit-input-placeholder{color:var(--vkui--color_text_secondary);opacity:1}.vkuiInput__el::-moz-placeholder{color:var(--vkui--color_text_secondary);opacity:1}.vkuiInput__el::-ms-input-placeholder{color:var(--vkui--color_text_secondary);opacity:1}.vkuiInput__el::placeholder{color:var(--vkui--color_text_secondary);opacity:1}.vkuiInput__el:disabled::-webkit-input-placeholder{color:var(--vkui--color_text_secondary)}.vkuiInput__el:disabled::-moz-placeholder{color:var(--vkui--color_text_secondary)}.vkuiInput__el:disabled::-ms-input-placeholder{color:var(--vkui--color_text_secondary)}.vkuiInput__el:disabled::placeholder{color:var(--vkui--color_text_secondary)}

package/dist/cssm/components/Input/Input.d.ts

@@ -1,11 +1,10 @@
 import * as React from "react";
 import { FormFieldProps } from "../FormField/FormField";
 import { HasAlign, HasRef, HasRootRef } from "../../types";
-import { AdaptivityProps } from "../../hoc/withAdaptivity";
 import "./Input.css";
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement>, HasRootRef<HTMLDivElement>, HasAlign, AdaptivityProps, FormFieldProps {
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement>, HasRootRef<HTMLDivElement>, HasAlign, FormFieldProps {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Input
  */
-export declare const Input: React.FC<Pick<InputProps, "max" | "required" | "disabled" | "hidden" | "dir" | "form" | "slot" | "style" | "title" | "pattern" | "color" | "size" | "after" | "multiple" | "height" | "translate" | "width" | "prefix" | "src" | "children" | "className" | "id" | "lang" | "min" | "name" | "type" | "role" | "tabIndex" | "crossOrigin" | "mode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "status" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "value" | "alt" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "autoComplete" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "readOnly" | "step" | "align" | "getRootRef" | "getRef" | "before"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
+export declare const Input: ({ type, align, getRef, className, getRootRef, style, before, after, status, ...restProps }: InputProps) => JSX.Element;

package/dist/cssm/components/Input/Input.js

@@ -1,29 +1,34 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["type", "align", "getRef", "className", "getRootRef", "sizeY", "style", "before", "after", "status"];
+var _excluded = ["type", "align", "getRef", "className", "getRootRef", "style", "before", "after", "status"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import { classNames } from "../../lib/classNames";
 import { FormField } from "../FormField/FormField";
-import { withAdaptivity } from "../../hoc/withAdaptivity";
+import { getSizeYClassName } from "../../helpers/getSizeYClassName";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
 import "./Input.css";
 
-var InputComponent = function InputComponent(_ref) {
+/**
+ * @see https://vkcom.github.io/VKUI/#/Input
+ */
+export var Input = function Input(_ref) {
   var _ref$type = _ref.type,
       type = _ref$type === void 0 ? "text" : _ref$type,
       align = _ref.align,
       getRef = _ref.getRef,
       className = _ref.className,
       getRootRef = _ref.getRootRef,
-      sizeY = _ref.sizeY,
       style = _ref.style,
       before = _ref.before,
       after = _ref.after,
       status = _ref.status,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
+  var _useAdaptivity = useAdaptivity(),
+      sizeY = _useAdaptivity.sizeY;
+
   return createScopedElement(FormField, {
-    vkuiClass: classNames("Input", !!align && "Input--".concat(align), "Input--sizeY-".concat(sizeY), // TODO v5.0.0 поправить под новую адаптивность
-    before && "Input--hasBefore", after && "Input--hasAfter"),
+    vkuiClass: classNames("Input", align && "Input--align-".concat(align), getSizeYClassName("Input", sizeY), before && "Input--hasBefore", after && "Input--hasAfter"),
     style: style,
     className: className,
     getRootRef: getRootRef,
@@ -37,13 +42,4 @@ var InputComponent = function InputComponent(_ref) {
     ref: getRef
   })));
 };
-/**
- * @see https://vkcom.github.io/VKUI/#/Input
- */
-
-
-export var Input = withAdaptivity(InputComponent, {
-  sizeY: true
-});
-Input.displayName = "Input";
 //# sourceMappingURL=Input.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["classNames","FormField","withAdaptivity","InputComponent","type","align","getRef","className","getRootRef","sizeY","style","before","after","status","restProps","disabled","Input","displayName"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { FormField, FormFieldProps } from \"../FormField/FormField\";\nimport { HasAlign, HasRef, HasRootRef } from \"../../types\";\nimport { withAdaptivity, AdaptivityProps } from \"../../hoc/withAdaptivity\";\nimport \"./Input.css\";\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign,\n    AdaptivityProps,\n    FormFieldProps {}\n\nconst InputComponent = ({\n  type = \"text\",\n  align,\n  getRef,\n  className,\n  getRootRef,\n  sizeY,\n  style,\n  before,\n  after,\n  status,\n  ...restProps\n}: InputProps) => {\n  return (\n    <FormField\n      vkuiClass={classNames(\n        \"Input\",\n        !!align && `Input--${align}`,\n        `Input--sizeY-${sizeY}`, // TODO v5.0.0 поправить под новую адаптивность\n        before && \"Input--hasBefore\",\n        after && \"Input--hasAfter\"\n      )}\n      style={style}\n      className={className}\n      getRootRef={getRootRef}\n      before={before}\n      after={after}\n      disabled={restProps.disabled}\n      status={status}\n    >\n      <input {...restProps} type={type} vkuiClass=\"Input__el\" ref={getRef} />\n    </FormField>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Input\n */\nexport const Input = withAdaptivity(InputComponent, {\n  sizeY: true,\n});\n\nInput.displayName = \"Input\";\n"],"mappings":";;;;AACA,SAASA,UAAT;AACA,SAASC,SAAT;AAEA,SAASC,cAAT;AACA;;AAUA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,OAYL;EAAA,qBAXhBC,IAWgB;EAAA,IAXhBA,IAWgB,0BAXT,MAWS;EAAA,IAVhBC,KAUgB,QAVhBA,KAUgB;EAAA,IAThBC,MASgB,QAThBA,MASgB;EAAA,IARhBC,SAQgB,QARhBA,SAQgB;EAAA,IAPhBC,UAOgB,QAPhBA,UAOgB;EAAA,IANhBC,KAMgB,QANhBA,KAMgB;EAAA,IALhBC,KAKgB,QALhBA,KAKgB;EAAA,IAJhBC,MAIgB,QAJhBA,MAIgB;EAAA,IAHhBC,KAGgB,QAHhBA,KAGgB;EAAA,IAFhBC,MAEgB,QAFhBA,MAEgB;EAAA,IADbC,SACa;;EAChB,OACE,oBAAC,SAAD;IACE,SAAS,EAAEd,UAAU,CACnB,OADmB,EAEnB,CAAC,CAACK,KAAF,qBAAqBA,KAArB,CAFmB,yBAGHI,KAHG,GAGM;IACzBE,MAAM,IAAI,kBAJS,EAKnBC,KAAK,IAAI,iBALU,CADvB;IAQE,KAAK,EAAEF,KART;IASE,SAAS,EAAEH,SATb;IAUE,UAAU,EAAEC,UAVd;IAWE,MAAM,EAAEG,MAXV;IAYE,KAAK,EAAEC,KAZT;IAaE,QAAQ,EAAEE,SAAS,CAACC,QAbtB;IAcE,MAAM,EAAEF;EAdV,GAgBE,0CAAWC,SAAX;IAAsB,IAAI,EAAEV,IAA5B;IAAkC,SAAS,EAAC,WAA5C;IAAwD,GAAG,EAAEE;EAA7D,GAhBF,CADF;AAoBD,CAjCD;AAmCA;AACA;AACA;;;AACA,OAAO,IAAMU,KAAK,GAAGd,cAAc,CAACC,cAAD,EAAiB;EAClDM,KAAK,EAAE;AAD2C,CAAjB,CAA5B;AAIPO,KAAK,CAACC,WAAN,GAAoB,OAApB"}
+{"version":3,"file":"Input.js","names":["classNames","FormField","getSizeYClassName","useAdaptivity","Input","type","align","getRef","className","getRootRef","style","before","after","status","restProps","sizeY","disabled"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { FormField, FormFieldProps } from \"../FormField/FormField\";\nimport { HasAlign, HasRef, HasRootRef } from \"../../types\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport \"./Input.css\";\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign,\n    FormFieldProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Input\n */\nexport const Input = ({\n  type = \"text\",\n  align,\n  getRef,\n  className,\n  getRootRef,\n  style,\n  before,\n  after,\n  status,\n  ...restProps\n}: InputProps) => {\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <FormField\n      vkuiClass={classNames(\n        \"Input\",\n        align && `Input--align-${align}`,\n        getSizeYClassName(\"Input\", sizeY),\n        before && \"Input--hasBefore\",\n        after && \"Input--hasAfter\"\n      )}\n      style={style}\n      className={className}\n      getRootRef={getRootRef}\n      before={before}\n      after={after}\n      disabled={restProps.disabled}\n      status={status}\n    >\n      <input {...restProps} type={type} vkuiClass=\"Input__el\" ref={getRef} />\n    </FormField>\n  );\n};\n"],"mappings":";;;;AACA,SAASA,UAAT;AACA,SAASC,SAAT;AAEA,SAASC,iBAAT;AACA,SAASC,aAAT;AACA;;AASA;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAQ,OAWH;EAAA,qBAVhBC,IAUgB;EAAA,IAVhBA,IAUgB,0BAVT,MAUS;EAAA,IAThBC,KASgB,QAThBA,KASgB;EAAA,IARhBC,MAQgB,QARhBA,MAQgB;EAAA,IAPhBC,SAOgB,QAPhBA,SAOgB;EAAA,IANhBC,UAMgB,QANhBA,UAMgB;EAAA,IALhBC,KAKgB,QALhBA,KAKgB;EAAA,IAJhBC,MAIgB,QAJhBA,MAIgB;EAAA,IAHhBC,KAGgB,QAHhBA,KAGgB;EAAA,IAFhBC,MAEgB,QAFhBA,MAEgB;EAAA,IADbC,SACa;;EAChB,qBAAkBX,aAAa,EAA/B;EAAA,IAAQY,KAAR,kBAAQA,KAAR;;EAEA,OACE,oBAAC,SAAD;IACE,SAAS,EAAEf,UAAU,CACnB,OADmB,EAEnBM,KAAK,2BAAoBA,KAApB,CAFc,EAGnBJ,iBAAiB,CAAC,OAAD,EAAUa,KAAV,CAHE,EAInBJ,MAAM,IAAI,kBAJS,EAKnBC,KAAK,IAAI,iBALU,CADvB;IAQE,KAAK,EAAEF,KART;IASE,SAAS,EAAEF,SATb;IAUE,UAAU,EAAEC,UAVd;IAWE,MAAM,EAAEE,MAXV;IAYE,KAAK,EAAEC,KAZT;IAaE,QAAQ,EAAEE,SAAS,CAACE,QAbtB;IAcE,MAAM,EAAEH;EAdV,GAgBE,0CAAWC,SAAX;IAAsB,IAAI,EAAET,IAA5B;IAAkC,SAAS,EAAC,WAA5C;IAAwD,GAAG,EAAEE;EAA7D,GAhBF,CADF;AAoBD,CAlCM"}

package/dist/cssm/components/InputLike/InputLike.css

@@ -1 +1 @@
-.vkuiInputLike__mask{position:relative}.vkuiInputLike__mask:after{border-bottom:1px solid #818c99;border-bottom:1px solid var(--vkui--color_text_secondary,#818c99);bottom:0;content:"";height:1px;left:0;position:absolute;width:calc(100% - .1em)}.vkuiInputLike__mask:last-child{margin-right:1px}.vkuiInputLike__last_character{letter-spacing:1px!important}.vkuiInputLike--full+.vkuiInputLikeDivider{color:#000;color:var(--vkui--color_text_primary,#000)}
+.vkuiInputLike__mask{position:relative}.vkuiInputLike__mask:after{border-bottom:1px solid var(--vkui--color_text_secondary);bottom:0;content:"";height:1px;left:0;position:absolute;width:calc(100% - .1em)}.vkuiInputLike__mask:last-child{margin-right:1px}.vkuiInputLike__last_character{letter-spacing:1px!important}.vkuiInputLike--full+.vkuiInputLikeDivider{color:var(--vkui--color_text_primary)}

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

@@ -1 +1 @@
-{"version":3,"file":"InputLike.js","names":["React","callMultiple","stopPropagation","classNames","MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","InputLike","value","onElementSelect","onClick","onFocus","getRootRef","props","handleElementSelect","useCallback","event","slice","displayName"],"sources":["../../../../src/components/InputLike/InputLike.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { callMultiple } from \"../../lib/callMultiple\";\nimport { stopPropagation } from \"../../lib/utils\";\nimport { classNames } from \"../../lib/classNames\";\nimport { HasRootRef } from \"../../types\";\nimport \"./InputLike.css\";\n\nexport interface InputLikeProps\n  extends React.HTMLAttributes<HTMLSpanElement>,\n    HasRootRef<HTMLSpanElement> {\n  length: number;\n  index: number;\n  value?: string;\n  onElementSelect?(index: number): void;\n}\n\nconst MASK_SYMBOL = String.fromCharCode(0x2007);\n\nfunction getMaskElements(length: number) {\n  const result = [];\n  for (let index = 0; index < length; index += 1) {\n    result.push(\n      <span key={index} vkuiClass=\"InputLike__mask\">\n        {MASK_SYMBOL}\n      </span>\n    );\n  }\n  return result;\n}\n\nexport const InputLike = ({\n  value,\n  length,\n  index,\n  onElementSelect,\n  onClick,\n  onFocus,\n  getRootRef,\n  ...props\n}: InputLikeProps) => {\n  const handleElementSelect = React.useCallback(\n    (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {\n      stopPropagation(event);\n      onElementSelect?.(index);\n    },\n    [index, onElementSelect]\n  );\n\n  return (\n    <span\n      vkuiClass={classNames(\n        \"InputLike\",\n        value?.length === length && `InputLike--full`\n      )}\n      tabIndex={0}\n      ref={getRootRef}\n      onClick={callMultiple(onClick, handleElementSelect)}\n      onFocus={callMultiple(stopPropagation, onFocus)}\n      {...props}\n    >\n      {value?.slice(0, length - 1)}\n      {value?.slice(length - 1) && (\n        <span key={index} vkuiClass=\"InputLike__last_character\">\n          {value.slice(length - 1)}\n        </span>\n      )}\n      {getMaskElements(length - (value?.length ?? 0))}\n    </span>\n  );\n};\n\nInputLike.displayName = \"InputLike\";\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT;AACA,SAASC,eAAT;AACA,SAASC,UAAT;AAEA;AAWA,IAAMC,WAAW,GAAGC,MAAM,CAACC,YAAP,CAAoB,MAApB,CAApB;;AAEA,SAASC,eAAT,CAAyBC,MAAzB,EAAyC;EACvC,IAAMC,MAAM,GAAG,EAAf;;EACA,KAAK,IAAIC,MAAK,GAAG,CAAjB,EAAoBA,MAAK,GAAGF,MAA5B,EAAoCE,MAAK,IAAI,CAA7C,EAAgD;IAC9CD,MAAM,CAACE,IAAP,CACE;MAAM,GAAG,EAAED,MAAX;MAAkB,SAAS,EAAC;IAA5B,GACGN,WADH,CADF;EAKD;;EACD,OAAOK,MAAP;AACD;;AAED,OAAO,IAAMG,SAAS,GAAG,SAAZA,SAAY,OASH;EAAA;;EAAA,IARpBC,KAQoB,QARpBA,KAQoB;EAAA,IAPpBL,MAOoB,QAPpBA,MAOoB;EAAA,IANpBE,KAMoB,QANpBA,KAMoB;EAAA,IALpBI,eAKoB,QALpBA,eAKoB;EAAA,IAJpBC,OAIoB,QAJpBA,OAIoB;EAAA,IAHpBC,OAGoB,QAHpBA,OAGoB;EAAA,IAFpBC,UAEoB,QAFpBA,UAEoB;EAAA,IADjBC,KACiB;;EACpB,IAAMC,mBAAmB,GAAGnB,KAAK,CAACoB,WAAN,CAC1B,UAACC,KAAD,EAA0D;IACxDnB,eAAe,CAACmB,KAAD,CAAf;IACAP,eAAe,SAAf,IAAAA,eAAe,WAAf,YAAAA,eAAe,CAAGJ,KAAH,CAAf;EACD,CAJyB,EAK1B,CAACA,KAAD,EAAQI,eAAR,CAL0B,CAA5B;EAQA,OACE;IACE,SAAS,EAAEX,UAAU,CACnB,WADmB,EAEnB,CAAAU,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEL,MAAP,MAAkBA,MAAlB,qBAFmB,CADvB;IAKE,QAAQ,EAAE,CALZ;IAME,GAAG,EAAES,UANP;IAOE,OAAO,EAAEhB,YAAY,CAACc,OAAD,EAAUI,mBAAV,CAPvB;IAQE,OAAO,EAAElB,YAAY,CAACC,eAAD,EAAkBc,OAAlB;EARvB,GASME,KATN,GAWGL,KAXH,aAWGA,KAXH,uBAWGA,KAAK,CAAES,KAAP,CAAa,CAAb,EAAgBd,MAAM,GAAG,CAAzB,CAXH,EAYG,CAAAK,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAES,KAAP,CAAad,MAAM,GAAG,CAAtB,MACC;IAAM,GAAG,EAAEE,KAAX;IAAkB,SAAS,EAAC;EAA5B,GACGG,KAAK,CAACS,KAAN,CAAYd,MAAM,GAAG,CAArB,CADH,CAbJ,EAiBGD,eAAe,CAACC,MAAM,qBAAIK,KAAJ,aAAIA,KAAJ,uBAAIA,KAAK,CAAEL,MAAX,yDAAqB,CAArB,CAAP,CAjBlB,CADF;AAqBD,CAvCM;AAyCPI,SAAS,CAACW,WAAV,GAAwB,WAAxB"}
+{"version":3,"file":"InputLike.js","names":["React","callMultiple","stopPropagation","classNames","MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","InputLike","value","onElementSelect","onClick","onFocus","getRootRef","props","handleElementSelect","useCallback","event","slice","displayName"],"sources":["../../../../src/components/InputLike/InputLike.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { callMultiple } from \"../../lib/callMultiple\";\nimport { stopPropagation } from \"../../lib/utils\";\nimport { classNames } from \"../../lib/classNames\";\nimport { HasRootRef } from \"../../types\";\nimport \"./InputLike.css\";\n\nexport interface InputLikeProps\n  extends React.HTMLAttributes<HTMLSpanElement>,\n    HasRootRef<HTMLSpanElement> {\n  length: number;\n  index: number;\n  value?: string;\n  onElementSelect?(index: number): void;\n}\n\nconst MASK_SYMBOL = String.fromCharCode(0x2007);\n\nfunction getMaskElements(length: number) {\n  const result = [];\n  for (let index = 0; index < length; index += 1) {\n    result.push(\n      <span key={index} vkuiClass=\"InputLike__mask\">\n        {MASK_SYMBOL}\n      </span>\n    );\n  }\n  return result;\n}\n\nexport const InputLike = ({\n  value,\n  length,\n  index,\n  onElementSelect,\n  onClick,\n  onFocus,\n  getRootRef,\n  ...props\n}: InputLikeProps) => {\n  const handleElementSelect = React.useCallback(\n    (event: React.MouseEvent<HTMLSpanElement>) => {\n      stopPropagation(event);\n      onElementSelect?.(index);\n    },\n    [index, onElementSelect]\n  );\n\n  return (\n    <span\n      vkuiClass={classNames(\n        \"InputLike\",\n        value?.length === length && `InputLike--full`\n      )}\n      tabIndex={0}\n      ref={getRootRef}\n      onClick={callMultiple(onClick, handleElementSelect)}\n      onFocus={callMultiple(stopPropagation, onFocus)}\n      {...props}\n    >\n      {value?.slice(0, length - 1)}\n      {value?.slice(length - 1) && (\n        <span key={index} vkuiClass=\"InputLike__last_character\">\n          {value.slice(length - 1)}\n        </span>\n      )}\n      {getMaskElements(length - (value?.length ?? 0))}\n    </span>\n  );\n};\n\nInputLike.displayName = \"InputLike\";\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT;AACA,SAASC,eAAT;AACA,SAASC,UAAT;AAEA;AAWA,IAAMC,WAAW,GAAGC,MAAM,CAACC,YAAP,CAAoB,MAApB,CAApB;;AAEA,SAASC,eAAT,CAAyBC,MAAzB,EAAyC;EACvC,IAAMC,MAAM,GAAG,EAAf;;EACA,KAAK,IAAIC,MAAK,GAAG,CAAjB,EAAoBA,MAAK,GAAGF,MAA5B,EAAoCE,MAAK,IAAI,CAA7C,EAAgD;IAC9CD,MAAM,CAACE,IAAP,CACE;MAAM,GAAG,EAAED,MAAX;MAAkB,SAAS,EAAC;IAA5B,GACGN,WADH,CADF;EAKD;;EACD,OAAOK,MAAP;AACD;;AAED,OAAO,IAAMG,SAAS,GAAG,SAAZA,SAAY,OASH;EAAA;;EAAA,IARpBC,KAQoB,QARpBA,KAQoB;EAAA,IAPpBL,MAOoB,QAPpBA,MAOoB;EAAA,IANpBE,KAMoB,QANpBA,KAMoB;EAAA,IALpBI,eAKoB,QALpBA,eAKoB;EAAA,IAJpBC,OAIoB,QAJpBA,OAIoB;EAAA,IAHpBC,OAGoB,QAHpBA,OAGoB;EAAA,IAFpBC,UAEoB,QAFpBA,UAEoB;EAAA,IADjBC,KACiB;;EACpB,IAAMC,mBAAmB,GAAGnB,KAAK,CAACoB,WAAN,CAC1B,UAACC,KAAD,EAA8C;IAC5CnB,eAAe,CAACmB,KAAD,CAAf;IACAP,eAAe,SAAf,IAAAA,eAAe,WAAf,YAAAA,eAAe,CAAGJ,KAAH,CAAf;EACD,CAJyB,EAK1B,CAACA,KAAD,EAAQI,eAAR,CAL0B,CAA5B;EAQA,OACE;IACE,SAAS,EAAEX,UAAU,CACnB,WADmB,EAEnB,CAAAU,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEL,MAAP,MAAkBA,MAAlB,qBAFmB,CADvB;IAKE,QAAQ,EAAE,CALZ;IAME,GAAG,EAAES,UANP;IAOE,OAAO,EAAEhB,YAAY,CAACc,OAAD,EAAUI,mBAAV,CAPvB;IAQE,OAAO,EAAElB,YAAY,CAACC,eAAD,EAAkBc,OAAlB;EARvB,GASME,KATN,GAWGL,KAXH,aAWGA,KAXH,uBAWGA,KAAK,CAAES,KAAP,CAAa,CAAb,EAAgBd,MAAM,GAAG,CAAzB,CAXH,EAYG,CAAAK,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAES,KAAP,CAAad,MAAM,GAAG,CAAtB,MACC;IAAM,GAAG,EAAEE,KAAX;IAAkB,SAAS,EAAC;EAA5B,GACGG,KAAK,CAACS,KAAN,CAAYd,MAAM,GAAG,CAArB,CADH,CAbJ,EAiBGD,eAAe,CAACC,MAAM,qBAAIK,KAAJ,aAAIA,KAAJ,uBAAIA,KAAK,CAAEL,MAAX,yDAAqB,CAArB,CAAP,CAjBlB,CADF;AAqBD,CAvCM;AAyCPI,SAAS,CAACW,WAAV,GAAwB,WAAxB"}

package/dist/cssm/components/InputLike/InputLikeDivider.css

@@ -1 +1 @@
-.vkuiInputLikeDivider{color:#818c99;color:var(--vkui--color_text_secondary,#818c99);letter-spacing:1px!important}
+.vkuiInputLikeDivider{color:var(--vkui--color_text_secondary);letter-spacing:1px!important}

package/dist/cssm/components/Link/Link.css

@@ -1 +1 @@
-.vkuiLink{background:none;border:0;border-radius:0;color:#2d81e0;color:var(--text_link,var(--vkui--color_text_link));cursor:pointer;display:inline;font-size:inherit;margin:0;padding:0;text-decoration:none}@media (hover:hover){.vkuiLink:hover{text-decoration:underline}}.vkuiLink--focus-visible{outline:2px solid #2688eb!important;outline:2px solid var(--accent,var(--vkui--color_stroke_accent))!important}.vkuiLink--has-visited:visited{color:#4986cc;color:var(--vkui--color_text_link_visited,#4986cc)}.vkuiLink .vkuiIcon{display:inline-block;margin-left:4px;vertical-align:middle}
+.vkuiLink{background:none;border:0;border-radius:0;color:var(--vkui--color_text_link);cursor:pointer;display:inline;font-size:inherit;margin:0;padding:0;text-decoration:none}@media (hover:hover){.vkuiLink:hover{text-decoration:underline}}.vkuiLink--focus-visible{outline:2px solid var(--vkui--color_stroke_accent)!important}.vkuiLink--has-visited:visited{color:var(--vkui--color_text_link_visited)}.vkuiLink .vkuiIcon{display:inline-block;margin-left:4px;vertical-align:middle}

package/dist/cssm/components/MiniInfoCell/MiniInfoCell.css

@@ -1 +1 @@
-.vkuiMiniInfoCell{display:flex;padding:6px 16px;padding:6px var(--vkui--size_base_padding_horizontal--regular,16px)}.vkuiMiniInfoCell--lvl-primary{color:#000;color:var(--text_primary,var(--vkui--color_text_primary))}.vkuiMiniInfoCell--lvl-secondary{color:#6d7885;color:var(--text_subhead,var(--vkui--color_text_subhead))}.vkuiMiniInfoCell__icon{color:#99a2ad;color:var(--icon_outline_secondary,var(--vkui--color_icon_secondary));margin-right:12px}.vkuiMiniInfoCell__content{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiMiniInfoCell--wr-short .vkuiMiniInfoCell__content{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;max-height:60px;white-space:normal}.vkuiMiniInfoCell--wr-full .vkuiMiniInfoCell__content{overflow:inherit;white-space:normal}.vkuiMiniInfoCell__after{margin-bottom:-2px;margin-left:12px;margin-top:-2px}.vkuiMiniInfoCell--md-add{color:#2688eb;color:var(--accent,var(--vkui--color_text_link))}.vkuiMiniInfoCell--md-add .vkuiMiniInfoCell__icon{color:#2688eb;color:var(--accent,var(--vkui--color_icon_accent))}.vkuiMiniInfoCell--md-more{color:#2d81e0;color:var(--link_alternate,var(--vkui--color_text_link))}.vkuiMiniInfoCell--md-more .vkuiMiniInfoCell__icon{color:#2d81e0;color:var(--link_alternate,var(--vkui--color_icon_accent))}.vkuiMiniInfoCell--md-more{padding-bottom:10px;padding-top:10px}
+.vkuiMiniInfoCell{color:var(--vkui--color_text_subhead);display:flex;padding:6px var(--vkui--size_base_padding_horizontal--regular)}.vkuiMiniInfoCell--mode-accent{color:var(--vkui--color_text_primary)}.vkuiMiniInfoCell__before{color:var(--vkui--color_icon_secondary);margin-right:12px}.vkuiMiniInfoCell__middle{align-items:center;display:flex;flex:1;min-width:0;overflow:hidden}.vkuiMiniInfoCell__content{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiMiniInfoCell--textWrap-short .vkuiMiniInfoCell__content{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;max-height:60px;white-space:normal}.vkuiMiniInfoCell--textWrap-full .vkuiMiniInfoCell__content{overflow:inherit;white-space:normal}.vkuiMiniInfoCell--textWrap-nowrap .vkuiMiniInfoCell__content{flex:0 1 auto}.vkuiMiniInfoCell__after{margin-bottom:-2px;margin-left:12px;margin-top:-2px}.vkuiMiniInfoCell--mode-add,.vkuiMiniInfoCell--mode-more{color:var(--vkui--color_text_link_themed)}.vkuiMiniInfoCell--mode-add .vkuiMiniInfoCell__before,.vkuiMiniInfoCell--mode-more .vkuiMiniInfoCell__before{color:var(--vkui--color_icon_accent_themed)}.vkuiMiniInfoCell--mode-more{padding-bottom:10px;padding-top:10px}.vkuiMiniInfoCell__middle .vkuiIcon{color:var(--vkui--color_text_accent);margin-left:4px}.vkuiMiniInfoCell--mode-add .vkuiMiniInfoCell__middle .vkuiIcon,.vkuiMiniInfoCell--mode-more .vkuiMiniInfoCell__middle .vkuiIcon{color:var(--vkui--color_icon_accent_themed)}

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

@@ -19,7 +19,7 @@ export interface MiniInfoCellProps extends React.HTMLAttributes<HTMLDivElement>
      * - `add` – тип ячейки, который показывает, что взаимодействие с ней должно вызывать действие добавления чего-то.
      * - `more` – взаимодействие с такой ячейкой должно открывать какую-то подробную информацию.
      */
-    mode?: "base" | "add" | "more";
+    mode?: "base" | "accent" | "add" | "more";
     /**
      * Тип отображения текста:
      *
@@ -29,14 +29,11 @@ export interface MiniInfoCellProps extends React.HTMLAttributes<HTMLDivElement>
      */
     textWrap?: "nowrap" | "short" | "full";
     /**
-     * Стиль текста:
-     *
-     * - `primary` – используйте этот стиль, если хотите выделить информацию в общем списке.<br />Пример использования: подробная информация на странице сообщества
-     * - `secondary` – стиль по-умолчанию.
+     * Передавать `true`, если предполагается переход при клике по ячейке.
      */
-    textLevel?: "primary" | "secondary";
+    expandable?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/MiniInfoCell
  */
-export declare const MiniInfoCell: ({ before, after, mode, textWrap, textLevel, children, ...restProps }: MiniInfoCellProps) => JSX.Element;
+export declare const MiniInfoCell: ({ before, after, children, mode, textWrap, expandable, ...restProps }: MiniInfoCellProps) => JSX.Element;