@vkontakte/vkui 4.37.0 → 5.0.0

package/dist/components/Footer/Footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.js","names":["Caption","Footer","children","restProps"],"sources":["../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { HasComponent } from \"../../types\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport \"./Footer.css\";\n\nexport type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Footer\n */\nexport const Footer = ({ children, ...restProps }: FooterProps) => {\n  return (\n    <Caption Component=\"footer\" {...restProps} vkuiClass=\"Footer\">\n      {children}\n    </Caption>\n  );\n};\n"],"mappings":";;;;AAEA,SAASA,OAAT;;AAKA;AACA;AACA;AACA,OAAO,IAAMC,MAAM,GAAG,SAATA,MAAS,OAA6C;EAAA,IAA1CC,QAA0C,QAA1CA,QAA0C;EAAA,IAA7BC,SAA6B;;EACjE,OACE,oBAAC,OAAD;IAAS,SAAS,EAAC;EAAnB,GAAgCA,SAAhC;IAA2C,SAAS,EAAC;EAArD,IACGD,QADH,CADF;AAKD,CANM"}
+{"version":3,"file":"Footer.js","names":["Footnote","Footer","children","restProps"],"sources":["../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { HasComponent } from \"../../types\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport \"./Footer.css\";\n\nexport type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Footer\n */\nexport const Footer = ({ children, ...restProps }: FooterProps) => {\n  return (\n    <Footnote Component=\"footer\" {...restProps} vkuiClass=\"Footer\">\n      {children}\n    </Footnote>\n  );\n};\n"],"mappings":";;;;AAEA,SAASA,QAAT;;AAKA;AACA;AACA;AACA,OAAO,IAAMC,MAAM,GAAG,SAATA,MAAS,OAA6C;EAAA,IAA1CC,QAA0C,QAA1CA,QAA0C;EAAA,IAA7BC,SAA6B;;EACjE,OACE,oBAAC,QAAD;IAAU,SAAS,EAAC;EAApB,GAAiCA,SAAjC;IAA4C,SAAS,EAAC;EAAtD,IACGD,QADH,CADF;AAKD,CANM"}

package/dist/components/FormField/FormField.d.ts

@@ -1,10 +1,6 @@
 import * as React from "react";
 import { HasComponent, HasRootRef } from "../../types";
 import "./FormField.css";
-export declare const FormFieldMode: {
-    readonly default: "default";
-    readonly plain: "plain";
-};
 export interface FormFieldProps {
     status?: "default" | "error" | "valid";
     /**
@@ -25,7 +21,7 @@ export interface FormFieldProps {
      * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.
      */
     after?: React.ReactNode;
-    mode?: keyof typeof FormFieldMode;
+    mode?: "default" | "plain";
 }
 interface FormFieldOwnProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent, FormFieldProps {
     disabled?: boolean;

package/dist/components/FormField/FormField.js

@@ -6,10 +6,7 @@ import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
-export var FormFieldMode = {
-  default: "default",
-  plain: "plain"
-};
+import { getSizeYClassName } from "../../helpers/getSizeYClassName";
 
 /**
  * @see https://vkcom.github.io/VKUI/#/FormField
@@ -25,7 +22,7 @@ export var FormField = function FormField(_ref) {
       after = _ref.after,
       disabled = _ref.disabled,
       _ref$mode = _ref.mode,
-      mode = _ref$mode === void 0 ? FormFieldMode.default : _ref$mode,
+      mode = _ref$mode === void 0 ? "default" : _ref$mode,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
   var _useAdaptivity = useAdaptivity(),
@@ -52,8 +49,7 @@ export var FormField = function FormField(_ref) {
     ref: getRootRef,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
-    vkuiClass: classNames("FormField", "FormField--".concat(mode), "FormField--status-".concat(status), "FormField--sizeY-".concat(sizeY), // TODO v5.0.0 поправить под новую адаптивность
-    disabled && "FormField--disabled", !disabled && hover && "FormField--hover")
+    vkuiClass: classNames("FormField", "FormField--mode-".concat(mode), "FormField--status-".concat(status), getSizeYClassName("FormField", sizeY), disabled && "FormField--disabled", !disabled && hover && "FormField--hover")
   }), before && createScopedElement("div", {
     role: "presentation",
     vkuiClass: "FormField__before"

package/dist/components/FormField/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","names":["React","classNames","useAdaptivity","FormFieldMode","default","plain","FormField","Component","status","children","getRootRef","before","after","disabled","mode","restProps","sizeY","useState","hover","setHover","handleMouseEnter","e","stopPropagation","handleMouseLeave"],"sources":["../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { HasComponent, HasRootRef } from \"../../types\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport \"./FormField.css\";\n\nexport const FormFieldMode = {\n  default: \"default\",\n  plain: \"plain\",\n} as const;\n\nexport interface FormFieldProps {\n  status?: \"default\" | \"error\" | \"valid\";\n  /**\n   * Добавляет иконку слева.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  after?: React.ReactNode;\n  mode?: keyof typeof FormFieldMode;\n}\n\ninterface FormFieldOwnProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    FormFieldProps {\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormField\n */\nexport const FormField = ({\n  Component = \"div\",\n  status = \"default\",\n  children,\n  getRootRef,\n  before,\n  after,\n  disabled,\n  mode = FormFieldMode.default,\n  ...restProps\n}: FormFieldOwnProps) => {\n  const { sizeY } = useAdaptivity();\n  const [hover, setHover] = React.useState(false);\n\n  const handleMouseEnter = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(true);\n  };\n\n  const handleMouseLeave = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(false);\n  };\n\n  return (\n    <Component\n      role=\"presentation\"\n      {...restProps}\n      ref={getRootRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      vkuiClass={classNames(\n        \"FormField\",\n        `FormField--${mode}`,\n        `FormField--status-${status}`,\n        `FormField--sizeY-${sizeY}`, // TODO v5.0.0 поправить под новую адаптивность\n        disabled && \"FormField--disabled\",\n        !disabled && hover && \"FormField--hover\"\n      )}\n    >\n      {before && (\n        <div role=\"presentation\" vkuiClass=\"FormField__before\">\n          {before}\n        </div>\n      )}\n      {children}\n      {after && (\n        <div role=\"presentation\" vkuiClass=\"FormField__after\">\n          {after}\n        </div>\n      )}\n      <div role=\"presentation\" vkuiClass=\"FormField__border\" />\n    </Component>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT;AAEA,SAASC,aAAT;AAGA,OAAO,IAAMC,aAAa,GAAG;EAC3BC,OAAO,EAAE,SADkB;EAE3BC,KAAK,EAAE;AAFoB,CAAtB;;AAoCP;AACA;AACA;AACA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,OAUA;EAAA,0BATvBC,SASuB;EAAA,IATvBA,SASuB,+BATX,KASW;EAAA,uBARvBC,MAQuB;EAAA,IARvBA,MAQuB,4BARd,SAQc;EAAA,IAPvBC,QAOuB,QAPvBA,QAOuB;EAAA,IANvBC,UAMuB,QANvBA,UAMuB;EAAA,IALvBC,MAKuB,QALvBA,MAKuB;EAAA,IAJvBC,KAIuB,QAJvBA,KAIuB;EAAA,IAHvBC,QAGuB,QAHvBA,QAGuB;EAAA,qBAFvBC,IAEuB;EAAA,IAFvBA,IAEuB,0BAFhBX,aAAa,CAACC,OAEE;EAAA,IADpBW,SACoB;;EACvB,qBAAkBb,aAAa,EAA/B;EAAA,IAAQc,KAAR,kBAAQA,KAAR;;EACA,sBAA0BhB,KAAK,CAACiB,QAAN,CAAe,KAAf,CAA1B;EAAA;EAAA,IAAOC,KAAP;EAAA,IAAcC,QAAd;;EAEA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,CAAD,EAAmB;IAC1CA,CAAC,CAACC,eAAF;IACAH,QAAQ,CAAC,IAAD,CAAR;EACD,CAHD;;EAKA,IAAMI,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACF,CAAD,EAAmB;IAC1CA,CAAC,CAACC,eAAF;IACAH,QAAQ,CAAC,KAAD,CAAR;EACD,CAHD;;EAKA,OACE,oBAAC,SAAD;IACE,IAAI,EAAC;EADP,GAEMJ,SAFN;IAGE,GAAG,EAAEL,UAHP;IAIE,YAAY,EAAEU,gBAJhB;IAKE,YAAY,EAAEG,gBALhB;IAME,SAAS,EAAEtB,UAAU,CACnB,WADmB,uBAELa,IAFK,+BAGEN,MAHF,8BAICQ,KAJD,GAIU;IAC7BH,QAAQ,IAAI,qBALO,EAMnB,CAACA,QAAD,IAAaK,KAAb,IAAsB,kBANH;EANvB,IAeGP,MAAM,IACL;IAAK,IAAI,EAAC,cAAV;IAAyB,SAAS,EAAC;EAAnC,GACGA,MADH,CAhBJ,EAoBGF,QApBH,EAqBGG,KAAK,IACJ;IAAK,IAAI,EAAC,cAAV;IAAyB,SAAS,EAAC;EAAnC,GACGA,KADH,CAtBJ,EA0BE;IAAK,IAAI,EAAC,cAAV;IAAyB,SAAS,EAAC;EAAnC,EA1BF,CADF;AA8BD,CAtDM"}
+{"version":3,"file":"FormField.js","names":["React","classNames","useAdaptivity","getSizeYClassName","FormField","Component","status","children","getRootRef","before","after","disabled","mode","restProps","sizeY","useState","hover","setHover","handleMouseEnter","e","stopPropagation","handleMouseLeave"],"sources":["../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { HasComponent, HasRootRef } from \"../../types\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport \"./FormField.css\";\n\nexport interface FormFieldProps {\n  status?: \"default\" | \"error\" | \"valid\";\n  /**\n   * Добавляет иконку слева.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  after?: React.ReactNode;\n  mode?: \"default\" | \"plain\";\n}\n\ninterface FormFieldOwnProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    FormFieldProps {\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormField\n */\nexport const FormField = ({\n  Component = \"div\",\n  status = \"default\",\n  children,\n  getRootRef,\n  before,\n  after,\n  disabled,\n  mode = \"default\",\n  ...restProps\n}: FormFieldOwnProps) => {\n  const { sizeY } = useAdaptivity();\n  const [hover, setHover] = React.useState(false);\n\n  const handleMouseEnter = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(true);\n  };\n\n  const handleMouseLeave = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(false);\n  };\n\n  return (\n    <Component\n      role=\"presentation\"\n      {...restProps}\n      ref={getRootRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      vkuiClass={classNames(\n        \"FormField\",\n        `FormField--mode-${mode}`,\n        `FormField--status-${status}`,\n        getSizeYClassName(\"FormField\", sizeY),\n        disabled && \"FormField--disabled\",\n        !disabled && hover && \"FormField--hover\"\n      )}\n    >\n      {before && (\n        <div role=\"presentation\" vkuiClass=\"FormField__before\">\n          {before}\n        </div>\n      )}\n      {children}\n      {after && (\n        <div role=\"presentation\" vkuiClass=\"FormField__after\">\n          {after}\n        </div>\n      )}\n      <div role=\"presentation\" vkuiClass=\"FormField__border\" />\n    </Component>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT;AAEA,SAASC,aAAT;AACA,SAASC,iBAAT;;AAkCA;AACA;AACA;AACA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,OAUA;EAAA,0BATvBC,SASuB;EAAA,IATvBA,SASuB,+BATX,KASW;EAAA,uBARvBC,MAQuB;EAAA,IARvBA,MAQuB,4BARd,SAQc;EAAA,IAPvBC,QAOuB,QAPvBA,QAOuB;EAAA,IANvBC,UAMuB,QANvBA,UAMuB;EAAA,IALvBC,MAKuB,QALvBA,MAKuB;EAAA,IAJvBC,KAIuB,QAJvBA,KAIuB;EAAA,IAHvBC,QAGuB,QAHvBA,QAGuB;EAAA,qBAFvBC,IAEuB;EAAA,IAFvBA,IAEuB,0BAFhB,SAEgB;EAAA,IADpBC,SACoB;;EACvB,qBAAkBX,aAAa,EAA/B;EAAA,IAAQY,KAAR,kBAAQA,KAAR;;EACA,sBAA0Bd,KAAK,CAACe,QAAN,CAAe,KAAf,CAA1B;EAAA;EAAA,IAAOC,KAAP;EAAA,IAAcC,QAAd;;EAEA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,CAAD,EAAmB;IAC1CA,CAAC,CAACC,eAAF;IACAH,QAAQ,CAAC,IAAD,CAAR;EACD,CAHD;;EAKA,IAAMI,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACF,CAAD,EAAmB;IAC1CA,CAAC,CAACC,eAAF;IACAH,QAAQ,CAAC,KAAD,CAAR;EACD,CAHD;;EAKA,OACE,oBAAC,SAAD;IACE,IAAI,EAAC;EADP,GAEMJ,SAFN;IAGE,GAAG,EAAEL,UAHP;IAIE,YAAY,EAAEU,gBAJhB;IAKE,YAAY,EAAEG,gBALhB;IAME,SAAS,EAAEpB,UAAU,CACnB,WADmB,4BAEAW,IAFA,+BAGEN,MAHF,GAInBH,iBAAiB,CAAC,WAAD,EAAcW,KAAd,CAJE,EAKnBH,QAAQ,IAAI,qBALO,EAMnB,CAACA,QAAD,IAAaK,KAAb,IAAsB,kBANH;EANvB,IAeGP,MAAM,IACL;IAAK,IAAI,EAAC,cAAV;IAAyB,SAAS,EAAC;EAAnC,GACGA,MADH,CAhBJ,EAoBGF,QApBH,EAqBGG,KAAK,IACJ;IAAK,IAAI,EAAC,cAAV;IAAyB,SAAS,EAAC;EAAnC,GACGA,KADH,CAtBJ,EA0BE;IAAK,IAAI,EAAC,cAAV;IAAyB,SAAS,EAAC;EAAnC,EA1BF,CADF;AA8BD,CAtDM"}

package/dist/components/FormItem/FormItem.js

@@ -5,13 +5,12 @@ import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { useExternRef } from "../../hooks/useExternRef";
-import { usePlatform } from "../../hooks/usePlatform";
-import { getClassName } from "../../helpers/getClassName";
 import { hasReactNode, noop } from "../../lib/utils";
 import { Subhead } from "../Typography/Subhead/Subhead";
-import { Caption } from "../Typography/Caption/Caption";
+import { Footnote } from "../Typography/Footnote/Footnote";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { Removable } from "../Removable/Removable";
+import { getSizeYClassName } from "../../helpers/getSizeYClassName";
 
 /**
  * @see https://vkcom.github.io/VKUI/#/FormItem
@@ -32,7 +31,6 @@ export var FormItem = function FormItem(_ref) {
       getRootRef = _ref.getRootRef,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
-  var platform = usePlatform();
   var rootEl = useExternRef(getRootRef);
 
   var _useAdaptivity = useAdaptivity(),
@@ -40,13 +38,12 @@ export var FormItem = function FormItem(_ref) {
 
   var wrappedChildren = createScopedElement(React.Fragment, null, hasReactNode(top) && createScopedElement(Subhead, {
     vkuiClass: "FormItem__top"
-  }, top), children, hasReactNode(bottom) && createScopedElement(Caption, {
+  }, top), children, hasReactNode(bottom) && createScopedElement(Footnote, {
     vkuiClass: "FormItem__bottom"
   }, bottom));
   return createScopedElement(Component, _extends({}, restProps, {
     ref: rootEl,
-    vkuiClass: classNames(getClassName("FormItem", platform), // TODO: v5 remove
-    "FormItem--".concat(status), "FormItem--sizeY-".concat(sizeY), hasReactNode(top) && "FormItem--withTop", removable && "FormItem--removable")
+    vkuiClass: classNames("FormItem", "FormItem--status-".concat(status), getSizeYClassName("FormItem", sizeY), hasReactNode(top) && "FormItem--withTop", removable && "FormItem--removable")
   }), removable ? createScopedElement(Removable, {
     align: "start",
     onRemove: function onRemove(e) {

package/dist/components/FormItem/FormItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormItem.js","names":["React","classNames","useExternRef","usePlatform","getClassName","hasReactNode","noop","Subhead","Caption","useAdaptivity","Removable","FormItem","children","top","bottom","status","Component","removable","onRemove","removePlaceholder","getRootRef","restProps","platform","rootEl","sizeY","wrappedChildren","e","current"],"sources":["../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { HasComponent, HasRootRef } from \"../../types\";\nimport { classNames } from \"../../lib/classNames\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { hasReactNode, noop } from \"../../lib/utils\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { Removable, RemovableProps } from \"../Removable/Removable\";\nimport \"./FormItem.css\";\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  bottom?: React.ReactNode;\n  status?: \"default\" | \"error\" | \"valid\";\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   */\n  removable?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  bottom,\n  status = \"default\",\n  Component = \"div\",\n  removable,\n  onRemove = noop,\n  removePlaceholder = \"Удалить\",\n  getRootRef,\n  ...restProps\n}: FormItemProps) => {\n  const platform = usePlatform();\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(top) && <Subhead vkuiClass=\"FormItem__top\">{top}</Subhead>}\n      {children}\n      {hasReactNode(bottom) && (\n        <Caption vkuiClass=\"FormItem__bottom\">{bottom}</Caption>\n      )}\n    </React.Fragment>\n  );\n\n  return (\n    <Component\n      {...restProps}\n      ref={rootEl}\n      vkuiClass={classNames(\n        getClassName(\"FormItem\", platform), // TODO: v5 remove\n        `FormItem--${status}`,\n        `FormItem--sizeY-${sizeY}`,\n        hasReactNode(top) && \"FormItem--withTop\",\n        removable && \"FormItem--removable\"\n      )}\n    >\n      {removable ? (\n        <Removable\n          align=\"start\"\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          removePlaceholder={removePlaceholder}\n        >\n          <div vkuiClass=\"FormItem__removable\">{wrappedChildren}</div>\n        </Removable>\n      ) : (\n        wrappedChildren\n      )}\n    </Component>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,SAASC,UAAT;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,SAASC,YAAT,EAAuBC,IAAvB;AACA,SAASC,OAAT;AACA,SAASC,OAAT;AACA,SAASC,aAAT;AACA,SAASC,SAAT;;AAiBA;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAWH;EAAA,IAVnBC,QAUmB,QAVnBA,QAUmB;EAAA,IATnBC,GASmB,QATnBA,GASmB;EAAA,IARnBC,MAQmB,QARnBA,MAQmB;EAAA,uBAPnBC,MAOmB;EAAA,IAPnBA,MAOmB,4BAPV,SAOU;EAAA,0BANnBC,SAMmB;EAAA,IANnBA,SAMmB,+BANP,KAMO;EAAA,IALnBC,SAKmB,QALnBA,SAKmB;EAAA,yBAJnBC,QAImB;EAAA,IAJnBA,SAImB,8BAJRZ,IAIQ;EAAA,iCAHnBa,iBAGmB;EAAA,IAHnBA,iBAGmB,sCAHC,SAGD;EAAA,IAFnBC,UAEmB,QAFnBA,UAEmB;EAAA,IADhBC,SACgB;;EACnB,IAAMC,QAAQ,GAAGnB,WAAW,EAA5B;EACA,IAAMoB,MAAM,GAAGrB,YAAY,CAACkB,UAAD,CAA3B;;EACA,qBAAkBX,aAAa,EAA/B;EAAA,IAAQe,KAAR,kBAAQA,KAAR;;EAEA,IAAMC,eAAe,GACnB,oBAAC,KAAD,CAAO,QAAP,QACGpB,YAAY,CAACQ,GAAD,CAAZ,IAAqB,oBAAC,OAAD;IAAS,SAAS,EAAC;EAAnB,GAAoCA,GAApC,CADxB,EAEGD,QAFH,EAGGP,YAAY,CAACS,MAAD,CAAZ,IACC,oBAAC,OAAD;IAAS,SAAS,EAAC;EAAnB,GAAuCA,MAAvC,CAJJ,CADF;EAUA,OACE,oBAAC,SAAD,eACMO,SADN;IAEE,GAAG,EAAEE,MAFP;IAGE,SAAS,EAAEtB,UAAU,CACnBG,YAAY,CAAC,UAAD,EAAakB,QAAb,CADO,EACiB;IADjB,oBAENP,MAFM,6BAGAS,KAHA,GAInBnB,YAAY,CAACQ,GAAD,CAAZ,IAAqB,mBAJF,EAKnBI,SAAS,IAAI,qBALM;EAHvB,IAWGA,SAAS,GACR,oBAAC,SAAD;IACE,KAAK,EAAC,OADR;IAEE,QAAQ,EAAE,kBAACS,CAAD,EAAO;MACf,IAAIH,MAAJ,aAAIA,MAAJ,eAAIA,MAAM,CAAEI,OAAZ,EAAqB;QACnBT,SAAQ,CAACQ,CAAD,EAAIH,MAAM,CAACI,OAAX,CAAR;MACD;IACF,CANH;IAOE,iBAAiB,EAAER;EAPrB,GASE;IAAK,SAAS,EAAC;EAAf,GAAsCM,eAAtC,CATF,CADQ,GAaRA,eAxBJ,CADF;AA6BD,CAvDM"}
+{"version":3,"file":"FormItem.js","names":["React","classNames","useExternRef","hasReactNode","noop","Subhead","Footnote","useAdaptivity","Removable","getSizeYClassName","FormItem","children","top","bottom","status","Component","removable","onRemove","removePlaceholder","getRootRef","restProps","rootEl","sizeY","wrappedChildren","e","current"],"sources":["../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { HasComponent, HasRootRef } from \"../../types\";\nimport { classNames } from \"../../lib/classNames\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { hasReactNode, noop } from \"../../lib/utils\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { Removable, RemovableProps } from \"../Removable/Removable\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport \"./FormItem.css\";\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  bottom?: React.ReactNode;\n  status?: \"default\" | \"error\" | \"valid\";\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   */\n  removable?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  bottom,\n  status = \"default\",\n  Component = \"div\",\n  removable,\n  onRemove = noop,\n  removePlaceholder = \"Удалить\",\n  getRootRef,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(top) && <Subhead vkuiClass=\"FormItem__top\">{top}</Subhead>}\n      {children}\n      {hasReactNode(bottom) && (\n        <Footnote vkuiClass=\"FormItem__bottom\">{bottom}</Footnote>\n      )}\n    </React.Fragment>\n  );\n\n  return (\n    <Component\n      {...restProps}\n      ref={rootEl}\n      vkuiClass={classNames(\n        \"FormItem\",\n        `FormItem--status-${status}`,\n        getSizeYClassName(\"FormItem\", sizeY),\n        hasReactNode(top) && \"FormItem--withTop\",\n        removable && \"FormItem--removable\"\n      )}\n    >\n      {removable ? (\n        <Removable\n          align=\"start\"\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          removePlaceholder={removePlaceholder}\n        >\n          <div vkuiClass=\"FormItem__removable\">{wrappedChildren}</div>\n        </Removable>\n      ) : (\n        wrappedChildren\n      )}\n    </Component>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,SAASC,UAAT;AACA,SAASC,YAAT;AACA,SAASC,YAAT,EAAuBC,IAAvB;AACA,SAASC,OAAT;AACA,SAASC,QAAT;AACA,SAASC,aAAT;AACA,SAASC,SAAT;AACA,SAASC,iBAAT;;AAiBA;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAWH;EAAA,IAVnBC,QAUmB,QAVnBA,QAUmB;EAAA,IATnBC,GASmB,QATnBA,GASmB;EAAA,IARnBC,MAQmB,QARnBA,MAQmB;EAAA,uBAPnBC,MAOmB;EAAA,IAPnBA,MAOmB,4BAPV,SAOU;EAAA,0BANnBC,SAMmB;EAAA,IANnBA,SAMmB,+BANP,KAMO;EAAA,IALnBC,SAKmB,QALnBA,SAKmB;EAAA,yBAJnBC,QAImB;EAAA,IAJnBA,SAImB,8BAJRb,IAIQ;EAAA,iCAHnBc,iBAGmB;EAAA,IAHnBA,iBAGmB,sCAHC,SAGD;EAAA,IAFnBC,UAEmB,QAFnBA,UAEmB;EAAA,IADhBC,SACgB;;EACnB,IAAMC,MAAM,GAAGnB,YAAY,CAACiB,UAAD,CAA3B;;EACA,qBAAkBZ,aAAa,EAA/B;EAAA,IAAQe,KAAR,kBAAQA,KAAR;;EAEA,IAAMC,eAAe,GACnB,oBAAC,KAAD,CAAO,QAAP,QACGpB,YAAY,CAACS,GAAD,CAAZ,IAAqB,oBAAC,OAAD;IAAS,SAAS,EAAC;EAAnB,GAAoCA,GAApC,CADxB,EAEGD,QAFH,EAGGR,YAAY,CAACU,MAAD,CAAZ,IACC,oBAAC,QAAD;IAAU,SAAS,EAAC;EAApB,GAAwCA,MAAxC,CAJJ,CADF;EAUA,OACE,oBAAC,SAAD,eACMO,SADN;IAEE,GAAG,EAAEC,MAFP;IAGE,SAAS,EAAEpB,UAAU,CACnB,UADmB,6BAECa,MAFD,GAGnBL,iBAAiB,CAAC,UAAD,EAAaa,KAAb,CAHE,EAInBnB,YAAY,CAACS,GAAD,CAAZ,IAAqB,mBAJF,EAKnBI,SAAS,IAAI,qBALM;EAHvB,IAWGA,SAAS,GACR,oBAAC,SAAD;IACE,KAAK,EAAC,OADR;IAEE,QAAQ,EAAE,kBAACQ,CAAD,EAAO;MACf,IAAIH,MAAJ,aAAIA,MAAJ,eAAIA,MAAM,CAAEI,OAAZ,EAAqB;QACnBR,SAAQ,CAACO,CAAD,EAAIH,MAAM,CAACI,OAAX,CAAR;MACD;IACF,CANH;IAOE,iBAAiB,EAAEP;EAPrB,GASE;IAAK,SAAS,EAAC;EAAf,GAAsCK,eAAtC,CATF,CADQ,GAaRA,eAxBJ,CADF;AA6BD,CAtDM"}

package/dist/components/FormLayout/FormLayout.js

@@ -2,8 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "Component", "getRef", "onSubmit"];
 import { createScopedElement } from "../../lib/jsxRuntime";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
 
 var preventDefault = function preventDefault(e) {
   return e.preventDefault();
@@ -21,9 +19,8 @@ export var FormLayout = function FormLayout(_ref) {
       onSubmit = _ref$onSubmit === void 0 ? preventDefault : _ref$onSubmit,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
-  var platform = usePlatform();
   return createScopedElement(Component, _extends({}, restProps, {
-    vkuiClass: getClassName("FormLayout", platform),
+    vkuiClass: "FormLayout",
     onSubmit: onSubmit,
     ref: getRef
   }), createScopedElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"FormLayout.js","names":["getClassName","usePlatform","preventDefault","e","FormLayout","children","Component","getRef","onSubmit","restProps","platform"],"sources":["../../../src/components/FormLayout/FormLayout.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { HasComponent, HasRef } from \"../../types\";\nimport \"./FormLayout.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  ...restProps\n}: FormLayoutProps) => {\n  const platform = usePlatform();\n  return (\n    <Component\n      {...restProps}\n      vkuiClass={getClassName(\"FormLayout\", platform)}\n      onSubmit={onSubmit}\n      ref={getRef}\n    >\n      <div vkuiClass=\"FormLayout__container\">{children}</div>\n      {Component === \"form\" && (\n        <input type=\"submit\" vkuiClass=\"FormLayout__submit\" value=\"\" />\n      )}\n    </Component>\n  );\n};\n"],"mappings":";;;;AACA,SAASA,YAAT;AACA,SAASC,WAAT;;AAIA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,CAAD;EAAA,OAAwBA,CAAC,CAACD,cAAF,EAAxB;AAAA,CAAvB;;AAMA;AACA;AACA;AACA,OAAO,IAAME,UAAU,GAAG,SAAbA,UAAa,OAMH;EAAA,IALrBC,QAKqB,QALrBA,QAKqB;EAAA,0BAJrBC,SAIqB;EAAA,IAJrBA,SAIqB,+BAJT,MAIS;EAAA,IAHrBC,MAGqB,QAHrBA,MAGqB;EAAA,yBAFrBC,QAEqB;EAAA,IAFrBA,QAEqB,8BAFVN,cAEU;EAAA,IADlBO,SACkB;;EACrB,IAAMC,QAAQ,GAAGT,WAAW,EAA5B;EACA,OACE,oBAAC,SAAD,eACMQ,SADN;IAEE,SAAS,EAAET,YAAY,CAAC,YAAD,EAAeU,QAAf,CAFzB;IAGE,QAAQ,EAAEF,QAHZ;IAIE,GAAG,EAAED;EAJP,IAME;IAAK,SAAS,EAAC;EAAf,GAAwCF,QAAxC,CANF,EAOGC,SAAS,KAAK,MAAd,IACC;IAAO,IAAI,EAAC,QAAZ;IAAqB,SAAS,EAAC,oBAA/B;IAAoD,KAAK,EAAC;EAA1D,EARJ,CADF;AAaD,CArBM"}
+{"version":3,"file":"FormLayout.js","names":["preventDefault","e","FormLayout","children","Component","getRef","onSubmit","restProps"],"sources":["../../../src/components/FormLayout/FormLayout.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { HasComponent, HasRef } from \"../../types\";\nimport \"./FormLayout.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  ...restProps\n}: FormLayoutProps) => {\n  return (\n    <Component\n      {...restProps}\n      vkuiClass=\"FormLayout\"\n      onSubmit={onSubmit}\n      ref={getRef}\n    >\n      <div vkuiClass=\"FormLayout__container\">{children}</div>\n      {Component === \"form\" && (\n        <input type=\"submit\" vkuiClass=\"FormLayout__submit\" value=\"\" />\n      )}\n    </Component>\n  );\n};\n"],"mappings":";;;;;AAIA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,CAACC,CAAD;EAAA,OAAwBA,CAAC,CAACD,cAAF,EAAxB;AAAA,CAAvB;;AAMA;AACA;AACA;AACA,OAAO,IAAME,UAAU,GAAG,SAAbA,UAAa,OAMH;EAAA,IALrBC,QAKqB,QALrBA,QAKqB;EAAA,0BAJrBC,SAIqB;EAAA,IAJrBA,SAIqB,+BAJT,MAIS;EAAA,IAHrBC,MAGqB,QAHrBA,MAGqB;EAAA,yBAFrBC,QAEqB;EAAA,IAFrBA,QAEqB,8BAFVN,cAEU;EAAA,IADlBO,SACkB;;EACrB,OACE,oBAAC,SAAD,eACMA,SADN;IAEE,SAAS,EAAC,YAFZ;IAGE,QAAQ,EAAED,QAHZ;IAIE,GAAG,EAAED;EAJP,IAME;IAAK,SAAS,EAAC;EAAf,GAAwCF,QAAxC,CANF,EAOGC,SAAS,KAAK,MAAd,IACC;IAAO,IAAI,EAAC,QAAZ;IAAqB,SAAS,EAAC,oBAA/B;IAAoD,KAAK,EAAC;EAA1D,EARJ,CADF;AAaD,CApBM"}

package/dist/components/FormLayoutGroup/FormLayoutGroup.js

@@ -3,13 +3,12 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["children", "mode", "removable", "segmented", "removePlaceholder", "onRemove", "getRootRef"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { noop } from "../../lib/utils";
 import { useExternRef } from "../../hooks/useExternRef";
-import { usePlatform } from "../../hooks/usePlatform";
 import { Removable } from "../Removable/Removable";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { getSizeYClassName } from "../../helpers/getSizeYClassName";
 
 /**
  * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup
@@ -27,8 +26,6 @@ export var FormLayoutGroup = function FormLayoutGroup(_ref) {
       getRootRef = _ref.getRootRef,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
-  var platform = usePlatform();
-
   var _useAdaptivity = useAdaptivity(),
       sizeY = _useAdaptivity.sizeY;
 
@@ -37,8 +34,7 @@ export var FormLayoutGroup = function FormLayoutGroup(_ref) {
   var rootEl = useExternRef(getRootRef);
   return createScopedElement("div", _extends({
     ref: rootEl,
-    vkuiClass: classNames(getClassName("FormLayoutGroup", platform), // TODO: v5 remove
-    "FormLayoutGroup--sizeY-".concat(sizeY), "FormLayoutGroup--".concat(mode), isRemovable && "FormLayoutGroup--removable", isSegmented && "FormLayoutGroup--segmented")
+    vkuiClass: classNames("FormLayoutGroup", getSizeYClassName("FormLayoutGroup", sizeY), "FormLayoutGroup--mode-".concat(mode), isRemovable && "FormLayoutGroup--removable", isSegmented && "FormLayoutGroup--segmented")
   }, restProps), isRemovable ? createScopedElement(Removable, {
     vkuiClass: "FormLayoutGroup__removable",
     align: "start",

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

@@ -1 +1 @@
-{"version":3,"file":"FormLayoutGroup.js","names":["React","getClassName","classNames","noop","useExternRef","usePlatform","Removable","useAdaptivity","FormLayoutGroup","children","mode","removable","segmented","removePlaceholder","onRemove","getRootRef","restProps","platform","sizeY","isRemovable","isSegmented","rootEl","e","current"],"sources":["../../../src/components/FormLayoutGroup/FormLayoutGroup.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { HasRootRef } from \"../../types\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { noop } from \"../../lib/utils\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { Removable, RemovableProps } from \"../Removable/Removable\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport \"./FormLayoutGroup.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  ...restProps\n}: FormLayoutGroupProps) => {\n  const platform = usePlatform();\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      vkuiClass={classNames(\n        getClassName(\"FormLayoutGroup\", platform), // TODO: v5 remove\n        `FormLayoutGroup--sizeY-${sizeY}`,\n        `FormLayoutGroup--${mode}`,\n        isRemovable && \"FormLayoutGroup--removable\",\n        isSegmented && \"FormLayoutGroup--segmented\"\n      )}\n      {...restProps}\n    >\n      {isRemovable ? (\n        <Removable\n          vkuiClass=\"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 vkuiClass=\"FormLayoutGroup__offset\" aria-hidden />\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,SAASC,YAAT;AACA,SAASC,UAAT;AACA,SAASC,IAAT;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AACA,SAASC,SAAT;AACA,SAASC,aAAT;;AAmBA;AACA;AACA;AACA,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,OASH;EAAA,IAR1BC,QAQ0B,QAR1BA,QAQ0B;EAAA,qBAP1BC,IAO0B;EAAA,IAP1BA,IAO0B,0BAPnB,UAOmB;EAAA,IAN1BC,SAM0B,QAN1BA,SAM0B;EAAA,IAL1BC,SAK0B,QAL1BA,SAK0B;EAAA,iCAJ1BC,iBAI0B;EAAA,IAJ1BA,iBAI0B,sCAJN,SAIM;EAAA,yBAH1BC,QAG0B;EAAA,IAH1BA,SAG0B,8BAHfX,IAGe;EAAA,IAF1BY,UAE0B,QAF1BA,UAE0B;EAAA,IADvBC,SACuB;;EAC1B,IAAMC,QAAQ,GAAGZ,WAAW,EAA5B;;EACA,qBAAkBE,aAAa,EAA/B;EAAA,IAAQW,KAAR,kBAAQA,KAAR;;EACA,IAAMC,WAAW,GAAGR,SAAS,IAAID,IAAI,KAAK,YAA1C;EACA,IAAMU,WAAW,GAAGR,SAAS,IAAIF,IAAI,KAAK,YAA1C;EACA,IAAMW,MAAM,GAAGjB,YAAY,CAACW,UAAD,CAA3B;EAEA,OACE;IACE,GAAG,EAAEM,MADP;IAEE,SAAS,EAAEnB,UAAU,CACnBD,YAAY,CAAC,iBAAD,EAAoBgB,QAApB,CADO,EACwB;IADxB,iCAEOC,KAFP,8BAGCR,IAHD,GAInBS,WAAW,IAAI,4BAJI,EAKnBC,WAAW,IAAI,4BALI;EAFvB,GASMJ,SATN,GAWGG,WAAW,GACV,oBAAC,SAAD;IACE,SAAS,EAAC,4BADZ;IAEE,KAAK,EAAC,OAFR;IAGE,iBAAiB,EAAEN,iBAHrB;IAIE,QAAQ,EAAE,kBAACS,CAAD,EAAO;MACf,IAAID,MAAJ,aAAIA,MAAJ,eAAIA,MAAM,CAAEE,OAAZ,EAAqB;QACnBT,SAAQ,CAACQ,CAAD,EAAID,MAAM,CAACE,OAAX,CAAR;MACD;IACF;EARH,GAUGd,QAVH,CADU,GAcV,oBAAC,KAAD,CAAO,QAAP,QACGA,QADH,EAEE;IAAM,SAAS,EAAC,yBAAhB;IAA0C;EAA1C,EAFF,CAzBJ,CADF;AAiCD,CAjDM"}
+{"version":3,"file":"FormLayoutGroup.js","names":["React","classNames","noop","useExternRef","Removable","useAdaptivity","getSizeYClassName","FormLayoutGroup","children","mode","removable","segmented","removePlaceholder","onRemove","getRootRef","restProps","sizeY","isRemovable","isSegmented","rootEl","e","current"],"sources":["../../../src/components/FormLayoutGroup/FormLayoutGroup.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { HasRootRef } from \"../../types\";\nimport { classNames } 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 \"./FormLayoutGroup.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  ...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      vkuiClass={classNames(\n        \"FormLayoutGroup\",\n        getSizeYClassName(\"FormLayoutGroup\", sizeY),\n        `FormLayoutGroup--mode-${mode}`,\n        isRemovable && \"FormLayoutGroup--removable\",\n        isSegmented && \"FormLayoutGroup--segmented\"\n      )}\n      {...restProps}\n    >\n      {isRemovable ? (\n        <Removable\n          vkuiClass=\"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 vkuiClass=\"FormLayoutGroup__offset\" aria-hidden />\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,SAASC,UAAT;AACA,SAASC,IAAT;AACA,SAASC,YAAT;AACA,SAASC,SAAT;AACA,SAASC,aAAT;AACA,SAASC,iBAAT;;AAmBA;AACA;AACA;AACA,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,OASH;EAAA,IAR1BC,QAQ0B,QAR1BA,QAQ0B;EAAA,qBAP1BC,IAO0B;EAAA,IAP1BA,IAO0B,0BAPnB,UAOmB;EAAA,IAN1BC,SAM0B,QAN1BA,SAM0B;EAAA,IAL1BC,SAK0B,QAL1BA,SAK0B;EAAA,iCAJ1BC,iBAI0B;EAAA,IAJ1BA,iBAI0B,sCAJN,SAIM;EAAA,yBAH1BC,QAG0B;EAAA,IAH1BA,SAG0B,8BAHfX,IAGe;EAAA,IAF1BY,UAE0B,QAF1BA,UAE0B;EAAA,IADvBC,SACuB;;EAC1B,qBAAkBV,aAAa,EAA/B;EAAA,IAAQW,KAAR,kBAAQA,KAAR;;EACA,IAAMC,WAAW,GAAGP,SAAS,IAAID,IAAI,KAAK,YAA1C;EACA,IAAMS,WAAW,GAAGP,SAAS,IAAIF,IAAI,KAAK,YAA1C;EACA,IAAMU,MAAM,GAAGhB,YAAY,CAACW,UAAD,CAA3B;EAEA,OACE;IACE,GAAG,EAAEK,MADP;IAEE,SAAS,EAAElB,UAAU,CACnB,iBADmB,EAEnBK,iBAAiB,CAAC,iBAAD,EAAoBU,KAApB,CAFE,kCAGMP,IAHN,GAInBQ,WAAW,IAAI,4BAJI,EAKnBC,WAAW,IAAI,4BALI;EAFvB,GASMH,SATN,GAWGE,WAAW,GACV,oBAAC,SAAD;IACE,SAAS,EAAC,4BADZ;IAEE,KAAK,EAAC,OAFR;IAGE,iBAAiB,EAAEL,iBAHrB;IAIE,QAAQ,EAAE,kBAACQ,CAAD,EAAO;MACf,IAAID,MAAJ,aAAIA,MAAJ,eAAIA,MAAM,CAAEE,OAAZ,EAAqB;QACnBR,SAAQ,CAACO,CAAD,EAAID,MAAM,CAACE,OAAX,CAAR;MACD;IACF;EARH,GAUGb,QAVH,CADU,GAcV,oBAAC,KAAD,CAAO,QAAP,QACGA,QADH,EAEE;IAAM,SAAS,EAAC,yBAAhB;IAA0C;EAA1C,EAFF,CAzBJ,CADF;AAiCD,CAhDM"}

package/dist/components/Gradient/Gradient.js

@@ -18,7 +18,7 @@ export var Gradient = function Gradient(_ref) {
   return createScopedElement("div", _extends({
     role: "presentation"
   }, restProps, {
-    vkuiClass: classNames("Gradient", "Gradient--md-".concat(mode), "Gradient--to-".concat(to))
+    vkuiClass: classNames("Gradient", "Gradient--mode-".concat(mode), "Gradient--to-".concat(to))
   }), children);
 };
 //# sourceMappingURL=Gradient.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Gradient.js","names":["classNames","Gradient","mode","children","to","restProps"],"sources":["../../../src/components/Gradient/Gradient.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport \"./Gradient.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  ...restProps\n}: GradientProps) => {\n  return (\n    <div\n      role=\"presentation\"\n      {...restProps}\n      vkuiClass={classNames(\n        \"Gradient\",\n        `Gradient--md-${mode}`,\n        `Gradient--to-${to}`\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;AACA,SAASA,UAAT;;AAcA;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAKH;EAAA,qBAJnBC,IAImB;EAAA,IAJnBA,IAImB,0BAJZ,MAIY;EAAA,IAHnBC,QAGmB,QAHnBA,QAGmB;EAAA,mBAFnBC,EAEmB;EAAA,IAFnBA,EAEmB,wBAFd,KAEc;EAAA,IADhBC,SACgB;;EACnB,OACE;IACE,IAAI,EAAC;EADP,GAEMA,SAFN;IAGE,SAAS,EAAEL,UAAU,CACnB,UADmB,yBAEHE,IAFG,0BAGHE,EAHG;EAHvB,IASGD,QATH,CADF;AAaD,CAnBM"}
+{"version":3,"file":"Gradient.js","names":["classNames","Gradient","mode","children","to","restProps"],"sources":["../../../src/components/Gradient/Gradient.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport \"./Gradient.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  ...restProps\n}: GradientProps) => {\n  return (\n    <div\n      role=\"presentation\"\n      {...restProps}\n      vkuiClass={classNames(\n        \"Gradient\",\n        `Gradient--mode-${mode}`,\n        `Gradient--to-${to}`\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;AACA,SAASA,UAAT;;AAcA;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAKH;EAAA,qBAJnBC,IAImB;EAAA,IAJnBA,IAImB,0BAJZ,MAIY;EAAA,IAHnBC,QAGmB,QAHnBA,QAGmB;EAAA,mBAFnBC,EAEmB;EAAA,IAFnBA,EAEmB,wBAFd,KAEc;EAAA,IADhBC,SACgB;;EACnB,OACE;IACE,IAAI,EAAC;EADP,GAEMA,SAFN;IAGE,SAAS,EAAEL,UAAU,CACnB,UADmB,2BAEDE,IAFC,0BAGHE,EAHG;EAHvB,IASGD,QATH,CADF;AAaD,CAnBM"}

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

@@ -2,7 +2,7 @@ import * as React from "react";
 import { AvatarProps } from "../Avatar/Avatar";
 import { HasRootRef } from "../../types";
 import "./GridAvatar.css";
-export interface GridAvatarProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement>, Pick<AvatarProps, "size" | "shadow" | "badge"> {
+export interface GridAvatarProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement>, Pick<AvatarProps, "size" | "badge"> {
     /**
      * Массив со ссылками. От 1 до 4 элементов.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"GridAvatar.js","names":["Avatar","warnOnce","MAX_GRID_LENGTH","warn","GridAvatar","src","restProps","process","env","NODE_ENV","length","map","url","index","backgroundImage"],"sources":["../../../src/components/GridAvatar/GridAvatar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Avatar, AvatarProps } from \"../Avatar/Avatar\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { HasRootRef } from \"../../types\";\nimport \"./GridAvatar.css\";\n\nexport interface GridAvatarProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    Pick<AvatarProps, \"size\" | \"shadow\" | \"badge\"> {\n  /**\n   * Массив со ссылками. От 1 до 4 элементов.\n   */\n  src?: string[];\n}\n\nexport const MAX_GRID_LENGTH = 4;\n\nconst warn = warnOnce(\"GridAvatar\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/GridAvatar\n */\nexport const GridAvatar = ({ src = [], ...restProps }: GridAvatarProps) => {\n  if (process.env.NODE_ENV === \"development\" && src.length > MAX_GRID_LENGTH) {\n    warn(\n      `Длина массива src (${src.length}) больше максимальной (${MAX_GRID_LENGTH})`,\n      \"error\"\n    );\n  }\n\n  return (\n    <Avatar {...restProps} vkuiClass=\"GridAvatar\">\n      <div vkuiClass=\"GridAvatar__in\" aria-hidden=\"true\">\n        {src.map((url, index) =>\n          index < MAX_GRID_LENGTH ? (\n            <div\n              key={url}\n              vkuiClass=\"GridAvatar__item\"\n              style={{ backgroundImage: `url(${url})` }}\n            />\n          ) : null\n        )}\n      </div>\n    </Avatar>\n  );\n};\n"],"mappings":";;;;AACA,SAASA,MAAT;AACA,SAASC,QAAT;AAcA,OAAO,IAAMC,eAAe,GAAG,CAAxB;AAEP,IAAMC,IAAI,GAAGF,QAAQ,CAAC,YAAD,CAArB;AAEA;AACA;AACA;;AACA,OAAO,IAAMG,UAAU,GAAG,SAAbA,UAAa,OAAiD;EAAA,oBAA9CC,GAA8C;EAAA,IAA9CA,GAA8C,yBAAxC,EAAwC;EAAA,IAAjCC,SAAiC;;EACzE,IAAIC,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAAzB,IAA0CJ,GAAG,CAACK,MAAJ,GAAaR,eAA3D,EAA4E;IAC1EC,IAAI,0FACoBE,GAAG,CAACK,MADxB,8HACwDR,eADxD,QAEF,OAFE,CAAJ;EAID;;EAED,OACE,oBAAC,MAAD,eAAYI,SAAZ;IAAuB,SAAS,EAAC;EAAjC,IACE;IAAK,SAAS,EAAC,gBAAf;IAAgC,eAAY;EAA5C,GACGD,GAAG,CAACM,GAAJ,CAAQ,UAACC,GAAD,EAAMC,KAAN;IAAA,OACPA,KAAK,GAAGX,eAAR,GACE;MACE,GAAG,EAAEU,GADP;MAEE,SAAS,EAAC,kBAFZ;MAGE,KAAK,EAAE;QAAEE,eAAe,gBAASF,GAAT;MAAjB;IAHT,EADF,GAMI,IAPG;EAAA,CAAR,CADH,CADF,CADF;AAeD,CAvBM"}
+{"version":3,"file":"GridAvatar.js","names":["Avatar","warnOnce","MAX_GRID_LENGTH","warn","GridAvatar","src","restProps","process","env","NODE_ENV","length","map","url","index","backgroundImage"],"sources":["../../../src/components/GridAvatar/GridAvatar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Avatar, AvatarProps } from \"../Avatar/Avatar\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { HasRootRef } from \"../../types\";\nimport \"./GridAvatar.css\";\n\nexport interface GridAvatarProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    Pick<AvatarProps, \"size\" | \"badge\"> {\n  /**\n   * Массив со ссылками. От 1 до 4 элементов.\n   */\n  src?: string[];\n}\n\nexport const MAX_GRID_LENGTH = 4;\n\nconst warn = warnOnce(\"GridAvatar\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/GridAvatar\n */\nexport const GridAvatar = ({ src = [], ...restProps }: GridAvatarProps) => {\n  if (process.env.NODE_ENV === \"development\" && src.length > MAX_GRID_LENGTH) {\n    warn(\n      `Длина массива src (${src.length}) больше максимальной (${MAX_GRID_LENGTH})`,\n      \"error\"\n    );\n  }\n\n  return (\n    <Avatar {...restProps} vkuiClass=\"GridAvatar\">\n      <div vkuiClass=\"GridAvatar__in\" aria-hidden=\"true\">\n        {src.map((url, index) =>\n          index < MAX_GRID_LENGTH ? (\n            <div\n              key={url}\n              vkuiClass=\"GridAvatar__item\"\n              style={{ backgroundImage: `url(${url})` }}\n            />\n          ) : null\n        )}\n      </div>\n    </Avatar>\n  );\n};\n"],"mappings":";;;;AACA,SAASA,MAAT;AACA,SAASC,QAAT;AAcA,OAAO,IAAMC,eAAe,GAAG,CAAxB;AAEP,IAAMC,IAAI,GAAGF,QAAQ,CAAC,YAAD,CAArB;AAEA;AACA;AACA;;AACA,OAAO,IAAMG,UAAU,GAAG,SAAbA,UAAa,OAAiD;EAAA,oBAA9CC,GAA8C;EAAA,IAA9CA,GAA8C,yBAAxC,EAAwC;EAAA,IAAjCC,SAAiC;;EACzE,IAAIC,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAAzB,IAA0CJ,GAAG,CAACK,MAAJ,GAAaR,eAA3D,EAA4E;IAC1EC,IAAI,0FACoBE,GAAG,CAACK,MADxB,8HACwDR,eADxD,QAEF,OAFE,CAAJ;EAID;;EAED,OACE,oBAAC,MAAD,eAAYI,SAAZ;IAAuB,SAAS,EAAC;EAAjC,IACE;IAAK,SAAS,EAAC,gBAAf;IAAgC,eAAY;EAA5C,GACGD,GAAG,CAACM,GAAJ,CAAQ,UAACC,GAAD,EAAMC,KAAN;IAAA,OACPA,KAAK,GAAGX,eAAR,GACE;MACE,GAAG,EAAEU,GADP;MAEE,SAAS,EAAC,kBAFZ;MAGE,KAAK,EAAE;QAAEE,eAAe,gBAASF,GAAT;MAAjB;IAHT,EADF,GAMI,IAPG;EAAA,CAAR,CADH,CADF,CADF;AAeD,CAvBM"}

package/dist/components/Group/Group.d.ts

@@ -1,14 +1,13 @@
 import * as React from "react";
 import { HasRootRef } from "../../types";
-import { AdaptivityProps } from "../../hoc/withAdaptivity";
 import "./Group.css";
-export interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttributes<HTMLElement>, AdaptivityProps {
+export interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttributes<HTMLElement> {
     header?: React.ReactNode;
     description?: React.ReactNode;
     /**
       show - разделитель всегда показывается,
-      hide – разделитель всегда спрятан,
-      auto – разделитель рисуется автоматически между соседними группами.
+      hide - разделитель всегда спрятан,
+      auto - разделитель рисуется автоматически между соседними группами.
      */
     separator?: "show" | "hide" | "auto";
     /**
@@ -27,4 +26,4 @@ export interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttribute
 /**
  * @see https://vkcom.github.io/VKUI/#/Group
  */
-export declare const Group: React.FC<Pick<GroupProps, "hidden" | "dir" | "header" | "slot" | "style" | "title" | "color" | "separator" | "padding" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "role" | "tabIndex" | "mode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "getRootRef" | "description"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
+export declare const Group: (props: GroupProps) => JSX.Element;

package/dist/components/Group/Group.js

@@ -1,70 +1,62 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["header", "description", "children", "separator", "getRootRef", "mode", "padding", "sizeX"];
+var _excluded = ["header", "description", "children", "separator", "getRootRef", "mode", "padding"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
-import { IOS } from "../../lib/platform";
-import { classNames } from "../../lib/classNames";
+import { Platform } from "../../lib/platform";
+import { classNames, classNamesString } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
 import { Spacing } from "../Spacing/Spacing";
 import { Separator } from "../Separator/Separator";
 import { hasReactNode } from "../../lib/utils";
-import { Caption } from "../Typography/Caption/Caption";
-import { withAdaptivity, SizeType } from "../../hoc/withAdaptivity";
+import { Footnote } from "../Typography/Footnote/Footnote";
 import { ModalRootContext } from "../ModalRoot/ModalRootContext";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { getSizeXClassName } from "../../helpers/getSizeXClassName";
 
-var GroupComponent = function GroupComponent(_ref) {
-  var header = _ref.header,
-      description = _ref.description,
-      children = _ref.children,
-      _ref$separator = _ref.separator,
-      separator = _ref$separator === void 0 ? "auto" : _ref$separator,
-      getRootRef = _ref.getRootRef,
-      mode = _ref.mode,
-      _ref$padding = _ref.padding,
-      padding = _ref$padding === void 0 ? "m" : _ref$padding,
-      sizeX = _ref.sizeX,
-      restProps = _objectWithoutProperties(_ref, _excluded);
+/**
+ * @see https://vkcom.github.io/VKUI/#/Group
+ */
+export var Group = function Group(props) {
+  var header = props.header,
+      description = props.description,
+      children = props.children,
+      _props$separator = props.separator,
+      separator = _props$separator === void 0 ? "auto" : _props$separator,
+      getRootRef = props.getRootRef,
+      modeProps = props.mode,
+      _props$padding = props.padding,
+      padding = _props$padding === void 0 ? "m" : _props$padding,
+      restProps = _objectWithoutProperties(props, _excluded);
 
   var _React$useContext = React.useContext(ModalRootContext),
       isInsideModal = _React$useContext.isInsideModal;
 
   var platform = usePlatform();
-  var computedMode = mode;
 
-  if (!mode) {
-    computedMode = sizeX === SizeType.COMPACT || isInsideModal ? "plain" : "card";
-  }
+  var _useAdaptivity = useAdaptivity(),
+      sizeX = _useAdaptivity.sizeX;
 
-  var separatorElement = null;
+  var mode = modeProps;
 
-  if (separator !== "hide") {
-    var separatorClassName = classNames("Group__separator", separator === "show" && "Group__separator--force");
-    separatorElement = computedMode === "card" ? createScopedElement(Spacing, {
-      vkuiClass: separatorClassName,
-      size: 16
-    }) : createScopedElement(Separator, {
-      vkuiClass: separatorClassName
-    });
+  if (!modeProps) {
+    // Подробнее в "none" можно прочитать в ADAPTIVITY_GUIDE.md
+    mode = isInsideModal ? "plain" : "none";
   }
 
+  var separatorClassName = classNamesString("Group__separator", separator === "show" && "Group__separator--force");
   return createScopedElement("section", _extends({}, restProps, {
     ref: getRootRef,
-    vkuiClass: classNames("Group", platform === IOS && "Group--ios", // TODO v5.0.0 Новая адаптивность
-    "Group--sizeX-".concat(sizeX), "Group--".concat(computedMode), "Group--padding-".concat(padding))
+    vkuiClass: classNames("Group", platform === Platform.IOS && "Group--ios", getSizeXClassName("Group", sizeX), mode && "Group--mode-".concat(mode), "Group--padding-".concat(padding))
   }), createScopedElement("div", {
     vkuiClass: "Group__inner"
-  }, header, children, hasReactNode(description) && createScopedElement(Caption, {
+  }, header, children, hasReactNode(description) && createScopedElement(Footnote, {
     vkuiClass: "Group__description"
-  }, description)), separatorElement);
+  }, description)), separator !== "hide" && createScopedElement(React.Fragment, null, createScopedElement(Spacing, {
+    vkuiClass: classNames(separatorClassName, "Group__separator--spacing"),
+    size: 16
+  }), createScopedElement(Separator, {
+    vkuiClass: classNames(separatorClassName, "Group__separator--separator")
+  })));
 };
-/**
- * @see https://vkcom.github.io/VKUI/#/Group
- */
-
-
-export var Group = withAdaptivity(GroupComponent, {
-  sizeX: true
-});
-Group.displayName = "Group";
 //# sourceMappingURL=Group.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Group.js","names":["React","IOS","classNames","usePlatform","Spacing","Separator","hasReactNode","Caption","withAdaptivity","SizeType","ModalRootContext","GroupComponent","header","description","children","separator","getRootRef","mode","padding","sizeX","restProps","useContext","isInsideModal","platform","computedMode","COMPACT","separatorElement","separatorClassName","Group","displayName"],"sources":["../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { IOS } from \"../../lib/platform\";\nimport { classNames } 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 { Caption } from \"../Typography/Caption/Caption\";\nimport {\n  withAdaptivity,\n  AdaptivityProps,\n  SizeType,\n} from \"../../hoc/withAdaptivity\";\nimport { ModalRootContext } from \"../ModalRoot/ModalRootContext\";\nimport \"./Group.css\";\n\nexport interface GroupProps\n  extends HasRootRef<HTMLElement>,\n    React.HTMLAttributes<HTMLElement>,\n    AdaptivityProps {\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 GroupComponent = ({\n  header,\n  description,\n  children,\n  separator = \"auto\",\n  getRootRef,\n  mode,\n  padding = \"m\",\n  sizeX,\n  ...restProps\n}: GroupProps) => {\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  let computedMode: GroupProps[\"mode\"] = mode;\n\n  if (!mode) {\n    computedMode =\n      sizeX === SizeType.COMPACT || isInsideModal ? \"plain\" : \"card\";\n  }\n\n  let separatorElement = null;\n\n  if (separator !== \"hide\") {\n    const separatorClassName = classNames(\n      \"Group__separator\",\n      separator === \"show\" && \"Group__separator--force\"\n    );\n    separatorElement =\n      computedMode === \"card\" ? (\n        <Spacing vkuiClass={separatorClassName} size={16} />\n      ) : (\n        <Separator vkuiClass={separatorClassName} />\n      );\n  }\n\n  return (\n    <section\n      {...restProps}\n      ref={getRootRef}\n      vkuiClass={classNames(\n        \"Group\",\n        platform === IOS && \"Group--ios\",\n        // TODO v5.0.0 Новая адаптивность\n        `Group--sizeX-${sizeX}`,\n        `Group--${computedMode}`,\n        `Group--padding-${padding}`\n      )}\n    >\n      <div vkuiClass=\"Group__inner\">\n        {header}\n        {children}\n        {hasReactNode(description) && (\n          <Caption vkuiClass=\"Group__description\">{description}</Caption>\n        )}\n      </div>\n      {separatorElement}\n    </section>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Group\n */\nexport const Group = withAdaptivity(GroupComponent, { sizeX: true });\n\nGroup.displayName = \"Group\";\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,GAAT;AACA,SAASC,UAAT;AAEA,SAASC,WAAT;AACA,SAASC,OAAT;AACA,SAASC,SAAT;AACA,SAASC,YAAT;AACA,SAASC,OAAT;AACA,SACEC,cADF,EAGEC,QAHF;AAKA,SAASC,gBAAT;;AA6BA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,OAUL;EAAA,IAThBC,MASgB,QAThBA,MASgB;EAAA,IARhBC,WAQgB,QARhBA,WAQgB;EAAA,IAPhBC,QAOgB,QAPhBA,QAOgB;EAAA,0BANhBC,SAMgB;EAAA,IANhBA,SAMgB,+BANJ,MAMI;EAAA,IALhBC,UAKgB,QALhBA,UAKgB;EAAA,IAJhBC,IAIgB,QAJhBA,IAIgB;EAAA,wBAHhBC,OAGgB;EAAA,IAHhBA,OAGgB,6BAHN,GAGM;EAAA,IAFhBC,KAEgB,QAFhBA,KAEgB;EAAA,IADbC,SACa;;EAChB,wBAA0BpB,KAAK,CAACqB,UAAN,CAAiBX,gBAAjB,CAA1B;EAAA,IAAQY,aAAR,qBAAQA,aAAR;;EACA,IAAMC,QAAQ,GAAGpB,WAAW,EAA5B;EAEA,IAAIqB,YAAgC,GAAGP,IAAvC;;EAEA,IAAI,CAACA,IAAL,EAAW;IACTO,YAAY,GACVL,KAAK,KAAKV,QAAQ,CAACgB,OAAnB,IAA8BH,aAA9B,GAA8C,OAA9C,GAAwD,MAD1D;EAED;;EAED,IAAII,gBAAgB,GAAG,IAAvB;;EAEA,IAAIX,SAAS,KAAK,MAAlB,EAA0B;IACxB,IAAMY,kBAAkB,GAAGzB,UAAU,CACnC,kBADmC,EAEnCa,SAAS,KAAK,MAAd,IAAwB,yBAFW,CAArC;IAIAW,gBAAgB,GACdF,YAAY,KAAK,MAAjB,GACE,oBAAC,OAAD;MAAS,SAAS,EAAEG,kBAApB;MAAwC,IAAI,EAAE;IAA9C,EADF,GAGE,oBAAC,SAAD;MAAW,SAAS,EAAEA;IAAtB,EAJJ;EAMD;;EAED,OACE,4CACMP,SADN;IAEE,GAAG,EAAEJ,UAFP;IAGE,SAAS,EAAEd,UAAU,CACnB,OADmB,EAEnBqB,QAAQ,KAAKtB,GAAb,IAAoB,YAFD,EAGnB;IAHmB,uBAIHkB,KAJG,oBAKTK,YALS,4BAMDN,OANC;EAHvB,IAYE;IAAK,SAAS,EAAC;EAAf,GACGN,MADH,EAEGE,QAFH,EAGGR,YAAY,CAACO,WAAD,CAAZ,IACC,oBAAC,OAAD;IAAS,SAAS,EAAC;EAAnB,GAAyCA,WAAzC,CAJJ,CAZF,EAmBGa,gBAnBH,CADF;AAuBD,CA3DD;AA6DA;AACA;AACA;;;AACA,OAAO,IAAME,KAAK,GAAGpB,cAAc,CAACG,cAAD,EAAiB;EAAEQ,KAAK,EAAE;AAAT,CAAjB,CAA5B;AAEPS,KAAK,CAACC,WAAN,GAAoB,OAApB"}
+{"version":3,"file":"Group.js","names":["React","Platform","classNames","classNamesString","usePlatform","Spacing","Separator","hasReactNode","Footnote","ModalRootContext","useAdaptivity","getSizeXClassName","Group","props","header","description","children","separator","getRootRef","modeProps","mode","padding","restProps","useContext","isInsideModal","platform","sizeX","separatorClassName","IOS"],"sources":["../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Platform } from \"../../lib/platform\";\nimport { classNames, 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 { ModalRootContext } from \"../ModalRoot/ModalRootContext\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { getSizeXClassName } from \"../../helpers/getSizeXClassName\";\nimport \"./Group.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\n/**\n * @see https://vkcom.github.io/VKUI/#/Group\n */\nexport const Group = (props: GroupProps) => {\n  const {\n    header,\n    description,\n    children,\n    separator = \"auto\",\n    getRootRef,\n    mode: modeProps,\n    padding = \"m\",\n    ...restProps\n  } = props;\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 separatorClassName = classNamesString(\n    \"Group__separator\",\n    separator === \"show\" && \"Group__separator--force\"\n  );\n\n  return (\n    <section\n      {...restProps}\n      ref={getRootRef}\n      vkuiClass={classNames(\n        \"Group\",\n        platform === Platform.IOS && \"Group--ios\",\n        getSizeXClassName(\"Group\", sizeX),\n        mode && `Group--mode-${mode}`,\n        `Group--padding-${padding}`\n      )}\n    >\n      <div vkuiClass=\"Group__inner\">\n        {header}\n        {children}\n        {hasReactNode(description) && (\n          <Footnote vkuiClass=\"Group__description\">{description}</Footnote>\n        )}\n      </div>\n      {separator !== \"hide\" && (\n        <React.Fragment>\n          <Spacing\n            vkuiClass={classNames(\n              separatorClassName,\n              \"Group__separator--spacing\"\n            )}\n            size={16}\n          />\n          <Separator\n            vkuiClass={classNames(\n              separatorClassName,\n              \"Group__separator--separator\"\n            )}\n          />\n        </React.Fragment>\n      )}\n    </section>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,QAAT;AACA,SAASC,UAAT,EAAqBC,gBAArB;AAEA,SAASC,WAAT;AACA,SAASC,OAAT;AACA,SAASC,SAAT;AACA,SAASC,YAAT;AACA,SAASC,QAAT;AACA,SAASC,gBAAT;AACA,SAASC,aAAT;AACA,SAASC,iBAAT;;AA4BA;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD,EAAuB;EAC1C,IACEC,MADF,GASID,KATJ,CACEC,MADF;EAAA,IAEEC,WAFF,GASIF,KATJ,CAEEE,WAFF;EAAA,IAGEC,QAHF,GASIH,KATJ,CAGEG,QAHF;EAAA,uBASIH,KATJ,CAIEI,SAJF;EAAA,IAIEA,SAJF,iCAIc,MAJd;EAAA,IAKEC,UALF,GASIL,KATJ,CAKEK,UALF;EAAA,IAMQC,SANR,GASIN,KATJ,CAMEO,IANF;EAAA,qBASIP,KATJ,CAOEQ,OAPF;EAAA,IAOEA,OAPF,+BAOY,GAPZ;EAAA,IAQKC,SARL,4BASIT,KATJ;;EAUA,wBAA0Bb,KAAK,CAACuB,UAAN,CAAiBd,gBAAjB,CAA1B;EAAA,IAAQe,aAAR,qBAAQA,aAAR;;EACA,IAAMC,QAAQ,GAAGrB,WAAW,EAA5B;;EACA,qBAAkBM,aAAa,EAA/B;EAAA,IAAQgB,KAAR,kBAAQA,KAAR;;EAEA,IAAIN,IAAiC,GAAGD,SAAxC;;EAEA,IAAI,CAACA,SAAL,EAAgB;IACd;IACAC,IAAI,GAAGI,aAAa,GAAG,OAAH,GAAa,MAAjC;EACD;;EAED,IAAMG,kBAAkB,GAAGxB,gBAAgB,CACzC,kBADyC,EAEzCc,SAAS,KAAK,MAAd,IAAwB,yBAFiB,CAA3C;EAKA,OACE,4CACMK,SADN;IAEE,GAAG,EAAEJ,UAFP;IAGE,SAAS,EAAEhB,UAAU,CACnB,OADmB,EAEnBuB,QAAQ,KAAKxB,QAAQ,CAAC2B,GAAtB,IAA6B,YAFV,EAGnBjB,iBAAiB,CAAC,OAAD,EAAUe,KAAV,CAHE,EAInBN,IAAI,0BAAmBA,IAAnB,CAJe,2BAKDC,OALC;EAHvB,IAWE;IAAK,SAAS,EAAC;EAAf,GACGP,MADH,EAEGE,QAFH,EAGGT,YAAY,CAACQ,WAAD,CAAZ,IACC,oBAAC,QAAD;IAAU,SAAS,EAAC;EAApB,GAA0CA,WAA1C,CAJJ,CAXF,EAkBGE,SAAS,KAAK,MAAd,IACC,oBAAC,KAAD,CAAO,QAAP,QACE,oBAAC,OAAD;IACE,SAAS,EAAEf,UAAU,CACnByB,kBADmB,EAEnB,2BAFmB,CADvB;IAKE,IAAI,EAAE;EALR,EADF,EAQE,oBAAC,SAAD;IACE,SAAS,EAAEzB,UAAU,CACnByB,kBADmB,EAEnB,6BAFmB;EADvB,EARF,CAnBJ,CADF;AAsCD,CAjEM"}

package/dist/components/Header/Header.js

@@ -8,7 +8,7 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode, isPrimitiveReactNode } from "../../lib/utils";
 import { Platform } from "../../lib/platform";
 import { Headline } from "../Typography/Headline/Headline";
-import { Caption } from "../Typography/Caption/Caption";
+import { Footnote } from "../Typography/Footnote/Footnote";
 import { Title } from "../Typography/Title/Title";
 import { Text } from "../Typography/Text/Text";
 import { Subhead } from "../Typography/Subhead/Subhead";
@@ -28,7 +28,7 @@ var HeaderContent = function HeaderContent(_ref) {
         }, restProps));
 
       case "secondary":
-        return createScopedElement(Caption, _extends({
+        return createScopedElement(Footnote, _extends({
           weight: "2",
           caps: true
         }, restProps));
@@ -44,7 +44,7 @@ var HeaderContent = function HeaderContent(_ref) {
 
       case "secondary":
       case "tertiary":
-        return createScopedElement(Caption, restProps);
+        return createScopedElement(Footnote, restProps);
     }
   }
 
@@ -56,7 +56,7 @@ var HeaderContent = function HeaderContent(_ref) {
       }, restProps));
 
     case "secondary":
-      return createScopedElement(Caption, _extends({
+      return createScopedElement(Footnote, _extends({
         weight: "1",
         caps: true
       }, restProps));
@@ -82,7 +82,7 @@ export var Header = function Header(_ref2) {
 
   var platform = usePlatform();
   var AsideTypography = platform === Platform.VKCOM ? Subhead : Text;
-  var SubtitleTypography = mode === "secondary" ? Subhead : Caption;
+  var SubtitleTypography = mode === "secondary" ? Subhead : Footnote;
   return createScopedElement("header", _extends({}, restProps, {
     ref: getRootRef,
     vkuiClass: classNames("Header", platform === Platform.VKCOM && "Header--vkcom", platform === Platform.ANDROID && "Header--android", platform === Platform.IOS && "Header--ios", "Header--mode-".concat(mode), isPrimitiveReactNode(indicator) && "Header--pi")
@@ -95,7 +95,7 @@ export var Header = function Header(_ref2) {
     platform: platform
   }, createScopedElement("span", {
     vkuiClass: classNames("Header__content-in", multiline && "Header__content-in--multiline")
-  }, children), hasReactNode(indicator) && createScopedElement(Caption, {
+  }, children), hasReactNode(indicator) && createScopedElement(Footnote, {
     vkuiClass: "Header__indicator",
     weight: mode === "primary" || mode === "secondary" ? "1" : undefined
   }, indicator)), hasReactNode(subtitle) && createScopedElement(SubtitleTypography, {

package/dist/components/Header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","names":["classNames","usePlatform","hasReactNode","isPrimitiveReactNode","Platform","Headline","Caption","Title","Text","Subhead","HeaderContent","platform","mode","restProps","IOS","VKCOM","Header","children","subtitle","indicator","aside","getRootRef","multiline","AsideTypography","SubtitleTypography","ANDROID","undefined"],"sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { HasComponent, HasPlatform, HasRootRef } from \"../../types\";\nimport { hasReactNode, isPrimitiveReactNode } from \"../../lib/utils\";\nimport { Platform } from \"../../lib/platform\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { Title } from \"../Typography/Title/Title\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport \"./Header.css\";\n\nexport interface HeaderProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement> {\n  mode?: \"primary\" | \"secondary\" | \"tertiary\";\n  subtitle?: React.ReactNode;\n  /**\n   * Допускаются иконки, текст, Link\n   */\n  aside?: React.ReactNode;\n  /**\n   * Допускаются текст, Indicator\n   */\n  indicator?: React.ReactNode;\n  multiline?: boolean;\n}\n\ntype HeaderContentProps = Pick<HeaderProps, \"children\" | \"mode\"> &\n  HasPlatform &\n  HasComponent;\n\nconst HeaderContent = ({\n  platform,\n  mode,\n  ...restProps\n}: HeaderContentProps) => {\n  if (platform === Platform.IOS) {\n    switch (mode) {\n      case \"primary\":\n      case \"tertiary\":\n        return <Title weight=\"1\" level=\"3\" {...restProps} />;\n      case \"secondary\":\n        return <Caption weight=\"2\" caps {...restProps} />;\n    }\n  }\n\n  if (platform === Platform.VKCOM) {\n    switch (mode) {\n      case \"primary\":\n        return <Headline weight=\"3\" {...restProps} />;\n      case \"secondary\":\n      case \"tertiary\":\n        return <Caption {...restProps} />;\n    }\n  }\n\n  switch (mode) {\n    case \"primary\":\n    case \"tertiary\":\n      return <Headline weight=\"2\" {...restProps} />;\n    case \"secondary\":\n      return <Caption weight=\"1\" caps {...restProps} />;\n  }\n\n  return null;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n  mode = \"primary\",\n  children,\n  subtitle,\n  indicator,\n  aside,\n  getRootRef,\n  multiline,\n  ...restProps\n}: HeaderProps) => {\n  const platform = usePlatform();\n\n  const AsideTypography = platform === Platform.VKCOM ? Subhead : Text;\n  const SubtitleTypography = mode === \"secondary\" ? Subhead : Caption;\n\n  return (\n    <header\n      {...restProps}\n      ref={getRootRef}\n      vkuiClass={classNames(\n        \"Header\",\n        platform === Platform.VKCOM && \"Header--vkcom\",\n        platform === Platform.ANDROID && \"Header--android\",\n        platform === Platform.IOS && \"Header--ios\",\n        `Header--mode-${mode}`,\n        isPrimitiveReactNode(indicator) && \"Header--pi\"\n      )}\n    >\n      <div vkuiClass=\"Header__main\">\n        <HeaderContent\n          vkuiClass=\"Header__content\"\n          Component=\"span\"\n          mode={mode}\n          platform={platform}\n        >\n          <span\n            vkuiClass={classNames(\n              \"Header__content-in\",\n              multiline && \"Header__content-in--multiline\"\n            )}\n          >\n            {children}\n          </span>\n          {hasReactNode(indicator) && (\n            <Caption\n              vkuiClass=\"Header__indicator\"\n              weight={\n                mode === \"primary\" || mode === \"secondary\" ? \"1\" : undefined\n              }\n            >\n              {indicator}\n            </Caption>\n          )}\n        </HeaderContent>\n\n        {hasReactNode(subtitle) && (\n          <SubtitleTypography vkuiClass=\"Header__subtitle\" Component=\"span\">\n            {subtitle}\n          </SubtitleTypography>\n        )}\n      </div>\n\n      {hasReactNode(aside) && (\n        <AsideTypography vkuiClass=\"Header__aside\" Component=\"span\">\n          {aside}\n        </AsideTypography>\n      )}\n    </header>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Header.js","names":["classNames","usePlatform","hasReactNode","isPrimitiveReactNode","Platform","Headline","Footnote","Title","Text","Subhead","HeaderContent","platform","mode","restProps","IOS","VKCOM","Header","children","subtitle","indicator","aside","getRootRef","multiline","AsideTypography","SubtitleTypography","ANDROID","undefined"],"sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { HasComponent, HasPlatform, HasRootRef } from \"../../types\";\nimport { hasReactNode, isPrimitiveReactNode } from \"../../lib/utils\";\nimport { Platform } from \"../../lib/platform\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { Title } from \"../Typography/Title/Title\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport \"./Header.css\";\n\nexport interface HeaderProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement> {\n  mode?: \"primary\" | \"secondary\" | \"tertiary\";\n  subtitle?: React.ReactNode;\n  /**\n   * Допускаются иконки, текст, Link\n   */\n  aside?: React.ReactNode;\n  /**\n   * Допускаются текст, Indicator\n   */\n  indicator?: React.ReactNode;\n  multiline?: boolean;\n}\n\ntype HeaderContentProps = Pick<HeaderProps, \"children\" | \"mode\"> &\n  HasPlatform &\n  HasComponent;\n\nconst HeaderContent = ({\n  platform,\n  mode,\n  ...restProps\n}: HeaderContentProps) => {\n  if (platform === Platform.IOS) {\n    switch (mode) {\n      case \"primary\":\n      case \"tertiary\":\n        return <Title weight=\"1\" level=\"3\" {...restProps} />;\n      case \"secondary\":\n        return <Footnote weight=\"2\" caps {...restProps} />;\n    }\n  }\n\n  if (platform === Platform.VKCOM) {\n    switch (mode) {\n      case \"primary\":\n        return <Headline weight=\"3\" {...restProps} />;\n      case \"secondary\":\n      case \"tertiary\":\n        return <Footnote {...restProps} />;\n    }\n  }\n\n  switch (mode) {\n    case \"primary\":\n    case \"tertiary\":\n      return <Headline weight=\"2\" {...restProps} />;\n    case \"secondary\":\n      return <Footnote weight=\"1\" caps {...restProps} />;\n  }\n\n  return null;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n  mode = \"primary\",\n  children,\n  subtitle,\n  indicator,\n  aside,\n  getRootRef,\n  multiline,\n  ...restProps\n}: HeaderProps) => {\n  const platform = usePlatform();\n\n  const AsideTypography = platform === Platform.VKCOM ? Subhead : Text;\n  const SubtitleTypography = mode === \"secondary\" ? Subhead : Footnote;\n\n  return (\n    <header\n      {...restProps}\n      ref={getRootRef}\n      vkuiClass={classNames(\n        \"Header\",\n        platform === Platform.VKCOM && \"Header--vkcom\",\n        platform === Platform.ANDROID && \"Header--android\",\n        platform === Platform.IOS && \"Header--ios\",\n        `Header--mode-${mode}`,\n        isPrimitiveReactNode(indicator) && \"Header--pi\"\n      )}\n    >\n      <div vkuiClass=\"Header__main\">\n        <HeaderContent\n          vkuiClass=\"Header__content\"\n          Component=\"span\"\n          mode={mode}\n          platform={platform}\n        >\n          <span\n            vkuiClass={classNames(\n              \"Header__content-in\",\n              multiline && \"Header__content-in--multiline\"\n            )}\n          >\n            {children}\n          </span>\n          {hasReactNode(indicator) && (\n            <Footnote\n              vkuiClass=\"Header__indicator\"\n              weight={\n                mode === \"primary\" || mode === \"secondary\" ? \"1\" : undefined\n              }\n            >\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n\n        {hasReactNode(subtitle) && (\n          <SubtitleTypography vkuiClass=\"Header__subtitle\" Component=\"span\">\n            {subtitle}\n          </SubtitleTypography>\n        )}\n      </div>\n\n      {hasReactNode(aside) && (\n        <AsideTypography vkuiClass=\"Header__aside\" Component=\"span\">\n          {aside}\n        </AsideTypography>\n      )}\n    </header>\n  );\n};\n"],"mappings":"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"}