@rescui/switcher 0.10.3 → 0.10.5-RUI-226-Update-card-cn-6e43cc89.60

package/lib/index.js

@@ -6,5 +6,5 @@ export { VerticalSwitcher } from './vertical-switcher.js';
  * @deprecated use named import instead
  */
 
-var DefaultSwitcher = Switcher;
+const DefaultSwitcher = Switcher;
 export { DefaultSwitcher as default };

package/lib/public-api.p.css

@@ -10,7 +10,7 @@
     --_rs-switcher-icon-margin-vertical:2px;
   }
     &:not(html) [data-rs-internal='switcher__option']{
-    --_rs-typography-letter-spacing:0.0045em;
+    --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
     --_rs-typography-font-family:var(
@@ -56,7 +56,7 @@
     --_rs-switcher-icon-margin-vertical:0px;
   }
     &:not(html) [data-rs-internal='switcher__option']{
-    --_rs-typography-letter-spacing:0.0045em;
+    --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
     --_rs-typography-font-family:var(
@@ -102,7 +102,7 @@
     --_rs-switcher-icon-margin-vertical:0px;
   }
     &:not(html) [data-rs-internal='switcher__option']{
-    --_rs-typography-letter-spacing:0.0015em;
+    --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
     --_rs-typography-font-family:var(
@@ -130,14 +130,17 @@
     --_rs-typography-text-auto-offset:16px;
     --_rs-typography-ul-list-li-padding-left:22px;
     --_rs-typography-ol-list-li-padding-left:26px;
-    --_rs-typography-list-li-margin-top-from-text:16px;
+    --_rs-typography-list-li-margin-top-from-text:var(
+    --_rs-typography-text-2-sm-list-li-margin-top-from-text,
+    16px
+  );
     --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
     --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
     @media screen and (max-width: 640px){
     &:not(html) [data-rs-internal='switcher__option']{
-    --_rs-typography-list-li-margin-top-from-text:12px;
+    --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
   }
   }
 }
@@ -153,7 +156,7 @@
     --_rs-switcher-icon-margin-vertical:0px;
   }
     &:not(html) [data-rs-internal='switcher__option']{
-    --_rs-typography-letter-spacing:normal;
+    --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
     --_rs-typography-font-family:var(
@@ -181,14 +184,17 @@
     --_rs-typography-text-auto-offset:32px;
     --_rs-typography-ul-list-li-padding-left:26px;
     --_rs-typography-ol-list-li-padding-left:32px;
-    --_rs-typography-list-li-margin-top-from-text:24px;
+    --_rs-typography-list-li-margin-top-from-text:var(
+    --_rs-typography-text-1-sm-list-li-margin-top-from-text,
+    24px
+  );
     --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
     --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
     @media screen and (max-width: 640px){
     &:not(html) [data-rs-internal='switcher__option']{
-    --_rs-typography-list-li-margin-top-from-text:16px;
+    --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
   }
   }
 }
@@ -243,7 +249,7 @@
     --_rs-switcher-vertical-icon-margin-vertical:2px;
   }
     &:not(html) [data-rs-internal='vertical-switcher__option']{
-    --_rs-typography-letter-spacing:0.0045em;
+    --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
     --_rs-typography-font-family:var(
@@ -287,7 +293,7 @@
     --_rs-switcher-vertical-icon-margin-vertical:0px;
   }
     &:not(html) [data-rs-internal='vertical-switcher__option']{
-    --_rs-typography-letter-spacing:0.0045em;
+    --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
     --_rs-typography-font-family:var(
@@ -331,7 +337,7 @@
     --_rs-switcher-vertical-icon-margin-vertical:0px;
   }
     &:not(html) [data-rs-internal='vertical-switcher__option']{
-    --_rs-typography-letter-spacing:0.0015em;
+    --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
     --_rs-typography-font-family:var(
@@ -359,14 +365,17 @@
     --_rs-typography-text-auto-offset:16px;
     --_rs-typography-ul-list-li-padding-left:22px;
     --_rs-typography-ol-list-li-padding-left:26px;
-    --_rs-typography-list-li-margin-top-from-text:16px;
+    --_rs-typography-list-li-margin-top-from-text:var(
+    --_rs-typography-text-2-sm-list-li-margin-top-from-text,
+    16px
+  );
     --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
     --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
     @media screen and (max-width: 640px){
     &:not(html) [data-rs-internal='vertical-switcher__option']{
-    --_rs-typography-list-li-margin-top-from-text:12px;
+    --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
   }
   }
 }
@@ -380,7 +389,7 @@
     --_rs-switcher-vertical-icon-margin-vertical:0px;
   }
     &:not(html) [data-rs-internal='vertical-switcher__option']{
-    --_rs-typography-letter-spacing:normal;
+    --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
     --_rs-typography-font-family:var(
@@ -408,14 +417,17 @@
     --_rs-typography-text-auto-offset:32px;
     --_rs-typography-ul-list-li-padding-left:26px;
     --_rs-typography-ol-list-li-padding-left:32px;
-    --_rs-typography-list-li-margin-top-from-text:24px;
+    --_rs-typography-list-li-margin-top-from-text:var(
+    --_rs-typography-text-1-sm-list-li-margin-top-from-text,
+    24px
+  );
     --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
     --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
     @media screen and (max-width: 640px){
     &:not(html) [data-rs-internal='vertical-switcher__option']{
-    --_rs-typography-list-li-margin-top-from-text:16px;
+    --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
   }
   }
 }

package/lib/public-api.pcss

@@ -10,7 +10,7 @@
     --_rs-switcher-icon-margin-vertical:2px;
   }
     &:not(html) [data-rs-internal='switcher__option']{
-    --_rs-typography-letter-spacing:0.0045em;
+    --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
     --_rs-typography-font-family:var(
@@ -56,7 +56,7 @@
     --_rs-switcher-icon-margin-vertical:0px;
   }
     &:not(html) [data-rs-internal='switcher__option']{
-    --_rs-typography-letter-spacing:0.0045em;
+    --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
     --_rs-typography-font-family:var(
@@ -102,7 +102,7 @@
     --_rs-switcher-icon-margin-vertical:0px;
   }
     &:not(html) [data-rs-internal='switcher__option']{
-    --_rs-typography-letter-spacing:0.0015em;
+    --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
     --_rs-typography-font-family:var(
@@ -130,14 +130,17 @@
     --_rs-typography-text-auto-offset:16px;
     --_rs-typography-ul-list-li-padding-left:22px;
     --_rs-typography-ol-list-li-padding-left:26px;
-    --_rs-typography-list-li-margin-top-from-text:16px;
+    --_rs-typography-list-li-margin-top-from-text:var(
+    --_rs-typography-text-2-sm-list-li-margin-top-from-text,
+    16px
+  );
     --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
     --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
     @media screen and (max-width: 640px){
     &:not(html) [data-rs-internal='switcher__option']{
-    --_rs-typography-list-li-margin-top-from-text:12px;
+    --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
   }
   }
 }
@@ -153,7 +156,7 @@
     --_rs-switcher-icon-margin-vertical:0px;
   }
     &:not(html) [data-rs-internal='switcher__option']{
-    --_rs-typography-letter-spacing:normal;
+    --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
     --_rs-typography-font-family:var(
@@ -181,14 +184,17 @@
     --_rs-typography-text-auto-offset:32px;
     --_rs-typography-ul-list-li-padding-left:26px;
     --_rs-typography-ol-list-li-padding-left:32px;
-    --_rs-typography-list-li-margin-top-from-text:24px;
+    --_rs-typography-list-li-margin-top-from-text:var(
+    --_rs-typography-text-1-sm-list-li-margin-top-from-text,
+    24px
+  );
     --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
     --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
     @media screen and (max-width: 640px){
     &:not(html) [data-rs-internal='switcher__option']{
-    --_rs-typography-list-li-margin-top-from-text:16px;
+    --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
   }
   }
 }
@@ -243,7 +249,7 @@
     --_rs-switcher-vertical-icon-margin-vertical:2px;
   }
     &:not(html) [data-rs-internal='vertical-switcher__option']{
-    --_rs-typography-letter-spacing:0.0045em;
+    --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
     --_rs-typography-font-family:var(
@@ -287,7 +293,7 @@
     --_rs-switcher-vertical-icon-margin-vertical:0px;
   }
     &:not(html) [data-rs-internal='vertical-switcher__option']{
-    --_rs-typography-letter-spacing:0.0045em;
+    --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
     --_rs-typography-font-family:var(
@@ -331,7 +337,7 @@
     --_rs-switcher-vertical-icon-margin-vertical:0px;
   }
     &:not(html) [data-rs-internal='vertical-switcher__option']{
-    --_rs-typography-letter-spacing:0.0015em;
+    --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
     --_rs-typography-font-family:var(
@@ -359,14 +365,17 @@
     --_rs-typography-text-auto-offset:16px;
     --_rs-typography-ul-list-li-padding-left:22px;
     --_rs-typography-ol-list-li-padding-left:26px;
-    --_rs-typography-list-li-margin-top-from-text:16px;
+    --_rs-typography-list-li-margin-top-from-text:var(
+    --_rs-typography-text-2-sm-list-li-margin-top-from-text,
+    16px
+  );
     --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
     --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
     @media screen and (max-width: 640px){
     &:not(html) [data-rs-internal='vertical-switcher__option']{
-    --_rs-typography-list-li-margin-top-from-text:12px;
+    --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
   }
   }
 }
@@ -380,7 +389,7 @@
     --_rs-switcher-vertical-icon-margin-vertical:0px;
   }
     &:not(html) [data-rs-internal='vertical-switcher__option']{
-    --_rs-typography-letter-spacing:normal;
+    --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
     --_rs-typography-font-family:var(
@@ -408,14 +417,17 @@
     --_rs-typography-text-auto-offset:32px;
     --_rs-typography-ul-list-li-padding-left:26px;
     --_rs-typography-ol-list-li-padding-left:32px;
-    --_rs-typography-list-li-margin-top-from-text:24px;
+    --_rs-typography-list-li-margin-top-from-text:var(
+    --_rs-typography-text-1-sm-list-li-margin-top-from-text,
+    24px
+  );
     --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
     --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
     @media screen and (max-width: 640px){
     &:not(html) [data-rs-internal='vertical-switcher__option']{
-    --_rs-typography-list-li-margin-top-from-text:16px;
+    --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
   }
   }
 }

package/lib/switcher.d.ts

@@ -28,8 +28,10 @@ export interface SwitcherProps<ValueType, OptionsValueType extends ValueType> {
     'data-e2e'?: string;
     /** **Works only if the `icon` on options is present.** Additional icon position. */
     iconPosition?: SwitcherOptionIconPosition;
+    /** CSS style object */
+    style?: React.CSSProperties;
 }
-export declare function Switcher<ValueType, OptionsValueType extends ValueType = ValueType>({ className, theme: themeFromProps, size, disabled, compact, ['data-e2e']: e2eId, options, value: switcherValue, mode, iconPosition, onChange }: SwitcherProps<ValueType, OptionsValueType>): JSX.Element;
+export declare function Switcher<ValueType, OptionsValueType extends ValueType = ValueType>({ className, theme: themeFromProps, size, disabled, compact, ['data-e2e']: e2eId, options, value: switcherValue, mode, iconPosition, onChange, style }: SwitcherProps<ValueType, OptionsValueType>): JSX.Element;
 export declare namespace Switcher {
     var propTypes: {};
 }

package/lib/switcher.js

@@ -1,48 +1,43 @@
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { cloneElement, useRef, useCallback, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import { useResizeObserver } from '@rescui/use-resize-observer';
 import styles from './switcher.p.module.css.js';
-var sizeToClass = {
+const MARK_TRANSITION_DURATION = '0.2s';
+const sizeToClass = {
   l: styles.sizeL,
   m: styles.sizeM,
   s: styles.sizeS,
   xs: styles.sizeXS
 };
-var themeToClass = {
+const themeToClass = {
   light: styles.themeLight,
   dark: styles.themeDark
 };
-var modeToClass = {
+const modeToClass = {
   classic: styles.modeClassic,
   rock: styles.modeRock
 };
 
-var findIndexByValue = function findIndexByValue(options, value) {
-  var index = _findIndexInstanceProperty(options).call(options, function (option) {
-    return option.value === value;
-  });
-
+const findIndexByValue = (options, value) => {
+  const index = options.findIndex(option => option.value === value);
   return index === -1 ? 0 : index;
 }; // check for ignored jsx values and empty string, more info https://reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored
 
 
-var isNodeEmpty = function isNodeEmpty(node) {
-  return node === null || typeof node === 'undefined' || node === false || node === true || node === '';
-};
+const isNodeEmpty = node => node === null || typeof node === 'undefined' || node === false || node === true || node === '';
 
-var optionRenderer = function optionRenderer(_ref, ref) {
-  var label = _ref.label,
-      value = _ref.value,
-      icon = _ref.icon,
-      disabled = _ref.disabled,
-      onClick = _ref.onClick,
-      selected = _ref.selected;
-  var isWithoutText = isNodeEmpty(label);
+const optionRenderer = (_ref, ref) => {
+  let {
+    label,
+    value,
+    icon,
+    disabled,
+    onClick,
+    selected
+  } = _ref;
+  const isWithoutText = isNodeEmpty(label);
   return /*#__PURE__*/React.createElement("button", {
     key: String(value),
     ref: ref,
@@ -52,94 +47,101 @@ var optionRenderer = function optionRenderer(_ref, ref) {
     disabled: disabled,
     className: cn(styles.option, selected && styles.selected)
   }, /*#__PURE__*/React.isValidElement(icon) && /*#__PURE__*/cloneElement(icon, {
-    className: cn(icon.props.className, styles.icon)
+    className: cn(icon.props.className, styles.icon),
+    'data-render-all-sizes': true
   }), !isWithoutText && /*#__PURE__*/React.createElement("span", null, label));
 };
 
-var Option = /*#__PURE__*/React.forwardRef(optionRenderer);
+const Option = /*#__PURE__*/React.forwardRef(optionRenderer);
 
 function Switcher(_ref2) {
-  var className = _ref2.className,
-      themeFromProps = _ref2.theme,
-      _ref2$size = _ref2.size,
-      size = _ref2$size === void 0 ? 'm' : _ref2$size,
-      disabled = _ref2.disabled,
-      _ref2$compact = _ref2.compact,
-      compact = _ref2$compact === void 0 ? false : _ref2$compact,
-      e2eId = _ref2['data-e2e'],
-      options = _ref2.options,
-      switcherValue = _ref2.value,
-      _ref2$mode = _ref2.mode,
-      mode = _ref2$mode === void 0 ? 'classic' : _ref2$mode,
-      _ref2$iconPosition = _ref2.iconPosition,
-      iconPosition = _ref2$iconPosition === void 0 ? 'left' : _ref2$iconPosition,
-      onChange = _ref2.onChange;
-  var refsArray = useRef([]);
-  var containerRef = useRef(null);
-  var theme = useThemeWithUndefined(themeFromProps);
-  var handleOptionRef = useCallback(function (index) {
-    return function (ref) {
-      if (!ref) {
-        return;
-      }
+  let {
+    className,
+    theme: themeFromProps,
+    size = 'm',
+    disabled,
+    compact = false,
+    ['data-e2e']: e2eId,
+    options,
+    value: switcherValue,
+    mode = 'classic',
+    iconPosition = 'left',
+    onChange,
+    style
+  } = _ref2;
+  const refsArray = useRef([]);
+  const containerRef = useRef(null);
+  const theme = useThemeWithUndefined(themeFromProps);
+  const handleOptionRef = useCallback(index => ref => {
+    if (!ref) {
+      return;
+    }
 
-      if (refsArray.current[index] !== ref) {
-        refsArray.current[index] = ref;
-      }
-    };
+    if (refsArray.current[index] !== ref) {
+      refsArray.current[index] = ref;
+    }
   }, []);
-  var activeIndex = findIndexByValue(options, switcherValue);
-
-  var _useState = useState({
+  const activeIndex = findIndexByValue(options, switcherValue);
+  const [mark, setMark] = useState({
     offset: 0,
-    width: 0
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      mark = _useState2[0],
-      setMark = _useState2[1];
+    width: 0,
+    hidden: true
+  });
+  const [isMarkTransitionEnabled, setIsMarkTransitionEnabled] = useState(false);
+  const firstMarkUpdate = useRef(true);
 
-  var onResize = function onResize() {
-    var activeEl = refsArray.current[activeIndex];
+  const updateMark = function () {
+    let isValueChanged = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    const activeEl = refsArray.current[activeIndex];
 
     if (!activeEl) {
       return;
     }
 
-    var activeElBox = activeEl.getBoundingClientRect();
-    var parentBox = activeEl.parentElement.getBoundingClientRect();
+    const activeElBox = activeEl.getBoundingClientRect();
+    const parentBox = activeEl.parentElement.getBoundingClientRect();
     setMark({
       // standard activeEl.offsetLeft always return rounded value, so it does not suit us
       offset: activeElBox.left - parentBox.left,
-      width: activeElBox.width
+      width: activeElBox.width,
+      hidden: false
     });
+
+    if (firstMarkUpdate.current) {
+      firstMarkUpdate.current = false;
+      setIsMarkTransitionEnabled(false);
+    } else {
+      setIsMarkTransitionEnabled(isValueChanged);
+    }
   }; // eslint-disable-next-line react-hooks/exhaustive-deps
 
 
-  useEffect(function () {
-    return onResize();
-  }, [activeIndex]);
-  useResizeObserver(containerRef, onResize);
+  useEffect(() => updateMark(true), [activeIndex]);
+  useResizeObserver(containerRef, () => updateMark(false));
   return /*#__PURE__*/React.createElement("span", {
-    className: cn(className, styles.switcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled, compact && styles.compact, iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft),
+    className: cn(className, styles.switcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled, compact && styles.compact, mark.hidden && styles.hiddenMark, iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft),
     "data-e2e": e2eId,
     ref: containerRef,
     "data-rs-internal": 'switcher',
-    "data-test": cn("switcher", disabled && "switcher-disabled")
-  }, _mapInstanceProperty(options).call(options, function (_ref3, index) {
+    "data-test": cn(`switcher`, disabled && `switcher-disabled`),
+    style: { ...style,
+      '--_rs-switcher-mark-transition-duration': isMarkTransitionEnabled ? MARK_TRANSITION_DURATION : '0s'
+    }
+  }, options.map((_ref3, index) => {
     var _options$activeIndex;
 
-    var value = _ref3.value,
-        label = _ref3.label,
-        icon = _ref3.icon;
+    let {
+      value,
+      label,
+      icon
+    } = _ref3;
     return /*#__PURE__*/React.createElement(Option, {
       key: String(value),
       value: value,
       label: label,
       icon: icon,
       disabled: disabled,
-      onClick: function onClick() {
-        return onChange(value);
-      },
+      onClick: () => onChange(value),
       ref: handleOptionRef(index),
       selected: ((_options$activeIndex = options[activeIndex]) === null || _options$activeIndex === void 0 ? void 0 : _options$activeIndex.value) === value
     });
@@ -152,7 +154,7 @@ function Switcher(_ref2) {
   }));
 }
 
-var optionPropType = PropTypes.shape({
+const optionPropType = PropTypes.shape({
   label: PropTypes.node,
   value: PropTypes.any.isRequired,
   icon: PropTypes.node
@@ -166,6 +168,7 @@ Switcher.propTypes = {
   theme: PropTypes.oneOf(['light', 'dark']),
   disabled: PropTypes.bool,
   iconPosition: PropTypes.oneOf(['left', 'right']),
-  'data-e2e': PropTypes.string
+  'data-e2e': PropTypes.string,
+  style: PropTypes.object
 };
 export { Switcher, Switcher as default };

package/lib/switcher.p.module.css.js

@@ -1,20 +1,21 @@
 var styles = {
-  "themeLight": "_themeLight_1i5u8r0_6",
-  "themeDark": "_themeDark_1i5u8r0_9",
-  "sizeXS": "_sizeXS_1i5u8r0_13",
-  "sizeS": "_sizeS_1i5u8r0_16",
-  "sizeM": "_sizeM_1i5u8r0_19",
-  "sizeL": "_sizeL_1i5u8r0_22",
-  "modeClassic": "_modeClassic_1i5u8r0_26",
-  "modeRock": "_modeRock_1i5u8r0_29",
-  "compact": "_compact_1i5u8r0_33",
-  "switcher": "_switcher_1i5u8r0_37",
-  "disabled": "_disabled_1i5u8r0_55",
-  "alignIconLeft": "_alignIconLeft_1i5u8r0_60",
-  "alignIconRight": "_alignIconRight_1i5u8r0_63",
-  "option": "_option_1i5u8r0_67",
-  "selected": "_selected_1i5u8r0_118",
-  "icon": "_icon_1i5u8r0_137",
-  "mark": "_mark_1i5u8r0_150"
+  "themeLight": "_themeLight_1ehnp4f_6",
+  "themeDark": "_themeDark_1ehnp4f_9",
+  "sizeXS": "_sizeXS_1ehnp4f_13",
+  "sizeS": "_sizeS_1ehnp4f_16",
+  "sizeM": "_sizeM_1ehnp4f_19",
+  "sizeL": "_sizeL_1ehnp4f_22",
+  "modeClassic": "_modeClassic_1ehnp4f_26",
+  "modeRock": "_modeRock_1ehnp4f_29",
+  "compact": "_compact_1ehnp4f_33",
+  "switcher": "_switcher_1ehnp4f_37",
+  "disabled": "_disabled_1ehnp4f_55",
+  "alignIconLeft": "_alignIconLeft_1ehnp4f_60",
+  "alignIconRight": "_alignIconRight_1ehnp4f_63",
+  "option": "_option_1ehnp4f_67",
+  "selected": "_selected_1ehnp4f_118",
+  "hiddenMark": "_hiddenMark_1ehnp4f_127",
+  "icon": "_icon_1ehnp4f_158",
+  "mark": "_mark_1ehnp4f_171"
 };
 export { styles as default };