@alfalab/core-components 27.13.0 → 27.15.0

package/pure-input/modern/index.css

@@ -381,7 +381,9 @@
     --color-dark-border-underline-inverted-alpha-30: rgba(182, 188, 195, 0.3);
     --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
     --color-dark-graphic-accent-shade-15: rgb(203, 42, 31);
+    --color-dark-graphic-accent-tint-7: rgb(240, 63, 51);
     --color-dark-graphic-accent-tint-10: rgb(241, 70, 58);
+    --color-dark-graphic-accent-tint-15: rgb(241, 80, 69);
     --color-dark-graphic-accent-tint-30: rgb(244, 111, 102);
     --color-dark-graphic-negative-alpha-30: rgba(241, 80, 69, 0.3);
     --color-dark-graphic-negative-shade-20: rgb(193, 64, 55);
@@ -515,7 +517,9 @@
     --color-light-border-underline-inverted-alpha-30: rgba(109, 121, 134, 0.3);
     --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
     --color-light-graphic-accent-tint-15: rgb(241, 80, 69);
+    --color-light-graphic-accent-shade-7: rgb(222, 46, 33);
     --color-light-graphic-accent-shade-10: rgb(215, 44, 32);
+    --color-light-graphic-accent-shade-15: rgb(203, 42, 31);
     --color-light-graphic-accent-shade-30: rgb(167, 34, 25);
     --color-light-graphic-negative-alpha-30: rgba(241, 80, 69, 0.3);
     --color-light-graphic-negative-tint-20: rgb(244, 115, 106);
@@ -740,51 +744,51 @@
     /* error */
     --input-error-color: var(--color-light-text-primary);
 }
-.pure-input__input_1l0mz {
+.pure-input__input_1eb4h {
     color: var(--input-color);
     caret-color: var(--input-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.pure-input__input_1l0mz:-webkit-autofill {
+.pure-input__input_1eb4h:-webkit-autofill {
     -webkit-text-fill-color: var(--input-color);
 }
-.pure-input__input_1l0mz::placeholder {
+.pure-input__input_1eb4h::placeholder {
     color: var(--input-placeholder-color);
 }
-.pure-input__hasLabel_1l0mz::placeholder {
+.pure-input__hasLabel_1eb4h::placeholder {
     color: var(--input-with-label-placeholder-color);
 }
-.pure-input__clearIcon_1l0mz {
+.pure-input__clearIcon_1eb4h {
     color: var(--color-light-graphic-primary);
 }
-.pure-input__errorIcon_1l0mz {
+.pure-input__errorIcon_1eb4h {
     background-image: var(--input-error-icon);
 }
-.pure-input__successIcon_1l0mz {
+.pure-input__successIcon_1eb4h {
     background-image: var(--input-success-icon);
 }
 /* READ-ONLY STATE */
-.pure-input__input_1l0mz:read-only {
+.pure-input__input_1eb4h:read-only {
     color: var(--input-read-only-color)
 }
-.pure-input__input_1l0mz:read-only:focus::placeholder {
+.pure-input__input_1eb4h:read-only:focus::placeholder {
         color: var(--input-placeholder-color);
     }
 /* DISABLED STATE */
-.pure-input__input_1l0mz:disabled {
+.pure-input__input_1eb4h:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
 }
 /* FOCUS STATE */
-.pure-input__input_1l0mz:focus::placeholder {
+.pure-input__input_1eb4h:focus::placeholder {
     color: var(--input-focus-placeholder-color);
 }
 /* ERROR STATE */
-.pure-input__error_1l0mz {
+.pure-input__error_1eb4h {
     color: var(--input-error-color);
     caret-color: var(--input-error-color);
 }
-.pure-input__component_1l0mz {
+.pure-input__component_1eb4h {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -805,56 +809,56 @@
     -webkit-appearance: none;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.pure-input__component_1l0mz::placeholder {
+.pure-input__component_1eb4h::placeholder {
     text-overflow: ellipsis;
     color: var(--input-placeholder-color);
     transition: color 0.2s ease;
 }
-.pure-input__block_1l0mz {
+.pure-input__block_1eb4h {
     width: 100%;
 }
 /* SIZE */
-.pure-input__s_1l0mz {
+.pure-input__s_1eb4h {
     height: var(--form-control-s-min-height);
 }
-.pure-input__m_1l0mz {
+.pure-input__m_1eb4h {
     height: var(--form-control-m-min-height);
 }
-.pure-input__l_1l0mz {
+.pure-input__l_1eb4h {
     height: var(--form-control-l-min-height);
     padding: var(--form-control-l-paddings);
     padding-top: 1px;
 }
-.pure-input__xl_1l0mz {
+.pure-input__xl_1eb4h {
     height: var(--form-control-xl-min-height);
     padding: var(--form-control-l-paddings);
     padding-top: 1px;
 }
 /* DISABLED STATE */
-.pure-input__component_1l0mz:disabled {
+.pure-input__component_1eb4h:disabled {
     cursor: var(--disabled-cursor);
     color: var(--input-disabled-color);
     border-bottom: var(--form-control-disabled-border-bottom);
     background-color: var(--form-control-disabled-bg-color);
 }
 /* FOCUS STATE */
-.pure-input__component_1l0mz:not(:disabled):focus {
+.pure-input__component_1eb4h:not(:disabled):focus {
     border-bottom: var(--form-control-focus-border-bottom);
     box-shadow: var(--form-control-focus-shadow)
 }
-.pure-input__component_1l0mz:not(:disabled):focus::placeholder {
+.pure-input__component_1eb4h:not(:disabled):focus::placeholder {
         color: var(--input-focus-placeholder-color);
     }
-.pure-input__focusVisible_1l0mz {
+.pure-input__focusVisible_1eb4h {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
 /* HOVER STATE */
-.pure-input__component_1l0mz:not(:disabled):hover {
+.pure-input__component_1eb4h:not(:disabled):hover {
     background-color: var(--form-control-hover-bg-color);
 }
 /* IE hide clear */
-.pure-input__component_1l0mz::-ms-clear {
+.pure-input__component_1eb4h::-ms-clear {
     display: none;
     width: 0;
     height: 0;

package/radio/Component.js

@@ -50,7 +50,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"container":"radio__container_yf153","checked":"radio__checked_yf153","disabled":"radio__disabled_yf153","inactive":"radio__inactive_yf153","circle":"radio__circle_yf153","label":"radio__label_yf153","hint":"radio__hint_yf153","focused":"radio__focused_yf153","s":"radio__s_yf153","content":"radio__content_yf153","start":"radio__start_yf153","center":"radio__center_yf153","addons":"radio__addons_yf153","block":"radio__block_yf153"};
+var styles = {"container":"radio__container_u6sam","checked":"radio__checked_u6sam","disabled":"radio__disabled_u6sam","inactive":"radio__inactive_u6sam","circle":"radio__circle_u6sam","label":"radio__label_u6sam","hint":"radio__hint_u6sam","focused":"radio__focused_u6sam","s":"radio__s_u6sam","content":"radio__content_u6sam","start":"radio__start_u6sam","center":"radio__center_u6sam","addons":"radio__addons_u6sam","block":"radio__block_u6sam"};
 require('./index.css');
 
 var Radio = React.forwardRef(function (_a, ref) {

package/radio/cssm/index.module.css

@@ -380,7 +380,9 @@
     --color-dark-border-underline-inverted-alpha-30: rgba(182, 188, 195, 0.3);
     --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
     --color-dark-graphic-accent-shade-15: rgb(203, 42, 31);
+    --color-dark-graphic-accent-tint-7: rgb(240, 63, 51);
     --color-dark-graphic-accent-tint-10: rgb(241, 70, 58);
+    --color-dark-graphic-accent-tint-15: rgb(241, 80, 69);
     --color-dark-graphic-accent-tint-30: rgb(244, 111, 102);
     --color-dark-graphic-negative-alpha-30: rgba(241, 80, 69, 0.3);
     --color-dark-graphic-negative-shade-20: rgb(193, 64, 55);
@@ -514,7 +516,9 @@
     --color-light-border-underline-inverted-alpha-30: rgba(109, 121, 134, 0.3);
     --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
     --color-light-graphic-accent-tint-15: rgb(241, 80, 69);
+    --color-light-graphic-accent-shade-7: rgb(222, 46, 33);
     --color-light-graphic-accent-shade-10: rgb(215, 44, 32);
+    --color-light-graphic-accent-shade-15: rgb(203, 42, 31);
     --color-light-graphic-accent-shade-30: rgb(167, 34, 25);
     --color-light-graphic-negative-alpha-30: rgba(241, 80, 69, 0.3);
     --color-light-graphic-negative-tint-20: rgb(244, 115, 106);

package/radio/esm/Component.js

@@ -42,7 +42,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"container":"radio__container_yf153","checked":"radio__checked_yf153","disabled":"radio__disabled_yf153","inactive":"radio__inactive_yf153","circle":"radio__circle_yf153","label":"radio__label_yf153","hint":"radio__hint_yf153","focused":"radio__focused_yf153","s":"radio__s_yf153","content":"radio__content_yf153","start":"radio__start_yf153","center":"radio__center_yf153","addons":"radio__addons_yf153","block":"radio__block_yf153"};
+var styles = {"container":"radio__container_u6sam","checked":"radio__checked_u6sam","disabled":"radio__disabled_u6sam","inactive":"radio__inactive_u6sam","circle":"radio__circle_u6sam","label":"radio__label_u6sam","hint":"radio__hint_u6sam","focused":"radio__focused_u6sam","s":"radio__s_u6sam","content":"radio__content_u6sam","start":"radio__start_u6sam","center":"radio__center_u6sam","addons":"radio__addons_u6sam","block":"radio__block_u6sam"};
 require('./index.css');
 
 var Radio = forwardRef(function (_a, ref) {

package/radio/esm/index.css

@@ -381,7 +381,9 @@
     --color-dark-border-underline-inverted-alpha-30: rgba(182, 188, 195, 0.3);
     --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
     --color-dark-graphic-accent-shade-15: rgb(203, 42, 31);
+    --color-dark-graphic-accent-tint-7: rgb(240, 63, 51);
     --color-dark-graphic-accent-tint-10: rgb(241, 70, 58);
+    --color-dark-graphic-accent-tint-15: rgb(241, 80, 69);
     --color-dark-graphic-accent-tint-30: rgb(244, 111, 102);
     --color-dark-graphic-negative-alpha-30: rgba(241, 80, 69, 0.3);
     --color-dark-graphic-negative-shade-20: rgb(193, 64, 55);
@@ -515,7 +517,9 @@
     --color-light-border-underline-inverted-alpha-30: rgba(109, 121, 134, 0.3);
     --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
     --color-light-graphic-accent-tint-15: rgb(241, 80, 69);
+    --color-light-graphic-accent-shade-7: rgb(222, 46, 33);
     --color-light-graphic-accent-shade-10: rgb(215, 44, 32);
+    --color-light-graphic-accent-shade-15: rgb(203, 42, 31);
     --color-light-graphic-accent-shade-30: rgb(167, 34, 25);
     --color-light-graphic-negative-alpha-30: rgba(241, 80, 69, 0.3);
     --color-light-graphic-negative-tint-20: rgb(244, 115, 106);
@@ -758,77 +762,77 @@
     /* icon */
     --radio-icon-color: var(--color-light-bg-primary);
 }
-.radio__container_yf153 {
+.radio__container_u6sam {
     display: inline-flex;
     align-items: flex-start;
     cursor: pointer
 }
-.radio__container_yf153:not(.radio__checked_yf153):not(.radio__disabled_yf153):not(.radio__inactive_yf153) .radio__circle_yf153 {
+.radio__container_u6sam:not(.radio__checked_u6sam):not(.radio__disabled_u6sam):not(.radio__inactive_u6sam) .radio__circle_u6sam {
             background-color: var(--radio-bg-color);
             border: 1.5px solid var(--radio-border-color);
         }
-.radio__container_yf153:not(.radio__checked_yf153):not(.radio__disabled_yf153):not(.radio__inactive_yf153):hover:not(:active) .radio__circle_yf153 {
+.radio__container_u6sam:not(.radio__checked_u6sam):not(.radio__disabled_u6sam):not(.radio__inactive_u6sam):hover:not(:active) .radio__circle_u6sam {
             background-color: var(--radio-hover-bg-color);
             border-color: var(--radio-hover-border-color);
         }
-.radio__container_yf153:not(.radio__checked_yf153):not(.radio__disabled_yf153):not(.radio__inactive_yf153):active .radio__circle_yf153 {
+.radio__container_u6sam:not(.radio__checked_u6sam):not(.radio__disabled_u6sam):not(.radio__inactive_u6sam):active .radio__circle_u6sam {
             background-color: var(--radio-active-bg-color);
             border-color: var(--radio-active-border-color);
         }
-.radio__container_yf153.radio__disabled_yf153 {
+.radio__container_u6sam.radio__disabled_u6sam {
         cursor: var(--disabled-cursor)
     }
-.radio__container_yf153.radio__disabled_yf153 .radio__circle_yf153 {
+.radio__container_u6sam.radio__disabled_u6sam .radio__circle_u6sam {
             background-color: var(--radio-disabled-bg-color);
             border: 1.5px solid var(--radio-disabled-border-color);
         }
-.radio__container_yf153.radio__disabled_yf153 .radio__label_yf153 {
+.radio__container_u6sam.radio__disabled_u6sam .radio__label_u6sam {
             color: var(--radio-disabled-color);
         }
-.radio__container_yf153.radio__disabled_yf153 .radio__hint_yf153 {
+.radio__container_u6sam.radio__disabled_u6sam .radio__hint_u6sam {
             color: var(--radio-disabled-color);
         }
-.radio__container_yf153.radio__inactive_yf153 {
+.radio__container_u6sam.radio__inactive_u6sam {
         cursor: var(--disabled-cursor)
     }
-.radio__container_yf153.radio__inactive_yf153 .radio__circle_yf153 {
+.radio__container_u6sam.radio__inactive_u6sam .radio__circle_u6sam {
             background-color: var(--radio-checked-disabled-bg-color);
             border: 1px solid var(--radio-inactive-border-color);
         }
-.radio__container_yf153.radio__inactive_yf153.radio__checked_yf153 .radio__circle_yf153:before {
+.radio__container_u6sam.radio__inactive_u6sam.radio__checked_u6sam .radio__circle_u6sam:before {
             background-color: var(--radio-checked-inactive-color);
         }
-.radio__container_yf153.radio__checked_yf153:not(:active) .radio__circle_yf153:before,
-    .radio__container_yf153.radio__checked_yf153.radio__disabled_yf153:active .radio__circle_yf153:before {
+.radio__container_u6sam.radio__checked_u6sam:not(:active) .radio__circle_u6sam:before,
+    .radio__container_u6sam.radio__checked_u6sam.radio__disabled_u6sam:active .radio__circle_u6sam:before {
         opacity: 1;
     }
-.radio__container_yf153.radio__checked_yf153 .radio__circle_yf153 {
+.radio__container_u6sam.radio__checked_u6sam .radio__circle_u6sam {
             background-color: var(--radio-checked-bg-color);
             border: 1.5px solid var(--radio-checked-border-color);
         }
-.radio__container_yf153.radio__checked_yf153:hover .radio__circle_yf153 {
+.radio__container_u6sam.radio__checked_u6sam:hover .radio__circle_u6sam {
             background-color: var(--radio-checked-hover-bg-color);
             border-color: var(--radio-checked-hover-border-color);
         }
-.radio__container_yf153.radio__checked_yf153:active .radio__circle_yf153 {
+.radio__container_u6sam.radio__checked_u6sam:active .radio__circle_u6sam {
             background-color: var(--radio-checked-active-bg-color);
             border-color: var(--radio-checked-active-border-color);
         }
-.radio__container_yf153.radio__focused_yf153 .radio__circle_yf153 {
+.radio__container_u6sam.radio__focused_u6sam .radio__circle_u6sam {
         outline: 2px solid var(--focus-color);
         outline-offset: 2px;
     }
-.radio__container_yf153.radio__disabled_yf153.radio__checked_yf153 .radio__circle_yf153,
-    .radio__container_yf153.radio__inactive_yf153.radio__checked_yf153 .radio__circle_yf153 {
+.radio__container_u6sam.radio__disabled_u6sam.radio__checked_u6sam .radio__circle_u6sam,
+    .radio__container_u6sam.radio__inactive_u6sam.radio__checked_u6sam .radio__circle_u6sam {
         background-color: var(--radio-checked-disabled-bg-color);
         border-color: var(--radio-checked-disabled-border-color);
     }
-.radio__container_yf153 input {
+.radio__container_u6sam input {
         position: absolute;
         z-index: -1;
         opacity: 0;
     }
-.radio__circle_yf153 {
+.radio__circle_u6sam {
     flex-shrink: 0;
     width: 20px;
     height: 20px;
@@ -838,7 +842,7 @@
     margin: var(--gap-3xs);
     transition: background-color 0.2s ease, border 0.2s ease
 }
-.radio__circle_yf153:before {
+.radio__circle_u6sam:before {
         content: '';
         background-color: var(--radio-icon-color);
         position: absolute;
@@ -853,40 +857,40 @@
         transition: opacity 0.2s ease;
         opacity: 0;
     }
-.radio__s_yf153 .radio__circle_yf153 {
+.radio__s_u6sam .radio__circle_u6sam {
     width: 16px;
     height: 16px;
     margin: var(--gap-2xs) var(--gap-3xs);
 }
-.radio__content_yf153 {
+.radio__content_u6sam {
     display: flex;
     flex-direction: column;
     margin-left: var(--gap-s);
 }
-.radio__s_yf153 .radio__content_yf153 {
+.radio__s_u6sam .radio__content_u6sam {
     margin-left: var(--gap-xs);
 }
-.radio__start_yf153 {
+.radio__start_u6sam {
     align-items: flex-start;
 }
-.radio__center_yf153 {
+.radio__center_u6sam {
     align-items: center;
 }
-.radio__addons_yf153 {
+.radio__addons_u6sam {
     margin-left: auto;
     padding-left: var(--gap-m);
     line-height: 24px;
 }
-.radio__block_yf153 {
+.radio__block_u6sam {
     width: 100%;
 }
-.radio__label_yf153 {
+.radio__label_u6sam {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     color: var(--radio-label-color);
 }
-.radio__hint_yf153 {
+.radio__hint_u6sam {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;

package/radio/index.css

@@ -381,7 +381,9 @@
     --color-dark-border-underline-inverted-alpha-30: rgba(182, 188, 195, 0.3);
     --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
     --color-dark-graphic-accent-shade-15: rgb(203, 42, 31);
+    --color-dark-graphic-accent-tint-7: rgb(240, 63, 51);
     --color-dark-graphic-accent-tint-10: rgb(241, 70, 58);
+    --color-dark-graphic-accent-tint-15: rgb(241, 80, 69);
     --color-dark-graphic-accent-tint-30: rgb(244, 111, 102);
     --color-dark-graphic-negative-alpha-30: rgba(241, 80, 69, 0.3);
     --color-dark-graphic-negative-shade-20: rgb(193, 64, 55);
@@ -515,7 +517,9 @@
     --color-light-border-underline-inverted-alpha-30: rgba(109, 121, 134, 0.3);
     --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
     --color-light-graphic-accent-tint-15: rgb(241, 80, 69);
+    --color-light-graphic-accent-shade-7: rgb(222, 46, 33);
     --color-light-graphic-accent-shade-10: rgb(215, 44, 32);
+    --color-light-graphic-accent-shade-15: rgb(203, 42, 31);
     --color-light-graphic-accent-shade-30: rgb(167, 34, 25);
     --color-light-graphic-negative-alpha-30: rgba(241, 80, 69, 0.3);
     --color-light-graphic-negative-tint-20: rgb(244, 115, 106);
@@ -758,77 +762,77 @@
     /* icon */
     --radio-icon-color: var(--color-light-bg-primary);
 }
-.radio__container_yf153 {
+.radio__container_u6sam {
     display: inline-flex;
     align-items: flex-start;
     cursor: pointer
 }
-.radio__container_yf153:not(.radio__checked_yf153):not(.radio__disabled_yf153):not(.radio__inactive_yf153) .radio__circle_yf153 {
+.radio__container_u6sam:not(.radio__checked_u6sam):not(.radio__disabled_u6sam):not(.radio__inactive_u6sam) .radio__circle_u6sam {
             background-color: var(--radio-bg-color);
             border: 1.5px solid var(--radio-border-color);
         }
-.radio__container_yf153:not(.radio__checked_yf153):not(.radio__disabled_yf153):not(.radio__inactive_yf153):hover:not(:active) .radio__circle_yf153 {
+.radio__container_u6sam:not(.radio__checked_u6sam):not(.radio__disabled_u6sam):not(.radio__inactive_u6sam):hover:not(:active) .radio__circle_u6sam {
             background-color: var(--radio-hover-bg-color);
             border-color: var(--radio-hover-border-color);
         }
-.radio__container_yf153:not(.radio__checked_yf153):not(.radio__disabled_yf153):not(.radio__inactive_yf153):active .radio__circle_yf153 {
+.radio__container_u6sam:not(.radio__checked_u6sam):not(.radio__disabled_u6sam):not(.radio__inactive_u6sam):active .radio__circle_u6sam {
             background-color: var(--radio-active-bg-color);
             border-color: var(--radio-active-border-color);
         }
-.radio__container_yf153.radio__disabled_yf153 {
+.radio__container_u6sam.radio__disabled_u6sam {
         cursor: var(--disabled-cursor)
     }
-.radio__container_yf153.radio__disabled_yf153 .radio__circle_yf153 {
+.radio__container_u6sam.radio__disabled_u6sam .radio__circle_u6sam {
             background-color: var(--radio-disabled-bg-color);
             border: 1.5px solid var(--radio-disabled-border-color);
         }
-.radio__container_yf153.radio__disabled_yf153 .radio__label_yf153 {
+.radio__container_u6sam.radio__disabled_u6sam .radio__label_u6sam {
             color: var(--radio-disabled-color);
         }
-.radio__container_yf153.radio__disabled_yf153 .radio__hint_yf153 {
+.radio__container_u6sam.radio__disabled_u6sam .radio__hint_u6sam {
             color: var(--radio-disabled-color);
         }
-.radio__container_yf153.radio__inactive_yf153 {
+.radio__container_u6sam.radio__inactive_u6sam {
         cursor: var(--disabled-cursor)
     }
-.radio__container_yf153.radio__inactive_yf153 .radio__circle_yf153 {
+.radio__container_u6sam.radio__inactive_u6sam .radio__circle_u6sam {
             background-color: var(--radio-checked-disabled-bg-color);
             border: 1px solid var(--radio-inactive-border-color);
         }
-.radio__container_yf153.radio__inactive_yf153.radio__checked_yf153 .radio__circle_yf153:before {
+.radio__container_u6sam.radio__inactive_u6sam.radio__checked_u6sam .radio__circle_u6sam:before {
             background-color: var(--radio-checked-inactive-color);
         }
-.radio__container_yf153.radio__checked_yf153:not(:active) .radio__circle_yf153:before,
-    .radio__container_yf153.radio__checked_yf153.radio__disabled_yf153:active .radio__circle_yf153:before {
+.radio__container_u6sam.radio__checked_u6sam:not(:active) .radio__circle_u6sam:before,
+    .radio__container_u6sam.radio__checked_u6sam.radio__disabled_u6sam:active .radio__circle_u6sam:before {
         opacity: 1;
     }
-.radio__container_yf153.radio__checked_yf153 .radio__circle_yf153 {
+.radio__container_u6sam.radio__checked_u6sam .radio__circle_u6sam {
             background-color: var(--radio-checked-bg-color);
             border: 1.5px solid var(--radio-checked-border-color);
         }
-.radio__container_yf153.radio__checked_yf153:hover .radio__circle_yf153 {
+.radio__container_u6sam.radio__checked_u6sam:hover .radio__circle_u6sam {
             background-color: var(--radio-checked-hover-bg-color);
             border-color: var(--radio-checked-hover-border-color);
         }
-.radio__container_yf153.radio__checked_yf153:active .radio__circle_yf153 {
+.radio__container_u6sam.radio__checked_u6sam:active .radio__circle_u6sam {
             background-color: var(--radio-checked-active-bg-color);
             border-color: var(--radio-checked-active-border-color);
         }
-.radio__container_yf153.radio__focused_yf153 .radio__circle_yf153 {
+.radio__container_u6sam.radio__focused_u6sam .radio__circle_u6sam {
         outline: 2px solid var(--focus-color);
         outline-offset: 2px;
     }
-.radio__container_yf153.radio__disabled_yf153.radio__checked_yf153 .radio__circle_yf153,
-    .radio__container_yf153.radio__inactive_yf153.radio__checked_yf153 .radio__circle_yf153 {
+.radio__container_u6sam.radio__disabled_u6sam.radio__checked_u6sam .radio__circle_u6sam,
+    .radio__container_u6sam.radio__inactive_u6sam.radio__checked_u6sam .radio__circle_u6sam {
         background-color: var(--radio-checked-disabled-bg-color);
         border-color: var(--radio-checked-disabled-border-color);
     }
-.radio__container_yf153 input {
+.radio__container_u6sam input {
         position: absolute;
         z-index: -1;
         opacity: 0;
     }
-.radio__circle_yf153 {
+.radio__circle_u6sam {
     flex-shrink: 0;
     width: 20px;
     height: 20px;
@@ -838,7 +842,7 @@
     margin: var(--gap-3xs);
     transition: background-color 0.2s ease, border 0.2s ease
 }
-.radio__circle_yf153:before {
+.radio__circle_u6sam:before {
         content: '';
         background-color: var(--radio-icon-color);
         position: absolute;
@@ -853,40 +857,40 @@
         transition: opacity 0.2s ease;
         opacity: 0;
     }
-.radio__s_yf153 .radio__circle_yf153 {
+.radio__s_u6sam .radio__circle_u6sam {
     width: 16px;
     height: 16px;
     margin: var(--gap-2xs) var(--gap-3xs);
 }
-.radio__content_yf153 {
+.radio__content_u6sam {
     display: flex;
     flex-direction: column;
     margin-left: var(--gap-s);
 }
-.radio__s_yf153 .radio__content_yf153 {
+.radio__s_u6sam .radio__content_u6sam {
     margin-left: var(--gap-xs);
 }
-.radio__start_yf153 {
+.radio__start_u6sam {
     align-items: flex-start;
 }
-.radio__center_yf153 {
+.radio__center_u6sam {
     align-items: center;
 }
-.radio__addons_yf153 {
+.radio__addons_u6sam {
     margin-left: auto;
     padding-left: var(--gap-m);
     line-height: 24px;
 }
-.radio__block_yf153 {
+.radio__block_u6sam {
     width: 100%;
 }
-.radio__label_yf153 {
+.radio__label_u6sam {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     color: var(--radio-label-color);
 }
-.radio__hint_yf153 {
+.radio__hint_u6sam {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;

package/radio/modern/Component.js

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import mergeRefs from 'react-merge-refs';
 import { useFocus } from '@alfalab/hooks';
 
-var styles = {"container":"radio__container_yf153","checked":"radio__checked_yf153","disabled":"radio__disabled_yf153","inactive":"radio__inactive_yf153","circle":"radio__circle_yf153","label":"radio__label_yf153","hint":"radio__hint_yf153","focused":"radio__focused_yf153","s":"radio__s_yf153","content":"radio__content_yf153","start":"radio__start_yf153","center":"radio__center_yf153","addons":"radio__addons_yf153","block":"radio__block_yf153"};
+var styles = {"container":"radio__container_u6sam","checked":"radio__checked_u6sam","disabled":"radio__disabled_u6sam","inactive":"radio__inactive_u6sam","circle":"radio__circle_u6sam","label":"radio__label_u6sam","hint":"radio__hint_u6sam","focused":"radio__focused_u6sam","s":"radio__s_u6sam","content":"radio__content_u6sam","start":"radio__start_u6sam","center":"radio__center_u6sam","addons":"radio__addons_u6sam","block":"radio__block_u6sam"};
 require('./index.css');
 
 const Radio = forwardRef(({ onChange, className, circleClassName, contentClassName, name, disabled, inactive, dataTestId, label, checked, hint, size = 's', align = 'start', addons, block, ...restProps }, ref) => {