@vkontakte/vkui 5.0.3 → 5.1.0

package/dist/cjs/components/AppRoot/ScrollContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollContext.js","names":["clearDisableScrollStyle","node","Object","assign","style","position","top","left","right","overflowY","overflowX","getPageYOffsetWithoutKeyboardHeight","window","diffOfClientHeightAndViewportHeight","document","documentElement","clientHeight","innerHeight","pageYOffset","ScrollContext","React","createContext","getScroll","x","y","scrollTo","noop","isScrollLock","enableScrollLock","disableScrollLock","useScroll","useContext","GlobalScrollController","children","useDOM","useState","setScrollLock","beforeScrollLockFnSetRef","useRef","Set","useCallback","pageXOffset","clamp","body","scrollWidth","innerWidth","scrollHeight","current","forEach","fn","scrollY","scrollX","clientWidth","parseInt","scrollController","useMemo","ElementScrollController","elRef","scrollLeft","scrollTop","el","useScrollLockEffect","effect","deps","destructorRef","effectCallback","useEffect","beforeSet","add","delete","useScrollLock","enabled","useIsomorphicLayoutEffect"],"sources":["../../../../src/components/AppRoot/ScrollContext.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { noop } from \"../../lib/utils\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { clamp } from \"../../helpers/math\";\nimport { useDOM } from \"../../lib/dom\";\n\nconst clearDisableScrollStyle = (node: HTMLElement) => {\n  Object.assign(node.style, {\n    position: \"\",\n    top: \"\",\n    left: \"\",\n    right: \"\",\n    overflowY: \"\",\n    overflowX: \"\",\n  });\n};\n\nconst getPageYOffsetWithoutKeyboardHeight = (window: Window) => {\n  // Note: здесь расчёт на то, что `clientHeight` равен `window.innerHeight`.\n  //  Это достигается тем, что тегу `html` задали`height: 100%` и у него нет отступов сверху и снизу. Если есть отступы,\n  //  то надо задать `box-sizing: border-box`, чтобы они не учитывались.\n  const diffOfClientHeightAndViewportHeight =\n    window.document.documentElement.clientHeight - window.innerHeight;\n  return window.pageYOffset - diffOfClientHeightAndViewportHeight;\n};\n\nexport interface ScrollContextInterface {\n  getScroll(this: void): { x: number; y: number };\n  scrollTo(this: void, x?: number, y?: number): void;\n  isScrollLock: boolean;\n  enableScrollLock(this: void): void;\n  disableScrollLock(this: void): void;\n  beforeScrollLockFnSetRef?: React.RefObject<Set<() => void>>;\n}\n\nexport const ScrollContext = React.createContext<ScrollContextInterface>({\n  getScroll: () => ({ x: 0, y: 0 }),\n  scrollTo: noop,\n  isScrollLock: false,\n  enableScrollLock: noop,\n  disableScrollLock: noop,\n});\n\nexport const useScroll = () => React.useContext(ScrollContext);\n\nexport interface ScrollControllerProps {\n  elRef: React.RefObject<HTMLElement>;\n  children?: React.ReactNode;\n}\n\nexport const GlobalScrollController = ({ children }: ScrollControllerProps) => {\n  const { window, document } = useDOM();\n  const [isScrollLock, setScrollLock] = React.useState(false);\n  const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());\n\n  const getScroll = React.useCallback<ScrollContextInterface[\"getScroll\"]>(\n    () => ({\n      x: window!.pageXOffset,\n      y: getPageYOffsetWithoutKeyboardHeight(window!),\n    }),\n    [window]\n  );\n  const scrollTo = React.useCallback<ScrollContextInterface[\"scrollTo\"]>(\n    (x = 0, y = 0) => {\n      // Some iOS versions do not normalize scroll — do it manually.\n      window!.scrollTo(\n        x ? clamp(x, 0, document!.body.scrollWidth - window!.innerWidth) : 0,\n        y ? clamp(y, 0, document!.body.scrollHeight - window!.innerHeight) : 0\n      );\n    },\n    [document, window]\n  );\n\n  const enableScrollLock = React.useCallback<\n    ScrollContextInterface[\"enableScrollLock\"]\n  >(() => {\n    beforeScrollLockFnSetRef.current.forEach((fn) => {\n      fn();\n    });\n\n    const scrollY = window!.pageYOffset;\n    const scrollX = window!.pageXOffset;\n    const overflowY =\n      window!.innerWidth > document!.documentElement.clientWidth\n        ? \"scroll\"\n        : \"\";\n    const overflowX =\n      window!.innerHeight > document!.documentElement.clientHeight\n        ? \"scroll\"\n        : \"\";\n\n    Object.assign(document!.body.style, {\n      position: \"fixed\",\n      top: `-${scrollY}px`,\n      left: `-${scrollX}px`,\n      right: \"0\",\n      overflowY,\n      overflowX,\n    });\n    setScrollLock(true);\n  }, [document, window]);\n\n  const disableScrollLock = React.useCallback<\n    ScrollContextInterface[\"disableScrollLock\"]\n  >(() => {\n    const scrollY = document!.body.style.top;\n    const scrollX = document!.body.style.left;\n\n    clearDisableScrollStyle(document!.body);\n    window!.scrollTo(-parseInt(scrollX || \"0\"), -parseInt(scrollY || \"0\"));\n    setScrollLock(false);\n  }, [document, window]);\n\n  const scrollController = React.useMemo<ScrollContextInterface>(\n    () => ({\n      getScroll,\n      scrollTo,\n      isScrollLock,\n      disableScrollLock,\n      enableScrollLock,\n\n      beforeScrollLockFnSetRef: beforeScrollLockFnSetRef,\n    }),\n    [getScroll, scrollTo, isScrollLock, disableScrollLock, enableScrollLock]\n  );\n\n  return (\n    <ScrollContext.Provider value={scrollController}>\n      {children}\n    </ScrollContext.Provider>\n  );\n};\n\nexport const ElementScrollController = ({\n  elRef,\n  children,\n}: ScrollControllerProps) => {\n  const [isScrollLock, setScrollLock] = React.useState(false);\n  const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());\n\n  const getScroll = React.useCallback<ScrollContextInterface[\"getScroll\"]>(\n    () => ({\n      x: elRef.current?.scrollLeft ?? 0,\n      y: elRef.current?.scrollTop ?? 0,\n    }),\n    [elRef]\n  );\n  const scrollTo = React.useCallback<ScrollContextInterface[\"scrollTo\"]>(\n    (x = 0, y = 0) => {\n      const el = elRef.current;\n      // Some iOS versions do not normalize scroll — do it manually.\n      el?.scrollTo(\n        x ? clamp(x, 0, el.scrollWidth - el.clientWidth) : 0,\n        y ? clamp(y, 0, el.scrollHeight - el.clientHeight) : 0\n      );\n    },\n    [elRef]\n  );\n\n  const enableScrollLock = React.useCallback<\n    ScrollContextInterface[\"enableScrollLock\"]\n  >(() => {\n    const el = elRef.current;\n    if (!el) {\n      return;\n    }\n    beforeScrollLockFnSetRef.current.forEach((fn) => {\n      fn();\n    });\n\n    const scrollY = el.scrollTop;\n    const scrollX = el.scrollLeft;\n    const overflowY = el.scrollWidth > el.clientWidth ? \"scroll\" : \"\";\n    const overflowX = el.scrollHeight > el.clientHeight ? \"scroll\" : \"\";\n\n    Object.assign(el.style, {\n      position: \"absolute\",\n      top: `-${scrollY}px`,\n      left: `-${scrollX}px`,\n      right: \"0\",\n      overflowY,\n      overflowX,\n    });\n    setScrollLock(true);\n  }, [elRef]);\n\n  const disableScrollLock = React.useCallback<\n    ScrollContextInterface[\"disableScrollLock\"]\n  >(() => {\n    const el = elRef.current;\n    if (!el) {\n      return;\n    }\n\n    const scrollY = el.style.top;\n    const scrollX = el.style.left;\n\n    clearDisableScrollStyle(el);\n    el.scrollTo(-parseInt(scrollX || \"0\"), -parseInt(scrollY || \"0\"));\n    setScrollLock(false);\n  }, [elRef]);\n\n  const scrollController = React.useMemo<ScrollContextInterface>(\n    () => ({\n      getScroll,\n      scrollTo,\n      isScrollLock,\n      disableScrollLock,\n      enableScrollLock,\n      beforeScrollLockFnSetRef,\n    }),\n    [getScroll, scrollTo, isScrollLock, disableScrollLock, enableScrollLock]\n  );\n\n  return (\n    <ScrollContext.Provider value={scrollController}>\n      {children}\n    </ScrollContext.Provider>\n  );\n};\n\n/**\n * Вызывает функцию effect, до блокировки прокрутки\n * @param effect функция, которая может возвращать функцию очистки\n * @param deps effect обновится только при изменении значений в списке.\n */\nexport const useScrollLockEffect = (\n  effect: React.EffectCallback,\n  deps: React.DependencyList\n) => {\n  const destructorRef = React.useRef<ReturnType<React.EffectCallback>>(noop);\n  const { isScrollLock, beforeScrollLockFnSetRef } = useScroll();\n\n  // Изменяем effectCallback только при изменении deps\n  const effectCallback = React.useCallback(() => {\n    destructorRef.current = effect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n\n  // Добавляем effectCallback в список функций, которые необходимо вызвать\n  // до блокировки\n  React.useEffect(() => {\n    const beforeSet = beforeScrollLockFnSetRef?.current;\n    if (!beforeSet) {\n      return noop;\n    }\n\n    beforeSet.add(effectCallback);\n\n    return () => {\n      beforeSet.delete(effectCallback);\n    };\n  }, [beforeScrollLockFnSetRef, effectCallback]);\n\n  // Вызываем сбрасывающую функцию, после отключения блокировки\n  React.useEffect(() => {\n    if (!isScrollLock && destructorRef.current) {\n      destructorRef.current();\n    }\n  }, [isScrollLock]);\n};\n\nexport const useScrollLock = (enabled = true) => {\n  const { enableScrollLock, disableScrollLock } = useScroll();\n  useIsomorphicLayoutEffect(() => {\n    if (enabled) {\n      enableScrollLock();\n      return disableScrollLock;\n    }\n    return noop;\n  }, [enableScrollLock, disableScrollLock, enabled]);\n};\n"],"mappings":"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"}
+{"version":3,"file":"ScrollContext.js","names":["clearDisableScrollStyle","node","Object","assign","style","position","top","left","right","overflowY","overflowX","getPageYOffsetWithoutKeyboardHeight","window","diffOfClientHeightAndViewportHeight","document","documentElement","clientHeight","innerHeight","pageYOffset","ScrollContext","React","createContext","getScroll","x","y","scrollTo","noop","isScrollLock","enableScrollLock","disableScrollLock","useScroll","useContext","GlobalScrollController","children","useDOM","useState","setScrollLock","beforeScrollLockFnSetRef","useRef","Set","useCallback","pageXOffset","clamp","body","scrollWidth","innerWidth","scrollHeight","current","forEach","fn","scrollY","scrollX","clientWidth","parseInt","scrollController","useMemo","ElementScrollController","elRef","scrollLeft","scrollTop","el","useScrollLockEffect","effect","deps","destructorRef","effectCallback","useEffect","beforeSet","add","delete","useScrollLock","enabled","useIsomorphicLayoutEffect"],"sources":["../../../../src/components/AppRoot/ScrollContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { clamp } from '../../helpers/math';\nimport { useDOM } from '../../lib/dom';\n\nconst clearDisableScrollStyle = (node: HTMLElement) => {\n  Object.assign(node.style, {\n    position: '',\n    top: '',\n    left: '',\n    right: '',\n    overflowY: '',\n    overflowX: '',\n  });\n};\n\nconst getPageYOffsetWithoutKeyboardHeight = (window: Window) => {\n  // Note: здесь расчёт на то, что `clientHeight` равен `window.innerHeight`.\n  //  Это достигается тем, что тегу `html` задали`height: 100%` и у него нет отступов сверху и снизу. Если есть отступы,\n  //  то надо задать `box-sizing: border-box`, чтобы они не учитывались.\n  const diffOfClientHeightAndViewportHeight =\n    window.document.documentElement.clientHeight - window.innerHeight;\n  return window.pageYOffset - diffOfClientHeightAndViewportHeight;\n};\n\nexport interface ScrollContextInterface {\n  getScroll(this: void): { x: number; y: number };\n  scrollTo(this: void, x?: number, y?: number): void;\n  isScrollLock: boolean;\n  enableScrollLock(this: void): void;\n  disableScrollLock(this: void): void;\n  beforeScrollLockFnSetRef?: React.RefObject<Set<() => void>>;\n}\n\nexport const ScrollContext = React.createContext<ScrollContextInterface>({\n  getScroll: () => ({ x: 0, y: 0 }),\n  scrollTo: noop,\n  isScrollLock: false,\n  enableScrollLock: noop,\n  disableScrollLock: noop,\n});\n\nexport const useScroll = () => React.useContext(ScrollContext);\n\nexport interface ScrollControllerProps {\n  elRef: React.RefObject<HTMLElement>;\n  children?: React.ReactNode;\n}\n\nexport const GlobalScrollController = ({ children }: ScrollControllerProps) => {\n  const { window, document } = useDOM();\n  const [isScrollLock, setScrollLock] = React.useState(false);\n  const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());\n\n  const getScroll = React.useCallback<ScrollContextInterface['getScroll']>(\n    () => ({\n      x: window!.pageXOffset,\n      y: getPageYOffsetWithoutKeyboardHeight(window!),\n    }),\n    [window],\n  );\n  const scrollTo = React.useCallback<ScrollContextInterface['scrollTo']>(\n    (x = 0, y = 0) => {\n      // Some iOS versions do not normalize scroll — do it manually.\n      window!.scrollTo(\n        x ? clamp(x, 0, document!.body.scrollWidth - window!.innerWidth) : 0,\n        y ? clamp(y, 0, document!.body.scrollHeight - window!.innerHeight) : 0,\n      );\n    },\n    [document, window],\n  );\n\n  const enableScrollLock = React.useCallback<ScrollContextInterface['enableScrollLock']>(() => {\n    beforeScrollLockFnSetRef.current.forEach((fn) => {\n      fn();\n    });\n\n    const scrollY = window!.pageYOffset;\n    const scrollX = window!.pageXOffset;\n    const overflowY = window!.innerWidth > document!.documentElement.clientWidth ? 'scroll' : '';\n    const overflowX = window!.innerHeight > document!.documentElement.clientHeight ? 'scroll' : '';\n\n    Object.assign(document!.body.style, {\n      position: 'fixed',\n      top: `-${scrollY}px`,\n      left: `-${scrollX}px`,\n      right: '0',\n      overflowY,\n      overflowX,\n    });\n    setScrollLock(true);\n  }, [document, window]);\n\n  const disableScrollLock = React.useCallback<ScrollContextInterface['disableScrollLock']>(() => {\n    const scrollY = document!.body.style.top;\n    const scrollX = document!.body.style.left;\n\n    clearDisableScrollStyle(document!.body);\n    window!.scrollTo(-parseInt(scrollX || '0'), -parseInt(scrollY || '0'));\n    setScrollLock(false);\n  }, [document, window]);\n\n  const scrollController = React.useMemo<ScrollContextInterface>(\n    () => ({\n      getScroll,\n      scrollTo,\n      isScrollLock,\n      disableScrollLock,\n      enableScrollLock,\n\n      beforeScrollLockFnSetRef: beforeScrollLockFnSetRef,\n    }),\n    [getScroll, scrollTo, isScrollLock, disableScrollLock, enableScrollLock],\n  );\n\n  return <ScrollContext.Provider value={scrollController}>{children}</ScrollContext.Provider>;\n};\n\nexport const ElementScrollController = ({ elRef, children }: ScrollControllerProps) => {\n  const [isScrollLock, setScrollLock] = React.useState(false);\n  const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());\n\n  const getScroll = React.useCallback<ScrollContextInterface['getScroll']>(\n    () => ({\n      x: elRef.current?.scrollLeft ?? 0,\n      y: elRef.current?.scrollTop ?? 0,\n    }),\n    [elRef],\n  );\n  const scrollTo = React.useCallback<ScrollContextInterface['scrollTo']>(\n    (x = 0, y = 0) => {\n      const el = elRef.current;\n      // Some iOS versions do not normalize scroll — do it manually.\n      el?.scrollTo(\n        x ? clamp(x, 0, el.scrollWidth - el.clientWidth) : 0,\n        y ? clamp(y, 0, el.scrollHeight - el.clientHeight) : 0,\n      );\n    },\n    [elRef],\n  );\n\n  const enableScrollLock = React.useCallback<ScrollContextInterface['enableScrollLock']>(() => {\n    const el = elRef.current;\n    if (!el) {\n      return;\n    }\n    beforeScrollLockFnSetRef.current.forEach((fn) => {\n      fn();\n    });\n\n    const scrollY = el.scrollTop;\n    const scrollX = el.scrollLeft;\n    const overflowY = el.scrollWidth > el.clientWidth ? 'scroll' : '';\n    const overflowX = el.scrollHeight > el.clientHeight ? 'scroll' : '';\n\n    Object.assign(el.style, {\n      position: 'absolute',\n      top: `-${scrollY}px`,\n      left: `-${scrollX}px`,\n      right: '0',\n      overflowY,\n      overflowX,\n    });\n    setScrollLock(true);\n  }, [elRef]);\n\n  const disableScrollLock = React.useCallback<ScrollContextInterface['disableScrollLock']>(() => {\n    const el = elRef.current;\n    if (!el) {\n      return;\n    }\n\n    const scrollY = el.style.top;\n    const scrollX = el.style.left;\n\n    clearDisableScrollStyle(el);\n    el.scrollTo(-parseInt(scrollX || '0'), -parseInt(scrollY || '0'));\n    setScrollLock(false);\n  }, [elRef]);\n\n  const scrollController = React.useMemo<ScrollContextInterface>(\n    () => ({\n      getScroll,\n      scrollTo,\n      isScrollLock,\n      disableScrollLock,\n      enableScrollLock,\n      beforeScrollLockFnSetRef,\n    }),\n    [getScroll, scrollTo, isScrollLock, disableScrollLock, enableScrollLock],\n  );\n\n  return <ScrollContext.Provider value={scrollController}>{children}</ScrollContext.Provider>;\n};\n\n/**\n * Вызывает функцию effect, до блокировки прокрутки\n * @param effect функция, которая может возвращать функцию очистки\n * @param deps effect обновится только при изменении значений в списке.\n */\nexport const useScrollLockEffect = (effect: React.EffectCallback, deps: React.DependencyList) => {\n  const destructorRef = React.useRef<ReturnType<React.EffectCallback>>(noop);\n  const { isScrollLock, beforeScrollLockFnSetRef } = useScroll();\n\n  // Изменяем effectCallback только при изменении deps\n  const effectCallback = React.useCallback(() => {\n    destructorRef.current = effect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n\n  // Добавляем effectCallback в список функций, которые необходимо вызвать\n  // до блокировки\n  React.useEffect(() => {\n    const beforeSet = beforeScrollLockFnSetRef?.current;\n    if (!beforeSet) {\n      return noop;\n    }\n\n    beforeSet.add(effectCallback);\n\n    return () => {\n      beforeSet.delete(effectCallback);\n    };\n  }, [beforeScrollLockFnSetRef, effectCallback]);\n\n  // Вызываем сбрасывающую функцию, после отключения блокировки\n  React.useEffect(() => {\n    if (!isScrollLock && destructorRef.current) {\n      destructorRef.current();\n    }\n  }, [isScrollLock]);\n};\n\nexport const useScrollLock = (enabled = true) => {\n  const { enableScrollLock, disableScrollLock } = useScroll();\n  useIsomorphicLayoutEffect(() => {\n    if (enabled) {\n      enableScrollLock();\n      return disableScrollLock;\n    }\n    return noop;\n  }, [enableScrollLock, disableScrollLock, enabled]);\n};\n"],"mappings":"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"}

package/dist/cjs/components/AppearanceProvider/AppearanceProvider.d.ts

@@ -1,11 +1,10 @@
-import * as React from "react";
-import { AppearanceType } from "@vkontakte/vk-bridge";
+import * as React from 'react';
+import { AppearanceType } from '@vkontakte/vk-bridge';
 export interface AppearanceProviderProps {
     appearance: AppearanceType;
     children: React.ReactNode;
 }
-export declare const generateVKUITokensClassName: (platform: string, appearance: string) => string;
 /**
  * @see https://vkcom.github.io/VKUI/#/AppearanceProvider
  */
-export declare const AppearanceProvider: ({ appearance, children, }: AppearanceProviderProps) => JSX.Element;
+export declare const AppearanceProvider: ({ appearance, children }: AppearanceProviderProps) => JSX.Element;

package/dist/cjs/components/AppearanceProvider/AppearanceProvider.js

@@ -4,48 +4,24 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.generateVKUITokensClassName = exports.AppearanceProvider = void 0;
+exports.AppearanceProvider = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
 var _usePlatform = require("../../hooks/usePlatform");
-var _platform = require("../../lib/platform");
+var _tokensClassProvider = require("../../lib/tokensClassProvider");
 var _ConfigProviderOverride = require("../ConfigProvider/ConfigProviderOverride");
-var generateVKUITokensClassName = function generateVKUITokensClassName(platform, appearance) {
-  var tokensPlatform;
-  switch (platform) {
-    case _platform.Platform.ANDROID:
-      tokensPlatform = "vkBase";
-      break;
-    case _platform.Platform.IOS:
-      tokensPlatform = "vkIOS";
-      break;
-    case _platform.Platform.VKCOM:
-      tokensPlatform = "vkCom";
-      break;
-    default:
-      tokensPlatform = platform;
-  }
-  return "vkui--".concat(tokensPlatform, "--").concat(appearance);
-};
-
 /**
  * @see https://vkcom.github.io/VKUI/#/AppearanceProvider
  */
-exports.generateVKUITokensClassName = generateVKUITokensClassName;
 var AppearanceProvider = function AppearanceProvider(_ref) {
   var appearance = _ref.appearance,
     children = _ref.children;
   var platform = (0, _usePlatform.usePlatform)();
   return /*#__PURE__*/React.createElement(_ConfigProviderOverride.ConfigProviderOverride, {
     appearance: appearance
-  }, React.Children.map(children, function (child) {
-    if ( /*#__PURE__*/React.isValidElement(child)) {
-      return /*#__PURE__*/React.cloneElement(child, {
-        className: (0, _classNames.classNamesString)(child.props.className, generateVKUITokensClassName(platform, appearance))
-      });
-    }
-    return child;
-  }));
+  }, /*#__PURE__*/React.createElement(_tokensClassProvider.TokensClassProvider, {
+    platform: platform,
+    appearance: appearance
+  }, children));
 };
 exports.AppearanceProvider = AppearanceProvider;
 //# sourceMappingURL=AppearanceProvider.js.map

package/dist/cjs/components/AppearanceProvider/AppearanceProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppearanceProvider.js","names":["generateVKUITokensClassName","platform","appearance","tokensPlatform","Platform","ANDROID","IOS","VKCOM","AppearanceProvider","children","usePlatform","React","Children","map","child","isValidElement","cloneElement","className","classNamesString","props"],"sources":["../../../../src/components/AppearanceProvider/AppearanceProvider.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { AppearanceType } from \"@vkontakte/vk-bridge\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { Platform } from \"../../lib/platform\";\nimport { ConfigProviderOverride } from \"../ConfigProvider/ConfigProviderOverride\";\n\nexport interface AppearanceProviderProps {\n  appearance: AppearanceType;\n  children: React.ReactNode;\n}\n\nexport const generateVKUITokensClassName = (\n  platform: string,\n  appearance: string\n): string => {\n  let tokensPlatform;\n  switch (platform) {\n    case Platform.ANDROID:\n      tokensPlatform = \"vkBase\";\n      break;\n    case Platform.IOS:\n      tokensPlatform = \"vkIOS\";\n      break;\n    case Platform.VKCOM:\n      tokensPlatform = \"vkCom\";\n      break;\n    default:\n      tokensPlatform = platform;\n  }\n\n  return `vkui--${tokensPlatform}--${appearance}`;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppearanceProvider\n */\nexport const AppearanceProvider = ({\n  appearance,\n  children,\n}: AppearanceProviderProps) => {\n  const platform = usePlatform();\n\n  return (\n    <ConfigProviderOverride appearance={appearance}>\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement<{ className?: string }>(child)) {\n          return React.cloneElement(child, {\n            className: classNamesString(\n              child.props.className,\n              generateVKUITokensClassName(platform, appearance)\n            ),\n          });\n        }\n        return child;\n      })}\n    </ConfigProviderOverride>\n  );\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AACA;AACA;AAOO,IAAMA,2BAA2B,GAAG,SAA9BA,2BAA2B,CACtCC,QAAgB,EAChBC,UAAkB,EACP;EACX,IAAIC,cAAc;EAClB,QAAQF,QAAQ;IACd,KAAKG,kBAAQ,CAACC,OAAO;MACnBF,cAAc,GAAG,QAAQ;MACzB;IACF,KAAKC,kBAAQ,CAACE,GAAG;MACfH,cAAc,GAAG,OAAO;MACxB;IACF,KAAKC,kBAAQ,CAACG,KAAK;MACjBJ,cAAc,GAAG,OAAO;MACxB;IACF;MACEA,cAAc,GAAGF,QAAQ;EAAC;EAG9B,uBAAgBE,cAAc,eAAKD,UAAU;AAC/C,CAAC;;AAED;AACA;AACA;AAFA;AAGO,IAAMM,kBAAkB,GAAG,SAArBA,kBAAkB,OAGA;EAAA,IAF7BN,UAAU,QAAVA,UAAU;IACVO,QAAQ,QAARA,QAAQ;EAER,IAAMR,QAAQ,GAAG,IAAAS,wBAAW,GAAE;EAE9B,oBACE,oBAAC,8CAAsB;IAAC,UAAU,EAAER;EAAW,GAC5CS,KAAK,CAACC,QAAQ,CAACC,GAAG,CAACJ,QAAQ,EAAE,UAACK,KAAK,EAAK;IACvC,kBAAIH,KAAK,CAACI,cAAc,CAAyBD,KAAK,CAAC,EAAE;MACvD,oBAAOH,KAAK,CAACK,YAAY,CAACF,KAAK,EAAE;QAC/BG,SAAS,EAAE,IAAAC,4BAAgB,EACzBJ,KAAK,CAACK,KAAK,CAACF,SAAS,EACrBjB,2BAA2B,CAACC,QAAQ,EAAEC,UAAU,CAAC;MAErD,CAAC,CAAC;IACJ;IACA,OAAOY,KAAK;EACd,CAAC,CAAC,CACqB;AAE7B,CAAC;AAAC"}
+{"version":3,"file":"AppearanceProvider.js","names":["AppearanceProvider","appearance","children","platform","usePlatform"],"sources":["../../../../src/components/AppearanceProvider/AppearanceProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AppearanceType } from '@vkontakte/vk-bridge';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { TokensClassProvider } from '../../lib/tokensClassProvider';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface AppearanceProviderProps {\n  appearance: AppearanceType;\n  children: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppearanceProvider\n */\nexport const AppearanceProvider = ({ appearance, children }: AppearanceProviderProps) => {\n  const platform = usePlatform();\n\n  return (\n    <ConfigProviderOverride appearance={appearance}>\n      <TokensClassProvider platform={platform} appearance={appearance}>\n        {children}\n      </TokensClassProvider>\n    </ConfigProviderOverride>\n  );\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AACA;AAOA;AACA;AACA;AACO,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkB,OAA0D;EAAA,IAApDC,UAAU,QAAVA,UAAU;IAAEC,QAAQ,QAARA,QAAQ;EACvD,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,oBACE,oBAAC,8CAAsB;IAAC,UAAU,EAAEH;EAAW,gBAC7C,oBAAC,wCAAmB;IAAC,QAAQ,EAAEE,QAAS;IAAC,UAAU,EAAEF;EAAW,GAC7DC,QAAQ,CACW,CACC;AAE7B,CAAC;AAAC"}

package/dist/cjs/components/Avatar/Avatar.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { type ImageBaseProps, type ImageBaseOverlayProps } from "../ImageBase/ImageBase";
-import { type AvatarBadgeProps } from "./AvatarBadge/AvatarBadge";
-import { type AvatarBadgeWithPresetProps } from "./AvatarBadge/AvatarBadgeWithPreset";
+import { type ImageBaseProps, type ImageBaseOverlayProps } from '../ImageBase/ImageBase';
+import { type AvatarBadgeProps } from './AvatarBadge/AvatarBadge';
+import { type AvatarBadgeWithPresetProps } from './AvatarBadge/AvatarBadgeWithPreset';
 export type { AvatarBadgeProps, AvatarBadgeWithPresetProps, ImageBaseOverlayProps as AvatarOverlayProps, };
 export declare const AVATAR_DEFAULT_SIZE = 48;
 declare const COLORS_NUMBER_TO_TEXT_MAP: {
@@ -17,7 +17,7 @@ declare const COLORS_NUMBER_TO_TEXT_MAP: {
  * @example user.id % 6 + 1
  */
 export declare type InitialsAvatarNumberGradients = keyof typeof COLORS_NUMBER_TO_TEXT_MAP;
-export declare type InitialsAvatarTextGradients = typeof COLORS_NUMBER_TO_TEXT_MAP[InitialsAvatarNumberGradients] | "blue";
+export declare type InitialsAvatarTextGradients = (typeof COLORS_NUMBER_TO_TEXT_MAP)[InitialsAvatarNumberGradients] | 'blue';
 export interface AvatarProps extends ImageBaseProps {
     /**
      * Инициалы пользователя.
@@ -42,7 +42,7 @@ export interface AvatarProps extends ImageBaseProps {
      * > Если необходимо задать свой градиент, то используйте значение `"custom"` и определите цвет градиента либо через
      * > свой класс в `className`, либо через `style={{ backgroundImage: "..." }}`.
      */
-    gradientColor?: InitialsAvatarNumberGradients | InitialsAvatarTextGradients | "custom";
+    gradientColor?: InitialsAvatarNumberGradients | InitialsAvatarTextGradients | 'custom';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Avatar

package/dist/cjs/components/Avatar/Avatar.js

@@ -9,7 +9,7 @@ exports.Avatar = exports.AVATAR_DEFAULT_SIZE = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _ImageBase = require("../ImageBase/ImageBase");
 var _helpers = require("./helpers");
 var _AvatarBadge = require("./AvatarBadge/AvatarBadge");
@@ -18,12 +18,12 @@ var _excluded = ["size", "className", "gradientColor", "initials", "fallbackIcon
 var AVATAR_DEFAULT_SIZE = 48;
 exports.AVATAR_DEFAULT_SIZE = AVATAR_DEFAULT_SIZE;
 var COLORS_NUMBER_TO_TEXT_MAP = {
-  1: "red",
-  2: "orange",
-  3: "yellow",
-  4: "green",
-  5: "l-blue",
-  6: "violet"
+  1: 'red',
+  2: 'orange',
+  3: 'yellow',
+  4: 'green',
+  5: 'l-blue',
+  6: 'violet'
 };
 
 /**
@@ -32,13 +32,13 @@ var COLORS_NUMBER_TO_TEXT_MAP = {
  */
 
 var gradientStyles = {
-  red: "vkuiAvatar--gradient-red",
-  orange: "vkuiAvatar--gradient-orange",
-  yellow: "vkuiAvatar--gradient-yellow",
-  green: "vkuiAvatar--gradient-green",
-  blue: "vkuiAvatar--gradient-blue",
-  "l-blue": "vkuiAvatar--gradient-l-blue",
-  violet: "vkuiAvatar--gradient-violet"
+  'red': "vkuiAvatar--gradient-red",
+  'orange': "vkuiAvatar--gradient-orange",
+  'yellow': "vkuiAvatar--gradient-yellow",
+  'green': "vkuiAvatar--gradient-green",
+  'blue': "vkuiAvatar--gradient-blue",
+  'l-blue': "vkuiAvatar--gradient-l-blue",
+  'violet': "vkuiAvatar--gradient-violet"
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Avatar
@@ -52,13 +52,13 @@ var Avatar = function Avatar(_ref) {
     fallbackIcon = _ref.fallbackIcon,
     children = _ref.children,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var gradientName = typeof gradientColor === "number" ? COLORS_NUMBER_TO_TEXT_MAP[gradientColor] : gradientColor;
-  var isGradientNotCustom = gradientName && gradientName !== "custom";
+  var gradientName = typeof gradientColor === 'number' ? COLORS_NUMBER_TO_TEXT_MAP[gradientColor] : gradientColor;
+  var isGradientNotCustom = gradientName && gradientName !== 'custom';
   var rewrittenFallbackIcon = initials ? undefined : fallbackIcon;
   return /*#__PURE__*/React.createElement(_ImageBase.ImageBase, (0, _extends2.default)({}, restProps, {
     size: size,
     fallbackIcon: rewrittenFallbackIcon,
-    className: (0, _classNames.classNamesString)("vkuiAvatar", gradientName && "vkuiAvatar--has-gradient", isGradientNotCustom && gradientStyles[gradientName], className)
+    className: (0, _vkjs.classNames)("vkuiAvatar", gradientName && "vkuiAvatar--has-gradient", isGradientNotCustom && gradientStyles[gradientName], className)
   }), initials && /*#__PURE__*/React.createElement("div", {
     className: "vkuiAvatar__initials",
     style: {

package/dist/cjs/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":["AVATAR_DEFAULT_SIZE","COLORS_NUMBER_TO_TEXT_MAP","gradientStyles","red","orange","yellow","green","blue","violet","Avatar","size","className","gradientColor","initials","fallbackIcon","children","restProps","gradientName","isGradientNotCustom","rewrittenFallbackIcon","undefined","classNamesString","fontSize","getInitialsFontSize","Badge","AvatarBadge","BadgeWithPreset","AvatarBadgeWithPreset","Overlay","ImageBase"],"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport {\n  type ImageBaseProps,\n  type ImageBaseOverlayProps,\n  ImageBase,\n} from \"../ImageBase/ImageBase\";\nimport { getInitialsFontSize } from \"./helpers\";\nimport { type AvatarBadgeProps, AvatarBadge } from \"./AvatarBadge/AvatarBadge\";\nimport {\n  type AvatarBadgeWithPresetProps,\n  AvatarBadgeWithPreset,\n} from \"./AvatarBadge/AvatarBadgeWithPreset\";\nimport styles from \"./Avatar.module.css\";\n\nexport type {\n  AvatarBadgeProps,\n  AvatarBadgeWithPresetProps,\n  ImageBaseOverlayProps as AvatarOverlayProps,\n};\n\nexport const AVATAR_DEFAULT_SIZE = 48;\n\nconst COLORS_NUMBER_TO_TEXT_MAP = {\n  1: \"red\",\n  2: \"orange\",\n  3: \"yellow\",\n  4: \"green\",\n  5: \"l-blue\",\n  6: \"violet\",\n} as const;\n\n/**\n * Градиенты, которые можно использовать в алгоритме поиска градиентов по числовому идентификатору пользователя.\n * @example user.id % 6 + 1\n */\nexport type InitialsAvatarNumberGradients =\n  keyof typeof COLORS_NUMBER_TO_TEXT_MAP;\n\nexport type InitialsAvatarTextGradients =\n  | typeof COLORS_NUMBER_TO_TEXT_MAP[InitialsAvatarNumberGradients]\n  | \"blue\";\n\nconst gradientStyles = {\n  red: styles[\"Avatar--gradient-red\"],\n  orange: styles[\"Avatar--gradient-orange\"],\n  yellow: styles[\"Avatar--gradient-yellow\"],\n  green: styles[\"Avatar--gradient-green\"],\n  blue: styles[\"Avatar--gradient-blue\"],\n  \"l-blue\": styles[\"Avatar--gradient-l-blue\"],\n  violet: styles[\"Avatar--gradient-violet\"],\n};\n\nexport interface AvatarProps extends ImageBaseProps {\n  /**\n   * Инициалы пользователя.\n   *\n   * > Note: Если аватарка не прогрузится, то пользователь увидит инициалы.\n   *\n   * > ⚠️ Перебивает `fallbackIcon`.\n   */\n  initials?: string;\n  /**\n   * Задаёт градиент для фона.\n   *\n   * Если передано число, то оно будет сконвертировано в строчное представление цвета по следующей схеме:\n   *\n   * 1: 'red'\n   * 2: 'orange'\n   * 3: 'yellow'\n   * 4: 'green'\n   * 5: 'l-blue'\n   * 6: 'violet'\n   *\n   * > Если необходимо задать свой градиент, то используйте значение `\"custom\"` и определите цвет градиента либо через\n   * > свой класс в `className`, либо через `style={{ backgroundImage: \"...\" }}`.\n   */\n  gradientColor?:\n    | InitialsAvatarNumberGradients\n    | InitialsAvatarTextGradients\n    | \"custom\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Avatar\n */\nexport const Avatar = ({\n  size = AVATAR_DEFAULT_SIZE,\n  className,\n  gradientColor,\n  initials,\n  fallbackIcon,\n  children,\n  ...restProps\n}: AvatarProps) => {\n  const gradientName =\n    typeof gradientColor === \"number\"\n      ? COLORS_NUMBER_TO_TEXT_MAP[gradientColor]\n      : gradientColor;\n  const isGradientNotCustom = gradientName && gradientName !== \"custom\";\n  const rewrittenFallbackIcon = initials ? undefined : fallbackIcon;\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      fallbackIcon={rewrittenFallbackIcon}\n      className={classNamesString(\n        styles[\"Avatar\"],\n        gradientName && styles[`Avatar--has-gradient`],\n        isGradientNotCustom && gradientStyles[gradientName],\n        className\n      )}\n    >\n      {initials && (\n        <div\n          className={styles[\"Avatar__initials\"]}\n          style={{\n            fontSize: getInitialsFontSize(size),\n          }}\n        >\n          {initials}\n        </div>\n      )}\n      {children}\n    </ImageBase>\n  );\n};\n\nAvatar.Badge = AvatarBadge;\n\nAvatar.BadgeWithPreset = AvatarBadgeWithPreset;\n\nAvatar.Overlay = ImageBase.Overlay;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAKA;AACA;AACA;AAG6C;AAStC,IAAMA,mBAAmB,GAAG,EAAE;AAAC;AAEtC,IAAMC,yBAAyB,GAAG;EAChC,CAAC,EAAE,KAAK;EACR,CAAC,EAAE,QAAQ;EACX,CAAC,EAAE,QAAQ;EACX,CAAC,EAAE,OAAO;EACV,CAAC,EAAE,QAAQ;EACX,CAAC,EAAE;AACL,CAAU;;AAEV;AACA;AACA;AACA;;AAQA,IAAMC,cAAc,GAAG;EACrBC,GAAG,4BAAgC;EACnCC,MAAM,+BAAmC;EACzCC,MAAM,+BAAmC;EACzCC,KAAK,8BAAkC;EACvCC,IAAI,6BAAiC;EACrC,QAAQ,+BAAmC;EAC3CC,MAAM;AACR,CAAC;AAgCD;AACA;AACA;AACO,IAAMC,MAAM,GAAG,SAATA,MAAM,OAQA;EAAA,qBAPjBC,IAAI;IAAJA,IAAI,0BAAGV,mBAAmB;IAC1BW,SAAS,QAATA,SAAS;IACTC,aAAa,QAAbA,aAAa;IACbC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;IACZC,QAAQ,QAARA,QAAQ;IACLC,SAAS;EAEZ,IAAMC,YAAY,GAChB,OAAOL,aAAa,KAAK,QAAQ,GAC7BX,yBAAyB,CAACW,aAAa,CAAC,GACxCA,aAAa;EACnB,IAAMM,mBAAmB,GAAGD,YAAY,IAAIA,YAAY,KAAK,QAAQ;EACrE,IAAME,qBAAqB,GAAGN,QAAQ,GAAGO,SAAS,GAAGN,YAAY;EAEjE,oBACE,oBAAC,oBAAS,6BACJE,SAAS;IACb,IAAI,EAAEN,IAAK;IACX,YAAY,EAAES,qBAAsB;IACpC,SAAS,EAAE,IAAAE,4BAAgB,gBAEzBJ,YAAY,8BAAkC,EAC9CC,mBAAmB,IAAIhB,cAAc,CAACe,YAAY,CAAC,EACnDN,SAAS;EACT,IAEDE,QAAQ,iBACP;IACE,SAAS,wBAA6B;IACtC,KAAK,EAAE;MACLS,QAAQ,EAAE,IAAAC,4BAAmB,EAACb,IAAI;IACpC;EAAE,GAEDG,QAAQ,CAEZ,EACAE,QAAQ,CACC;AAEhB,CAAC;AAAC;AAEFN,MAAM,CAACe,KAAK,GAAGC,wBAAW;AAE1BhB,MAAM,CAACiB,eAAe,GAAGC,4CAAqB;AAE9ClB,MAAM,CAACmB,OAAO,GAAGC,oBAAS,CAACD,OAAO"}
+{"version":3,"file":"Avatar.js","names":["AVATAR_DEFAULT_SIZE","COLORS_NUMBER_TO_TEXT_MAP","gradientStyles","Avatar","size","className","gradientColor","initials","fallbackIcon","children","restProps","gradientName","isGradientNotCustom","rewrittenFallbackIcon","undefined","classNames","fontSize","getInitialsFontSize","Badge","AvatarBadge","BadgeWithPreset","AvatarBadgeWithPreset","Overlay","ImageBase"],"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type ImageBaseProps, type ImageBaseOverlayProps, ImageBase } from '../ImageBase/ImageBase';\nimport { getInitialsFontSize } from './helpers';\nimport { type AvatarBadgeProps, AvatarBadge } from './AvatarBadge/AvatarBadge';\nimport {\n  type AvatarBadgeWithPresetProps,\n  AvatarBadgeWithPreset,\n} from './AvatarBadge/AvatarBadgeWithPreset';\nimport styles from './Avatar.module.css';\n\nexport type {\n  AvatarBadgeProps,\n  AvatarBadgeWithPresetProps,\n  ImageBaseOverlayProps as AvatarOverlayProps,\n};\n\nexport const AVATAR_DEFAULT_SIZE = 48;\n\nconst COLORS_NUMBER_TO_TEXT_MAP = {\n  1: 'red',\n  2: 'orange',\n  3: 'yellow',\n  4: 'green',\n  5: 'l-blue',\n  6: 'violet',\n} as const;\n\n/**\n * Градиенты, которые можно использовать в алгоритме поиска градиентов по числовому идентификатору пользователя.\n * @example user.id % 6 + 1\n */\nexport type InitialsAvatarNumberGradients = keyof typeof COLORS_NUMBER_TO_TEXT_MAP;\n\nexport type InitialsAvatarTextGradients =\n  | (typeof COLORS_NUMBER_TO_TEXT_MAP)[InitialsAvatarNumberGradients]\n  | 'blue';\n\nconst gradientStyles = {\n  'red': styles['Avatar--gradient-red'],\n  'orange': styles['Avatar--gradient-orange'],\n  'yellow': styles['Avatar--gradient-yellow'],\n  'green': styles['Avatar--gradient-green'],\n  'blue': styles['Avatar--gradient-blue'],\n  'l-blue': styles['Avatar--gradient-l-blue'],\n  'violet': styles['Avatar--gradient-violet'],\n};\n\nexport interface AvatarProps extends ImageBaseProps {\n  /**\n   * Инициалы пользователя.\n   *\n   * > Note: Если аватарка не прогрузится, то пользователь увидит инициалы.\n   *\n   * > ⚠️ Перебивает `fallbackIcon`.\n   */\n  initials?: string;\n  /**\n   * Задаёт градиент для фона.\n   *\n   * Если передано число, то оно будет сконвертировано в строчное представление цвета по следующей схеме:\n   *\n   * 1: 'red'\n   * 2: 'orange'\n   * 3: 'yellow'\n   * 4: 'green'\n   * 5: 'l-blue'\n   * 6: 'violet'\n   *\n   * > Если необходимо задать свой градиент, то используйте значение `\"custom\"` и определите цвет градиента либо через\n   * > свой класс в `className`, либо через `style={{ backgroundImage: \"...\" }}`.\n   */\n  gradientColor?: InitialsAvatarNumberGradients | InitialsAvatarTextGradients | 'custom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Avatar\n */\nexport const Avatar = ({\n  size = AVATAR_DEFAULT_SIZE,\n  className,\n  gradientColor,\n  initials,\n  fallbackIcon,\n  children,\n  ...restProps\n}: AvatarProps) => {\n  const gradientName =\n    typeof gradientColor === 'number' ? COLORS_NUMBER_TO_TEXT_MAP[gradientColor] : gradientColor;\n  const isGradientNotCustom = gradientName && gradientName !== 'custom';\n  const rewrittenFallbackIcon = initials ? undefined : fallbackIcon;\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      fallbackIcon={rewrittenFallbackIcon}\n      className={classNames(\n        styles['Avatar'],\n        gradientName && styles[`Avatar--has-gradient`],\n        isGradientNotCustom && gradientStyles[gradientName],\n        className,\n      )}\n    >\n      {initials && (\n        <div\n          className={styles['Avatar__initials']}\n          style={{\n            fontSize: getInitialsFontSize(size),\n          }}\n        >\n          {initials}\n        </div>\n      )}\n      {children}\n    </ImageBase>\n  );\n};\n\nAvatar.Badge = AvatarBadge;\n\nAvatar.BadgeWithPreset = AvatarBadgeWithPreset;\n\nAvatar.Overlay = ImageBase.Overlay;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAG6C;AAStC,IAAMA,mBAAmB,GAAG,EAAE;AAAC;AAEtC,IAAMC,yBAAyB,GAAG;EAChC,CAAC,EAAE,KAAK;EACR,CAAC,EAAE,QAAQ;EACX,CAAC,EAAE,QAAQ;EACX,CAAC,EAAE,OAAO;EACV,CAAC,EAAE,QAAQ;EACX,CAAC,EAAE;AACL,CAAU;;AAEV;AACA;AACA;AACA;;AAOA,IAAMC,cAAc,GAAG;EACrB,KAAK,4BAAgC;EACrC,QAAQ,+BAAmC;EAC3C,QAAQ,+BAAmC;EAC3C,OAAO,8BAAkC;EACzC,MAAM,6BAAiC;EACvC,QAAQ,+BAAmC;EAC3C,QAAQ;AACV,CAAC;AA6BD;AACA;AACA;AACO,IAAMC,MAAM,GAAG,SAATA,MAAM,OAQA;EAAA,qBAPjBC,IAAI;IAAJA,IAAI,0BAAGJ,mBAAmB;IAC1BK,SAAS,QAATA,SAAS;IACTC,aAAa,QAAbA,aAAa;IACbC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;IACZC,QAAQ,QAARA,QAAQ;IACLC,SAAS;EAEZ,IAAMC,YAAY,GAChB,OAAOL,aAAa,KAAK,QAAQ,GAAGL,yBAAyB,CAACK,aAAa,CAAC,GAAGA,aAAa;EAC9F,IAAMM,mBAAmB,GAAGD,YAAY,IAAIA,YAAY,KAAK,QAAQ;EACrE,IAAME,qBAAqB,GAAGN,QAAQ,GAAGO,SAAS,GAAGN,YAAY;EAEjE,oBACE,oBAAC,oBAAS,6BACJE,SAAS;IACb,IAAI,EAAEN,IAAK;IACX,YAAY,EAAES,qBAAsB;IACpC,SAAS,EAAE,IAAAE,gBAAU,gBAEnBJ,YAAY,8BAAkC,EAC9CC,mBAAmB,IAAIV,cAAc,CAACS,YAAY,CAAC,EACnDN,SAAS;EACT,IAEDE,QAAQ,iBACP;IACE,SAAS,wBAA6B;IACtC,KAAK,EAAE;MACLS,QAAQ,EAAE,IAAAC,4BAAmB,EAACb,IAAI;IACpC;EAAE,GAEDG,QAAQ,CAEZ,EACAE,QAAQ,CACC;AAEhB,CAAC;AAAC;AAEFN,MAAM,CAACe,KAAK,GAAGC,wBAAW;AAE1BhB,MAAM,CAACiB,eAAe,GAAGC,4CAAqB;AAE9ClB,MAAM,CAACmB,OAAO,GAAGC,oBAAS,CAACD,OAAO"}

package/dist/cjs/components/Avatar/AvatarBadge/AvatarBadge.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { type ImageBaseBadgeProps } from "../../ImageBase/ImageBase";
+import { type ImageBaseBadgeProps } from '../../ImageBase/ImageBase';
 export declare type AvatarBadgeProps = ImageBaseBadgeProps;
 export declare const AvatarBadge: ({ className, ...restProps }: AvatarBadgeProps) => JSX.Element;

package/dist/cjs/components/Avatar/AvatarBadge/AvatarBadge.js

@@ -9,7 +9,7 @@ exports.AvatarBadge = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _ImageBase = require("../../ImageBase/ImageBase");
 var _excluded = ["className"];
 var AvatarBadge = function AvatarBadge(_ref) {
@@ -18,7 +18,7 @@ var AvatarBadge = function AvatarBadge(_ref) {
   var _React$useContext = React.useContext(_ImageBase.ImageBaseContext),
     size = _React$useContext.size;
   return /*#__PURE__*/React.createElement(_ImageBase.ImageBase.Badge, (0, _extends2.default)({}, restProps, {
-    className: (0, _classNames.classNamesString)("vkuiAvatarBadge", size < 96 && "vkuiAvatarBadge--shifted", className)
+    className: (0, _vkjs.classNames)("vkuiAvatarBadge", size < 96 && "vkuiAvatarBadge--shifted", className)
   }));
 };
 exports.AvatarBadge = AvatarBadge;

package/dist/cjs/components/Avatar/AvatarBadge/AvatarBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarBadge.js","names":["AvatarBadge","className","restProps","React","useContext","ImageBaseContext","size","classNamesString"],"sources":["../../../../../src/components/Avatar/AvatarBadge/AvatarBadge.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../../lib/classNames\";\nimport {\n  type ImageBaseBadgeProps,\n  ImageBase,\n  ImageBaseContext,\n} from \"../../ImageBase/ImageBase\";\nimport styles from \"./AvatarBadge.module.css\";\n\nexport type AvatarBadgeProps = ImageBaseBadgeProps;\n\nexport const AvatarBadge = ({ className, ...restProps }: AvatarBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNamesString(\n        styles[\"AvatarBadge\"],\n        size < 96 && styles[\"AvatarBadge--shifted\"],\n        className\n      )}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAImC;AAK5B,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAAsD;EAAA,IAAhDC,SAAS,QAATA,SAAS;IAAKC,SAAS;EACnD,wBAAiBC,KAAK,CAACC,UAAU,CAACC,2BAAgB,CAAC;IAA3CC,IAAI,qBAAJA,IAAI;EACZ,oBACE,oBAAC,oBAAS,CAAC,KAAK,6BACVJ,SAAS;IACb,SAAS,EAAE,IAAAK,4BAAgB,qBAEzBD,IAAI,GAAG,EAAE,8BAAkC,EAC3CL,SAAS;EACT,GACF;AAEN,CAAC;AAAC"}
+{"version":3,"file":"AvatarBadge.js","names":["AvatarBadge","className","restProps","React","useContext","ImageBaseContext","size","classNames"],"sources":["../../../../../src/components/Avatar/AvatarBadge/AvatarBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type ImageBaseBadgeProps, ImageBase, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './AvatarBadge.module.css';\n\nexport type AvatarBadgeProps = ImageBaseBadgeProps;\n\nexport const AvatarBadge = ({ className, ...restProps }: AvatarBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(\n        styles['AvatarBadge'],\n        size < 96 && styles['AvatarBadge--shifted'],\n        className,\n      )}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAAkG;AAK3F,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAAsD;EAAA,IAAhDC,SAAS,QAATA,SAAS;IAAKC,SAAS;EACnD,wBAAiBC,KAAK,CAACC,UAAU,CAACC,2BAAgB,CAAC;IAA3CC,IAAI,qBAAJA,IAAI;EACZ,oBACE,oBAAC,oBAAS,CAAC,KAAK,6BACVJ,SAAS;IACb,SAAS,EAAE,IAAAK,gBAAU,qBAEnBD,IAAI,GAAG,EAAE,8BAAkC,EAC3CL,SAAS;EACT,GACF;AAEN,CAAC;AAAC"}

package/dist/cjs/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
-import { type ImageBaseBadgeProps } from "../../ImageBase/ImageBase";
-export interface AvatarBadgeWithPresetProps extends Omit<ImageBaseBadgeProps, "background" | "children"> {
+import { type ImageBaseBadgeProps } from '../../ImageBase/ImageBase';
+export interface AvatarBadgeWithPresetProps extends Omit<ImageBaseBadgeProps, 'background' | 'children'> {
     /**
      * Использует предзаданные настройки.
      *
      * За каждым пресетом закреплена своя иконка и стили.
      */
-    preset?: "online" | "online-mobile";
+    preset?: 'online' | 'online-mobile';
 }
 export declare const AvatarBadgeWithPreset: ({ preset, ...restProps }: AvatarBadgeWithPresetProps) => JSX.Element;

package/dist/cjs/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.js

@@ -9,23 +9,23 @@ exports.AvatarBadgeWithPreset = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _ImageBase = require("../../ImageBase/ImageBase");
 var _icons = require("./icons");
 var _excluded = ["preset"];
 var AvatarBadgeWithPreset = function AvatarBadgeWithPreset(_ref) {
   var _ref$preset = _ref.preset,
-    preset = _ref$preset === void 0 ? "online" : _ref$preset,
+    preset = _ref$preset === void 0 ? 'online' : _ref$preset,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _React$useContext = React.useContext(_ImageBase.ImageBaseContext),
     size = _React$useContext.size;
   var badgeSize = (0, _ImageBase.getBadgeIconSizeByImageBaseSize)(size);
-  var isOnlinePreset = preset === "online";
+  var isOnlinePreset = preset === 'online';
   var presetClassName = isOnlinePreset ? "vkuiAvatarBadge--preset-online" : "vkuiAvatarBadge--preset-onlineMobile";
   var Icon = isOnlinePreset ? _icons.Icon12Circle : _icons.Icon12OnlineMobile;
   return /*#__PURE__*/React.createElement(_ImageBase.ImageBase.Badge, (0, _extends2.default)({}, restProps, {
     background: "stroke",
-    className: (0, _classNames.classNamesString)("vkuiAvatarBadge", presetClassName)
+    className: (0, _vkjs.classNames)("vkuiAvatarBadge", presetClassName)
   }), /*#__PURE__*/React.createElement(Icon, {
     width: badgeSize,
     height: badgeSize

package/dist/cjs/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarBadgeWithPreset.js","names":["AvatarBadgeWithPreset","preset","restProps","React","useContext","ImageBaseContext","size","badgeSize","getBadgeIconSizeByImageBaseSize","isOnlinePreset","presetClassName","Icon","Icon12Circle","Icon12OnlineMobile","classNamesString"],"sources":["../../../../../src/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../../lib/classNames\";\nimport {\n  type ImageBaseBadgeProps,\n  ImageBase,\n  ImageBaseContext,\n  getBadgeIconSizeByImageBaseSize,\n} from \"../../ImageBase/ImageBase\";\nimport { Icon12Circle, Icon12OnlineMobile } from \"./icons\";\nimport styles from \"./AvatarBadge.module.css\";\n\nexport interface AvatarBadgeWithPresetProps\n  extends Omit<ImageBaseBadgeProps, \"background\" | \"children\"> {\n  /**\n   * Использует предзаданные настройки.\n   *\n   * За каждым пресетом закреплена своя иконка и стили.\n   */\n  preset?: \"online\" | \"online-mobile\";\n}\n\nexport const AvatarBadgeWithPreset = ({\n  preset = \"online\",\n  ...restProps\n}: AvatarBadgeWithPresetProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  const badgeSize = getBadgeIconSizeByImageBaseSize(size);\n  const isOnlinePreset = preset === \"online\";\n  const presetClassName = isOnlinePreset\n    ? styles[`AvatarBadge--preset-online`]\n    : styles[`AvatarBadge--preset-onlineMobile`];\n  const Icon = isOnlinePreset ? Icon12Circle : Icon12OnlineMobile;\n\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      background=\"stroke\"\n      className={classNamesString(styles[\"AvatarBadge\"], presetClassName)}\n    >\n      <Icon width={badgeSize} height={badgeSize} />\n    </ImageBase.Badge>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAMA;AAA2D;AAapD,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAqB,OAGA;EAAA,uBAFhCC,MAAM;IAANA,MAAM,4BAAG,QAAQ;IACdC,SAAS;EAEZ,wBAAiBC,KAAK,CAACC,UAAU,CAACC,2BAAgB,CAAC;IAA3CC,IAAI,qBAAJA,IAAI;EACZ,IAAMC,SAAS,GAAG,IAAAC,0CAA+B,EAACF,IAAI,CAAC;EACvD,IAAMG,cAAc,GAAGR,MAAM,KAAK,QAAQ;EAC1C,IAAMS,eAAe,GAAGD,cAAc,4EAEQ;EAC9C,IAAME,IAAI,GAAGF,cAAc,GAAGG,mBAAY,GAAGC,yBAAkB;EAE/D,oBACE,oBAAC,oBAAS,CAAC,KAAK,6BACVX,SAAS;IACb,UAAU,EAAC,QAAQ;IACnB,SAAS,EAAE,IAAAY,4BAAgB,qBAAwBJ,eAAe;EAAE,iBAEpE,oBAAC,IAAI;IAAC,KAAK,EAAEH,SAAU;IAAC,MAAM,EAAEA;EAAU,EAAG,CAC7B;AAEtB,CAAC;AAAC"}
+{"version":3,"file":"AvatarBadgeWithPreset.js","names":["AvatarBadgeWithPreset","preset","restProps","React","useContext","ImageBaseContext","size","badgeSize","getBadgeIconSizeByImageBaseSize","isOnlinePreset","presetClassName","Icon","Icon12Circle","Icon12OnlineMobile","classNames"],"sources":["../../../../../src/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  type ImageBaseBadgeProps,\n  ImageBase,\n  ImageBaseContext,\n  getBadgeIconSizeByImageBaseSize,\n} from '../../ImageBase/ImageBase';\nimport { Icon12Circle, Icon12OnlineMobile } from './icons';\nimport styles from './AvatarBadge.module.css';\n\nexport interface AvatarBadgeWithPresetProps\n  extends Omit<ImageBaseBadgeProps, 'background' | 'children'> {\n  /**\n   * Использует предзаданные настройки.\n   *\n   * За каждым пресетом закреплена своя иконка и стили.\n   */\n  preset?: 'online' | 'online-mobile';\n}\n\nexport const AvatarBadgeWithPreset = ({\n  preset = 'online',\n  ...restProps\n}: AvatarBadgeWithPresetProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  const badgeSize = getBadgeIconSizeByImageBaseSize(size);\n  const isOnlinePreset = preset === 'online';\n  const presetClassName = isOnlinePreset\n    ? styles[`AvatarBadge--preset-online`]\n    : styles[`AvatarBadge--preset-onlineMobile`];\n  const Icon = isOnlinePreset ? Icon12Circle : Icon12OnlineMobile;\n\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      background=\"stroke\"\n      className={classNames(styles['AvatarBadge'], presetClassName)}\n    >\n      <Icon width={badgeSize} height={badgeSize} />\n    </ImageBase.Badge>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAMA;AAA2D;AAapD,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAqB,OAGA;EAAA,uBAFhCC,MAAM;IAANA,MAAM,4BAAG,QAAQ;IACdC,SAAS;EAEZ,wBAAiBC,KAAK,CAACC,UAAU,CAACC,2BAAgB,CAAC;IAA3CC,IAAI,qBAAJA,IAAI;EACZ,IAAMC,SAAS,GAAG,IAAAC,0CAA+B,EAACF,IAAI,CAAC;EACvD,IAAMG,cAAc,GAAGR,MAAM,KAAK,QAAQ;EAC1C,IAAMS,eAAe,GAAGD,cAAc,4EAEQ;EAC9C,IAAME,IAAI,GAAGF,cAAc,GAAGG,mBAAY,GAAGC,yBAAkB;EAE/D,oBACE,oBAAC,oBAAS,CAAC,KAAK,6BACVX,SAAS;IACb,UAAU,EAAC,QAAQ;IACnB,SAAS,EAAE,IAAAY,gBAAU,qBAAwBJ,eAAe;EAAE,iBAE9D,oBAAC,IAAI;IAAC,KAAK,EAAEH,SAAU;IAAC,MAAM,EAAEA;EAAU,EAAG,CAC7B;AAEtB,CAAC;AAAC"}

package/dist/cjs/components/Avatar/AvatarBadge/icons.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
-import { Icon12Circle as Icon12CircleLib, Icon12OnlineMobile as Icon12OnlineMobileLib } from "@vkontakte/icons";
+import * as React from 'react';
+import { Icon12Circle as Icon12CircleLib, Icon12OnlineMobile as Icon12OnlineMobileLib } from '@vkontakte/icons';
 export declare const Icon12Circle: ({ width, height, ...restProps }: React.ComponentProps<typeof Icon12CircleLib>) => JSX.Element;
 export declare const Icon12OnlineMobile: ({ width, height, ...restProps }: React.ComponentProps<typeof Icon12OnlineMobileLib>) => JSX.Element;

package/dist/cjs/components/Avatar/AvatarBadge/icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.js","names":["Icon12Circle","width","height","restProps","Icon12OnlineMobile"],"sources":["../../../../../src/components/Avatar/AvatarBadge/icons.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  Icon12Circle as Icon12CircleLib,\n  Icon12OnlineMobile as Icon12OnlineMobileLib,\n} from \"@vkontakte/icons\";\n\nexport const Icon12Circle = ({\n  width = 12,\n  height = 12,\n  ...restProps\n}: React.ComponentProps<typeof Icon12CircleLib>) => {\n  return (\n    <Icon12CircleLib\n      {...restProps}\n      width={width >= 24 ? 15 : 12}\n      height={height >= 24 ? 15 : 12}\n    />\n  );\n};\n\nexport const Icon12OnlineMobile = ({\n  width = 8,\n  height = 12,\n  ...restProps\n}: React.ComponentProps<typeof Icon12OnlineMobileLib>) => {\n  return (\n    <Icon12OnlineMobileLib\n      {...restProps}\n      width={width >= 24 ? 9 : 8}\n      height={height >= 24 ? 15 : 12}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAG0B;EAAA;AAEnB,IAAMA,YAAY,GAAG,SAAfA,YAAY,OAI2B;EAAA,sBAHlDC,KAAK;IAALA,KAAK,2BAAG,EAAE;IAAA,mBACVC,MAAM;IAANA,MAAM,4BAAG,EAAE;IACRC,SAAS;EAEZ,oBACE,oBAAC,mBAAe,6BACVA,SAAS;IACb,KAAK,EAAEF,KAAK,IAAI,EAAE,GAAG,EAAE,GAAG,EAAG;IAC7B,MAAM,EAAEC,MAAM,IAAI,EAAE,GAAG,EAAE,GAAG;EAAG,GAC/B;AAEN,CAAC;AAAC;AAEK,IAAME,kBAAkB,GAAG,SAArBA,kBAAkB,QAI2B;EAAA,wBAHxDH,KAAK;IAALA,KAAK,4BAAG,CAAC;IAAA,qBACTC,MAAM;IAANA,MAAM,6BAAG,EAAE;IACRC,SAAS;EAEZ,oBACE,oBAAC,yBAAqB,6BAChBA,SAAS;IACb,KAAK,EAAEF,KAAK,IAAI,EAAE,GAAG,CAAC,GAAG,CAAE;IAC3B,MAAM,EAAEC,MAAM,IAAI,EAAE,GAAG,EAAE,GAAG;EAAG,GAC/B;AAEN,CAAC;AAAC"}
+{"version":3,"file":"icons.js","names":["Icon12Circle","width","height","restProps","Icon12OnlineMobile"],"sources":["../../../../../src/components/Avatar/AvatarBadge/icons.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon12Circle as Icon12CircleLib,\n  Icon12OnlineMobile as Icon12OnlineMobileLib,\n} from '@vkontakte/icons';\n\nexport const Icon12Circle = ({\n  width = 12,\n  height = 12,\n  ...restProps\n}: React.ComponentProps<typeof Icon12CircleLib>) => {\n  return (\n    <Icon12CircleLib {...restProps} width={width >= 24 ? 15 : 12} height={height >= 24 ? 15 : 12} />\n  );\n};\n\nexport const Icon12OnlineMobile = ({\n  width = 8,\n  height = 12,\n  ...restProps\n}: React.ComponentProps<typeof Icon12OnlineMobileLib>) => {\n  return (\n    <Icon12OnlineMobileLib\n      {...restProps}\n      width={width >= 24 ? 9 : 8}\n      height={height >= 24 ? 15 : 12}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAG0B;EAAA;AAEnB,IAAMA,YAAY,GAAG,SAAfA,YAAY,OAI2B;EAAA,sBAHlDC,KAAK;IAALA,KAAK,2BAAG,EAAE;IAAA,mBACVC,MAAM;IAANA,MAAM,4BAAG,EAAE;IACRC,SAAS;EAEZ,oBACE,oBAAC,mBAAe,6BAAKA,SAAS;IAAE,KAAK,EAAEF,KAAK,IAAI,EAAE,GAAG,EAAE,GAAG,EAAG;IAAC,MAAM,EAAEC,MAAM,IAAI,EAAE,GAAG,EAAE,GAAG;EAAG,GAAG;AAEpG,CAAC;AAAC;AAEK,IAAME,kBAAkB,GAAG,SAArBA,kBAAkB,QAI2B;EAAA,wBAHxDH,KAAK;IAALA,KAAK,4BAAG,CAAC;IAAA,qBACTC,MAAM;IAANA,MAAM,6BAAG,EAAE;IACRC,SAAS;EAEZ,oBACE,oBAAC,yBAAqB,6BAChBA,SAAS;IACb,KAAK,EAAEF,KAAK,IAAI,EAAE,GAAG,CAAC,GAAG,CAAE;IAC3B,MAAM,EAAEC,MAAM,IAAI,EAAE,GAAG,EAAE,GAAG;EAAG,GAC/B;AAEN,CAAC;AAAC"}

package/dist/cjs/components/Avatar/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","names":["MAX_FONT_SIZE","MAX_IMAGE_BASE_SIZE","RELATIVE_SIZE","getInitialsFontSize","avatarSize","calculatedFontSize","Math","ceil","evenFix"],"sources":["../../../../src/components/Avatar/helpers.ts"],"sourcesContent":["import type { ImageBaseSize } from \"../ImageBase/ImageBase\";\n\nconst MAX_FONT_SIZE = 30;\nconst MAX_IMAGE_BASE_SIZE: ImageBaseSize = 96;\nconst RELATIVE_SIZE = MAX_FONT_SIZE / MAX_IMAGE_BASE_SIZE;\n\n/**\n * По возможности выставляем размеры по дизайн-системе. Иначе высчитываем.\n */\nexport function getInitialsFontSize(avatarSize: number): number {\n  if (avatarSize <= 16) {\n    return 5;\n  } else if (avatarSize <= 24) {\n    return 8;\n  } else if (avatarSize <= 32) {\n    return 10;\n  } else if (avatarSize <= 36) {\n    return 13;\n  } else if (avatarSize <= 44) {\n    return 14;\n  } else if (avatarSize <= 48) {\n    return 17;\n  } else if (avatarSize < 56) {\n    return 18;\n  } else if (avatarSize <= 64) {\n    return 21;\n  } else if (avatarSize <= 88) {\n    return 26;\n  } else if (avatarSize <= MAX_IMAGE_BASE_SIZE) {\n    return MAX_FONT_SIZE;\n  }\n\n  const calculatedFontSize = Math.ceil(avatarSize * RELATIVE_SIZE);\n  const evenFix = calculatedFontSize % 2;\n  return calculatedFontSize + evenFix;\n}\n"],"mappings":";;;;;;AAEA,IAAMA,aAAa,GAAG,EAAE;AACxB,IAAMC,mBAAkC,GAAG,EAAE;AAC7C,IAAMC,aAAa,GAAGF,aAAa,GAAGC,mBAAmB;;AAEzD;AACA;AACA;AACO,SAASE,mBAAmB,CAACC,UAAkB,EAAU;EAC9D,IAAIA,UAAU,IAAI,EAAE,EAAE;IACpB,OAAO,CAAC;EACV,CAAC,MAAM,IAAIA,UAAU,IAAI,EAAE,EAAE;IAC3B,OAAO,CAAC;EACV,CAAC,MAAM,IAAIA,UAAU,IAAI,EAAE,EAAE;IAC3B,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,UAAU,IAAI,EAAE,EAAE;IAC3B,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,UAAU,IAAI,EAAE,EAAE;IAC3B,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,UAAU,IAAI,EAAE,EAAE;IAC3B,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,UAAU,GAAG,EAAE,EAAE;IAC1B,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,UAAU,IAAI,EAAE,EAAE;IAC3B,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,UAAU,IAAI,EAAE,EAAE;IAC3B,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,UAAU,IAAIH,mBAAmB,EAAE;IAC5C,OAAOD,aAAa;EACtB;EAEA,IAAMK,kBAAkB,GAAGC,IAAI,CAACC,IAAI,CAACH,UAAU,GAAGF,aAAa,CAAC;EAChE,IAAMM,OAAO,GAAGH,kBAAkB,GAAG,CAAC;EACtC,OAAOA,kBAAkB,GAAGG,OAAO;AACrC"}
+{"version":3,"file":"helpers.js","names":["MAX_FONT_SIZE","MAX_IMAGE_BASE_SIZE","RELATIVE_SIZE","getInitialsFontSize","avatarSize","calculatedFontSize","Math","ceil","evenFix"],"sources":["../../../../src/components/Avatar/helpers.ts"],"sourcesContent":["import type { ImageBaseSize } from '../ImageBase/ImageBase';\n\nconst MAX_FONT_SIZE = 30;\nconst MAX_IMAGE_BASE_SIZE: ImageBaseSize = 96;\nconst RELATIVE_SIZE = MAX_FONT_SIZE / MAX_IMAGE_BASE_SIZE;\n\n/**\n * По возможности выставляем размеры по дизайн-системе. Иначе высчитываем.\n */\nexport function getInitialsFontSize(avatarSize: number): number {\n  if (avatarSize <= 16) {\n    return 5;\n  } else if (avatarSize <= 24) {\n    return 8;\n  } else if (avatarSize <= 32) {\n    return 10;\n  } else if (avatarSize <= 36) {\n    return 13;\n  } else if (avatarSize <= 44) {\n    return 14;\n  } else if (avatarSize <= 48) {\n    return 17;\n  } else if (avatarSize < 56) {\n    return 18;\n  } else if (avatarSize <= 64) {\n    return 21;\n  } else if (avatarSize <= 88) {\n    return 26;\n  } else if (avatarSize <= MAX_IMAGE_BASE_SIZE) {\n    return MAX_FONT_SIZE;\n  }\n\n  const calculatedFontSize = Math.ceil(avatarSize * RELATIVE_SIZE);\n  const evenFix = calculatedFontSize % 2;\n  return calculatedFontSize + evenFix;\n}\n"],"mappings":";;;;;;AAEA,IAAMA,aAAa,GAAG,EAAE;AACxB,IAAMC,mBAAkC,GAAG,EAAE;AAC7C,IAAMC,aAAa,GAAGF,aAAa,GAAGC,mBAAmB;;AAEzD;AACA;AACA;AACO,SAASE,mBAAmB,CAACC,UAAkB,EAAU;EAC9D,IAAIA,UAAU,IAAI,EAAE,EAAE;IACpB,OAAO,CAAC;EACV,CAAC,MAAM,IAAIA,UAAU,IAAI,EAAE,EAAE;IAC3B,OAAO,CAAC;EACV,CAAC,MAAM,IAAIA,UAAU,IAAI,EAAE,EAAE;IAC3B,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,UAAU,IAAI,EAAE,EAAE;IAC3B,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,UAAU,IAAI,EAAE,EAAE;IAC3B,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,UAAU,IAAI,EAAE,EAAE;IAC3B,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,UAAU,GAAG,EAAE,EAAE;IAC1B,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,UAAU,IAAI,EAAE,EAAE;IAC3B,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,UAAU,IAAI,EAAE,EAAE;IAC3B,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,UAAU,IAAIH,mBAAmB,EAAE;IAC5C,OAAOD,aAAa;EACtB;EAEA,IAAMK,kBAAkB,GAAGC,IAAI,CAACC,IAAI,CAACH,UAAU,GAAGF,aAAa,CAAC;EAChE,IAAMM,OAAO,GAAGH,kBAAkB,GAAG,CAAC;EACtC,OAAOA,kBAAkB,GAAGG,OAAO;AACrC"}

package/dist/cjs/components/Badge/Badge.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
+import * as React from 'react';
 export interface BadgeProps extends React.HTMLAttributes<HTMLElement> {
-    mode: "new" | "prominent";
+    mode: 'new' | 'prominent';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Badge

package/dist/cjs/components/Badge/Badge.js

@@ -9,18 +9,18 @@ exports.Badge = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _excluded = ["mode", "className"];
 /**
  * @see https://vkcom.github.io/VKUI/#/Badge
  */
 var Badge = function Badge(_ref) {
   var _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? "new" : _ref$mode,
+    mode = _ref$mode === void 0 ? 'new' : _ref$mode,
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({
-    className: (0, _classNames.classNamesString)("vkuiBadge", styles["Badge--mode-".concat(mode)], className)
+    className: (0, _vkjs.classNames)("vkuiBadge", styles["Badge--mode-".concat(mode)], className)
   }, restProps));
 };
 exports.Badge = Badge;

package/dist/cjs/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":["Badge","mode","className","restProps","classNamesString","styles"],"sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport styles from \"./Badge.module.css\";\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLElement> {\n  mode: \"new\" | \"prominent\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Badge\n */\nexport const Badge = ({\n  mode = \"new\",\n  className,\n  ...restProps\n}: BadgeProps) => (\n  <span\n    className={classNamesString(\n      styles[\"Badge\"],\n      styles[`Badge--mode-${mode}`],\n      className\n    )}\n    {...restProps}\n  />\n);\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAAwD;AAOxD;AACA;AACA;AACO,IAAMA,KAAK,GAAG,SAARA,KAAK;EAAA,qBAChBC,IAAI;IAAJA,IAAI,0BAAG,KAAK;IACZC,SAAS,QAATA,SAAS;IACNC,SAAS;EAAA,oBAEZ;IACE,SAAS,EAAE,IAAAC,4BAAgB,eAEzBC,MAAM,uBAAgBJ,IAAI,EAAG,EAC7BC,SAAS;EACT,GACEC,SAAS,EACb;AAAA,CACH;AAAC;AAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"Badge.js","names":["Badge","mode","className","restProps","classNames","styles"],"sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Badge.module.css';\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLElement> {\n  mode: 'new' | 'prominent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Badge\n */\nexport const Badge = ({ mode = 'new', className, ...restProps }: BadgeProps) => (\n  <span\n    className={classNames(styles['Badge'], styles[`Badge--mode-${mode}`], className)}\n    {...restProps}\n  />\n);\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAA6C;AAO7C;AACA;AACA;AACO,IAAMA,KAAK,GAAG,SAARA,KAAK;EAAA,qBAAMC,IAAI;IAAJA,IAAI,0BAAG,KAAK;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAAA,oBAC3D;IACE,SAAS,EAAE,IAAAC,gBAAU,eAAkBC,MAAM,uBAAgBJ,IAAI,EAAG,EAAEC,SAAS;EAAE,GAC7EC,SAAS,EACb;AAAA,CACH;AAAC;AAAA;EAAA;EAAA;AAAA"}

package/dist/cjs/components/Banner/Banner.d.ts

@@ -1,17 +1,17 @@
-import * as React from "react";
+import * as React from 'react';
 export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Тип баннера.
      */
-    mode?: "tint" | "image";
-    size?: "s" | "m";
+    mode?: 'tint' | 'image';
+    size?: 's' | 'm';
     /**
      * Тип действия в правой части баннера.
      *
      * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.
      * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.
      */
-    asideMode?: "dismiss" | "expand";
+    asideMode?: 'dismiss' | 'expand';
     /**
      * Срабатывает при клике на иконку крестика при `asideMode="dismiss"`.
      */
@@ -45,7 +45,7 @@ export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
      * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.
      * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.
      */
-    imageTheme?: "light" | "dark";
+    imageTheme?: 'light' | 'dark';
     /**
      * При использовании `mode="image"`.
      *