@alfalab/core-components 22.3.1 → 23.3.0

package/status/index.css

@@ -1,4 +1,4 @@
-/* hash: 1veg0 */
+/* hash: bby4e */
 :root {
     --color-static-status-blue: #007aff;
     --color-static-status-green: #13a463;
@@ -7,13 +7,13 @@
     --color-static-status-purple: #673ab7;
     --color-static-status-red: #d91d0b;
     --color-static-status-teal: #219187;
-    --color-static-status-blue-tint-90: rgb(230, 242, 255);
-    --color-static-status-green-tint-90: rgb(231, 246, 239);
-    --color-static-status-grey-tint-90: rgb(240, 242, 243);
-    --color-static-status-orange-tint-90: rgb(252, 240, 230);
-    --color-static-status-purple-tint-90: rgb(240, 235, 248);
-    --color-static-status-red-tint-90: rgb(251, 232, 231);
-    --color-static-status-teal-tint-90: rgb(233, 244, 243);
+    --color-static-status-blue-alpha-10: rgba(0, 122, 255, 0.1);
+    --color-static-status-green-alpha-10: rgba(19, 164, 99, 0.1);
+    --color-static-status-grey-alpha-10: rgba(109, 121, 134, 0.1);
+    --color-static-status-orange-alpha-10: rgba(222, 106, 0, 0.1);
+    --color-static-status-purple-alpha-10: rgba(103, 58, 183, 0.1);
+    --color-static-status-red-alpha-10: rgba(217, 29, 11, 0.1);
+    --color-static-status-teal-alpha-10: rgba(33, 145, 135, 0.1);
 }
 :root {
     --color-light-text-primary-inverted: #fff;
@@ -32,7 +32,7 @@
 :root {
     --border-radius-s: 4px;
 }
-.status__component_19qgv {
+.status__component_1r743 {
     font-size: 11px;
     line-height: 16px;
     font-weight: 700;
@@ -47,58 +47,58 @@
     text-transform: uppercase;
     white-space: nowrap
 }
-.status__component_19qgv:empty {
+.status__component_1r743:empty {
         padding: 0;
     }
-.status__soft_19qgv.status__green_19qgv {
-        background: var(--color-static-status-green-tint-90);
+.status__soft_1r743.status__green_1r743 {
+        background: var(--color-static-status-green-alpha-10);
         color: var(--color-static-status-green);
     }
-.status__soft_19qgv.status__orange_19qgv {
-        background: var(--color-static-status-orange-tint-90);
+.status__soft_1r743.status__orange_1r743 {
+        background: var(--color-static-status-orange-alpha-10);
         color: var(--color-static-status-orange);
     }
-.status__soft_19qgv.status__red_19qgv {
-        background: var(--color-static-status-red-tint-90);
+.status__soft_1r743.status__red_1r743 {
+        background: var(--color-static-status-red-alpha-10);
         color: var(--color-static-status-red);
     }
-.status__soft_19qgv.status__blue_19qgv {
-        background: var(--color-static-status-blue-tint-90);
+.status__soft_1r743.status__blue_1r743 {
+        background: var(--color-static-status-blue-alpha-10);
         color: var(--color-static-status-blue);
     }
-.status__soft_19qgv.status__grey_19qgv {
-        background: var(--color-static-status-grey-tint-90);
+.status__soft_1r743.status__grey_1r743 {
+        background: var(--color-static-status-grey-alpha-10);
         color: var(--color-static-status-grey);
     }
-.status__soft_19qgv.status__teal_19qgv {
-        background: var(--color-static-status-teal-tint-90);
+.status__soft_1r743.status__teal_1r743 {
+        background: var(--color-static-status-teal-alpha-10);
         color: var(--color-static-status-teal);
     }
-.status__soft_19qgv.status__purple_19qgv {
-        background: var(--color-static-status-purple-tint-90);
+.status__soft_1r743.status__purple_1r743 {
+        background: var(--color-static-status-purple-alpha-10);
         color: var(--color-static-status-purple);
     }
-.status__contrast_19qgv {
+.status__contrast_1r743 {
     color: var(--color-light-text-primary-inverted)
 }
-.status__contrast_19qgv.status__green_19qgv {
+.status__contrast_1r743.status__green_1r743 {
         background: var(--color-static-status-green);
     }
-.status__contrast_19qgv.status__orange_19qgv {
+.status__contrast_1r743.status__orange_1r743 {
         background: var(--color-static-status-orange);
     }
-.status__contrast_19qgv.status__red_19qgv {
+.status__contrast_1r743.status__red_1r743 {
         background: var(--color-static-status-red);
     }
-.status__contrast_19qgv.status__blue_19qgv {
+.status__contrast_1r743.status__blue_1r743 {
         background: var(--color-static-status-blue);
     }
-.status__contrast_19qgv.status__grey_19qgv {
+.status__contrast_1r743.status__grey_1r743 {
         background: var(--color-static-status-grey);
     }
-.status__contrast_19qgv.status__teal_19qgv {
+.status__contrast_1r743.status__teal_1r743 {
         background: var(--color-static-status-teal);
     }
-.status__contrast_19qgv.status__purple_19qgv {
+.status__contrast_1r743.status__purple_1r743 {
         background: var(--color-static-status-purple);
     }

package/status/modern/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"status__component_19qgv","soft":"status__soft_19qgv","green":"status__green_19qgv","orange":"status__orange_19qgv","red":"status__red_19qgv","blue":"status__blue_19qgv","grey":"status__grey_19qgv","teal":"status__teal_19qgv","purple":"status__purple_19qgv","contrast":"status__contrast_19qgv"};
+var styles = {"component":"status__component_1r743","soft":"status__soft_1r743","green":"status__green_1r743","orange":"status__orange_1r743","red":"status__red_1r743","blue":"status__blue_1r743","grey":"status__grey_1r743","teal":"status__teal_1r743","purple":"status__purple_1r743","contrast":"status__contrast_1r743"};
 require('./index.css');
 
 const colors = ['green', 'orange', 'red', 'blue', 'grey', 'teal', 'purple'];

package/status/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1veg0 */
+/* hash: bby4e */
 :root {
     --color-static-status-blue: #007aff;
     --color-static-status-green: #13a463;
@@ -7,13 +7,13 @@
     --color-static-status-purple: #673ab7;
     --color-static-status-red: #d91d0b;
     --color-static-status-teal: #219187;
-    --color-static-status-blue-tint-90: rgb(230, 242, 255);
-    --color-static-status-green-tint-90: rgb(231, 246, 239);
-    --color-static-status-grey-tint-90: rgb(240, 242, 243);
-    --color-static-status-orange-tint-90: rgb(252, 240, 230);
-    --color-static-status-purple-tint-90: rgb(240, 235, 248);
-    --color-static-status-red-tint-90: rgb(251, 232, 231);
-    --color-static-status-teal-tint-90: rgb(233, 244, 243);
+    --color-static-status-blue-alpha-10: rgba(0, 122, 255, 0.1);
+    --color-static-status-green-alpha-10: rgba(19, 164, 99, 0.1);
+    --color-static-status-grey-alpha-10: rgba(109, 121, 134, 0.1);
+    --color-static-status-orange-alpha-10: rgba(222, 106, 0, 0.1);
+    --color-static-status-purple-alpha-10: rgba(103, 58, 183, 0.1);
+    --color-static-status-red-alpha-10: rgba(217, 29, 11, 0.1);
+    --color-static-status-teal-alpha-10: rgba(33, 145, 135, 0.1);
 }
 :root {
     --color-light-text-primary-inverted: #fff;
@@ -32,7 +32,7 @@
 :root {
     --border-radius-s: 4px;
 }
-.status__component_19qgv {
+.status__component_1r743 {
     font-size: 11px;
     line-height: 16px;
     font-weight: 700;
@@ -47,58 +47,58 @@
     text-transform: uppercase;
     white-space: nowrap
 }
-.status__component_19qgv:empty {
+.status__component_1r743:empty {
         padding: 0;
     }
-.status__soft_19qgv.status__green_19qgv {
-        background: var(--color-static-status-green-tint-90);
+.status__soft_1r743.status__green_1r743 {
+        background: var(--color-static-status-green-alpha-10);
         color: var(--color-static-status-green);
     }
-.status__soft_19qgv.status__orange_19qgv {
-        background: var(--color-static-status-orange-tint-90);
+.status__soft_1r743.status__orange_1r743 {
+        background: var(--color-static-status-orange-alpha-10);
         color: var(--color-static-status-orange);
     }
-.status__soft_19qgv.status__red_19qgv {
-        background: var(--color-static-status-red-tint-90);
+.status__soft_1r743.status__red_1r743 {
+        background: var(--color-static-status-red-alpha-10);
         color: var(--color-static-status-red);
     }
-.status__soft_19qgv.status__blue_19qgv {
-        background: var(--color-static-status-blue-tint-90);
+.status__soft_1r743.status__blue_1r743 {
+        background: var(--color-static-status-blue-alpha-10);
         color: var(--color-static-status-blue);
     }
-.status__soft_19qgv.status__grey_19qgv {
-        background: var(--color-static-status-grey-tint-90);
+.status__soft_1r743.status__grey_1r743 {
+        background: var(--color-static-status-grey-alpha-10);
         color: var(--color-static-status-grey);
     }
-.status__soft_19qgv.status__teal_19qgv {
-        background: var(--color-static-status-teal-tint-90);
+.status__soft_1r743.status__teal_1r743 {
+        background: var(--color-static-status-teal-alpha-10);
         color: var(--color-static-status-teal);
     }
-.status__soft_19qgv.status__purple_19qgv {
-        background: var(--color-static-status-purple-tint-90);
+.status__soft_1r743.status__purple_1r743 {
+        background: var(--color-static-status-purple-alpha-10);
         color: var(--color-static-status-purple);
     }
-.status__contrast_19qgv {
+.status__contrast_1r743 {
     color: var(--color-light-text-primary-inverted)
 }
-.status__contrast_19qgv.status__green_19qgv {
+.status__contrast_1r743.status__green_1r743 {
         background: var(--color-static-status-green);
     }
-.status__contrast_19qgv.status__orange_19qgv {
+.status__contrast_1r743.status__orange_1r743 {
         background: var(--color-static-status-orange);
     }
-.status__contrast_19qgv.status__red_19qgv {
+.status__contrast_1r743.status__red_1r743 {
         background: var(--color-static-status-red);
     }
-.status__contrast_19qgv.status__blue_19qgv {
+.status__contrast_1r743.status__blue_1r743 {
         background: var(--color-static-status-blue);
     }
-.status__contrast_19qgv.status__grey_19qgv {
+.status__contrast_1r743.status__grey_1r743 {
         background: var(--color-static-status-grey);
     }
-.status__contrast_19qgv.status__teal_19qgv {
+.status__contrast_1r743.status__teal_1r743 {
         background: var(--color-static-status-teal);
     }
-.status__contrast_19qgv.status__purple_19qgv {
+.status__contrast_1r743.status__purple_1r743 {
         background: var(--color-static-status-purple);
     }

package/stepped-progress-bar/Component.js

@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"component":"stepped-progress-bar__component_1wu8a","stepsContainer":"stepped-progress-bar__stepsContainer_1wu8a","description":"stepped-progress-bar__description_1wu8a"};
+var styles = {"component":"stepped-progress-bar__component_1j28v","stepsContainer":"stepped-progress-bar__stepsContainer_1j28v","description":"stepped-progress-bar__description_1j28v"};
 require('./index.css');
 
 var SteppedProgressBar = function (_a) {

package/stepped-progress-bar/components/step-bar/Component.js

@@ -8,7 +8,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"bar":"stepped-progress-bar__bar_1qb6e","done":"stepped-progress-bar__done_1qb6e"};
+var styles = {"bar":"stepped-progress-bar__bar_gkqhf","done":"stepped-progress-bar__done_gkqhf"};
 require('./index.css');
 
 var StepBar = React.memo(function (_a) {

package/stepped-progress-bar/components/step-bar/index.css

@@ -1,5 +1,5 @@
 /* hash: lurmt */
-.stepped-progress-bar__bar_1qb6e {
+.stepped-progress-bar__bar_gkqhf {
     width: 100%;
     height: var(--gap-2xs);
     margin-right: var(--gap-2xs);
@@ -7,10 +7,10 @@
     background: var(--color-light-border-primary);
 }
 
-.stepped-progress-bar__bar_1qb6e:last-child {
+.stepped-progress-bar__bar_gkqhf:last-child {
     margin-right: 0;
 }
 
-.stepped-progress-bar__done_1qb6e {
+.stepped-progress-bar__done_gkqhf {
     background: var(--color-light-graphic-positive);
 }

package/stepped-progress-bar/esm/Component.js

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { Typography } from '../../typography/esm';
 import { StepBar } from './components/step-bar/Component.js';
 
-var styles = {"component":"stepped-progress-bar__component_1wu8a","stepsContainer":"stepped-progress-bar__stepsContainer_1wu8a","description":"stepped-progress-bar__description_1wu8a"};
+var styles = {"component":"stepped-progress-bar__component_1j28v","stepsContainer":"stepped-progress-bar__stepsContainer_1j28v","description":"stepped-progress-bar__description_1j28v"};
 require('./index.css');
 
 var SteppedProgressBar = function (_a) {

package/stepped-progress-bar/esm/components/step-bar/Component.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import cn from 'classnames';
 
-var styles = {"bar":"stepped-progress-bar__bar_1qb6e","done":"stepped-progress-bar__done_1qb6e"};
+var styles = {"bar":"stepped-progress-bar__bar_gkqhf","done":"stepped-progress-bar__done_gkqhf"};
 require('./index.css');
 
 var StepBar = memo(function (_a) {

package/stepped-progress-bar/esm/components/step-bar/index.css

@@ -1,5 +1,5 @@
 /* hash: lurmt */
-.stepped-progress-bar__bar_1qb6e {
+.stepped-progress-bar__bar_gkqhf {
     width: 100%;
     height: var(--gap-2xs);
     margin-right: var(--gap-2xs);
@@ -7,10 +7,10 @@
     background: var(--color-light-border-primary);
 }
 
-.stepped-progress-bar__bar_1qb6e:last-child {
+.stepped-progress-bar__bar_gkqhf:last-child {
     margin-right: 0;
 }
 
-.stepped-progress-bar__done_1qb6e {
+.stepped-progress-bar__done_gkqhf {
     background: var(--color-light-graphic-positive);
 }

package/stepped-progress-bar/esm/index.css

@@ -13,16 +13,16 @@
 :root {
     --gap-xs: 8px;
 }
-.stepped-progress-bar__component_1wu8a {
+.stepped-progress-bar__component_1j28v {
     display: flex;
     flex-direction: column;
     text-align: center;
 }
-.stepped-progress-bar__stepsContainer_1wu8a {
+.stepped-progress-bar__stepsContainer_1j28v {
     width: 100%;
     display: flex;
     margin-bottom: var(--gap-xs);
 }
-.stepped-progress-bar__description_1wu8a {
+.stepped-progress-bar__description_1j28v {
     color: var(--color-light-text-secondary-transparent);
 }

package/stepped-progress-bar/index.css

@@ -13,16 +13,16 @@
 :root {
     --gap-xs: 8px;
 }
-.stepped-progress-bar__component_1wu8a {
+.stepped-progress-bar__component_1j28v {
     display: flex;
     flex-direction: column;
     text-align: center;
 }
-.stepped-progress-bar__stepsContainer_1wu8a {
+.stepped-progress-bar__stepsContainer_1j28v {
     width: 100%;
     display: flex;
     margin-bottom: var(--gap-xs);
 }
-.stepped-progress-bar__description_1wu8a {
+.stepped-progress-bar__description_1j28v {
     color: var(--color-light-text-secondary-transparent);
 }

package/stepped-progress-bar/modern/Component.js

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { Typography } from '../../typography/modern';
 import { StepBar } from './components/step-bar/Component.js';
 
-var styles = {"component":"stepped-progress-bar__component_1wu8a","stepsContainer":"stepped-progress-bar__stepsContainer_1wu8a","description":"stepped-progress-bar__description_1wu8a"};
+var styles = {"component":"stepped-progress-bar__component_1j28v","stepsContainer":"stepped-progress-bar__stepsContainer_1j28v","description":"stepped-progress-bar__description_1j28v"};
 require('./index.css');
 
 const SteppedProgressBar = ({ maxStep, description, step = 0, dataTestId, className, }) => {

package/stepped-progress-bar/modern/components/step-bar/Component.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import cn from 'classnames';
 
-var styles = {"bar":"stepped-progress-bar__bar_1qb6e","done":"stepped-progress-bar__done_1qb6e"};
+var styles = {"bar":"stepped-progress-bar__bar_gkqhf","done":"stepped-progress-bar__done_gkqhf"};
 require('./index.css');
 
 const StepBar = memo(({ isDone }) => (React.createElement("span", { "data-test-id": isDone ? 'on' : 'off', className: cn(styles.bar, isDone && styles.done) })));

package/stepped-progress-bar/modern/components/step-bar/index.css

@@ -1,5 +1,5 @@
 /* hash: lurmt */
-.stepped-progress-bar__bar_1qb6e {
+.stepped-progress-bar__bar_gkqhf {
     width: 100%;
     height: var(--gap-2xs);
     margin-right: var(--gap-2xs);
@@ -7,10 +7,10 @@
     background: var(--color-light-border-primary);
 }
 
-.stepped-progress-bar__bar_1qb6e:last-child {
+.stepped-progress-bar__bar_gkqhf:last-child {
     margin-right: 0;
 }
 
-.stepped-progress-bar__done_1qb6e {
+.stepped-progress-bar__done_gkqhf {
     background: var(--color-light-graphic-positive);
 }

package/stepped-progress-bar/modern/index.css

@@ -13,16 +13,16 @@
 :root {
     --gap-xs: 8px;
 }
-.stepped-progress-bar__component_1wu8a {
+.stepped-progress-bar__component_1j28v {
     display: flex;
     flex-direction: column;
     text-align: center;
 }
-.stepped-progress-bar__stepsContainer_1wu8a {
+.stepped-progress-bar__stepsContainer_1j28v {
     width: 100%;
     display: flex;
     margin-bottom: var(--gap-xs);
 }
-.stepped-progress-bar__description_1wu8a {
+.stepped-progress-bar__description_1j28v {
     color: var(--color-light-text-secondary-transparent);
 }

package/switch/Component.js

@@ -50,7 +50,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"switch__component_1wfht","start":"switch__start_1wfht","center":"switch__center_1wfht","addons":"switch__addons_1wfht","block":"switch__block_1wfht","switch":"switch__switch_1wfht","content":"switch__content_1wfht","label":"switch__label_1wfht","hint":"switch__hint_1wfht","reversed":"switch__reversed_1wfht","checked":"switch__checked_1wfht","disabled":"switch__disabled_1wfht","inactive":"switch__inactive_1wfht","focused":"switch__focused_1wfht"};
+var styles = {"component":"switch__component_ev0zo","start":"switch__start_ev0zo","center":"switch__center_ev0zo","addons":"switch__addons_ev0zo","block":"switch__block_ev0zo","switch":"switch__switch_ev0zo","content":"switch__content_ev0zo","label":"switch__label_ev0zo","hint":"switch__hint_ev0zo","reversed":"switch__reversed_ev0zo","checked":"switch__checked_ev0zo","disabled":"switch__disabled_ev0zo","inactive":"switch__inactive_ev0zo","focused":"switch__focused_ev0zo"};
 require('./index.css');
 
 var Switch = React.forwardRef(function (_a, ref) {

package/switch/esm/Component.js

@@ -42,7 +42,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"switch__component_1wfht","start":"switch__start_1wfht","center":"switch__center_1wfht","addons":"switch__addons_1wfht","block":"switch__block_1wfht","switch":"switch__switch_1wfht","content":"switch__content_1wfht","label":"switch__label_1wfht","hint":"switch__hint_1wfht","reversed":"switch__reversed_1wfht","checked":"switch__checked_1wfht","disabled":"switch__disabled_1wfht","inactive":"switch__inactive_1wfht","focused":"switch__focused_1wfht"};
+var styles = {"component":"switch__component_ev0zo","start":"switch__start_ev0zo","center":"switch__center_ev0zo","addons":"switch__addons_ev0zo","block":"switch__block_ev0zo","switch":"switch__switch_ev0zo","content":"switch__content_ev0zo","label":"switch__label_ev0zo","hint":"switch__hint_ev0zo","reversed":"switch__reversed_ev0zo","checked":"switch__checked_ev0zo","disabled":"switch__disabled_ev0zo","inactive":"switch__inactive_ev0zo","focused":"switch__focused_ev0zo"};
 require('./index.css');
 
 var Switch = forwardRef(function (_a, ref) {

package/switch/esm/index.css

@@ -49,7 +49,7 @@
     /* inactive */
     --switch-inactive-color: var(--color-light-border-secondary-inverted);
 }
-.switch__component_1wfht {
+.switch__component_ev0zo {
     display: inline-flex;
     align-items: flex-start;
     margin: 0;
@@ -58,25 +58,25 @@
     cursor: pointer;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.switch__component_1wfht input {
+.switch__component_ev0zo input {
     opacity: 0;
     position: absolute;
 }
-.switch__start_1wfht {
+.switch__start_ev0zo {
     align-items: flex-start;
 }
-.switch__center_1wfht {
+.switch__center_ev0zo {
     align-items: center;
 }
-.switch__addons_1wfht {
+.switch__addons_ev0zo {
     margin-left: auto;
     padding-left: var(--gap-m);
     line-height: 24px;
 }
-.switch__block_1wfht {
+.switch__block_ev0zo {
     width: 100%;
 }
-.switch__switch_1wfht {
+.switch__switch_ev0zo {
     position: relative;
     border-radius: var(--border-radius-xl);
     width: 36px;
@@ -88,7 +88,7 @@
     transition: background-color 0.2s ease, border-color 0.2s ease;
     box-sizing: border-box;
 }
-.switch__switch_1wfht:before {
+.switch__switch_ev0zo:before {
     content: '';
     position: absolute;
     top: 0;
@@ -101,21 +101,21 @@
     box-sizing: border-box;
     transition: transform 0.2s ease;
 }
-.switch__content_1wfht {
+.switch__content_ev0zo {
     margin-left: var(--gap-s);
     flex-grow: 1;
 }
-.switch__label_1wfht {
+.switch__label_ev0zo {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     display: block;
     color: var(--switch-label-color);
 }
-.switch__label_1wfht:not(:only-child) {
+.switch__label_ev0zo:not(:only-child) {
     margin-bottom: var(--gap-2xs);
 }
-.switch__hint_1wfht {
+.switch__hint_ev0zo {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
@@ -123,55 +123,55 @@
     color: var(--switch-hint-color);
 }
 /* Reversed state */
-.switch__component_1wfht.switch__reversed_1wfht {
+.switch__component_ev0zo.switch__reversed_ev0zo {
     flex-direction: row-reverse;
 }
-.switch__reversed_1wfht .switch__content_1wfht {
+.switch__reversed_ev0zo .switch__content_ev0zo {
     margin-right: var(--gap-m);
     margin-left: 0;
 }
-.switch__reversed_1wfht .switch__addons_1wfht {
+.switch__reversed_ev0zo .switch__addons_ev0zo {
     margin-left: 0;
     padding-left: 0;
     margin-right: auto;
     padding-right: var(--gap-m);
 }
 /* Checked state */
-.switch__checked_1wfht .switch__switch_1wfht {
+.switch__checked_ev0zo .switch__switch_ev0zo {
     background-color: var(--switch-checked-bg-color);
     border-color: var(--switch-checked-border-color);
 }
-.switch__checked_1wfht .switch__switch_1wfht:before {
+.switch__checked_ev0zo .switch__switch_ev0zo:before {
     /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
     transform: translateX(16px);
 }
 /* Disabled state */
-.switch__disabled_1wfht {
+.switch__disabled_ev0zo {
     cursor: var(--disabled-cursor);
 }
-.switch__disabled_1wfht .switch__switch_1wfht {
+.switch__disabled_ev0zo .switch__switch_ev0zo {
     background-color: var(--switch-disabled-bg-color);
     border-color: var(--switch-disabled-border-color);
 }
-.switch__disabled_1wfht .switch__label_1wfht {
+.switch__disabled_ev0zo .switch__label_ev0zo {
     color: var(--switch-disabled-color);
 }
-.switch__disabled_1wfht .switch__hint_1wfht {
+.switch__disabled_ev0zo .switch__hint_ev0zo {
     color: var(--switch-disabled-color);
 }
 /* Inactive */
-.switch__inactive_1wfht {
+.switch__inactive_ev0zo {
     cursor: var(--disabled-cursor);
 }
-.switch__inactive_1wfht .switch__switch_1wfht {
+.switch__inactive_ev0zo .switch__switch_ev0zo {
     background-color: var(--switch-disabled-bg-color);
     border-color: var(--switch-disabled-border-color)
 }
-.switch__inactive_1wfht .switch__switch_1wfht:before {
+.switch__inactive_ev0zo .switch__switch_ev0zo:before {
         background-color: var(--switch-inactive-color);
     }
 /* Focused state */
-.switch__focused_1wfht .switch__switch_1wfht {
+.switch__focused_ev0zo .switch__switch_ev0zo {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }