@vkontakte/vkui 4.37.0 → 5.0.0

package/dist/cssm/components/DeviceConditionalRender/DeviceConditionalRender.js

@@ -0,0 +1,20 @@
+import { createScopedElement } from "../../lib/jsxRuntime";
+import * as React from "react";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { getViewWidthClassName } from "../../helpers/getViewWidthClassName";
+import { hasReactNode } from "../../lib/utils";
+import "./DeviceConditionalRender.css";
+export var DeviceConditionalRender = function DeviceConditionalRender(_ref) {
+  var mobile = _ref.mobile,
+      desktop = _ref.desktop;
+
+  var _useAdaptivity = useAdaptivity(),
+      viewWidth = _useAdaptivity.viewWidth;
+
+  return createScopedElement(React.Fragment, null, hasReactNode(mobile) && createScopedElement("div", {
+    vkuiClass: getViewWidthClassName("DeviceConditionalRender__mobile", viewWidth)
+  }, mobile), hasReactNode(desktop) && createScopedElement("div", {
+    vkuiClass: getViewWidthClassName("DeviceConditionalRender__desktop", viewWidth)
+  }, desktop));
+};
+//# sourceMappingURL=DeviceConditionalRender.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceConditionalRender.js","names":["React","useAdaptivity","getViewWidthClassName","hasReactNode","DeviceConditionalRender","mobile","desktop","viewWidth"],"sources":["../../../../src/components/DeviceConditionalRender/DeviceConditionalRender.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { getViewWidthClassName } from \"../../helpers/getViewWidthClassName\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport \"./DeviceConditionalRender.css\";\n\nexport interface DeviceConditionalRenderProps {\n  mobile?: React.ReactNode;\n  desktop?: React.ReactNode;\n}\n\nexport const DeviceConditionalRender = ({\n  mobile,\n  desktop,\n}: DeviceConditionalRenderProps) => {\n  const { viewWidth } = useAdaptivity();\n\n  return (\n    <React.Fragment>\n      {hasReactNode(mobile) && (\n        <div\n          vkuiClass={getViewWidthClassName(\n            \"DeviceConditionalRender__mobile\",\n            viewWidth\n          )}\n        >\n          {mobile}\n        </div>\n      )}\n      {hasReactNode(desktop) && (\n        <div\n          vkuiClass={getViewWidthClassName(\n            \"DeviceConditionalRender__desktop\",\n            viewWidth\n          )}\n        >\n          {desktop}\n        </div>\n      )}\n    </React.Fragment>\n  );\n};\n"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,aAAT;AACA,SAASC,qBAAT;AACA,SAASC,YAAT;AACA;AAOA,OAAO,IAAMC,uBAAuB,GAAG,SAA1BA,uBAA0B,OAGH;EAAA,IAFlCC,MAEkC,QAFlCA,MAEkC;EAAA,IADlCC,OACkC,QADlCA,OACkC;;EAClC,qBAAsBL,aAAa,EAAnC;EAAA,IAAQM,SAAR,kBAAQA,SAAR;;EAEA,OACE,oBAAC,KAAD,CAAO,QAAP,QACGJ,YAAY,CAACE,MAAD,CAAZ,IACC;IACE,SAAS,EAAEH,qBAAqB,CAC9B,iCAD8B,EAE9BK,SAF8B;EADlC,GAMGF,MANH,CAFJ,EAWGF,YAAY,CAACG,OAAD,CAAZ,IACC;IACE,SAAS,EAAEJ,qBAAqB,CAC9B,kCAD8B,EAE9BK,SAF8B;EADlC,GAMGD,OANH,CAZJ,CADF;AAwBD,CA9BM"}

package/dist/cssm/components/Div/Div.css

@@ -1 +1 @@
-.vkuiDiv{padding:12px 16px;padding:var(--vkui--size_base_padding_vertical--regular,12px) var(--vkui--size_base_padding_horizontal--regular,16px)}
+.vkuiDiv{padding:var(--vkui--size_base_padding_vertical--regular) var(--vkui--size_base_padding_horizontal--regular)}

package/dist/cssm/components/DropdownIcon/DropdownIcon.js

@@ -3,25 +3,21 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["opened"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import { Icon20Dropdown, Icon24ChevronDown, Icon24ChevronUp, Icon20ChevronUp } from "@vkontakte/icons";
-import { classNames } from "../../lib/classNames";
-import { SizeType } from "../AdaptivityProvider/AdaptivityContext";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { SizeYConditionalRender } from "../SizeYConditionalRender/SizeYConditionalRender";
 export var DropdownIcon = function DropdownIcon(_ref) {
   var _ref$opened = _ref.opened,
       opened = _ref$opened === void 0 ? false : _ref$opened,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
-  var _useAdaptivity = useAdaptivity(),
-      sizeY = _useAdaptivity.sizeY;
-
-  var Icon = sizeY === SizeType.COMPACT ? Icon20Dropdown : Icon24ChevronDown;
-
-  if (opened) {
-    Icon = sizeY === SizeType.COMPACT ? Icon20ChevronUp : Icon24ChevronUp;
-  }
-
-  return createScopedElement(Icon, _extends({
-    vkuiClass: classNames("DropdownIcon")
-  }, restProps));
+  var IconCompact = opened ? Icon20ChevronUp : Icon20Dropdown;
+  var IconRegular = opened ? Icon24ChevronUp : Icon24ChevronDown;
+  return createScopedElement(SizeYConditionalRender, {
+    compact: createScopedElement(IconCompact, _extends({
+      vkuiClass: "DropdownIcon"
+    }, restProps)),
+    regular: createScopedElement(IconRegular, _extends({
+      vkuiClass: "DropdownIcon"
+    }, restProps))
+  });
 };
 //# sourceMappingURL=DropdownIcon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownIcon.js","names":["Icon20Dropdown","Icon24ChevronDown","Icon24ChevronUp","Icon20ChevronUp","classNames","SizeType","useAdaptivity","DropdownIcon","opened","restProps","sizeY","Icon","COMPACT"],"sources":["../../../../src/components/DropdownIcon/DropdownIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  Icon20Dropdown,\n  Icon24ChevronDown,\n  Icon24ChevronUp,\n  Icon20ChevronUp,\n} from \"@vkontakte/icons\";\nimport { classNames } from \"../../lib/classNames\";\nimport { SizeType } from \"../AdaptivityProvider/AdaptivityContext\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\n\nexport interface DropdownIconProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  opened?: boolean;\n}\n\nexport const DropdownIcon = ({\n  opened = false,\n  ...restProps\n}: DropdownIconProps) => {\n  const { sizeY } = useAdaptivity();\n\n  let Icon = sizeY === SizeType.COMPACT ? Icon20Dropdown : Icon24ChevronDown;\n\n  if (opened) {\n    Icon = sizeY === SizeType.COMPACT ? Icon20ChevronUp : Icon24ChevronUp;\n  }\n\n  return <Icon vkuiClass={classNames(\"DropdownIcon\")} {...restProps} />;\n};\n"],"mappings":";;;;AACA,SACEA,cADF,EAEEC,iBAFF,EAGEC,eAHF,EAIEC,eAJF,QAKO,kBALP;AAMA,SAASC,UAAT;AACA,SAASC,QAAT;AACA,SAASC,aAAT;AAOA,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAGH;EAAA,uBAFvBC,MAEuB;EAAA,IAFvBA,MAEuB,4BAFd,KAEc;EAAA,IADpBC,SACoB;;EACvB,qBAAkBH,aAAa,EAA/B;EAAA,IAAQI,KAAR,kBAAQA,KAAR;;EAEA,IAAIC,IAAI,GAAGD,KAAK,KAAKL,QAAQ,CAACO,OAAnB,GAA6BZ,cAA7B,GAA8CC,iBAAzD;;EAEA,IAAIO,MAAJ,EAAY;IACVG,IAAI,GAAGD,KAAK,KAAKL,QAAQ,CAACO,OAAnB,GAA6BT,eAA7B,GAA+CD,eAAtD;EACD;;EAED,OAAO,oBAAC,IAAD;IAAM,SAAS,EAAEE,UAAU,CAAC,cAAD;EAA3B,GAAiDK,SAAjD,EAAP;AACD,CAbM"}
+{"version":3,"file":"DropdownIcon.js","names":["Icon20Dropdown","Icon24ChevronDown","Icon24ChevronUp","Icon20ChevronUp","SizeYConditionalRender","DropdownIcon","opened","restProps","IconCompact","IconRegular"],"sources":["../../../../src/components/DropdownIcon/DropdownIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  Icon20Dropdown,\n  Icon24ChevronDown,\n  Icon24ChevronUp,\n  Icon20ChevronUp,\n} from \"@vkontakte/icons\";\nimport { SizeYConditionalRender } from \"../SizeYConditionalRender/SizeYConditionalRender\";\n\nexport interface DropdownIconProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  opened?: boolean;\n}\n\nexport const DropdownIcon = ({\n  opened = false,\n  ...restProps\n}: DropdownIconProps) => {\n  const IconCompact = opened ? Icon20ChevronUp : Icon20Dropdown;\n  const IconRegular = opened ? Icon24ChevronUp : Icon24ChevronDown;\n\n  return (\n    <SizeYConditionalRender\n      compact={<IconCompact vkuiClass=\"DropdownIcon\" {...restProps} />}\n      regular={<IconRegular vkuiClass=\"DropdownIcon\" {...restProps} />}\n    />\n  );\n};\n"],"mappings":";;;;AACA,SACEA,cADF,EAEEC,iBAFF,EAGEC,eAHF,EAIEC,eAJF,QAKO,kBALP;AAMA,SAASC,sBAAT;AAOA,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAGH;EAAA,uBAFvBC,MAEuB;EAAA,IAFvBA,MAEuB,4BAFd,KAEc;EAAA,IADpBC,SACoB;;EACvB,IAAMC,WAAW,GAAGF,MAAM,GAAGH,eAAH,GAAqBH,cAA/C;EACA,IAAMS,WAAW,GAAGH,MAAM,GAAGJ,eAAH,GAAqBD,iBAA/C;EAEA,OACE,oBAAC,sBAAD;IACE,OAAO,EAAE,oBAAC,WAAD;MAAa,SAAS,EAAC;IAAvB,GAA0CM,SAA1C,EADX;IAEE,OAAO,EAAE,oBAAC,WAAD;MAAa,SAAS,EAAC;IAAvB,GAA0CA,SAA1C;EAFX,EADF;AAMD,CAbM"}

package/dist/cssm/components/Epic/Epic.d.ts

@@ -1,11 +1,10 @@
 import * as React from "react";
-import { AdaptivityContextInterface, AdaptivityProps } from "../AdaptivityProvider/AdaptivityContext";
 import "./Epic.css";
-export interface EpicProps extends React.HTMLAttributes<HTMLDivElement>, AdaptivityProps {
+export interface EpicProps extends React.HTMLAttributes<HTMLDivElement> {
     tabbar?: React.ReactNode;
     activeStory: string;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Epic
  */
-export declare const Epic: React.FC<Pick<EpicProps & AdaptivityContextInterface, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "role" | "tabIndex" | "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" | "activeStory" | "tabbar"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
+export declare const Epic: (props: EpicProps) => JSX.Element;

package/dist/cssm/components/Epic/Epic.js

@@ -1,34 +1,30 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["activeStory", "tabbar", "children", "viewWidth"];
+var _excluded = ["activeStory", "tabbar", "children"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
-import { withAdaptivity, ViewWidth } from "../../hoc/withAdaptivity";
 import { ScrollSaver } from "./ScrollSaver";
 import { getNavId } from "../../lib/getNavId";
 import { warnOnce } from "../../lib/warnOnce";
-import { SMALL_TABLET_SIZE } from "../AdaptivityProvider/AdaptivityProvider";
 import "./Epic.css";
 var warn = warnOnce("Epic");
+/**
+ * @see https://vkcom.github.io/VKUI/#/Epic
+ */
 
-var EpicComponent = function EpicComponent(_ref) {
-  var _ref2;
-
-  var activeStory = _ref.activeStory,
-      tabbar = _ref.tabbar,
-      children = _ref.children,
-      viewWidth = _ref.viewWidth,
-      restProps = _objectWithoutProperties(_ref, _excluded);
+export var Epic = function Epic(props) {
+  var _ref;
 
   var scroll = React.useRef({}).current;
 
-  if (process.env.NODE_ENV === "development" && !tabbar && viewWidth < ViewWidth.SMALL_TABLET) {
-    warn("\u041D\u0435 \u0440\u0435\u043A\u043E\u043C\u0435\u043D\u0434\u0443\u0435\u0442\u0441\u044F \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C Epic \u0431\u0435\u0437 Tabbar \u043F\u0440\u0438 \u0448\u0438\u0440\u0438\u043D\u0435 \u043E\u043A\u043D\u0430 \u043C\u0435\u043D\u044C\u0448\u0435 ".concat(SMALL_TABLET_SIZE, "px"));
-  }
+  var activeStory = props.activeStory,
+      tabbar = props.tabbar,
+      children = props.children,
+      restProps = _objectWithoutProperties(props, _excluded);
 
-  var story = (_ref2 = React.Children.toArray(children).find(function (story) {
+  var story = (_ref = React.Children.toArray(children).find(function (story) {
     return /*#__PURE__*/React.isValidElement(story) && getNavId(story.props, warn) === activeStory;
-  })) !== null && _ref2 !== void 0 ? _ref2 : null;
+  })) !== null && _ref !== void 0 ? _ref : null;
   return createScopedElement("div", _extends({}, restProps, {
     vkuiClass: "Epic"
   }), createScopedElement(ScrollSaver, {
@@ -39,13 +35,4 @@ var EpicComponent = function EpicComponent(_ref) {
     }
   }, story), tabbar);
 };
-/**
- * @see https://vkcom.github.io/VKUI/#/Epic
- */
-
-
-export var Epic = withAdaptivity(EpicComponent, {
-  viewWidth: true
-});
-Epic.displayName = "Epic";
 //# sourceMappingURL=Epic.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Epic.js","names":["React","withAdaptivity","ViewWidth","ScrollSaver","getNavId","warnOnce","SMALL_TABLET_SIZE","warn","EpicComponent","activeStory","tabbar","children","viewWidth","restProps","scroll","useRef","current","process","env","NODE_ENV","SMALL_TABLET","story","Children","toArray","find","isValidElement","props","value","Epic","displayName"],"sources":["../../../../src/components/Epic/Epic.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { withAdaptivity, ViewWidth } from \"../../hoc/withAdaptivity\";\nimport { ScrollSaver } from \"./ScrollSaver\";\nimport { getNavId } from \"../../lib/getNavId\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport {\n  AdaptivityContextInterface,\n  AdaptivityProps,\n} from \"../AdaptivityProvider/AdaptivityContext\";\nimport { SMALL_TABLET_SIZE } from \"../AdaptivityProvider/AdaptivityProvider\";\nimport \"./Epic.css\";\n\nexport interface EpicProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    AdaptivityProps {\n  tabbar?: React.ReactNode;\n  activeStory: string;\n}\n\nconst warn = warnOnce(\"Epic\");\n\nconst EpicComponent = ({\n  activeStory,\n  tabbar,\n  children,\n  viewWidth,\n  ...restProps\n}: EpicProps & AdaptivityContextInterface) => {\n  const scroll = React.useRef<{ [key: string]: number }>({}).current;\n\n  if (\n    process.env.NODE_ENV === \"development\" &&\n    !tabbar &&\n    viewWidth < ViewWidth.SMALL_TABLET\n  ) {\n    warn(\n      `Не рекомендуется использовать Epic без Tabbar при ширине окна меньше ${SMALL_TABLET_SIZE}px`\n    );\n  }\n  const story =\n    (React.Children.toArray(children).find(\n      (story) =>\n        React.isValidElement(story) &&\n        getNavId(story.props, warn) === activeStory\n    ) as React.ReactElement | undefined) ?? null;\n\n  return (\n    <div {...restProps} vkuiClass=\"Epic\">\n      <ScrollSaver\n        key={activeStory}\n        initialScroll={scroll[activeStory] || 0}\n        saveScroll={(value) => (scroll[activeStory] = value)}\n      >\n        {story}\n      </ScrollSaver>\n      {tabbar}\n    </div>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Epic\n */\nexport const Epic = withAdaptivity(EpicComponent, {\n  viewWidth: true,\n});\n\nEpic.displayName = \"Epic\";\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,cAAT,EAAyBC,SAAzB;AACA,SAASC,WAAT;AACA,SAASC,QAAT;AACA,SAASC,QAAT;AAKA,SAASC,iBAAT;AACA;AASA,IAAMC,IAAI,GAAGF,QAAQ,CAAC,MAAD,CAArB;;AAEA,IAAMG,aAAa,GAAG,SAAhBA,aAAgB,OAMwB;EAAA;;EAAA,IAL5CC,WAK4C,QAL5CA,WAK4C;EAAA,IAJ5CC,MAI4C,QAJ5CA,MAI4C;EAAA,IAH5CC,QAG4C,QAH5CA,QAG4C;EAAA,IAF5CC,SAE4C,QAF5CA,SAE4C;EAAA,IADzCC,SACyC;;EAC5C,IAAMC,MAAM,GAAGd,KAAK,CAACe,MAAN,CAAwC,EAAxC,EAA4CC,OAA3D;;EAEA,IACEC,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAAzB,IACA,CAACT,MADD,IAEAE,SAAS,GAAGV,SAAS,CAACkB,YAHxB,EAIE;IACAb,IAAI,qUACsED,iBADtE,QAAJ;EAGD;;EACD,IAAMe,KAAK,YACRrB,KAAK,CAACsB,QAAN,CAAeC,OAAf,CAAuBZ,QAAvB,EAAiCa,IAAjC,CACC,UAACH,KAAD;IAAA,OACE,aAAArB,KAAK,CAACyB,cAAN,CAAqBJ,KAArB,KACAjB,QAAQ,CAACiB,KAAK,CAACK,KAAP,EAAcnB,IAAd,CAAR,KAAgCE,WAFlC;EAAA,CADD,CADQ,yCAK+B,IAL1C;EAOA,OACE,wCAASI,SAAT;IAAoB,SAAS,EAAC;EAA9B,IACE,oBAAC,WAAD;IACE,GAAG,EAAEJ,WADP;IAEE,aAAa,EAAEK,MAAM,CAACL,WAAD,CAAN,IAAuB,CAFxC;IAGE,UAAU,EAAE,oBAACkB,KAAD;MAAA,OAAYb,MAAM,CAACL,WAAD,CAAN,GAAsBkB,KAAlC;IAAA;EAHd,GAKGN,KALH,CADF,EAQGX,MARH,CADF;AAYD,CArCD;AAuCA;AACA;AACA;;;AACA,OAAO,IAAMkB,IAAI,GAAG3B,cAAc,CAACO,aAAD,EAAgB;EAChDI,SAAS,EAAE;AADqC,CAAhB,CAA3B;AAIPgB,IAAI,CAACC,WAAL,GAAmB,MAAnB"}
+{"version":3,"file":"Epic.js","names":["React","ScrollSaver","getNavId","warnOnce","warn","Epic","props","scroll","useRef","current","activeStory","tabbar","children","restProps","story","Children","toArray","find","isValidElement","value"],"sources":["../../../../src/components/Epic/Epic.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ScrollSaver } from \"./ScrollSaver\";\nimport { getNavId } from \"../../lib/getNavId\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport \"./Epic.css\";\n\nexport interface EpicProps extends React.HTMLAttributes<HTMLDivElement> {\n  tabbar?: React.ReactNode;\n  activeStory: string;\n}\n\nconst warn = warnOnce(\"Epic\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Epic\n */\nexport const Epic = (props: EpicProps) => {\n  const scroll = React.useRef<{ [key: string]: number }>({}).current;\n  const { activeStory, tabbar, children, ...restProps } = props;\n\n  const story =\n    (React.Children.toArray(children).find(\n      (story) =>\n        React.isValidElement(story) &&\n        getNavId(story.props, warn) === activeStory\n    ) as React.ReactElement | undefined) ?? null;\n\n  return (\n    <div {...restProps} vkuiClass=\"Epic\">\n      <ScrollSaver\n        key={activeStory}\n        initialScroll={scroll[activeStory] || 0}\n        saveScroll={(value) => (scroll[activeStory] = value)}\n      >\n        {story}\n      </ScrollSaver>\n      {tabbar}\n    </div>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,WAAT;AACA,SAASC,QAAT;AACA,SAASC,QAAT;AACA;AAOA,IAAMC,IAAI,GAAGD,QAAQ,CAAC,MAAD,CAArB;AAEA;AACA;AACA;;AACA,OAAO,IAAME,IAAI,GAAG,SAAPA,IAAO,CAACC,KAAD,EAAsB;EAAA;;EACxC,IAAMC,MAAM,GAAGP,KAAK,CAACQ,MAAN,CAAwC,EAAxC,EAA4CC,OAA3D;;EACA,IAAQC,WAAR,GAAwDJ,KAAxD,CAAQI,WAAR;EAAA,IAAqBC,MAArB,GAAwDL,KAAxD,CAAqBK,MAArB;EAAA,IAA6BC,QAA7B,GAAwDN,KAAxD,CAA6BM,QAA7B;EAAA,IAA0CC,SAA1C,4BAAwDP,KAAxD;;EAEA,IAAMQ,KAAK,WACRd,KAAK,CAACe,QAAN,CAAeC,OAAf,CAAuBJ,QAAvB,EAAiCK,IAAjC,CACC,UAACH,KAAD;IAAA,OACE,aAAAd,KAAK,CAACkB,cAAN,CAAqBJ,KAArB,KACAZ,QAAQ,CAACY,KAAK,CAACR,KAAP,EAAcF,IAAd,CAAR,KAAgCM,WAFlC;EAAA,CADD,CADQ,uCAK+B,IAL1C;EAOA,OACE,wCAASG,SAAT;IAAoB,SAAS,EAAC;EAA9B,IACE,oBAAC,WAAD;IACE,GAAG,EAAEH,WADP;IAEE,aAAa,EAAEH,MAAM,CAACG,WAAD,CAAN,IAAuB,CAFxC;IAGE,UAAU,EAAE,oBAACS,KAAD;MAAA,OAAYZ,MAAM,CAACG,WAAD,CAAN,GAAsBS,KAAlC;IAAA;EAHd,GAKGL,KALH,CADF,EAQGH,MARH,CADF;AAYD,CAvBM"}

package/dist/cssm/components/Epic/ScrollSaver.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 export interface ScrollSaverProps {
     initialScroll?: number;
-    saveScroll: (scroll: number) => any;
+    saveScroll: (this: void, scroll: number) => any;
     children?: React.ReactNode;
 }
 /**

package/dist/cssm/components/Epic/ScrollSaver.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollSaver.js","names":["React","ScrollContext","useIsomorphicLayoutEffect","ScrollSaver","children","initialScroll","saveScroll","useContext","getScroll","scrollTo","y"],"sources":["../../../../src/components/Epic/ScrollSaver.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ScrollContext } from \"../AppRoot/ScrollContext\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\n\nexport interface ScrollSaverProps {\n  initialScroll?: number;\n  saveScroll: (scroll: number) => any;\n  children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScrollSaver\n */\nexport const ScrollSaver = ({\n  children,\n  initialScroll,\n  saveScroll,\n}: ScrollSaverProps) => {\n  const { getScroll, scrollTo } = React.useContext(ScrollContext);\n  useIsomorphicLayoutEffect(() => {\n    if (typeof initialScroll === \"number\") {\n      scrollTo(0, initialScroll);\n    }\n    return () => saveScroll(getScroll().y);\n  }, []);\n  return <React.Fragment>{children}</React.Fragment>;\n};\n"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,aAAT;AACA,SAASC,yBAAT;;AAQA;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc,OAIH;EAAA,IAHtBC,QAGsB,QAHtBA,QAGsB;EAAA,IAFtBC,aAEsB,QAFtBA,aAEsB;EAAA,IADtBC,UACsB,QADtBA,UACsB;;EACtB,wBAAgCN,KAAK,CAACO,UAAN,CAAiBN,aAAjB,CAAhC;EAAA,IAAQO,SAAR,qBAAQA,SAAR;EAAA,IAAmBC,QAAnB,qBAAmBA,QAAnB;;EACAP,yBAAyB,CAAC,YAAM;IAC9B,IAAI,OAAOG,aAAP,KAAyB,QAA7B,EAAuC;MACrCI,QAAQ,CAAC,CAAD,EAAIJ,aAAJ,CAAR;IACD;;IACD,OAAO;MAAA,OAAMC,UAAU,CAACE,SAAS,GAAGE,CAAb,CAAhB;IAAA,CAAP;EACD,CALwB,EAKtB,EALsB,CAAzB;EAMA,OAAO,oBAAC,KAAD,CAAO,QAAP,QAAiBN,QAAjB,CAAP;AACD,CAbM"}
+{"version":3,"file":"ScrollSaver.js","names":["React","ScrollContext","useIsomorphicLayoutEffect","ScrollSaver","children","initialScroll","saveScroll","useContext","getScroll","scrollTo","y"],"sources":["../../../../src/components/Epic/ScrollSaver.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ScrollContext } from \"../AppRoot/ScrollContext\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\n\nexport interface ScrollSaverProps {\n  initialScroll?: number;\n  saveScroll: (this: void, scroll: number) => any;\n  children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScrollSaver\n */\nexport const ScrollSaver = ({\n  children,\n  initialScroll,\n  saveScroll,\n}: ScrollSaverProps) => {\n  const { getScroll, scrollTo } = React.useContext(ScrollContext);\n  useIsomorphicLayoutEffect(() => {\n    if (typeof initialScroll === \"number\") {\n      scrollTo(0, initialScroll);\n    }\n    return () => saveScroll(getScroll().y);\n  }, []);\n  return <React.Fragment>{children}</React.Fragment>;\n};\n"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,aAAT;AACA,SAASC,yBAAT;;AAQA;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc,OAIH;EAAA,IAHtBC,QAGsB,QAHtBA,QAGsB;EAAA,IAFtBC,aAEsB,QAFtBA,aAEsB;EAAA,IADtBC,UACsB,QADtBA,UACsB;;EACtB,wBAAgCN,KAAK,CAACO,UAAN,CAAiBN,aAAjB,CAAhC;EAAA,IAAQO,SAAR,qBAAQA,SAAR;EAAA,IAAmBC,QAAnB,qBAAmBA,QAAnB;;EACAP,yBAAyB,CAAC,YAAM;IAC9B,IAAI,OAAOG,aAAP,KAAyB,QAA7B,EAAuC;MACrCI,QAAQ,CAAC,CAAD,EAAIJ,aAAJ,CAAR;IACD;;IACD,OAAO;MAAA,OAAMC,UAAU,CAACE,SAAS,GAAGE,CAAb,CAAhB;IAAA,CAAP;EACD,CALwB,EAKtB,EALsB,CAAzB;EAMA,OAAO,oBAAC,KAAD,CAAO,QAAP,QAAiBN,QAAjB,CAAP;AACD,CAbM"}

package/dist/cssm/components/File/File.d.ts

@@ -2,12 +2,8 @@ import * as React from "react";
 import { VKUIButtonProps } from "../Button/Button";
 import { HasRef, HasRootRef } from "../../types";
 export interface FileProps extends Omit<VKUIButtonProps, "type">, Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size">, HasRef<HTMLInputElement>, HasRootRef<HTMLElement> {
-    /**
-     * @deprecated Будет удалено в 5.0.0. Используйте size
-     */
-    controlSize?: VKUIButtonProps["size"];
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/File
  */
-export declare const File: ({ children, align, controlSize, size, mode, stretched, before, after, loading, className, style, getRef, getRootRef, appearance, ...restProps }: FileProps) => JSX.Element;
+export declare const File: ({ children, align, size, mode, stretched, before, after, loading, className, style, getRef, getRootRef, appearance, ...restProps }: FileProps) => JSX.Element;

package/dist/cssm/components/File/File.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "align", "controlSize", "size", "mode", "stretched", "before", "after", "loading", "className", "style", "getRef", "getRootRef", "appearance"];
+var _excluded = ["children", "align", "size", "mode", "stretched", "before", "after", "loading", "className", "style", "getRef", "getRootRef", "appearance"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import { getClassName } from "../../helpers/getClassName";
 import { Button } from "../Button/Button";
@@ -15,7 +15,6 @@ export var File = function File(_ref) {
       children = _ref$children === void 0 ? "Выберите файл" : _ref$children,
       _ref$align = _ref.align,
       align = _ref$align === void 0 ? "left" : _ref$align,
-      controlSize = _ref.controlSize,
       size = _ref.size,
       mode = _ref.mode,
       stretched = _ref.stretched,
@@ -37,9 +36,8 @@ export var File = function File(_ref) {
     className: className,
     stretched: stretched,
     mode: mode,
-    appearance: appearance // TODO: v5.0.0 удалить controlSize
-    ,
-    size: size !== null && size !== void 0 ? size : controlSize,
+    appearance: appearance,
+    size: size,
     before: before,
     after: after,
     loading: loading,

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

@@ -1 +1 @@
-{"version":3,"file":"File.js","names":["getClassName","Button","usePlatform","VisuallyHiddenInput","File","children","align","controlSize","size","mode","stretched","before","after","loading","className","style","getRef","getRootRef","appearance","restProps","platform","disabled"],"sources":["../../../../src/components/File/File.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { Button, VKUIButtonProps } from \"../Button/Button\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { VisuallyHiddenInput } from \"../VisuallyHiddenInput/VisuallyHiddenInput\";\n\nexport interface FileProps\n  extends Omit<VKUIButtonProps, \"type\">,\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, \"type\" | \"size\">,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLElement> {\n  /**\n   * @deprecated Будет удалено в 5.0.0. Используйте size\n   */\n  controlSize?: VKUIButtonProps[\"size\"];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/File\n */\nexport const File = ({\n  children = \"Выберите файл\",\n  align = \"left\",\n  // TODO: v5.0.0 удалить controlSize\n  controlSize,\n  size,\n  mode,\n  stretched,\n  before,\n  after,\n  loading,\n  className,\n  style,\n  getRef,\n  getRootRef,\n  appearance,\n  ...restProps\n}: FileProps) => {\n  const platform = usePlatform();\n\n  return (\n    <Button\n      Component=\"label\"\n      align={align}\n      vkuiClass={getClassName(\"File\", platform)}\n      className={className}\n      stretched={stretched}\n      mode={mode}\n      appearance={appearance}\n      // TODO: v5.0.0 удалить controlSize\n      size={size ?? controlSize}\n      before={before}\n      after={after}\n      loading={loading}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={restProps.disabled}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        vkuiClass=\"File__input\"\n        type=\"file\"\n        getRef={getRef}\n      />\n      {children}\n    </Button>\n  );\n};\n"],"mappings":";;;;AACA,SAASA,YAAT;AACA,SAASC,MAAT;AAEA,SAASC,WAAT;AACA,SAASC,mBAAT;;AAaA;AACA;AACA;AACA,OAAO,IAAMC,IAAI,GAAG,SAAPA,IAAO,OAiBH;EAAA,yBAhBfC,QAgBe;EAAA,IAhBfA,QAgBe,8BAhBJ,eAgBI;EAAA,sBAffC,KAee;EAAA,IAffA,KAee,2BAfP,MAeO;EAAA,IAbfC,WAae,QAbfA,WAae;EAAA,IAZfC,IAYe,QAZfA,IAYe;EAAA,IAXfC,IAWe,QAXfA,IAWe;EAAA,IAVfC,SAUe,QAVfA,SAUe;EAAA,IATfC,MASe,QATfA,MASe;EAAA,IARfC,KAQe,QARfA,KAQe;EAAA,IAPfC,OAOe,QAPfA,OAOe;EAAA,IANfC,SAMe,QANfA,SAMe;EAAA,IALfC,KAKe,QALfA,KAKe;EAAA,IAJfC,MAIe,QAJfA,MAIe;EAAA,IAHfC,UAGe,QAHfA,UAGe;EAAA,IAFfC,UAEe,QAFfA,UAEe;EAAA,IADZC,SACY;;EACf,IAAMC,QAAQ,GAAGlB,WAAW,EAA5B;EAEA,OACE,oBAAC,MAAD;IACE,SAAS,EAAC,OADZ;IAEE,KAAK,EAAEI,KAFT;IAGE,SAAS,EAAEN,YAAY,CAAC,MAAD,EAASoB,QAAT,CAHzB;IAIE,SAAS,EAAEN,SAJb;IAKE,SAAS,EAAEJ,SALb;IAME,IAAI,EAAED,IANR;IAOE,UAAU,EAAES,UAPd,CAQE;IARF;IASE,IAAI,EAAEV,IAAF,aAAEA,IAAF,cAAEA,IAAF,GAAUD,WAThB;IAUE,MAAM,EAAEI,MAVV;IAWE,KAAK,EAAEC,KAXT;IAYE,OAAO,EAAEC,OAZX;IAaE,KAAK,EAAEE,KAbT;IAcE,UAAU,EAAEE,UAdd;IAeE,QAAQ,EAAEE,SAAS,CAACE;EAftB,GAiBE,oBAAC,mBAAD,eACMF,SADN;IAEE,SAAS,EAAC,aAFZ;IAGE,IAAI,EAAC,MAHP;IAIE,MAAM,EAAEH;EAJV,GAjBF,EAuBGX,QAvBH,CADF;AA2BD,CA/CM"}
+{"version":3,"file":"File.js","names":["getClassName","Button","usePlatform","VisuallyHiddenInput","File","children","align","size","mode","stretched","before","after","loading","className","style","getRef","getRootRef","appearance","restProps","platform","disabled"],"sources":["../../../../src/components/File/File.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { Button, VKUIButtonProps } from \"../Button/Button\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { VisuallyHiddenInput } from \"../VisuallyHiddenInput/VisuallyHiddenInput\";\n\nexport interface FileProps\n  extends Omit<VKUIButtonProps, \"type\">,\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, \"type\" | \"size\">,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/File\n */\nexport const File = ({\n  children = \"Выберите файл\",\n  align = \"left\",\n  size,\n  mode,\n  stretched,\n  before,\n  after,\n  loading,\n  className,\n  style,\n  getRef,\n  getRootRef,\n  appearance,\n  ...restProps\n}: FileProps) => {\n  const platform = usePlatform();\n\n  return (\n    <Button\n      Component=\"label\"\n      align={align}\n      vkuiClass={getClassName(\"File\", platform)}\n      className={className}\n      stretched={stretched}\n      mode={mode}\n      appearance={appearance}\n      size={size}\n      before={before}\n      after={after}\n      loading={loading}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={restProps.disabled}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        vkuiClass=\"File__input\"\n        type=\"file\"\n        getRef={getRef}\n      />\n      {children}\n    </Button>\n  );\n};\n"],"mappings":";;;;AACA,SAASA,YAAT;AACA,SAASC,MAAT;AAEA,SAASC,WAAT;AACA,SAASC,mBAAT;;AAQA;AACA;AACA;AACA,OAAO,IAAMC,IAAI,GAAG,SAAPA,IAAO,OAeH;EAAA,yBAdfC,QAce;EAAA,IAdfA,QAce,8BAdJ,eAcI;EAAA,sBAbfC,KAae;EAAA,IAbfA,KAae,2BAbP,MAaO;EAAA,IAZfC,IAYe,QAZfA,IAYe;EAAA,IAXfC,IAWe,QAXfA,IAWe;EAAA,IAVfC,SAUe,QAVfA,SAUe;EAAA,IATfC,MASe,QATfA,MASe;EAAA,IARfC,KAQe,QARfA,KAQe;EAAA,IAPfC,OAOe,QAPfA,OAOe;EAAA,IANfC,SAMe,QANfA,SAMe;EAAA,IALfC,KAKe,QALfA,KAKe;EAAA,IAJfC,MAIe,QAJfA,MAIe;EAAA,IAHfC,UAGe,QAHfA,UAGe;EAAA,IAFfC,UAEe,QAFfA,UAEe;EAAA,IADZC,SACY;;EACf,IAAMC,QAAQ,GAAGjB,WAAW,EAA5B;EAEA,OACE,oBAAC,MAAD;IACE,SAAS,EAAC,OADZ;IAEE,KAAK,EAAEI,KAFT;IAGE,SAAS,EAAEN,YAAY,CAAC,MAAD,EAASmB,QAAT,CAHzB;IAIE,SAAS,EAAEN,SAJb;IAKE,SAAS,EAAEJ,SALb;IAME,IAAI,EAAED,IANR;IAOE,UAAU,EAAES,UAPd;IAQE,IAAI,EAAEV,IARR;IASE,MAAM,EAAEG,MATV;IAUE,KAAK,EAAEC,KAVT;IAWE,OAAO,EAAEC,OAXX;IAYE,KAAK,EAAEE,KAZT;IAaE,UAAU,EAAEE,UAbd;IAcE,QAAQ,EAAEE,SAAS,CAACE;EAdtB,GAgBE,oBAAC,mBAAD,eACMF,SADN;IAEE,SAAS,EAAC,aAFZ;IAGE,IAAI,EAAC,MAHP;IAIE,MAAM,EAAEH;EAJV,GAhBF,EAsBGV,QAtBH,CADF;AA0BD,CA5CM"}

package/dist/cssm/components/FixedLayout/FixedLayout.css

@@ -1,7 +1 @@
-.vkuiFixedLayout{box-sizing:border-box;left:auto;padding-left:0;padding-left:var(--safe-area-inset-left);padding-right:0;padding-right:var(--safe-area-inset-right);position:fixed;z-index:3}.vkuiFixedLayout--filled{background:#fff;background:var(--background_content,var(--vkui--color_background_content))}.vkuiFixedLayout--top{top:0;width:100%}.vkuiFixedLayout--bottom{bottom:0;padding-bottom:0;padding-bottom:var(--safe-area-inset-bottom);width:100%}.vkuiEpic .vkuiFixedLayout--bottom{padding-bottom:calc(48px + 0px);padding-bottom:calc(var(--tabbar_height) + var(--safe-area-inset-bottom))}.vkuiPanelHeader~* .vkuiFixedLayout--top:not(.vkuiPanelHeader__fixed),.vkuiPanelHeader~.vkuiFixedLayout--top{top:calc(56px + 0px);top:calc(var(--panelheader_height, var(--vkui--size_panel_header_height--regular)) + var(--safe-area-inset-top))}.vkuiPanelHeader--ios~* .vkuiFixedLayout--top:not(.vkuiPanelHeader__fixed),.vkuiPanelHeader--ios~.vkuiFixedLayout--top{top:calc(52px + 0px);top:calc(var(
-        --panelheader_height_ios,
-        var(--vkui--size_panel_header_height--regular)
-      ) + var(--safe-area-inset-top))}.vkuiPanelHeader--vkcom~* .vkuiFixedLayout--top:not(.vkuiPanelHeader__fixed),.vkuiPanelHeader--vkcom~.vkuiFixedLayout--top{top:calc(48px + 0px);top:calc(var(
-        --panelheader_height_vkcom,
-        var(--vkui--size_panel_header_height--regular)
-      ) + var(--safe-area-inset-top))}
+.vkuiFixedLayout{box-sizing:border-box;left:auto;padding-left:0;padding-left:var(--safe-area-inset-left);padding-right:0;padding-right:var(--safe-area-inset-right);position:fixed;z-index:3}.vkuiFixedLayout--filled{background:var(--vkui--color_background_content)}.vkuiFixedLayout--vertical-top{top:0;width:100%}.vkuiFixedLayout--vertical-bottom{bottom:0;padding-bottom:0;padding-bottom:var(--safe-area-inset-bottom);width:100%}.vkuiEpic .vkuiFixedLayout--vertical-bottom{padding-bottom:calc(48px + 0px);padding-bottom:calc(var(--tabbar_height) + var(--safe-area-inset-bottom))}.vkuiPanelHeader~* .vkuiFixedLayout--vertical-top:not(.vkuiPanelHeader__fixed),.vkuiPanelHeader~.vkuiFixedLayout--vertical-top{top:calc(var(--vkui--size_panel_header_height--regular) + 0px);top:calc(var(--vkui--size_panel_header_height--regular) + var(--safe-area-inset-top))}

package/dist/cssm/components/FixedLayout/FixedLayout.js

@@ -5,7 +5,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["children", "style", "vertical", "getRootRef", "getRef", "filled"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
-import { IOS } from "../../lib/platform";
+import { Platform } from "../../lib/platform";
 import { classNames } from "../../lib/classNames";
 import { SplitColContext } from "../SplitCol/SplitCol";
 import { TooltipContainer } from "../Tooltip/TooltipContainer";
@@ -40,15 +40,20 @@ export var FixedLayout = function FixedLayout(_ref) {
       colRef = _React$useContext.colRef;
 
   var doResize = function doResize() {
-    return setWidth(colRef !== null && colRef !== void 0 && colRef.current ? "".concat(colRef.current.offsetWidth, "px") : undefined);
+    if (colRef !== null && colRef !== void 0 && colRef.current) {
+      var computedStyle = getComputedStyle(colRef.current);
+      setWidth("".concat(colRef.current.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight), "px"));
+    } else {
+      setWidth(undefined);
+    }
   };
 
-  React.useEffect(doResize, [colRef]);
+  React.useEffect(doResize, [colRef, platform]);
   useGlobalEventListener(window, "resize", doResize);
   return createScopedElement(TooltipContainer, _extends({}, restProps, {
     fixed: true,
     ref: getRootRef,
-    vkuiClass: classNames("FixedLayout", platform === IOS && "FixedLayout--ios", filled && "FixedLayout--filled", "FixedLayout--".concat(vertical)),
+    vkuiClass: classNames("FixedLayout", platform === Platform.IOS && "FixedLayout--ios", filled && "FixedLayout--filled", vertical && "FixedLayout--vertical-".concat(vertical)),
     style: _objectSpread(_objectSpread({}, style), {}, {
       width: width
     })

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

@@ -1 +1 @@
-{"version":3,"file":"FixedLayout.js","names":["React","IOS","classNames","SplitColContext","TooltipContainer","useDOM","useGlobalEventListener","usePlatform","FixedLayout","children","style","vertical","getRootRef","getRef","filled","restProps","platform","useState","undefined","width","setWidth","window","useContext","colRef","doResize","current","offsetWidth","useEffect"],"sources":["../../../../src/components/FixedLayout/FixedLayout.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { IOS } from \"../../lib/platform\";\nimport { classNames } from \"../../lib/classNames\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { SplitColContext } from \"../SplitCol/SplitCol\";\nimport { TooltipContainer } from \"../Tooltip/TooltipContainer\";\nimport { useDOM } from \"../../lib/dom\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport \"./FixedLayout.css\";\n\nexport interface FixedLayoutProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  vertical?: \"top\" | \"bottom\";\n  /**\n   * Это свойство определяет, будет ли фон компонента окрашен в цвет фона контента.\n   * Это часто необходимо для фиксированных кнопок в нижней части экрана.\n   */\n  filled?: boolean;\n}\n\nexport interface FixedLayoutState {\n  position: \"absolute\" | null;\n  top: number;\n  bottom: number;\n  width: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FixedLayout\n */\nexport const FixedLayout = ({\n  children,\n  style,\n  vertical,\n  getRootRef,\n  getRef,\n  filled,\n  ...restProps\n}: FixedLayoutProps) => {\n  const platform = usePlatform();\n  const [width, setWidth] = React.useState<string | undefined>(undefined);\n  const { window } = useDOM();\n  const { colRef } = React.useContext(SplitColContext);\n  const doResize = () =>\n    setWidth(colRef?.current ? `${colRef.current.offsetWidth}px` : undefined);\n  React.useEffect(doResize, [colRef]);\n  useGlobalEventListener(window, \"resize\", doResize);\n\n  return (\n    <TooltipContainer\n      {...restProps}\n      fixed\n      ref={getRootRef}\n      vkuiClass={classNames(\n        \"FixedLayout\",\n        platform === IOS && \"FixedLayout--ios\",\n        filled && \"FixedLayout--filled\",\n        `FixedLayout--${vertical}`\n      )}\n      style={{ ...style, width }}\n    >\n      <div vkuiClass=\"FixedLayout__in\" ref={getRef}>\n        {children}\n      </div>\n    </TooltipContainer>\n  );\n};\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,GAAT;AACA,SAASC,UAAT;AAEA,SAASC,eAAT;AACA,SAASC,gBAAT;AACA,SAASC,MAAT;AACA,SAASC,sBAAT;AACA,SAASC,WAAT;AACA;;AAqBA;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc,OAQH;EAAA,IAPtBC,QAOsB,QAPtBA,QAOsB;EAAA,IANtBC,KAMsB,QANtBA,KAMsB;EAAA,IALtBC,QAKsB,QALtBA,QAKsB;EAAA,IAJtBC,UAIsB,QAJtBA,UAIsB;EAAA,IAHtBC,MAGsB,QAHtBA,MAGsB;EAAA,IAFtBC,MAEsB,QAFtBA,MAEsB;EAAA,IADnBC,SACmB;;EACtB,IAAMC,QAAQ,GAAGT,WAAW,EAA5B;;EACA,sBAA0BP,KAAK,CAACiB,QAAN,CAAmCC,SAAnC,CAA1B;EAAA;EAAA,IAAOC,KAAP;EAAA,IAAcC,QAAd;;EACA,cAAmBf,MAAM,EAAzB;EAAA,IAAQgB,MAAR,WAAQA,MAAR;;EACA,wBAAmBrB,KAAK,CAACsB,UAAN,CAAiBnB,eAAjB,CAAnB;EAAA,IAAQoB,MAAR,qBAAQA,MAAR;;EACA,IAAMC,QAAQ,GAAG,SAAXA,QAAW;IAAA,OACfJ,QAAQ,CAACG,MAAM,SAAN,IAAAA,MAAM,WAAN,IAAAA,MAAM,CAAEE,OAAR,aAAqBF,MAAM,CAACE,OAAP,CAAeC,WAApC,UAAsDR,SAAvD,CADO;EAAA,CAAjB;;EAEAlB,KAAK,CAAC2B,SAAN,CAAgBH,QAAhB,EAA0B,CAACD,MAAD,CAA1B;EACAjB,sBAAsB,CAACe,MAAD,EAAS,QAAT,EAAmBG,QAAnB,CAAtB;EAEA,OACE,oBAAC,gBAAD,eACMT,SADN;IAEE,KAAK,MAFP;IAGE,GAAG,EAAEH,UAHP;IAIE,SAAS,EAAEV,UAAU,CACnB,aADmB,EAEnBc,QAAQ,KAAKf,GAAb,IAAoB,kBAFD,EAGnBa,MAAM,IAAI,qBAHS,yBAIHH,QAJG,EAJvB;IAUE,KAAK,kCAAOD,KAAP;MAAcS,KAAK,EAALA;IAAd;EAVP,IAYE;IAAK,SAAS,EAAC,iBAAf;IAAiC,GAAG,EAAEN;EAAtC,GACGJ,QADH,CAZF,CADF;AAkBD,CApCM"}
+{"version":3,"file":"FixedLayout.js","names":["React","Platform","classNames","SplitColContext","TooltipContainer","useDOM","useGlobalEventListener","usePlatform","FixedLayout","children","style","vertical","getRootRef","getRef","filled","restProps","platform","useState","undefined","width","setWidth","window","useContext","colRef","doResize","current","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","IOS"],"sources":["../../../../src/components/FixedLayout/FixedLayout.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Platform } from \"../../lib/platform\";\nimport { classNames } from \"../../lib/classNames\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { SplitColContext } from \"../SplitCol/SplitCol\";\nimport { TooltipContainer } from \"../Tooltip/TooltipContainer\";\nimport { useDOM } from \"../../lib/dom\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport \"./FixedLayout.css\";\n\nexport interface FixedLayoutProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  vertical?: \"top\" | \"bottom\";\n  /**\n   * Это свойство определяет, будет ли фон компонента окрашен в цвет фона контента.\n   * Это часто необходимо для фиксированных кнопок в нижней части экрана.\n   */\n  filled?: boolean;\n}\n\nexport interface FixedLayoutState {\n  position: \"absolute\" | null;\n  top: number;\n  bottom: number;\n  width: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FixedLayout\n */\nexport const FixedLayout = ({\n  children,\n  style,\n  vertical,\n  getRootRef,\n  getRef,\n  filled,\n  ...restProps\n}: FixedLayoutProps) => {\n  const platform = usePlatform();\n  const [width, setWidth] = React.useState<string | undefined>(undefined);\n  const { window } = useDOM();\n  const { colRef } = React.useContext(SplitColContext);\n  const doResize = () => {\n    if (colRef?.current) {\n      const computedStyle = getComputedStyle(colRef.current);\n\n      setWidth(\n        `${\n          colRef.current.clientWidth -\n          parseFloat(computedStyle.paddingLeft) -\n          parseFloat(computedStyle.paddingRight)\n        }px`\n      );\n    } else {\n      setWidth(undefined);\n    }\n  };\n  React.useEffect(doResize, [colRef, platform]);\n  useGlobalEventListener(window, \"resize\", doResize);\n\n  return (\n    <TooltipContainer\n      {...restProps}\n      fixed\n      ref={getRootRef}\n      vkuiClass={classNames(\n        \"FixedLayout\",\n        platform === Platform.IOS && \"FixedLayout--ios\",\n        filled && \"FixedLayout--filled\",\n        vertical && `FixedLayout--vertical-${vertical}`\n      )}\n      style={{ ...style, width }}\n    >\n      <div vkuiClass=\"FixedLayout__in\" ref={getRef}>\n        {children}\n      </div>\n    </TooltipContainer>\n  );\n};\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,QAAT;AACA,SAASC,UAAT;AAEA,SAASC,eAAT;AACA,SAASC,gBAAT;AACA,SAASC,MAAT;AACA,SAASC,sBAAT;AACA,SAASC,WAAT;AACA;;AAqBA;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc,OAQH;EAAA,IAPtBC,QAOsB,QAPtBA,QAOsB;EAAA,IANtBC,KAMsB,QANtBA,KAMsB;EAAA,IALtBC,QAKsB,QALtBA,QAKsB;EAAA,IAJtBC,UAIsB,QAJtBA,UAIsB;EAAA,IAHtBC,MAGsB,QAHtBA,MAGsB;EAAA,IAFtBC,MAEsB,QAFtBA,MAEsB;EAAA,IADnBC,SACmB;;EACtB,IAAMC,QAAQ,GAAGT,WAAW,EAA5B;;EACA,sBAA0BP,KAAK,CAACiB,QAAN,CAAmCC,SAAnC,CAA1B;EAAA;EAAA,IAAOC,KAAP;EAAA,IAAcC,QAAd;;EACA,cAAmBf,MAAM,EAAzB;EAAA,IAAQgB,MAAR,WAAQA,MAAR;;EACA,wBAAmBrB,KAAK,CAACsB,UAAN,CAAiBnB,eAAjB,CAAnB;EAAA,IAAQoB,MAAR,qBAAQA,MAAR;;EACA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,GAAM;IACrB,IAAID,MAAJ,aAAIA,MAAJ,eAAIA,MAAM,CAAEE,OAAZ,EAAqB;MACnB,IAAMC,aAAa,GAAGC,gBAAgB,CAACJ,MAAM,CAACE,OAAR,CAAtC;MAEAL,QAAQ,WAEJG,MAAM,CAACE,OAAP,CAAeG,WAAf,GACAC,UAAU,CAACH,aAAa,CAACI,WAAf,CADV,GAEAD,UAAU,CAACH,aAAa,CAACK,YAAf,CAJN,QAAR;IAOD,CAVD,MAUO;MACLX,QAAQ,CAACF,SAAD,CAAR;IACD;EACF,CAdD;;EAeAlB,KAAK,CAACgC,SAAN,CAAgBR,QAAhB,EAA0B,CAACD,MAAD,EAASP,QAAT,CAA1B;EACAV,sBAAsB,CAACe,MAAD,EAAS,QAAT,EAAmBG,QAAnB,CAAtB;EAEA,OACE,oBAAC,gBAAD,eACMT,SADN;IAEE,KAAK,MAFP;IAGE,GAAG,EAAEH,UAHP;IAIE,SAAS,EAAEV,UAAU,CACnB,aADmB,EAEnBc,QAAQ,KAAKf,QAAQ,CAACgC,GAAtB,IAA6B,kBAFV,EAGnBnB,MAAM,IAAI,qBAHS,EAInBH,QAAQ,oCAA6BA,QAA7B,CAJW,CAJvB;IAUE,KAAK,kCAAOD,KAAP;MAAcS,KAAK,EAALA;IAAd;EAVP,IAYE;IAAK,SAAS,EAAC,iBAAf;IAAiC,GAAG,EAAEN;EAAtC,GACGJ,QADH,CAZF,CADF;AAkBD,CAjDM"}

package/dist/cssm/components/FocusVisible/FocusVisible.css

@@ -1 +1 @@
-[class$="--focus-visible"]>.vkuiFocusVisible{border-radius:inherit;bottom:2px;box-shadow:0 0 0 2px #2688eb;box-shadow:0 0 0 2px var(--accent,var(--vkui--color_stroke_accent));left:2px;overflow:hidden;pointer-events:none;position:absolute;right:2px;top:2px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:0}[class$="--focus-visible"]>.vkuiFocusVisible--outside{bottom:-2px;left:-2px;right:-2px;top:-2px}@media (prefers-reduced-motion:no-preference){[class$="--focus-visible"]>.vkuiFocusVisible{-webkit-animation:vkui-animation-focus-visible .15s ease-in-out forwards;animation:vkui-animation-focus-visible .15s ease-in-out forwards;-webkit-animation-delay:.01ms;animation-delay:.01ms;bottom:4px;left:4px;right:4px;top:4px;will-change:top,left,bottom,right}[class$="--focus-visible"]>.vkuiFocusVisible--outside{-webkit-animation-name:vkui-animation-focus-visible-outside;animation-name:vkui-animation-focus-visible-outside;bottom:0;left:0;right:0;top:0}@-webkit-keyframes vkui-animation-focus-visible{to{bottom:2px;left:2px;right:2px;top:2px;will-change:auto}}@keyframes vkui-animation-focus-visible{to{bottom:2px;left:2px;right:2px;top:2px;will-change:auto}}@-webkit-keyframes vkui-animation-focus-visible-outside{to{bottom:-2px;left:-2px;right:-2px;top:-2px;will-change:auto}}@keyframes vkui-animation-focus-visible-outside{to{bottom:-2px;left:-2px;right:-2px;top:-2px;will-change:auto}}}
+[class$="--focus-visible"]>.vkuiFocusVisible{border-radius:inherit;bottom:2px;box-shadow:0 0 0 2px var(--vkui--color_stroke_accent);left:2px;overflow:hidden;pointer-events:none;position:absolute;right:2px;top:2px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:0}[class$="--focus-visible"]>.vkuiFocusVisible--mode-outside{bottom:-2px;left:-2px;right:-2px;top:-2px}@media (prefers-reduced-motion:no-preference){[class$="--focus-visible"]>.vkuiFocusVisible{animation:vkui-animation-focus-visible .15s ease-in-out forwards;animation-delay:.01ms;bottom:4px;left:4px;right:4px;top:4px;will-change:top,left,bottom,right}[class$="--focus-visible"]>.vkuiFocusVisible--mode-outside{animation-name:vkui-animation-focus-visible-outside;bottom:0;left:0;right:0;top:0}@keyframes vkui-animation-focus-visible{to{bottom:2px;left:2px;right:2px;top:2px;will-change:auto}}@keyframes vkui-animation-focus-visible-outside{to{bottom:-2px;left:-2px;right:-2px;top:-2px;will-change:auto}}}

package/dist/cssm/components/FocusVisible/FocusVisible.js

@@ -9,7 +9,7 @@ export var FocusVisible = function FocusVisible(_ref) {
   var mode = _ref.mode;
   return createScopedElement("span", {
     "aria-hidden": "true",
-    vkuiClass: classNames("FocusVisible", "FocusVisible--".concat(mode))
+    vkuiClass: classNames("FocusVisible", "FocusVisible--mode-".concat(mode))
   });
 };
 //# sourceMappingURL=FocusVisible.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FocusVisible.js","names":["classNames","FocusVisible","mode"],"sources":["../../../../src/components/FocusVisible/FocusVisible.tsx"],"sourcesContent":["import { classNames } from \"../../lib/classNames\";\nimport \"./FocusVisible.css\";\n\nexport type FocusVisibleMode = \"inside\" | \"outside\";\n\nexport interface FocusVisibleProps {\n  mode: FocusVisibleMode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusVisible\n */\nexport const FocusVisible = ({ mode }: FocusVisibleProps) => (\n  <span\n    aria-hidden=\"true\"\n    vkuiClass={classNames(\"FocusVisible\", `FocusVisible--${mode}`)}\n  />\n);\n"],"mappings":";AAAA,SAASA,UAAT;AACA;;AAQA;AACA;AACA;AACA,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAe;EAAA,IAAGC,IAAH,QAAGA,IAAH;EAAA,OAC1B;IACE,eAAY,MADd;IAEE,SAAS,EAAEF,UAAU,CAAC,cAAD,0BAAkCE,IAAlC;EAFvB,EAD0B;AAAA,CAArB"}
+{"version":3,"file":"FocusVisible.js","names":["classNames","FocusVisible","mode"],"sources":["../../../../src/components/FocusVisible/FocusVisible.tsx"],"sourcesContent":["import { classNames } from \"../../lib/classNames\";\nimport \"./FocusVisible.css\";\n\nexport type FocusVisibleMode = \"inside\" | \"outside\";\n\nexport interface FocusVisibleProps {\n  mode: FocusVisibleMode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusVisible\n */\nexport const FocusVisible = ({ mode }: FocusVisibleProps) => (\n  <span\n    aria-hidden=\"true\"\n    vkuiClass={classNames(\"FocusVisible\", `FocusVisible--mode-${mode}`)}\n  />\n);\n"],"mappings":";AAAA,SAASA,UAAT;AACA;;AAQA;AACA;AACA;AACA,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAe;EAAA,IAAGC,IAAH,QAAGA,IAAH;EAAA,OAC1B;IACE,eAAY,MADd;IAEE,SAAS,EAAEF,UAAU,CAAC,cAAD,+BAAuCE,IAAvC;EAFvB,EAD0B;AAAA,CAArB"}

package/dist/cssm/components/Footer/Footer.css

@@ -1 +1 @@
-.vkuiFooter{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary));display:block;margin:24px 0;padding-bottom:0;padding-top:0;text-align:center}
+.vkuiFooter{color:var(--vkui--color_text_secondary);display:block;margin:24px 0;padding-bottom:0;padding-top:0;text-align:center}

package/dist/cssm/components/Footer/Footer.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"];
 import { createScopedElement } from "../../lib/jsxRuntime";
-import { Caption } from "../Typography/Caption/Caption";
+import { Footnote } from "../Typography/Footnote/Footnote";
 import "./Footer.css";
 
 /**
@@ -12,7 +12,7 @@ export var Footer = function Footer(_ref) {
   var children = _ref.children,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
-  return createScopedElement(Caption, _extends({
+  return createScopedElement(Footnote, _extends({
     Component: "footer"
   }, restProps, {
     vkuiClass: "Footer"

package/dist/cssm/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;AACA;;AAIA;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;AACA;;AAIA;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/cssm/components/FormField/FormField.css

@@ -1,9 +1 @@
-.vkuiFormField{align-items:center;box-sizing:border-box;display:flex;min-height:44px;min-height:var(--vkui--size_field_height--regular,44px);position:relative;z-index:1}.vkuiFormField>*{border-radius:inherit;z-index:6}.vkuiFormField--sizeY-compact{min-height:36px;min-height:var(--vkui--size_field_height--compact,36px)}.vkuiFormField__after,.vkuiFormField__before{align-content:center;align-items:center;color:#99a2ad;color:var(--icon_secondary,var(--vkui--color_icon_secondary));display:flex;flex-shrink:0;height:100%;justify-content:center;min-width:44px;min-width:var(--vkui--size_field_height--regular,44px);position:relative;z-index:7}.vkuiFormField--sizeY-compact .vkuiFormField__after,.vkuiFormField--sizeY-compact .vkuiFormField__before{height:36px;height:var(--vkui--size_field_height--compact,36px);min-width:36px;min-width:var(--vkui--size_field_height--compact,36px)}.vkuiFormField__before{color:#2688eb;color:var(--accent,var(--vkui--color_icon_accent))}.vkuiFormField__after{color:#99a2ad;color:var(--icon_secondary,var(--vkui--color_icon_secondary))}.vkuiFormField__border{border:1px solid transparent;border:var(--thin-border) solid transparent;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular,8px);box-sizing:border-box;height:100%;left:0;position:absolute;top:0;-webkit-transform-origin:left top;transform-origin:left top;width:100%;z-index:1}.vkuiFormField--default .vkuiFormField__border{background-color:#f2f3f5;background-color:var(
-    --field_background,var(--vkui--color_field_background)
-  );border-color:rgba(0,0,0,.12);border-color:var(--field_border,var(--vkui--color_field_border_alpha))}.vkuiFormField--status-error .vkuiFormField__border,.vkuiFormItem--error .vkuiFormField__border{background-color:#faebeb;background-color:var(
-    --field_error_background,var(--vkui--color_background_negative_tint)
-  );border-color:#e64646;border-color:var(--field_error_border,var(--vkui--color_stroke_negative));z-index:3}.vkuiFormField--status-valid .vkuiFormField__border,.vkuiFormItem--valid .vkuiFormField__border{border-color:#4bb34b;border-color:var(--field_valid_border,var(--vkui--color_stroke_positive));z-index:3}.vkuiFormField--disabled{cursor:default;opacity:.64;opacity:var(--vkui--opacity_disable_accessibility,.64);pointer-events:none}.vkuiFormField--hover .vkuiFormField__border{background-color:#f2f3f5;background-color:var(
-    --field_background,var(--vkui--color_field_background)
-  )}.vkuiFormField--default.vkuiFormField--hover .vkuiFormField__border{border-color:rgba(0,0,0,.24);border-color:var(
-    --icon_tertiary_alpha,var(--vkui--color_field_border_alpha--hover)
-  );z-index:4}.vkuiFormField :focus~.vkuiFormField__border,.vkuiFormField:focus-within .vkuiFormField__border{border-color:#2688eb;border-color:var(--accent,var(--vkui--color_stroke_accent));z-index:5}.vkuiModalCardBase__header+.vkuiFormField,.vkuiModalCardBase__subheader+.vkuiFormField{margin-top:16px}.vkuiSelect--pop-down .vkuiFormField__border{border-bottom-left-radius:0;border-bottom-right-radius:0}.vkuiSelect--pop-up .vkuiFormField__border{border-top-left-radius:0;border-top-right-radius:0}.vkuiCalendarHeader__picker .vkuiFormField__after{min-width:12px;padding-right:8px}.vkuiChipsInput .vkuiFormField__after{z-index:7}.vkuiFormLayoutGroup--segmented .vkuiFormField{z-index:auto}.vkuiFormLayoutGroup--segmented .vkuiRemovable__content>.vkuiFormItem:not(:first-of-type):not(:last-of-type) .vkuiFormField__border,.vkuiFormLayoutGroup--segmented>.vkuiFormItem:not(:first-of-type):not(:last-of-type) .vkuiFormField__border{border-radius:0}.vkuiFormLayoutGroup--segmented .vkuiRemovable__content>:first-of-type:not(:last-of-type) .vkuiFormField__border,.vkuiFormLayoutGroup--segmented>:first-of-type:not(:last-of-type) .vkuiFormField__border{border-bottom-right-radius:0;border-top-right-radius:0}.vkuiFormLayoutGroup--segmented .vkuiRemovable__content>.vkuiFormItem:not(:first-of-type):last-of-type .vkuiFormField__border,.vkuiFormLayoutGroup--segmented>.vkuiFormItem:not(:first-of-type):last-of-type .vkuiFormField__border{border-bottom-left-radius:0;border-top-left-radius:0}
+.vkuiFormField{align-items:center;box-sizing:border-box;display:flex;min-height:var(--vkui--size_field_height--regular);position:relative;z-index:1}.vkuiFormField--sizeY-compact{min-height:var(--vkui--size_field_height--compact)}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiFormField--sizeY-none{min-height:var(--vkui--size_field_height--compact)}}.vkuiFormField>*{border-radius:inherit;z-index:6}.vkuiFormField__after,.vkuiFormField__before{align-content:center;align-items:center;color:var(--vkui--color_icon_secondary);display:flex;flex-shrink:0;height:100%;justify-content:center;min-width:var(--vkui--size_field_height--regular);position:relative;z-index:7}.vkuiFormField--sizeY-compact .vkuiFormField__after,.vkuiFormField--sizeY-compact .vkuiFormField__before{height:var(--vkui--size_field_height--compact);min-width:var(--vkui--size_field_height--compact)}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiFormField--sizeY-none .vkuiFormField__after,.vkuiFormField--sizeY-none .vkuiFormField__before{height:var(--vkui--size_field_height--compact);min-width:var(--vkui--size_field_height--compact)}}.vkuiFormField__before{color:var(--vkui--color_icon_accent)}.vkuiFormField__after{color:var(--vkui--color_icon_secondary)}.vkuiFormField__border{border:1px solid transparent;border:var(--thin-border) solid transparent;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;height:100%;left:0;position:absolute;top:0;transform-origin:left top;width:100%;z-index:1}.vkuiFormField--mode-default .vkuiFormField__border{background-color:var(--vkui--color_field_background);border-color:var(--vkui--color_field_border_alpha)}.vkuiFormField--status-error .vkuiFormField__border,.vkuiFormItem--status-error .vkuiFormField__border{background-color:var(--vkui--color_background_negative_tint);border-color:var(--vkui--color_stroke_negative);z-index:3}.vkuiFormField--status-valid .vkuiFormField__border,.vkuiFormItem--status-valid .vkuiFormField__border{border-color:var(--vkui--color_stroke_positive);z-index:3}.vkuiFormField--disabled{cursor:default;opacity:var(--vkui--opacity_disable_accessibility);pointer-events:none}.vkuiFormField--hover .vkuiFormField__border{background-color:var(--vkui--color_field_background)}.vkuiFormField--mode-default.vkuiFormField--hover .vkuiFormField__border{border-color:var(--vkui--color_field_border_alpha--hover);z-index:4}.vkuiFormField :focus~.vkuiFormField__border,.vkuiFormField:focus-within .vkuiFormField__border{border-color:var(--vkui--color_stroke_accent);z-index:5}.vkuiModalCardBase__header+.vkuiFormField,.vkuiModalCardBase__subheader+.vkuiFormField{margin-top:16px}.vkuiSelect--pop-down .vkuiFormField__border{border-bottom-left-radius:0;border-bottom-right-radius:0}.vkuiSelect--pop-up .vkuiFormField__border{border-top-left-radius:0;border-top-right-radius:0}.vkuiCalendarHeader__picker .vkuiFormField__after{min-width:12px;padding-right:8px}.vkuiChipsInput .vkuiFormField__after{z-index:7}.vkuiFormLayoutGroup--segmented .vkuiFormField{z-index:auto}.vkuiFormLayoutGroup--segmented .vkuiRemovable__content>.vkuiFormItem:not(:first-of-type):not(:last-of-type) .vkuiFormField__border,.vkuiFormLayoutGroup--segmented>.vkuiFormItem:not(:first-of-type):not(:last-of-type) .vkuiFormField__border{border-radius:0}.vkuiFormLayoutGroup--segmented .vkuiRemovable__content>:first-of-type:not(:last-of-type) .vkuiFormField__border,.vkuiFormLayoutGroup--segmented>:first-of-type:not(:last-of-type) .vkuiFormField__border{border-bottom-right-radius:0;border-top-right-radius:0}.vkuiFormLayoutGroup--segmented .vkuiRemovable__content>.vkuiFormItem:not(:first-of-type):last-of-type .vkuiFormField__border,.vkuiFormLayoutGroup--segmented>.vkuiFormItem:not(:first-of-type):last-of-type .vkuiFormField__border{border-bottom-left-radius:0;border-top-left-radius:0}

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

@@ -6,11 +6,8 @@ import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { getSizeYClassName } from "../../helpers/getSizeYClassName";
 import "./FormField.css";
-export var FormFieldMode = {
-  default: "default",
-  plain: "plain"
-};
 
 /**
  * @see https://vkcom.github.io/VKUI/#/FormField
@@ -26,7 +23,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(),
@@ -53,8 +50,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/cssm/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;AACA;AAEA,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;AACA;;AAiCA;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/cssm/components/FormItem/FormItem.css

@@ -1 +1 @@
-.vkuiFormItem{display:block;padding:12px 16px;padding:var(--vkui--size_form_item_padding_vertical--regular,12px) var(--vkui--size_base_padding_horizontal--regular,16px)}.vkuiFormItem--removable{padding-left:0;padding-right:0}.vkuiFormItem__removable{flex-basis:0;flex-grow:1;flex-shrink:0;max-width:100%;min-width:1px;overflow:hidden;padding:0}.vkuiFormItem__top{color:#6d7885;color:var(--text_subhead,var(--vkui--color_text_subhead));overflow:hidden;padding-bottom:8px;padding-top:2px;text-overflow:ellipsis;white-space:nowrap}.vkuiFormItem__bottom{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary));padding-top:8px}.vkuiFormItem--error .vkuiFormItem__bottom{color:#e64646;color:var(--field_error_border,var(--vkui--color_text_negative))}.vkuiFormItem--valid .vkuiFormItem__bottom,.vkuiFormItem--verified .vkuiFormItem__bottom{color:#4bb34b;color:var(--field_valid_border,var(--vkui--color_text_positive))}.vkuiFormItem--sizeY-compact .vkuiFormItem__top{padding-bottom:6px}.vkuiFormItem--sizeY-compact .vkuiFormItem__bottom{padding-top:6px}.vkuiFormItem--ios{--formitem_padding:12px}.vkuiFormLayoutGroup--horizontal .vkuiFormItem{flex-basis:0;flex-grow:1;flex-shrink:0;max-width:100%;min-width:1px;padding:0}.vkuiFormLayoutGroup--horizontal:not(.vkuiFormLayoutGroup--segmented) .vkuiFormItem+.vkuiFormItem{margin-left:24px}.vkuiFormItem--withTop .vkuiFormItem__removable,.vkuiFormLayoutGroup--horizontal .vkuiFormItem--withTop{margin-top:calc(-2px - 18px - 8px);margin-top:calc(-2px - var(--vkui--font_subhead--line_height--regular,18px) - 8px)}.vkuiFormItem--withTop.vkuiFormItem--sizeY-compact .vkuiFormItem__removable,.vkuiFormLayoutGroup--horizontal .vkuiFormItem--withTop.vkuiFormItem--sizeY-compact{margin-top:calc(-2px - 16px - 6px);margin-top:calc(-2px - var(--vkui--font_subhead--line_height--compact,16px) - 6px)}
+.vkuiFormItem{display:block;padding:var(--vkui--size_form_item_padding_vertical--regular) var(--vkui--size_base_padding_horizontal--regular)}.vkuiFormItem--removable{padding-left:0;padding-right:0}.vkuiFormItem__removable{flex-basis:0;flex-grow:1;flex-shrink:0;max-width:100%;min-width:1px;overflow:hidden;padding:0}.vkuiFormItem__top{color:var(--vkui--color_text_subhead);overflow:hidden;padding-bottom:8px;padding-top:2px;text-overflow:ellipsis;white-space:nowrap}.vkuiFormItem__bottom{color:var(--vkui--color_text_secondary);padding-top:8px}.vkuiFormItem--status-error .vkuiFormItem__bottom{color:var(--vkui--color_text_negative)}.vkuiFormItem--status-valid .vkuiFormItem__bottom,.vkuiFormItem--verified .vkuiFormItem__bottom{color:var(--vkui--color_text_positive)}.vkuiFormItem--sizeY-compact .vkuiFormItem__top{padding-bottom:6px}.vkuiFormItem--sizeY-compact .vkuiFormItem__bottom{padding-top:6px}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiFormItem--sizeY-none .vkuiFormItem__top{padding-bottom:6px}.vkuiFormItem--sizeY-none .vkuiFormItem__bottom{padding-top:6px}}.vkuiFormLayoutGroup--mode-horizontal .vkuiFormItem{flex-basis:0;flex-grow:1;flex-shrink:0;max-width:100%;min-width:1px;padding:0}.vkuiFormLayoutGroup--mode-horizontal:not(.vkuiFormLayoutGroup--segmented) .vkuiFormItem+.vkuiFormItem{margin-left:24px}.vkuiFormItem--withTop .vkuiFormItem__removable,.vkuiFormLayoutGroup--mode-horizontal .vkuiFormItem--withTop{margin-top:calc(-2px - var(--vkui--font_subhead--line_height--regular) - 8px)}.vkuiFormItem--sizeY-compact.vkuiFormItem--withTop .vkuiFormItem__removable,.vkuiFormLayoutGroup--mode-horizontal .vkuiFormItem--sizeY-compact.vkuiFormItem--withTop{margin-top:calc(-2px - var(--vkui--font_subhead--line_height--compact) - 6px)}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiFormItem--sizeY-none.vkuiFormItem--withTop .vkuiFormItem__removable,.vkuiFormLayoutGroup--mode-horizontal .vkuiFormItem--sizeY-none.vkuiFormItem--withTop{margin-top:calc(-2px - var(--vkui--font_subhead--line_height--compact) - 6px)}}

package/dist/cssm/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";
 import "./FormItem.css";
 
 /**
@@ -33,7 +32,6 @@ export var FormItem = function FormItem(_ref) {
       getRootRef = _ref.getRootRef,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
-  var platform = usePlatform();
   var rootEl = useExternRef(getRootRef);
 
   var _useAdaptivity = useAdaptivity(),
@@ -41,13 +39,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) {