@alfalab/core-components-tabs 7.3.14 → 7.3.16

package/Component-3885b0d7.d.ts

@@ -1,5 +1,6 @@
-import { FC } from 'react';
+/// <reference types="react" />
+import React from 'react';
 import { NavigationBarProps } from "./types-ebda875c";
-declare const NavigationBar: FC<NavigationBarProps>;
+declare const NavigationBar: React.ForwardRefExoticComponent<NavigationBarProps & React.RefAttributes<HTMLDivElement>>;
 export * from "./Component-ebda875c";
 export { NavigationBar };

package/Component-3e68f8db.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { FC, SVGProps } from 'react';
-import { OptionShape } from "./typings-f9462675";
-import { OptionProps as BaseOptionProps } from "./typings-f9462675";
+import { OptionShape } from "./typings-5e1b8383";
+import { OptionProps as BaseOptionProps } from "./typings-5e1b8383";
 type OptionProps = Omit<BaseOptionProps, 'option'> & {
     option: OptionShape & {
         icon?: FC<SVGProps<SVGSVGElement>>;

package/Component-5e1b8383.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { CheckmarkProps } from "./typings-5e1b8383";
+declare const BaseCheckmark: ({ selected, disabled, className, multiple, }: CheckmarkProps) => JSX.Element;
+export { BaseCheckmark };

package/component-3885b0d7.d.ts

@@ -1,13 +1,13 @@
-/// <reference types="react-transition-group" />
 /// <reference types="react" />
 import React from "react";
-import { FC, ReactNode, HTMLAttributes, RefObject } from "react";
+import { FC, RefObject, ReactNode } from "react";
 import { NavigationBarProps } from "./index-e81c389f";
-import { SwipeableHandlers } from "react-swipeable/types";
+import { SwipeableHandlers } from "react-swipeable";
 import { BackdropProps } from "./index-ebda875c";
-import { TransitionProps } from 'react-transition-group/Transition';
-import { BaseModalProps } from "./index-bdb4c6b9";
-type HeaderProps = Omit<NavigationBarProps, "view" | "size">;
+import { BottomSheetProps } from "./types-24527f54";
+type HeaderProps = Omit<NavigationBarProps, "view" | "size"> & {
+    headerRef: RefObject<HTMLDivElement>;
+};
 declare const Header: FC<HeaderProps>;
 type FooterProps = {
     /**
@@ -39,178 +39,5 @@ type SwipeableBackdropProps = BackdropProps & {
     opacityTimeout?: number;
 };
 declare const SwipeableBackdrop: FC<SwipeableBackdropProps>;
-type BottomSheetTitleAlign = 'center' | 'left';
-type BottomSheetProps = {
-    /**
-     * Контент
-     */
-    children?: ReactNode;
-    /**
-     * Управление видимостью
-     */
-    open: boolean;
-    /**
-     * Заголовок
-     */
-    title?: ReactNode;
-    /**
-     * Размер заголовка
-     */
-    titleSize?: NavigationBarProps['titleSize'];
-    /**
-     * Подзаголовок.
-     */
-    subtitle?: NavigationBarProps['subtitle'];
-    /**
-     * Кнопка действия (обычно, это кнопка закрытия)
-     */
-    actionButton?: ReactNode;
-    /**
-     * Нода, компонент или функция возвращающая их
-     *
-     * Контейнер к которому будут добавляться порталы
-     */
-    container?: BaseModalProps['container'];
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Дополнительный класс
-     */
-    contentClassName?: string;
-    /**
-     * Дополнительные пропсы на контейнер.
-     */
-    containerProps?: HTMLAttributes<HTMLDivElement>;
-    /**
-     * Дополнительный класс
-     */
-    containerClassName?: string;
-    /**
-     * Дополнительный класс шапки
-     */
-    headerClassName?: string;
-    /**
-     * Дополнительный класс футера
-     */
-    footerClassName?: string;
-    /**
-     * Дополнительный класс для аддонов
-     */
-    addonClassName?: string;
-    /**
-     * Дополнительный класс для компонента крестика
-     */
-    closerClassName?: string;
-    /**
-     * Дополнительный класс для компонента стрелки назад
-     */
-    backerClassName?: string;
-    /**
-     * Дополнительный класс для компонента модального окна
-     */
-    modalClassName?: string;
-    /**
-     * Дополнительный класс для обертки модального окна
-     */
-    modalWrapperClassName?: string;
-    /**
-     * TransitionProps, прокидываются в компонент CSSTransitionProps.
-     */
-    transitionProps?: Partial<TransitionProps>;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * z-index компонента
-     */
-    zIndex?: number;
-    /**
-     * Будет ли свайпаться шторка
-     * @default true
-     */
-    swipeable?: boolean;
-    /**
-     * Слот слева
-     */
-    leftAddons?: ReactNode;
-    /**
-     * Слот справа
-     */
-    rightAddons?: ReactNode;
-    /**
-     * Слот снизу
-     */
-    bottomAddons?: ReactNode;
-    /**
-     * Наличие компонента крестика
-     */
-    hasCloser?: boolean;
-    /**
-     * Наличие компонента стрелки назад
-     */
-    hasBacker?: boolean;
-    /**
-     * Выравнивание заголовка
-     */
-    titleAlign?: BottomSheetTitleAlign;
-    /**
-     * Фиксирует шапку
-     */
-    stickyHeader?: boolean;
-    /**
-     * Фиксирует футер
-     */
-    stickyFooter?: boolean;
-    /**
-     * Высота шторки
-     */
-    initialHeight?: 'default' | 'full';
-    /**
-     * Будет ли виден оверлэй
-     */
-    hideOverlay?: boolean;
-    /**
-     * Будет ли видна шапка
-     */
-    hideHeader?: boolean;
-    /**
-     * Будет ли обрезан заголовок
-     */
-    trimTitle?: boolean;
-    /**
-     * Запретить закрытие шторки кликом на оверлэй
-     */
-    disableOverlayClick?: boolean;
-    /**
-     * Отключает блокировку скролла при открытии модального окна
-     */
-    disableBlockingScroll?: boolean;
-    /**
-     * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
-     * Не анимировать шторку при изменении размера вьюпорта
-     */
-    ignoreScreenChange?: boolean;
-    /**
-     * Свойства для Бэкдропа
-     */
-    backdropProps?: BaseModalProps['backdropProps'];
-    /**
-     * Реф на контейнер, в котором происходит скролл
-     */
-    scrollableContainerRef?: RefObject<HTMLElement>;
-    /**
-     * Обработчик закрытия
-     */
-    onClose: () => void;
-    /**
-     * Обработчик нажатия на стрелку назад
-     */
-    onBack?: () => void;
-};
-declare const HEADER_OFFSET = 24;
-declare const CLOSE_OFFSET = 0.2;
 declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>>;
-export { HeaderProps, Header, FooterProps, Footer, SwipeableBackdropProps, SwipeableBackdrop, BottomSheetTitleAlign, BottomSheetProps, HEADER_OFFSET, CLOSE_OFFSET, BottomSheet };
+export { HeaderProps, Header, FooterProps, Footer, SwipeableBackdropProps, SwipeableBackdrop, BottomSheet };

package/components/primary-tablist/Component.desktop.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var components_primaryTablist_Component = require('./Component.js');
-var index_module = require('../../index.module-1a4b95d7.js');
+var index_module = require('../../index.module-7c12577e.js');
 require('classnames');
 require('@alfalab/core-components-badge');
 require('@alfalab/core-components-keyboard-focusable');

package/components/primary-tablist/Component.mobile.js

@@ -6,7 +6,7 @@ var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var components_primaryTablist_Component = require('./Component.js');
-var index_module = require('../../index.module-1a4b95d7.js');
+var index_module = require('../../index.module-7c12577e.js');
 require('@alfalab/core-components-badge');
 require('@alfalab/core-components-keyboard-focusable');
 require('@alfalab/core-components-picker-button/desktop');
@@ -25,7 +25,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var mobileStyles = {"title":"tabs__title_18rbw tabs__title_1rewg","mobile":"tabs__mobile_18rbw"};
+var mobileStyles = {"title":"tabs__title_1dhj3 tabs__title_1js6z","mobile":"tabs__mobile_1dhj3"};
 require('./mobile.css')
 
 var styles = tslib.__assign(tslib.__assign({}, index_module.commonStyles), mobileStyles);

package/components/primary-tablist/Component.responsive.js

@@ -20,7 +20,7 @@ require('../../synthetic-events.js');
 require('../scrollable-container/Component.js');
 require('compute-scroll-into-view');
 require('../title/Component.js');
-require('../../index.module-1a4b95d7.js');
+require('../../index.module-7c12577e.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/components/primary-tablist/index.css

@@ -1,4 +1,4 @@
-/* hash: 14uyh */
+/* hash: 3y2c6 */
 :root {
 } /* deprecated */ :root {
     --color-light-border-accent: #ef3124;
@@ -83,11 +83,11 @@
     /* size l */
 
     /* size xl */
-} .tabs__component_1rewg {
+} .tabs__component_1js6z {
     position: relative;
     display: inline-flex;
     min-width: 100%
-} .tabs__component_1rewg:before {
+} .tabs__component_1js6z:before {
         content: '';
         display: block;
         position: absolute;
@@ -95,17 +95,17 @@
         height: 1px;
         width: 100%;
         background-color: var(--primary-tablist-bottom-border-color);
-    } .tabs__fullWidthScroll_1rewg {
+    } .tabs__fullWidthScroll_1js6z {
     min-width: calc(100% - 2 * var(--gap-m));
     margin: 0 var(--gap-m);
-} .tabs__container_1rewg {
+} .tabs__container_1js6z {
     position: relative;
     overflow: hidden;
 
     /* focus-outline fix */
     margin: var(--gap-2xs-neg) 0 var(--gap-2xs-neg) var(--gap-2xs-neg);
     padding: var(--gap-2xs) 0 var(--gap-2xs) var(--gap-2xs);
-} .tabs__title_1rewg {
+} .tabs__title_1js6z {
     display: flex;
     align-items: center;
     height: 100%;
@@ -122,76 +122,76 @@
             user-select: none;
     cursor: pointer;
     outline: none
-} .tabs__title_1rewg:not(.tabs__disabled_1rewg):hover {
+} .tabs__title_1js6z:not(.tabs__disabled_1js6z):hover {
         color: var(--primary-tablist-hover-color);
-    } .tabs__focused_1rewg {
+    } .tabs__focused_1js6z {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-} .tabs__collapsed_1rewg {
+} .tabs__collapsed_1js6z {
     order: 99;
     visibility: collapse;
-} .tabs__selected_1rewg {
+} .tabs__selected_1js6z {
     cursor: default;
     color: var(--primary-tablist-selected-color);
-} .tabs__disabled_1rewg {
+} .tabs__disabled_1js6z {
     cursor: var(--disabled-cursor);
     color: var(--primary-tablist-disabled-color);
-} .tabs__line_1rewg {
+} .tabs__line_1js6z {
     position: absolute;
     height: 3px;
     bottom: 0;
     left: 0;
     background-color: var(--primary-tablist-line-color);
     transition: transform 0.2s ease, width 0.2s ease;
-} /* sizes */ .tabs__s_1rewg .tabs__title_1rewg, .tabs__xs_1rewg .tabs__title_1rewg, .tabs__xxs_1rewg .tabs__title_1rewg {
+} /* sizes */ .tabs__s_1js6z .tabs__title_1js6z, .tabs__xs_1js6z .tabs__title_1js6z, .tabs__xxs_1js6z .tabs__title_1js6z {
         padding: var(--primary-tablist-s-padding);
         font-size: var(--primary-tablist-s-font-size);
         font-weight: var(--primary-tablist-s-font-weight);
         font-family: var(--primary-tablist-s-font-family);
         line-height: 24px;
-    } .tabs__s_1rewg .tabs__title_1rewg + .tabs__title_1rewg, .tabs__xs_1rewg .tabs__title_1rewg + .tabs__title_1rewg, .tabs__xxs_1rewg .tabs__title_1rewg + .tabs__title_1rewg {
+    } .tabs__s_1js6z .tabs__title_1js6z + .tabs__title_1js6z, .tabs__xs_1js6z .tabs__title_1js6z + .tabs__title_1js6z, .tabs__xxs_1js6z .tabs__title_1js6z + .tabs__title_1js6z {
         margin-left: var(--primary-tablist-s-gaps);
-    } .tabs__s_1rewg .tabs__pickerWrapper_1rewg, .tabs__xs_1rewg .tabs__pickerWrapper_1rewg, .tabs__xxs_1rewg .tabs__pickerWrapper_1rewg {
+    } .tabs__s_1js6z .tabs__pickerWrapper_1js6z, .tabs__xs_1js6z .tabs__pickerWrapper_1js6z, .tabs__xxs_1js6z .tabs__pickerWrapper_1js6z {
         margin-left: var(--primary-tablist-s-gaps);
-    } .tabs__s_1rewg .tabs__option_1rewg, .tabs__xs_1rewg .tabs__option_1rewg, .tabs__xxs_1rewg .tabs__option_1rewg {
+    } .tabs__s_1js6z .tabs__option_1js6z, .tabs__xs_1js6z .tabs__option_1js6z, .tabs__xxs_1js6z .tabs__option_1js6z {
         padding: 0;
-    } .tabs__m_1rewg .tabs__title_1rewg {
+    } .tabs__m_1js6z .tabs__title_1js6z {
         padding: var(--primary-tablist-m-padding);
         font-size: var(--primary-tablist-m-font-size);
         font-weight: var(--primary-tablist-m-font-weight);
         font-family: var(--primary-tablist-m-font-family);
         line-height: 24px;
-    } .tabs__m_1rewg .tabs__title_1rewg + .tabs__title_1rewg {
+    } .tabs__m_1js6z .tabs__title_1js6z + .tabs__title_1js6z {
         margin-left: var(--primary-tablist-m-gaps);
-    } .tabs__m_1rewg .tabs__pickerWrapper_1rewg {
+    } .tabs__m_1js6z .tabs__pickerWrapper_1js6z {
         margin-left: var(--primary-tablist-m-gaps);
-    } .tabs__m_1rewg .tabs__option_1rewg {
+    } .tabs__m_1js6z .tabs__option_1js6z {
         padding: 0;
-    } .tabs__l_1rewg .tabs__title_1rewg {
+    } .tabs__l_1js6z .tabs__title_1js6z {
         padding: var(--primary-tablist-l-padding);
         font-size: var(--primary-tablist-l-font-size);
         font-weight: var(--primary-tablist-l-font-weight);
         font-family: var(--primary-tablist-l-font-family);
         line-height: 24px;
-    } .tabs__l_1rewg .tabs__title_1rewg + .tabs__title_1rewg {
+    } .tabs__l_1js6z .tabs__title_1js6z + .tabs__title_1js6z {
         margin-left: var(--primary-tablist-l-gaps);
-    } .tabs__l_1rewg .tabs__pickerWrapper_1rewg {
+    } .tabs__l_1js6z .tabs__pickerWrapper_1js6z {
         margin-left: var(--primary-tablist-l-gaps);
-    } .tabs__l_1rewg .tabs__option_1rewg {
+    } .tabs__l_1js6z .tabs__option_1js6z {
         padding: 0;
-    } .tabs__xl_1rewg .tabs__title_1rewg {
+    } .tabs__xl_1js6z .tabs__title_1js6z {
         padding: var(--primary-tablist-xl-padding);
         font-size: var(--primary-tablist-xl-font-size);
         font-weight: var(--primary-tablist-xl-font-weight);
         font-family: var(--primary-tablist-xl-font-family);
         line-height: 32px;
-    } .tabs__xl_1rewg .tabs__title_1rewg + .tabs__title_1rewg {
+    } .tabs__xl_1js6z .tabs__title_1js6z + .tabs__title_1js6z {
         margin-left: var(--primary-tablist-xl-gaps);
-    } .tabs__xl_1rewg .tabs__pickerWrapper_1rewg {
+    } .tabs__xl_1js6z .tabs__pickerWrapper_1js6z {
         margin-left: var(--primary-tablist-xl-gaps);
-    } .tabs__xl_1rewg .tabs__option_1rewg {
+    } .tabs__xl_1js6z .tabs__option_1js6z {
         padding: 0;
-    } .tabs__rightAddons_1rewg {
+    } .tabs__rightAddons_1js6z {
     display: flex;
     justify-content: center;
     align-items: center;

package/components/primary-tablist/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 1cc73 */
+/* hash: 3uchs */
 :root {
 }/* deprecated */:root {
     --color-light-border-accent: #ef3124;
@@ -90,11 +90,11 @@
     /* size l */
 
     /* size xl */
-}.tabs__component_1rewg {
+}.tabs__component_1js6z {
     position: relative;
     display: inline-flex;
     min-width: 100%
-}.tabs__component_1rewg:before {
+}.tabs__component_1js6z:before {
         content: '';
         display: block;
         position: absolute;
@@ -102,17 +102,17 @@
         height: 1px;
         width: 100%;
         background-color: var(--primary-tablist-bottom-border-color);
-    }.tabs__fullWidthScroll_1rewg {
+    }.tabs__fullWidthScroll_1js6z {
     min-width: calc(100% - 2 * var(--gap-m));
     margin: 0 var(--gap-m);
-}.tabs__container_1rewg {
+}.tabs__container_1js6z {
     position: relative;
     overflow: hidden;
 
     /* focus-outline fix */
     margin: var(--gap-2xs-neg) 0 var(--gap-2xs-neg) var(--gap-2xs-neg);
     padding: var(--gap-2xs) 0 var(--gap-2xs) var(--gap-2xs);
-}.tabs__title_1rewg {
+}.tabs__title_1js6z {
     display: flex;
     align-items: center;
     height: 100%;
@@ -129,76 +129,76 @@
             user-select: none;
     cursor: pointer;
     outline: none
-}.tabs__title_1rewg:not(.tabs__disabled_1rewg):hover {
+}.tabs__title_1js6z:not(.tabs__disabled_1js6z):hover {
         color: var(--primary-tablist-hover-color);
-    }.tabs__focused_1rewg {
+    }.tabs__focused_1js6z {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-}.tabs__collapsed_1rewg {
+}.tabs__collapsed_1js6z {
     order: 99;
     visibility: collapse;
-}.tabs__selected_1rewg {
+}.tabs__selected_1js6z {
     cursor: default;
     color: var(--primary-tablist-selected-color);
-}.tabs__disabled_1rewg {
+}.tabs__disabled_1js6z {
     cursor: var(--disabled-cursor);
     color: var(--primary-tablist-disabled-color);
-}.tabs__line_1rewg {
+}.tabs__line_1js6z {
     position: absolute;
     height: 3px;
     bottom: 0;
     left: 0;
     background-color: var(--primary-tablist-line-color);
     transition: transform 0.2s ease, width 0.2s ease;
-}/* sizes */.tabs__s_1rewg .tabs__title_1rewg, .tabs__xs_1rewg .tabs__title_1rewg, .tabs__xxs_1rewg .tabs__title_1rewg {
+}/* sizes */.tabs__s_1js6z .tabs__title_1js6z, .tabs__xs_1js6z .tabs__title_1js6z, .tabs__xxs_1js6z .tabs__title_1js6z {
         padding: var(--primary-tablist-s-padding);
         font-size: var(--primary-tablist-s-font-size);
         font-weight: var(--primary-tablist-s-font-weight);
         font-family: var(--primary-tablist-s-font-family);
         line-height: 24px;
-    }.tabs__s_1rewg .tabs__title_1rewg + .tabs__title_1rewg, .tabs__xs_1rewg .tabs__title_1rewg + .tabs__title_1rewg, .tabs__xxs_1rewg .tabs__title_1rewg + .tabs__title_1rewg {
+    }.tabs__s_1js6z .tabs__title_1js6z + .tabs__title_1js6z, .tabs__xs_1js6z .tabs__title_1js6z + .tabs__title_1js6z, .tabs__xxs_1js6z .tabs__title_1js6z + .tabs__title_1js6z {
         margin-left: var(--primary-tablist-s-gaps);
-    }.tabs__s_1rewg .tabs__pickerWrapper_1rewg, .tabs__xs_1rewg .tabs__pickerWrapper_1rewg, .tabs__xxs_1rewg .tabs__pickerWrapper_1rewg {
+    }.tabs__s_1js6z .tabs__pickerWrapper_1js6z, .tabs__xs_1js6z .tabs__pickerWrapper_1js6z, .tabs__xxs_1js6z .tabs__pickerWrapper_1js6z {
         margin-left: var(--primary-tablist-s-gaps);
-    }.tabs__s_1rewg .tabs__option_1rewg, .tabs__xs_1rewg .tabs__option_1rewg, .tabs__xxs_1rewg .tabs__option_1rewg {
+    }.tabs__s_1js6z .tabs__option_1js6z, .tabs__xs_1js6z .tabs__option_1js6z, .tabs__xxs_1js6z .tabs__option_1js6z {
         padding: 0;
-    }.tabs__m_1rewg .tabs__title_1rewg {
+    }.tabs__m_1js6z .tabs__title_1js6z {
         padding: var(--primary-tablist-m-padding);
         font-size: var(--primary-tablist-m-font-size);
         font-weight: var(--primary-tablist-m-font-weight);
         font-family: var(--primary-tablist-m-font-family);
         line-height: 24px;
-    }.tabs__m_1rewg .tabs__title_1rewg + .tabs__title_1rewg {
+    }.tabs__m_1js6z .tabs__title_1js6z + .tabs__title_1js6z {
         margin-left: var(--primary-tablist-m-gaps);
-    }.tabs__m_1rewg .tabs__pickerWrapper_1rewg {
+    }.tabs__m_1js6z .tabs__pickerWrapper_1js6z {
         margin-left: var(--primary-tablist-m-gaps);
-    }.tabs__m_1rewg .tabs__option_1rewg {
+    }.tabs__m_1js6z .tabs__option_1js6z {
         padding: 0;
-    }.tabs__l_1rewg .tabs__title_1rewg {
+    }.tabs__l_1js6z .tabs__title_1js6z {
         padding: var(--primary-tablist-l-padding);
         font-size: var(--primary-tablist-l-font-size);
         font-weight: var(--primary-tablist-l-font-weight);
         font-family: var(--primary-tablist-l-font-family);
         line-height: 24px;
-    }.tabs__l_1rewg .tabs__title_1rewg + .tabs__title_1rewg {
+    }.tabs__l_1js6z .tabs__title_1js6z + .tabs__title_1js6z {
         margin-left: var(--primary-tablist-l-gaps);
-    }.tabs__l_1rewg .tabs__pickerWrapper_1rewg {
+    }.tabs__l_1js6z .tabs__pickerWrapper_1js6z {
         margin-left: var(--primary-tablist-l-gaps);
-    }.tabs__l_1rewg .tabs__option_1rewg {
+    }.tabs__l_1js6z .tabs__option_1js6z {
         padding: 0;
-    }.tabs__xl_1rewg .tabs__title_1rewg {
+    }.tabs__xl_1js6z .tabs__title_1js6z {
         padding: var(--primary-tablist-xl-padding);
         font-size: var(--primary-tablist-xl-font-size);
         font-weight: var(--primary-tablist-xl-font-weight);
         font-family: var(--primary-tablist-xl-font-family);
         line-height: 32px;
-    }.tabs__xl_1rewg .tabs__title_1rewg + .tabs__title_1rewg {
+    }.tabs__xl_1js6z .tabs__title_1js6z + .tabs__title_1js6z {
         margin-left: var(--primary-tablist-xl-gaps);
-    }.tabs__xl_1rewg .tabs__pickerWrapper_1rewg {
+    }.tabs__xl_1js6z .tabs__pickerWrapper_1js6z {
         margin-left: var(--primary-tablist-xl-gaps);
-    }.tabs__xl_1rewg .tabs__option_1rewg {
+    }.tabs__xl_1js6z .tabs__option_1js6z {
         padding: 0;
-    }.tabs__rightAddons_1rewg {
+    }.tabs__rightAddons_1js6z {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -764,6 +764,10 @@
     --color-light-text-secondary-inverted-tint-30: rgba(241, 241, 248, 0.678);
     --color-static-bg-primary-dark-alpha-10: rgba(18, 18, 18, 0.1);
     --color-static-bg-primary-dark-alpha-20: rgba(18, 18, 18, 0.2);
+    --color-static-bg-primary-dark-tint-15: rgb(54, 54, 54);
+    --color-static-bg-primary-dark-tint-20: rgb(65, 65, 65);
+    --color-static-graphic-light-shade-7: rgb(237, 237, 237);
+    --color-static-graphic-light-shade-15: rgb(217, 217, 217);
     --color-static-text-primary-light-alpha-30: rgba(255, 255, 255, 0.3);
 } :root {
     --color-static-corpbg-neutral: #bdc0c2;
@@ -1084,13 +1088,13 @@
 
     /* size xl */
     --secondary-tablist-xl-gaps: var(--gap-m);
-} .tabs__title_18rbw {
-} .tabs__mobile_18rbw .tabs__title_18rbw {
+} .tabs__title_1dhj3 {
+} .tabs__mobile_1dhj3 .tabs__title_1dhj3 {
         padding: var(--primary-tablist-mobile-padding);
         font-size: var(--primary-tablist-mobile-font-size);
         font-weight: var(--primary-tablist-mobile-font-weight);
         font-family: var(--primary-tablist-mobile-font-family);
         line-height: var(--primary-tablist-mobile-line-height)
-    } .tabs__mobile_18rbw .tabs__title_18rbw + .tabs__title_18rbw {
+    } .tabs__mobile_1dhj3 .tabs__title_1dhj3 + .tabs__title_1dhj3 {
             margin-left: var(--primary-tablist-mobile-gaps);
         }

package/components/scrollable-container/Component.js

@@ -12,7 +12,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var computeScrollIntoView__default = /*#__PURE__*/_interopDefaultCompat(computeScrollIntoView);
 
-var styles = {"container":"tabs__container_1km8q","fullWidthScroll":"tabs__fullWidthScroll_1km8q"};
+var styles = {"container":"tabs__container_101i3","fullWidthScroll":"tabs__fullWidthScroll_101i3"};
 require('./index.css')
 
 /**

package/components/scrollable-container/index.css

@@ -1,4 +1,4 @@
-/* hash: 178oc */
+/* hash: 6bs6x */
 :root {
 } /* 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 */ /* 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 */
@@ -42,7 +42,7 @@
     /* size l */
 
     /* size xl */
-} .tabs__container_1km8q {
+} .tabs__container_101i3 {
     position: relative;
     overflow-x: auto;
     overflow-y: hidden;
@@ -52,10 +52,10 @@
     /* focus-outline fix */
     margin: var(--gap-2xs-neg) 0 var(--gap-2xs-neg) var(--gap-2xs-neg);
     padding: var(--gap-2xs) 0 var(--gap-2xs) var(--gap-2xs)
-} .tabs__container_1km8q::-webkit-scrollbar {
+} .tabs__container_101i3::-webkit-scrollbar {
         display: none;
-    } .tabs__container_1km8q > * {
+    } .tabs__container_101i3 > * {
         flex-shrink: 0;
-    } .tabs__fullWidthScroll_1km8q {
+    } .tabs__fullWidthScroll_101i3 {
     margin: 0 var(--gap-m-neg);
 }

package/components/secondary-tablist/Component.desktop.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var components_secondaryTablist_Component = require('./Component.js');
-var index_module = require('../../index.module-38cd83a8.js');
+var index_module = require('../../index.module-530fdcfb.js');
 require('classnames');
 require('@alfalab/core-components-tag');
 require('../../hooks/use-tabs.js');

package/components/secondary-tablist/Component.mobile.js

@@ -6,7 +6,7 @@ var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var components_secondaryTablist_Component = require('./Component.js');
-var index_module = require('../../index.module-38cd83a8.js');
+var index_module = require('../../index.module-530fdcfb.js');
 require('@alfalab/core-components-tag');
 require('../../hooks/use-tabs.js');
 require('../scrollable-container/Component.js');
@@ -17,7 +17,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var mobileStyles = {"title":"tabs__title_of68k tabs__title_da1wu","mobile":"tabs__mobile_of68k"};
+var mobileStyles = {"title":"tabs__title_1d52w tabs__title_of7lb","mobile":"tabs__mobile_1d52w"};
 require('./mobile.css')
 
 var styles = tslib.__assign(tslib.__assign({}, index_module.commonStyles), mobileStyles);

package/components/secondary-tablist/Component.responsive.js

@@ -13,7 +13,7 @@ require('@alfalab/core-components-tag');
 require('../../hooks/use-tabs.js');
 require('../scrollable-container/Component.js');
 require('compute-scroll-into-view');
-require('../../index.module-38cd83a8.js');
+require('../../index.module-530fdcfb.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }