@vkontakte/vkui 5.0.2 → 5.1.0

package/dist/cjs/components/FormLayout/FormLayout.js

@@ -9,7 +9,7 @@ exports.FormLayout = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _excluded = ["children", "Component", "getRef", "onSubmit", "className"];
 var preventDefault = function preventDefault(e) {
   return e.preventDefault();
@@ -20,19 +20,19 @@ var preventDefault = function preventDefault(e) {
 var FormLayout = function FormLayout(_ref) {
   var children = _ref.children,
     _ref$Component = _ref.Component,
-    Component = _ref$Component === void 0 ? "form" : _ref$Component,
+    Component = _ref$Component === void 0 ? 'form' : _ref$Component,
     getRef = _ref.getRef,
     _ref$onSubmit = _ref.onSubmit,
     onSubmit = _ref$onSubmit === void 0 ? preventDefault : _ref$onSubmit,
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({}, restProps, {
-    className: (0, _classNames.classNamesString)("vkuiFormLayout", className),
+    className: (0, _vkjs.classNames)("vkuiFormLayout", className),
     onSubmit: onSubmit,
     ref: getRef
   }), /*#__PURE__*/React.createElement("div", {
     className: "vkuiFormLayout__container"
-  }, children), Component === "form" && /*#__PURE__*/React.createElement("input", {
+  }, children), Component === 'form' && /*#__PURE__*/React.createElement("input", {
     type: "submit",
     className: "vkuiFormLayout__submit",
     value: ""

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

@@ -1 +1 @@
-{"version":3,"file":"FormLayout.js","names":["preventDefault","e","FormLayout","children","Component","getRef","onSubmit","className","restProps","classNamesString"],"sources":["../../../../src/components/FormLayout/FormLayout.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { HasComponent, HasRef } from \"../../types\";\nimport styles from \"./FormLayout.module.css\";\n\nconst preventDefault = (e: React.FormEvent) => e.preventDefault();\n\nexport type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> &\n  HasRef<HTMLElement> &\n  HasComponent;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormLayout\n */\nexport const FormLayout = ({\n  children,\n  Component = \"form\",\n  getRef,\n  onSubmit = preventDefault,\n  className,\n  ...restProps\n}: FormLayoutProps) => {\n  return (\n    <Component\n      {...restProps}\n      className={classNamesString(styles[\"FormLayout\"], className)}\n      onSubmit={onSubmit}\n      ref={getRef}\n    >\n      <div className={styles[\"FormLayout__container\"]}>{children}</div>\n      {Component === \"form\" && (\n        <input\n          type=\"submit\"\n          className={styles[\"FormLayout__submit\"]}\n          value=\"\"\n        />\n      )}\n    </Component>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAAwD;AAIxD,IAAMA,cAAc,GAAG,SAAjBA,cAAc,CAAIC,CAAkB;EAAA,OAAKA,CAAC,CAACD,cAAc,EAAE;AAAA;AAMjE;AACA;AACA;AACO,IAAME,UAAU,GAAG,SAAbA,UAAU,OAOA;EAAA,IANrBC,QAAQ,QAARA,QAAQ;IAAA,sBACRC,SAAS;IAATA,SAAS,+BAAG,MAAM;IAClBC,MAAM,QAANA,MAAM;IAAA,qBACNC,QAAQ;IAARA,QAAQ,8BAAGN,cAAc;IACzBO,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,oBACE,oBAAC,SAAS,6BACJA,SAAS;IACb,SAAS,EAAE,IAAAC,4BAAgB,oBAAuBF,SAAS,CAAE;IAC7D,QAAQ,EAAED,QAAS;IACnB,GAAG,EAAED;EAAO,iBAEZ;IAAK,SAAS;EAAkC,GAAEF,QAAQ,CAAO,EAChEC,SAAS,KAAK,MAAM,iBACnB;IACE,IAAI,EAAC,QAAQ;IACb,SAAS,0BAA+B;IACxC,KAAK,EAAC;EAAE,EAEX,CACS;AAEhB,CAAC;AAAC"}
+{"version":3,"file":"FormLayout.js","names":["preventDefault","e","FormLayout","children","Component","getRef","onSubmit","className","restProps","classNames"],"sources":["../../../../src/components/FormLayout/FormLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRef } from '../../types';\nimport styles from './FormLayout.module.css';\n\nconst preventDefault = (e: React.FormEvent) => e.preventDefault();\n\nexport type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> &\n  HasRef<HTMLElement> &\n  HasComponent;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormLayout\n */\nexport const FormLayout = ({\n  children,\n  Component = 'form',\n  getRef,\n  onSubmit = preventDefault,\n  className,\n  ...restProps\n}: FormLayoutProps) => {\n  return (\n    <Component\n      {...restProps}\n      className={classNames(styles['FormLayout'], className)}\n      onSubmit={onSubmit}\n      ref={getRef}\n    >\n      <div className={styles['FormLayout__container']}>{children}</div>\n      {Component === 'form' && (\n        <input type=\"submit\" className={styles['FormLayout__submit']} value=\"\" />\n      )}\n    </Component>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAA6C;AAI7C,IAAMA,cAAc,GAAG,SAAjBA,cAAc,CAAIC,CAAkB;EAAA,OAAKA,CAAC,CAACD,cAAc,EAAE;AAAA;AAMjE;AACA;AACA;AACO,IAAME,UAAU,GAAG,SAAbA,UAAU,OAOA;EAAA,IANrBC,QAAQ,QAARA,QAAQ;IAAA,sBACRC,SAAS;IAATA,SAAS,+BAAG,MAAM;IAClBC,MAAM,QAANA,MAAM;IAAA,qBACNC,QAAQ;IAARA,QAAQ,8BAAGN,cAAc;IACzBO,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,oBACE,oBAAC,SAAS,6BACJA,SAAS;IACb,SAAS,EAAE,IAAAC,gBAAU,oBAAuBF,SAAS,CAAE;IACvD,QAAQ,EAAED,QAAS;IACnB,GAAG,EAAED;EAAO,iBAEZ;IAAK,SAAS;EAAkC,GAAEF,QAAQ,CAAO,EAChEC,SAAS,KAAK,MAAM,iBACnB;IAAO,IAAI,EAAC,QAAQ;IAAC,SAAS,0BAA+B;IAAC,KAAK,EAAC;EAAE,EACvE,CACS;AAEhB,CAAC;AAAC"}

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

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { HasRootRef } from "../../types";
-import { RemovableProps } from "../Removable/Removable";
+import * as React from 'react';
+import { HasRootRef } from '../../types';
+import { RemovableProps } from '../Removable/Removable';
 export interface FormLayoutGroupProps extends React.HTMLAttributes<HTMLDivElement>, RemovableProps, HasRootRef<HTMLDivElement> {
-    mode?: "vertical" | "horizontal";
+    mode?: 'vertical' | 'horizontal';
     /**
      * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.
      */

package/dist/cjs/components/FormLayoutGroup/FormLayoutGroup.js

@@ -9,8 +9,7 @@ exports.FormLayoutGroup = 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 _utils = require("../../lib/utils");
+var _vkjs = require("@vkontakte/vkjs");
 var _useExternRef = require("../../hooks/useExternRef");
 var _Removable = require("../Removable/Removable");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
@@ -22,24 +21,24 @@ var _excluded = ["children", "mode", "removable", "segmented", "removePlaceholde
 var FormLayoutGroup = function FormLayoutGroup(_ref) {
   var children = _ref.children,
     _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? "vertical" : _ref$mode,
+    mode = _ref$mode === void 0 ? 'vertical' : _ref$mode,
     removable = _ref.removable,
     segmented = _ref.segmented,
     _ref$removePlaceholde = _ref.removePlaceholder,
-    removePlaceholder = _ref$removePlaceholde === void 0 ? "Удалить" : _ref$removePlaceholde,
+    removePlaceholder = _ref$removePlaceholde === void 0 ? 'Удалить' : _ref$removePlaceholde,
     _ref$onRemove = _ref.onRemove,
-    _onRemove = _ref$onRemove === void 0 ? _utils.noop : _ref$onRemove,
+    _onRemove = _ref$onRemove === void 0 ? _vkjs.noop : _ref$onRemove,
     getRootRef = _ref.getRootRef,
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
     sizeY = _useAdaptivity.sizeY;
-  var isRemovable = removable && mode === "horizontal";
-  var isSegmented = segmented && mode === "horizontal";
+  var isRemovable = removable && mode === 'horizontal';
+  var isSegmented = segmented && mode === 'horizontal';
   var rootEl = (0, _useExternRef.useExternRef)(getRootRef);
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     ref: rootEl,
-    className: (0, _classNames.classNamesString)("vkuiFormLayoutGroup", (0, _getSizeYClassName.getSizeYClassName)("vkuiFormLayoutGroup", sizeY), styles["FormLayoutGroup--mode-".concat(mode)], isRemovable && "vkuiFormLayoutGroup--removable", isSegmented && "vkuiFormLayoutGroup--segmented", className)
+    className: (0, _vkjs.classNames)("vkuiFormLayoutGroup", (0, _getSizeYClassName.getSizeYClassName)("vkuiFormLayoutGroup", sizeY), styles["FormLayoutGroup--mode-".concat(mode)], isRemovable && "vkuiFormLayoutGroup--removable", isSegmented && "vkuiFormLayoutGroup--segmented", className)
   }, restProps), isRemovable ? /*#__PURE__*/React.createElement(_Removable.Removable, {
     className: "vkuiFormLayoutGroup__removable",
     align: "start",

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

@@ -1 +1 @@
-{"version":3,"file":"FormLayoutGroup.js","names":["FormLayoutGroup","children","mode","removable","segmented","removePlaceholder","onRemove","noop","getRootRef","className","restProps","useAdaptivity","sizeY","isRemovable","isSegmented","rootEl","useExternRef","classNamesString","getSizeYClassName","styles","e","current"],"sources":["../../../../src/components/FormLayoutGroup/FormLayoutGroup.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { HasRootRef } from \"../../types\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { noop } from \"../../lib/utils\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { Removable, RemovableProps } from \"../Removable/Removable\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport styles from \"./FormLayoutGroup.module.css\";\n\nexport interface FormLayoutGroupProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  mode?: \"vertical\" | \"horizontal\";\n  /**\n   * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.\n   */\n  removable?: boolean;\n\n  /**\n   * Только для режима horizontal. Дает возможность склеить несколько `FormItem`.\n   */\n  segmented?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup\n */\nexport const FormLayoutGroup = ({\n  children,\n  mode = \"vertical\",\n  removable,\n  segmented,\n  removePlaceholder = \"Удалить\",\n  onRemove = noop,\n  getRootRef,\n  className,\n  ...restProps\n}: FormLayoutGroupProps) => {\n  const { sizeY } = useAdaptivity();\n  const isRemovable = removable && mode === \"horizontal\";\n  const isSegmented = segmented && mode === \"horizontal\";\n  const rootEl = useExternRef(getRootRef);\n\n  return (\n    <div\n      ref={rootEl}\n      className={classNamesString(\n        styles[\"FormLayoutGroup\"],\n        getSizeYClassName(styles[\"FormLayoutGroup\"], sizeY),\n        styles[`FormLayoutGroup--mode-${mode}`],\n        isRemovable && styles[\"FormLayoutGroup--removable\"],\n        isSegmented && styles[\"FormLayoutGroup--segmented\"],\n        className\n      )}\n      {...restProps}\n    >\n      {isRemovable ? (\n        <Removable\n          className={styles[\"FormLayoutGroup__removable\"]}\n          align=\"start\"\n          removePlaceholder={removePlaceholder}\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n        >\n          {children}\n        </Removable>\n      ) : (\n        <React.Fragment>\n          {children}\n          <span className={styles[\"FormLayoutGroup__offset\"]} aria-hidden />\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AAAoE;AAmBpE;AACA;AACA;AACO,IAAMA,eAAe,GAAG,SAAlBA,eAAe,OAUA;EAAA,IAT1BC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAG,UAAU;IACjBC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IAAA,6BACTC,iBAAiB;IAAjBA,iBAAiB,sCAAG,SAAS;IAAA,qBAC7BC,QAAQ;IAARA,SAAQ,8BAAGC,WAAI;IACfC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EACb,IAAMC,WAAW,GAAGV,SAAS,IAAID,IAAI,KAAK,YAAY;EACtD,IAAMY,WAAW,GAAGV,SAAS,IAAIF,IAAI,KAAK,YAAY;EACtD,IAAMa,MAAM,GAAG,IAAAC,0BAAY,EAACR,UAAU,CAAC;EAEvC,oBACE;IACE,GAAG,EAAEO,MAAO;IACZ,SAAS,EAAE,IAAAE,4BAAgB,yBAEzB,IAAAC,oCAAiB,yBAA4BN,KAAK,CAAC,EACnDO,MAAM,iCAA0BjB,IAAI,EAAG,EACvCW,WAAW,oCAAwC,EACnDC,WAAW,oCAAwC,EACnDL,SAAS;EACT,GACEC,SAAS,GAEZG,WAAW,gBACV,oBAAC,oBAAS;IACR,SAAS,kCAAuC;IAChD,KAAK,EAAC,OAAO;IACb,iBAAiB,EAAER,iBAAkB;IACrC,QAAQ,EAAE,kBAACe,CAAC,EAAK;MACf,IAAIL,MAAM,aAANA,MAAM,eAANA,MAAM,CAAEM,OAAO,EAAE;QACnBf,SAAQ,CAACc,CAAC,EAAEL,MAAM,CAACM,OAAO,CAAC;MAC7B;IACF;EAAE,GAEDpB,QAAQ,CACC,gBAEZ,oBAAC,KAAK,CAAC,QAAQ,QACZA,QAAQ,eACT;IAAM,SAAS,+BAAoC;IAAC;EAAW,EAAG,CAErE,CACG;AAEV,CAAC;AAAC;AAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"FormLayoutGroup.js","names":["FormLayoutGroup","children","mode","removable","segmented","removePlaceholder","onRemove","noop","getRootRef","className","restProps","useAdaptivity","sizeY","isRemovable","isSegmented","rootEl","useExternRef","classNames","getSizeYClassName","styles","e","current"],"sources":["../../../../src/components/FormLayoutGroup/FormLayoutGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HasRootRef } from '../../types';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from './FormLayoutGroup.module.css';\n\nexport interface FormLayoutGroupProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'vertical' | 'horizontal';\n  /**\n   * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.\n   */\n  removable?: boolean;\n\n  /**\n   * Только для режима horizontal. Дает возможность склеить несколько `FormItem`.\n   */\n  segmented?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup\n */\nexport const FormLayoutGroup = ({\n  children,\n  mode = 'vertical',\n  removable,\n  segmented,\n  removePlaceholder = 'Удалить',\n  onRemove = noop,\n  getRootRef,\n  className,\n  ...restProps\n}: FormLayoutGroupProps) => {\n  const { sizeY } = useAdaptivity();\n  const isRemovable = removable && mode === 'horizontal';\n  const isSegmented = segmented && mode === 'horizontal';\n  const rootEl = useExternRef(getRootRef);\n\n  return (\n    <div\n      ref={rootEl}\n      className={classNames(\n        styles['FormLayoutGroup'],\n        getSizeYClassName(styles['FormLayoutGroup'], sizeY),\n        styles[`FormLayoutGroup--mode-${mode}`],\n        isRemovable && styles['FormLayoutGroup--removable'],\n        isSegmented && styles['FormLayoutGroup--segmented'],\n        className,\n      )}\n      {...restProps}\n    >\n      {isRemovable ? (\n        <Removable\n          className={styles['FormLayoutGroup__removable']}\n          align=\"start\"\n          removePlaceholder={removePlaceholder}\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n        >\n          {children}\n        </Removable>\n      ) : (\n        <React.Fragment>\n          {children}\n          <span className={styles['FormLayoutGroup__offset']} aria-hidden />\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AACA;AAAoE;AAmBpE;AACA;AACA;AACO,IAAMA,eAAe,GAAG,SAAlBA,eAAe,OAUA;EAAA,IAT1BC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAG,UAAU;IACjBC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IAAA,6BACTC,iBAAiB;IAAjBA,iBAAiB,sCAAG,SAAS;IAAA,qBAC7BC,QAAQ;IAARA,SAAQ,8BAAGC,UAAI;IACfC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EACb,IAAMC,WAAW,GAAGV,SAAS,IAAID,IAAI,KAAK,YAAY;EACtD,IAAMY,WAAW,GAAGV,SAAS,IAAIF,IAAI,KAAK,YAAY;EACtD,IAAMa,MAAM,GAAG,IAAAC,0BAAY,EAACR,UAAU,CAAC;EAEvC,oBACE;IACE,GAAG,EAAEO,MAAO;IACZ,SAAS,EAAE,IAAAE,gBAAU,yBAEnB,IAAAC,oCAAiB,yBAA4BN,KAAK,CAAC,EACnDO,MAAM,iCAA0BjB,IAAI,EAAG,EACvCW,WAAW,oCAAwC,EACnDC,WAAW,oCAAwC,EACnDL,SAAS;EACT,GACEC,SAAS,GAEZG,WAAW,gBACV,oBAAC,oBAAS;IACR,SAAS,kCAAuC;IAChD,KAAK,EAAC,OAAO;IACb,iBAAiB,EAAER,iBAAkB;IACrC,QAAQ,EAAE,kBAACe,CAAC,EAAK;MACf,IAAIL,MAAM,aAANA,MAAM,eAANA,MAAM,CAAEM,OAAO,EAAE;QACnBf,SAAQ,CAACc,CAAC,EAAEL,MAAM,CAACM,OAAO,CAAC;MAC7B;IACF;EAAE,GAEDpB,QAAQ,CACC,gBAEZ,oBAAC,KAAK,CAAC,QAAQ,QACZA,QAAQ,eACT;IAAM,SAAS,+BAAoC;IAAC;EAAW,EAAG,CAErE,CACG;AAEV,CAAC;AAAC;AAAA;EAAA;EAAA;AAAA"}

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

@@ -1,6 +1,6 @@
-import * as React from "react";
+import * as React from 'react';
 export interface FormStatusProps extends React.HTMLAttributes<HTMLDivElement> {
-    mode?: "default" | "error";
+    mode?: 'default' | 'error';
     header?: React.ReactNode;
 }
 /**

package/dist/cjs/components/FormStatus/FormStatus.js

@@ -9,7 +9,7 @@ exports.FormStatus = 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 _Banner = require("../Banner/Banner");
 var _excluded = ["mode", "children", "className"];
 /**
@@ -22,7 +22,7 @@ var FormStatus = function FormStatus(_ref) {
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/React.createElement(_Banner.Banner, (0, _extends2.default)({}, restProps, {
     subheader: children,
-    className: (0, _classNames.classNamesString)("vkuiFormStatus", mode === "error" && "vkuiFormStatus--mode-error", className)
+    className: (0, _vkjs.classNames)("vkuiFormStatus", mode === 'error' && "vkuiFormStatus--mode-error", className)
   }));
 };
 exports.FormStatus = FormStatus;

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

@@ -1 +1 @@
-{"version":3,"file":"FormStatus.js","names":["FormStatus","mode","children","className","restProps","classNamesString"],"sources":["../../../../src/components/FormStatus/FormStatus.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Banner } from \"../Banner/Banner\";\nimport styles from \"./FormStatus.module.css\";\n\nexport interface FormStatusProps extends React.HTMLAttributes<HTMLDivElement> {\n  mode?: \"default\" | \"error\";\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormStatus\n */\nexport const FormStatus = ({\n  mode,\n  children,\n  className,\n  ...restProps\n}: FormStatusProps) => {\n  return (\n    <Banner\n      {...restProps}\n      subheader={children}\n      className={classNamesString(\n        styles[\"FormStatus\"],\n        mode === \"error\" && styles[\"FormStatus--mode-error\"],\n        className\n      )}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAA0C;AAQ1C;AACA;AACA;AACO,IAAMA,UAAU,GAAG,SAAbA,UAAU,OAKA;EAAA,IAJrBC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,oBACE,oBAAC,cAAM,6BACDA,SAAS;IACb,SAAS,EAAEF,QAAS;IACpB,SAAS,EAAE,IAAAG,4BAAgB,oBAEzBJ,IAAI,KAAK,OAAO,gCAAoC,EACpDE,SAAS;EACT,GACF;AAEN,CAAC;AAAC"}
+{"version":3,"file":"FormStatus.js","names":["FormStatus","mode","children","className","restProps","classNames"],"sources":["../../../../src/components/FormStatus/FormStatus.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Banner } from '../Banner/Banner';\nimport styles from './FormStatus.module.css';\n\nexport interface FormStatusProps extends React.HTMLAttributes<HTMLDivElement> {\n  mode?: 'default' | 'error';\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormStatus\n */\nexport const FormStatus = ({ mode, children, className, ...restProps }: FormStatusProps) => {\n  return (\n    <Banner\n      {...restProps}\n      subheader={children}\n      className={classNames(\n        styles['FormStatus'],\n        mode === 'error' && styles['FormStatus--mode-error'],\n        className,\n      )}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAA0C;AAQ1C;AACA;AACA;AACO,IAAMA,UAAU,GAAG,SAAbA,UAAU,OAAqE;EAAA,IAA/DC,IAAI,QAAJA,IAAI;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAClE,oBACE,oBAAC,cAAM,6BACDA,SAAS;IACb,SAAS,EAAEF,QAAS;IACpB,SAAS,EAAE,IAAAG,gBAAU,oBAEnBJ,IAAI,KAAK,OAAO,gCAAoC,EACpDE,SAAS;EACT,GACF;AAEN,CAAC;AAAC"}

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseGalleryProps } from "../BaseGallery/types";
+import { BaseGalleryProps } from '../BaseGallery/types';
 export interface GalleryProps extends BaseGalleryProps {
     initialSlideIndex?: number;
     timeout?: number;

package/dist/cjs/components/Gallery/Gallery.js

@@ -31,7 +31,7 @@ var Gallery = function Gallery(_ref) {
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     localSlideIndex = _React$useState2[0],
     setSlideIndex = _React$useState2[1];
-  var isControlled = typeof props.slideIndex === "number";
+  var isControlled = typeof props.slideIndex === 'number';
   var slideIndex = isControlled ? (_props$slideIndex = props.slideIndex) !== null && _props$slideIndex !== void 0 ? _props$slideIndex : 0 : localSlideIndex;
   var isDraggable = !isControlled || Boolean(onChange);
   var slides = React.useMemo(function () {

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

@@ -1 +1 @@
-{"version":3,"file":"Gallery.js","names":["Gallery","initialSlideIndex","children","timeout","onChange","bullets","props","React","useState","localSlideIndex","setSlideIndex","isControlled","slideIndex","isDraggable","Boolean","slides","useMemo","Children","toArray","filter","item","childCount","length","handleChange","useCallback","current","autoplay","useTimeout","useEffect","set","clear","safeSlideIndex","clamp"],"sources":["../../../../src/components/Gallery/Gallery.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { clamp } from \"../../helpers/math\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport { BaseGallery } from \"../BaseGallery/BaseGallery\";\nimport { BaseGalleryProps } from \"../BaseGallery/types\";\n\nexport interface GalleryProps extends BaseGalleryProps {\n  initialSlideIndex?: number;\n  timeout?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gallery\n */\nexport const Gallery = ({\n  initialSlideIndex = 0,\n  children,\n  timeout = 0,\n  onChange,\n  bullets,\n  ...props\n}: GalleryProps) => {\n  const [localSlideIndex, setSlideIndex] = React.useState(initialSlideIndex);\n  const isControlled = typeof props.slideIndex === \"number\";\n  const slideIndex = isControlled ? props.slideIndex ?? 0 : localSlideIndex;\n  const isDraggable = !isControlled || Boolean(onChange);\n  const slides = React.useMemo(\n    () => React.Children.toArray(children).filter((item) => Boolean(item)),\n    [children]\n  );\n  const childCount = slides.length;\n\n  const handleChange: GalleryProps[\"onChange\"] = React.useCallback(\n    (current: number) => {\n      if (current === slideIndex) {\n        return;\n      }\n      !isControlled && setSlideIndex(current);\n      onChange && onChange(current);\n    },\n    [isControlled, onChange, slideIndex]\n  );\n\n  const autoplay = useTimeout(\n    () => handleChange((slideIndex + 1) % childCount),\n    timeout\n  );\n  React.useEffect(\n    () => (timeout ? autoplay.set() : autoplay.clear()),\n    [timeout, slideIndex, autoplay]\n  );\n\n  // prevent invalid slideIndex\n  // any slide index is invalid with no slides, just keep it as is\n  const safeSlideIndex =\n    childCount > 0 ? clamp(slideIndex, 0, childCount - 1) : slideIndex;\n  // notify parent in controlled mode\n  React.useEffect(() => {\n    if (onChange && safeSlideIndex !== slideIndex) {\n      onChange(safeSlideIndex);\n    }\n    setSlideIndex(safeSlideIndex);\n  }, [onChange, safeSlideIndex, slideIndex]);\n\n  return (\n    <BaseGallery\n      isDraggable={isDraggable}\n      {...props}\n      bullets={childCount > 0 && bullets}\n      slideIndex={safeSlideIndex}\n      onChange={handleChange}\n    >\n      {slides}\n    </BaseGallery>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AAAyD;AAQzD;AACA;AACA;AACO,IAAMA,OAAO,GAAG,SAAVA,OAAO,OAOA;EAAA;EAAA,iCANlBC,iBAAiB;IAAjBA,iBAAiB,sCAAG,CAAC;IACrBC,QAAQ,QAARA,QAAQ;IAAA,oBACRC,OAAO;IAAPA,OAAO,6BAAG,CAAC;IACXC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACJC,KAAK;EAER,sBAAyCC,KAAK,CAACC,QAAQ,CAACP,iBAAiB,CAAC;IAAA;IAAnEQ,eAAe;IAAEC,aAAa;EACrC,IAAMC,YAAY,GAAG,OAAOL,KAAK,CAACM,UAAU,KAAK,QAAQ;EACzD,IAAMA,UAAU,GAAGD,YAAY,wBAAGL,KAAK,CAACM,UAAU,iEAAI,CAAC,GAAGH,eAAe;EACzE,IAAMI,WAAW,GAAG,CAACF,YAAY,IAAIG,OAAO,CAACV,QAAQ,CAAC;EACtD,IAAMW,MAAM,GAAGR,KAAK,CAACS,OAAO,CAC1B;IAAA,OAAMT,KAAK,CAACU,QAAQ,CAACC,OAAO,CAAChB,QAAQ,CAAC,CAACiB,MAAM,CAAC,UAACC,IAAI;MAAA,OAAKN,OAAO,CAACM,IAAI,CAAC;IAAA,EAAC;EAAA,GACtE,CAAClB,QAAQ,CAAC,CACX;EACD,IAAMmB,UAAU,GAAGN,MAAM,CAACO,MAAM;EAEhC,IAAMC,YAAsC,GAAGhB,KAAK,CAACiB,WAAW,CAC9D,UAACC,OAAe,EAAK;IACnB,IAAIA,OAAO,KAAKb,UAAU,EAAE;MAC1B;IACF;IACA,CAACD,YAAY,IAAID,aAAa,CAACe,OAAO,CAAC;IACvCrB,QAAQ,IAAIA,QAAQ,CAACqB,OAAO,CAAC;EAC/B,CAAC,EACD,CAACd,YAAY,EAAEP,QAAQ,EAAEQ,UAAU,CAAC,CACrC;EAED,IAAMc,QAAQ,GAAG,IAAAC,sBAAU,EACzB;IAAA,OAAMJ,YAAY,CAAC,CAACX,UAAU,GAAG,CAAC,IAAIS,UAAU,CAAC;EAAA,GACjDlB,OAAO,CACR;EACDI,KAAK,CAACqB,SAAS,CACb;IAAA,OAAOzB,OAAO,GAAGuB,QAAQ,CAACG,GAAG,EAAE,GAAGH,QAAQ,CAACI,KAAK,EAAE;EAAA,CAAC,EACnD,CAAC3B,OAAO,EAAES,UAAU,EAAEc,QAAQ,CAAC,CAChC;;EAED;EACA;EACA,IAAMK,cAAc,GAClBV,UAAU,GAAG,CAAC,GAAG,IAAAW,WAAK,EAACpB,UAAU,EAAE,CAAC,EAAES,UAAU,GAAG,CAAC,CAAC,GAAGT,UAAU;EACpE;EACAL,KAAK,CAACqB,SAAS,CAAC,YAAM;IACpB,IAAIxB,QAAQ,IAAI2B,cAAc,KAAKnB,UAAU,EAAE;MAC7CR,QAAQ,CAAC2B,cAAc,CAAC;IAC1B;IACArB,aAAa,CAACqB,cAAc,CAAC;EAC/B,CAAC,EAAE,CAAC3B,QAAQ,EAAE2B,cAAc,EAAEnB,UAAU,CAAC,CAAC;EAE1C,oBACE,oBAAC,wBAAW;IACV,WAAW,EAAEC;EAAY,GACrBP,KAAK;IACT,OAAO,EAAEe,UAAU,GAAG,CAAC,IAAIhB,OAAQ;IACnC,UAAU,EAAE0B,cAAe;IAC3B,QAAQ,EAAER;EAAa,IAEtBR,MAAM,CACK;AAElB,CAAC;AAAC"}
+{"version":3,"file":"Gallery.js","names":["Gallery","initialSlideIndex","children","timeout","onChange","bullets","props","React","useState","localSlideIndex","setSlideIndex","isControlled","slideIndex","isDraggable","Boolean","slides","useMemo","Children","toArray","filter","item","childCount","length","handleChange","useCallback","current","autoplay","useTimeout","useEffect","set","clear","safeSlideIndex","clamp"],"sources":["../../../../src/components/Gallery/Gallery.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { BaseGallery } from '../BaseGallery/BaseGallery';\nimport { BaseGalleryProps } from '../BaseGallery/types';\n\nexport interface GalleryProps extends BaseGalleryProps {\n  initialSlideIndex?: number;\n  timeout?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gallery\n */\nexport const Gallery = ({\n  initialSlideIndex = 0,\n  children,\n  timeout = 0,\n  onChange,\n  bullets,\n  ...props\n}: GalleryProps) => {\n  const [localSlideIndex, setSlideIndex] = React.useState(initialSlideIndex);\n  const isControlled = typeof props.slideIndex === 'number';\n  const slideIndex = isControlled ? props.slideIndex ?? 0 : localSlideIndex;\n  const isDraggable = !isControlled || Boolean(onChange);\n  const slides = React.useMemo(\n    () => React.Children.toArray(children).filter((item) => Boolean(item)),\n    [children],\n  );\n  const childCount = slides.length;\n\n  const handleChange: GalleryProps['onChange'] = React.useCallback(\n    (current: number) => {\n      if (current === slideIndex) {\n        return;\n      }\n      !isControlled && setSlideIndex(current);\n      onChange && onChange(current);\n    },\n    [isControlled, onChange, slideIndex],\n  );\n\n  const autoplay = useTimeout(() => handleChange((slideIndex + 1) % childCount), timeout);\n  React.useEffect(\n    () => (timeout ? autoplay.set() : autoplay.clear()),\n    [timeout, slideIndex, autoplay],\n  );\n\n  // prevent invalid slideIndex\n  // any slide index is invalid with no slides, just keep it as is\n  const safeSlideIndex = childCount > 0 ? clamp(slideIndex, 0, childCount - 1) : slideIndex;\n  // notify parent in controlled mode\n  React.useEffect(() => {\n    if (onChange && safeSlideIndex !== slideIndex) {\n      onChange(safeSlideIndex);\n    }\n    setSlideIndex(safeSlideIndex);\n  }, [onChange, safeSlideIndex, slideIndex]);\n\n  return (\n    <BaseGallery\n      isDraggable={isDraggable}\n      {...props}\n      bullets={childCount > 0 && bullets}\n      slideIndex={safeSlideIndex}\n      onChange={handleChange}\n    >\n      {slides}\n    </BaseGallery>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AAAyD;AAQzD;AACA;AACA;AACO,IAAMA,OAAO,GAAG,SAAVA,OAAO,OAOA;EAAA;EAAA,iCANlBC,iBAAiB;IAAjBA,iBAAiB,sCAAG,CAAC;IACrBC,QAAQ,QAARA,QAAQ;IAAA,oBACRC,OAAO;IAAPA,OAAO,6BAAG,CAAC;IACXC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACJC,KAAK;EAER,sBAAyCC,KAAK,CAACC,QAAQ,CAACP,iBAAiB,CAAC;IAAA;IAAnEQ,eAAe;IAAEC,aAAa;EACrC,IAAMC,YAAY,GAAG,OAAOL,KAAK,CAACM,UAAU,KAAK,QAAQ;EACzD,IAAMA,UAAU,GAAGD,YAAY,wBAAGL,KAAK,CAACM,UAAU,iEAAI,CAAC,GAAGH,eAAe;EACzE,IAAMI,WAAW,GAAG,CAACF,YAAY,IAAIG,OAAO,CAACV,QAAQ,CAAC;EACtD,IAAMW,MAAM,GAAGR,KAAK,CAACS,OAAO,CAC1B;IAAA,OAAMT,KAAK,CAACU,QAAQ,CAACC,OAAO,CAAChB,QAAQ,CAAC,CAACiB,MAAM,CAAC,UAACC,IAAI;MAAA,OAAKN,OAAO,CAACM,IAAI,CAAC;IAAA,EAAC;EAAA,GACtE,CAAClB,QAAQ,CAAC,CACX;EACD,IAAMmB,UAAU,GAAGN,MAAM,CAACO,MAAM;EAEhC,IAAMC,YAAsC,GAAGhB,KAAK,CAACiB,WAAW,CAC9D,UAACC,OAAe,EAAK;IACnB,IAAIA,OAAO,KAAKb,UAAU,EAAE;MAC1B;IACF;IACA,CAACD,YAAY,IAAID,aAAa,CAACe,OAAO,CAAC;IACvCrB,QAAQ,IAAIA,QAAQ,CAACqB,OAAO,CAAC;EAC/B,CAAC,EACD,CAACd,YAAY,EAAEP,QAAQ,EAAEQ,UAAU,CAAC,CACrC;EAED,IAAMc,QAAQ,GAAG,IAAAC,sBAAU,EAAC;IAAA,OAAMJ,YAAY,CAAC,CAACX,UAAU,GAAG,CAAC,IAAIS,UAAU,CAAC;EAAA,GAAElB,OAAO,CAAC;EACvFI,KAAK,CAACqB,SAAS,CACb;IAAA,OAAOzB,OAAO,GAAGuB,QAAQ,CAACG,GAAG,EAAE,GAAGH,QAAQ,CAACI,KAAK,EAAE;EAAA,CAAC,EACnD,CAAC3B,OAAO,EAAES,UAAU,EAAEc,QAAQ,CAAC,CAChC;;EAED;EACA;EACA,IAAMK,cAAc,GAAGV,UAAU,GAAG,CAAC,GAAG,IAAAW,WAAK,EAACpB,UAAU,EAAE,CAAC,EAAES,UAAU,GAAG,CAAC,CAAC,GAAGT,UAAU;EACzF;EACAL,KAAK,CAACqB,SAAS,CAAC,YAAM;IACpB,IAAIxB,QAAQ,IAAI2B,cAAc,KAAKnB,UAAU,EAAE;MAC7CR,QAAQ,CAAC2B,cAAc,CAAC;IAC1B;IACArB,aAAa,CAACqB,cAAc,CAAC;EAC/B,CAAC,EAAE,CAAC3B,QAAQ,EAAE2B,cAAc,EAAEnB,UAAU,CAAC,CAAC;EAE1C,oBACE,oBAAC,wBAAW;IACV,WAAW,EAAEC;EAAY,GACrBP,KAAK;IACT,OAAO,EAAEe,UAAU,GAAG,CAAC,IAAIhB,OAAQ;IACnC,UAAU,EAAE0B,cAAe;IAC3B,QAAQ,EAAER;EAAa,IAEtBR,MAAM,CACK;AAElB,CAAC;AAAC"}

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

@@ -1,13 +1,13 @@
-import * as React from "react";
+import * as React from 'react';
 export interface GradientProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Тип градиента
      */
-    mode?: "tint" | "white" | "black";
+    mode?: 'tint' | 'white' | 'black';
     /**
      * Направление градиента
      */
-    to?: "top" | "bottom";
+    to?: 'top' | 'bottom';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Gradient

package/dist/cjs/components/Gradient/Gradient.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"Gradient.js","names":["Gradient","mode","children","to","className","restProps","classNamesString","styles"],"sources":["../../../../src/components/Gradient/Gradient.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport styles from \"./Gradient.module.css\";\n\nexport interface GradientProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Тип градиента\n   */\n  mode?: \"tint\" | \"white\" | \"black\";\n  /**\n   * Направление градиента\n   */\n  to?: \"top\" | \"bottom\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gradient\n */\nexport const Gradient = ({\n  mode = \"tint\",\n  children,\n  to = \"top\",\n  className,\n  ...restProps\n}: GradientProps) => {\n  return (\n    <div\n      role=\"presentation\"\n      {...restProps}\n      className={classNamesString(\n        styles[\"Gradient\"],\n        styles[`Gradient--mode-${mode}`],\n        styles[`Gradient--to-${to}`],\n        className\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAAwD;AAcxD;AACA;AACA;AACO,IAAMA,QAAQ,GAAG,SAAXA,QAAQ,OAMA;EAAA,qBALnBC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IACbC,QAAQ,QAARA,QAAQ;IAAA,eACRC,EAAE;IAAFA,EAAE,wBAAG,KAAK;IACVC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,oBACE;IACE,IAAI,EAAC;EAAc,GACfA,SAAS;IACb,SAAS,EAAE,IAAAC,4BAAgB,kBAEzBC,MAAM,0BAAmBN,IAAI,EAAG,EAChCM,MAAM,wBAAiBJ,EAAE,EAAG,EAC5BC,SAAS;EACT,IAEDF,QAAQ,CACL;AAEV,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"Gradient.js","names":["Gradient","mode","children","to","className","restProps","classNames","styles"],"sources":["../../../../src/components/Gradient/Gradient.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Gradient.module.css';\n\nexport interface GradientProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Тип градиента\n   */\n  mode?: 'tint' | 'white' | 'black';\n  /**\n   * Направление градиента\n   */\n  to?: 'top' | 'bottom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gradient\n */\nexport const Gradient = ({\n  mode = 'tint',\n  children,\n  to = 'top',\n  className,\n  ...restProps\n}: GradientProps) => {\n  return (\n    <div\n      role=\"presentation\"\n      {...restProps}\n      className={classNames(\n        styles['Gradient'],\n        styles[`Gradient--mode-${mode}`],\n        styles[`Gradient--to-${to}`],\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAA6C;AAc7C;AACA;AACA;AACO,IAAMA,QAAQ,GAAG,SAAXA,QAAQ,OAMA;EAAA,qBALnBC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IACbC,QAAQ,QAARA,QAAQ;IAAA,eACRC,EAAE;IAAFA,EAAE,wBAAG,KAAK;IACVC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,oBACE;IACE,IAAI,EAAC;EAAc,GACfA,SAAS;IACb,SAAS,EAAE,IAAAC,gBAAU,kBAEnBC,MAAM,0BAAmBN,IAAI,EAAG,EAChCM,MAAM,wBAAiBJ,EAAE,EAAG,EAC5BC,SAAS;EACT,IAEDF,QAAQ,CACL;AAEV,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

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

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { type ImageBaseProps } from "../ImageBase/ImageBase";
-import { type GridAvatarBadgeProps } from "./GridAvatarBadge/GridAvatarBadge";
+import { type ImageBaseProps } from '../ImageBase/ImageBase';
+import { type GridAvatarBadgeProps } from './GridAvatarBadge/GridAvatarBadge';
 export { GridAvatarBadgeProps };
 export declare const GRID_AVATAR_DEFAULT_SIZE = 48;
 export declare const MAX_GRID_LENGTH = 4;
-export interface GridAvatarProps extends Omit<ImageBaseProps, "src" | "fallbackIcon"> {
+export interface GridAvatarProps extends Omit<ImageBaseProps, 'src' | 'fallbackIcon'> {
     /**
      * Массив со ссылками. От 1 до 4 элементов.
      */

package/dist/cjs/components/GridAvatar/GridAvatar.js

@@ -9,7 +9,7 @@ exports.MAX_GRID_LENGTH = exports.GridAvatar = exports.GRID_AVATAR_DEFAULT_SIZE
 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 _warnOnce = require("../../lib/warnOnce");
 var _ImageBase = require("../ImageBase/ImageBase");
 var _GridAvatarBadge = require("./GridAvatarBadge/GridAvatarBadge");
@@ -18,7 +18,7 @@ var GRID_AVATAR_DEFAULT_SIZE = 48;
 exports.GRID_AVATAR_DEFAULT_SIZE = GRID_AVATAR_DEFAULT_SIZE;
 var MAX_GRID_LENGTH = 4;
 exports.MAX_GRID_LENGTH = MAX_GRID_LENGTH;
-var warn = (0, _warnOnce.warnOnce)("GridAvatar");
+var warn = (0, _warnOnce.warnOnce)('GridAvatar');
 
 /**
  * @see https://vkcom.github.io/VKUI/#/GridAvatar
@@ -31,17 +31,17 @@ var GridAvatar = function GridAvatar(_ref) {
     className = _ref.className,
     children = _ref.children,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  if (process.env.NODE_ENV === "development") {
+  if (process.env.NODE_ENV === 'development') {
     if (src.length > MAX_GRID_LENGTH) {
-      warn("\u0414\u043B\u0438\u043D\u0430 \u043C\u0430\u0441\u0441\u0438\u0432\u0430 src (".concat(src.length, ") \u0431\u043E\u043B\u044C\u0448\u0435 \u043C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u043E\u0439 (").concat(MAX_GRID_LENGTH, ")"), "error");
+      warn("\u0414\u043B\u0438\u043D\u0430 \u043C\u0430\u0441\u0441\u0438\u0432\u0430 src (".concat(src.length, ") \u0431\u043E\u043B\u044C\u0448\u0435 \u043C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u043E\u0439 (").concat(MAX_GRID_LENGTH, ")"), 'error');
     }
   }
   return /*#__PURE__*/React.createElement(_ImageBase.ImageBase, (0, _extends2.default)({}, restProps, {
     size: size,
-    className: (0, _classNames.classNamesString)("vkuiGridAvatar", className)
+    className: (0, _vkjs.classNames)("vkuiGridAvatar", className)
   }), /*#__PURE__*/React.createElement("div", {
     className: "vkuiGridAvatar__in",
-    "aria-hidden": "true"
+    "aria-hidden": true
   }, src.map(function (url, index) {
     return index < MAX_GRID_LENGTH ? /*#__PURE__*/React.createElement("div", {
       key: url,

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

@@ -1 +1 @@
-{"version":3,"file":"GridAvatar.js","names":["GRID_AVATAR_DEFAULT_SIZE","MAX_GRID_LENGTH","warn","warnOnce","GridAvatar","src","size","className","children","restProps","process","env","NODE_ENV","length","classNamesString","map","url","index","backgroundImage","Badge","GridAvatarBadge"],"sources":["../../../../src/components/GridAvatar/GridAvatar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { type ImageBaseProps, ImageBase } from \"../ImageBase/ImageBase\";\nimport {\n  type GridAvatarBadgeProps,\n  GridAvatarBadge,\n} from \"./GridAvatarBadge/GridAvatarBadge\";\nimport styles from \"./GridAvatar.module.css\";\n\nexport { GridAvatarBadgeProps };\n\nexport const GRID_AVATAR_DEFAULT_SIZE = 48;\n\nexport const MAX_GRID_LENGTH = 4;\n\nexport interface GridAvatarProps\n  extends Omit<ImageBaseProps, \"src\" | \"fallbackIcon\"> {\n  /**\n   * Массив со ссылками. От 1 до 4 элементов.\n   */\n  src?: string[];\n}\n\nconst warn = warnOnce(\"GridAvatar\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/GridAvatar\n */\nexport const GridAvatar = ({\n  src = [],\n  size = GRID_AVATAR_DEFAULT_SIZE,\n  className,\n  children,\n  ...restProps\n}: GridAvatarProps) => {\n  if (process.env.NODE_ENV === \"development\") {\n    if (src.length > MAX_GRID_LENGTH) {\n      warn(\n        `Длина массива src (${src.length}) больше максимальной (${MAX_GRID_LENGTH})`,\n        \"error\"\n      );\n    }\n  }\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      className={classNamesString(styles[\"GridAvatar\"], className)}\n    >\n      <div className={styles[\"GridAvatar__in\"]} aria-hidden=\"true\">\n        {src.map((url, index) =>\n          index < MAX_GRID_LENGTH ? (\n            <div\n              key={url}\n              className={styles[\"GridAvatar__item\"]}\n              style={{ backgroundImage: `url(${url})` }}\n            />\n          ) : null\n        )}\n      </div>\n      {children}\n    </ImageBase>\n  );\n};\n\nGridAvatar.Badge = GridAvatarBadge;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAG2C;AAKpC,IAAMA,wBAAwB,GAAG,EAAE;AAAC;AAEpC,IAAMC,eAAe,GAAG,CAAC;AAAC;AAUjC,IAAMC,IAAI,GAAG,IAAAC,kBAAQ,EAAC,YAAY,CAAC;;AAEnC;AACA;AACA;AACO,IAAMC,UAAU,GAAG,SAAbA,UAAU,OAMA;EAAA,oBALrBC,GAAG;IAAHA,GAAG,yBAAG,EAAE;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAGN,wBAAwB;IAC/BO,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACLC,SAAS;EAEZ,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAIP,GAAG,CAACQ,MAAM,GAAGZ,eAAe,EAAE;MAChCC,IAAI,0FACoBG,GAAG,CAACQ,MAAM,8HAA0BZ,eAAe,QACzE,OAAO,CACR;IACH;EACF;EAEA,oBACE,oBAAC,oBAAS,6BACJQ,SAAS;IACb,IAAI,EAAEH,IAAK;IACX,SAAS,EAAE,IAAAQ,4BAAgB,oBAAuBP,SAAS;EAAE,iBAE7D;IAAK,SAAS,sBAA2B;IAAC,eAAY;EAAM,GACzDF,GAAG,CAACU,GAAG,CAAC,UAACC,GAAG,EAAEC,KAAK;IAAA,OAClBA,KAAK,GAAGhB,eAAe,gBACrB;MACE,GAAG,EAAEe,GAAI;MACT,SAAS,wBAA6B;MACtC,KAAK,EAAE;QAAEE,eAAe,gBAASF,GAAG;MAAI;IAAE,EAC1C,GACA,IAAI;EAAA,EACT,CACG,EACLR,QAAQ,CACC;AAEhB,CAAC;AAAC;AAEFJ,UAAU,CAACe,KAAK,GAAGC,gCAAe"}
+{"version":3,"file":"GridAvatar.js","names":["GRID_AVATAR_DEFAULT_SIZE","MAX_GRID_LENGTH","warn","warnOnce","GridAvatar","src","size","className","children","restProps","process","env","NODE_ENV","length","classNames","map","url","index","backgroundImage","Badge","GridAvatarBadge"],"sources":["../../../../src/components/GridAvatar/GridAvatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { type ImageBaseProps, ImageBase } from '../ImageBase/ImageBase';\nimport { type GridAvatarBadgeProps, GridAvatarBadge } from './GridAvatarBadge/GridAvatarBadge';\nimport styles from './GridAvatar.module.css';\n\nexport { GridAvatarBadgeProps };\n\nexport const GRID_AVATAR_DEFAULT_SIZE = 48;\n\nexport const MAX_GRID_LENGTH = 4;\n\nexport interface GridAvatarProps extends Omit<ImageBaseProps, 'src' | 'fallbackIcon'> {\n  /**\n   * Массив со ссылками. От 1 до 4 элементов.\n   */\n  src?: string[];\n}\n\nconst warn = warnOnce('GridAvatar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/GridAvatar\n */\nexport const GridAvatar = ({\n  src = [],\n  size = GRID_AVATAR_DEFAULT_SIZE,\n  className,\n  children,\n  ...restProps\n}: GridAvatarProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    if (src.length > MAX_GRID_LENGTH) {\n      warn(`Длина массива src (${src.length}) больше максимальной (${MAX_GRID_LENGTH})`, 'error');\n    }\n  }\n\n  return (\n    <ImageBase {...restProps} size={size} className={classNames(styles['GridAvatar'], className)}>\n      <div className={styles['GridAvatar__in']} aria-hidden>\n        {src.map((url, index) =>\n          index < MAX_GRID_LENGTH ? (\n            <div\n              key={url}\n              className={styles['GridAvatar__item']}\n              style={{ backgroundImage: `url(${url})` }}\n            />\n          ) : null,\n        )}\n      </div>\n      {children}\n    </ImageBase>\n  );\n};\n\nGridAvatar.Badge = GridAvatarBadge;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAA+F;AAKxF,IAAMA,wBAAwB,GAAG,EAAE;AAAC;AAEpC,IAAMC,eAAe,GAAG,CAAC;AAAC;AASjC,IAAMC,IAAI,GAAG,IAAAC,kBAAQ,EAAC,YAAY,CAAC;;AAEnC;AACA;AACA;AACO,IAAMC,UAAU,GAAG,SAAbA,UAAU,OAMA;EAAA,oBALrBC,GAAG;IAAHA,GAAG,yBAAG,EAAE;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAGN,wBAAwB;IAC/BO,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACLC,SAAS;EAEZ,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAIP,GAAG,CAACQ,MAAM,GAAGZ,eAAe,EAAE;MAChCC,IAAI,0FAAuBG,GAAG,CAACQ,MAAM,8HAA0BZ,eAAe,QAAK,OAAO,CAAC;IAC7F;EACF;EAEA,oBACE,oBAAC,oBAAS,6BAAKQ,SAAS;IAAE,IAAI,EAAEH,IAAK;IAAC,SAAS,EAAE,IAAAQ,gBAAU,oBAAuBP,SAAS;EAAE,iBAC3F;IAAK,SAAS,sBAA2B;IAAC;EAAW,GAClDF,GAAG,CAACU,GAAG,CAAC,UAACC,GAAG,EAAEC,KAAK;IAAA,OAClBA,KAAK,GAAGhB,eAAe,gBACrB;MACE,GAAG,EAAEe,GAAI;MACT,SAAS,wBAA6B;MACtC,KAAK,EAAE;QAAEE,eAAe,gBAASF,GAAG;MAAI;IAAE,EAC1C,GACA,IAAI;EAAA,EACT,CACG,EACLR,QAAQ,CACC;AAEhB,CAAC;AAAC;AAEFJ,UAAU,CAACe,KAAK,GAAGC,gCAAe"}

package/dist/cjs/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.d.ts

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

package/dist/cjs/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.js

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

package/dist/cjs/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridAvatarBadge.js","names":["GridAvatarBadge","className","restProps","React","useContext","ImageBaseContext","size","classNamesString"],"sources":["../../../../../src/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.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 \"./GridAvatarBadge.module.css\";\n\nexport type GridAvatarBadgeProps = ImageBaseBadgeProps;\n\nexport const GridAvatarBadge = ({\n  className,\n  ...restProps\n}: GridAvatarBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNamesString(\n        styles[\"GridAvatarBadge\"],\n        size < 96 && styles[\"GridAvatarBadge--shifted\"],\n        className\n      )}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAImC;AAK5B,IAAMA,eAAe,GAAG,SAAlBA,eAAe,OAGA;EAAA,IAF1BC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,wBAAiBC,KAAK,CAACC,UAAU,CAACC,2BAAgB,CAAC;IAA3CC,IAAI,qBAAJA,IAAI;EACZ,oBACE,oBAAC,oBAAS,CAAC,KAAK,6BACVJ,SAAS;IACb,SAAS,EAAE,IAAAK,4BAAgB,yBAEzBD,IAAI,GAAG,EAAE,kCAAsC,EAC/CL,SAAS;EACT,GACF;AAEN,CAAC;AAAC"}
+{"version":3,"file":"GridAvatarBadge.js","names":["GridAvatarBadge","className","restProps","React","useContext","ImageBaseContext","size","classNames"],"sources":["../../../../../src/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type ImageBaseBadgeProps, ImageBase, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './GridAvatarBadge.module.css';\n\nexport type GridAvatarBadgeProps = ImageBaseBadgeProps;\n\nexport const GridAvatarBadge = ({ className, ...restProps }: GridAvatarBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(\n        styles['GridAvatarBadge'],\n        size < 96 && styles['GridAvatarBadge--shifted'],\n        className,\n      )}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAAkG;AAK3F,IAAMA,eAAe,GAAG,SAAlBA,eAAe,OAA0D;EAAA,IAApDC,SAAS,QAATA,SAAS;IAAKC,SAAS;EACvD,wBAAiBC,KAAK,CAACC,UAAU,CAACC,2BAAgB,CAAC;IAA3CC,IAAI,qBAAJA,IAAI;EACZ,oBACE,oBAAC,oBAAS,CAAC,KAAK,6BACVJ,SAAS;IACb,SAAS,EAAE,IAAAK,gBAAU,yBAEnBD,IAAI,GAAG,EAAE,kCAAsC,EAC/CL,SAAS;EACT,GACF;AAEN,CAAC;AAAC"}

package/dist/cjs/components/Group/Group.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 GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttributes<HTMLElement> {
     header?: React.ReactNode;
     description?: React.ReactNode;
@@ -8,18 +8,18 @@ export interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttribute
       hide - разделитель всегда спрятан,
       auto - разделитель рисуется автоматически между соседними группами.
      */
-    separator?: "show" | "hide" | "auto";
+    separator?: 'show' | 'hide' | 'auto';
     /**
      * Режим отображения. Если установлен 'card', выглядит как карточка c
      * обводкой и внешними отступами. Если 'plain' — без отступов и обводки.
      * По умолчанию режим отображения зависит от `sizeX`. В модальных окнах
      * по умолчанию 'plain'.
      */
-    mode?: "plain" | "card";
+    mode?: 'plain' | 'card';
     /**
      * Отвечает за отступы вокруг контента в режиме 'card'.
      */
-    padding?: "s" | "m";
+    padding?: 's' | 'm';
     children?: React.ReactNode;
 }
 export declare const Group: ({ header, description, children, separator, getRootRef, mode: modeProps, padding, className, tabIndex: tabIndexProp, ...restProps }: GroupProps) => JSX.Element;

package/dist/cjs/components/Group/Group.js

@@ -10,28 +10,27 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _platform = require("../../lib/platform");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _usePlatform = require("../../hooks/usePlatform");
 var _Spacing = require("../Spacing/Spacing");
 var _Separator = require("../Separator/Separator");
-var _utils = require("../../lib/utils");
 var _Footnote = require("../Typography/Footnote/Footnote");
 var _warnOnce = require("../../lib/warnOnce");
 var _ModalRootContext = require("../ModalRoot/ModalRootContext");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
 var _getSizeXClassName = require("../../helpers/getSizeXClassName");
 var _excluded = ["header", "description", "children", "separator", "getRootRef", "mode", "padding", "className", "tabIndex"];
-var warn = (0, _warnOnce.warnOnce)("TabsItem");
+var warn = (0, _warnOnce.warnOnce)('TabsItem');
 var Group = function Group(_ref) {
   var header = _ref.header,
     description = _ref.description,
     children = _ref.children,
     _ref$separator = _ref.separator,
-    separator = _ref$separator === void 0 ? "auto" : _ref$separator,
+    separator = _ref$separator === void 0 ? 'auto' : _ref$separator,
     getRootRef = _ref.getRootRef,
     modeProps = _ref.mode,
     _ref$padding = _ref.padding,
-    padding = _ref$padding === void 0 ? "m" : _ref$padding,
+    padding = _ref$padding === void 0 ? 'm' : _ref$padding,
     className = _ref.className,
     tabIndexProp = _ref.tabIndex,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -43,27 +42,27 @@ var Group = function Group(_ref) {
   var mode = modeProps;
   if (!modeProps) {
     // Подробнее в "none" можно прочитать в ADAPTIVITY_GUIDE.md
-    mode = isInsideModal ? "plain" : "none";
+    mode = isInsideModal ? 'plain' : 'none';
   }
-  var isTabPanel = restProps.role === "tabpanel";
-  if (process.env.NODE_ENV === "development" && isTabPanel && (!restProps["aria-controls"] || !restProps["id"])) {
+  var isTabPanel = restProps.role === 'tabpanel';
+  if (process.env.NODE_ENV === 'development' && isTabPanel && (!restProps['aria-controls'] || !restProps['id'])) {
     warn('При использовании роли "tabpanel" необходимо задать значение свойств "aria-controls" и "id"');
   }
   var tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;
-  var separatorClassName = (0, _classNames.classNamesString)("vkuiGroup__separator", separator === "show" && "vkuiGroup__separator--force");
+  var separatorClassName = (0, _vkjs.classNames)("vkuiGroup__separator", separator === 'show' && "vkuiGroup__separator--force");
   return /*#__PURE__*/React.createElement("section", (0, _extends2.default)({}, restProps, {
     tabIndex: tabIndex,
     ref: getRootRef,
-    className: (0, _classNames.classNamesString)("vkuiGroup", platform === _platform.Platform.IOS && "vkuiGroup--ios", (0, _getSizeXClassName.getSizeXClassName)("vkuiGroup", sizeX), mode && styles["Group--mode-".concat(mode)], styles["Group--padding-".concat(padding)], className)
+    className: (0, _vkjs.classNames)("vkuiGroup", platform === _platform.Platform.IOS && "vkuiGroup--ios", (0, _getSizeXClassName.getSizeXClassName)("vkuiGroup", sizeX), mode && styles["Group--mode-".concat(mode)], styles["Group--padding-".concat(padding)], className)
   }), /*#__PURE__*/React.createElement("div", {
     className: "vkuiGroup__inner"
-  }, header, children, (0, _utils.hasReactNode)(description) && /*#__PURE__*/React.createElement(_Footnote.Footnote, {
+  }, header, children, (0, _vkjs.hasReactNode)(description) && /*#__PURE__*/React.createElement(_Footnote.Footnote, {
     className: "vkuiGroup__description"
-  }, description)), separator !== "hide" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Spacing.Spacing, {
-    className: (0, _classNames.classNamesString)(separatorClassName, "vkuiGroup__separator--spacing"),
+  }, description)), separator !== 'hide' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Spacing.Spacing, {
+    className: (0, _vkjs.classNames)(separatorClassName, "vkuiGroup__separator--spacing"),
     size: 16
   }), /*#__PURE__*/React.createElement(_Separator.Separator, {
-    className: (0, _classNames.classNamesString)(separatorClassName, "vkuiGroup__separator--separator")
+    className: (0, _vkjs.classNames)(separatorClassName, "vkuiGroup__separator--separator")
   })));
 };
 exports.Group = Group;

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

@@ -1 +1 @@
-{"version":3,"file":"Group.js","names":["warn","warnOnce","Group","header","description","children","separator","getRootRef","modeProps","mode","padding","className","tabIndexProp","tabIndex","restProps","React","useContext","ModalRootContext","isInsideModal","platform","usePlatform","useAdaptivity","sizeX","isTabPanel","role","process","env","NODE_ENV","undefined","separatorClassName","classNamesString","Platform","IOS","getSizeXClassName","styles","hasReactNode"],"sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Platform } from \"../../lib/platform\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { HasRootRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { Spacing } from \"../Spacing/Spacing\";\nimport { Separator } from \"../Separator/Separator\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { ModalRootContext } from \"../ModalRoot/ModalRootContext\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { getSizeXClassName } from \"../../helpers/getSizeXClassName\";\nimport styles from \"./Group.module.css\";\n\nexport interface GroupProps\n  extends HasRootRef<HTMLElement>,\n    React.HTMLAttributes<HTMLElement> {\n  header?: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n    show - разделитель всегда показывается,\n    hide - разделитель всегда спрятан,\n    auto - разделитель рисуется автоматически между соседними группами.\n   */\n  separator?: \"show\" | \"hide\" | \"auto\";\n  /**\n   * Режим отображения. Если установлен 'card', выглядит как карточка c\n   * обводкой и внешними отступами. Если 'plain' — без отступов и обводки.\n   * По умолчанию режим отображения зависит от `sizeX`. В модальных окнах\n   * по умолчанию 'plain'.\n   */\n  mode?: \"plain\" | \"card\";\n  /**\n   * Отвечает за отступы вокруг контента в режиме 'card'.\n   */\n  padding?: \"s\" | \"m\";\n  children?: React.ReactNode;\n}\n\nconst warn = warnOnce(\"TabsItem\");\n\nexport const Group = ({\n  header,\n  description,\n  children,\n  separator = \"auto\",\n  getRootRef,\n  mode: modeProps,\n  padding = \"m\",\n  className,\n  tabIndex: tabIndexProp,\n  ...restProps\n}: GroupProps) => {\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n  const { sizeX } = useAdaptivity();\n\n  let mode: GroupProps[\"mode\"] | \"none\" = modeProps;\n\n  if (!modeProps) {\n    // Подробнее в \"none\" можно прочитать в ADAPTIVITY_GUIDE.md\n    mode = isInsideModal ? \"plain\" : \"none\";\n  }\n\n  const isTabPanel = restProps.role === \"tabpanel\";\n\n  if (\n    process.env.NODE_ENV === \"development\" &&\n    isTabPanel &&\n    (!restProps[\"aria-controls\"] || !restProps[\"id\"])\n  ) {\n    warn(\n      'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"'\n    );\n  }\n\n  const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n  const separatorClassName = classNamesString(\n    styles[\"Group__separator\"],\n    separator === \"show\" && styles[\"Group__separator--force\"]\n  );\n\n  return (\n    <section\n      {...restProps}\n      tabIndex={tabIndex}\n      ref={getRootRef}\n      className={classNamesString(\n        styles[\"Group\"],\n        platform === Platform.IOS && styles[\"Group--ios\"],\n        getSizeXClassName(styles[\"Group\"], sizeX),\n        mode && styles[`Group--mode-${mode}`],\n        styles[`Group--padding-${padding}`],\n        className\n      )}\n    >\n      <div className={styles[\"Group__inner\"]}>\n        {header}\n        {children}\n        {hasReactNode(description) && (\n          <Footnote className={styles[\"Group__description\"]}>\n            {description}\n          </Footnote>\n        )}\n      </div>\n      {separator !== \"hide\" && (\n        <React.Fragment>\n          <Spacing\n            className={classNamesString(\n              separatorClassName,\n              styles[\"Group__separator--spacing\"]\n            )}\n            size={16}\n          />\n          <Separator\n            className={classNamesString(\n              separatorClassName,\n              styles[\"Group__separator--separator\"]\n            )}\n          />\n        </React.Fragment>\n      )}\n    </section>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAoE;AA4BpE,IAAMA,IAAI,GAAG,IAAAC,kBAAQ,EAAC,UAAU,CAAC;AAE1B,IAAMC,KAAK,GAAG,SAARA,KAAK,OAWA;EAAA,IAVhBC,MAAM,QAANA,MAAM;IACNC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IAAA,sBACRC,SAAS;IAATA,SAAS,+BAAG,MAAM;IAClBC,UAAU,QAAVA,UAAU;IACJC,SAAS,QAAfC,IAAI;IAAA,oBACJC,OAAO;IAAPA,OAAO,6BAAG,GAAG;IACbC,SAAS,QAATA,SAAS;IACCC,YAAY,QAAtBC,QAAQ;IACLC,SAAS;EAEZ,wBAA0BC,KAAK,CAACC,UAAU,CAACC,kCAAgB,CAAC;IAApDC,aAAa,qBAAbA,aAAa;EACrB,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EAEb,IAAIb,IAAiC,GAAGD,SAAS;EAEjD,IAAI,CAACA,SAAS,EAAE;IACd;IACAC,IAAI,GAAGS,aAAa,GAAG,OAAO,GAAG,MAAM;EACzC;EAEA,IAAMK,UAAU,GAAGT,SAAS,CAACU,IAAI,KAAK,UAAU;EAEhD,IACEC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,IACtCJ,UAAU,KACT,CAACT,SAAS,CAAC,eAAe,CAAC,IAAI,CAACA,SAAS,CAAC,IAAI,CAAC,CAAC,EACjD;IACAd,IAAI,CACF,6FAA6F,CAC9F;EACH;EAEA,IAAMa,QAAQ,GAAGU,UAAU,IAAIX,YAAY,KAAKgB,SAAS,GAAG,CAAC,GAAGhB,YAAY;EAE5E,IAAMiB,kBAAkB,GAAG,IAAAC,4BAAgB,0BAEzCxB,SAAS,KAAK,MAAM,iCAAqC,CAC1D;EAED,oBACE,0DACMQ,SAAS;IACb,QAAQ,EAAED,QAAS;IACnB,GAAG,EAAEN,UAAW;IAChB,SAAS,EAAE,IAAAuB,4BAAgB,eAEzBX,QAAQ,KAAKY,kBAAQ,CAACC,GAAG,oBAAwB,EACjD,IAAAC,oCAAiB,eAAkBX,KAAK,CAAC,EACzCb,IAAI,IAAIyB,MAAM,uBAAgBzB,IAAI,EAAG,EACrCyB,MAAM,0BAAmBxB,OAAO,EAAG,EACnCC,SAAS;EACT,iBAEF;IAAK,SAAS;EAAyB,GACpCR,MAAM,EACNE,QAAQ,EACR,IAAA8B,mBAAY,EAAC/B,WAAW,CAAC,iBACxB,oBAAC,kBAAQ;IAAC,SAAS;EAA+B,GAC/CA,WAAW,CAEf,CACG,EACLE,SAAS,KAAK,MAAM,iBACnB,oBAAC,KAAK,CAAC,QAAQ,qBACb,oBAAC,gBAAO;IACN,SAAS,EAAE,IAAAwB,4BAAgB,EACzBD,kBAAkB,kCAElB;IACF,IAAI,EAAE;EAAG,EACT,eACF,oBAAC,oBAAS;IACR,SAAS,EAAE,IAAAC,4BAAgB,EACzBD,kBAAkB;EAElB,EACF,CAEL,CACO;AAEd,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"Group.js","names":["warn","warnOnce","Group","header","description","children","separator","getRootRef","modeProps","mode","padding","className","tabIndexProp","tabIndex","restProps","React","useContext","ModalRootContext","isInsideModal","platform","usePlatform","useAdaptivity","sizeX","isTabPanel","role","process","env","NODE_ENV","undefined","separatorClassName","classNames","Platform","IOS","getSizeXClassName","styles","hasReactNode"],"sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Platform } from '../../lib/platform';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Separator } from '../Separator/Separator';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport styles from './Group.module.css';\n\nexport interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttributes<HTMLElement> {\n  header?: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n    show - разделитель всегда показывается,\n    hide - разделитель всегда спрятан,\n    auto - разделитель рисуется автоматически между соседними группами.\n   */\n  separator?: 'show' | 'hide' | 'auto';\n  /**\n   * Режим отображения. Если установлен 'card', выглядит как карточка c\n   * обводкой и внешними отступами. Если 'plain' — без отступов и обводки.\n   * По умолчанию режим отображения зависит от `sizeX`. В модальных окнах\n   * по умолчанию 'plain'.\n   */\n  mode?: 'plain' | 'card';\n  /**\n   * Отвечает за отступы вокруг контента в режиме 'card'.\n   */\n  padding?: 's' | 'm';\n  children?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabsItem');\n\nexport const Group = ({\n  header,\n  description,\n  children,\n  separator = 'auto',\n  getRootRef,\n  mode: modeProps,\n  padding = 'm',\n  className,\n  tabIndex: tabIndexProp,\n  ...restProps\n}: GroupProps) => {\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n  const { sizeX } = useAdaptivity();\n\n  let mode: GroupProps['mode'] | 'none' = modeProps;\n\n  if (!modeProps) {\n    // Подробнее в \"none\" можно прочитать в ADAPTIVITY_GUIDE.md\n    mode = isInsideModal ? 'plain' : 'none';\n  }\n\n  const isTabPanel = restProps.role === 'tabpanel';\n\n  if (\n    process.env.NODE_ENV === 'development' &&\n    isTabPanel &&\n    (!restProps['aria-controls'] || !restProps['id'])\n  ) {\n    warn(\n      'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"',\n    );\n  }\n\n  const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n  const separatorClassName = classNames(\n    styles['Group__separator'],\n    separator === 'show' && styles['Group__separator--force'],\n  );\n\n  return (\n    <section\n      {...restProps}\n      tabIndex={tabIndex}\n      ref={getRootRef}\n      className={classNames(\n        styles['Group'],\n        platform === Platform.IOS && styles['Group--ios'],\n        getSizeXClassName(styles['Group'], sizeX),\n        mode && styles[`Group--mode-${mode}`],\n        styles[`Group--padding-${padding}`],\n        className,\n      )}\n    >\n      <div className={styles['Group__inner']}>\n        {header}\n        {children}\n        {hasReactNode(description) && (\n          <Footnote className={styles['Group__description']}>{description}</Footnote>\n        )}\n      </div>\n      {separator !== 'hide' && (\n        <React.Fragment>\n          <Spacing\n            className={classNames(separatorClassName, styles['Group__separator--spacing'])}\n            size={16}\n          />\n          <Separator\n            className={classNames(separatorClassName, styles['Group__separator--separator'])}\n          />\n        </React.Fragment>\n      )}\n    </section>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAoE;AA0BpE,IAAMA,IAAI,GAAG,IAAAC,kBAAQ,EAAC,UAAU,CAAC;AAE1B,IAAMC,KAAK,GAAG,SAARA,KAAK,OAWA;EAAA,IAVhBC,MAAM,QAANA,MAAM;IACNC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IAAA,sBACRC,SAAS;IAATA,SAAS,+BAAG,MAAM;IAClBC,UAAU,QAAVA,UAAU;IACJC,SAAS,QAAfC,IAAI;IAAA,oBACJC,OAAO;IAAPA,OAAO,6BAAG,GAAG;IACbC,SAAS,QAATA,SAAS;IACCC,YAAY,QAAtBC,QAAQ;IACLC,SAAS;EAEZ,wBAA0BC,KAAK,CAACC,UAAU,CAACC,kCAAgB,CAAC;IAApDC,aAAa,qBAAbA,aAAa;EACrB,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EAEb,IAAIb,IAAiC,GAAGD,SAAS;EAEjD,IAAI,CAACA,SAAS,EAAE;IACd;IACAC,IAAI,GAAGS,aAAa,GAAG,OAAO,GAAG,MAAM;EACzC;EAEA,IAAMK,UAAU,GAAGT,SAAS,CAACU,IAAI,KAAK,UAAU;EAEhD,IACEC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,IACtCJ,UAAU,KACT,CAACT,SAAS,CAAC,eAAe,CAAC,IAAI,CAACA,SAAS,CAAC,IAAI,CAAC,CAAC,EACjD;IACAd,IAAI,CACF,6FAA6F,CAC9F;EACH;EAEA,IAAMa,QAAQ,GAAGU,UAAU,IAAIX,YAAY,KAAKgB,SAAS,GAAG,CAAC,GAAGhB,YAAY;EAE5E,IAAMiB,kBAAkB,GAAG,IAAAC,gBAAU,0BAEnCxB,SAAS,KAAK,MAAM,iCAAqC,CAC1D;EAED,oBACE,0DACMQ,SAAS;IACb,QAAQ,EAAED,QAAS;IACnB,GAAG,EAAEN,UAAW;IAChB,SAAS,EAAE,IAAAuB,gBAAU,eAEnBX,QAAQ,KAAKY,kBAAQ,CAACC,GAAG,oBAAwB,EACjD,IAAAC,oCAAiB,eAAkBX,KAAK,CAAC,EACzCb,IAAI,IAAIyB,MAAM,uBAAgBzB,IAAI,EAAG,EACrCyB,MAAM,0BAAmBxB,OAAO,EAAG,EACnCC,SAAS;EACT,iBAEF;IAAK,SAAS;EAAyB,GACpCR,MAAM,EACNE,QAAQ,EACR,IAAA8B,kBAAY,EAAC/B,WAAW,CAAC,iBACxB,oBAAC,kBAAQ;IAAC,SAAS;EAA+B,GAAEA,WAAW,CAChE,CACG,EACLE,SAAS,KAAK,MAAM,iBACnB,oBAAC,KAAK,CAAC,QAAQ,qBACb,oBAAC,gBAAO;IACN,SAAS,EAAE,IAAAwB,gBAAU,EAACD,kBAAkB,kCAAuC;IAC/E,IAAI,EAAE;EAAG,EACT,eACF,oBAAC,oBAAS;IACR,SAAS,EAAE,IAAAC,gBAAU,EAACD,kBAAkB;EAAyC,EACjF,CAEL,CACO;AAEd,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

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

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasRootRef } from '../../types';
 export interface HeaderProps extends React.HTMLAttributes<HTMLElement>, HasRootRef<HTMLElement> {
-    mode?: "primary" | "secondary" | "tertiary";
+    mode?: 'primary' | 'secondary' | 'tertiary';
     subtitle?: React.ReactNode;
     /**
      * Допускаются иконки, текст, Link