@alfalab/core-components 25.7.0 → 25.8.0

package/modal/components/header/desktop.css

@@ -40,12 +40,12 @@
 
     /* mobile */
 }
-.modal__header_34c60 {
+.modal__header_62xk2 {
     min-height: var(--modal-header-min-height);
     border-top-left-radius: var(--modal-border-radius);
     border-top-right-radius: var(--modal-border-radius);
 }
-.modal__content_34c60 {
+.modal__content_62xk2 {
     font-size: 24px;
     line-height: 32px;
     font-weight: 500;
@@ -54,20 +54,20 @@
 
     margin: var(--gap-xs) var(--gap-m) var(--gap-xs) 0;
 }
-.modal__s_34c60 {
+.modal__s_62xk2 {
     padding: var(--modal-s-header-paddings);
 }
-.modal__m_34c60 {
+.modal__m_62xk2 {
     padding: var(--modal-m-header-paddings);
 }
-.modal__l_34c60,
-.modal__fullscreen_34c60 {
+.modal__l_62xk2,
+.modal__fullscreen_62xk2 {
     min-height: var(--modal-header-l-min-height);
     padding: var(--modal-l-header-paddings);
 }
-.modal__sticky_34c60 {
+.modal__sticky_62xk2 {
     top: calc(var(--modal-vertical-padding) * -1);
 }
-.modal__fullscreen_34c60 {
+.modal__fullscreen_62xk2 {
     top: 0;
 }

package/modal/components/header/index.css

@@ -25,7 +25,7 @@
 
     /* mobile */
 }
-.modal__header_cnrzs {
+.modal__header_fmddu {
     width: 100%;
     box-sizing: border-box;
     display: flex;
@@ -33,45 +33,45 @@
     justify-content: flex-end;
     transition: box-shadow 0.2s ease, background 0.2s ease;
 }
-.modal__highlighted_cnrzs {
+.modal__highlighted_fmddu {
     background: var(--modal-header-highlight-background);
     box-shadow: var(--modal-header-highlight-box-shadow);
 }
-.modal__sticky_cnrzs {
+.modal__sticky_fmddu {
     position: sticky
 }
-.modal__sticky_cnrzs.modal__hasContent_cnrzs {
+.modal__sticky_fmddu.modal__hasContent_fmddu {
         background: var(--modal-header-background);
     }
-.modal__content_cnrzs {
+.modal__content_fmddu {
     flex-grow: 1;
 }
-.modal__title_cnrzs {
+.modal__title_fmddu {
     word-break: break-word;
 }
-.modal__addon_cnrzs {
+.modal__addon_fmddu {
     min-width: 48px;
     height: 48px;
     display: flex;
     justify-content: center;
     align-items: center;
 }
-.modal__left_cnrzs {
+.modal__left_fmddu {
     justify-content: flex-start;
     text-align: left;
 }
-.modal__center_cnrzs {
+.modal__center_fmddu {
     justify-content: center;
     text-align: center;
 }
-.modal__right_cnrzs {
+.modal__right_fmddu {
     justify-content: flex-end;
     text-align: right;
 }
-.modal__trim_cnrzs {
+.modal__trim_fmddu {
     overflow: hidden
 }
-.modal__trim_cnrzs .modal__title_cnrzs {
+.modal__trim_fmddu .modal__title_fmddu {
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;

package/modal/components/header/mobile.css

@@ -32,10 +32,10 @@
     --modal-header-mobile-line-height: 24px;
     --modal-header-mobile-font-family: var(--font-family-system);
 }
-.modal__sticky_xxzjy {
+.modal__sticky_3s1qs {
     top: 0;
 }
-.modal__content_xxzjy {
+.modal__content_3s1qs {
     padding: var(--modal-header-mobile-padding);
     font-size: var(--modal-header-mobile-font-size);
     line-height: var(--modal-header-mobile-line-height);

package/modal/desktop.css

@@ -30,29 +30,29 @@
 
     /* mobile */
 }
-.modal__wrapper_13mai {
+.modal__wrapper_1xs8c {
     padding-top: var(--modal-vertical-padding);
     padding-bottom: var(--modal-vertical-padding);
 }
-.modal__component_13mai {
+.modal__component_1xs8c {
     width: 100%;
     max-width: 100%;
     border-radius: var(--modal-border-radius);
 }
-.modal__fullscreen_13mai {
+.modal__fullscreen_1xs8c {
     padding-top: 0;
     padding-bottom: 0
 }
-.modal__fullscreen_13mai .modal__component_13mai {
+.modal__fullscreen_1xs8c .modal__component_1xs8c {
         flex: 1;
         border-radius: 0;
     }
-.modal__s_13mai {
+.modal__s_1xs8c {
     width: var(--modal-s-width);
 }
-.modal__m_13mai {
+.modal__m_1xs8c {
     width: var(--modal-m-width);
 }
-.modal__l_13mai {
+.modal__l_1xs8c {
     width: var(--modal-l-width);
 }

package/modal/desktop.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-a540848a.js');
+require('./tslib.es6-48e01103.js');
 require('react');
 require('classnames');
 require('../base-modal');
@@ -16,7 +16,7 @@ require('./components/content/Component.desktop.js');
 require('./components/footer/Component.js');
 require('./components/footer/Component.desktop.js');
 var Component_desktop = require('./Component.desktop.js');
-require('./transitions.module-909330fd.js');
+require('./transitions.module-cf052435.js');
 
 
 

package/modal/esm/Component.desktop.js

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign } from './tslib.es6-c79ec192.js';
+import { _ as __rest, a as __assign } from './tslib.es6-5ba80151.js';
 import React, { forwardRef, useRef, useCallback, isValidElement, cloneElement } from 'react';
 import cn from 'classnames';
 import { BaseModal } from '../../base-modal/esm';
@@ -13,9 +13,9 @@ import './components/content/Component.js';
 import { ContentDesktop } from './components/content/Component.desktop.js';
 import './components/footer/Component.js';
 import { FooterDesktop } from './components/footer/Component.desktop.js';
-import { t as transitions } from './transitions.module-4313d83b.js';
+import { t as transitions } from './transitions.module-a20188ae.js';
 
-var styles = {"wrapper":"modal__wrapper_13mai","component":"modal__component_13mai","fullscreen":"modal__fullscreen_13mai","s":"modal__s_13mai","m":"modal__m_13mai","l":"modal__l_13mai"};
+var styles = {"wrapper":"modal__wrapper_1xs8c","component":"modal__component_1xs8c","fullscreen":"modal__fullscreen_1xs8c","s":"modal__s_1xs8c","m":"modal__m_1xs8c","l":"modal__l_1xs8c"};
 require('./desktop.css');
 
 var ModalDesktopComponent = forwardRef(function (_a, ref) {

package/modal/esm/Component.mobile.js

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign } from './tslib.es6-c79ec192.js';
+import { _ as __rest, a as __assign } from './tslib.es6-5ba80151.js';
 import React, { forwardRef, isValidElement, cloneElement } from 'react';
 import cn from 'classnames';
 import { BaseModal } from '../../base-modal/esm';
@@ -9,14 +9,14 @@ import '@alfalab/icons-glyph/CrossHeavyMIcon';
 import { Closer } from './components/closer/Component.js';
 import './components/content/Component.js';
 import './components/footer/Component.js';
-import { t as transitions } from './transitions.module-4313d83b.js';
+import { t as transitions } from './transitions.module-a20188ae.js';
 import { useMedia } from '@alfalab/hooks';
 import '@alfalab/icons-glyph/CrossMIcon';
 import { HeaderMobile } from './components/header/Component.mobile.js';
 import { ContentMobile } from './components/content/Component.mobile.js';
 import { FooterMobile } from './components/footer/Component.mobile.js';
 
-var styles = {"component":"modal__component_15au1"};
+var styles = {"component":"modal__component_lxs7u"};
 require('./mobile.css');
 
 var ModalMobileComponent = forwardRef(function (_a, ref) {

package/modal/esm/Component.responsive.js

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign } from './tslib.es6-c79ec192.js';
+import { _ as __rest, a as __assign } from './tslib.es6-5ba80151.js';
 import React, { forwardRef, useMemo, useContext } from 'react';
 import 'classnames';
 import '../../base-modal/esm';
@@ -13,7 +13,7 @@ import './components/content/Component.js';
 import './components/content/Component.desktop.js';
 import './components/footer/Component.js';
 import './components/footer/Component.desktop.js';
-import './transitions.module-4313d83b.js';
+import './transitions.module-a20188ae.js';
 import { ModalDesktop } from './Component.desktop.js';
 import { useMedia } from '@alfalab/hooks';
 import '@alfalab/icons-glyph/CrossMIcon';

package/modal/esm/components/closer/Component.js

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign } from '../../tslib.es6-c79ec192.js';
+import { _ as __rest, a as __assign } from '../../tslib.es6-5ba80151.js';
 import React, { useContext, useCallback } from 'react';
 import cn from 'classnames';
 import '../../../../base-modal/esm';
@@ -6,7 +6,7 @@ import { ModalContext } from '../../Context.js';
 import { IconButton } from '../../../../icon-button/esm';
 import { CrossHeavyMIcon } from '@alfalab/icons-glyph/CrossHeavyMIcon';
 
-var styles = {"closer":"modal__closer_1fdez","left":"modal__left_1fdez","right":"modal__right_1fdez","fullscreen":"modal__fullscreen_1fdez"};
+var styles = {"closer":"modal__closer_ai8qm","left":"modal__left_ai8qm","right":"modal__right_ai8qm","fullscreen":"modal__fullscreen_ai8qm"};
 require('./index.css');
 
 var Closer = function (_a) {

package/modal/esm/components/closer/index.css

@@ -23,7 +23,7 @@
 
     /* mobile */
 }
-.modal__closer_1fdez {
+.modal__closer_ai8qm {
     flex-shrink: 0;
 
     background: rgba(255, 255, 255, 0.4);
@@ -31,14 +31,14 @@
             backdrop-filter: blur(10px);
     border-radius: 50px;
 }
-.modal__left_1fdez,
-.modal__right_1fdez {
+.modal__left_ai8qm,
+.modal__right_ai8qm {
     position: sticky;
     top: calc(var(--modal-vertical-padding) * -1);
 }
-.modal__right_1fdez {
+.modal__right_ai8qm {
     margin-left: auto;
 }
-.modal__fullscreen_1fdez {
+.modal__fullscreen_ai8qm {
     top: 0;
 }

package/modal/esm/components/content/Component.desktop.js

@@ -1,11 +1,11 @@
-import { _ as __rest, a as __assign } from '../../tslib.es6-c79ec192.js';
+import { _ as __rest, a as __assign } from '../../tslib.es6-5ba80151.js';
 import React from 'react';
 import cn from 'classnames';
 import '../../../../base-modal/esm';
 import '../../Context.js';
 import { Content } from './Component.js';
 
-var styles = {"content":"modal__content_jqjm4 modal__content_mu7r9","flex":"modal__flex_jqjm4 modal__flex_mu7r9","s":"modal__s_jqjm4","m":"modal__m_jqjm4","l":"modal__l_jqjm4","fullscreen":"modal__fullscreen_jqjm4"};
+var styles = {"content":"modal__content_133lf modal__content_1679k","flex":"modal__flex_133lf modal__flex_1679k","s":"modal__s_133lf","m":"modal__m_133lf","l":"modal__l_133lf","fullscreen":"modal__fullscreen_133lf"};
 require('./desktop.css');
 
 var ContentDesktop = function (_a) {

package/modal/esm/components/content/Component.mobile.js

@@ -1,11 +1,11 @@
-import { a as __assign } from '../../tslib.es6-c79ec192.js';
+import { a as __assign } from '../../tslib.es6-5ba80151.js';
 import React from 'react';
 import 'classnames';
 import '../../../../base-modal/esm';
 import '../../Context.js';
 import { Content } from './Component.js';
 
-var styles = {"content":"modal__content_kjybg modal__content_mu7r9","flex":"modal__flex_kjybg modal__flex_mu7r9"};
+var styles = {"content":"modal__content_190o4 modal__content_1679k","flex":"modal__flex_190o4 modal__flex_1679k"};
 require('./mobile.css');
 
 var ContentMobile = function (props) { return (React.createElement(Content, __assign({ styles: styles }, props))); };

package/modal/esm/components/content/desktop.css

@@ -34,14 +34,14 @@
     /* scroll */
 
     /* mobile */
-}.modal__content_mu7r9 {
+}.modal__content_1679k {
     box-sizing: border-box;
     width: 100%
-}.modal__content_mu7r9:first-child {
+}.modal__content_1679k:first-child {
         padding-top: var(--modal-content-no-header-top-padding);
-    }.modal__content_mu7r9:last-child {
+    }.modal__content_1679k:last-child {
         padding-bottom: var(--modal-content-no-footer-bottom-padding);
-    }.modal__flex_mu7r9 {
+    }.modal__flex_1679k {
     flex: 1 1 auto;
 }
 :root {
@@ -369,10 +369,23 @@
     --color-dark-bg-primary-inverted-alpha-10: rgba(255, 255, 255, 0.1);
     --color-dark-bg-primary-inverted-alpha-15: rgba(255, 255, 255, 0.15);
     --color-dark-bg-primary-inverted-alpha-20: rgba(255, 255, 255, 0.2);
+    --color-dark-bg-primary-inverted-alpha-30: rgba(255, 255, 255, 0.3);
     --color-dark-bg-primary-inverted-alpha-40: rgba(255, 255, 255, 0.4);
     --color-dark-bg-primary-inverted-alpha-50: rgba(255, 255, 255, 0.5);
+    --color-dark-bg-primary-inverted-alpha-60: rgba(255, 255, 255, 0.6);
+    --color-dark-bg-primary-inverted-alpha-80: rgba(255, 255, 255, 0.8);
+    --color-dark-bg-primary-inverted-shade-7: rgb(237, 237, 237);
+    --color-dark-bg-primary-inverted-shade-15: rgb(217, 217, 217);
+    --color-dark-bg-primary-inverted-shade-20: rgb(204, 204, 204);
+    --color-dark-bg-secondary-alpha-30: rgba(35, 53, 73, 0.3);
+    --color-dark-bg-secondary-tint-7: rgb(50, 67, 86);
+    --color-dark-bg-secondary-tint-15: rgb(68, 83, 100);
     --color-dark-bg-secondary-inverted-alpha-7: rgba(182, 188, 195, 0.07);
     --color-dark-bg-secondary-inverted-alpha-15: rgba(182, 188, 195, 0.15);
+    --color-dark-bg-secondary-inverted-alpha-30: rgba(182, 188, 195, 0.3);
+    --color-dark-bg-secondary-inverted-shade-7: rgb(169, 175, 181);
+    --color-dark-bg-secondary-inverted-shade-15: rgb(155, 160, 166);
+    --color-dark-bg-secondary-inverted-shade-20: rgb(146, 150, 156);
     --color-dark-bg-tertiary-tint-7: rgb(74, 89, 104);
     --color-dark-border-tertiary-inverted-alpha-30: rgba(182, 188, 195, 0.3);
     --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
@@ -398,6 +411,9 @@
     --color-dark-specialbg-component-tint-7: rgb(85, 99, 114);
     --color-dark-specialbg-component-tint-10: rgb(90, 104, 118);
     --color-dark-specialbg-component-tint-30: rgb(127, 137, 149);
+    --color-dark-specialbg-component-alpha-2: rgba(72, 87, 103, 0.02);
+    --color-dark-specialbg-component-alpha-14: rgba(72, 87, 103, 0.14);
+    --color-dark-specialbg-component-alpha-23: rgba(72, 87, 103, 0.23);
     --color-dark-specialbg-component-inverted-shade-15: rgba(9, 26, 45, 0.2095);
     --color-dark-text-link-shade-30: rgb(0, 85, 179);
     --color-dark-text-link-shade-50: rgb(0, 61, 128);
@@ -434,10 +450,23 @@
     --color-light-bg-primary-inverted-alpha-10: rgba(11, 31, 53, 0.1);
     --color-light-bg-primary-inverted-alpha-15: rgba(11, 31, 53, 0.15);
     --color-light-bg-primary-inverted-alpha-20: rgba(11, 31, 53, 0.2);
+    --color-light-bg-primary-inverted-alpha-30: rgba(11, 31, 53, 0.3);
     --color-light-bg-primary-inverted-alpha-40: rgba(11, 31, 53, 0.4);
     --color-light-bg-primary-inverted-alpha-50: rgba(11, 31, 53, 0.5);
+    --color-light-bg-primary-inverted-alpha-60: rgba(11, 31, 53, 0.6);
+    --color-light-bg-primary-inverted-alpha-80: rgba(11, 31, 53, 0.8);
+    --color-light-bg-primary-inverted-tint-7: rgb(28, 47, 67);
+    --color-light-bg-primary-inverted-tint-15: rgb(48, 65, 83);
+    --color-light-bg-primary-inverted-tint-20: rgb(60, 76, 93);
+    --color-light-bg-secondary-alpha-30: rgba(243, 244, 245, 0.3);
+    --color-light-bg-secondary-shade-7: rgb(226, 227, 228);
+    --color-light-bg-secondary-shade-15: rgb(207, 207, 208);
     --color-light-bg-secondary-inverted-alpha-7: rgba(35, 53, 73, 0.07);
     --color-light-bg-secondary-inverted-alpha-15: rgba(35, 53, 73, 0.15);
+    --color-light-bg-secondary-inverted-alpha-30: rgba(35, 53, 73, 0.3);
+    --color-light-bg-secondary-inverted-tint-7: rgb(50, 67, 86);
+    --color-light-bg-secondary-inverted-tint-15: rgb(68, 83, 100);
+    --color-light-bg-secondary-inverted-tint-20: rgb(79, 93, 109);
     --color-light-bg-tertiary-shade-7: rgb(215, 217, 219);
     --color-light-border-tertiary-inverted-alpha-30: rgba(109, 121, 134, 0.3);
     --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
@@ -463,6 +492,9 @@
     --color-light-specialbg-component-shade-7: rgba(10, 29, 49, 0.1351);
     --color-light-specialbg-component-shade-10: rgba(10, 28, 48, 0.163);
     --color-light-specialbg-component-shade-30: rgba(8, 22, 37, 0.349);
+    --color-light-specialbg-component-alpha-2: rgba(11, 31, 53, 0.02);
+    --color-light-specialbg-component-alpha-14: rgba(11, 31, 53, 0.14);
+    --color-light-specialbg-component-alpha-23: rgba(11, 31, 53, 0.23);
     --color-light-specialbg-component-inverted-tint-15: rgba(255, 255, 255, 0.2775);
     --color-light-text-link-tint-30: rgb(77, 162, 255);
     --color-light-text-link-tint-50: rgb(128, 189, 255);
@@ -653,20 +685,20 @@
     --modal-header-mobile-line-height: 24px;
     --modal-header-mobile-font-family: var(--font-family-system);
 }
-.modal__content_jqjm4 {
+.modal__content_133lf {
 }
-.modal__flex_jqjm4 {
+.modal__flex_133lf {
 }
-.modal__s_jqjm4 {
+.modal__s_133lf {
     padding: var(--modal-s-content-paddings);
 }
-.modal__m_jqjm4 {
+.modal__m_133lf {
     padding: var(--modal-m-content-paddings);
 }
-.modal__l_jqjm4,
-.modal__fullscreen_jqjm4 {
+.modal__l_133lf,
+.modal__fullscreen_133lf {
     padding: var(--modal-l-content-paddings)
 }
-.modal__l_jqjm4:last-child, .modal__fullscreen_jqjm4:last-child {
+.modal__l_133lf:last-child, .modal__fullscreen_133lf:last-child {
         padding-bottom: var(--modal-l-content-no-footer-bottom-padding);
     }

package/modal/esm/components/content/mobile.css

@@ -30,14 +30,14 @@
     /* scroll */
 
     /* mobile */
-}.modal__content_mu7r9 {
+}.modal__content_1679k {
     box-sizing: border-box;
     width: 100%
-}.modal__content_mu7r9:first-child {
+}.modal__content_1679k:first-child {
         padding-top: var(--modal-content-no-header-top-padding);
-    }.modal__content_mu7r9:last-child {
+    }.modal__content_1679k:last-child {
         padding-bottom: var(--modal-content-no-footer-bottom-padding);
-    }.modal__flex_mu7r9 {
+    }.modal__flex_1679k {
     flex: 1 1 auto;
 }
 :root {
@@ -365,10 +365,23 @@
     --color-dark-bg-primary-inverted-alpha-10: rgba(255, 255, 255, 0.1);
     --color-dark-bg-primary-inverted-alpha-15: rgba(255, 255, 255, 0.15);
     --color-dark-bg-primary-inverted-alpha-20: rgba(255, 255, 255, 0.2);
+    --color-dark-bg-primary-inverted-alpha-30: rgba(255, 255, 255, 0.3);
     --color-dark-bg-primary-inverted-alpha-40: rgba(255, 255, 255, 0.4);
     --color-dark-bg-primary-inverted-alpha-50: rgba(255, 255, 255, 0.5);
+    --color-dark-bg-primary-inverted-alpha-60: rgba(255, 255, 255, 0.6);
+    --color-dark-bg-primary-inverted-alpha-80: rgba(255, 255, 255, 0.8);
+    --color-dark-bg-primary-inverted-shade-7: rgb(237, 237, 237);
+    --color-dark-bg-primary-inverted-shade-15: rgb(217, 217, 217);
+    --color-dark-bg-primary-inverted-shade-20: rgb(204, 204, 204);
+    --color-dark-bg-secondary-alpha-30: rgba(35, 53, 73, 0.3);
+    --color-dark-bg-secondary-tint-7: rgb(50, 67, 86);
+    --color-dark-bg-secondary-tint-15: rgb(68, 83, 100);
     --color-dark-bg-secondary-inverted-alpha-7: rgba(182, 188, 195, 0.07);
     --color-dark-bg-secondary-inverted-alpha-15: rgba(182, 188, 195, 0.15);
+    --color-dark-bg-secondary-inverted-alpha-30: rgba(182, 188, 195, 0.3);
+    --color-dark-bg-secondary-inverted-shade-7: rgb(169, 175, 181);
+    --color-dark-bg-secondary-inverted-shade-15: rgb(155, 160, 166);
+    --color-dark-bg-secondary-inverted-shade-20: rgb(146, 150, 156);
     --color-dark-bg-tertiary-tint-7: rgb(74, 89, 104);
     --color-dark-border-tertiary-inverted-alpha-30: rgba(182, 188, 195, 0.3);
     --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
@@ -394,6 +407,9 @@
     --color-dark-specialbg-component-tint-7: rgb(85, 99, 114);
     --color-dark-specialbg-component-tint-10: rgb(90, 104, 118);
     --color-dark-specialbg-component-tint-30: rgb(127, 137, 149);
+    --color-dark-specialbg-component-alpha-2: rgba(72, 87, 103, 0.02);
+    --color-dark-specialbg-component-alpha-14: rgba(72, 87, 103, 0.14);
+    --color-dark-specialbg-component-alpha-23: rgba(72, 87, 103, 0.23);
     --color-dark-specialbg-component-inverted-shade-15: rgba(9, 26, 45, 0.2095);
     --color-dark-text-link-shade-30: rgb(0, 85, 179);
     --color-dark-text-link-shade-50: rgb(0, 61, 128);
@@ -430,10 +446,23 @@
     --color-light-bg-primary-inverted-alpha-10: rgba(11, 31, 53, 0.1);
     --color-light-bg-primary-inverted-alpha-15: rgba(11, 31, 53, 0.15);
     --color-light-bg-primary-inverted-alpha-20: rgba(11, 31, 53, 0.2);
+    --color-light-bg-primary-inverted-alpha-30: rgba(11, 31, 53, 0.3);
     --color-light-bg-primary-inverted-alpha-40: rgba(11, 31, 53, 0.4);
     --color-light-bg-primary-inverted-alpha-50: rgba(11, 31, 53, 0.5);
+    --color-light-bg-primary-inverted-alpha-60: rgba(11, 31, 53, 0.6);
+    --color-light-bg-primary-inverted-alpha-80: rgba(11, 31, 53, 0.8);
+    --color-light-bg-primary-inverted-tint-7: rgb(28, 47, 67);
+    --color-light-bg-primary-inverted-tint-15: rgb(48, 65, 83);
+    --color-light-bg-primary-inverted-tint-20: rgb(60, 76, 93);
+    --color-light-bg-secondary-alpha-30: rgba(243, 244, 245, 0.3);
+    --color-light-bg-secondary-shade-7: rgb(226, 227, 228);
+    --color-light-bg-secondary-shade-15: rgb(207, 207, 208);
     --color-light-bg-secondary-inverted-alpha-7: rgba(35, 53, 73, 0.07);
     --color-light-bg-secondary-inverted-alpha-15: rgba(35, 53, 73, 0.15);
+    --color-light-bg-secondary-inverted-alpha-30: rgba(35, 53, 73, 0.3);
+    --color-light-bg-secondary-inverted-tint-7: rgb(50, 67, 86);
+    --color-light-bg-secondary-inverted-tint-15: rgb(68, 83, 100);
+    --color-light-bg-secondary-inverted-tint-20: rgb(79, 93, 109);
     --color-light-bg-tertiary-shade-7: rgb(215, 217, 219);
     --color-light-border-tertiary-inverted-alpha-30: rgba(109, 121, 134, 0.3);
     --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
@@ -459,6 +488,9 @@
     --color-light-specialbg-component-shade-7: rgba(10, 29, 49, 0.1351);
     --color-light-specialbg-component-shade-10: rgba(10, 28, 48, 0.163);
     --color-light-specialbg-component-shade-30: rgba(8, 22, 37, 0.349);
+    --color-light-specialbg-component-alpha-2: rgba(11, 31, 53, 0.02);
+    --color-light-specialbg-component-alpha-14: rgba(11, 31, 53, 0.14);
+    --color-light-specialbg-component-alpha-23: rgba(11, 31, 53, 0.23);
     --color-light-specialbg-component-inverted-tint-15: rgba(255, 255, 255, 0.2775);
     --color-light-text-link-tint-30: rgb(77, 162, 255);
     --color-light-text-link-tint-50: rgb(128, 189, 255);
@@ -649,9 +681,9 @@
     --modal-header-mobile-line-height: 24px;
     --modal-header-mobile-font-family: var(--font-family-system);
 }
-.modal__content_kjybg {
+.modal__content_190o4 {
 
     padding: 0 var(--gap-m) 0;
 }
-.modal__flex_kjybg {
+.modal__flex_190o4 {
 }

package/modal/esm/components/footer/Component.desktop.js

@@ -1,11 +1,11 @@
-import { _ as __rest, a as __assign } from '../../tslib.es6-c79ec192.js';
+import { _ as __rest, a as __assign } from '../../tslib.es6-5ba80151.js';
 import React from 'react';
 import cn from 'classnames';
 import '../../../../base-modal/esm';
 import '../../Context.js';
 import { Footer } from './Component.js';
 
-var styles = {"footer":"modal__footer_dyf7r modal__footer_7ztap","highlighted":"modal__highlighted_dyf7r modal__highlighted_7ztap","sticky":"modal__sticky_dyf7r modal__sticky_7ztap","fullscreen":"modal__fullscreen_dyf7r","s":"modal__s_dyf7r","m":"modal__m_dyf7r","l":"modal__l_dyf7r"};
+var styles = {"footer":"modal__footer_gx0lt modal__footer_ayeos","highlighted":"modal__highlighted_gx0lt modal__highlighted_ayeos","sticky":"modal__sticky_gx0lt modal__sticky_ayeos","fullscreen":"modal__fullscreen_gx0lt","s":"modal__s_gx0lt","m":"modal__m_gx0lt","l":"modal__l_gx0lt"};
 require('./desktop.css');
 
 var FooterDesktop = function (_a) {

package/modal/esm/components/footer/Component.js

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import '../../../../base-modal/esm';
 import { ModalContext } from '../../Context.js';
 
-var layoutStyles = {"column":"modal__column_1a2fi","gap-16":"modal__gap-16_1a2fi","gap-24":"modal__gap-24_1a2fi","gap-32":"modal__gap-32_1a2fi","start":"modal__start_1a2fi","center":"modal__center_1a2fi","space-between":"modal__space-between_1a2fi"};
+var layoutStyles = {"column":"modal__column_1d10w","gap-16":"modal__gap-16_1d10w","gap-24":"modal__gap-24_1d10w","gap-32":"modal__gap-32_1d10w","start":"modal__start_1d10w","center":"modal__center_1d10w","space-between":"modal__space-between_1d10w"};
 require('./layout.css');
 
 var Footer = function (_a) {

package/modal/esm/components/footer/Component.mobile.js

@@ -1,11 +1,11 @@
-import { a as __assign } from '../../tslib.es6-c79ec192.js';
+import { a as __assign } from '../../tslib.es6-5ba80151.js';
 import React from 'react';
 import 'classnames';
 import '../../../../base-modal/esm';
 import '../../Context.js';
 import { Footer } from './Component.js';
 
-var styles = {"footer":"modal__footer_14hdu modal__footer_7ztap","highlighted":"modal__highlighted_14hdu modal__highlighted_7ztap","sticky":"modal__sticky_14hdu modal__sticky_7ztap"};
+var styles = {"footer":"modal__footer_mv55x modal__footer_ayeos","highlighted":"modal__highlighted_mv55x modal__highlighted_ayeos","sticky":"modal__sticky_mv55x modal__sticky_ayeos"};
 require('./mobile.css');
 
 var FooterMobile = function (props) { return React.createElement(Footer, __assign({ styles: styles }, props)); };