@vkontakte/vkui 5.0.3 → 5.1.2

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:8px;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:30px;height:var(--vkui--size_button_small_height--regular)}.vkuiSubnavigationButton--size-m .vkuiSubnavigationButton__in{height:36px;height:var(--vkui--size_button_medium_height--regular)}.vkuiSubnavigationButton--size-l .vkuiSubnavigationButton__in{height:44px;height:var(--vkui--size_button_large_height--regular)}.vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--size-s .vkuiSubnavigationButton__in{height:28px;height:var(--vkui--size_button_small_height--compact)}.vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--size-m .vkuiSubnavigationButton__in{height:32px;height:var(--vkui--size_button_medium_height--compact)}.vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--size-l .vkuiSubnavigationButton__in{height:36px;height:var(--vkui--size_button_large_height--compact)}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiSubnavigationButton--sizeY-none.vkuiSubnavigationButton--size-s .vkuiSubnavigationButton__in{height:28px;height:var(--vkui--size_button_small_height--compact)}.vkuiSubnavigationButton--sizeY-none.vkuiSubnavigationButton--size-m .vkuiSubnavigationButton__in{height:32px;height:var(--vkui--size_button_medium_height--compact)}.vkuiSubnavigationButton--sizeY-none.vkuiSubnavigationButton--size-l .vkuiSubnavigationButton__in{height:36px;height:var(--vkui--size_button_large_height--compact)}}.vkuiSubnavigationButton__before{color:#2688eb;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:#99a2ad;color:var(--vkui--color_icon_secondary);margin-left:8px;margin-top:1px}.vkuiSubnavigationButton__before:first-child,.vkuiSubnavigationButton__label:first-child{padding-left:12px;padding-left:var(--vkui--size_button_base_small_padding_horizontal_icon--regular)}.vkuiSubnavigationButton__after:last-child,.vkuiSubnavigationButton__expandableIcon,.vkuiSubnavigationButton__label:last-child{padding-right:12px;padding-right:var(--vkui--size_button_base_small_padding_horizontal_icon--regular)}.vkuiSubnavigationButton--mode-primary{background-color:#fff;background-color:var(--vkui--color_background_modal);box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3)}.vkuiSubnavigationButton--mode-outline{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);box-shadow:inset 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha)}.vkuiSubnavigationButton--selected{background-color:#2688eb;background-color:var(--vkui--color_background_accent_themed);border:none;box-shadow:none;color:#fff;color:var(--vkui--color_text_contrast_themed)}.vkuiSubnavigationButton--selected.vkuiSubnavigationButton--mode-tertiary{background-color:rgba(0,16,61,.08);background-color:var(--vkui--color_transparent--active);color:#000;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:8px;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,17 +28,16 @@ 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"
+    ref: getRootRef
   }, /*#__PURE__*/React.createElement(VisuallyHiddenInput, _extends({}, restProps, {
     type: "checkbox",
     className: "vkuiSwitch__self",
     onBlur: callMultiple(onBlur, restProps.onBlur),
     onFocus: callMultiple(onFocus, restProps.onFocus)
   })), /*#__PURE__*/React.createElement("span", {
-    role: "presentation",
+    "aria-hidden": true,
     className: "vkuiSwitch__pseudo"
   }), /*#__PURE__*/React.createElement(FocusVisible, {
     mode: "outside"

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    >\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 aria-hidden 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;EAAW,gBAEhB,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,mBAAW;IAAC,SAAS;EAA2B,EAAG,eACzD,oBAAC,YAAY;IAAC,IAAI,EAAC;EAAS,EAAG,CACzB;AAEZ,CAAC"}

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

@@ -1 +1 @@
-.vkuiSwitch{cursor:pointer;display:block;padding:calc((var(--vkui--size_switch_pin--regular) - var(--vkui--size_switch_height--regular)) / 2);position:relative}.vkuiSwitch--sizeY-compact{padding:calc((var(--vkui--size_switch_pin--compact) - var(--vkui--size_switch_height--compact)) / 2)}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiSwitch--sizeY-none{padding:calc((var(--vkui--size_switch_pin--compact) - var(--vkui--size_switch_height--compact)) / 2)}}.vkuiSwitch--disabled{cursor:default}.vkuiSwitch__pseudo{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box;display:block;position:relative}.vkuiSwitch__pseudo:before{background:var(--vkui--color_icon_contrast_secondary);border-radius:50%;box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.24);box-sizing:border-box;content:"";height:var(--vkui--size_switch_pin--regular);left:calc((var(--vkui--size_switch_height--regular) - var(--vkui--size_switch_pin--regular)) / 2);position:absolute;top:calc((var(--vkui--size_switch_height--regular) - var(--vkui--size_switch_pin--regular)) / 2);width:var(--vkui--size_switch_pin--regular)}.vkuiSwitch--sizeY-compact .vkuiSwitch__pseudo:before{height:var(--vkui--size_switch_pin--compact);left:calc((var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2);top:calc((var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2);width:var(--vkui--size_switch_pin--compact)}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiSwitch--sizeY-none .vkuiSwitch__pseudo:before{height:var(--vkui--size_switch_pin--compact);left:calc((var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2);top:calc((var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2);width:var(--vkui--size_switch_pin--compact)}}.vkuiSwitch__self:checked+.vkuiSwitch__pseudo:before{background:var(--vkui--color_icon_accent);transform:translateX(calc(var(--vkui--size_switch_width--regular) - var(--vkui--size_switch_height--regular)))}.vkuiSwitch__pseudo:after{background:var(--vkui--color_icon_tertiary_alpha);border-radius:calc(var(--vkui--size_switch_width--regular) / 2);content:"";display:block;height:var(--vkui--size_switch_height--regular);width:var(--vkui--size_switch_width--regular)}.vkuiSwitch--sizeY-compact .vkuiSwitch__pseudo:after{border-radius:calc(var(--vkui--size_switch_width--compact) / 2);height:var(--vkui--size_switch_height--compact);width:var(--vkui--size_switch_width--compact)}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiSwitch--sizeY-none .vkuiSwitch__pseudo:after{border-radius:calc(var(--vkui--size_switch_width--compact) / 2);height:var(--vkui--size_switch_height--compact);width:var(--vkui--size_switch_width--compact)}}.vkuiSwitch__self:checked+.vkuiSwitch__pseudo:after{background:var(--vkui--color_icon_accent);opacity:.48}.vkuiSwitch--sizeY-compact .vkuiSwitch__self:checked+.vkuiSwitch__pseudo:before{transform:translateX(calc(var(--vkui--size_switch_width--compact) - var(--vkui--size_switch_height--compact)))}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiSwitch--sizeY-none .vkuiSwitch__self:checked+.vkuiSwitch__pseudo:before{transform:translateX(calc(var(--vkui--size_switch_width--compact) - var(--vkui--size_switch_height--compact)))}}.vkuiSwitch__self[disabled]+.vkuiSwitch__pseudo{opacity:var(--vkui--opacity_disable)}.vkuiSwitch--ios .vkuiSwitch__pseudo:before{box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06),inset 0 0 0 .5px rgba(0,0,0,.04)}.vkuiSwitch--ios .vkuiSwitch__pseudo:before,.vkuiSwitch--ios .vkuiSwitch__self:checked+.vkuiSwitch__pseudo:before{background:#fff;background:var(--vkui_internal--white)}.vkuiSwitch--ios .vkuiSwitch__pseudo:after{background:var(--vkui--color_track_background)}.vkuiSwitch--ios .vkuiSwitch__self:checked+.vkuiSwitch__pseudo:after{opacity:1}@media (prefers-reduced-motion:no-preference){.vkuiSwitch__pseudo:after{transition:background-color .1s ease}.vkuiSwitch__pseudo:before{transition:transform .1s ease}.vkuiSwitch--ios .vkuiSwitch__pseudo:after{transition:background-color .2s ease}.vkuiSwitch--ios .vkuiSwitch__pseudo:before{transition:transform .2s cubic-bezier(.36,-.24,.26,1.32)}}.vkuiSimpleCell__after>.vkuiSwitch{margin-left:12px}.vkuiSimpleCell>.vkuiSwitch:first-child{margin-right:12px}
+.vkuiSwitch{cursor:pointer;display:block;padding:calc((20px - 14px) / 2);padding:calc((var(--vkui--size_switch_pin--regular) - var(--vkui--size_switch_height--regular)) / 2);position:relative}.vkuiSwitch--sizeY-compact{padding:calc((18px - 12px) / 2);padding:calc((var(--vkui--size_switch_pin--compact) - var(--vkui--size_switch_height--compact)) / 2)}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiSwitch--sizeY-none{padding:calc((18px - 12px) / 2);padding:calc((var(--vkui--size_switch_pin--compact) - var(--vkui--size_switch_height--compact)) / 2)}}.vkuiSwitch--disabled{cursor:default}.vkuiSwitch__pseudo{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box;display:block;position:relative}.vkuiSwitch__pseudo:before{background:#f2f3f5;background:var(--vkui--color_icon_contrast_secondary);border-radius:50%;box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.24);box-sizing:border-box;content:"";height:20px;height:var(--vkui--size_switch_pin--regular);left:calc((14px - 20px) / 2);left:calc((var(--vkui--size_switch_height--regular) - var(--vkui--size_switch_pin--regular)) / 2);position:absolute;top:calc((14px - 20px) / 2);top:calc((var(--vkui--size_switch_height--regular) - var(--vkui--size_switch_pin--regular)) / 2);width:20px;width:var(--vkui--size_switch_pin--regular)}.vkuiSwitch--sizeY-compact .vkuiSwitch__pseudo:before{height:18px;height:var(--vkui--size_switch_pin--compact);left:calc((12px - 18px) / 2);left:calc((var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2);top:calc((12px - 18px) / 2);top:calc((var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2);width:18px;width:var(--vkui--size_switch_pin--compact)}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiSwitch--sizeY-none .vkuiSwitch__pseudo:before{height:18px;height:var(--vkui--size_switch_pin--compact);left:calc((12px - 18px) / 2);left:calc((var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2);top:calc((12px - 18px) / 2);top:calc((var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2);width:18px;width:var(--vkui--size_switch_pin--compact)}}.vkuiSwitch__self:checked+.vkuiSwitch__pseudo:before{background:#2688eb;background:var(--vkui--color_icon_accent);transform:translateX(calc(34px - 14px));transform:translateX(calc(var(--vkui--size_switch_width--regular) - var(--vkui--size_switch_height--regular)))}.vkuiSwitch__pseudo:after{background:rgba(0,0,0,.24);background:var(--vkui--color_icon_tertiary_alpha);border-radius:calc(34px / 2);border-radius:calc(var(--vkui--size_switch_width--regular) / 2);content:"";display:block;height:14px;height:var(--vkui--size_switch_height--regular);width:34px;width:var(--vkui--size_switch_width--regular)}.vkuiSwitch--sizeY-compact .vkuiSwitch__pseudo:after{border-radius:calc(32px / 2);border-radius:calc(var(--vkui--size_switch_width--compact) / 2);height:12px;height:var(--vkui--size_switch_height--compact);width:32px;width:var(--vkui--size_switch_width--compact)}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiSwitch--sizeY-none .vkuiSwitch__pseudo:after{border-radius:calc(32px / 2);border-radius:calc(var(--vkui--size_switch_width--compact) / 2);height:12px;height:var(--vkui--size_switch_height--compact);width:32px;width:var(--vkui--size_switch_width--compact)}}.vkuiSwitch__self:checked+.vkuiSwitch__pseudo:after{background:#2688eb;background:var(--vkui--color_icon_accent);opacity:.48}.vkuiSwitch--sizeY-compact .vkuiSwitch__self:checked+.vkuiSwitch__pseudo:before{transform:translateX(calc(32px - 12px));transform:translateX(calc(var(--vkui--size_switch_width--compact) - var(--vkui--size_switch_height--compact)))}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiSwitch--sizeY-none .vkuiSwitch__self:checked+.vkuiSwitch__pseudo:before{transform:translateX(calc(32px - 12px));transform:translateX(calc(var(--vkui--size_switch_width--compact) - var(--vkui--size_switch_height--compact)))}}.vkuiSwitch__self[disabled]+.vkuiSwitch__pseudo{opacity:.4;opacity:var(--vkui--opacity_disable)}.vkuiSwitch--ios .vkuiSwitch__pseudo:before{box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06),inset 0 0 0 .5px rgba(0,0,0,.04)}.vkuiSwitch--ios .vkuiSwitch__pseudo:before,.vkuiSwitch--ios .vkuiSwitch__self:checked+.vkuiSwitch__pseudo:before{background:#fff;background:var(--vkui_internal--white)}.vkuiSwitch--ios .vkuiSwitch__pseudo:after{background:#e1e3e6;background:var(--vkui--color_track_background)}.vkuiSwitch--ios .vkuiSwitch__self:checked+.vkuiSwitch__pseudo:after{opacity:1}@media (prefers-reduced-motion:no-preference){.vkuiSwitch__pseudo:after{transition:background-color .1s ease}.vkuiSwitch__pseudo:before{transition:transform .1s ease}.vkuiSwitch--ios .vkuiSwitch__pseudo:after{transition:background-color .2s ease}.vkuiSwitch--ios .vkuiSwitch__pseudo:before{transition:transform .2s cubic-bezier(.36,-.24,.26,1.32)}}.vkuiSimpleCell__after>.vkuiSwitch{margin-left:12px}.vkuiSimpleCell>.vkuiSwitch:first-child{margin-right:12px}

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"}

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

@@ -1 +1 @@
-.vkuiTabbar{background:var(--vkui--color_background_tertiary);bottom:0;box-sizing:initial;height:48px;height:var(--vkui_internal--tabbar_height);left:0;padding-bottom:0;padding-bottom:var(--vkui_internal--safe_area_inset_bottom);position:fixed;width:100%;z-index:2}.vkuiTabbar__in{display:flex;justify-content:center;overflow:hidden}.vkuiTabbar--shadow{box-shadow:var(--vkui--elevation3)}.vkuiTabbar--ios.vkuiTabbar--shadow{box-shadow:none}.vkuiTabbar--ios.vkuiTabbar--shadow:before{background:var(--vkui--color_separator_primary_alpha);bottom:100%;content:"";height:1px;left:0;position:absolute;transform-origin:center bottom;width:100%}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.vkuiTabbar--ios:before{transform:scaleY(.5)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.vkuiTabbar--ios:before{transform:scaleY(.33)}}
+.vkuiTabbar{background:#f9f9f9;background:var(--vkui--color_background_tertiary);bottom:0;box-sizing:initial;height:48px;height:var(--vkui_internal--tabbar_height);left:0;padding-bottom:0;padding-bottom:var(--vkui_internal--safe_area_inset_bottom);position:fixed;width:100%;z-index:2;z-index:var(--vkui_internal--z_index_tabs)}.vkuiTabbar__in{display:flex;justify-content:center;overflow:hidden}.vkuiTabbar--shadow{box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3)}.vkuiTabbar--ios.vkuiTabbar--shadow{box-shadow:none}.vkuiTabbar--ios.vkuiTabbar--shadow:before{background:rgba(0,0,0,.12);background:var(--vkui--color_separator_primary_alpha);bottom:100%;content:"";height:1px;left:0;position:absolute;transform-origin:center bottom;width:100%}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.vkuiTabbar--ios:before{transform:scaleY(.5)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.vkuiTabbar--ios:before{transform:scaleY(.33)}}

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { HasComponent, HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasComponent, HasRootRef } from '../../types';
 export interface TabbarItemProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent {
     selected?: boolean;
     /**

package/dist/cssm/components/TabbarItem/TabbarItem.js

@@ -1,13 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "selected", "indicator", "text", "href", "Component", "disabled", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { usePlatform } from "../../hooks/usePlatform";
-import { hasReactNode } from "../../lib/utils";
-import { Tappable } from "../Tappable/Tappable";
-import { Footnote } from "../Typography/Footnote/Footnote";
-import { Platform } from "../../lib/platform";
+import * as React from 'react';
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { usePlatform } from '../../hooks/usePlatform';
+import { Tappable } from '../Tappable/Tappable';
+import { Footnote } from '../Typography/Footnote/Footnote';
+import { Platform } from '../../lib/platform';
 import "./TabbarItem.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/TabbarItem
@@ -19,7 +18,7 @@ export var TabbarItem = function TabbarItem(_ref) {
     text = _ref.text,
     href = _ref.href,
     _ref$Component = _ref.Component,
-    Component = _ref$Component === void 0 ? href ? "a" : "button" : _ref$Component,
+    Component = _ref$Component === void 0 ? href ? 'a' : 'button' : _ref$Component,
     disabled = _ref.disabled,
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
@@ -27,12 +26,12 @@ export var TabbarItem = function TabbarItem(_ref) {
   return /*#__PURE__*/React.createElement(Component, _extends({}, restProps, {
     disabled: disabled,
     href: href,
-    className: classNamesString("vkuiTabbarItem", platform === Platform.IOS && "vkuiTabbarItem--ios", platform === Platform.ANDROID && "vkuiTabbarItem--android", selected && "vkuiTabbarItem--selected", !!text && "vkuiTabbarItem--text", className)
+    className: classNames("vkuiTabbarItem", platform === Platform.IOS && "vkuiTabbarItem--ios", platform === Platform.ANDROID && "vkuiTabbarItem--android", selected && "vkuiTabbarItem--selected", !!text && "vkuiTabbarItem--text", className)
   }), /*#__PURE__*/React.createElement(Tappable, {
     role: "presentation",
     Component: "div",
     disabled: disabled,
-    activeMode: platform === Platform.IOS ? "vkuiTabbarItem__tappable--active" : "background",
+    activeMode: platform === Platform.IOS ? "vkuiTabbarItem__tappable--active" : 'background',
     activeEffectDelay: platform === Platform.IOS ? 0 : 300,
     hasHover: false,
     className: "vkuiTabbarItem__tappable"

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

@@ -1 +1 @@
-{"version":3,"file":"TabbarItem.js","names":["React","classNamesString","usePlatform","hasReactNode","Tappable","Footnote","Platform","TabbarItem","children","selected","indicator","text","href","Component","disabled","className","restProps","platform","IOS","ANDROID"],"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { Platform } from \"../../lib/platform\";\nimport { HasComponent, HasRootRef } from \"../../types\";\nimport styles from \"./TabbarItem.module.css\";\n\nexport interface TabbarItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  selected?: boolean;\n  /**\n   * Текст рядом с иконкой\n   */\n  text?: React.ReactNode;\n  /**\n   * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n   */\n  indicator?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  text,\n  href,\n  Component = href ? \"a\" : \"button\",\n  disabled,\n  className,\n  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  return (\n    <Component\n      {...restProps}\n      disabled={disabled}\n      href={href}\n      className={classNamesString(\n        styles[\"TabbarItem\"],\n        platform === Platform.IOS && styles[\"TabbarItem--ios\"],\n        platform === Platform.ANDROID && styles[\"TabbarItem--android\"],\n        selected && styles[\"TabbarItem--selected\"],\n        !!text && styles[\"TabbarItem--text\"],\n        className\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        Component=\"div\"\n        disabled={disabled}\n        activeMode={\n          platform === Platform.IOS\n            ? styles[\"TabbarItem__tappable--active\"]\n            : \"background\"\n        }\n        activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n        hasHover={false}\n        className={styles[\"TabbarItem__tappable\"]}\n      />\n      <div className={styles[\"TabbarItem__in\"]}>\n        <div className={styles[\"TabbarItem__icon\"]}>\n          {children}\n          <div className={styles[\"TabbarItem__label\"]}>\n            {hasReactNode(indicator) && indicator}\n          </div>\n        </div>\n        {text && (\n          <Footnote\n            Component=\"div\"\n            className={styles[\"TabbarItem__text\"]}\n            weight=\"2\"\n          >\n            {text}\n          </Footnote>\n        )}\n      </div>\n    </Component>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,QAAQ,QAAQ,oBAAoB;AAAC;AAmB9C;AACA;AACA;AACA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAU,OAUA;EAAA,IATrBC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IAAA,sBACJC,SAAS;IAATA,SAAS,+BAAGD,IAAI,GAAG,GAAG,GAAG,QAAQ;IACjCE,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGf,WAAW,EAAE;EAE9B,oBACE,oBAAC,SAAS,eACJc,SAAS;IACb,QAAQ,EAAEF,QAAS;IACnB,IAAI,EAAEF,IAAK;IACX,SAAS,EAAEX,gBAAgB,mBAEzBgB,QAAQ,KAAKX,QAAQ,CAACY,GAAG,yBAA6B,EACtDD,QAAQ,KAAKX,QAAQ,CAACa,OAAO,6BAAiC,EAC9DV,QAAQ,8BAAkC,EAC1C,CAAC,CAACE,IAAI,0BAA8B,EACpCI,SAAS;EACT,iBAEF,oBAAC,QAAQ;IACP,IAAI,EAAC,cAAc;IACnB,SAAS,EAAC,KAAK;IACf,QAAQ,EAAED,QAAS;IACnB,UAAU,EACRG,QAAQ,KAAKX,QAAQ,CAACY,GAAG,wCAErB,YACL;IACD,iBAAiB,EAAED,QAAQ,KAAKX,QAAQ,CAACY,GAAG,GAAG,CAAC,GAAG,GAAI;IACvD,QAAQ,EAAE,KAAM;IAChB,SAAS;EAAiC,EAC1C,eACF;IAAK,SAAS;EAA2B,gBACvC;IAAK,SAAS;EAA6B,GACxCV,QAAQ,eACT;IAAK,SAAS;EAA8B,GACzCL,YAAY,CAACO,SAAS,CAAC,IAAIA,SAAS,CACjC,CACF,EACLC,IAAI,iBACH,oBAAC,QAAQ;IACP,SAAS,EAAC,KAAK;IACf,SAAS,wBAA6B;IACtC,MAAM,EAAC;EAAG,GAETA,IAAI,CAER,CACG,CACI;AAEhB,CAAC"}
+{"version":3,"file":"TabbarItem.js","names":["React","classNames","hasReactNode","usePlatform","Tappable","Footnote","Platform","TabbarItem","children","selected","indicator","text","href","Component","disabled","className","restProps","platform","IOS","ANDROID"],"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HasRootRef } from '../../types';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  selected?: boolean;\n  /**\n   * Текст рядом с иконкой\n   */\n  text?: React.ReactNode;\n  /**\n   * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n   */\n  indicator?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  text,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  className,\n  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  return (\n    <Component\n      {...restProps}\n      disabled={disabled}\n      href={href}\n      className={classNames(\n        styles['TabbarItem'],\n        platform === Platform.IOS && styles['TabbarItem--ios'],\n        platform === Platform.ANDROID && styles['TabbarItem--android'],\n        selected && styles['TabbarItem--selected'],\n        !!text && styles['TabbarItem--text'],\n        className,\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        Component=\"div\"\n        disabled={disabled}\n        activeMode={\n          platform === Platform.IOS ? styles['TabbarItem__tappable--active'] : 'background'\n        }\n        activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n        hasHover={false}\n        className={styles['TabbarItem__tappable']}\n      />\n      <div className={styles['TabbarItem__in']}>\n        <div className={styles['TabbarItem__icon']}>\n          {children}\n          <div className={styles['TabbarItem__label']}>{hasReactNode(indicator) && indicator}</div>\n        </div>\n        {text && (\n          <Footnote Component=\"div\" className={styles['TabbarItem__text']} weight=\"2\">\n            {text}\n          </Footnote>\n        )}\n      </div>\n    </Component>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,QAAQ,QAAQ,oBAAoB;AAAC;AAmB9C;AACA;AACA;AACA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAU,OAUA;EAAA,IATrBC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IAAA,sBACJC,SAAS;IAATA,SAAS,+BAAGD,IAAI,GAAG,GAAG,GAAG,QAAQ;IACjCE,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGd,WAAW,EAAE;EAE9B,oBACE,oBAAC,SAAS,eACJa,SAAS;IACb,QAAQ,EAAEF,QAAS;IACnB,IAAI,EAAEF,IAAK;IACX,SAAS,EAAEX,UAAU,mBAEnBgB,QAAQ,KAAKX,QAAQ,CAACY,GAAG,yBAA6B,EACtDD,QAAQ,KAAKX,QAAQ,CAACa,OAAO,6BAAiC,EAC9DV,QAAQ,8BAAkC,EAC1C,CAAC,CAACE,IAAI,0BAA8B,EACpCI,SAAS;EACT,iBAEF,oBAAC,QAAQ;IACP,IAAI,EAAC,cAAc;IACnB,SAAS,EAAC,KAAK;IACf,QAAQ,EAAED,QAAS;IACnB,UAAU,EACRG,QAAQ,KAAKX,QAAQ,CAACY,GAAG,wCAA4C,YACtE;IACD,iBAAiB,EAAED,QAAQ,KAAKX,QAAQ,CAACY,GAAG,GAAG,CAAC,GAAG,GAAI;IACvD,QAAQ,EAAE,KAAM;IAChB,SAAS;EAAiC,EAC1C,eACF;IAAK,SAAS;EAA2B,gBACvC;IAAK,SAAS;EAA6B,GACxCV,QAAQ,eACT;IAAK,SAAS;EAA8B,GAAEN,YAAY,CAACQ,SAAS,CAAC,IAAIA,SAAS,CAAO,CACrF,EACLC,IAAI,iBACH,oBAAC,QAAQ;IAAC,SAAS,EAAC,KAAK;IAAC,SAAS,wBAA6B;IAAC,MAAM,EAAC;EAAG,GACxEA,IAAI,CAER,CACG,CACI;AAEhB,CAAC"}

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

@@ -1 +1 @@
-.vkuiTabbarItem{align-items:center;background:transparent;border:none;color:var(--vkui--color_text_tertiary);display:flex;height:48px;height:var(--vkui_internal--tabbar_height);justify-content:center;outline:none;padding:0;position:relative;text-decoration:none}.vkuiTabbar .vkuiTabbarItem{flex-basis:0;flex-grow:1;flex-shrink:0;max-width:100%;min-width:0}.vkuiTabbarItem--selected{color:var(--vkui--color_text_accent_themed)}.vkuiTabbarItem__tappable{position:absolute}.vkuiTabbarItem__in{align-items:center;display:flex;height:100%;justify-content:center;overflow:hidden;padding:0 2px;pointer-events:none;width:100%}.vkuiTabbar--layout-vertical .vkuiTabbarItem--text .vkuiTabbarItem__in{position:relative;top:2px}.vkuiTabbar--layout-vertical .vkuiTabbarItem__in{flex-direction:column}.vkuiTabbar--layout-horizontal .vkuiTabbarItem__in{flex-direction:row}.vkuiTabbarItem__icon{color:var(--vkui--color_icon_secondary);position:relative}.vkuiTabbarItem--selected .vkuiTabbarItem__icon{color:var(--vkui--color_icon_accent_themed)}.vkuiTabbarItem__label .vkuiCounter{position:absolute;right:-9px;top:-2px}.vkuiTabbarItem__label .vkuiBadge{position:absolute;right:-4px;top:-2px}.vkuiTabbarItem__text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiTabbar--layout-vertical .vkuiTabbarItem__text{font-size:10px;line-height:12px;margin-top:2px}.vkuiTabbar--layout-horizontal .vkuiTabbarItem__text{margin-left:8px}.vkuiTabbarItem--android .vkuiTabbarItem__tappable{border-radius:50%;padding-bottom:calc(100% + 16px);width:calc(100% + 16px)}.vkuiTabbarItem--android:first-child{border-bottom-left-radius:0;border-top-left-radius:0}.vkuiTabbarItem--android:last-child{border-bottom-right-radius:0;border-top-right-radius:0}.vkuiTabbarItem--ios .vkuiTabbarItem__tappable{height:100%;left:0;top:0;width:100%}.vkuiTabbarItem--ios .vkuiTabbarItem__in{transition:transform .07s var(--vkui--animation_easing_platform)}.vkuiTabbarItem--ios .vkuiTabbarItem__tappable--active+.vkuiTabbarItem__in{transform:scale(.96)}
+.vkuiTabbarItem{align-items:center;background:transparent;border:none;color:#99a2ad;color:var(--vkui--color_text_tertiary);display:flex;height:48px;height:var(--vkui_internal--tabbar_height);justify-content:center;outline:none;padding:0;position:relative;text-decoration:none}.vkuiTabbar .vkuiTabbarItem{flex-basis:0;flex-grow:1;flex-shrink:0;max-width:100%;min-width:0}.vkuiTabbarItem--selected{color:#2688eb;color:var(--vkui--color_text_accent_themed)}.vkuiTabbarItem__tappable{position:absolute}.vkuiTabbarItem__in{align-items:center;display:flex;height:100%;justify-content:center;overflow:hidden;padding:0 2px;pointer-events:none;width:100%}.vkuiTabbar--layout-vertical .vkuiTabbarItem--text .vkuiTabbarItem__in{position:relative;top:2px}.vkuiTabbar--layout-vertical .vkuiTabbarItem__in{flex-direction:column}.vkuiTabbar--layout-horizontal .vkuiTabbarItem__in{flex-direction:row}.vkuiTabbarItem__icon{color:#99a2ad;color:var(--vkui--color_icon_secondary);position:relative}.vkuiTabbarItem--selected .vkuiTabbarItem__icon{color:#2688eb;color:var(--vkui--color_icon_accent_themed)}.vkuiTabbarItem__label .vkuiCounter{position:absolute;right:-9px;top:-2px}.vkuiTabbarItem__label .vkuiBadge{position:absolute;right:-4px;top:-2px}.vkuiTabbarItem__text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiTabbar--layout-vertical .vkuiTabbarItem__text{font-size:10px;line-height:12px;margin-top:2px}.vkuiTabbar--layout-horizontal .vkuiTabbarItem__text{margin-left:8px}.vkuiTabbarItem--android .vkuiTabbarItem__tappable{border-radius:50%;padding-bottom:calc(100% + 16px);width:calc(100% + 16px)}.vkuiTabbarItem--android:first-child{border-bottom-left-radius:0;border-top-left-radius:0}.vkuiTabbarItem--android:last-child{border-bottom-right-radius:0;border-top-right-radius:0}.vkuiTabbarItem--ios .vkuiTabbarItem__tappable{height:100%;left:0;top:0;width:100%}.vkuiTabbarItem--ios .vkuiTabbarItem__in{transition:transform .07s cubic-bezier(.4,0,.2,1);transition:transform .07s var(--vkui--animation_easing_platform)}.vkuiTabbarItem--ios .vkuiTabbarItem__tappable--active+.vkuiTabbarItem__in{transform:scale(.96)}

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

@@ -1,10 +1,10 @@
-import * as React from "react";
-import { HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasRootRef } from '../../types';
 export interface TabsProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
-    mode?: "default" | "accent" | "secondary";
+    mode?: 'default' | 'accent' | 'secondary';
 }
 export interface TabsContextProps {
-    mode: TabsProps["mode"];
+    mode: TabsProps['mode'];
     withGaps: boolean;
 }
 export declare const TabsModeContext: React.Context<TabsContextProps>;

package/dist/cssm/components/Tabs/Tabs.js

@@ -1,18 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "mode", "getRootRef", "className", "role"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { usePlatform } from "../../hooks/usePlatform";
-import { Platform } from "../../lib/platform";
-import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
-import { useDOM } from "../../lib/dom";
-import { pressedKey } from "../../lib/accessibility";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { getSizeXClassName } from "../../helpers/getSizeXClassName";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { usePlatform } from '../../hooks/usePlatform';
+import { Platform } from '../../lib/platform';
+import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
+import { useDOM } from '../../lib/dom';
+import { pressedKey } from '../../lib/accessibility';
 import "./Tabs.module.css";
+var modeClassNames = {
+  default: "vkuiTabs--mode-default",
+  accent: "vkuiTabs--mode-accent",
+  secondary: "vkuiTabs--mode-secondary"
+};
 export var TabsModeContext = /*#__PURE__*/React.createContext({
-  mode: "default",
+  mode: 'default',
   withGaps: false
 });
 
@@ -22,27 +25,25 @@ export var TabsModeContext = /*#__PURE__*/React.createContext({
 export var Tabs = function Tabs(_ref) {
   var children = _ref.children,
     _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? "default" : _ref$mode,
+    mode = _ref$mode === void 0 ? 'default' : _ref$mode,
     getRootRef = _ref.getRootRef,
     className = _ref.className,
     _ref$role = _ref.role,
-    role = _ref$role === void 0 ? "tablist" : _ref$role,
+    role = _ref$role === void 0 ? 'tablist' : _ref$role,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var platform = usePlatform();
-  var _useAdaptivity = useAdaptivity(),
-    sizeX = _useAdaptivity.sizeX;
   var _useDOM = useDOM(),
     document = _useDOM.document;
-  var isTabFlow = role === "tablist";
+  var isTabFlow = role === 'tablist';
   var tabsRef = React.useRef(null);
-  var withGaps = mode === "accent" || mode === "secondary";
+  var withGaps = mode === 'accent' || mode === 'secondary';
   var getTabEls = function getTabEls() {
     if (!tabsRef.current) {
       return [];
     }
     return Array.from(
     // eslint-disable-next-line no-restricted-properties
-    tabsRef.current.querySelectorAll("[role=tab]:not([disabled])"));
+    tabsRef.current.querySelectorAll('[role=tab]:not([disabled])'));
   };
   var handleDocumentKeydown = function handleDocumentKeydown(event) {
     if (!document || !tabsRef.current || !isTabFlow) {
@@ -50,10 +51,10 @@ export var Tabs = function Tabs(_ref) {
     }
     var key = pressedKey(event);
     switch (key) {
-      case "ArrowLeft":
-      case "ArrowRight":
-      case "End":
-      case "Home":
+      case 'ArrowLeft':
+      case 'ArrowRight':
+      case 'End':
+      case 'Home':
         {
           var tabEls = getTabEls();
           var currentFocusedElIndex = tabEls.findIndex(function (el) {
@@ -63,12 +64,12 @@ export var Tabs = function Tabs(_ref) {
             return;
           }
           var nextIndex = 0;
-          if (key === "Home") {
+          if (key === 'Home') {
             nextIndex = 0;
-          } else if (key === "End") {
+          } else if (key === 'End') {
             nextIndex = tabEls.length - 1;
           } else {
-            var offset = key === "ArrowRight" ? 1 : -1;
+            var offset = key === 'ArrowRight' ? 1 : -1;
             nextIndex = currentFocusedElIndex + offset;
           }
           var nextTabEl = tabEls[nextIndex];
@@ -83,16 +84,16 @@ export var Tabs = function Tabs(_ref) {
        Это не прописано в стандартах, но по ссылке ниже это рекомендуется делать.
        https://inclusive-components.design/tabbed-interfaces/
       */
-      case "ArrowDown":
+      case 'ArrowDown':
         {
           var _tabEls = getTabEls();
           var currentFocusedEl = _tabEls.find(function (el) {
             return document.activeElement === el;
           });
-          if (!currentFocusedEl || currentFocusedEl.getAttribute("aria-selected") !== "true") {
+          if (!currentFocusedEl || currentFocusedEl.getAttribute('aria-selected') !== 'true') {
             return;
           }
-          var relatedContentElId = currentFocusedEl.getAttribute("aria-controls");
+          var relatedContentElId = currentFocusedEl.getAttribute('aria-controls');
           if (!relatedContentElId) {
             return;
           }
@@ -106,8 +107,8 @@ export var Tabs = function Tabs(_ref) {
           relatedContentEl.focus();
           break;
         }
-      case "Space":
-      case "Enter":
+      case 'Space':
+      case 'Enter':
         {
           var _tabEls2 = getTabEls();
           var _currentFocusedEl = _tabEls2.find(function (el) {
@@ -119,12 +120,12 @@ export var Tabs = function Tabs(_ref) {
         }
     }
   };
-  useGlobalEventListener(document, "keydown", handleDocumentKeydown, {
+  useGlobalEventListener(document, 'keydown', handleDocumentKeydown, {
     capture: true
   });
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
     ref: getRootRef,
-    className: classNamesString("vkuiTabs", platform === Platform.VKCOM && styles["Tabs--".concat(platform)], getSizeXClassName("vkuiTabs", sizeX), withGaps && "vkuiTabs--withGaps", styles["Tabs--mode-".concat(mode)], className),
+    className: classNames("vkuiTabs", platform === Platform.VKCOM && "vkuiTabs--vkcom", withGaps && "vkuiTabs--withGaps", modeClassNames[mode], className),
     role: role
   }), /*#__PURE__*/React.createElement("div", {
     className: "vkuiTabs__in",
@@ -136,14 +137,4 @@ export var Tabs = function Tabs(_ref) {
     }
   }, children)));
 };
-var styles = {
-  "Tabs--withGaps": "vkuiTabs--withGaps",
-  "Tabs--mode-default": "vkuiTabs--mode-default",
-  "Tabs--buttons": "vkuiTabs--buttons",
-  "Tabs--sizeX-compact": "vkuiTabs--sizeX-compact",
-  "Tabs--sizeX-none": "vkuiTabs--sizeX-none",
-  "Tabs--mode-accent": "vkuiTabs--mode-accent",
-  "Tabs--mode-secondary": "vkuiTabs--mode-secondary",
-  "Tabs--vkcom": "vkuiTabs--vkcom"
-};
 //# sourceMappingURL=Tabs.js.map