@vkontakte/vkui 5.2.4 → 5.3.1

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

@@ -1 +1 @@
-.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 (max-height:414.9px),(pointer:fine) and (min-width:768px){.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:#fff;color:var(--vkui--color_icon_contrast_themed)}.vkuiSubnavigationBar .vkuiSubnavigationButton+.vkuiSubnavigationButton{margin-left:8px;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 (max-height:414.9px),(pointer:fine) and (min-width:768px){.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:#fff;color:var(--vkui--color_icon_contrast_themed)}.vkuiSubnavigationButton{--vkui_internal--counter_inherit_background:var(--vkui--color_background_accent_themed);--vkui_internal--counter_inherit_color:var(--vkui--color_text_contrast_themed)}.vkuiSubnavigationButton--selected:not(.vkuiSubnavigationButton--mode-tertiary){--vkui_internal--counter_inherit_background:var(--vkui--color_background_content);--vkui_internal--counter_inherit_color:var(--vkui--color_text_accent_themed)}.vkuiInternalSubnavigationBar .vkuiSubnavigationButton+.vkuiSubnavigationButton{margin-left:8px;margin-left:var(--vkui--size_subnavigation_bar_gap--regular)}.vkuiInternalSubnavigationBar--mode-fixed .vkuiSubnavigationButton{flex:1;min-width:0}

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

@@ -1,7 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["style", "className", "getRootRef"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
@@ -12,40 +8,33 @@ import { callMultiple } from '../../lib/callMultiple';
 import { Platform } from '../../lib/platform';
 import { FocusVisible } from '../FocusVisible/FocusVisible';
 import { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';
-import "./Switch.module.css";
-var sizeYClassNames = _defineProperty({
-  none: "vkuiSwitch--sizeY-none"
-}, SizeType.COMPACT, "vkuiSwitch--sizeY-compact");
+import styles from './Switch.module.css';
+const sizeYClassNames = {
+    none: styles['Switch--sizeY-none'],
+    [SizeType.COMPACT]: styles['Switch--sizeY-compact']
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/Switch
- */
-export var Switch = function Switch(_ref) {
-  var style = _ref.style,
-    className = _ref.className,
-    getRootRef = _ref.getRootRef,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var platform = usePlatform();
-  var _useAdaptivity = useAdaptivity(),
-    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
-    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
-  var _useFocusVisible = useFocusVisible(),
-    focusVisible = _useFocusVisible.focusVisible,
-    onBlur = _useFocusVisible.onBlur,
-    onFocus = _useFocusVisible.onFocus;
-  return /*#__PURE__*/React.createElement("label", {
-    className: classNames("vkuiSwitch", platform === Platform.IOS && "vkuiSwitch--ios", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], restProps.disabled && "vkuiSwitch--disabled", focusVisible && "vkuiSwitch--focus-visible", className),
-    style: style,
-    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", {
-    "aria-hidden": true,
-    className: "vkuiSwitch__pseudo"
-  }), /*#__PURE__*/React.createElement(FocusVisible, {
-    mode: "outside"
-  }));
+ */ export const Switch = ({ style , className , getRootRef , ...restProps })=>{
+    const platform = usePlatform();
+    const { sizeY ='none'  } = useAdaptivity();
+    const { onBlur , onFocus  } = useFocusVisible();
+    return /*#__PURE__*/ React.createElement("label", {
+        className: classNames(styles['Switch'], platform === Platform.IOS && styles['Switch--ios'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], restProps.disabled && styles['Switch--disabled'], className),
+        style: style,
+        ref: getRootRef
+    }, /*#__PURE__*/ React.createElement(VisuallyHiddenInput, {
+        ...restProps,
+        type: "checkbox",
+        className: styles['Switch__self'],
+        onBlur: callMultiple(onBlur, restProps.onBlur),
+        onFocus: callMultiple(onFocus, restProps.onFocus)
+    }), /*#__PURE__*/ React.createElement("span", {
+        "aria-hidden": true,
+        className: styles['Switch__pseudo']
+    }), /*#__PURE__*/ React.createElement(FocusVisible, {
+        mode: "outside"
+    }));
 };
+
 //# sourceMappingURL=Switch.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["React","classNames","useAdaptivity","useFocusVisible","usePlatform","SizeType","callMultiple","Platform","FocusVisible","VisuallyHiddenInput","sizeYClassNames","none","COMPACT","Switch","style","className","getRootRef","restProps","platform","sizeY","focusVisible","onBlur","onFocus","IOS","REGULAR","disabled"],"sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport {\n  VisuallyHiddenInput,\n  VisuallyHiddenInputProps,\n} from '../VisuallyHiddenInput/VisuallyHiddenInput';\nimport styles from './Switch.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Switch--sizeY-none'],\n  [SizeType.COMPACT]: styles['Switch--sizeY-compact'],\n};\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 = 'none' } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n  return (\n    <label\n      className={classNames(\n        styles['Switch'],\n        platform === Platform.IOS && styles['Switch--ios'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[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,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,eAAe,QAAQ,6BAA6B;AAC7D,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,QAAQ,QAAQ,oBAAoB;AAE7C,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,SACEC,mBAAmB,QAEd,4CAA4C;AAAC;AAGpD,IAAMC,eAAe;EACnBC,IAAI;AAA8B,GACjCN,QAAQ,CAACO,OAAO,8BAClB;AAID;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,GAAGd,WAAW,EAAE;EAC9B,qBAA2BF,aAAa,EAAE;IAAA,sCAAlCiB,KAAK;IAALA,KAAK,qCAAG,MAAM;EACtB,uBAA0ChB,eAAe,EAAE;IAAnDiB,YAAY,oBAAZA,YAAY;IAAEC,MAAM,oBAANA,MAAM;IAAEC,OAAO,oBAAPA,OAAO;EAErC,oBACE;IACE,SAAS,EAAErB,UAAU,eAEnBiB,QAAQ,KAAKX,QAAQ,CAACgB,GAAG,qBAAyB,EAClDJ,KAAK,KAAKd,QAAQ,CAACmB,OAAO,IAAId,eAAe,CAACS,KAAK,CAAC,EACpDF,SAAS,CAACQ,QAAQ,0BAA8B,EAChDL,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"}
+{"version":3,"sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport {\n  VisuallyHiddenInput,\n  VisuallyHiddenInputProps,\n} from '../VisuallyHiddenInput/VisuallyHiddenInput';\nimport styles from './Switch.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Switch--sizeY-none'],\n  [SizeType.COMPACT]: styles['Switch--sizeY-compact'],\n};\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 = 'none' } = useAdaptivity();\n  const { onBlur, onFocus } = useFocusVisible();\n\n  return (\n    <label\n      className={classNames(\n        styles['Switch'],\n        platform === Platform.IOS && styles['Switch--ios'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        restProps.disabled && styles['Switch--disabled'],\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"],"names":["React","classNames","useAdaptivity","useFocusVisible","usePlatform","SizeType","callMultiple","Platform","FocusVisible","VisuallyHiddenInput","styles","sizeYClassNames","none","COMPACT","Switch","style","className","getRootRef","restProps","platform","sizeY","onBlur","onFocus","label","IOS","REGULAR","disabled","ref","type","span","aria-hidden","mode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SACEC,mBAAmB,QAEd,6CAA6C;AACpD,OAAOC,YAAY,sBAAsB;AAEzC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,qBAAqB;IAClC,CAACL,SAASQ,OAAO,CAAC,EAAEH,MAAM,CAAC,wBAAwB;AACrD;AAIA;;CAEC,GACD,OAAO,MAAMI,SAAS,CAAC,EAAEC,MAAK,EAAEC,UAAS,EAAEC,WAAU,EAAE,GAAGC,WAAwB,GAAK;IACrF,MAAMC,WAAWf;IACjB,MAAM,EAAEgB,OAAQ,OAAM,EAAE,GAAGlB;IAC3B,MAAM,EAAEmB,OAAM,EAAEC,QAAO,EAAE,GAAGnB;IAE5B,qBACE,oBAACoB;QACCP,WAAWf,WACTS,MAAM,CAAC,SAAS,EAChBS,aAAaZ,SAASiB,GAAG,IAAId,MAAM,CAAC,cAAc,EAClDU,UAAUf,SAASoB,OAAO,IAAId,eAAe,CAACS,MAAM,EACpDF,UAAUQ,QAAQ,IAAIhB,MAAM,CAAC,mBAAmB,EAChDM;QAEFD,OAAOA;QACPY,KAAKV;qBAEL,oBAACR;QACE,GAAGS,SAAS;QACbU,MAAK;QACLZ,WAAWN,MAAM,CAAC,eAAe;QACjCW,QAAQf,aAAae,QAAQH,UAAUG,MAAM;QAC7CC,SAAShB,aAAagB,SAASJ,UAAUI,OAAO;sBAElD,oBAACO;QAAKC,eAAAA,IAAW;QAACd,WAAWN,MAAM,CAAC,iBAAiB;sBACrD,oBAACF;QAAauB,MAAK;;AAGzB,EAAE"}

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

@@ -1 +1 @@
-.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 (max-height:414.9px),(pointer:fine) and (min-width:768px){.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 (max-height:414.9px),(pointer:fine) and (min-width:768px){.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 (max-height:414.9px),(pointer:fine) and (min-width:768px){.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 (max-height:414.9px),(pointer:fine) and (min-width:768px){.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}
+.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 (max-height:414.9px),(pointer:fine) and (min-width:768px){.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 (max-height:414.9px),(pointer:fine) and (min-width:768px){.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 (max-height:414.9px),(pointer:fine) and (min-width:768px){.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 (max-height:414.9px),(pointer:fine) and (min-width:768px){.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)}}.vkuiInternalSimpleCell__after>.vkuiSwitch{margin-left:12px}.vkuiInternalSimpleCell>.vkuiSwitch:first-child{margin-right:12px}

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

@@ -1,37 +1,28 @@
-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 { 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':
-      return "vkuiTabbar--layout-horizontal";
-    case 'vertical':
-      return "vkuiTabbar--layout-vertical";
-    default:
-      return React.Children.count(children) > 2 ? getItemsLayoutClassName('vertical', []) : getItemsLayoutClassName('horizontal', []);
-  }
+import styles from './Tabbar.module.css';
+const getItemsLayoutClassName = (itemsLayout, children)=>{
+    switch(itemsLayout){
+        case 'horizontal':
+            return 'vkuiInternalTabbar--layout-horizontal';
+        case 'vertical':
+            return 'vkuiInternalTabbar--layout-vertical';
+        default:
+            return React.Children.count(children) > 2 ? getItemsLayoutClassName('vertical', []) : getItemsLayoutClassName('horizontal', []);
+    }
 };
-
 /**
  * @see https://vkcom.github.io/VKUI/#/Tabbar
- */
-export var Tabbar = function Tabbar(_ref) {
-  var children = _ref.children,
-    _ref$shadow = _ref.shadow,
-    shadow = _ref$shadow === void 0 ? true : _ref$shadow,
-    mode = _ref.mode,
-    className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var platform = usePlatform();
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames("vkuiTabbar", platform === Platform.IOS && "vkuiTabbar--ios", getItemsLayoutClassName(mode, children), shadow && "vkuiTabbar--shadow", className)
-  }, restProps), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiTabbar__in"
-  }, children));
+ */ export const Tabbar = ({ children , shadow =true , mode , className , ...restProps })=>{
+    const platform = usePlatform();
+    return /*#__PURE__*/ React.createElement("div", {
+        className: classNames(styles['Tabbar'], platform === Platform.IOS && styles['Tabbar--ios'], getItemsLayoutClassName(mode, children), shadow && styles['Tabbar--shadow'], className),
+        ...restProps
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles['Tabbar__in']
+    }, children));
 };
+
 //# sourceMappingURL=Tabbar.js.map

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"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 'vkuiInternalTabbar--layout-horizontal';\n    case 'vertical':\n      return 'vkuiInternalTabbar--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"],"names":["React","classNames","usePlatform","Platform","styles","getItemsLayoutClassName","itemsLayout","children","Children","count","Tabbar","shadow","mode","className","restProps","platform","div","IOS"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,OAAOC,YAAY,sBAAsB;AAazC,MAAMC,0BAA0B,CAC9BC,aACAC,WACW;IACX,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAON,MAAMQ,QAAQ,CAACC,KAAK,CAACF,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE,CAAC;IACjD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,SAAS,CAAC,EAAEH,SAAQ,EAAEI,QAAS,IAAI,CAAA,EAAEC,KAAI,EAAEC,UAAS,EAAE,GAAGC,WAAwB,GAAK;IACjG,MAAMC,WAAWb;IAEjB,qBACE,oBAACc;QACCH,WAAWZ,WACTG,MAAM,CAAC,SAAS,EAChBW,aAAaZ,SAASc,GAAG,IAAIb,MAAM,CAAC,cAAc,EAClDC,wBAAwBO,MAAML,WAC9BI,UAAUP,MAAM,CAAC,iBAAiB,EAClCS;QAED,GAAGC,SAAS;qBAEb,oBAACE;QAAIH,WAAWT,MAAM,CAAC,aAAa;OAAGG;AAG7C,EAAE"}

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

@@ -1,6 +1,3 @@
-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 { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';
@@ -8,52 +5,42 @@ import { Platform } from '../../lib/platform';
 import { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';
 import { Tappable } from '../Tappable/Tappable';
 import { Footnote } from '../Typography/Footnote/Footnote';
-import "./TabbarItem.module.css";
-var warn = warnOnce('TabbarItem');
-
+import styles from './TabbarItem.module.css';
+const warn = warnOnce('TabbarItem');
 /**
  * @see https://vkcom.github.io/VKUI/#/TabbarItem
- */
-export var TabbarItem = function TabbarItem(_ref) {
-  var children = _ref.children,
-    selected = _ref.selected,
-    indicator = _ref.indicator,
-    text = _ref.text,
-    href = _ref.href,
-    _ref$Component = _ref.Component,
-    Component = _ref$Component === void 0 ? href ? 'a' : 'button' : _ref$Component,
-    disabled = _ref.disabled,
-    className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var platform = usePlatform();
-  if (process.env.NODE_ENV === 'development') {
-    var isAccessible = !text && (!restProps['aria-label'] || !restProps['aria-labelledby']);
-    if (!isAccessible) {
-      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');
+ */ export const TabbarItem = ({ children , selected , indicator , text , href , Component =href ? 'a' : 'button' , disabled , className , ...restProps })=>{
+    const platform = usePlatform();
+    if (process.env.NODE_ENV === 'development') {
+        const hasAccessibleName = text || restProps['aria-label'] || restProps['aria-labelledby'];
+        if (!hasAccessibleName) {
+            warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');
+        }
     }
-  }
-  return /*#__PURE__*/React.createElement(Component, _extends({}, restProps, {
-    disabled: disabled,
-    href: href,
-    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',
-    activeEffectDelay: platform === Platform.IOS ? 0 : 300,
-    hasHover: false,
-    className: "vkuiTabbarItem__tappable"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiTabbarItem__in"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiTabbarItem__icon"
-  }, children, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiTabbarItem__label"
-  }, hasReactNode(indicator) && indicator)), text && /*#__PURE__*/React.createElement(Footnote, {
-    Component: "div",
-    className: "vkuiTabbarItem__text",
-    weight: "2"
-  }, text)));
+    return /*#__PURE__*/ React.createElement(Component, {
+        ...restProps,
+        disabled: disabled,
+        href: href,
+        className: classNames(styles['TabbarItem'], platform === Platform.IOS && styles['TabbarItem--ios'], platform === Platform.ANDROID && styles['TabbarItem--android'], selected && styles['TabbarItem--selected'], !!text && styles['TabbarItem--text'], className)
+    }, /*#__PURE__*/ React.createElement(Tappable, {
+        role: "presentation",
+        Component: "div",
+        disabled: disabled,
+        activeMode: platform === Platform.IOS ? styles['TabbarItem__tappable--active'] : 'background',
+        activeEffectDelay: platform === Platform.IOS ? 0 : 300,
+        hasHover: false,
+        className: styles['TabbarItem__tappable']
+    }), /*#__PURE__*/ React.createElement("div", {
+        className: styles['TabbarItem__in']
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles['TabbarItem__icon']
+    }, children, /*#__PURE__*/ React.createElement("div", {
+        className: styles['TabbarItem__label']
+    }, hasReactNode(indicator) && indicator)), text && /*#__PURE__*/ React.createElement(Footnote, {
+        Component: "div",
+        className: styles['TabbarItem__text'],
+        weight: "2"
+    }, text)));
 };
+
 //# sourceMappingURL=TabbarItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabbarItem.js","names":["React","classNames","hasReactNode","usePlatform","Platform","COMMON_WARNINGS","warnOnce","Tappable","Footnote","warn","TabbarItem","children","selected","indicator","text","href","Component","disabled","className","restProps","platform","process","env","NODE_ENV","isAccessible","a11y","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 { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\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\nconst warn = warnOnce('TabbarItem');\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  if (process.env.NODE_ENV === 'development') {\n    const isAccessible = !text && (!restProps['aria-label'] || !restProps['aria-labelledby']);\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\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,oBAAoB;AAC7C,SAASC,eAAe,EAAEC,QAAQ,QAAQ,oBAAoB;AAE9D,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAQ,iCAAiC;AAAC;AAkB3D,IAAMC,IAAI,GAAGH,QAAQ,CAAC,YAAY,CAAC;;AAEnC;AACA;AACA;AACA,OAAO,IAAMI,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,GAAGjB,WAAW,EAAE;EAE9B,IAAIkB,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAMC,YAAY,GAAG,CAACV,IAAI,KAAK,CAACK,SAAS,CAAC,YAAY,CAAC,IAAI,CAACA,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAEzF,IAAI,CAACK,YAAY,EAAE;MACjBf,IAAI,CAACJ,eAAe,CAACoB,IAAI,CAACT,SAAS,KAAK,GAAG,GAAG,WAAW,GAAG,aAAa,CAAC,EAAE,OAAO,CAAC;IACtF;EACF;EAEA,oBACE,oBAAC,SAAS,eACJG,SAAS;IACb,QAAQ,EAAEF,QAAS;IACnB,IAAI,EAAEF,IAAK;IACX,SAAS,EAAEd,UAAU,mBAEnBmB,QAAQ,KAAKhB,QAAQ,CAACsB,GAAG,yBAA6B,EACtDN,QAAQ,KAAKhB,QAAQ,CAACuB,OAAO,6BAAiC,EAC9Df,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,KAAKhB,QAAQ,CAACsB,GAAG,wCAA4C,YACtE;IACD,iBAAiB,EAAEN,QAAQ,KAAKhB,QAAQ,CAACsB,GAAG,GAAG,CAAC,GAAG,GAAI;IACvD,QAAQ,EAAE,KAAM;IAChB,SAAS;EAAiC,EAC1C,eACF;IAAK,SAAS;EAA2B,gBACvC;IAAK,SAAS;EAA6B,GACxCf,QAAQ,eACT;IAAK,SAAS;EAA8B,GAAET,YAAY,CAACW,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"}
+{"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\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\nconst warn = warnOnce('TabbarItem');\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  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = text || restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!hasAccessibleName) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\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"],"names":["React","classNames","hasReactNode","usePlatform","Platform","COMMON_WARNINGS","warnOnce","Tappable","Footnote","styles","warn","TabbarItem","children","selected","indicator","text","href","Component","disabled","className","restProps","platform","process","env","NODE_ENV","hasAccessibleName","a11y","IOS","ANDROID","role","activeMode","activeEffectDelay","hasHover","div","weight"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,eAAe,EAAEC,QAAQ,QAAQ,qBAAqB;AAE/D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,0BAA0B;AAiB7C,MAAMC,OAAOJ,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMK,aAAa,CAAC,EACzBC,SAAQ,EACRC,SAAQ,EACRC,UAAS,EACTC,KAAI,EACJC,KAAI,EACJC,WAAYD,OAAO,MAAM,QAAQ,CAAA,EACjCE,SAAQ,EACRC,UAAS,EACT,GAAGC,WACa,GAAK;IACrB,MAAMC,WAAWlB;IAEjB,IAAImB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,oBAAoBV,QAAQK,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAEzF,IAAI,CAACK,mBAAmB;YACtBf,KAAKL,gBAAgBqB,IAAI,CAACT,cAAc,MAAM,cAAc,aAAa,CAAC,EAAE;QAC9E,CAAC;IACH,CAAC;IAED,qBACE,oBAACA;QACE,GAAGG,SAAS;QACbF,UAAUA;QACVF,MAAMA;QACNG,WAAWlB,WACTQ,MAAM,CAAC,aAAa,EACpBY,aAAajB,SAASuB,GAAG,IAAIlB,MAAM,CAAC,kBAAkB,EACtDY,aAAajB,SAASwB,OAAO,IAAInB,MAAM,CAAC,sBAAsB,EAC9DI,YAAYJ,MAAM,CAAC,uBAAuB,EAC1C,CAAC,CAACM,QAAQN,MAAM,CAAC,mBAAmB,EACpCU;qBAGF,oBAACZ;QACCsB,MAAK;QACLZ,WAAU;QACVC,UAAUA;QACVY,YACET,aAAajB,SAASuB,GAAG,GAAGlB,MAAM,CAAC,+BAA+B,GAAG,YAAY;QAEnFsB,mBAAmBV,aAAajB,SAASuB,GAAG,GAAG,IAAI,GAAG;QACtDK,UAAU,KAAK;QACfb,WAAWV,MAAM,CAAC,uBAAuB;sBAE3C,oBAACwB;QAAId,WAAWV,MAAM,CAAC,iBAAiB;qBACtC,oBAACwB;QAAId,WAAWV,MAAM,CAAC,mBAAmB;OACvCG,wBACD,oBAACqB;QAAId,WAAWV,MAAM,CAAC,oBAAoB;OAAGP,aAAaY,cAAcA,aAE1EC,sBACC,oBAACP;QAASS,WAAU;QAAME,WAAWV,MAAM,CAAC,mBAAmB;QAAEyB,QAAO;OACrEnB;AAMb,EAAE"}

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

@@ -1 +1 @@
-.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)}
+.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%}.vkuiInternalTabbar--layout-vertical .vkuiTabbarItem--text .vkuiTabbarItem__in{position:relative;top:2px}.vkuiInternalTabbar--layout-vertical .vkuiTabbarItem__in{flex-direction:column}.vkuiInternalTabbar--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}.vkuiInternalTabbar--layout-vertical .vkuiTabbarItem__text{font-size:10px;line-height:12px;margin-top:2px}.vkuiInternalTabbar--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.js

@@ -1,6 +1,3 @@
-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 { classNames } from '@vkontakte/vkjs';
 import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
@@ -8,133 +5,110 @@ import { usePlatform } from '../../hooks/usePlatform';
 import { pressedKey } from '../../lib/accessibility';
 import { useDOM } from '../../lib/dom';
 import { Platform } from '../../lib/platform';
-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',
-  withGaps: false
+import styles from './Tabs.module.css';
+export const TabsModeContext = /*#__PURE__*/ React.createContext({
+    mode: 'default',
+    withGaps: false
 });
-
 /**
  * @see https://vkcom.github.io/VKUI/#/Tabs
- */
-export var Tabs = function Tabs(_ref) {
-  var children = _ref.children,
-    _ref$mode = _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,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var platform = usePlatform();
-  var _useDOM = useDOM(),
-    document = _useDOM.document;
-  var isTabFlow = role === 'tablist';
-  var tabsRef = React.useRef(null);
-  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])'));
-  };
-  var handleDocumentKeydown = function handleDocumentKeydown(event) {
-    if (!document || !tabsRef.current || !isTabFlow) {
-      return;
-    }
-    var key = pressedKey(event);
-    switch (key) {
-      case 'ArrowLeft':
-      case 'ArrowRight':
-      case 'End':
-      case 'Home':
-        {
-          var tabEls = getTabEls();
-          var currentFocusedElIndex = tabEls.findIndex(function (el) {
-            return document.activeElement === el;
-          });
-          if (currentFocusedElIndex === -1) {
+ */ export const Tabs = ({ children , mode ='default' , getRootRef , className , role ='tablist' , ...restProps })=>{
+    const platform = usePlatform();
+    const { document  } = useDOM();
+    const isTabFlow = role === 'tablist';
+    const tabsRef = React.useRef(null);
+    const withGaps = mode === 'accent' || mode === 'secondary';
+    const getTabEls = ()=>{
+        if (!tabsRef.current) {
+            return [];
+        }
+        return Array.from(// eslint-disable-next-line no-restricted-properties
+        tabsRef.current.querySelectorAll('[role=tab]:not([disabled])'));
+    };
+    const handleDocumentKeydown = (event)=>{
+        if (!document || !tabsRef.current || !isTabFlow) {
             return;
-          }
-          var nextIndex = 0;
-          if (key === 'Home') {
-            nextIndex = 0;
-          } else if (key === 'End') {
-            nextIndex = tabEls.length - 1;
-          } else {
-            var offset = key === 'ArrowRight' ? 1 : -1;
-            nextIndex = currentFocusedElIndex + offset;
-          }
-          var nextTabEl = tabEls[nextIndex];
-          if (nextTabEl) {
-            event.preventDefault();
-            nextTabEl.focus();
-          }
-          break;
         }
-      /*
+        const key = pressedKey(event);
+        switch(key){
+            case 'ArrowLeft':
+            case 'ArrowRight':
+            case 'End':
+            case 'Home':
+                {
+                    const tabEls = getTabEls();
+                    const currentFocusedElIndex = tabEls.findIndex((el)=>document.activeElement === el);
+                    if (currentFocusedElIndex === -1) {
+                        return;
+                    }
+                    let nextIndex = 0;
+                    if (key === 'Home') {
+                        nextIndex = 0;
+                    } else if (key === 'End') {
+                        nextIndex = tabEls.length - 1;
+                    } else {
+                        const offset = key === 'ArrowRight' ? 1 : -1;
+                        nextIndex = currentFocusedElIndex + offset;
+                    }
+                    const nextTabEl = tabEls[nextIndex];
+                    if (nextTabEl) {
+                        event.preventDefault();
+                        nextTabEl.focus();
+                    }
+                    break;
+                }
+            /*
        В JAWS и NVDA стрелка вниз активирует контент.
        Это не прописано в стандартах, но по ссылке ниже это рекомендуется делать.
        https://inclusive-components.design/tabbed-interfaces/
-      */
-      case 'ArrowDown':
-        {
-          var _tabEls = getTabEls();
-          var currentFocusedEl = _tabEls.find(function (el) {
-            return document.activeElement === el;
-          });
-          if (!currentFocusedEl || currentFocusedEl.getAttribute('aria-selected') !== 'true') {
-            return;
-          }
-          var relatedContentElId = currentFocusedEl.getAttribute('aria-controls');
-          if (!relatedContentElId) {
-            return;
-          }
-
-          // eslint-disable-next-line no-restricted-properties
-          var relatedContentEl = document.getElementById(relatedContentElId);
-          if (!relatedContentEl) {
-            return;
-          }
-          event.preventDefault();
-          relatedContentEl.focus();
-          break;
+      */ case 'ArrowDown':
+                {
+                    const tabEls = getTabEls();
+                    const currentFocusedEl = tabEls.find((el)=>document.activeElement === el);
+                    if (!currentFocusedEl || currentFocusedEl.getAttribute('aria-selected') !== 'true') {
+                        return;
+                    }
+                    const relatedContentElId = currentFocusedEl.getAttribute('aria-controls');
+                    if (!relatedContentElId) {
+                        return;
+                    }
+                    // eslint-disable-next-line no-restricted-properties
+                    const relatedContentEl = document.getElementById(relatedContentElId);
+                    if (!relatedContentEl) {
+                        return;
+                    }
+                    event.preventDefault();
+                    relatedContentEl.focus();
+                    break;
+                }
+            case 'Space':
+            case 'Enter':
+                {
+                    const tabEls = getTabEls();
+                    const currentFocusedEl = tabEls.find((el)=>document.activeElement === el);
+                    if (currentFocusedEl) {
+                        currentFocusedEl.click();
+                    }
+                }
         }
-      case 'Space':
-      case 'Enter':
-        {
-          var _tabEls2 = getTabEls();
-          var _currentFocusedEl = _tabEls2.find(function (el) {
-            return document.activeElement === el;
-          });
-          if (_currentFocusedEl) {
-            _currentFocusedEl.click();
-          }
+    };
+    useGlobalEventListener(document, 'keydown', handleDocumentKeydown, {
+        capture: true
+    });
+    return /*#__PURE__*/ React.createElement("div", {
+        ...restProps,
+        ref: getRootRef,
+        className: classNames(styles['Tabs'], 'vkuiInternalTabs', platform === Platform.VKCOM && 'vkuiInternalTabs--vkcom', withGaps && classNames(styles['Tabs--withGaps'], 'vkuiInternalTabs--withGaps'), mode === 'default' && styles['Tabs--mode-default'], className),
+        role: role
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles['Tabs__in'],
+        ref: tabsRef
+    }, /*#__PURE__*/ React.createElement(TabsModeContext.Provider, {
+        value: {
+            mode,
+            withGaps
         }
-    }
-  };
-  useGlobalEventListener(document, 'keydown', handleDocumentKeydown, {
-    capture: true
-  });
-  return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    ref: getRootRef,
-    className: classNames("vkuiTabs", platform === Platform.VKCOM && "vkuiTabs--vkcom", withGaps && "vkuiTabs--withGaps", modeClassNames[mode], className),
-    role: role
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiTabs__in",
-    ref: tabsRef
-  }, /*#__PURE__*/React.createElement(TabsModeContext.Provider, {
-    value: {
-      mode: mode,
-      withGaps: withGaps
-    }
-  }, children)));
+    }, children)));
 };
+
 //# sourceMappingURL=Tabs.js.map