@vkontakte/vkui 6.1.2 → 6.2.1

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { ImageBaseContext } from '../context';\nimport type { ImageBaseExpectedIconProps } from '../types';\nimport { validateBadgeIcon } from '../validators';\nimport styles from './ImageBaseBadge.module.css';\n\nconst backgroundStyles = {\n  stroke: styles['ImageBaseBadge--background-stroke'],\n  shadow: styles['ImageBaseBadge--background-shadow'],\n};\n\nexport interface ImageBaseBadgeProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Вид подложки под иконку.\n   *\n   * - `\"stroke\"` – имитирует вырез (⚠️ если фон под компонентом динамический, то ожидайте баг).\n   * - `\"shadow\"` – добавляет небольшую тень.\n   */\n  background?: 'stroke' | 'shadow';\n  /**\n   * Принимает иконку.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getBadgeIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   */\n  children: React.ReactElement<ImageBaseExpectedIconProps>;\n}\n\n/**\n * Бейдж в правом нижнем углу компонента.\n *\n * > Не используйте при `size < 24`\n */\nexport const ImageBaseBadge = ({ background = 'shadow', ...restProps }: ImageBaseBadgeProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    if (restProps.children) {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const { size } = React.useContext(ImageBaseContext);\n      validateBadgeIcon(size, { name: 'children', value: restProps.children });\n    }\n  }\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(styles['ImageBaseBadge'], backgroundStyles[background])}\n    />\n  );\n};\n\nImageBaseBadge.displayName = 'ImageBaseBadge';\n"],"names":["React","classNames","RootComponent","ImageBaseContext","validateBadgeIcon","styles","backgroundStyles","stroke","shadow","ImageBaseBadge","background","restProps","process","env","NODE_ENV","children","size","useContext","name","value","baseClassName","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAoC;AAClE,SAASC,gBAAgB,QAAQ,aAAa;AAE9C,SAASC,iBAAiB,QAAQ,gBAAgB;AAClD,OAAOC,YAAY,8BAA8B;AAEjD,MAAMC,mBAAmB;IACvBC,QAAQF,MAAM,CAAC,oCAAoC;IACnDG,QAAQH,MAAM,CAAC,oCAAoC;AACrD;AAwBA;;;;CAIC,GACD,OAAO,MAAMI,iBAAiB,CAAC,EAAEC,aAAa,QAAQ,EAAE,GAAGC,WAAgC;IACzF,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIH,UAAUI,QAAQ,EAAE;YACtB,sDAAsD;YACtD,MAAM,EAAEC,IAAI,EAAE,GAAGhB,MAAMiB,UAAU,CAACd;YAClCC,kBAAkBY,MAAM;gBAAEE,MAAM;gBAAYC,OAAOR,UAAUI,QAAQ;YAAC;QACxE;IACF;IAEA,qBACE,KAACb;QACE,GAAGS,SAAS;QACbS,eAAenB,WAAWI,MAAM,CAAC,iBAAiB,EAAEC,gBAAgB,CAACI,WAAW;;AAGtF,EAAE;AAEFD,eAAeY,WAAW,GAAG"}
+{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { ImageBaseContext } from '../context';\nimport type { ImageBaseExpectedIconProps } from '../types';\nimport { validateBadgeIcon } from '../validators';\nimport styles from './ImageBaseBadge.module.css';\n\nconst backgroundStyles = {\n  stroke: styles['ImageBaseBadge--background-stroke'],\n  shadow: styles['ImageBaseBadge--background-shadow'],\n};\n\nexport interface ImageBaseBadgeProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Вид подложки под иконку.\n   *\n   * - `\"stroke\"` – имитирует вырез (⚠️ если фон под компонентом динамический, то ожидайте баг).\n   * - `\"shadow\"` – добавляет небольшую тень.\n   */\n  background?: 'stroke' | 'shadow';\n  /**\n   * Принимает иконку.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getBadgeIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   */\n  children: React.ReactElement<ImageBaseExpectedIconProps>;\n}\n\n/**\n * Бейдж в правом нижнем углу компонента.\n *\n * > Не используйте при `size < 24`\n */\nexport const ImageBaseBadge = ({ background = 'shadow', ...restProps }: ImageBaseBadgeProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    if (restProps.children) {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const { size } = React.useContext(ImageBaseContext);\n      validateBadgeIcon(size, { name: 'children', value: restProps.children });\n    }\n  }\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(styles['ImageBaseBadge'], backgroundStyles[background])}\n    />\n  );\n};\n\nImageBaseBadge.displayName = 'ImageBaseBadge';\n"],"names":["React","classNames","RootComponent","ImageBaseContext","validateBadgeIcon","styles","backgroundStyles","stroke","shadow","ImageBaseBadge","background","restProps","process","env","NODE_ENV","children","size","useContext","name","value","baseClassName","displayName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAoC;AAClE,SAASC,gBAAgB,QAAQ,aAAa;AAE9C,SAASC,iBAAiB,QAAQ,gBAAgB;AAClD,OAAOC,YAAY,8BAA8B;AAEjD,MAAMC,mBAAmB;IACvBC,QAAQF,MAAM,CAAC,oCAAoC;IACnDG,QAAQH,MAAM,CAAC,oCAAoC;AACrD;AAwBA;;;;CAIC,GACD,OAAO,MAAMI,iBAAiB,CAAC,EAAEC,aAAa,QAAQ,EAAE,GAAGC,WAAgC;IACzF,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIH,UAAUI,QAAQ,EAAE;YACtB,sDAAsD;YACtD,MAAM,EAAEC,IAAI,EAAE,GAAGhB,MAAMiB,UAAU,CAACd;YAClCC,kBAAkBY,MAAM;gBAAEE,MAAM;gBAAYC,OAAOR,UAAUI,QAAQ;YAAC;QACxE;IACF;IAEA,qBACE,KAACb;QACE,GAAGS,SAAS;QACbS,eAAenB,WAAWI,MAAM,CAAC,iBAAiB,EAAEC,gBAAgB,CAACI,WAAW;;AAGtF,EAAE;AAEFD,eAAeY,WAAW,GAAG"}

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

@@ -1,42 +1,8 @@
 import * as React from 'react';
-import type { ImageBaseExpectedIconProps } from '../types';
-export interface ImageBaseOverlayProps extends React.AriaAttributes {
-    /**
-     * Задаёт тему оформления.
-     *
-     * > По умолчанию берётся из параметра `appearance` в `ConfigProvider`.
-     */
-    theme?: 'dark' | 'light';
-    /**
-     * Определяет каким образом должен показываться оверлей.
-     *
-     * - `"on-hover"` – на наведение указателя мыши.
-     * - `"always"` – всегда показывать.
-     *
-     * > По умолчанию определяется в зависимости от того, есть ли у пользователя мышь или нет.
-     */
-    visibility?: 'on-hover' | 'always';
-    /**
-     * Принимает иконку.
-     *
-     *
-     * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getOverlayIconSizeByImageBaseSize()`.
-     *
-     * > Предпочтительней использовать иконки из `@vkontakte/icons`.
-     *
-     * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же
-     * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы
-     * > использовали иконку.
-     */
-    children: React.ReactElement<ImageBaseExpectedIconProps>;
-    className?: string;
-    onClick?: React.MouseEventHandler<HTMLElement>;
-}
+import type { ImageBaseOverlayInteractiveProps, ImageBaseOverlayNonInteractiveProps } from './types';
+export type ImageBaseOverlayProps = ImageBaseOverlayInteractiveProps | ImageBaseOverlayNonInteractiveProps;
 /**
- * Интерактивный оверлей над картинкой.
+ * Оверлей над картинкой.
  */
-export declare const ImageBaseOverlay: {
-    ({ className, theme: themeProp, visibility: visibilityProp, children, onClick: onClickProp, ...restProps }: ImageBaseOverlayProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const ImageBaseOverlay: React.FC<ImageBaseOverlayProps>;
 //# sourceMappingURL=ImageBaseOverlay.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ImageBaseOverlay.d.ts","sourceRoot":"","sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAI3D,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc;IACjE;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACnC;;;;;;;;;;;OAWG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB;gHAO1B,qBAAqB;;CAsCvB,CAAC"}
+{"version":3,"file":"ImageBaseOverlay.d.ts","sourceRoot":"","sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EACV,gCAAgC,EAChC,mCAAmC,EACpC,MAAM,SAAS,CAAC;AAGjB,MAAM,MAAM,qBAAqB,GAC7B,gCAAgC,GAChC,mCAAmC,CAAC;AAiExC;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA6B5D,CAAC"}

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

@@ -1,20 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { classNames, noop } from '@vkontakte/vkjs';
+import { classNames } from '@vkontakte/vkjs';
+import { useKeyboard } from '../../../components/Clickable/useKeyboard';
 import { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';
 import { useAppearance } from '../../../hooks/useAppearance';
-import { focusVisiblePresetModeClassNames } from '../../../hooks/useFocusVisibleClassName';
-import { Tappable } from '../../Tappable/Tappable';
+import { useExternRef } from '../../../hooks/useExternRef';
+import { useFocusVisible } from '../../../hooks/useFocusVisible';
+import { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';
 import { ImageBaseContext } from '../context';
 import { validateOverlayIcon } from '../validators';
+import { useNonInteractiveOverlayProps } from './hooks';
 import styles from './ImageBaseOverlay.module.css';
-/**
- * Интерактивный оверлей над картинкой.
- */ export const ImageBaseOverlay = ({ className, theme: themeProp, visibility: visibilityProp, children, onClick: onClickProp, ...restProps })=>{
-    const appearance = useAppearance();
-    const hasPointer = useAdaptivityHasPointer();
-    const theme = themeProp ?? appearance;
-    const visibility = visibilityProp ?? (hasPointer ? 'on-hover' : 'always');
+const ImageBaseOverlayInteractive = ({ children, className, getRootRef, disableInteractive, overlayShown, ...restProps })=>{
+    const { focusVisible, ...focusEvents } = useFocusVisible();
+    const focusVisibleClassNames = useFocusVisibleClassName({
+        focusVisible,
+        mode: 'inside'
+    });
+    const keyboardHandlers = useKeyboard();
     if (process.env.NODE_ENV === 'development') {
         if (children) {
             // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -25,18 +28,51 @@ import styles from './ImageBaseOverlay.module.css';
             });
         }
     }
-    const onClick = onClickProp ?? visibility === 'on-hover' ? noop : undefined;
-    return /*#__PURE__*/ _jsx(Tappable, {
+    return /*#__PURE__*/ _jsx("div", {
         ...restProps,
-        className: classNames(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: classNames(focusVisiblePresetModeClassNames['inside'], styles['ImageBaseOverlay--visible']),
-        hasActive: false,
-        onClick: onClick,
+        tabIndex: 0,
+        role: "button",
+        className: classNames(styles['ImageBaseOverlay--clickable'], (focusVisible || overlayShown) && styles['ImageBaseOverlay--visible'], focusVisibleClassNames, className),
+        ref: getRootRef,
+        ...focusEvents,
+        ...keyboardHandlers,
         children: children
     });
 };
+const ImageBaseOverlayNonInteractive = ({ className, getRootRef, disableInteractive, overlayShown: overlayShownProps, ...restProps })=>{
+    const rootRef = useExternRef(getRootRef);
+    const { shown: overlayShown, onClick: onOverlayClick } = useNonInteractiveOverlayProps(rootRef);
+    return /*#__PURE__*/ _jsx("div", {
+        ...restProps,
+        ref: rootRef,
+        className: classNames((overlayShown || overlayShownProps) && styles['ImageBaseOverlay--visible'], className),
+        onClick: onOverlayClick
+    });
+};
+/**
+ * Оверлей над картинкой.
+ */ export const ImageBaseOverlay = ({ className, theme: themeProp, visibility: visibilityProp, ...restProps })=>{
+    const appearance = useAppearance();
+    const hasPointer = useAdaptivityHasPointer();
+    const theme = themeProp ?? appearance;
+    const visibility = visibilityProp ?? (hasPointer ? 'on-hover' : 'always');
+    const commonClassNames = classNames(styles['ImageBaseOverlay'], theme === 'light' && styles['ImageBaseOverlay--theme-light'], theme === 'dark' && styles['ImageBaseOverlay--theme-dark'], className);
+    const commonProps = {
+        className: commonClassNames,
+        overlayShown: visibility === 'always'
+    };
+    // Не делаем деструктуризацию пропа, потому что Typescript не вывозит
+    if (restProps.disableInteractive) {
+        return /*#__PURE__*/ _jsx(ImageBaseOverlayNonInteractive, {
+            ...restProps,
+            ...commonProps
+        });
+    }
+    return /*#__PURE__*/ _jsx(ImageBaseOverlayInteractive, {
+        ...restProps,
+        ...commonProps
+    });
+};
 ImageBaseOverlay.displayName = 'ImageBaseOverlay';
 
 //# sourceMappingURL=ImageBaseOverlay.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';\nimport { useAppearance } from '../../../hooks/useAppearance';\nimport { focusVisiblePresetModeClassNames } from '../../../hooks/useFocusVisibleClassName';\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: onClickProp,\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  const onClick = onClickProp ?? visibility === 'on-hover' ? noop : undefined;\n\n  return (\n    <Tappable\n      {...restProps}\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={classNames(\n        focusVisiblePresetModeClassNames['inside'],\n        styles['ImageBaseOverlay--visible'],\n      )}\n      hasActive={false}\n      onClick={onClick}\n    >\n      {children}\n    </Tappable>\n  );\n};\n\nImageBaseOverlay.displayName = 'ImageBaseOverlay';\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useAppearance","focusVisiblePresetModeClassNames","Tappable","ImageBaseContext","validateOverlayIcon","styles","ImageBaseOverlay","className","theme","themeProp","visibility","visibilityProp","children","onClick","onClickProp","restProps","appearance","hasPointer","process","env","NODE_ENV","size","useContext","name","value","undefined","hasHover","hoverMode","focusVisibleMode","hasActive","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,uBAAuB,QAAQ,yCAAyC;AACjF,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,gCAAgC,QAAQ,0CAA0C;AAC3F,SAASC,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,gBAAgB,QAAQ,aAAa;AAE9C,SAASC,mBAAmB,QAAQ,gBAAgB;AACpD,OAAOC,YAAY,gCAAgC;AAmCnD;;CAEC,GACD,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,SAAS,EACTC,OAAOC,SAAS,EAChBC,YAAYC,cAAc,EAC1BC,QAAQ,EACRC,SAASC,WAAW,EACpB,GAAGC,WACmB;IACtB,MAAMC,aAAahB;IACnB,MAAMiB,aAAalB;IACnB,MAAMS,QAAQC,aAAaO;IAC3B,MAAMN,aAAaC,kBAAmBM,CAAAA,aAAa,aAAa,QAAO;IAEvE,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIR,UAAU;YACZ,sDAAsD;YACtD,MAAM,EAAES,IAAI,EAAE,GAAGzB,MAAM0B,UAAU,CAACnB;YAClCC,oBAAoBiB,MAAM;gBAAEE,MAAM;gBAAYC,OAAOZ;YAAS;QAChE;IACF;IAEA,MAAMC,UAAUC,eAAeJ,eAAe,aAAaZ,OAAO2B;IAElE,qBACE,KAACvB;QACE,GAAGa,SAAS;QACbR,WAAWV,WACTQ,MAAM,CAAC,mBAAmB,EAC1BK,eAAe,YAAYL,MAAM,CAAC,4BAA4B,EAC9DG,UAAU,WAAWH,MAAM,CAAC,gCAAgC,EAC5DG,UAAU,UAAUH,MAAM,CAAC,+BAA+B,EAC1DE;QAEFmB,UAAUhB,eAAe;QACzBiB,WAAWjB,eAAe,aAAaL,MAAM,CAAC,4BAA4B,GAAGoB;QAC7EG,kBAAkB/B,WAChBI,gCAAgC,CAAC,SAAS,EAC1CI,MAAM,CAAC,4BAA4B;QAErCwB,WAAW;QACXhB,SAASA;kBAERD;;AAGP,EAAE;AAEFN,iBAAiBwB,WAAW,GAAG"}
+{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useKeyboard } from '../../../components/Clickable/useKeyboard';\nimport { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';\nimport { useAppearance } from '../../../hooks/useAppearance';\nimport { useExternRef } from '../../../hooks/useExternRef';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport { ImageBaseContext } from '../context';\nimport { validateOverlayIcon } from '../validators';\nimport { useNonInteractiveOverlayProps } from './hooks';\nimport type {\n  ImageBaseOverlayInteractiveProps,\n  ImageBaseOverlayNonInteractiveProps,\n} from './types';\nimport styles from './ImageBaseOverlay.module.css';\n\nexport type ImageBaseOverlayProps =\n  | ImageBaseOverlayInteractiveProps\n  | ImageBaseOverlayNonInteractiveProps;\n\nconst ImageBaseOverlayInteractive = ({\n  children,\n  className,\n  getRootRef,\n  disableInteractive,\n  overlayShown,\n  ...restProps\n}: ImageBaseOverlayInteractiveProps & { overlayShown?: boolean }) => {\n  const { focusVisible, ...focusEvents } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: 'inside' });\n  const keyboardHandlers = useKeyboard();\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    <div\n      {...restProps}\n      tabIndex={0}\n      role=\"button\"\n      className={classNames(\n        styles['ImageBaseOverlay--clickable'],\n        (focusVisible || overlayShown) && styles['ImageBaseOverlay--visible'],\n        focusVisibleClassNames,\n        className,\n      )}\n      ref={getRootRef}\n      {...focusEvents}\n      {...keyboardHandlers}\n    >\n      {children}\n    </div>\n  );\n};\n\nconst ImageBaseOverlayNonInteractive = ({\n  className,\n  getRootRef,\n  disableInteractive,\n  overlayShown: overlayShownProps,\n  ...restProps\n}: ImageBaseOverlayNonInteractiveProps & { overlayShown?: boolean }) => {\n  const rootRef = useExternRef(getRootRef);\n  const { shown: overlayShown, onClick: onOverlayClick } = useNonInteractiveOverlayProps(rootRef);\n\n  return (\n    <div\n      {...restProps}\n      ref={rootRef}\n      className={classNames(\n        (overlayShown || overlayShownProps) && styles['ImageBaseOverlay--visible'],\n        className,\n      )}\n      onClick={onOverlayClick}\n    />\n  );\n};\n\n/**\n * Оверлей над картинкой.\n */\nexport const ImageBaseOverlay: React.FC<ImageBaseOverlayProps> = ({\n  className,\n  theme: themeProp,\n  visibility: visibilityProp,\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  const commonClassNames = classNames(\n    styles['ImageBaseOverlay'],\n    theme === 'light' && styles['ImageBaseOverlay--theme-light'],\n    theme === 'dark' && styles['ImageBaseOverlay--theme-dark'],\n    className,\n  );\n\n  const commonProps = {\n    className: commonClassNames,\n    overlayShown: visibility === 'always',\n  };\n\n  // Не делаем деструктуризацию пропа, потому что Typescript не вывозит\n  if (restProps.disableInteractive) {\n    return <ImageBaseOverlayNonInteractive {...restProps} {...commonProps} />;\n  }\n\n  return <ImageBaseOverlayInteractive {...restProps} {...commonProps} />;\n};\n\nImageBaseOverlay.displayName = 'ImageBaseOverlay';\n"],"names":["React","classNames","useKeyboard","useAdaptivityHasPointer","useAppearance","useExternRef","useFocusVisible","useFocusVisibleClassName","ImageBaseContext","validateOverlayIcon","useNonInteractiveOverlayProps","styles","ImageBaseOverlayInteractive","children","className","getRootRef","disableInteractive","overlayShown","restProps","focusVisible","focusEvents","focusVisibleClassNames","mode","keyboardHandlers","process","env","NODE_ENV","size","useContext","name","value","div","tabIndex","role","ref","ImageBaseOverlayNonInteractive","overlayShownProps","rootRef","shown","onClick","onOverlayClick","ImageBaseOverlay","theme","themeProp","visibility","visibilityProp","appearance","hasPointer","commonClassNames","commonProps","displayName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,4CAA4C;AACxE,SAASC,uBAAuB,QAAQ,yCAAyC;AACjF,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,SAASC,eAAe,QAAQ,iCAAiC;AACjE,SAASC,wBAAwB,QAAQ,0CAA0C;AACnF,SAASC,gBAAgB,QAAQ,aAAa;AAC9C,SAASC,mBAAmB,QAAQ,gBAAgB;AACpD,SAASC,6BAA6B,QAAQ,UAAU;AAKxD,OAAOC,YAAY,gCAAgC;AAMnD,MAAMC,8BAA8B,CAAC,EACnCC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,kBAAkB,EAClBC,YAAY,EACZ,GAAGC,WAC2D;IAC9D,MAAM,EAAEC,YAAY,EAAE,GAAGC,aAAa,GAAGd;IACzC,MAAMe,yBAAyBd,yBAAyB;QAAEY;QAAcG,MAAM;IAAS;IACvF,MAAMC,mBAAmBrB;IAEzB,IAAIsB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIb,UAAU;YACZ,sDAAsD;YACtD,MAAM,EAAEc,IAAI,EAAE,GAAG3B,MAAM4B,UAAU,CAACpB;YAClCC,oBAAoBkB,MAAM;gBAAEE,MAAM;gBAAYC,OAAOjB;YAAS;QAChE;IACF;IAEA,qBACE,KAACkB;QACE,GAAGb,SAAS;QACbc,UAAU;QACVC,MAAK;QACLnB,WAAWb,WACTU,MAAM,CAAC,8BAA8B,EACrC,AAACQ,CAAAA,gBAAgBF,YAAW,KAAMN,MAAM,CAAC,4BAA4B,EACrEU,wBACAP;QAEFoB,KAAKnB;QACJ,GAAGK,WAAW;QACd,GAAGG,gBAAgB;kBAEnBV;;AAGP;AAEA,MAAMsB,iCAAiC,CAAC,EACtCrB,SAAS,EACTC,UAAU,EACVC,kBAAkB,EAClBC,cAAcmB,iBAAiB,EAC/B,GAAGlB,WAC8D;IACjE,MAAMmB,UAAUhC,aAAaU;IAC7B,MAAM,EAAEuB,OAAOrB,YAAY,EAAEsB,SAASC,cAAc,EAAE,GAAG9B,8BAA8B2B;IAEvF,qBACE,KAACN;QACE,GAAGb,SAAS;QACbgB,KAAKG;QACLvB,WAAWb,WACT,AAACgB,CAAAA,gBAAgBmB,iBAAgB,KAAMzB,MAAM,CAAC,4BAA4B,EAC1EG;QAEFyB,SAASC;;AAGf;AAEA;;CAEC,GACD,OAAO,MAAMC,mBAAoD,CAAC,EAChE3B,SAAS,EACT4B,OAAOC,SAAS,EAChBC,YAAYC,cAAc,EAC1B,GAAG3B,WACmB;IACtB,MAAM4B,aAAa1C;IACnB,MAAM2C,aAAa5C;IACnB,MAAMuC,QAAQC,aAAaG;IAC3B,MAAMF,aAAaC,kBAAmBE,CAAAA,aAAa,aAAa,QAAO;IAEvE,MAAMC,mBAAmB/C,WACvBU,MAAM,CAAC,mBAAmB,EAC1B+B,UAAU,WAAW/B,MAAM,CAAC,gCAAgC,EAC5D+B,UAAU,UAAU/B,MAAM,CAAC,+BAA+B,EAC1DG;IAGF,MAAMmC,cAAc;QAClBnC,WAAWkC;QACX/B,cAAc2B,eAAe;IAC/B;IAEA,qEAAqE;IACrE,IAAI1B,UAAUF,kBAAkB,EAAE;QAChC,qBAAO,KAACmB;YAAgC,GAAGjB,SAAS;YAAG,GAAG+B,WAAW;;IACvE;IAEA,qBAAO,KAACrC;QAA6B,GAAGM,SAAS;QAAG,GAAG+B,WAAW;;AACpE,EAAE;AAEFR,iBAAiBS,WAAW,GAAG"}

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

@@ -20,6 +20,16 @@
   opacity: 1;
 }
 
+@media (hover: hover) and (pointer: fine) {
+  .ImageBaseOverlay:hover {
+    opacity: 1;
+  }
+}
+
+.ImageBaseOverlay--clickable {
+  cursor: pointer;
+}
+
 .ImageBaseOverlay--theme-light {
   color: var(--vkui--color_icon_accent);
   background-color: var(--vkui--color_avatar_overlay_inverse_alpha);

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare function useNonInteractiveOverlayProps(rootRef: React.MutableRefObject<HTMLElement | null>): {
+    shown: boolean;
+    onClick: (event: React.MouseEvent) => void;
+};
+//# sourceMappingURL=hooks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,wBAAgB,6BAA6B,CAAC,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC;;qBAIvE,KAAK,CAAC,UAAU;EAiBzC"}

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { useFocusWithin } from '../../../hooks/useFocusWithin';
+import { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';
+export function useNonInteractiveOverlayProps(rootRef) {
+    const focusWithin = useFocusWithin(rootRef);
+    const [nonInteractiveFocusShown, setNonInteractiveFocusShown] = React.useState(false);
+    function onClick(event) {
+        if (event.detail > 0) {
+            // Если мы попали на вложенный в оверлей элемент через focus,
+            // то при клике мышкой мы должны начать реагировать на hover-состояние,
+            // даже если фокус всё ещё остался на вложенном элементе (был по нему клик)
+            setNonInteractiveFocusShown(false);
+        }
+    }
+    useIsomorphicLayoutEffect(()=>{
+        setNonInteractiveFocusShown(focusWithin);
+    }, [
+        focusWithin
+    ]);
+    return {
+        shown: nonInteractiveFocusShown && focusWithin,
+        onClick
+    };
+}
+
+//# sourceMappingURL=hooks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/hooks.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFocusWithin } from '../../../hooks/useFocusWithin';\nimport { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';\n\nexport function useNonInteractiveOverlayProps(rootRef: React.MutableRefObject<HTMLElement | null>) {\n  const focusWithin = useFocusWithin(rootRef);\n  const [nonInteractiveFocusShown, setNonInteractiveFocusShown] = React.useState(false);\n\n  function onClick(event: React.MouseEvent) {\n    if (event.detail > 0) {\n      // Если мы попали на вложенный в оверлей элемент через focus,\n      // то при клике мышкой мы должны начать реагировать на hover-состояние,\n      // даже если фокус всё ещё остался на вложенном элементе (был по нему клик)\n      setNonInteractiveFocusShown(false);\n    }\n  }\n\n  useIsomorphicLayoutEffect(() => {\n    setNonInteractiveFocusShown(focusWithin);\n  }, [focusWithin]);\n\n  return {\n    shown: nonInteractiveFocusShown && focusWithin,\n    onClick,\n  };\n}\n"],"names":["React","useFocusWithin","useIsomorphicLayoutEffect","useNonInteractiveOverlayProps","rootRef","focusWithin","nonInteractiveFocusShown","setNonInteractiveFocusShown","useState","onClick","event","detail","shown"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,gCAAgC;AAC/D,SAASC,yBAAyB,QAAQ,yCAAyC;AAEnF,OAAO,SAASC,8BAA8BC,OAAmD;IAC/F,MAAMC,cAAcJ,eAAeG;IACnC,MAAM,CAACE,0BAA0BC,4BAA4B,GAAGP,MAAMQ,QAAQ,CAAC;IAE/E,SAASC,QAAQC,KAAuB;QACtC,IAAIA,MAAMC,MAAM,GAAG,GAAG;YACpB,6DAA6D;YAC7D,uEAAuE;YACvE,2EAA2E;YAC3EJ,4BAA4B;QAC9B;IACF;IAEAL,0BAA0B;QACxBK,4BAA4BF;IAC9B,GAAG;QAACA;KAAY;IAEhB,OAAO;QACLO,OAAON,4BAA4BD;QACnCI;IACF;AACF"}

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

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { HasRootRef } from '../../../types';
+import type { ImageBaseExpectedIconProps } from '../types';
+export interface ImageBaseOverlayCommonProps extends React.AriaAttributes, HasRootRef<HTMLDivElement> {
+    /**
+     * Задаёт тему оформления.
+     *
+     * > По умолчанию берётся из параметра `appearance` в `ConfigProvider`.
+     */
+    theme?: 'dark' | 'light';
+    /**
+     * Определяет каким образом должен показываться оверлей.
+     *
+     * - `"on-hover"` – на наведение указателя мыши.
+     * - `"always"` – всегда показывать.
+     *
+     * > По умолчанию определяется в зависимости от того, есть ли у пользователя мышь или нет.
+     */
+    visibility?: 'on-hover' | 'always';
+    className?: string;
+}
+export interface ImageBaseOverlayInteractiveProps extends ImageBaseOverlayCommonProps {
+    /**
+     * Обработчик взаимодействия с элементом.
+     * Свойство несовместимо с `nonInteractive={true}`.
+     */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /**
+     * Принимает иконку.
+     *
+     *
+     * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getOverlayIconSizeByImageBaseSize()`.
+     *
+     * > Предпочтительней использовать иконки из `@vkontakte/icons`.
+     *
+     * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же
+     * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы
+     * > использовали иконку.
+     */
+    children: React.ReactElement<ImageBaseExpectedIconProps>;
+    disableInteractive?: false;
+}
+export interface ImageBaseOverlayNonInteractiveProps extends ImageBaseOverlayCommonProps {
+    /**
+     * По умолчанию сам компонент является интерактивным элементом. Передав значение `true`, можно отключить
+     * такое поведение, что дает возможность передавать отдельные интерактивные элементы в `children`.
+     *
+     * TODO [>=7]: для определения интерактивности завязываться на св-во `onClick`
+     */
+    disableInteractive: true;
+    onClick?: undefined;
+    children: React.ReactNode;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAE3D,MAAM,WAAW,2BACf,SAAQ,KAAK,CAAC,cAAc,EAC1B,UAAU,CAAC,cAAc,CAAC;IAC5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,gCAAiC,SAAQ,2BAA2B;IACnF;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC/C;;;;;;;;;;;OAWG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;IACzD,kBAAkB,CAAC,EAAE,KAAK,CAAC;CAC5B;AAED,MAAM,WAAW,mCAAoC,SAAQ,2BAA2B;IACtF;;;;;OAKG;IACH,kBAAkB,EAAE,IAAI,CAAC;IACzB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/types.ts"],"sourcesContent":["import * as React from 'react';\nimport { HasRootRef } from '../../../types';\nimport type { ImageBaseExpectedIconProps } from '../types';\n\nexport interface ImageBaseOverlayCommonProps\n  extends React.AriaAttributes,\n    HasRootRef<HTMLDivElement> {\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  className?: string;\n}\n\nexport interface ImageBaseOverlayInteractiveProps extends ImageBaseOverlayCommonProps {\n  /**\n   * Обработчик взаимодействия с элементом.\n   * Свойство несовместимо с `nonInteractive={true}`.\n   */\n  onClick?: React.MouseEventHandler<HTMLElement>;\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  disableInteractive?: false;\n}\n\nexport interface ImageBaseOverlayNonInteractiveProps extends ImageBaseOverlayCommonProps {\n  /**\n   * По умолчанию сам компонент является интерактивным элементом. Передав значение `true`, можно отключить\n   * такое поведение, что дает возможность передавать отдельные интерактивные элементы в `children`.\n   *\n   * TODO [>=7]: для определения интерактивности завязываться на св-во `onClick`\n   */\n  disableInteractive: true;\n  onClick?: undefined;\n  children: React.ReactNode;\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

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

@@ -1 +1 @@
-{"version":3,"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"],"names":["React","ImageBaseContext","createContext","size"],"rangeMappings":";;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,mBAAmBD,MAAME,aAAa,CAAwB;IACzEC,MAAM;AACR,GAAG"}
+{"version":3,"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"],"names":["React","ImageBaseContext","createContext","size"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,mBAAmBD,MAAME,aAAa,CAAwB;IACzEC,MAAM;AACR,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ImageBase/helpers.ts"],"sourcesContent":["/**\n * Возвращает размер иконки основанный на дизайн-системы.\n *\n * @param imageSize наименьшая сторона изображения\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 *\n * @param imageSize наименьшая сторона изображения\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 *\n * @param imageSize наименьшая сторона изображения\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"],"names":["getFallbackIconSizeByImageBaseSize","imageSize","MAX_SIZE","getBadgeIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;CAIC,GACD,OAAO,SAASA,mCAAmCC,SAAiB;IAClE,IAAIA,aAAa,IAAI;QACnB,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT;IACA,OAAOD,mCAAmCE,QAAQ;AACpD;AAEAF,mCAAmCE,QAAQ,GAAG;AAE9C;;;;CAIC,GACD,OAAO,SAASC,gCAAgCF,SAAiB;IAC/D,IAAIA,aAAa,IAAI;QACnB,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT;IACA,OAAOE,gCAAgCD,QAAQ;AACjD;AAEAC,gCAAgCD,QAAQ,GAAG;AAE3C;;;;CAIC,GACD,OAAO,SAASE,kCACdH,SAAiB;IAEjB,IAAIA,aAAa,IAAI;QACnB,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT;IACA,OAAOG,kCAAkCF,QAAQ;AACnD;AAEAE,kCAAkCF,QAAQ,GAAG"}
+{"version":3,"sources":["../../../../src/components/ImageBase/helpers.ts"],"sourcesContent":["/**\n * Возвращает размер иконки основанный на дизайн-системы.\n *\n * @param imageSize наименьшая сторона изображения\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 *\n * @param imageSize наименьшая сторона изображения\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 *\n * @param imageSize наименьшая сторона изображения\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"],"names":["getFallbackIconSizeByImageBaseSize","imageSize","MAX_SIZE","getBadgeIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize"],"mappings":"AAAA;;;;CAIC,GACD,OAAO,SAASA,mCAAmCC,SAAiB;IAClE,IAAIA,aAAa,IAAI;QACnB,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT;IACA,OAAOD,mCAAmCE,QAAQ;AACpD;AAEAF,mCAAmCE,QAAQ,GAAG;AAE9C;;;;CAIC,GACD,OAAO,SAASC,gCAAgCF,SAAiB;IAC/D,IAAIA,aAAa,IAAI;QACnB,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT;IACA,OAAOE,gCAAgCD,QAAQ;AACjD;AAEAC,gCAAgCD,QAAQ,GAAG;AAE3C;;;;CAIC,GACD,OAAO,SAASE,kCACdH,SAAiB;IAEjB,IAAIA,aAAa,IAAI;QACnB,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT;IACA,OAAOG,kCAAkCF,QAAQ;AACnD;AAEAE,kCAAkCF,QAAQ,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"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"],"names":["imageBaseSizes"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":"AAAA,OAAO,MAAMA,iBAAiB;IAAC;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;CAAG,CAAU"}
+{"version":3,"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"],"names":["imageBaseSizes"],"mappings":"AAAA,OAAO,MAAMA,iBAAiB;IAAC;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;CAAG,CAAU"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ImageBase/validators.ts"],"sourcesContent":["import { warnOnce } from '../../lib/warnOnce';\nimport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\nimport { imageBaseSizes } from './types';\n\n/**\n * Пример,\n *\n * Icon28User -> 28\n * Icon12Circle1 -> 12\n * Icon12Circle2 -> 12\n * Icon20TextHeading1Outline -> 20\n */\nfunction parseIconSizeByDisplayName(displayName: unknown): number | null {\n  if (typeof displayName !== 'string') {\n    return null;\n  }\n\n  const match = /Icon(\\d+)/.exec(displayName);\n\n  return match ? Number(match[1]) : 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"],"names":["warnOnce","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","imageBaseSizes","parseIconSizeByDisplayName","displayName","match","exec","Number","parseIconSizeByWidthProp","width","size","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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,QAAQ,QAAQ,qBAAqB;AAC9C,SACEC,+BAA+B,EAC/BC,kCAAkC,EAClCC,iCAAiC,QAC5B,YAAY;AACnB,SAASC,cAAc,QAAQ,UAAU;AAEzC;;;;;;;CAOC,GACD,SAASC,2BAA2BC,WAAoB;IACtD,IAAI,OAAOA,gBAAgB,UAAU;QACnC,OAAO;IACT;IAEA,MAAMC,QAAQ,YAAYC,IAAI,CAACF;IAE/B,OAAOC,QAAQE,OAAOF,KAAK,CAAC,EAAE,IAAI;AACpC;AAEA,SAASG,yBAAyBC,KAAc;IAC9C,IAAI,OAAOA,UAAU,YAAY,OAAOA,UAAU,UAAU;QAC1D,OAAO;IACT;IACA,MAAMC,OAAOH,OAAOE;IACpB,OAAOC,OAAO,IAAIA,OAAO;AAC3B;AAEA,SAASC,sBAAsBC,OAAoB;IACjD,OAAOA,QAAQC,IAAI,CAACT,WAAW,IAAI;AACrC;AAEA,SAASU,oBAAoBF,OAAoB;IAC/C,OAAOA,QAAQG,KAAK,CAACN,KAAK,IAAI;AAChC;AAEA,SAASO,qBAAqBJ,OAAoB;IAChD,MAAMK,oBAAoBd,2BAA2BQ,sBAAsBC;IAC3E,MAAMM,cAAcV,yBAAyBM,oBAAoBF;IACjE,OAAOM,cAAcA,cAAcD;AACrC;AAYA,SAASE,qCACPC,SAAiB,EACjBC,QAAkB,EAClBC,UAAsB,EACtBC,MAAmC;IAEnC,MAAMC,WAAWR,qBAAqBK,SAASI,KAAK;IAEpD,IAAID,aAAa,MAAM;QACrB;IACF;IAEA,MAAME,SAASJ,WAAWF;IAE1B,IAAIM,WAAWF,YAAaE,WAAWJ,WAAWK,QAAQ,IAAIH,YAAYE,QAAS;QACjF;IACF;IAEA,MAAME,WAAWjB,sBAAsBU,SAASI,KAAK;IACrD,MAAMI,cAAcD,WAAW,CAAC,EAAEP,SAASS,IAAI,CAAC,GAAG,EAAEF,SAAS,IAAI,CAAC,GAAGP,SAASS,IAAI;IAEnFP,OACE,CAAC,SAAS,EAAEM,YAAY,gDAAgD,EAAET,UAAU,wBAAwB,EAAEC,SAASS,IAAI,CAAC,+BAA+B,EAAEJ,OAAO,oDAAoD,EAAEE,SAAS,QAAQ,EAAEF,OAAO,UAAU,EAAEA,OAAO,IAAI,CAAC,EAC5Q;AAEJ;AAEA,MAAMK,gBAAgBjC,SAAS;AAE/B,OAAO,SAASkC,qBAAqBZ,SAAiB,EAAEC,QAAkB;IACxE,OAAOF,qCACLC,WACAC,UACArB,oCACA+B;AAEJ;AAEA,MAAME,oBAAoB,IAAIC,IAAYhC;AAE1C,MAAMiC,eAAeC,OAAOC,IAAI,CAACJ,mBAAmBK,GAAG,CAAC,CAACC,MAAQhC,OAAOgC;AACxE,MAAMC,UAAUL,aAAaM,MAAM,CAAC,CAACD,SAAS9B,OAAUA,OAAO8B,UAAU9B,OAAO8B,SAAU;AAE1F,OAAO,SAASE,aAAatB,SAAiB;IAC5C,IAAIA,YAAYoB,WAAWP,kBAAkBU,GAAG,CAACvB,YAAY;QAC3D;IACF;IACAW,cACE,CAAC,QAAQ,EAAEX,UAAU,0FAA0F,EAAEe,aAAaS,IAAI,CAChI,OACA,CAAC,EACH;AAEJ;AAEA,MAAMC,qBAAqB/C,SAAS;AAEpC,OAAO,SAASgD,kBAAkB1B,SAAiB,EAAEC,QAAkB;IACrE,IAAID,YAAY,MAAMC,UAAU;QAC9B,OAAOwB,mBAAmB,yCAAyC;IACrE;IACA1B,qCACEC,WACAC,UACAtB,iCACA8C;AAEJ;AAEA,MAAME,uBAAuBjD,SAAS;AAEtC,OAAO,SAASkD,oBAAoB5B,SAAiB,EAAEC,QAAkB;IACvEF,qCACEC,WACAC,UACApB,mCACA8C;AAEJ"}
+{"version":3,"sources":["../../../../src/components/ImageBase/validators.ts"],"sourcesContent":["import { warnOnce } from '../../lib/warnOnce';\nimport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\nimport { imageBaseSizes } from './types';\n\n/**\n * Пример,\n *\n * Icon28User -> 28\n * Icon12Circle1 -> 12\n * Icon12Circle2 -> 12\n * Icon20TextHeading1Outline -> 20\n */\nfunction parseIconSizeByDisplayName(displayName: unknown): number | null {\n  if (typeof displayName !== 'string') {\n    return null;\n  }\n\n  const match = /Icon(\\d+)/.exec(displayName);\n\n  return match ? Number(match[1]) : 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"],"names":["warnOnce","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","imageBaseSizes","parseIconSizeByDisplayName","displayName","match","exec","Number","parseIconSizeByWidthProp","width","size","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"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,qBAAqB;AAC9C,SACEC,+BAA+B,EAC/BC,kCAAkC,EAClCC,iCAAiC,QAC5B,YAAY;AACnB,SAASC,cAAc,QAAQ,UAAU;AAEzC;;;;;;;CAOC,GACD,SAASC,2BAA2BC,WAAoB;IACtD,IAAI,OAAOA,gBAAgB,UAAU;QACnC,OAAO;IACT;IAEA,MAAMC,QAAQ,YAAYC,IAAI,CAACF;IAE/B,OAAOC,QAAQE,OAAOF,KAAK,CAAC,EAAE,IAAI;AACpC;AAEA,SAASG,yBAAyBC,KAAc;IAC9C,IAAI,OAAOA,UAAU,YAAY,OAAOA,UAAU,UAAU;QAC1D,OAAO;IACT;IACA,MAAMC,OAAOH,OAAOE;IACpB,OAAOC,OAAO,IAAIA,OAAO;AAC3B;AAEA,SAASC,sBAAsBC,OAAoB;IACjD,OAAOA,QAAQC,IAAI,CAACT,WAAW,IAAI;AACrC;AAEA,SAASU,oBAAoBF,OAAoB;IAC/C,OAAOA,QAAQG,KAAK,CAACN,KAAK,IAAI;AAChC;AAEA,SAASO,qBAAqBJ,OAAoB;IAChD,MAAMK,oBAAoBd,2BAA2BQ,sBAAsBC;IAC3E,MAAMM,cAAcV,yBAAyBM,oBAAoBF;IACjE,OAAOM,cAAcA,cAAcD;AACrC;AAYA,SAASE,qCACPC,SAAiB,EACjBC,QAAkB,EAClBC,UAAsB,EACtBC,MAAmC;IAEnC,MAAMC,WAAWR,qBAAqBK,SAASI,KAAK;IAEpD,IAAID,aAAa,MAAM;QACrB;IACF;IAEA,MAAME,SAASJ,WAAWF;IAE1B,IAAIM,WAAWF,YAAaE,WAAWJ,WAAWK,QAAQ,IAAIH,YAAYE,QAAS;QACjF;IACF;IAEA,MAAME,WAAWjB,sBAAsBU,SAASI,KAAK;IACrD,MAAMI,cAAcD,WAAW,CAAC,EAAEP,SAASS,IAAI,CAAC,GAAG,EAAEF,SAAS,IAAI,CAAC,GAAGP,SAASS,IAAI;IAEnFP,OACE,CAAC,SAAS,EAAEM,YAAY,gDAAgD,EAAET,UAAU,wBAAwB,EAAEC,SAASS,IAAI,CAAC,+BAA+B,EAAEJ,OAAO,oDAAoD,EAAEE,SAAS,QAAQ,EAAEF,OAAO,UAAU,EAAEA,OAAO,IAAI,CAAC,EAC5Q;AAEJ;AAEA,MAAMK,gBAAgBjC,SAAS;AAE/B,OAAO,SAASkC,qBAAqBZ,SAAiB,EAAEC,QAAkB;IACxE,OAAOF,qCACLC,WACAC,UACArB,oCACA+B;AAEJ;AAEA,MAAME,oBAAoB,IAAIC,IAAYhC;AAE1C,MAAMiC,eAAeC,OAAOC,IAAI,CAACJ,mBAAmBK,GAAG,CAAC,CAACC,MAAQhC,OAAOgC;AACxE,MAAMC,UAAUL,aAAaM,MAAM,CAAC,CAACD,SAAS9B,OAAUA,OAAO8B,UAAU9B,OAAO8B,SAAU;AAE1F,OAAO,SAASE,aAAatB,SAAiB;IAC5C,IAAIA,YAAYoB,WAAWP,kBAAkBU,GAAG,CAACvB,YAAY;QAC3D;IACF;IACAW,cACE,CAAC,QAAQ,EAAEX,UAAU,0FAA0F,EAAEe,aAAaS,IAAI,CAChI,OACA,CAAC,EACH;AAEJ;AAEA,MAAMC,qBAAqB/C,SAAS;AAEpC,OAAO,SAASgD,kBAAkB1B,SAAiB,EAAEC,QAAkB;IACrE,IAAID,YAAY,MAAMC,UAAU;QAC9B,OAAOwB,mBAAmB,yCAAyC;IACrE;IACA1B,qCACEC,WACAC,UACAtB,iCACA8C;AAEJ;AAEA,MAAME,uBAAuBjD,SAAS;AAEtC,OAAO,SAASkD,oBAAoB5B,SAAiB,EAAEC,QAAkB;IACvEF,qCACEC,WACAC,UACApB,mCACA8C;AAEJ"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/InfoRow/InfoRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './InfoRow.module.css';\n\nexport interface InfoRowProps extends HTMLAttributesWithRootRef<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=\"strong\" className={styles['InfoRow__header']}>\n        {header}\n        <VisuallyHidden>&nbsp;</VisuallyHidden>\n      </Subhead>\n    )}\n    {children}\n  </Headline>\n);\n"],"names":["React","classNames","hasReactNode","Headline","Subhead","VisuallyHidden","styles","InfoRow","header","children","className","restProps","Component","weight"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,uBAAuB;AAM1C;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAAyB,iBACjF,MAACR;QACE,GAAGQ,SAAS;QACbC,WAAU;QACVF,WAAWT,WAAWK,MAAM,CAAC,UAAU,EAAEI;QACzCG,QAAO;;YAENX,aAAaM,yBACZ,MAACJ;gBAAQQ,WAAU;gBAASF,WAAWJ,MAAM,CAAC,kBAAkB;;oBAC7DE;kCACD,KAACH;kCAAe;;;;YAGnBI;;OAEH"}
+{"version":3,"sources":["../../../../src/components/InfoRow/InfoRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './InfoRow.module.css';\n\nexport interface InfoRowProps extends HTMLAttributesWithRootRef<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=\"strong\" className={styles['InfoRow__header']}>\n        {header}\n        <VisuallyHidden>&nbsp;</VisuallyHidden>\n      </Subhead>\n    )}\n    {children}\n  </Headline>\n);\n"],"names":["React","classNames","hasReactNode","Headline","Subhead","VisuallyHidden","styles","InfoRow","header","children","className","restProps","Component","weight"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,uBAAuB;AAM1C;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAAyB,iBACjF,MAACR;QACE,GAAGQ,SAAS;QACbC,WAAU;QACVF,WAAWT,WAAWK,MAAM,CAAC,UAAU,EAAEI;QACzCG,QAAO;;YAENX,aAAaM,yBACZ,MAACJ;gBAAQQ,WAAU;gBAASF,WAAWJ,MAAM,CAAC,kBAAkB;;oBAC7DE;kCACD,KAACH;kCAAe;;;;YAGnBI;;OAEH"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';\nimport styles from './Input.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Input--sizeY-none'],\n  ['compact']: styles['Input--sizeY-compact'],\n};\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 = 'left',\n  getRef,\n  className,\n  getRootRef,\n  style,\n  before,\n  after,\n  status,\n  mode,\n  ...restProps\n}: InputProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(\n        styles['Input'],\n        align === 'right' && styles['Input--align-right'],\n        align === 'center' && styles['Input--align-center'],\n        sizeY !== 'regular' && sizeYClassNames[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      mode={mode}\n      status={status}\n    >\n      <UnstyledTextField\n        {...restProps}\n        as=\"input\"\n        type={type}\n        className={styles['Input__el']}\n        getRootRef={getRef}\n      />\n    </FormField>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","FormField","UnstyledTextField","styles","sizeYClassNames","none","Input","type","align","getRef","className","getRootRef","style","before","after","status","mode","restProps","sizeY","disabled","as"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,iBAAiB,QAAQ,yCAAyC;AAC3E,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAAC,UAAU,EAAEA,MAAM,CAAC,uBAAuB;AAC7C;AASA;;CAEC,GACD,OAAO,MAAMG,QAAQ,CAAC,EACpBC,OAAO,MAAM,EACbC,QAAQ,MAAM,EACdC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,KAAK,EACLC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EACJ,GAAGC,WACQ;IACX,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGlB;IAE3B,qBACE,KAACC;QACCW,OAAOA;QACPF,WAAWX,WACTI,MAAM,CAAC,QAAQ,EACfK,UAAU,WAAWL,MAAM,CAAC,qBAAqB,EACjDK,UAAU,YAAYL,MAAM,CAAC,sBAAsB,EACnDe,UAAU,aAAad,eAAe,CAACc,MAAM,EAC7CL,UAAUV,MAAM,CAAC,mBAAmB,EACpCW,SAASX,MAAM,CAAC,kBAAkB,EAClCO;QAEFC,YAAYA;QACZE,QAAQA;QACRC,OAAOA;QACPK,UAAUF,UAAUE,QAAQ;QAC5BH,MAAMA;QACND,QAAQA;kBAER,cAAA,KAACb;YACE,GAAGe,SAAS;YACbG,IAAG;YACHb,MAAMA;YACNG,WAAWP,MAAM,CAAC,YAAY;YAC9BQ,YAAYF;;;AAIpB,EAAE"}
+{"version":3,"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';\nimport styles from './Input.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Input--sizeY-none'],\n  ['compact']: styles['Input--sizeY-compact'],\n};\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 = 'left',\n  getRef,\n  className,\n  getRootRef,\n  style,\n  before,\n  after,\n  status,\n  mode,\n  ...restProps\n}: InputProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(\n        styles['Input'],\n        align === 'right' && styles['Input--align-right'],\n        align === 'center' && styles['Input--align-center'],\n        sizeY !== 'regular' && sizeYClassNames[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      mode={mode}\n      status={status}\n    >\n      <UnstyledTextField\n        {...restProps}\n        as=\"input\"\n        type={type}\n        className={styles['Input__el']}\n        getRootRef={getRef}\n      />\n    </FormField>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","FormField","UnstyledTextField","styles","sizeYClassNames","none","Input","type","align","getRef","className","getRootRef","style","before","after","status","mode","restProps","sizeY","disabled","as"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,iBAAiB,QAAQ,yCAAyC;AAC3E,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAAC,UAAU,EAAEA,MAAM,CAAC,uBAAuB;AAC7C;AASA;;CAEC,GACD,OAAO,MAAMG,QAAQ,CAAC,EACpBC,OAAO,MAAM,EACbC,QAAQ,MAAM,EACdC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,KAAK,EACLC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EACJ,GAAGC,WACQ;IACX,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGlB;IAE3B,qBACE,KAACC;QACCW,OAAOA;QACPF,WAAWX,WACTI,MAAM,CAAC,QAAQ,EACfK,UAAU,WAAWL,MAAM,CAAC,qBAAqB,EACjDK,UAAU,YAAYL,MAAM,CAAC,sBAAsB,EACnDe,UAAU,aAAad,eAAe,CAACc,MAAM,EAC7CL,UAAUV,MAAM,CAAC,mBAAmB,EACpCW,SAASX,MAAM,CAAC,kBAAkB,EAClCO;QAEFC,YAAYA;QACZE,QAAQA;QACRC,OAAOA;QACPK,UAAUF,UAAUE,QAAQ;QAC5BH,MAAMA;QACND,QAAQA;kBAER,cAAA,KAACb;YACE,GAAGe,SAAS;YACbG,IAAG;YACHb,MAAMA;YACNG,WAAWP,MAAM,CAAC,YAAY;YAC9BQ,YAAYF;;;AAIpB,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/InputLike/InputLike.tsx"],"sourcesContent":["import * as React from 'react';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { stopPropagation } from '../../lib/utils';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './InputLike.module.css';\n\nexport interface InputLikeProps extends RootComponentProps<HTMLSpanElement> {\n  length: number;\n  index: number;\n  value?: string;\n  label?: 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  label,\n  ...restProps\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    <RootComponent\n      Component=\"span\"\n      baseClassName={value?.length === length ? styles['InputLike--full'] : undefined}\n      tabIndex={0}\n      onClick={callMultiple(onClick, handleElementSelect)}\n      onFocus={callMultiple(stopPropagation, onFocus)}\n      {...restProps}\n    >\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\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    </RootComponent>\n  );\n};\n\nInputLike.displayName = 'InputLike';\n"],"names":["React","callMultiple","stopPropagation","RootComponent","VisuallyHidden","styles","MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","span","className","InputLike","value","onElementSelect","onClick","onFocus","label","restProps","handleElementSelect","useCallback","event","Component","baseClassName","undefined","tabIndex","slice","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,eAAe,QAAQ,kBAAkB;AAClD,SAASC,aAAa,QAAiC,iCAAiC;AACxF,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,yBAAyB;AAU5C,MAAMC,cAAcC,OAAOC,YAAY,CAAC;AAExC,SAASC,gBAAgBC,MAAc;IACrC,MAAMC,SAAS,EAAE;IACjB,IAAK,IAAIC,QAAQ,GAAGA,QAAQF,QAAQE,SAAS,EAAG;QAC9CD,OAAOE,IAAI,eACT,KAACC;YAAiBC,WAAWV,MAAM,CAAC,kBAAkB;sBACnDC;WADQM;IAIf;IACA,OAAOD;AACT;AAEA,OAAO,MAAMK,YAAY,CAAC,EACxBC,KAAK,EACLP,MAAM,EACNE,KAAK,EACLM,eAAe,EACfC,OAAO,EACPC,OAAO,EACPC,KAAK,EACL,GAAGC,WACY;IACf,MAAMC,sBAAsBvB,MAAMwB,WAAW,CAC3C,CAACC;QACCvB,gBAAgBuB;QAChBP,kBAAkBN;IACpB,GACA;QAACA;QAAOM;KAAgB;IAG1B,qBACE,MAACf;QACCuB,WAAU;QACVC,eAAeV,OAAOP,WAAWA,SAASL,MAAM,CAAC,kBAAkB,GAAGuB;QACtEC,UAAU;QACVV,SAASlB,aAAakB,SAASI;QAC/BH,SAASnB,aAAaC,iBAAiBkB;QACtC,GAAGE,SAAS;;YAEZD,uBAAS,KAACjB;0BAAgBiB;;YAC1BJ,OAAOa,MAAM,GAAGpB,SAAS;YACzBO,OAAOa,MAAMpB,SAAS,oBACrB,KAACI;gBAAiBC,WAAWV,MAAM,CAAC,4BAA4B;0BAC7DY,MAAMa,KAAK,CAACpB,SAAS;eADbE;YAIZH,gBAAgBC,SAAUO,CAAAA,OAAOP,UAAU,CAAA;;;AAGlD,EAAE;AAEFM,UAAUe,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/InputLike/InputLike.tsx"],"sourcesContent":["import * as React from 'react';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { stopPropagation } from '../../lib/utils';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './InputLike.module.css';\n\nexport interface InputLikeProps extends RootComponentProps<HTMLSpanElement> {\n  length: number;\n  index: number;\n  value?: string;\n  label?: 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  label,\n  ...restProps\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    <RootComponent\n      Component=\"span\"\n      baseClassName={value?.length === length ? styles['InputLike--full'] : undefined}\n      tabIndex={0}\n      onClick={callMultiple(onClick, handleElementSelect)}\n      onFocus={callMultiple(stopPropagation, onFocus)}\n      {...restProps}\n    >\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\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    </RootComponent>\n  );\n};\n\nInputLike.displayName = 'InputLike';\n"],"names":["React","callMultiple","stopPropagation","RootComponent","VisuallyHidden","styles","MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","span","className","InputLike","value","onElementSelect","onClick","onFocus","label","restProps","handleElementSelect","useCallback","event","Component","baseClassName","undefined","tabIndex","slice","displayName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,eAAe,QAAQ,kBAAkB;AAClD,SAASC,aAAa,QAAiC,iCAAiC;AACxF,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,yBAAyB;AAU5C,MAAMC,cAAcC,OAAOC,YAAY,CAAC;AAExC,SAASC,gBAAgBC,MAAc;IACrC,MAAMC,SAAS,EAAE;IACjB,IAAK,IAAIC,QAAQ,GAAGA,QAAQF,QAAQE,SAAS,EAAG;QAC9CD,OAAOE,IAAI,eACT,KAACC;YAAiBC,WAAWV,MAAM,CAAC,kBAAkB;sBACnDC;WADQM;IAIf;IACA,OAAOD;AACT;AAEA,OAAO,MAAMK,YAAY,CAAC,EACxBC,KAAK,EACLP,MAAM,EACNE,KAAK,EACLM,eAAe,EACfC,OAAO,EACPC,OAAO,EACPC,KAAK,EACL,GAAGC,WACY;IACf,MAAMC,sBAAsBvB,MAAMwB,WAAW,CAC3C,CAACC;QACCvB,gBAAgBuB;QAChBP,kBAAkBN;IACpB,GACA;QAACA;QAAOM;KAAgB;IAG1B,qBACE,MAACf;QACCuB,WAAU;QACVC,eAAeV,OAAOP,WAAWA,SAASL,MAAM,CAAC,kBAAkB,GAAGuB;QACtEC,UAAU;QACVV,SAASlB,aAAakB,SAASI;QAC/BH,SAASnB,aAAaC,iBAAiBkB;QACtC,GAAGE,SAAS;;YAEZD,uBAAS,KAACjB;0BAAgBiB;;YAC1BJ,OAAOa,MAAM,GAAGpB,SAAS;YACzBO,OAAOa,MAAMpB,SAAS,oBACrB,KAACI;gBAAiBC,WAAWV,MAAM,CAAC,4BAA4B;0BAC7DY,MAAMa,KAAK,CAACpB,SAAS;eADbE;YAIZH,gBAAgBC,SAAUO,CAAAA,OAAOP,UAAU,CAAA;;;AAGlD,EAAE;AAEFM,UAAUe,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"file":"InputLikeDivider.d.ts","sourceRoot":"","sources":["../../../../src/components/InputLike/InputLikeDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,gBAAgB,sCAI1B,MAAM,mBAAmB,CAAC,eAAe,CAAC,4CAM5C,CAAC"}
+{"version":3,"file":"InputLikeDivider.d.ts","sourceRoot":"","sources":["../../../../src/components/InputLike/InputLikeDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,gBAAgB,sCAI1B,KAAK,CAAC,mBAAmB,CAAC,eAAe,CAAC,4CAM5C,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/InputLike/InputLikeDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './InputLike.module.css';\n\nexport const InputLikeDivider = ({\n  children,\n  className,\n  ...props\n}: React.InputHTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span className={classNames(styles['InputLike__divider'], className)} {...props}>\n      {children}\n    </span>\n  );\n};\n"],"names":["React","classNames","styles","InputLikeDivider","children","className","props","span"],"rangeMappings":";;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,yBAAyB;AAE5C,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,QAAQ,EACRC,SAAS,EACT,GAAGC,OACwC;IAC3C,qBACE,KAACC;QAAKF,WAAWJ,WAAWC,MAAM,CAAC,qBAAqB,EAAEG;QAAa,GAAGC,KAAK;kBAC5EF;;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/InputLike/InputLikeDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './InputLike.module.css';\n\nexport const InputLikeDivider = ({\n  children,\n  className,\n  ...props\n}: React.InputHTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span className={classNames(styles['InputLike__divider'], className)} {...props}>\n      {children}\n    </span>\n  );\n};\n"],"names":["React","classNames","styles","InputLikeDivider","children","className","props","span"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,yBAAyB;AAE5C,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,QAAQ,EACRC,SAAS,EACT,GAAGC,OACwC;IAC3C,qBACE,KAACC;QAAKF,WAAWJ,WAAWC,MAAM,CAAC,qBAAqB,EAAEG;QAAa,GAAGC,KAAK;kBAC5EF;;AAGP,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAG/D,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,+DAMd,SAAS,4CAcX,CAAC"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAG/D,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,+DAMd,SAAS,4CAeX,CAAC"}

package/dist/cssm/components/Link/Link.js

@@ -12,6 +12,7 @@ import styles from './Link.module.css';
         className: classNames(styles['Link'], hasVisited && styles['Link--has-visited'], className),
         hasHover: false,
         activeMode: "opacity",
+        hoverMode: "none",
         focusVisibleMode: "outside",
         children: children
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import { classNames, noop } from '@vkontakte/vkjs';\nimport { Tappable, TappableProps } 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  onClick = noop,\n  ...restProps\n}: LinkProps) => {\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      onClick={onClick}\n      {...restProps}\n      className={classNames(styles['Link'], hasVisited && styles['Link--has-visited'], className)}\n      hasHover={false}\n      activeMode=\"opacity\"\n      focusVisibleMode=\"outside\"\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["classNames","noop","Tappable","styles","Link","hasVisited","children","className","onClick","restProps","Component","href","hasHover","activeMode","focusVisibleMode"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,OAAOC,YAAY,oBAAoB;AASvC;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACTC,UAAUP,IAAI,EACd,GAAGQ,WACO;IACV,qBACE,KAACP;QACCQ,WAAWD,UAAUE,IAAI,GAAG,MAAM;QAClCH,SAASA;QACR,GAAGC,SAAS;QACbF,WAAWP,WAAWG,MAAM,CAAC,OAAO,EAAEE,cAAcF,MAAM,CAAC,oBAAoB,EAAEI;QACjFK,UAAU;QACVC,YAAW;QACXC,kBAAiB;kBAEhBR;;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import { classNames, noop } from '@vkontakte/vkjs';\nimport { Tappable, TappableProps } 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  onClick = noop,\n  ...restProps\n}: LinkProps) => {\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      onClick={onClick}\n      {...restProps}\n      className={classNames(styles['Link'], hasVisited && styles['Link--has-visited'], className)}\n      hasHover={false}\n      activeMode=\"opacity\"\n      hoverMode=\"none\"\n      focusVisibleMode=\"outside\"\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["classNames","noop","Tappable","styles","Link","hasVisited","children","className","onClick","restProps","Component","href","hasHover","activeMode","hoverMode","focusVisibleMode"],"mappings":";AAAA,SAASA,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,OAAOC,YAAY,oBAAoB;AASvC;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACTC,UAAUP,IAAI,EACd,GAAGQ,WACO;IACV,qBACE,KAACP;QACCQ,WAAWD,UAAUE,IAAI,GAAG,MAAM;QAClCH,SAASA;QACR,GAAGC,SAAS;QACbF,WAAWP,WAAWG,MAAM,CAAC,OAAO,EAAEE,cAAcF,MAAM,CAAC,oBAAoB,EAAEI;QACjFK,UAAU;QACVC,YAAW;QACXC,WAAU;QACVC,kBAAiB;kBAEhBT;;AAGP,EAAE"}

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

@@ -13,8 +13,6 @@
   border-radius: 0;
 }
 
-/* See https://www.ctrl.blog/entry/css-media-hover-samsung.html */
-
 @media (hover: hover) and (pointer: fine) {
   .Link:hover {
     text-decoration: underline;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/List/List.tsx"],"sourcesContent":["import { DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP } from '../../hooks/useDraggableWithDomApi';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\n\nexport type ListProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/List\n */\nexport const List = ({ children, ...restProps }: ListProps) => {\n  return (\n    <RootComponent role=\"list\" {...restProps}>\n      {children}\n      <div aria-hidden {...DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP}></div>\n    </RootComponent>\n  );\n};\n"],"names":["DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP","RootComponent","List","children","restProps","role","div","aria-hidden"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,qCAAqC,QAAQ,qCAAqC;AAE3F,SAASC,aAAa,QAAQ,iCAAiC;AAI/D;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EAAEC,QAAQ,EAAE,GAAGC,WAAsB;IACxD,qBACE,MAACH;QAAcI,MAAK;QAAQ,GAAGD,SAAS;;YACrCD;0BACD,KAACG;gBAAIC,aAAW;gBAAE,GAAGP,qCAAqC;;;;AAGhE,EAAE"}
+{"version":3,"sources":["../../../../src/components/List/List.tsx"],"sourcesContent":["import { DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP } from '../../hooks/useDraggableWithDomApi';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\n\nexport type ListProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/List\n */\nexport const List = ({ children, ...restProps }: ListProps) => {\n  return (\n    <RootComponent role=\"list\" {...restProps}>\n      {children}\n      <div aria-hidden {...DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP}></div>\n    </RootComponent>\n  );\n};\n"],"names":["DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP","RootComponent","List","children","restProps","role","div","aria-hidden"],"mappings":";AAAA,SAASA,qCAAqC,QAAQ,qCAAqC;AAE3F,SAASC,aAAa,QAAQ,iCAAiC;AAI/D;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EAAEC,QAAQ,EAAE,GAAGC,WAAsB;IACxD,qBACE,MAACH;QAAcI,MAAK;QAAQ,GAAGD,SAAS;;YACrCD;0BACD,KAACG;gBAAIC,aAAW;gBAAE,GAAGP,qCAAqC;;;;AAGhE,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/LocaleProvider/LocaleProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface LocaleProviderProps {\n  /**\n   * Строка с языковой меткой BCP 47\n   */\n  value: ConfigProviderContextInterface['locale'];\n  children: React.ReactNode;\n}\n\n/**\n * Компонент, прокидывающий локаль. Список можно найти в\n * [реестре языковых подметок IANA](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)\n *\n * @since 5.0.0\n * @see https://vkcom.github.io/VKUI/#/LocaleProvider\n */\nexport function LocaleProvider({ value, children }: LocaleProviderProps) {\n  return <ConfigProviderOverride locale={value}>{children}</ConfigProviderOverride>;\n}\n"],"names":["React","ConfigProviderOverride","LocaleProvider","value","children","locale"],"rangeMappings":";;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,sBAAsB,QAAQ,2CAA2C;AAUlF;;;;;;CAMC,GACD,OAAO,SAASC,eAAe,EAAEC,KAAK,EAAEC,QAAQ,EAAuB;IACrE,qBAAO,KAACH;QAAuBI,QAAQF;kBAAQC;;AACjD"}
+{"version":3,"sources":["../../../../src/components/LocaleProvider/LocaleProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface LocaleProviderProps {\n  /**\n   * Строка с языковой меткой BCP 47\n   */\n  value: ConfigProviderContextInterface['locale'];\n  children: React.ReactNode;\n}\n\n/**\n * Компонент, прокидывающий локаль. Список можно найти в\n * [реестре языковых подметок IANA](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)\n *\n * @since 5.0.0\n * @see https://vkcom.github.io/VKUI/#/LocaleProvider\n */\nexport function LocaleProvider({ value, children }: LocaleProviderProps) {\n  return <ConfigProviderOverride locale={value}>{children}</ConfigProviderOverride>;\n}\n"],"names":["React","ConfigProviderOverride","LocaleProvider","value","children","locale"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,sBAAsB,QAAQ,2CAA2C;AAUlF;;;;;;CAMC,GACD,OAAO,SAASC,eAAe,EAAEC,KAAK,EAAEC,QAAQ,EAAuB;IACrE,qBAAO,KAACH;QAAuBI,QAAQF;kBAAQC;;AACjD"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Mark/Mark.tsx"],"sourcesContent":["import { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Mark.module.css';\n\nexport type MarkProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\n/**\n * Компонент используется для выделения фрагментов текста,\n * например при поиске определенных слов или выделения текста в цитате.\n *\n * @since 6.1.0\n * @see https://vkcom.github.io/VKUI/#/Mark\n */\nexport const Mark = (props: MarkProps) => (\n  <RootComponent baseClassName={styles['Mark']} Component=\"mark\" {...props} />\n);\n"],"names":["RootComponent","styles","Mark","props","baseClassName","Component"],"rangeMappings":";;;;;;;;;;;;;","mappings":";AACA,SAASA,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,oBAAoB;AAIvC;;;;;;CAMC,GACD,OAAO,MAAMC,OAAO,CAACC,sBACnB,KAACH;QAAcI,eAAeH,MAAM,CAAC,OAAO;QAAEI,WAAU;QAAQ,GAAGF,KAAK;OACxE"}
+{"version":3,"sources":["../../../../src/components/Mark/Mark.tsx"],"sourcesContent":["import { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Mark.module.css';\n\nexport type MarkProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\n/**\n * Компонент используется для выделения фрагментов текста,\n * например при поиске определенных слов или выделения текста в цитате.\n *\n * @since 6.1.0\n * @see https://vkcom.github.io/VKUI/#/Mark\n */\nexport const Mark = (props: MarkProps) => (\n  <RootComponent baseClassName={styles['Mark']} Component=\"mark\" {...props} />\n);\n"],"names":["RootComponent","styles","Mark","props","baseClassName","Component"],"mappings":";AACA,SAASA,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,oBAAoB;AAIvC;;;;;;CAMC,GACD,OAAO,MAAMC,OAAO,CAACC,sBACnB,KAACH;QAAcI,eAAeH,MAAM,CAAC,OAAO;QAAEI,WAAU;QAAQ,GAAGF,KAAK;OACxE"}