@vkontakte/vkui 5.0.2 → 5.1.0

package/dist/cssm/components/AppRoot/AppRootPortal.js

@@ -1,29 +1,23 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import * as React from "react";
-import { createPortal } from "react-dom";
-import { AppRootContext } from "./AppRootContext";
-import { AppearanceProvider } from "../AppearanceProvider/AppearanceProvider";
-import { useAppearance } from "../../hooks/useAppearance";
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { AppRootContext } from './AppRootContext';
+import { AppearanceProvider } from '../AppearanceProvider/AppearanceProvider';
+import { useAppearance } from '../../hooks/useAppearance';
+import { useIsClient } from '../../hooks/useIsClient';
 export var AppRootPortal = function AppRootPortal(_ref) {
   var children = _ref.children,
     className = _ref.className,
     forcePortalProp = _ref.forcePortal;
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    mounted = _React$useState2[0],
-    setMounted = _React$useState2[1];
   var _React$useContext = React.useContext(AppRootContext),
     portalRoot = _React$useContext.portalRoot,
     mode = _React$useContext.mode,
     disablePortal = _React$useContext.disablePortal;
   var appearance = useAppearance();
-  React.useEffect(function () {
-    setMounted(true);
-  }, []);
-  if (!mounted) {
+  var isClient = useIsClient();
+  if (!isClient) {
     return null;
   }
-  var forcePortal = forcePortalProp !== null && forcePortalProp !== void 0 ? forcePortalProp : mode !== "full";
+  var forcePortal = forcePortalProp !== null && forcePortalProp !== void 0 ? forcePortalProp : mode !== 'full';
   return !disablePortal && portalRoot && forcePortal ? /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(AppearanceProvider, {
     appearance: appearance
   }, /*#__PURE__*/React.createElement("div", {

package/dist/cssm/components/AppRoot/AppRootPortal.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppRootPortal.js","names":["React","createPortal","AppRootContext","AppearanceProvider","useAppearance","AppRootPortal","children","className","forcePortalProp","forcePortal","useState","mounted","setMounted","useContext","portalRoot","mode","disablePortal","appearance","useEffect"],"sources":["../../../../src/components/AppRoot/AppRootPortal.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { AppRootContext } from \"./AppRootContext\";\nimport { AppearanceProvider } from \"../AppearanceProvider/AppearanceProvider\";\nimport { useAppearance } from \"../../hooks/useAppearance\";\n\nexport interface AppRootPortalProps {\n  className?: string;\n  forcePortal?: boolean;\n  children?: React.ReactNode;\n}\n\nexport const AppRootPortal = ({\n  children,\n  className,\n  forcePortal: forcePortalProp,\n}: AppRootPortalProps) => {\n  const [mounted, setMounted] = React.useState(false);\n  const { portalRoot, mode, disablePortal } = React.useContext(AppRootContext);\n  const appearance = useAppearance();\n\n  React.useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  if (!mounted) {\n    return null;\n  }\n\n  const forcePortal = forcePortalProp ?? mode !== \"full\";\n\n  return !disablePortal && portalRoot && forcePortal ? (\n    createPortal(\n      <AppearanceProvider appearance={appearance}>\n        <div className={className}>{children}</div>\n      </AppearanceProvider>,\n      portalRoot\n    )\n  ) : (\n    <React.Fragment>{children}</React.Fragment>\n  );\n};\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,YAAY,QAAQ,WAAW;AACxC,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,kBAAkB,QAAQ,0CAA0C;AAC7E,SAASC,aAAa,QAAQ,2BAA2B;AAQzD,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAa,OAIA;EAAA,IAHxBC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACIC,eAAe,QAA5BC,WAAW;EAEX,sBAA8BT,KAAK,CAACU,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA5CC,OAAO;IAAEC,UAAU;EAC1B,wBAA4CZ,KAAK,CAACa,UAAU,CAACX,cAAc,CAAC;IAApEY,UAAU,qBAAVA,UAAU;IAAEC,IAAI,qBAAJA,IAAI;IAAEC,aAAa,qBAAbA,aAAa;EACvC,IAAMC,UAAU,GAAGb,aAAa,EAAE;EAElCJ,KAAK,CAACkB,SAAS,CAAC,YAAM;IACpBN,UAAU,CAAC,IAAI,CAAC;EAClB,CAAC,EAAE,EAAE,CAAC;EAEN,IAAI,CAACD,OAAO,EAAE;IACZ,OAAO,IAAI;EACb;EAEA,IAAMF,WAAW,GAAGD,eAAe,aAAfA,eAAe,cAAfA,eAAe,GAAIO,IAAI,KAAK,MAAM;EAEtD,OAAO,CAACC,aAAa,IAAIF,UAAU,IAAIL,WAAW,gBAChDR,YAAY,eACV,oBAAC,kBAAkB;IAAC,UAAU,EAAEgB;EAAW,gBACzC;IAAK,SAAS,EAAEV;EAAU,GAAED,QAAQ,CAAO,CACxB,EACrBQ,UAAU,CACX,gBAED,oBAAC,KAAK,CAAC,QAAQ,QAAER,QAAQ,CAC1B;AACH,CAAC"}
+{"version":3,"file":"AppRootPortal.js","names":["React","createPortal","AppRootContext","AppearanceProvider","useAppearance","useIsClient","AppRootPortal","children","className","forcePortalProp","forcePortal","useContext","portalRoot","mode","disablePortal","appearance","isClient"],"sources":["../../../../src/components/AppRoot/AppRootPortal.tsx"],"sourcesContent":["import * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { AppRootContext } from './AppRootContext';\nimport { AppearanceProvider } from '../AppearanceProvider/AppearanceProvider';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useIsClient } from '../../hooks/useIsClient';\n\nexport interface AppRootPortalProps {\n  className?: string;\n  forcePortal?: boolean;\n  children?: React.ReactNode;\n}\n\nexport const AppRootPortal = ({\n  children,\n  className,\n  forcePortal: forcePortalProp,\n}: AppRootPortalProps) => {\n  const { portalRoot, mode, disablePortal } = React.useContext(AppRootContext);\n  const appearance = useAppearance();\n\n  const isClient = useIsClient();\n  if (!isClient) {\n    return null;\n  }\n\n  const forcePortal = forcePortalProp ?? mode !== 'full';\n\n  return !disablePortal && portalRoot && forcePortal ? (\n    createPortal(\n      <AppearanceProvider appearance={appearance}>\n        <div className={className}>{children}</div>\n      </AppearanceProvider>,\n      portalRoot,\n    )\n  ) : (\n    <React.Fragment>{children}</React.Fragment>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,YAAY,QAAQ,WAAW;AACxC,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,kBAAkB,QAAQ,0CAA0C;AAC7E,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,yBAAyB;AAQrD,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAa,OAIA;EAAA,IAHxBC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACIC,eAAe,QAA5BC,WAAW;EAEX,wBAA4CV,KAAK,CAACW,UAAU,CAACT,cAAc,CAAC;IAApEU,UAAU,qBAAVA,UAAU;IAAEC,IAAI,qBAAJA,IAAI;IAAEC,aAAa,qBAAbA,aAAa;EACvC,IAAMC,UAAU,GAAGX,aAAa,EAAE;EAElC,IAAMY,QAAQ,GAAGX,WAAW,EAAE;EAC9B,IAAI,CAACW,QAAQ,EAAE;IACb,OAAO,IAAI;EACb;EAEA,IAAMN,WAAW,GAAGD,eAAe,aAAfA,eAAe,cAAfA,eAAe,GAAII,IAAI,KAAK,MAAM;EAEtD,OAAO,CAACC,aAAa,IAAIF,UAAU,IAAIF,WAAW,gBAChDT,YAAY,eACV,oBAAC,kBAAkB;IAAC,UAAU,EAAEc;EAAW,gBACzC;IAAK,SAAS,EAAEP;EAAU,GAAED,QAAQ,CAAO,CACxB,EACrBK,UAAU,CACX,gBAED,oBAAC,KAAK,CAAC,QAAQ,QAAEL,QAAQ,CAC1B;AACH,CAAC"}

package/dist/cssm/components/AppRoot/ScrollContext.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export interface ScrollContextInterface {
     getScroll(this: void): {
         x: number;
@@ -17,7 +17,7 @@ export interface ScrollControllerProps {
     children?: React.ReactNode;
 }
 export declare const GlobalScrollController: ({ children }: ScrollControllerProps) => JSX.Element;
-export declare const ElementScrollController: ({ elRef, children, }: ScrollControllerProps) => JSX.Element;
+export declare const ElementScrollController: ({ elRef, children }: ScrollControllerProps) => JSX.Element;
 /**
  * Вызывает функцию effect, до блокировки прокрутки
  * @param effect функция, которая может возвращать функцию очистки

package/dist/cssm/components/AppRoot/ScrollContext.js

@@ -1,17 +1,17 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import * as React from "react";
-import { noop } from "../../lib/utils";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
-import { clamp } from "../../helpers/math";
-import { useDOM } from "../../lib/dom";
+import * as React from 'react';
+import { noop } from '@vkontakte/vkjs';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { clamp } from '../../helpers/math';
+import { useDOM } from '../../lib/dom';
 var clearDisableScrollStyle = function clearDisableScrollStyle(node) {
   Object.assign(node.style, {
-    position: "",
-    top: "",
-    left: "",
-    right: "",
-    overflowY: "",
-    overflowX: ""
+    position: '',
+    top: '',
+    left: '',
+    right: '',
+    overflowY: '',
+    overflowX: ''
   });
 };
 var getPageYOffsetWithoutKeyboardHeight = function getPageYOffsetWithoutKeyboardHeight(window) {
@@ -64,13 +64,13 @@ export var GlobalScrollController = function GlobalScrollController(_ref) {
     });
     var scrollY = window.pageYOffset;
     var scrollX = window.pageXOffset;
-    var overflowY = window.innerWidth > document.documentElement.clientWidth ? "scroll" : "";
-    var overflowX = window.innerHeight > document.documentElement.clientHeight ? "scroll" : "";
+    var overflowY = window.innerWidth > document.documentElement.clientWidth ? 'scroll' : '';
+    var overflowX = window.innerHeight > document.documentElement.clientHeight ? 'scroll' : '';
     Object.assign(document.body.style, {
-      position: "fixed",
+      position: 'fixed',
       top: "-".concat(scrollY, "px"),
       left: "-".concat(scrollX, "px"),
-      right: "0",
+      right: '0',
       overflowY: overflowY,
       overflowX: overflowX
     });
@@ -80,7 +80,7 @@ export var GlobalScrollController = function GlobalScrollController(_ref) {
     var scrollY = document.body.style.top;
     var scrollX = document.body.style.left;
     clearDisableScrollStyle(document.body);
-    window.scrollTo(-parseInt(scrollX || "0"), -parseInt(scrollY || "0"));
+    window.scrollTo(-parseInt(scrollX || '0'), -parseInt(scrollY || '0'));
     setScrollLock(false);
   }, [document, window]);
   var scrollController = React.useMemo(function () {
@@ -129,13 +129,13 @@ export var ElementScrollController = function ElementScrollController(_ref2) {
     });
     var scrollY = el.scrollTop;
     var scrollX = el.scrollLeft;
-    var overflowY = el.scrollWidth > el.clientWidth ? "scroll" : "";
-    var overflowX = el.scrollHeight > el.clientHeight ? "scroll" : "";
+    var overflowY = el.scrollWidth > el.clientWidth ? 'scroll' : '';
+    var overflowX = el.scrollHeight > el.clientHeight ? 'scroll' : '';
     Object.assign(el.style, {
-      position: "absolute",
+      position: 'absolute',
       top: "-".concat(scrollY, "px"),
       left: "-".concat(scrollX, "px"),
-      right: "0",
+      right: '0',
       overflowY: overflowY,
       overflowX: overflowX
     });
@@ -149,7 +149,7 @@ export var ElementScrollController = function ElementScrollController(_ref2) {
     var scrollY = el.style.top;
     var scrollX = el.style.left;
     clearDisableScrollStyle(el);
-    el.scrollTo(-parseInt(scrollX || "0"), -parseInt(scrollY || "0"));
+    el.scrollTo(-parseInt(scrollX || '0'), -parseInt(scrollY || '0'));
     setScrollLock(false);
   }, [elRef]);
   var scrollController = React.useMemo(function () {

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollContext.js","names":["React","noop","useIsomorphicLayoutEffect","clamp","useDOM","clearDisableScrollStyle","node","Object","assign","style","position","top","left","right","overflowY","overflowX","getPageYOffsetWithoutKeyboardHeight","window","diffOfClientHeightAndViewportHeight","document","documentElement","clientHeight","innerHeight","pageYOffset","ScrollContext","createContext","getScroll","x","y","scrollTo","isScrollLock","enableScrollLock","disableScrollLock","useScroll","useContext","GlobalScrollController","children","useState","setScrollLock","beforeScrollLockFnSetRef","useRef","Set","useCallback","pageXOffset","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"],"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":["React","noop","useIsomorphicLayoutEffect","clamp","useDOM","clearDisableScrollStyle","node","Object","assign","style","position","top","left","right","overflowY","overflowX","getPageYOffsetWithoutKeyboardHeight","window","diffOfClientHeightAndViewportHeight","document","documentElement","clientHeight","innerHeight","pageYOffset","ScrollContext","createContext","getScroll","x","y","scrollTo","isScrollLock","enableScrollLock","disableScrollLock","useScroll","useContext","GlobalScrollController","children","useState","setScrollLock","beforeScrollLockFnSetRef","useRef","Set","useCallback","pageXOffset","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"],"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":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,QAAQ,iBAAiB;AACtC,SAASC,yBAAyB,QAAQ,qCAAqC;AAC/E,SAASC,KAAK,QAAQ,oBAAoB;AAC1C,SAASC,MAAM,QAAQ,eAAe;AAEtC,IAAMC,uBAAuB,GAAG,SAA1BA,uBAAuB,CAAIC,IAAiB,EAAK;EACrDC,MAAM,CAACC,MAAM,CAACF,IAAI,CAACG,KAAK,EAAE;IACxBC,QAAQ,EAAE,EAAE;IACZC,GAAG,EAAE,EAAE;IACPC,IAAI,EAAE,EAAE;IACRC,KAAK,EAAE,EAAE;IACTC,SAAS,EAAE,EAAE;IACbC,SAAS,EAAE;EACb,CAAC,CAAC;AACJ,CAAC;AAED,IAAMC,mCAAmC,GAAG,SAAtCA,mCAAmC,CAAIC,MAAc,EAAK;EAC9D;EACA;EACA;EACA,IAAMC,mCAAmC,GACvCD,MAAM,CAACE,QAAQ,CAACC,eAAe,CAACC,YAAY,GAAGJ,MAAM,CAACK,WAAW;EACnE,OAAOL,MAAM,CAACM,WAAW,GAAGL,mCAAmC;AACjE,CAAC;AAWD,OAAO,IAAMM,aAAa,gBAAGxB,KAAK,CAACyB,aAAa,CAAyB;EACvEC,SAAS,EAAE;IAAA,OAAO;MAAEC,CAAC,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAC;EAAA,CAAC;EACjCC,QAAQ,EAAE5B,IAAI;EACd6B,YAAY,EAAE,KAAK;EACnBC,gBAAgB,EAAE9B,IAAI;EACtB+B,iBAAiB,EAAE/B;AACrB,CAAC,CAAC;AAEF,OAAO,IAAMgC,SAAS,GAAG,SAAZA,SAAS;EAAA,OAASjC,KAAK,CAACkC,UAAU,CAACV,aAAa,CAAC;AAAA;AAO9D,OAAO,IAAMW,sBAAsB,GAAG,SAAzBA,sBAAsB,OAA4C;EAAA,IAAtCC,QAAQ,QAARA,QAAQ;EAC/C,cAA6BhC,MAAM,EAAE;IAA7Ba,MAAM,WAANA,MAAM;IAAEE,QAAQ,WAARA,QAAQ;EACxB,sBAAsCnB,KAAK,CAACqC,QAAQ,CAAC,KAAK,CAAC;IAAA;IAApDP,YAAY;IAAEQ,aAAa;EAClC,IAAMC,wBAAwB,GAAGvC,KAAK,CAACwC,MAAM,CAAkB,IAAIC,GAAG,EAAE,CAAC;EAEzE,IAAMf,SAAS,GAAG1B,KAAK,CAAC0C,WAAW,CACjC;IAAA,OAAO;MACLf,CAAC,EAAEV,MAAM,CAAE0B,WAAW;MACtBf,CAAC,EAAEZ,mCAAmC,CAACC,MAAM;IAC/C,CAAC;EAAA,CAAC,EACF,CAACA,MAAM,CAAC,CACT;EACD,IAAMY,QAAQ,GAAG7B,KAAK,CAAC0C,WAAW,CAChC,YAAkB;IAAA,IAAjBf,CAAC,uEAAG,CAAC;IAAA,IAAEC,CAAC,uEAAG,CAAC;IACX;IACAX,MAAM,CAAEY,QAAQ,CACdF,CAAC,GAAGxB,KAAK,CAACwB,CAAC,EAAE,CAAC,EAAER,QAAQ,CAAEyB,IAAI,CAACC,WAAW,GAAG5B,MAAM,CAAE6B,UAAU,CAAC,GAAG,CAAC,EACpElB,CAAC,GAAGzB,KAAK,CAACyB,CAAC,EAAE,CAAC,EAAET,QAAQ,CAAEyB,IAAI,CAACG,YAAY,GAAG9B,MAAM,CAAEK,WAAW,CAAC,GAAG,CAAC,CACvE;EACH,CAAC,EACD,CAACH,QAAQ,EAAEF,MAAM,CAAC,CACnB;EAED,IAAMc,gBAAgB,GAAG/B,KAAK,CAAC0C,WAAW,CAA6C,YAAM;IAC3FH,wBAAwB,CAACS,OAAO,CAACC,OAAO,CAAC,UAACC,EAAE,EAAK;MAC/CA,EAAE,EAAE;IACN,CAAC,CAAC;IAEF,IAAMC,OAAO,GAAGlC,MAAM,CAAEM,WAAW;IACnC,IAAM6B,OAAO,GAAGnC,MAAM,CAAE0B,WAAW;IACnC,IAAM7B,SAAS,GAAGG,MAAM,CAAE6B,UAAU,GAAG3B,QAAQ,CAAEC,eAAe,CAACiC,WAAW,GAAG,QAAQ,GAAG,EAAE;IAC5F,IAAMtC,SAAS,GAAGE,MAAM,CAAEK,WAAW,GAAGH,QAAQ,CAAEC,eAAe,CAACC,YAAY,GAAG,QAAQ,GAAG,EAAE;IAE9Fd,MAAM,CAACC,MAAM,CAACW,QAAQ,CAAEyB,IAAI,CAACnC,KAAK,EAAE;MAClCC,QAAQ,EAAE,OAAO;MACjBC,GAAG,aAAMwC,OAAO,OAAI;MACpBvC,IAAI,aAAMwC,OAAO,OAAI;MACrBvC,KAAK,EAAE,GAAG;MACVC,SAAS,EAATA,SAAS;MACTC,SAAS,EAATA;IACF,CAAC,CAAC;IACFuB,aAAa,CAAC,IAAI,CAAC;EACrB,CAAC,EAAE,CAACnB,QAAQ,EAAEF,MAAM,CAAC,CAAC;EAEtB,IAAMe,iBAAiB,GAAGhC,KAAK,CAAC0C,WAAW,CAA8C,YAAM;IAC7F,IAAMS,OAAO,GAAGhC,QAAQ,CAAEyB,IAAI,CAACnC,KAAK,CAACE,GAAG;IACxC,IAAMyC,OAAO,GAAGjC,QAAQ,CAAEyB,IAAI,CAACnC,KAAK,CAACG,IAAI;IAEzCP,uBAAuB,CAACc,QAAQ,CAAEyB,IAAI,CAAC;IACvC3B,MAAM,CAAEY,QAAQ,CAAC,CAACyB,QAAQ,CAACF,OAAO,IAAI,GAAG,CAAC,EAAE,CAACE,QAAQ,CAACH,OAAO,IAAI,GAAG,CAAC,CAAC;IACtEb,aAAa,CAAC,KAAK,CAAC;EACtB,CAAC,EAAE,CAACnB,QAAQ,EAAEF,MAAM,CAAC,CAAC;EAEtB,IAAMsC,gBAAgB,GAAGvD,KAAK,CAACwD,OAAO,CACpC;IAAA,OAAO;MACL9B,SAAS,EAATA,SAAS;MACTG,QAAQ,EAARA,QAAQ;MACRC,YAAY,EAAZA,YAAY;MACZE,iBAAiB,EAAjBA,iBAAiB;MACjBD,gBAAgB,EAAhBA,gBAAgB;MAEhBQ,wBAAwB,EAAEA;IAC5B,CAAC;EAAA,CAAC,EACF,CAACb,SAAS,EAAEG,QAAQ,EAAEC,YAAY,EAAEE,iBAAiB,EAAED,gBAAgB,CAAC,CACzE;EAED,oBAAO,oBAAC,aAAa,CAAC,QAAQ;IAAC,KAAK,EAAEwB;EAAiB,GAAEnB,QAAQ,CAA0B;AAC7F,CAAC;AAED,OAAO,IAAMqB,uBAAuB,GAAG,SAA1BA,uBAAuB,QAAmD;EAAA,IAA7CC,KAAK,SAALA,KAAK;IAAEtB,QAAQ,SAARA,QAAQ;EACvD,uBAAsCpC,KAAK,CAACqC,QAAQ,CAAC,KAAK,CAAC;IAAA;IAApDP,YAAY;IAAEQ,aAAa;EAClC,IAAMC,wBAAwB,GAAGvC,KAAK,CAACwC,MAAM,CAAkB,IAAIC,GAAG,EAAE,CAAC;EAEzE,IAAMf,SAAS,GAAG1B,KAAK,CAAC0C,WAAW,CACjC;IAAA;IAAA,OAAO;MACLf,CAAC,6CAAE+B,KAAK,CAACV,OAAO,mDAAb,eAAeW,UAAU,yEAAI,CAAC;MACjC/B,CAAC,+CAAE8B,KAAK,CAACV,OAAO,oDAAb,gBAAeY,SAAS,2EAAI;IACjC,CAAC;EAAA,CAAC,EACF,CAACF,KAAK,CAAC,CACR;EACD,IAAM7B,QAAQ,GAAG7B,KAAK,CAAC0C,WAAW,CAChC,YAAkB;IAAA,IAAjBf,CAAC,uEAAG,CAAC;IAAA,IAAEC,CAAC,uEAAG,CAAC;IACX,IAAMiC,EAAE,GAAGH,KAAK,CAACV,OAAO;IACxB;IACAa,EAAE,aAAFA,EAAE,uBAAFA,EAAE,CAAEhC,QAAQ,CACVF,CAAC,GAAGxB,KAAK,CAACwB,CAAC,EAAE,CAAC,EAAEkC,EAAE,CAAChB,WAAW,GAAGgB,EAAE,CAACR,WAAW,CAAC,GAAG,CAAC,EACpDzB,CAAC,GAAGzB,KAAK,CAACyB,CAAC,EAAE,CAAC,EAAEiC,EAAE,CAACd,YAAY,GAAGc,EAAE,CAACxC,YAAY,CAAC,GAAG,CAAC,CACvD;EACH,CAAC,EACD,CAACqC,KAAK,CAAC,CACR;EAED,IAAM3B,gBAAgB,GAAG/B,KAAK,CAAC0C,WAAW,CAA6C,YAAM;IAC3F,IAAMmB,EAAE,GAAGH,KAAK,CAACV,OAAO;IACxB,IAAI,CAACa,EAAE,EAAE;MACP;IACF;IACAtB,wBAAwB,CAACS,OAAO,CAACC,OAAO,CAAC,UAACC,EAAE,EAAK;MAC/CA,EAAE,EAAE;IACN,CAAC,CAAC;IAEF,IAAMC,OAAO,GAAGU,EAAE,CAACD,SAAS;IAC5B,IAAMR,OAAO,GAAGS,EAAE,CAACF,UAAU;IAC7B,IAAM7C,SAAS,GAAG+C,EAAE,CAAChB,WAAW,GAAGgB,EAAE,CAACR,WAAW,GAAG,QAAQ,GAAG,EAAE;IACjE,IAAMtC,SAAS,GAAG8C,EAAE,CAACd,YAAY,GAAGc,EAAE,CAACxC,YAAY,GAAG,QAAQ,GAAG,EAAE;IAEnEd,MAAM,CAACC,MAAM,CAACqD,EAAE,CAACpD,KAAK,EAAE;MACtBC,QAAQ,EAAE,UAAU;MACpBC,GAAG,aAAMwC,OAAO,OAAI;MACpBvC,IAAI,aAAMwC,OAAO,OAAI;MACrBvC,KAAK,EAAE,GAAG;MACVC,SAAS,EAATA,SAAS;MACTC,SAAS,EAATA;IACF,CAAC,CAAC;IACFuB,aAAa,CAAC,IAAI,CAAC;EACrB,CAAC,EAAE,CAACoB,KAAK,CAAC,CAAC;EAEX,IAAM1B,iBAAiB,GAAGhC,KAAK,CAAC0C,WAAW,CAA8C,YAAM;IAC7F,IAAMmB,EAAE,GAAGH,KAAK,CAACV,OAAO;IACxB,IAAI,CAACa,EAAE,EAAE;MACP;IACF;IAEA,IAAMV,OAAO,GAAGU,EAAE,CAACpD,KAAK,CAACE,GAAG;IAC5B,IAAMyC,OAAO,GAAGS,EAAE,CAACpD,KAAK,CAACG,IAAI;IAE7BP,uBAAuB,CAACwD,EAAE,CAAC;IAC3BA,EAAE,CAAChC,QAAQ,CAAC,CAACyB,QAAQ,CAACF,OAAO,IAAI,GAAG,CAAC,EAAE,CAACE,QAAQ,CAACH,OAAO,IAAI,GAAG,CAAC,CAAC;IACjEb,aAAa,CAAC,KAAK,CAAC;EACtB,CAAC,EAAE,CAACoB,KAAK,CAAC,CAAC;EAEX,IAAMH,gBAAgB,GAAGvD,KAAK,CAACwD,OAAO,CACpC;IAAA,OAAO;MACL9B,SAAS,EAATA,SAAS;MACTG,QAAQ,EAARA,QAAQ;MACRC,YAAY,EAAZA,YAAY;MACZE,iBAAiB,EAAjBA,iBAAiB;MACjBD,gBAAgB,EAAhBA,gBAAgB;MAChBQ,wBAAwB,EAAxBA;IACF,CAAC;EAAA,CAAC,EACF,CAACb,SAAS,EAAEG,QAAQ,EAAEC,YAAY,EAAEE,iBAAiB,EAAED,gBAAgB,CAAC,CACzE;EAED,oBAAO,oBAAC,aAAa,CAAC,QAAQ;IAAC,KAAK,EAAEwB;EAAiB,GAAEnB,QAAQ,CAA0B;AAC7F,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA,OAAO,IAAM0B,mBAAmB,GAAG,SAAtBA,mBAAmB,CAAIC,MAA4B,EAAEC,IAA0B,EAAK;EAC/F,IAAMC,aAAa,GAAGjE,KAAK,CAACwC,MAAM,CAAmCvC,IAAI,CAAC;EAC1E,iBAAmDgC,SAAS,EAAE;IAAtDH,YAAY,cAAZA,YAAY;IAAES,wBAAwB,cAAxBA,wBAAwB;;EAE9C;EACA,IAAM2B,cAAc,GAAGlE,KAAK,CAAC0C,WAAW,CAAC,YAAM;IAC7CuB,aAAa,CAACjB,OAAO,GAAGe,MAAM,EAAE;IAChC;EACF,CAAC,EAAEC,IAAI,CAAC;;EAER;EACA;EACAhE,KAAK,CAACmE,SAAS,CAAC,YAAM;IACpB,IAAMC,SAAS,GAAG7B,wBAAwB,aAAxBA,wBAAwB,uBAAxBA,wBAAwB,CAAES,OAAO;IACnD,IAAI,CAACoB,SAAS,EAAE;MACd,OAAOnE,IAAI;IACb;IAEAmE,SAAS,CAACC,GAAG,CAACH,cAAc,CAAC;IAE7B,OAAO,YAAM;MACXE,SAAS,CAACE,MAAM,CAACJ,cAAc,CAAC;IAClC,CAAC;EACH,CAAC,EAAE,CAAC3B,wBAAwB,EAAE2B,cAAc,CAAC,CAAC;;EAE9C;EACAlE,KAAK,CAACmE,SAAS,CAAC,YAAM;IACpB,IAAI,CAACrC,YAAY,IAAImC,aAAa,CAACjB,OAAO,EAAE;MAC1CiB,aAAa,CAACjB,OAAO,EAAE;IACzB;EACF,CAAC,EAAE,CAAClB,YAAY,CAAC,CAAC;AACpB,CAAC;AAED,OAAO,IAAMyC,aAAa,GAAG,SAAhBA,aAAa,GAAuB;EAAA,IAAnBC,OAAO,uEAAG,IAAI;EAC1C,kBAAgDvC,SAAS,EAAE;IAAnDF,gBAAgB,eAAhBA,gBAAgB;IAAEC,iBAAiB,eAAjBA,iBAAiB;EAC3C9B,yBAAyB,CAAC,YAAM;IAC9B,IAAIsE,OAAO,EAAE;MACXzC,gBAAgB,EAAE;MAClB,OAAOC,iBAAiB;IAC1B;IACA,OAAO/B,IAAI;EACb,CAAC,EAAE,CAAC8B,gBAAgB,EAAEC,iBAAiB,EAAEwC,OAAO,CAAC,CAAC;AACpD,CAAC"}

package/dist/cssm/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/cssm/components/AppearanceProvider/AppearanceProvider.js

@@ -1,26 +1,7 @@
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { usePlatform } from "../../hooks/usePlatform";
-import { Platform } from "../../lib/platform";
-import { ConfigProviderOverride } from "../ConfigProvider/ConfigProviderOverride";
-export var generateVKUITokensClassName = function generateVKUITokensClassName(platform, appearance) {
-  var tokensPlatform;
-  switch (platform) {
-    case Platform.ANDROID:
-      tokensPlatform = "vkBase";
-      break;
-    case Platform.IOS:
-      tokensPlatform = "vkIOS";
-      break;
-    case Platform.VKCOM:
-      tokensPlatform = "vkCom";
-      break;
-    default:
-      tokensPlatform = platform;
-  }
-  return "vkui--".concat(tokensPlatform, "--").concat(appearance);
-};
-
+import * as React from 'react';
+import { usePlatform } from '../../hooks/usePlatform';
+import { TokensClassProvider } from '../../lib/tokensClassProvider';
+import { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';
 /**
  * @see https://vkcom.github.io/VKUI/#/AppearanceProvider
  */
@@ -30,13 +11,9 @@ export var AppearanceProvider = function AppearanceProvider(_ref) {
   var platform = usePlatform();
   return /*#__PURE__*/React.createElement(ConfigProviderOverride, {
     appearance: appearance
-  }, React.Children.map(children, function (child) {
-    if ( /*#__PURE__*/React.isValidElement(child)) {
-      return /*#__PURE__*/React.cloneElement(child, {
-        className: classNamesString(child.props.className, generateVKUITokensClassName(platform, appearance))
-      });
-    }
-    return child;
-  }));
+  }, /*#__PURE__*/React.createElement(TokensClassProvider, {
+    platform: platform,
+    appearance: appearance
+  }, children));
 };
 //# sourceMappingURL=AppearanceProvider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AppearanceProvider.js","names":["React","classNamesString","usePlatform","Platform","ConfigProviderOverride","generateVKUITokensClassName","platform","appearance","tokensPlatform","ANDROID","IOS","VKCOM","AppearanceProvider","children","Children","map","child","isValidElement","cloneElement","className","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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,sBAAsB,QAAQ,0CAA0C;AAOjF,OAAO,IAAMC,2BAA2B,GAAG,SAA9BA,2BAA2B,CACtCC,QAAgB,EAChBC,UAAkB,EACP;EACX,IAAIC,cAAc;EAClB,QAAQF,QAAQ;IACd,KAAKH,QAAQ,CAACM,OAAO;MACnBD,cAAc,GAAG,QAAQ;MACzB;IACF,KAAKL,QAAQ,CAACO,GAAG;MACfF,cAAc,GAAG,OAAO;MACxB;IACF,KAAKL,QAAQ,CAACQ,KAAK;MACjBH,cAAc,GAAG,OAAO;MACxB;IACF;MACEA,cAAc,GAAGF,QAAQ;EAAC;EAG9B,uBAAgBE,cAAc,eAAKD,UAAU;AAC/C,CAAC;;AAED;AACA;AACA;AACA,OAAO,IAAMK,kBAAkB,GAAG,SAArBA,kBAAkB,OAGA;EAAA,IAF7BL,UAAU,QAAVA,UAAU;IACVM,QAAQ,QAARA,QAAQ;EAER,IAAMP,QAAQ,GAAGJ,WAAW,EAAE;EAE9B,oBACE,oBAAC,sBAAsB;IAAC,UAAU,EAAEK;EAAW,GAC5CP,KAAK,CAACc,QAAQ,CAACC,GAAG,CAACF,QAAQ,EAAE,UAACG,KAAK,EAAK;IACvC,kBAAIhB,KAAK,CAACiB,cAAc,CAAyBD,KAAK,CAAC,EAAE;MACvD,oBAAOhB,KAAK,CAACkB,YAAY,CAACF,KAAK,EAAE;QAC/BG,SAAS,EAAElB,gBAAgB,CACzBe,KAAK,CAACI,KAAK,CAACD,SAAS,EACrBd,2BAA2B,CAACC,QAAQ,EAAEC,UAAU,CAAC;MAErD,CAAC,CAAC;IACJ;IACA,OAAOS,KAAK;EACd,CAAC,CAAC,CACqB;AAE7B,CAAC"}
+{"version":3,"file":"AppearanceProvider.js","names":["React","usePlatform","TokensClassProvider","ConfigProviderOverride","AppearanceProvider","appearance","children","platform"],"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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,mBAAmB,QAAQ,+BAA+B;AACnE,SAASC,sBAAsB,QAAQ,0CAA0C;AAOjF;AACA;AACA;AACA,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkB,OAA0D;EAAA,IAApDC,UAAU,QAAVA,UAAU;IAAEC,QAAQ,QAARA,QAAQ;EACvD,IAAMC,QAAQ,GAAGN,WAAW,EAAE;EAE9B,oBACE,oBAAC,sBAAsB;IAAC,UAAU,EAAEI;EAAW,gBAC7C,oBAAC,mBAAmB;IAAC,QAAQ,EAAEE,QAAS;IAAC,UAAU,EAAEF;EAAW,GAC7DC,QAAQ,CACW,CACC;AAE7B,CAAC"}

package/dist/cssm/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/cssm/components/Avatar/Avatar.js

@@ -1,21 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["size", "className", "gradientColor", "initials", "fallbackIcon", "children"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { ImageBase } from "../ImageBase/ImageBase";
-import { getInitialsFontSize } from "./helpers";
-import { AvatarBadge } from "./AvatarBadge/AvatarBadge";
-import { AvatarBadgeWithPreset } from "./AvatarBadge/AvatarBadgeWithPreset";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { ImageBase } from '../ImageBase/ImageBase';
+import { getInitialsFontSize } from './helpers';
+import { AvatarBadge } from './AvatarBadge/AvatarBadge';
+import { AvatarBadgeWithPreset } from './AvatarBadge/AvatarBadgeWithPreset';
 import "./Avatar.module.css";
 export var AVATAR_DEFAULT_SIZE = 48;
 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'
 };
 
 /**
@@ -24,13 +24,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
@@ -44,13 +44,13 @@ export var Avatar = function Avatar(_ref) {
     fallbackIcon = _ref.fallbackIcon,
     children = _ref.children,
     restProps = _objectWithoutProperties(_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, _extends({}, restProps, {
     size: size,
     fallbackIcon: rewrittenFallbackIcon,
-    className: classNamesString("vkuiAvatar", gradientName && "vkuiAvatar--has-gradient", isGradientNotCustom && gradientStyles[gradientName], className)
+    className: classNames("vkuiAvatar", gradientName && "vkuiAvatar--has-gradient", isGradientNotCustom && gradientStyles[gradientName], className)
   }), initials && /*#__PURE__*/React.createElement("div", {
     className: "vkuiAvatar__initials",
     style: {

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":["React","classNamesString","ImageBase","getInitialsFontSize","AvatarBadge","AvatarBadgeWithPreset","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","fontSize","Badge","BadgeWithPreset","Overlay"],"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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAGEC,SAAS,QACJ,wBAAwB;AAC/B,SAASC,mBAAmB,QAAQ,WAAW;AAC/C,SAAgCC,WAAW,QAAQ,2BAA2B;AAC9E,SAEEC,qBAAqB,QAChB,qCAAqC;AAAC;AAS7C,OAAO,IAAMC,mBAAmB,GAAG,EAAE;AAErC,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;AACA,OAAO,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,SAAS,eACJE,SAAS;IACb,IAAI,EAAEN,IAAK;IACX,YAAY,EAAES,qBAAsB;IACpC,SAAS,EAAExB,gBAAgB,eAEzBsB,YAAY,8BAAkC,EAC9CC,mBAAmB,IAAIhB,cAAc,CAACe,YAAY,CAAC,EACnDN,SAAS;EACT,IAEDE,QAAQ,iBACP;IACE,SAAS,wBAA6B;IACtC,KAAK,EAAE;MACLQ,QAAQ,EAAExB,mBAAmB,CAACa,IAAI;IACpC;EAAE,GAEDG,QAAQ,CAEZ,EACAE,QAAQ,CACC;AAEhB,CAAC;AAEDN,MAAM,CAACa,KAAK,GAAGxB,WAAW;AAE1BW,MAAM,CAACc,eAAe,GAAGxB,qBAAqB;AAE9CU,MAAM,CAACe,OAAO,GAAG5B,SAAS,CAAC4B,OAAO"}
+{"version":3,"file":"Avatar.js","names":["React","classNames","ImageBase","getInitialsFontSize","AvatarBadge","AvatarBadgeWithPreset","AVATAR_DEFAULT_SIZE","COLORS_NUMBER_TO_TEXT_MAP","gradientStyles","Avatar","size","className","gradientColor","initials","fallbackIcon","children","restProps","gradientName","isGradientNotCustom","rewrittenFallbackIcon","undefined","fontSize","Badge","BadgeWithPreset","Overlay"],"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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAA0DC,SAAS,QAAQ,wBAAwB;AACnG,SAASC,mBAAmB,QAAQ,WAAW;AAC/C,SAAgCC,WAAW,QAAQ,2BAA2B;AAC9E,SAEEC,qBAAqB,QAChB,qCAAqC;AAAC;AAS7C,OAAO,IAAMC,mBAAmB,GAAG,EAAE;AAErC,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;AACA,OAAO,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,SAAS,eACJE,SAAS;IACb,IAAI,EAAEN,IAAK;IACX,YAAY,EAAES,qBAAsB;IACpC,SAAS,EAAElB,UAAU,eAEnBgB,YAAY,8BAAkC,EAC9CC,mBAAmB,IAAIV,cAAc,CAACS,YAAY,CAAC,EACnDN,SAAS;EACT,IAEDE,QAAQ,iBACP;IACE,SAAS,wBAA6B;IACtC,KAAK,EAAE;MACLQ,QAAQ,EAAElB,mBAAmB,CAACO,IAAI;IACpC;EAAE,GAEDG,QAAQ,CAEZ,EACAE,QAAQ,CACC;AAEhB,CAAC;AAEDN,MAAM,CAACa,KAAK,GAAGlB,WAAW;AAE1BK,MAAM,CAACc,eAAe,GAAGlB,qBAAqB;AAE9CI,MAAM,CAACe,OAAO,GAAGtB,SAAS,CAACsB,OAAO"}

package/dist/cssm/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/cssm/components/Avatar/AvatarBadge/AvatarBadge.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className"];
-import * as React from "react";
-import { classNamesString } from "../../../lib/classNames";
-import { ImageBase, ImageBaseContext } from "../../ImageBase/ImageBase";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { ImageBase, ImageBaseContext } from '../../ImageBase/ImageBase';
 import "./AvatarBadge.module.css";
 export var AvatarBadge = function AvatarBadge(_ref) {
   var className = _ref.className,
@@ -11,7 +11,7 @@ export var AvatarBadge = function AvatarBadge(_ref) {
   var _React$useContext = React.useContext(ImageBaseContext),
     size = _React$useContext.size;
   return /*#__PURE__*/React.createElement(ImageBase.Badge, _extends({}, restProps, {
-    className: classNamesString("vkuiAvatarBadge", size < 96 && "vkuiAvatarBadge--shifted", className)
+    className: classNames("vkuiAvatarBadge", size < 96 && "vkuiAvatarBadge--shifted", className)
   }));
 };
 //# sourceMappingURL=AvatarBadge.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarBadge.js","names":["React","classNamesString","ImageBase","ImageBaseContext","AvatarBadge","className","restProps","useContext","size"],"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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,yBAAyB;AAC1D,SAEEC,SAAS,EACTC,gBAAgB,QACX,2BAA2B;AAAC;AAKnC,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAAsD;EAAA,IAAhDC,SAAS,QAATA,SAAS;IAAKC,SAAS;EACnD,wBAAiBN,KAAK,CAACO,UAAU,CAACJ,gBAAgB,CAAC;IAA3CK,IAAI,qBAAJA,IAAI;EACZ,oBACE,oBAAC,SAAS,CAAC,KAAK,eACVF,SAAS;IACb,SAAS,EAAEL,gBAAgB,oBAEzBO,IAAI,GAAG,EAAE,8BAAkC,EAC3CH,SAAS;EACT,GACF;AAEN,CAAC"}
+{"version":3,"file":"AvatarBadge.js","names":["React","classNames","ImageBase","ImageBaseContext","AvatarBadge","className","restProps","useContext","size"],"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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAAmCC,SAAS,EAAEC,gBAAgB,QAAQ,2BAA2B;AAAC;AAKlG,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAAsD;EAAA,IAAhDC,SAAS,QAATA,SAAS;IAAKC,SAAS;EACnD,wBAAiBN,KAAK,CAACO,UAAU,CAACJ,gBAAgB,CAAC;IAA3CK,IAAI,qBAAJA,IAAI;EACZ,oBACE,oBAAC,SAAS,CAAC,KAAK,eACVF,SAAS;IACb,SAAS,EAAEL,UAAU,oBAEnBO,IAAI,GAAG,EAAE,8BAAkC,EAC3CH,SAAS;EACT,GACF;AAEN,CAAC"}

package/dist/cssm/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/cssm/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.js

@@ -1,24 +1,24 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["preset"];
-import * as React from "react";
-import { classNamesString } from "../../../lib/classNames";
-import { ImageBase, ImageBaseContext, getBadgeIconSizeByImageBaseSize } from "../../ImageBase/ImageBase";
-import { Icon12Circle, Icon12OnlineMobile } from "./icons";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { ImageBase, ImageBaseContext, getBadgeIconSizeByImageBaseSize } from '../../ImageBase/ImageBase';
+import { Icon12Circle, Icon12OnlineMobile } from './icons';
 import "./AvatarBadge.module.css";
 export 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 = _objectWithoutProperties(_ref, _excluded);
   var _React$useContext = React.useContext(ImageBaseContext),
     size = _React$useContext.size;
   var badgeSize = getBadgeIconSizeByImageBaseSize(size);
-  var isOnlinePreset = preset === "online";
+  var isOnlinePreset = preset === 'online';
   var presetClassName = isOnlinePreset ? "vkuiAvatarBadge--preset-online" : "vkuiAvatarBadge--preset-onlineMobile";
   var Icon = isOnlinePreset ? Icon12Circle : Icon12OnlineMobile;
   return /*#__PURE__*/React.createElement(ImageBase.Badge, _extends({}, restProps, {
     background: "stroke",
-    className: classNamesString("vkuiAvatarBadge", presetClassName)
+    className: classNames("vkuiAvatarBadge", presetClassName)
   }), /*#__PURE__*/React.createElement(Icon, {
     width: badgeSize,
     height: badgeSize

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarBadgeWithPreset.js","names":["React","classNamesString","ImageBase","ImageBaseContext","getBadgeIconSizeByImageBaseSize","Icon12Circle","Icon12OnlineMobile","AvatarBadgeWithPreset","preset","restProps","useContext","size","badgeSize","isOnlinePreset","presetClassName","Icon"],"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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,yBAAyB;AAC1D,SAEEC,SAAS,EACTC,gBAAgB,EAChBC,+BAA+B,QAC1B,2BAA2B;AAClC,SAASC,YAAY,EAAEC,kBAAkB,QAAQ,SAAS;AAAC;AAa3D,OAAO,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqB,OAGA;EAAA,uBAFhCC,MAAM;IAANA,MAAM,4BAAG,QAAQ;IACdC,SAAS;EAEZ,wBAAiBT,KAAK,CAACU,UAAU,CAACP,gBAAgB,CAAC;IAA3CQ,IAAI,qBAAJA,IAAI;EACZ,IAAMC,SAAS,GAAGR,+BAA+B,CAACO,IAAI,CAAC;EACvD,IAAME,cAAc,GAAGL,MAAM,KAAK,QAAQ;EAC1C,IAAMM,eAAe,GAAGD,cAAc,4EAEQ;EAC9C,IAAME,IAAI,GAAGF,cAAc,GAAGR,YAAY,GAAGC,kBAAkB;EAE/D,oBACE,oBAAC,SAAS,CAAC,KAAK,eACVG,SAAS;IACb,UAAU,EAAC,QAAQ;IACnB,SAAS,EAAER,gBAAgB,oBAAwBa,eAAe;EAAE,iBAEpE,oBAAC,IAAI;IAAC,KAAK,EAAEF,SAAU;IAAC,MAAM,EAAEA;EAAU,EAAG,CAC7B;AAEtB,CAAC"}
+{"version":3,"file":"AvatarBadgeWithPreset.js","names":["React","classNames","ImageBase","ImageBaseContext","getBadgeIconSizeByImageBaseSize","Icon12Circle","Icon12OnlineMobile","AvatarBadgeWithPreset","preset","restProps","useContext","size","badgeSize","isOnlinePreset","presetClassName","Icon"],"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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAEEC,SAAS,EACTC,gBAAgB,EAChBC,+BAA+B,QAC1B,2BAA2B;AAClC,SAASC,YAAY,EAAEC,kBAAkB,QAAQ,SAAS;AAAC;AAa3D,OAAO,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqB,OAGA;EAAA,uBAFhCC,MAAM;IAANA,MAAM,4BAAG,QAAQ;IACdC,SAAS;EAEZ,wBAAiBT,KAAK,CAACU,UAAU,CAACP,gBAAgB,CAAC;IAA3CQ,IAAI,qBAAJA,IAAI;EACZ,IAAMC,SAAS,GAAGR,+BAA+B,CAACO,IAAI,CAAC;EACvD,IAAME,cAAc,GAAGL,MAAM,KAAK,QAAQ;EAC1C,IAAMM,eAAe,GAAGD,cAAc,4EAEQ;EAC9C,IAAME,IAAI,GAAGF,cAAc,GAAGR,YAAY,GAAGC,kBAAkB;EAE/D,oBACE,oBAAC,SAAS,CAAC,KAAK,eACVG,SAAS;IACb,UAAU,EAAC,QAAQ;IACnB,SAAS,EAAER,UAAU,oBAAwBa,eAAe;EAAE,iBAE9D,oBAAC,IAAI;IAAC,KAAK,EAAEF,SAAU;IAAC,MAAM,EAAEA;EAAU,EAAG,CAC7B;AAEtB,CAAC"}

package/dist/cssm/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/cssm/components/Avatar/AvatarBadge/icons.js

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["width", "height"],
   _excluded2 = ["width", "height"];
-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 var Icon12Circle = function Icon12Circle(_ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? 12 : _ref$width,