@vkontakte/vkui 5.0.2 → 5.1.0

package/dist/cssm/components/SplitCol/SplitCol.js

@@ -1,16 +1,48 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["children", "width", "maxWidth", "minWidth", "spaced", "animate", "fixed", "style", "autoSpaced", "stretchedOnMobile", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { getSizeXClassName } from "../../helpers/getSizeXClassName";
-import { getViewWidthClassName } from "../../helpers/getViewWidthClassName";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { BREAKPOINTS, ViewWidth } from "../../lib/adaptivity";
-import { useDOM } from "../../lib/dom";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { getSizeXClassName } from '../../helpers/getSizeXClassName';
+import { getViewWidthClassName } from '../../helpers/getViewWidthClassName';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { ViewWidth } from '../../lib/adaptivity';
+import { useObjectMemo } from '../../hooks/useObjectMemo';
+import { useMediaQueries } from '../../hooks/useMediaQueries';
+import { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';
 import "./SplitCol.module.css";
+function useTransitionAnimate(animateProp) {
+  var _useAdaptivity = useAdaptivity(),
+    viewWidth = _useAdaptivity.viewWidth;
+  var _React$useState = React.useState(Boolean(animateProp)),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    animate = _React$useState2[0],
+    setAnimate = _React$useState2[1];
+  var mediaQueries = useMediaQueries();
+  React.useEffect(function () {
+    if (animateProp !== undefined) {
+      setAnimate(animateProp);
+      return;
+    }
+    if (viewWidth !== undefined) {
+      setAnimate(viewWidth < ViewWidth.TABLET);
+      return;
+    }
+
+    // eslint-disable-next-line no-restricted-properties
+    var listener = function listener() {
+      return setAnimate(!mediaQueries.smallTabletPlus.matches);
+    };
+    listener();
+    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);
+    return function () {
+      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);
+    };
+  }, [animateProp, viewWidth, mediaQueries]);
+  return animate;
+}
 export var SplitColContext = /*#__PURE__*/React.createContext({
   colRef: null,
   animate: true
@@ -27,7 +59,7 @@ export var SplitCol = function SplitCol(props) {
     maxWidth = props.maxWidth,
     minWidth = props.minWidth,
     spaced = props.spaced,
-    _animate = props.animate,
+    animateProp = props.animate,
     fixed = props.fixed,
     style = props.style,
     autoSpaced = props.autoSpaced,
@@ -35,28 +67,14 @@ export var SplitCol = function SplitCol(props) {
     className = props.className,
     restProps = _objectWithoutProperties(props, _excluded);
   var baseRef = React.useRef(null);
-  var _useAdaptivity = useAdaptivity(),
-    viewWidth = _useAdaptivity.viewWidth,
-    sizeX = _useAdaptivity.sizeX;
-  var _React$useState = React.useState(Boolean(_animate)),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    animate = _React$useState2[0],
-    setAnimate = _React$useState2[1];
-  var _useDOM = useDOM(),
-    window = _useDOM.window;
-  React.useEffect(function () {
-    if (_animate === undefined) {
-      setAnimate(viewWidth !== undefined ? viewWidth < ViewWidth.TABLET : window.innerWidth < BREAKPOINTS.SMALL_TABLET);
-    } else {
-      setAnimate(_animate);
-    }
-  }, [_animate, viewWidth, window]);
-  var contextValue = React.useMemo(function () {
-    return {
-      colRef: baseRef,
-      animate: animate
-    };
-  }, [baseRef, animate]);
+  var _useAdaptivity2 = useAdaptivity(),
+    viewWidth = _useAdaptivity2.viewWidth,
+    sizeX = _useAdaptivity2.sizeX;
+  var animate = useTransitionAnimate(animateProp);
+  var contextValue = useObjectMemo({
+    colRef: baseRef,
+    animate: animate
+  });
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
     style: _objectSpread(_objectSpread({}, style), {}, {
       width: width,
@@ -64,7 +82,7 @@ export var SplitCol = function SplitCol(props) {
       minWidth: minWidth
     }),
     ref: baseRef,
-    className: classNamesString("vkuiSplitCol", getSizeXClassName("vkuiSplitCol", sizeX), getViewWidthClassName("vkuiSplitCol", viewWidth), spaced && "vkuiSplitCol--spaced", spaced === undefined && "vkuiSplitCol--spaced-none", autoSpaced && "vkuiSplitCol--spaced-auto", fixed && "vkuiSplitCol--fixed", stretchedOnMobile && "vkuiSplitCol--stretched-on-mobile", className)
+    className: classNames("vkuiSplitCol", getSizeXClassName("vkuiSplitCol", sizeX), getViewWidthClassName("vkuiSplitCol", viewWidth), spaced && "vkuiSplitCol--spaced", spaced === undefined && "vkuiSplitCol--spaced-none", autoSpaced && "vkuiSplitCol--spaced-auto", fixed && "vkuiSplitCol--fixed", stretchedOnMobile && "vkuiSplitCol--stretched-on-mobile", className)
   }), /*#__PURE__*/React.createElement(SplitColContext.Provider, {
     value: contextValue
   }, fixed ? /*#__PURE__*/React.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"SplitCol.js","names":["React","classNamesString","getSizeXClassName","getViewWidthClassName","useAdaptivity","BREAKPOINTS","ViewWidth","useDOM","SplitColContext","createContext","colRef","animate","useSplitCol","useContext","SplitCol","props","children","width","maxWidth","minWidth","spaced","_animate","fixed","style","autoSpaced","stretchedOnMobile","className","restProps","baseRef","useRef","viewWidth","sizeX","useState","Boolean","setAnimate","window","useEffect","undefined","TABLET","innerWidth","SMALL_TABLET","contextValue","useMemo"],"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { getSizeXClassName } from \"../../helpers/getSizeXClassName\";\nimport { getViewWidthClassName } from \"../../helpers/getViewWidthClassName\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { BREAKPOINTS, ViewWidth } from \"../../lib/adaptivity\";\nimport { useDOM } from \"../../lib/dom\";\nimport styles from \"./SplitCol.module.css\";\n\nexport interface SplitColContextProps {\n  colRef: React.RefObject<HTMLDivElement> | null;\n  animate: boolean;\n}\n\nexport const SplitColContext = React.createContext<SplitColContextProps>({\n  colRef: null,\n  animate: true,\n});\n\nexport const useSplitCol = () => React.useContext(SplitColContext);\n\nexport interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины\n   */\n  spaced?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    spaced,\n    animate: _animate,\n    fixed,\n    style,\n    autoSpaced,\n    stretchedOnMobile,\n    className,\n    ...restProps\n  } = props;\n  const baseRef = React.useRef<HTMLDivElement>(null);\n  const { viewWidth, sizeX } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(_animate));\n  const { window } = useDOM();\n\n  React.useEffect(() => {\n    if (_animate === undefined) {\n      setAnimate(\n        viewWidth !== undefined\n          ? viewWidth < ViewWidth.TABLET\n          : window!.innerWidth < BREAKPOINTS.SMALL_TABLET\n      );\n    } else {\n      setAnimate(_animate);\n    }\n  }, [_animate, viewWidth, window]);\n\n  const contextValue = React.useMemo(() => {\n    return {\n      colRef: baseRef,\n      animate,\n    };\n  }, [baseRef, animate]);\n\n  return (\n    <div\n      {...restProps}\n      style={{\n        ...style,\n        width: width,\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n      }}\n      ref={baseRef}\n      className={classNamesString(\n        styles[\"SplitCol\"],\n        getSizeXClassName(styles[\"SplitCol\"], sizeX),\n        getViewWidthClassName(styles[\"SplitCol\"], viewWidth),\n        spaced && styles[\"SplitCol--spaced\"],\n        spaced === undefined && styles[\"SplitCol--spaced-none\"],\n        autoSpaced && styles[\"SplitCol--spaced-auto\"],\n        fixed && styles[\"SplitCol--fixed\"],\n        stretchedOnMobile && styles[\"SplitCol--stretched-on-mobile\"],\n        className\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? (\n          <div className={styles[\"SplitCol__fixedInner\"]}>{children}</div>\n        ) : (\n          children\n        )}\n      </SplitColContext.Provider>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,qBAAqB,QAAQ,qCAAqC;AAC3E,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,EAAEC,SAAS,QAAQ,sBAAsB;AAC7D,SAASC,MAAM,QAAQ,eAAe;AAAC;AAQvC,OAAO,IAAMC,eAAe,gBAAGR,KAAK,CAACS,aAAa,CAAuB;EACvEC,MAAM,EAAE,IAAI;EACZC,OAAO,EAAE;AACX,CAAC,CAAC;AAEF,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW;EAAA,OAASZ,KAAK,CAACa,UAAU,CAACL,eAAe,CAAC;AAAA;AAyBlE;AACA;AACA;AACA,OAAO,IAAMM,QAAQ,GAAG,SAAXA,QAAQ,CAAIC,KAAoB,EAAK;EAChD,IACEC,QAAQ,GAYND,KAAK,CAZPC,QAAQ;IACRC,KAAK,GAWHF,KAAK,CAXPE,KAAK;IACLC,QAAQ,GAUNH,KAAK,CAVPG,QAAQ;IACRC,QAAQ,GASNJ,KAAK,CATPI,QAAQ;IACRC,MAAM,GAQJL,KAAK,CARPK,MAAM;IACGC,QAAQ,GAOfN,KAAK,CAPPJ,OAAO;IACPW,KAAK,GAMHP,KAAK,CANPO,KAAK;IACLC,KAAK,GAKHR,KAAK,CALPQ,KAAK;IACLC,UAAU,GAIRT,KAAK,CAJPS,UAAU;IACVC,iBAAiB,GAGfV,KAAK,CAHPU,iBAAiB;IACjBC,SAAS,GAEPX,KAAK,CAFPW,SAAS;IACNC,SAAS,4BACVZ,KAAK;EACT,IAAMa,OAAO,GAAG5B,KAAK,CAAC6B,MAAM,CAAiB,IAAI,CAAC;EAClD,qBAA6BzB,aAAa,EAAE;IAApC0B,SAAS,kBAATA,SAAS;IAAEC,KAAK,kBAALA,KAAK;EACxB,sBAA8B/B,KAAK,CAACgC,QAAQ,CAACC,OAAO,CAACZ,QAAQ,CAAC,CAAC;IAAA;IAAxDV,OAAO;IAAEuB,UAAU;EAC1B,cAAmB3B,MAAM,EAAE;IAAnB4B,MAAM,WAANA,MAAM;EAEdnC,KAAK,CAACoC,SAAS,CAAC,YAAM;IACpB,IAAIf,QAAQ,KAAKgB,SAAS,EAAE;MAC1BH,UAAU,CACRJ,SAAS,KAAKO,SAAS,GACnBP,SAAS,GAAGxB,SAAS,CAACgC,MAAM,GAC5BH,MAAM,CAAEI,UAAU,GAAGlC,WAAW,CAACmC,YAAY,CAClD;IACH,CAAC,MAAM;MACLN,UAAU,CAACb,QAAQ,CAAC;IACtB;EACF,CAAC,EAAE,CAACA,QAAQ,EAAES,SAAS,EAAEK,MAAM,CAAC,CAAC;EAEjC,IAAMM,YAAY,GAAGzC,KAAK,CAAC0C,OAAO,CAAC,YAAM;IACvC,OAAO;MACLhC,MAAM,EAAEkB,OAAO;MACfjB,OAAO,EAAPA;IACF,CAAC;EACH,CAAC,EAAE,CAACiB,OAAO,EAAEjB,OAAO,CAAC,CAAC;EAEtB,oBACE,wCACMgB,SAAS;IACb,KAAK,kCACAJ,KAAK;MACRN,KAAK,EAAEA,KAAK;MACZC,QAAQ,EAAEA,QAAQ;MAClBC,QAAQ,EAAEA;IAAQ,EAClB;IACF,GAAG,EAAES,OAAQ;IACb,SAAS,EAAE3B,gBAAgB,iBAEzBC,iBAAiB,iBAAqB6B,KAAK,CAAC,EAC5C5B,qBAAqB,iBAAqB2B,SAAS,CAAC,EACpDV,MAAM,0BAA8B,EACpCA,MAAM,KAAKiB,SAAS,+BAAmC,EACvDb,UAAU,+BAAmC,EAC7CF,KAAK,yBAA6B,EAClCG,iBAAiB,uCAA2C,EAC5DC,SAAS;EACT,iBAEF,oBAAC,eAAe,CAAC,QAAQ;IAAC,KAAK,EAAEe;EAAa,GAC3CnB,KAAK,gBACJ;IAAK,SAAS;EAAiC,GAAEN,QAAQ,CAAO,GAEhEA,QACD,CACwB,CACvB;AAEV,CAAC"}
+{"version":3,"file":"SplitCol.js","names":["React","classNames","getSizeXClassName","getViewWidthClassName","useAdaptivity","ViewWidth","useObjectMemo","useMediaQueries","matchMediaListAddListener","matchMediaListRemoveListener","useTransitionAnimate","animateProp","viewWidth","useState","Boolean","animate","setAnimate","mediaQueries","useEffect","undefined","TABLET","listener","smallTabletPlus","matches","SplitColContext","createContext","colRef","useSplitCol","useContext","SplitCol","props","children","width","maxWidth","minWidth","spaced","fixed","style","autoSpaced","stretchedOnMobile","className","restProps","baseRef","useRef","sizeX","contextValue"],"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport { getViewWidthClassName } from '../../helpers/getViewWidthClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport styles from './SplitCol.module.css';\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n  const { viewWidth } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(animateProp));\n  const mediaQueries = useMediaQueries();\n\n  React.useEffect(() => {\n    if (animateProp !== undefined) {\n      setAnimate(animateProp);\n      return;\n    }\n\n    if (viewWidth !== undefined) {\n      setAnimate(viewWidth < ViewWidth.TABLET);\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-properties\n    const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n    listener();\n\n    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n    return () => {\n      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);\n    };\n  }, [animateProp, viewWidth, mediaQueries]);\n\n  return animate;\n}\n\nexport interface SplitColContextProps {\n  colRef: React.RefObject<HTMLDivElement> | null;\n  animate: boolean;\n}\n\nexport const SplitColContext = React.createContext<SplitColContextProps>({\n  colRef: null,\n  animate: true,\n});\n\nexport const useSplitCol = () => React.useContext(SplitColContext);\n\nexport interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины\n   */\n  spaced?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    spaced,\n    animate: animateProp,\n    fixed,\n    style,\n    autoSpaced,\n    stretchedOnMobile,\n    className,\n    ...restProps\n  } = props;\n  const baseRef = React.useRef<HTMLDivElement>(null);\n  const { viewWidth, sizeX } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = useObjectMemo({\n    colRef: baseRef,\n    animate,\n  });\n\n  return (\n    <div\n      {...restProps}\n      style={{\n        ...style,\n        width: width,\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n      }}\n      ref={baseRef}\n      className={classNames(\n        styles['SplitCol'],\n        getSizeXClassName(styles['SplitCol'], sizeX),\n        getViewWidthClassName(styles['SplitCol'], viewWidth),\n        spaced && styles['SplitCol--spaced'],\n        spaced === undefined && styles['SplitCol--spaced-none'],\n        autoSpaced && styles['SplitCol--spaced-auto'],\n        fixed && styles['SplitCol--fixed'],\n        stretchedOnMobile && styles['SplitCol--stretched-on-mobile'],\n        className,\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? <div className={styles['SplitCol__fixedInner']}>{children}</div> : children}\n      </SplitColContext.Provider>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { HasRef, HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasRef, HasRootRef } from '../../types';
 export interface SplitLayoutProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLDivElement> {
     /**
      * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.

package/dist/cssm/components/SplitLayout/SplitLayout.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["popout", "modal", "header", "children", "getRootRef", "getRef", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { Platform } from "../../lib/platform";
-import { PopoutRoot } from "../PopoutRoot/PopoutRoot";
-import { usePlatform } from "../../hooks/usePlatform";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { Platform } from '../../lib/platform';
+import { PopoutRoot } from '../PopoutRoot/PopoutRoot';
+import { usePlatform } from '../../hooks/usePlatform';
 import "./SplitLayout.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/SplitLayout
@@ -21,13 +21,13 @@ export var SplitLayout = function SplitLayout(_ref) {
     restProps = _objectWithoutProperties(_ref, _excluded);
   var platform = usePlatform();
   return /*#__PURE__*/React.createElement(PopoutRoot, {
-    className: classNamesString("vkuiSplitLayout", platform === Platform.IOS && "vkuiSplitLayout--ios"),
+    className: classNames("vkuiSplitLayout", platform === Platform.IOS && "vkuiSplitLayout--ios"),
     popout: popout,
     modal: modal,
     getRootRef: getRootRef
   }, header, /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
     ref: getRef,
-    className: classNamesString("vkuiSplitLayout__inner", !!header && "vkuiSplitLayout__inner--header", className)
+    className: classNames("vkuiSplitLayout__inner", !!header && "vkuiSplitLayout__inner--header", className)
   }), children));
 };
 //# sourceMappingURL=SplitLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SplitLayout.js","names":["React","classNamesString","Platform","PopoutRoot","usePlatform","SplitLayout","popout","modal","header","children","getRootRef","getRef","className","restProps","platform","IOS"],"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Platform } from \"../../lib/platform\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { PopoutRoot } from \"../PopoutRoot/PopoutRoot\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport styles from \"./SplitLayout.module.css\";\n\nexport interface SplitLayoutProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  ...restProps\n}: SplitLayoutProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PopoutRoot\n      className={classNamesString(\n        styles[\"SplitLayout\"],\n        platform === Platform.IOS && styles[\"SplitLayout--ios\"]\n      )}\n      popout={popout}\n      modal={modal}\n      getRootRef={getRootRef}\n    >\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNamesString(\n          styles[\"SplitLayout__inner\"],\n          !!header && styles[\"SplitLayout__inner--header\"],\n          className\n        )}\n      >\n        {children}\n      </div>\n    </PopoutRoot>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,QAAQ,QAAQ,oBAAoB;AAE7C,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,WAAW,QAAQ,yBAAyB;AAAC;AAkBtD;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OASA;EAAA,IARtBC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGV,WAAW,EAAE;EAE9B,oBACE,oBAAC,UAAU;IACT,SAAS,EAAEH,gBAAgB,oBAEzBa,QAAQ,KAAKZ,QAAQ,CAACa,GAAG,0BAA8B,CACvD;IACF,MAAM,EAAET,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,UAAU,EAAEG;EAAW,GAEtBF,MAAM,eACP,wCACMK,SAAS;IACb,GAAG,EAAEF,MAAO;IACZ,SAAS,EAAEV,gBAAgB,2BAEzB,CAAC,CAACO,MAAM,oCAAwC,EAChDI,SAAS;EACT,IAEDH,QAAQ,CACL,CACK;AAEjB,CAAC"}
+{"version":3,"file":"SplitLayout.js","names":["React","classNames","Platform","PopoutRoot","usePlatform","SplitLayout","popout","modal","header","children","getRootRef","getRef","className","restProps","platform","IOS"],"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { PopoutRoot } from '../PopoutRoot/PopoutRoot';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  ...restProps\n}: SplitLayoutProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PopoutRoot\n      className={classNames(\n        styles['SplitLayout'],\n        platform === Platform.IOS && styles['SplitLayout--ios'],\n      )}\n      popout={popout}\n      modal={modal}\n      getRootRef={getRootRef}\n    >\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNames(\n          styles['SplitLayout__inner'],\n          !!header && styles['SplitLayout__inner--header'],\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </PopoutRoot>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,QAAQ,QAAQ,oBAAoB;AAE7C,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,WAAW,QAAQ,yBAAyB;AAAC;AAkBtD;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OASA;EAAA,IARtBC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGV,WAAW,EAAE;EAE9B,oBACE,oBAAC,UAAU;IACT,SAAS,EAAEH,UAAU,oBAEnBa,QAAQ,KAAKZ,QAAQ,CAACa,GAAG,0BAA8B,CACvD;IACF,MAAM,EAAET,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,UAAU,EAAEG;EAAW,GAEtBF,MAAM,eACP,wCACMK,SAAS;IACb,GAAG,EAAEF,MAAO;IACZ,SAAS,EAAEV,UAAU,2BAEnB,CAAC,CAACO,MAAM,oCAAwC,EAChDI,SAAS;EACT,IAEDH,QAAQ,CACL,CACK;AAEjB,CAAC"}

package/dist/cssm/components/SplitLayout/SplitLayout.module.css

@@ -1 +1 @@
-.vkuiSplitLayout{height:100%;position:relative;width:100%}.vkuiSplitLayout__inner{display:flex;height:100%;width:100%}.vkuiSplitLayout__inner--header{position:relative;z-index:11}.vkuiSplitLayout--ios .vkuiSplitLayout__inner--header,.vkuiSplitLayout__inner--header{margin-top:calc(-1 * (var(--vkui--size_panel_header_height--regular) + var(--vkui_internal--safe_area_inset_top)))}.vkuiSplitLayout__popout{z-index:100}.vkuiSplitLayout__modal,.vkuiSplitLayout__popout{height:100%;left:0;position:fixed;top:0;width:100%}.vkuiSplitLayout__modal{z-index:99}.vkuiSplitLayout__modal:empty{display:none}
+.vkuiSplitLayout{height:100%;position:relative;width:100%}.vkuiSplitLayout__inner{display:flex;height:100%;width:100%}.vkuiSplitLayout__inner--header{position:relative;z-index:11;z-index:var(--vkui_internal--z_index_split_layout_panel_header)}.vkuiSplitLayout--ios .vkuiSplitLayout__inner--header,.vkuiSplitLayout__inner--header{margin-top:calc(-1 * (var(--vkui--size_panel_header_height--regular) + var(--vkui_internal--safe_area_inset_top)))}.vkuiSplitLayout__popout{z-index:var(--vkui--z_index_popout)}.vkuiSplitLayout__modal,.vkuiSplitLayout__popout{height:100%;left:0;position:fixed;top:0;width:100%}.vkuiSplitLayout__modal{z-index:var(--vkui--z_index_modal)}.vkuiSplitLayout__modal:empty{display:none}

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

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { HorizontalScrollProps } from "../HorizontalScroll/HorizontalScroll";
-export interface SubnavigationBarProps extends React.HTMLAttributes<HTMLDivElement>, Pick<HorizontalScrollProps, "showArrows" | "getScrollToLeft" | "getScrollToRight" | "scrollAnimationDuration"> {
-    mode?: "fixed" | "overflow";
+import * as React from 'react';
+import { HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';
+export interface SubnavigationBarProps extends React.HTMLAttributes<HTMLDivElement>, Pick<HorizontalScrollProps, 'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'> {
+    mode?: 'fixed' | 'overflow';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/SubnavigationBar

package/dist/cssm/components/SubnavigationBar/SubnavigationBar.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["mode", "children", "showArrows", "getScrollToLeft", "getScrollToRight", "scrollAnimationDuration", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { HorizontalScroll } from "../HorizontalScroll/HorizontalScroll";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { HorizontalScroll } from '../HorizontalScroll/HorizontalScroll';
 import "./SubnavigationBar.module.css";
 var defaultScrollToLeft = function defaultScrollToLeft(x) {
   return x - 240;
@@ -17,7 +17,7 @@ var defaultScrollToRight = function defaultScrollToRight(x) {
  */
 export var SubnavigationBar = function SubnavigationBar(_ref) {
   var _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? "overflow" : _ref$mode,
+    mode = _ref$mode === void 0 ? 'overflow' : _ref$mode,
     children = _ref.children,
     _ref$showArrows = _ref.showArrows,
     showArrows = _ref$showArrows === void 0 ? true : _ref$showArrows,
@@ -30,8 +30,8 @@ export var SubnavigationBar = function SubnavigationBar(_ref) {
     restProps = _objectWithoutProperties(_ref, _excluded);
   var ScrollWrapper;
   var scrollWrapperProps = {};
-  if (mode === "fixed") {
-    ScrollWrapper = "div";
+  if (mode === 'fixed') {
+    ScrollWrapper = 'div';
   } else {
     ScrollWrapper = HorizontalScroll;
     scrollWrapperProps = {
@@ -42,7 +42,7 @@ export var SubnavigationBar = function SubnavigationBar(_ref) {
     };
   }
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    className: classNamesString("vkuiSubnavigationBar", styles["SubnavigationBar--mode-".concat(mode)], className)
+    className: classNames("vkuiSubnavigationBar", styles["SubnavigationBar--mode-".concat(mode)], className)
   }), /*#__PURE__*/React.createElement(ScrollWrapper, _extends({
     className: "vkuiSubnavigationBar__in"
   }, scrollWrapperProps), /*#__PURE__*/React.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"SubnavigationBar.js","names":["React","classNamesString","HorizontalScroll","defaultScrollToLeft","x","defaultScrollToRight","SubnavigationBar","mode","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","className","restProps","ScrollWrapper","scrollWrapperProps","styles"],"sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport {\n  HorizontalScroll,\n  HorizontalScrollProps,\n  ScrollPositionHandler,\n} from \"../HorizontalScroll/HorizontalScroll\";\nimport styles from \"./SubnavigationBar.module.css\";\n\nexport interface SubnavigationBarProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Pick<\n      HorizontalScrollProps,\n      | \"showArrows\"\n      | \"getScrollToLeft\"\n      | \"getScrollToRight\"\n      | \"scrollAnimationDuration\"\n    > {\n  mode?: \"fixed\" | \"overflow\";\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationBar\n */\nexport const SubnavigationBar = ({\n  mode = \"overflow\",\n  children,\n  showArrows = true,\n  getScrollToLeft = defaultScrollToLeft,\n  getScrollToRight = defaultScrollToRight,\n  scrollAnimationDuration,\n  className,\n  ...restProps\n}: SubnavigationBarProps) => {\n  let ScrollWrapper: React.ElementType;\n  let scrollWrapperProps = {};\n\n  if (mode === \"fixed\") {\n    ScrollWrapper = \"div\";\n  } else {\n    ScrollWrapper = HorizontalScroll;\n    scrollWrapperProps = {\n      showArrows,\n      getScrollToLeft,\n      getScrollToRight,\n      scrollAnimationDuration,\n    };\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={classNamesString(\n        styles[\"SubnavigationBar\"],\n        styles[`SubnavigationBar--mode-${mode}`],\n        className\n      )}\n    >\n      <ScrollWrapper\n        className={styles[\"SubnavigationBar__in\"]}\n        {...scrollWrapperProps}\n      >\n        <div className={styles[\"SubnavigationBar__scrollIn\"]}>{children}</div>\n      </ScrollWrapper>\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SACEC,gBAAgB,QAGX,sCAAsC;AAAC;AAe9C,IAAMC,mBAA0C,GAAG,SAA7CA,mBAA0C,CAAIC,CAAC;EAAA,OAAKA,CAAC,GAAG,GAAG;AAAA;AAEjE,IAAMC,oBAA2C,GAAG,SAA9CA,oBAA2C,CAAID,CAAC;EAAA,OAAKA,CAAC,GAAG,GAAG;AAAA;;AAElE;AACA;AACA;AACA,OAAO,IAAME,gBAAgB,GAAG,SAAnBA,gBAAgB,OASA;EAAA,qBAR3BC,IAAI;IAAJA,IAAI,0BAAG,UAAU;IACjBC,QAAQ,QAARA,QAAQ;IAAA,uBACRC,UAAU;IAAVA,UAAU,gCAAG,IAAI;IAAA,4BACjBC,eAAe;IAAfA,eAAe,qCAAGP,mBAAmB;IAAA,6BACrCQ,gBAAgB;IAAhBA,gBAAgB,sCAAGN,oBAAoB;IACvCO,uBAAuB,QAAvBA,uBAAuB;IACvBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAIC,aAAgC;EACpC,IAAIC,kBAAkB,GAAG,CAAC,CAAC;EAE3B,IAAIT,IAAI,KAAK,OAAO,EAAE;IACpBQ,aAAa,GAAG,KAAK;EACvB,CAAC,MAAM;IACLA,aAAa,GAAGb,gBAAgB;IAChCc,kBAAkB,GAAG;MACnBP,UAAU,EAAVA,UAAU;MACVC,eAAe,EAAfA,eAAe;MACfC,gBAAgB,EAAhBA,gBAAgB;MAChBC,uBAAuB,EAAvBA;IACF,CAAC;EACH;EAEA,oBACE,wCACME,SAAS;IACb,SAAS,EAAEb,gBAAgB,yBAEzBgB,MAAM,kCAA2BV,IAAI,EAAG,EACxCM,SAAS;EACT,iBAEF,oBAAC,aAAa;IACZ,SAAS;EAAiC,GACtCG,kBAAkB,gBAEtB;IAAK,SAAS;EAAuC,GAAER,QAAQ,CAAO,CACxD,CACZ;AAEV,CAAC;AAAC;EAAA;EAAA;AAAA"}
+{"version":3,"file":"SubnavigationBar.js","names":["React","classNames","HorizontalScroll","defaultScrollToLeft","x","defaultScrollToRight","SubnavigationBar","mode","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","className","restProps","ScrollWrapper","scrollWrapperProps","styles"],"sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  HorizontalScroll,\n  HorizontalScrollProps,\n  ScrollPositionHandler,\n} from '../HorizontalScroll/HorizontalScroll';\nimport styles from './SubnavigationBar.module.css';\n\nexport interface SubnavigationBarProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Pick<\n      HorizontalScrollProps,\n      'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'\n    > {\n  mode?: 'fixed' | 'overflow';\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationBar\n */\nexport const SubnavigationBar = ({\n  mode = 'overflow',\n  children,\n  showArrows = true,\n  getScrollToLeft = defaultScrollToLeft,\n  getScrollToRight = defaultScrollToRight,\n  scrollAnimationDuration,\n  className,\n  ...restProps\n}: SubnavigationBarProps) => {\n  let ScrollWrapper: React.ElementType;\n  let scrollWrapperProps = {};\n\n  if (mode === 'fixed') {\n    ScrollWrapper = 'div';\n  } else {\n    ScrollWrapper = HorizontalScroll;\n    scrollWrapperProps = {\n      showArrows,\n      getScrollToLeft,\n      getScrollToRight,\n      scrollAnimationDuration,\n    };\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['SubnavigationBar'],\n        styles[`SubnavigationBar--mode-${mode}`],\n        className,\n      )}\n    >\n      <ScrollWrapper className={styles['SubnavigationBar__in']} {...scrollWrapperProps}>\n        <div className={styles['SubnavigationBar__scrollIn']}>{children}</div>\n      </ScrollWrapper>\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SACEC,gBAAgB,QAGX,sCAAsC;AAAC;AAY9C,IAAMC,mBAA0C,GAAG,SAA7CA,mBAA0C,CAAIC,CAAC;EAAA,OAAKA,CAAC,GAAG,GAAG;AAAA;AAEjE,IAAMC,oBAA2C,GAAG,SAA9CA,oBAA2C,CAAID,CAAC;EAAA,OAAKA,CAAC,GAAG,GAAG;AAAA;;AAElE;AACA;AACA;AACA,OAAO,IAAME,gBAAgB,GAAG,SAAnBA,gBAAgB,OASA;EAAA,qBAR3BC,IAAI;IAAJA,IAAI,0BAAG,UAAU;IACjBC,QAAQ,QAARA,QAAQ;IAAA,uBACRC,UAAU;IAAVA,UAAU,gCAAG,IAAI;IAAA,4BACjBC,eAAe;IAAfA,eAAe,qCAAGP,mBAAmB;IAAA,6BACrCQ,gBAAgB;IAAhBA,gBAAgB,sCAAGN,oBAAoB;IACvCO,uBAAuB,QAAvBA,uBAAuB;IACvBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAIC,aAAgC;EACpC,IAAIC,kBAAkB,GAAG,CAAC,CAAC;EAE3B,IAAIT,IAAI,KAAK,OAAO,EAAE;IACpBQ,aAAa,GAAG,KAAK;EACvB,CAAC,MAAM;IACLA,aAAa,GAAGb,gBAAgB;IAChCc,kBAAkB,GAAG;MACnBP,UAAU,EAAVA,UAAU;MACVC,eAAe,EAAfA,eAAe;MACfC,gBAAgB,EAAhBA,gBAAgB;MAChBC,uBAAuB,EAAvBA;IACF,CAAC;EACH;EAEA,oBACE,wCACME,SAAS;IACb,SAAS,EAAEb,UAAU,yBAEnBgB,MAAM,kCAA2BV,IAAI,EAAG,EACxCM,SAAS;EACT,iBAEF,oBAAC,aAAa;IAAC,SAAS;EAAiC,GAAKG,kBAAkB,gBAC9E;IAAK,SAAS;EAAuC,GAAER,QAAQ,CAAO,CACxD,CACZ;AAEV,CAAC;AAAC;EAAA;EAAA;AAAA"}

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

@@ -1,13 +1,13 @@
-import * as React from "react";
-import { TappableProps } from "../Tappable/Tappable";
-export interface SubnavigationButtonProps extends Omit<TappableProps, "size"> {
-    mode?: "primary" | "outline" | "tertiary";
-    size?: "s" | "m" | "l";
+import * as React from 'react';
+import { TappableProps } from '../Tappable/Tappable';
+export interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {
+    mode?: 'primary' | 'outline' | 'tertiary';
+    size?: 's' | 'm' | 'l';
     selected?: boolean;
     /**
      * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode="fixed" />`
      */
-    textLevel?: "1" | "2" | "3";
+    textLevel?: '1' | '2' | '3';
     /**
      * Рекомендуется использовать только иконки с размером 24
      */

package/dist/cssm/components/SubnavigationButton/SubnavigationButton.js

@@ -2,24 +2,24 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["textLevel"],
   _excluded2 = ["mode", "size", "selected", "textLevel", "before", "after", "expandable", "children", "className"];
-import * as React from "react";
-import { getSizeYClassName } from "../../helpers/getSizeYClassName";
-import { classNamesString } from "../../lib/classNames";
-import { getTitleFromChildren } from "../../lib/utils";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { Tappable } from "../Tappable/Tappable";
-import { Icon16Dropdown } from "@vkontakte/icons";
-import { Caption } from "../Typography/Caption/Caption";
-import { Subhead } from "../Typography/Subhead/Subhead";
+import * as React from 'react';
+import { getSizeYClassName } from '../../helpers/getSizeYClassName';
+import { classNames } from '@vkontakte/vkjs';
+import { getTitleFromChildren } from '../../lib/utils';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { Tappable } from '../Tappable/Tappable';
+import { Icon16Dropdown } from '@vkontakte/icons';
+import { Caption } from '../Typography/Caption/Caption';
+import { Subhead } from '../Typography/Subhead/Subhead';
 import "./SubnavigationButton.module.css";
 var SubnavigationButtonTypography = function SubnavigationButtonTypography(_ref) {
   var textLevel = _ref.textLevel,
     restProps = _objectWithoutProperties(_ref, _excluded);
-  if (textLevel === "1") {
+  if (textLevel === '1') {
     return /*#__PURE__*/React.createElement(Subhead, restProps);
   }
   return /*#__PURE__*/React.createElement(Caption, _extends({
-    level: textLevel === "2" ? "1" : "2"
+    level: textLevel === '2' ? '1' : '2'
   }, restProps));
 };
 
@@ -28,12 +28,12 @@ var SubnavigationButtonTypography = function SubnavigationButtonTypography(_ref)
  */
 export var SubnavigationButton = function SubnavigationButton(_ref2) {
   var _ref2$mode = _ref2.mode,
-    mode = _ref2$mode === void 0 ? "primary" : _ref2$mode,
+    mode = _ref2$mode === void 0 ? 'primary' : _ref2$mode,
     _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? "m" : _ref2$size,
+    size = _ref2$size === void 0 ? 'm' : _ref2$size,
     selected = _ref2.selected,
     _ref2$textLevel = _ref2.textLevel,
-    textLevel = _ref2$textLevel === void 0 ? "1" : _ref2$textLevel,
+    textLevel = _ref2$textLevel === void 0 ? '1' : _ref2$textLevel,
     before = _ref2.before,
     after = _ref2.after,
     expandable = _ref2.expandable,
@@ -45,7 +45,7 @@ export var SubnavigationButton = function SubnavigationButton(_ref2) {
   return /*#__PURE__*/React.createElement(Tappable, _extends({}, restProps, {
     hasActive: false,
     focusVisibleMode: "outside",
-    className: classNamesString("vkuiSubnavigationButton", styles["SubnavigationButton--size-".concat(size)], styles["SubnavigationButton--mode-".concat(mode)], selected && "vkuiSubnavigationButton--selected", getSizeYClassName("vkuiSubnavigationButton", sizeY), className),
+    className: classNames("vkuiSubnavigationButton", styles["SubnavigationButton--size-".concat(size)], styles["SubnavigationButton--mode-".concat(mode)], selected && "vkuiSubnavigationButton--selected", getSizeYClassName("vkuiSubnavigationButton", sizeY), className),
     "aria-label": getTitleFromChildren(children)
   }), /*#__PURE__*/React.createElement("span", {
     className: "vkuiSubnavigationButton__in"

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

@@ -1 +1 @@
-{"version":3,"file":"SubnavigationButton.js","names":["React","getSizeYClassName","classNamesString","getTitleFromChildren","useAdaptivity","Tappable","Icon16Dropdown","Caption","Subhead","SubnavigationButtonTypography","textLevel","restProps","SubnavigationButton","mode","size","selected","before","after","expandable","children","className","sizeY","styles"],"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport { HasComponent, HasChildren } from \"../../types\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { getTitleFromChildren } from \"../../lib/utils\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { TappableProps, Tappable } from \"../Tappable/Tappable\";\nimport { Icon16Dropdown } from \"@vkontakte/icons\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport styles from \"./SubnavigationButton.module.css\";\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, \"size\"> {\n  mode?: \"primary\" | \"outline\" | \"tertiary\";\n  size?: \"s\" | \"m\" | \"l\";\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode=\"fixed\" />`\n   */\n  textLevel?: \"1\" | \"2\" | \"3\";\n  /**\n   * Рекомендуется использовать только иконки с размером 24\n   */\n  before?: React.ReactNode;\n  /**\n   * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`\n   */\n  after?: React.ReactNode;\n  expandable?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  \"textLevel\" | \"className\"\n> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavigationButtonTypographyProps) => {\n  if (textLevel === \"1\") {\n    return <Subhead {...restProps} />;\n  }\n\n  return <Caption level={textLevel === \"2\" ? \"1\" : \"2\"} {...restProps} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n  mode = \"primary\",\n  size = \"m\",\n  selected,\n  textLevel = \"1\",\n  before,\n  after,\n  expandable,\n  children,\n  className,\n  ...restProps\n}: SubnavigationButtonProps) => {\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      className={classNamesString(\n        styles[\"SubnavigationButton\"],\n        styles[`SubnavigationButton--size-${size}`],\n        styles[`SubnavigationButton--mode-${mode}`],\n        selected && styles[\"SubnavigationButton--selected\"],\n        getSizeYClassName(styles[\"SubnavigationButton\"], sizeY),\n        className\n      )}\n      aria-label={getTitleFromChildren(children)}\n    >\n      <span className={styles[\"SubnavigationButton__in\"]}>\n        {before && (\n          <span className={styles[\"SubnavigationButton__before\"]}>\n            {before}\n          </span>\n        )}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles[\"SubnavigationButton__label\"]}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && (\n          <span className={styles[\"SubnavigationButton__after\"]}>{after}</span>\n        )}\n        {expandable && (\n          <Icon16Dropdown\n            className={styles[\"SubnavigationButton__expandableIcon\"]}\n          />\n        )}\n      </span>\n    </Tappable>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,iBAAiB,QAAQ,iCAAiC;AAEnE,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,oBAAoB,QAAQ,iBAAiB;AACtD,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAAwBC,QAAQ,QAAQ,sBAAsB;AAC9D,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,OAAO,QAAQ,+BAA+B;AACvD,SAASC,OAAO,QAAQ,+BAA+B;AAAC;AA6BxD,IAAMC,6BAA6B,GAAG,SAAhCA,6BAA6B,OAGO;EAAA,IAFxCC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAID,SAAS,KAAK,GAAG,EAAE;IACrB,oBAAO,oBAAC,OAAO,EAAKC,SAAS,CAAI;EACnC;EAEA,oBAAO,oBAAC,OAAO;IAAC,KAAK,EAAED,SAAS,KAAK,GAAG,GAAG,GAAG,GAAG;EAAI,GAAKC,SAAS,EAAI;AACzE,CAAC;;AAED;AACA;AACA;AACA,OAAO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,QAWA;EAAA,uBAV9BC,IAAI;IAAJA,IAAI,2BAAG,SAAS;IAAA,mBAChBC,IAAI;IAAJA,IAAI,2BAAG,GAAG;IACVC,QAAQ,SAARA,QAAQ;IAAA,wBACRL,SAAS;IAATA,SAAS,gCAAG,GAAG;IACfM,MAAM,SAANA,MAAM;IACNC,KAAK,SAALA,KAAK;IACLC,UAAU,SAAVA,UAAU;IACVC,QAAQ,SAARA,QAAQ;IACRC,SAAS,SAATA,SAAS;IACNT,SAAS;EAEZ,qBAAkBP,aAAa,EAAE;IAAzBiB,KAAK,kBAALA,KAAK;EAEb,oBACE,oBAAC,QAAQ,eACHV,SAAS;IACb,SAAS,EAAE,KAAM;IACjB,gBAAgB,EAAC,SAAS;IAC1B,SAAS,EAAET,gBAAgB,4BAEzBoB,MAAM,qCAA8BR,IAAI,EAAG,EAC3CQ,MAAM,qCAA8BT,IAAI,EAAG,EAC3CE,QAAQ,uCAA2C,EACnDd,iBAAiB,4BAAgCoB,KAAK,CAAC,EACvDD,SAAS,CACT;IACF,cAAYjB,oBAAoB,CAACgB,QAAQ;EAAE,iBAE3C;IAAM,SAAS;EAAoC,GAChDH,MAAM,iBACL;IAAM,SAAS;EAAwC,GACpDA,MAAM,CAEV,eACD,oBAAC,6BAA6B;IAC5B,SAAS,EAAEN,SAAU;IACrB,SAAS,kCAAuC;IAChD,SAAS,EAAC;EAAM,GAEfS,QAAQ,CACqB,EAC/BF,KAAK,iBACJ;IAAM,SAAS;EAAuC,GAAEA,KAAK,CAC9D,EACAC,UAAU,iBACT,oBAAC,cAAc;IACb,SAAS;EAAgD,EAE5D,CACI,CACE;AAEf,CAAC;AAAC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"SubnavigationButton.js","names":["React","getSizeYClassName","classNames","getTitleFromChildren","useAdaptivity","Tappable","Icon16Dropdown","Caption","Subhead","SubnavigationButtonTypography","textLevel","restProps","SubnavigationButton","mode","size","selected","before","after","expandable","children","className","sizeY","styles"],"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport { HasComponent, HasChildren } from '../../types';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { TappableProps, Tappable } from '../Tappable/Tappable';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {\n  mode?: 'primary' | 'outline' | 'tertiary';\n  size?: 's' | 'm' | 'l';\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode=\"fixed\" />`\n   */\n  textLevel?: '1' | '2' | '3';\n  /**\n   * Рекомендуется использовать только иконки с размером 24\n   */\n  before?: React.ReactNode;\n  /**\n   * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`\n   */\n  after?: React.ReactNode;\n  expandable?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  'textLevel' | 'className'\n> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavigationButtonTypographyProps) => {\n  if (textLevel === '1') {\n    return <Subhead {...restProps} />;\n  }\n\n  return <Caption level={textLevel === '2' ? '1' : '2'} {...restProps} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n  mode = 'primary',\n  size = 'm',\n  selected,\n  textLevel = '1',\n  before,\n  after,\n  expandable,\n  children,\n  className,\n  ...restProps\n}: SubnavigationButtonProps) => {\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      className={classNames(\n        styles['SubnavigationButton'],\n        styles[`SubnavigationButton--size-${size}`],\n        styles[`SubnavigationButton--mode-${mode}`],\n        selected && styles['SubnavigationButton--selected'],\n        getSizeYClassName(styles['SubnavigationButton'], sizeY),\n        className,\n      )}\n      aria-label={getTitleFromChildren(children)}\n    >\n      <span className={styles['SubnavigationButton__in']}>\n        {before && <span className={styles['SubnavigationButton__before']}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles['SubnavigationButton__label']}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles['SubnavigationButton__after']}>{after}</span>}\n        {expandable && <Icon16Dropdown className={styles['SubnavigationButton__expandableIcon']} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,iBAAiB,QAAQ,iCAAiC;AAEnE,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,oBAAoB,QAAQ,iBAAiB;AACtD,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAAwBC,QAAQ,QAAQ,sBAAsB;AAC9D,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,OAAO,QAAQ,+BAA+B;AACvD,SAASC,OAAO,QAAQ,+BAA+B;AAAC;AA6BxD,IAAMC,6BAA6B,GAAG,SAAhCA,6BAA6B,OAGO;EAAA,IAFxCC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAID,SAAS,KAAK,GAAG,EAAE;IACrB,oBAAO,oBAAC,OAAO,EAAKC,SAAS,CAAI;EACnC;EAEA,oBAAO,oBAAC,OAAO;IAAC,KAAK,EAAED,SAAS,KAAK,GAAG,GAAG,GAAG,GAAG;EAAI,GAAKC,SAAS,EAAI;AACzE,CAAC;;AAED;AACA;AACA;AACA,OAAO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,QAWA;EAAA,uBAV9BC,IAAI;IAAJA,IAAI,2BAAG,SAAS;IAAA,mBAChBC,IAAI;IAAJA,IAAI,2BAAG,GAAG;IACVC,QAAQ,SAARA,QAAQ;IAAA,wBACRL,SAAS;IAATA,SAAS,gCAAG,GAAG;IACfM,MAAM,SAANA,MAAM;IACNC,KAAK,SAALA,KAAK;IACLC,UAAU,SAAVA,UAAU;IACVC,QAAQ,SAARA,QAAQ;IACRC,SAAS,SAATA,SAAS;IACNT,SAAS;EAEZ,qBAAkBP,aAAa,EAAE;IAAzBiB,KAAK,kBAALA,KAAK;EAEb,oBACE,oBAAC,QAAQ,eACHV,SAAS;IACb,SAAS,EAAE,KAAM;IACjB,gBAAgB,EAAC,SAAS;IAC1B,SAAS,EAAET,UAAU,4BAEnBoB,MAAM,qCAA8BR,IAAI,EAAG,EAC3CQ,MAAM,qCAA8BT,IAAI,EAAG,EAC3CE,QAAQ,uCAA2C,EACnDd,iBAAiB,4BAAgCoB,KAAK,CAAC,EACvDD,SAAS,CACT;IACF,cAAYjB,oBAAoB,CAACgB,QAAQ;EAAE,iBAE3C;IAAM,SAAS;EAAoC,GAChDH,MAAM,iBAAI;IAAM,SAAS;EAAwC,GAAEA,MAAM,CAAQ,eAClF,oBAAC,6BAA6B;IAC5B,SAAS,EAAEN,SAAU;IACrB,SAAS,kCAAuC;IAChD,SAAS,EAAC;EAAM,GAEfS,QAAQ,CACqB,EAC/BF,KAAK,iBAAI;IAAM,SAAS;EAAuC,GAAEA,KAAK,CAAQ,EAC9EC,UAAU,iBAAI,oBAAC,cAAc;IAAC,SAAS;EAAgD,EAAG,CACtF,CACE;AAEf,CAAC;AAAC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

package/dist/cssm/components/SubnavigationButton/SubnavigationButton.module.css

@@ -1,5 +1 @@
-.vkuiSubnavigationButton{border-radius:var(--vkui--size_border_radius--regular);display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vkuiSubnavigationButton__in{align-items:center;display:flex;justify-content:center}.vkuiSubnavigationButton--size-s .vkuiSubnavigationButton__in{height:var(--vkui--size_button_small_height--regular)}.vkuiSubnavigationButton--size-m .vkuiSubnavigationButton__in{height:var(--vkui--size_button_medium_height--regular)}.vkuiSubnavigationButton--size-l .vkuiSubnavigationButton__in{height:var(--vkui--size_button_large_height--regular)}.vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--size-s .vkuiSubnavigationButton__in{height:var(--vkui--size_button_small_height--compact)}.vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--size-m .vkuiSubnavigationButton__in{height:var(--vkui--size_button_medium_height--compact)}.vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--size-l .vkuiSubnavigationButton__in{height:var(--vkui--size_button_large_height--compact)}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiSubnavigationButton--sizeY-none.vkuiSubnavigationButton--size-s .vkuiSubnavigationButton__in{height:var(--vkui--size_button_small_height--compact)}.vkuiSubnavigationButton--sizeY-none.vkuiSubnavigationButton--size-m .vkuiSubnavigationButton__in{height:var(--vkui--size_button_medium_height--compact)}.vkuiSubnavigationButton--sizeY-none.vkuiSubnavigationButton--size-l .vkuiSubnavigationButton__in{height:var(--vkui--size_button_large_height--compact)}}.vkuiSubnavigationButton__before{color:var(--vkui--color_icon_accent);margin-right:8px}.vkuiSubnavigationButton__label{flex-grow:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSubnavigationButton__after{margin-left:8px}.vkuiSubnavigationButton__expandableIcon{color:var(--vkui--color_icon_secondary);margin-left:8px;margin-top:1px}.vkuiSubnavigationButton__before:first-child,.vkuiSubnavigationButton__label:first-child{padding-left:var(
-    --vkui--size_button_base_small_padding_horizontal_icon--regular
-  )}.vkuiSubnavigationButton__after:last-child,.vkuiSubnavigationButton__expandableIcon,.vkuiSubnavigationButton__label:last-child{padding-right:var(
-    --vkui--size_button_base_small_padding_horizontal_icon--regular
-  )}.vkuiSubnavigationButton--mode-primary{background-color:var(--vkui--color_background_modal);box-shadow:var(--vkui--elevation3)}.vkuiSubnavigationButton--mode-outline{box-shadow:inset 0 0 0 1px var(--vkui--color_field_border_alpha);box-shadow:inset 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha)}.vkuiSubnavigationButton--selected{background-color:var(--vkui--color_background_accent_themed);border:none;box-shadow:none;color:var(--vkui--color_text_contrast_themed)}.vkuiSubnavigationButton--selected.vkuiSubnavigationButton--mode-tertiary{background-color:var(--vkui--color_transparent--active);color:var(--vkui--color_text_primary)}.vkuiSubnavigationButton--selected:not(.vkuiSubnavigationButton--mode-tertiary) .vkuiSubnavigationButton__before,.vkuiSubnavigationButton--selected:not(.vkuiSubnavigationButton--mode-tertiary) .vkuiSubnavigationButton__expandableIcon{color:inherit}.vkuiSubnavigationBar .vkuiSubnavigationButton+.vkuiSubnavigationButton{margin-left:var(--vkui--size_subnavigation_bar_gap--regular)}.vkuiSubnavigationBar--mode-fixed .vkuiSubnavigationButton{flex:1;min-width:0}
+.vkuiSubnavigationButton{border-radius:var(--vkui--size_border_radius--regular);display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vkuiSubnavigationButton__in{align-items:center;display:flex;justify-content:center}.vkuiSubnavigationButton--size-s .vkuiSubnavigationButton__in{height:var(--vkui--size_button_small_height--regular)}.vkuiSubnavigationButton--size-m .vkuiSubnavigationButton__in{height:var(--vkui--size_button_medium_height--regular)}.vkuiSubnavigationButton--size-l .vkuiSubnavigationButton__in{height:var(--vkui--size_button_large_height--regular)}.vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--size-s .vkuiSubnavigationButton__in{height:var(--vkui--size_button_small_height--compact)}.vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--size-m .vkuiSubnavigationButton__in{height:var(--vkui--size_button_medium_height--compact)}.vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--size-l .vkuiSubnavigationButton__in{height:var(--vkui--size_button_large_height--compact)}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiSubnavigationButton--sizeY-none.vkuiSubnavigationButton--size-s .vkuiSubnavigationButton__in{height:var(--vkui--size_button_small_height--compact)}.vkuiSubnavigationButton--sizeY-none.vkuiSubnavigationButton--size-m .vkuiSubnavigationButton__in{height:var(--vkui--size_button_medium_height--compact)}.vkuiSubnavigationButton--sizeY-none.vkuiSubnavigationButton--size-l .vkuiSubnavigationButton__in{height:var(--vkui--size_button_large_height--compact)}}.vkuiSubnavigationButton__before{color:var(--vkui--color_icon_accent);margin-right:8px}.vkuiSubnavigationButton__label{flex-grow:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSubnavigationButton__after{margin-left:8px}.vkuiSubnavigationButton__expandableIcon{color:var(--vkui--color_icon_secondary);margin-left:8px;margin-top:1px}.vkuiSubnavigationButton__before:first-child,.vkuiSubnavigationButton__label:first-child{padding-left:var(--vkui--size_button_base_small_padding_horizontal_icon--regular)}.vkuiSubnavigationButton__after:last-child,.vkuiSubnavigationButton__expandableIcon,.vkuiSubnavigationButton__label:last-child{padding-right:var(--vkui--size_button_base_small_padding_horizontal_icon--regular)}.vkuiSubnavigationButton--mode-primary{background-color:var(--vkui--color_background_modal);box-shadow:var(--vkui--elevation3)}.vkuiSubnavigationButton--mode-outline{box-shadow:inset 0 0 0 1px var(--vkui--color_field_border_alpha);box-shadow:inset 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha)}.vkuiSubnavigationButton--selected{background-color:var(--vkui--color_background_accent_themed);border:none;box-shadow:none;color:var(--vkui--color_text_contrast_themed)}.vkuiSubnavigationButton--selected.vkuiSubnavigationButton--mode-tertiary{background-color:var(--vkui--color_transparent--active);color:var(--vkui--color_text_primary)}.vkuiSubnavigationButton--selected:not(.vkuiSubnavigationButton--mode-tertiary) .vkuiSubnavigationButton__before,.vkuiSubnavigationButton--selected:not(.vkuiSubnavigationButton--mode-tertiary) .vkuiSubnavigationButton__expandableIcon{color:inherit}.vkuiSubnavigationBar .vkuiSubnavigationButton+.vkuiSubnavigationButton{margin-left:var(--vkui--size_subnavigation_bar_gap--regular)}.vkuiSubnavigationBar--mode-fixed .vkuiSubnavigationButton{flex:1;min-width:0}

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { HasRootRef } from "../../types";
-import { VisuallyHiddenInputProps } from "../VisuallyHiddenInput/VisuallyHiddenInput";
+import { HasRootRef } from '../../types';
+import { VisuallyHiddenInputProps } from '../VisuallyHiddenInput/VisuallyHiddenInput';
 export interface SwitchProps extends VisuallyHiddenInputProps, HasRootRef<HTMLLabelElement> {
 }
 /**

package/dist/cssm/components/Switch/Switch.js

@@ -1,16 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["style", "className", "getRootRef"];
-import * as React from "react";
-import { getPlatformClassName } from "../../helpers/getPlatformClassName";
-import { classNamesString } from "../../lib/classNames";
-import { callMultiple } from "../../lib/callMultiple";
-import { usePlatform } from "../../hooks/usePlatform";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { VisuallyHiddenInput } from "../VisuallyHiddenInput/VisuallyHiddenInput";
-import { useFocusVisible } from "../../hooks/useFocusVisible";
-import { FocusVisible } from "../FocusVisible/FocusVisible";
-import { getSizeYClassName } from "../../helpers/getSizeYClassName";
+import * as React from 'react';
+import { getPlatformClassName } from '../../helpers/getPlatformClassName';
+import { classNames } from '@vkontakte/vkjs';
+import { callMultiple } from '../../lib/callMultiple';
+import { usePlatform } from '../../hooks/usePlatform';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';
+import { useFocusVisible } from '../../hooks/useFocusVisible';
+import { FocusVisible } from '../FocusVisible/FocusVisible';
+import { getSizeYClassName } from '../../helpers/getSizeYClassName';
 import "./Switch.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/Switch
@@ -28,7 +28,7 @@ export var Switch = function Switch(_ref) {
     onBlur = _useFocusVisible.onBlur,
     onFocus = _useFocusVisible.onFocus;
   return /*#__PURE__*/React.createElement("label", {
-    className: classNamesString("vkuiSwitch", getPlatformClassName("vkuiSwitch", platform), getSizeYClassName("vkuiSwitch", sizeY), restProps.disabled && "vkuiSwitch--disabled", focusVisible && "vkuiSwitch--focus-visible", className),
+    className: classNames("vkuiSwitch", getPlatformClassName("vkuiSwitch", platform), getSizeYClassName("vkuiSwitch", sizeY), restProps.disabled && "vkuiSwitch--disabled", focusVisible && "vkuiSwitch--focus-visible", className),
     style: style,
     ref: getRootRef,
     role: "presentation"

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["React","getPlatformClassName","classNamesString","callMultiple","usePlatform","useAdaptivity","VisuallyHiddenInput","useFocusVisible","FocusVisible","getSizeYClassName","Switch","style","className","getRootRef","restProps","platform","sizeY","focusVisible","onBlur","onFocus","disabled"],"sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { getPlatformClassName } from \"../../helpers/getPlatformClassName\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { callMultiple } from \"../../lib/callMultiple\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { HasRootRef } from \"../../types\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport {\n  VisuallyHiddenInput,\n  VisuallyHiddenInputProps,\n} from \"../VisuallyHiddenInput/VisuallyHiddenInput\";\nimport { useFocusVisible } from \"../../hooks/useFocusVisible\";\nimport { FocusVisible } from \"../FocusVisible/FocusVisible\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport styles from \"./Switch.module.css\";\n\nexport interface SwitchProps\n  extends VisuallyHiddenInputProps,\n    HasRootRef<HTMLLabelElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({\n  style,\n  className,\n  getRootRef,\n  ...restProps\n}: SwitchProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n  return (\n    <label\n      className={classNamesString(\n        styles[\"Switch\"],\n        getPlatformClassName(styles[\"Switch\"], platform),\n        getSizeYClassName(styles[\"Switch\"], sizeY),\n        restProps.disabled && styles[\"Switch--disabled\"],\n        focusVisible && styles[\"Switch--focus-visible\"],\n        className\n      )}\n      style={style}\n      ref={getRootRef}\n      role=\"presentation\"\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        type=\"checkbox\"\n        className={styles[\"Switch__self\"]}\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span role=\"presentation\" className={styles[\"Switch__pseudo\"]} />\n      <FocusVisible mode=\"outside\" />\n    </label>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,oBAAoB,QAAQ,oCAAoC;AACzE,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SACEC,mBAAmB,QAEd,4CAA4C;AACnD,SAASC,eAAe,QAAQ,6BAA6B;AAC7D,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,SAASC,iBAAiB,QAAQ,iCAAiC;AAAC;AAOpE;AACA;AACA;AACA,OAAO,IAAMC,MAAM,GAAG,SAATA,MAAM,OAKA;EAAA,IAJjBC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,SAAS;EAEZ,IAAMC,QAAQ,GAAGX,WAAW,EAAE;EAC9B,qBAAkBC,aAAa,EAAE;IAAzBW,KAAK,kBAALA,KAAK;EACb,uBAA0CT,eAAe,EAAE;IAAnDU,YAAY,oBAAZA,YAAY;IAAEC,MAAM,oBAANA,MAAM;IAAEC,OAAO,oBAAPA,OAAO;EAErC,oBACE;IACE,SAAS,EAAEjB,gBAAgB,eAEzBD,oBAAoB,eAAmBc,QAAQ,CAAC,EAChDN,iBAAiB,eAAmBO,KAAK,CAAC,EAC1CF,SAAS,CAACM,QAAQ,0BAA8B,EAChDH,YAAY,+BAAmC,EAC/CL,SAAS,CACT;IACF,KAAK,EAAED,KAAM;IACb,GAAG,EAAEE,UAAW;IAChB,IAAI,EAAC;EAAc,gBAEnB,oBAAC,mBAAmB,eACdC,SAAS;IACb,IAAI,EAAC,UAAU;IACf,SAAS,oBAAyB;IAClC,MAAM,EAAEX,YAAY,CAACe,MAAM,EAAEJ,SAAS,CAACI,MAAM,CAAE;IAC/C,OAAO,EAAEf,YAAY,CAACgB,OAAO,EAAEL,SAAS,CAACK,OAAO;EAAE,GAClD,eACF;IAAM,IAAI,EAAC,cAAc;IAAC,SAAS;EAA2B,EAAG,eACjE,oBAAC,YAAY;IAAC,IAAI,EAAC;EAAS,EAAG,CACzB;AAEZ,CAAC"}
+{"version":3,"file":"Switch.js","names":["React","getPlatformClassName","classNames","callMultiple","usePlatform","useAdaptivity","VisuallyHiddenInput","useFocusVisible","FocusVisible","getSizeYClassName","Switch","style","className","getRootRef","restProps","platform","sizeY","focusVisible","onBlur","onFocus","disabled"],"sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { classNames } from '@vkontakte/vkjs';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasRootRef } from '../../types';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport {\n  VisuallyHiddenInput,\n  VisuallyHiddenInputProps,\n} from '../VisuallyHiddenInput/VisuallyHiddenInput';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from './Switch.module.css';\n\nexport interface SwitchProps extends VisuallyHiddenInputProps, HasRootRef<HTMLLabelElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({ style, className, getRootRef, ...restProps }: SwitchProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n  return (\n    <label\n      className={classNames(\n        styles['Switch'],\n        getPlatformClassName(styles['Switch'], platform),\n        getSizeYClassName(styles['Switch'], sizeY),\n        restProps.disabled && styles['Switch--disabled'],\n        focusVisible && styles['Switch--focus-visible'],\n        className,\n      )}\n      style={style}\n      ref={getRootRef}\n      role=\"presentation\"\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        type=\"checkbox\"\n        className={styles['Switch__self']}\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span role=\"presentation\" className={styles['Switch__pseudo']} />\n      <FocusVisible mode=\"outside\" />\n    </label>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,oBAAoB,QAAQ,oCAAoC;AACzE,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SACEC,mBAAmB,QAEd,4CAA4C;AACnD,SAASC,eAAe,QAAQ,6BAA6B;AAC7D,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,SAASC,iBAAiB,QAAQ,iCAAiC;AAAC;AAKpE;AACA;AACA;AACA,OAAO,IAAMC,MAAM,GAAG,SAATA,MAAM,OAAoE;EAAA,IAA9DC,KAAK,QAALA,KAAK;IAAEC,SAAS,QAATA,SAAS;IAAEC,UAAU,QAAVA,UAAU;IAAKC,SAAS;EACjE,IAAMC,QAAQ,GAAGX,WAAW,EAAE;EAC9B,qBAAkBC,aAAa,EAAE;IAAzBW,KAAK,kBAALA,KAAK;EACb,uBAA0CT,eAAe,EAAE;IAAnDU,YAAY,oBAAZA,YAAY;IAAEC,MAAM,oBAANA,MAAM;IAAEC,OAAO,oBAAPA,OAAO;EAErC,oBACE;IACE,SAAS,EAAEjB,UAAU,eAEnBD,oBAAoB,eAAmBc,QAAQ,CAAC,EAChDN,iBAAiB,eAAmBO,KAAK,CAAC,EAC1CF,SAAS,CAACM,QAAQ,0BAA8B,EAChDH,YAAY,+BAAmC,EAC/CL,SAAS,CACT;IACF,KAAK,EAAED,KAAM;IACb,GAAG,EAAEE,UAAW;IAChB,IAAI,EAAC;EAAc,gBAEnB,oBAAC,mBAAmB,eACdC,SAAS;IACb,IAAI,EAAC,UAAU;IACf,SAAS,oBAAyB;IAClC,MAAM,EAAEX,YAAY,CAACe,MAAM,EAAEJ,SAAS,CAACI,MAAM,CAAE;IAC/C,OAAO,EAAEf,YAAY,CAACgB,OAAO,EAAEL,SAAS,CAACK,OAAO;EAAE,GAClD,eACF;IAAM,IAAI,EAAC,cAAc;IAAC,SAAS;EAA2B,EAAG,eACjE,oBAAC,YAAY;IAAC,IAAI,EAAC;EAAS,EAAG,CACzB;AAEZ,CAAC"}

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)
@@ -7,7 +7,7 @@ export interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Задает расположение элементов (вертикальное/горизонтальное)
      */
-    mode?: "vertical" | "horizontal" | "auto";
+    mode?: 'vertical' | 'horizontal' | 'auto';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Tabbar

package/dist/cssm/components/Tabbar/Tabbar.js

@@ -1,19 +1,19 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "shadow", "mode", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { usePlatform } from "../../hooks/usePlatform";
-import { Platform } from "../../lib/platform";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { usePlatform } from '../../hooks/usePlatform';
+import { Platform } from '../../lib/platform';
 import "./Tabbar.module.css";
 var getItemsLayoutClassName = function getItemsLayoutClassName(itemsLayout, children) {
   switch (itemsLayout) {
-    case "horizontal":
+    case 'horizontal':
       return "vkuiTabbar--layout-horizontal";
-    case "vertical":
+    case 'vertical':
       return "vkuiTabbar--layout-vertical";
     default:
-      return React.Children.count(children) > 2 ? getItemsLayoutClassName("vertical", []) : getItemsLayoutClassName("horizontal", []);
+      return React.Children.count(children) > 2 ? getItemsLayoutClassName('vertical', []) : getItemsLayoutClassName('horizontal', []);
   }
 };
 
@@ -29,7 +29,7 @@ export var Tabbar = function Tabbar(_ref) {
     restProps = _objectWithoutProperties(_ref, _excluded);
   var platform = usePlatform();
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNamesString("vkuiTabbar", platform === Platform.IOS && "vkuiTabbar--ios", getItemsLayoutClassName(mode, children), shadow && "vkuiTabbar--shadow", className)
+    className: classNames("vkuiTabbar", platform === Platform.IOS && "vkuiTabbar--ios", getItemsLayoutClassName(mode, children), shadow && "vkuiTabbar--shadow", className)
   }, restProps), /*#__PURE__*/React.createElement("div", {
     className: "vkuiTabbar__in"
   }, children));

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

@@ -1 +1 @@
-{"version":3,"file":"Tabbar.js","names":["React","classNamesString","usePlatform","Platform","getItemsLayoutClassName","itemsLayout","children","Children","count","Tabbar","shadow","mode","className","restProps","platform","IOS"],"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { Platform } from \"../../lib/platform\";\nimport styles from \"./Tabbar.module.css\";\n\nexport interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)\n   */\n  shadow?: boolean;\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное)\n   */\n  mode?: \"vertical\" | \"horizontal\" | \"auto\";\n}\n\nconst getItemsLayoutClassName = (\n  itemsLayout: TabbarProps[\"mode\"],\n  children: TabbarProps[\"children\"]\n): string => {\n  switch (itemsLayout) {\n    case \"horizontal\":\n      return styles[\"Tabbar--layout-horizontal\"];\n    case \"vertical\":\n      return styles[\"Tabbar--layout-vertical\"];\n    default:\n      return React.Children.count(children) > 2\n        ? getItemsLayoutClassName(\"vertical\", [])\n        : getItemsLayoutClassName(\"horizontal\", []);\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({\n  children,\n  shadow = true,\n  mode,\n  className,\n  ...restProps\n}: TabbarProps) => {\n  const platform = usePlatform();\n\n  return (\n    <div\n      className={classNamesString(\n        styles[\"Tabbar\"],\n        platform === Platform.IOS && styles[\"Tabbar--ios\"],\n        getItemsLayoutClassName(mode, children),\n        shadow && styles[\"Tabbar--shadow\"],\n        className\n      )}\n      {...restProps}\n    >\n      <div className={styles[\"Tabbar__in\"]}>{children}</div>\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,oBAAoB;AAAC;AAc9C,IAAMC,uBAAuB,GAAG,SAA1BA,uBAAuB,CAC3BC,WAAgC,EAChCC,QAAiC,EACtB;EACX,QAAQD,WAAW;IACjB,KAAK,YAAY;MACf;IACF,KAAK,UAAU;MACb;IACF;MACE,OAAOL,KAAK,CAACO,QAAQ,CAACC,KAAK,CAACF,QAAQ,CAAC,GAAG,CAAC,GACrCF,uBAAuB,CAAC,UAAU,EAAE,EAAE,CAAC,GACvCA,uBAAuB,CAAC,YAAY,EAAE,EAAE,CAAC;EAAC;AAEpD,CAAC;;AAED;AACA;AACA;AACA,OAAO,IAAMK,MAAM,GAAG,SAATA,MAAM,OAMA;EAAA,IALjBH,QAAQ,QAARA,QAAQ;IAAA,mBACRI,MAAM;IAANA,MAAM,4BAAG,IAAI;IACbC,IAAI,QAAJA,IAAI;IACJC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGZ,WAAW,EAAE;EAE9B,oBACE;IACE,SAAS,EAAED,gBAAgB,eAEzBa,QAAQ,KAAKX,QAAQ,CAACY,GAAG,qBAAyB,EAClDX,uBAAuB,CAACO,IAAI,EAAEL,QAAQ,CAAC,EACvCI,MAAM,wBAA4B,EAClCE,SAAS;EACT,GACEC,SAAS,gBAEb;IAAK,SAAS;EAAuB,GAAEP,QAAQ,CAAO,CAClD;AAEV,CAAC"}
+{"version":3,"file":"Tabbar.js","names":["React","classNames","usePlatform","Platform","getItemsLayoutClassName","itemsLayout","children","Children","count","Tabbar","shadow","mode","className","restProps","platform","IOS"],"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)\n   */\n  shadow?: boolean;\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное)\n   */\n  mode?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst getItemsLayoutClassName = (\n  itemsLayout: TabbarProps['mode'],\n  children: TabbarProps['children'],\n): string => {\n  switch (itemsLayout) {\n    case 'horizontal':\n      return styles['Tabbar--layout-horizontal'];\n    case 'vertical':\n      return styles['Tabbar--layout-vertical'];\n    default:\n      return React.Children.count(children) > 2\n        ? getItemsLayoutClassName('vertical', [])\n        : getItemsLayoutClassName('horizontal', []);\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({ children, shadow = true, mode, className, ...restProps }: TabbarProps) => {\n  const platform = usePlatform();\n\n  return (\n    <div\n      className={classNames(\n        styles['Tabbar'],\n        platform === Platform.IOS && styles['Tabbar--ios'],\n        getItemsLayoutClassName(mode, children),\n        shadow && styles['Tabbar--shadow'],\n        className,\n      )}\n      {...restProps}\n    >\n      <div className={styles['Tabbar__in']}>{children}</div>\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,oBAAoB;AAAC;AAc9C,IAAMC,uBAAuB,GAAG,SAA1BA,uBAAuB,CAC3BC,WAAgC,EAChCC,QAAiC,EACtB;EACX,QAAQD,WAAW;IACjB,KAAK,YAAY;MACf;IACF,KAAK,UAAU;MACb;IACF;MACE,OAAOL,KAAK,CAACO,QAAQ,CAACC,KAAK,CAACF,QAAQ,CAAC,GAAG,CAAC,GACrCF,uBAAuB,CAAC,UAAU,EAAE,EAAE,CAAC,GACvCA,uBAAuB,CAAC,YAAY,EAAE,EAAE,CAAC;EAAC;AAEpD,CAAC;;AAED;AACA;AACA;AACA,OAAO,IAAMK,MAAM,GAAG,SAATA,MAAM,OAAgF;EAAA,IAA1EH,QAAQ,QAARA,QAAQ;IAAA,mBAAEI,MAAM;IAANA,MAAM,4BAAG,IAAI;IAAEC,IAAI,QAAJA,IAAI;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAC7E,IAAMC,QAAQ,GAAGZ,WAAW,EAAE;EAE9B,oBACE;IACE,SAAS,EAAED,UAAU,eAEnBa,QAAQ,KAAKX,QAAQ,CAACY,GAAG,qBAAyB,EAClDX,uBAAuB,CAACO,IAAI,EAAEL,QAAQ,CAAC,EACvCI,MAAM,wBAA4B,EAClCE,SAAS;EACT,GACEC,SAAS,gBAEb;IAAK,SAAS;EAAuB,GAAEP,QAAQ,CAAO,CAClD;AAEV,CAAC"}