@rescui/switcher 0.10.3 → 0.10.5

package/lib/index.css

@@ -1,10 +1,10 @@
-._themeLight_1i5u8r0_6{
+._themeLight_1klphaw_6{
   --rs-theme-dark:0;
 }
-._themeDark_1i5u8r0_9{
+._themeDark_1klphaw_9{
   --rs-theme-dark:1;
 }
-._sizeXS_1i5u8r0_13{
+._sizeXS_1klphaw_13{
   --_rs-switcher-border-radius:4px;
   --_rs-switcher-compact-border-radius:var(--_rs-switcher-border-radius);
   --_rs-switcher-option-padding:2px 12px;
@@ -14,7 +14,7 @@
   --_rs-switcher-compact-icon-offset:var(--_rs-switcher-icon-offset);
   --_rs-switcher-icon-margin-vertical:2px;
 }
-._sizeXS_1i5u8r0_13 [data-rs-internal='switcher__option']{
+._sizeXS_1klphaw_13 [data-rs-internal='switcher__option']{
     --_rs-typography-letter-spacing:0.0045em;
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
@@ -48,7 +48,7 @@
     --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
-._sizeS_1i5u8r0_16{
+._sizeS_1klphaw_16{
   --_rs-switcher-border-radius:16px;
   --_rs-switcher-compact-border-radius:4px;
   --_rs-switcher-option-padding:6px 16px;
@@ -58,7 +58,7 @@
   --_rs-switcher-compact-icon-offset:4px;
   --_rs-switcher-icon-margin-vertical:0px;
 }
-._sizeS_1i5u8r0_16 [data-rs-internal='switcher__option']{
+._sizeS_1klphaw_16 [data-rs-internal='switcher__option']{
     --_rs-typography-letter-spacing:0.0045em;
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
@@ -92,7 +92,7 @@
     --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
-._sizeM_1i5u8r0_19{
+._sizeM_1klphaw_19{
   --_rs-switcher-border-radius:20px;
   --_rs-switcher-compact-border-radius:8px;
   --_rs-switcher-option-padding:8px 24px;
@@ -102,7 +102,7 @@
   --_rs-switcher-compact-icon-offset:8px;
   --_rs-switcher-icon-margin-vertical:0px;
 }
-._sizeM_1i5u8r0_19 [data-rs-internal='switcher__option']{
+._sizeM_1klphaw_19 [data-rs-internal='switcher__option']{
     --_rs-typography-letter-spacing:0.0015em;
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
@@ -137,11 +137,11 @@
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
 @media screen and (max-width: 640px){
-._sizeM_1i5u8r0_19 [data-rs-internal='switcher__option']{
+._sizeM_1klphaw_19 [data-rs-internal='switcher__option']{
     --_rs-typography-list-li-margin-top-from-text:12px;
   }
   }
-._sizeL_1i5u8r0_22{
+._sizeL_1klphaw_22{
   --_rs-switcher-border-radius:26px;
   --_rs-switcher-compact-border-radius:12px;
   --_rs-switcher-option-padding:12px 32px;
@@ -151,7 +151,7 @@
   --_rs-switcher-compact-icon-offset:12px;
   --_rs-switcher-icon-margin-vertical:0px;
 }
-._sizeL_1i5u8r0_22 [data-rs-internal='switcher__option']{
+._sizeL_1klphaw_22 [data-rs-internal='switcher__option']{
     --_rs-typography-letter-spacing:normal;
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
@@ -186,22 +186,22 @@
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
 @media screen and (max-width: 640px){
-._sizeL_1i5u8r0_22 [data-rs-internal='switcher__option']{
+._sizeL_1klphaw_22 [data-rs-internal='switcher__option']{
     --_rs-typography-list-li-margin-top-from-text:16px;
   }
   }
-._modeClassic_1i5u8r0_26{
+._modeClassic_1klphaw_26{
   --_rs-switcher-option-hover-background:var(--_rs-color-primary-t-fog);
   --_rs-switcher-mark-border-color:var(--_rs-color-primary);
 }
-._modeRock_1i5u8r0_29{
+._modeRock_1klphaw_29{
   --_rs-switcher-option-hover-background:rgba(
     calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
     0.1
   );
   --_rs-switcher-mark-border-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
 }
-._compact_1i5u8r0_33{
+._compact_1klphaw_33{
   --_rs-switcher-border-radius-from-compact:var(
     --_rs-switcher-compact-border-radius
   );
@@ -212,7 +212,7 @@
     --_rs-switcher-compact-icon-offset
   );
 }
-._switcher_1i5u8r0_37{
+._switcher_1klphaw_37{
   --_rs-theme-dark:var(
     --_rs-internal-force-theme-dark-consult-rescui-before-using,
     var(--rs-theme-dark, 0)
@@ -222,7 +222,7 @@
   --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
 }
 @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._switcher_1i5u8r0_37{
+._switcher_1klphaw_37{
       --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
       --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
       --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -231,7 +231,7 @@
 }
   }
 @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._switcher_1i5u8r0_37{
+._switcher_1klphaw_37{
     --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
     --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
     --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -239,19 +239,13 @@
     --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
 }
   }
-._switcher_1i5u8r0_37 {
+._switcher_1klphaw_37 {
 
   position:relative;
 
-  display:-webkit-inline-box;
-
-  display:-ms-inline-flexbox;
-
   display:inline-flex;
 
-  -webkit-box-sizing:border-box;
-
-          box-sizing:border-box;
+  box-sizing:border-box;
 
   border-radius:var(
     --_rs-switcher-border-radius-from-compact,
@@ -259,20 +253,18 @@
   );
 
   background:transparent;
-  -webkit-box-shadow:inset rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.3) 0 0 0 1px;
-          box-shadow:inset rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.3) 0 0 0 1px;
+  box-shadow:inset rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.3) 0 0 0 1px;
 }
-._switcher_1i5u8r0_37._disabled_1i5u8r0_55{
-    -webkit-box-shadow:inset rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2) 0 0 0 1px;
-            box-shadow:inset rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2) 0 0 0 1px;
+._switcher_1klphaw_37._disabled_1klphaw_55{
+    box-shadow:inset rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2) 0 0 0 1px;
   }
-._alignIconLeft_1i5u8r0_60{
+._alignIconLeft_1klphaw_60{
   --_rs-switcher-option-flex-direction:row;
 }
-._alignIconRight_1i5u8r0_63{
+._alignIconRight_1klphaw_63{
   --_rs-switcher-option-flex-direction:row-reverse;
 }
-._option_1i5u8r0_67{
+._option_1klphaw_67{
   letter-spacing:var(
     --rs-text-base-letter-spacing,
     var(--_rs-typography-letter-spacing)
@@ -283,7 +275,6 @@
   font-weight:var(--_rs-typography-font-weight);
   line-height:var(--_rs-typography-line-height);
   font-variant-numeric:var(--_rs-typography-font-variant-numeric);
-  -webkit-font-feature-settings:'kern', 'liga', 'calt';
   font-feature-settings:'kern', 'liga', 'calt';
   color:var(
   --rs-color-hard,
@@ -293,32 +284,17 @@
   position:relative;
   z-index:1;
 
-  display:-webkit-inline-box;
-
-  display:-ms-inline-flexbox;
-
   display:inline-flex;
-  -webkit-box-flex:1;
-      -ms-flex:1 1 auto;
-          flex:1 1 auto;
-  -webkit-box-orient:vertical;
-  -webkit-box-direction:normal;
-      -ms-flex-direction:var(--_rs-switcher-option-flex-direction);
-          flex-direction:var(--_rs-switcher-option-flex-direction);
-  -webkit-box-pack:center;
-      -ms-flex-pack:center;
-          justify-content:center;
-  -webkit-box-align:start;
-      -ms-flex-align:start;
-          align-items:flex-start;
+  flex:1 1 auto;
+  flex-direction:var(--_rs-switcher-option-flex-direction);
+  justify-content:center;
+  align-items:flex-start;
   gap:var(
     --_rs-switcher-icon-offset-from-compact,
     var(--_rs-switcher-icon-offset)
   );
 
-  -webkit-box-sizing:border-box;
-
-          box-sizing:border-box;
+  box-sizing:border-box;
   margin:0;
   padding:var(
     --_rs-switcher-option-padding-from-compact,
@@ -339,28 +315,27 @@
      -moz-appearance:none;
           appearance:none;
 }
-._disabled_1i5u8r0_55 ._option_1i5u8r0_67{
+._disabled_1klphaw_55 ._option_1klphaw_67{
     cursor:not-allowed;
     pointer-events:none;
   }
-._option_1i5u8r0_67:focus[data-focus-method='key']{
-    -webkit-box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
-            box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
+._option_1klphaw_67:focus[data-focus-method='key']{
+    box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
   }
 @media (hover: hover){
-    ._option_1i5u8r0_67:hover{
+    ._option_1klphaw_67:hover{
       background:var(--_rs-switcher-option-hover-background);
     }
   }
-._option_1i5u8r0_67._selected_1i5u8r0_118:active{
+._option_1klphaw_67._selected_1klphaw_118:active{
       background:transparent;
     }
-._option_1i5u8r0_67._selected_1i5u8r0_118:hover,
-    ._option_1i5u8r0_67._selected_1i5u8r0_118:active{
+._option_1klphaw_67._selected_1klphaw_118:hover,
+    ._option_1klphaw_67._selected_1klphaw_118:active{
       cursor:default;
     }
-._disabled_1i5u8r0_55 ._option_1i5u8r0_67,
-  ._disabled_1i5u8r0_55 ._option_1i5u8r0_67._selected_1i5u8r0_118{
+._disabled_1klphaw_55 ._option_1klphaw_67,
+  ._disabled_1klphaw_55 ._option_1klphaw_67._selected_1klphaw_118{
     color:var(
   --rs-color-pale,
   rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5)
@@ -370,10 +345,8 @@
 
     background:transparent;
   }
-._option_1i5u8r0_67 ._icon_1i5u8r0_137{
-    -webkit-box-flex:0;
-        -ms-flex:0 0 auto;
-            flex:0 0 auto;
+._option_1klphaw_67 ._icon_1klphaw_137{
+    flex:0 0 auto;
 
     width:auto;
     height:var(--_rs-switcher-icon-size);
@@ -383,16 +356,14 @@
     margin-top:var(--_rs-switcher-icon-margin-vertical);
     margin-bottom:var(--_rs-switcher-icon-margin-vertical);
   }
-._mark_1i5u8r0_150{
+._mark_1klphaw_150{
   position:absolute;
   top:0;
   bottom:0;
 
   display:inline-block;
 
-  -webkit-box-sizing:border-box;
-
-          box-sizing:border-box;
+  box-sizing:border-box;
 
   border:solid 2px var(--_rs-switcher-mark-border-color);
 
@@ -401,21 +372,19 @@
     var(--_rs-switcher-border-radius)
   );
 
-  -webkit-transition:all 0.2s;
-
   transition:all 0.2s;
 }
-._disabled_1i5u8r0_55 ._mark_1i5u8r0_150{
+._disabled_1klphaw_55 ._mark_1klphaw_150{
     border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
   }
 
-._themeLight_el1i9h_6{
+._themeLight_8ywtgh_6{
   --rs-theme-dark:0;
 }
-._themeDark_el1i9h_9{
+._themeDark_8ywtgh_9{
   --rs-theme-dark:1;
 }
-._sizeXS_el1i9h_13{
+._sizeXS_8ywtgh_13{
   --_rs-switcher-vertical-border-radius:4px;
   --_rs-switcher-vertical-option-vertical-padding:2px;
   --_rs-switcher-vertical-option-horizontal-padding:8px;
@@ -423,7 +392,7 @@
   --_rs-switcher-vertical-icon-offset:4px;
   --_rs-switcher-vertical-icon-margin-vertical:2px;
 }
-._sizeXS_el1i9h_13 [data-rs-internal='vertical-switcher__option']{
+._sizeXS_8ywtgh_13 [data-rs-internal='vertical-switcher__option']{
     --_rs-typography-letter-spacing:0.0045em;
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
@@ -457,7 +426,7 @@
     --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
-._sizeS_el1i9h_16{
+._sizeS_8ywtgh_16{
   --_rs-switcher-vertical-border-radius:4px;
   --_rs-switcher-vertical-option-vertical-padding:6px;
   --_rs-switcher-vertical-option-horizontal-padding:12px;
@@ -465,7 +434,7 @@
   --_rs-switcher-vertical-icon-offset:4px;
   --_rs-switcher-vertical-icon-margin-vertical:0px;
 }
-._sizeS_el1i9h_16 [data-rs-internal='vertical-switcher__option']{
+._sizeS_8ywtgh_16 [data-rs-internal='vertical-switcher__option']{
     --_rs-typography-letter-spacing:0.0045em;
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
@@ -499,7 +468,7 @@
     --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
-._sizeM_el1i9h_19{
+._sizeM_8ywtgh_19{
   --_rs-switcher-vertical-border-radius:8px;
   --_rs-switcher-vertical-option-vertical-padding:8px;
   --_rs-switcher-vertical-option-horizontal-padding:16px;
@@ -507,7 +476,7 @@
   --_rs-switcher-vertical-icon-offset:8px;
   --_rs-switcher-vertical-icon-margin-vertical:0px;
 }
-._sizeM_el1i9h_19 [data-rs-internal='vertical-switcher__option']{
+._sizeM_8ywtgh_19 [data-rs-internal='vertical-switcher__option']{
     --_rs-typography-letter-spacing:0.0015em;
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
@@ -542,11 +511,11 @@
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
 @media screen and (max-width: 640px){
-._sizeM_el1i9h_19 [data-rs-internal='vertical-switcher__option']{
+._sizeM_8ywtgh_19 [data-rs-internal='vertical-switcher__option']{
     --_rs-typography-list-li-margin-top-from-text:12px;
   }
   }
-._sizeL_el1i9h_22{
+._sizeL_8ywtgh_22{
   --_rs-switcher-vertical-border-radius:12px;
   --_rs-switcher-vertical-option-vertical-padding:12px;
   --_rs-switcher-vertical-option-horizontal-padding:24px;
@@ -554,7 +523,7 @@
   --_rs-switcher-vertical-icon-offset:12px;
   --_rs-switcher-vertical-icon-margin-vertical:0px;
 }
-._sizeL_el1i9h_22 [data-rs-internal='vertical-switcher__option']{
+._sizeL_8ywtgh_22 [data-rs-internal='vertical-switcher__option']{
     --_rs-typography-letter-spacing:normal;
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
@@ -589,17 +558,17 @@
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
 @media screen and (max-width: 640px){
-._sizeL_el1i9h_22 [data-rs-internal='vertical-switcher__option']{
+._sizeL_8ywtgh_22 [data-rs-internal='vertical-switcher__option']{
     --_rs-typography-list-li-margin-top-from-text:16px;
   }
   }
-._modeClassic_el1i9h_26{
+._modeClassic_8ywtgh_26{
   --_rs-switcher-vertical-option-hover-background:var(
     --_rs-color-primary-t-fog
   );
   --_rs-switcher-vertical-mark-border-color:var(--_rs-color-primary);
 }
-._modeRock_el1i9h_29{
+._modeRock_8ywtgh_29{
   --_rs-switcher-vertical-option-hover-background:rgba(
     calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
     0.1
@@ -608,7 +577,7 @@
     calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227)
   );
 }
-._verticalSwitcher_el1i9h_33{
+._verticalSwitcher_8ywtgh_33{
   --_rs-theme-dark:var(
     --_rs-internal-force-theme-dark-consult-rescui-before-using,
     var(--rs-theme-dark, 0)
@@ -618,7 +587,7 @@
   --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
 }
 @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._verticalSwitcher_el1i9h_33{
+._verticalSwitcher_8ywtgh_33{
       --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
       --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
       --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -627,7 +596,7 @@
 }
   }
 @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._verticalSwitcher_el1i9h_33{
+._verticalSwitcher_8ywtgh_33{
     --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
     --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
     --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -635,44 +604,31 @@
     --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
 }
   }
-._verticalSwitcher_el1i9h_33 {
+._verticalSwitcher_8ywtgh_33 {
 
   position:relative;
 
-  display:-webkit-inline-box;
-
-  display:-ms-inline-flexbox;
-
   display:inline-flex;
-  -webkit-box-orient:vertical;
-  -webkit-box-direction:normal;
-      -ms-flex-direction:column;
-          flex-direction:column;
-  -webkit-box-align:start;
-      -ms-flex-align:start;
-          align-items:flex-start;
+  flex-direction:column;
+  align-items:flex-start;
 
-  -webkit-box-sizing:border-box;
-
-          box-sizing:border-box;
+  box-sizing:border-box;
 
   border-radius:var(--_rs-switcher-vertical-border-radius);
 
   background:transparent;
-  -webkit-box-shadow:inset rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.3) 0 0 0 1px;
-          box-shadow:inset rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.3) 0 0 0 1px;
+  box-shadow:inset rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.3) 0 0 0 1px;
 }
-._verticalSwitcher_el1i9h_33._disabled_el1i9h_50{
-    -webkit-box-shadow:inset rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2) 0 0 0 1px;
-            box-shadow:inset rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2) 0 0 0 1px;
+._verticalSwitcher_8ywtgh_33._disabled_8ywtgh_50{
+    box-shadow:inset rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2) 0 0 0 1px;
   }
-._alignIconLeft_el1i9h_55{
+._alignIconLeft_8ywtgh_55{
   --_rs-switcher-vertical-option-flex-direction:row;
 }
-._alignIconRight_el1i9h_58{
+._alignIconRight_8ywtgh_58{
   --_rs-switcher-vertical-option-flex-direction:row-reverse;
 }
-._option_el1i9h_62{
+._option_8ywtgh_62{
   letter-spacing:var(
     --rs-text-base-letter-spacing,
     var(--_rs-typography-letter-spacing)
@@ -683,7 +639,6 @@
   font-weight:var(--_rs-typography-font-weight);
   line-height:var(--_rs-typography-line-height);
   font-variant-numeric:var(--_rs-typography-font-variant-numeric);
-  -webkit-font-feature-settings:'kern', 'liga', 'calt';
   font-feature-settings:'kern', 'liga', 'calt';
   color:var(
   --rs-color-hard,
@@ -693,30 +648,14 @@
   position:relative;
   z-index:1;
 
-  display:-webkit-inline-box;
-
-  display:-ms-inline-flexbox;
-
   display:inline-flex;
-  -webkit-box-flex:1;
-      -ms-flex:1 1 auto;
-          flex:1 1 auto;
-  -ms-flex-wrap:nowrap;
-      flex-wrap:nowrap;
-  -webkit-box-orient:vertical;
-  -webkit-box-direction:normal;
-      -ms-flex-direction:var(--_rs-switcher-vertical-option-flex-direction);
-          flex-direction:var(--_rs-switcher-vertical-option-flex-direction);
-  -webkit-box-pack:start;
-      -ms-flex-pack:start;
-          justify-content:flex-start;
-  -webkit-box-align:start;
-      -ms-flex-align:start;
-          align-items:flex-start;
-
-  -webkit-box-sizing:border-box;
-
-          box-sizing:border-box;
+  flex:1 1 auto;
+  flex-wrap:nowrap;
+  flex-direction:var(--_rs-switcher-vertical-option-flex-direction);
+  justify-content:flex-start;
+  align-items:flex-start;
+
+  box-sizing:border-box;
   width:100%;
   margin:0;
   padding:var(--_rs-switcher-vertical-option-vertical-padding) var(--_rs-switcher-vertical-option-horizontal-padding);
@@ -733,28 +672,27 @@
      -moz-appearance:none;
           appearance:none;
 }
-._disabled_el1i9h_50 ._option_el1i9h_62{
+._disabled_8ywtgh_50 ._option_8ywtgh_62{
     cursor:not-allowed;
     pointer-events:none;
   }
-._option_el1i9h_62:focus[data-focus-method='key']{
-    -webkit-box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
-            box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
+._option_8ywtgh_62:focus[data-focus-method='key']{
+    box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
   }
 @media (hover: hover){
-    ._option_el1i9h_62:hover{
+    ._option_8ywtgh_62:hover{
       background:var(--_rs-switcher-vertical-option-hover-background);
     }
   }
-._option_el1i9h_62._selected_el1i9h_107:active{
+._option_8ywtgh_62._selected_8ywtgh_107:active{
       background:transparent;
     }
-._option_el1i9h_62._selected_el1i9h_107:hover,
-    ._option_el1i9h_62._selected_el1i9h_107:active{
+._option_8ywtgh_62._selected_8ywtgh_107:hover,
+    ._option_8ywtgh_62._selected_8ywtgh_107:active{
       cursor:default;
     }
-._disabled_el1i9h_50 ._option_el1i9h_62,
-  ._disabled_el1i9h_50 ._option_el1i9h_62._selected_el1i9h_107{
+._disabled_8ywtgh_50 ._option_8ywtgh_62,
+  ._disabled_8ywtgh_50 ._option_8ywtgh_62._selected_8ywtgh_107{
     color:var(
   --rs-color-pale,
   rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5)
@@ -764,17 +702,13 @@
 
     background:transparent;
   }
-._option_el1i9h_62 ._optionLabel_el1i9h_126{
-    -webkit-box-flex:1;
-        -ms-flex:1 1 auto;
-            flex:1 1 auto;
+._option_8ywtgh_62 ._optionLabel_8ywtgh_126{
+    flex:1 1 auto;
 
     text-align:left;
   }
-._option_el1i9h_62 ._icon_el1i9h_132{
-    -webkit-box-flex:0;
-        -ms-flex:0 0 auto;
-            flex:0 0 auto;
+._option_8ywtgh_62 ._icon_8ywtgh_132{
+    flex:0 0 auto;
 
     width:auto;
     height:var(--_rs-switcher-vertical-icon-size);
@@ -784,30 +718,26 @@
 
     fill:currentColor;
   }
-._option_el1i9h_62 ._fakeIcon_el1i9h_143{
+._option_8ywtgh_62 ._fakeIcon_8ywtgh_143{
     display:inline-block;
 
     width:var(--_rs-switcher-vertical-icon-size);
   }
-._mark_el1i9h_150{
+._mark_8ywtgh_150{
   position:absolute;
   right:0;
   left:0;
 
   display:inline-block;
 
-  -webkit-box-sizing:border-box;
-
-          box-sizing:border-box;
+  box-sizing:border-box;
 
   border:solid 2px var(--_rs-switcher-vertical-mark-border-color);
 
   border-radius:var(--_rs-switcher-vertical-border-radius);
 
-  -webkit-transition:all 0.2s;
-
   transition:all 0.2s;
 }
-._disabled_el1i9h_50 ._mark_el1i9h_150{
+._disabled_8ywtgh_50 ._mark_8ywtgh_150{
     border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
   }

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/switcher.js

@@ -1,48 +1,42 @@
-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 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,
@@ -56,57 +50,49 @@ var optionRenderer = function optionRenderer(_ref, ref) {
   }), !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
+  } = _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];
+  });
 
-  var onResize = function onResize() {
-    var activeEl = refsArray.current[activeIndex];
+  const onResize = () => {
+    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,
@@ -115,31 +101,29 @@ function Switcher(_ref2) {
   }; // eslint-disable-next-line react-hooks/exhaustive-deps
 
 
-  useEffect(function () {
-    return onResize();
-  }, [activeIndex]);
+  useEffect(() => onResize(), [activeIndex]);
   useResizeObserver(containerRef, onResize);
   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),
     "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`)
+  }, 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 +136,7 @@ function Switcher(_ref2) {
   }));
 }
 
-var optionPropType = PropTypes.shape({
+const optionPropType = PropTypes.shape({
   label: PropTypes.node,
   value: PropTypes.any.isRequired,
   icon: PropTypes.node

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

@@ -1,20 +1,20 @@
 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_1klphaw_6",
+  "themeDark": "_themeDark_1klphaw_9",
+  "sizeXS": "_sizeXS_1klphaw_13",
+  "sizeS": "_sizeS_1klphaw_16",
+  "sizeM": "_sizeM_1klphaw_19",
+  "sizeL": "_sizeL_1klphaw_22",
+  "modeClassic": "_modeClassic_1klphaw_26",
+  "modeRock": "_modeRock_1klphaw_29",
+  "compact": "_compact_1klphaw_33",
+  "switcher": "_switcher_1klphaw_37",
+  "disabled": "_disabled_1klphaw_55",
+  "alignIconLeft": "_alignIconLeft_1klphaw_60",
+  "alignIconRight": "_alignIconRight_1klphaw_63",
+  "option": "_option_1klphaw_67",
+  "selected": "_selected_1klphaw_118",
+  "icon": "_icon_1klphaw_137",
+  "mark": "_mark_1klphaw_150"
 };
 export { styles as default };

package/lib/vertical-switcher.js

@@ -1,19 +1,3 @@
-import "core-js/modules/es.function.name.js";
-import "core-js/modules/es.regexp.exec.js";
-import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
-import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
-import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
-import _getIteratorMethod from "@babel/runtime-corejs3/core-js/get-iterator-method";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import "core-js/modules/es.object.to-string.js";
-
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof _Symbol !== "undefined" && _getIteratorMethod(o) || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-
-function _unsupportedIterableToArray(o, minLen) { var _context; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context = Object.prototype.toString.call(o)).call(_context, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 import React, { createContext, useRef, useCallback, useState, useEffect, useContext, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
@@ -21,73 +5,61 @@ import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import { useResizeObserver } from '@rescui/use-resize-observer';
 import styles from './vertical-switcher.p.module.css.js'; // eslint-disable-next-line @typescript-eslint/no-empty-function
 
-var noop = function noop() {};
+const noop = () => {};
 
-var verticalSwitcherContext = /*#__PURE__*/createContext({
+const verticalSwitcherContext = /*#__PURE__*/createContext({
   switcherValue: null,
   onChange: noop,
-  handleOptionRef: function handleOptionRef() {
-    return noop;
-  },
+  handleOptionRef: () => noop,
   disabled: null
 });
-var sizeToClass = {
+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
 }; // eslint-disable-next-line complexity
 
-var processOptions = function processOptions(_ref) {
-  var _foundIndexByValue;
-
-  var rawOptions = _ref.rawOptions,
-      value = _ref.value,
-      iconPosition = _ref.iconPosition;
-  var options = [];
-  var foundIndexByValue = null;
-  var currentIndex = 0;
-  var withLeftIcons = false;
-
-  var _iterator = _createForOfIteratorHelper(rawOptions),
-      _step;
-
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var option = _step.value;
-      options.push({
-        label: option.label,
-        value: option.value,
-        icon: option.icon
-      });
+const processOptions = _ref => {
+  let {
+    rawOptions,
+    value,
+    iconPosition
+  } = _ref;
+  const options = [];
+  let foundIndexByValue = null;
+  let currentIndex = 0;
+  let withLeftIcons = false;
+
+  for (const option of rawOptions) {
+    options.push({
+      label: option.label,
+      value: option.value,
+      icon: option.icon
+    });
 
-      if ( /*#__PURE__*/React.isValidElement(option.icon) && iconPosition === 'left') {
-        withLeftIcons = true;
-      }
+    if ( /*#__PURE__*/React.isValidElement(option.icon) && iconPosition === 'left') {
+      withLeftIcons = true;
+    }
 
-      if (option.value === value && foundIndexByValue === null) {
-        foundIndexByValue = currentIndex;
-      }
+    if (option.value === value && foundIndexByValue === null) {
+      foundIndexByValue = currentIndex;
+    }
 
-      currentIndex++;
-    } // If some options on the first depth level have icons, we should align all other options accordingly
+    currentIndex++;
+  } // If some options on the first depth level have icons, we should align all other options accordingly
 
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
-  }
 
   if (withLeftIcons) {
-    options.forEach(function (option) {
+    options.forEach(option => {
       if (! /*#__PURE__*/React.isValidElement(option.icon)) {
         option.icon = /*#__PURE__*/React.createElement("span", {
           className: styles.fakeIcon
@@ -97,41 +69,38 @@ var processOptions = function processOptions(_ref) {
   }
 
   return {
-    options: options,
-    activeIndex: (_foundIndexByValue = foundIndexByValue) !== null && _foundIndexByValue !== void 0 ? _foundIndexByValue : 0
+    options,
+    activeIndex: foundIndexByValue ?? 0
   };
 }; // 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 === '';
 
 function Option(_ref2) {
-  var label = _ref2.label,
-      value = _ref2.value,
-      icon = _ref2.icon,
-      index = _ref2.index;
-
-  var _useContext = useContext(verticalSwitcherContext),
-      switcherValue = _useContext.switcherValue,
-      onChange = _useContext.onChange,
-      handleOptionRef = _useContext.handleOptionRef,
-      disabled = _useContext.disabled;
-
-  var selected = switcherValue === value;
-  var isWithoutText = isNodeEmpty(label);
+  let {
+    label,
+    value,
+    icon,
+    index
+  } = _ref2;
+  const {
+    switcherValue,
+    onChange,
+    handleOptionRef,
+    disabled
+  } = useContext(verticalSwitcherContext);
+  const selected = switcherValue === value;
+  const isWithoutText = isNodeEmpty(label);
   return /*#__PURE__*/React.createElement("button", {
     key: String(value),
     ref: handleOptionRef(index),
-    onClick: function onClick() {
-      return onChange(value);
-    },
+    onClick: () => onChange(value),
     type: "button",
     "data-rs-internal": 'vertical-switcher__option',
     disabled: disabled,
     className: cn(styles.option, selected && styles.selected),
-    "data-test": cn("vertical-switcher-option", selected && ' vertical-switcher-option-selected')
+    "data-test": cn(`vertical-switcher-option`, selected && ' vertical-switcher-option-selected')
   }, /*#__PURE__*/React.isValidElement(icon) && /*#__PURE__*/cloneElement(icon, {
     className: cn(icon.props.className, styles.icon)
   }), !isWithoutText && /*#__PURE__*/React.createElement("span", {
@@ -142,62 +111,54 @@ function Option(_ref2) {
 function VerticalSwitcher(_ref3) {
   var _options$activeIndex;
 
-  var className = _ref3.className,
-      themeFromProps = _ref3.theme,
-      _ref3$size = _ref3.size,
-      size = _ref3$size === void 0 ? 'm' : _ref3$size,
-      disabled = _ref3.disabled,
-      e2eId = _ref3['data-e2e'],
-      rawOptions = _ref3.options,
-      switcherValue = _ref3.value,
-      _ref3$mode = _ref3.mode,
-      mode = _ref3$mode === void 0 ? 'classic' : _ref3$mode,
-      _ref3$iconPosition = _ref3.iconPosition,
-      iconPosition = _ref3$iconPosition === void 0 ? 'left' : _ref3$iconPosition,
-      onChange = _ref3.onChange,
-      style = _ref3.style;
-  var refsArray = useRef([]);
-  var containerRef = useRef(null);
-  var theme = useThemeWithUndefined(themeFromProps);
-
-  var _processOptions = processOptions({
-    rawOptions: rawOptions,
+  let {
+    className,
+    theme: themeFromProps,
+    size = 'm',
+    disabled,
+    ['data-e2e']: e2eId,
+    options: rawOptions,
     value: switcherValue,
-    iconPosition: iconPosition
-  }),
-      options = _processOptions.options,
-      activeIndex = _processOptions.activeIndex;
-
-  var handleOptionRef = useCallback(function (index) {
-    return function (ref) {
-      if (!ref) {
-        return;
-      }
+    mode = 'classic',
+    iconPosition = 'left',
+    onChange,
+    style
+  } = _ref3;
+  const refsArray = useRef([]);
+  const containerRef = useRef(null);
+  const theme = useThemeWithUndefined(themeFromProps);
+  const {
+    options,
+    activeIndex
+  } = processOptions({
+    rawOptions,
+    value: switcherValue,
+    iconPosition
+  });
+  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 _useState = useState({
+  const [mark, setMark] = useState({
     offset: 0,
     height: 0
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      mark = _useState2[0],
-      setMark = _useState2[1];
+  });
 
-  var onResize = function onResize() {
-    var activeEl = refsArray.current[activeIndex];
+  const onResize = () => {
+    const activeEl = refsArray.current[activeIndex];
 
     if (!activeEl) {
       return;
     }
 
-    var parentEl = activeEl.parentElement;
-    var activeElBox = activeEl.getBoundingClientRect();
-    var parentBox = parentEl.getBoundingClientRect();
+    const parentEl = activeEl.parentElement;
+    const activeElBox = activeEl.getBoundingClientRect();
+    const parentBox = parentEl.getBoundingClientRect();
     setMark({
       // standard activeEl.offsetTop always return rounded value, so it does not suit us
       offset: activeElBox.top - parentBox.top + parentEl.scrollTop,
@@ -206,28 +167,28 @@ function VerticalSwitcher(_ref3) {
   }; // eslint-disable-next-line react-hooks/exhaustive-deps
 
 
-  useEffect(function () {
-    return onResize();
-  }, [activeIndex]);
+  useEffect(() => onResize(), [activeIndex]);
   useResizeObserver(containerRef, onResize);
   return /*#__PURE__*/React.createElement("span", {
     className: cn(className, styles.verticalSwitcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled, iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft),
     "data-e2e": e2eId,
     ref: containerRef,
     "data-rs-internal": 'vertical-switcher',
-    "data-test": cn("vertical-switcher", disabled && "vertical-switcher-disabled"),
+    "data-test": cn(`vertical-switcher`, disabled && `vertical-switcher-disabled`),
     style: style
   }, /*#__PURE__*/React.createElement(verticalSwitcherContext.Provider, {
     value: {
       switcherValue: (_options$activeIndex = options[activeIndex]) === null || _options$activeIndex === void 0 ? void 0 : _options$activeIndex.value,
-      onChange: onChange,
-      handleOptionRef: handleOptionRef,
-      disabled: disabled
+      onChange,
+      handleOptionRef,
+      disabled
     }
-  }, _mapInstanceProperty(options).call(options, function (_ref4, index) {
-    var value = _ref4.value,
-        label = _ref4.label,
-        icon = _ref4.icon;
+  }, options.map((_ref4, index) => {
+    let {
+      value,
+      label,
+      icon
+    } = _ref4;
     return /*#__PURE__*/React.createElement(Option, {
       key: String(value),
       value: value,
@@ -244,7 +205,7 @@ function VerticalSwitcher(_ref3) {
   })));
 }
 
-var optionPropType = PropTypes.shape({
+const optionPropType = PropTypes.shape({
   label: PropTypes.node,
   value: PropTypes.any.isRequired,
   icon: PropTypes.node

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

@@ -1,21 +1,21 @@
 var styles = {
-  "themeLight": "_themeLight_el1i9h_6",
-  "themeDark": "_themeDark_el1i9h_9",
-  "sizeXS": "_sizeXS_el1i9h_13",
-  "sizeS": "_sizeS_el1i9h_16",
-  "sizeM": "_sizeM_el1i9h_19",
-  "sizeL": "_sizeL_el1i9h_22",
-  "modeClassic": "_modeClassic_el1i9h_26",
-  "modeRock": "_modeRock_el1i9h_29",
-  "verticalSwitcher": "_verticalSwitcher_el1i9h_33",
-  "disabled": "_disabled_el1i9h_50",
-  "alignIconLeft": "_alignIconLeft_el1i9h_55",
-  "alignIconRight": "_alignIconRight_el1i9h_58",
-  "option": "_option_el1i9h_62",
-  "selected": "_selected_el1i9h_107",
-  "optionLabel": "_optionLabel_el1i9h_126",
-  "icon": "_icon_el1i9h_132",
-  "fakeIcon": "_fakeIcon_el1i9h_143",
-  "mark": "_mark_el1i9h_150"
+  "themeLight": "_themeLight_8ywtgh_6",
+  "themeDark": "_themeDark_8ywtgh_9",
+  "sizeXS": "_sizeXS_8ywtgh_13",
+  "sizeS": "_sizeS_8ywtgh_16",
+  "sizeM": "_sizeM_8ywtgh_19",
+  "sizeL": "_sizeL_8ywtgh_22",
+  "modeClassic": "_modeClassic_8ywtgh_26",
+  "modeRock": "_modeRock_8ywtgh_29",
+  "verticalSwitcher": "_verticalSwitcher_8ywtgh_33",
+  "disabled": "_disabled_8ywtgh_50",
+  "alignIconLeft": "_alignIconLeft_8ywtgh_55",
+  "alignIconRight": "_alignIconRight_8ywtgh_58",
+  "option": "_option_8ywtgh_62",
+  "selected": "_selected_8ywtgh_107",
+  "optionLabel": "_optionLabel_8ywtgh_126",
+  "icon": "_icon_8ywtgh_132",
+  "fakeIcon": "_fakeIcon_8ywtgh_143",
+  "mark": "_mark_8ywtgh_150"
 };
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/switcher",
-  "version": "0.10.3",
+  "version": "0.10.5",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -15,10 +15,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@babel/runtime-corejs3": "^7.14.0",
-    "@rescui/use-resize-observer": "^0.2.4",
-    "classnames": "^2.2.6",
-    "core-js": "^3.9.1"
+    "@babel/runtime-corejs3": "^7.26.0",
+    "@rescui/use-resize-observer": "^0.2.5",
+    "classnames": "^2.2.6"
   },
   "peerDependencies": {
     "@rescui/ui-contexts": "^0.5.0",
@@ -26,15 +25,15 @@
     "react": ">=16.8.0 <19"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.2.5",
-    "@rescui/icons": "^0.16.11",
-    "@rescui/scripts": "^0.3.4",
-    "@rescui/typography": "^0.19.0"
+    "@rescui/colors": "^0.2.6",
+    "@rescui/icons": "^0.16.13",
+    "@rescui/scripts": "^0.3.5",
+    "@rescui/typography": "^0.20.0"
   },
   "scripts": {
     "build": "rescui-scripts build && yarn run build-pcss-api",
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "3ef429c66a082b71861a814ba508693c68a94842"
+  "gitHead": "5531e3d285d6e38bf5536ff0690a252f1308c49b"
 }