@vkontakte/vkui 5.0.3 → 5.1.0

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

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "theme", "visibility", "children", "onClick"];
-import * as React from "react";
-import { classNamesString } from "../../../lib/classNames";
-import { useAppearance } from "../../../hooks/useAppearance";
-import { useAdaptivityHasPointer } from "../../../hooks/useAdaptivityHasPointer";
-import { Tappable } from "../../Tappable/Tappable";
-import { ImageBaseContext } from "../context";
-import { validateOverlayIcon } from "../validators";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { useAppearance } from '../../../hooks/useAppearance';
+import { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';
+import { Tappable } from '../../Tappable/Tappable';
+import { ImageBaseContext } from '../context';
+import { validateOverlayIcon } from '../validators';
 /**
  * Интерактивный оверлей над картинкой.
  */
@@ -21,14 +21,14 @@ export var ImageBaseOverlay = function ImageBaseOverlay(_ref) {
   var appearance = useAppearance();
   var hasPointer = useAdaptivityHasPointer();
   var theme = themeProp !== null && themeProp !== void 0 ? themeProp : appearance;
-  var visibility = visibilityProp !== null && visibilityProp !== void 0 ? visibilityProp : hasPointer ? "on-hover" : "always";
-  if (process.env.NODE_ENV === "development") {
+  var visibility = visibilityProp !== null && visibilityProp !== void 0 ? visibilityProp : hasPointer ? 'on-hover' : 'always';
+  if (process.env.NODE_ENV === 'development') {
     if (children) {
       // eslint-disable-next-line react-hooks/rules-of-hooks
       var _React$useContext = React.useContext(ImageBaseContext),
         size = _React$useContext.size;
       validateOverlayIcon(size, {
-        name: "children",
+        name: 'children',
         value: children
       });
     }
@@ -36,9 +36,9 @@ export var ImageBaseOverlay = function ImageBaseOverlay(_ref) {
   return /*#__PURE__*/React.createElement(Tappable, _extends({}, restProps, {
     type: "button",
     Component: "button",
-    className: classNamesString("vkuiImageBaseOverlay", visibility === "always" && "vkuiImageBaseOverlay--visible", theme === "light" && "vkuiImageBaseOverlay--theme-light", theme === "dark" && "vkuiImageBaseOverlay--theme-dark", className),
-    hasHover: visibility === "on-hover",
-    hoverMode: visibility === "on-hover" ? "vkuiImageBaseOverlay--visible" : undefined,
+    className: classNames("vkuiImageBaseOverlay", visibility === 'always' && "vkuiImageBaseOverlay--visible", theme === 'light' && "vkuiImageBaseOverlay--theme-light", theme === 'dark' && "vkuiImageBaseOverlay--theme-dark", className),
+    hasHover: visibility === 'on-hover',
+    hoverMode: visibility === 'on-hover' ? "vkuiImageBaseOverlay--visible" : undefined,
     focusVisibleMode: "vkuiImageBaseOverlay--focus-visible",
     hasActive: false,
     onClick: onClick

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

@@ -1 +1 @@
-{"version":3,"file":"ImageBaseOverlay.js","names":["React","classNamesString","useAppearance","useAdaptivityHasPointer","Tappable","ImageBaseContext","validateOverlayIcon","ImageBaseOverlay","className","themeProp","theme","visibilityProp","visibility","children","onClick","restProps","appearance","hasPointer","process","env","NODE_ENV","useContext","size","name","value","undefined"],"sources":["../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../../lib/classNames\";\nimport { useAppearance } from \"../../../hooks/useAppearance\";\nimport { useAdaptivityHasPointer } from \"../../../hooks/useAdaptivityHasPointer\";\nimport { Tappable } from \"../../Tappable/Tappable\";\nimport { ImageBaseContext } from \"../context\";\nimport type { ImageBaseExpectedIconProps } from \"../types\";\nimport { validateOverlayIcon } from \"../validators\";\nimport styles from \"./ImageBaseOverlay.module.css\";\n\nexport interface ImageBaseOverlayProps extends React.AriaAttributes {\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   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getOverlayIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   */\n  children: React.ReactElement<ImageBaseExpectedIconProps>;\n  className?: string;\n  onClick?: React.MouseEventHandler<HTMLElement>;\n}\n\n/**\n * Интерактивный оверлей над картинкой.\n */\nexport const ImageBaseOverlay = ({\n  className,\n  theme: themeProp,\n  visibility: visibilityProp,\n  children,\n  onClick,\n  ...restProps\n}: ImageBaseOverlayProps) => {\n  const appearance = useAppearance();\n  const hasPointer = useAdaptivityHasPointer();\n  const theme = themeProp ?? appearance;\n  const visibility = visibilityProp ?? (hasPointer ? \"on-hover\" : \"always\");\n\n  if (process.env.NODE_ENV === \"development\") {\n    if (children) {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const { size } = React.useContext(ImageBaseContext);\n      validateOverlayIcon(size, { name: \"children\", value: children });\n    }\n  }\n\n  return (\n    <Tappable\n      {...restProps}\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      {children}\n    </Tappable>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,yBAAyB;AAC1D,SAASC,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,uBAAuB,QAAQ,wCAAwC;AAChF,SAASC,QAAQ,QAAQ,yBAAyB;AAClD,SAASC,gBAAgB,QAAQ,YAAY;AAE7C,SAASC,mBAAmB,QAAQ,eAAe;AAoCnD;AACA;AACA;AACA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAOA;EAAA,IAN3BC,SAAS,QAATA,SAAS;IACFC,SAAS,QAAhBC,KAAK;IACOC,cAAc,QAA1BC,UAAU;IACVC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACJC,SAAS;EAEZ,IAAMC,UAAU,GAAGd,aAAa,EAAE;EAClC,IAAMe,UAAU,GAAGd,uBAAuB,EAAE;EAC5C,IAAMO,KAAK,GAAGD,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIO,UAAU;EACrC,IAAMJ,UAAU,GAAGD,cAAc,aAAdA,cAAc,cAAdA,cAAc,GAAKM,UAAU,GAAG,UAAU,GAAG,QAAS;EAEzE,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAIP,QAAQ,EAAE;MACZ;MACA,wBAAiBb,KAAK,CAACqB,UAAU,CAAChB,gBAAgB,CAAC;QAA3CiB,IAAI,qBAAJA,IAAI;MACZhB,mBAAmB,CAACgB,IAAI,EAAE;QAAEC,IAAI,EAAE,UAAU;QAAEC,KAAK,EAAEX;MAAS,CAAC,CAAC;IAClE;EACF;EAEA,oBACE,oBAAC,QAAQ,eACHE,SAAS;IACb,IAAI,EAAC,QAAQ;IACb,SAAS,EAAC,QAAQ;IAClB,SAAS,EAAEd,gBAAgB,yBAEzBW,UAAU,KAAK,QAAQ,mCAAuC,EAC9DF,KAAK,KAAK,OAAO,uCAA2C,EAC5DA,KAAK,KAAK,MAAM,sCAA0C,EAC1DF,SAAS,CACT;IACF,QAAQ,EAAEI,UAAU,KAAK,UAAW;IACpC,SAAS,EACPA,UAAU,KAAK,UAAU,qCAErBa,SACL;IACD,gBAAgB,uCAA4C;IAC5D,SAAS,EAAE,KAAM;IACjB,OAAO,EAAEX;EAAQ,IAEhBD,QAAQ,CACA;AAEf,CAAC"}
+{"version":3,"file":"ImageBaseOverlay.js","names":["React","classNames","useAppearance","useAdaptivityHasPointer","Tappable","ImageBaseContext","validateOverlayIcon","ImageBaseOverlay","className","themeProp","theme","visibilityProp","visibility","children","onClick","restProps","appearance","hasPointer","process","env","NODE_ENV","useContext","size","name","value","undefined"],"sources":["../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAppearance } from '../../../hooks/useAppearance';\nimport { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';\nimport { Tappable } from '../../Tappable/Tappable';\nimport { ImageBaseContext } from '../context';\nimport type { ImageBaseExpectedIconProps } from '../types';\nimport { validateOverlayIcon } from '../validators';\nimport styles from './ImageBaseOverlay.module.css';\n\nexport interface ImageBaseOverlayProps extends React.AriaAttributes {\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   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getOverlayIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   */\n  children: React.ReactElement<ImageBaseExpectedIconProps>;\n  className?: string;\n  onClick?: React.MouseEventHandler<HTMLElement>;\n}\n\n/**\n * Интерактивный оверлей над картинкой.\n */\nexport const ImageBaseOverlay = ({\n  className,\n  theme: themeProp,\n  visibility: visibilityProp,\n  children,\n  onClick,\n  ...restProps\n}: ImageBaseOverlayProps) => {\n  const appearance = useAppearance();\n  const hasPointer = useAdaptivityHasPointer();\n  const theme = themeProp ?? appearance;\n  const visibility = visibilityProp ?? (hasPointer ? 'on-hover' : 'always');\n\n  if (process.env.NODE_ENV === 'development') {\n    if (children) {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const { size } = React.useContext(ImageBaseContext);\n      validateOverlayIcon(size, { name: 'children', value: children });\n    }\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      type=\"button\"\n      Component=\"button\"\n      className={classNames(\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={visibility === 'on-hover' ? styles['ImageBaseOverlay--visible'] : undefined}\n      focusVisibleMode={styles['ImageBaseOverlay--focus-visible']}\n      hasActive={false}\n      onClick={onClick}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,uBAAuB,QAAQ,wCAAwC;AAChF,SAASC,QAAQ,QAAQ,yBAAyB;AAClD,SAASC,gBAAgB,QAAQ,YAAY;AAE7C,SAASC,mBAAmB,QAAQ,eAAe;AAoCnD;AACA;AACA;AACA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAOA;EAAA,IAN3BC,SAAS,QAATA,SAAS;IACFC,SAAS,QAAhBC,KAAK;IACOC,cAAc,QAA1BC,UAAU;IACVC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACJC,SAAS;EAEZ,IAAMC,UAAU,GAAGd,aAAa,EAAE;EAClC,IAAMe,UAAU,GAAGd,uBAAuB,EAAE;EAC5C,IAAMO,KAAK,GAAGD,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIO,UAAU;EACrC,IAAMJ,UAAU,GAAGD,cAAc,aAAdA,cAAc,cAAdA,cAAc,GAAKM,UAAU,GAAG,UAAU,GAAG,QAAS;EAEzE,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAIP,QAAQ,EAAE;MACZ;MACA,wBAAiBb,KAAK,CAACqB,UAAU,CAAChB,gBAAgB,CAAC;QAA3CiB,IAAI,qBAAJA,IAAI;MACZhB,mBAAmB,CAACgB,IAAI,EAAE;QAAEC,IAAI,EAAE,UAAU;QAAEC,KAAK,EAAEX;MAAS,CAAC,CAAC;IAClE;EACF;EAEA,oBACE,oBAAC,QAAQ,eACHE,SAAS;IACb,IAAI,EAAC,QAAQ;IACb,SAAS,EAAC,QAAQ;IAClB,SAAS,EAAEd,UAAU,yBAEnBW,UAAU,KAAK,QAAQ,mCAAuC,EAC9DF,KAAK,KAAK,OAAO,uCAA2C,EAC5DA,KAAK,KAAK,MAAM,sCAA0C,EAC1DF,SAAS,CACT;IACF,QAAQ,EAAEI,UAAU,KAAK,UAAW;IACpC,SAAS,EAAEA,UAAU,KAAK,UAAU,qCAAyCa,SAAU;IACvF,gBAAgB,uCAA4C;IAC5D,SAAS,EAAE,KAAM;IACjB,OAAO,EAAEX;EAAQ,IAEhBD,QAAQ,CACA;AAEf,CAAC"}

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

@@ -1,3 +1,3 @@
-import * as React from "react";
-import { ImageBaseContextProps } from "./types";
+import * as React from 'react';
+import { ImageBaseContextProps } from './types';
 export declare const ImageBaseContext: React.Context<ImageBaseContextProps>;

package/dist/components/ImageBase/context.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export var ImageBaseContext = /*#__PURE__*/React.createContext({
   size: 0
 });

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":["React","ImageBaseContext","createContext","size"],"sources":["../../../src/components/ImageBase/context.ts"],"sourcesContent":["import * as React from \"react\";\nimport { ImageBaseContextProps } from \"./types\";\n\nexport const ImageBaseContext = React.createContext<ImageBaseContextProps>({\n  size: 0,\n});\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,OAAO,IAAMC,gBAAgB,gBAAGD,KAAK,CAACE,aAAa,CAAwB;EACzEC,IAAI,EAAE;AACR,CAAC,CAAC"}
+{"version":3,"file":"context.js","names":["React","ImageBaseContext","createContext","size"],"sources":["../../../src/components/ImageBase/context.ts"],"sourcesContent":["import * as React from 'react';\nimport { ImageBaseContextProps } from './types';\n\nexport const ImageBaseContext = React.createContext<ImageBaseContextProps>({\n  size: 0,\n});\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,OAAO,IAAMC,gBAAgB,gBAAGD,KAAK,CAACE,aAAa,CAAwB;EACzEC,IAAI,EAAE;AACR,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","names":["getFallbackIconSizeByImageBaseSize","imageSize","MAX_SIZE","getBadgeIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize"],"sources":["../../../src/components/ImageBase/helpers.ts"],"sourcesContent":["/**\n * Возвращает размер иконки основанный на дизайн-системы.\n */\nexport function getFallbackIconSizeByImageBaseSize(\n  imageSize: number\n): 12 | 16 | 20 | 24 | 28 | 36 {\n  if (imageSize <= 20) {\n    return 12;\n  } else if (imageSize > 20 && imageSize <= 28) {\n    return 16;\n  } else if (imageSize > 28 && imageSize <= 32) {\n    return 20;\n  } else if (imageSize > 32 && imageSize <= 44) {\n    return 24;\n  } else if (imageSize > 44 && imageSize <= 64) {\n    return 28;\n  }\n  return getFallbackIconSizeByImageBaseSize.MAX_SIZE;\n}\n\ngetFallbackIconSizeByImageBaseSize.MAX_SIZE = 36 as const;\n\n/**\n * Возвращает размер иконки основанный на дизайн-системы.\n */\nexport function getBadgeIconSizeByImageBaseSize(\n  imageSize: number\n): 12 | 16 | 20 | 24 {\n  if (imageSize <= 36) {\n    return 12;\n  } else if (imageSize > 36 && imageSize <= 48) {\n    return 16;\n  } else if (imageSize > 48 && imageSize <= 64) {\n    return 20;\n  }\n  return getBadgeIconSizeByImageBaseSize.MAX_SIZE;\n}\n\ngetBadgeIconSizeByImageBaseSize.MAX_SIZE = 24 as const;\n\n/**\n * Возвращает размер иконки основанный на дизайн-системы.\n */\nexport function getOverlayIconSizeByImageBaseSize(\n  imageSize: number\n): 12 | 16 | 18 | 20 | 24 | 28 | 32 {\n  if (imageSize <= 20) {\n    return 12;\n  } else if (imageSize > 20 && imageSize <= 24) {\n    return 16;\n  } else if (imageSize > 24 && imageSize <= 28) {\n    return 18;\n  } else if (imageSize > 28 && imageSize <= 40) {\n    return 20;\n  } else if (imageSize > 40 && imageSize <= 48) {\n    return 24;\n  } else if (imageSize > 48 && imageSize <= 88) {\n    return 28;\n  }\n  return getOverlayIconSizeByImageBaseSize.MAX_SIZE;\n}\n\ngetOverlayIconSizeByImageBaseSize.MAX_SIZE = 32 as const;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,SAASA,kCAAkC,CAChDC,SAAiB,EACY;EAC7B,IAAIA,SAAS,IAAI,EAAE,EAAE;IACnB,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX;EACA,OAAOD,kCAAkC,CAACE,QAAQ;AACpD;AAEAF,kCAAkC,CAACE,QAAQ,GAAG,EAAW;;AAEzD;AACA;AACA;AACA,OAAO,SAASC,+BAA+B,CAC7CF,SAAiB,EACE;EACnB,IAAIA,SAAS,IAAI,EAAE,EAAE;IACnB,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX;EACA,OAAOE,+BAA+B,CAACD,QAAQ;AACjD;AAEAC,+BAA+B,CAACD,QAAQ,GAAG,EAAW;;AAEtD;AACA;AACA;AACA,OAAO,SAASE,iCAAiC,CAC/CH,SAAiB,EACiB;EAClC,IAAIA,SAAS,IAAI,EAAE,EAAE;IACnB,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX;EACA,OAAOG,iCAAiC,CAACF,QAAQ;AACnD;AAEAE,iCAAiC,CAACF,QAAQ,GAAG,EAAW"}
+{"version":3,"file":"helpers.js","names":["getFallbackIconSizeByImageBaseSize","imageSize","MAX_SIZE","getBadgeIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize"],"sources":["../../../src/components/ImageBase/helpers.ts"],"sourcesContent":["/**\n * Возвращает размер иконки основанный на дизайн-системы.\n */\nexport function getFallbackIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20 | 24 | 28 | 36 {\n  if (imageSize <= 20) {\n    return 12;\n  } else if (imageSize > 20 && imageSize <= 28) {\n    return 16;\n  } else if (imageSize > 28 && imageSize <= 32) {\n    return 20;\n  } else if (imageSize > 32 && imageSize <= 44) {\n    return 24;\n  } else if (imageSize > 44 && imageSize <= 64) {\n    return 28;\n  }\n  return getFallbackIconSizeByImageBaseSize.MAX_SIZE;\n}\n\ngetFallbackIconSizeByImageBaseSize.MAX_SIZE = 36 as const;\n\n/**\n * Возвращает размер иконки основанный на дизайн-системы.\n */\nexport function getBadgeIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20 | 24 {\n  if (imageSize <= 36) {\n    return 12;\n  } else if (imageSize > 36 && imageSize <= 48) {\n    return 16;\n  } else if (imageSize > 48 && imageSize <= 64) {\n    return 20;\n  }\n  return getBadgeIconSizeByImageBaseSize.MAX_SIZE;\n}\n\ngetBadgeIconSizeByImageBaseSize.MAX_SIZE = 24 as const;\n\n/**\n * Возвращает размер иконки основанный на дизайн-системы.\n */\nexport function getOverlayIconSizeByImageBaseSize(\n  imageSize: number,\n): 12 | 16 | 18 | 20 | 24 | 28 | 32 {\n  if (imageSize <= 20) {\n    return 12;\n  } else if (imageSize > 20 && imageSize <= 24) {\n    return 16;\n  } else if (imageSize > 24 && imageSize <= 28) {\n    return 18;\n  } else if (imageSize > 28 && imageSize <= 40) {\n    return 20;\n  } else if (imageSize > 40 && imageSize <= 48) {\n    return 24;\n  } else if (imageSize > 48 && imageSize <= 88) {\n    return 28;\n  }\n  return getOverlayIconSizeByImageBaseSize.MAX_SIZE;\n}\n\ngetOverlayIconSizeByImageBaseSize.MAX_SIZE = 32 as const;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,SAASA,kCAAkC,CAACC,SAAiB,EAA+B;EACjG,IAAIA,SAAS,IAAI,EAAE,EAAE;IACnB,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX;EACA,OAAOD,kCAAkC,CAACE,QAAQ;AACpD;AAEAF,kCAAkC,CAACE,QAAQ,GAAG,EAAW;;AAEzD;AACA;AACA;AACA,OAAO,SAASC,+BAA+B,CAACF,SAAiB,EAAqB;EACpF,IAAIA,SAAS,IAAI,EAAE,EAAE;IACnB,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX;EACA,OAAOE,+BAA+B,CAACD,QAAQ;AACjD;AAEAC,+BAA+B,CAACD,QAAQ,GAAG,EAAW;;AAEtD;AACA;AACA;AACA,OAAO,SAASE,iCAAiC,CAC/CH,SAAiB,EACiB;EAClC,IAAIA,SAAS,IAAI,EAAE,EAAE;IACnB,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,SAAS,GAAG,EAAE,IAAIA,SAAS,IAAI,EAAE,EAAE;IAC5C,OAAO,EAAE;EACX;EACA,OAAOG,iCAAiC,CAACF,QAAQ;AACnD;AAEAE,iCAAiC,CAACF,QAAQ,GAAG,EAAW"}

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

@@ -1,4 +1,5 @@
-export declare type ImageBaseSize = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96;
+export declare const imageBaseSizes: readonly [16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 88, 96];
+export declare type ImageBaseSize = (typeof imageBaseSizes)[number];
 export declare type ImageBaseExpectedIconProps = {
     width?: number;
     height?: number;

package/dist/components/ImageBase/types.js

@@ -1,2 +1,2 @@
-export {};
+export var imageBaseSizes = [16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 88, 96];
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/components/ImageBase/types.ts"],"sourcesContent":["export 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  className?: string;\n};\n\nexport interface ImageBaseContextProps {\n  size: ImageBaseSize | number;\n}\n"],"mappings":""}
+{"version":3,"file":"types.js","names":["imageBaseSizes"],"sources":["../../../src/components/ImageBase/types.ts"],"sourcesContent":["export const imageBaseSizes = [16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 88, 96] as const;\n\nexport type ImageBaseSize = (typeof imageBaseSizes)[number];\n\nexport type ImageBaseExpectedIconProps = {\n  width?: number;\n  height?: number;\n  className?: string;\n};\n\nexport interface ImageBaseContextProps {\n  size: ImageBaseSize | number;\n}\n"],"mappings":"AAAA,OAAO,IAAMA,cAAc,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAU"}

package/dist/components/ImageBase/validators.js

@@ -1,5 +1,6 @@
-import { warnOnce } from "../../lib/warnOnce";
-import { getBadgeIconSizeByImageBaseSize, getFallbackIconSizeByImageBaseSize, getOverlayIconSizeByImageBaseSize } from "./helpers";
+import { warnOnce } from '../../lib/warnOnce';
+import { imageBaseSizes } from './types';
+import { getBadgeIconSizeByImageBaseSize, getFallbackIconSizeByImageBaseSize, getOverlayIconSizeByImageBaseSize } from './helpers';
 
 /**
  * Пример,
@@ -9,16 +10,16 @@ import { getBadgeIconSizeByImageBaseSize, getFallbackIconSizeByImageBaseSize, ge
  * Icon12Circle2 -> 12
  */
 function parseIconSizeByDisplayName(displayName) {
-  if (typeof displayName !== "string") {
+  if (typeof displayName !== 'string') {
     return null;
   }
-  var rawSize = displayName.replace(/\d+$/g, "") // удаляем цифры в конце
-  .replace(/\D/g, ""); // удаляем всё, что не является числом
+  var rawSize = displayName.replace(/\d+$/g, '') // удаляем цифры в конце
+  .replace(/\D/g, ''); // удаляем всё, что не является числом
   var size = Number(rawSize);
   return size > 0 ? size : null;
 }
 function parseIconSizeByWidthProp(width) {
-  if (typeof width !== "string" && typeof width !== "number") {
+  if (typeof width !== 'string' && typeof width !== 'number') {
     return null;
   }
   var size = Number(width);
@@ -48,29 +49,13 @@ function validateIconComponentSizeByImageSize(imageSize, iconProp, selectorFn, l
   }
   var iconName = getElementDisplayName(iconProp.value);
   var propMessage = iconName ? "".concat(iconProp.name, "={<").concat(iconName, " />}") : iconProp.name;
-  logger("\u0420\u0430\u0437\u043C\u0435\u0440 `".concat(propMessage, "` \u043D\u0435 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u0438\u0437\u0430\u0439\u043D-\u0441\u0438\u0441\u0442\u0435\u043C\u0435. \u0414\u043B\u044F `size={").concat(imageSize, "}` \u0440\u0430\u0437\u043C\u0435\u0440 \u0438\u043A\u043E\u043D\u043A\u0438 \u0434\u043B\u044F `").concat(iconProp.name, "` \u0434\u043E\u043B\u0436\u0435\u043D \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043E\u0432\u0430\u0442\u044C <Icon").concat(result, "<name> />. \u0415\u0441\u043B\u0438 \u0442\u0430\u043A\u043E\u0433\u043E \u0440\u0430\u0437\u043C\u0435\u0440\u0430 \u043D\u0435\u0442, \u0442\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 <").concat(iconName, " width={").concat(result, "} height={").concat(result, "} />"), "log");
+  logger("\u0420\u0430\u0437\u043C\u0435\u0440 `".concat(propMessage, "` \u043D\u0435 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u0438\u0437\u0430\u0439\u043D-\u0441\u0438\u0441\u0442\u0435\u043C\u0435. \u0414\u043B\u044F `size={").concat(imageSize, "}` \u0440\u0430\u0437\u043C\u0435\u0440 \u0438\u043A\u043E\u043D\u043A\u0438 \u0434\u043B\u044F `").concat(iconProp.name, "` \u0434\u043E\u043B\u0436\u0435\u043D \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043E\u0432\u0430\u0442\u044C <Icon").concat(result, "<name> />. \u0415\u0441\u043B\u0438 \u0442\u0430\u043A\u043E\u0433\u043E \u0440\u0430\u0437\u043C\u0435\u0440\u0430 \u043D\u0435\u0442, \u0442\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 <").concat(iconName, " width={").concat(result, "} height={").concat(result, "} />"), 'log');
 }
-var warnImageBase = warnOnce("ImageBase");
+var warnImageBase = warnOnce('ImageBase');
 export function validateFallbackIcon(imageSize, iconProp) {
   return validateIconComponentSizeByImageSize(imageSize, iconProp, getFallbackIconSizeByImageBaseSize, warnImageBase);
 }
-var mapOfExpectedSize = {
-  16: true,
-  20: true,
-  24: true,
-  28: true,
-  32: true,
-  36: true,
-  40: true,
-  44: true,
-  48: true,
-  56: true,
-  64: true,
-  72: true,
-  80: true,
-  88: true,
-  96: true
-};
+var mapOfExpectedSize = new Set(imageBaseSizes);
 var arrayOfSizes = Object.keys(mapOfExpectedSize).map(function (str) {
   return Number(str);
 });
@@ -78,19 +63,19 @@ var maxSize = arrayOfSizes.reduce(function (maxSize, size) {
   return size > maxSize ? size : maxSize;
 }, 0);
 export function validateSize(imageSize) {
-  if (imageSize > maxSize || imageSize in mapOfExpectedSize) {
+  if (imageSize > maxSize || mapOfExpectedSize.has(imageSize)) {
     return;
   }
-  warnImageBase("`size={".concat(imageSize, "}` \u043D\u0435 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u0438\u0437\u0430\u0439\u043D-\u0441\u0438\u0441\u0442\u0435\u043C\u0435. \u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 \u043E\u0434\u0438\u043D \u0438\u0437 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0445 \u0432\u0430\u0440\u0438\u0430\u043D\u0442\u043E\u0432: ").concat(arrayOfSizes.join(" | ")), "log");
+  warnImageBase("`size={".concat(imageSize, "}` \u043D\u0435 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u0438\u0437\u0430\u0439\u043D-\u0441\u0438\u0441\u0442\u0435\u043C\u0435. \u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 \u043E\u0434\u0438\u043D \u0438\u0437 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0445 \u0432\u0430\u0440\u0438\u0430\u043D\u0442\u043E\u0432: ").concat(arrayOfSizes.join(' | ')), 'log');
 }
-var warnImageBaseBadge = warnOnce("ImageBase.Badge");
+var warnImageBaseBadge = warnOnce('ImageBase.Badge');
 export function validateBadgeIcon(imageSize, iconProp) {
   if (imageSize < 24 && iconProp) {
-    return warnImageBaseBadge("Не используйте бейдж при `size < 24`.", "log");
+    return warnImageBaseBadge('Не используйте бейдж при `size < 24`.', 'log');
   }
   validateIconComponentSizeByImageSize(imageSize, iconProp, getBadgeIconSizeByImageBaseSize, warnImageBaseBadge);
 }
-var warnImageBaseOverlay = warnOnce("ImageBase.Overlay");
+var warnImageBaseOverlay = warnOnce('ImageBase.Overlay');
 export function validateOverlayIcon(imageSize, iconProp) {
   validateIconComponentSizeByImageSize(imageSize, iconProp, getOverlayIconSizeByImageBaseSize, warnImageBaseOverlay);
 }

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

@@ -1 +1 @@
-{"version":3,"file":"validators.js","names":["warnOnce","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","parseIconSizeByDisplayName","displayName","rawSize","replace","size","Number","parseIconSizeByWidthProp","width","getElementDisplayName","element","type","getElementWidthProp","props","getIconSizeByElement","sizeByDisplayName","sizeByWidth","validateIconComponentSizeByImageSize","imageSize","iconProp","selectorFn","logger","iconSize","value","result","MAX_SIZE","iconName","propMessage","name","warnImageBase","validateFallbackIcon","mapOfExpectedSize","arrayOfSizes","Object","keys","map","str","maxSize","reduce","validateSize","join","warnImageBaseBadge","validateBadgeIcon","warnImageBaseOverlay","validateOverlayIcon"],"sources":["../../../src/components/ImageBase/validators.ts"],"sourcesContent":["import { warnOnce } from \"../../lib/warnOnce\";\nimport type { ImageBaseSize } from \"./types\";\nimport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from \"./helpers\";\n\n/**\n * Пример,\n *\n * Icon28User -> 28\n * Icon12Circle1 -> 12\n * Icon12Circle2 -> 12\n */\nfunction parseIconSizeByDisplayName(displayName: unknown): number | null {\n  if (typeof displayName !== \"string\") {\n    return null;\n  }\n  const rawSize = displayName\n    .replace(/\\d+$/g, \"\") // удаляем цифры в конце\n    .replace(/\\D/g, \"\"); // удаляем всё, что не является числом\n  const size = Number(rawSize);\n  return size > 0 ? size : null;\n}\n\nfunction parseIconSizeByWidthProp(width: unknown): number | null {\n  if (typeof width !== \"string\" && typeof width !== \"number\") {\n    return null;\n  }\n  const size = Number(width);\n  return size > 0 ? size : null;\n}\n\nfunction getElementDisplayName(element: JSX.Element): string | null {\n  return element.type.displayName ?? null;\n}\n\nfunction getElementWidthProp(element: JSX.Element): number | string | null {\n  return element.props.width ?? null;\n}\n\nfunction getIconSizeByElement(element: JSX.Element): number | null {\n  const sizeByDisplayName = parseIconSizeByDisplayName(\n    getElementDisplayName(element)\n  );\n  const sizeByWidth = parseIconSizeByWidthProp(getElementWidthProp(element));\n  return sizeByWidth ? sizeByWidth : sizeByDisplayName;\n}\n\ninterface IconProp {\n  name: string;\n  value: JSX.Element;\n}\n\ninterface SelectorFn {\n  (imageSize: number): number;\n  MAX_SIZE: number;\n}\n\nfunction validateIconComponentSizeByImageSize(\n  imageSize: number,\n  iconProp: IconProp,\n  selectorFn: SelectorFn,\n  logger: ReturnType<typeof warnOnce>\n) {\n  const iconSize = getIconSizeByElement(iconProp.value);\n\n  if (iconSize === null) {\n    return;\n  }\n\n  const result = selectorFn(imageSize);\n\n  if (\n    result === iconSize ||\n    (result === selectorFn.MAX_SIZE && iconSize >= result)\n  ) {\n    return;\n  }\n\n  const iconName = getElementDisplayName(iconProp.value);\n  const propMessage = iconName\n    ? `${iconProp.name}={<${iconName} />}`\n    : iconProp.name;\n\n  logger(\n    `Размер \\`${propMessage}\\` не соответствует дизайн-системе. Для \\`size={${imageSize}}\\` размер иконки для \\`${iconProp.name}\\` должен соответствовать <Icon${result}<name> />. Если такого размера нет, то используйте <${iconName} width={${result}} height={${result}} />`,\n    \"log\"\n  );\n}\n\nconst warnImageBase = warnOnce(\"ImageBase\");\n\nexport function validateFallbackIcon(imageSize: number, iconProp: IconProp) {\n  return validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getFallbackIconSizeByImageBaseSize,\n    warnImageBase\n  );\n}\n\nconst mapOfExpectedSize: { [K in ImageBaseSize]: boolean } = {\n  16: true,\n  20: true,\n  24: true,\n  28: true,\n  32: true,\n  36: true,\n  40: true,\n  44: true,\n  48: true,\n  56: true,\n  64: true,\n  72: true,\n  80: true,\n  88: true,\n  96: true,\n};\nconst arrayOfSizes = Object.keys(mapOfExpectedSize).map((str) => Number(str));\nconst maxSize = arrayOfSizes.reduce(\n  (maxSize, size) => (size > maxSize ? size : maxSize),\n  0\n);\n\nexport function validateSize(imageSize: number): void {\n  if (imageSize > maxSize || imageSize in mapOfExpectedSize) {\n    return;\n  }\n  warnImageBase(\n    `\\`size={${imageSize}}\\` не соответствует дизайн-системе. Пожалуйста, используйте один из следующих вариантов: ${arrayOfSizes.join(\n      \" | \"\n    )}`,\n    \"log\"\n  );\n}\n\nconst warnImageBaseBadge = warnOnce(\"ImageBase.Badge\");\n\nexport function validateBadgeIcon(imageSize: number, iconProp: IconProp): void {\n  if (imageSize < 24 && iconProp) {\n    return warnImageBaseBadge(\"Не используйте бейдж при `size < 24`.\", \"log\");\n  }\n  validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getBadgeIconSizeByImageBaseSize,\n    warnImageBaseBadge\n  );\n}\n\nconst warnImageBaseOverlay = warnOnce(\"ImageBase.Overlay\");\n\nexport function validateOverlayIcon(\n  imageSize: number,\n  iconProp: IconProp\n): void {\n  validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getOverlayIconSizeByImageBaseSize,\n    warnImageBaseOverlay\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"validators.js","names":["warnOnce","imageBaseSizes","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","parseIconSizeByDisplayName","displayName","rawSize","replace","size","Number","parseIconSizeByWidthProp","width","getElementDisplayName","element","type","getElementWidthProp","props","getIconSizeByElement","sizeByDisplayName","sizeByWidth","validateIconComponentSizeByImageSize","imageSize","iconProp","selectorFn","logger","iconSize","value","result","MAX_SIZE","iconName","propMessage","name","warnImageBase","validateFallbackIcon","mapOfExpectedSize","Set","arrayOfSizes","Object","keys","map","str","maxSize","reduce","validateSize","has","join","warnImageBaseBadge","validateBadgeIcon","warnImageBaseOverlay","validateOverlayIcon"],"sources":["../../../src/components/ImageBase/validators.ts"],"sourcesContent":["import { warnOnce } from '../../lib/warnOnce';\nimport { imageBaseSizes } from './types';\nimport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\n/**\n * Пример,\n *\n * Icon28User -> 28\n * Icon12Circle1 -> 12\n * Icon12Circle2 -> 12\n */\nfunction parseIconSizeByDisplayName(displayName: unknown): number | null {\n  if (typeof displayName !== 'string') {\n    return null;\n  }\n  const rawSize = displayName\n    .replace(/\\d+$/g, '') // удаляем цифры в конце\n    .replace(/\\D/g, ''); // удаляем всё, что не является числом\n  const size = Number(rawSize);\n  return size > 0 ? size : null;\n}\n\nfunction parseIconSizeByWidthProp(width: unknown): number | null {\n  if (typeof width !== 'string' && typeof width !== 'number') {\n    return null;\n  }\n  const size = Number(width);\n  return size > 0 ? size : null;\n}\n\nfunction getElementDisplayName(element: JSX.Element): string | null {\n  return element.type.displayName ?? null;\n}\n\nfunction getElementWidthProp(element: JSX.Element): number | string | null {\n  return element.props.width ?? null;\n}\n\nfunction getIconSizeByElement(element: JSX.Element): number | null {\n  const sizeByDisplayName = parseIconSizeByDisplayName(getElementDisplayName(element));\n  const sizeByWidth = parseIconSizeByWidthProp(getElementWidthProp(element));\n  return sizeByWidth ? sizeByWidth : sizeByDisplayName;\n}\n\ninterface IconProp {\n  name: string;\n  value: JSX.Element;\n}\n\ninterface SelectorFn {\n  (imageSize: number): number;\n  MAX_SIZE: number;\n}\n\nfunction validateIconComponentSizeByImageSize(\n  imageSize: number,\n  iconProp: IconProp,\n  selectorFn: SelectorFn,\n  logger: ReturnType<typeof warnOnce>,\n) {\n  const iconSize = getIconSizeByElement(iconProp.value);\n\n  if (iconSize === null) {\n    return;\n  }\n\n  const result = selectorFn(imageSize);\n\n  if (result === iconSize || (result === selectorFn.MAX_SIZE && iconSize >= result)) {\n    return;\n  }\n\n  const iconName = getElementDisplayName(iconProp.value);\n  const propMessage = iconName ? `${iconProp.name}={<${iconName} />}` : iconProp.name;\n\n  logger(\n    `Размер \\`${propMessage}\\` не соответствует дизайн-системе. Для \\`size={${imageSize}}\\` размер иконки для \\`${iconProp.name}\\` должен соответствовать <Icon${result}<name> />. Если такого размера нет, то используйте <${iconName} width={${result}} height={${result}} />`,\n    'log',\n  );\n}\n\nconst warnImageBase = warnOnce('ImageBase');\n\nexport function validateFallbackIcon(imageSize: number, iconProp: IconProp) {\n  return validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getFallbackIconSizeByImageBaseSize,\n    warnImageBase,\n  );\n}\n\nconst mapOfExpectedSize = new Set<number>(imageBaseSizes);\n\nconst arrayOfSizes = Object.keys(mapOfExpectedSize).map((str) => Number(str));\nconst maxSize = arrayOfSizes.reduce((maxSize, size) => (size > maxSize ? size : maxSize), 0);\n\nexport function validateSize(imageSize: number): void {\n  if (imageSize > maxSize || mapOfExpectedSize.has(imageSize)) {\n    return;\n  }\n  warnImageBase(\n    `\\`size={${imageSize}}\\` не соответствует дизайн-системе. Пожалуйста, используйте один из следующих вариантов: ${arrayOfSizes.join(\n      ' | ',\n    )}`,\n    'log',\n  );\n}\n\nconst warnImageBaseBadge = warnOnce('ImageBase.Badge');\n\nexport function validateBadgeIcon(imageSize: number, iconProp: IconProp): void {\n  if (imageSize < 24 && iconProp) {\n    return warnImageBaseBadge('Не используйте бейдж при `size < 24`.', 'log');\n  }\n  validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getBadgeIconSizeByImageBaseSize,\n    warnImageBaseBadge,\n  );\n}\n\nconst warnImageBaseOverlay = warnOnce('ImageBase.Overlay');\n\nexport function validateOverlayIcon(imageSize: number, iconProp: IconProp): void {\n  validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getOverlayIconSizeByImageBaseSize,\n    warnImageBaseOverlay,\n  );\n}\n"],"mappings":"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"}

package/dist/components/InfoRow/InfoRow.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export interface InfoRowProps extends React.HTMLAttributes<HTMLDivElement> {
     header: React.ReactNode;
 }

package/dist/components/InfoRow/InfoRow.js

@@ -1,11 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["header", "children", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { Subhead } from "../Typography/Subhead/Subhead";
-import { Headline } from "../Typography/Headline/Headline";
-import { hasReactNode } from "../../lib/utils";
+import * as React from 'react';
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { Subhead } from '../Typography/Subhead/Subhead';
+import { Headline } from '../Typography/Headline/Headline';
 /**
  * @see https://vkcom.github.io/VKUI/#/InfoRow
  */
@@ -16,7 +15,7 @@ export var InfoRow = function InfoRow(_ref) {
     restProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(Headline, _extends({}, restProps, {
     Component: "span",
-    className: classNamesString("vkuiInfoRow", className),
+    className: classNames("vkuiInfoRow", className),
     weight: "3"
   }), hasReactNode(header) && /*#__PURE__*/React.createElement(Subhead, {
     Component: "span",

package/dist/components/InfoRow/InfoRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoRow.js","names":["React","classNamesString","Subhead","Headline","hasReactNode","InfoRow","header","children","className","restProps"],"sources":["../../../src/components/InfoRow/InfoRow.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport styles from \"./InfoRow.module.css\";\n\nexport interface InfoRowProps extends React.HTMLAttributes<HTMLDivElement> {\n  header: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/InfoRow\n */\nexport const InfoRow = ({\n  header,\n  children,\n  className,\n  ...restProps\n}: InfoRowProps) => (\n  <Headline\n    {...restProps}\n    Component=\"span\"\n    className={classNamesString(styles[\"InfoRow\"], className)}\n    weight=\"3\"\n  >\n    {hasReactNode(header) && (\n      <Subhead Component=\"span\" className={styles[\"InfoRow__header\"]}>\n        {header}\n      </Subhead>\n    )}\n    {children}\n  </Headline>\n);\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,OAAO,QAAQ,+BAA+B;AACvD,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,YAAY,QAAQ,iBAAiB;AAO9C;AACA;AACA;AACA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAO;EAAA,IAClBC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAAA,oBAEZ,oBAAC,QAAQ,eACHA,SAAS;IACb,SAAS,EAAC,MAAM;IAChB,SAAS,EAAER,gBAAgB,gBAAoBO,SAAS,CAAE;IAC1D,MAAM,EAAC;EAAG,IAETJ,YAAY,CAACE,MAAM,CAAC,iBACnB,oBAAC,OAAO;IAAC,SAAS,EAAC,MAAM;IAAC,SAAS;EAA4B,GAC5DA,MAAM,CAEV,EACAC,QAAQ,CACA;AAAA,CACZ"}
+{"version":3,"file":"InfoRow.js","names":["React","classNames","hasReactNode","Subhead","Headline","InfoRow","header","children","className","restProps"],"sources":["../../../src/components/InfoRow/InfoRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './InfoRow.module.css';\n\nexport interface InfoRowProps extends React.HTMLAttributes<HTMLDivElement> {\n  header: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/InfoRow\n */\nexport const InfoRow = ({ header, children, className, ...restProps }: InfoRowProps) => (\n  <Headline\n    {...restProps}\n    Component=\"span\"\n    className={classNames(styles['InfoRow'], className)}\n    weight=\"3\"\n  >\n    {hasReactNode(header) && (\n      <Subhead Component=\"span\" className={styles['InfoRow__header']}>\n        {header}\n      </Subhead>\n    )}\n    {children}\n  </Headline>\n);\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,OAAO,QAAQ,+BAA+B;AACvD,SAASC,QAAQ,QAAQ,iCAAiC;AAO1D;AACA;AACA;AACA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAO;EAAA,IAAMC,MAAM,QAANA,MAAM;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAAA,oBACjE,oBAAC,QAAQ,eACHA,SAAS;IACb,SAAS,EAAC,MAAM;IAChB,SAAS,EAAER,UAAU,gBAAoBO,SAAS,CAAE;IACpD,MAAM,EAAC;EAAG,IAETN,YAAY,CAACI,MAAM,CAAC,iBACnB,oBAAC,OAAO;IAAC,SAAS,EAAC,MAAM;IAAC,SAAS;EAA4B,GAC5DA,MAAM,CAEV,EACAC,QAAQ,CACA;AAAA,CACZ"}

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

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { FormFieldProps } from "../FormField/FormField";
-import { HasAlign, HasRef, HasRootRef } from "../../types";
+import * as React from 'react';
+import { FormFieldProps } from '../FormField/FormField';
+import { HasAlign, HasRef, HasRootRef } from '../../types';
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement>, HasRootRef<HTMLDivElement>, HasAlign, FormFieldProps {
 }
 /**

package/dist/components/Input/Input.js

@@ -1,17 +1,17 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["type", "align", "getRef", "className", "getRootRef", "style", "before", "after", "status"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { FormField } from "../FormField/FormField";
-import { getSizeYClassName } from "../../helpers/getSizeYClassName";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { FormField } from '../FormField/FormField';
+import { getSizeYClassName } from '../../helpers/getSizeYClassName';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
 /**
  * @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,
+    type = _ref$type === void 0 ? 'text' : _ref$type,
     align = _ref.align,
     getRef = _ref.getRef,
     className = _ref.className,
@@ -25,7 +25,7 @@ export var Input = function Input(_ref) {
     sizeY = _useAdaptivity.sizeY;
   return /*#__PURE__*/React.createElement(FormField, {
     style: style,
-    className: classNamesString("vkuiInput", align && styles["Input--align-".concat(align)], getSizeYClassName("vkuiInput", sizeY), before && "vkuiInput--hasBefore", after && "vkuiInput--hasAfter", className),
+    className: classNames("vkuiInput", align && styles["Input--align-".concat(align)], getSizeYClassName("vkuiInput", sizeY), before && "vkuiInput--hasBefore", after && "vkuiInput--hasAfter", className),
     getRootRef: getRootRef,
     before: before,
     after: after,

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["React","classNamesString","FormField","getSizeYClassName","useAdaptivity","Input","type","align","getRef","className","getRootRef","style","before","after","status","restProps","sizeY","styles","disabled"],"sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } 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 styles from \"./Input.module.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      style={style}\n      className={classNamesString(\n        styles[\"Input\"],\n        align && styles[`Input--align-${align}`],\n        getSizeYClassName(styles[\"Input\"], sizeY),\n        before && styles[\"Input--hasBefore\"],\n        after && styles[\"Input--hasAfter\"],\n        className\n      )}\n      getRootRef={getRootRef}\n      before={before}\n      after={after}\n      disabled={restProps.disabled}\n      status={status}\n    >\n      <input\n        {...restProps}\n        type={type}\n        className={styles[\"Input__el\"]}\n        ref={getRef}\n      />\n    </FormField>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,SAAS,QAAwB,wBAAwB;AAElE,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,aAAa,QAAQ,2BAA2B;AAUzD;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAWA;EAAA,qBAVhBC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IACbC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACHC,SAAS;EAEZ,qBAAkBX,aAAa,EAAE;IAAzBY,KAAK,kBAALA,KAAK;EAEb,oBACE,oBAAC,SAAS;IACR,KAAK,EAAEL,KAAM;IACb,SAAS,EAAEV,gBAAgB,cAEzBM,KAAK,IAAIU,MAAM,wBAAiBV,KAAK,EAAG,EACxCJ,iBAAiB,cAAkBa,KAAK,CAAC,EACzCJ,MAAM,0BAA8B,EACpCC,KAAK,yBAA6B,EAClCJ,SAAS,CACT;IACF,UAAU,EAAEC,UAAW;IACvB,MAAM,EAAEE,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,QAAQ,EAAEE,SAAS,CAACG,QAAS;IAC7B,MAAM,EAAEJ;EAAO,gBAEf,0CACMC,SAAS;IACb,IAAI,EAAET,IAAK;IACX,SAAS,iBAAsB;IAC/B,GAAG,EAAEE;EAAO,GACZ,CACQ;AAEhB,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"Input.js","names":["React","classNames","FormField","getSizeYClassName","useAdaptivity","Input","type","align","getRef","className","getRootRef","style","before","after","status","restProps","sizeY","styles","disabled"],"sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport styles from './Input.module.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      style={style}\n      className={classNames(\n        styles['Input'],\n        align && styles[`Input--align-${align}`],\n        getSizeYClassName(styles['Input'], sizeY),\n        before && styles['Input--hasBefore'],\n        after && styles['Input--hasAfter'],\n        className,\n      )}\n      getRootRef={getRootRef}\n      before={before}\n      after={after}\n      disabled={restProps.disabled}\n      status={status}\n    >\n      <input {...restProps} type={type} className={styles['Input__el']} ref={getRef} />\n    </FormField>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,SAAS,QAAwB,wBAAwB;AAElE,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,aAAa,QAAQ,2BAA2B;AAUzD;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAWA;EAAA,qBAVhBC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IACbC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACHC,SAAS;EAEZ,qBAAkBX,aAAa,EAAE;IAAzBY,KAAK,kBAALA,KAAK;EAEb,oBACE,oBAAC,SAAS;IACR,KAAK,EAAEL,KAAM;IACb,SAAS,EAAEV,UAAU,cAEnBM,KAAK,IAAIU,MAAM,wBAAiBV,KAAK,EAAG,EACxCJ,iBAAiB,cAAkBa,KAAK,CAAC,EACzCJ,MAAM,0BAA8B,EACpCC,KAAK,yBAA6B,EAClCJ,SAAS,CACT;IACF,UAAU,EAAEC,UAAW;IACvB,MAAM,EAAEE,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,QAAQ,EAAEE,SAAS,CAACG,QAAS;IAC7B,MAAM,EAAEJ;EAAO,gBAEf,0CAAWC,SAAS;IAAE,IAAI,EAAET,IAAK;IAAC,SAAS,iBAAsB;IAAC,GAAG,EAAEE;EAAO,GAAG,CACvE;AAEhB,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}

package/dist/components/InputLike/InputLike.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasRootRef } from '../../types';
 export interface InputLikeProps extends React.HTMLAttributes<HTMLSpanElement>, HasRootRef<HTMLSpanElement> {
     length: number;
     index: number;

package/dist/components/InputLike/InputLike.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["value", "length", "index", "onElementSelect", "onClick", "onFocus", "getRootRef", "className"];
-import * as React from "react";
-import { callMultiple } from "../../lib/callMultiple";
-import { stopPropagation } from "../../lib/utils";
-import { classNamesString } from "../../lib/classNames";
+import * as React from 'react';
+import { callMultiple } from '../../lib/callMultiple';
+import { stopPropagation } from '../../lib/utils';
+import { classNames } from '@vkontakte/vkjs';
 var MASK_SYMBOL = String.fromCharCode(0x2007);
 function getMaskElements(length) {
   var result = [];
@@ -32,7 +32,7 @@ export var InputLike = function InputLike(_ref) {
     onElementSelect === null || onElementSelect === void 0 ? void 0 : onElementSelect(index);
   }, [index, onElementSelect]);
   return /*#__PURE__*/React.createElement("span", _extends({
-    className: classNamesString("vkuiInputLike", (value === null || value === void 0 ? void 0 : value.length) === length && "vkuiInputLike--full", className),
+    className: classNames("vkuiInputLike", (value === null || value === void 0 ? void 0 : value.length) === length && "vkuiInputLike--full", className),
     tabIndex: 0,
     ref: getRootRef,
     onClick: callMultiple(onClick, handleElementSelect),
@@ -42,5 +42,5 @@ export var InputLike = function InputLike(_ref) {
     className: "vkuiInputLike__last_character"
   }, value.slice(length - 1)), getMaskElements(length - ((_value$length = value === null || value === void 0 ? void 0 : value.length) !== null && _value$length !== void 0 ? _value$length : 0)));
 };
-InputLike.displayName = "InputLike";
+InputLike.displayName = 'InputLike';
 //# sourceMappingURL=InputLike.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputLike.js","names":["React","callMultiple","stopPropagation","classNamesString","MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","InputLike","value","onElementSelect","onClick","onFocus","getRootRef","className","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 { classNamesString } from \"../../lib/classNames\";\nimport { HasRootRef } from \"../../types\";\nimport styles from \"./InputLike.module.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} className={styles[\"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  className,\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      className={classNamesString(\n        styles[\"InputLike\"],\n        value?.length === length && styles[`InputLike--full`],\n        className\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} className={styles[\"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,KAAK,MAAM,OAAO;AAC9B,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,eAAe,QAAQ,iBAAiB;AACjD,SAASC,gBAAgB,QAAQ,sBAAsB;AAavD,IAAMC,WAAW,GAAGC,MAAM,CAACC,YAAY,CAAC,MAAM,CAAC;AAE/C,SAASC,eAAe,CAACC,MAAc,EAAE;EACvC,IAAMC,MAAM,GAAG,EAAE;EACjB,KAAK,IAAIC,MAAK,GAAG,CAAC,EAAEA,MAAK,GAAGF,MAAM,EAAEE,MAAK,IAAI,CAAC,EAAE;IAC9CD,MAAM,CAACE,IAAI,eACT;MAAM,GAAG,EAAED,MAAM;MAAC,SAAS;IAA4B,GACpDN,WAAW,CACP,CACR;EACH;EACA,OAAOK,MAAM;AACf;AAEA,OAAO,IAAMG,SAAS,GAAG,SAAZA,SAAS,OAUA;EAAA;EAAA,IATpBC,KAAK,QAALA,KAAK;IACLL,MAAM,QAANA,MAAM;IACNE,KAAK,QAALA,KAAK;IACLI,eAAe,QAAfA,eAAe;IACfC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,KAAK;EAER,IAAMC,mBAAmB,GAAGpB,KAAK,CAACqB,WAAW,CAC3C,UAACC,KAAwC,EAAK;IAC5CpB,eAAe,CAACoB,KAAK,CAAC;IACtBR,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAGJ,KAAK,CAAC;EAC1B,CAAC,EACD,CAACA,KAAK,EAAEI,eAAe,CAAC,CACzB;EAED,oBACE;IACE,SAAS,EAAEX,gBAAgB,kBAEzB,CAAAU,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEL,MAAM,MAAKA,MAAM,yBAA6B,EACrDU,SAAS,CACT;IACF,QAAQ,EAAE,CAAE;IACZ,GAAG,EAAED,UAAW;IAChB,OAAO,EAAEhB,YAAY,CAACc,OAAO,EAAEK,mBAAmB,CAAE;IACpD,OAAO,EAAEnB,YAAY,CAACC,eAAe,EAAEc,OAAO;EAAE,GAC5CG,KAAK,GAERN,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEU,KAAK,CAAC,CAAC,EAAEf,MAAM,GAAG,CAAC,CAAC,EAC3B,CAAAK,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEU,KAAK,CAACf,MAAM,GAAG,CAAC,CAAC,kBACvB;IAAM,GAAG,EAAEE,KAAM;IAAC,SAAS;EAAsC,GAC9DG,KAAK,CAACU,KAAK,CAACf,MAAM,GAAG,CAAC,CAAC,CAE3B,EACAD,eAAe,CAACC,MAAM,qBAAIK,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEL,MAAM,yDAAI,CAAC,CAAC,CAAC,CAC1C;AAEX,CAAC;AAEDI,SAAS,CAACY,WAAW,GAAG,WAAW"}
+{"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","className","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 '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport styles from './InputLike.module.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} className={styles['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  className,\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      className={classNames(\n        styles['InputLike'],\n        value?.length === length && styles[`InputLike--full`],\n        className,\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} className={styles['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,KAAK,MAAM,OAAO;AAC9B,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,eAAe,QAAQ,iBAAiB;AACjD,SAASC,UAAU,QAAQ,iBAAiB;AAa5C,IAAMC,WAAW,GAAGC,MAAM,CAACC,YAAY,CAAC,MAAM,CAAC;AAE/C,SAASC,eAAe,CAACC,MAAc,EAAE;EACvC,IAAMC,MAAM,GAAG,EAAE;EACjB,KAAK,IAAIC,MAAK,GAAG,CAAC,EAAEA,MAAK,GAAGF,MAAM,EAAEE,MAAK,IAAI,CAAC,EAAE;IAC9CD,MAAM,CAACE,IAAI,eACT;MAAM,GAAG,EAAED,MAAM;MAAC,SAAS;IAA4B,GACpDN,WAAW,CACP,CACR;EACH;EACA,OAAOK,MAAM;AACf;AAEA,OAAO,IAAMG,SAAS,GAAG,SAAZA,SAAS,OAUA;EAAA;EAAA,IATpBC,KAAK,QAALA,KAAK;IACLL,MAAM,QAANA,MAAM;IACNE,KAAK,QAALA,KAAK;IACLI,eAAe,QAAfA,eAAe;IACfC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,KAAK;EAER,IAAMC,mBAAmB,GAAGpB,KAAK,CAACqB,WAAW,CAC3C,UAACC,KAAwC,EAAK;IAC5CpB,eAAe,CAACoB,KAAK,CAAC;IACtBR,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAGJ,KAAK,CAAC;EAC1B,CAAC,EACD,CAACA,KAAK,EAAEI,eAAe,CAAC,CACzB;EAED,oBACE;IACE,SAAS,EAAEX,UAAU,kBAEnB,CAAAU,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEL,MAAM,MAAKA,MAAM,yBAA6B,EACrDU,SAAS,CACT;IACF,QAAQ,EAAE,CAAE;IACZ,GAAG,EAAED,UAAW;IAChB,OAAO,EAAEhB,YAAY,CAACc,OAAO,EAAEK,mBAAmB,CAAE;IACpD,OAAO,EAAEnB,YAAY,CAACC,eAAe,EAAEc,OAAO;EAAE,GAC5CG,KAAK,GAERN,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEU,KAAK,CAAC,CAAC,EAAEf,MAAM,GAAG,CAAC,CAAC,EAC3B,CAAAK,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEU,KAAK,CAACf,MAAM,GAAG,CAAC,CAAC,kBACvB;IAAM,GAAG,EAAEE,KAAM;IAAC,SAAS;EAAsC,GAC9DG,KAAK,CAACU,KAAK,CAACf,MAAM,GAAG,CAAC,CAAC,CAE3B,EACAD,eAAe,CAACC,MAAM,qBAAIK,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEL,MAAM,yDAAI,CAAC,CAAC,CAAC,CAC1C;AAEX,CAAC;AAEDI,SAAS,CAACY,WAAW,GAAG,WAAW"}

package/dist/components/InputLike/InputLikeDivider.d.ts

@@ -1,2 +1,2 @@
-import * as React from "react";
+import * as React from 'react';
 export declare const InputLikeDivider: ({ children, className, ...props }: React.InputHTMLAttributes<HTMLSpanElement>) => JSX.Element;

package/dist/components/InputLike/InputLikeDivider.js

@@ -1,14 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
 export var InputLikeDivider = function InputLikeDivider(_ref) {
   var children = _ref.children,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement("span", _extends({
-    className: classNamesString("vkuiInputLikeDivider", className)
+    className: classNames("vkuiInputLikeDivider", className)
   }, props), children);
 };
 //# sourceMappingURL=InputLikeDivider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputLikeDivider.js","names":["React","classNamesString","InputLikeDivider","children","className","props"],"sources":["../../../src/components/InputLike/InputLikeDivider.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport styles from \"./InputLikeDivider.module.css\";\n\nexport const InputLikeDivider = ({\n  children,\n  className,\n  ...props\n}: React.InputHTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={classNamesString(styles[\"InputLikeDivider\"], className)}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AAGvD,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAIqB;EAAA,IAHhDC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,KAAK;EAER,oBACE;IACE,SAAS,EAAEJ,gBAAgB,yBAA6BG,SAAS;EAAE,GAC/DC,KAAK,GAERF,QAAQ,CACJ;AAEX,CAAC"}
+{"version":3,"file":"InputLikeDivider.js","names":["React","classNames","InputLikeDivider","children","className","props"],"sources":["../../../src/components/InputLike/InputLikeDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './InputLikeDivider.module.css';\n\nexport const InputLikeDivider = ({\n  children,\n  className,\n  ...props\n}: React.InputHTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span className={classNames(styles['InputLikeDivider'], className)} {...props}>\n      {children}\n    </span>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAG5C,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAIqB;EAAA,IAHhDC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,KAAK;EAER,oBACE;IAAM,SAAS,EAAEJ,UAAU,yBAA6BG,SAAS;EAAE,GAAKC,KAAK,GAC1EF,QAAQ,CACJ;AAEX,CAAC"}

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TappableProps } from "../Tappable/Tappable";
+import { TappableProps } from '../Tappable/Tappable';
 export interface LinkProps extends TappableProps {
     /**
      * Включает состояние `visited`, которое позволяет пользователю понять посещал ли он ссылку или нет

package/dist/components/Link/Link.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["hasVisited", "children", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { Tappable } from "../Tappable/Tappable";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { Tappable } from '../Tappable/Tappable';
 /**
  * @see https://vkcom.github.io/VKUI/#/Link
  */
@@ -13,9 +13,9 @@ export var Link = function Link(_ref) {
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(Tappable, _extends({
-    Component: restProps.href ? "a" : "button"
+    Component: restProps.href ? 'a' : 'button'
   }, restProps, {
-    className: classNamesString("vkuiLink", hasVisited && "vkuiLink--has-visited", className),
+    className: classNames("vkuiLink", hasVisited && "vkuiLink--has-visited", className),
     hasHover: false,
     activeMode: "opacity",
     focusVisibleMode: "vkuiLink--focus-visible"

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

@@ -1 +1 @@
-{"version":3,"file":"Link.js","names":["React","classNamesString","Tappable","Link","hasVisited","children","className","restProps","href"],"sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { TappableProps, Tappable } from \"../Tappable/Tappable\";\nimport styles from \"./Link.module.css\";\n\nexport interface LinkProps extends TappableProps {\n  /**\n   * Включает состояние `visited`, которое позволяет пользователю понять посещал ли он ссылку или нет\n   */\n  hasVisited?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Link\n */\nexport const Link = ({\n  hasVisited,\n  children,\n  className,\n  ...restProps\n}: LinkProps) => {\n  return (\n    <Tappable\n      Component={restProps.href ? \"a\" : \"button\"}\n      {...restProps}\n      className={classNamesString(\n        styles[\"Link\"],\n        hasVisited && styles[\"Link--has-visited\"],\n        className\n      )}\n      hasHover={false}\n      activeMode=\"opacity\"\n      focusVisibleMode={styles[\"Link--focus-visible\"]}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAAwBC,QAAQ,QAAQ,sBAAsB;AAU9D;AACA;AACA;AACA,OAAO,IAAMC,IAAI,GAAG,SAAPA,IAAI,OAKA;EAAA,IAJfC,UAAU,QAAVA,UAAU;IACVC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,oBACE,oBAAC,QAAQ;IACP,SAAS,EAAEA,SAAS,CAACC,IAAI,GAAG,GAAG,GAAG;EAAS,GACvCD,SAAS;IACb,SAAS,EAAEN,gBAAgB,aAEzBG,UAAU,2BAA+B,EACzCE,SAAS,CACT;IACF,QAAQ,EAAE,KAAM;IAChB,UAAU,EAAC,SAAS;IACpB,gBAAgB;EAAgC,IAE/CD,QAAQ,CACA;AAEf,CAAC"}
+{"version":3,"file":"Link.js","names":["React","classNames","Tappable","Link","hasVisited","children","className","restProps","href"],"sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { TappableProps, Tappable } from '../Tappable/Tappable';\nimport styles from './Link.module.css';\n\nexport interface LinkProps extends TappableProps {\n  /**\n   * Включает состояние `visited`, которое позволяет пользователю понять посещал ли он ссылку или нет\n   */\n  hasVisited?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Link\n */\nexport const Link = ({ hasVisited, children, className, ...restProps }: LinkProps) => {\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      className={classNames(styles['Link'], hasVisited && styles['Link--has-visited'], className)}\n      hasHover={false}\n      activeMode=\"opacity\"\n      focusVisibleMode={styles['Link--focus-visible']}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAAwBC,QAAQ,QAAQ,sBAAsB;AAU9D;AACA;AACA;AACA,OAAO,IAAMC,IAAI,GAAG,SAAPA,IAAI,OAAqE;EAAA,IAA/DC,UAAU,QAAVA,UAAU;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAClE,oBACE,oBAAC,QAAQ;IACP,SAAS,EAAEA,SAAS,CAACC,IAAI,GAAG,GAAG,GAAG;EAAS,GACvCD,SAAS;IACb,SAAS,EAAEN,UAAU,aAAiBG,UAAU,2BAA+B,EAAEE,SAAS,CAAE;IAC5F,QAAQ,EAAE,KAAM;IAChB,UAAU,EAAC,SAAS;IACpB,gBAAgB;EAAgC,IAE/CD,QAAQ,CACA;AAEf,CAAC"}

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export declare type ListProps = React.HTMLAttributes<HTMLDivElement>;
 /**
  * @see https://vkcom.github.io/VKUI/#/List

package/dist/components/List/List.js

@@ -2,9 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { ListContext } from "./ListContext";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { ListContext } from './ListContext';
 /**
  * @see https://vkcom.github.io/VKUI/#/List
  */
@@ -19,7 +19,7 @@ export var List = function List(_ref) {
   return /*#__PURE__*/React.createElement("div", _extends({
     role: "list"
   }, restProps, {
-    className: classNamesString("vkuiList", isDragging && "vkuiList--dragging", className)
+    className: classNames("vkuiList", isDragging && "vkuiList--dragging", className)
   }), /*#__PURE__*/React.createElement(ListContext.Provider, {
     value: React.useMemo(function () {
       return {