@alfalab/core-components 41.7.0-beta.0 → 41.7.0-beta.1

package/themes/dark.css

@@ -146,6 +146,10 @@
     --color-light-bg-secondary-inverted-shade-7: var(--color-dark-bg-secondary-inverted-tint-7);
     --color-light-bg-secondary-inverted-shade-15: var(--color-dark-bg-secondary-inverted-tint-15);
     --color-light-bg-tertiary-shade-7: var(--color-dark-bg-tertiary-tint-7);
+    --color-light-border-key-alpha-7: var(--color-dark-border-key-alpha-7);
+    --color-light-border-key-alpha-15: var(--color-dark-border-key-alpha-15);
+    --color-light-border-key-inverted-alpha-7: var(--color-dark-border-key-inverted-alpha-7);
+    --color-light-border-key-inverted-alpha-15: var(--color-dark-border-key-inverted-alpha-15);
     --color-light-border-underline-alpha-30: var(--color-dark-border-underline-alpha-30);
     --color-light-border-underline-inverted-alpha-30: var(
         --color-dark-border-underline-inverted-alpha-30

package/themes/dist/click.css

@@ -379,6 +379,10 @@
     --color-dark-bg-secondary-inverted-tint-7: rgb(244, 245, 246);
     --color-dark-bg-secondary-inverted-tint-15: rgb(245, 246, 246);
     --color-dark-bg-tertiary-tint-7: rgb(59, 59, 61);
+    --color-dark-border-key-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-dark-border-key-alpha-15: rgba(255, 255, 255, 0.15);
+    --color-dark-border-key-inverted-alpha-7: rgba(0, 0, 0, 0.07);
+    --color-dark-border-key-inverted-alpha-15: rgba(0, 0, 0, 0.15);
     --color-dark-border-underline-alpha-30: rgba(70, 70, 73, 0.3);
     --color-dark-border-underline-inverted-alpha-30: rgba(197, 197, 199, 0.3);
     --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
@@ -531,6 +535,10 @@
     --color-light-bg-secondary-inverted-shade-7: rgb(30, 30, 32);
     --color-light-bg-secondary-inverted-shade-15: rgb(27, 27, 29);
     --color-light-bg-tertiary-shade-7: rgb(217, 217, 219);
+    --color-light-border-key-alpha-7: rgba(0, 0, 0, 0.07);
+    --color-light-border-key-alpha-15: rgba(0, 0, 0, 0.15);
+    --color-light-border-key-inverted-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-light-border-key-inverted-alpha-15: rgba(255, 255, 255, 0.15);
     --color-light-border-underline-alpha-30: rgba(197, 197, 199, 0.3);
     --color-light-border-underline-inverted-alpha-30: rgba(70, 70, 73, 0.3);
     --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);

package/themes/dist/compiled/mobile-dark-bluetint.css

@@ -77,8 +77,6 @@
         background-color: #fff;
     } .badge__dot_57ay1.badge__outlineCount_57ay1 {
     border: 1px solid #121212;
-}.divider__component_1ban7 {
-    border-bottom: 1px solid #2b2b2e;
 }.checkbox-group__error_bjcbm {
     border-left: 1px solid #f15045;
 } .checkbox-group__label_bjcbm {
@@ -87,6 +85,8 @@
     color: #f15045;
 } .checkbox-group__hint_bjcbm {
     color: rgba(235, 235, 245, 0.54);
+}.divider__component_1ban7 {
+    border-bottom: 1px solid #2b2b2e;
 }.checkbox__box_1648f {
     color: #0e0e0e;
     background-color: #0e0e0e;
@@ -393,15 +393,6 @@
 }
 .hatching-progress-bar__accent_gi5kv {
     background: #ef3124;
-}.indicator__red_9vw4m {
-    background-color: #ef3124;
-    color: #fff;
-} .indicator__white_9vw4m {
-    background-color: #121212;
-    color: #fff;
-} .indicator__grey_9vw4m {
-    background-color: rgba(255, 255, 255, 0.06);
-    color: #fff;
 }.icon-view__component_j6ogi {
     color: #85858d;
 } .icon-view__bg_j6ogi {
@@ -1213,7 +1204,9 @@
 } .action-button__secondary_gnh22 .action-button__iconWrapper_gnh22 {
         color: #0e0e0e;
         background-color: #f3f4f5;
-    }
+    }.base-modal__component_c7moa {
+    background: #121212;
+}
 
 
 .system-message__component_17xr8 {
@@ -1230,7 +1223,18 @@
 .system-message__component_d500v {
     color: #fff;
 }
-.button__accent_1ax6m {
+.popover__component_lbzjc {
+    background-color: transparent;
+    color: #fff;
+} .popover__inner_lbzjc {
+    background-color: #121212;
+    box-shadow: 0 20px 24px rgba(0, 0, 0, 0.08), 0 12px 16px rgba(0, 0, 0, 0.04),
+        0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
+    border: 1px solid transparent;
+} .popover__arrow_lbzjc:after {
+    background-color: #121212;
+    border: 1px solid transparent;
+}.button__accent_1ax6m {
     color: #fff;
     background-color: #ef3124;
     border: 1px solid transparent
@@ -1559,20 +1563,7 @@
         color: rgba(14, 14, 14, 0.3)
     } .button__component_zn53q[disabled].button__ghost_zn53q.button__loading_zn53q {
             color: #0e0e0e;
-        }.base-modal__component_c7moa {
-    background: #121212;
-}.popover__component_lbzjc {
-    background-color: transparent;
-    color: #fff;
-} .popover__inner_lbzjc {
-    background-color: #121212;
-    box-shadow: 0 20px 24px rgba(0, 0, 0, 0.08), 0 12px 16px rgba(0, 0, 0, 0.04),
-        0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
-    border: 1px solid transparent;
-} .popover__arrow_lbzjc:after {
-    background-color: #121212;
-    border: 1px solid transparent;
-}.pagination__component_16yb7 {
+        }.pagination__component_16yb7 {
     color: #fff;
 }
 .pagination__dots_1h11o {
@@ -1593,7 +1584,32 @@
         color: #0e0e0e;
     } .pagination__tag_agsdl.pagination__tag_agsdl.pagination__checked_agsdl:active:not(:disabled) {
         color: #fff;
-    }.circular-progress-bar__backgroundCircle_yrslb,
+    }.chart__coreChart_1yhvr .recharts-text tspan {
+        fill: #fff;
+    }
+@keyframes chart__showDot_1scai {
+}
+
+.chart__tickText_11m3x {
+    fill: #fff;
+} .chart__circle_11m3x {
+    fill: #121212;
+} .chart__circle_11m3x {
+    fill: #121212;
+}
+.chart__tooltip_18obg {
+    background-color: #121212;
+    border: 1px solid #2b2b2e;
+    box-shadow: 0 24px 32px rgba(0, 0, 0, 0.08), 0 20px 24px rgba(0, 0, 0, 0.08),
+        0 12px 16px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
+} .chart__tooltipArrow_18obg {
+    border: 1px solid #2b2b2e;
+    background-color: #121212;
+} .chart__tooltipArrow_18obg:before {
+    border-color: transparent #121212 transparent transparent;
+}.comment__component_gw0is {
+    background-color: #202022;
+}.circular-progress-bar__backgroundCircle_yrslb,
 .circular-progress-bar__progressCircle_yrslb {
     fill: transparent;
 } .circular-progress-bar__positive_yrslb {
@@ -1620,33 +1636,8 @@
         color: #fff;
     } .circular-progress-bar__iconWrapper_yrslb.circular-progress-bar__icon-secondary_yrslb {
         color: #85858d;
-    }.comment__component_gw0is {
-    background-color: #202022;
-}.list-header__filled_1vb2k {
+    }.list-header__filled_1vb2k {
     background-color: rgba(255, 255, 255, 0.1);
-}.chart__coreChart_1yhvr .recharts-text tspan {
-        fill: #fff;
-    }
-@keyframes chart__showDot_1scai {
-}
-
-.chart__tickText_11m3x {
-    fill: #fff;
-} .chart__circle_11m3x {
-    fill: #121212;
-} .chart__circle_11m3x {
-    fill: #121212;
-}
-.chart__tooltip_18obg {
-    background-color: #121212;
-    border: 1px solid #2b2b2e;
-    box-shadow: 0 24px 32px rgba(0, 0, 0, 0.08), 0 20px 24px rgba(0, 0, 0, 0.08),
-        0 12px 16px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
-} .chart__tooltipArrow_18obg {
-    border: 1px solid #2b2b2e;
-    background-color: #121212;
-} .chart__tooltipArrow_18obg:before {
-    border-color: transparent #121212 transparent transparent;
 }.list__list_1nxgg {
     color: #fff;
 }
@@ -1679,7 +1670,17 @@
         background: #fff;
     } .stepped-progress-bar__bar_lwp7f.stepped-progress-bar__accent_lwp7f {
         background: #ef3124;
-    }.attach__component_59aeg {
+    }.drawer__backdropEnter_1t9m2 {
+    background-color: transparent;
+} .drawer__backdropEnterActive_1t9m2,
+.drawer__backdropEnterDone_1t9m2 {
+    background-color: rgba(0, 0, 0, 0.8);
+} .drawer__backdropExit_1t9m2 {
+    background-color: rgba(0, 0, 0, 0.8);
+} .drawer__backdropExitActive_1t9m2,
+.drawer__backdropExitDone_1t9m2 {
+    background-color: transparent;
+}.attach__component_59aeg {
 } .attach__focused_59aeg {
     outline: 2px solid #0072ef;
 }.confirmation-v1__errorHeader_idlnd {
@@ -1730,25 +1731,7 @@
 } .confirmation-v1__loaderText_ykyp8 {
     color: rgba(235, 235, 245, 0.54);
     color: rgba(235, 235, 245, 0.54);
-}.custom-button__customButton_s3lv0.custom-button__white_s3lv0 * {
-        color: #fff;
-    } .custom-button__customButton_s3lv0.custom-button__black_s3lv0 * {
-        color: #0e0e0e;
-    } .custom-button__customButton_s3lv0:before {
-        background-color: rgba(0, 0, 0, 0);
-    } .custom-button__customButton_s3lv0.custom-button__darkening_s3lv0:hover:before {
-            background-color: rgba(0, 0, 0, 0.07);
-        } .custom-button__customButton_s3lv0.custom-button__darkening_s3lv0:active:before {
-            background-color: rgba(0, 0, 0, 0.15);
-        } .custom-button__customButton_s3lv0.custom-button__lightening_s3lv0:hover:before {
-            background-color: rgba(255, 255, 255, 0.15);
-        } .custom-button__customButton_s3lv0.custom-button__lightening_s3lv0:active:before {
-            background-color: rgba(255, 255, 255, 0.2);
-        } .custom-button__customButton_s3lv0:disabled.custom-button__white_s3lv0 * {
-        color: #fff;
-    } .custom-button__customButton_s3lv0:disabled.custom-button__black_s3lv0 * {
-        color: #0e0e0e;
-    }
+}
 .confirmation__component_q4g8j {
     color: rgba(235, 235, 245, 0.54);
 }
@@ -1772,7 +1755,37 @@
 }
 .confirmation__typographyTheme_vtc6a.confirmation__typographyTheme_vtc6a {
     color: rgba(235, 235, 245, 0.54);
-}.cc-icon-button.icon-button__primary_1q44r {
+}.custom-button__customButton_s3lv0.custom-button__white_s3lv0 * {
+        color: #0e0e0e;
+    } .custom-button__customButton_s3lv0.custom-button__black_s3lv0 * {
+        color: #fff;
+    } .custom-button__customButton_s3lv0.custom-button__static-white_s3lv0 * {
+        color: #fff;
+    } .custom-button__customButton_s3lv0.custom-button__static-black_s3lv0 * {
+        color: #0e0e0e;
+    } .custom-button__customButton_s3lv0:before {
+        background-color: rgba(0, 0, 0, 0);
+    } .custom-button__customButton_s3lv0.custom-button__darkening_s3lv0:hover:before {
+            background-color: rgba(255, 255, 255, 0.07);
+        } .custom-button__customButton_s3lv0.custom-button__darkening_s3lv0:active:before {
+            background-color: rgba(255, 255, 255, 0.15);
+        } .custom-button__customButton_s3lv0.custom-button__lightening_s3lv0:hover:before {
+            background-color: rgba(0, 0, 0, 0.07);
+        } .custom-button__customButton_s3lv0.custom-button__lightening_s3lv0:active:before {
+            background-color: rgba(0, 0, 0, 0.15);
+        } .custom-button__customButton_s3lv0.custom-button__static-darkening_s3lv0:hover:before {
+            background-color: rgba(0, 0, 0, 0.07);
+        } .custom-button__customButton_s3lv0.custom-button__static-darkening_s3lv0:active:before {
+            background-color: rgba(0, 0, 0, 0.15);
+        } .custom-button__customButton_s3lv0.custom-button__static-lightening_s3lv0:hover:before {
+            background-color: rgba(255, 255, 255, 0.07);
+        } .custom-button__customButton_s3lv0.custom-button__static-lightening_s3lv0:active:before {
+            background-color: rgba(255, 255, 255, 0.15);
+        } .custom-button__customButton_s3lv0:disabled.custom-button__white_s3lv0 * {
+        color: #fff;
+    } .custom-button__customButton_s3lv0:disabled.custom-button__black_s3lv0 * {
+        color: #0e0e0e;
+    }.cc-icon-button.icon-button__primary_1q44r {
         color: #fff
     } .cc-icon-button.icon-button__primary_1q44r:hover {
             color: rgb(204, 204, 204);
@@ -1966,16 +1979,6 @@
     color: #f15045;
 } @media screen and (min-width: 360px) {
 } @media screen and (min-width: 390px) {
-}.drawer__backdropEnter_1t9m2 {
-    background-color: transparent;
-} .drawer__backdropEnterActive_1t9m2,
-.drawer__backdropEnterDone_1t9m2 {
-    background-color: rgba(0, 0, 0, 0.8);
-} .drawer__backdropExit_1t9m2 {
-    background-color: rgba(0, 0, 0, 0.8);
-} .drawer__backdropExitActive_1t9m2,
-.drawer__backdropExitDone_1t9m2 {
-    background-color: transparent;
 }.pure-cell__focused_1qo83 {
     outline: 2px solid #0072ef;
 }
@@ -1990,21 +1993,7 @@
 
 
 
-.slider-input__slider_1gypf .noUi-base:hover > .noUi-connects {
-            background-color: #303032;
-        } .slider-input__slider_1gypf .noUi-connects {
-        background-color: #303032;
-    } .slider-input__steps_1gypf {
-    color: rgba(235, 235, 245, 0.54);
-} .slider-input__info_1gypf {
-    color: rgba(235, 235, 245, 0.54);
-}.with-suffix__hasSuffix_xw5t3 input:focus::placeholder {
-    color: transparent;
-} .with-suffix__disabled_xw5t3 {
-    color: #fff;
-} .with-suffix__readOnly_xw5t3 {
-    color: rgba(235, 235, 245, 0.54);
-}.file-upload-item__component_vtenn {
+.file-upload-item__component_vtenn {
     color: rgba(235, 235, 245, 0.54);
     box-shadow: 0 -1px 0 0 #2b2b2e inset
 } .file-upload-item__icon_vtenn {
@@ -2085,36 +2074,20 @@
     background-color: #121212;
 } .toast-plate__closeButtonWrapper_1wcge:before {
         background-color: #262629;
-    }.bank-card__component_iobvi {
-    --form-control-bg-color: transparent;
-    --form-control-focus-shadow: transparent;
-    --form-control-hover-bg-color: transparent;
-    --form-control-focus-bg-color: transparent;
-} .bank-card__label_iobvi {
-    color: rgba(0, 0, 0, 0.6)
-} .bank-card__focused_iobvi .bank-card__label_iobvi,
-.bank-card__filled_iobvi .bank-card__label_iobvi {
-    color: #000
-} .bank-card__input_iobvi {
-    color: #000;
-    caret-color: #000
-} .bank-card__bankLogo_iobvi svg g {
-            fill: #000;
-        } .bank-card__brandLogo_iobvi svg {
-        fill: #000;
-    } .bank-card__usePhoto_iobvi {
-    background-color: transparent
-} .bank-card__usePhoto_iobvi svg {
-        fill: #000;
-    }.amount-input__minorPartAndCurrency_272lu {
+    }.slider-input__slider_1gypf .noUi-base:hover > .noUi-connects {
+            background-color: #303032;
+        } .slider-input__slider_1gypf .noUi-connects {
+        background-color: #303032;
+    } .slider-input__steps_1gypf {
+    color: rgba(235, 235, 245, 0.54);
+} .slider-input__info_1gypf {
+    color: rgba(235, 235, 245, 0.54);
+}.with-suffix__hasSuffix_xw5t3 input:focus::placeholder {
+    color: transparent;
+} .with-suffix__disabled_xw5t3 {
+    color: #fff;
+} .with-suffix__readOnly_xw5t3 {
     color: rgba(235, 235, 245, 0.54);
-}
-.amount-input__filled_xniwf .amount-input__input_xniwf,
-.amount-input__input_xniwf:focus {
-    -webkit-text-fill-color: transparent;
-}
-.amount-input__minorPartAndCurrency_wqcqt {
-    color: rgba(60, 60, 67, 0.66);
 }.bottom-sheet__modal_5wnda {
     background-color: transparent;
 } .bottom-sheet__component_5wnda {
@@ -2272,6 +2245,37 @@
     box-shadow: 0 20px 24px rgba(0, 0, 0, 0.08), 0 12px 16px rgba(0, 0, 0, 0.04),
         0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
     background-color: transparent;
+}.bank-card__component_iobvi {
+    --form-control-bg-color: transparent;
+    --form-control-focus-shadow: transparent;
+    --form-control-hover-bg-color: transparent;
+    --form-control-focus-bg-color: transparent;
+} .bank-card__label_iobvi {
+    color: rgba(0, 0, 0, 0.6)
+} .bank-card__focused_iobvi .bank-card__label_iobvi,
+.bank-card__filled_iobvi .bank-card__label_iobvi {
+    color: #000
+} .bank-card__input_iobvi {
+    color: #000;
+    caret-color: #000
+} .bank-card__bankLogo_iobvi svg g {
+            fill: #000;
+        } .bank-card__brandLogo_iobvi svg {
+        fill: #000;
+    } .bank-card__usePhoto_iobvi {
+    background-color: transparent
+} .bank-card__usePhoto_iobvi svg {
+        fill: #000;
+    }.amount-input__minorPartAndCurrency_272lu {
+    color: rgba(235, 235, 245, 0.54);
+}
+.amount-input__filled_xniwf .amount-input__input_xniwf,
+.amount-input__input_xniwf:focus {
+    -webkit-text-fill-color: transparent;
+}
+.amount-input__minorPartAndCurrency_wqcqt {
+    color: rgba(60, 60, 67, 0.66);
+}@media (min-width: 600px) {
 }.tooltip__hint_1r7fb {
     background-color: #fff;
     box-shadow: 0 20px 24px rgba(0, 0, 0, 0.2), 0 12px 16px rgba(0, 0, 0, 0.16),
@@ -2301,8 +2305,7 @@
 } .tooltip__hint_17keo .tooltip__arrow_17keo:after {
     background-color: #121212;
 }
-@media (min-width: 600px) {
-}
+
 .calendar__wrapper_dfzyi {
     background: #121212;
 } .calendar__calendar_dfzyi th {
@@ -2411,56 +2414,7 @@
                 color: #0e0e0e;
             }
 @media (max-width: 374px) {
-        }.gallery__container_qu06y {
-    background-color: #121212;
-} .gallery__modal_qu06y {
-    background: transparent;
-}
-.gallery__buttons_9wd2w path {
-        color: #fff;
-    } .gallery__iconButton_9wd2w:hover path {
-        color: rgb(237, 237, 237);
-    } .gallery__iconButton_9wd2w:active path {
-        color: rgb(217, 217, 217);
-    }
-
-.gallery__component_35mvq {
-    border: 2px solid rgba(0, 0, 0, 0);
-} .gallery__active_35mvq {
-    border-color: rgba(255, 255, 255, 0.4)
-} .gallery__image_35mvq {
-    background-color: #121212
-} .gallery__loading_35mvq {
-    background-color: #202022
-} .gallery__loading_35mvq .gallery__active_35mvq {
-        background-color: #3a3a3c;
-    } .gallery__brokenImageWrapper_35mvq {
-    background-color: #3a3a3c
-} .gallery__focused_35mvq {
-    outline: 2px solid #0072ef;
-}
-.gallery__component_12rvx {
-    background-color: #121212;
-} .gallery__slideLoading_12rvx {
-    background-color: #202022;
-} .gallery__image_12rvx {
-    background-color: #121212;
-} .gallery__smallImage_12rvx {
-    background-color: #121212;
-} .gallery__arrow_12rvx {
-    color: #fff
-} .gallery__arrow_12rvx:hover {
-        background-color: rgb(54, 54, 54);
-    } .gallery__arrow_12rvx:active {
-        background-color: rgb(65, 65, 65);
-    } .gallery__focused_12rvx {
-    outline: 2px solid #0072ef;
-} .gallery__placeholder_12rvx {
-    background-color: #3a3a3c;
-} .gallery__fullScreenImage_12rvx {
-    background-color: #121212;
-}
-.select__arrow_1xf52 {
+        }.select__arrow_1xf52 {
     color: #fff;
 }
 
@@ -2554,7 +2508,56 @@
 }
 .select__footer_yh100 {
     background-color: #121212
-}.calendar-with-skeleton__skeleton_10rxi {
+}.gallery__container_qu06y {
+    background-color: #121212;
+} .gallery__modal_qu06y {
+    background: transparent;
+}
+.gallery__buttons_9wd2w path {
+        color: #fff;
+    } .gallery__iconButton_9wd2w:hover path {
+        color: rgb(237, 237, 237);
+    } .gallery__iconButton_9wd2w:active path {
+        color: rgb(217, 217, 217);
+    }
+
+.gallery__component_35mvq {
+    border: 2px solid rgba(0, 0, 0, 0);
+} .gallery__active_35mvq {
+    border-color: rgba(255, 255, 255, 0.4)
+} .gallery__image_35mvq {
+    background-color: #121212
+} .gallery__loading_35mvq {
+    background-color: #202022
+} .gallery__loading_35mvq .gallery__active_35mvq {
+        background-color: #3a3a3c;
+    } .gallery__brokenImageWrapper_35mvq {
+    background-color: #3a3a3c
+} .gallery__focused_35mvq {
+    outline: 2px solid #0072ef;
+}
+.gallery__component_12rvx {
+    background-color: #121212;
+} .gallery__slideLoading_12rvx {
+    background-color: #202022;
+} .gallery__image_12rvx {
+    background-color: #121212;
+} .gallery__smallImage_12rvx {
+    background-color: #121212;
+} .gallery__arrow_12rvx {
+    color: #fff
+} .gallery__arrow_12rvx:hover {
+        background-color: rgb(54, 54, 54);
+    } .gallery__arrow_12rvx:active {
+        background-color: rgb(65, 65, 65);
+    } .gallery__focused_12rvx {
+    outline: 2px solid #0072ef;
+} .gallery__placeholder_12rvx {
+    background-color: #3a3a3c;
+} .gallery__fullScreenImage_12rvx {
+    background-color: #121212;
+}
+.calendar-with-skeleton__skeleton_10rxi {
     background-color: #121212;
 }.date-range-input__calendarContainer_1hpcg {
     border: 1px solid #262629
@@ -2590,10 +2593,7 @@
     outline: 2px solid #0072ef;
 } .select-with-tags__placeholder_1wz9l {
     color: rgba(235, 235, 245, 0.32);
-}
-.calendar-range__component_9epx3:after {
-        background-color: #fff;
-    }.table__component_ce0xi {
+}.table__component_ce0xi {
     border-top: 1px solid #2b2b2e;
 }
 .table__wrapper_1vpzr {
@@ -2639,7 +2639,10 @@
 .table__open_rcy4o,
 .table__open_rcy4o:hover {
     background-color: rgba(255, 255, 255, 0.163);
-}.intl-phone-input__emptyCountryIcon_1dxj7 {
+}
+.calendar-range__component_9epx3:after {
+        background-color: #fff;
+    }.intl-phone-input__emptyCountryIcon_1dxj7 {
     color: #85858d;
 }
 .intl-phone-input__flagPlaceholder_fzo27 {

package/themes/dist/corp.css

@@ -379,6 +379,10 @@
     --color-dark-bg-secondary-inverted-tint-7: rgb(244, 245, 246);
     --color-dark-bg-secondary-inverted-tint-15: rgb(245, 246, 246);
     --color-dark-bg-tertiary-tint-7: rgb(74, 89, 104);
+    --color-dark-border-key-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-dark-border-key-alpha-15: rgba(255, 255, 255, 0.15);
+    --color-dark-border-key-inverted-alpha-7: rgba(11, 31, 53, 0.07);
+    --color-dark-border-key-inverted-alpha-15: rgba(11, 31, 53, 0.15);
     --color-dark-border-underline-alpha-30: rgba(109, 121, 134, 0.3);
     --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);
@@ -531,6 +535,10 @@
     --color-light-bg-secondary-inverted-shade-7: rgb(33, 49, 68);
     --color-light-bg-secondary-inverted-shade-15: rgb(30, 45, 62);
     --color-light-bg-tertiary-shade-7: rgb(215, 217, 219);
+    --color-light-border-key-alpha-7: rgba(11, 31, 53, 0.07);
+    --color-light-border-key-alpha-15: rgba(11, 31, 53, 0.15);
+    --color-light-border-key-inverted-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-light-border-key-inverted-alpha-15: rgba(255, 255, 255, 0.15);
     --color-light-border-underline-alpha-30: rgba(182, 188, 195, 0.3);
     --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);

package/themes/dist/dark.css

@@ -146,6 +146,10 @@
     --color-light-bg-secondary-inverted-shade-7: var(--color-dark-bg-secondary-inverted-tint-7);
     --color-light-bg-secondary-inverted-shade-15: var(--color-dark-bg-secondary-inverted-tint-15);
     --color-light-bg-tertiary-shade-7: var(--color-dark-bg-tertiary-tint-7);
+    --color-light-border-key-alpha-7: var(--color-dark-border-key-alpha-7);
+    --color-light-border-key-alpha-15: var(--color-dark-border-key-alpha-15);
+    --color-light-border-key-inverted-alpha-7: var(--color-dark-border-key-inverted-alpha-7);
+    --color-light-border-key-inverted-alpha-15: var(--color-dark-border-key-inverted-alpha-15);
     --color-light-border-underline-alpha-30: var(--color-dark-border-underline-alpha-30);
     --color-light-border-underline-inverted-alpha-30: var(
         --color-dark-border-underline-inverted-alpha-30

package/themes/dist/intranet.css

@@ -379,6 +379,10 @@
     --color-dark-bg-secondary-inverted-tint-7: rgb(244, 245, 246);
     --color-dark-bg-secondary-inverted-tint-15: rgb(245, 246, 246);
     --color-dark-bg-tertiary-tint-7: rgb(59, 59, 61);
+    --color-dark-border-key-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-dark-border-key-alpha-15: rgba(255, 255, 255, 0.15);
+    --color-dark-border-key-inverted-alpha-7: rgba(0, 0, 0, 0.07);
+    --color-dark-border-key-inverted-alpha-15: rgba(0, 0, 0, 0.15);
     --color-dark-border-underline-alpha-30: rgba(70, 70, 73, 0.3);
     --color-dark-border-underline-inverted-alpha-30: rgba(197, 197, 199, 0.3);
     --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
@@ -531,6 +535,10 @@
     --color-light-bg-secondary-inverted-shade-7: rgb(30, 30, 32);
     --color-light-bg-secondary-inverted-shade-15: rgb(27, 27, 29);
     --color-light-bg-tertiary-shade-7: rgb(217, 217, 219);
+    --color-light-border-key-alpha-7: rgba(0, 0, 0, 0.07);
+    --color-light-border-key-alpha-15: rgba(0, 0, 0, 0.15);
+    --color-light-border-key-inverted-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-light-border-key-inverted-alpha-15: rgba(255, 255, 255, 0.15);
     --color-light-border-underline-alpha-30: rgba(197, 197, 199, 0.3);
     --color-light-border-underline-inverted-alpha-30: rgba(70, 70, 73, 0.3);
     --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);

package/themes/dist/mixins/dark.css

@@ -146,6 +146,10 @@
     --color-light-bg-secondary-inverted-shade-7: var(--color-dark-bg-secondary-inverted-tint-7);
     --color-light-bg-secondary-inverted-shade-15: var(--color-dark-bg-secondary-inverted-tint-15);
     --color-light-bg-tertiary-shade-7: var(--color-dark-bg-tertiary-tint-7);
+    --color-light-border-key-alpha-7: var(--color-dark-border-key-alpha-7);
+    --color-light-border-key-alpha-15: var(--color-dark-border-key-alpha-15);
+    --color-light-border-key-inverted-alpha-7: var(--color-dark-border-key-inverted-alpha-7);
+    --color-light-border-key-inverted-alpha-15: var(--color-dark-border-key-inverted-alpha-15);
     --color-light-border-underline-alpha-30: var(--color-dark-border-underline-alpha-30);
     --color-light-border-underline-inverted-alpha-30: var(
         --color-dark-border-underline-inverted-alpha-30

package/themes/dist/mobile.css

@@ -379,6 +379,10 @@
     --color-dark-bg-secondary-inverted-tint-7: rgb(244, 245, 246);
     --color-dark-bg-secondary-inverted-tint-15: rgb(245, 246, 246);
     --color-dark-bg-tertiary-tint-7: rgb(59, 59, 61);
+    --color-dark-border-key-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-dark-border-key-alpha-15: rgba(255, 255, 255, 0.15);
+    --color-dark-border-key-inverted-alpha-7: rgba(0, 0, 0, 0.07);
+    --color-dark-border-key-inverted-alpha-15: rgba(0, 0, 0, 0.15);
     --color-dark-border-underline-alpha-30: rgba(70, 70, 73, 0.3);
     --color-dark-border-underline-inverted-alpha-30: rgba(197, 197, 199, 0.3);
     --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
@@ -531,6 +535,10 @@
     --color-light-bg-secondary-inverted-shade-7: rgb(30, 30, 32);
     --color-light-bg-secondary-inverted-shade-15: rgb(27, 27, 29);
     --color-light-bg-tertiary-shade-7: rgb(217, 217, 219);
+    --color-light-border-key-alpha-7: rgba(0, 0, 0, 0.07);
+    --color-light-border-key-alpha-15: rgba(0, 0, 0, 0.15);
+    --color-light-border-key-inverted-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-light-border-key-inverted-alpha-15: rgba(255, 255, 255, 0.15);
     --color-light-border-underline-alpha-30: rgba(197, 197, 199, 0.3);
     --color-light-border-underline-inverted-alpha-30: rgba(70, 70, 73, 0.3);
     --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);

package/themes/dist/site.css

@@ -379,6 +379,10 @@
     --color-dark-bg-secondary-inverted-tint-7: rgb(244, 245, 246);
     --color-dark-bg-secondary-inverted-tint-15: rgb(245, 246, 246);
     --color-dark-bg-tertiary-tint-7: rgb(74, 89, 104);
+    --color-dark-border-key-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-dark-border-key-alpha-15: rgba(255, 255, 255, 0.15);
+    --color-dark-border-key-inverted-alpha-7: rgba(11, 31, 53, 0.07);
+    --color-dark-border-key-inverted-alpha-15: rgba(11, 31, 53, 0.15);
     --color-dark-border-underline-alpha-30: rgba(109, 121, 134, 0.3);
     --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);
@@ -531,6 +535,10 @@
     --color-light-bg-secondary-inverted-shade-7: rgb(33, 49, 68);
     --color-light-bg-secondary-inverted-shade-15: rgb(30, 45, 62);
     --color-light-bg-tertiary-shade-7: rgb(215, 217, 219);
+    --color-light-border-key-alpha-7: rgba(11, 31, 53, 0.07);
+    --color-light-border-key-alpha-15: rgba(11, 31, 53, 0.15);
+    --color-light-border-key-inverted-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-light-border-key-inverted-alpha-15: rgba(255, 255, 255, 0.15);
     --color-light-border-underline-alpha-30: rgba(182, 188, 195, 0.3);
     --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);

package/themes/intranet.css

@@ -379,6 +379,10 @@
     --color-dark-bg-secondary-inverted-tint-7: rgb(244, 245, 246);
     --color-dark-bg-secondary-inverted-tint-15: rgb(245, 246, 246);
     --color-dark-bg-tertiary-tint-7: rgb(59, 59, 61);
+    --color-dark-border-key-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-dark-border-key-alpha-15: rgba(255, 255, 255, 0.15);
+    --color-dark-border-key-inverted-alpha-7: rgba(0, 0, 0, 0.07);
+    --color-dark-border-key-inverted-alpha-15: rgba(0, 0, 0, 0.15);
     --color-dark-border-underline-alpha-30: rgba(70, 70, 73, 0.3);
     --color-dark-border-underline-inverted-alpha-30: rgba(197, 197, 199, 0.3);
     --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
@@ -531,6 +535,10 @@
     --color-light-bg-secondary-inverted-shade-7: rgb(30, 30, 32);
     --color-light-bg-secondary-inverted-shade-15: rgb(27, 27, 29);
     --color-light-bg-tertiary-shade-7: rgb(217, 217, 219);
+    --color-light-border-key-alpha-7: rgba(0, 0, 0, 0.07);
+    --color-light-border-key-alpha-15: rgba(0, 0, 0, 0.15);
+    --color-light-border-key-inverted-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-light-border-key-inverted-alpha-15: rgba(255, 255, 255, 0.15);
     --color-light-border-underline-alpha-30: rgba(197, 197, 199, 0.3);
     --color-light-border-underline-inverted-alpha-30: rgba(70, 70, 73, 0.3);
     --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);