@alfalab/core-components 46.0.0-beta.7 → 46.1.0-beta.0

package/badge/cssm/index.module.css

@@ -2,17 +2,17 @@
 } /* deprecated */ :root {
     --color-light-accent-primary: #ef3124;
     --color-light-neutral-0: #fff;
-    --color-light-neutral-1500: #121213;
-    --color-light-neutral-1500-inverted: #fff;
     --color-light-neutral-500: #babbc2;
     --color-light-neutral-700: #898991;
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
+    --color-light-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
     --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
     --color-light-status-attention: #fa9313;
     --color-light-status-info: #2288fa;
     --color-light-status-negative: #ff4837;
     --color-light-status-positive: #0cc44d;
     --color-light-text-primary: rgba(3, 3, 6, 0.88);
-    --color-static-neutral-1500-inverted: #fff;
+    --color-static-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
     --color-static-text-primary-inverted: rgba(255, 255, 255, 0.94); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
@@ -35,7 +35,7 @@
 } :root {
 } :root {
 } :root {
-    --badge-icon-bg-color: var(--color-light-neutral-1500-inverted);
+    --badge-icon-bg-color: var(--color-light-neutral-translucent-1300-inverted);
 } .wrapper {
     display: inline-flex;
     align-items: center;
@@ -145,8 +145,8 @@
         color: var(--color-light-neutral-700);
         background-color: var(--color-light-neutral-700);
     } .icon.primary {
-        color: var(--color-light-neutral-1500);
-        background-color: var(--color-light-neutral-1500);
+        color: var(--color-light-neutral-translucent-1300);
+        background-color: var(--color-light-neutral-translucent-1300);
     } .icon.s {
     width: 16px;
     height: 16px;
@@ -160,9 +160,9 @@
     border-radius: var(--border-radius-pill);
     content: '';
 } .graphic-static-light.icon:before {
-    background-color: var(--color-static-neutral-1500-inverted);
+    background-color: var(--color-static-neutral-translucent-1300-inverted);
 } .graphic-primary.icon:before {
-    background-color: var(--color-light-neutral-1500);
+    background-color: var(--color-light-neutral-translucent-1300);
 } .outline {
     background-color: var(--badge-icon-bg-color);
 } .outlineColor {
@@ -180,7 +180,7 @@
     } .outlineColor.secondary {
         background-color: var(--color-light-neutral-700);
     } .outlineColor.primary {
-        background-color: var(--color-light-neutral-1500);
+        background-color: var(--color-light-neutral-translucent-1300);
     } .dot {
     width: 8px;
     height: 8px;

package/badge/esm/index.css

@@ -3,17 +3,17 @@
 } /* deprecated */ :root {
     --color-light-accent-primary: #ef3124;
     --color-light-neutral-0: #fff;
-    --color-light-neutral-1500: #121213;
-    --color-light-neutral-1500-inverted: #fff;
     --color-light-neutral-500: #babbc2;
     --color-light-neutral-700: #898991;
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
+    --color-light-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
     --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
     --color-light-status-attention: #fa9313;
     --color-light-status-info: #2288fa;
     --color-light-status-negative: #ff4837;
     --color-light-status-positive: #0cc44d;
     --color-light-text-primary: rgba(3, 3, 6, 0.88);
-    --color-static-neutral-1500-inverted: #fff;
+    --color-static-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
     --color-static-text-primary-inverted: rgba(255, 255, 255, 0.94); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
@@ -36,7 +36,7 @@
 } :root {
 } :root {
 } :root {
-    --badge-icon-bg-color: var(--color-light-neutral-1500-inverted);
+    --badge-icon-bg-color: var(--color-light-neutral-translucent-1300-inverted);
 } .badge__wrapper_1x6bo {
     display: inline-flex;
     align-items: center;
@@ -146,8 +146,8 @@
         color: var(--color-light-neutral-700);
         background-color: var(--color-light-neutral-700);
     } .badge__icon_1x6bo.badge__primary_1x6bo {
-        color: var(--color-light-neutral-1500);
-        background-color: var(--color-light-neutral-1500);
+        color: var(--color-light-neutral-translucent-1300);
+        background-color: var(--color-light-neutral-translucent-1300);
     } .badge__icon_1x6bo.badge__s_1x6bo {
     width: 16px;
     height: 16px;
@@ -161,9 +161,9 @@
     border-radius: var(--border-radius-pill);
     content: '';
 } .badge__graphic-static-light_1x6bo.badge__icon_1x6bo:before {
-    background-color: var(--color-static-neutral-1500-inverted);
+    background-color: var(--color-static-neutral-translucent-1300-inverted);
 } .badge__graphic-primary_1x6bo.badge__icon_1x6bo:before {
-    background-color: var(--color-light-neutral-1500);
+    background-color: var(--color-light-neutral-translucent-1300);
 } .badge__outline_1x6bo {
     background-color: var(--badge-icon-bg-color);
 } .badge__outlineColor_1x6bo {
@@ -181,7 +181,7 @@
     } .badge__outlineColor_1x6bo.badge__secondary_1x6bo {
         background-color: var(--color-light-neutral-700);
     } .badge__outlineColor_1x6bo.badge__primary_1x6bo {
-        background-color: var(--color-light-neutral-1500);
+        background-color: var(--color-light-neutral-translucent-1300);
     } .badge__dot_1x6bo {
     width: 8px;
     height: 8px;

package/badge/index.css

@@ -3,17 +3,17 @@
 } /* deprecated */ :root {
     --color-light-accent-primary: #ef3124;
     --color-light-neutral-0: #fff;
-    --color-light-neutral-1500: #121213;
-    --color-light-neutral-1500-inverted: #fff;
     --color-light-neutral-500: #babbc2;
     --color-light-neutral-700: #898991;
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
+    --color-light-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
     --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
     --color-light-status-attention: #fa9313;
     --color-light-status-info: #2288fa;
     --color-light-status-negative: #ff4837;
     --color-light-status-positive: #0cc44d;
     --color-light-text-primary: rgba(3, 3, 6, 0.88);
-    --color-static-neutral-1500-inverted: #fff;
+    --color-static-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
     --color-static-text-primary-inverted: rgba(255, 255, 255, 0.94); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
@@ -36,7 +36,7 @@
 } :root {
 } :root {
 } :root {
-    --badge-icon-bg-color: var(--color-light-neutral-1500-inverted);
+    --badge-icon-bg-color: var(--color-light-neutral-translucent-1300-inverted);
 } .badge__wrapper_1x6bo {
     display: inline-flex;
     align-items: center;
@@ -146,8 +146,8 @@
         color: var(--color-light-neutral-700);
         background-color: var(--color-light-neutral-700);
     } .badge__icon_1x6bo.badge__primary_1x6bo {
-        color: var(--color-light-neutral-1500);
-        background-color: var(--color-light-neutral-1500);
+        color: var(--color-light-neutral-translucent-1300);
+        background-color: var(--color-light-neutral-translucent-1300);
     } .badge__icon_1x6bo.badge__s_1x6bo {
     width: 16px;
     height: 16px;
@@ -161,9 +161,9 @@
     border-radius: var(--border-radius-pill);
     content: '';
 } .badge__graphic-static-light_1x6bo.badge__icon_1x6bo:before {
-    background-color: var(--color-static-neutral-1500-inverted);
+    background-color: var(--color-static-neutral-translucent-1300-inverted);
 } .badge__graphic-primary_1x6bo.badge__icon_1x6bo:before {
-    background-color: var(--color-light-neutral-1500);
+    background-color: var(--color-light-neutral-translucent-1300);
 } .badge__outline_1x6bo {
     background-color: var(--badge-icon-bg-color);
 } .badge__outlineColor_1x6bo {
@@ -181,7 +181,7 @@
     } .badge__outlineColor_1x6bo.badge__secondary_1x6bo {
         background-color: var(--color-light-neutral-700);
     } .badge__outlineColor_1x6bo.badge__primary_1x6bo {
-        background-color: var(--color-light-neutral-1500);
+        background-color: var(--color-light-neutral-translucent-1300);
     } .badge__dot_1x6bo {
     width: 8px;
     height: 8px;

package/badge/modern/index.css

@@ -3,17 +3,17 @@
 } /* deprecated */ :root {
     --color-light-accent-primary: #ef3124;
     --color-light-neutral-0: #fff;
-    --color-light-neutral-1500: #121213;
-    --color-light-neutral-1500-inverted: #fff;
     --color-light-neutral-500: #babbc2;
     --color-light-neutral-700: #898991;
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
+    --color-light-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
     --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
     --color-light-status-attention: #fa9313;
     --color-light-status-info: #2288fa;
     --color-light-status-negative: #ff4837;
     --color-light-status-positive: #0cc44d;
     --color-light-text-primary: rgba(3, 3, 6, 0.88);
-    --color-static-neutral-1500-inverted: #fff;
+    --color-static-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
     --color-static-text-primary-inverted: rgba(255, 255, 255, 0.94); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
@@ -36,7 +36,7 @@
 } :root {
 } :root {
 } :root {
-    --badge-icon-bg-color: var(--color-light-neutral-1500-inverted);
+    --badge-icon-bg-color: var(--color-light-neutral-translucent-1300-inverted);
 } .badge__wrapper_1x6bo {
     display: inline-flex;
     align-items: center;
@@ -146,8 +146,8 @@
         color: var(--color-light-neutral-700);
         background-color: var(--color-light-neutral-700);
     } .badge__icon_1x6bo.badge__primary_1x6bo {
-        color: var(--color-light-neutral-1500);
-        background-color: var(--color-light-neutral-1500);
+        color: var(--color-light-neutral-translucent-1300);
+        background-color: var(--color-light-neutral-translucent-1300);
     } .badge__icon_1x6bo.badge__s_1x6bo {
     width: 16px;
     height: 16px;
@@ -161,9 +161,9 @@
     border-radius: var(--border-radius-pill);
     content: '';
 } .badge__graphic-static-light_1x6bo.badge__icon_1x6bo:before {
-    background-color: var(--color-static-neutral-1500-inverted);
+    background-color: var(--color-static-neutral-translucent-1300-inverted);
 } .badge__graphic-primary_1x6bo.badge__icon_1x6bo:before {
-    background-color: var(--color-light-neutral-1500);
+    background-color: var(--color-light-neutral-translucent-1300);
 } .badge__outline_1x6bo {
     background-color: var(--badge-icon-bg-color);
 } .badge__outlineColor_1x6bo {
@@ -181,7 +181,7 @@
     } .badge__outlineColor_1x6bo.badge__secondary_1x6bo {
         background-color: var(--color-light-neutral-700);
     } .badge__outlineColor_1x6bo.badge__primary_1x6bo {
-        background-color: var(--color-light-neutral-1500);
+        background-color: var(--color-light-neutral-translucent-1300);
     } .badge__dot_1x6bo {
     width: 8px;
     height: 8px;

package/bank-card/cssm/index.module.css

@@ -1,6 +1,6 @@
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
-    --color-light-neutral-1500: #121213;
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
     --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
@@ -28,7 +28,7 @@
     --form-control-bg-color: transparent;
 
     /* focus */
-    --form-control-focus-border-bottom: 1px solid var(--color-light-neutral-1500);
+    --form-control-focus-border-bottom: 1px solid var(--color-light-neutral-translucent-1300);
     --form-control-focus-shadow: transparent;
 
     /* hover */
@@ -66,7 +66,7 @@
 }
     } .focused .label,
 .filled .label {
-    color: var(--color-light-neutral-1500);
+    color: var(--color-light-neutral-translucent-1300);
     transform: translateY(-19px) scale(0.6)
 } @media (max-width: 360px) { .focused .label,
 .filled .label {
@@ -81,8 +81,8 @@
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
 
-    color: var(--color-light-neutral-1500);
-    caret-color: var(--color-light-neutral-1500);
+    color: var(--color-light-neutral-translucent-1300);
+    caret-color: var(--color-light-neutral-translucent-1300);
 
     /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
     padding-left: 0 !important;
@@ -99,14 +99,14 @@
         width: auto;
         display: block
     } .bankLogo svg g {
-            fill: var(--color-light-neutral-1500);
+            fill: var(--color-light-neutral-translucent-1300);
         } .brandLogo {
     position: absolute;
     bottom: 20px;
     right: 20px
 } .brandLogo svg {
         display: block;
-        fill: var(--color-light-neutral-1500);
+        fill: var(--color-light-neutral-translucent-1300);
     } .usePhoto {
     display: block;
     margin: 0;
@@ -125,6 +125,6 @@
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
 } .usePhoto svg {
-        fill: var(--color-light-neutral-1500);
+        fill: var(--color-light-neutral-translucent-1300);
         display: block;
     }

package/bank-card/esm/index.css

@@ -1,7 +1,7 @@
 /* hash: 3w844 */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
-    --color-light-neutral-1500: #121213;
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
     --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
@@ -29,7 +29,7 @@
     --form-control-bg-color: transparent;
 
     /* focus */
-    --form-control-focus-border-bottom: 1px solid var(--color-light-neutral-1500);
+    --form-control-focus-border-bottom: 1px solid var(--color-light-neutral-translucent-1300);
     --form-control-focus-shadow: transparent;
 
     /* hover */
@@ -67,7 +67,7 @@
 }
     } .bank-card__focused_1wl4h .bank-card__label_1wl4h,
 .bank-card__filled_1wl4h .bank-card__label_1wl4h {
-    color: var(--color-light-neutral-1500);
+    color: var(--color-light-neutral-translucent-1300);
     transform: translateY(-19px) scale(0.6)
 } @media (max-width: 360px) { .bank-card__focused_1wl4h .bank-card__label_1wl4h,
 .bank-card__filled_1wl4h .bank-card__label_1wl4h {
@@ -82,8 +82,8 @@
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
 
-    color: var(--color-light-neutral-1500);
-    caret-color: var(--color-light-neutral-1500);
+    color: var(--color-light-neutral-translucent-1300);
+    caret-color: var(--color-light-neutral-translucent-1300);
 
     /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
     padding-left: 0 !important;
@@ -100,14 +100,14 @@
         width: auto;
         display: block
     } .bank-card__bankLogo_1wl4h svg g {
-            fill: var(--color-light-neutral-1500);
+            fill: var(--color-light-neutral-translucent-1300);
         } .bank-card__brandLogo_1wl4h {
     position: absolute;
     bottom: 20px;
     right: 20px
 } .bank-card__brandLogo_1wl4h svg {
         display: block;
-        fill: var(--color-light-neutral-1500);
+        fill: var(--color-light-neutral-translucent-1300);
     } .bank-card__usePhoto_1wl4h {
     display: block;
     margin: 0;
@@ -126,6 +126,6 @@
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
 } .bank-card__usePhoto_1wl4h svg {
-        fill: var(--color-light-neutral-1500);
+        fill: var(--color-light-neutral-translucent-1300);
         display: block;
     }

package/bank-card/index.css

@@ -1,7 +1,7 @@
 /* hash: 3w844 */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
-    --color-light-neutral-1500: #121213;
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
     --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
@@ -29,7 +29,7 @@
     --form-control-bg-color: transparent;
 
     /* focus */
-    --form-control-focus-border-bottom: 1px solid var(--color-light-neutral-1500);
+    --form-control-focus-border-bottom: 1px solid var(--color-light-neutral-translucent-1300);
     --form-control-focus-shadow: transparent;
 
     /* hover */
@@ -67,7 +67,7 @@
 }
     } .bank-card__focused_1wl4h .bank-card__label_1wl4h,
 .bank-card__filled_1wl4h .bank-card__label_1wl4h {
-    color: var(--color-light-neutral-1500);
+    color: var(--color-light-neutral-translucent-1300);
     transform: translateY(-19px) scale(0.6)
 } @media (max-width: 360px) { .bank-card__focused_1wl4h .bank-card__label_1wl4h,
 .bank-card__filled_1wl4h .bank-card__label_1wl4h {
@@ -82,8 +82,8 @@
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
 
-    color: var(--color-light-neutral-1500);
-    caret-color: var(--color-light-neutral-1500);
+    color: var(--color-light-neutral-translucent-1300);
+    caret-color: var(--color-light-neutral-translucent-1300);
 
     /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
     padding-left: 0 !important;
@@ -100,14 +100,14 @@
         width: auto;
         display: block
     } .bank-card__bankLogo_1wl4h svg g {
-            fill: var(--color-light-neutral-1500);
+            fill: var(--color-light-neutral-translucent-1300);
         } .bank-card__brandLogo_1wl4h {
     position: absolute;
     bottom: 20px;
     right: 20px
 } .bank-card__brandLogo_1wl4h svg {
         display: block;
-        fill: var(--color-light-neutral-1500);
+        fill: var(--color-light-neutral-translucent-1300);
     } .bank-card__usePhoto_1wl4h {
     display: block;
     margin: 0;
@@ -126,6 +126,6 @@
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
 } .bank-card__usePhoto_1wl4h svg {
-        fill: var(--color-light-neutral-1500);
+        fill: var(--color-light-neutral-translucent-1300);
         display: block;
     }

package/bank-card/modern/index.css

@@ -1,7 +1,7 @@
 /* hash: 3w844 */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
-    --color-light-neutral-1500: #121213;
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
     --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
@@ -29,7 +29,7 @@
     --form-control-bg-color: transparent;
 
     /* focus */
-    --form-control-focus-border-bottom: 1px solid var(--color-light-neutral-1500);
+    --form-control-focus-border-bottom: 1px solid var(--color-light-neutral-translucent-1300);
     --form-control-focus-shadow: transparent;
 
     /* hover */
@@ -67,7 +67,7 @@
 }
     } .bank-card__focused_1wl4h .bank-card__label_1wl4h,
 .bank-card__filled_1wl4h .bank-card__label_1wl4h {
-    color: var(--color-light-neutral-1500);
+    color: var(--color-light-neutral-translucent-1300);
     transform: translateY(-19px) scale(0.6)
 } @media (max-width: 360px) { .bank-card__focused_1wl4h .bank-card__label_1wl4h,
 .bank-card__filled_1wl4h .bank-card__label_1wl4h {
@@ -82,8 +82,8 @@
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
 
-    color: var(--color-light-neutral-1500);
-    caret-color: var(--color-light-neutral-1500);
+    color: var(--color-light-neutral-translucent-1300);
+    caret-color: var(--color-light-neutral-translucent-1300);
 
     /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
     padding-left: 0 !important;
@@ -100,14 +100,14 @@
         width: auto;
         display: block
     } .bank-card__bankLogo_1wl4h svg g {
-            fill: var(--color-light-neutral-1500);
+            fill: var(--color-light-neutral-translucent-1300);
         } .bank-card__brandLogo_1wl4h {
     position: absolute;
     bottom: 20px;
     right: 20px
 } .bank-card__brandLogo_1wl4h svg {
         display: block;
-        fill: var(--color-light-neutral-1500);
+        fill: var(--color-light-neutral-translucent-1300);
     } .bank-card__usePhoto_1wl4h {
     display: block;
     margin: 0;
@@ -126,6 +126,6 @@
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
 } .bank-card__usePhoto_1wl4h svg {
-        fill: var(--color-light-neutral-1500);
+        fill: var(--color-light-neutral-translucent-1300);
         display: block;
     }

package/bottom-sheet/component.js

@@ -30,6 +30,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
     var fullHeight = reactDiv100vh.use100vh() || 0;
     // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
     var isFirstRender = fullHeight === 0;
+    var initialIndexRef = React.useRef(initialActiveAreaIndex);
     var magneticAreas = React.useMemo(function () {
         var _a;
         if (magneticAreasProp) {
@@ -104,6 +105,10 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
         }
     };
     var scrollToArea = function (idx) {
+        if (isFirstRender) {
+            initialIndexRef.current = idx;
+            return;
+        }
         stopSwiping(null);
         var nextArea = magneticAreas[idx];
         var nextAreaIdx = getActiveAreaIndex(nextArea);
@@ -267,7 +272,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
         delta: swipeThreshold,
     });
     var handleExited = function (node) {
-        var idx = initialActiveAreaIndex;
+        var idx = initialIndexRef.current;
         setBackdropOpacity(1);
         setSheetOffset(isNil(idx) ? magneticAreas[0] : lastMagneticArea - magneticAreas[idx]);
         setActiveAreaIdx(isNil(idx) ? magneticAreas.length - 1 : idx);
@@ -277,7 +282,8 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
         }
     };
     var handleEnter = function (node, isAppearing) {
-        onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize(initialActiveAreaIndex !== null && initialActiveAreaIndex !== void 0 ? initialActiveAreaIndex : magneticAreas.length - 1);
+        var _a;
+        onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize((_a = initialIndexRef.current) !== null && _a !== void 0 ? _a : magneticAreas.length - 1);
         if (transitionProps.onEnter) {
             transitionProps.onEnter(node, isAppearing);
         }
@@ -302,7 +308,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
         if (!isFirstRender) {
             // Инициализируем стейт только после того, как была рассчитана высота вьюпорта
             if (activeAreaIdx === -1) {
-                var idx = initialActiveAreaIndex;
+                var idx = initialIndexRef.current;
                 setSheetOffset(isNil(idx) ? 0 : lastMagneticArea - magneticAreas[idx]);
                 setActiveAreaIdx(isNil(idx) ? magneticAreas.length - 1 : idx);
             }

package/bottom-sheet/cssm/component.js

@@ -29,6 +29,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
     var fullHeight = reactDiv100vh.use100vh() || 0;
     // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
     var isFirstRender = fullHeight === 0;
+    var initialIndexRef = React.useRef(initialActiveAreaIndex);
     var magneticAreas = React.useMemo(function () {
         var _a;
         if (magneticAreasProp) {
@@ -103,6 +104,10 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
         }
     };
     var scrollToArea = function (idx) {
+        if (isFirstRender) {
+            initialIndexRef.current = idx;
+            return;
+        }
         stopSwiping(null);
         var nextArea = magneticAreas[idx];
         var nextAreaIdx = getActiveAreaIndex(nextArea);
@@ -266,7 +271,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
         delta: swipeThreshold,
     });
     var handleExited = function (node) {
-        var idx = initialActiveAreaIndex;
+        var idx = initialIndexRef.current;
         setBackdropOpacity(1);
         setSheetOffset(isNil(idx) ? magneticAreas[0] : lastMagneticArea - magneticAreas[idx]);
         setActiveAreaIdx(isNil(idx) ? magneticAreas.length - 1 : idx);
@@ -276,7 +281,8 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
         }
     };
     var handleEnter = function (node, isAppearing) {
-        onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize(initialActiveAreaIndex !== null && initialActiveAreaIndex !== void 0 ? initialActiveAreaIndex : magneticAreas.length - 1);
+        var _a;
+        onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize((_a = initialIndexRef.current) !== null && _a !== void 0 ? _a : magneticAreas.length - 1);
         if (transitionProps.onEnter) {
             transitionProps.onEnter(node, isAppearing);
         }
@@ -301,7 +307,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
         if (!isFirstRender) {
             // Инициализируем стейт только после того, как была рассчитана высота вьюпорта
             if (activeAreaIdx === -1) {
-                var idx = initialActiveAreaIndex;
+                var idx = initialIndexRef.current;
                 setSheetOffset(isNil(idx) ? 0 : lastMagneticArea - magneticAreas[idx]);
                 setActiveAreaIdx(isNil(idx) ? magneticAreas.length - 1 : idx);
             }