@vkontakte/vkui 5.0.3 → 5.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","names":["RadioGroup","mode","children","className","restProps","classNamesString","styles"],"sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport styles from \"./RadioGroup.module.css\";\n\nexport interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  mode?: \"vertical\" | \"horizontal\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RadioGroup\n */\nexport const RadioGroup = ({\n  mode = \"vertical\",\n  children,\n  className,\n  ...restProps\n}: RadioGroupProps) => (\n  <div\n    className={classNamesString(\n      styles[\"RadioGroup\"],\n      styles[`RadioGroup--mode-${mode}`],\n      className\n    )}\n    {...restProps}\n  >\n    {children}\n  </div>\n);\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAAwD;AAOxD;AACA;AACA;AACO,IAAMA,UAAU,GAAG,SAAbA,UAAU;EAAA,qBACrBC,IAAI;IAAJA,IAAI,0BAAG,UAAU;IACjBC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAAA,oBAEZ;IACE,SAAS,EAAE,IAAAC,4BAAgB,oBAEzBC,MAAM,4BAAqBL,IAAI,EAAG,EAClCE,SAAS;EACT,GACEC,SAAS,GAEZF,QAAQ,CACL;AAAA,CACP;AAAC;AAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"RadioGroup.js","names":["RadioGroup","mode","children","className","restProps","classNames","styles"],"sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './RadioGroup.module.css';\n\nexport interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  mode?: 'vertical' | 'horizontal';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RadioGroup\n */\nexport const RadioGroup = ({\n  mode = 'vertical',\n  children,\n  className,\n  ...restProps\n}: RadioGroupProps) => (\n  <div\n    className={classNames(styles['RadioGroup'], styles[`RadioGroup--mode-${mode}`], className)}\n    {...restProps}\n  >\n    {children}\n  </div>\n);\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAA6C;AAO7C;AACA;AACA;AACO,IAAMA,UAAU,GAAG,SAAbA,UAAU;EAAA,qBACrBC,IAAI;IAAJA,IAAI,0BAAG,UAAU;IACjBC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAAA,oBAEZ;IACE,SAAS,EAAE,IAAAC,gBAAU,oBAAuBC,MAAM,4BAAqBL,IAAI,EAAG,EAAEE,SAAS;EAAE,GACvFC,SAAS,GAEZF,QAAQ,CACL;AAAA,CACP;AAAC;AAAA;EAAA;EAAA;AAAA"}

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { UniversalSliderProps } from "./UniversalSlider";
+import { UniversalSliderProps } from './UniversalSlider';
 export declare type Value = [number, number];
 export declare type RangeSliderProps = UniversalSliderProps<Value>;
 /**
  * @see https://vkcom.github.io/VKUI/#/RangeSlider
  */
-export declare const RangeSlider: ({ onChange, defaultValue, min, max, step, ...props }: RangeSliderProps) => JSX.Element;
+export declare const RangeSlider: ({ onChange, min, max, defaultValue, step, ...props }: RangeSliderProps) => JSX.Element;

package/dist/cjs/components/RangeSlider/RangeSlider.js

@@ -12,22 +12,23 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var React = _interopRequireWildcard(require("react"));
 var _math = require("../../helpers/math");
 var _UniversalSlider = require("./UniversalSlider");
-var _excluded = ["onChange", "defaultValue", "min", "max", "step"];
+var _excluded = ["onChange", "min", "max", "defaultValue", "step"];
 /**
  * @see https://vkcom.github.io/VKUI/#/RangeSlider
  */
 var RangeSlider = function RangeSlider(_ref) {
   var onChange = _ref.onChange,
-    defaultValue = _ref.defaultValue,
     _ref$min = _ref.min,
     min = _ref$min === void 0 ? 0 : _ref$min,
     _ref$max = _ref.max,
     max = _ref$max === void 0 ? 100 : _ref$max,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? [min, max] : _ref$defaultValue,
     _ref$step = _ref.step,
     step = _ref$step === void 0 ? 0 : _ref$step,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var isControlled = Boolean(props.value);
-  var _React$useState = React.useState(defaultValue || [min, max]),
+  var isControlled = props.value !== undefined;
+  var _React$useState = React.useState(defaultValue),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     localValue = _React$useState2[0],
     setValue = _React$useState2[1];

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

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.js","names":["RangeSlider","onChange","defaultValue","min","max","step","props","isControlled","Boolean","value","React","useState","localValue","setValue","start","end","useMemo","clamp","handleChange","useCallback","nextValue","event","disabled"],"sources":["../../../../src/components/RangeSlider/RangeSlider.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { clamp } from \"../../helpers/math\";\nimport { UniversalSlider, UniversalSliderProps } from \"./UniversalSlider\";\nimport { TouchEvent } from \"../Touch/Touch\";\n\nexport type Value = [number, number];\nexport type RangeSliderProps = UniversalSliderProps<Value>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RangeSlider\n */\nexport const RangeSlider = ({\n  onChange,\n  defaultValue,\n  min = 0,\n  max = 100,\n  step = 0,\n  ...props\n}: RangeSliderProps) => {\n  const isControlled = Boolean(props.value);\n\n  const [localValue, setValue] = React.useState(\n    defaultValue || ([min, max] as Value)\n  );\n  const [start, end] = props.value || localValue;\n  const value = React.useMemo(\n    () => [clamp(start, min, max), clamp(end, min, max)] as Value,\n    [end, max, min, start]\n  );\n\n  const handleChange: RangeSliderProps[\"onChange\"] = React.useCallback(\n    (nextValue: Value, event: TouchEvent) => {\n      if (\n        props.disabled ||\n        (value[0] === nextValue[0] && value[1] === nextValue[1])\n      ) {\n        return;\n      }\n      !isControlled && setValue(nextValue);\n      onChange && onChange(nextValue, event);\n    },\n    [props.disabled, value, isControlled, onChange]\n  );\n\n  return (\n    <UniversalSlider\n      {...props}\n      value={value}\n      onChange={handleChange}\n      min={min}\n      max={max}\n      step={step}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AAA0E;AAM1E;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAOA;EAAA,IANtBC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;IAAA,gBACZC,GAAG;IAAHA,GAAG,yBAAG,CAAC;IAAA,gBACPC,GAAG;IAAHA,GAAG,yBAAG,GAAG;IAAA,iBACTC,IAAI;IAAJA,IAAI,0BAAG,CAAC;IACLC,KAAK;EAER,IAAMC,YAAY,GAAGC,OAAO,CAACF,KAAK,CAACG,KAAK,CAAC;EAEzC,sBAA+BC,KAAK,CAACC,QAAQ,CAC3CT,YAAY,IAAK,CAACC,GAAG,EAAEC,GAAG,CAAW,CACtC;IAAA;IAFMQ,UAAU;IAAEC,QAAQ;EAG3B,YAAqBP,KAAK,CAACG,KAAK,IAAIG,UAAU;IAAA;IAAvCE,KAAK;IAAEC,GAAG;EACjB,IAAMN,KAAK,GAAGC,KAAK,CAACM,OAAO,CACzB;IAAA,OAAM,CAAC,IAAAC,WAAK,EAACH,KAAK,EAAEX,GAAG,EAAEC,GAAG,CAAC,EAAE,IAAAa,WAAK,EAACF,GAAG,EAAEZ,GAAG,EAAEC,GAAG,CAAC,CAAC;EAAA,CAAS,EAC7D,CAACW,GAAG,EAAEX,GAAG,EAAED,GAAG,EAAEW,KAAK,CAAC,CACvB;EAED,IAAMI,YAA0C,GAAGR,KAAK,CAACS,WAAW,CAClE,UAACC,SAAgB,EAAEC,KAAiB,EAAK;IACvC,IACEf,KAAK,CAACgB,QAAQ,IACbb,KAAK,CAAC,CAAC,CAAC,KAAKW,SAAS,CAAC,CAAC,CAAC,IAAIX,KAAK,CAAC,CAAC,CAAC,KAAKW,SAAS,CAAC,CAAC,CAAE,EACxD;MACA;IACF;IACA,CAACb,YAAY,IAAIM,QAAQ,CAACO,SAAS,CAAC;IACpCnB,QAAQ,IAAIA,QAAQ,CAACmB,SAAS,EAAEC,KAAK,CAAC;EACxC,CAAC,EACD,CAACf,KAAK,CAACgB,QAAQ,EAAEb,KAAK,EAAEF,YAAY,EAAEN,QAAQ,CAAC,CAChD;EAED,oBACE,oBAAC,gCAAe,6BACVK,KAAK;IACT,KAAK,EAAEG,KAAM;IACb,QAAQ,EAAES,YAAa;IACvB,GAAG,EAAEf,GAAI;IACT,GAAG,EAAEC,GAAI;IACT,IAAI,EAAEC;EAAK,GACX;AAEN,CAAC;AAAC"}
+{"version":3,"file":"RangeSlider.js","names":["RangeSlider","onChange","min","max","defaultValue","step","props","isControlled","value","undefined","React","useState","localValue","setValue","start","end","useMemo","clamp","handleChange","useCallback","nextValue","event","disabled"],"sources":["../../../../src/components/RangeSlider/RangeSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { UniversalSlider, UniversalSliderProps } from './UniversalSlider';\nimport { TouchEvent } from '../Touch/Touch';\n\nexport type Value = [number, number];\nexport type RangeSliderProps = UniversalSliderProps<Value>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RangeSlider\n */\nexport const RangeSlider = ({\n  onChange,\n  min = 0,\n  max = 100,\n  defaultValue = [min, max],\n  step = 0,\n  ...props\n}: RangeSliderProps) => {\n  const isControlled = props.value !== undefined;\n\n  const [localValue, setValue] = React.useState(defaultValue);\n  const [start, end] = props.value || localValue;\n  const value = React.useMemo(\n    () => [clamp(start, min, max), clamp(end, min, max)] as Value,\n    [end, max, min, start],\n  );\n\n  const handleChange: RangeSliderProps['onChange'] = React.useCallback(\n    (nextValue: Value, event: TouchEvent) => {\n      if (props.disabled || (value[0] === nextValue[0] && value[1] === nextValue[1])) {\n        return;\n      }\n      !isControlled && setValue(nextValue);\n      onChange && onChange(nextValue, event);\n    },\n    [props.disabled, value, isControlled, onChange],\n  );\n\n  return (\n    <UniversalSlider\n      {...props}\n      value={value}\n      onChange={handleChange}\n      min={min}\n      max={max}\n      step={step}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AAA0E;AAM1E;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAOA;EAAA,IANtBC,QAAQ,QAARA,QAAQ;IAAA,gBACRC,GAAG;IAAHA,GAAG,yBAAG,CAAC;IAAA,gBACPC,GAAG;IAAHA,GAAG,yBAAG,GAAG;IAAA,yBACTC,YAAY;IAAZA,YAAY,kCAAG,CAACF,GAAG,EAAEC,GAAG,CAAC;IAAA,iBACzBE,IAAI;IAAJA,IAAI,0BAAG,CAAC;IACLC,KAAK;EAER,IAAMC,YAAY,GAAGD,KAAK,CAACE,KAAK,KAAKC,SAAS;EAE9C,sBAA+BC,KAAK,CAACC,QAAQ,CAACP,YAAY,CAAC;IAAA;IAApDQ,UAAU;IAAEC,QAAQ;EAC3B,YAAqBP,KAAK,CAACE,KAAK,IAAII,UAAU;IAAA;IAAvCE,KAAK;IAAEC,GAAG;EACjB,IAAMP,KAAK,GAAGE,KAAK,CAACM,OAAO,CACzB;IAAA,OAAM,CAAC,IAAAC,WAAK,EAACH,KAAK,EAAEZ,GAAG,EAAEC,GAAG,CAAC,EAAE,IAAAc,WAAK,EAACF,GAAG,EAAEb,GAAG,EAAEC,GAAG,CAAC,CAAC;EAAA,CAAS,EAC7D,CAACY,GAAG,EAAEZ,GAAG,EAAED,GAAG,EAAEY,KAAK,CAAC,CACvB;EAED,IAAMI,YAA0C,GAAGR,KAAK,CAACS,WAAW,CAClE,UAACC,SAAgB,EAAEC,KAAiB,EAAK;IACvC,IAAIf,KAAK,CAACgB,QAAQ,IAAKd,KAAK,CAAC,CAAC,CAAC,KAAKY,SAAS,CAAC,CAAC,CAAC,IAAIZ,KAAK,CAAC,CAAC,CAAC,KAAKY,SAAS,CAAC,CAAC,CAAE,EAAE;MAC9E;IACF;IACA,CAACb,YAAY,IAAIM,QAAQ,CAACO,SAAS,CAAC;IACpCnB,QAAQ,IAAIA,QAAQ,CAACmB,SAAS,EAAEC,KAAK,CAAC;EACxC,CAAC,EACD,CAACf,KAAK,CAACgB,QAAQ,EAAEd,KAAK,EAAED,YAAY,EAAEN,QAAQ,CAAC,CAChD;EAED,oBACE,oBAAC,gCAAe,6BACVK,KAAK;IACT,KAAK,EAAEE,KAAM;IACb,QAAQ,EAAEU,YAAa;IACvB,GAAG,EAAEhB,GAAI;IACT,GAAG,EAAEC,GAAI;IACT,IAAI,EAAEE;EAAK,GACX;AAEN,CAAC;AAAC"}

package/dist/cjs/components/RangeSlider/UniversalSlider.d.ts

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { TouchEvent } from "../Touch/Touch";
-import { HasRootRef } from "../../types";
+import * as React from 'react';
+import { TouchEvent } from '../Touch/Touch';
+import { HasRootRef } from '../../types';
 export declare type UniversalValue = [number | null, number];
-export interface UniversalSliderProps<Value> extends HasRootRef<HTMLDivElement>, Omit<React.HTMLAttributes<HTMLDivElement>, "value" | "defaultValue" | "onChange"> {
+export interface UniversalSliderProps<Value> extends HasRootRef<HTMLDivElement>, Omit<React.HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'> {
     min?: number;
     max?: number;
     step?: number;

package/dist/cjs/components/RangeSlider/UniversalSlider.js

@@ -11,7 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _Touch = require("../Touch/Touch");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _math = require("../../helpers/math");
 var _useExternRef = require("../../hooks/useExternRef");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
@@ -55,18 +55,18 @@ var UniversalSlider = function UniversalSlider(_ref) {
       return [null, nextValue];
     }
     var dragging = gesture.dragging;
-    if (dragging === "start") {
+    if (dragging === 'start') {
       if (nextValue > end) {
         // "перехватиться", если перетянули за конец
-        gesture.dragging = "end";
+        gesture.dragging = 'end';
         return [end, nextValue];
       }
       return [nextValue, end];
     }
-    if (dragging === "end") {
+    if (dragging === 'end') {
       if (nextValue < start) {
         // "перехватиться", если перетянули за начало
-        gesture.dragging = "start";
+        gesture.dragging = 'start';
         return [nextValue, start];
       }
       return [start, nextValue];
@@ -75,12 +75,12 @@ var UniversalSlider = function UniversalSlider(_ref) {
   };
   var snapDirection = function snapDirection(pos, target) {
     if (target === thumbStart.current) {
-      return "start";
+      return 'start';
     }
     if (target === thumbEnd.current) {
-      return "end";
+      return 'end';
     }
-    return Math.abs((start !== null && start !== void 0 ? start : 0) - pos) <= Math.abs(end - pos) ? "start" : "end";
+    return Math.abs((start !== null && start !== void 0 ? start : 0) - pos) <= Math.abs(end - pos) ? 'start' : 'end';
   };
   var onStart = function onStart(e) {
     var _container$current, _boundingRect$width, _boundingRect$left;
@@ -112,13 +112,13 @@ var UniversalSlider = function UniversalSlider(_ref) {
     width: "".concat(toPercent(end), "%")
   };
   return /*#__PURE__*/React.createElement(_Touch.Touch, (0, _extends2.default)({
-    "data-value": isRange ? value.join(",") : value
+    "data-value": isRange ? value.join(',') : value
   }, restProps, disabled ? {} : {
     onStart: onStart,
     onMove: onMove,
     onEnd: onEnd
   }, {
-    className: (0, _classNames.classNamesString)("vkuiSlider", (0, _getSizeYClassName.getSizeYClassName)("vkuiSlider", sizeY), disabled && "vkuiSlider--disabled", className)
+    className: (0, _vkjs.classNames)("vkuiSlider", (0, _getSizeYClassName.getSizeYClassName)("vkuiSlider", sizeY), disabled && "vkuiSlider--disabled", className)
   }), /*#__PURE__*/React.createElement("div", {
     ref: container,
     className: "vkuiSlider__in"
@@ -126,10 +126,10 @@ var UniversalSlider = function UniversalSlider(_ref) {
     className: "vkuiSlider__dragger",
     style: draggerStyle
   }, isRange && /*#__PURE__*/React.createElement("span", {
-    className: (0, _classNames.classNamesString)("vkuiSlider__thumb", "vkuiSlider__thumb--start"),
+    className: (0, _vkjs.classNames)("vkuiSlider__thumb", "vkuiSlider__thumb--start"),
     ref: thumbStart
   }), /*#__PURE__*/React.createElement("span", {
-    className: (0, _classNames.classNamesString)("vkuiSlider__thumb", "vkuiSlider__thumb--end"),
+    className: (0, _vkjs.classNames)("vkuiSlider__thumb", "vkuiSlider__thumb--end"),
     ref: thumbEnd
   }))));
 };

package/dist/cjs/components/RangeSlider/UniversalSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"UniversalSlider.js","names":["UniversalSlider","min","max","step","value","defaultValue","onChange","getRootRef","disabled","className","restProps","start","end","isRange","gesture","React","useRef","dragging","startX","containerWidth","current","container","useExternRef","thumbStart","thumbEnd","useAdaptivity","sizeY","offsetToValue","absolute","rescale","updateRange","nextValue","snapDirection","pos","target","Math","abs","onStart","e","boundingRect","getBoundingClientRect","width","absolutePosition","left","originalEvent","stopPropagation","onMove","shiftX","preventDefault","onEnd","toPercent","v","draggerStyle","join","classNamesString","getSizeYClassName"],"sources":["../../../../src/components/RangeSlider/UniversalSlider.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Touch, TouchEvent, TouchEventHandler } from \"../Touch/Touch\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { HasRootRef } from \"../../types\";\nimport { rescale } from \"../../helpers/math\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport styles from \"../Slider/Slider.module.css\";\n\nexport type UniversalValue = [number | null, number];\n\nexport interface UniversalSliderProps<Value>\n  extends HasRootRef<HTMLDivElement>,\n    Omit<\n      React.HTMLAttributes<HTMLDivElement>,\n      \"value\" | \"defaultValue\" | \"onChange\"\n    > {\n  min?: number;\n  max?: number;\n  step?: number;\n  value?: Value;\n  defaultValue?: Value;\n  disabled?: boolean;\n  onChange?(value: Value, e: TouchEvent): void;\n}\n\nexport const UniversalSlider = ({\n  min = 0,\n  max = 100,\n  step,\n  value = [0, 0],\n  defaultValue,\n  onChange,\n  getRootRef,\n  disabled,\n  className,\n  ...restProps\n}: UniversalSliderProps<UniversalValue>) => {\n  const [start, end] = value;\n  const isRange = start != null;\n  const gesture = React.useRef({\n    dragging: false as false | \"start\" | \"end\",\n    startX: 0,\n    containerWidth: 0,\n  }).current;\n  const container = useExternRef(getRootRef);\n  const thumbStart = React.useRef<HTMLDivElement>(null);\n  const thumbEnd = React.useRef<HTMLDivElement>(null);\n  const { sizeY } = useAdaptivity();\n\n  const offsetToValue = (absolute: number) => {\n    return rescale(absolute, [0, gesture.containerWidth], [min, max], { step });\n  };\n\n  const updateRange = (nextValue: number): UniversalValue => {\n    if (start == null) {\n      return [null, nextValue];\n    }\n\n    const { dragging } = gesture;\n    if (dragging === \"start\") {\n      if (nextValue > end) {\n        // \"перехватиться\", если перетянули за конец\n        gesture.dragging = \"end\";\n        return [end, nextValue];\n      }\n      return [nextValue, end];\n    }\n    if (dragging === \"end\") {\n      if (nextValue < start) {\n        // \"перехватиться\", если перетянули за начало\n        gesture.dragging = \"start\";\n        return [nextValue, start];\n      }\n      return [start, nextValue];\n    }\n\n    return value;\n  };\n\n  const snapDirection = (pos: number, target: EventTarget | null) => {\n    if (target === thumbStart.current) {\n      return \"start\";\n    }\n    if (target === thumbEnd.current) {\n      return \"end\";\n    }\n    return Math.abs((start ?? 0) - pos) <= Math.abs(end - pos)\n      ? \"start\"\n      : \"end\";\n  };\n\n  const onStart: TouchEventHandler = (e: TouchEvent) => {\n    const boundingRect = container.current?.getBoundingClientRect();\n    gesture.containerWidth = boundingRect?.width ?? 0;\n\n    const absolutePosition = e.startX - (boundingRect?.left ?? 0);\n    const pos = offsetToValue(absolutePosition);\n    gesture.dragging = snapDirection(pos, e.originalEvent.target);\n    gesture.startX = absolutePosition;\n\n    onChange?.(updateRange(pos), e);\n    e.originalEvent.stopPropagation();\n  };\n\n  const onMove: TouchEventHandler = (e: TouchEvent) => {\n    onChange?.(updateRange(offsetToValue(gesture.startX + (e.shiftX || 0))), e);\n\n    e.originalEvent.stopPropagation();\n    e.originalEvent.preventDefault();\n  };\n\n  const onEnd: TouchEventHandler = (e) => {\n    gesture.dragging = false;\n    e.originalEvent.stopPropagation();\n  };\n\n  const toPercent = (v: number) => ((v - min) / (max - min)) * 100;\n  const draggerStyle = isRange\n    ? {\n        width: `${toPercent(end) - toPercent(start ?? 0)}%`,\n        left: `${toPercent(start ?? 0)}%`,\n      }\n    : {\n        width: `${toPercent(end)}%`,\n      };\n\n  return (\n    <Touch\n      data-value={isRange ? value.join(\",\") : value}\n      {...restProps}\n      {...(disabled ? {} : { onStart, onMove, onEnd })}\n      className={classNamesString(\n        styles[\"Slider\"],\n        getSizeYClassName(styles[\"Slider\"], sizeY),\n        disabled && styles[\"Slider--disabled\"],\n        className\n      )}\n    >\n      <div ref={container} className={styles[\"Slider__in\"]}>\n        <div className={styles[\"Slider__dragger\"]} style={draggerStyle}>\n          {isRange && (\n            <span\n              className={classNamesString(\n                styles[\"Slider__thumb\"],\n                styles[\"Slider__thumb--start\"]\n              )}\n              ref={thumbStart}\n            />\n          )}\n          <span\n            className={classNamesString(\n              styles[\"Slider__thumb\"],\n              styles[\"Slider__thumb--end\"]\n            )}\n            ref={thumbEnd}\n          />\n        </div>\n      </div>\n    </Touch>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"UniversalSlider.js","names":["UniversalSlider","min","max","step","value","defaultValue","onChange","getRootRef","disabled","className","restProps","start","end","isRange","gesture","React","useRef","dragging","startX","containerWidth","current","container","useExternRef","thumbStart","thumbEnd","useAdaptivity","sizeY","offsetToValue","absolute","rescale","updateRange","nextValue","snapDirection","pos","target","Math","abs","onStart","e","boundingRect","getBoundingClientRect","width","absolutePosition","left","originalEvent","stopPropagation","onMove","shiftX","preventDefault","onEnd","toPercent","v","draggerStyle","join","classNames","getSizeYClassName"],"sources":["../../../../src/components/RangeSlider/UniversalSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Touch, TouchEvent, TouchEventHandler } from '../Touch/Touch';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { rescale } from '../../helpers/math';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from '../Slider/Slider.module.css';\n\nexport type UniversalValue = [number | null, number];\n\nexport interface UniversalSliderProps<Value>\n  extends HasRootRef<HTMLDivElement>,\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'> {\n  min?: number;\n  max?: number;\n  step?: number;\n  value?: Value;\n  defaultValue?: Value;\n  disabled?: boolean;\n  onChange?(value: Value, e: TouchEvent): void;\n}\n\nexport const UniversalSlider = ({\n  min = 0,\n  max = 100,\n  step,\n  value = [0, 0],\n  defaultValue,\n  onChange,\n  getRootRef,\n  disabled,\n  className,\n  ...restProps\n}: UniversalSliderProps<UniversalValue>) => {\n  const [start, end] = value;\n  const isRange = start != null;\n  const gesture = React.useRef({\n    dragging: false as false | 'start' | 'end',\n    startX: 0,\n    containerWidth: 0,\n  }).current;\n  const container = useExternRef(getRootRef);\n  const thumbStart = React.useRef<HTMLDivElement>(null);\n  const thumbEnd = React.useRef<HTMLDivElement>(null);\n  const { sizeY } = useAdaptivity();\n\n  const offsetToValue = (absolute: number) => {\n    return rescale(absolute, [0, gesture.containerWidth], [min, max], { step });\n  };\n\n  const updateRange = (nextValue: number): UniversalValue => {\n    if (start == null) {\n      return [null, nextValue];\n    }\n\n    const { dragging } = gesture;\n    if (dragging === 'start') {\n      if (nextValue > end) {\n        // \"перехватиться\", если перетянули за конец\n        gesture.dragging = 'end';\n        return [end, nextValue];\n      }\n      return [nextValue, end];\n    }\n    if (dragging === 'end') {\n      if (nextValue < start) {\n        // \"перехватиться\", если перетянули за начало\n        gesture.dragging = 'start';\n        return [nextValue, start];\n      }\n      return [start, nextValue];\n    }\n\n    return value;\n  };\n\n  const snapDirection = (pos: number, target: EventTarget | null) => {\n    if (target === thumbStart.current) {\n      return 'start';\n    }\n    if (target === thumbEnd.current) {\n      return 'end';\n    }\n    return Math.abs((start ?? 0) - pos) <= Math.abs(end - pos) ? 'start' : 'end';\n  };\n\n  const onStart: TouchEventHandler = (e: TouchEvent) => {\n    const boundingRect = container.current?.getBoundingClientRect();\n    gesture.containerWidth = boundingRect?.width ?? 0;\n\n    const absolutePosition = e.startX - (boundingRect?.left ?? 0);\n    const pos = offsetToValue(absolutePosition);\n    gesture.dragging = snapDirection(pos, e.originalEvent.target);\n    gesture.startX = absolutePosition;\n\n    onChange?.(updateRange(pos), e);\n    e.originalEvent.stopPropagation();\n  };\n\n  const onMove: TouchEventHandler = (e: TouchEvent) => {\n    onChange?.(updateRange(offsetToValue(gesture.startX + (e.shiftX || 0))), e);\n\n    e.originalEvent.stopPropagation();\n    e.originalEvent.preventDefault();\n  };\n\n  const onEnd: TouchEventHandler = (e) => {\n    gesture.dragging = false;\n    e.originalEvent.stopPropagation();\n  };\n\n  const toPercent = (v: number) => ((v - min) / (max - min)) * 100;\n  const draggerStyle = isRange\n    ? {\n        width: `${toPercent(end) - toPercent(start ?? 0)}%`,\n        left: `${toPercent(start ?? 0)}%`,\n      }\n    : {\n        width: `${toPercent(end)}%`,\n      };\n\n  return (\n    <Touch\n      data-value={isRange ? value.join(',') : value}\n      {...restProps}\n      {...(disabled ? {} : { onStart, onMove, onEnd })}\n      className={classNames(\n        styles['Slider'],\n        getSizeYClassName(styles['Slider'], sizeY),\n        disabled && styles['Slider--disabled'],\n        className,\n      )}\n    >\n      <div ref={container} className={styles['Slider__in']}>\n        <div className={styles['Slider__dragger']} style={draggerStyle}>\n          {isRange && (\n            <span\n              className={classNames(styles['Slider__thumb'], styles['Slider__thumb--start'])}\n              ref={thumbStart}\n            />\n          )}\n          <span\n            className={classNames(styles['Slider__thumb'], styles['Slider__thumb--end'])}\n            ref={thumbEnd}\n          />\n        </div>\n      </div>\n    </Touch>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasRootRef } from '../../types';
 export interface RemovableProps {
     /**
      * iOS only. Текст в выезжающей кнопке для удаления ячейки.
@@ -14,7 +14,7 @@ interface RemovableOwnProps extends React.AllHTMLAttributes<HTMLElement>, Remova
     /**
      * Расположение кнопки удаления.
      */
-    align?: "start" | "center";
+    align?: 'start' | 'center';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Removable

package/dist/cjs/components/Removable/Removable.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _utils = require("../../lib/utils");
 var _useExternRef = require("../../hooks/useExternRef");
 var _usePlatform = require("../../hooks/usePlatform");
@@ -39,7 +39,7 @@ var RemovableIos = function RemovableIos(_ref) {
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     removeOffset = _React$useState2[0],
     updateRemoveOffset = _React$useState2[1];
-  (0, _useGlobalEventListener.useGlobalEventListener)(window, "click", function () {
+  (0, _useGlobalEventListener.useGlobalEventListener)(window, 'click', function () {
     if (removeOffset > 0) {
       updateRemoveOffset(0);
     }
@@ -73,7 +73,7 @@ var RemovableIos = function RemovableIos(_ref) {
     hasActive: false,
     hasHover: false,
     "aria-label": removePlaceholderString,
-    className: (0, _classNames.classNamesString)("vkuiRemovable__action", "vkuiRemovable__toggle"),
+    className: (0, _vkjs.classNames)("vkuiRemovable__action", "vkuiRemovable__toggle"),
     onClick: onRemoveActivateClick,
     disabled: removeOffset > 0
   }, /*#__PURE__*/React.createElement("i", {
@@ -101,11 +101,11 @@ var Removable = function Removable(_ref2) {
   var getRootRef = _ref2.getRootRef,
     children = _ref2.children,
     _ref2$onRemove = _ref2.onRemove,
-    onRemove = _ref2$onRemove === void 0 ? _utils.noop : _ref2$onRemove,
+    onRemove = _ref2$onRemove === void 0 ? _vkjs.noop : _ref2$onRemove,
     _ref2$removePlacehold = _ref2.removePlaceholder,
-    removePlaceholder = _ref2$removePlacehold === void 0 ? "Удалить" : _ref2$removePlacehold,
+    removePlaceholder = _ref2$removePlacehold === void 0 ? 'Удалить' : _ref2$removePlacehold,
     _ref2$align = _ref2.align,
-    align = _ref2$align === void 0 ? "center" : _ref2$align,
+    align = _ref2$align === void 0 ? 'center' : _ref2$align,
     className = _ref2.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
@@ -119,7 +119,7 @@ var Removable = function Removable(_ref2) {
   var removePlaceholderString = (0, _utils.getTitleFromChildren)(removePlaceholder);
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
     ref: ref,
-    className: (0, _classNames.classNamesString)("vkuiRemovable", platform === _platform.Platform.IOS && "vkuiRemovable--ios", styles["Removable--align-".concat(align)], (0, _getSizeYClassName.getSizeYClassName)("vkuiRemovable", sizeY), className)
+    className: (0, _vkjs.classNames)("vkuiRemovable", platform === _platform.Platform.IOS && "vkuiRemovable--ios", styles["Removable--align-".concat(align)], (0, _getSizeYClassName.getSizeYClassName)("vkuiRemovable", sizeY), className)
   }), platform !== _platform.Platform.IOS && /*#__PURE__*/React.createElement("div", {
     className: "vkuiRemovable__content"
   }, children, /*#__PURE__*/React.createElement(_IconButton.IconButton, {

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

@@ -1 +1 @@
-{"version":3,"file":"Removable.js","names":["RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","useDOM","window","removeButtonRef","React","useRef","disabledRef","useState","removeOffset","updateRemoveOffset","useGlobalEventListener","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","transform","classNamesString","Removable","getRootRef","noop","align","className","restProps","platform","usePlatform","useAdaptivity","sizeY","ref","useExternRef","onRemoveClick","preventDefault","getTitleFromChildren","Platform","IOS","styles","getSizeYClassName"],"sources":["../../../../src/components/Removable/Removable.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { HasRootRef } from \"../../types\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { getTitleFromChildren, noop } from \"../../lib/utils\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { useDOM } from \"../../lib/dom\";\nimport { Platform } from \"../../lib/platform\";\nimport { Icon24Cancel } from \"@vkontakte/icons\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport styles from \"./Removable.module.css\";\n\nexport interface RemovableProps {\n  /**\n   * iOS only. Текст в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Коллбэк срабатывает при клике на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;\n}\n\ninterface RemovableIosOwnProps extends RemovableProps {\n  removePlaceholderString?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RemovableIos\n */\nconst RemovableIos = ({\n  onRemove,\n  removePlaceholder,\n  removePlaceholderString,\n  children,\n}: RemovableIosOwnProps) => {\n  const { window } = useDOM();\n\n  const removeButtonRef = React.useRef<HTMLElement>(null);\n  const disabledRef = React.useRef(true);\n  const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n  useGlobalEventListener(\n    window,\n    \"click\",\n    () => {\n      if (removeOffset > 0) {\n        updateRemoveOffset(0);\n      }\n    },\n    { capture: true }\n  );\n\n  const onRemoveTransitionEnd = () => {\n    if (removeOffset > 0) {\n      removeButtonRef?.current?.focus();\n    } else {\n      disabledRef.current = true;\n    }\n  };\n\n  const onRemoveActivateClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    if (!removeButtonRef.current) {\n      return;\n    }\n    const { offsetWidth } = removeButtonRef.current;\n    disabledRef.current = false;\n    updateRemoveOffset(offsetWidth);\n  };\n\n  return (\n    <div\n      className={styles[\"Removable__content\"]}\n      style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}\n      onTransitionEnd={onRemoveTransitionEnd}\n    >\n      <IconButton\n        hasActive={false}\n        hasHover={false}\n        aria-label={removePlaceholderString}\n        className={classNamesString(\n          styles[\"Removable__action\"],\n          styles[\"Removable__toggle\"]\n        )}\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0}\n      >\n        <i className={styles[\"Removable__toggle-in\"]} role=\"presentation\" />\n      </IconButton>\n      {children}\n\n      <span className={styles[\"Removable__offset\"]} aria-hidden />\n\n      <Tappable\n        Component=\"button\"\n        hasActive={false}\n        hasHover={false}\n        disabled={disabledRef.current}\n        getRootRef={removeButtonRef}\n        className={styles[\"Removable__remove\"]}\n        onClick={onRemove}\n      >\n        <span className={styles[\"Removable__remove-in\"]}>\n          {removePlaceholder}\n        </span>\n      </Tappable>\n    </div>\n  );\n};\n\ninterface RemovableOwnProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: \"start\" | \"center\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Removable\n */\nexport const Removable = ({\n  getRootRef,\n  children,\n  onRemove = noop,\n  removePlaceholder = \"Удалить\",\n  align = \"center\",\n  className,\n  ...restProps\n}: RemovableOwnProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  const ref = useExternRef(getRootRef);\n\n  const onRemoveClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n    onRemove(e);\n  };\n\n  const removePlaceholderString: string =\n    getTitleFromChildren(removePlaceholder);\n\n  return (\n    <div\n      {...restProps}\n      ref={ref}\n      className={classNamesString(\n        styles[\"Removable\"],\n        platform === Platform.IOS && styles[\"Removable--ios\"],\n        styles[`Removable--align-${align}`],\n        getSizeYClassName(styles[\"Removable\"], sizeY),\n        className\n      )}\n    >\n      {platform !== Platform.IOS && (\n        <div className={styles[\"Removable__content\"]}>\n          {children}\n\n          <IconButton\n            activeMode=\"opacity\"\n            hoverMode=\"opacity\"\n            className={styles[\"Removable__action\"]}\n            onClick={onRemoveClick}\n            aria-label={removePlaceholderString}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n\n          <span className={styles[\"Removable__offset\"]} aria-hidden />\n        </div>\n      )}\n\n      {platform === Platform.IOS && (\n        <RemovableIos\n          onRemove={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAoE;AAmBpE;AACA;AACA;AACA,IAAMA,YAAY,GAAG,SAAfA,YAAY,OAKU;EAAA,IAJ1BC,QAAQ,QAARA,QAAQ;IACRC,iBAAiB,QAAjBA,iBAAiB;IACjBC,uBAAuB,QAAvBA,uBAAuB;IACvBC,QAAQ,QAARA,QAAQ;EAER,cAAmB,IAAAC,WAAM,GAAE;IAAnBC,MAAM,WAANA,MAAM;EAEd,IAAMC,eAAe,GAAGC,KAAK,CAACC,MAAM,CAAc,IAAI,CAAC;EACvD,IAAMC,WAAW,GAAGF,KAAK,CAACC,MAAM,CAAC,IAAI,CAAC;EACtC,sBAA2CD,KAAK,CAACG,QAAQ,CAAC,CAAC,CAAC;IAAA;IAArDC,YAAY;IAAEC,kBAAkB;EAEvC,IAAAC,8CAAsB,EACpBR,MAAM,EACN,OAAO,EACP,YAAM;IACJ,IAAIM,YAAY,GAAG,CAAC,EAAE;MACpBC,kBAAkB,CAAC,CAAC,CAAC;IACvB;EACF,CAAC,EACD;IAAEE,OAAO,EAAE;EAAK,CAAC,CAClB;EAED,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqB,GAAS;IAClC,IAAIJ,YAAY,GAAG,CAAC,EAAE;MAAA;MACpBL,eAAe,aAAfA,eAAe,gDAAfA,eAAe,CAAEU,OAAO,0DAAxB,sBAA0BC,KAAK,EAAE;IACnC,CAAC,MAAM;MACLR,WAAW,CAACO,OAAO,GAAG,IAAI;IAC5B;EACF,CAAC;EAED,IAAME,qBAAqB,GAAG,SAAxBA,qBAAqB,CAAIC,CAAmB,EAAK;IACrDA,CAAC,CAACC,eAAe,EAAE;IACnB,IAAI,CAACd,eAAe,CAACU,OAAO,EAAE;MAC5B;IACF;IACA,IAAQK,WAAW,GAAKf,eAAe,CAACU,OAAO,CAAvCK,WAAW;IACnBZ,WAAW,CAACO,OAAO,GAAG,KAAK;IAC3BJ,kBAAkB,CAACS,WAAW,CAAC;EACjC,CAAC;EAED,oBACE;IACE,SAAS,0BAA+B;IACxC,KAAK,EAAE;MAAEC,SAAS,wBAAiBX,YAAY,aAAZA,YAAY,cAAZA,YAAY,GAAI,CAAC;IAAM,CAAE;IAC5D,eAAe,EAAEI;EAAsB,gBAEvC,oBAAC,sBAAU;IACT,SAAS,EAAE,KAAM;IACjB,QAAQ,EAAE,KAAM;IAChB,cAAYb,uBAAwB;IACpC,SAAS,EAAE,IAAAqB,4BAAgB,mDAGzB;IACF,OAAO,EAAEL,qBAAsB;IAC/B,QAAQ,EAAEP,YAAY,GAAG;EAAE,gBAE3B;IAAG,SAAS,4BAAiC;IAAC,IAAI,EAAC;EAAc,EAAG,CACzD,EACZR,QAAQ,eAET;IAAM,SAAS,yBAA8B;IAAC;EAAW,EAAG,eAE5D,oBAAC,kBAAQ;IACP,SAAS,EAAC,QAAQ;IAClB,SAAS,EAAE,KAAM;IACjB,QAAQ,EAAE,KAAM;IAChB,QAAQ,EAAEM,WAAW,CAACO,OAAQ;IAC9B,UAAU,EAAEV,eAAgB;IAC5B,SAAS,yBAA8B;IACvC,OAAO,EAAEN;EAAS,gBAElB;IAAM,SAAS;EAAiC,GAC7CC,iBAAiB,CACb,CACE,CACP;AAEV,CAAC;AAYD;AACA;AACA;AACO,IAAMuB,SAAS,GAAG,SAAZA,SAAS,QAQG;EAAA,IAPvBC,UAAU,SAAVA,UAAU;IACVtB,QAAQ,SAARA,QAAQ;IAAA,uBACRH,QAAQ;IAARA,QAAQ,+BAAG0B,WAAI;IAAA,8BACfzB,iBAAiB;IAAjBA,iBAAiB,sCAAG,SAAS;IAAA,oBAC7B0B,KAAK;IAALA,KAAK,4BAAG,QAAQ;IAChBC,SAAS,SAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EAEb,IAAMC,GAAG,GAAG,IAAAC,0BAAY,EAACV,UAAU,CAAC;EAEpC,IAAMW,aAAa,GAAG,SAAhBA,aAAa,CAAIjB,CAAmB,EAAK;IAC7CA,CAAC,CAACkB,cAAc,EAAE;IAClBrC,QAAQ,CAACmB,CAAC,CAAC;EACb,CAAC;EAED,IAAMjB,uBAA+B,GACnC,IAAAoC,2BAAoB,EAACrC,iBAAiB,CAAC;EAEzC,oBACE,sDACM4B,SAAS;IACb,GAAG,EAAEK,GAAI;IACT,SAAS,EAAE,IAAAX,4BAAgB,mBAEzBO,QAAQ,KAAKS,kBAAQ,CAACC,GAAG,wBAA4B,EACrDC,MAAM,4BAAqBd,KAAK,EAAG,EACnC,IAAAe,oCAAiB,mBAAsBT,KAAK,CAAC,EAC7CL,SAAS;EACT,IAEDE,QAAQ,KAAKS,kBAAQ,CAACC,GAAG,iBACxB;IAAK,SAAS;EAA+B,GAC1CrC,QAAQ,eAET,oBAAC,sBAAU;IACT,UAAU,EAAC,SAAS;IACpB,SAAS,EAAC,SAAS;IACnB,SAAS,yBAA8B;IACvC,OAAO,EAAEiC,aAAc;IACvB,cAAYlC;EAAwB,gBAEpC,oBAAC,mBAAY;IAAC,IAAI,EAAC;EAAc,EAAG,CACzB,eAEb;IAAM,SAAS,yBAA8B;IAAC;EAAW,EAAG,CAE/D,EAEA4B,QAAQ,KAAKS,kBAAQ,CAACC,GAAG,iBACxB,oBAAC,YAAY;IACX,QAAQ,EAAEJ,aAAc;IACxB,iBAAiB,EAAEnC,iBAAkB;IACrC,uBAAuB,EAAEC;EAAwB,GAEhDC,QAAQ,CAEZ,CACG;AAEV,CAAC;AAAC;AAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"Removable.js","names":["RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","useDOM","window","removeButtonRef","React","useRef","disabledRef","useState","removeOffset","updateRemoveOffset","useGlobalEventListener","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","transform","classNames","Removable","getRootRef","noop","align","className","restProps","platform","usePlatform","useAdaptivity","sizeY","ref","useExternRef","onRemoveClick","preventDefault","getTitleFromChildren","Platform","IOS","styles","getSizeYClassName"],"sources":["../../../../src/components/Removable/Removable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HasRootRef } from '../../types';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { IconButton } from '../IconButton/IconButton';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { Tappable } from '../Tappable/Tappable';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from './Removable.module.css';\n\nexport interface RemovableProps {\n  /**\n   * iOS only. Текст в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Коллбэк срабатывает при клике на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;\n}\n\ninterface RemovableIosOwnProps extends RemovableProps {\n  removePlaceholderString?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RemovableIos\n */\nconst RemovableIos = ({\n  onRemove,\n  removePlaceholder,\n  removePlaceholderString,\n  children,\n}: RemovableIosOwnProps) => {\n  const { window } = useDOM();\n\n  const removeButtonRef = React.useRef<HTMLElement>(null);\n  const disabledRef = React.useRef(true);\n  const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n  useGlobalEventListener(\n    window,\n    'click',\n    () => {\n      if (removeOffset > 0) {\n        updateRemoveOffset(0);\n      }\n    },\n    { capture: true },\n  );\n\n  const onRemoveTransitionEnd = () => {\n    if (removeOffset > 0) {\n      removeButtonRef?.current?.focus();\n    } else {\n      disabledRef.current = true;\n    }\n  };\n\n  const onRemoveActivateClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    if (!removeButtonRef.current) {\n      return;\n    }\n    const { offsetWidth } = removeButtonRef.current;\n    disabledRef.current = false;\n    updateRemoveOffset(offsetWidth);\n  };\n\n  return (\n    <div\n      className={styles['Removable__content']}\n      style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}\n      onTransitionEnd={onRemoveTransitionEnd}\n    >\n      <IconButton\n        hasActive={false}\n        hasHover={false}\n        aria-label={removePlaceholderString}\n        className={classNames(styles['Removable__action'], styles['Removable__toggle'])}\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0}\n      >\n        <i className={styles['Removable__toggle-in']} role=\"presentation\" />\n      </IconButton>\n      {children}\n\n      <span className={styles['Removable__offset']} aria-hidden />\n\n      <Tappable\n        Component=\"button\"\n        hasActive={false}\n        hasHover={false}\n        disabled={disabledRef.current}\n        getRootRef={removeButtonRef}\n        className={styles['Removable__remove']}\n        onClick={onRemove}\n      >\n        <span className={styles['Removable__remove-in']}>{removePlaceholder}</span>\n      </Tappable>\n    </div>\n  );\n};\n\ninterface RemovableOwnProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: 'start' | 'center';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Removable\n */\nexport const Removable = ({\n  getRootRef,\n  children,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  align = 'center',\n  className,\n  ...restProps\n}: RemovableOwnProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  const ref = useExternRef(getRootRef);\n\n  const onRemoveClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n    onRemove(e);\n  };\n\n  const removePlaceholderString: string = getTitleFromChildren(removePlaceholder);\n\n  return (\n    <div\n      {...restProps}\n      ref={ref}\n      className={classNames(\n        styles['Removable'],\n        platform === Platform.IOS && styles['Removable--ios'],\n        styles[`Removable--align-${align}`],\n        getSizeYClassName(styles['Removable'], sizeY),\n        className,\n      )}\n    >\n      {platform !== Platform.IOS && (\n        <div className={styles['Removable__content']}>\n          {children}\n\n          <IconButton\n            activeMode=\"opacity\"\n            hoverMode=\"opacity\"\n            className={styles['Removable__action']}\n            onClick={onRemoveClick}\n            aria-label={removePlaceholderString}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n\n          <span className={styles['Removable__offset']} aria-hidden />\n        </div>\n      )}\n\n      {platform === Platform.IOS && (\n        <RemovableIos\n          onRemove={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { TappableProps } from "../Tappable/Tappable";
+import * as React from 'react';
+import { TappableProps } from '../Tappable/Tappable';
 export interface RichCellProps extends TappableProps {
     /**
      * Контейнер для текста над `children`.

package/dist/cjs/components/RichCell/RichCell.js

@@ -9,7 +9,7 @@ exports.RichCell = 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 _Tappable = require("../Tappable/Tappable");
 var _Subhead = require("../Typography/Subhead/Subhead");
 var _getSizeYClassName = require("../../helpers/getSizeYClassName");
@@ -34,7 +34,7 @@ var RichCell = function RichCell(_ref) {
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
     sizeY = _useAdaptivity.sizeY;
   return /*#__PURE__*/React.createElement(_Tappable.Tappable, (0, _extends2.default)({}, restProps, {
-    className: (0, _classNames.classNamesString)("vkuiRichCell", !multiline && "vkuiRichCell--text-ellipsis", (0, _getSizeYClassName.getSizeYClassName)("vkuiRichCell", sizeY), className)
+    className: (0, _vkjs.classNames)("vkuiRichCell", !multiline && "vkuiRichCell--text-ellipsis", (0, _getSizeYClassName.getSizeYClassName)("vkuiRichCell", sizeY), className)
   }), before && /*#__PURE__*/React.createElement("div", {
     className: "vkuiRichCell__before"
   }, before), /*#__PURE__*/React.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"RichCell.js","names":["RichCell","subhead","children","text","caption","before","after","afterCaption","bottom","actions","multiline","className","restProps","useAdaptivity","sizeY","classNamesString","getSizeYClassName"],"sources":["../../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { TappableProps, Tappable } from \"../Tappable/Tappable\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport styles from \"./RichCell.module.css\";\n\nexport interface RichCellProps extends TappableProps {\n  /**\n   * Контейнер для текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Контейнер для текста под `children`.\n   */\n  text?: React.ReactNode;\n  /**\n   * Контейнер для текста под `text`.\n   */\n  caption?: React.ReactNode;\n  /**\n   * Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n   */\n  bottom?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `mode=\"primary\" size=\"s\"`\n   * - `mode=\"secondary\" size=\"s\"`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `mode=\"horizontal\" gap=\"s\" stretched`\n   */\n  actions?: React.ReactNode;\n  /**\n   * `<Avatar size={40|48|72} />`.\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 24 или текст.\n   */\n  after?: React.ReactNode;\n  /**\n   * Текст под `after`.\n   */\n  afterCaption?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия.\n   */\n  disabled?: boolean;\n  /**\n   * Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n   */\n  multiline?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichCell\n */\nexport const RichCell = ({\n  subhead,\n  children,\n  text,\n  caption,\n  before,\n  after,\n  afterCaption,\n  bottom,\n  actions,\n  multiline,\n  className,\n  ...restProps\n}: RichCellProps) => {\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNamesString(\n        styles[\"RichCell\"],\n        !multiline && styles[\"RichCell--text-ellipsis\"],\n        getSizeYClassName(styles[\"RichCell\"], sizeY),\n        className\n      )}\n    >\n      {before && <div className={styles[\"RichCell__before\"]}>{before}</div>}\n      <div className={styles[\"RichCell__in\"]}>\n        <div className={styles[\"RichCell__content\"]}>\n          <div className={styles[\"RichCell__content-before\"]}>\n            {subhead && (\n              <Subhead Component=\"div\" className={styles[\"RichCell__subhead\"]}>\n                {subhead}\n              </Subhead>\n            )}\n            <div className={styles[\"RichCell__children\"]}>{children}</div>\n            {text && <div className={styles[\"RichCell__text\"]}>{text}</div>}\n            {caption && (\n              <Subhead Component=\"div\" className={styles[\"RichCell__caption\"]}>\n                {caption}\n              </Subhead>\n            )}\n          </div>\n          {(after || afterCaption) && (\n            <div className={styles[\"RichCell__content-after\"]}>\n              {after && (\n                <div className={styles[\"RichCell__after-children\"]}>\n                  {after}\n                </div>\n              )}\n              {afterCaption && (\n                <div className={styles[\"RichCell__after-caption\"]}>\n                  {afterCaption}\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n        {bottom && <div className={styles[\"RichCell__bottom\"]}>{bottom}</div>}\n        {actions && (\n          <div className={styles[\"RichCell__actions\"]}>{actions}</div>\n        )}\n      </div>\n    </Tappable>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAA0D;AAqD1D;AACA;AACA;AACO,IAAMA,QAAQ,GAAG,SAAXA,QAAQ,OAaA;EAAA,IAZnBC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACJC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,YAAY,QAAZA,YAAY;IACZC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EAEb,oBACE,oBAAC,kBAAQ,6BACHF,SAAS;IACb,SAAS,EAAE,IAAAG,4BAAgB,kBAEzB,CAACL,SAAS,iCAAqC,EAC/C,IAAAM,oCAAiB,kBAAqBF,KAAK,CAAC,EAC5CH,SAAS;EACT,IAEDN,MAAM,iBAAI;IAAK,SAAS;EAA6B,GAAEA,MAAM,CAAO,eACrE;IAAK,SAAS;EAAyB,gBACrC;IAAK,SAAS;EAA8B,gBAC1C;IAAK,SAAS;EAAqC,GAChDJ,OAAO,iBACN,oBAAC,gBAAO;IAAC,SAAS,EAAC,KAAK;IAAC,SAAS;EAA8B,GAC7DA,OAAO,CAEX,eACD;IAAK,SAAS;EAA+B,GAAEC,QAAQ,CAAO,EAC7DC,IAAI,iBAAI;IAAK,SAAS;EAA2B,GAAEA,IAAI,CAAO,EAC9DC,OAAO,iBACN,oBAAC,gBAAO;IAAC,SAAS,EAAC,KAAK;IAAC,SAAS;EAA8B,GAC7DA,OAAO,CAEX,CACG,EACL,CAACE,KAAK,IAAIC,YAAY,kBACrB;IAAK,SAAS;EAAoC,GAC/CD,KAAK,iBACJ;IAAK,SAAS;EAAqC,GAChDA,KAAK,CAET,EACAC,YAAY,iBACX;IAAK,SAAS;EAAoC,GAC/CA,YAAY,CAEhB,CAEJ,CACG,EACLC,MAAM,iBAAI;IAAK,SAAS;EAA6B,GAAEA,MAAM,CAAO,EACpEC,OAAO,iBACN;IAAK,SAAS;EAA8B,GAAEA,OAAO,CACtD,CACG,CACG;AAEf,CAAC;AAAC"}
+{"version":3,"file":"RichCell.js","names":["RichCell","subhead","children","text","caption","before","after","afterCaption","bottom","actions","multiline","className","restProps","useAdaptivity","sizeY","classNames","getSizeYClassName"],"sources":["../../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { TappableProps, Tappable } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport styles from './RichCell.module.css';\n\nexport interface RichCellProps extends TappableProps {\n  /**\n   * Контейнер для текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Контейнер для текста под `children`.\n   */\n  text?: React.ReactNode;\n  /**\n   * Контейнер для текста под `text`.\n   */\n  caption?: React.ReactNode;\n  /**\n   * Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n   */\n  bottom?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `mode=\"primary\" size=\"s\"`\n   * - `mode=\"secondary\" size=\"s\"`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `mode=\"horizontal\" gap=\"s\" stretched`\n   */\n  actions?: React.ReactNode;\n  /**\n   * `<Avatar size={40|48|72} />`.\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 24 или текст.\n   */\n  after?: React.ReactNode;\n  /**\n   * Текст под `after`.\n   */\n  afterCaption?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия.\n   */\n  disabled?: boolean;\n  /**\n   * Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n   */\n  multiline?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichCell\n */\nexport const RichCell = ({\n  subhead,\n  children,\n  text,\n  caption,\n  before,\n  after,\n  afterCaption,\n  bottom,\n  actions,\n  multiline,\n  className,\n  ...restProps\n}: RichCellProps) => {\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['RichCell'],\n        !multiline && styles['RichCell--text-ellipsis'],\n        getSizeYClassName(styles['RichCell'], sizeY),\n        className,\n      )}\n    >\n      {before && <div className={styles['RichCell__before']}>{before}</div>}\n      <div className={styles['RichCell__in']}>\n        <div className={styles['RichCell__content']}>\n          <div className={styles['RichCell__content-before']}>\n            {subhead && (\n              <Subhead Component=\"div\" className={styles['RichCell__subhead']}>\n                {subhead}\n              </Subhead>\n            )}\n            <div className={styles['RichCell__children']}>{children}</div>\n            {text && <div className={styles['RichCell__text']}>{text}</div>}\n            {caption && (\n              <Subhead Component=\"div\" className={styles['RichCell__caption']}>\n                {caption}\n              </Subhead>\n            )}\n          </div>\n          {(after || afterCaption) && (\n            <div className={styles['RichCell__content-after']}>\n              {after && <div className={styles['RichCell__after-children']}>{after}</div>}\n              {afterCaption && (\n                <div className={styles['RichCell__after-caption']}>{afterCaption}</div>\n              )}\n            </div>\n          )}\n        </div>\n        {bottom && <div className={styles['RichCell__bottom']}>{bottom}</div>}\n        {actions && <div className={styles['RichCell__actions']}>{actions}</div>}\n      </div>\n    </Tappable>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAA0D;AAqD1D;AACA;AACA;AACO,IAAMA,QAAQ,GAAG,SAAXA,QAAQ,OAaA;EAAA,IAZnBC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACJC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,YAAY,QAAZA,YAAY;IACZC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EAEb,oBACE,oBAAC,kBAAQ,6BACHF,SAAS;IACb,SAAS,EAAE,IAAAG,gBAAU,kBAEnB,CAACL,SAAS,iCAAqC,EAC/C,IAAAM,oCAAiB,kBAAqBF,KAAK,CAAC,EAC5CH,SAAS;EACT,IAEDN,MAAM,iBAAI;IAAK,SAAS;EAA6B,GAAEA,MAAM,CAAO,eACrE;IAAK,SAAS;EAAyB,gBACrC;IAAK,SAAS;EAA8B,gBAC1C;IAAK,SAAS;EAAqC,GAChDJ,OAAO,iBACN,oBAAC,gBAAO;IAAC,SAAS,EAAC,KAAK;IAAC,SAAS;EAA8B,GAC7DA,OAAO,CAEX,eACD;IAAK,SAAS;EAA+B,GAAEC,QAAQ,CAAO,EAC7DC,IAAI,iBAAI;IAAK,SAAS;EAA2B,GAAEA,IAAI,CAAO,EAC9DC,OAAO,iBACN,oBAAC,gBAAO;IAAC,SAAS,EAAC,KAAK;IAAC,SAAS;EAA8B,GAC7DA,OAAO,CAEX,CACG,EACL,CAACE,KAAK,IAAIC,YAAY,kBACrB;IAAK,SAAS;EAAoC,GAC/CD,KAAK,iBAAI;IAAK,SAAS;EAAqC,GAAEA,KAAK,CAAO,EAC1EC,YAAY,iBACX;IAAK,SAAS;EAAoC,GAAEA,YAAY,CACjE,CAEJ,CACG,EACLC,MAAM,iBAAI;IAAK,SAAS;EAA6B,GAAEA,MAAM,CAAO,EACpEC,OAAO,iBAAI;IAAK,SAAS;EAA8B,GAAEA,OAAO,CAAO,CACpE,CACG;AAEf,CAAC;AAAC"}

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

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { HoverPopperProps } from "../HoverPopper/HoverPopper";
-export interface RichTooltipProps extends Omit<HoverPopperProps, "arrowClassName"> {
+import { HoverPopperProps } from '../HoverPopper/HoverPopper';
+export interface RichTooltipProps extends Omit<HoverPopperProps, 'arrowClassName'> {
     /**
      * Стиль отображения подсказки
      */
-    appearance?: "accent" | "neutral" | "white" | "black" | "inversion";
+    appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/RichTooltip

package/dist/cjs/components/RichTooltip/RichTooltip.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _HoverPopper = require("../HoverPopper/HoverPopper");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _excluded = ["children", "arrow", "appearance", "className"];
 /**
  * @see https://vkcom.github.io/VKUI/#/RichTooltip
@@ -20,11 +20,11 @@ var RichTooltip = function RichTooltip(_ref) {
     _ref$arrow = _ref.arrow,
     arrow = _ref$arrow === void 0 ? true : _ref$arrow,
     _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? "neutral" : _ref$appearance,
+    appearance = _ref$appearance === void 0 ? 'neutral' : _ref$appearance,
     className = _ref.className,
     popperProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/React.createElement(_HoverPopper.HoverPopper, (0, _extends2.default)({
-    className: (0, _classNames.classNamesString)("vkuiRichTooltip", styles["RichTooltip--appearance-".concat(appearance)], className),
+    className: (0, _vkjs.classNames)("vkuiRichTooltip", styles["RichTooltip--appearance-".concat(appearance)], className),
     arrow: arrow,
     arrowClassName: "vkuiRichTooltip__arrow"
   }, popperProps), children);

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

@@ -1 +1 @@
-{"version":3,"file":"RichTooltip.js","names":["RichTooltip","children","arrow","appearance","className","popperProps","classNamesString","styles"],"sources":["../../../../src/components/RichTooltip/RichTooltip.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { HoverPopper, HoverPopperProps } from \"../HoverPopper/HoverPopper\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport styles from \"./RichTooltip.module.css\";\n\nexport interface RichTooltipProps\n  extends Omit<HoverPopperProps, \"arrowClassName\"> {\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: \"accent\" | \"neutral\" | \"white\" | \"black\" | \"inversion\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichTooltip\n */\nexport const RichTooltip = ({\n  children,\n  arrow = true,\n  appearance = \"neutral\",\n  className,\n  ...popperProps\n}: RichTooltipProps) => {\n  return (\n    <HoverPopper\n      className={classNamesString(\n        styles[\"RichTooltip\"],\n        styles[`RichTooltip--appearance-${appearance}`],\n        className\n      )}\n      arrow={arrow}\n      arrowClassName={styles[\"RichTooltip__arrow\"]}\n      {...popperProps}\n    >\n      {children}\n    </HoverPopper>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAAwD;AAWxD;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAMA;EAAA,IALtBC,QAAQ,QAARA,QAAQ;IAAA,kBACRC,KAAK;IAALA,KAAK,2BAAG,IAAI;IAAA,uBACZC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,SAAS,QAATA,SAAS;IACNC,WAAW;EAEd,oBACE,oBAAC,wBAAW;IACV,SAAS,EAAE,IAAAC,4BAAgB,qBAEzBC,MAAM,mCAA4BJ,UAAU,EAAG,EAC/CC,SAAS,CACT;IACF,KAAK,EAAEF,KAAM;IACb,cAAc;EAA+B,GACzCG,WAAW,GAEdJ,QAAQ,CACG;AAElB,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"RichTooltip.js","names":["RichTooltip","children","arrow","appearance","className","popperProps","classNames","styles"],"sources":["../../../../src/components/RichTooltip/RichTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HoverPopper, HoverPopperProps } from '../HoverPopper/HoverPopper';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './RichTooltip.module.css';\n\nexport interface RichTooltipProps extends Omit<HoverPopperProps, 'arrowClassName'> {\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichTooltip\n */\nexport const RichTooltip = ({\n  children,\n  arrow = true,\n  appearance = 'neutral',\n  className,\n  ...popperProps\n}: RichTooltipProps) => {\n  return (\n    <HoverPopper\n      className={classNames(\n        styles['RichTooltip'],\n        styles[`RichTooltip--appearance-${appearance}`],\n        className,\n      )}\n      arrow={arrow}\n      arrowClassName={styles['RichTooltip__arrow']}\n      {...popperProps}\n    >\n      {children}\n    </HoverPopper>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAA6C;AAU7C;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAMA;EAAA,IALtBC,QAAQ,QAARA,QAAQ;IAAA,kBACRC,KAAK;IAALA,KAAK,2BAAG,IAAI;IAAA,uBACZC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,SAAS,QAATA,SAAS;IACNC,WAAW;EAEd,oBACE,oBAAC,wBAAW;IACV,SAAS,EAAE,IAAAC,gBAAU,qBAEnBC,MAAM,mCAA4BJ,UAAU,EAAG,EAC/CC,SAAS,CACT;IACF,KAAK,EAAEF,KAAM;IACb,cAAc;EAA+B,GACzCG,WAAW,GAEdJ,QAAQ,CACG;AAElB,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { NavIdProps } from "../../lib/getNavId";
+import * as React from 'react';
+import { NavIdProps } from '../../lib/getNavId';
 export interface RootProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {
     activeView: string;
     onTransition?(params: {

package/dist/cjs/components/Root/Root.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _platform = require("../../lib/platform");
 var _ConfigProviderContext = require("../ConfigProvider/ConfigProviderContext");
 var _SplitCol = require("../SplitCol/SplitCol");
@@ -23,7 +23,7 @@ var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
 var _useTimeout = require("../../hooks/useTimeout");
 var _usePlatform = require("../../hooks/usePlatform");
 var _excluded = ["children", "activeView", "onTransition", "nav", "className"];
-var warn = (0, _warnOnce.warnOnce)("Root");
+var warn = (0, _warnOnce.warnOnce)('Root');
 
 /**
  * @see https://vkcom.github.io/VKUI/#/Root
@@ -110,12 +110,12 @@ var Root = function Root(_ref) {
     fallbackTransition.set();
   }, [fallbackTransition, transition]);
   var onAnimationEnd = function onAnimationEnd(e) {
-    if (["vkui-root-android-animation-hide-back", "vkui-root-android-animation-show-forward", "vkui-root-ios-animation-hide-back", "vkui-root-ios-animation-show-forward"].includes(e.animationName)) {
+    if (['vkui-root-android-animation-hide-back', 'vkui-root-android-animation-show-forward', 'vkui-root-ios-animation-hide-back', 'vkui-root-ios-animation-show-forward'].includes(e.animationName)) {
       finishTransition();
     }
   };
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
-    className: (0, _classNames.classNamesString)("vkuiRoot", platform === _platform.Platform.IOS && "vkuiRoot--ios", transition && "vkuiRoot--transition", className)
+    className: (0, _vkjs.classNames)("vkuiRoot", platform === _platform.Platform.IOS && "vkuiRoot--ios", transition && "vkuiRoot--transition", className)
   }), views.map(function (view) {
     var _scrolls$viewId;
     var viewId = (0, _getNavId.getNavId)(view.props, warn);
@@ -130,7 +130,7 @@ var Root = function Root(_ref) {
         return viewId && (viewNodes[viewId] = e);
       },
       onAnimationEnd: isTransitionTarget ? onAnimationEnd : undefined,
-      className: (0, _classNames.classNamesString)("vkuiRoot__view", transition && viewId === prevView && isBack && "vkuiRoot__view--hide-back", transition && viewId === prevView && !isBack && "vkuiRoot__view--hide-forward", transition && viewId === activeView && isBack && "vkuiRoot__view--show-back", transition && viewId === activeView && !isBack && "vkuiRoot__view--show-forward", !transition && viewId === activeView && "vkuiRoot__view--active")
+      className: (0, _vkjs.classNames)("vkuiRoot__view", transition && viewId === prevView && isBack && "vkuiRoot__view--hide-back", transition && viewId === prevView && !isBack && "vkuiRoot__view--hide-forward", transition && viewId === activeView && isBack && "vkuiRoot__view--show-back", transition && viewId === activeView && !isBack && "vkuiRoot__view--show-forward")
     }, /*#__PURE__*/React.createElement(_NavTransitionContext.NavTransitionProvider, {
       entering: transition && viewId === activeView
     }, /*#__PURE__*/React.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"Root.js","names":["warn","warnOnce","Root","children","_activeView","activeView","onTransition","nav","className","restProps","scroll","React","useContext","ScrollContext","platform","usePlatform","useDOM","document","scrolls","useRef","current","viewNodes","useConfigProvider","transitionMotionEnabled","SplitColContext","animate","disableAnimation","views","Children","toArray","useState","transition","prevView","isBack","_setState","transitionTo","panel","viewIds","map","view","getNavId","props","indexOf","getScroll","y","finishTransition","useCallback","useIsomorphicLayoutEffect","activeElement","blur","scrollTo","Boolean","from","to","fallbackTransition","useTimeout","Platform","IOS","useEffect","clear","set","onAnimationEnd","e","includes","animationName","classNamesString","viewId","isTransitionTarget","compensateScroll","undefined","marginTop"],"sources":["../../../../src/components/Root/Root.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Platform } from \"../../lib/platform\";\nimport { useConfigProvider } from \"../ConfigProvider/ConfigProviderContext\";\nimport { SplitColContext } from \"../SplitCol/SplitCol\";\nimport { ScrollContext } from \"../AppRoot/ScrollContext\";\nimport { NavTransitionProvider } from \"../NavTransitionContext/NavTransitionContext\";\nimport { getNavId, NavIdProps } from \"../../lib/getNavId\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { useDOM } from \"../../lib/dom\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport styles from \"./Root.module.css\";\n\nexport interface RootProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    NavIdProps {\n  activeView: string;\n  onTransition?(params: { isBack: boolean; from: string; to: string }): void;\n}\n\nexport interface RootState {\n  activeView: string;\n  transition: boolean;\n  isBack?: boolean;\n  prevView?: string;\n}\n\nconst warn = warnOnce(\"Root\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Root\n */\nexport const Root = ({\n  children,\n  activeView: _activeView,\n  onTransition,\n  nav,\n  className,\n  ...restProps\n}: RootProps) => {\n  const scroll = React.useContext(ScrollContext);\n  const platform = usePlatform();\n  const { document } = useDOM();\n  const scrolls = React.useRef<Record<string, number>>({}).current;\n  const viewNodes = React.useRef<Record<string, HTMLElement | null>>(\n    {}\n  ).current;\n\n  const { transitionMotionEnabled = true } = useConfigProvider();\n  const { animate } = React.useContext(SplitColContext);\n  const disableAnimation = !transitionMotionEnabled || !animate;\n\n  const views = React.Children.toArray(children) as React.ReactElement[];\n\n  const [{ prevView, activeView, transition, isBack }, _setState] =\n    React.useState<RootState>({\n      activeView: _activeView,\n      transition: false,\n    });\n  const transitionTo = (panel: string) => {\n    if (panel !== activeView) {\n      const viewIds = views.map((view) => getNavId(view.props, warn));\n      const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n      scrolls[activeView] = scroll.getScroll().y;\n      _setState({\n        activeView: panel,\n        prevView: activeView,\n        transition: !disableAnimation,\n        isBack,\n      });\n    }\n  };\n  const finishTransition = React.useCallback(\n    () => _setState({ activeView, prevView, isBack, transition: false }),\n    [activeView, isBack, prevView]\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    (document!.activeElement as HTMLElement).blur();\n  }, [activeView]);\n\n  // Нужен переход\n  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n  useIsomorphicLayoutEffect(() => {\n    if (!transition && prevView) {\n      // Закончился переход\n      scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n      onTransition &&\n        onTransition({\n          isBack: Boolean(isBack),\n          from: prevView,\n          to: activeView,\n        });\n    }\n  }, [transition, prevView]);\n\n  const fallbackTransition = useTimeout(\n    finishTransition,\n    platform === Platform.IOS ? 600 : 300\n  );\n  React.useEffect(() => {\n    if (!transition) {\n      fallbackTransition.clear();\n      return;\n    }\n    fallbackTransition.set();\n  }, [fallbackTransition, transition]);\n\n  const onAnimationEnd = (e: React.AnimationEvent) => {\n    if (\n      [\n        \"vkui-root-android-animation-hide-back\",\n        \"vkui-root-android-animation-show-forward\",\n        \"vkui-root-ios-animation-hide-back\",\n        \"vkui-root-ios-animation-show-forward\",\n      ].includes(e.animationName)\n    ) {\n      finishTransition();\n    }\n  };\n\n  return (\n    <div\n      {...restProps}\n      className={classNamesString(\n        styles[\"Root\"],\n        platform === Platform.IOS && styles[\"Root--ios\"],\n        transition && styles[\"Root--transition\"],\n        className\n      )}\n    >\n      {views.map((view) => {\n        const viewId = getNavId(view.props, warn);\n        if (viewId !== activeView && !(transition && viewId === prevView)) {\n          return null;\n        }\n        const isTransitionTarget =\n          transition && viewId === (isBack ? prevView : activeView);\n        const compensateScroll =\n          transition &&\n          (viewId === prevView || (isBack && viewId === activeView));\n        return (\n          <div\n            key={viewId}\n            ref={(e) => viewId && (viewNodes[viewId] = e)}\n            onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n            className={classNamesString(\n              styles[\"Root__view\"],\n              transition &&\n                viewId === prevView &&\n                isBack &&\n                styles[\"Root__view--hide-back\"],\n              transition &&\n                viewId === prevView &&\n                !isBack &&\n                styles[\"Root__view--hide-forward\"],\n              transition &&\n                viewId === activeView &&\n                isBack &&\n                styles[\"Root__view--show-back\"],\n              transition &&\n                viewId === activeView &&\n                !isBack &&\n                styles[\"Root__view--show-forward\"],\n              !transition &&\n                viewId === activeView &&\n                styles[\"Root__view--active\"]\n            )}\n          >\n            <NavTransitionProvider\n              entering={transition && viewId === activeView}\n            >\n              <div\n                className={styles[\"Root__scrollCompensation\"]}\n                style={{\n                  marginTop: compensateScroll\n                    ? viewId && -(scrolls[viewId] ?? 0)\n                    : undefined,\n                }}\n              >\n                {view}\n              </div>\n            </NavTransitionProvider>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Root.js","names":["warn","warnOnce","Root","children","_activeView","activeView","onTransition","nav","className","restProps","scroll","React","useContext","ScrollContext","platform","usePlatform","useDOM","document","scrolls","useRef","current","viewNodes","useConfigProvider","transitionMotionEnabled","SplitColContext","animate","disableAnimation","views","Children","toArray","useState","transition","prevView","isBack","_setState","transitionTo","panel","viewIds","map","view","getNavId","props","indexOf","getScroll","y","finishTransition","useCallback","useIsomorphicLayoutEffect","activeElement","blur","scrollTo","Boolean","from","to","fallbackTransition","useTimeout","Platform","IOS","useEffect","clear","set","onAnimationEnd","e","includes","animationName","classNames","viewId","isTransitionTarget","compensateScroll","undefined","marginTop"],"sources":["../../../../src/components/Root/Root.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { SplitColContext } from '../SplitCol/SplitCol';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n  activeView: string;\n  onTransition?(params: { isBack: boolean; from: string; to: string }): void;\n}\n\nexport interface RootState {\n  activeView: string;\n  transition: boolean;\n  isBack?: boolean;\n  prevView?: string;\n}\n\nconst warn = warnOnce('Root');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Root\n */\nexport const Root = ({\n  children,\n  activeView: _activeView,\n  onTransition,\n  nav,\n  className,\n  ...restProps\n}: RootProps) => {\n  const scroll = React.useContext(ScrollContext);\n  const platform = usePlatform();\n  const { document } = useDOM();\n  const scrolls = React.useRef<Record<string, number>>({}).current;\n  const viewNodes = React.useRef<Record<string, HTMLElement | null>>({}).current;\n\n  const { transitionMotionEnabled = true } = useConfigProvider();\n  const { animate } = React.useContext(SplitColContext);\n  const disableAnimation = !transitionMotionEnabled || !animate;\n\n  const views = React.Children.toArray(children) as React.ReactElement[];\n\n  const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n    activeView: _activeView,\n    transition: false,\n  });\n  const transitionTo = (panel: string) => {\n    if (panel !== activeView) {\n      const viewIds = views.map((view) => getNavId(view.props, warn));\n      const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n      scrolls[activeView] = scroll.getScroll().y;\n      _setState({\n        activeView: panel,\n        prevView: activeView,\n        transition: !disableAnimation,\n        isBack,\n      });\n    }\n  };\n  const finishTransition = React.useCallback(\n    () => _setState({ activeView, prevView, isBack, transition: false }),\n    [activeView, isBack, prevView],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    (document!.activeElement as HTMLElement).blur();\n  }, [activeView]);\n\n  // Нужен переход\n  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n  useIsomorphicLayoutEffect(() => {\n    if (!transition && prevView) {\n      // Закончился переход\n      scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n      onTransition &&\n        onTransition({\n          isBack: Boolean(isBack),\n          from: prevView,\n          to: activeView,\n        });\n    }\n  }, [transition, prevView]);\n\n  const fallbackTransition = useTimeout(finishTransition, platform === Platform.IOS ? 600 : 300);\n  React.useEffect(() => {\n    if (!transition) {\n      fallbackTransition.clear();\n      return;\n    }\n    fallbackTransition.set();\n  }, [fallbackTransition, transition]);\n\n  const onAnimationEnd = (e: React.AnimationEvent) => {\n    if (\n      [\n        'vkui-root-android-animation-hide-back',\n        'vkui-root-android-animation-show-forward',\n        'vkui-root-ios-animation-hide-back',\n        'vkui-root-ios-animation-show-forward',\n      ].includes(e.animationName)\n    ) {\n      finishTransition();\n    }\n  };\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['Root'],\n        platform === Platform.IOS && styles['Root--ios'],\n        transition && styles['Root--transition'],\n        className,\n      )}\n    >\n      {views.map((view) => {\n        const viewId = getNavId(view.props, warn);\n        if (viewId !== activeView && !(transition && viewId === prevView)) {\n          return null;\n        }\n        const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n        const compensateScroll =\n          transition && (viewId === prevView || (isBack && viewId === activeView));\n        return (\n          <div\n            key={viewId}\n            ref={(e) => viewId && (viewNodes[viewId] = e)}\n            onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n            className={classNames(\n              styles['Root__view'],\n              transition && viewId === prevView && isBack && styles['Root__view--hide-back'],\n              transition && viewId === prevView && !isBack && styles['Root__view--hide-forward'],\n              transition && viewId === activeView && isBack && styles['Root__view--show-back'],\n              transition && viewId === activeView && !isBack && styles['Root__view--show-forward'],\n            )}\n          >\n            <NavTransitionProvider entering={transition && viewId === activeView}>\n              <div\n                className={styles['Root__scrollCompensation']}\n                style={{\n                  marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,\n                }}\n              >\n                {view}\n              </div>\n            </NavTransitionProvider>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/cjs/components/ScreenSpinner/Icon48CancelCircle.d.ts

@@ -1,2 +1,2 @@
-import * as React from "react";
+import * as React from 'react';
 export declare const Icon48CancelCircle: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;

package/dist/cjs/components/ScreenSpinner/Icon48CancelCircle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon48CancelCircle.js","names":["Icon48CancelCircle","props"],"sources":["../../../../src/components/ScreenSpinner/Icon48CancelCircle.tsx"],"sourcesContent":["import * as React from \"react\";\n\nexport const Icon48CancelCircle = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    className=\"vkuiIcon\"\n    width=\"48\"\n    height=\"48\"\n    viewBox=\"0 0 48 48\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M40 24c0 8.837-7.163 16-16 16S8 32.837 8 24 15.163 8 24 8s16 7.163 16 16Zm-10.08-4.33a1.125 1.125 0 0 0-1.59-1.59L24 22.409l-4.33-4.33a1.125 1.125 0 0 0-1.59 0l-.101.116a1.125 1.125 0 0 0 .1 1.476L22.41 24l-4.33 4.33a1.125 1.125 0 0 0 1.591 1.59L24 25.591l4.33 4.33c.439.439 1.151.439 1.59 0l.101-.116a1.125 1.125 0 0 0-.1-1.476L25.59 24l4.33-4.33Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n"],"mappings":";;;;;;;;;AAAA;AAEO,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkB,CAAIC,KAAoC;EAAA,oBACrE;IACE,SAAS,EAAC,UAAU;IACpB,KAAK,EAAC,IAAI;IACV,MAAM,EAAC,IAAI;IACX,OAAO,EAAC,WAAW;IACnB,IAAI,EAAC,MAAM;IACX,KAAK,EAAC;EAA4B,GAC9BA,KAAK,gBAET;IACE,QAAQ,EAAC,SAAS;IAClB,QAAQ,EAAC,SAAS;IAClB,CAAC,EAAC,8VAA8V;IAChW,IAAI,EAAC;EAAc,EACnB,CACE;AAAA,CACP;AAAC"}
+{"version":3,"file":"Icon48CancelCircle.js","names":["Icon48CancelCircle","props"],"sources":["../../../../src/components/ScreenSpinner/Icon48CancelCircle.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport const Icon48CancelCircle = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    className=\"vkuiIcon\"\n    width=\"48\"\n    height=\"48\"\n    viewBox=\"0 0 48 48\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M40 24c0 8.837-7.163 16-16 16S8 32.837 8 24 15.163 8 24 8s16 7.163 16 16Zm-10.08-4.33a1.125 1.125 0 0 0-1.59-1.59L24 22.409l-4.33-4.33a1.125 1.125 0 0 0-1.59 0l-.101.116a1.125 1.125 0 0 0 .1 1.476L22.41 24l-4.33 4.33a1.125 1.125 0 0 0 1.591 1.59L24 25.591l4.33 4.33c.439.439 1.151.439 1.59 0l.101-.116a1.125 1.125 0 0 0-.1-1.476L25.59 24l4.33-4.33Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n"],"mappings":";;;;;;;;;AAAA;AAEO,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkB,CAAIC,KAAoC;EAAA,oBACrE;IACE,SAAS,EAAC,UAAU;IACpB,KAAK,EAAC,IAAI;IACV,MAAM,EAAC,IAAI;IACX,OAAO,EAAC,WAAW;IACnB,IAAI,EAAC,MAAM;IACX,KAAK,EAAC;EAA4B,GAC9BA,KAAK,gBAET;IACE,QAAQ,EAAC,SAAS;IAClB,QAAQ,EAAC,SAAS;IAClB,CAAC,EAAC,8VAA8V;IAChW,IAAI,EAAC;EAAc,EACnB,CACE;AAAA,CACP;AAAC"}